/* ════════════════════════════════════════════════════════════
   العيادة المالية — النظام البصري «المصرف الخاص × العيادة الراقية»
   كحلي مصرفي · عاجيّ هادئ · خط نسخ كلاسيكي للعناوين · دقة أدوات القياس
   ألوان الهوية: سماوي #00C9BE · أزرق #1668FF — تُستخدم كخطوط دقيقة لا كمساحات
════════════════════════════════════════════════════════════ */
:root{
  --serif:'Cormorant Garamond','Amiri','Noto Naskh Arabic',Georgia,serif;
  --sans:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --teal:#00C9BE;--blue:#1668FF;
  --grad:linear-gradient(100deg,var(--teal),var(--blue));
  --navy:#0B1B30;--navy-2:#10243D;--navy-3:#16304F;
  --on-navy:#F4EFE6;--on-navy-2:rgba(244,239,230,.68);--on-navy-3:rgba(244,239,230,.42);--navy-rule:rgba(244,239,230,.14);
  --r:3px;
}
html[data-theme="light"]{
  --bg:#F7F4EE;--bg-2:#EFEAE1;--card:#FFFDF9;
  --ink:#0B1B30;--ink-2:#45526A;--ink-3:#8590A2;
  --rule:rgba(11,27,48,.12);--rule-2:rgba(11,27,48,.24);
  --acc:#0A8F86;--acc-soft:rgba(10,143,134,.09);
  --ok:#2E7D52;--warn:#A86A12;--bad:#B4441B;
  --btn:#0B1B30;--btn-ink:#F7F4EE;
  --shadow:0 2px 4px rgba(11,27,48,.04),0 30px 60px -32px rgba(11,27,48,.38);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0A1626;--bg-2:#0E1D31;--card:#12243B;
  --ink:#F1ECE2;--ink-2:rgba(241,236,226,.74);--ink-3:rgba(241,236,226,.48);
  --rule:rgba(241,236,226,.11);--rule-2:rgba(241,236,226,.22);
  --acc:#3CD3C8;--acc-soft:rgba(60,211,200,.12);
  --ok:#5CC08A;--warn:#E0A445;--bad:#EE7B52;
  --btn:#F1ECE2;--btn-ink:#0A1626;
  --navy:#06101D;--navy-2:#0B1828;--navy-3:#122640;
  --shadow:0 30px 60px -30px rgba(0,0,0,.75);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-variant-numeric:lining-nums}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:16.5px;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background-color .4s,color .4s}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.num,.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--btn);color:var(--btn-ink);padding:8px 14px;z-index:200;text-decoration:none}
.skip:focus{top:12px}

/* ── الشريط العلوي: سطر خدمات كحلي + سطر رئيسي ── */
.util{background:var(--navy);color:var(--on-navy-2);font-size:13px}
.util-in{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.aud{display:flex;gap:2px;height:100%}
.aud a{display:flex;align-items:center;padding:0 14px;text-decoration:none;color:var(--on-navy-3);border-bottom:2px solid transparent;transition:color .2s}
.aud a:hover{color:var(--on-navy)}
.aud a.on{color:var(--on-navy);border-bottom-color:var(--teal);background:rgba(244,239,230,.04)}
.util-act{display:flex;align-items:center;gap:16px}
.util-act a{text-decoration:none;color:var(--on-navy-2);transition:color .2s}
.util-act a:hover{color:var(--on-navy)}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.lang button{background:none;border:0;padding:3px 6px;color:var(--on-navy-3);cursor:pointer;border-radius:2px}
.lang button.on{color:var(--navy);background:var(--on-navy)}
.icon-btn{width:26px;height:26px;border:1px solid var(--navy-rule);border-radius:2px;background:none;cursor:pointer;display:grid;place-items:center;color:var(--on-navy-2)}
.icon-btn svg{width:14px;height:14px}
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;direction:ltr}
.brand img{width:44px;height:44px;border-radius:10px;flex:none}
.brand-names{display:flex;flex-direction:column;font-weight:600;font-size:14.5px;line-height:1.25}
.brand-names .ar{direction:rtl;text-align:left}
.menu{display:flex;gap:30px}
.menu a{text-decoration:none;font-size:14.5px;color:var(--ink-2);position:relative;padding:6px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .35s var(--ease)}
[dir="ltr"] .menu a::after{--o:left}
.menu a:hover{color:var(--ink)}.menu a:hover::after{transform:scaleX(1)}
@media(max-width:1020px){.menu{display:none}}
@media(max-width:620px){
  .wrap{padding:0 18px}
  .util-in{height:38px}.aud a{padding:0 10px}
  .util-act .hide-s{display:none}
  .nav-in{height:64px;gap:10px}
  .brand img{width:36px;height:36px}.brand-names{font-size:12px}
}
@media(max-width:360px){.brand-names{display:none}}

