/* =========================================================
   HEQORA — الواجهة العامة (تصميم 2026-10)
   المقاسات من لوحة التصميم (.claude/home.png)، والألوان من الهويّة الطبيّة
   (.claude/colors.jpg، الإصدار الرابع): أزرقُ الثقة #005FFA للتفاعل والإبراز
   على الفاتح، وأزرقُ العلاج #4C9BFF للزخرفة واللمسات، وأخضرُ النموّ #00D149
   للدعوات والإبراز على الداكن، ورماديُّ المهنيّة #F7F7F7 أرضيّةً — ومنها درجاتٌ
   مشتقّة: كحليٌّ للعناوين والسطوح الداكنة، وصبغاتٌ فاتحة للأرضيّات.
   وأسماءُ الرموز القديمة (navy/gold/lime) باقيةٌ أدوارًا لا ألوانًا:
   navy = الداكن، gold = الإبراز (أزرقُ على الفاتح، أخضرُ --gold-light على الداكن).
   كل الخصائص منطقية — نفس الملف يخدم RTL و LTR.
   ========================================================= */

:root {
    --navy: #0B1D3D;            /* العناوين والنصّ الداكن: كحليٌّ من أزرق الثقة — ١٦٫٧:١ */
    --navy-2: #061837;          /* التذييل وأعمق السطوح */
    --navy-top: #0A2148;        /* الشريط العلويّ */
    --navy-soft: #EAF2FF;
    --gold: #005FFA;            /* الإبراز على الفاتح: الخطوط والزخرفة — أزرقُ الثقة ٥٫٢٣:١ */
    --gold-ink: #005FFA;        /* نصُّ الإبراز الكبير */
    --gold-dark: #0049C2;       /* نصُّ الإبراز الصغير والروابط — ٧٫٦٩:١ */
    --gold-deep: #003A9C;       /* أعمقُ الأزرق: لمسُ الإبراز */
    --gold-light: #00D149;      /* الإبراز على الداكن: أخضرُ النموّ — ٨٫٥٦:١ على الكحليّ */
    --gold-soft: #EAF2FF;
    --gold-tint: #F4F8FF;
    /* الأخضرُ ودرجاته: الدعوات والإبراز على الداكن، وأرضيّةُ ما يُميَّز على الفاتح */
    --lime: #00D149;
    --lime-deep: #00B840;
    --lime-tint: #E4F9EB;
    --lime-ink: #00702B;        /* نصٌّ أخضر على صبغته — ٥٫٦٨:١ */
    --lime-line: #A4E6BA;       /* حدٌّ أخضر هادئ */
    /* أزرقُ العلاج الفاتح: زخرفةٌ ولمساتٌ لا نصّ (٢٫٨٢:١ على الأبيض) */
    --therapy: #4C9BFF;
    --sky: #EEF5FF;
    --porcelain: #F7F7F7;       /* أرضيّة الصفحة: رماديُّ المهنيّة */
    --band: #EFF4FB;            /* أرضيّة الأقسام المتناوبة */
    --surface-raised: #FBFCFE;
    --wa: #00D149;              /* زرّ واتساب: أخضرُ بحبرٍ كحليّ — ٨٫٥٦:١ */
    --wa-deep: #00B840;
    --wa-ink: #061837;
    --cinnabar: #AC1A1D;
    --cinnabar-tint: #FBEAEA;
    --cinnabar-ink: #8E1416;
    --success: #00732C;
    --success-tint: #E4F9EB;
    --star: #009E3C;            /* نجومُ التقييم: أخضرُ أعمق — ٣٫٥٣:١ */
    --line: #CBD3DF;            /* الفواصل — ١٫٥١:١ */
    --line-soft: #E3E8EF;       /* حدود البطاقات: التصميم يكاد لا يرسمها */
    --line-2: #D3DAE4;
    --field: #8793A8;           /* حدُّ الحقل — ٣٫١٠:١: أخفُّ درجةٍ تجتاز ٣:١ */
    --field-hover: #5B6880;
    --text: #1C2A44;
    --muted: #50607A;           /* ٦٫٣٧:١ */
    --foot-ink: #D3DEEF;
    --foot-dim: #9FB1CE;        /* ٨٫٠٩:١ على التذييل */
    --dot: #CAD4E2;
    --shadow: 0 10px 30px rgba(11, 29, 61, .08);
    --shadow-lg: 0 18px 50px rgba(11, 29, 61, .14);
    --radius: 14px;
    --radius-lg: 18px;
    --container: min(1280px, 92%);

    /* مرادفات المكوّنات المشتركة (components.css) */
    --c-line: var(--line-soft);
    --c-surface: #fff;
    --c-ink: var(--text);
    --c-muted: var(--muted);
    --c-accent: #005FFA;
    --c-sky: var(--sky);
    --c-gold-soft: var(--gold-soft);

    /*
       Qatar 2022 للعربية واللاتينية، و Noto Serif SC للصينية — الحرفُ يأخذ خطّه من
       أوّل خطٍّ فيه رسمُه: العربيّ واللاتينيّ من قطر، والصينيّ من نوتو (fonts.css).
    */
    --font-body: "Qatar 2022", "Noto Serif SC", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    --font-zh: "Qatar 2022", "Noto Serif SC", "Songti SC", "STSong", serif;
    /* الأرقام بخطّ النصّ نفسه بأعمدةٍ متساوية — الأحاديّ العرض للرموز والمعرّفات وحدها */
    --font-num: var(--font-body);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* الحركة والقياس المشتركان مع components.css */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --c-field: var(--field);
    --c-field-hover: var(--field-hover);
    --c-ring: 0 0 0 3px rgba(0, 95, 250, .18);
    --c-ring-error: 0 0 0 3px rgba(172, 26, 29, .14);
    --f-h: 46px;
    --f-radius: 12px;
    /* ظلُّ الحقل: طبقتان خفيفتان تفصلانه عن البطاقة دون حدٍّ داكن */
    --f-shadow: 0 1px 2px rgba(11, 29, 61, .05), 0 4px 12px rgba(11, 29, 61, .05);
}

