/* ============================================================
   AUKETRA: sign-in / sign-up shell (layouts/auth.blade.php)
   Pattern after Pharmatude: one page, a navy panel slides over the
   form that is not in use. Navy #024e86 single accent, Outfit,
   one fluid clamp() type scale, no tinted pills, no left borders.
   ============================================================ */
:root{
  --au-navy:#024e86;
  --au-navy-d:#013d6b;
  --au-navy-dd:#012b4c;
  --au-ink:#14182b;
  --au-text:#3a3d4f;
  --au-mute:#5f6676;
  --au-line:#dfe4ea;
  --au-bg:#f4f6f9;
  --au-card:#ffffff;
  --au-red:#b4232f;
  --au-green:#0b6b50;
  --au-ring:0 0 0 3px rgba(2,78,134,.22);
  --au-radius:12px;
  --au-ease:cubic-bezier(.7,0,.3,1);
  /* One fluid scale */
  --fs-xs:clamp(.78rem,.76rem + .08vw,.82rem);
  --fs-sm:clamp(.86rem,.84rem + .1vw,.9rem);
  --fs-base:clamp(.94rem,.91rem + .14vw,1rem);
  --fs-lg:clamp(1.06rem,1rem + .3vw,1.2rem);
  --fs-xl:clamp(1.55rem,1.3rem + 1.1vw,2.1rem);
  --fs-2xl:clamp(1.3rem,1rem + 1.6vw,2.3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.au-body{margin:0;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:var(--fs-base);line-height:1.55;color:var(--au-text);background:var(--au-bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--au-navy)}
.au-skip{position:absolute;left:12px;top:12px;z-index:50;padding:10px 16px;background:var(--au-navy);color:#fff;border-radius:8px;font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.au-skip:focus{transform:none;outline:3px solid #fff;outline-offset:2px}

/* ── Layout ─────────────────────────────────────────────── */
.au-wrap{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}
.au-main{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh}
.au-pane{display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vh,40px) clamp(20px,4vw,56px);transition:opacity .35s ease;min-width:0}
.au-pane--register{grid-column:1;grid-row:1}
.au-pane--login{grid-column:2;grid-row:1}
.au-wrap--single .au-pane{grid-column:2}
.au-pane[aria-hidden="true"]{opacity:0;pointer-events:none}

/* ── Navy panel ─────────────────────────────────────────── */
.au-aside{position:absolute;top:0;bottom:0;left:0;width:50%;z-index:3;color:#fff;padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden;background:var(--au-navy-dd);transition:transform .6s var(--au-ease)}
.au-wrap[data-mode="register"] .au-aside{transform:translateX(100%)}
.au-aside__photo,.au-aside__photo img{position:absolute;inset:0;width:100%;height:100%}
.au-aside__photo img{object-fit:cover;object-position:center}
.au-aside::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(2,78,134,.93) 0%,rgba(1,61,107,.88) 45%,rgba(1,43,76,.8) 100%);pointer-events:none}
.au-aside>*:not(.au-aside__photo){position:relative;z-index:2}
.au-aside__brand{display:inline-flex;align-self:flex-start;border-radius:8px}
.au-aside__brand img{width:132px;height:auto;filter:brightness(0) invert(1)}
.au-aside__brand:focus-visible{outline:3px solid #fff;outline-offset:6px}
.au-aside__stage{position:relative;min-height:290px}
.au-copy{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .32s ease;pointer-events:none;visibility:hidden}
.au-copy.is-on,
.au-wrap[data-mode="login"] .au-copy[data-for="login"],
.au-wrap[data-mode="register"] .au-copy[data-for="register"]{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:.26s}
.au-aside__title{margin:0;font-size:var(--fs-2xl);font-weight:700;line-height:1.18;letter-spacing:-.02em;color:#fff;max-width:460px}
.au-aside__pts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:440px}
.au-aside__pts li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.92);font-size:var(--fs-base)}
.au-aside__pts svg{flex:0 0 auto;margin-top:3px;color:#fff}
.au-aside__hint{margin:34px 0 0;color:rgba(255,255,255,.78);font-size:var(--fs-sm)}
.au-aside__switch{display:inline-flex;align-items:center;margin-top:10px;border:1.5px solid rgba(255,255,255,.8);color:#fff;border-radius:10px;padding:11px 20px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.au-aside__switch:hover{background:#fff;color:var(--au-navy)}
.au-aside__switch:focus-visible{outline:3px solid #fff;outline-offset:3px}
.au-aside__foot{margin:0;font-size:var(--fs-xs);color:rgba(255,255,255,.7)}

/* ── Card + form ────────────────────────────────────────── */
.au-card{width:100%;max-width:460px;background:var(--au-card);border:1px solid var(--au-line);border-radius:20px;padding:clamp(24px,2.6vw,36px);box-shadow:0 1px 2px rgba(20,24,43,.04),0 18px 48px rgba(20,24,43,.07)}
.au-card--wide{max-width:560px}
.au-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;font-size:var(--fs-sm);font-weight:600;color:var(--au-mute);text-decoration:none;border-radius:6px}
.au-back:hover{color:var(--au-navy)}
.au-title{margin:0 0 6px;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--au-ink)}
.au-sub{margin:0 0 20px;color:var(--au-mute);font-size:var(--fs-base)}
.au-form{display:grid;gap:16px}
.au-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.au-field{display:grid;gap:6px;min-width:0}
.au-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.au-field label{font-weight:600;font-size:var(--fs-sm);color:var(--au-ink)}
.au-opt{font-weight:400;color:var(--au-mute);margin-left:4px}
.au-field input,.au-field select,.au-field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--au-line);border-radius:var(--au-radius);font:inherit;font-size:var(--fs-base);color:var(--au-ink);background:var(--au-card);transition:border-color .15s,box-shadow .15s}
.au-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--au-mute) 50%),linear-gradient(135deg,var(--au-mute) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.au-field input::placeholder{color:#8b93a1}
.au-field input:hover,.au-field select:hover{border-color:#c5ccd6}
.au-field input:focus,.au-field select:focus{outline:none;border-color:var(--au-navy);box-shadow:var(--au-ring)}
.au-field input[aria-invalid="true"],.au-field select[aria-invalid="true"]{border-color:var(--au-red)}
.au-password{position:relative}
.au-password input{padding-right:52px}
.au-password__toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;background:transparent;color:var(--au-mute);border-radius:10px;cursor:pointer;transition:color .15s,background .15s}
.au-password__toggle:hover{color:var(--au-navy);background:var(--au-bg)}
.au-password__toggle:focus-visible{outline:2px solid var(--au-navy);outline-offset:0;color:var(--au-navy)}
.au-password__toggle .au-eye-off,.au-password__toggle[aria-pressed="true"] .au-eye{display:none}
.au-password__toggle[aria-pressed="true"] .au-eye-off{display:block}
.au-hint{margin:0;font-size:var(--fs-xs);color:var(--au-mute)}
.au-error{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--au-red)}
.au-check{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--au-ink);cursor:pointer;user-select:none}
.au-check input{width:18px;height:18px;margin:0;accent-color:var(--au-navy)}
.au-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:12px 20px;border:0;border-radius:var(--au-radius);background:var(--au-navy);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-base);cursor:pointer;transition:background .15s,transform .15s}
.au-btn:hover{background:var(--au-navy-d)}
.au-btn:active{transform:translateY(1px)}
.au-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--au-navy)}
.au-link{color:var(--au-navy);font-weight:600;text-decoration:none}
.au-link:hover{text-decoration:underline}
.au-link--sm{font-size:var(--fs-xs)}
.au-link--button{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.au-alt{margin:22px 0 0;text-align:center;font-size:var(--fs-sm);color:var(--au-mute)}
.au-alt a{font-weight:600;text-decoration:none}
.au-alt a:hover{text-decoration:underline}
.au-legal{margin:0;font-size:var(--fs-xs);color:var(--au-mute);text-align:center}
.au-legal a{color:inherit;text-decoration:underline}
.au-alert{margin:0 0 18px;padding:12px 14px;border-radius:var(--au-radius);font-size:var(--fs-sm);font-weight:600;border:1px solid}
.au-alert--ok{color:var(--au-green);border-color:rgba(11,107,80,.3);background:#fff}
.au-alert--error{color:var(--au-red);border-color:rgba(180,35,47,.35);background:#fff}
:where(.au-body) a:focus-visible,.au-link--button:focus-visible{outline:2px solid var(--au-navy);outline-offset:2px}

/* Social */
.au-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.au-social__btn:only-child{grid-column:1 / -1}
@media(max-width:359px){.au-social{grid-template-columns:1fr}}
.au-social__btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border:1.5px solid var(--au-line);border-radius:var(--au-radius);background:#fff;color:var(--au-ink);font-weight:600;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.au-social__btn:hover{border-color:#b9c2cd;box-shadow:0 2px 8px rgba(20,24,43,.06)}
.au-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--au-mute);font-size:var(--fs-xs)}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--au-line)}
.au-form .au-or{margin:2px 0}


