/* =====================================================================
   EnGene Clinic ERP — Client pages design layer v15
   Booking portal, doctor pages, patient portal, kiosk, Queue TV,
   client tracker and branch pages. Theme colours: --ecq-p / --ecq-s.
   ===================================================================== */
:root{
  --gz:#f3f6f5; --gz-2:#e7ecea; --ink:#0d1b24; --ink-2:#2a3a45; --muted:#5b6b75; --line:#dde4e2;
  --card:#fff; --good:#1f9d6b; --warn:#c77d12; --bad:#d23f52;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif; --ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:is(.ecq-bp,.ecq-doctor-public,.ecq-patient-auth,.ecq-patient-app,.ecq-kiosk-app,.ecq-tv-screen,.ecq-portal,.ecq-branch-landing){
  --p:var(--ecq-p,#175cd3)!important; --s:var(--ecq-s,#0ea5a8)!important; --k:var(--ecq-p,#175cd3)!important;
  --tv:var(--ecq-p,#175cd3)!important; --tv2:var(--ecq-s,#0ea5a8)!important;
  font-family:var(--ui)!important; -webkit-font-smoothing:antialiased;
}
:is(.ecq-bp,.ecq-doctor-public,.ecq-patient-auth,.ecq-patient-app,.ecq-kiosk-app,.ecq-portal,.ecq-branch-landing) :is(h1,h2){font-family:var(--display)!important;letter-spacing:-.02em;color:inherit}
body.ecq-standalone-clinic-page,body:has(.ecq-bp),body:has(.ecq-doctor-public){background:var(--gz)!important}
.ecq-plan-gate{max-width:640px;margin:48px auto;padding:22px 24px;border-radius:16px;border:1px solid var(--line);background:#fff;font-family:var(--ui);display:grid;gap:6px;color:var(--ink)}
.ecq-plan-gate a{color:var(--ecq-p);font-weight:700}

/* ---------- Shared header treatment: living aurora ---------- */
:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header){
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,color-mix(in srgb,var(--p) 78%,#06121a),var(--p) 45%,var(--s))!important;color:#fff!important;box-shadow:none!important}
:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):before,
:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):before{width:420px;height:420px;left:-120px;top:-220px;background:color-mix(in srgb,var(--s) 80%,#fff);animation:ecqDrift 14s ease-in-out infinite alternate}
:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):after{width:360px;height:360px;right:-100px;bottom:-240px;background:color-mix(in srgb,var(--p) 50%,#fff);animation:ecqDrift 18s ease-in-out infinite alternate-reverse}
@keyframes ecqDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,40px) scale(1.15)}}

/* ---------- Booking portal ---------- */
.ecq-bp{background:var(--gz)!important;color:var(--ink)!important}
.ecq-bp-head{border-radius:0 0 28px 28px}
.ecq-bp-brand{padding:30px 0 34px!important;gap:16px!important}
.ecq-bp-brand img,.ecq-bp-brand>i{width:60px!important;height:60px!important;border-radius:16px!important;background:#fff!important;color:var(--p)!important;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)!important;font-size:30px!important}
.ecq-bp-brand h1{font:800 clamp(26px,3.4vw,40px)/1.05 var(--display)!important;color:#fff!important;margin:0!important}
.ecq-bp-brand p{color:rgba(255,255,255,.82)!important;font-size:15px}
.ecq-bp main{padding-top:28px!important}
.ecq-bp .ecq-panel{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(13,27,36,.04),0 24px 48px -32px rgba(13,27,36,.28)!important;padding:26px!important}
.ecq-bp .ecq-kicker,.ecq-live-title span,.ecq-product-show>span{letter-spacing:0!important;text-transform:none!important;font:700 13px var(--ui)!important;color:var(--p)!important}
.ecq-bp h2{font:800 24px/1.15 var(--display)!important;margin:4px 0 18px!important}
.ecq-bp h3{font:700 16px var(--ui)!important;margin:24px 0 8px!important}
.ecq-bp label,.ecq-bp .ecq-label{font:600 13.5px var(--ui)!important;color:var(--ink-2)}
.ecq-bp :is(input,select,textarea){border:1px solid #cfd8d6!important;border-radius:12px!important;min-height:46px!important;font:500 15px var(--ui)!important;color:var(--ink)!important;background:#fff!important;transition:border-color .15s,box-shadow .15s}
.ecq-bp :is(input,select,textarea):focus{border-color:var(--p)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 16%,transparent)!important;outline:0}
.ecq-bp .ecq-slot{background:color-mix(in srgb,var(--p) 7%,#fff)!important;border:1px dashed color-mix(in srgb,var(--p) 30%,#fff);border-radius:12px!important;font-weight:600;color:var(--ink-2)}
.ecq-bp .ecq-services{gap:10px!important}
.ecq-bp .ecq-service{position:relative;border:1px solid var(--line)!important;border-radius:14px!important;padding:14px!important;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.ecq-bp .ecq-service:hover{border-color:color-mix(in srgb,var(--p) 40%,#fff)!important;transform:translateY(-2px);box-shadow:0 14px 28px -20px color-mix(in srgb,var(--p) 80%,#000)}
.ecq-bp .ecq-service input{accent-color:var(--p);width:18px!important;height:18px;min-height:0!important}
.ecq-bp .ecq-service b{font:700 14.5px var(--ui)}
.ecq-bp .ecq-service em{display:block;font-style:normal;color:var(--good);font-weight:700;font-size:13px;margin-top:3px}
.ecq-bp .ecq-service:has(input:checked){border-color:var(--p)!important;background:color-mix(in srgb,var(--p) 6%,#fff)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)!important}
.ecq-bp .ecq-cost-summary{border-radius:16px;background:var(--gz);border:1px solid var(--line);padding:16px}
.ecq-bp .ecq-cost-total strong{font:800 24px var(--display)!important;color:var(--p)}
:is(.ecq-bp .ecq-primary,.ecq-bp #ecq-check,.ecq-doctor-book,.ecq-kiosk-step button:not(.ecq-kiosk-back),.ecq-patient-app button,.ecq-auth-grid button,.ecq-auth-grid input[type=submit],.ecq-portal button){
  position:relative;overflow:hidden;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 70%,var(--s)))!important;color:#fff!important;
  font:700 15px var(--ui)!important;box-shadow:0 14px 28px -16px var(--p)!important;transition:transform .2s var(--ease),box-shadow .2s;cursor:pointer}
:is(.ecq-bp .ecq-primary,.ecq-doctor-book,.ecq-kiosk-step button:not(.ecq-kiosk-back),.ecq-patient-app button,.ecq-auth-grid button,.ecq-auth-grid input[type=submit],.ecq-portal button):after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s var(--ease)}
:is(.ecq-bp .ecq-primary,.ecq-doctor-book,.ecq-kiosk-step button:not(.ecq-kiosk-back),.ecq-patient-app button,.ecq-auth-grid button,.ecq-portal button):hover{transform:translateY(-2px);box-shadow:0 20px 34px -18px var(--p)!important}
:is(.ecq-bp .ecq-primary,.ecq-doctor-book,.ecq-kiosk-step button:not(.ecq-kiosk-back),.ecq-patient-app button,.ecq-auth-grid button,.ecq-portal button):hover:after{transform:translateX(100%)}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--ecq-p,#175cd3) 55%,#fff);outline-offset:2px}
.ecq-bp .ecq-primary{min-height:54px;font-size:16px!important}
.ecq-bp .ecq-code-row input{border-radius:12px 0 0 12px!important}
.ecq-bp #ecq-check{border-radius:0 12px 12px 0!important;margin-top:6px}
.ecq-bp .ecq-result{background:color-mix(in srgb,var(--p) 6%,#fff)!important;border:1px solid color-mix(in srgb,var(--p) 18%,#fff);border-radius:16px!important}

/* Live queue + products blocks injected into the portal */
.ecq-live-title h2{font:800 24px var(--display)!important}
.ecq-live-title b{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--ui)!important;color:var(--good)}
.ecq-live-title i{background:var(--good)!important;animation:ecqPing 2s infinite}
@keyframes ecqPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 45%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.ecq-live-card{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:0 24px 40px -30px rgba(13,27,36,.35)!important;transition:transform .35s var(--ease);transform-style:preserve-3d}
.ecq-live-card:before{height:4px!important;background:linear-gradient(90deg,var(--p),var(--s))!important}
.ecq-live-card :is(.num,.number){font:800 54px/1 var(--display)!important;color:var(--p)!important;letter-spacing:-.03em}
.ecq-live-card:hover{transform:perspective(700px) rotateX(4deg) translateY(-3px)}
.ecq-product-scroll article{border-radius:22px!important;box-shadow:0 30px 50px -30px rgba(13,27,36,.6)!important}

/* ---------- Doctor public page ---------- */
.ecq-doctor-public{background:var(--gz)!important;color:var(--ink)!important}
.ecq-doctor-hero{border-radius:26px!important;padding:30px!important}
.ecq-doctor-hero h1{font:800 clamp(28px,4vw,42px)/1.05 var(--display)!important;color:#fff!important}
.ecq-doctor-kicker{letter-spacing:0!important;text-transform:none!important;font:600 14px var(--ui)!important;opacity:.85}
.ecq-doctor-mark{border-radius:18px!important;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.ecq-doctor-status-grid article{border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:0 20px 40px -32px rgba(13,27,36,.4)!important}
.ecq-doctor-status-grid span{letter-spacing:0!important;text-transform:none!important;font:600 13px var(--ui)!important;color:var(--muted)!important}
.ecq-doctor-status-grid strong{font-family:var(--display)!important}
.ecq-doctor-now{background:linear-gradient(150deg,var(--ink),color-mix(in srgb,var(--p) 55%,var(--ink)))!important;color:#fff!important;border:0!important}
.ecq-doctor-now span,.ecq-doctor-now small{color:rgba(255,255,255,.75)!important}
.ecq-doctor-now strong{font:800 clamp(52px,7vw,84px)/1 var(--display)!important;color:#fff!important;letter-spacing:-.04em}
.ecq-doctor-now strong.ecq-bump{animation:ecqBump .6s var(--ease)}
@keyframes ecqBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.ecq-doctor-actions a{border-radius:14px!important;font-weight:700!important}
.ecq-doctor-clinic{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.ecq-doctor-list a{border:1px solid var(--line)!important;border-radius:16px!important;background:#fff!important;transition:transform .2s var(--ease),border-color .2s}
.ecq-doctor-list a:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--p) 40%,#fff)!important}
.ecq-doctor-info{border-radius:20px!important;border:1px solid var(--line)!important}

/* ---------- Patient portal ---------- */
.ecq-patient-auth{color:var(--ink)}
.ecq-auth-brand i{color:var(--p)!important;display:inline-grid;place-items:center;width:72px;height:72px;border-radius:22px;background:color-mix(in srgb,var(--p) 10%,#fff);font-size:34px!important}
.ecq-auth-brand h1{font:800 clamp(28px,4vw,40px) var(--display)!important}
.ecq-auth-grid{border-radius:24px!important;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(13,27,36,.45)!important}
.ecq-auth-grid section+section{background:var(--gz)!important}
.ecq-auth-grid h2{font:800 22px var(--display)!important}
.ecq-auth-grid input:not([type=checkbox]):not([type=submit]){border:1px solid #cfd8d6!important;border-radius:12px!important;font:500 15px var(--ui)}
.ecq-auth-grid input:focus{border-color:var(--p)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 16%,transparent);outline:0}
.ecq-patient-app{background:var(--gz)!important;border:1px solid var(--line);border-radius:24px!important;box-shadow:0 40px 80px -50px rgba(13,27,36,.5)!important}
.ecq-patient-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--p) 30%,#0b1822),#0b1822)!important}
.ecq-patient-sidebar nav a.active{background:rgba(255,255,255,.12)!important;box-shadow:inset 3px 0 0 var(--s)}
.ecq-patient-card,.ecq-appointment-card,.ecq-invoice-card,.ecq-treatment-row{border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 18px 36px -30px rgba(13,27,36,.4)!important;background:#fff!important}
.ecq-patient-card h2{font:800 22px var(--display)!important}
.ecq-patient-kpis>*{border-radius:18px!important;border:1px solid var(--line)!important;background:#fff!important}
.ecq-date-block{background:color-mix(in srgb,var(--p) 9%,#fff)!important;color:var(--p)!important;border-radius:14px!important}
.ecq-date-block b{font-family:var(--display)}
.ecq-progress{background:var(--gz-2)!important;border-radius:99px!important;overflow:hidden}
.ecq-progress>*{background:linear-gradient(90deg,var(--p),var(--s))!important;border-radius:99px!important}
.ecq-status{border-radius:99px;font-weight:700}

/* ---------- Kiosk ---------- */
.ecq-kiosk-app{background:radial-gradient(80% 60% at 100% 0%,color-mix(in srgb,var(--s) 14%,transparent),transparent),var(--gz)!important;color:var(--ink)!important}
.ecq-kiosk-header{border-radius:0 0 30px 30px}
.ecq-kiosk-header h1{font:800 clamp(26px,4vw,46px)/1.05 var(--display)!important}
.ecq-kiosk-welcome i{color:var(--p)!important}
.ecq-kiosk-welcome h2,.ecq-kiosk-step h2{font:800 clamp(30px,4vw,48px)/1.1 var(--display)!important}
.ecq-kiosk-actions button{border:1px solid var(--line)!important;border-radius:28px!important;box-shadow:0 30px 50px -36px rgba(13,27,36,.5)!important;font:700 21px var(--ui)!important;color:var(--ink)!important;transition:transform .3s var(--ease),box-shadow .3s;transform-style:preserve-3d}
.ecq-kiosk-actions button:hover,.ecq-kiosk-actions button:focus-visible{transform:perspective(800px) rotateX(6deg) translateY(-6px);box-shadow:0 40px 60px -36px var(--p)!important}
.ecq-kiosk-actions button i{color:var(--p)!important}
.ecq-kiosk-actions .accent{background:linear-gradient(140deg,var(--p),var(--s))!important;color:#fff!important;border:0!important}
.ecq-kiosk-actions .accent i{color:#fff!important}
.ecq-kiosk-step form,.ecq-consent-text,.ecq-kiosk-result,.ecq-kiosk-success-card{border:1px solid var(--line);border-radius:26px!important;box-shadow:0 30px 60px -44px rgba(13,27,36,.5)!important}
.ecq-kiosk-step :is(input,select,textarea){border:2px solid var(--gz-2)!important;font-family:var(--ui)!important}
.ecq-kiosk-step :is(input,select,textarea):focus{border-color:var(--p)!important;outline:0}
.ecq-kiosk-back{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.ecq-kiosk-step.active{animation:ecqStepIn .45s var(--ease)!important}
@keyframes ecqStepIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* ---------- Queue TV ---------- */
.ecq-tv-screen{background:radial-gradient(60% 50% at 10% 0%,color-mix(in srgb,var(--p) 55%,transparent),transparent 70%),radial-gradient(50% 50% at 100% 100%,color-mix(in srgb,var(--s) 35%,transparent),transparent 70%),#07131b!important;font-family:var(--ui)!important}
.ecq-tv-brand h1,.ecq-tv-clock strong{font-family:var(--display)!important;letter-spacing:-.02em}
.ecq-tv-brand img,.ecq-tv-brand>i{color:var(--p)!important}
.ecq-tv-label{letter-spacing:.04em!important;color:color-mix(in srgb,var(--s) 60%,#fff)!important;font-family:var(--display)!important}
.ecq-tv-serving-card{background:linear-gradient(150deg,var(--p),color-mix(in srgb,var(--p) 50%,var(--s)))!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:34px!important;transform-style:preserve-3d;animation:ecqTvIn .8s var(--ease) both}
@keyframes ecqTvIn{from{opacity:0;transform:perspective(1200px) rotateX(-18deg) translateY(30px)}to{opacity:1;transform:none}}
.ecq-tv-number{font-family:var(--display)!important;letter-spacing:-.05em}
.ecq-tv-next,.ecq-tv-qr{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:26px!important;backdrop-filter:blur(10px)}
.ecq-tv-footer{background:rgba(0,0,0,.25)!important}

/* ---------- Client tracker & branch landing ---------- */
.ecq-portal .ecq-panel{border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:0 30px 60px -44px rgba(13,27,36,.5)!important;background:#fff!important}
.ecq-portal :is(input,select){border:1px solid #cfd8d6!important;border-radius:12px!important;min-height:46px;padding:10px 12px;font:500 15px var(--ui)}

/* ---------- Page entrance + transitions ---------- */
.ecq-reveal{opacity:0;transform:translateY(18px)}
.ecq-reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ecq-wipe{position:fixed;z-index:2147483000;pointer-events:none;inset:0;background:linear-gradient(140deg,var(--ecq-p,#175cd3),var(--ecq-s,#0ea5a8));clip-path:circle(0% at var(--x,50%) var(--y,50%))}
.ecq-wipe.is-on{clip-path:circle(150% at var(--x,50%) var(--y,50%));transition:clip-path .6s cubic-bezier(.7,0,.3,1)}
.ecq-wipe.is-off{clip-path:circle(0% at 50% 50%);transition:clip-path .7s cubic-bezier(.7,0,.3,1)}
.ecq-wipe-in{clip-path:circle(150% at 50% 50%)}

/* ---------- Footer ---------- */
body.ecq-has-footer{min-height:100vh;display:flex;flex-direction:column}
body.ecq-has-footer>.ecq-made{margin-top:auto;width:100%;box-sizing:border-box}
body.ecq-has-footer>:not(.ecq-made):not(script):not(style):not(link){flex-shrink:0}
.ecq-made{display:flex;align-items:center;justify-content:center;gap:6px;padding:26px 16px 30px;font:500 14px var(--ui);color:var(--muted);background:var(--gz)}
.ecq-made a{color:var(--ink)!important;font-weight:700;text-decoration:none}
.ecq-made a:hover{color:var(--ecq-p)!important;text-decoration:underline}
.ecq-heart{width:15px;height:15px;fill:#e11d48;animation:ecqBeat 1.6s ease-in-out infinite}
@keyframes ecqBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.22)}30%{transform:scale(.95)}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .ecq-bp-head{border-radius:0 0 20px 20px}
  .ecq-bp .ecq-panel{padding:18px!important;border-radius:18px!important}
  .ecq-bp .ecq-services,.ecq-bp .ecq-fields{grid-template-columns:1fr!important}
  .ecq-doctor-hero{flex-direction:column;align-items:flex-start;padding:22px!important}
  .ecq-doctor-status-grid{grid-template-columns:1fr 1fr!important}
  .ecq-doctor-status-grid .ecq-doctor-now{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  :is(.ecq-bp,.ecq-doctor-public,.ecq-patient-auth,.ecq-patient-app,.ecq-kiosk-app,.ecq-tv-screen,.ecq-portal) *,
  :is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):before,:is(.ecq-bp-head,.ecq-doctor-hero,.ecq-kiosk-header):after{animation:none!important;transition:none!important}
  .ecq-reveal{opacity:1;transform:none}
  .ecq-wipe{display:none}
}