/* ==========================================================================
   Bajineh Funnel - Front-end Styles
   RTL, Mobile-First, No external dependencies

   پالت رنگی:
   - پس‌زمینه: گرادیان سبز تیره برند (#1f3c32 → #255441)
   - رنگ اصلی/برجسته (دکمه‌ها، تیتر، نوار پیشرفت): طلایی روشن گرم
   - متن روی پس‌زمینه تیره: کرم/سفید ملایم با کنتراست بالا
   - کارت‌ها: شیشه‌ای (glassmorphism) روی پس‌زمینه سبز
   ========================================================================== */

.bf-funnel-wrapper {
	/* --- برند: سبز تیره --- */
	--bf-bg-start: #1f3c32;
	--bf-bg-end: #255441;

	/* --- رنگ‌های روشن مکمل (طلایی/کهربایی) برای دکمه‌ها، تیتر و لمس‌های برجسته --- */
	--bf-primary: #f2c265;
	--bf-primary-light: #ffe2a8;
	--bf-primary-dark: #d9a545;

	/* --- متن روی پس‌زمینه تیره --- */
	--bf-text: #f6f3ea;
	--bf-muted: #b9cfc2;
	--bf-on-primary: #1f3c32;

	/* --- وضعیت‌ها (روشن، خوانا روی سبز تیره) --- */
	--bf-success: #6ee7a8;
	--bf-error: #ff9a8b;

	/* --- سطوح شیشه‌ای --- */
	--bf-glass-bg: rgba(255, 255, 255, 0.07);
	--bf-glass-bg-soft: rgba(255, 255, 255, 0.04);
	--bf-border: rgba(255, 255, 255, 0.16);

	direction: rtl;
	max-width: 680px;
	margin: 0 auto;
	padding: 28px 16px 60px;
	box-sizing: border-box;
	color: var(--bf-text);
	font-family: inherit;
	position: relative;
}

.bf-funnel-wrapper *,
.bf-funnel-wrapper *::before,
.bf-funnel-wrapper *::after {
	box-sizing: border-box;
}

/* پس‌زمینه گرادیانی سبز برند برای کل صفحهٔ لندینگ (تمام‌صفحه، بدون هدر/فوتر قالب) */
body.bf-funnel-page {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(160deg, #1f3c32 0%, #255441 55%, #1f3c32 100%);
	background-attachment: fixed;
	background-color: #1f3c32;
}

/* ---------- Animations ---------- */
@keyframes bf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bf-slide-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes bf-spin {
	to { transform: rotate(360deg); }
}

@keyframes bf-spin-pulse {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

@keyframes bf-glow-pulse {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

.bf-step {
	animation: bf-fade-in .35s ease, bf-slide-up .35s ease;
}

/* ---------- Step 1: Title ---------- */
.bf-titr {
	font-size: clamp(24px, 6.5vw, 34px);
	font-weight: 800;
	line-height: 1.45;
	text-align: center;
	background: linear-gradient(90deg, var(--bf-primary-light), var(--bf-primary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 8px 0 12px;
}

.bf-m-titr {
	text-align: center;
	color: var(--bf-muted);
	font-size: 15px;
	line-height: 1.9;
	margin-bottom: 24px;
}

/* ---------- Video Cover (locked) ---------- */
.bf-video-cover {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 40%, rgba(242, 194, 101, 0.18), transparent 60%),
		linear-gradient(135deg, #14261f, #2b6049);
	border: 1px solid var(--bf-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.bf-video-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	backdrop-filter: blur(6px);
	background: linear-gradient(180deg, rgba(10, 24, 19, .28), rgba(10, 24, 19, .68));
}

.bf-video-cover-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transform: scale(1.015);
}

.bf-video-cover-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	margin-bottom: 10px;
	color: var(--bf-primary);
	filter: drop-shadow(0 0 12px rgba(242, 194, 101, .45));
	animation: bf-glow-pulse 2.4s ease-in-out infinite;
}

.bf-cart-icon {
	vertical-align: -3px;
	margin-inline-end: 4px;
	flex-shrink: 0;
}

.bf-video-cover-text {
	z-index: 2;
	color: var(--bf-text);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 0 20px;
	margin: 0;
}

/* ---------- Forms ---------- */
.bf-form-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bf-phone-input {
	flex: 1 1 60%;
	min-width: 0;
	direction: ltr;
	text-align: center;
	font-size: 17px;
	padding: 14px 12px;
	border: 2px solid transparent;
	border-radius: 12px;
	outline: none;
	background: #fbf8f1;
	color: #1f3c32;
	font-weight: 600;
	transition: border-color .2s, box-shadow .2s;
}

.bf-phone-input::placeholder {
	color: #8a9890;
	font-weight: 400;
}

.bf-phone-input:focus {
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 4px rgba(242, 194, 101, .18);
}

.bf-submit-btn,
.bf-add-to-cart-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 35%;
	min-height: 50px;
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--bf-primary-light), var(--bf-primary-dark));
	color: var(--bf-on-primary);
	border: none;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(217, 165, 69, .28);
	transition: filter .2s, transform .1s;
}

.bf-submit-btn:hover,
.bf-add-to-cart-btn:hover {
	filter: brightness(1.06);
}

.bf-submit-btn:active,
.bf-add-to-cart-btn:active {
	transform: scale(.98);
}

.bf-submit-btn:disabled,
.bf-add-to-cart-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.bf-add-to-cart-btn {
	width: 100%;
	margin-top: 14px;
}

.bf-form-error {
	color: var(--bf-error);
	font-size: 13px;
	font-weight: 600;
	margin: 8px 2px 0;
	min-height: 18px;
}

/* ---------- Loading Spinner ---------- */
.bf-btn-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.bf-btn-spinner {
	display: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(31, 60, 50, .3);
	border-top-color: var(--bf-on-primary);
	border-right-color: var(--bf-on-primary);
	border-radius: 50%;
	position: absolute;
	inset: 0;
	margin: auto;
	will-change: transform, opacity;
	animation:
		bf-spin .8s cubic-bezier(.55, .15, .45, .85) infinite,
		bf-spin-pulse 1.4s ease-in-out infinite;
}

.bf-loading .bf-btn-text {
	visibility: hidden;
}

.bf-loading .bf-btn-spinner {
	display: block;
}

/* ---------- OTP Inputs ---------- */
.bf-otp-desc {
	text-align: center;
	font-size: 14px;
	color: var(--bf-muted);
	margin-bottom: 16px;
}

.bf-otp-phone-display {
	display: inline-block;
	font-weight: 700;
	color: var(--bf-primary-light);
}

.bf-otp-inputs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.bf-otp-digit {
	width: 48px;
	height: 56px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	border: 2px solid transparent;
	border-radius: 12px;
	outline: none;
	direction: ltr;
	background: #fbf8f1;
	color: #1f3c32;
	transition: border-color .2s, box-shadow .2s;
}

.bf-otp-digit:focus {
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 4px rgba(242, 194, 101, .18);
}

.bf-otp-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	font-size: 13px;
}

