/* Advance KSA 2.1 (round 2): main stylesheet (tokens, base, buttons, launch-phase bar, header, footer, price line,
   consent bar, pages written in WordPress). Right-to-left by logical properties (inline-start = right).
   Printed inline on the sales and management pages. The reader (reader.css) and the free-summary forms (int-b free.css)
   reuse these token NAMES, so names never change; only values do. 2.1: Alexandria headings, larger and darker body text,
   a deep stage colour for dark sections, soft radii (cards 16, buttons 12, pills round), no hairline labels. */

/* ---------- Tokens ---------- */
:root {
	/* 2.2.25: one light design; browsers must not force-darken it (meta color-scheme in inc/setup.php). */
	color-scheme: only light;
	/* Palette: navy and a near-black stage for dark sections, warm whites for light ones, brass for accents,
	   orange only on buttons that buy. */
	--navy: #0C1042;
	--navy-2: #161D63;
	--stage: #070A22;
	--stage-2: #10153F;
	--royal: #222EAA;
	--brass: #B8955A;
	--brass-l: #D9BE8C;
	--bronze: #806230;
	--limestone: #F6F2EB;
	--sand: #EFE7DA;
	--paper-w: #FBF9F5;
	--stone: #4A463F;
	--orange: #DC9434;
	--orange-deep: #C7801F;
	--ok: #1D6B47;

	/* Legacy names kept for reader.css, free.css, woo.css and older parts, pointed at the current values. */
	--blue-500: #3A47C2;
	--blue-600: #222EAA;
	--blue-700: #222EAA;
	--blue-800: #1A2388;
	--blue-900: #141B66;
	--blue-950: #0C1042;
	--night: #0C1042;
	--navy-card: #161D63;
	--orange-300: #D9BE8C;
	--orange-400: #DC9434;
	--orange-500: #DC9434;
	--orange-600: #C7801F;
	--orange-700: #806230;
	--orange-100: #EFE7DA;
	--orange-50: #F6F2EB;
	--paper: #F6F2EB;
	--paper-2: #EFE7DA;
	--tint: #F6F2EB;
	--line: #E2DACB;
	--white: #FFFFFF;
	--ink: #141A33;
	--ink-2: #4A463F;
	--ink-3: #4A463F;
	--mist: #C9CCE0;
	--on-blue: #E4E6F2;
	--win: #1D6B47;
	--fail: #A3322A;
	--chart-easy: #8A8AA8;
	--chart-hard: #806230;
	--star: #806230;
	--star-off: #D8CFC0;

	--font-head: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
	--fs-legal: .8125rem;
	--fs-xs: .875rem;
	--fs-sm: 1rem;
	--fs-base: 1.125rem;
	--fs-md: 1.25rem;
	--fs-lg: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	--fs-xl: clamp(1.875rem, 1.4rem + 2vw, 3rem);
	--fs-2xl: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
	--fs-num: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
	--lh-body: 1.85;
	--lh-head: 1.6; /* 2.2.2: Alexandria's tall lam and marks (shadda, hamza) need the room between lines; website/preview/heading-marks.mjs checks it. */

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 72px;
	--sec-y: clamp(64px, 1rem + 8vw, 136px); /* 2.2.13 (owner: «crowded»): 64 px between blocks on phones (was 48). */

	/* Radii: buttons 12, cards and images 16, pills fully round. */
	--r: 12px;
	--r-s: 8px;
	--r-m: 12px;
	--r-l: 16px;
	--r-pill: 999px;
	--sh-1: 0 1px 2px rgb(7 10 34 / .05), 0 10px 30px rgb(7 10 34 / .07);
	--sh-2: 0 2px 6px rgb(7 10 34 / .08), 0 30px 70px rgb(7 10 34 / .16);
	--sh-text: none;
	--sh-bar: 0 -10px 30px rgb(7 10 34 / .25);

	--wrap: 1200px;
	--gutter: 16px;
	--measure: 40rem;
	--head-h: 56px;
}
@media (min-width: 900px) {
	:root { --fs-base: 1.1875rem; --fs-md: 1.3125rem; --gutter: 32px; --head-h: 68px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 2.1.6: html clips too, so body clips at its own edge (with body alone, an RTL page slid sideways when something
   overflowed at a large phone text size). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); overflow-x: clip; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: var(--lh-head); margin: 0 0 var(--s-4); color: inherit; text-wrap: balance; letter-spacing: 0; }
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
a { color: var(--royal); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
img, video { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 600; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }
.on-dark :focus-visible, .site-head :focus-visible, .annbar :focus-visible, .site-foot :focus-visible { outline-color: var(--brass-l); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* WordPress's own class (Complianz's category toggles use it): the sales and management pages drop GeneratePress's
   stylesheet, which defined it, so the category names showed twice in the consent settings (2.1.4, QA P3-11). */
.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -80px; inset-inline-start: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--r-s); background: var(--white); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }
bdi[dir="ltr"] { unicode-bidi: isolate; white-space: nowrap; } /* A number, phone or email never breaks inside (review 18). */
.num { font-feature-settings: "tnum"; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { --wrap: 860px; }
.sec { padding-block: var(--sec-y); }
.sec--paper, .sec--stone, .sec--tint { background: var(--paper-w); }
.sec--deep { background: var(--stage); color: var(--white); }
.lede { font-size: var(--fs-base); color: var(--ink-2); }
@media (min-width: 900px) { .lede { font-size: var(--fs-md); } }
.sec--deep .lede, .on-dark .lede { color: var(--mist); }
.source { font-size: var(--fs-xs); color: var(--stone); margin: var(--s-3) 0 0; }
.sec--deep .source, .on-dark .source { color: var(--mist); }

/* Section head: a short brass label (no hairline), the H2, an optional lede. */
.sec__head { max-width: 46rem; margin-bottom: var(--s-7); }
.sec__head h2 { margin-bottom: var(--s-4); }
.sec__head .lede { margin: 0; }
.sec__head--center { margin-inline: auto; text-align: center; }
.label { margin: 0 0 var(--s-3); color: var(--bronze); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.on-dark .label, .sec--deep .label { color: var(--brass-l); }

/* ---------- Buttons and links ---------- */
/* Orange is only for buttons that buy. Everything else is navy, outline or a text link. */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 54px; padding: .55em 1.5em; border: 1px solid var(--orange); border-radius: var(--r);
	background: var(--orange); color: var(--navy);
	font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); line-height: 1.35;
	text-align: center; text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
	max-width: 100%; overflow-wrap: anywhere; /* 2.1.6: at a large phone text size a glued label wraps inside the button, never past it */
}
.btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--navy); }
.btn--lg { min-height: 60px; padding-inline: 1.8em; font-size: var(--fs-md); }
.btn--sm { min-height: 44px; padding: .4em 1.1em; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.btn--ink { border-color: var(--navy); background: var(--navy); color: var(--white); }
.btn--ink:hover { border-color: var(--navy-2); background: var(--navy-2); color: var(--white); }
.btn--line { border-color: var(--navy); background: transparent; color: var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--white); }
.btn--ghost { border-color: rgb(217 190 140 / .6); background: transparent; color: inherit; }
.btn--ghost:hover { border-color: var(--brass-l); background: rgb(255 255 255 / .06); color: inherit; }
.text-link { font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin: var(--s-6) 0 0; }