/*
   الشاشاتُ الكبيرة: المحتوى يتّسع قليلًا لا كثيرًا — ١٣٢٠ بين ١٦٠٠ و٢٤٠٠، و١٤٤٠ على
   شاشات ٣٢ بوصة فأكبر (٢٤٠٠ بكسل فأكثر)، و١٢٨٠ تحتها. فلا يتمطّط السطرُ حتى يتعب
   البصر في تتبّعه، ولا تتباعد الأقسامُ على الشاشة العريضة جدًّا.
*/
@media (min-width: 1600px) { :root { --container: min(1320px, 84%); } }
@media (min-width: 2400px) { :root { --container: min(1440px, 60%); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* الترويسة لاصقة، فالمرساة تترك لنفسها مقدارَ ارتفاعها قبلها */
:target, [id] { scroll-margin-block-start: 110px; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    /* الأرضيّةُ بيضاء: الرماديّ يُترك للمسات الصغيرة لا لخلفيّة الصفحة */
    background: #fff;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { text-decoration: none; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.num { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.mono { font-family: var(--font-mono); }
.zh { font-family: var(--font-zh); }
[lang="zh"] body { font-family: var(--font-zh); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: var(--container); margin-inline: auto; }

/* الأزرار وحقول الإدخال مشتركة مع اللوحات: components.css */

/* ===================== الشريط العلوي =====================
   اللغةُ وروابطُ المساعدة في جهة القراءة، والهاتفُ وواتساب في الجهة الأخرى.  */
.utilbar { background: var(--navy-top); color: var(--foot-ink); font-size: 13px; position: relative; z-index: 61; }
.util-in { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.util-start, .util-end { display: flex; align-items: center; gap: 22px; min-width: 0; }
.utilbar a { color: var(--foot-ink); white-space: nowrap; }
.utilbar a:hover { color: #fff; }
.util-links { display: none; align-items: center; gap: 22px; }
.util-phone { display: none; align-items: center; gap: 7px; }
.util-phone svg { width: 16px; height: 16px; color: var(--foot-ink); }
.util-wa {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px;
    background: var(--wa); color: var(--wa-ink) !important; border-radius: 8px; font-weight: 700; font-size: 12.5px;
}
.util-wa:hover { background: var(--wa-deep); }
.util-wa svg { width: 17px; height: 17px; }
.util-login { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.util-login svg { width: 15px; height: 15px; }
@media (min-width: 760px) { .util-phone { display: inline-flex; } }
@media (min-width: 1080px) { .util-links { display: inline-flex; } }

/* منتقيا اللغة والعملة في الشريط: رأسٌ يقول المختار ولوحٌ يفتح بما سواه */
.hpick { position: relative; }
.hpick-top {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: rgba(255, 255, 255, .06);
    font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap;
}
/* العلمُ في دائرة: يُقصّ من جهة السارية حيث شعارُه (خنجرُ عُمان، ونجمةُ الصين، ونجومُ أمريكا) */
.hpick-top .flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 0 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.hpick-top svg { width: 15px; height: 15px; flex: none; }
.hpick-top svg:last-child { width: 11px; height: 11px; opacity: .75; transition: transform .2s; }
.hpick:hover .hpick-top, .hpick:focus-within .hpick-top { border-color: var(--gold-light); }
.hpick:hover .hpick-top svg:last-child, .hpick:focus-within .hpick-top svg:last-child { transform: rotate(180deg); }
.hpick-panel {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 80;
    min-width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.hpick:hover .hpick-panel, .hpick:focus-within .hpick-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hpick-panel a, .hpick-panel button {
    display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border-radius: 8px;
    border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
    text-align: start; cursor: pointer; width: 100%;
}
.hpick-panel a:hover, .hpick-panel button:hover, .hpick-panel .on { background: var(--sky); color: var(--navy); }
.hpick-panel small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.hpick-panel .flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: 0 50%; box-shadow: 0 0 0 1px var(--line-soft); }

/* ===================== الترويسة: بطاقةٌ بيضاء عائمة ===================== */
.site-head { position: sticky; inset-block-start: 0; z-index: 60; }
.head-bar { padding-block: 10px; }
/* فوق صورة الصفحة الأولى تطفو البطاقة على الصورة (home.css يسحب الصورة تحتها)، وفي غيرها على الأرضيّة */
.nav {
    min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: rgba(255, 255, 255, .96); border-radius: 14px; padding-inline: 18px;
    box-shadow: 0 10px 30px rgba(11, 29, 61, .10);
    backdrop-filter: saturate(1.3) blur(8px);
}
/* العلامة مقيّدةٌ بالترويسة والتذييل: `app.css` يعرّف `.brand` لعمود اللوحة، وقوقعةُ الضيف تحمّل الورقتين */
:is(.site-head, .site-foot) .brand { display: flex; align-items: center; gap: 10px; flex: none; margin: 0; padding: 0; }
:is(.site-head, .site-foot) .brand img { width: 40px; height: 44px; object-fit: contain; }
.brand-word { display: block; font-weight: 800; font-size: 21px; letter-spacing: .06em; color: var(--navy); line-height: 1.05; }
:is(.site-head, .site-foot) .brand-sub { display: block; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--gold-dark); line-height: 1.4; }

.menu { display: none; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--navy); min-width: 0; }
.menu > a, .menu-item > .menu-top {
    display: inline-flex; align-items: center; gap: 5px; padding: 10px 10px; border-radius: 10px; white-space: nowrap;
}
.menu > a:hover, .menu > a.on, .menu-item > .menu-top:hover { color: var(--gold-dark); background: var(--gold-tint); }
@media (min-width: 1180px) { .menu { display: flex; } }
@media (min-width: 1180px) and (max-width: 1360px) {
    .menu { font-size: 13px; }
    .menu > a, .menu-item > .menu-top { padding: 9px 7px; }
}

/* ===================== القائمة الكبيرة =====================
   تُفتح بالمرور وبالتنقّل بلوحة المفاتيح معًا (`:focus-within`) بلا سكربت.
   والرأس `button` لا `a`: رأسُ قائمةٍ لا يقود إلى صفحة.                      */
.menu-item { position: relative; }
.menu-top { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.menu-top svg { width: 12px; height: 12px; opacity: .7; transition: transform .2s; }
.menu-item:hover .menu-top svg, .menu-item:focus-within .menu-top svg { transform: rotate(180deg); }
.mega {
    position: absolute; inset-block-start: calc(100% + 12px); inset-inline-start: 50%;
    width: max-content; max-width: min(480px, 92vw);
    background: #fff; border: 1px solid var(--line-soft); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 16px;
    /* ينمو من زرّه (أعلى الوسط) لا من مركزه، ويُغلق أسرع ممّا يُفتح */
    transform-origin: top center;
    opacity: 0; visibility: hidden;
    transition: opacity 140ms ease, transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
.mega { transform: translateX(50%) translateY(-4px) scale(.97); }
[dir="ltr"] .mega { transform: translateX(-50%) translateY(-4px) scale(.97); }
.menu-item:hover .mega, .menu-item:focus-within .mega {
    opacity: 1; visibility: visible; transform: translateX(50%) translateY(0) scale(1);
    transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s;
}
[dir="ltr"] .menu-item:hover .mega, [dir="ltr"] .menu-item:focus-within .mega { transform: translateX(-50%) translateY(0) scale(1); }
/* جسرٌ شفّاف فوق اللوح: المؤشّر يعبر الفجوة إليه ولا يُغلق في الطريق */
.mega::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; height: 14px; }
.mega-head { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-block-end: 10px; padding-inline: 6px; }
.mega-list { display: grid; gap: 2px; min-width: 240px; }
.mega-list.two { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
.mega-list a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mega-list a:hover { background: var(--sky); color: var(--navy); }
.mega-list svg { width: 18px; height: 18px; flex: none; color: var(--navy); }
.mega-foot { border-block-start: 1px solid var(--line-soft); margin-block-start: 10px; padding-block-start: 10px; padding-inline: 6px; }
.mega-foot a { font-size: 13px; font-weight: 700; color: var(--gold-dark); }

.nav-actions { display: flex; gap: 10px; align-items: center; flex: none; }
.nav-actions .btn { white-space: nowrap; min-height: 46px; padding-inline: 18px; }
/* الدعوة باسمها الكامل، وعلى الهاتف باسمٍ قصير — والكامل باقٍ لقارئ الشاشة */
.nav-cta-short { display: none; }
/*
   دخولُ المشتركين: زرٌّ محدّدٌ بالأزرق بجوار الدعوة الخضراء. والعربيّةُ أطولُ اسمًا،
   فبين ١٢٨٠ و١٦٠٠ (القائمةُ كاملةً بجانبه) يصير أيقونةً واسمُه باقٍ لقارئ الشاشة،
   وبين ١١٨٠ و١٢٨٠ لا يتّسع الصفُّ له في أيّ لغة فيغيب، ودون ٥٦٠ يغيب كذلك:
   الدخولُ في الشريط العلويّ وفي شريط التطبيق السفليّ.
*/
.nav-actions .nav-login { gap: 8px; padding-inline: 14px; background: #fff; }
.nav-login svg { width: 19px; height: 19px; }
@media (min-width: 1180px) and (max-width: 1279px) { .nav-actions .nav-login { display: none; } }
@media (min-width: 1280px) and (max-width: 1599px) {
    html[lang="ar"] .nav-actions .nav-login { width: 46px; padding: 0; }
    html[lang="ar"] .nav-login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===================== درج الشاشات الضيّقة =====================
   لوحٌ جانبيّ ينزلق من جهة البداية فوق ستارةٍ داكنة، يفتحه مربّعُ اختيارٍ مخفيّ:
   يعمل بلا جافاسكربت، والسكربت يزيد لوحةَ المفاتيح وحبسَ التركيز و Esc.
   والحركة بمنحنى درج iOS (‎--ease-drawer‎) لأنها حركةُ مكانٍ لا ظهور.        */
.nav-burger {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--line-soft); border-radius: 12px; cursor: pointer; color: var(--navy); background: #fff;
}
.nav-burger svg { width: 20px; height: 20px; }
.nav-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.nav-scrim {
    position: fixed; inset: 0; z-index: 1; cursor: pointer;
    background: rgba(6, 24, 55, .46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.nav-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 2;
    width: min(86vw, 360px); display: flex; flex-direction: column; gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: #fff; border-start-end-radius: 22px; border-end-end-radius: 22px;
    box-shadow: 0 0 60px rgba(6, 24, 55, .28);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden;
    transition: transform 340ms var(--ease-drawer), visibility 0s linear 340ms;
}
[dir="rtl"] .nav-drawer { transform: translateX(104%); }
.site-head:has(.nav-toggle:checked) { z-index: 210; }
.site-head:has(.nav-toggle:checked) .nav-scrim { opacity: 1; visibility: visible; transition: opacity 280ms ease, visibility 0s; }
.site-head:has(.nav-toggle:checked) .nav-drawer { transform: none; visibility: visible; transition: transform 340ms var(--ease-drawer), visibility 0s; }
/* والصفحةُ خلف الدرج لا تُمرَّر */
html:has(.site-head .nav-toggle:checked) { overflow: hidden; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-end: 12px; border-block-end: 1px solid var(--line-soft); }
.drawer-head .brand-word { font-size: 19px; }
.site-head .nav-drawer .brand-sub { display: block; }
.drawer-close {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; cursor: pointer;
    border: 1px solid var(--line-soft); border-radius: 50%; color: var(--navy); background: #fff;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.drawer-close svg { width: 18px; height: 18px; }
.drawer-close:hover { background: var(--sky); border-color: var(--gold); }
.drawer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.drawer-nav { display: grid; gap: 2px; }
.drawer-nav a {
    display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 10px; border-radius: 14px;
    font-size: 15px; font-weight: 700; color: var(--navy); transition: background-color 160ms ease;
}
.drawer-nav a:hover, .drawer-nav a.on { background: var(--sky); }
.drawer-nav a.on { color: var(--gold-dark); }
.drawer-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--gold-soft); color: var(--gold); }
.drawer-ic svg { width: 19px; height: 19px; }
.drawer-nav a.on .drawer-ic { background: var(--gold); color: #fff; }

.drawer-sub { display: grid; gap: 2px; padding-block: 10px; border-block: 1px solid var(--line-soft); }
.drawer-sub a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.drawer-sub a:hover { background: var(--porcelain); color: var(--navy); }
.drawer-sub svg { width: 17px; height: 17px; flex: none; }

.drawer-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-picks a, .drawer-picks button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 12px;
    border: 1px solid var(--line-soft); background: #fff; font: inherit; font-size: 13px; font-weight: 700;
    color: var(--text); cursor: pointer;
}
.drawer-picks .flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: 0 50%; box-shadow: 0 0 0 1px var(--line-soft); }
.drawer-picks .on { background: var(--sky); border-color: var(--gold); color: var(--gold-dark); }

.drawer-foot { margin-block-start: auto; display: grid; gap: 10px; padding-block-start: 6px; }
.drawer-foot .btn { width: 100%; min-height: 50px; }
.drawer-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 12px;
    background: var(--lime-tint); color: var(--lime-ink); font-size: 14px; font-weight: 800;
}
.drawer-wa svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
    .nav-drawer, .nav-scrim, .site-head:has(.nav-toggle:checked) .nav-drawer, .site-head:has(.nav-toggle:checked) .nav-scrim { transition: none; }
}
@media (min-width: 1180px) { .nav-burger, .nav-drawer, .nav-scrim { display: none !important; } }

/* دون ٥٦٠: العلامة أصغر والدعوة تختصر إلى أيقونة — ولا يُحذف نصّها لقارئ الشاشة */
@media (max-width: 559px) {
    .nav { padding-inline: 12px; gap: 8px; min-height: 60px; }
    .site-head .brand-sub { display: none; }
    .brand-word { font-size: 18px; }
    .site-head .brand img { width: 34px; height: 38px; }
    .nav-actions .nav-cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav-actions .nav-cta-short { display: inline; }
    .nav-actions .nav-cta { padding-inline: 14px; gap: 6px; }
    .nav-actions .nav-login { display: none; }
    .util-start { gap: 10px; }
}

/* ===================== عناوين الأقسام ===================== */
.band { padding: 26px 0; }
.band.alt { background: var(--band); }
.section-head { text-align: center; margin-block-end: 14px; }
.section-head h2 { font-size: clamp(22px, 1.9vw, 27px); font-weight: 800; color: var(--navy); margin: 0 0 2px; line-height: 1.3; }
.section-head p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
/* سطرٌ ذهبيٌّ صغير فوق العنوان بين خطّين */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-dark); font-weight: 700; font-size: 14px; margin-block-end: 2px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gold); }

.panel { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px; background: #fff; box-shadow: var(--shadow); }
.more-link { text-align: center; margin-block-start: 18px; color: var(--navy); font-weight: 700; font-size: 14px; }
.more-link a:hover { color: var(--gold-dark); }

/* ===================== التذييل ===================== */
.site-foot { background: var(--navy-2); color: var(--foot-ink); padding: 34px 0 0; margin-block-start: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px 28px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1140px) { .footer-grid { grid-template-columns: 1.15fr .95fr .9fr .8fr 1.5fr; } .foot-brand { grid-column: auto; } }
.site-foot h4 { margin: 0 0 10px; font-size: 15.5px; font-weight: 800; color: #fff; position: relative; padding-block-end: 8px; }
/* خيطٌ ذهبيٌّ قصير تحت العنوان */
.site-foot h4::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--gold-light); }
.foot-col { display: grid; align-content: start; gap: 0; }
.foot-col a { color: var(--foot-ink); font-size: 13.5px; min-height: 25px; display: inline-flex; align-items: center; }
.foot-col a:hover { color: var(--gold-light); }
.foot-contact { display: grid; gap: 8px; align-content: start; }
.foot-contact .contact-line { display: flex; align-items: center; gap: 12px; color: var(--foot-ink); font-size: 14px; margin: 0; }
.foot-contact .contact-line a { color: var(--foot-ink); }
.foot-contact .contact-line a:hover { color: var(--gold-light); }
.foot-contact svg { width: 20px; height: 20px; flex: none; color: var(--gold-light); }
.site-foot .brand { margin-block-end: 12px; }
.site-foot .brand-word { color: #fff; }
.site-foot .brand-sub { color: var(--gold-light); }
.foot-about { max-width: 42ch; line-height: 1.85; font-size: 13px; color: var(--foot-ink); margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
.social a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, color .2s;
}
.social a:hover { background: var(--gold-dark); }
.social svg { width: 17px; height: 17px; }
.legal-note { color: var(--foot-dim); font-size: 11px; line-height: 1.8; margin-block-start: 18px; }
.foot-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
    border-block-start: 1px solid rgba(255, 255, 255, .10); margin-block-start: 12px; padding-block: 12px 14px;
    color: var(--foot-dim); font-size: 13px;
}
.foot-slogan { display: inline-flex; align-items: center; gap: 8px; color: var(--foot-ink); }
.foot-slogan svg { width: 17px; height: 17px; color: var(--gold-light); }

/* زر واتساب عائم — ظهورُه قرارٌ من اللوحة */
.float-wa {
    position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 70; width: 54px; height: 54px;
    border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: var(--wa-ink);
    box-shadow: 0 10px 26px rgba(11, 29, 61, .28), 0 0 0 1px rgba(11, 29, 61, .06);
}
.float-wa svg { width: 28px; height: 28px; }
.float-wa:hover { background: var(--wa-deep); }
body:has(.float-wa) .auth-wrap { padding-block-end: 104px; }
body:has(.float-wa) .foot-bar { padding-block-end: 72px; }
body:has(.float-wa) .doc-main { padding-block-end: 84px; }

/* ===================== الصفحات العامة الداخلية ===================== */
.doc-main { padding: 44px 0 56px; min-height: 60vh; }
.doc-head { text-align: center; margin-block-end: 30px; }
.doc-head h1 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; color: var(--navy); margin: 0 0 8px; line-height: 1.4; }
.doc-head p { margin: 0 auto; color: var(--muted); font-size: 15px; max-width: 62ch; }
/* سطرٌ ذهبيٌّ قصير تحت عنوان الصفحة — توقيعُ عناوين الأقسام في الصفحة الأولى */
.doc-head h1::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--gold); margin: 12px auto 0; }