/* ── أزرار ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--btn);cursor:pointer;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:.01em;line-height:1.3;border-radius:var(--r);padding:16px 26px;background:var(--btn);color:var(--btn-ink);transition:background-color .25s,color .25s,border-color .25s,transform .2s var(--ease)}
.btn:hover{background:transparent;color:var(--btn)}
.btn:active{transform:translateY(1px)}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(-5px)}
[dir="ltr"] .btn .ar{transform:scaleX(-1)}
[dir="ltr"] .btn:hover .ar{transform:scaleX(-1) translateX(-5px)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-o:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.on-navy .btn{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
.on-navy .btn:hover{background:transparent;color:var(--on-navy)}
.on-navy .btn-o{background:transparent;color:var(--on-navy);border-color:var(--navy-rule)}
.on-navy .btn-o:hover{border-color:var(--on-navy)}
.link{background:none;border:0;color:var(--acc);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px;transition:border-color .2s,color .2s}
.more:hover{border-color:var(--acc);color:var(--acc)}

/* ── طباعة ── */
.over{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.02em;color:var(--ink-3);margin-bottom:22px}
.over::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.over b{font-family:var(--mono);font-weight:400;color:var(--acc)}
.on-navy .over{color:var(--on-navy-3)}
.on-navy .over b{color:var(--teal)}
.h1{font-family:var(--serif);font-weight:700;font-size:clamp(46px,6.2vw,86px);line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.2vw,56px);line-height:1.18;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:700;font-size:clamp(25px,2.4vw,31px);line-height:1.3}
.lede{font-size:clamp(17px,1.45vw,19px);line-height:1.85;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.p{color:var(--ink-2);max-width:38em;text-wrap:pretty}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy .lede,.on-navy .p{color:var(--on-navy-2)}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}

/* ── أقسام ── */
.sec{padding:110px 0}
.sec-alt{background:var(--bg-2)}
@media(max-width:700px){.sec{padding:70px 0}}