.ticks { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.ticks li { display: flex; align-items: flex-start; gap: .7em; }
.ticks .icon { width: 1.05em; height: 1.05em; margin-top: .42em; color: var(--bronze); }
.on-dark .ticks .icon { color: var(--brass-l); }

/* ---------- Launch-phase bar «المرحلة الأولى» (the real first-96 count, no clock) ---------- */
.annbar { position: relative; z-index: 21; background: var(--stage); color: var(--mist); font-size: var(--fs-xs); }
.annbar__in { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 34px; margin: 0 auto; padding-block: 4px; }
.annbar__text { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 2.1.3: under 375 px the line does not fit even in the web font: two balanced lines there, never cut. From 375 px it
   fits; it stays one line so the font swap cannot change its height (no layout shift). */
@media (max-width: 374px) { .annbar__text { white-space: normal; overflow: visible; line-height: 1.45; text-align: center; text-wrap: balance; } }
/* 2.2.30 (tester F24, 150 % phone text): when the offer cannot fit one line it wraps the same way instead of ending in
   «…». The test counts the bar's width in lh (its font size × line height), which follows the phone's text size but
   not the font, so the web-font swap never flips it: at normal sizes it only applies under 343 px, as before. */
.annbar__in { container-type: inline-size; }
@container (max-width: 12lh) { .annbar__text { white-space: normal; overflow: visible; line-height: 1.45; text-align: center; text-wrap: balance; } }
.annbar__phase { color: var(--brass-l); font-weight: 600; }
.annbar a { color: var(--white); white-space: nowrap; }
@media (max-width: 480px) { .annbar__link { display: none; } }
/* 2.2.20 (owner): «وصول فوري · بدون شحن» after «اختر بابك», only where they fit beside the one-line offer (measured: the
   offer 338 px, the link 47, each badge about 70): the first from 520 px, both from 600 px; below that they are in the
   hero's badge row just under the bar. They never shrink, so a wider fallback font cuts the offer's end for a moment
   instead of wrapping (no layout shift). */
.annbar__badges { display: none; flex: none; margin: 0; color: var(--mist); white-space: nowrap; }
.annbar__b + .annbar__b::before, .annbar__b--1::before { content: "·"; margin-inline-end: .45em; }
.annbar__b + .annbar__b { margin-inline-start: .45em; }
@media (min-width: 520px) { .annbar__badges { display: block; } .annbar__b--2 { display: none; } }
@media (min-width: 600px) { .annbar__b--2 { display: inline; } }

/* ---------- Header (sticky on every page; a compact call to action) ---------- */
.site-head { position: sticky; top: 0; z-index: 25; background: rgb(7 10 34 / .94); color: var(--white); border-bottom: 1px solid rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-head__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-3); min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; color: var(--white); line-height: 1.2; text-decoration: none; }
.brand:hover { color: var(--white); }
.brand__mark { width: 10px; height: 10px; border-radius: 3px; background: var(--brass-l); flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; }
.brand__tag { font-size: var(--fs-xs); color: var(--mist); } /* 14 px: «كتب تسويق العقار في السعودية» says books on the first screen (review 12). */
/* 2.1.3: under 375 px the tagline takes two lines; smaller type keeps name and tagline inside the header with room. */
@media (max-width: 374px) {
	.brand__name { font-size: 1rem; line-height: 1.15; }
	.brand__tag { font-size: .75rem; line-height: 1.25; }
}
.nav__list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s-5); }
.nav a { color: var(--white); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--brass-l); }
.nav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav__toggle .icon { width: 24px; height: 24px; }
.nav__drop { position: absolute; inset-inline: 0; top: 100%; display: grid; margin: 0; padding: var(--s-2) var(--gutter) var(--s-4); list-style: none; background: var(--stage); border-bottom: 1px solid rgb(255 255 255 / .1); }
.nav__drop a { display: block; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: var(--fs-base); }
/* 2.2.6 (owner): WhatsApp buttons in WhatsApp's own green #25D366 with dark text (7.9:1, AA); the glyph is the official
   WhatsApp mark (template-parts/icons.php). */
