@import url("/styles.css");
/* PCare-Neo — Grab-style shell. Production (full-viewport), not the DC device frame. */
/* ^ styles.css first so reused SkinexAdminKit components + embedded member
   Skin/Body screens keep their base class styling; neo rules below layer the
   Grab look on top (body.neo tokens override styles.css tokens). */
:root{
  --neo-blue:#0074d9; --neo-blue-dk:#00518f; --neo-blue-lt:#3d9be2;
  --neo-ink:#101828; --neo-ink2:#2a3646; --neo-mute:#7a8798; --neo-mute2:#93a1b5;
  --neo-bg:#f2f5f9; --neo-card:#fff; --neo-tile:#e6f2fc; --neo-line:#e9edf3;
  --neo-green:#2f9e63; --neo-green-lt:#6cc596; --neo-danger:#dc2f22;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.neo{
  background:var(--neo-bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;
  color:var(--neo-ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--neo-blue);text-decoration:none}
::-webkit-scrollbar{display:none}

/* Scroll body: reserve space for the fixed tab bar + iOS safe areas */
/* Own scroll container — styles.css sets html,body{overflow:hidden} (that app
   scrolls inside .scroll), so neo must scroll inside .neo-scroll itself. */
.neo-scroll{
  height:100vh; height:100dvh;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));
}
/* Locked/login state renders NeoLogin directly under .neo-wrap — let it scroll too. */
body.neo #app-root > .neo-wrap{height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.neo-wrap{width:100%;max-width:none;margin:0 auto}

/* Rounded gradient header; pads under the device status bar via safe-area */
.neo-header{
  color:#fff; position:relative; overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 22px;
}
.neo-header.round{border-radius:0 0 26px 26px}

/* Bottom tab bar — hidden until a session token exists (body.neo-has-tabbar) */
.neo-tabbar-wrap{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none}
body.neo-has-tabbar .neo-tabbar-wrap{display:block}
.neo-tabbar{
  width:100%;max-width:none;margin:0 auto;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid #e5eaf1;display:flex;
  padding:8px 6px calc(6px + env(safe-area-inset-bottom,0px));
}
.neo-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 0;border-radius:12px;cursor:pointer;color:#8a95a5;text-decoration:none;
}
.neo-tab .neo-tab-lbl{font-size:10px;font-weight:700;letter-spacing:.03em}
.neo-tab.active{color:var(--neo-blue);background:var(--neo-tile)}

/* Search marquee (from the prototype) */
.skx-marquee-mask{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
.skx-marquee{display:inline-flex;white-space:nowrap;will-change:transform;animation:skx-marquee 9s linear infinite}
.skx-marquee>span{padding-right:44px}
@keyframes skx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Vertical rotating placeholder — advances one line every 2s (4 phrases, 8s loop) */
.skx-rot-mask{flex:1;min-width:0;height:22px;overflow:hidden}
.skx-rot{display:flex;flex-direction:column;animation:skx-rot 8s infinite}
.skx-rot>span{height:22px;line-height:22px;font-size:15px;color:#93a1b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
@keyframes skx-rot{
  0%,20%{transform:translateY(0)}
  25%,45%{transform:translateY(-22px)}
  50%,70%{transform:translateY(-44px)}
  75%,95%{transform:translateY(-66px)}
  100%{transform:translateY(-88px)}
}

.neo-avatar{
  width:36px;height:36px;border-radius:18px;background:#000;overflow:hidden;flex-shrink:0;
}
.neo-avatar img{width:100%;height:100%;object-fit:contain;display:block}
.neo-avatar-fallback{
  background:#e9f4e9;color:#2d7a00;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
}

.neo-card{background:var(--neo-card);border-radius:16px;box-shadow:0 2px 10px rgba(15,45,90,.06)}
/* Visible slim scrollbar for light-on-dark scroll areas (e.g. reservations). */
.neo-scroll-y{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) rgba(255,255,255,.14)}
.neo-scroll-y::-webkit-scrollbar{width:6px}
.neo-scroll-y::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55);border-radius:3px}
.neo-scroll-y::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:3px}
.neo-press{cursor:pointer;transition:transform .06s ease}
.neo-press:active{transform:scale(.985)}

/* Patient avatar — face-scan captures are portrait crops, so letterbox them
   (object-fit:contain) on a dark backfill rather than zoom-cropping (cover).
   Size and font-size stay inline; add .sq for square list thumbs, and
   .is-initials when showing initials instead of a photo. */
