/* الصفحة العامة لموقع الدكتور.
   الألوان والخطوط بتتغير من إعدادات الموقع (متغيرات :root اللي بتتحط في <style id="dp-theme">)،
   والصفحة بتشتغل عربي (RTL) وإنجليزي (LTR) بنفس الملف. */
:root {
    --ink: #10302F;
    --brand: #1B7F79;
    --brand-text: #14625D;
    --brand-dark: #14625D;
    --on-brand: #FFFFFF;
    --accent: #E0A43A;
    --on-accent: #10302F;
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --text: #10302F;
    --muted: #4D6866;
    --mist: #E8F2F1;
    --line: #D3E2E0;
    --on-ink: #FFFFFF;
    --on-ink-soft: #CFE6E3;
    --shadow: rgba(16, 48, 47, .13);
    --f-head: "Cairo", system-ui, sans-serif;
    --f-body: "Cairo", system-ui, sans-serif;
    --field-line: #B9CFCC;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.8; color: var(--text); background: var(--paper); }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.35; margin: 0; }
p { margin: 0; }
a { color: var(--brand-text); }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* خط كل قسم: المتغيرات بتتظبط من الثيم، وهنا بنطبّقها */
[data-sec] { font-family: var(--f-body); }
[data-sec] :is(h1, h2, h3, h4) { font-family: var(--f-head); }
[data-sec] :is(input, select, textarea, button) { font-family: inherit; }

.i { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.i.b { fill: currentColor; stroke: none; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
[dir=rtl] .flip { transform: scaleX(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* ---------- أزرار ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 2px solid transparent; border-radius: 12px; background: transparent; font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, filter .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(.94); }
.btn-ghost { color: var(--on-ink); border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-solid { background: var(--brand); color: var(--on-brand); }
.btn-solid:hover { background: var(--brand-dark); }
.btn-outline { color: var(--brand-text); border-color: var(--line); background: var(--card); }
.btn-outline:hover { border-color: var(--brand); background: var(--mist); }
.btn-sm { padding: 8px 18px; font-size: 15px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
.btn-wa { background: #0F7A40; color: #fff; }
.btn-wa:hover { background: #0B6234; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- شريط التنقل ---------- */
.topnav { position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--on-ink); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.topnav-in { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.tn-name { max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-family: var(--f-head); font-weight: 700; text-decoration: none; }
.tn-links { display: flex; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tn-links::-webkit-scrollbar { display: none; }
.tn-links a { padding: 6px 13px; border-radius: 8px; color: var(--on-ink-soft); font-size: 15px; text-decoration: none; white-space: nowrap; }
.tn-links a:hover, .tn-links a.on { background: rgba(255, 255, 255, .1); color: var(--on-ink); }
.langbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.langbtn:hover { background: rgba(255, 255, 255, .12); }

/* قوالب فاتحة: شريط التنقل على لون الصفحة */
.lay-centered .topnav { background: var(--paper); color: var(--text); border-bottom-color: var(--line); }
.lay-centered .tn-links a { color: var(--muted); }
.lay-centered .tn-links a:hover, .lay-centered .tn-links a.on { background: var(--mist); color: var(--text); }
.lay-centered .langbtn { border-color: var(--line); }
.lay-centered .langbtn:hover { background: var(--mist); }

/* ---------- الهيرو (مشترك) ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; }
.hero .spec { margin-top: 10px; color: var(--on-ink-soft); font-size: clamp(18px, 2.4vw, 23px); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hchip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 15px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 15px; }
.hchip .dot { width: 9px; height: 9px; border-radius: 50%; background: #F0B1AB; }
.hchip.open .dot { background: #5EE6A0; box-shadow: 0 0 0 4px rgba(94, 230, 160, .22); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: var(--brand-dark); }
.preview-banner { padding: 10px 0; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700; text-align: center; }

/* كلاسيكي: هيرو غامق وصورة في إطار مقوّس */
.hero-classic.has-cover::before { content: ""; position: absolute; inset: -12px; background-image: var(--cover); background-size: cover; background-position: center; opacity: var(--cov-op, .16); filter: grayscale(var(--cov-gray, 1)) blur(var(--cov-blur, 4px)); }
.hero-classic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 10%, rgba(255, 255, 255, .08), transparent 55%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .2)); pointer-events: none; }
.hero-classic .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; padding-top: 64px; }
.hero-classic .hero-grid.has-photo { grid-template-columns: minmax(0, 1fr) 340px; }
.hero-classic .hero-text { padding-bottom: 84px; }
.hero-classic .portrait { border-radius: 999px 999px 0 0; box-shadow: 0 0 0 10px rgba(255, 255, 255, .07); }

.hero-centered .btn-ghost { color: var(--text); border-color: var(--field-line); }
.hero-centered .btn-ghost:hover { background: var(--mist); }

/* بروفايل: غلاف عريض وصورة دايرية في النص */
.hero-centered { background: var(--paper); color: var(--text); }
.hero-centered .hero-cover { height: clamp(170px, 24vw, 280px); background: var(--ink) var(--cover, none) center / cover no-repeat; position: relative; }
.hero-centered .hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); opacity: var(--cov-tint, .82); mix-blend-mode: multiply; }
.hero-centered:not(.has-cover) .hero-cover { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }
.hero-centered:not(.has-cover) .hero-cover::after { display: none; }
.hero-centered .hero-grid { display: grid; justify-items: center; gap: 0; text-align: center; padding: 0 0 56px; }
.hero-centered .hero-photo { order: -1; width: clamp(130px, 18vw, 170px); margin-top: calc(clamp(130px, 18vw, 170px) / -2); }
.hero-centered .portrait { aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--paper); box-shadow: 0 12px 34px var(--shadow); }
.hero-centered .hero-text { margin-top: 18px; max-width: 720px; }
.hero-centered .hero-chips, .hero-centered .actions { justify-content: center; }
.hero-centered .spec { color: var(--brand-text); font-weight: 600; }
.hero-centered .hchip { background: var(--mist); border-color: var(--line); color: var(--text); }

/* جريء: صورة الغلاف بالعرض كله وعنوان كبير */
.hero-bold { background: var(--ink); }
.hero-bold::before { content: ""; position: absolute; inset: 0; background: var(--cover, none) center / cover no-repeat; opacity: var(--cov-op, .55); }
.hero-bold:not(.has-cover)::before { background: radial-gradient(900px 400px at 80% 0%, var(--brand), transparent 70%); opacity: .55; }
.hero-bold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(0, 0, 0, .25) 65%, rgba(0, 0, 0, .45) 100%); pointer-events: none; }
.hero-bold .hero-grid { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 76px 0 112px; }
.hero-bold h1 { font-size: clamp(40px, 7.4vw, 84px); font-weight: 900; line-height: 1.12; max-width: 14ch; text-wrap: balance; }
.hero-bold .spec { font-size: clamp(19px, 2.6vw, 26px); }
.hero-bold .hero-photo { order: -1; width: 112px; }
.hero-bold .portrait { aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--accent); }

/* ---------- ظهور صورة الغلاف (اختيار الدكتور) ---------- */
.hero.cov-1 { --cov-op: .2; --cov-tint: .9; --cov-gray: 1; --cov-blur: 4px; }
.hero.cov-2 { --cov-op: .45; --cov-tint: .72; --cov-gray: 1; --cov-blur: 1px; }
.hero.cov-3 { --cov-op: .8; --cov-tint: .35; --cov-gray: 0; --cov-blur: 0px; }
.hero.cov-3 :is(h1, .spec) { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.hero-classic.cov-3::after, .hero-split.cov-3::after, .hero-glass.cov-3::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .55)); }

/* ---------- قالب «منقسم»: كلام على جنب وصورة بالطول على الجنب التاني ---------- */
.hero-split { background: var(--ink); }
.hero-split.has-cover::before { content: ""; position: absolute; inset: 0; background: var(--cover) center / cover no-repeat; opacity: var(--cov-op, .12); filter: grayscale(1); }
.hero-split::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--brand-dark) -20%, transparent 62%); opacity: .55; pointer-events: none; }
.hero-split > .wrap { position: static; }
.hero-split .hero-grid { position: static; display: block; padding: 0; }
.hero-split .hero-text { position: relative; z-index: 2; max-width: min(540px, 52%); padding: 92px 0 118px; }
.hero-split .hero-grid:not(.has-photo) .hero-text { max-width: 720px; }
.hero-split .hero-photo { position: absolute; z-index: 1; inset-block: 0; inset-inline-end: 0; width: 44%; border-inline-start: 8px solid var(--accent); background: var(--brand-dark); }
.hero-split .portrait { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-position: center 20%; }
.hero-split h1 { font-weight: 900; }
.lay-split .topnav { background: var(--ink); }

/* ---------- قالب «زجاجي»: خلفية متدرجة وأزرار شفافة ---------- */
.hero-glass { background: var(--ink); }
.hero-glass::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(620px 420px at 12% 8%, color-mix(in srgb, var(--brand) 78%, transparent), transparent 70%),
    radial-gradient(560px 460px at 92% 92%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 70%),
    radial-gradient(420px 300px at 70% 10%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%); }
.hero-glass.has-cover::before { background: var(--cover) center / cover no-repeat, var(--ink); opacity: var(--cov-op, .25); filter: saturate(1.2) blur(2px); }
.hero-glass.has-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 420px at 12% 8%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 70%), radial-gradient(560px 460px at 92% 92%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); pointer-events: none; }
.hero-glass .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; padding: 76px 0 112px; }
.hero-glass .hero-grid.has-photo { grid-template-columns: minmax(0, 1fr) 330px; }
.hero-glass .hero-text { padding: 34px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 30px; background: rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 24px 60px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hero-glass .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-glass .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.hero-glass .portrait { aspect-ratio: 1 / 1.12; border-radius: 42% 58% 46% 54% / 38% 42% 58% 62%; border: 4px solid rgba(255, 255, 255, .55); box-shadow: 0 0 0 12px rgba(255, 255, 255, .08), 0 30px 70px rgba(0, 0, 0, .35); }
.hero-glass .hero-photo { position: relative; }
.hero-glass .hero-photo::after { content: ""; position: absolute; z-index: -1; inset: -26px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); filter: blur(6px); }
.lay-glass .quick-in { border-radius: 24px; }
.lay-glass .btn { border-radius: 999px; }
.lay-glass .svc, .lay-glass .clinic, .lay-glass .quote, .lay-glass form.bk, .lay-glass .success { border-radius: 26px; }

