/* ===========================================================================
   Joint Flexi page layout. Builds on tokens.css + components.css (Everest).
   Tokens only, logical properties only (RTL).

   Shared classes, also used by thanks / privacy / terms:
   .container [.container--narrow]   centered column
   .section [.section--subtle]       vertical rhythm, optional gray band
   .page-hero > h1 + p               title band at the top of an inner page
   .prose                            long-form legal text (h2, h3, p, ul, ol, li, a)
   .ev-card.thanks-card              centered confirmation card
   .icon-bubble [--lg]               round green icon holder for <iconify-icon>
   .sr-only                          visually hidden text
   =========================================================================== */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	overflow-x: hidden;
}

h1, h2, h3 { color: var(--text-strong); line-height: var(--leading-tight); font-weight: var(--fw-bold); }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); }

/* Reserve the icon box before the Iconify script upgrades the element. */
iconify-icon { display: inline-block; inline-size: 1em; block-size: 1em; flex-shrink: 0; vertical-align: -0.125em; }

.sr-only {
	position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Anchored sections clear the sticky header. */
section[id] { scroll-margin-top: calc(var(--navbar-h) - var(--space-2)); }

/* ---- Layout primitives (shared) ---- */
.container {
	inline-size: 100%;
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-inline-size: 760px; }

.section { padding-block: var(--section-y); }
.section--subtle { background: var(--surface-subtle); }

@media (min-width: 768px) {
	:root { --section-y: 72px; --container-pad: 24px; }
}

.icon-bubble {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	inline-size: 44px; block-size: 44px; border-radius: var(--radius-pill);
	background: var(--green-50); color: var(--brand-primary); font-size: 22px;
}
.icon-bubble--lg { inline-size: 56px; block-size: 56px; font-size: 28px; }

@media (max-width: 479px) {
	.ev-section-title h2 { font-size: var(--text-2xl); }
	.ev-section-title .sub { font-size: var(--text-sm); }
}

/* ---- Header ---- */
.site-header {
	position: sticky; inset-block-start: 0; z-index: 50;
	background: var(--white);
	box-shadow: var(--shadow-navbar);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	min-block-size: 60px;
}
@media (min-width: 768px) { .site-header__inner { min-block-size: var(--navbar-h); } }

.wordmark {
	display: inline-flex; align-items: baseline; gap: 0.2em;
	font-size: 26px; font-weight: var(--fw-black); line-height: 1; letter-spacing: -0.01em;
	text-decoration: none; color: var(--brand-ink);
}
.wordmark__flexi { color: var(--brand-primary); }

/* ---- Footer ---- */
.site-footer {
	background: var(--surface-dark);
	color: var(--text-on-dark-muted);
	padding-block: var(--space-8);
	font-size: var(--text-sm);
}
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }
.site-footer__links a { color: var(--text-on-dark); text-decoration: none; }
.site-footer__links a:hover { color: var(--green-300); text-decoration: underline; }

/* ---- Prices (hero, final CTA, sticky bar) ---- */
.price-box__new {
	font-size: 34px; font-weight: var(--fw-black); line-height: 1; color: var(--text-strong);
	background: linear-gradient(transparent 58%, color-mix(in srgb, var(--brand-accent) 70%, transparent) 58%);
	padding-inline: var(--space-1);
}
.price-box__old {
	font-size: var(--text-lg); color: var(--text-muted);
	text-decoration: line-through; text-decoration-color: var(--error); text-decoration-thickness: 2px;
}

/* ---- Countdown ([data-countdown], filled by countdown.js) ---- */
.countdown {
	display: inline-flex; gap: var(--space-2);
	font-variant-numeric: tabular-nums;
}
.countdown [data-unit] {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	min-inline-size: 58px; padding: var(--space-2) var(--space-2) var(--space-1);
	border-radius: var(--radius-lg);
	background: var(--brand-ink); color: var(--white);
	font-size: var(--text-2xl); font-weight: var(--fw-extrabold); line-height: 1;
}
.countdown [data-unit]::after {
	margin-block-start: var(--space-1);
	font-size: 11px; font-weight: var(--fw-medium); color: var(--text-on-dark-muted);
}
.countdown [data-unit="h"]::after { content: "ساعة"; }
.countdown [data-unit="m"]::after { content: "دقيقة"; }
.countdown [data-unit="s"]::after { content: "ثانية"; }