.doc-body { max-width: 760px; margin-inline: auto; }
.doc-body p { font-size: 14.5px; line-height: 2; margin: 0 0 16px; }
.doc-meta { font-size: 12px; color: var(--muted); border-block-start: 1px solid var(--line); padding-block-start: 12px; margin-block-end: 0 !important; }
.doc-group { max-width: 760px; margin: 30px auto 12px; font-size: 16px; color: var(--navy); }

.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: 0 6px 20px rgba(11, 29, 61, .04); }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--navy); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: inline-end; color: var(--gold-dark); font-weight: 700; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.95; color: var(--text); }

.contact-card { display: grid; gap: 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-block: 8px 20px; }
.contact-line { display: flex; align-items: center; gap: 9px; margin: 0 !important; font-size: 13.5px; }
.contact-line svg { width: 16px; height: 16px; flex: none; color: var(--gold-dark); }

/* ===================== شاشة الدخول ===================== */
/*
 * نفس ترويسة الواجهة العامة وتذييلها، وبينهما بطاقة على خلفية
 * المدينة مغسولة إلى أقصى حدّ — الصورة سياق لا موضوع.
 */
.auth-wrap {
    position: relative; padding: 56px 0 64px; min-height: 62vh; overflow: hidden;
    background: linear-gradient(var(--sky), #fff);
}
.auth-wrap::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url('../images/home/hero.jpg?v=20261011h') center 30% / cover no-repeat;
    opacity: .32; filter: saturate(.85);
}
/* نقاط زخرفية في الركنين كما في المرجع */
.auth-wrap::after {
    content: ""; position: absolute; z-index: 0; inset-block-start: 26px; inset-inline-start: 3%;
    width: 120px; height: 60px; opacity: .5;
    background-image: radial-gradient(var(--line-2) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
}

.auth-card {
    position: relative; z-index: 2; max-width: 560px; margin-inline: auto;
    background: #fff; border-radius: 18px; padding: 30px 34px 26px;
    box-shadow: 0 20px 60px rgba(0, 95, 250, .12);
}
.auth-lockup { width: 232px; height: auto; margin: 0 auto 26px; }

/* ===================== صفحات الخطأ =====================
   بطاقةٌ في قوقعة الموقع نفسها: الرقم ثم ما جرى ثم مخرجان.
   والرقم قِرمزيّ لا كحليّ — هو الشيء الوحيد في الصفحة الذي يقول «توقّف».  */
.err-card { text-align: center; }
.err-code { font-family: var(--font-num); font-size: 52px; font-weight: 600; line-height: 1; color: var(--cinnabar); }
.err-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-block: 14px 8px; }
.err-body { color: var(--muted); line-height: 1.9; font-size: 14.5px; margin: 0; }
.err-who { color: var(--muted); font-size: 12px; margin-block: 14px 0; }
.err-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-block-start: 22px; }
.err-actions form { margin: 0; }

