/* ════════════════════════════════════════════════════════════════
   NRMAi · Order Portal — brand theme overlay v3
   Palette pulled directly from the NRMAi / NRMA Insurance
   Brand Identity Guidelines (Feb 2025).
     Primary:   A Help Company™ Blue   #010C66   (PMS 2748)
     Primary:   Warm White             #F7F1EA   (PMS Warm Grey 01 55%)
     Blue 60%:  #676DA3                Blue 40%: #999EC2
     Blue 20%:  #CCCEE0                Blue 10%: #E6E7F0
   Approved AAA combo used throughout: Warm White bg / Blue fg.
   !important is used on :root variables so this file wins
   regardless of where the <link> sits relative to <style>.
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #F7F1EA !important;   /* Warm White */
  --panel:   #FFFFFF !important;   /* Standard White card */
  --panel2:  #E6E7F0 !important;   /* Blue tint 04 — input surfaces */
  --line:    #CCCEE0 !important;   /* Blue tint 03 — dividers */
  --text:    #010C66 !important;   /* A Help Company™ Blue */
  --muted:   #676DA3 !important;   /* Blue tint 01 — secondary text */
  --accent:  #010C66 !important;   /* Blue CTAs */
  --accent2: #20298A !important;   /* Blue hover */
  --danger:  #B00020 !important;   /* Accessible red for required-field only */
  --ok:      #010C66 !important;   /* Success state uses brand blue, not green */
}

