/**
 * File: assets/css/promo-progress-bar.css
 * Description: Styles for Multi-Tier Cart Progress Bar (Freeship 200k & 50k Discount at 500k).
 * Enforces Kamereo / Bách Hóa Xanh design standard, 100% Lucide SVG icons, zero emoji, responsive.
 */

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-11-09 - Dev: Worker M1
   Mục đích: Giao diện thanh tiến trình ưu đãi bậc thang trong Giỏ hàng & Mini-cart
   ========================================================================== */

.ksf-promo-progress-bar {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
	margin-bottom: 20px;
	padding: 14px 18px 22px 18px;
	transition: all 0.3s ease;
}

/* 1. Context variations: Cart page vs Mini-cart */
.ksf-promo-progress-bar.ksf-promo-context-cart {
	margin-bottom: 22px;
	padding: 16px 20px 24px 20px;
}

.ksf-promo-progress-bar.ksf-promo-context-mini-cart {
	margin: 10px 12px 16px 12px;
	padding: 12px 14px 20px 14px;
	border-radius: 10px;
	background: #fafaf9;
}

/* 2. Dòng thông điệp trạng thái ưu đãi (Notice Box) */
.ksf-promo-notice-box {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 500;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ksf-promo-notice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #2563eb;
}

.ksf-promo-notice-icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.ksf-promo-notice-text {
	flex: 1;
	word-break: break-word;
}

/* Khi đạt Mốc 1 (Freeship) */
.ksf-promo-progress-bar.is-tier1-done .ksf-promo-notice-box {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

.ksf-promo-progress-bar.is-tier1-done .ksf-promo-notice-icon {
	color: #008848;
}

/* Khi đạt Mốc 2 (Hoàn tất cả Freeship & Giảm 50k) */
.ksf-promo-progress-bar.is-completed .ksf-promo-notice-box {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.ksf-promo-progress-bar.is-completed .ksf-promo-notice-icon {
	color: #059669;
}

/* 3. Khung rãnh tiến trình và các mốc (Track & Milestones) */
.ksf-promo-track-wrapper {
	position: relative;
	margin-top: 18px;
	padding: 0 20px;
	box-sizing: border-box;
}

.ksf-promo-track {
	width: 100%;
	height: 8px;
	background: #e2e8f0;
	border-radius: 999px;
	position: relative;
	overflow: hidden;
}

.ksf-promo-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #10b981 0%, #008848 100%);
	border-radius: 999px;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Các mốc bậc thang (Milestone Nodes) */
.ksf-promo-node {
	position: absolute;
	top: -9px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
	pointer-events: none;
}

.ksf-promo-circle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #cbd5e1;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	transition: all 0.3s ease;
}

.ksf-promo-circle svg {
	display: block;
}

/* Mốc 1: 200k (Vị trí 50%) */
.ksf-node-tier1 {
	left: 50%;
	transform: translateX(-50%);
}

/* Mốc 2: 500k (Vị trí 100% cuối thanh) */
.ksf-node-tier2 {
	right: 20px;
	transform: translateX(50%);
}

/* Trạng thái đã đạt mốc (is-achieved) */
.ksf-promo-node.is-achieved .ksf-promo-circle {
	background: #008848;
	border-color: #008848;
	color: #ffffff;
	box-shadow: 0 0 0 3px rgba(0, 136, 72, 0.18);
}

/* Trạng thái hoàn thành toàn bộ */
.ksf-promo-progress-bar.is-completed .ksf-promo-node.is-achieved .ksf-promo-circle {
	box-shadow: 0 0 0 4px rgba(0, 136, 72, 0.22);
}

/* 5. Nhãn mốc ưu đãi (Label & Threshold) */
.ksf-promo-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5px;
	white-space: nowrap;
	line-height: 1.25;
}

.ksf-promo-title {
	font-size: 11.5px;
	font-weight: 700;
	color: #334155;
	transition: color 0.3s ease;
}

.ksf-promo-threshold {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	transition: color 0.3s ease;
}

.ksf-promo-node.is-achieved .ksf-promo-title {
	color: #008848;
}

.ksf-promo-node.is-achieved .ksf-promo-threshold {
	color: #008848;
}

/* 6. Định dạng dòng Phí/Giảm giá trong Bảng Tóm tắt đơn hàng */
.cart_totals tr.fee th,
.cart_totals tr.fee td,
.woocommerce-checkout-review-order-table tr.fee th,
.woocommerce-checkout-review-order-table tr.fee td {
	color: #008848 !important;
	font-weight: 600 !important;
}

.cart_totals tr.fee td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tr.fee td .woocommerce-Price-amount {
	color: #008848 !important;
	font-weight: 700 !important;
}

/* 7. Responsive Mobile Tối Ưu (<= 768px & <= 480px) */
@media (max-width: 768px) {
	.ksf-promo-progress-bar {
		margin-bottom: 16px;
		padding: 12px 14px 20px 14px;
	}

	.ksf-promo-notice-box {
		font-size: 12.5px;
		padding: 8px 10px;
	}

	.ksf-promo-track-wrapper {
		margin-top: 16px;
		padding: 0 24px 0 16px;
	}

	.ksf-promo-track {
		height: 7px;
	}

	.ksf-promo-circle {
		width: 24px;
		height: 24px;
	}

	.ksf-promo-circle svg {
		width: 12px;
		height: 12px;
	}

	.ksf-node-tier2 {
		right: 24px;
	}

	.ksf-promo-title {
		font-size: 11px;
	}

	.ksf-promo-threshold {
		font-size: 10px;
	}
}

