/* Shadan Medical — Quiet Entry refinement v0.3.0
   Owner-approved permanent blue backdrop + minimal first step.
   Scoped extension to v0.2.0, keeps original behavior & IDs intact. */
:root{--entry-navy:#101d43;--entry-blue:#3569d9;--entry-mint:#18a98d;--entry-violet:#7060d0;--entry-ink:#142653}
html{scroll-padding-top:20px}
body.customer-page{background:#101d43;color:#f9fbff;position:relative;isolation:isolate}
.customer-page .medical-ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;background:
  radial-gradient(ellipse 520px 430px at 6% 84%,rgba(113,93,202,.29),transparent 80%),
  radial-gradient(ellipse 460px 360px at 98% 7%,rgba(20,158,170,.19),transparent 79%),
  radial-gradient(ellipse 620px 450px at 43% 42%,rgba(39,77,165,.18),transparent 83%),
  linear-gradient(128deg,#1d3169 0%,#142655 44%,#101d43 100%)}
.medical-ambient:after{content:'';position:absolute;inset:0;opacity:.26;background-image:linear-gradient(#b5cbff13 1px,transparent 1px),linear-gradient(90deg,#b5cbff13 1px,transparent 1px);background-size:94px 94px;mask-image:linear-gradient(to bottom,transparent 4%,#000 55%,transparent 100%)}
.ambient-halo{position:absolute;display:block;aspect-ratio:1;border-radius:50%;border:1px solid #c9daff17;box-shadow:0 0 0 50px #d7dfff04,0 0 0 114px #d7dfff03;animation:ambient-breathe 16s ease-in-out infinite alternate}
.halo-one{width:490px;top:-215px;left:-165px}.halo-two{width:470px;bottom:-270px;right:-210px;animation-delay:-8s}
.ambient-line{position:absolute;width:410px;height:1px;background:linear-gradient(90deg,transparent,#b4c8ff33,transparent);transform:rotate(-36deg)}.line-one{top:28%;right:-125px}.line-two{bottom:20%;left:-90px;transform:rotate(31deg)}
.ambient-spark{position:absolute;display:grid;place-items:center;font-weight:400;color:#e2edff;line-height:1;text-shadow:0 0 18px #b5caff3d;animation:ambient-float 9s ease-in-out infinite;opacity:.6}
.spark-one{top:23%;left:15%;font-size:30px;animation-delay:-2s}.spark-two{bottom:17%;right:13%;color:#9ef0dd;font-size:19px;animation-duration:11s;animation-delay:-4s}.spark-three{top:64%;left:9%;color:#bbb3ff;font-size:35px;animation-delay:-6s}
.ambient-sign{position:absolute;top:45%;left:10%;font-size:clamp(160px,23vw,420px);font-weight:300;line-height:1;opacity:.045;color:#eef6ff;transform:rotate(-15deg);filter:blur(.5px)}
@keyframes ambient-float{0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(0,-19px,0) rotate(8deg)}}
@keyframes ambient-breathe{from{transform:scale(.97);opacity:.75}to{transform:scale(1.08);opacity:1}}
/* Shared identity with admin; translucent overlay is subordinate to form readability. */
.customer-page .site-header{height:72px;background:rgba(12,27,65,.45);border-bottom:1px solid #cbdcff1e;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.customer-page .brand b{font-size:21px;color:#fff}.customer-page .brand small{color:#b5c8ed;font-size:10px;margin-top:4px}
.customer-page .brand-icon{width:42px;height:42px;border-radius:13px;box-shadow:0 5px 20px #08163242}
.customer-page .header-note{background:#ffffff0d;color:#dbe6ff;border:1px solid #d9e4ff22;padding:7px 13px;font-size:10px}
.customer-page .pulse{background:#71e3c4;box-shadow:0 0 0 4px #73e8c321}
.customer-page .content{padding:0}
.customer-page .entry-shell{margin-inline:auto}
.customer-page .flow-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 21px;color:#e9f2ff;padding:0 4px}
.customer-page .flow-mark{font:700 10px/1.5 Arial,sans-serif;letter-spacing:2.1px;direction:ltr;color:#c2d5ff}
.customer-page .flow-mark span{color:#6ae0cb;margin:0 4px}
.customer-page .progress{margin:0;min-width:130px;text-align:left;padding:0;display:flex;align-items:center;gap:13px;direction:rtl}
.customer-page .progress-label{font-size:11px;color:#e1eafd;white-space:nowrap}
.customer-page .progress-lines{display:flex;direction:rtl;gap:4px;margin:0}
.customer-page .progress-lines i{width:17px;height:5px;background:#ffffff35;transition:background .2s,width .2s}
.customer-page .progress-lines i.active{width:26px;background:linear-gradient(90deg,#89eed8,#8f9eff);box-shadow:0 0 12px #9de9ff40}
.customer-page .progress-lines i.done{background:#75d8c6}
.customer-page .customer-grid{margin-top:0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:22px;align-items:start}
.customer-page .step{border:1px solid #e1e9f8;border-top:3px solid #a9c5ff;border-radius:25px;background:#fff;min-height:0;padding:clamp(26px,3.4vw,43px);box-shadow:0 30px 80px #05112f45,0 1px 1px #ffffff inset;color:#1a2d4f}
.customer-page .step-header h1,.customer-page .step-header h2{color:#142653;font-size:clamp(25px,2.5vw,32px);letter-spacing:-.7px;line-height:1.55;margin:15px 0 20px;font-weight:800}
.customer-page .step-header .step-number,.customer-page .step-number{font-size:10px;padding:5px 12px}
.customer-page label{font-size:12px;color:#23395c}
.customer-page label input:not([type=file]),.customer-page label textarea{font-size:15px;color:#142653;background:#f8faff;border:1px solid #cfdcf1;border-radius:12px;min-height:52px;box-shadow:0 1px 1px #a9c4f00a}
.customer-page label input:not([type=file])::placeholder,.customer-page textarea::placeholder{color:#7e91ad;opacity:1;font-size:13px}
.customer-page label input:not([type=file]):focus,.customer-page label textarea:focus{background:#fff;border-color:#4d77da;box-shadow:0 0 0 4px rgba(66,117,217,.14)}
.customer-page .full-label{margin-top:19px}
.customer-page .error{color:#aa3154;min-height:19px;margin:7px 0 0;font-size:11px}
.customer-page .step .primary-button{margin-top:17px;min-height:55px;font-size:14px;border-radius:13px;box-shadow:0 12px 25px #3569d93b}
.customer-page .step .primary-button:focus-visible{outline-color:#7566e0}
.customer-page .entry-disclaimer{border-top:1px solid #e6ecf6;margin-top:24px;padding-top:16px;color:#657992;font-size:10.5px;display:flex;gap:8px;align-items:center;line-height:1.8}
.customer-page .entry-disclaimer span{color:#466ed1;font-size:16px}
.customer-page .site-footer{margin-top:40px;border-color:#b2c6ee26;color:#b7c8e7}
/* First stage: no redundant text or right-hand explainer; center the card vertically. */
.customer-page[data-step="1"] .entry-shell{max-width:540px;min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;padding:24px 0 31px}
.customer-page[data-step="1"] .customer-grid,.customer-page[data-step="3"] .customer-grid{display:block}
.customer-page[data-step="1"] .info-side,.customer-page[data-step="3"] .info-side{display:none}
.customer-page[data-step="1"] .step{padding:clamp(28px,4vw,44px) clamp(25px,4vw,44px) 27px}
.customer-page[data-step="1"] .compact-step-header{margin-bottom:25px}
.customer-page[data-step="1"] .compact-step-header h1{margin-bottom:0;font-size:clamp(27px,3vw,35px)}
.customer-page[data-step="1"] .two-col{grid-template-columns:1fr 1fr;gap:14px}
.customer-page[data-step="1"] .site-footer{display:none}
/* Request stage: add the moved guidance here only, and give text entry priority. */
.customer-page[data-step="2"] .entry-shell{max-width:1100px;padding:47px 0 56px}
.customer-page[data-step="2"] .step-header h2{margin:14px 0 9px}
.customer-page[data-step="2"] .step-header p{font-size:12.5px;line-height:2.15;color:#4c6182;margin:0 0 17px;max-width:620px}
.customer-page[data-step="2"] .request-step-header{border-bottom:1px solid #e9eff9;padding-bottom:14px;margin-bottom:12px}
.customer-page[data-step="2"] .back-link{margin-bottom:12px}
.customer-page[data-step="2"] textarea{min-height:154px}
.customer-page[data-step="2"] .upload-zone{min-height:115px;margin-top:16px}
.customer-page[data-step="2"] .preview-caution{font-size:10px;line-height:1.8;color:#627591;text-align:center;margin:14px 0 0}
.customer-page[data-step="2"] .info-side{display:flex;flex-direction:column;gap:17px}
.customer-page[data-step="2"] .info-graphic{height:240px;border-radius:24px;animation:sh-enter .45s ease both}
.customer-page[data-step="2"] .info-graphic .orb{animation:ambient-float 9s ease-in-out infinite}
.customer-page[data-step="2"] .info-graphic .orb-b{animation-delay:-3s}
.customer-page[data-step="2"] .info-graphic .orb-c{animation-delay:-5s}
.customer-page[data-step="2"] .how-panel{border:1px solid #dfe7f5;box-shadow:0 18px 50px #020b2636}
/* Final receipt with focused confirmation content. */
.customer-page[data-step="3"] .entry-shell{max-width:635px;padding:clamp(28px,7vh,80px) 0 55px}
.customer-page[data-step="3"] .success-step{gap:11px}
.customer-page[data-step="3"] .success-step>p{line-height:2}
/* Admin: the same indigo/blue/mint grammar, no functional or layout regression. */
.admin-page .admin-sidebar{background:linear-gradient(178deg,#142653,#101d43 80%)}
.admin-page .admin-sidebar .brand b{color:#f6faff}
.admin-page .admin-sidebar .brand small{color:#becdee}
.admin-page .admin-sidebar .admin-nav-title{color:#aebde1}
.admin-page .admin-sidebar .sidebar-bottom{color:#b4c2de;border-color:#ffffff20}
.admin-page .admin-sidebar .admin-active{border:1px solid #a5bfff32;background:#769afd18;color:#e5ecff}
.admin-page .admin-main{background:radial-gradient(circle at 96% 0%,#e1eafd80,transparent 33%),#f3f6fb}
.admin-page .stat-card,.admin-page .request-list-panel,.admin-page .detail-panel{box-shadow:0 15px 40px #152c6010}
.admin-page .admin-response-label textarea{font-size:14px}
@media(max-width:900px){.customer-page[data-step="2"] .customer-grid{grid-template-columns:minmax(0,1fr)}.customer-page[data-step="2"] .info-side{display:grid;grid-template-columns:1fr}.customer-page[data-step="2"] .info-graphic{display:none}.customer-page[data-step="2"] .how-panel{max-width:none}}
@media(max-width:575px){
 .customer-page .container{width:calc(100% - 30px)}
 .customer-page .site-header{height:64px}
 .customer-page .brand{gap:9px}.customer-page .brand-icon{width:39px;height:39px}
 .customer-page .brand b{font-size:18px}.customer-page .brand small{font-size:9px}
 .customer-page .header-note{font-size:9px;padding:7px 9px}
 .customer-page .progress{margin:0;gap:9px;min-width:0}
 .customer-page .progress-lines i{width:13px}.customer-page .progress-lines i.active{width:20px}
 .customer-page .flow-mark{font-size:9px;letter-spacing:1.1px}
 .customer-page .flow-bar{margin-bottom:15px}
 .customer-page[data-step="1"] .entry-shell{min-height:calc(100svh - 64px);padding:14px 0 17px}
 .customer-page[data-step="1"] .step{padding:26px 23px 23px}
 .customer-page[data-step="1"] .compact-step-header{margin-bottom:20px}
 .customer-page[data-step="1"] .compact-step-header h1{font-size:28px;margin:13px 0 0}
 .customer-page[data-step="1"] .two-col{grid-template-columns:1fr;gap:13px}
 .customer-page label input:not([type=file]){min-height:50px;padding:10px 13px}
 .customer-page .full-label{margin-top:15px}
 .customer-page .step .primary-button{margin-top:11px;min-height:51px}
 .customer-page .entry-disclaimer{margin-top:20px;padding-top:12px;font-size:9.7px}
 .customer-page[data-step="2"] .entry-shell{padding:22px 0 34px}
 .customer-page[data-step="2"] .step{padding:24px 20px}
 .customer-page[data-step="2"] .request-step-header h2{font-size:25px}
 .customer-page[data-step="2"] .how-panel{padding:21px}
 .customer-page[data-step="3"] .entry-shell{padding:30px 0 38px}
 .ambient-sign{left:-20%;top:47%}
 .spark-one{display:none}.spark-two{right:6%;bottom:11%}.spark-three{left:3%;top:73%}
 .customer-page .site-footer{flex-direction:row;flex-wrap:wrap;gap:10px;font-size:9px;margin-top:15px}
}
@media(max-width:360px){.customer-page .container{width:calc(100% - 22px)}.customer-page .header-note{font-size:8px}.customer-page[data-step="1"] .step{padding:22px 18px 20px}.customer-page .flow-mark{font-size:8px}.customer-page .progress-label{font-size:10px}}
@media(max-height:710px) and (max-width:575px){.customer-page[data-step="1"] .entry-shell{justify-content:flex-start;padding-top:17px}.customer-page[data-step="1"] .compact-step-header{margin-bottom:13px}.customer-page[data-step="1"] .step{padding-block:20px}.customer-page .entry-disclaimer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.medical-ambient *,.customer-page[data-step="2"] .info-graphic .orb{animation:none!important}html{scroll-behavior:auto!important}}
/* Small-height phones: prioritize fitting the whole first step without sacrificing 44px tap targets. */
@media(max-height:640px) and (max-width:575px){
 .customer-page[data-step="1"] .entry-shell{padding:6px 0 8px;justify-content:center}
 .customer-page .flow-bar{margin-bottom:6px}
 .customer-page[data-step="1"] .step{padding:13px 18px 11px;border-radius:21px}
 .customer-page[data-step="1"] .compact-step-header{margin-bottom:8px}
 .customer-page[data-step="1"] .compact-step-header h1{font-size:24px;margin:6px 0 0}
 .customer-page[data-step="1"] .two-col{gap:5px}
 .customer-page[data-step="1"] label{font-size:11px}
 .customer-page[data-step="1"] label input:not([type=file]){min-height:44px;margin-top:4px;padding:7px 11px}
 .customer-page[data-step="1"] .full-label{margin-top:6px}
 .customer-page[data-step="1"] .error{min-height:13px;margin:2px 0 0}
 .customer-page[data-step="1"] .primary-button{min-height:46px;margin-top:4px}
 .customer-page[data-step="1"] .entry-disclaimer{margin-top:8px;padding-top:5px;font-size:9px}
}