.countdown--sm [data-unit] { min-inline-size: 46px; font-size: var(--text-lg); padding: 6px var(--space-1) 4px; }
.countdown--sm [data-unit]::after { font-size: 10px; }

/* ---- Hero ---- */
.hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(120% 70% at 85% 0%, var(--green-100) 0%, transparent 60%),
		linear-gradient(180deg, var(--green-50) 0%, var(--white) 100%);
	padding-block: var(--space-6) var(--space-10);
}
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }

.hero__media {
	position: relative; display: flex; justify-content: center; align-items: center;
	padding-block: var(--space-4);
}
.hero__glow {
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
	inline-size: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%;
	transform: translate(50%, -50%);
	background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 35%, transparent) 0%, var(--green-100) 55%, transparent 72%);
}
[dir="ltr"] .hero__glow { transform: translate(-50%, -50%); }
.hero__product {
	position: relative;
	inline-size: auto; block-size: min(36vh, 280px);
	transform: rotate(-6deg);
	filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
}
.hero__stamp {
	position: absolute; inset-block-start: var(--space-6); inset-inline-end: 12%;
	font-size: var(--text-lg); padding: var(--space-3) var(--space-4);
	box-shadow: var(--shadow-md); transform: rotate(8deg);
}

.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero__title {
	margin: 0; font-size: 28px; font-weight: var(--fw-extrabold); line-height: var(--leading-snug);
}
.hero__title span { color: var(--brand-primary); }
.hero__lead { font-size: var(--text-base); line-height: var(--leading-relaxed); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--text-strong); font-weight: var(--fw-medium); }
.check-list iconify-icon {
	font-size: 20px; color: var(--brand-primary); margin-block-start: 2px;
}

.price-box {
	align-self: stretch;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
	padding: var(--space-4);
	background: var(--white); border: 1px dashed var(--yellow-500); border-radius: var(--radius-xl);
}
.price-box__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.price-box__timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.price-box__timer-label {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong);
}
.price-box__timer-label iconify-icon { color: var(--yellow-600); font-size: 18px; }

.hero__actions { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-3); }
.hero__cta { inline-size: 100%; font-size: var(--text-lg); padding-block: 16px; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent); }
.hero__cod { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }
.hero__cod iconify-icon { color: var(--brand-primary); font-size: 20px; }
.hero__cod strong { color: var(--text-strong); }

@media (min-width: 900px) {
	.hero { padding-block: var(--space-12) var(--space-16); }
	.hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-10); }
	.hero__media { order: 2; }
	.hero__title { font-size: 40px; }
	.hero__lead { font-size: var(--text-lg); }
	.hero__product { block-size: 460px; }
	.hero__glow { inline-size: 420px; }
	.hero__actions { flex-direction: row; align-items: center; }
	.hero__cta { inline-size: auto; }
	.hero__cod { flex: 1; justify-content: flex-start; }
	.hero__stamp { inset-inline-end: 6%; }
}

/* ---- Trust strip ---- */
.trust-strip { background: var(--white); border-block: 1px solid var(--border-default); padding-block: var(--space-5); }
.trust-strip__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3);
}
.trust-strip__item { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.trust-strip__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; line-height: var(--leading-snug); }
.trust-strip__text strong { color: var(--text-strong); font-size: var(--text-sm); }
.trust-strip__text small { color: var(--text-muted); font-size: var(--text-xs); }
@media (max-width: 379px) { .trust-strip .icon-bubble { inline-size: 38px; block-size: 38px; font-size: 19px; } }
@media (min-width: 900px) {
	.trust-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.trust-strip__text strong { font-size: var(--text-base); }
	.trust-strip__text small { font-size: var(--text-sm); }
}