.bf-edit-phone-btn,
.bf-resend-btn {
	background: none;
	border: none;
	color: var(--bf-primary-light);
	cursor: pointer;
	font-size: 13px;
	padding: 4px;
	font-weight: 600;
}

.bf-resend-btn:disabled {
	color: var(--bf-muted);
	cursor: not-allowed;
}

/* ---------- Step 2: Video / Description ---------- */
.bf-video-wrapper {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 18px;
	border: 1px solid var(--bf-border);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
	background: #000;
}

.bf-video-wrapper .video-js {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

.bf-video-wrapper .video-js .vjs-big-play-button {
	background-color: rgba(217, 165, 69, .85);
	border-color: var(--bf-primary-light);
}

.bf-video-wrapper .video-js:hover .vjs-big-play-button,
.bf-video-wrapper .video-js .vjs-big-play-button:hover {
	background-color: var(--bf-primary-dark);
}

.bf-video-wrapper .video-js .vjs-control-bar {
	background: rgba(31, 60, 50, .85);
}

.bf-description {
	line-height: 2;
	font-size: 15px;
	margin-bottom: 18px;
	color: var(--bf-text);
}

/* ---------- Progress Bar ---------- */
.bf-progress-wrapper {
	margin-bottom: 18px;
}

.bf-progress-bar {
	width: 100%;
	height: 14px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid var(--bf-border);
	border-radius: 20px;
	overflow: hidden;
}

.bf-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bf-primary-dark), var(--bf-primary-light));
	border-radius: 20px;
	transition: width .6s ease;
}

.bf-progress-label {
	text-align: center;
	font-size: 13px;
	color: var(--bf-muted);
	margin-top: 8px;
}

.bf-des-packages {
	margin-bottom: 18px;
	line-height: 1.9;
	color: var(--bf-text);
}

/* ---------- Product Card ---------- */
.bf-product-card {
	border: 1px solid var(--bf-border);
	border-radius: 18px;
	padding: 18px;
	background: var(--bf-glass-bg);
	backdrop-filter: blur(10px);
}

.bf-product-image {
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 14px;
}