.neo-avatar{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#0b1220;border-radius:50%;color:#0058a8;font-weight:800;letter-spacing:.02em}
.neo-avatar>img{width:100%;height:100%;object-fit:contain;display:block}
.neo-avatar.is-initials{background:#e7f2fd}
.neo-avatar.sq{border-radius:10px}

/* Old-pcare "Clinical Calm" light tokens, so reused SkinexAdminKit components
   (PhoneInput, buttons, notices, pickers) render correctly inside neo. */
body.neo{
  --ink-hi:#16181d; --ink-mid:#3a4150; --ink-mute:#6b7280; --ink-lo:#9aa3af;
  --bg-card:#ffffff; --surface-1:#f7f8fa; --surface-2:#f2f4f8;
  --border-soft:#e9ecf1; --border-strong:#d8dde5;
  --accent:#0074d9; --ok:#1a7a4c; --warn:#c45c2a; --danger:#dc2f22;
}
/* Sign In (kit .btn-primary) restyled to the neo rounded primary CTA */
.neo-login button.btn-primary{
  background:#0074d9 !important; color:#fff !important; border:0 !important;
  border-radius:16px !important; padding:16px 18px !important;
  font-size:16px !important; font-weight:700 !important;
  box-shadow:0 8px 20px rgba(0,116,217,.28) !important;
}
.neo-login button.btn-primary:disabled{box-shadow:none !important}
.neo-login label{margin-bottom:8px}
/* Login splash. Key art (logo + anniversary lockup) sits in the top-centre of
   the frame so `center top / cover` keeps it clear of the card on any screen.
   Phones get a 9:16 crop; wider screens the full 3:4 frame (the page is capped
   at 768px below, so 1536px wide covers 2x tablets). */
.neo-login-bg{background:#04164a url("/pcare-neo/splash-1.webp") center top / cover no-repeat}
@media (min-width: 600px){
  .neo-login-bg{background-image:url("/pcare-neo/splash-1-tablet.webp")}
}
/* Login: everything outside the capped frame (desktop gutters, overscroll) is black. */
html:has(.neo-login-bg), body.neo:has(.neo-login-bg){background:#000}
/* Country-code sheet opened from the login form (kit.CountryPicker, portalled to <body>).
   neo pages do not load styles.css, so its sheet classes are defined here — scoped to the
   login so the per-screen sheet shims stay untouched. */
body.neo:has(.neo-login-bg){--brand:#0074d9;--brand-soft:rgba(0,116,217,.08)}
body.neo:has(.neo-login-bg) .sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center}
body.neo:has(.neo-login-bg) .sheet{
  width:100%;max-width:520px;max-height:70dvh;display:flex;flex-direction:column;
  background:var(--bg-card);color:var(--ink-hi);border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px rgba(0,20,50,.3);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
}
body.neo:has(.neo-login-bg) .sheet>*{flex-shrink:0}
body.neo:has(.neo-login-bg) .sheet>div:last-child{flex:1 1 auto;min-height:0}
body.neo:has(.neo-login-bg) .sheet-handle{width:40px;height:4px;border-radius:2px;background:#d5dbe4;margin:10px auto 8px}
body.neo:has(.neo-login-bg) .px-20{padding-left:20px;padding-right:20px}
body.neo:has(.neo-login-bg) .num-mono{font-variant-numeric:tabular-nums}
body.neo:has(.neo-login-bg) .sheet .field input{
  width:100%;height:46px;box-sizing:border-box;border-radius:12px;border:1px solid var(--border-strong);
  background:var(--bg-card);color:var(--ink-hi);padding:0 14px;font-size:16px;font-family:inherit;outline:none;
}
/* Login card is dark glass over the splash photo: flip the kit tokens to
   light-on-dark for the form inside it (the error modal stays light). */
.neo-login{
  --ink-hi:#fff; --ink-mute:rgba(255,255,255,.72);
  --bg-card:rgba(255,255,255,.1); --surface-2:rgba(255,255,255,.08);
  --border-soft:rgba(255,255,255,.16); --border-strong:rgba(255,255,255,.3);
  --brand-hi:#5cb0ff;
}
.neo-login input::placeholder{color:rgba(255,255,255,.5)}
/* Kit's inline error red (#b42318) is unreadable on dark glass. */
.neo-login div[style*="rgb(180, 35, 24)"]{color:#ffa198 !important}

/* Hide the floating reCAPTCHA v3 badge (protection still active). */
.grecaptcha-badge{visibility:hidden !important}

/* Desktop: PCare stops at tablet width (768px), centred — same as the member app, so a
   desktop window looks like a tablet. Margins, not transform, so fixed children still use
   the viewport. */
@media (min-width: 769px){
  /* Outside the 768px frame is black. The body paints the middle band light, so the frame
     stays light for the full window height even when a screen's content is short. */
  html{background:#000}
  body.neo{
    background:linear-gradient(to right,
      #000 calc(50% - 384px), var(--neo-bg) calc(50% - 384px),
      var(--neo-bg) calc(50% + 384px), #000 calc(50% + 384px));
  }
  .neo-wrap{
    max-width:768px;
    background:var(--neo-bg);
  }
  .neo-tabbar{max-width:768px}
  /* Login only: never wider than the splash's 3:4 tablet ratio, so a landscape
     tablet or short desktop window can't push the card up over the key art. */
  .neo-wrap:has(> .neo-login-bg){max-width:min(768px, 75vh);max-width:min(768px, 75dvh);box-shadow:none;background:#000}
}