/* ---------- قالب «بطاقة»: بطاقة شخصية مركّزة ---------- */
.lay-card .topnav { background: var(--paper); color: var(--text); border-bottom-color: var(--line); }
.lay-card .tn-links a { color: var(--muted); }
.lay-card .tn-links a:hover, .lay-card .tn-links a.on { background: var(--mist); color: var(--text); }
.lay-card .langbtn { border-color: var(--line); }
.hero-card { background: linear-gradient(180deg, var(--mist), var(--paper) 85%); color: var(--text); padding: 40px 0 34px; overflow: visible; }
.hero-card > .wrap { width: min(560px, 100% - 32px); }
.hero-card .hero-grid { position: relative; display: grid; justify-items: center; gap: 0; overflow: hidden; padding: 0 28px 32px; border: 1px solid var(--line); border-radius: 30px; background: var(--card); box-shadow: 0 24px 60px var(--shadow); text-align: center; }
.hero-card .hero-grid::before { content: ""; order: -2; display: block; width: calc(100% + 56px); height: 132px; margin-inline: -28px; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }
.hero-card.has-cover .hero-grid::before { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-dark) calc(var(--cov-tint, .7) * 100%), transparent), color-mix(in srgb, var(--brand) calc(var(--cov-tint, .7) * 100%), transparent)), var(--cover) center / cover no-repeat; }
.hero-card .hero-photo { order: -1; position: relative; z-index: 1; width: 132px; margin-top: -66px; }
.hero-card .hero-grid:not(.has-photo)::before { height: 110px; }
.hero-card .portrait { aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--card); box-shadow: 0 10px 28px var(--shadow); }
.hero-card .hero-text { margin-top: 16px; width: 100%; }
.hero-card h1 { font-size: clamp(26px, 5vw, 34px); }
.hero-card .spec { margin-top: 4px; color: var(--brand-text); font-weight: 600; font-size: 18px; }
.hero-card .hero-chips { justify-content: center; margin-top: 14px; }
.hero-card .hchip { background: var(--mist); border-color: var(--line); color: var(--text); }
.hero-card .actions { flex-direction: column; gap: 10px; margin-top: 22px; }
.hero-card .actions .btn { width: 100%; padding: 15px 20px; font-size: 17px; }
.hero-card .btn-ghost { color: var(--text); border-color: var(--field-line); }
.hero-card .btn-ghost:hover { background: var(--mist); }
.lay-card .quick { margin-top: 0; padding-top: 6px; }
.lay-card .quick .wrap { width: min(560px, 100% - 32px); }

/* ---------- شريط الوصول السريع ---------- */
.quick { position: relative; z-index: 2; margin-top: -36px; }
.lay-centered .quick { margin-top: 0; padding-top: 6px; }
.quick-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 44px var(--shadow); }
.q-item { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-inline-start: 1px solid var(--line); color: var(--text); text-decoration: none; }
.q-item:first-child { border-inline-start: 0; }
a.q-item:hover { background: var(--mist); }
.q-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--mist); color: var(--brand-text); font-size: 22px; }
.q-t { min-width: 0; line-height: 1.5; }
.q-t small { display: block; color: var(--muted); font-size: 13px; }
.q-t strong { display: block; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- الأقسام ---------- */
.section { padding: 64px 0; scroll-margin-top: 62px; }
.section h2 { margin-bottom: 30px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; }
.section h2::after { content: ""; display: block; width: 52px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--accent); }
.band-mist { background: var(--mist); }
.about p { max-width: 66ch; font-size: 18.5px; white-space: pre-line; }

/* الخدمات */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.svc-grid.few { grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); }
.svc { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: transform .2s, box-shadow .2s; }
.svc::before { content: ""; position: absolute; top: -1px; inset-inline: 24px; height: 4px; border-radius: 0 0 6px 6px; background: var(--brand); }
.svc:hover { transform: translateY(-3px); box-shadow: 0 14px 34px var(--shadow); }
.svc h3 { font-size: 19px; }
.svc p { margin-top: 8px; color: var(--muted); }
.svc .price { align-self: flex-start; margin-top: auto; padding: 2px 15px; border-radius: 999px; background: var(--mist); color: var(--brand-text); font-size: 15px; font-weight: 700; }
.svc p + .price, .svc h3 + .price { margin-top: 16px; }

/* الأرقام */
.stats-band { padding: 46px 0; background: var(--ink); color: var(--on-ink); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; text-align: center; }
.stat-v { color: var(--accent); font-family: var(--f-head); font-size: clamp(36px, 5vw, 52px); font-weight: 800; line-height: 1.15; }
.stat-l { margin-top: 6px; color: var(--on-ink-soft); }

/* الشهادات */
.timeline { position: relative; max-width: 780px; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 11px; width: 2px; background: var(--line); }
.tl { position: relative; padding-inline-start: 46px; padding-bottom: 28px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; top: 9px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 4px solid var(--brand); }
.tl .yr { display: inline-block; margin-bottom: 4px; padding: 0 13px; border-radius: 999px; background: var(--mist); color: var(--brand-text); font-size: 14px; font-weight: 700; }
.tl h3 { font-size: 19px; }
.tl p { margin-top: 2px; color: var(--muted); }

/* آراء المرضى */
.quotes { columns: 3 290px; column-gap: 22px; }
.quote { display: block; margin: 0 0 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 18px; break-inside: avoid; box-shadow: 0 4px 16px var(--shadow); }
.quote-img { display: block; width: 100%; padding: 0; border: 0; background: var(--mist); cursor: zoom-in; }
.quote-img img { display: block; width: 100%; height: auto; }
.quote-body { position: relative; padding: 22px 22px 14px; }
.quote-body::before { content: "“"; position: absolute; top: 2px; inset-inline-start: 16px; color: var(--accent); font-family: Georgia, serif; font-size: 54px; line-height: 1; opacity: .8; }
.quote-body p { position: relative; padding-top: 18px; font-size: 17.5px; white-space: pre-line; }
.quote-img + .quote-body::before { display: none; }
.quote-img + .quote-body p { padding-top: 0; }
.quote-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 22px 16px; }
.quote-img + .quote-foot { border-top: 1px solid var(--line); }
.quote-name { color: var(--muted); font-weight: 700; font-size: 15.5px; }
.stars { color: var(--accent); font-size: 18px; letter-spacing: 2px; line-height: 1; }

/* المعرض */
.gallery { --cols: 3; columns: var(--cols) 160px; column-gap: 14px; }
.gallery a { display: block; margin-bottom: 14px; overflow: hidden; border-radius: 14px; background: var(--mist); break-inside: avoid; cursor: zoom-in; }
.gallery img { display: block; width: 100%; height: auto; transition: transform .35s; }
.gallery a:hover img { transform: scale(1.04); }
/* جنب بعض: شبكة منتظمة */
.gallery.g-grid { columns: auto; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 14px; }
.gallery.g-grid a { margin: 0; aspect-ratio: 4 / 3; }
.gallery.g-grid.g-square a { aspect-ratio: 1; }
.gallery.g-grid.g-portrait a { aspect-ratio: 3 / 4; }
.gallery.g-grid img { height: 100%; object-fit: cover; }
/* بالطول: صورة تحت صورة */
.gallery.g-column { columns: auto; display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 18px; }
.gallery.g-column a { margin: 0; }
.gallery.g-column.g-square a { aspect-ratio: 1; }
.gallery.g-column.g-portrait a { aspect-ratio: 3 / 4; }
.gallery.g-column.g-square img, .gallery.g-column.g-portrait img { height: 100%; object-fit: cover; }
.gallery.g-column.g-portrait { grid-template-columns: minmax(0, 520px); }
/* سلايدر */
.gslider { --cols: 3; position: relative; }
.gs-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; outline-offset: 3px; }
.gs-track::-webkit-scrollbar { display: none; }
.gs-item { flex: 0 0 calc((100% - 14px * (var(--cols) - 1)) / var(--cols)); scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--mist); cursor: zoom-in; }
.gslider.g-square .gs-item { aspect-ratio: 1; }
.gslider.g-portrait .gs-item { aspect-ratio: 3 / 4; }
.gs-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gs-item:hover img { transform: scale(1.04); }
.gs-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #10302F; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; transition: opacity .15s, transform .15s; }
.gs-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gs-btn:hover { transform: scale(1.08); }
.gs-btn[disabled] { opacity: 0; pointer-events: none; }
.gs-prev { inset-inline-start: 8px; }
.gs-next { inset-inline-end: 8px; }
/* السهم الأول بيشاور ناحية بداية القراءة */
[dir=rtl] .gs-prev svg { transform: none; }
[dir=ltr] .gs-prev svg { transform: scaleX(-1); }
[dir=rtl] .gs-next svg { transform: scaleX(-1); }