.bf-product-image img {
	width: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* کپسول درصد تخفیف روی گوشه عکس */
.bf-discount-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #ff6b5e, #e0432f);
	color: #fff;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 3px 10px rgba(224, 67, 47, .35);
	line-height: 1.6;
}

.bf-product-title {
	font-size: 18px;
	margin: 0 0 10px;
	color: #fff !important;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

.bf-product-price {
	width: fit-content;
	max-width: 100%;
	min-height: 54px;
	margin: 0 auto;
	padding: 9px 16px;
	border: 1px solid rgba(242, 194, 101, .34);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(10, 29, 23, .72), rgba(255, 255, 255, .055));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .16);
	font-size: 18px;
	font-weight: 850;
	color: var(--bf-primary-light) !important;
	text-align: center;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	direction: rtl;
	line-height: 1.65;
}

.bf-product-card .bf-product-price .bf-current-price,
.bf-product-card .bf-product-price .bf-sale-price,
.bf-product-card .bf-product-price .bf-current-price .amount,
.bf-product-card .bf-product-price .bf-sale-price .amount,
.bf-product-card .bf-product-price .bf-current-price bdi,
.bf-product-card .bf-product-price .bf-sale-price bdi {
	color: var(--bf-primary-light) !important;
	font-size: 19px !important;
	font-weight: 850 !important;
	text-decoration: none !important;
}

.bf-product-card .bf-product-price .bf-old-price,
.bf-product-card .bf-product-price .bf-old-price .amount,
.bf-product-card .bf-product-price .bf-old-price bdi {
	color: rgba(255, 255, 255, .7) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration-color: rgba(255, 255, 255, .7) !important;
	text-decoration-thickness: 1px !important;
}

.bf-product-card .bf-product-price ins {
	text-decoration: none !important;
	background: transparent !important;
}

.bf-product-card .bf-product-price .woocommerce-Price-currencySymbol {
	color: #fff !important;
	font-size: .72em !important;
	font-weight: 650 !important;
	margin-inline-start: 3px;
}

/* ---------- Variations: پیل‌های افقی مطابق طرح ---------- */
.bf-variations-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.bf-variation-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 24px;
	padding: 10px 20px;
	cursor: pointer;
	background: rgba(255, 255, 255, .055);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
	transition: border-color .2s, background .2s, color .2s, transform .15s, box-shadow .2s;
}

.bf-variation-option:hover {
	border-color: rgba(242, 194, 101, .58);
	background: rgba(242, 194, 101, .1);
	transform: translateY(-1px);
}

.bf-variation-option.bf-selected {
	border-color: var(--bf-primary-light);
	background: linear-gradient(135deg, #ffe2a8 0%, #f2c265 48%, #d9a545 100%);
	box-shadow: 0 6px 18px rgba(217, 165, 69, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.bf-variation-option.bf-selected .bf-variation-label {
	color: var(--bf-on-primary);
	font-weight: 800;
}

.bf-variation-option.bf-out-of-stock {
	opacity: .5;
	cursor: not-allowed;
	filter: grayscale(1);
}

/* رادیو مخفی است - خود پیل نشانگر انتخاب است (مطابق طرح تصویر) */
.bf-variation-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.bf-variation-label {
	font-size: 14px;
	font-weight: 700;
	color: #fff !important;
	white-space: nowrap;
}

.bf-variation-option.bf-selected .bf-variation-label {
	color: #18352b !important;
}

.bf-stock-badge {
	font-size: 11px;
	color: var(--bf-error);
	font-weight: 600;
}

/* ---------- Utility ---------- */
.bf-hidden {
	display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 420px) {
	.bf-otp-digit {
		width: 42px;
		height: 50px;
		font-size: 20px;
	}

	.bf-form-group {
		flex-direction: column;
	}

	.bf-submit-btn {
		flex: 1 1 100%;
	}
}

/* =========================================================
 * سازگاری با قالب سایت (Pars Kala) - قیف فروش یک لندینگ‌پیج
 * مستقل است و نباید نوار پایین موبایل/دکمه شناور تماس با ما
 * قالب اصلی روی آن نمایش داده شود.
 * ========================================================= */
body.bf-funnel-page .mobile-navbar-menu,
body.bf-funnel-page .mobile-bottom-navbr,
body.bf-funnel-page .call_box,
body.bf-funnel-page .call_main,
body.bf-funnel-page .prk-open-caller,
body.bf-funnel-page .prk-close-caller,
body.bf-funnel-page .prk-static-sidebar,
body.bf-funnel-page #cart-sidebar {
	display: none !important;
}

/* اگر تم فاصله پایین صفحه برای جا باز کردن نوار موبایل اضافه کرده باشد */
body.bf-funnel-page {
	padding-bottom: 0 !important;
}