.auth-field { margin-block-end: 16px; }
/*
   ورقاقةُ الاختيار لصيقةٌ أيضًا — والقاعدة أعلاه تجعلها صفًّا كاملًا.
   فتُستثنى بصراحة، ومعها `.row` كي تقف الرقاقتان جنبًا إلى جنب: هي
   معرَّفةٌ في ورقة اللوحة وحدها، وقوقعةُ الحساب لا تُحمّلها.
*/
.row { display: flex; align-items: center; gap: 10px; }
.auth-field .chip-pick, .field .chip-pick { display: inline-flex; width: auto; margin-block-end: 0; font-weight: 500; }
.auth-field .chip-pick:has(input:checked), .field .chip-pick:has(input:checked) { font-weight: 600; }

/* ===================== حقول النماذج =====================
   الأساس مشترك في components.css؛ هنا ما يخصّ قوقعة الموقع وحدها. */

/* رقاقةُ اختيار: مربّعٌ مخفيٌّ ولصيقةٌ تُقرأ — نسخةُ `app.css` نفسها بألوان الورقة */
.chip-pick {
    display: inline-flex; align-items: center; gap: 6px; position: relative;
    padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 13px; cursor: pointer; background: #fff; color: var(--text);
}
.chip-pick:has(input:checked) { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); font-weight: 600; }
.chip-pick input { position: absolute; opacity: 0; width: 0; height: 0; }