.wa-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill); background: #25D366; color: #06291D; font-weight: 600; line-height: 1.3; text-decoration: none; }
.wa-btn:hover, .wa-btn:focus-visible { background: #1EBE5A; color: #06291D; }
.wa-btn .icon { flex: none; width: 20px; height: 20px; }
.nav .wa-btn, .nav .wa-btn:hover { color: #06291D; }
.nav__drop .wa-btn { display: inline-flex; margin-top: var(--s-3); padding: 8px 16px; border-bottom: 0; white-space: normal; }
.site-head__wa { display: none; font-size: var(--fs-sm); white-space: nowrap; }
.site-head__cta { min-height: 44px; padding: .3em 1em; font-size: var(--fs-sm); white-space: nowrap; }
/* 2.2.9 (phones), 2.2.13 (every width): the header is always one row: the brand takes what is left and its lines never
   wrap (an ellipsis only while a wider fallback font shows), with capped sizes so large text keeps the row too. Before,
   the fallback font made «اختر بابك» wrap to a second row and jump up at the font swap (CLS 0.31 at 390 x 844, 0.72 at
   1440 x 900). */
.site-head__in { flex-wrap: nowrap; }
.brand { flex: 1 1 0; min-width: 0; }
.brand__text { min-width: 0; }
.brand__name, .brand__tag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand__name { font-size: min(1.125rem, 18px); }
.brand__tag { font-size: min(var(--fs-xs), 14px); }
.site-head__cta { flex: none; font-size: min(var(--fs-sm), 16px); }
.nav__list a, .site-head__wa { font-size: min(var(--fs-sm), 16px); }
@media (max-width: 374px) { .brand__name { font-size: min(1rem, 16px); } .brand__tag { font-size: min(.75rem, 12px); } } /* The 2.1.3 narrow sizes, capped the same way. */
/* 2.2.30.1 (tester F24 then R01, 150 % phone text): a tagline that cannot fit one line is left out, so the brand shows
   «Advance» alone. Wrapping it (2.2.30) made the brand 85 px in a 79 px row: phone text scaling enlarges the text after
   the row's height is set, so the top of «Advance» was cut. Width counted in the brand's lh, as for the offer bar
   above: at normal sizes it never applies from 360 px. */
.brand { container-type: inline-size; }
@container (max-width: 7.5lh) { .brand__tag { display: none; } }
@media (min-width: 1000px) {
	.site-head__in { gap: var(--s-5); }
	.nav__list { display: flex; }
	.nav__more { display: none; }
}
@media (min-width: 1280px) { .site-head__wa { display: inline-flex; } }
/* 2.2.6: with the WhatsApp button the bar keeps one row from 1280 px (tighter gaps). */
@media (min-width: 1280px) { .site-head__in { gap: var(--s-4); } .nav__list { gap: var(--s-4); } }

/* ---------- Account forms (2.2.0): «غيّر كلمة المرور» and «نسيت كلمة المرور» (logic by the store), as the login form ---------- */
.woocommerce-ResetPassword .form-row, .woocommerce-EditAccountForm .form-row, .advance-password .form-row { float: none; width: 100%; margin: 0 0 var(--s-4); padding: 0; }
.woocommerce-ResetPassword label, .woocommerce-EditAccountForm label, .advance-password label { display: block; margin-bottom: 6px; color: var(--navy); font-weight: 600; font-size: var(--fs-sm); line-height: 1.6; }
.woocommerce-ResetPassword .input-text, .woocommerce-EditAccountForm .input-text, .advance-password .input-text { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); color: var(--ink); font: inherit; font-size: var(--fs-base); }
.woocommerce-ResetPassword .input-text:focus, .woocommerce-EditAccountForm .input-text:focus, .advance-password .input-text:focus { border-color: var(--navy); outline: 3px solid rgb(217 190 140 / .55); outline-offset: 1px; }
.woocommerce-ResetPassword button[type="submit"], .woocommerce-EditAccountForm button[type="submit"], .advance-password button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .55em 1.8em; border: 0; border-radius: var(--r); background: var(--navy); color: var(--white); font: 600 var(--fs-base) / 1.3 var(--font-body); cursor: pointer; }
.woocommerce-ResetPassword button[type="submit"]:hover, .woocommerce-EditAccountForm button[type="submit"]:hover, .advance-password .advance-password-save:hover { background: var(--navy-2); color: var(--white); }
/* The store's «غيّر كلمة المرور» page (/my-account/change-password/, W-WOO advance-first-login.php): no box in the account box, the first-time line, the hint, «احفظ» and the quiet «تخطي الحين». */
.advance-password { max-width: 520px; }
.advance-password-first { margin: 0 0 var(--s-4); color: var(--ink); font-size: var(--fs-base); line-height: 1.8; }
.advance-password-hint { margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; }
.advance-password-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: 0; }
.advance-password .advance-password-save { flex: 1 1 220px; max-width: 100%; }
.woocommerce .advance-password button.advance-password-skip { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.woocommerce .advance-password button.advance-password-skip:hover { background: var(--white); color: var(--navy); }
.woocommerce-EditAccountForm fieldset { margin: var(--s-5) 0; padding: var(--s-4); border: 0; border-radius: var(--r-l); background: var(--paper-w); box-shadow: inset 0 0 0 1px var(--line); }
.woocommerce-EditAccountForm legend { padding: 0 6px; color: var(--navy); font-family: var(--font-head); font-weight: 700; }

/* ---------- 404 (2.1.4): the way back, no search form ---------- */
.adv-404__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); }
.adv-404__help { margin: 0; font-size: var(--fs-sm); }
.adv-404__help a { color: var(--ok); font-weight: 600; }

/* ---------- Footer ---------- */
.site-foot { padding-block: var(--s-6) calc(var(--s-5) + 76px); background: var(--stage); color: var(--mist); font-size: var(--fs-xs); line-height: 1.75; }
.site-foot__grid { display: grid; gap: var(--s-4); }
.site-foot .brand__name { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--white); font-size: 1.375rem; }
.site-foot .brand__name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--brass-l); }
.site-foot__h { margin-bottom: var(--s-2); color: var(--brass-l); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); }
.site-foot ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-foot a { color: var(--white); }
.site-foot__legal ul { grid-template-columns: 1fr 1fr; gap: 2px var(--s-4); }
.site-foot p { margin-bottom: var(--s-2); }
.site-foot__base { display: grid; gap: 4px; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgb(255 255 255 / .1); font-size: var(--fs-legal); line-height: 1.7; }
.site-foot__base p { margin: 0; }
.site-foot .site-foot__doors, .site-foot .site-foot__contact { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); }
.site-foot .site-foot__doors { margin-top: var(--s-3); }
.site-foot__brand p { margin-bottom: var(--s-2); }
.site-foot .adv-linkbtn, .site-foot .adv-linkbtn:hover, .site-foot .adv-linkbtn:focus { padding: 0; border: 0; background: none; color: var(--white); font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) { .site-foot__grid { grid-template-columns: 1fr 1fr 1.3fr; } }

/* ---------- Price line (sales page and door pages): Alexandria numerals, the riyal sign left of the number ---------- */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; line-height: 1.1; }
.price__now { font-family: var(--font-head); font-weight: 800; font-size: 2.5rem; color: var(--navy); }
.price__now bdi, .price__was bdi { white-space: nowrap; }
/* The riyal sign U+20C1 comes from Alyamama, whose face covers only that code point (unicode-range in inc/assets.php). */
.sar { font-family: "Alyamama", var(--font-head); font-weight: 400; font-size: .8em; }
.price__was { color: var(--stone); font-size: 1.125rem; text-decoration-thickness: 1px; text-decoration-color: var(--fail); }
.price__save { align-self: center; padding: 2px 12px; border: 1px solid var(--bronze); border-radius: var(--r-pill); color: var(--bronze); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }

/* ---------- Consent bar (Complianz free, banner set to «bottom»): one line, three equal buttons ----------
   «موافق» and «رفض» have identical weight (both navy, review 10: refusing is as easy as accepting, PDPL); «الإعدادات»
   is outlined. Orange stays on buy buttons only. Deploy: run website/preview/complianz-compact-bar.php (mandatory step). */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important;
	width: 100% !important; max-width: none !important; margin: 0 !important;
	display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: none !important; gap: 6px 16px; align-items: center;
	padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)) !important;
	border: 0 !important; border-top: 1px solid var(--brass) !important; border-radius: 0 !important;
	background: var(--white) !important; color: var(--ink) !important; box-shadow: var(--sh-bar) !important;
	font-family: var(--font-body) !important; font-size: var(--fs-legal) !important; line-height: 1.5 !important;
}
/* 2.1 fix: Complianz hides the bar with .cmplz-dismissed { display: none }, which the display rule above overrode, so the
   bar stayed on screen after the visitor chose (proved locally and on the live 2.0.3). The bar shows only while Complianz
   marks it .cmplz-show. */
#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-show) { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner > * { grid-area: auto !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { margin: 0 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { margin: 0 !important; font-size: var(--fs-legal) !important; line-height: 1.5 !important; color: var(--ink) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message p { margin: 0 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a { color: var(--royal) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; margin: 0 !important; flex-direction: row !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 8px !important;
	border: 1px solid var(--navy) !important; border-radius: var(--r) !important; background: var(--white) !important; color: var(--navy) !important;
	font: 600 var(--fs-xs) / 1.2 var(--font-body) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny { border-color: var(--navy) !important; background: var(--navy) !important; color: var(--white) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { grid-column: 1 / -1; max-height: 40vh; overflow-y: auto; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header { cursor: pointer; } /* 2.2.30 (tester D01): the whole title row opens the category (inc/setup.php). */
/* 2.1.4 (QA P2-4): phones get a single row, so the bar no longer covers the first screen's buy button: the text beside
   «موافق» and «رفض», two equal navy buttons (refusing stays as easy as accepting, PDPL). The settings view
   (cmplz-categories-visible) keeps the stacked layout above. 2.2.24 (owner: the bars took ~30% of a phone's first
   screen): one short line (Complianz message, website/preview/complianz-compact-bar.php) with «الإعدادات» as a link
   under it, both beside the two buttons, so the bar is one button tall (about 56 px instead of 91). */
@media (max-width: 899px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 0 6px !important; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-buttons { display: contents !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-body { grid-column: 1 !important; grid-row: 1 !important; align-self: end; width: auto !important; min-width: 0 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-message { width: auto !important; min-width: 0 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-accept { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-deny { grid-column: 3 !important; grid-row: 1 / span 2 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-accept,
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-deny { align-self: center; min-width: 56px !important; height: 44px !important; padding: 0 8px !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-view-preferences {
		grid-column: 1 !important; grid-row: 2 !important; justify-self: start; align-self: start; height: auto !important; min-height: 24px !important; padding: 0 !important;
		border: 0 !important; background: none !important; color: var(--royal) !important; font-size: var(--fs-legal) !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: .2em;
	}
}
@media (min-width: 900px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner { grid-template-columns: minmax(0, 1fr) auto !important; padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2) !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { grid-row: 1 !important; grid-column: 2 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { grid-row: 1 !important; grid-column: 1 !important; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { grid-template-columns: repeat(3, 150px); }
}
/* No floating Complianz tab (it printed «Manage consent» in English from its settings and sat under the sticky buy bar);
   the footer button «إعدادات الخصوصية» on every page reopens the same settings. */
#cmplz-manage-consent { display: none !important; }
/* While the bar shows, the sticky buy bar sits above it and the page can scroll past both. */
body:has(.cmplz-cookiebanner.cmplz-show) .buybar { bottom: var(--consent-h, 96px); }
/* Hidden, it waits fully below the screen (not behind the consent bar), so a late consent-bar height never counts as a layout shift. */
body:has(.cmplz-cookiebanner.cmplz-show) .buybar:not(.is-shown) { transform: translateY(calc(110% + var(--consent-h, 96px))); }
body:has(.cmplz-cookiebanner.cmplz-show) { padding-bottom: var(--consent-h, 96px); }

/* ---------- GeneratePress pages (legal pages, door pages, store) ---------- */
body:not(.adv-sales) .site-content { padding-block: var(--s-6); }
/* 2.1.4 (QA P2-4): pages written in WordPress (door pages first): less space above the title, so the buy card's button
   sits on the first screen above the consent bar. */
body:not(.adv-sales):not(.woocommerce-page) .site-content { padding-top: var(--s-5); }
body:not(.adv-sales):not(.woocommerce-page) .inside-article { padding-top: var(--s-4); }
@media (max-width: 599px) {
	body:not(.adv-sales):not(.woocommerce-page) .site-content { padding-block: var(--s-4) var(--s-6); }
	body:not(.adv-sales):not(.woocommerce-page) .inside-article { padding-top: var(--s-2); }
	body:not(.adv-sales):not(.woocommerce-page) .inside-article .entry-content { margin-top: 20px; }
	.adv-buy { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); margin-block: var(--s-4); padding: var(--s-3); }
	.adv-buy__cta .btn { padding-inline: .7em; font-size: var(--fs-base); }
	body:not(.adv-sales) .entry-content .lede { font-size: var(--fs-base); } /* as the sales page's lede on phones */
}
body:not(.woocommerce-page) .inside-article .entry-content, body:not(.woocommerce-page) .inside-article .entry-header { max-width: 46rem; margin-inline: auto; }
.inside-article .entry-title { color: var(--navy); font-size: var(--fs-xl); font-weight: 700; text-wrap: balance; }
.inside-article .entry-title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: var(--s-3); border-radius: 2px; background: var(--brass); }
.entry-content h2 { margin-top: var(--s-7); font-size: var(--fs-lg); }
.entry-content h3 { margin-top: var(--s-5); font-size: var(--fs-md); }
.entry-content a.btn { text-decoration: none; }
.entry-content .lede { font-size: var(--fs-md); color: var(--ink-2); }
/* Door pages: [advance_buy] renders one unit spec sheet with the same price line and button as the sales page. */
/* Platform pills (home door-2 card and the door pages' buy card). */
.pills { display: grid; margin: 0 0 var(--s-4); padding: 0; border: 0; min-width: 0; font-size: var(--fs-xs); }
/* 2.2.2: the four platform pills (door cards, door pages, the hero) in one row when their labels fit, else a balanced
   2 x 2 with equal widths, never 3 + 1: each column is a quarter of the row while the row is at least the width the four
   labels need («سناب شات» is the widest, about 4.4em, plus padding), else a half. Font in em of the pills themselves. */
.pills, .ppills { --pills-fit: calc(17.6em + 74px); grid-template-columns: repeat(auto-fit, minmax(clamp(calc(25% - 5px), calc((var(--pills-fit) - 100%) * 999), calc(50% - 3px)), 1fr)); gap: 6px; }
.pills__legend { float: inline-start; grid-column: 1 / -1; width: 100%; margin: 0 0 2px; padding: 0; color: var(--stone); font-size: 1em; } /* The float keeps the legend a grid item (a rendered legend sits outside the grid). */
.pill { position: relative; min-width: 0; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); font-size: 1em; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; cursor: pointer; }
.pill input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--white); }
.pill input:focus-visible + span { outline: 2px solid var(--royal); outline-offset: 2px; }

/* ---------- 2.2.3: next to every price (inc/near.php) ---------- */
/* «شوف وش تستلم بالضبط»: a quiet link-like button; its window is an HTML popover (no script). */
.what-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--royal); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.on-dark .what-link { color: var(--brass-l); }
.what { position: fixed; inset: 0; width: min(100% - 24px, 760px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--r-l); background: var(--white); color: var(--ink); box-shadow: var(--sh-2); overflow: auto; overscroll-behavior: contain; }
.what::backdrop { background: rgb(7 10 34 / .62); }
.what__in { padding: var(--s-4); }
.what__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); color: var(--navy); font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.6; }
.what__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); cursor: pointer; }
.what__x { width: 18px; height: 18px; transform: rotate(45deg); }
.what__list { gap: var(--s-2); margin: 0; font-size: var(--fs-sm); line-height: 1.7; }
.what__pages-t { margin: var(--s-4) 0 var(--s-2); color: var(--navy); font-weight: 600; }
.what__pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.what__note { margin: var(--s-3) 0 0; color: var(--stone); font-size: var(--fs-xs); line-height: 1.6; }
.what__more { margin: var(--s-2) 0 0; font-weight: 600; }
@media (min-width: 700px) { .what__in { padding: var(--s-5) var(--s-6); } }
/* A real reader page on a phone: the whole 9:16 page in a thin dark frame, its caption under it. */
.rpage { margin: 0; }
.rpage img { display: block; width: 100%; height: auto; border: 4px solid #0C1042; border-radius: 14px; box-shadow: 0 6px 16px rgb(7 10 34 / .18);
	/* 2.2.6: until the picture arrives, a soft page shape (top bar, title, text lines), never a blank white frame. */
	background: linear-gradient(#E4DED3, #E4DED3) top / 100% 9% no-repeat, linear-gradient(#DCD5C8, #DCD5C8) 82% 15% / 52% 4% no-repeat, repeating-linear-gradient(180deg, transparent 0 14px, #ECE7DF 14px 19px) 50% 72% / 84% 58% no-repeat, #F6F3EE; }
.rpage figcaption { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.55; }
.rpages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-4) 0 var(--s-2); }
@media (min-width: 700px) { .rpages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Lightbox (moved from sales.css in 2.2.5: the chapter galleries are not landing pages) */
.lightbox { width: min(96vw, 1000px); max-height: 92vh; padding: var(--s-3); border: 0; border-radius: var(--r-l); background: var(--white); }
.lightbox::backdrop { background: rgb(7 10 34 / .9); }
.lightbox__img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox__cap { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--fs-sm); text-align: center; }
.lightbox__close { position: sticky; top: 0; float: inline-end; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); cursor: pointer; }