/* ── Global ─────────────────────────────────── */
html, body {
  background: #F7F1EA;
  color: #010C66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { letter-spacing: .005em; }
h1, h2 { letter-spacing: -.01em; font-weight: 600; color: #010C66; }

/* ── Topbar ────────────────────────────────── */
header.topbar {
  background: rgba(247, 241, 234, .92) !important;
  border-bottom: 1px solid #CCCEE0;
  padding: 14px 18px;
}
header.topbar .logo {
  /* Hide the placeholder text and show the SVG instead */
  font-size: 0 !important;
  line-height: 0;
  width: 132px;
  height: 42px;
  background: url('./logo.svg') no-repeat left center;
  background-size: contain;
}
header.topbar .logo span { display: none; }

header.topbar #btn-cart {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  color: #010C66;
  padding: 9px 14px 9px 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
header.topbar #btn-cart:hover { border-color: #010C66; }
header.topbar #btn-cart .pill {
  background: #010C66;
  color: #F7F1EA;
}

/* ── Passcode gate ─────────────────────────── */
.gate {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-shadow: 0 2px 12px rgba(1, 12, 102, .04);
}
.gate::before {
  content: '';
  display: block;
  width: 200px;
  height: 60px;
  margin: 0 auto 20px;
  background: url('./logo.svg') no-repeat center;
  background-size: contain;
}
.gate h1 {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #676DA3;
  margin: 0 0 4px;
}
.gate p.sub {
  text-align: center;
  font-size: 13px;
  color: #676DA3;
  margin: 0 0 18px;
}
.gate label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #676DA3;
  font-weight: 600;
}
.gate input {
  background: #F7F1EA;
  border: 1px solid #CCCEE0;
  color: #010C66;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  letter-spacing: .25em;
  text-align: center;
}
.gate input:focus { outline: none; border-color: #010C66; }
.gate button.primary {
  background: #010C66;
  color: #F7F1EA;
  border-radius: 999px;
  padding: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 18px;
  transition: background .15s ease;
}
.gate button.primary:hover { background: #20298A; }
.gate .err { color: #B00020; }

/* ── Search bar ────────────────────────────── */
.search-row {
  background: #F7F1EA !important;
}
.search-row input {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  color: #010C66;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
}
.search-row input::placeholder { color: #999EC2; }
.search-row input:focus { outline: none; border-color: #010C66; }
.search-row .count {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #676DA3;
}

/* ── Catalogue cards ───────────────────────── */
.card {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  border-color: #010C66;
  box-shadow: 0 2px 8px rgba(1, 12, 102, .06);
}
.card .thumb {
  background-color: #E6E7F0;
  color: #676DA3;
}
.card .name {
  font-weight: 500;
  font-size: 14px;
  color: #010C66;
}
.card .meta {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #676DA3;
}
.card .avail {
  font-size: 12px;
  font-weight: 500;
  color: #676DA3;
}
.card .avail.low  { color: #B87500; }
.card .avail.zero { color: #B00020; }

.card .add {
  background: #010C66;
  color: #F7F1EA;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .15s ease;
}
.card .add:hover { background: #20298A; }
.card .add.in-cart {
  background: #676DA3;
  color: #FFFFFF;
}
.card .add:disabled {
  background: #CCCEE0;
  color: #999EC2;
}

/* ── Stepper ──────────────────────────────── */
.stepper {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
}
.stepper button { color: #010C66; }
.stepper button:hover { background: #E6E7F0; }
.stepper input  { color: #010C66; }

/* ── Empty-state ──────────────────────────── */
.state {
  background: #FFFFFF;
  border: 1px dashed #CCCEE0;
  color: #676DA3;
}

/* ── Cart drawer ──────────────────────────── */
.drawer {
  background: #F7F1EA !important;
  border-left: 1px solid #CCCEE0;
}
.drawer header {
  padding: 18px 20px;
  border-bottom: 1px solid #CCCEE0;
  background: #FFFFFF;
}
.drawer header h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #010C66;
}
.drawer header button.close { color: #676DA3; }
.drawer header button.close:hover { color: #010C66; }

.cart-item {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  border-radius: 12px;
  padding: 12px;
}
.cart-item .cthumb { background-color: #E6E7F0; }
.cart-item .cname { font-weight: 500; color: #010C66; }
.cart-item .cmeta {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #676DA3;
}
.cart-item .cremove { color: #676DA3; }
.cart-item .cremove:hover { color: #B00020; }

.form label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #676DA3;
  font-weight: 600;
  margin-top: 14px;
}
.form input, .form textarea {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  color: #010C66;
  border-radius: 10px;
  padding: 12px 14px;
}
.form input::placeholder, .form textarea::placeholder { color: #999EC2; }
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: #010C66;
}

.drawer footer {
  background: #FFFFFF;
  border-top: 1px solid #CCCEE0;
  padding: 14px 18px;
}
.drawer footer .total .big {
  font-size: 16px;
  font-weight: 600;
  color: #010C66;
}
.drawer footer .total .small {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #676DA3;
}
.drawer footer .place {
  background: #010C66;
  color: #F7F1EA;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  transition: background .15s ease;
}
.drawer footer .place:hover { background: #20298A; }
.drawer footer .place:disabled {
  background: #CCCEE0;
  color: #999EC2;
}

/* ── Success screen ───────────────────────── */
.success {
  background: #FFFFFF;
  border: 1px solid #CCCEE0;
  border-radius: 18px;
  padding: 36px 28px 32px;
  box-shadow: 0 2px 12px rgba(1, 12, 102, .04);
}
.success::before {
  content: '';
  display: block;
  width: 180px;
  height: 56px;
  margin: 0 auto 22px;
  background: url('./logo.svg') no-repeat center;
  background-size: contain;
}
.success .tick {
  background: #010C66;
  color: #F7F1EA;
}
.success h1 {
  font-size: 20px;
  font-weight: 600;
  color: #010C66;
}
.success .oid {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: #676DA3;
}
.success .msg { color: #676DA3; }
.success button {
  background: #010C66;
  color: #F7F1EA;
  border-radius: 999px;
  padding: 13px 28px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}
.success button:hover { background: #20298A; }

/* ── Toast ────────────────────────────────── */
.toast {
  background: #010C66;
  border: 1px solid #010C66;
  color: #F7F1EA;
  font-size: 12px;
  letter-spacing: .04em;
}
.toast.err {
  background: #B00020;
  border-color: #B00020;
  color: #FFFFFF;
}

/* ── Drawer backdrop ─────────────────────── */
.drawer-bg {
  background: rgba(1, 12, 102, .35) !important;
}

/* ── Mobile tweaks ────────────────────────── */
@media (max-width: 520px) {
  header.topbar .logo { width: 110px; height: 36px; }
  .gate::before       { width: 160px; height: 50px; margin-bottom: 16px; }
  .success::before    { width: 150px; height: 46px; }
}