/* ---- Problem ---- */
.problem__grid { display: grid; gap: var(--space-5); }
.problem__card img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.problem__card h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.problem__card p { line-height: var(--leading-relaxed); }
.problem__bridge {
	display: flex; align-items: center; justify-content: center; gap: var(--space-3);
	margin-block-start: var(--space-8); padding: var(--space-4) var(--space-5);
	background: var(--green-50); border: 1px solid var(--border-on-card); border-radius: var(--radius-xl);
	color: var(--green-800); font-size: var(--text-lg); font-weight: var(--fw-bold); text-align: center;
}
.problem__bridge iconify-icon { color: var(--brand-primary); font-size: 28px; }
@media (min-width: 768px) {
	.problem__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Benefits ---- */
.benefits__grid { display: grid; gap: var(--space-4); }
.benefit-card { border-block-start: 3px solid var(--brand-primary); transition: transform var(--dur-fast) var(--ease-standard); }
.benefit-card:hover { transform: translateY(-4px); }
.benefit-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); }
.benefit-card p { line-height: var(--leading-relaxed); }
@media (min-width: 600px) { .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 900px) { .benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Ingredients ---- */
.ingredients__grid { display: grid; gap: var(--space-8); align-items: center; }
.ingredients__media { position: relative; display: flex; justify-content: center; }
.ingredients__media img { inline-size: auto; block-size: 300px; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.18)); }
.ingredients__size {
	position: absolute; inset-block-end: var(--space-4); inset-inline-start: 18%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	inline-size: 92px; block-size: 92px; border-radius: 50%;
	background: var(--brand-primary); color: var(--white); box-shadow: var(--shadow-xl);
	line-height: 1.1;
}
.ingredients__size strong { font-size: var(--text-2xl); font-weight: var(--fw-black); }
.ingredients__size small { font-size: var(--text-xs); }

.ingredient-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ingredient {
	display: flex; align-items: flex-start; gap: var(--space-4);
	padding: var(--space-4); background: var(--surface-card);
	border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.ingredient h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.ingredient__latin { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); margin-inline-start: var(--space-1); }
.ingredient p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
@media (min-width: 900px) {
	.ingredients__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-12); }
	.ingredients__media img { block-size: 440px; }
}

/* ---- How to use ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: none; }
.step {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: var(--space-8) var(--space-5) var(--space-6);
	background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.step__num {
	position: absolute; inset-block-start: calc(-1 * var(--space-4)); inset-inline-start: 50%;
	transform: translateX(50%);
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 34px; block-size: 34px; border-radius: 50%;
	background: var(--brand-primary); color: var(--white); font-weight: var(--fw-extrabold);
	box-shadow: 0 0 0 4px var(--white);
}
[dir="ltr"] .step__num { transform: translateX(-50%); }
.step h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); }
.step p { line-height: var(--leading-relaxed); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- FAQ ---- */
.faq__list { display: grid; gap: var(--space-3); }
.faq__item {
	background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.faq__item[open] { border-color: var(--green-300); box-shadow: var(--shadow-md); }
.faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
	font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--text-base);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary iconify-icon { font-size: 22px; color: var(--brand-primary); transition: transform var(--dur-fast) var(--ease-standard); }
.faq__item[open] summary iconify-icon { transform: rotate(180deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-lg); }
.faq__item p { padding: 0 var(--space-5) var(--space-5); line-height: var(--leading-relaxed); }