/* ── نماذج ── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.form .full{grid-column:1/-1}
.fld label{display:block;font-weight:500;font-size:13.5px;margin-bottom:4px;color:var(--ink-2)}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;padding:10px 0;font-size:16px;transition:border-color .2s}
.inp:focus{outline:0;border-color:var(--ink)}
select.inp{background:transparent}
select.inp option{background:var(--bg);color:var(--ink)}
textarea.inp{min-height:80px;resize:vertical;line-height:1.7;border:1px solid var(--rule-2);padding:10px 12px}
.inp.ltr{direction:ltr;text-align:left}
.msg{font-size:14px;margin-top:10px;min-height:1.2em}
.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ── نافذة ── */
.dlg{margin:auto;inset:0;border:0;border-top:3px solid var(--teal);border-radius:var(--r);background:var(--bg);color:var(--ink);padding:34px 32px 30px;width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 40px 100px -30px rgba(0,0,0,.55)}
.dlg::backdrop{background:rgba(6,16,29,.66);backdrop-filter:blur(3px)}
.dlg[open]{animation:dlgIn .35s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dlg-x{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border:1px solid var(--rule);border-radius:var(--r);background:none;color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer}
.dlg-x:hover{color:var(--ink);border-color:var(--ink)}
.dlg-done{text-align:center;padding:12px 4px 4px}

/* ── تذييل مصرفي ── */
.foot{background:var(--navy);color:var(--on-navy-2);font-size:14px;padding:70px 0 34px}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid var(--navy-rule)}
.foot-brand p{margin-top:16px;max-width:24em;color:var(--on-navy-3);font-size:13.5px}
.foot h4{font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--on-navy-3);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--on-navy-2);transition:color .2s}
.foot a:hover{color:var(--on-navy)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:var(--on-navy-3)}
.foot-bot p{max-width:62em}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ── انتقال ناعم بين الصفحات (المتصفحات الداعمة) ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s var(--ease) both}
::view-transition-new(root){animation:vtIn .45s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
.btn:active{transform:translateY(1px) scale(.99)}

/* ── ظهور ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation:none!important}}

/* ═══ ضبط الأحجام والمسافات + ثبات مواقع المفاتيح ═══ */
body{font-size:15.5px;line-height:1.8}
.h1{font-size:clamp(34px,4.4vw,58px);line-height:1.18}
.h2{font-size:clamp(27px,3vw,40px);line-height:1.25}
.h3{font-size:clamp(21px,2vw,26px)}
.lede{font-size:clamp(15.5px,1.3vw,17.5px)}
.p{font-size:15.5px}
.over{margin-bottom:14px}
.sec{padding:72px 0}
@media(max-width:700px){.sec{padding:50px 0}}
.btn{padding:13px 22px;font-size:14.5px}
.btn-sm{padding:9px 15px;font-size:13.5px}
/* مفاتيح اللغة والإضاءة في المكان نفسه في اللغتين وكل الصفحات */
.util-in,.nav-in{direction:ltr}
[dir="rtl"] .aud,[dir="rtl"] .menu{direction:rtl}
.util-act{direction:ltr}
.util-act > a{direction:rtl}
.nav-in .brand{order:0}.nav-in .menu{order:1}.nav-in .nav-btns,.nav-in > .btn{order:2}
.nav-btns{display:flex;gap:10px;align-items:center}
.emp-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:var(--r);transition:border-color .2s,color .2s,background-color .2s}
.emp-btn:hover{border-color:var(--acc);color:var(--acc)}
.emp-btn svg{width:15px;height:15px}
@media(max-width:620px){.emp-btn{padding:8px 10px;font-size:12.5px}.emp-btn svg{display:none}.nav-btns{gap:6px}}
@media(max-width:430px){.nav-btns .brand-names{display:none}.nav-in .brand-names{font-size:11px}}
.foot{padding:52px 0 28px}
.foot-top{padding-bottom:32px}

/* ═══ تصغير إضافي ═══ */
body{font-size:15px}
.h1{font-size:clamp(30px,3.5vw,46px)}
.h2{font-size:clamp(24px,2.4vw,32px)}
.h3{font-size:clamp(19px,1.7vw,22px)}
.lede{font-size:clamp(15px,1.15vw,16.5px);line-height:1.8}
.p{font-size:15px}
.brand-names{font-size:13.5px}
.menu a{font-size:14px}

/* ── شريط علوي موضّح (v13) ── */
.aud a{gap:8px;padding:0 14px;font-size:13px}
.aud a svg{width:15px;height:15px;flex:none;opacity:.85}
.aud .au-t{font-weight:600}
.aud .au-s{font-size:11.5px;color:var(--on-navy-3);font-weight:400}
.aud .au-s::before{content:"·";margin-inline-end:8px;opacity:.6}
.aud a.on svg{color:var(--teal);opacity:1}
.aud a.on .au-s{color:var(--on-navy-2)}
.lang{font-family:var(--sans);font-size:12px;border:1px solid var(--navy-rule);border-radius:2px;padding:2px}
.lang button{padding:2px 9px;font-family:inherit;width:62px;text-align:center}
.th-btn{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;color:var(--on-navy-2);font-family:var(--sans);font-size:12px;width:86px;justify-content:flex-start}
.th-btn:hover,.th-btn:hover .icon-btn{color:var(--on-navy)}
.th-btn .icon-btn{pointer-events:none}
@media(max-width:860px){.aud .au-s{display:none}}
@media(max-width:520px){.th-l{display:none}.th-btn{width:auto}.lang button{width:auto;padding:2px 7px}.aud a{padding:0 9px;gap:6px}}
.aud .au-s{display:none}
@media(max-width:400px){.aud a{padding:0 6px;font-size:11.5px;gap:4px}.aud a svg{display:none}.lang button{padding:2px 5px;font-size:11px}.util-act{gap:8px}.util-in{gap:6px}}