/* الفيديوهات */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 22px; }
.videos.single { grid-template-columns: minmax(0, 820px); }
.vcard { display: block; align-self: start; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--ink); box-shadow: 0 8px 26px var(--shadow); }
.vthumb img, .vthumb .vposter { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; pointer-events: none; }
.vcard:hover .vthumb img, .vcard:hover .vthumb .vposter { transform: scale(1.05); }
.vbadge.upload { background: rgba(0, 0, 0, .62); color: #fff; }
.vfallback { position: absolute; inset: 0; display: grid; place-content: end center; justify-items: center; gap: 6px; padding: 0 12px 16px; text-align: center; font-size: 15px; background: linear-gradient(135deg, #1877F2, #0B4DB3); color: #fff; font-family: var(--f-head); font-weight: 700; }
.vfallback .i { display: none; }
.vshade { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .5)); }
.vplay { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .96); color: #10302F; box-shadow: 0 8px 28px rgba(0, 0, 0, .4); transition: transform .2s; }
.vplay svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
.vcard:hover .vplay { transform: scale(1.1); }
.vbadge { position: absolute; top: 12px; inset-inline-start: 12px; padding: 1px 12px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; }
.vbadge.youtube { background: #D92D2D; }
.vbadge.facebook { background: #1877F2; }
.vbadge.tiktok { background: #111; }
.vbadge.instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.vfallback.tiktok { background: linear-gradient(135deg, #25F4EE22, #111 40%, #FE2C55); }
.vfallback.instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.vfallback.youtube { background: linear-gradient(135deg, #D92D2D, #8E1A1A); }
/* فيديوهات طولية (تيك توك / ريلز) */
.videos.vportrait { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 18px; }
.videos.vportrait.single { grid-template-columns: minmax(0, 300px); }
.videos.vportrait .vthumb { aspect-ratio: 9 / 16; }
.videos.vportrait .vplay { width: 58px; height: 58px; }
.vtitle { display: block; margin-top: 12px; font-family: var(--f-head); font-weight: 700; font-size: 17.5px; line-height: 1.5; }

/* قبل وبعد (الشريط دايمًا LTR، والقبل على جهة القراءة الأولى) */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px 24px; }
.ba { margin: 0; }
.ba-stage { position: relative; direction: ltr; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--mist); box-shadow: 0 8px 26px var(--shadow); user-select: none; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { clip-path: inset(0 0 0 var(--pos, 50%)); }
[dir=ltr] .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-tag { position: absolute; top: 12px; padding: 1px 14px; border-radius: 999px; background: rgba(16, 48, 47, .78); color: #fff; font-size: 14px; font-weight: 700; pointer-events: none; }
.ba-tag.t-after { left: 12px; }
.ba-tag.t-before { right: 12px; }
[dir=ltr] .ba-tag.t-before { left: 12px; right: auto; }
[dir=ltr] .ba-tag.t-after { right: 12px; left: auto; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .4); pointer-events: none; }
.ba-handle::after { content: "⇆"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; color: #10302F; font-size: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.ba-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba-stage:focus-within .ba-handle::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.ba figcaption { margin-top: 12px; text-align: center; font-weight: 700; }

/* الأسئلة */
.faq { max-width: 800px; }
.faq details { margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s; }
.faq details[open] { border-color: var(--brand); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); color: var(--brand-text); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; background: var(--brand); color: var(--on-brand); }
.faq .ans { max-width: 66ch; padding: 0 22px 20px; white-space: pre-line; color: var(--muted); }

/* العيادات */
.clinic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 44px; margin-bottom: 20px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 6px 22px var(--shadow); }
.clinic h3 { font-size: 22px; }
.clinic-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.open-pill { display: inline-flex; align-items: center; gap: 8px; padding: 1px 13px; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: 14px; font-weight: 700; }
.open-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9AABAC; }
.open-pill.ok { background: #DDF1EC; color: #0B6A3A; }
.open-pill.ok::before { background: #1FB86B; }
.clinic .addr { display: flex; gap: 8px; margin-top: 10px; }
.clinic .addr .i { margin-top: 5px; color: var(--brand-text); }
.clinic-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.clinic h4 { margin-bottom: 10px; font-size: 16px; color: var(--muted); }
.hours { display: grid; gap: 4px 0; margin: 0; }
.hours > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding: 9px 14px; border-radius: 10px; border-inline-start: 4px solid transparent; }
.hours > div:nth-child(odd) { background: var(--mist); background: color-mix(in srgb, var(--mist) 60%, transparent); }
.hours > div.today { background: var(--mist); border-inline-start-color: var(--brand); }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; color: var(--muted); }
.hours-empty { color: var(--muted); }

/* الحجز */
.booking-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: start; }
.booking-intro p { max-width: 38ch; margin-bottom: 16px; }
.contact-lines { display: grid; gap: 10px; margin-top: 22px; }
.contact-lines a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font-weight: 700; text-decoration: none; }
.contact-lines a:hover { border-color: var(--brand); }
.contact-lines .i { color: var(--brand-text); font-size: 22px; }
form.bk, .success { padding: 30px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 34px var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.field .opt { color: var(--muted); font-weight: 400; font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--paper); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(127, 127, 127, .18); }
.field select:disabled, .field input:disabled { background: var(--mist); color: var(--muted); cursor: not-allowed; }
.field input[dir=ltr] { text-align: start; }
[dir=rtl] .field input[dir=ltr] { text-align: right; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pending-hint { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--mist); color: var(--brand-text); font-size: 15px; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; }
.notice-err { background: #FBE9E7; border: 1px solid #F0C2BC; color: #8A2C20; }
.success { text-align: center; }
.success .tick { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; background: #DDF1EC; color: #0F7A40; font-size: 34px; }
.success h3 { font-size: 24px; }
.success > p { margin-top: 6px; color: var(--muted); }
.success dl { display: grid; gap: 6px; margin: 20px auto 0; padding: 14px 18px; max-width: 380px; border-radius: 12px; background: var(--mist); text-align: start; }
.success dl div { display: flex; justify-content: space-between; gap: 14px; }
.success dt { color: var(--muted); }
.success dd { margin: 0; font-weight: 700; }
.success .actions { justify-content: center; }

/* الحجز بالدور: عدد اللي قبلك والميعاد التقريبي */
.q-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: -4px 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--mist); color: var(--brand-text); font-size: 15px; border: 1px dashed color-mix(in srgb, var(--brand) 35%, transparent); }
.q-live b { color: var(--text); }
.q-live.is-full { background: #FBE9E7; border-color: #F0C2BC; color: #8A2C20; }
.q-live .q-full { color: #8A2C20; }
.yn { display: flex; gap: 10px; }
.yn label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 10px 18px; border: 1.5px solid var(--field-line); border-radius: 12px; cursor: pointer; font-weight: 600 !important; }
.yn label:has(input:checked) { border-color: var(--brand); background: var(--mist); }
.yn input { width: auto !important; accent-color: var(--brand); }

/* تذكرة الحجز */
.success .q-head { font-size: 26px; color: var(--brand-text); }
.ticket { position: relative; max-width: 400px; margin: 20px auto 0; border-radius: 22px; background: color-mix(in srgb, var(--brand) 5%, var(--card)); box-shadow: 0 14px 36px var(--shadow); border: 1px solid var(--line); overflow: hidden; text-align: start; }
.ticket .tk-h { padding: 18px 22px 16px; background: var(--brand); color: var(--on-brand); }
.ticket .tk-h b { display: block; font-family: var(--f-head); font-size: 19px; line-height: 1.4; }
.ticket .tk-h small { opacity: .85; font-size: 13.5px; }
.ticket .tk-num { padding: 18px 20px 8px; text-align: center; }
.ticket .tk-num small { display: block; color: var(--muted); font-weight: 700; font-size: 14px; }
.ticket .tk-num > b { display: block; color: var(--brand-text); font-family: var(--f-head); font-size: 86px; font-weight: 900; line-height: 1.05; }
.ticket .tk-num span { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--mist); font-size: 14.5px; }
.ticket .tk-rows { position: relative; display: grid; gap: 2px; margin: 12px 0 0 !important; padding: 16px 22px 8px !important; max-width: none !important; background: none !important; border-top: 2px dashed var(--line); border-radius: 0 !important; }
.ticket .tk-rows::before, .ticket .tk-rows::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
.ticket .tk-rows::before { inset-inline-start: -12px; }
.ticket .tk-rows::after { inset-inline-end: -12px; }
.ticket .tk-rows div { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ticket .tk-rows div:last-child { border-bottom: 0; }
.ticket .tk-code { display: flex; justify-content: space-between; align-items: center; margin: 4px 16px 16px; padding: 10px 14px; border-radius: 12px; background: var(--mist); }
.ticket .tk-code span { color: var(--muted); font-size: 14px; }
.ticket .tk-code b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: 3px; }
.tk-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.tk-acts .is-done { background: #0F7A40; }
.tk-hint { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* الفوتر */
.foot { padding: 34px 0 30px; background: var(--ink); color: var(--on-ink-soft); text-align: center; }
.foot .name { color: var(--on-ink); font-family: var(--f-head); font-size: 20px; font-weight: 700; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--on-ink); font-size: 21px; text-decoration: none; transition: background .15s; }
.socials a:hover { background: rgba(255, 255, 255, .14); }
.foot small { display: block; margin-top: 10px; opacity: .7; font-size: 14px; }
.foot .share { margin-top: 6px; }

/* واتساب وشريط الموبايل */
.wa-float { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: #0F7A40; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.wa-float:hover { background: #0B6234; }
.mbar { display: none; }

/* ---------- نوافذ العرض (صور وفيديو) ---------- */
dialog.lb, dialog.player-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(6, 18, 17, .97); color: #fff; }
dialog.lb[open], dialog.player-dialog[open] { display: grid; place-items: center; }
dialog::backdrop { background: rgba(6, 18, 17, .8); }
.lb-close, .lb-nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-close { top: 16px; inset-inline-end: 16px; }
.lb-nav { top: 50%; margin-top: -23px; }
.lb-prev { inset-inline-start: 16px; }
.lb-next { inset-inline-end: 16px; }
.lb figure { display: grid; justify-items: center; gap: 12px; margin: 0; padding: 70px 70px 40px; }
.lb img { display: block; max-width: min(1100px, 92vw); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: 10px; object-fit: contain; }
.lb-count { color: #B7D2CE; font-size: 14px; }
.player-box { position: relative; width: min(1000px, 94vw); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.player-box.portrait { width: min(420px, 92vw, calc((100dvh - 80px) * 9 / 16)); aspect-ratio: 9 / 16; }
.player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-box video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }

/* ---------- موبايل ---------- */
@media (max-width: 900px) {
    .booking-grid { grid-template-columns: 1fr; gap: 30px; }
    .clinic { grid-template-columns: 1fr; padding: 22px; }
}
@media (max-width: 760px) {
    body { font-size: 16.5px; padding-bottom: 76px; }
    .tn-links { display: none; }
    .tn-name { max-width: 50%; }
    .topnav-in .btn { display: none; }
    .tn-name { margin-inline-end: auto; }
    .langbtn { white-space: nowrap; }
    .section { padding: 46px 0; }
    .hero-classic .hero-grid { gap: 26px; padding-top: 40px; }
    .hero-classic .hero-grid.has-photo { grid-template-columns: 1fr; }
    .hero-classic .hero-text { padding-bottom: 52px; }
    .hero-classic .has-photo .hero-text { padding-bottom: 0; }
    .hero-classic .portrait { max-width: 240px; margin-inline: auto; }
    .hero-bold .hero-grid { padding: 44px 0 90px; }
    .hero-split .hero-grid.has-photo { display: flex; flex-direction: column-reverse; }
    .hero-split .hero-text, .hero-split .hero-grid:not(.has-photo) .hero-text { max-width: none; padding: 34px 0 86px; }
    .hero-split .hero-photo { position: relative; inset: auto; width: calc(100% + 40px); height: 300px; margin-inline: -20px; border-inline-start: 0; border-block-end: 6px solid var(--accent); }
    .hero-glass .hero-grid, .hero-glass .hero-grid.has-photo { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 86px; }
    .hero-glass .hero-text { padding: 24px; border-radius: 24px; }
    .hero-glass .hero-photo { max-width: 250px; margin-inline: auto; order: -1; }
    .hero-card { padding-top: 22px; }
    .hero-card .hero-grid { padding-inline: 20px; }
    .hero-card .hero-grid::before { width: calc(100% + 40px); margin-inline: -20px; }
    .quick { margin-top: -24px; }
    .lay-centered .quick, .lay-card .quick { margin-top: 0; }
    .q-item { border-inline-start: 0; border-top: 1px solid var(--line); padding: 14px 18px; }
    .q-item:first-child { border-top: 0; }
    .row2 { grid-template-columns: 1fr; gap: 0; }
    form.bk, .success { padding: 22px; }
    .quotes { columns: 1; }
    .gallery { columns: 2 140px; column-gap: 10px; }
    .gallery a { margin-bottom: 10px; }
    .gallery.g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gallery.g-grid a { margin: 0; }
    .gs-item { flex-basis: calc((100% - 10px) / 2); }
    .gs-track { gap: 10px; }
    .gs-btn { width: 38px; height: 38px; margin-top: -19px; }
    .videos { grid-template-columns: 1fr; }
    .videos.vportrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .videos.vportrait.single { grid-template-columns: minmax(0, 260px); }
    .ba-grid { grid-template-columns: 1fr; }
    .wa-float { display: none; }
    .mbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 35; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px var(--shadow); }
    .mbar .btn { padding: 11px 8px; font-size: 15px; }
    .mbar .btn-primary { grid-column: span 2; }
    .mbar[data-n="1"] .btn-primary { grid-column: auto; }
    body.no-mbar { padding-bottom: 0; }
    .lb figure { padding: 64px 12px 30px; }
    .lb-nav { top: auto; bottom: 14px; margin: 0; }
    .lb-prev { inset-inline-start: 24px; }
    .lb-next { inset-inline-end: 24px; }
}
@media print { .topnav, .wa-float, .mbar { display: none; } }

/* ================== الشريط العلوي: أماكن الجمل ================== */
.tn-s, .tn-e { display: contents; }
.topnav.static { position: static; }
.ph { display: inline-block; line-height: 1.5; }
.tn-ph { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav-in.has-c { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.has-c .tn-s, .has-c .tn-e { display: flex; align-items: center; gap: 14px; min-width: 0; }
.has-c .tn-e { justify-content: flex-end; }
.tn-c { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-width: 0; max-width: 56vw; text-align: center; }
.tn-c .tn-ph { white-space: normal; }
.lang-float { position: fixed; top: 12px; inset-inline-end: 14px; z-index: 45; background: var(--ink); color: var(--on-ink); border-color: rgba(255, 255, 255, .35); }
.lay-modern .lang-float, .lay-centered .lang-float, .lay-editorial .lang-float, .lay-card .lang-float { background: var(--paper); color: var(--text); border-color: var(--line); }

/* ================== الشرايط الحرة ================== */
.band-x { --bd: var(--brand); position: relative; padding-block: 22px; background: var(--brand); color: var(--on-brand); }
.band-x.bp-s { padding-block: 10px; }
.band-x.bp-l { padding-block: 46px; }
.band-x .band-in { display: grid; gap: 6px 0; }
.band-x .bl { margin: 0; }
.band-x .ph { max-width: 100%; overflow-wrap: anywhere; }
.bd-brand { --bd: var(--brand); background: var(--brand); color: var(--on-brand); }
.bd-accent { --bd: var(--accent); background: var(--accent); color: var(--on-accent); }
.bd-ink { --bd: var(--ink); background: var(--ink); color: var(--on-ink); }
.bd-mist { --bd: var(--line); background: var(--mist); color: var(--text); }
.bd-white { --bd: var(--line); background: var(--card); color: var(--text); border-block: 1px solid var(--line); }
.band-x.bs-gradient.bd-brand { background: linear-gradient(110deg, var(--brand), color-mix(in srgb, var(--brand) 80%, var(--accent))); }
.band-x.bs-gradient.bd-accent { background: linear-gradient(110deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff)); }
.band-x.bs-gradient.bd-ink { background: linear-gradient(110deg, var(--ink), color-mix(in srgb, var(--ink) 72%, var(--brand))); }
.band-x.bs-gradient.bd-mist { background: linear-gradient(110deg, var(--mist), var(--paper)); }
.band-x.bs-gradient.bd-white { background: linear-gradient(110deg, var(--card), var(--mist)); }
.band-x.bs-outline { background: var(--paper); color: var(--text); border-block: 3px solid var(--bd); }
.band-x.bs-outline[style*="--bd"] { background: var(--paper); }

/* تحت الغلاف مباشرة: مسافة من شريط الاتصال السريع اللي بيتداخل مع الغلاف */
.quick + .band-x.bslot-under_hero { margin-top: 26px; }

/* سطور */
.bm-lines .band-in { text-align: center; }
/* مؤهلات جنب بعض */
.bchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.ba-center .bchips { justify-content: center; }
.ba-right .bchips { justify-content: flex-start; direction: rtl; }
.ba-left .bchips { justify-content: flex-start; direction: ltr; }
.bchips li { display: inline-flex; align-items: center; }
.bchips li + li::before { content: ""; width: 7px; height: 7px; margin-inline: 16px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
/* شريط متحرك */
.bmq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bmq-track { display: flex; width: max-content; animation: bmq 34s linear infinite; direction: ltr; }
.bmq:hover .bmq-track { animation-play-state: paused; }
.bmq-set { display: flex; flex: none; align-items: center; justify-content: space-around; min-width: max(100vw, 100%); margin: 0; padding: 0; list-style: none; }
.bmq-set li { display: inline-flex; align-items: center; white-space: nowrap; }
.bmq-set li::after { content: ""; width: 8px; height: 8px; margin-inline: 28px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.bmq-set li .ph { direction: rtl; }
[dir=ltr] .bmq-set li .ph { direction: ltr; }
@keyframes bmq { to { transform: translateX(-50%); } }
[dir=rtl] .bmq-track { animation-name: bmq-r; }
@keyframes bmq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .bmq { -webkit-mask-image: none; mask-image: none; overflow: visible; }
    .bmq-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
    .bmq-set[aria-hidden="true"] { display: none; }
}
/* زر الشريط */
.band-cta { margin-top: 10px; text-align: center; }
.ba-right .band-cta { text-align: right; } .ba-left .band-cta { text-align: left; }
.band-btn { color: inherit; background: none; border: 2px solid currentColor; }
.band-btn:hover { background: rgba(255, 255, 255, .16); }
.bs-outline .band-btn, .bd-mist .band-btn, .bd-white .band-btn { color: var(--brand-text); }

/* ================== لمسات إضافية ================== */
.x-progress { position: fixed; inset-inline: 0; top: 0; z-index: 70; height: 3px; background: transparent; pointer-events: none; }
.x-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
[dir=rtl] .x-progress i { transform-origin: right center; }
.x-totop { position: fixed; inset-inline-start: 18px; bottom: 20px; z-index: 30; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 22px; box-shadow: 0 10px 24px var(--shadow); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; }
.x-totop.on { opacity: 1; transform: none; pointer-events: auto; }
.x-totop:hover { filter: brightness(1.15); }
.x-reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.x-reveal .rv.rv-in { opacity: 1; transform: none; }
@media print { .x-reveal .rv { opacity: 1; transform: none; } .x-progress, .x-totop { display: none; } }

@media (max-width: 760px) {
    .topnav-in.has-c { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: 6px; }
    .has-c .tn-c { grid-column: 1 / -1; grid-row: 2; max-width: none; padding-bottom: 6px; }
    .has-c .tn-s { grid-row: 1; }
    .has-c .tn-e { grid-row: 1; grid-column: 2; }
    .has-c .tn-name { margin-inline-end: 0; }
    .topnav-in > .tn-s, .topnav-in > .tn-e { min-width: 0; }
    .tn-s .tn-ph { max-width: 46vw; }
    .x-totop { bottom: 88px; inset-inline-start: 14px; width: 42px; height: 42px; }
    body.no-mbar .x-totop { bottom: 20px; }
    .lang-float { top: 8px; }
}

/* ---------- التخصص متعدد الأسطر + حجم الاسم (اختيار الدكتور) ---------- */
.hero .spec { white-space: pre-line; }
.hero.hs-s h1 { font-size: clamp(26px, 4vw, 40px); }
.hero.hs-m h1 { font-size: clamp(32px, 5vw, 54px); }
.hero.hs-l h1 { font-size: clamp(38px, 6.4vw, 70px); line-height: 1.15; }
.hero.hs-xl h1 { font-size: clamp(44px, 8.4vw, 98px); line-height: 1.08; }

/* ---------- ترتيب الغلاف المخصص: النص فوق الغلاف أو تحته، والمحاذاة ومكان الصورة بإيد الدكتور ---------- */
.hero-custom { --pw: min(300px, 32%); --ai: flex-start; --ta: start; }
.hero-custom.ha-start { --ai: flex-start; --ta: start; }
.hero-custom.ha-center { --ai: center; --ta: center; }
.hero-custom.ha-end { --ai: flex-end; --ta: end; }
.hero-custom .hero-grid { display: flex; align-items: center; gap: clamp(24px, 5vw, 56px); padding: 60px 0 84px; }
.hero-custom .hero-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: var(--ai); gap: 12px; text-align: var(--ta); }
.hero-custom .hero-text > * { margin: 0; max-width: 100%; }
.hero-custom .hero-text .actions { margin-top: 8px; justify-content: var(--ai); }
.hero-custom .hero-chips { justify-content: var(--ai); }
.hero-custom .hero-photo { flex: 0 0 var(--pw); width: var(--pw); position: relative; }
.hero-custom.hp-start .hero-photo { order: -1; }
.hero-custom .portrait { aspect-ratio: 4 / 5; border-radius: 28px; box-shadow: 0 20px 50px var(--shadow); }
.hero-custom:not(.hm-below) .portrait { box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .3); }
.hero-custom.hp-top { --pw: clamp(124px, 17vw, 176px); }
.hero-custom.hp-top .hero-grid { flex-direction: column; align-items: var(--ai); gap: 20px; }
.hero-custom.hp-top .hero-photo { order: -1; }
.hm-over.hp-top .hero-grid { padding-top: 56px; }
.hero-custom.hp-top .hero-text { flex: 0 1 auto; width: 100%; max-width: 760px; }
.hero-custom.hp-top .portrait { aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--accent); }
.hero-custom.hp-top.ha-start .hero-grid .hero-text { align-self: stretch; }
.hero-custom.hp-top.ha-center .hero-text { align-self: center; }
.hero-custom.hp-top.ha-end .hero-text { align-self: flex-end; }
.hero-custom.hp-top.ha-start .hero-text { align-self: flex-start; }
.hero-custom .hero-grid:not(.has-photo) .hero-text { max-width: 820px; }
.hero-custom.ha-center .hero-grid:not(.has-photo) .hero-text { margin-inline: auto; }
.hero-custom.ha-end .hero-grid:not(.has-photo) .hero-text { margin-inline-start: auto; }

/* النص فوق صورة الغلاف */
.hm-over { background: var(--ink); color: var(--on-ink); }
.hm-over::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 80% 0%, var(--brand), transparent 70%); opacity: .5; }
.hm-over.has-cover::before { background: var(--cover) center / cover no-repeat; opacity: var(--cov-op, .45); filter: grayscale(var(--cov-gray, 0)) blur(var(--cov-blur, 0px)); }
.hm-over::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .1) 40%, var(--ink) 118%); pointer-events: none; }
.hm-over.cov-3::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .55)); }