.input-wrap { display: block; position: relative; }
.input-wrap .input { padding-inline: 46px; }
.input-icon {
    position: absolute; inset-block-start: 50%; inset-inline-start: 15px; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.input-eye {
    position: absolute; inset-block-start: 50%; inset-inline-end: 10px; transform: translateY(-50%);
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0;
}
.input-eye svg { width: 17px; height: 17px; }
.input-eye:hover { color: var(--navy); }

.auth-card .btn-block { min-height: 48px; margin-block-start: 6px; }

/* فاصل بعنوان في وسطه */
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: var(--muted); font-size: 12.5px; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-demo .tiny { text-align: center; color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.demo-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 232px; overflow-y: auto; }
@media (min-width: 560px) { .demo-list { grid-template-columns: repeat(2, 1fr); } }
/*
    `min-width: 0` لأن عنصر الشبكة أصلُه `auto`: لا ينكمش دون عرض محتواه.
    فالبريد الطويل يدفع العمود فتظهر مسطرة تمرير أفقية، ويُقصّ أوّل البريد
    في الاتجاه من اليمين — فيقرأ المجرِّب «ient.en@china.test» ولا يعرف بقيّته.
*/
.demo-list button {
    text-align: start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised);
    padding: 9px 12px; cursor: pointer; display: grid; gap: 2px; transition: border-color .2s, background .2s;
    min-width: 0;
}
.demo-list button:hover { border-color: var(--gold); background: #fff; }
/* البريد لاتينيّ داخل صفحةٍ من اليمين: يُعزل اتجاهه ويلتفّ عند الحاجة لا يُقصّ */
.demo-list button .num {
    font-size: 11.5px; color: var(--navy); font-weight: 700;
    direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere;
}
.demo-list button span:last-child { font-size: 11px; color: var(--muted); }

.auth-foot { position: relative; z-index: 2; text-align: center; margin-block-start: 20px; font-size: 13px; }
.auth-foot a { color: var(--gold-dark); font-weight: 700; }

/* شاشات الحساب: عنوان ووصف داخل البطاقة، وصفّ حقلين، وخانة الموافقة */
.auth-title { font-size: 20px; color: var(--navy); text-align: center; margin: 0 0 6px; }
.auth-lede { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 20px; line-height: 1.8; }
.auth-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin-block: 6px 16px; line-height: 1.8; }
.auth-check input { margin-block-start: 4px; flex: none; }
.auth-check a { color: var(--navy); font-weight: 700; }
.auth-links { text-align: center; margin: 14px 0 0; font-size: 12.5px; }
.auth-links a { color: var(--navy); font-weight: 700; }

