/* ==========================================================================
   rewards.css — the Gift cards page, the Coupons page, and the sign-in box.

   Loaded after amazon.css, so it inherits the HARDTRAC palette (--ht-violet,
   --ht-gold, --ht-teal, --ht-pink, --ink, --line-2, --canvas). Nothing here
   renames an existing class; it only adds the .rw-* / .cp-* / .gc-* pieces
   these two pages need, plus the entrance animation for #authModal.
   ========================================================================== */

/* ---- shared page furniture ---- */
.rw-page{max-width:1120px}
.rw-crumb{font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.rw-crumb a{color:var(--brand)}
.rw-crumb span{margin:0 4px;color:var(--ink-3)}
.rw-page h1,.rw-card h2,.rw-faq h2{
  font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0 0 4px;color:var(--ink);
}
.rw-h3{font-size:13px;font-weight:800;margin:18px 0 8px;color:var(--ink-2)}
.rw-sub{font-size:13px;color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.rw-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.rw-note{font-size:11.5px;color:var(--ink-2);line-height:1.5;display:block}
.rw-note .good{color:var(--green);font-weight:700}
.rw-note .bad{color:var(--ht-pink);font-weight:700}
.rw-empty{
  border:1.5px dashed var(--line-2);border-radius:var(--radius);
  padding:18px;text-align:center;font-size:13px;color:var(--ink-2);
}
.rw-empty.big{padding:48px 18px;font-size:14px;background:#fff}

/* ---- the hero band: balance on the left, the one action on the right ---- */
.rw-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:center;
  background:linear-gradient(120deg,#2B2658 0%,#4B3FA8 58%,#6C4CF1 100%);
  color:#fff;border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:16px;
}
.rw-hero.coupons{background:linear-gradient(120deg,#2B2658 0%,#8E2E63 62%,#E0245E 100%)}
.rw-hero-bal b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;margin:4px 0 6px;line-height:1}
.rw-hero-bal .rw-note{color:rgba(255,255,255,.82)}
.rw-hero-form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px}
.rw-hero-form .rw-note{color:rgba(255,255,255,.8);margin-top:7px}
.rw-inline{display:flex;gap:8px}
.rw-inline input{
  flex:1;min-width:0;height:46px;border:0;border-radius:var(--radius);padding:0 14px;
  font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.96);color:var(--ink);
}
.rw-inline input::placeholder{color:#9aa;font-weight:500;letter-spacing:.04em}
.rw-inline input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.rw-inline .btn{height:46px;flex:0 0 auto;padding:0 22px}
.rw-shake{animation:rwShake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes rwShake{
  10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-6px)}100%{transform:translateX(0)}
}

/* ---- cards ---- */
.rw-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.rw-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:18px 18px 20px;margin-bottom:14px;
}
.rw-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rw-card .field{margin-bottom:12px}
.rw-card .btn-block{margin-top:2px}

/* ---- gift card rows ---- */
.gc-list{display:flex;flex-direction:column;gap:8px}
.gc-list.dim{opacity:.62}
.gc-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--bg-2);
}
.gc-row code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--ink);flex:1 1 190px;
}
.gc-row b{font-size:14px}
.gc-made{
  margin-top:12px;border:1.5px solid var(--ht-violet);border-radius:var(--radius);
  background:linear-gradient(135deg,#F4F1FF,#EAE4FF);padding:14px;text-align:center;
  animation:rwPop .4s cubic-bezier(.2,.9,.25,1.2) both;
}
.gc-made b{display:block;font-size:14px;margin-bottom:6px}
.gc-made code{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;font-weight:800;letter-spacing:.12em;color:var(--ht-violet);margin-bottom:6px;
  word-break:break-all;
}
.gc-made .btn{margin-top:9px}
.gc-made .gc-msg{display:block;margin-top:4px;font-style:italic}
.gc-made-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---- gift card bill: value + GST + fee = total ---- */
.gc-bill{
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg-2);
  padding:10px 14px;margin:2px 0 12px;font-size:13.5px;
}
.gc-bill-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--ink-2)}
.gc-bill-row span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}
.gc-bill-row.total{border-top:1px dashed var(--line-2);margin-top:5px;padding-top:9px;font-size:15.5px;font-weight:800;color:var(--ink)}
.gc-bill-note{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}

/* ---- pay with ---- */
.gc-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.gc-pay-opt{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:var(--radius);padding:10px 12px;background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.gc-pay-opt input{margin-top:3px;accent-color:var(--ht-violet)}
.gc-pay-opt b{display:block;font-size:13.5px;color:var(--ink)}
.gc-pay-opt small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.gc-pay-opt:has(input:checked){border-color:var(--ht-violet);background:#F4F1FF}
.gc-pay-opt.off{opacity:.55;cursor:not-allowed}
@media (max-width:560px){ .gc-pay{grid-template-columns:1fr} }
@keyframes rwPop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}

/* ---- balance table ---- */
.rw-table{width:100%;border-collapse:collapse;font-size:13px}
.rw-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-2);padding:7px 8px;border-bottom:1px solid var(--line-2);
}
.rw-table td{padding:9px 8px;border-bottom:1px solid var(--line)}
.rw-table .r{text-align:right}
.rw-table .up{color:var(--green);font-weight:700}
.rw-table .down{color:var(--ink);font-weight:700}