/* النص تحت الغلاف: شريط غلاف لوحده وتحته الهوية على خلفية الصفحة */
.hm-below { background: var(--paper); color: var(--text); }
.hm-below .hero-banner { position: relative; height: clamp(150px, 22vw, 270px); background: var(--ink) var(--cover, none) center / cover no-repeat; }
.hm-below .hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); opacity: var(--cov-tint, .55); mix-blend-mode: multiply; }
.hm-below:not(.has-cover) .hero-banner { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }
.hm-below:not(.has-cover) .hero-banner::after { display: none; }
.hm-below .hero-grid { padding: 40px 0 76px; }
.hm-below h1 { color: var(--text); }
.hm-below .spec { color: var(--brand-text); font-weight: 600; }
.hm-below .hchip { background: var(--mist); border-color: var(--line); color: var(--text); }
.hm-below .btn-ghost { color: var(--text); border-color: var(--field-line); }
.hm-below .btn-ghost:hover { background: var(--mist); }
.hm-below.hp-top .hero-grid { padding-top: 0; }
.hm-below.hp-top .hero-photo { margin-top: calc(var(--pw) / -2); }
.hm-below.hp-top .portrait { border: 6px solid var(--paper); box-shadow: 0 12px 34px var(--shadow); }
.hm-below.hs-xl .hero-grid, .hm-over.hs-xl .hero-grid { padding-bottom: 90px; }
.hero-custom + .quick { margin-top: -36px; }

