/* SHADAN MEDICAL — Clinical Luxe design system v0.2.0
   Inspired by the approved Dehghan v0.2.3 blueprint's design principles,
   NOT its barber-specific colors, imagery or product behavior.
   Baseline functionality remains in style.css / JS. */
:root {
  --ink:#162849; --ink2:#5d7190;
  --teal:#3165cf; --teal-dark:#244dae;
  --navy:#142653; --paper:#ffffff; --bg:#f2f5fb;
  --line:#e1e8f4; --soft:#f1f5ff;
  --gold:#7765dd; --red:#b63857;
  --shadow:0 20px 60px rgba(22,42,88,.075);
  --sh-midnight:#101d43; --sh-deep:#152c60; --sh-blue:#3569d9;
  --sh-blue-dark:#234eaa; --sh-blue-pale:#eaf1ff;
  --sh-violet:#7060d0; --sh-violet-pale:#f0edff;
  --sh-mint:#18a98d; --sh-mint-pale:#e2f8f2;
  --sh-canvas:#f2f5fb; --sh-border:#e0e8f4;
  --sh-focus:#617ce5; --sh-muted:#627491;
  --sh-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Vazirmatn','Noto Sans Arabic',Tahoma,'Segoe UI',sans-serif;
  color:#162849;
}
body,button,input,select,textarea{font-family:'Vazirmatn','Noto Sans Arabic',Tahoma,'Segoe UI',sans-serif}
body{background:var(--sh-canvas);background-image:radial-gradient(ellipse at 0% 20%,#e5ecff90,transparent 34%),radial-gradient(ellipse at 100% 65%,#dff8f35e,transparent 32%);color:var(--ink)}
::selection{background:#d3e0ff;color:#152653}
:focus-visible{outline:3px solid var(--sh-focus);outline-offset:3px}
p{color:var(--ink2)}
.container{max-width:1190px}
/* Global visual grammar */
.brand{gap:12px}
.brand-icon{height:47px;width:47px;border-radius:17px;background:linear-gradient(155deg,#386edf 0%,#2148a3 100%);color:#fff;box-shadow:0 9px 20px rgba(50,99,210,.2);display:grid;place-items:center;position:relative;overflow:hidden}
.brand-icon:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,#ffffff41,transparent 58%)}
.brand-icon svg{position:relative;width:25px;height:25px}
.brand b{color:var(--sh-midnight);font-size:23px;letter-spacing:-.7px}
.brand small{color:#7586a5;font-size:11px;letter-spacing:0}
.eyebrow{color:#667db2;letter-spacing:2.2px;font-size:10px}
.site-header{height:79px;background:#ffffffef;border-bottom:1px solid #e1e8f2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header-note{color:#58708e;font-weight:700;background:#f0f5ff;border:1px solid #e0e9fb;padding:9px 14px;border-radius:999px}
.pulse{background:var(--sh-mint);box-shadow:0 0 0 5px #d9f8ed}
.primary-button{background:linear-gradient(110deg,#346bd9,#4c68d9 68%,#665dd5);box-shadow:0 12px 26px rgba(53,100,209,.2);color:white;border-radius:14px;min-height:53px;font-size:13px;letter-spacing:0;transition:transform .23s var(--sh-ease),box-shadow .23s var(--sh-ease),filter .2s}
.primary-button:hover:not(:disabled){background:linear-gradient(110deg,#285fc8,#365bc7 70%,#554fc2);box-shadow:0 15px 30px rgba(45,91,196,.29);transform:translateY(-2px)}
.light-button{background:#f2f6ff;border:1px solid #dce6f8;color:#2e51a6;border-radius:13px;min-height:45px}
.light-button:hover:not(:disabled){background:#e8efff;border-color:#bfceef}
button:disabled{opacity:.45}
.panel{border:1px solid var(--sh-border);border-radius:26px;box-shadow:0 22px 56px rgba(19,45,93,.065)}
.demo-notice{border:1px solid #dce6fa;background:#f6f9ff;color:#556b8b;border-radius:13px;padding:12px 17px;line-height:1.8;box-shadow:none}
.demo-notice strong{color:#3957a0}
.toast{background:#152b5e;color:#fff;box-shadow:0 14px 36px rgba(12,32,74,.28);border-radius:13px}
/* Customer: deliberately dramatic deep-blue stage + clinical-white interaction card */
.customer-page .content{padding-top:21px;padding-bottom:58px}
.customer-page .demo-notice{margin-bottom:16px;font-size:10.5px}
.customer-page .section-top{background:radial-gradient(circle at 4% 80%,#6d60ba56,transparent 40%),radial-gradient(circle at 90% 8%,#17b6ad42,transparent 30%),linear-gradient(124deg,#192b60 0%,#12224c 48%,#0e1b3c 100%);border:1px solid #2b4374;border-radius:30px 30px 25px 25px;min-height:258px;padding:34px 47px 62px;align-items:flex-start;position:relative;isolation:isolate;overflow:hidden;color:#fff;box-shadow:0 24px 60px rgba(19,36,81,.17)}
.customer-page .section-top:before{content:'';pointer-events:none;position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid #b6c7f31e;left:-105px;top:-170px;box-shadow:0 0 0 52px #ffffff05,0 0 0 106px #ffffff03;z-index:-1}
.customer-page .section-top:after{content:'✚';position:absolute;left:65px;bottom:12px;font-size:130px;line-height:1;font-weight:100;color:#ffffff0b;transform:rotate(-11deg);pointer-events:none}
.customer-page .section-top .eyebrow{color:#b2c5ff;font-size:10px;letter-spacing:2.1px}
.customer-page .section-top h1{color:#fff;margin:12px 0 8px;font-size:clamp(30px,3.2vw,43px);letter-spacing:-1.25px;line-height:1.65}
.customer-page .section-top h1 em{font-style:normal;background:linear-gradient(90deg,#adf3e6 6%,#c7d8ff 56%,#c5b9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.customer-page .section-top p{color:#c0d0ec;font-size:12px;max-width:550px;line-height:2}
.hero-features{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-features span{font-size:10px;padding:6px 11px;border:1px solid #ffffff20;background:#ffffff0a;border-radius:999px;color:#dce6ff}
.customer-page .progress{text-align:left;padding-top:11px;min-width:168px}
.customer-page .progress-label{color:#d0dcff;font-size:11px}
.customer-page .progress-lines{gap:7px;margin-top:15px}
.customer-page .progress-lines i{height:7px;width:35px;background:#ffffff28;border-radius:99px}
.customer-page .progress-lines i.active{background:linear-gradient(90deg,#8af0e0,#99aaff);width:50px;box-shadow:0 0 15px #98cfff50}
.customer-page .progress-lines i.done{background:#58bdb5}
.customer-page .customer-grid{position:relative;margin-top:-33px;gap:22px;grid-template-columns:minmax(0,1.075fr) minmax(300px,.925fr);align-items:start}
.customer-page .form-side,.customer-page .info-side{min-width:0}
.customer-page .step{background:#fff;padding:clamp(25px,3.8vw,47px);min-height:500px;box-shadow:0 23px 65px rgba(22,41,87,.12);border:1px solid #e7ecf5;border-top:3px solid #a1c3fb;animation:sh-enter .45s var(--sh-ease) both}
.customer-page .step-header .step-number,.customer-page .step-number{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#edf2ff;color:#315db8;border:1px solid #dfe7ff;padding:5px 13px;font-size:10px;line-height:1.7}
.customer-page .step-header .step-number:before,.customer-page .step-number:before{content:'';width:6px;height:6px;border-radius:50%;background:#5f78d9}
.customer-page .step-header h2{color:#142950;font-size:clamp(24px,2.8vw,34px);line-height:1.7;letter-spacing:-.9px;margin:20px 0 8px}
.customer-page .step-header p{color:#637691;font-size:12px;max-width:540px;line-height:2.1}
.customer-page label{color:#344765;font-weight:800;font-size:12px}
.customer-page label input:not([type=file]),.customer-page label textarea,.admin-page label textarea{background:#f9fbff;border-color:#dce6f4;border-radius:14px;color:#17294a;font-size:13px}
.customer-page label input:not([type=file]){min-height:53px;padding:13px 17px}
.customer-page label input:not([type=file]):hover,.customer-page label textarea:hover{border-color:#becfed}
.customer-page label input:not([type=file]):focus,.customer-page label textarea:focus,.admin-page label textarea:focus{border-color:#7898e2;background:#fff;box-shadow:0 0 0 4px #e6edff}
.customer-page textarea{min-height:165px;resize:vertical;max-height:400px}
.customer-page .step .primary-button{margin-top:15px}
.customer-page .privacy-caption{font-size:10px;color:#7589a5;padding-top:20px;border-top:1px solid #edf1f7}
.customer-page .privacy-caption span{color:#5c76cf}
.customer-page .back-link{color:#355ebc;background:#f0f5ff;border-radius:10px;padding:7px 13px;margin-bottom:22px}
.customer-page .back-link:hover{background:#e8f0ff}
.customer-page .upload-zone{background:linear-gradient(135deg,#f4f8ff,#f6f9ff 60%,#f0f8fa);border:1.5px dashed #b6c8ec;border-radius:19px;color:#395ab4;min-height:136px;transition:background .18s,border-color .18s}
.customer-page .upload-zone:hover,.customer-page .upload-zone:focus-within{background:#edf3ff;border-color:#718dd8}
.customer-page .upload-symbol{background:#e2eaff;color:#3b67c7;border-radius:13px;width:36px;height:36px;display:grid;place-items:center;font-size:24px;margin-bottom:4px}
.customer-page .upload-zone small{color:#7286a5}
.customer-page .textarea-meta{color:#8193ac}
.file-pill{background:#ebf1ff;color:#3e5681;border:1px solid #dce6ff;border-radius:10px}
.file-pill button{color:#a03b62}
.customer-page .success-symbol{border-radius:23px;background:linear-gradient(135deg,#dbf8ef,#deecff);color:#15977e;box-shadow:0 10px 28px #d8e6fa}
.customer-page .success-step h2{color:#1a2d55}
.customer-page .tracking-card{background:linear-gradient(120deg,#eff5ff,#f1efff);border:1px solid #dce7fc;padding:20px;border-radius:18px}
.customer-page .tracking-card strong{color:#2952ad;font-size:15px;letter-spacing:.45px;overflow-wrap:anywhere}
.customer-page .tracking-card span{color:#6c7d9a}
.customer-page .success-foot strong{color:#8c497e}
/* Medical signature art: restrained, depth-based, no stock photos */
.info-side{gap:16px}
.info-graphic{height:295px;border-radius:26px;background:radial-gradient(ellipse at 50% 42%,#425aaa 0%,#203a7a 39%,#121e49 80%);box-shadow:0 21px 49px rgba(17,40,93,.17);border:1px solid #314883}
.info-graphic:before{content:'';position:absolute;width:180px;height:180px;background:#7b6def5c;filter:blur(65px);right:-30px;top:-30px}
.info-graphic:after{background:linear-gradient(150deg,#ffffff10 0%,transparent 42%,#4f71d31c 100%)}
.graph-ring{border-color:#d5e1ff3b}
.ring-a{width:375px;height:375px}
.ring-b{width:265px;height:265px;border-color:#b7aafe5c}
.graphic-box{width:194px;height:204px;background:linear-gradient(155deg,#335a9dce,#192d65e8);border:1px solid #b9d4ff76;color:#fff;box-shadow:0 24px 48px #07173d77,inset 0 0 36px #ffffff13;backdrop-filter:blur(5px)}
.medical-cross{color:#aaf6e9;line-height:1.1;font-size:40px;text-shadow:0 0 22px #65e5d355}
.graphic-box b{font-family:Georgia,serif;color:#f7fbff;letter-spacing:3px}
.graphic-box span{color:#c8d9ff;font-size:8px;letter-spacing:2.3px}
.graphic-line{border-color:#bfd3ff6e}
.graphic-box small{color:#b7e4ea;letter-spacing:1.5px}
.orb{background:linear-gradient(145deg,#4764b4,#293e88);border-color:#a7c0f36c;color:#e5efff;border-radius:17px}
.orb-a{right:14%;top:14%;box-shadow:0 10px 25px #10275e80}
.orb-b{left:15%;bottom:14%;background:linear-gradient(145deg,#7064c2,#3e418a)}
.orb-c{left:18%;top:15%;background:linear-gradient(145deg,#0da48c,#297b9e);color:#efffff}
.how-panel{border-radius:24px;background:linear-gradient(160deg,#ffffff,#f7f9ff 66%,#f1f8fd);border-color:#dfe7f5;padding:28px 31px 25px;box-shadow:0 12px 36px rgba(33,58,98,.035)}
.how-panel .eyebrow{color:#665ac6;font-size:10px;letter-spacing:0;font-family:inherit;direction:rtl}
.how-panel h3{color:#172e56;font-size:20px;letter-spacing:-.55px;line-height:1.75}
.mini-steps{align-items:center;gap:14px;padding:11px 0;border-top:1px solid #eaf0f8}
.mini-steps:first-of-type{border-top:0}
.mini-steps>span{width:36px;height:36px;border-radius:13px;background:#e9efff;border:1px solid #d6e1fb;color:#365dc2}
.mini-steps:nth-of-type(3)>span{background:#f0ecff;border-color:#e3defe;color:#6959c7}
.mini-steps:nth-of-type(4)>span{background:#e6f8f2;border-color:#cfeee4;color:#118c76}
.mini-steps p b{color:#29415f;font-size:12px}
.mini-steps p small{color:#8596ac;font-size:10px}
.site-footer{color:#94a3b8;border-color:#dfe7f1}
/* Admin: near-black navy workspace chrome, bright productive canvas */
.admin-page{background:#f1f4fa;background-image:radial-gradient(circle at 100% 0%,#e8efff 0%,transparent 35%)}
.admin-shell{grid-template-columns:245px minmax(0,1fr)}
.admin-sidebar{padding:30px 19px 24px;background:radial-gradient(circle at 0% 0%,#263f86 0%,transparent 40%),linear-gradient(170deg,#172a5d 0%,#102045 72%,#101b3a 100%);border:0;color:#eef4ff;box-shadow:12px 0 40px rgba(18,39,79,.06)}
.admin-sidebar .brand{padding:5px 9px}
.admin-sidebar .brand-icon{background:linear-gradient(145deg,#597af6,#4358b5);box-shadow:0 10px 23px #0715374d}
.admin-sidebar .brand b{color:#f7fbff}
.admin-sidebar .brand small{color:#adbee4}
.admin-nav-title{color:#7f9bd0;font-size:11px;margin-top:19px}
.admin-active{background:linear-gradient(100deg,#4568c9ad,#6761ac6e);border:1px solid #8a9ff24c;color:#f5f9ff;border-radius:14px;min-height:55px;font-size:12px;box-shadow:0 8px 24px #09133030}
.sidebar-bottom{border-color:#ffffff21;color:#a4b8dc;line-height:2}
.admin-main{padding:37px clamp(18px,3.2vw,48px)}
.admin-topline h1{color:#172c52;font-size:clamp(25px,2.8vw,35px)}
.admin-topline p{font-size:12px;color:#71829e}
.admin-actions .light-button{min-height:42px;background:white;border-color:#dae5f7;color:#3554a4;border-radius:12px;box-shadow:0 4px 12px #172d5b09}
.admin-page .demo-notice{background:#f8faff}
.admin-mobile-brand{display:none}
.stats-grid{gap:14px;margin:25px 0}
.stat-card{background:#fff;border:1px solid #e2e8f4;border-radius:21px;padding:22px 24px;box-shadow:0 10px 32px rgba(21,44,99,.035);position:relative;overflow:hidden;min-height:137px}
.stat-card:after{content:'';width:84px;height:84px;border:13px solid currentColor;opacity:.045;border-radius:25px;position:absolute;left:-25px;top:-20px;transform:rotate(23deg)}
.stat-card span{font-size:12px;color:#68809f;font-weight:700}
.stat-card b{color:#315dba;font:800 34px/1.5 Arial,sans-serif;margin:5px 0 1px}
.stat-card small{color:#8da0b7;font-size:10px}
.stat-card:first-child{background:linear-gradient(120deg,#264baf,#172b70);border-color:#3158b6;color:white;box-shadow:0 15px 30px #223f982d}
.stat-card:first-child span,.stat-card:first-child small{color:#d2dfff}
.stat-card:first-child b{color:#fff}
.stat-card:nth-child(2){background:linear-gradient(120deg,#fff,#f8f5ff)}
.stat-card:nth-child(2) b{color:#7659c8}
.stat-card:nth-child(3){background:linear-gradient(120deg,#fff,#f3fcfa)}
.stat-card:nth-child(3) b{color:#128c7b}
.admin-content-grid{grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);gap:17px}
.request-list-panel,.detail-panel{padding:24px;border:1px solid #e0e8f5;min-height:510px;box-shadow:0 14px 40px rgba(24,47,88,.05)}
.panel-heading h2{color:#192d52}
.panel-heading select{background:#f5f8ff;border-color:#e1e8f6;color:#4160a1;border-radius:12px;font-size:11px;min-height:39px}
.request-entry{border-color:#e5ebf6;border-radius:15px;padding:15px;background:#fbfcff}
.request-entry:hover{background:#f3f7ff;border-color:#bacbee}
.request-entry.active{background:linear-gradient(100deg,#eef4ff,#f5f2ff);border-color:#9bafe6;box-shadow:inset 3px 0 0 #5778df}
.request-heading b{color:#213456;font-size:12px}
.request-entry p{color:#7688a1}
.request-entry small{color:#8da0b7}
.status-badge{border-radius:999px;background:#e2f7f0;border:1px solid #cff0e5;color:#087f68;padding:4px 10px}
.status-badge.new{background:#eff0ff;border-color:#e0defc;color:#6654bf}
.empty-detail h3{color:#3e557b}
.empty-detail p{color:#8294ad}
.empty-icon{color:#436bcb;background:#eef3ff}
.detail-panel h2{color:#203757}
.detail-meta{color:#8599b5}
.detail-meta b{color:#2d4e8d}
.message-box{background:#f6f9ff;border:1px solid #e3eaf7;border-radius:15px;padding:18px}
.field-caption{color:#728bb2}
.message-box p{color:#334a6c}
.admin-response-label{color:#31476c}
.admin-page label textarea{background:#fbfcff;border-color:#d9e3f4;line-height:2.05;min-height:125px}
.admin-page .primary-button{width:100%;font-size:12px}
.admin-page .result-actions .light-button{background:#eef3ff;color:#3c5db5}
.admin-page .result-actions #send-sms{background:#edf9f6;border-color:#d4eee4;color:#11816f}
.admin-page .result-actions .light-button:disabled{color:#8994ab;background:#f1f4f9;border-color:#e5eaf1}
.action-caption{color:#7b8ca4}
.new-dot{background:#7f68d9}
.sms-dialog{border-color:#e0e8f6;border-radius:24px;color:#1b3157}
.sms-dialog::backdrop{background:#0c1d48a8;backdrop-filter:blur(4px)}
.sms-box{background:#f4f7fe;border:1px solid #e0e8fa;color:#293e60}
/* Every adaptation must keep tap targets and prevent overflow. */
@keyframes sh-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.admin-shell{grid-template-columns:212px minmax(0,1fr)}.customer-page .section-top{padding-inline:31px}.customer-page .customer-grid{gap:16px}}
@media(max-width:1000px){.customer-page .customer-grid{grid-template-columns:minmax(0,1.1fr) minmax(275px,.9fr)}.info-graphic{height:254px}.how-panel{padding:22px}.admin-content-grid{grid-template-columns:1fr}}
@media(max-width:800px){.customer-page .customer-grid{grid-template-columns:1fr}.customer-page .info-side{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr)}.customer-page .info-graphic{height:100%;min-height:250px}.admin-sidebar{display:none}.admin-shell{grid-template-columns:1fr}.admin-mobile-brand{display:inline-block;margin-bottom:12px;font-size:11px;font-weight:800;background:#e7efff;border:1px solid #d8e5fc;border-radius:999px;color:#3458ae;padding:5px 12px}}
@media(max-width:575px){
 .container{width:calc(100% - 26px)}
 .site-header{height:69px}
 .brand-icon{width:41px;height:41px;border-radius:14px}
 .brand-icon svg{width:23px;height:23px}
 .brand b{font-size:20px}.brand small{font-size:10px}
 .header-note{padding:7px 9px;font-size:9px;gap:7px;background:transparent;border:0}
 .customer-page .content{padding-top:12px}
 .customer-page .demo-notice{margin-bottom:10px;padding:10px 12px;font-size:10px}
 .customer-page .section-top{padding:24px 22px 44px;min-height:232px;border-radius:24px 24px 20px 20px}
 .customer-page .section-top:after{font-size:80px;left:12px;bottom:3px}
 .customer-page .section-top h1{font-size:28px;line-height:1.7;letter-spacing:-.9px;margin:8px 0 6px}
 .customer-page .section-top p{font-size:11px}
 .hero-features{margin-top:11px;gap:5px}
 .hero-features span{font-size:9px;padding:4px 8px}
 .customer-page .progress{margin-top:18px;padding:0;text-align:right}
 .customer-page .progress-lines{margin-top:8px}
 .customer-page .customer-grid{margin-top:-21px;gap:12px}
 .customer-page .step{min-height:400px;border-radius:22px;padding:26px 22px 25px}
 .customer-page .step-header h2{font-size:25px;margin:17px 0 7px}
 .customer-page .step-header p{font-size:11px;margin-bottom:23px}
 .customer-page .two-col{grid-template-columns:1fr;gap:14px}
 .customer-page .full-label{margin-top:18px}
 .customer-page .info-side{grid-template-columns:1fr}
 .customer-page .info-graphic{display:none}
 .how-panel{padding:21px 23px 17px;border-radius:21px}
 .how-panel h3{font-size:19px}
 .mini-steps{padding:10px 0}
 .site-footer{padding-bottom:27px}
 .admin-main{padding:23px 13px 32px}
 .admin-topline h1{font-size:27px}
 .admin-topline{gap:15px}
 .admin-actions{width:100%}.admin-actions .light-button{flex:1;font-size:10px;text-align:center}
 .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0}
 .stat-card{padding:15px 10px;min-height:105px;border-radius:15px}
 .stat-card span{font-size:10px;line-height:1.55}
 .stat-card b{font-size:25px}
 .stat-card small{display:none}
 .request-list-panel,.detail-panel{padding:19px;min-height:0;border-radius:20px}
 .admin-content-grid{gap:12px}
 .tracking-card{flex-direction:column;justify-content:center}
 .customer-page .success-step h2{font-size:23px}
}
@media(max-width:360px){.customer-page .section-top{padding-inline:16px}.customer-page .step{padding-inline:17px}.admin-main{padding-inline:10px}.admin-actions .light-button{padding:9px 7px;font-size:9px}.request-list-panel,.detail-panel{padding:15px}.stat-card{padding:13px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Legibility pass: secondary small text on white should not become washed out. */
.brand small{color:#647794}
.customer-page .privacy-caption{color:#60718e}
.customer-page .textarea-meta{color:#637692}
.customer-page .upload-zone small{color:#617594}
.mini-steps p small{color:#667a98}
.site-footer{color:#647997}
.admin-topline p{color:#586d8c}
.stat-card:not(:first-child) span{color:#526a8e}
.stat-card:not(:first-child) small{color:#5c7496}
.action-caption{color:#667a98}