/* حقل الهاتف: مفتاح الدولة ملتصق بخانة الرقم في كتلة واحدة */
.phone-field { display: flex; align-items: stretch; border: 1px solid var(--field); border-radius: var(--f-radius); background: #fff; overflow: hidden; box-shadow: var(--f-shadow); transition: border-color 160ms ease, box-shadow 160ms ease; }
.phone-field:focus-within { border-color: var(--c-accent); box-shadow: var(--c-ring), var(--f-shadow); }
.phone-dial {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding-inline: 12px 10px; background: var(--gold-tint); border-inline-end: 1px solid var(--line);
    font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.phone-dial::after { content: "⌄"; color: var(--muted); font-size: 12px; margin-inline-start: 2px; }
.phone-flag { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 29, 61, .12); }
/* القائمة الحقيقية تغطّي الكبسولة وتبقى غير مرئية — الشكل من الكبسولة والسلوك منها */
.phone-dial select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.phone-field .input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding-inline: 14px; min-height: calc(var(--f-h) - 2px); }
.phone-field .input:focus { box-shadow: none; }

/* ===================== خانة الرمز: ستُّ خلايا مرسومة =====================
   حقلٌ واحد في الحقيقة، ستُّ خانات في الشكل.

   ستّةُ حقولٍ حقيقية تكسر اللصق، وتُربك قارئ الشاشة، وتُفسد `one-time-code`
   — وهو ما يجعل الهاتف يعرض الرمز فوق لوحة المفاتيح بضغطة. فالخلايا خلفيّةٌ
   متكرّرة خلف حقلٍ بخطٍّ أحاديّ العرض، والتباعد محسوبٌ بوحدة `ch` فيقع كلُّ
   رقمٍ في خليّته مهما كان مقاس الخط.

   والاتجاه `ltr` دائمًا: الرمز يُقرأ من اليسار في كل لغة، والخلفيّة تتبعه.   */
.otp-wrap {
    --cell: 3ch;
    --gap: .55ch;

    /*
       عرضُ الغلاف عرضُ الحقل بالضبط (`max-content`) لا عرضَ السطر: إطارُ
       الخليّة النشطة يُحسب من حافّته، فلو امتدّ الغلاف عرضَ البطاقة لَوقع
       الإطار خارج الخانات.
    */
    position: relative; width: max-content; margin: 4px auto 0;

    /*
       وخطُّ الغلاف خطُّ الحقل: وحدة `ch` تُقاس بخطّ العنصر نفسه، فلو بقي
       الغلاف على خطّ الصفحة لَحُسب إطارُ الخليّة بعرضِ حرفٍ آخر فوقع بين
       خانتين.
    */
    font-family: var(--font-mono); font-size: 28px;
}

.otp-input {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums;
    font-size: 28px; font-weight: 600; line-height: 1;
    direction: ltr; text-align: start; caret-color: var(--navy);

    /* عرضٌ يسع ستَّ خلايا وفواصلها، وحشوةٌ تضع الرقم في وسط خليّته */
    width: calc(6 * var(--cell) + 5 * var(--gap) + 2px);
    padding: 16px 0 16px calc((var(--cell) - 1ch) / 2);
    letter-spacing: calc(var(--cell) + var(--gap) - 1ch);

    /*
       وللخليّة إطارٌ لا لونٌ مصمت.

       كانت ستَّ مساحاتٍ من `--sky` بلا حدّ: تبدو ظلالًا على الورقة لا خاناتٍ
       تُكتب فيها، ومن نظر إليها لم يعرف أين يضع الرقم. وهي عينُ العلّة التي
       جعلت `.btn` يبدو نصًّا.

       والطبقتان: السفلى تملأ الخليّة بلون الإطار، والعليا تملأها بلون الحشو
       منقوصةً بكسلٍ من كلّ جهة — فيظهر ما تحتها خطًّا محيطًا. وهذا أقربُ ما
       يُرسم إطارًا لستّ خلايا خلف حقلٍ واحد، والحقلُ واحدٌ عمدًا: ستّةٌ تكسر
       اللصق وتُفسد `one-time-code`.
    */
    border: 0; border-radius: 0; background-color: transparent;
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0, transparent 1px,
            var(--sky) 1px, var(--sky) calc(var(--cell) - 1px),
            transparent calc(var(--cell) - 1px), transparent calc(var(--cell) + var(--gap))
        ),
        repeating-linear-gradient(
            to right,
            var(--line) 0, var(--line) var(--cell),
            transparent var(--cell), transparent calc(var(--cell) + var(--gap))
        );
    background-size:
        calc(6 * var(--cell) + 5 * var(--gap)) calc(100% - 2px),
        calc(6 * var(--cell) + 5 * var(--gap)) 100%;
    background-position: 0 1px, 0 0;
    background-repeat: no-repeat;
    box-shadow: none;
}

.otp-input:focus { outline: none; box-shadow: none; background-color: transparent; }

/*
   إطارُ الخليّة وإضاءةُ التالية.

   `data-len` يكتبه السكربت مع كل حرف، فتُعرف الخليّة التي يقف عندها المؤشّر.
   وبلا سكربت تبقى الخانات ساكنةً مرسومة — والحقل يعمل كما هو.
*/
.otp-wrap::after {
    /*
       بالخصائص الفيزيائية لا المنطقية: الرمز يُقرأ من اليسار في كل لغة
       (`dir="ltr"` على الحقل)، فالخليّة الأولى يسارًا في العربية والإنجليزية
       سواء — ولو تبع الإطارُ اتجاهَ الصفحة لَمشى عكس الأرقام.
    */
    content: ""; position: absolute; inset-block: 0; left: 0; width: var(--cell);
    border: 2px solid var(--gold); border-radius: 12px;
    transform: translateX(calc((var(--len, 0)) * (var(--cell) + var(--gap))));
    opacity: 0; transition: transform .12s, opacity .12s; pointer-events: none;
}
.otp-wrap:focus-within::after { opacity: .9; }