@media (max-width: 760px) {
    .hero-custom .hero-grid { flex-direction: column; align-items: var(--ai); padding: 44px 0 64px; gap: 22px; }
    .hero-custom .hero-text { width: 100%; flex: 0 1 auto; }
    .hero-custom .hero-photo, .hero-custom.hp-top .hero-photo { flex: 0 0 auto; width: min(210px, 62%); order: -1; }
    .hero-custom.hp-top { --pw: 130px; }
    .hero-custom.hp-top .hero-photo { width: var(--pw); }
    .hm-below .hero-grid { padding-top: 28px; }
    .hm-below.hp-top .hero-grid { padding-top: 0; }
    .hm-below:not(.hp-top) .hero-photo { margin-top: 0; }
}

/* ---------- الأزرار والنماذج المخصصة ---------- */
.fx { max-width: 560px; margin-inline: auto; }
.fx-title { margin: 0 0 6px; font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 800; }
.fx-intro { margin: 0 0 16px; color: var(--muted, #5b6478); }
.fx-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fx-f { margin-bottom: 14px; }
.fx-f label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .95rem; }
.fx-f .req { color: #D64545; font-style: normal; }
.fx-f .opt { font-weight: 500; color: var(--muted, #5b6478); font-size: .85em; }
.fx-f input, .fx-f textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #d3d8e8; border-radius: 12px; background: #fff; font: inherit; color: inherit; }
.fx-f input:focus, .fx-f textarea:focus { outline: none; border-color: var(--primary, #2f3fbf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #2f3fbf) 18%, transparent); }
.fx-f.has-err input, .fx-f.has-err textarea { border-color: #D64545; }
.fx-e { min-height: 0; margin-top: 4px; color: #C0392B; font-size: .85rem; font-weight: 600; }
.fx-e:empty { display: none; }
.fx-err-sum { margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: #FDECEA; color: #A93226; font-weight: 700; font-size: .92rem; }
.fx-done { display: grid; justify-items: center; gap: 12px; padding: 26px 18px; text-align: center; border-radius: 16px; background: #E3F6EC; color: #0B6B3A; }
.fx-done[hidden], .fx-form[hidden] { display: none; }
.fx-done .i { width: 38px; height: 38px; }
.fx-done p { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.7; white-space: pre-line; }
.fx-wa { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 14px; border-radius: 14px; background: #fff; color: #24333A; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.fx-wa[hidden] { display: none; }
.fx-wa span { font-size: .95rem; line-height: 1.6; }
.fx-wa .btn { width: 100%; justify-content: center; }
.fx-box { padding: clamp(18px, 3vw, 30px); border-radius: 20px; background: #fff; box-shadow: 0 10px 40px rgba(15, 27, 61, .08); }
.fx-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 26px 22px 22px; border: 0; border-radius: 22px; background: #fff; color: inherit; box-shadow: 0 24px 80px rgba(0, 0, 0, .35); overflow: auto; }
.fx-dlg::backdrop { background: rgba(10, 16, 40, .55); backdrop-filter: blur(3px); }
.fx-x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #EEF0F7; color: #333; cursor: pointer; }
.fx-x:hover { background: #E1E5F2; }
.fx-dlg .fx-title { padding-inline-end: 34px; }

.foot .made-by { display: block; margin-top: 6px; opacity: .65; font-size: .8rem; }
.foot .made-by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- فريق الأطباء (مواقع المستشفيات والمستوصفات) ---------- */
[dir=ltr] .flip-ltr { transform: scaleX(-1); }
.doc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.doc-filter button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.doc-filter button:hover { border-color: var(--brand); }
.doc-filter button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 22px; }
.doc-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--text); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--shadow); border-color: var(--brand); }
.doc-card[hidden] { display: none; }
.doc-ph { display: block; aspect-ratio: 4 / 3.4; background: var(--mist); overflow: hidden; }
.doc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doc-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--f-head); font-weight: 800; font-size: 54px; color: var(--brand-text); background: linear-gradient(135deg, var(--mist), var(--card)); }
.doc-ini.big { font-size: 110px; aspect-ratio: 4 / 5; }
.doc-tx { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 6px; flex: 1; }
.doc-tx b { font-family: var(--f-head); font-size: 18px; line-height: 1.4; }
.doc-tx small { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.doc-meta span { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--mist); color: var(--brand-text); font-weight: 600; }
.doc-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px 16px; color: var(--brand-text); font-weight: 700; font-size: 15px; }
.doc-prof { padding-top: 34px; }
.doc-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-weight: 700; text-decoration: none; }
.doc-prof-in { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 38px; align-items: start; }
.doc-prof-ph { border-radius: 22px; overflow: hidden; background: var(--mist); border: 1px solid var(--line); box-shadow: 0 16px 36px var(--shadow); }
.doc-prof-ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.doc-prof-tx h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--text); }
.doc-spec { margin: 8px 0 0; color: var(--brand-text); font-weight: 700; font-size: 18px; line-height: 1.6; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.doc-chips .hchip { background: var(--mist); border-color: var(--line); color: var(--text); font-weight: 600; }
.doc-bio { margin: 18px 0 0; line-height: 1.95; white-space: pre-line; }
.doc-box { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.doc-box h3 { font-size: 16px; margin-bottom: 6px; color: var(--brand-text); }
.doc-box p { margin: 0 0 8px; line-height: 1.8; }
.doc-box p:last-child { margin-bottom: 0; }
.doc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (max-width: 760px) {
    .doc-prof-in { grid-template-columns: 1fr; gap: 22px; }
    .doc-prof-ph { max-width: 320px; }
    .doc-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
    .doc-tx { padding: 11px 12px 4px; }
    .doc-tx b { font-size: 16px; }
    .doc-go { padding: 8px 12px 13px; font-size: 14px; }
}

/* =====================================================================
   قالب «عصري»: شكل SaaS راقي. هيرو بتدرّج هادي، صورة بإطار مقوّس،
   شريط وصول عايم، كروت ناعمة وأرقام في بطاقة ملوّنة.
   ===================================================================== */
.lay-modern .topnav { background: color-mix(in srgb, var(--paper) 84%, transparent); color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.lay-modern .topnav-in { min-height: 68px; }
.lay-modern .tn-name { font-weight: 800; }
.lay-modern .tn-links a { color: var(--muted); border-radius: 999px; font-weight: 600; transition: background .15s, color .15s; }
.lay-modern .tn-links a:hover, .lay-modern .tn-links a.on { background: var(--mist); color: var(--text); }
.lay-modern .langbtn { border-color: var(--line); }
.lay-modern .langbtn:hover { background: var(--mist); }
.lay-modern .btn, .lay-modern .btn-sm { border-radius: 999px; }
.lay-modern .btn-primary { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.lay-modern .btn-solid { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 80%, transparent); }

/* الهيرو */
.hero-modern { background: var(--paper); color: var(--text); }
.hero-modern::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(680px 460px at 92% -12%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(540px 400px at 2% 108%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    linear-gradient(180deg, var(--mist), var(--paper)); }
.hero-modern::after { content: ""; position: absolute; inset-block-start: 26px; inset-inline-start: 4%; width: 220px; height: 150px; background: radial-gradient(color-mix(in srgb, var(--brand) 34%, transparent) 1.6px, transparent 1.8px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); opacity: .7; pointer-events: none; }
.hero-modern .hero-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; padding: 76px 0 128px; }
.hero-modern .hero-grid.has-photo { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.hero-modern .hero-text::before { content: ""; display: block; width: 46px; height: 6px; margin-bottom: 20px; border-radius: 6px; background: var(--accent); }
.hero-modern h1 { color: var(--text); font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; line-height: 1.16; text-wrap: balance; }
[dir=ltr] .hero-modern h1 { letter-spacing: -.02em; line-height: 1.1; }
.hero-modern .spec { margin-top: 16px; max-width: 34em; color: var(--muted); font-size: clamp(16.5px, 1.9vw, 19.5px); font-weight: 500; line-height: 1.85; }
.hero-modern .spec::first-line { color: var(--brand-text); font-size: 1.1em; font-weight: 800; }
.hero-modern .hero-chips { margin-top: 22px; }
.hero-modern .hchip { padding: 5px 16px; background: var(--card); border-color: color-mix(in srgb, var(--line) 80%, transparent); color: var(--text); font-weight: 600; box-shadow: 0 6px 18px -10px var(--shadow); }
.hero-modern .actions { margin-top: 28px; }
.hero-modern .btn-ghost { background: var(--card); border-color: var(--line); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
.hero-modern .btn-ghost:hover { background: var(--card); border-color: var(--brand); color: var(--brand-text); }
.hero-modern .hero-photo { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.hero-modern .hero-photo::before { content: ""; position: absolute; z-index: 0; inset: 30px; inset-inline-end: -26px; inset-block-end: -26px; border-radius: 48px; background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--accent))); opacity: .24; }
.hero-modern .hero-photo::after { content: ""; position: absolute; z-index: 0; inset-block-start: -22px; inset-inline-start: -22px; width: 92px; height: 92px; border-radius: 50%; border: 11px solid var(--accent); opacity: .85; }
.hero-modern .portrait { position: relative; z-index: 1; aspect-ratio: 1 / 1.14; border: 6px solid var(--card); border-radius: 42px; box-shadow: 0 34px 70px -24px var(--shadow), 0 8px 24px -10px var(--shadow); }

/* شريط الوصول السريع: عايم فوق نهاية الهيرو */
.lay-modern .quick { margin-top: -62px; padding-top: 0; }
.lay-modern .quick-in { border-radius: 26px; border-color: color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 30px 70px -28px var(--shadow), 0 4px 14px -6px var(--shadow); }
.lay-modern .q-item { padding: 22px 26px; transition: background .15s; }
.lay-modern .q-ic { width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(145deg, var(--mist), color-mix(in srgb, var(--brand) 16%, var(--mist))); }
.lay-modern .q-t strong { font-size: 17px; }

/* الأقسام والكروت */
.lay-modern .section { padding: 88px 0; }
.lay-modern .section h2 { margin-bottom: 40px; font-size: clamp(28px, 3.7vw, 42px); font-weight: 800; line-height: 1.25; }
[dir=ltr] .lay-modern .section h2 { letter-spacing: -.015em; }
.lay-modern .section h2::after { width: 64px; height: 6px; margin-top: 14px; border-radius: 6px; background: linear-gradient(270deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); }
[dir=ltr] .lay-modern .section h2::after { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); }
.lay-modern .band-mist { background: linear-gradient(180deg, var(--mist), color-mix(in srgb, var(--mist) 35%, var(--paper))); }
.lay-modern .about p { max-width: 62ch; font-size: 19.5px; line-height: 2; }

.lay-modern .svc-grid { counter-reset: sv; gap: 22px; }
.lay-modern .svc { padding: 30px 28px 26px; border-color: color-mix(in srgb, var(--line) 80%, transparent); border-radius: 26px; box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -26px var(--shadow); transition: transform .25s, box-shadow .25s, border-color .25s; }
.lay-modern .svc::before { counter-increment: sv; content: counter(sv, decimal-leading-zero); position: static; inset: auto; display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 15px; background: linear-gradient(145deg, var(--mist), color-mix(in srgb, var(--brand) 16%, var(--mist))); color: var(--brand-text); font-size: 15px; font-weight: 800; letter-spacing: 0; }
.lay-modern .svc:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 1px 2px var(--shadow), 0 30px 54px -26px var(--shadow); }
.lay-modern .svc h3 { font-size: 20px; }
.lay-modern .svc .price { padding: 3px 16px; background: color-mix(in srgb, var(--brand) 12%, var(--card)); }

.lay-modern .stats-band { padding: 34px 0; background: transparent; color: var(--on-brand); }
.lay-modern .stats-band > .wrap { padding: 50px 34px; border-radius: 34px; background:
    radial-gradient(520px 280px at 100% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
    linear-gradient(135deg, var(--brand-dark), var(--brand)); box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--brand) 70%, transparent); }
.lay-modern .stat-grid { gap: 26px 0; }
.lay-modern .stat-grid > div { padding-inline: 18px; }
.lay-modern .stat-grid > div + div { border-inline-start: 1px solid color-mix(in srgb, var(--on-brand) 22%, transparent); }
.lay-modern .stat-v { color: var(--on-brand); font-weight: 800; }
.lay-modern .stat-l { color: color-mix(in srgb, var(--on-brand) 82%, transparent); font-weight: 500; }

.lay-modern .quote { border-radius: 26px; border-color: color-mix(in srgb, var(--line) 75%, transparent); box-shadow: 0 1px 2px var(--shadow), 0 20px 44px -28px var(--shadow); }
.lay-modern .quote-body::before { top: 6px; font-size: 68px; }
.lay-modern .quote-name { color: var(--text); }
.lay-modern .tl .yr { padding: 1px 15px; }
.lay-modern .gallery a, .lay-modern .gs-item, .lay-modern .vthumb, .lay-modern .ba-stage { border-radius: 24px; }
.lay-modern .faq details { border-radius: 20px; border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 1px 2px var(--shadow); }
.lay-modern .faq details[open] { box-shadow: 0 20px 44px -28px var(--shadow); }
.lay-modern .faq summary { padding: 20px 24px; }
.lay-modern .clinic { padding: 34px; border-color: color-mix(in srgb, var(--line) 75%, transparent); border-radius: 28px; box-shadow: 0 1px 2px var(--shadow), 0 22px 48px -30px var(--shadow); }
.lay-modern .hours > div { border-radius: 12px; }
.lay-modern .doc-card { border-radius: 24px; }
.lay-modern form.bk, .lay-modern .success { padding: 34px; border-color: color-mix(in srgb, var(--line) 75%, transparent); border-radius: 28px; box-shadow: 0 1px 2px var(--shadow), 0 30px 60px -34px var(--shadow); }
.lay-modern .field input, .lay-modern .field select, .lay-modern .field textarea { border-radius: 14px; }
.lay-modern .contact-lines a { border-radius: 999px; }
.lay-modern .foot { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 82%, #000)); }

@media (max-width: 900px) {
    .hero-modern .hero-grid.has-photo { grid-template-columns: 1fr; }
    .hero-modern .hero-photo { max-width: 340px; }
}
@media (max-width: 760px) {
    .hero-modern .hero-grid { gap: 44px; padding: 40px 0 92px; }
    .hero-modern .hero-photo { max-width: 270px; }
    .hero-modern .hero-photo::before { inset-inline-end: -14px; inset-block-end: -14px; border-radius: 36px; }
    .hero-modern .hero-photo::after { width: 64px; height: 64px; border-width: 8px; inset-block-start: -14px; inset-inline-start: -10px; }
    .hero-modern .portrait { border-width: 5px; border-radius: 34px; }
    .lay-modern .quick { margin-top: -50px; }
    .lay-modern .q-item { padding: 15px 18px; }
    .lay-modern .section { padding: 58px 0; }
    .lay-modern .stats-band { padding: 22px 0; }
    .lay-modern .stats-band > .wrap { padding: 34px 14px; border-radius: 26px; }
    .lay-modern .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .lay-modern .stat-grid > div:nth-child(odd) { border-inline-start: 0; }
    .lay-modern .stat-grid > div:nth-child(n+3) { padding-top: 0; }
    .lay-modern .svc { padding: 24px 22px 22px; }
    .lay-modern .clinic { padding: 22px; }
    .lay-modern form.bk, .lay-modern .success { padding: 24px; }
}

/* =====================================================================
   قالب «مجلّة»: شكل صحفي راقي. رأس بخطوط مزدوجة، عنوان ضخم، أقسام مرقّمة
   بعنوان ثابت على جنب، خدمات كقائمة مسطّرة، وفوتر فاتح بخط مزدوج.
   ===================================================================== */
.lay-editorial { counter-reset: sec; }
[dir=ltr] .lay-editorial { --trk: .1em; }
.lay-editorial .topnav { background: var(--paper); color: var(--text); border-bottom: 3px double var(--text); }
.lay-editorial .topnav-in { min-height: 66px; }
.lay-editorial .tn-name { font-size: 18px; font-weight: 800; }
.lay-editorial .tn-links a { padding: 6px 14px; border-radius: 0; color: var(--muted); font-size: 14.5px; font-weight: 600; }
[dir=ltr] .lay-editorial .tn-links a { font-size: 12.5px; letter-spacing: var(--trk); text-transform: uppercase; }
.lay-editorial .tn-links a:hover, .lay-editorial .tn-links a.on { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.lay-editorial .langbtn { border-color: var(--text); border-radius: 0; }
.lay-editorial .langbtn:hover { background: var(--mist); }
.lay-editorial .btn, .lay-editorial .btn-sm { border-radius: 0; }
[dir=ltr] .lay-editorial .btn { letter-spacing: .04em; }
.lay-editorial .btn-primary { background: var(--text); color: var(--paper); }
.lay-editorial .btn-primary:hover { background: var(--brand); color: var(--on-brand); filter: none; }
.lay-editorial .btn-solid { background: var(--text); color: var(--paper); }
.lay-editorial .btn-solid:hover { background: var(--brand); color: var(--on-brand); }
.lay-editorial .btn-outline { border-color: var(--text); background: transparent; color: var(--text); }
.lay-editorial .btn-outline:hover { background: var(--text); color: var(--paper); border-color: var(--text); }

/* الغلاف */
.hero-editorial { background: var(--paper); color: var(--text); }
.hero-editorial::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--brand); }
.hero-editorial::after { content: ""; position: absolute; inset: 14px 0 auto 0; height: 1px; background: var(--text); }
.hero-editorial .hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; padding: 76px 0 80px; }
.hero-editorial .hero-grid.has-photo { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
.hero-editorial .hero-text { align-self: center; padding-inline-end: clamp(0px, 5vw, 64px); }
.hero-editorial .has-photo .hero-text { border-inline-end: 1px solid var(--line); }
.hero-editorial .hero-text::before { content: ""; display: block; width: 72px; height: 5px; margin-bottom: 28px; background: var(--brand); }
.hero-editorial h1 { color: var(--text); font-size: clamp(44px, 6.6vw, 88px); font-weight: 800; line-height: 1.08; text-wrap: balance; }
[dir=ltr] .hero-editorial h1 { letter-spacing: -.025em; line-height: 1.02; }
.hero-editorial .spec { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--text); color: var(--muted); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.9; }
.hero-editorial .spec::first-line { color: var(--text); font-size: 1.12em; font-weight: 800; }
.hero-editorial .hero-chips { margin-top: 24px; }
.hero-editorial .hchip { padding: 3px 14px; border-radius: 0; background: transparent; border-color: var(--text); color: var(--text); font-weight: 600; }
.hero-editorial .hchip .dot { border-radius: 0; }
.hero-editorial .hchip.open .dot { box-shadow: none; }
.hero-editorial .actions { margin-top: 30px; }
.hero-editorial .btn-ghost { color: var(--text); border-color: var(--text); }
.hero-editorial .btn-ghost:hover { background: var(--text); color: var(--paper); }
.hero-editorial .hero-photo { position: relative; align-self: center; padding-inline-start: clamp(0px, 4vw, 52px); }
.hero-editorial .hero-photo::before { content: ""; position: absolute; inset-block: -16px 16px; inset-inline: calc(clamp(0px, 4vw, 52px) - 16px) 16px; border: 1px solid var(--text); pointer-events: none; }
.hero-editorial .portrait { position: relative; aspect-ratio: 3 / 4; border-radius: 0; filter: grayscale(.18) contrast(1.02); }
.lay-editorial .quick { margin-top: 0; padding: 0; }
.lay-editorial .quick-in { border: 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); border-radius: 0; background: transparent; box-shadow: none; }
.lay-editorial .q-item { padding: 22px 24px; border-inline-start: 1px solid var(--line); }
.lay-editorial .q-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.lay-editorial a.q-item:hover { background: var(--mist); }
.lay-editorial .q-ic { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--text); background: transparent; color: var(--text); }
.lay-editorial .q-t small { font-size: 12.5px; font-weight: 700; }
[dir=ltr] .lay-editorial .q-t small { letter-spacing: var(--trk); text-transform: uppercase; }

