/* ============================================================
   Ban Leong: Online Renewal Portal
   Builds on design-system.css. Auth, dashboard and renewal flow.
   ============================================================ */

/* ---- Auth shell ---- */
.auth-wrap { min-height: calc(100dvh - var(--header-h)); display: grid; grid-template-columns: 1.05fr 0.95fr; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } }
.auth-aside {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--gold-strong) 0%, #7c5e16 100%);
  color: #2a210a; padding: clamp(2rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.auth-aside::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.25;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.25) 1px, transparent 0); background-size: 26px 26px; }
.auth-aside .hl { font-family: var(--font-serif); font-size: var(--step-4); color:#2a210a; max-width: 16ch; line-height:1.1; }
.auth-aside .sub { color:#4a3a12; max-width: 38ch; }
.auth-points { display:flex; flex-direction:column; gap:.9rem; }
.auth-points li { display:flex; gap:.7rem; align-items:flex-start; color:#332708; }
.auth-points svg { width:22px; height:22px; flex:none; margin-top:2px; }
.auth-card { padding: clamp(1.5rem, 4vw, 3rem); display:flex; flex-direction:column; justify-content:center; background: var(--paper); }
.auth-inner { width:100%; max-width: 420px; margin-inline:auto; }
.auth-inner h1 { font-size: var(--step-3); }
.auth-inner .lead { margin-top:.6rem; }

/* ---- Password field w/ toggle ---- */
.pw-field { position: relative; }
.pw-field .input { padding-right: 3rem; }
.pw-toggle { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:transparent; color:var(--muted); border-radius:var(--r-sm); display:grid; place-items:center; }
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.pw-toggle svg { width:20px; height:20px; }

/* ---- Remember / checkbox row ---- */
.check-row { display:flex; align-items:center; gap:.6rem; font-size: var(--step-0); }
.check-row input[type=checkbox] { width:18px; height:18px; accent-color: var(--gold-strong); }
.linkish { color: var(--gold-deep); font-weight:600; }
.linkish:hover { text-decoration: underline; }

/* ---- Password strength ---- */
.pw-strength { display:flex; gap:.35rem; margin-top:.5rem; }
.pw-strength i { height:5px; flex:1; border-radius:999px; background: var(--line-strong); transition: background .3s var(--ease); }
.pw-strength[data-score="1"] i:nth-child(-n+1),
.pw-strength[data-score="2"] i:nth-child(-n+2),
.pw-strength[data-score="3"] i:nth-child(-n+3),
.pw-strength[data-score="4"] i:nth-child(-n+4) { background: var(--success); }
.pw-strength[data-score="1"] i:nth-child(-n+1){ background: var(--danger); }
.pw-strength[data-score="2"] i:nth-child(-n+2){ background: var(--warn); }
.pw-meter-label { font-size: var(--step--1); color: var(--muted); margin-top:.3rem; }

/* ---- Stepper (registration) ---- */
.stepper { display:flex; align-items:center; gap:.5rem; margin-bottom:1.75rem; }
.stepper .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; background: var(--surface-2); color: var(--muted); border:1px solid var(--line-strong); font-size: var(--step--1); }
.stepper .dot.active { background: var(--gold); color:#2a210a; border-color: transparent; }
.stepper .dot.done { background: var(--success); color:#fff; border-color: transparent; }
.stepper .bar { flex:1; height:2px; background: var(--line); }
.stepper .bar.done { background: var(--success); }

/* ---- Dashboard ---- */
.dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.dash-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem,2.5vw,1.5rem); }
.ticket-card { grid-column: span 6; display:flex; flex-direction:column; gap:.25rem; }
@media (max-width: 820px){ .ticket-card { grid-column: span 12; } }
.ticket-card .top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.ticket-no { font-family: var(--font-serif); font-size: var(--step-2); }
.due-pill { font-size: var(--step--1); font-weight:700; padding:.35rem .75rem; border-radius:var(--r-pill); border:1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); white-space:nowrap; }
.due-pill.soon { color:#8a5a14; background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.due-pill.over { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.ticket-meta { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem 1.5rem; margin-top:1rem; }
.mini-stat .k { font-size: var(--step--1); color: var(--muted); }
.mini-stat .v { font-size: var(--step-1); font-weight:700; font-variant-numeric: tabular-nums; }
.mini-stat .v.gold { color: var(--gold-strong); }
.ticket-actions { display:flex; gap:.6rem; margin-top:1.25rem; flex-wrap:wrap; }
.stat-cards { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
@media (max-width: 820px){ .stat-cards { grid-template-columns: repeat(2,1fr); } }
.stat-card { padding:1.1rem 1.25rem; }
.stat-card .k { font-size: var(--step--1); color: var(--muted); }
.stat-card .v { font-family: var(--font-serif); font-size: var(--step-3); line-height:1; margin-top:.4rem; }
.stat-card .v.gold { color: var(--gold-strong); }

/* ---- Summary / confirmation ---- */
.summary-list { border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.summary-list .kv:last-child { border-bottom:0; }
.total-pay { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.25rem; margin-top:1rem; background: var(--gold-tint); border:1px dashed color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--r-md); }
.total-pay .v { font-family: var(--font-serif); font-size: var(--step-3); color: var(--gold-deep); }

/* ---- Sticky mobile action bar ---- */
.sticky-actions { position: sticky; bottom: 0; left:0; right:0; z-index: 5;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
  border-top:1px solid var(--line); padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  display:flex; gap:.75rem; }
.sticky-actions .btn { flex:1; }
@media (min-width: 760px){ .sticky-actions { display:none; } }

/* ---- Success / receipt ---- */
.success-mark { width:64px; height:64px; border-radius:50%; background: var(--success-soft); color: var(--success); display:grid; place-items:center; }
.success-mark svg { width:32px; height:32px; }
.receipt-grid { display:grid; gap:0; }

/* ---- Benefit cards (landing) ---- */
.benefit { display:flex; gap:1rem; align-items:flex-start; }
.benefit .icon-tile { flex:none; }
.pay-method { display:flex; align-items:center; gap:.85rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.pay-method svg { width:26px; height:26px; color: var(--gold-deep); }



/* ---- Renewal flow: ticket picker ---- */
.ticket-pick-list { display:grid; gap:1rem; }
.ticket-pick {
  width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:1.1rem 1.25rem; transition:border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.ticket-pick:hover { border-color: var(--gold); }
.ticket-pick.selected { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); background: var(--gold-tint); }
.ticket-pick .tp-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ticket-pick .ticket-no { font-family: var(--font-serif); font-size: var(--step-2); }
.ticket-pick .tp-meta { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:.35rem; color: var(--muted); font-size: var(--step--1); }
.ticket-pick .tp-amt { margin-top:.5rem; font-size: var(--step-0); }

/* ---- Renewal flow: QR payment ---- */
.qr-box { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap;
  padding:1.5rem; border:1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.qr-img { width:170px; height:170px; flex:none; border-radius: var(--r-sm); overflow:hidden; border:1px solid var(--line-strong); background:#fff; }
.qr-img svg { display:block; }
.qr-meta { flex:1; min-width:200px; display:grid; gap:.5rem; }
.qr-meta .kv { display:flex; justify-content:space-between; gap:1rem; font-size: var(--step-0); }
@media (max-width: 520px){ .qr-box { flex-direction:column; align-items:flex-start; } .qr-img { width:200px; height:200px; } }

/* Availability note under hero CTA */
.note { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted); max-width: 52ch; font-weight: var(--fw-normal, 400); text-align: left; }
.note svg { flex: none; width: 16px; height: 16px; color: var(--gold-strong); margin-top: .15rem; }
.note b { color: var(--ink); font-weight: var(--fw-semi, 600); }