:root{
  /* هوية «طمأنينة» — تركوازي شفائي أعمق على قماشة هادئة أنقى */
  --bg:#f3f6f3;        /* أوف-وايت هادئ (أقل اصفرارًا) */
  --bg2:#e9eeea;       /* خلفية الحقول */
  --card:#ffffff;
  --card2:#e8f4ef;     /* بطاقة بلمسة نعناعية */
  --txt:#123029;       /* أخضر صنوبري غامق للنص */
  --mut:#5f746c;       /* نص ثانوي */
  --acc:#0e9585;       /* تركوازي شفائي جوهري (رئيسي) */
  --acc-d:#0a7064;     /* أغمق للتدرّج والتحويم */
  --acc-l:#38b7a7;     /* أفتح للتدرّجات واللمعان */
  --acc2:#d9843a;      /* كهرماني/طيني دافئ (الأسعار/الثانوي) */
  --acc2-d:#c26f28;
  --line:#e2e8e2;      /* حدود ناعمة أبرد */
  --danger:#d6453f;--warn:#d98a2b;--ok:#2e9e6b;
  --r:18px;
  --grad:linear-gradient(135deg,#13a998 0%,#0a7064 100%);      /* تدرّج التوقيع */
  --grad-soft:linear-gradient(160deg,#eef8f4 0%,#e2f1ea 100%); /* خلفيات ناعمة */
  --grad-warm:linear-gradient(135deg,#eaa250 0%,#d47a2f 100%); /* دافئ */
  --shadow:0 4px 16px rgba(15,80,70,.07), 0 1px 3px rgba(15,80,70,.05);
  --shadow-lg:0 18px 46px rgba(12,90,80,.16), 0 4px 12px rgba(12,90,80,.08);
  --shadow-acc:0 10px 26px rgba(14,149,133,.30);
  --ring:0 0 0 4px rgba(14,149,133,.16);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* أمان عام: يمنع خروج المحتوى يمينًا/يسارًا. نستخدم overflow-x:clip لا hidden عمدًا —
   "hidden" على محور واحد فقط يُجبر المتصفح (حسب مواصفة CSS) على ضبط المحور الآخر تلقائيًا
   على auto، فيتحوّل body/html إلى حاوية تمرير مستقلة، وهو ما يكسر position:fixed
   (الشريط السفلي .tabbar) في سفاري تحديدًا — يختفي أو يظهر نصفه عند التمرير. "clip" يمنع
   الفيض أفقيًا فقط بلا هذا الأثر الجانبي. */
html,body{height:100%;overflow-x:clip;max-width:100%}
body{font-family:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.1px}
#app{max-width:560px;margin:0 auto;min-height:100%;padding:0 16px 104px;position:relative}

/* ====== سطح مكتب: توسيع اللوحة وتحسين التنفّس ====== */
@media (min-width:900px){
  body{background:
    radial-gradient(1200px 480px at 100% -10%, #eaf5f1 0%, transparent 60%),
    radial-gradient(1000px 420px at -10% 0%, #f3ede1 0%, transparent 55%), var(--bg);}
  #app{max-width:720px;padding:0 24px 120px}
  .quickgrid{grid-template-columns:1fr 1fr 1fr}
  .quick.primary{grid-column:1/-1}
  .cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cardgrid .card{margin-bottom:0}
}

/* الترويسة العلوية العامة */
.topbar{position:sticky;top:0;z-index:20;background:rgba(243,246,243,.88);backdrop-filter:blur(12px) saturate(1.1);
  padding:14px 4px 12px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.topbar h1{font-size:1.05rem;font-weight:800}
.topbar .sub{font-size:.72rem;color:var(--mut);font-weight:400}

/* البطاقات */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h2{font-size:1.05rem;margin-bottom:10px}
.card h3{font-size:.95rem;margin-bottom:6px}
.muted{color:var(--mut)}
.small{font-size:.82rem}
.center{text-align:center}
.row{display:flex;gap:10px;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.tap{cursor:pointer;transition:.15s;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--card);box-shadow:var(--shadow)}
.tap:hover{border-color:var(--acc);background:var(--card2)}
.tap.sel{border-color:var(--acc);background:var(--card2)}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(160deg,var(--acc),var(--acc-d));color:#fff;border:none;border-radius:14px;
  padding:14px 18px;font-size:.98rem;font-weight:700;cursor:pointer;width:100%;font-family:inherit;transition:.15s;
  box-shadow:0 6px 16px rgba(18,152,138,.25)}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--acc);box-shadow:var(--shadow)}
.btn.ok{background:linear-gradient(160deg,#33ad78,#2e9e6b);box-shadow:0 6px 16px rgba(46,158,107,.25)}
.btn.danger{background:#fff;border:1px solid var(--danger);color:var(--danger);box-shadow:none}
.btn.warn{background:linear-gradient(160deg,#e6a13f,#d98a2b);box-shadow:0 6px 16px rgba(217,138,43,.25)}
.btn.sm{width:auto;padding:9px 14px;font-size:.85rem;box-shadow:none}

/* الحقول */
label{display:block;font-size:.85rem;color:var(--mut);margin:10px 0 4px}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px;font-size:1rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(18,152,138,.12)}
textarea{resize:vertical;min-height:80px}
.field-ico{position:relative}
.field-ico input{padding-inline-start:40px}
.field-ico .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:1.05rem}

/* الشرائح المجزّأة */
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:14px}
.seg button{flex:1;background:none;border:none;color:var(--mut);padding:9px;border-radius:10px;font-family:inherit;font-size:.9rem;cursor:pointer}
.seg button.on{background:var(--acc);color:#fff;font-weight:700}

/* الشارات */
.badge{display:inline-block;font-size:.72rem;padding:3px 10px;border-radius:20px;font-weight:600}
.badge.green{background:rgba(46,158,107,.14);color:#1f7a50}
.badge.blue{background:rgba(18,152,138,.14);color:#0d7d71}
.badge.orange{background:rgba(217,138,43,.16);color:#b06d1a}
.badge.red{background:rgba(214,69,63,.14);color:#b5352f}

.price-tag{color:var(--acc2);font-weight:800;font-size:1.15rem}

.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;flex:1;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.4rem;color:var(--acc)}
.stat span{font-size:.78rem;color:var(--mut)}

/* ====== بطاقات المدّة (خطوة الحجز الأولى) ====== */
.durgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:640px){.durgrid{grid-template-columns:1fr 1fr 1fr 1fr}}
.durcard{position:relative;cursor:pointer;border:1.5px solid var(--line);border-radius:18px;padding:18px 14px;background:var(--card);
  box-shadow:var(--shadow);transition:.15s;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.durcard:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.durcard.sel{border-color:var(--acc);background:var(--card2)}
.durcard .min{font-size:1.9rem;font-weight:800;color:var(--txt);line-height:1}
.durcard .min small{font-size:.72rem;font-weight:600;color:var(--mut);display:block;margin-top:2px}
.durcard .p{font-size:1.15rem;font-weight:800;color:var(--acc2)}
.durcard .rep{font-size:.7rem;color:var(--acc-d);background:rgba(18,152,138,.1);padding:2px 8px;border-radius:12px}
/* بطاقة خدمة باسم (الإرشاد الأكاديمي) */
.durcard.named{justify-content:flex-start;text-align:center}
.durcard .svcname{font-size:.92rem;font-weight:800;color:var(--txt);line-height:1.35;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.durcard.named .min{font-size:1.5rem}
/* شريط اختيار المسار */
.trackseg{margin-bottom:12px}
.trackseg button{font-size:.92rem;font-weight:700;padding:11px}

/* المواعيد */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
@media (min-width:640px){.slots{grid-template-columns:repeat(4,1fr)}}
.slot{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;cursor:pointer;font-size:.95rem;font-weight:700}
.slot:hover,.slot.sel{border-color:var(--acc);background:var(--card2);color:var(--acc-d)}
.slot .tag{display:block;font-size:.64rem;color:var(--mut);font-weight:600}
.slot.blocked{background:var(--card2,#f1f3f4);border-color:var(--line);color:var(--mut,#9aa4a2);
  cursor:not-allowed;opacity:.72;position:relative}
.slot.blocked .tag{color:var(--danger)}
.slot.blocked:hover{transform:none;box-shadow:none;border-color:var(--line);background:var(--card2,#f1f3f4);color:var(--mut,#9aa4a2)}
.prayerbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:rgba(14,149,133,.08);
  border:1px solid rgba(14,149,133,.22);border-radius:12px;padding:9px 12px;margin-bottom:12px;font-size:.72rem;color:var(--txt)}
.prayerbar span{font-weight:700;color:var(--acc-d)}
.prayerbar b{font-weight:600;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 7px;white-space:nowrap}
/* —— تقويم اختيار اليوم —— */
.caltoggle{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card2)}
.caltoggle button{border:none;background:transparent;padding:6px 14px;font-size:.8rem;font-weight:700;color:var(--acc-d);cursor:pointer}
.caltoggle button.on{background:var(--acc);color:#fff}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.daystrip::-webkit-scrollbar{display:none}
.daychip{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 8px;cursor:pointer;transition:.15s}
.daychip .dc-wd{font-size:.68rem;color:var(--mut);font-weight:600}
.daychip .dc-d{font-size:1.25rem;font-weight:800;color:var(--txt);line-height:1.1}
.daychip .dc-mo{font-size:.64rem;color:var(--mut)}
.daychip.on{background:var(--acc);border-color:var(--acc)}
.daychip.on .dc-wd,.daychip.on .dc-d,.daychip.on .dc-mo{color:#fff}
.seldate{font-weight:800;color:var(--acc-d);font-size:.95rem;text-align:center}
.chip.blk{background:#fff;border-color:var(--danger);color:var(--danger);font-size:.78rem;display:inline-flex;align-items:center;gap:6px}
.chip.blk .bx{cursor:pointer;font-weight:800}

/* التنقّل السفلي — يصير شريطًا عائمًا على سطح المكتب */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;max-width:560px;margin:0 auto;box-shadow:0 -4px 16px rgba(29,59,52,.05)}
.tabbar button{flex:1;background:none;border:none;color:var(--mut);padding:10px 4px 14px;font-family:inherit;font-size:.72rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.tabbar button.on{color:var(--acc)}
.tabbar button.on .ico{transform:translateY(-1px)}
.tabbar .ico{font-size:1.2rem}
@media (min-width:900px){
  .tabbar{max-width:520px;bottom:18px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
  .tabbar button{padding:12px 6px}
}

/* التنبيهات */
.alert{border-radius:12px;padding:12px;margin-bottom:12px;font-size:.88rem}
.alert.err{background:rgba(214,69,63,.1);color:#a5312c;border:1px solid rgba(214,69,63,.25)}
.alert.risk{background:rgba(217,138,43,.12);color:#9a5f16;border:1px solid rgba(217,138,43,.3)}
.alert.info{background:rgba(18,152,138,.1);color:#0d7d71;border:1px solid rgba(18,152,138,.22)}
.alert.ok{background:rgba(46,158,107,.12);color:#1f7a50;border:1px solid rgba(46,158,107,.28)}

.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;margin:24px auto}
@keyframes spin{to{transform:rotate(360deg)}}

.back{background:none;border:none;color:var(--acc);font-family:inherit;font-size:.9rem;cursor:pointer;padding:6px 0;margin-bottom:6px;font-weight:600}
.hero{text-align:center;padding:26px 12px 18px}
.hero h1{font-size:1.4rem;margin-bottom:8px}
.hero p{color:var(--mut);font-size:.92rem}
.pill{display:inline-block;background:rgba(18,152,138,.12);color:var(--acc-d);padding:5px 14px;border-radius:20px;font-size:.8rem;margin-bottom:14px;font-weight:600}
hr{border:none;border-top:1px solid var(--line);margin:12px 0}
.star{font-size:1.6rem;cursor:pointer;color:var(--line)}
.star.on{color:var(--warn)}

/* الصورة الشخصية */
.avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 3px 10px rgba(18,152,138,.25);flex-shrink:0}
.avatar-lg{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 22px rgba(18,152,138,.28);margin:0 auto 10px;display:block}

/* رأس التطبيق + إجراءات سريعة */
.appbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#eef7f3,var(--bg));
  padding:18px 6px 16px;margin:0 -16px 14px;padding-inline:16px;border-bottom:1px solid var(--line)}
.appbar h1{font-size:1.08rem;font-weight:800;line-height:1.4}
.appbar .sub{font-size:.78rem;color:var(--mut)}
.drhead{min-width:0;flex:1}
.drspec{margin-top:4px;line-height:1.4}
.drspec-lbl{display:block;font-size:.68rem;font-weight:600;color:var(--mut);letter-spacing:.2px;margin-bottom:1px}
.drspec-l{display:block;white-space:nowrap;font-size:clamp(.78rem,3.8vw,1.05rem)}
.drspec-l .c1{font-weight:800;color:var(--acc)}
.drspec-l .c2{font-weight:800;color:var(--acc2)}
@media (min-width:520px){.drspec-l{font-size:1.05rem}}

/* شارة التوثيق (الرخص الرسمية) */
.verify{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:11px 13px;
  background:linear-gradient(120deg,rgba(14,149,133,.10),rgba(14,149,133,.03));
  border:1px solid rgba(14,149,133,.24);border-radius:16px;box-shadow:var(--shadow)}
.verify-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(160deg,var(--acc),var(--acc-d));color:#fff;
  box-shadow:0 5px 14px rgba(14,149,133,.32)}
.verify-txt{flex:1;min-width:0}
.verify-txt>b{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.84rem;font-weight:700;color:var(--acc-d)}
.verify-seal{font-size:.62rem;font-weight:800;color:#fff;background:var(--acc);
  padding:2px 8px;border-radius:999px;letter-spacing:.5px}
.verify-nums{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.verify-nums span{font-size:.68rem;color:var(--mut);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;font-weight:600}
.verify-nums bdi{color:var(--txt);font-family:ui-monospace,"SF Mono",monospace;letter-spacing:.4px}
.verify-src{margin-top:6px;font-size:.66rem;color:var(--mut);opacity:.9}

/* موافقة الدفع على السياسة */
.consent{display:flex;gap:9px;align-items:flex-start;text-align:right;margin:14px 2px 2px;
  padding:11px 12px;background:rgba(14,149,133,.06);border:1px solid rgba(14,149,133,.22);border-radius:13px}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--acc)}
.consent span{font-size:.82rem;line-height:1.5;color:var(--txt)}
.consent a{color:var(--acc);font-weight:700;text-decoration:underline}
.consent-hint{margin:0;opacity:.85}

/* بوابة الموافقة قبل الحجز */
.bookgate{border:1.5px solid rgba(217,132,58,.45);background:linear-gradient(120deg,rgba(217,132,58,.08),rgba(217,132,58,.02))}
.bg-head{display:flex;gap:11px;align-items:center}
.bg-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(160deg,var(--acc2),var(--acc2-d,#c26f28));color:#fff}
.durgrid.locked{opacity:.5;filter:grayscale(.3);pointer-events:none;position:relative}
.bookgate.shake{animation:shakeX .45s}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* نافذة السياسة المنبثقة */
body.modal-open{overflow:hidden}
.modal-ov{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(18,48,41,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.modal-ov.show{opacity:1}
@media(min-width:640px){.modal-ov{align-items:center;padding:20px}}
.modal-sheet{position:relative;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:22px 22px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);
  transform:translateY(24px);transition:transform .25s;overflow:hidden}
.modal-ov.show .modal-sheet{transform:translateY(0)}
@media(min-width:640px){.modal-sheet{border-radius:22px}}
.modal-x{position:absolute;top:12px;left:12px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;
  background:var(--bg2,#f0f5f2);color:var(--txt);font-size:1rem;cursor:pointer;line-height:1}
.modal-x:hover{background:var(--line)}
.modal-body{overflow-y:auto;padding:20px 16px 6px;-webkit-overflow-scrolling:touch}
.modal-body .polcard{box-shadow:none;padding:0;margin:0;border:none}
.modal-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.modal-foot .btn{width:100%}
.modal-foot .consent{margin:0 0 10px}

/* صفحة السياسة */
.polcard{text-align:right}
.pol-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.pol-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(160deg,var(--acc),var(--acc-d));color:#fff}
.pol-head h2{font-size:1.15rem;margin:0}
.pol-intro{font-size:.9rem;color:var(--txt);line-height:1.7}
.pol-principle{background:var(--bg2,#f6faf8);border-radius:12px;padding:11px 13px;margin:12px 0}
.pol-principle b{color:var(--acc-d);display:block;margin-bottom:3px}
.pol-principle p{margin:0;font-size:.85rem;line-height:1.7}
.pol-grid{display:grid;gap:12px;margin:14px 0}
@media(min-width:640px){.pol-grid{grid-template-columns:1fr 1fr}}
.pol-box{border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.pol-box h3{display:flex;align-items:center;gap:6px;font-size:.9rem;margin:0 0 8px}
.pol-box.ok{border-color:rgba(14,149,133,.35);background:rgba(14,149,133,.04)}
.pol-box.ok h3{color:var(--acc-d)}
.pol-box.no{border-color:rgba(217,132,58,.4);background:rgba(217,132,58,.05)}
.pol-box.no h3{color:var(--acc2-d,#c26f28)}
.pol-box ul{margin:0;padding-inline-start:18px}
.pol-box li{font-size:.82rem;line-height:1.7;margin-bottom:4px}
.pol-sec{margin-top:10px}
.pol-sec b{color:var(--acc-d)}
.pol-sec p{margin:3px 0 0;font-size:.85rem;line-height:1.7}
.pol-note{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}

/* موافقات السياسة (لوحة الدكتور) */
.conlist{display:flex;flex-direction:column;gap:8px}
.conrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.conproof{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.proof .rs-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:.8rem;border-bottom:1px solid var(--line)}
.proof .rs-k{color:var(--mut)}
.proof .rs-v{font-weight:600;text-align:left;word-break:break-word;max-width:60%}

/* روابط قانونية */
.side-link{background:none;border:none;color:var(--mut);font-size:.78rem;text-decoration:underline;
  cursor:pointer;padding:8px 0;font-family:inherit;width:100%}
.side-link:hover{color:var(--acc)}
.home-legal{text-align:center;margin:10px 0 4px}
@media (min-width:900px){.appbar{margin-inline:-24px;padding-inline:24px;border-radius:0 0 24px 24px}}

.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.quick{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;transition:.15s;
  min-height:104px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.quick:hover{border-color:var(--acc);transform:translateY(-2px)}
.quick .ico{font-size:1.6rem}
.quick b{font-size:.98rem}
.quick .small{color:var(--mut)}
.quick.primary{background:linear-gradient(150deg,#16a596,var(--acc-d));border:none;color:#fff;grid-column:1/-1;
  min-height:auto;flex-direction:row;align-items:center;gap:14px;box-shadow:0 10px 24px rgba(18,152,138,.28)}
.quick.primary .ico{font-size:2rem}
.quick.primary .small{color:rgba(255,255,255,.85)}

.approw{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px;margin-bottom:8px;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.approw:hover{border-color:var(--acc);background:var(--card2)}
.approw .lead{width:42px;height:42px;border-radius:13px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.approw .body{flex:1;min-width:0}
.approw .body b{display:block;font-size:.95rem}
.approw .chev{color:var(--mut);font-size:1.3rem}

.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-bottom:4px}
.hscroll::-webkit-scrollbar{display:none}
.tcard{flex:0 0 148px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.tcard:hover{border-color:var(--acc);background:var(--card2)}
.tcard .dur{font-size:.75rem;color:var(--mut)}
.tcard .p{font-size:1.3rem;font-weight:800;color:var(--acc2);margin-top:8px}

.sectionTitle{font-size:.9rem;font-weight:800;margin:16px 2px 8px;color:var(--txt)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:.82rem;color:var(--acc-d);cursor:pointer;transition:.15s}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* ====== مفتاح تبديل (متاح/مشغول) ====== */
.switch{position:relative;display:inline-block;width:52px;height:30px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:#c9d2ce;border-radius:20px;transition:.2s}
.switch .track:before{content:"";position:absolute;height:24px;width:24px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track:before{transform:translateX(-22px)}

/* صف نافذة وقت العمل */
.winrow{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.winrow-time{display:flex;align-items:center;gap:8px}
.winrow input[type=time]{flex:1;background:#fff}
.winrow .to{color:var(--mut);font-size:.85rem}
.winrow .rm{background:#fff;border:1px solid var(--danger);color:var(--danger);border-radius:10px;width:38px;height:42px;cursor:pointer;flex-shrink:0;font-size:1.1rem}
.winrow .wdays{gap:5px}
.chip.xs{padding:4px 9px;font-size:.72rem;border-radius:14px}

.list-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}
.list-item .grow b{font-size:.95rem}
.iconbtn{background:#fff;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;cursor:pointer;font-size:1rem;flex-shrink:0}
.iconbtn.del{border-color:var(--danger);color:var(--danger)}
.iconbtn:hover{background:var(--card2)}

.notice{display:flex;gap:10px;align-items:flex-start;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:.85rem;margin-bottom:12px}
.notice .i{font-size:1.1rem}

/* ============================================================
   تخطيط سطح المكتب — شريط جانبي يملأ العرض (يعالج الفراغ الأبيض)
   ============================================================ */
.shell{min-height:100%}
#side{display:none}

@media (min-width:1000px){
  body{background:
    radial-gradient(1200px 520px at 100% -8%, #e7f3ef 0%, transparent 58%),
    radial-gradient(1000px 460px at -8% 4%, #f2ebdf 0%, transparent 52%), var(--bg);}
  .shell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:264px 1fr;gap:34px;padding:0 32px;align-items:start}
  /* المحتوى يملأ العمود ولا يبقى صغيرًا في المنتصف */
  #app{max-width:none;margin:0;padding:26px 0 64px;min-height:100vh}
  /* البطاقات المستقلة (النماذج/اللوحة) بعرض مريح للقراءة، وسط العمود */
  #app > .card{max-width:720px;margin-inline:auto}
  #app > .durgrid,#app > .quickgrid,#app > .notice,#app > .cardgrid{max-width:940px;margin-inline:auto}
  .hero{max-width:720px;margin-inline:auto}
  .tabbar{display:none}                /* نستبدله بالشريط الجانبي */

  /* الشريط الجانبي */
  #side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:26px 0 22px}
  .side-brand{display:flex;align-items:center;gap:12px;padding:6px 14px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .side-brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 10px rgba(18,152,138,.25)}
  .side-brand b{font-size:.98rem;line-height:1.35;display:block}
  .side-brand span{font-size:.74rem;color:var(--mut)}
  .side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
  .side-nav button{display:flex;align-items:center;gap:12px;background:none;border:none;font-family:inherit;
    color:var(--txt);font-size:.98rem;font-weight:600;padding:13px 16px;border-radius:14px;cursor:pointer;text-align:start;transition:.15s;width:100%}
  .side-nav button .ico{font-size:1.25rem;width:24px;text-align:center}
  .side-nav button:hover{background:var(--card2)}
  .side-nav button.on{background:linear-gradient(160deg,var(--acc),var(--acc-d));color:#fff;box-shadow:0 8px 18px rgba(18,152,138,.28)}
  .side-foot{padding-top:12px;border-top:1px solid var(--line)}
  .side-foot .btn{width:100%}
}

/* شاشات واسعة جدًا: صفّان للقوائم */
@media (min-width:1000px){
  .cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .cardgrid .card{margin-bottom:0}
}

/* ============================================================
   تحسينات تجربة سطح المكتب (≥1000px)
   ============================================================ */
@media (min-width:1000px){
  /* 1) لا تُكرَّر صورة الدكتور: تكفي صورة الشريط الجانبي */
  .appbar .avatar{display:none}

  /* 2) الشريط الجانبي: العناصر بالأعلى، الزر بالأسفل، وبينهما بطاقة مزايا تملأ الفراغ */
  .side-nav{flex:0 0 auto}
  .side-info{display:flex;flex-direction:column;gap:10px;margin:16px 2px 0;padding:16px;
    background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  .side-info .si{display:flex;align-items:center;gap:10px;font-size:.83rem;font-weight:600;color:var(--mut)}
  .side-info .si span{font-size:1.1rem;flex-shrink:0}
  .side-foot{margin-top:auto}

  /* 3) بطاقة "ابدأ جلستك" والبطاقات السريعة: المحتوى متقارب بلا فراغ في المنتصف */
  .quick.primary{justify-content:flex-start}
  .quick{justify-content:flex-start;min-height:auto;gap:8px}

  /* 4) خطوات "كيف تعمل؟" كثلاثة أعمدة رأسية مرتّبة */
  .steprow{max-width:940px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .steprow .approw{flex-direction:column;align-items:center;text-align:center;gap:12px;margin:0;padding:24px 16px}
  .steprow .approw .lead{width:48px;height:48px;font-size:1.3rem}
  .steprow .approw .body{flex:0 1 auto}
  .sectionTitle{max-width:940px;margin-inline:auto}
}

/* ============================================================
   ميزات لوحة المستشار: ترويسة الدكتور، مسار الحالة، الدردشة، الفيديو
   ============================================================ */
/* —— ترويسة الدكتور بصورته (كل صفحات لوحته) —— */
.chero{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#12988a,#0d7d71);color:#fff;
  padding:16px;margin:0 -16px 16px;border-radius:0 0 22px 22px;box-shadow:0 8px 22px rgba(13,125,113,.28)}
.chero img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85);flex-shrink:0}
.chero-t{flex:1;min-width:0}
.chero-t h1{font-size:1.15rem;font-weight:800;line-height:1.3}
.chero-t .sub{font-size:.8rem;opacity:.9}
.chero .btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.chero .btn.ghost:hover{background:rgba(255,255,255,.26)}
@media (min-width:1000px){ .chero{margin-inline:-24px;padding-inline:24px} }

/* —— مسار الحالة (شريط المراحل) —— */
.stepper{display:flex;align-items:center;margin:14px 0 6px;overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper.cancelled{justify-content:center;padding:6px 0}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;min-width:56px}
.step .dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:2px solid var(--line);font-size:1rem;color:var(--mut);transition:.2s}
.step span{font-size:.68rem;color:var(--mut);font-weight:600;text-align:center}
.step.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.step.done span{color:var(--txt)}
.step.now .dot{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 0 0 4px rgba(18,152,138,.16);animation:pulse 1.6s ease-in-out infinite}
.step.now span{color:var(--acc-d);font-weight:800}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(18,152,138,.05)}}
.stepper .bar{flex:1;height:3px;background:var(--line);margin:0 2px;margin-bottom:18px;border-radius:2px;min-width:14px}
.stepper .bar.done{background:var(--ok)}
.casecard .cap{margin:2px 0 10px;font-weight:700}
.case-actions{display:flex;flex-wrap:wrap;gap:8px}
.case-actions .btn.sm{width:auto}
.nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  background:var(--danger);color:#fff;border-radius:10px;font-size:.7rem;font-weight:700;margin-inline-start:4px}

/* —— طبقة عائمة عامة (Overlay/Modal) —— */
.ov{position:fixed;inset:0;z-index:100;background:rgba(15,32,28,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.ov-card{background:var(--card);border-radius:20px;width:100%;max-width:460px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.ov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--card2)}
.ov-head b{font-size:1rem}
.ov-x{background:none;border:none;color:var(--mut);font-size:1rem;font-weight:700;cursor:pointer;padding:6px 10px;border-radius:10px}
.ov-x:hover{background:var(--bg2);color:var(--danger)}
.ov-pad{padding:16px;overflow-y:auto}

/* —— الدردشة —— */
.chat-card{height:88vh;max-height:720px}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.chat-empty{margin:auto;color:var(--mut);font-size:.85rem;text-align:center}
.msg{display:flex}
.msg.me{justify-content:flex-start}
.msg:not(.me){justify-content:flex-end}
.bubble{max-width:78%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 12px;
  font-size:.92rem;line-height:1.6;position:relative;box-shadow:var(--shadow);word-break:break-word}
.msg.me .bubble{background:var(--card2);border-color:rgba(18,152,138,.25)}
.bubble .mt{display:block;font-size:.62rem;color:var(--mut);margin-top:4px;text-align:start}
.bubble audio{max-width:220px;height:38px;margin-top:2px}
.chat-input{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.chat-input input{flex:1}
.chat-input .btn.sm{width:auto;flex-shrink:0}
.micbtn{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:1.15rem;cursor:pointer;transition:.15s}
.micbtn:hover{background:var(--card2)}
.micbtn.on{background:var(--danger);border-color:var(--danger);color:#fff;animation:pulse 1.2s infinite}
.rec-hint{min-height:0;padding:0 14px;text-align:center}
.rec-hint:not(:empty){padding:6px 14px}
.rec-hint .rlive{color:var(--acc-d);font-size:.8rem;font-weight:600}
.rec-hint .rerr{color:var(--danger);font-size:.8rem}

/* —— عدّاد الأحرف + تسجيل نموذج الحجز —— */
.charcount{text-align:left;font-size:.75rem;color:var(--muted);margin:-4px 2px 6px}
.ivrec{display:flex;align-items:center;gap:10px;margin:2px 0 2px}
.ivrec .micbtn{width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.ivrec-txt{font-size:.82rem;color:var(--muted);line-height:1.5}
.ivpreview{display:flex;align-items:center;gap:10px;margin:8px 0 2px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.ivpreview audio{flex:1;min-width:0;height:38px}
.ivpreview-x{flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--danger);
  border-radius:9px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer}
.ivpreview-x:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.rs-voice audio{height:36px;max-width:100%;vertical-align:middle}
.paid-note{display:flex;align-items:center;gap:8px;background:rgba(14,149,133,.10);color:var(--acc-d,#0b7d70);
  border:1px solid rgba(14,149,133,.28);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:.86rem;font-weight:600;line-height:1.5}

/* —— الفيديو —— */
.video-card{max-width:920px;width:96vw;height:86vh}
.jitsi{flex:1;width:100%;border:none;background:#0d1512}

/* —— لافتة "أضف اختصارًا للهاتف" —— */
.a2hs{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:90;
  display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);animation:a2hsUp .3s ease}
@keyframes a2hsUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.a2hs img{width:44px;height:44px;border-radius:12px;flex-shrink:0}
.a2hs-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2hs-t b{font-size:.9rem;line-height:1.3}
.a2hs-t span{font-size:.74rem;color:var(--mut);line-height:1.4}
.a2hs-go{background:linear-gradient(160deg,var(--acc),var(--acc-d));color:#fff;border:none;border-radius:12px;
  padding:10px 16px;font-weight:700;font-family:inherit;font-size:.85rem;cursor:pointer;flex-shrink:0;box-shadow:0 6px 16px rgba(18,152,138,.25)}
.a2hs-x{background:none;border:none;color:var(--mut);font-size:1rem;cursor:pointer;padding:6px 8px;flex-shrink:0}
.a2hs .shareico{display:inline-block;vertical-align:-3px;color:var(--acc-d)}
@media (min-width:1000px){ .a2hs{max-width:420px;left:auto;right:24px;bottom:24px} }


/* ===== ملخص الطلب للدكتور (بطاقة الحالة) ===== */
.reqsum{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--card2);overflow:hidden}
.reqsum>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;color:var(--acc-d);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;user-select:none}
.reqsum>summary::-webkit-details-marker{display:none}
.reqsum>summary::after{content:"▾";margin-inline-start:auto;color:var(--mut);transition:.2s}
.reqsum[open]>summary::after{transform:rotate(180deg)}
.reqsum .rs-paid{font-size:.72rem;font-weight:700;background:rgba(46,158,107,.16);color:#1f7a50;padding:3px 9px;border-radius:20px}
.reqsum .rs-urgent{font-size:.72rem;font-weight:700;background:rgba(217,138,43,.18);color:#b06d1a;padding:3px 9px;border-radius:20px}
.reqsum .rs-body{padding:4px 14px 14px;background:var(--card)}
.reqsum .rs-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.reqsum .rs-row:last-child{border-bottom:none}
.reqsum .rs-k{flex:0 0 130px;color:var(--mut);font-weight:600}
.reqsum .rs-v{flex:1;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.reqsum .rs-v a{color:var(--acc);text-decoration:none;font-weight:600}
.reqsum .rs-sep{height:1px;background:var(--line);margin:8px 0}
.reqsum .rs-empty{padding:8px 0}
@media (max-width:520px){ .reqsum .rs-row{flex-direction:column;gap:2px} .reqsum .rs-k{flex:none} }


/* ============================================================
   ✦ طبقة التحسين البصري «طمأنينة» v21 — تعمّق الهوية دون تغيير البنية
   ============================================================ */

/* خلفية محيطة ناعمة موحّدة على كل المقاسات */
body{background:
  radial-gradient(920px 400px at 100% -6%, #e2f2ec 0%, transparent 56%),
  radial-gradient(780px 360px at -8% 2%, #edf1e9 0%, transparent 52%),
  var(--bg);
  background-attachment:fixed}

/* تناسق طباعي أدق */
h1,h2,h3,.hero h1,.appbar h1,.chero-t h1,.topbar h1{font-weight:800;letter-spacing:-.3px;text-wrap:balance}
b,strong{font-weight:700}
.hero h1{font-size:1.55rem;font-weight:900;line-height:1.35}
.pill{background:rgba(14,149,133,.1);box-shadow:inset 0 0 0 1px rgba(14,149,133,.14)}

/* البطاقات: حواف أنعم وظلال طبقية وخط علوي رقيق */
.card{border-radius:var(--r);box-shadow:var(--shadow);border-color:var(--line);
  transition:box-shadow .25s ease, transform .25s ease}
.casecard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}

/* الأزرار: عمق ولمعان خفيف + وصول لوحة المفاتيح */
.btn{position:relative;overflow:hidden;border-radius:15px;letter-spacing:.1px;
  box-shadow:var(--shadow-acc);transition:transform .16s ease, box-shadow .25s ease, filter .2s ease}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(14,149,133,.34);filter:saturate(1.05)}
.btn:active{transform:translateY(0)}
.btn.ok{box-shadow:0 10px 26px rgba(46,158,107,.30)}
.btn.warn{box-shadow:0 10px 26px rgba(217,138,43,.30)}
.btn.ghost,.btn.danger{box-shadow:var(--shadow)}
.btn.ghost::after{display:none}
.btn.sm{box-shadow:none}
.btn.sm:hover{transform:translateY(-1px)}
.btn:focus-visible,.chip:focus-visible,.slot:focus-visible,.tap:focus-visible,
.durcard:focus-visible,.quick:focus-visible,.tcard:focus-visible,.approw:focus-visible,
.daychip:focus-visible,.abt-tile:focus-visible,.case-tile:focus-visible,.setile:focus-visible,
.doc-row:focus-visible,.side-nav button:focus-visible,.tabbar button:focus-visible,
.seg button:focus-visible,.iconbtn:focus-visible,.eyebtn:focus-visible,.caltoggle button:focus-visible,
.modal-x:focus-visible,.ov-x:focus-visible,.vid-ico:focus-visible,.doc-dl:focus-visible,
.pw-eye:focus-visible,.a2hs-x:focus-visible,.a2hs-go:focus-visible{outline:none;box-shadow:var(--ring)}

/* الحقول: تناسق مع النظام الجديد */
input,select,textarea{border-radius:13px;transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{box-shadow:var(--ring)}

/* الأسعار بتدرّج دافئ */
.price-tag,.durcard .p,.tcard .p{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* بطاقات قابلة للنقر: رفع لطيف وظل ملوّن عند التحويم */
.tap,.durcard,.quick,.tcard,.approw{transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease}
.tap:hover,.durcard:hover,.quick:hover,.tcard:hover,.approw:hover{box-shadow:var(--shadow-lg)}
.durcard:hover,.quick:hover,.tcard:hover{transform:translateY(-3px)}
.durcard.sel,.tap.sel,.chip.on{box-shadow:0 0 0 2px var(--acc), var(--shadow)}
.slot{transition:.18s ease}
.slot:hover,.slot.sel{transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--acc)}

/* الشارات: حدّ داخلي رقيق يعطي نظافة */
.badge{box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}

/* رأس التطبيق والدكتور: خلفية تدرّج ناعمة ذات عمق */
.appbar{background:var(--grad-soft);border-bottom-color:rgba(14,149,133,.14)}
.appbar h1{font-size:1.14rem}
.chero{background:var(--grad);box-shadow:0 12px 30px rgba(10,112,100,.32);position:relative;overflow:hidden}
.chero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 180px at 90% -30%, rgba(255,255,255,.22), transparent 60%);pointer-events:none}
.chero img{box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* بطاقة "ابدأ جلستك" الرئيسية: تدرّج التوقيع وتوهّج */
.quick.primary{background:var(--grad);box-shadow:var(--shadow-acc)}
.quick.primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,149,133,.38)}

/* توهّج ناعم حول صورة الدكتور */
.avatar,.avatar-lg{box-shadow:0 6px 18px rgba(14,149,133,.30);border-color:#fff}

/* التنقّل السفلي: مؤشّر نشِط ألطف */
.tabbar{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.1)}
.tabbar button{position:relative;transition:color .2s}
.tabbar button.on::before{content:"";position:absolute;top:5px;width:30px;height:3px;border-radius:3px;background:var(--acc)}
.tabbar button.on .ico{transform:translateY(-2px);transition:transform .2s}

/* الشريط الجانبي (سطح المكتب): تنشيط بتدرّج التوقيع */
@media (min-width:1000px){
  .side-nav button.on{background:var(--grad);box-shadow:var(--shadow-acc)}
  .side-nav button:not(.on):hover{background:var(--card2);transform:translateX(-2px)}
  .side-brand img{box-shadow:0 4px 14px rgba(14,149,133,.28)}
}

/* الطبقة العائمة: خلفية أعمق */
.ov{background:rgba(10,32,28,.5);backdrop-filter:blur(5px)}
.ov-card,.ov-head{border-radius:22px}
.ov-head{background:var(--grad-soft)}

/* فقاعات الدردشة الخاصة بي بتدرّج خفيف */
.msg.me .bubble{background:linear-gradient(160deg,#e8f4ef,#dcefe7);border-color:rgba(14,149,133,.22)}

/* السبينر بلون الهوية */
.spinner{border-top-color:var(--acc)}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .btn:hover,.durcard:hover,.quick:hover,.tcard:hover,.quick.primary:hover,.casecard:hover{transform:none}
}

/* ===== نظام الأيقونات الموحّد (SVG خطّي) ===== */
.ic-svg{display:inline-block;vertical-align:middle;flex:0 0 auto}
.ico{display:inline-flex;align-items:center;justify-content:center}
.ico .ic-svg{width:1.35em;height:1.35em}
.quick .ico .ic-svg{width:1.55rem;height:1.55rem}
.quick.primary .ico .ic-svg{width:1.9rem;height:1.9rem}
.tabbar .ico .ic-svg{width:1.35rem;height:1.35rem}
/* شريط بخمسة أزرار (لوحة الدكتور + «الرئيسية») — تصغير طفيف يمنع الالتفاف على الشاشات الضيقة */
.tabbar{overflow:hidden}                       /* لا يتمدّد الشريط أبدًا خارج الشاشة */
.tabbar button{min-width:0;overflow:hidden;text-align:center;line-height:1.25}
@media (max-width:400px){ .tabbar button{font-size:.63rem;padding-inline:1px;gap:2px} }
.side-nav button .ico .ic-svg{width:1.3rem;height:1.3rem}
.approw .lead .ic-svg{width:1.3rem;height:1.3rem;color:var(--acc)}
.side-info .si span .ic-svg{width:1.15rem;height:1.15rem;color:var(--acc)}
.step .dot .ic-svg{width:1.05rem;height:1.05rem}
.btn .ic-svg{width:1.15em;height:1.15em}

/* ===== حركة زر «ابدأ جلستك الآن»: نبض ناعم + لمعة تمرّ ===== */
.quick.primary{position:relative;overflow:hidden;animation:cta-breathe 3.6s ease-in-out infinite}
.quick.primary>*{position:relative;z-index:1}
.quick.primary::after{content:"";position:absolute;top:-10%;bottom:-10%;width:38%;left:-55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);pointer-events:none;animation:cta-shine 3.6s ease-in-out infinite}
.quick.primary .ico{animation:cta-icon 3.6s ease-in-out infinite}
.quick.primary:active{transform:translateY(1px) scale(.995)}
@keyframes cta-breathe{0%,100%{box-shadow:var(--shadow-acc)}50%{box-shadow:0 16px 38px rgba(14,149,133,.52)}}
@keyframes cta-shine{0%{left:-55%}55%,100%{left:135%}}
@keyframes cta-icon{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  .quick.primary,.quick.primary .ico{animation:none}
  .quick.primary::after{display:none}
}

/* ===== زر الحجز الملتصق (يبقى ظاهرًا بلا نزول على الجوال) ===== */
.svc-cta{margin-top:14px}
@media (max-width:999px){
  .svc-cta{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:15;padding:10px 0 4px}
  .svc-cta::before{content:"";position:absolute;inset:-8px -16px 0;z-index:-1;pointer-events:none;
    background:linear-gradient(to top,var(--bg) 62%,rgba(243,246,243,0))}
}

/* ===== شعار شاشة الدخول (محايد — ليس صورة الدكتور) + أيقونات أزرار التبديل ===== */
.auth-emblem{width:94px;height:94px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;box-shadow:var(--shadow-acc)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg button .ic-svg{width:1.05rem;height:1.05rem}

/* ===== لوحة إعدادات الدكتور (Hub) — بلاطات ===== */
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
@media (max-width:520px){ .setgrid{grid-template-columns:1fr} }
.setile{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 14px;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease}
.setile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--acc)}
.setile-ic{width:46px;height:46px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--card2);color:var(--acc-d)}
.setile-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.setile-t b{font-size:1rem}
.setile-chev{color:var(--mut);font-size:1.5rem;line-height:1}
.setile.warn{border-color:var(--danger)}
.setile.warn .setile-ic{background:rgba(214,69,63,.1);color:var(--danger)}

/* إرشاد تفعيل الإشعارات على آيفون (Safari لا يدعمها داخل التبويب) */
.ios-push{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--txt);font-size:.88rem;line-height:1.7}
.ios-push b{display:block;margin-bottom:4px}
.ios-push ol{margin:8px 0 6px;padding-inline-start:20px}
.ios-push li{margin-bottom:4px}
.ios-push .shareico{vertical-align:-3px;margin:0 2px;color:var(--acc)}

/* ===== حسابي (Hub) — شريط التعريف أعلى البلاطات ===== */
.me-id{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.me-id-av{width:52px;height:52px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card2);color:var(--acc-d)}
.me-id-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.me-id-t b{font-size:1.08rem}

/* ============================ صفحة «من نحن» ============================ */
.verify-tap{cursor:pointer;transition:.18s;position:relative}
.verify-tap:hover{border-color:var(--acc);box-shadow:var(--shadow)}
.verify-more{flex:none;align-self:center;font-size:.72rem;font-weight:700;color:var(--acc);white-space:nowrap}
.legal-dot{color:var(--mut);opacity:.5;margin:0 8px}

.abt-hero{text-align:center;padding:18px 14px 8px;background:var(--grad-soft);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:14px;box-shadow:var(--shadow)}
.abt-portrait{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;
  box-shadow:var(--shadow-lg);margin-bottom:10px}
.abt-hero h1{font-size:1.22rem;margin:0 0 4px;color:var(--txt);line-height:1.4}
.abt-role{font-size:.82rem;font-weight:700;color:var(--acc-d);margin-bottom:6px}
.abt-tag{font-size:.82rem;color:var(--mut);margin:0;max-width:32ch;margin-inline:auto}
.abt-verify{margin-top:0}

.abt-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:4px}
.abt-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 8px;
  text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:3px}
.abt-stat>span{color:var(--acc)}
.abt-stat b{font-size:.9rem;color:var(--txt)}
.abt-stat small{font-size:.66rem;color:var(--mut)}

.abt-intro p{font-size:.9rem;line-height:1.85;color:var(--txt);margin:0 0 10px}
.abt-intro p:last-child{margin-bottom:0}

.abt-svc-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.abt-svc-h>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--card2);color:var(--acc-d);flex:none}
.abt-svc-h b{font-size:.95rem;color:var(--txt)}
.abt-svc p{margin:0 0 10px}
.abt-chips{display:flex;flex-wrap:wrap;gap:6px}
.abt-chip{font-size:.72rem;color:var(--acc-d);background:var(--card2);border:1px solid var(--line);
  border-radius:20px;padding:5px 11px;line-height:1.4}

.abt-method .method-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.mstep{position:relative;font-size:.76rem;font-weight:700;color:var(--acc-d);background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.mstep:not(:last-child)::after{content:"‹";margin-inline-start:-2px;position:absolute;inset-inline-start:-11px;
  top:50%;transform:translateY(-50%);color:var(--acc);font-weight:900;font-size:1rem}
.mstep.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-acc)}

details.abt-acc{background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
details.abt-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 15px;font-size:.9rem;font-weight:700;color:var(--txt);user-select:none}
details.abt-acc>summary::-webkit-details-marker{display:none}
details.abt-acc>summary>span{color:var(--acc)}
details.abt-acc>summary .chev{margin-inline-start:auto;color:var(--mut);font-size:1.3rem;line-height:1;
  transition:transform .2s;transform:rotate(-90deg)}
details.abt-acc[open]>summary .chev{transform:rotate(90deg)}
.abt-list{margin:0;padding:2px 15px 15px;list-style:none;display:flex;flex-direction:column;gap:8px}
.abt-list li{position:relative;padding-inline-start:22px;font-size:.85rem;line-height:1.7;color:var(--txt)}
.abt-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--acc);opacity:.85}

.doc-card{padding:14px 15px}
.doc-list{display:flex;flex-direction:column;gap:8px}
.doc-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);text-decoration:none;transition:.16s}
.doc-row:hover{border-color:var(--acc);background:var(--card2);transform:translateX(-2px)}
.doc-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--card2);color:var(--acc-d)}
.doc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.doc-txt b{font-size:.86rem;color:var(--txt)}
.doc-open{flex:none;display:flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;
  color:var(--acc);white-space:nowrap}

.abt-cta{margin:16px 0 8px}
.abt-cta .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}

@media (min-width:640px){
  .abt-hero{padding:26px 20px 14px}
  .abt-portrait{width:112px;height:112px}
  .abt-hero h1{font-size:1.4rem}
}

/* —— من نحن: واجهة الأزرار (Hub) —— */
.abt-hero.compact{padding:16px 14px 12px}
.abt-hero.compact h1{font-size:1.12rem;margin-bottom:3px}
.abt-hero.compact .abt-portrait{width:78px;height:78px;margin-bottom:8px}
.abt-menu{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 0 4px}
@media (min-width:560px){.abt-menu{grid-template-columns:1fr 1fr}}
.abt-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  box-shadow:var(--shadow);font-family:inherit;transition:.16s}
.abt-tile:hover{border-color:var(--acc);background:var(--card2);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.abt-tile:active{transform:scale(.99)}
.abt-tile-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--grad-soft);color:var(--acc-d)}
.abt-tile-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.abt-tile-t b{font-size:.92rem;color:var(--txt)}
.abt-tile-t small{font-size:.72rem;color:var(--mut)}
.abt-tile-chev{flex:none;color:var(--mut);font-size:1.5rem;line-height:1}

/* —— عارض الوثائق داخل الموقع (صور) —— */
.doc-row{width:100%;font-family:inherit;text-align:start}
.doc-viewer{max-width:860px;height:92vh;max-height:none}
.doc-head-act{display:flex;align-items:center;gap:4px}
.doc-dl{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--acc);
  text-decoration:none;transition:.15s}
.doc-dl:hover{background:var(--bg2)}
.doc-img-scroll{flex:1;min-height:0;overflow:auto;background:var(--bg2);
  display:flex;align-items:flex-start;justify-content:center;padding:12px;-webkit-overflow-scrolling:touch}
.doc-img{width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow);background:#fff;cursor:zoom-in}
.doc-img.zoom{width:auto;max-width:none;min-width:200%;cursor:zoom-out}
.doc-frame-hint{text-align:center;padding:8px 10px;border-top:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;gap:5px}

/* —— خيار «ابقني مسجّلاً» في الدخول —— */
.remember-row{display:flex;align-items:center;gap:9px;margin:12px 2px 0;cursor:pointer;
  font-size:.82rem;color:var(--txt);line-height:1.5}
.remember-row input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--acc);cursor:pointer}
.remember-row span{flex:1}

/* —— زر إظهار/إخفاء الرقم السري —— */
.field-ico:has(.pw-eye) input{padding-inline-end:44px}
.pw-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--mut);cursor:pointer;padding:6px;border-radius:8px;
  display:grid;place-items:center;transition:.15s}
.pw-eye:hover{color:var(--acc);background:var(--bg2)}
.pw-eye.on{color:var(--acc)}

/* ============ الحالات: واجهة أزرار التصنيف (للدكتور) ============ */
.cases-hub{display:grid;grid-template-columns:1fr;gap:11px;margin-top:6px}
@media (min-width:560px){.cases-hub{grid-template-columns:1fr 1fr}}
.case-tile{display:flex;align-items:center;gap:14px;width:100%;text-align:start;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px;
  box-shadow:var(--shadow);font-family:inherit;transition:.16s;border-inline-start:5px solid var(--acc)}
.case-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.case-tile:active{transform:scale(.99)}
.case-tile-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:var(--card2);color:var(--acc-d)}
.case-tile-t{flex:1;min-width:0;font-size:1.08rem;font-weight:700;color:var(--txt);line-height:1.4}
.case-tile-n{flex:none;min-width:38px;height:38px;padding:0 10px;border-radius:12px;display:grid;place-items:center;
  font-size:1.25rem;font-weight:800;color:#fff;background:var(--acc)}
/* ألوان الأقسام */
.case-tile.g-live{border-inline-start-color:var(--danger)}
.case-tile.g-live .case-tile-ic{background:rgba(214,69,63,.12);color:var(--danger)}
.case-tile.g-live .case-tile-n{background:var(--danger)}
.case-tile.g-up{border-inline-start-color:var(--acc)}
.case-tile.g-pending{border-inline-start-color:var(--warn)}
.case-tile.g-pending .case-tile-ic{background:rgba(217,138,43,.14);color:var(--warn)}
.case-tile.g-pending .case-tile-n{background:var(--warn)}
.case-tile.g-done{border-inline-start-color:var(--ok)}
.case-tile.g-done .case-tile-ic{background:rgba(46,158,107,.12);color:var(--ok)}
.case-tile.g-done .case-tile-n{background:var(--ok)}
.case-tile.g-cancel{border-inline-start-color:var(--mut)}
.case-tile.g-cancel .case-tile-ic{background:var(--bg2);color:var(--mut)}
.case-tile.g-cancel .case-tile-n{background:var(--mut)}
/* عنوان القسم داخل شاشته */
.cases-grouptitle{display:flex;align-items:center;gap:9px;margin:6px 2px 12px;font-size:1.05rem;color:var(--txt)}
.cases-grouptitle b{flex:1}
.cases-grouptitle .cnt{flex:none;min-width:30px;height:30px;padding:0 9px;border-radius:10px;display:grid;
  place-items:center;font-weight:800;color:#fff;background:var(--acc)}
.cases-grouptitle.g-live .cnt{background:var(--danger)}
.cases-grouptitle.g-pending .cnt{background:var(--warn)} .cases-grouptitle.g-done .cnt{background:var(--ok)}
.cases-grouptitle.g-cancel .cnt{background:var(--mut)}

/* —— بطاقات الحالات المطويّة (للدكتور) + زر الرجوع —— */
.cases-back{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:1rem;font-weight:700;margin:2px 0 12px;padding:14px}
.cases-hint{flex-basis:100%;font-weight:400;margin-top:2px}
.casecard-col{padding:0;overflow:hidden}
.casecard-col>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:15px 16px;user-select:none}
.casecard-col>summary::-webkit-details-marker{display:none}
.casecard-sum-t{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.casecard-sum-t>div{min-width:0}
.casecard-sum-t b{font-size:1.02rem}
.casecard-col>summary .nbadge{flex:none}
.casecard-chev{flex:none;color:var(--mut);font-size:1.6rem;line-height:1;transition:transform .2s;transform:rotate(-90deg)}
.casecard-col[open]>summary{border-bottom:1px solid var(--line)}
.casecard-col[open]>summary .casecard-chev{transform:rotate(90deg)}
.casecard-col[open]>summary{background:var(--card2)}
.casecard-body{padding:14px 16px 16px}

/* قائمة حالات القسم: عمود واحد واضح */
.casestack{display:flex;flex-direction:column;gap:11px}
@media (min-width:720px){.casestack{max-width:680px;margin-inline:auto}}
.casestack .casecard{margin:0}

/* —— تعديل الموعد: المؤشرات —— */
.resched-badge{display:flex;align-items:center;gap:6px;background:rgba(217,132,58,.12);color:var(--acc2-d);
  border:1px solid rgba(217,132,58,.3);border-radius:10px;padding:8px 11px;font-size:.82rem;margin:0 0 10px}
.resched-badge b{font-weight:800}
.resched-chip{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:.66rem;font-weight:800;
  color:#fff;background:var(--acc2);border-radius:20px;padding:3px 8px}
.resched-hint{margin:10px 0 2px}

/* ============ العروض والتخفيضات ============ */
/* سعر مشطوب + الجديد + شارة نسبة (بطاقات العميل) */
/* ملاحظة: .durcard .p يستخدم background-clip:text مع لون شفّاف، لذا نفرض هنا لون التعبئة صراحةً */
.price-old{text-decoration:line-through;color:var(--mut);-webkit-text-fill-color:var(--mut);
  font-size:.7em;font-weight:600;margin-inline-end:7px;opacity:.95;background:none}
.price-new{color:var(--acc2-d);-webkit-text-fill-color:var(--acc2-d);font-weight:800;background:none}
.price-off{display:inline-block;margin-inline-start:6px;font-size:.58em;font-weight:800;color:#fff;
  -webkit-text-fill-color:#fff;background:var(--acc2)!important;background-clip:border-box;-webkit-background-clip:border-box;
  border-radius:20px;padding:2px 7px;vertical-align:middle}
/* لافتة العرض */
.promo-banner{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);
  background:var(--grad-warm);color:#fff;box-shadow:var(--shadow)}
.promo-banner svg,.promo-banner .ic-svg{color:#fff}
.promo-banner b{display:block;font-size:.95rem}
.promo-banner span{font-size:.8rem;opacity:.95}
.promo-banner .promo-pct{margin-inline-start:auto;font-size:1.15rem;font-weight:900;background:rgba(255,255,255,.22);
  border-radius:12px;padding:6px 10px}
/* لوحة الدكتور: العروض */
.promo-presets{display:flex;flex-wrap:wrap;gap:7px}
.promo-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.promo-list{display:flex;flex-direction:column;gap:9px}
.promo-row{border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;background:var(--bg)}
.promo-row.on{border-color:var(--acc2);background:rgba(217,132,58,.06)}
.promo-row-main{flex:1;min-width:0}
.promo-row-t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.promo-badge{font-size:.68rem;font-weight:800;color:#fff;background:var(--acc2);border-radius:20px;padding:2px 8px}
.promo-live{font-size:.66rem;font-weight:800;color:#fff;background:var(--ok);border-radius:20px;padding:2px 8px}
.promo-off{font-size:.66rem;font-weight:700;color:var(--mut);background:var(--bg2);border-radius:20px;padding:2px 8px}
.promo-row-act{display:flex;gap:6px;flex-wrap:wrap}
.btn.ghost.sm.danger{color:var(--danger)}

/* —— زر واتساب (تنبيه العميل) —— */
.btn.wa{background:#25D366;color:#fff;border:none;box-shadow:0 4px 12px rgba(37,211,102,.28)}
.btn.wa:hover{background:#1ebe5b}
.btn.wa .ic-svg{width:1.05rem;height:1.05rem}

/* —— الجلسة المرئية المدموجة داخل الموقع —— */
.vid-ov{padding:0;align-items:stretch;justify-content:stretch}
.vid-card{max-width:none;width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0}
.vid-head{background:var(--card2)}
.vid-actions{display:flex;align-items:center;gap:8px}
.vid-end{white-space:nowrap}
.vid-ico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:0;background:none;
  border-radius:10px;color:var(--acc);text-decoration:none;cursor:pointer;transition:.15s}
.vid-ico:hover{background:var(--bg2)}
.vid-frame{flex:1;width:100%;border:0;background:#000}

/* عدّاد الوقت المتبقّي في ترويسة البث */
.vid-clock{margin-inline-start:auto;margin-inline-end:8px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;font-weight:800;font-size:.95rem;letter-spacing:.5px;
  padding:5px 11px;border-radius:999px;background:rgba(14,149,133,.12);color:var(--acc-d);
  border:1px solid rgba(14,149,133,.25);transition:background .3s,color .3s,border-color .3s}
.vid-clock[hidden]{display:none}
.vid-clock.warn{background:rgba(217,138,43,.15);color:#a8621b;border-color:rgba(217,138,43,.4)}
.vid-clock.danger{background:rgba(214,69,63,.15);color:#b3332c;border-color:rgba(214,69,63,.45);
  animation:clockPulse 1s ease-in-out infinite}
@keyframes clockPulse{50%{opacity:.55}}

/* تنبيه قرب الانتهاء داخل شاشة البث */
.vid-toast{padding:11px 14px;font-size:.95rem;font-weight:600;text-align:center;
  background:rgba(217,138,43,.16);color:#8a4e12;border-bottom:1px solid rgba(217,138,43,.35)}
.vid-toast[hidden]{display:none}
.vid-toast.danger{background:rgba(214,69,63,.16);color:#9e2b25;border-bottom-color:rgba(214,69,63,.4)}
.vid-toast .ic-svg{vertical-align:-3px;margin-inline-end:4px}

/* بلاطة/ملاحظة وضع التجربة */
.dash-note.test{color:#a8621b;background:rgba(217,138,43,.12)}

/* ===== ملخّص الحالة داخل بطاقة الجلسة القادمة ===== */
.casebrief{margin:0 0 12px}
.casebrief .dsec-sum{padding:12px}
.casebrief .dsec-ic{width:36px;height:36px;border-radius:10px}
.casebrief .dsec-t b{display:block;font-size:.95rem}
.casebrief .dsec-t .small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.cb-row:last-child{border-bottom:0}
.cb-row span{color:var(--mut)}
.cb-row audio{max-width:190px}
.cb-txt{padding:9px 0;font-size:.95rem;line-height:1.8;white-space:pre-wrap}

/* ===== قائمة الجلسات القادمة (مرتّبة زمنيًا) — كل جلسة بطاقة مطويّة مستقلة ===== */
.upc{border-bottom:1px solid var(--line)}
.upc:last-child{border-bottom:0}
.upc-sum{display:flex;align-items:center;gap:10px;padding:11px 2px;cursor:pointer;list-style:none}
.upc-sum::-webkit-details-marker{display:none}
.upc-sum-t{flex:1;min-width:0}
.upc-when b{color:var(--acc-d);font-size:.92rem}
.upc-who{font-size:.95rem;margin-top:2px}
.upc-topic{margin-top:4px;font-size:.85rem;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upc-topic .ic-svg{vertical-align:-2px;margin-inline-end:3px}
.upc-chev{flex:0 0 auto;color:var(--mut);font-size:1.3rem;line-height:1;transition:transform .2s}
.upc[open] .upc-chev{transform:rotate(-90deg)}
.upc-body{padding:0 2px 12px}

/* ===== ترقيم تسلسلي للحجوزات (لوحة اليوم) — يوضّح ترتيبها زمنيًا دفعة واحدة ===== */
.ordnum{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;
  font-size:.78rem;font-weight:800;margin-inline-end:6px}

/* نقطة نابضة تُنبّه أن الجلسة القادمة مباشرة الآن — تظهر حتى والبطاقة مطويّة */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--danger);
  margin-inline-start:5px;box-shadow:0 0 0 3px rgba(214,69,63,.18);animation:pulse 1.4s ease-in-out infinite;vertical-align:middle}

/* ===== قوالب رسائل واتساب القابلة للتعديل (الإعدادات) ===== */
.watpl-item{padding:10px 0;border-bottom:1px solid var(--line)}
.watpl-item:last-child{border-bottom:0}
.watpl-item .between{margin-bottom:6px}
.watpl-item .between input{flex:1;min-width:0}   /* بلا هذا يرفض الحقل الانكماش فيدفع الصف خارج الشاشة على الجوال */
.watpl-item textarea{min-height:64px}

/* ===== خصوصية الأرقام (زر العين) ===== */
.privline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.eyebtn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  color:var(--mut);border-radius:99px;padding:6px 13px;font-family:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.eyebtn:hover{border-color:var(--acc);color:var(--acc-d)}
.eyebtn.shown{color:var(--acc-d);border-color:var(--acc)}
.eyebtn .ic-svg{width:1.05rem;height:1.05rem}
/* الأرقام المخفية: نقاط بتباعد مريح تُقرأ كحقل مستور لا كقيمة */
.dstat b,.stat b,.dsec-badge{letter-spacing:.5px}

/* ===== لوحة الدكتور: أقسام مطويّة (تبقى الصفحة قصيرة) ===== */
.dsec{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.dsec-sum{display:flex;align-items:center;gap:11px;padding:15px 14px;cursor:pointer;
  list-style:none;user-select:none;transition:background .15s}
.dsec-sum::-webkit-details-marker{display:none}
.dsec-sum:hover{background:var(--bg2)}
.dsec-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--card2);color:var(--acc-d)}
.dsec-t{flex:1;min-width:0}
.dsec-t b{font-size:1rem;display:block}
/* أي عنوان فرعي (اسم العميل/الوقت) داخل رأس بطاقة مطويّة ينزل تحت العنوان مباشرة، لا يتزاحم بجانبه بسطر واحد */
.dsec-t .small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* بيانات «الجلسة القادمة» (اسم العميل والوقت) — أحمر عريض بارز بطلب المالك */
.next-sess-sub{color:var(--danger);font-weight:800}
.dsec-badge{flex:0 0 auto;font-weight:800;font-size:1.15rem;color:var(--acc)}
.dsec-chev{flex:0 0 auto;color:var(--mut);font-size:1.5rem;line-height:1;transition:transform .2s}
.dsec[open] .dsec-chev{transform:rotate(-90deg)}
.dsec[open] .dsec-sum{border-bottom:1px solid var(--line)}
.dsec-body{padding:14px 14px 2px}

/* ===== لوحة الدكتور: أرقام مختصرة كبيرة الخط ===== */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media (max-width:360px){ .dgrid{grid-template-columns:1fr} }
.dstat{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 14px;text-align:center;box-shadow:var(--shadow)}
.dstat b{display:block;font-size:2.1rem;line-height:1.15;font-weight:800;color:var(--txt)}
.dstat span{display:block;margin-top:4px;font-size:.9rem;color:var(--mut)}
.dstat i{display:block;margin-top:6px;font-style:normal;font-size:.78rem;color:var(--acc-d);
  background:var(--bg2);border-radius:99px;padding:3px 9px}
.dstat.accent{border-color:var(--acc)}
.dstat.accent b{color:var(--acc)}
.sectionTitle .ic-svg{vertical-align:-4px;margin-inline-end:6px;color:var(--acc)}

/* ===== المحادثة المغلقة ===== */
.chat-closed{padding:14px 16px;background:var(--bg2);border-top:1px solid var(--line);
  color:var(--mut);font-size:.92rem;text-align:center;line-height:1.7}
.chat-closed .ic-svg{vertical-align:-4px;margin-inline-end:5px;color:var(--mut)}
.chat-closed .small{margin-top:4px;font-size:.83rem;opacity:.85}

/* ===== تقييم العميل بعد إرساله ===== */
.rated-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  background:rgba(46,158,107,.08);border-radius:12px;padding:9px 12px}
.rated-stars .star{font-size:1.15rem;color:var(--line);cursor:default}
.rated-stars .star.on{color:#f5a623}
.ok-txt{color:var(--ok);font-weight:700}

/* ===== صفحة تقييمات الدكتور ===== */
.rt-head{display:flex;flex-direction:column;gap:12px}
.rt-avg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rt-avg b{font-size:2.4rem;line-height:1;color:var(--acc-d)}
.rt-avg-stars .star,.rt-item-stars .star{font-size:1.1rem;color:var(--line)}
.rt-avg-stars .star.on,.rt-item-stars .star.on{color:#f5a623}
.rt-bars{display:flex;flex-direction:column;gap:6px}
.rt-bar{display:flex;align-items:center;gap:9px;font-size:.85rem}
.rt-n{flex:0 0 34px;color:var(--mut)}
.rt-track{flex:1;height:9px;border-radius:99px;background:var(--bg2);overflow:hidden}
.rt-fill{display:block;height:100%;border-radius:99px;background:#f5a623;transition:width .4s ease}
.rt-c{flex:0 0 24px;text-align:end;color:var(--mut)}
.rt-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.rt-comment{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:.93rem;line-height:1.7}

/* ===== نافذة رسالة واتساب للعميل ===== */
.wa-to{background:var(--bg2);border-radius:12px;padding:9px 12px;margin-bottom:4px;font-size:.93rem}
.wa-quick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.wa-quick .chip{cursor:pointer;background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:7px 13px;font-size:.86rem;transition:.15s;user-select:none}
.wa-quick .chip:hover{border-color:#25d366;color:#128c4b;background:rgba(37,211,102,.08)}
#wa_text{min-height:120px;line-height:1.7}
#waCount{text-align:end;margin-top:4px}
/* شريط المساعدة (يظهر بعد 10ث لو لم تظهر الصورة) */
.vid-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;
  background:#3b2a12;color:#ffd9a0;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.08)}
.vid-help[hidden]{display:none}
.vid-help .btn{width:auto;flex:0 0 auto}

/* —— لوحة اليوم: صندوق بدء البث —— */
.dash-live{margin-top:12px}
.dash-note{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--mut);line-height:1.5;
  background:var(--bg2);border-radius:12px;padding:9px 11px;margin-bottom:10px}
.dash-note.ok{color:#2e9e6b;background:rgba(46,158,107,.10)}
.dash-note .ic-svg{flex:0 0 auto}
.dash-live-btns{display:flex;flex-direction:column;gap:9px}
.dash-live-btns .btn{width:100%}
.btn.big{font-size:1.12rem;padding:16px 18px;font-weight:800}

/* ── أسئلة شائعة داخل «من نحن» — أصناف خاصة لا تتقاطع مع أي عنصر قائم ── */
.faq-wrap{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--acc);box-shadow:var(--shadow)}
.faq-item summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;
  color:var(--txt);font-size:.98rem;line-height:1.65;display:flex;align-items:center;gap:.6rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-inline-start:auto;color:var(--acc);
  font-size:1.4rem;font-weight:400;line-height:1;transition:transform .25s;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-ans{padding:0 16px 15px;color:var(--mut);line-height:1.95;font-size:.92rem;white-space:pre-line}