/* الأقسام: عنوان مرقّم ثابت على جنب والمحتوى جنبه */
.lay-editorial .section { padding: 84px 0; scroll-margin-top: 70px; }
.lay-editorial main > .section + .section:not(.band-mist) { border-top: 1px solid var(--line); }
.lay-editorial .section h2 { counter-increment: sec; margin: 0 0 34px; padding-top: 16px; border-top: 4px solid var(--text); font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.25; }
[dir=ltr] .lay-editorial .section h2 { letter-spacing: -.015em; }
.lay-editorial .section h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--brand-text); font-size: 14px; font-weight: 700; line-height: 1; }
[dir=ltr] .lay-editorial .section h2::before { letter-spacing: var(--trk); }
.lay-editorial .section h2::after { display: none; }
.lay-editorial .section > .wrap:not(.booking-grid) { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 76px); align-items: start; }
.lay-editorial .section > .wrap:not(.booking-grid) > h2 { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 92px; margin: 0; }
.lay-editorial .section > .wrap:not(.booking-grid) > :not(h2) { grid-column: 2; min-width: 0; }
.lay-editorial .band-mist { background: color-mix(in srgb, var(--mist) 60%, var(--paper)); border-block: 1px solid var(--line); }
.lay-editorial .about p { max-width: 60ch; font-size: 20px; line-height: 2.05; }