/* 2.2.5: «كل الفصول» galleries (inc/inside.php): every chapter as a real reader page, its title and one benefit line.
   Columns at least 8.5rem (or 22 % of the row): two on phones, four on wide screens, one when the phone's text is
   enlarged (Samsung 150/200 %), so Arabic titles never break inside a word. «شوف كل الفصول» links in the windows and
   door pages. */
.inside-g__count { margin: 0 0 var(--s-4); color: var(--ink-2); line-height: 1.7; }
.inside-g .inside-g__part { margin: var(--s-6) 0 var(--s-3); color: var(--navy); font-size: var(--fs-md); line-height: 1.6; }
.inside-g .inside-g__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8.5rem, 22%)), 1fr)); gap: var(--s-5) var(--s-3); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
@media (min-width: 700px) { .inside-g .inside-g__grid { gap: var(--s-6) var(--s-4); } }
.ichap { min-width: 0; margin: 0; }
.ichap__pic { display: block; border-radius: 14px; }
.ichap__pic img { display: block; width: 100%; height: auto; border: 4px solid #0C1042; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgb(7 10 34 / .18); }
.inside-g .ichap__t { display: flex; align-items: baseline; gap: 6px; margin: var(--s-3) 0 var(--s-1); color: var(--navy); font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: break-word; }
.ichap__n { flex: none; min-width: 1.6em; padding: 0 5px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); font-size: .8em; text-align: center; }
.ichap__b { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; }
.ichap__b--todo { color: var(--stone); font-style: italic; }
/* 2.2.6: designed chapter cards: two a row on phones, three on wide screens; the card's own corners and a soft shadow. */
.inside-g .inside-g__grid:has(.ichap--card) { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8.5rem, 30%)), 1fr)); }
.ichap--card .ichap__pic img { border: 0; border-radius: 12px; background: #0C1042; box-shadow: 0 8px 22px rgb(7 10 34 / .22); }
.ichap--card .ichap__b { margin-top: var(--s-3); }
/* 2.2.8: a long book's parts fold (the first open), so a phone visitor opens the part he wants. */
.inside-g__fold { margin: 0 0 var(--s-3); border-bottom: 1px solid var(--line); }
.inside-g__fold > summary { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); align-items: baseline; gap: 2px var(--s-2); padding: var(--s-3) 0; cursor: pointer; list-style: none; }
.inside-g__fold > summary::-webkit-details-marker { display: none; }
.inside-g__fold > summary::before { content: "+"; color: var(--brass); font-weight: 700; }
.inside-g__fold[open] > summary::before { content: "−"; }
.inside-g .inside-g__fold .inside-g__part { margin: 0; }
.inside-g__count-part { grid-column: 2; color: var(--stone); font-size: var(--fs-xs); }
.inside-g__fold > .inside-g__grid { margin-top: var(--s-3); }
.inside-index { display: grid; gap: var(--s-2); padding-inline-start: 1.2em; }
.inside-links { display: grid; gap: 4px; margin: var(--s-3) 0 0; padding: 0; list-style: none; font-weight: 600; line-height: 1.8; }
.inside-links li { margin: 0; }
.owner-photo { border-radius: 50%; object-fit: cover; }
.owner-photo--page { display: block; width: 96px; height: 96px; margin: 0 0 var(--s-4); }
.what__all { margin-top: var(--s-3); }
/* Under the buy button: the door's live guarantees, the reading terms beside a real reader page, door 3's seller and team. */
/* 2.2.14 (owner: one look): the guarantee, the reading terms and door 3's seller and team lines as ✓ items (the «وش تستلم» windows). */
.near { gap: var(--s-2); margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; }
.near[hidden] { display: none; }
.near strong { color: var(--navy); }
/* The one-line trust row under every buy button (hero, door cards, door pages, the final call): «ضمان · تقرأ على جوالك
   وكمبيوترك · …», each word opening its detail. Capped size, so it stays one line with large phone text. */