/* ── Phones and tablets ─────────────────────────────────── */
/* Desktop: exactly one screen; the form card is centred, the panel full height. */
@media (min-width:901px){
  .au-wrap,.au-main{height:100vh;height:100dvh;min-height:0}
  .au-pane{overflow-y:auto}
}
@media (min-width:901px) and (max-height:820px){
  .au-aside{padding:28px 40px;gap:20px}
  .au-aside__stage{min-height:250px}
  .au-aside__pts{margin-top:18px;gap:10px}
  .au-aside__hint{margin-top:22px}
  .au-card{padding:22px 28px}
  .au-back{margin-bottom:12px}
  .au-title{font-size:clamp(1.4rem,1.2rem + .8vw,1.75rem)}
  .au-sub{margin-bottom:14px}
  .au-form{gap:12px}
  .au-field input,.au-field select{min-height:44px;padding:10px 14px}
  .au-btn{min-height:46px}
  .au-alt{margin-top:14px}
  .au-or{margin:12px 0}
}
@media (max-width:900px){
  .au-wrap{overflow:visible}
  .au-main{display:block;min-height:0}
  .au-aside{position:relative;width:100%;transform:none!important;padding:20px 20px 24px;gap:14px;transition:none;min-height:0}
  .au-aside__brand img{width:108px}
  .au-aside__stage{min-height:0}
  .au-copy{position:relative;display:none;opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .au-copy.is-on,
  .au-wrap[data-mode="login"] .au-copy[data-for="login"],
  .au-wrap[data-mode="register"] .au-copy[data-for="register"]{display:block}
  .au-aside__title{font-size:var(--fs-lg)}
  .au-aside__pts,.au-aside__foot{display:none}
  .au-aside__hint{display:inline;margin:0 8px 0 0}
  .au-aside__switch{margin-top:12px;padding:8px 14px;font-size:var(--fs-sm)}
  .au-pane,.au-wrap--single .au-pane{padding:16px 16px 28px}
  .au-pane[aria-hidden="true"]{display:none}
  .au-pane:not([aria-hidden="true"]){animation:au-in .35s ease}
  .au-back{margin-bottom:16px}
  .au-card{padding:22px 18px;border-radius:16px}
}
@media (max-width:520px){
  .au-grid{grid-template-columns:1fr}
  .au-field input,.au-field select{font-size:16px}
}
@keyframes au-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.au-aside,.au-copy,.au-pane{transition:none!important;animation:none!important}}

/* Staff signed in to /admin (guard web) on the customer login: separate accounts (2026-10-22) */
.au-staff{margin:0 0 14px;padding:10px 12px;border:1px solid var(--au-line);border-radius:var(--au-radius);background:#fff;font-size:var(--fs-xs);line-height:1.5;color:var(--au-ink)}
.au-staff a{color:#024e86;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.au-staff small{display:block;color:var(--au-mute)}