/* الخدمات: قائمة مسطّرة */
.lay-editorial .svc-grid, .lay-editorial .svc-grid.few { display: block; counter-reset: sv; border-top: 1px solid var(--text); }
.lay-editorial .svc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "n t pr" ". d pr"; align-items: baseline; gap: 0 22px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transition: background .2s, padding .2s; }
.lay-editorial .svc::before { counter-increment: sv; content: counter(sv, decimal-leading-zero); grid-area: n; position: static; inset: auto; height: auto; border-radius: 0; background: none; color: var(--brand-text); font-size: 14px; font-weight: 700; }
.lay-editorial .svc:hover { transform: none; box-shadow: none; padding-inline: 16px; background: color-mix(in srgb, var(--mist) 70%, transparent); }
.lay-editorial .svc h3 { grid-area: t; font-size: 21px; }
.lay-editorial .svc p { grid-area: d; margin-top: 6px; max-width: 54ch; }
.lay-editorial .svc .price { grid-area: pr; align-self: center; margin: 0 !important; padding: 0 0 2px; border-bottom: 2px solid var(--brand); border-radius: 0; background: none; color: var(--text); font-size: 16px; }

/* الأرقام */
.lay-editorial .stats-band { padding: 58px 0; background: var(--paper); color: var(--text); border-block: 3px double var(--text); }
.lay-editorial .stat-grid { gap: 28px 0; }
.lay-editorial .stat-grid > div { padding-inline: 18px; }
.lay-editorial .stat-grid > div + div { border-inline-start: 1px solid var(--line); }
.lay-editorial .stat-v { color: var(--text); font-size: clamp(42px, 5.6vw, 66px); font-weight: 800; }
.lay-editorial .stat-l { margin-top: 10px; color: var(--muted); font-size: 14.5px; font-weight: 600; }
[dir=ltr] .lay-editorial .stat-l { letter-spacing: var(--trk); text-transform: uppercase; font-size: 12.5px; }

/* آراء المرضى */
.lay-editorial .quotes { columns: 2 260px; column-gap: 40px; }
.lay-editorial .quote { margin-bottom: 36px; border: 0; border-top: 1px solid var(--text); border-radius: 0; background: transparent; box-shadow: none; }
.lay-editorial .quote-body { padding: 26px 0 8px; }
.lay-editorial .quote-body::before { top: 14px; inset-inline-start: 0; color: var(--brand); font-size: 64px; opacity: 1; }
.lay-editorial .quote-body p { padding-top: 34px; font-size: 19px; line-height: 1.95; }
.lay-editorial .quote-img + .quote-body p { padding-top: 12px; }
.lay-editorial .quote-foot { padding: 8px 0 0; }
.lay-editorial .quote-name { color: var(--text); font-size: 15px; }
.lay-editorial .quote-name::before { content: "— "; color: var(--brand-text); }
.lay-editorial .quote-img + .quote-foot { border-top: 0; }