.trust-row { display: flex; flex-wrap: wrap; align-items: center; margin: var(--s-2) 0 0; color: var(--stone); font-size: min(var(--fs-xs), 14px); line-height: 1.6; }
.trust-row a, .trust-row .what-link { min-height: 32px; color: var(--royal); font-size: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-skip-ink: none; } /* 2.2.22: skip-ink broke the line under Arabic letters with tails («جهازين»); one whole line. */
@media (max-width: 374px) { .trust-row { font-size: 13px; } } /* 2.2.18: «ضمان المحتوى» keeps every trust row on one line at 360 (the hero row is 333 px at 14 px), */
@media (max-width: 349px) { .trust-row { font-size: 12px; } } /* and at 340 (below, the door-page row wraps, as in 2.2.17). */
@media (min-width: 340px) { /* 2.2.18: one row from 340 px. The wider fallback font a slow first visit paints first would wrap the row and the font swap would move the page (cold CLS 0.052 at 390); an item ellipsizes for that moment instead. The web font fits (measured). */
	.trust-row { flex-wrap: nowrap; }
	.trust-row > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	/* 2.2.27 (tester: Samsung 412 px, 150 % text): once the web font is in (inc/setup.php), a row that no longer fits wraps
	   whole items instead of cutting them. At normal sizes it still fits one line, so nothing moves. */
	.fonts-ok .trust-row { flex-wrap: wrap; }
	.fonts-ok .trust-row > * { overflow: visible; text-overflow: clip; }
}
.on-dark .trust-row { color: var(--mist); }
.on-dark .trust-row a, .on-dark .trust-row .what-link { color: var(--on-blue); }
/* A ✓ item's own small line (the gift's condition, why the consultation): muted, aligned with the item text. */
.unit__note { display: block; margin-top: 2px; color: var(--stone); font-size: var(--fs-legal); line-height: 1.6; }
.unit__note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.on-dark .unit__note { color: var(--mist); }
.gift-item[hidden] { display: none; }
/* 2.2.13 (shared by the sales page, the door pages and the «وش تستلم» windows). */
/* The credit gift (hero, door cards, «وش تستلم»): the value, then its condition small, the platform note and the terms. */
.gift { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: var(--s-3) 0 0; line-height: 1.55; }
.gift[hidden] { display: none; }
.gift .icon { flex: none; width: 18px; height: 18px; color: var(--bronze); }
.gift strong { flex: 1 1 0; min-width: 0; color: var(--navy); font-size: var(--fs-sm); }
.gift__small { flex-basis: 100%; color: var(--stone); font-size: var(--fs-legal); }
.gift__small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.on-dark .gift .icon, .on-dark .gift strong { color: var(--brass-l); }
.on-dark .gift__small { color: var(--mist); }
/* Points with the gold dot (2.2.13, owner: «make the text points»), one idea each. */
.dots { display: grid; gap: 6px; margin: 0 0 var(--s-4); padding-inline-start: 1.2em; }
.dots li::marker { color: var(--brass); }
.near__phone { flex: none; width: 40px; padding: 3px; border-radius: 9px; background: #0C1042; box-shadow: 0 4px 10px rgb(7 10 34 / .25); }
.near__phone img { display: block; width: 100%; height: auto; border-radius: 6px; }
.near a { font-weight: 600; }
.on-dark .near { color: var(--mist); }
.on-dark .near strong { color: var(--white); }
.on-dark .near a { color: var(--brass-l); }
.adv-buy__trust { grid-area: near; margin: 0; } /* 2.2.14: the trust row in the «near» area. */

/* Buy card in door pages ([advance_buy], 2.1.4): the whole round-2 picture beside the price (captioned), the platform
   pills on /platform/, the button, the badges; on wide screens the picture keeps its own column. */
.adv-buy { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "fig deal" "pills pills" "cta cta" "pay pay" "near near"; gap: var(--s-3) var(--s-4); align-items: center; margin: var(--s-5) 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); box-shadow: var(--sh-1); }
.adv-buy__fig { position: relative; grid-area: fig; margin: 0; }
.adv-buy__chip { position: absolute; bottom: 28px; inset-inline-end: -6px; width: 46%; height: auto; border-radius: 3px; box-shadow: 0 8px 18px rgb(7 10 34 / .3); }
.adv-buy__pic { display: block; width: 100%; height: auto; border-radius: var(--r-m); box-shadow: 0 6px 16px rgb(7 10 34 / .18); }
.adv-buy__cap { margin: 6px 0 0; color: var(--stone); font-size: .6875rem; line-height: 1.45; text-align: center; text-wrap: balance; }
.adv-buy__deal { grid-area: deal; min-width: 0; }
.adv-buy__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin: 0 0 var(--s-2); color: var(--bronze); font-size: var(--fs-sm); font-weight: 600; }
.adv-buy__label .what-link { min-height: 0; font-size: var(--fs-xs); line-height: 1.6; }
.adv-buy__meter { display: none; }
.adv-buy__price { margin: 0; }
.adv-buy__pills { grid-area: pills; margin: 0; }
.adv-buy > noscript { display: block; grid-area: pills; }
.adv-buy__nojs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.adv-buy__cta { grid-area: cta; margin: 0; }
.adv-buy__cta .btn { width: 100%; padding-inline: 1em; }
.adv-buy__pay { grid-area: pay; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adv-buy__pay li { display: grid; place-items: center; min-width: 58px; height: 38px; padding: 0 8px; border: 1px solid var(--line); background: var(--white); font-weight: 600; font-size: var(--fs-xs); }
.adv-buy__pay img { width: auto; height: 26px; }
/* 2.2.2: the four platform pills in one row (door 1 and door 2 cards), so the button stays on the first screen. */
.adv-buy__pills .pill span { min-height: 40px; }
@media (max-width: 374px) { .adv-buy { gap: 8px var(--s-3); padding-block: 12px; } .adv-buy__pills { gap: 4px; } }
@media (max-width: 374px) { .adv-buy__pills .pills__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Small phones: the legend for screen readers only. */
@media (min-width: 700px) {
	.adv-buy { grid-template-columns: 168px minmax(0, 1fr); grid-template-areas: "fig deal" "fig pills" "fig cta" "fig pay" "near near"; align-items: start; gap: var(--s-3) var(--s-6); padding: var(--s-5); }
	.adv-buy__fig { align-self: center; }
	.adv-buy__pills { align-items: center; }
	.adv-buy__pills { grid-template-columns: auto repeat(4, minmax(0, 1fr)); } /* Wide cards: the legend beside four pills. */
	.adv-buy__pills .pills__legend { grid-column: auto; align-self: center; width: auto; margin: 0; margin-inline-end: var(--s-2); }
}
.entry-content .adv-micro { color: var(--stone); font-size: var(--fs-xs); }
.entry-content .adv-note { padding: var(--s-4); border-inline-start: 2px solid var(--brass); background: var(--limestone); }
.entry-content .wp-block-details { margin-block: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.entry-content .wp-block-details summary { font-weight: 600; cursor: pointer; }
/* 2.2.30 (tester F21): the page FAQs carry the same plus as the sales-page FAQs (i-plus, bronze, a cross when open)
   instead of the browser's triangle. */
.entry-content .wp-block-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; list-style: none; }
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--bronze); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; transition: transform .2s ease; }
.entry-content .wp-block-details[open] > summary::after { transform: rotate(45deg); }
.entry-content .wp-block-details { --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.entry-content .wp-block-details p { margin: var(--s-3) 0 0; }
.entry-content .wp-block-table { overflow-x: auto; margin: var(--s-4) 0; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { padding: 8px 10px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.entry-content .wp-block-table thead th { background: var(--sand); }
/* 2.1.4 (QA P3-13): wide tables (five columns and more) on phones scroll sideways with a visible hint: a line above that
   stays in place, and a shade at the edge that still hides columns; cells keep a readable width. Amounts never split
   (advance_glue on the page content). */
@media (max-width: 599px) {
	.entry-content .wp-block-table:has(tr > :nth-child(5)) {
		background:
			linear-gradient(to left, var(--white) 30%, rgb(255 255 255 / 0)) right / 28px 100% no-repeat local,
			linear-gradient(to right, var(--white) 30%, rgb(255 255 255 / 0)) left / 28px 100% no-repeat local,
			radial-gradient(farthest-side at 100% 50%, rgb(7 10 34 / .2), rgb(7 10 34 / 0)) right / 14px 100% no-repeat scroll,
			radial-gradient(farthest-side at 0 50%, rgb(7 10 34 / .2), rgb(7 10 34 / 0)) left / 14px 100% no-repeat scroll;
	}
	.entry-content .wp-block-table:has(tr > :nth-child(5))::before { content: "الجدول يتحرك يمين ويسار: اسحبه لتشوف باقي الأعمدة"; position: sticky; inset-inline-start: 0; display: block; margin-bottom: 6px; color: var(--stone); font-size: var(--fs-xs); }
	.entry-content .wp-block-table:has(tr > :nth-child(5)) table { width: max-content; max-width: none; }
	.entry-content .wp-block-table:has(tr > :nth-child(5)) :is(th, td):not(:first-child) { min-width: 7em; max-width: 13em; }
	/* 2.2.26 (tester F08): with its column names on the cells (inc/setup.php), each row is a card; no sideways scroll. */
	.entry-content table.is-stack, .entry-content table.is-stack :is(tbody, tr, th, td) { display: block; width: auto; }
	.entry-content table.is-stack thead { display: none; }
	.entry-content table.is-stack tr { margin: 0 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper-w); overflow: hidden; }
	.entry-content :is(.wp-block-table, div, figure) table.is-stack :is(th, td), .entry-content .wp-block-table:has(table.is-stack) :is(th, td):not(:first-child) { min-width: 0; max-width: none; border: 0; border-bottom: 1px solid var(--line); }
	.entry-content table.is-stack tr > :last-child { border-bottom: 0; }
	.entry-content table.is-stack tr > :first-child { background: var(--sand); font-weight: 700; }
	.entry-content table.is-stack [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--bronze); font-size: var(--fs-xs); font-weight: 600; }
	.entry-content table.is-stack td, .entry-content table.is-stack td bdi { overflow-wrap: anywhere; } .entry-content table.is-stack td bdi { white-space: normal; } /* 2.2.30 (tester F08): a long address (the site, LTR) may break inside its card at large text; phones and e-mails still fit their card whole. */
	.entry-content .wp-block-table:has(table.is-stack) { overflow: visible; background: none; }
	.entry-content .wp-block-table:has(table.is-stack)::before { content: none; }
	.entry-content .wp-block-table:has(table.is-stack) table { width: auto; max-width: 100%; }
}
.entry-content .wp-block-image img { height: auto; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 2.2.14: the first-order pop-up (template-parts/offer.php): a centred card; phones a bottom sheet ---------- */
.offer { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgb(7 10 34 / .45); overflow: auto; overscroll-behavior: contain; }
.offer::backdrop { background: rgb(7 10 34 / .62); }
.offer__in { position: relative; padding: var(--s-5); }
.offer__in:focus { outline: none; }
.offer__x { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--stone); cursor: pointer; }
.offer__x:hover { background: var(--paper); color: var(--navy); }
.offer__x .icon { width: 22px; height: 22px; transform: rotate(45deg); }
.offer__top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding-inline-end: 44px; } /* Room for ×. */
.offer__img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: var(--stage); }
.offer__title { margin: 0 0 6px; color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: 1.625rem; line-height: 1.4; }
.offer__line { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.75; }
.offer__code { color: var(--navy); font-family: var(--font-head); letter-spacing: .03em; }
/* The gift part: apart and calm (a thin line, a plain link, no button), the verse in Amiri Quran with room for its marks. */
.offer__gift { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; text-align: center; }
.offer__gift p { margin: 0; }
.offer__gift a { color: var(--royal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.offer__gift .offer__verse { margin-top: var(--s-3); color: var(--navy); font-family: 'Amiri Quran', serif; font-size: 1.75rem; font-weight: 400; line-height: 2.3; }
.offer__ref { color: var(--stone); font-size: var(--fs-legal); }
@media (max-width: 599px) {
	.offer { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
	.offer__in { padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
	.offer__top { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
	.offer__title { font-size: min(1.375rem, 24px); }
	.offer__gift { margin-top: var(--s-4); }
}

/* ---------- 2.2.25 (owner): gold trust seals (inc/near.php advance_seals()) and «حمايتك» (advance_protect()) ----------
   The seal is drawn in code (i-seal: a gold scalloped ring, a navy disc); the words stay HTML in the theme font.
   'in': the words inside the seal (the owner's reference). 'under': a small seal with its icon, the words under it. */
.seals { margin: var(--s-3) 0 0; }
.seals__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.seal__in { position: relative; display: grid; justify-items: center; align-content: center; color: var(--ink); text-decoration: none; }
a.seal__in:focus-visible { outline: 2px solid var(--brass-l); outline-offset: 3px; border-radius: 50%; }
.seal__bg { width: 100%; height: 100%; }
.seal__ic { color: #F6E3AE; }
.seals--in .seal__in { width: 84px; height: 84px; }
.seals--in .seal__bg { position: absolute; inset: 0; filter: drop-shadow(0 3px 6px rgb(7 10 34 / .3)); }
.seals--in .seal__ic { position: relative; width: 15px; height: 15px; margin-bottom: 2px; }
.seals--in .seal__t { position: relative; max-width: 54px; color: #FFFFFF; font-size: 10px; font-weight: 600; line-height: 1.25; text-align: center; }
/* 2.2.30 (tester N06, 150 % phone text): the seal grows with its words. Sizes in lh of the seal's 10 px / 1.25 line
   (12.5 px): the same 84 / 54 / 15 px at normal size, and large phone text scales lh (not px or em). */
.seals--in .seal__in { font-size: 10px; line-height: 1.25; width: 6.72lh; height: 6.72lh; }
.seals--in .seal__ic { width: 1.2lh; height: 1.2lh; margin-bottom: .16lh; }
.seals--in .seal__t { max-width: 4.32lh; }
.seals--under .seal__in { grid-template-rows: 46px auto; gap: 4px; width: 80px; }
.seals--under .seal__bg { grid-area: 1 / 1; width: 46px; height: 46px; filter: drop-shadow(0 2px 4px rgb(7 10 34 / .25)); }
.seals--under .seal__ic { position: relative; grid-area: 1 / 1; align-self: center; width: 18px; height: 18px; } /* Positioned: painted over the filtered seal. */
.seals--under .seal__t { font-size: 12px; font-weight: 600; line-height: 1.35; text-align: center; }
.on-dark .seals--under .seal__t { color: var(--on-blue); }
.seals__logos { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-2) 0 0; }
.seals__logos img { width: 38px; height: 24px; border-radius: 4px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.protect { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.65; }
.protect__t { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; color: var(--bronze); font-weight: 700; }
.protect__t .icon { width: 18px; height: 18px; }
.protect__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.protect__list a { color: inherit; text-decoration: underline; text-decoration-color: rgb(128 98 48 / .5); text-underline-offset: 3px; text-decoration-skip-ink: none; }
.on-dark .protect { color: var(--on-blue); }
.on-dark .protect__t { color: var(--brass-l); }
.on-dark .protect__list a { text-decoration-color: rgb(217 190 140 / .55); }
.co-seals .seals__row, .co-seals .seals__logos { justify-content: center; }
.co-protect { margin-bottom: var(--s-3); text-align: start; }

/* ---------- 2.2.30 (tester F33): touch targets of at least 44 px on touch screens ----------
   Real controls only (buttons, links that open something, link rows); links inside running text stay as they are. A
   lone control grows inside its own line with a negative margin, so nothing moves; a tight list of links gets 44 px
   rows (a little more air between them), so two targets never overlap. Mouse screens keep the old sizes. */
@media (pointer: coarse) {
	.brand { min-height: 44px; margin-block: -3px; }
	.what-link:not(.adv-buy__label *, .pricebox__label *) { min-height: 44px; margin-block: -6px; } /* Its words are centred: they stay put. */
	.trust-row a { min-height: 44px; margin: -6px -4px; padding: 6px 4px 0; } /* The words keep their place; «جهازين» is 38 px wide. */
	.adv-buy__label .what-link { padding-block: 11px; margin-block: -11px; }
	.site-foot ul a, .site-foot .adv-linkbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
	.site-foot .site-foot__doors, .site-foot .site-foot__contact, .site-foot ul, .site-foot__legal ul { row-gap: 0; }
	.protect__list a { display: inline-block; padding-block: 10.5px; }
	.protect__list { gap: 0; }
	.inside-links { gap: 0; }
	.inside-links a { display: inline-block; padding-block: 8.5px; } /* Door pages: «شوف كل الفصول». */
}

/* ---------- 2.2.37: the author page /mohamed-salah/ (templates/author-page.php) ---------- */
.apage { max-width: 46rem; margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-7); background: var(--white); }
.apage__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.apage__photo { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.apage__name { margin: 0; color: var(--navy); font-size: var(--fs-xl); line-height: 1.3; }
.apage__latin { display: block; color: var(--ink-2); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; text-align: end; }
.apage__role { margin: var(--s-1) 0 0; color: var(--ink); font-weight: 600; }
.apage__cert { margin: 2px 0 0; color: var(--bronze); font-size: var(--fs-xs); font-weight: 600; text-align: end; }
.apage h2 { margin: var(--s-6) 0 var(--s-3); color: var(--navy); font-size: var(--fs-lg); }
.apage__records, .apage__books { margin: 0; padding-inline-start: 1.2em; }
.apage__records li, .apage__books li { margin-bottom: var(--s-3); }
.apage__records strong { display: block; color: var(--navy); }
.apage__records small { display: block; margin-top: 2px; color: var(--stone); font-size: var(--fs-legal); line-height: 1.6; }
.apage__note { color: var(--stone); font-size: var(--fs-xs); }
@media (min-width: 600px) { .apage__photo { width: 160px; height: 160px; } }