@media (max-width: 480px) {
	.ksf-promo-track-wrapper {
		padding: 0 28px 0 14px;
	}

	.ksf-node-tier2 {
		right: 28px;
	}

	.ksf-node-tier2 .ksf-promo-label {
		transform: translateX(-15%);
	}
}

/* ===================== END [DPS CUSTOM FIX] ===================== */

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-11-09 - Dev: Worker M1
   Mục đích: Định kiểu thanh tiến trình ưu đãi đa cấp trong Sticky Bottom Bar Mobile
   ========================================================================== */
.ksf-promo-progress-bar.ksf-promo-context-sticky-mobile {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 100% !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-notice-box {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	color: #1e40af !important;
	box-sizing: border-box !important;
}

.ksf-promo-context-sticky-mobile.is-tier1-done .ksf-promo-notice-box {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	color: #15803d !important;
}

.ksf-promo-context-sticky-mobile.is-completed .ksf-promo-notice-box {
	background: #ecfdf5 !important;
	border-color: #a7f3d0 !important;
	color: #065f46 !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-notice-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-notice-icon svg {
	width: 13px !important;
	height: 13px !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-track-wrapper {
	position: relative !important;
	margin-top: 10px !important;
	margin-bottom: 2px !important;
	padding: 0 20px 0 10px !important;
	box-sizing: border-box !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-track {
	width: 100% !important;
	height: 5px !important;
	background: #e2e8f0 !important;
	border-radius: 999px !important;
	position: relative !important;
	overflow: hidden !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-fill {
	height: 100% !important;
	background: linear-gradient(90deg, #10b981 0%, #008848 100%) !important;
	border-radius: 999px !important;
	transition: width 0.3s ease !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-node {
	position: absolute !important;
	top: -7px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	pointer-events: none !important;
}

.ksf-promo-context-sticky-mobile .ksf-node-tier1 {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.ksf-promo-context-sticky-mobile .ksf-node-tier2 {
	right: 20px !important;
	transform: translateX(50%) !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-circle {
	width: 19px !important;
	height: 19px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 1.5px solid #cbd5e1 !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-circle svg {
	width: 10px !important;
	height: 10px !important;
	display: block !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-node.is-achieved .ksf-promo-circle {
	background: #008848 !important;
	border-color: #008848 !important;
	color: #ffffff !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-label {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	margin-top: 2px !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-title {
	font-size: 9.5px !important;
	font-weight: 700 !important;
	color: #334155 !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-threshold {
	font-size: 8.5px !important;
	font-weight: 600 !important;
	color: #64748b !important;
}

.ksf-promo-context-sticky-mobile .ksf-promo-node.is-achieved .ksf-promo-title,
.ksf-promo-context-sticky-mobile .ksf-promo-node.is-achieved .ksf-promo-threshold {
	color: #008848 !important;
}

@media (max-width: 480px) {
	.ksf-promo-context-sticky-mobile .ksf-node-tier2 .ksf-promo-label {
		transform: translateX(-15%) !important;
	}
}

/* ==========================================================================
   [DPS CUSTOM FIX] - 2026-11-09 - Dev: Worker M1
   Mục đích: Dải tiến trình ưu đãi tinh gọn trên Mobile Sticky Bar (Zero Overlap)
   ========================================================================== */
.ksf-mobile-sticky-promo-strip {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #eff6ff;
	border-bottom: 1px solid #dbeafe;
	position: relative;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.ksf-mobile-sticky-promo-strip.is-tier1-done {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.ksf-mobile-sticky-promo-strip.is-completed {
	background: #ecfdf5;
	border-color: #a7f3d0;
}

.ksf-sticky-promo-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 12px;
	gap: 8px;
}

.ksf-sticky-promo-msg {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.25;
	color: #1e40af;
	min-width: 0;
	flex: 1 1 auto;
}

.ksf-mobile-sticky-promo-strip.is-tier1-done .ksf-sticky-promo-msg {
	color: #15803d;
}

.ksf-mobile-sticky-promo-strip.is-completed .ksf-sticky-promo-msg {
	color: #065f46;
}

.ksf-sticky-promo-msg svg {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
}

.ksf-sticky-promo-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ksf-sticky-promo-badge {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	background: #dbeafe;
	color: #1d4ed8;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

.ksf-mobile-sticky-promo-strip.is-tier1-done .ksf-sticky-promo-badge {
	background: #dcfce7;
	color: #166534;
}

.ksf-mobile-sticky-promo-strip.is-completed .ksf-sticky-promo-badge {
	background: #d1fae5;
	color: #047857;
}

.ksf-sticky-promo-line-track {
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
	position: relative;
}

.ksf-sticky-promo-line-fill {
	height: 100%;
	background: linear-gradient(90deg, #10b981 0%, #008848 100%);
	transition: width 0.35s ease;
}

.ksf-sticky-pip {
	position: absolute;
	top: -2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid #94a3b8;
	transform: translateX(-50%);
	box-sizing: border-box;
	z-index: 2;
}

.ksf-pip-tier1 {
	left: 50%;
}

.ksf-pip-tier2 {
	left: 100%;
	transform: translateX(-100%);
}

.ksf-sticky-pip.is-achieved {
	background: #008848;
	border-color: #008848;
}