/* DriveEasy Customer accounts — shares the public site's dark
   "instrument cluster" theme so Register/Login/My Bookings feel like a
   continuation of Index.aspx rather than a different product. */

:root{
  --bg:#0A1120;
  --surface:#101B31;
  --surface-2:#16233D;
  --surface-3:#1C2C4A;
  --border:#243657;
  --border-soft:#1B2A46;
  --ink:#F3F6FB;
  --ink-muted:#8FA0BD;
  --ink-faint:#5B6E90;
  --accent:#3EE8D8;
  --accent-strong:#22C7B8;
  --accent-ink:#052824;
  --amber:#FFB444;
  --amber-bg:#3A2A0E;
  --green:#6EE7A0;
  --green-bg:#0E3324;
  --danger:#FF7A7A;
  --danger-bg:#3A1620;
  --neutral:#B9C4DA;
  --neutral-bg:#1C2C4A;

  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{text-wrap:balance;margin:0;}
p{margin:0;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ---------- Page loader (same pattern as Index.aspx / Admin) ---------- */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .25s ease,visibility .25s ease;
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.page-loader-ring{
  width:56px;height:56px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  animation:page-loader-spin .8s linear infinite;
}
.page-loader-mark{
  width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:0.66rem;
  animation:page-loader-spin .8s linear infinite reverse;
}
@keyframes page-loader-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .page-loader-ring,.page-loader-mark{animation:none;}
}

/* ---------- Shared brand header ---------- */
.account-header{
  position:sticky;top:0;z-index:40;
  background:rgba(10,17,32,0.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.account-header-inner{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  text-decoration:none;
}
.brand-mark{
  width:32px;height:32px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:0.8rem;flex-shrink:0;
}
.account-header-actions{display:flex;align-items:center;gap:14px;font-size:0.9rem;}
.account-header-actions a{color:var(--ink-muted);text-decoration:none;font-weight:600;}
.account-header-actions a:hover{color:var(--ink);}
.account-welcome{color:var(--ink-muted);font-size:0.86rem;}
.account-welcome strong{color:var(--ink);}

/* ---------- Auth pages (Register / Login) ---------- */
.auth-shell{
  min-height:calc(100vh - 65px);
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;position:relative;overflow:hidden;
}
.auth-shell::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(600px 320px at 82% -10%, rgba(62,232,216,0.14), transparent 60%),
    radial-gradient(500px 260px at -5% 30%, rgba(183,156,255,0.08), transparent 60%);
  pointer-events:none;
}
.auth-card{
  position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:36px;width:100%;max-width:420px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,0.6);
}
.auth-card h1{font-family:var(--font-display);font-weight:700;font-size:1.6rem;margin-bottom:6px;}
.auth-sub{color:var(--ink-muted);font-size:0.92rem;margin-bottom:24px;}
.auth-error{
  display:block;background:var(--danger-bg);color:var(--danger);
  padding:10px 12px;border-radius:var(--radius-s);font-size:0.85rem;margin-bottom:16px;
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-faint);font-weight:600;}
.field small.field-hint{color:var(--ink-faint);font-size:0.76rem;text-transform:none;letter-spacing:0;font-weight:400;}
.input{
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
  border-radius:var(--radius-s);padding:11px 12px;font-family:inherit;font-size:0.92rem;width:100%;
}
.input:focus{border-color:var(--accent);}
.field-error{color:var(--danger);font-size:0.78rem;}
.btn-primary{
  width:100%;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-s);
  padding:13px 16px;font-weight:700;font-size:0.98rem;cursor:pointer;margin-top:6px;
  transition:background .15s ease, transform .15s ease;
}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px);}
.auth-switch{margin-top:20px;text-align:center;font-size:0.88rem;color:var(--ink-muted);}
.auth-switch a{color:var(--accent);text-decoration:none;font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}

/* ---------- My Bookings dashboard ---------- */
.account-main{max-width:900px;margin:0 auto;padding:36px 24px 80px;}
.account-title{font-family:var(--font-display);font-weight:700;font-size:1.7rem;margin-bottom:6px;}
.account-sub{color:var(--ink-muted);font-size:0.95rem;margin-bottom:28px;}
.booking-list{display:flex;flex-direction:column;gap:14px;}
.booking-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.booking-item-main{display:flex;flex-direction:column;gap:4px;}
.booking-item-car{font-family:var(--font-display);font-weight:700;font-size:1.1rem;}
.booking-item-meta{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-muted);}
.booking-item-right{display:flex;align-items:center;gap:16px;}
.booking-item-price{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;text-align:right;}
.booking-item-price small{display:block;font-family:var(--font-body);font-weight:400;font-size:0.72rem;color:var(--ink-faint);}
.status-pill{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
}
.status-good{background:var(--green-bg);color:var(--green);}
.status-warning{background:var(--amber-bg);color:var(--amber);}
.status-danger{background:var(--danger-bg);color:var(--danger);}
.status-neutral{background:var(--neutral-bg);color:var(--neutral);}
.account-empty{
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-m);
  padding:40px 24px;text-align:center;color:var(--ink-muted);
}
.account-empty a{color:var(--accent);text-decoration:none;font-weight:600;}
.account-empty a:hover{text-decoration:underline;}

@media (max-width:640px){
  .auth-card{padding:26px;}
  .account-main{padding:28px 16px 70px;}
  .booking-item{flex-direction:column;align-items:flex-start;}
  .booking-item-right{width:100%;justify-content:space-between;}
}