/* ---- Final CTA ---- */
.final-cta {
	position: relative; overflow: hidden;
	background:
		radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--brand-primary) 35%, transparent) 0%, transparent 60%),
		var(--surface-dark);
	color: var(--text-on-dark-muted);
	padding-block: var(--space-12);
}
.final-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.final-cta__product { inline-size: auto; block-size: 220px; transform: rotate(-6deg); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.45)); }
.final-cta__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.final-cta h2 { margin: 0; color: var(--text-on-dark); font-size: var(--text-section); font-weight: var(--fw-extrabold); }
.final-cta p { font-size: var(--text-lg); }
.final-cta__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
.final-cta .price-box__new { color: var(--brand-accent); background: none; font-size: 40px; padding: 0; }
.final-cta .price-box__old { color: var(--text-on-dark-muted); }
.final-cta .ev-btn { min-inline-size: 240px; }
.final-cta__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.final-cta__perks li { display: inline-flex; align-items: center; gap: var(--space-2); }
.final-cta__perks iconify-icon { color: var(--green-400); font-size: 18px; }
@media (min-width: 768px) {
	.final-cta__inner { flex-direction: row; justify-content: center; gap: var(--space-16); text-align: start; }
	.final-cta__content { align-items: flex-start; }
	.final-cta__price, .final-cta__perks { justify-content: flex-start; }
	.final-cta__product { block-size: 300px; }
}

/* ---- Disclaimer ---- */
.disclaimer { background: var(--surface-subtle); padding-block: var(--space-6); }
.disclaimer p { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-relaxed); }
.disclaimer iconify-icon { font-size: 16px; margin-block-start: 2px; }

/* ---- Sticky CTA (mobile only, toggled by landing.js) ---- */
.sticky-cta {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3) var(--container-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--white); border-block-start: 1px solid var(--border-default);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(110%); transition: transform var(--dur-fast) var(--ease-standard);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__price { display: flex; flex-direction: column; line-height: 1.15; }
.sticky-cta__old { font-size: var(--text-xs); color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--error); }
.sticky-cta__new { font-size: var(--text-xl); font-weight: var(--fw-black); color: var(--text-strong); }
.sticky-cta .ev-btn { flex: 1; max-inline-size: 220px; }
body.has-sticky-cta { padding-block-end: 76px; }
@media (min-width: 768px) {
	.sticky-cta { display: none !important; }
	body.has-sticky-cta { padding-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ===========================================================================
   Inner pages (thanks / privacy / terms)
   =========================================================================== */

.page-hero {
	background:
		radial-gradient(90% 120% at 100% 0%, var(--green-100) 0%, transparent 60%),
		var(--green-50);
	border-block-end: 1px solid var(--border-on-card);
	padding-block: var(--space-10);
	text-align: center;
}
.page-hero h1 { margin: 0; font-size: var(--text-section); font-weight: var(--fw-extrabold); }
.page-hero p { margin: var(--space-3) auto 0; max-inline-size: 60ch; color: var(--text-muted); }
@media (min-width: 768px) { .page-hero { padding-block: var(--space-14); } .page-hero h1 { font-size: 36px; } }

.prose { max-inline-size: 760px; margin-inline: auto; line-height: var(--leading-relaxed); color: var(--text-body); }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-2xl); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-xl); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-6); }
.prose li { margin-block-end: var(--space-2); }
.prose li::marker { color: var(--brand-primary); }
.prose a { color: var(--text-link); font-weight: var(--fw-medium); text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-primary-hover); }
.prose strong { color: var(--text-strong); }

.thanks-card {
	max-inline-size: 560px; margin-inline: auto; text-align: center;
	padding: var(--space-10) var(--space-6);
	display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.thanks-card > iconify-icon:first-child, .thanks-card .icon-bubble {
	inline-size: 72px; block-size: 72px; font-size: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--green-50); color: var(--brand-primary);
}
.thanks-card h1, .thanks-card h2 { margin: 0; font-size: var(--text-2xl); }
.thanks-card p { line-height: var(--leading-relaxed); }
@media (min-width: 768px) { .thanks-card { padding: var(--space-12) var(--space-10); } .thanks-card h1, .thanks-card h2 { font-size: var(--text-section); } }