.otp-wrap[data-len="0"] { --len: 0; }
.otp-wrap[data-len="1"] { --len: 1; }
.otp-wrap[data-len="2"] { --len: 2; }
.otp-wrap[data-len="3"] { --len: 3; }
.otp-wrap[data-len="4"] { --len: 4; }
.otp-wrap[data-len="5"] { --len: 5; }
.otp-wrap[data-len="6"] { --len: 5; }

/* ورمزٌ خاطئ: الخلايا قرمزيّة — الخطأ يُرى حيث وقع لا في أعلى الصفحة وحده */
.otp-input.is-invalid {
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0, transparent 1px,
            var(--cinnabar-tint) 1px, var(--cinnabar-tint) calc(var(--cell) - 1px),
            transparent calc(var(--cell) - 1px), transparent calc(var(--cell) + var(--gap))
        ),
        repeating-linear-gradient(
            to right,
            var(--cinnabar) 0, var(--cinnabar) var(--cell),
            transparent var(--cell), transparent calc(var(--cell) + var(--gap))
        );
}
/* أزرار الدخول البديلة تحت النموذج */
.auth-methods { display: grid; gap: 10px; margin-block-start: 4px; }
.auth-methods .btn { width: 100%; justify-content: center; }
.auth-methods .btn img, .auth-methods .btn svg { width: 17px; height: 17px; }
.btn-google { border-color: var(--line-2); }
.btn-whatsapp { border-color: var(--lime-line); color: var(--lime-ink); }

/* =========================================================
   قِمع الحجز السريع — بطاقات من المدينة إلى السعر
   عدد البطاقات في كل خطوة متغيّر: فئات مدينةٍ اثنتان وفئات أخرى خمس،
   فلا أعمدة ثابتة كشريط التخصّصات بل ملءٌ تلقائي بحدٍّ أدنى للعرض.
   ========================================================= */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.pick { min-height: 122px; justify-content: center; }
.pick small { font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.4; }
.pick .from { font-size: 12px; color: var(--gold-dark); font-weight: 700; }

/* رقائق المدن: الاختيار الأول في الطريق، ولذلك فوق الشبكة لا داخلها */


/* لوحة «لا شيء بعد» — تحلّ محلّ الشبكة ولا تُترك فراغًا */
.blank {
    border: 1px dashed var(--field); border-radius: 18px; background: #fff;
    padding: 32px 22px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.blank b { display: block; color: var(--navy); font-size: 15px; margin-block-end: 6px; }

/* بطاقة العرض الأخيرة: السعر هو العنوان لأنه سبب الوقوف هنا */
.price-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
.price-card {
    border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px;
    box-shadow: 0 6px 20px rgba(11, 29, 61, .04);
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .2s, transform .2s;
}
.price-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.price-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.price-card .big { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.price-card .meta { font-size: 12px; color: var(--muted); }
.price-card .note { font-size: 12px; color: var(--gold-dark); font-weight: 700; }

/* التنبيه المنبثق — نسخة الواجهة العامة.
   نفس السلوك ونفس البنية، وألوانها من رموز هذه الورقة. */
.flash-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.flash-veil{display:none}
.flash-toggle:checked + .flash-veil{
  display:flex;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6, 24, 55,.45);
}
.flash-card{
  background:#fff;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(6, 24, 55,.28);
  padding:26px 24px 20px;text-align:center;max-width:420px;width:100%;
  border-block-start:4px solid var(--line);
}
.flash-card.flash-jade{border-block-start-color:var(--navy)}
.flash-card.flash-red{border-block-start-color:var(--cinnabar)}
.flash-text{margin:0 0 18px;font-size:14.5px;line-height:1.9;color:var(--text)}
.flash-close{display:inline-flex;justify-content:center;min-width:120px;cursor:pointer}
/* قائمةُ ما نقص: خمسةُ أسطرٍ تُقرأ، وما بقي يظهر عند حقله */
.flash-list{margin:0 0 18px;padding-inline-start:18px;text-align:start;color:var(--text);font-size:13.5px;line-height:1.95}
.flash-list li{margin-block-end:4px}
.flash-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.flash-actions .flash-close{min-width:0;flex:1 1 140px}
/*
   «اذهب إلى الحقل» يفتح المرساة `#e-<الحقل>`، وهذه تُخفي الحجاب عندها:
   بغيرها يقفز الزائر إلى موضع النقص **خلف** الحجاب فلا يرى شيئًا.
   والشرط مقصورٌ على مراسي الحقول وعلى منبثق التحقّق وحده، فلا يُطفئ
   رابطٌ في الصفحة (`#tracks` مثلًا) تنبيهَ «حُفظ».
*/
body:has([id^="e-"]:target) #flash-invalid:checked + .flash-veil{display:none}

/* الأرقام تُقرأ من اليسار مهما كان اتجاه الصفحة — انظر شرحها في app.css */
.num{direction:ltr;unicode-bidi:isolate}


/* ── لوحة اختيار الدولة (الواجهة العامة) ──
   نفس المكوِّن في شاشتي التسجيل واللوحة، فينبغي أن يُرى واحدًا. والبحث داخل
   القائمة لا حقلًا ثانيًا تحتها: الثاني كان يشبه خانة الرقم فيُملأ خطأً. */
.phone-wrap { position: relative; }
/* بالسكربت وحده يُحجب المنتقي عن اللمس؛ وبدونه يبقى هو المستقبِل */
.phone-field.has-pop .phone-dial select { pointer-events: none; }
.phone-field.has-pop .phone-dial { cursor: pointer; }
.dial-pop {
    position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px); z-index: 40;
    width: min(330px, 88vw); padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.dial-search { width: 100%; min-height: 38px; font-size: 13.5px; }
.dial-list { max-height: 270px; overflow-y: auto; margin-block-start: 6px; }
.dial-head { padding: 7px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.dial-opt {
    display: block; width: 100%; text-align: start;
    padding: 7px 10px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer;
}
.dial-opt:hover, .dial-opt:focus { background: var(--sky); outline: 0; }
.dial-opt.on { background: var(--navy); color: #fff; font-weight: 600; }
.dial-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); text-align: center; }
/* شاشةٌ قصيرة: قائمةٌ بارتفاعٍ ثابت تتدلّى تحت حافّتها فيُقصّ آخرها */
@media (max-height: 640px) { .dial-list { max-height: 180px; } }

/* عرض السعر بحسب طبيعته — الواجهة العامّة */
.price-estimate { display: block; line-height: 1.6; }
.price-estimate .price-known, .price-estimate .price-range { display: block; font-size: 13px; color: var(--muted); }
.price-estimate b { color: var(--navy); font-weight: 700; }
.price-note { display: block; margin-block-start: 4px; font-size: 11.5px; color: var(--muted); }
.price-quote { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sky); font-size: 12.5px; font-weight: 700; color: var(--navy); }
.price-fixed small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }


/*
   تنبيهُ الحقل اللاتيني: يظهر بالورقة وحدها.

   `pattern` يجعل الحقل `:invalid` حين يُكتب بغير اللاتينية، و`:has` تُظهر
   السطر عند ذلك — فيراه من كتب بالعربية أو الصينية قبل أن يضغط إرسالًا،
   لا بعد أن تُردّ عليه الصفحة.
*/
.latin-note { display: none; margin-block-start: 6px; font-size: 12px; color: var(--cinnabar-ink); }
.auth-field:has(.input:invalid:not(:placeholder-shown)) .latin-note,
.field:has(.input:invalid:not(:placeholder-shown)) .latin-note { display: block; }

/* سؤالٌ بجوابين — شرحه في app.css، والورقتان تعرضانه في القوقعتين */
.ask { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
       padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; margin-block-end: 10px; }
.ask > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ask-head { font-weight: 600; font-size: 14px; color: var(--text); }
.ask-picks { display: inline-flex; gap: 6px; justify-self: end; }
.ask-price { font-size: 13px; color: var(--gold-dark); grid-column: 1 / -1; }
.ask-body { display: none; grid-column: 1 / -1; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.ask-on:checked ~ .ask-body { display: block; }
.ask-off:checked ~ .ask-picks .for-off,
.ask-on:checked ~ .ask-picks .for-on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); font-weight: 600; }

/* بيانات مريضٍ يُضاف — تُعرض مع «لشخص آخر» وحدها (شرحها في app.css) */
.new-patient { display: none; border-block-start: 1px solid var(--line); padding-block-start: 14px; margin-block-start: 12px; }
.card:has(input[name="patient_id"][value="new"]:checked) .new-patient { display: block; }

/* ===================== المستشفيات الشريكة: صفحتها ===================== */
.dir-chips { justify-content: center; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.dir-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.dir-card img { width: 100%; height: auto; aspect-ratio: 2.85 / 1; object-fit: cover; }
.dir-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dir-body h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.5; }
.dir-body .zh { margin: 0; font-size: 13px; color: var(--muted); }
.dir-meta { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text); }
.dir-meta li { display: inline-flex; align-items: center; gap: 6px; }
.dir-meta svg { width: 16px; height: 16px; color: var(--gold-dark); }
.dir-body .btn { margin-block-start: auto; align-self: flex-start; }

/* ===================== مركز المساعدة ===================== */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; max-width: 980px; margin-inline: auto; }
.help-card {
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    transition: border-color .2s, transform .2s;
}
a.help-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.help-card svg { width: 34px; height: 34px; color: var(--navy); margin-block-end: 6px; }
.help-card b { font-size: 15px; color: var(--navy); }
.help-card span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; max-width: 980px; margin-inline: auto; }
.help-topic {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line-soft); font-weight: 700; color: var(--navy);
}
.help-topic:hover { border-color: var(--gold); }
.help-topic svg { width: 20px; height: 20px; color: var(--gold-dark); flex: none; }
.help-topic span:first-of-type { flex: 1; }
.help-topic .num { font-size: 12px; color: var(--muted); }
.help-cta { text-align: center; margin-block-start: 30px; }

/* ===================== المدونة ===================== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; max-width: 1100px; margin-inline: auto; }
.post-card {
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s;
}
.post-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.post-date { font-size: 12.5px; color: var(--muted); }
.post-card b { font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.6; }
.post-excerpt { font-size: 14px; color: var(--text); line-height: 1.85; flex: 1; }
.post-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--gold-dark); }
.post-more svg { width: 16px; height: 16px; }
.post-back { max-width: 760px; margin: 0 auto 14px; font-size: 14px; font-weight: 700; }
.post-back a { color: var(--gold-dark); }

/* الشريط العلويّ على الهاتف: واتساب أيقونةٌ وحدها، والدخول كلمةٌ قصيرة */
@media (max-width: 559px) {
    .utilbar { font-size: 12.5px; }
    .util-in { gap: 10px; }
    .util-end { gap: 12px; }
    .util-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .util-wa { padding-inline: 8px; }
    .hpick-top { padding-inline: 8px; }
}

/* ===================== شريطُ الموقع السفليّ (الهاتف) =====================
   خمسةُ أبوابٍ تحت الإبهام كتطبيق، والدرجُ أعلى الصفحة للقائمة الكاملة.
   والزرّ العائم يعلو الشريط ولا يغطّيه. */
.site-tabbar { display: none; }
@media (max-width: 899px) {
    .site-tabbar {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 75;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        padding-block-end: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
        border-block-start: 1px solid rgba(11, 29, 61, .1);
        box-shadow: 0 -8px 24px rgba(11, 29, 61, .06);
    }
    .site-tabbar a {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 60px; padding: 6px 2px; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--muted);
        -webkit-tap-highlight-color: transparent;
    }
    .site-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
    .site-tabbar svg { transition: transform 140ms var(--ease-out); }
    .site-tabbar a:active svg { transform: scale(.88); }
    .site-tabbar a.on { color: var(--navy); }
    .site-tabbar a.on::before {
        content: ""; position: absolute; inset-block-start: 0; inset-inline: calc(50% - 14px); height: 3px;
        border-radius: 0 0 3px 3px; background: var(--gold);
    }
    .site-tabbar a:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; border-radius: 12px; }

    body:has(.site-tabbar) { padding-block-end: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body:has(.site-tabbar) .float-wa { inset-block-end: calc(74px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
    body:has(.site-tabbar) .foot-bar { padding-block-end: 14px; }
    body:has(.site-tabbar) .doc-main { padding-block-end: 56px; }
}