/* باقي العناصر */
.lay-editorial .gallery a, .lay-editorial .gs-item, .lay-editorial .vthumb, .lay-editorial .ba-stage { border-radius: 0; box-shadow: none; }
.lay-editorial .vthumb { outline: 1px solid var(--text); outline-offset: 5px; }
.lay-editorial .vtitle { margin-top: 20px; font-size: 18px; }
.lay-editorial .vbadge { border-radius: 0; }
.lay-editorial .vplay { border-radius: 0; }
.lay-editorial .ba-tag { border-radius: 0; }
.lay-editorial .faq { max-width: none; border-top: 1px solid var(--text); }
.lay-editorial .faq details { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.lay-editorial .faq details[open] { border-bottom-color: var(--text); }
.lay-editorial .faq summary { padding: 22px 0; font-size: 18px; }
.lay-editorial .faq summary::after { border-radius: 0; background: transparent; border: 1px solid var(--text); color: var(--text); }
.lay-editorial .faq details[open] summary::after { background: var(--text); color: var(--paper); }
.lay-editorial .faq .ans { padding: 0 0 24px; max-width: 60ch; }
.lay-editorial .timeline::before { inset-inline-start: 6px; background: var(--text); width: 1px; }
.lay-editorial .tl { padding-inline-start: 38px; }
.lay-editorial .tl::before { top: 10px; inset-inline-start: 0; width: 13px; height: 13px; border: 3px solid var(--text); border-radius: 0; background: var(--paper); }
.lay-editorial .tl .yr { padding: 0; border-radius: 0; background: none; color: var(--brand-text); font-size: 15px; }
[dir=ltr] .lay-editorial .tl .yr { letter-spacing: var(--trk); }
.lay-editorial .clinic { padding: 28px 0 30px; border: 0; border-top: 4px solid var(--text); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.lay-editorial .open-pill { border-radius: 0; }
.lay-editorial .open-pill::before { border-radius: 0; }
.lay-editorial .hours > div { padding: 10px 0; border-radius: 0; border-inline-start: 0; border-bottom: 1px solid var(--line); background: none; }
.lay-editorial .hours > div.today { padding-inline-start: 12px; border-inline-start: 4px solid var(--brand); background: color-mix(in srgb, var(--mist) 60%, transparent); }
.lay-editorial .doc-card, .lay-editorial .doc-prof-ph, .lay-editorial .doc-box { border-radius: 0; box-shadow: none; }
.lay-editorial .doc-filter button { border-radius: 0; border-color: var(--text); }
.lay-editorial .doc-meta span { border-radius: 0; }
.lay-editorial form.bk, .lay-editorial .success { padding: 34px; border: 1px solid var(--text); border-top-width: 4px; border-radius: 0; background: var(--card); box-shadow: none; }
.lay-editorial .field label { font-size: 14.5px; }
[dir=ltr] .lay-editorial .field label { letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
.lay-editorial .field input, .lay-editorial .field select, .lay-editorial .field textarea { padding: 12px 2px; border: 0; border-bottom: 1.5px solid var(--text); border-radius: 0; background: transparent; }
.lay-editorial .field input:focus, .lay-editorial .field select:focus, .lay-editorial .field textarea:focus { border-bottom-color: var(--brand); box-shadow: 0 2px 0 var(--brand); }
.lay-editorial .field select:disabled, .lay-editorial .field input:disabled { background: transparent; }
.lay-editorial .contact-lines a { border-radius: 0; border-color: var(--text); }
.lay-editorial .pending-hint, .lay-editorial .notice { border-radius: 0; }
.lay-editorial .success .tick { border-radius: 0; }
.lay-editorial .success dl { border-radius: 0; }

/* الفوتر: فاتح بخط مزدوج */
.lay-editorial .foot { padding: 52px 0 44px; background: var(--paper); color: var(--muted); border-top: 3px double var(--text); }
.lay-editorial .foot .name { color: var(--text); font-size: 30px; font-weight: 800; }
.lay-editorial .socials a { border-color: var(--text); border-radius: 0; color: var(--text); }
.lay-editorial .socials a:hover { background: var(--text); color: var(--paper); }
.lay-editorial .foot .btn-ghost { color: var(--text); border-color: var(--text); }
.lay-editorial .foot .btn-ghost:hover { background: var(--text); color: var(--paper); }
.lay-editorial .foot small { opacity: .85; }

@media (max-width: 900px) {
    .lay-editorial .section > .wrap:not(.booking-grid) { grid-template-columns: minmax(0, 1fr); }
    .lay-editorial .section > .wrap:not(.booking-grid) > h2 { grid-column: 1; grid-row: auto; position: static; margin-bottom: 30px; }
    .lay-editorial .section > .wrap:not(.booking-grid) > :not(h2) { grid-column: 1; }
}
@media (max-width: 760px) {
    .hero-editorial .hero-grid, .hero-editorial .hero-grid.has-photo { grid-template-columns: 1fr; padding: 40px 0 52px; }
    .hero-editorial .has-photo .hero-text { padding-inline-end: 0; border-inline-end: 0; }
    .hero-editorial .hero-photo { max-width: 300px; margin-top: 40px; padding-inline-start: 0; }
    .hero-editorial .hero-photo::before { inset: -12px 12px 12px -12px; }
    .lay-editorial .section { padding: 54px 0; }
    .lay-editorial .section h2 { margin-bottom: 26px; }
    .lay-editorial .q-item { padding: 14px 0; border-inline-start: 0; border-top: 1px solid var(--line); }
    .lay-editorial .q-item:first-child { border-top: 0; }
    .lay-editorial .stats-band { padding: 40px 0; }
    .lay-editorial .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .lay-editorial .stat-grid > div:nth-child(odd) { border-inline-start: 0; }
    .lay-editorial .svc { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "n t" ". d" ". pr"; gap: 0 14px; padding: 20px 0; }
    .lay-editorial .svc .price { justify-self: start; margin-top: 12px !important; }
    .lay-editorial .svc:hover { padding-inline: 0; background: transparent; }
    .lay-editorial .quotes { columns: 1; }
    .lay-editorial form.bk, .lay-editorial .success { padding: 24px 20px; }
    .lay-editorial .clinic { padding: 22px 0; }
}
.foot .made-by .mb-mark { display: inline-block; vertical-align: -3px; margin-inline-end: 6px; border-radius: 4px; }

/* شريط المواقع التجريبية */
.demo-ribbon { position: relative; z-index: 60; background: #0F1B3D; color: #fff; font-family: system-ui, sans-serif; }
.demo-ribbon-in { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 8px 14px; color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.5; }
.demo-ribbon .dr-mark { flex: none; color: #fff; line-height: 0; }
.demo-ribbon .dr-tx { opacity: .92; }
.demo-ribbon .dr-go { flex: none; padding: 4px 12px; border-radius: 999px; background: #F2B134; color: #0F1B3D; font-weight: 800; font-size: 12.5px; }
.demo-ribbon-in:hover .dr-go { background: #fff; }
@media (max-width: 560px) { .demo-ribbon-in { justify-content: space-between; font-size: 12px; } .demo-ribbon .dr-mark { display: none; } }

/* الموبايل: الشريط العلوي ميتزحمش. اسم الدكتور ياخد مكانه (سطرين بحد أقصى) والجمل الجانبية تستخبى */
@media (max-width: 560px) {
    .topnav-in:has(.tn-name) .tn-s .tn-ph, .topnav-in:has(.tn-name) .tn-e .tn-ph { display: none; }
    .tn-name, .has-c .tn-name { max-width: 66vw; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-size: clamp(14px, 4.3vw, 17px); }
    .topnav-in { gap: 10px; }
    .langbtn { padding-inline: 10px; }
}

/* ---------- شكل الشريط العلوي (اختيار الدكتور من الاستوديو) ---------- */
.topnav.ns-light { background: var(--paper); color: var(--text); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.topnav.ns-light .tn-links a, .topnav.ns-float .tn-links a { color: var(--muted); }
.topnav.ns-light .tn-links a:hover, .topnav.ns-light .tn-links a.on,
.topnav.ns-float .tn-links a:hover, .topnav.ns-float .tn-links a.on { background: var(--mist); color: var(--text); }
.topnav.ns-light .langbtn, .topnav.ns-float .langbtn { border-color: var(--line); }
.topnav.ns-light .langbtn:hover, .topnav.ns-float .langbtn:hover { background: var(--mist); }

.topnav.ns-brand { background: var(--brand); color: var(--on-brand); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topnav.ns-brand .tn-links a { color: inherit; opacity: .82; }
.topnav.ns-brand .tn-links a:hover, .topnav.ns-brand .tn-links a.on { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.topnav.ns-brand .langbtn { border-color: color-mix(in srgb, currentColor 40%, transparent); }

/* كبسولة عايمة: الشريط مدوّر وعايم فوق الغلاف */
.topnav.ns-float { top: 10px; margin-bottom: calc(-1 * var(--nav-h, 82px)); padding: 12px 0 8px; background: transparent; color: var(--text); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.topnav.ns-float .topnav-in { pointer-events: auto; min-height: 58px; padding: 0 10px 0 22px; padding-inline: 22px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 10px 34px var(--shadow); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.topnav.ns-float.static { position: relative; }
/* الشفاف فوق الغلاف من غير تثبيت: لازم يفضل فوق الغلاف في الرسم (الغلاف بيطلع تحته بهامش سالب) */
.topnav.ns-clear.static, .topnav.ns-float.static { position: relative; z-index: 40; }
.has-ns-over .hero { padding-top: calc(var(--ns-pad, 0px) + 96px) !important; }

/* شفاف فوق الغلاف: من غير خلفية، ولما الزائر ينزل بياخد لون */
.topnav.ns-clear { margin-bottom: calc(-1 * var(--nav-h, 63px)); background: transparent; color: #fff; border-bottom: 1px solid transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.topnav.ns-clear .tn-links a { color: inherit; opacity: .86; }
.topnav.ns-clear .tn-links a:hover, .topnav.ns-clear .tn-links a.on { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.topnav.ns-clear .langbtn { border-color: color-mix(in srgb, currentColor 42%, transparent); }
.topnav.ns-clear .tn-name { text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
.topnav.ns-clear.is-scrolled { background: var(--ink); color: var(--on-ink); border-bottom-color: rgba(255, 255, 255, .1); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.topnav.ns-clear.is-scrolled .tn-name { text-shadow: none; }
.has-ns-clear .hero { padding-top: calc(var(--ns-pad, 0px) + 74px) !important; }
/* القوالب اللي غلافها فاتح: الكلام غامق */
.lay-modern .topnav.ns-clear, .lay-editorial .topnav.ns-clear, .lay-card .topnav.ns-clear { color: var(--text); }
.lay-modern .topnav.ns-clear .tn-name, .lay-editorial .topnav.ns-clear .tn-name, .lay-card .topnav.ns-clear .tn-name { text-shadow: none; }
.lay-modern .topnav.ns-clear.is-scrolled, .lay-editorial .topnav.ns-clear.is-scrolled, .lay-card .topnav.ns-clear.is-scrolled { background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--text); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 760px) {
    .topnav.ns-float { padding: 8px 0 6px; margin-bottom: calc(-1 * var(--nav-h, 72px)); }
    .topnav.ns-float .topnav-in { min-height: 52px; padding-inline: 16px 8px; }
    .has-ns-over .hero { padding-top: calc(var(--ns-pad, 0px) + 80px) !important; }
}
/* القالب المتوسّط: الشريط بيقعد فوق شريط الغلاف نفسه */
.has-ns-over .hero.hero-centered, .has-ns-clear .hero.hero-centered { padding-top: 0 !important; }
/* غلاف «تحت الكلام»: الشريط الشفاف والعايم يقعد فوق صورة الغلاف نفسها، مش فوق مساحة بيضا */
.has-ns-over .hero.hm-below, .has-ns-clear .hero.hm-below { padding-top: 0 !important; }
/* ظل خفيف في أعلى الشريط الشفاف نفسه عشان الكلام الأبيض يبان فوق أي صورة */
.topnav.ns-clear:not(.is-scrolled) { background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.lay-modern .topnav.ns-clear:not(.is-scrolled), .lay-editorial .topnav.ns-clear:not(.is-scrolled), .lay-card .topnav.ns-clear:not(.is-scrolled) { background-image: none; }
body.has-ns-clear:has(.hero.hm-below, .hero.hm-over, .hero-centered) .topnav.ns-clear:not(.is-scrolled) { background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
/* فوق أي غلاف (حتى في القوالب الفاتحة) كلام الشريط الشفاف أبيض لحد ما الزائر ينزل */
body.has-ns-clear:has(.hero.hm-below, .hero.hm-over, .hero-centered) .topnav.ns-clear:not(.is-scrolled) { color: #fff; }
body.has-ns-clear:has(.hero.hm-below, .hero.hm-over, .hero-centered) .topnav.ns-clear:not(.is-scrolled) .tn-name { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
/* جمل الشريط ليها لون اتحدد على خلفية القالب الأصلية: مع الأشكال دي بتاخد لون الشريط عشان ماتختفيش */
.topnav.ns-clear .tn-ph, .topnav.ns-brand .tn-ph { color: inherit !important; }
.topnav.ns-light .tn-ph[style*="color:#fff"], .topnav.ns-float .tn-ph[style*="color:#fff"] { color: var(--text) !important; }