/* ---- coupons: a real ticket, notch and all ---- */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px;margin-bottom:16px}
.cp{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.cp:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--ht-violet)}
.cp-left{
  background:linear-gradient(135deg,#F4F1FF 0%,#E6DEFF 100%);
  padding:18px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.cp-left b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ht-violet);line-height:1.1}
.cp-left span{font-size:12px;color:var(--ink-2);line-height:1.45}
.cp-right{padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:flex-start}
.cp-right code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:800;
  letter-spacing:.1em;color:var(--ink);border:1.5px dashed var(--line-2);
  border-radius:var(--radius-sm);padding:5px 10px;background:var(--bg-2);
}
/* the two notches that make it read as a torn-off ticket */
.cp::before,.cp::after{
  content:"";position:absolute;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;
  background:var(--canvas);z-index:2;
}
.cp::before{top:-8px}
.cp::after{bottom:-8px}

/* ---- the explainer strip at the foot of both pages ---- */
.rw-faq{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:18px}
.rw-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px;margin-top:10px}
.rw-faq-grid b{display:block;font-size:13px;margin-bottom:3px}
.rw-faq-grid span{font-size:12.5px;color:var(--ink-2);line-height:1.5}

@media (max-width:860px){
  .rw-hero{grid-template-columns:1fr;gap:14px;padding:18px}
  .rw-hero-bal b{font-size:28px}
  .rw-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rw-g2{grid-template-columns:1fr}
  .rw-inline{flex-wrap:wrap}
  .rw-inline .btn{width:100%}
  .cp{grid-template-columns:1fr}
  .cp::before,.cp::after{display:none}
  .cp-right{border-top:1.5px dashed var(--line-2)}
  .rw-table th:nth-child(4),.rw-table td:nth-child(4){display:none}
}

/* ==========================================================================
   SIGN-IN BOX — one job, and it should feel like one.

   The role tabs and the staff links are gone from the markup; staff use
   /admin/login and /console/login directly. What is left gets a proper
   entrance: the sheet springs up, then each row arrives a beat after the one
   above it, which reads as deliberate rather than as a slow page.
   ========================================================================== */
#authModal .modal-body{padding-top:6px}
/* The entrance animates the individual `translate` / `scale` properties, NOT
   `transform`. On desktop the modal is centred with
   transform:translate(-50%,-50%); a keyframe ending in transform:none (with
   fill-mode both) wiped that out and parked the box's top-left corner at the
   centre of the screen — the sign-in box hanging off the bottom-right.
   `translate` and `scale` stack on top of `transform`, so centring survives. */
#authModal.open{animation:authSheet .42s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes authSheet{
  from{opacity:0;translate:0 22px;scale:.985}
  to  {opacity:1;translate:0 0;scale:1}
}
@media (prefers-reduced-motion:reduce){ #authModal.open{animation:none} }
@media (prefers-reduced-motion:no-preference){
  #authModal.open #gRow,
  #authModal.open #nameField,
  #authModal.open .field,
  #authModal.open #authSubmit,
  #authModal.open #authHint,
  #authModal.open #authToggleRow{animation:authRow .44s cubic-bezier(.2,.8,.25,1) both}
  #authModal.open #gRow        {animation-delay:.05s}
  #authModal.open .field:nth-of-type(1){animation-delay:.10s}
  #authModal.open .field:nth-of-type(2){animation-delay:.15s}
  #authModal.open #authSubmit  {animation-delay:.20s}
  #authModal.open #authHint    {animation-delay:.25s}
  #authModal.open #authToggleRow{animation-delay:.28s}
  @keyframes authRow{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}
/* a wrong password should be felt, not just read */
#authModal .modal-body.wrong{animation:rwShake .45s cubic-bezier(.36,.07,.19,.97) both}
#authSubmit{position:relative;overflow:hidden;transition:transform .12s ease}
#authSubmit:active{transform:scale(.985)}
#authSubmit.busy{color:transparent}
#authSubmit.busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:authSpin .7s linear infinite;
}
@keyframes authSpin{to{transform:rotate(360deg)}}
.auth-staff{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  text-align:center;font-size:11.5px;color:var(--ink-3);
}
.auth-staff a{color:var(--ink-2);font-weight:600}

/* ==========================================================================
   ACCOUNT POP-UP — a switchboard, not a workspace.

   Gift cards and coupons moved to their own pages, so what is left here is
   three numbers and a list of doors. Each row says where it goes AND what is
   behind it, which is the difference between a menu and a guess.
   ========================================================================== */
.acct-stats a.acct-stat{text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.acct-stats a.acct-stat:hover{border-color:var(--ht-violet);transform:translateY(-1px)}
.acct-links{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.acct-links a{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:11px 13px;background:#fff;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.acct-links a:hover{border-color:var(--ht-violet);background:var(--brand-soft);transform:translateY(-1px)}
.acct-links .ai{
  flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);font-size:16px;color:var(--ht-violet);font-weight:800;
}
.acct-links b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.acct-links em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2);line-height:1.4}
#gcBuyCard .rw-g2{margin-top:12px}