/*
 * Pulse Gift Card — System Stylesheet
 * ─────────────────────────────────────────────────────────────────────────────
 * Per-site customisation: override CSS custom properties in local common.css.
 * A typical local file needs only ~8 variable overrides + a font @import.
 *
 * Customisable surface:
 *   --colour-primary / --colour-primary-hover / --colour-primary-light
 *   --colour-secondary
 *   --font-sans / --font-heading
 *   --page-bg-colour / --page-bg-image / --page-bg-overlay
 *   --header-bg
 */


/* ─── Custom Properties ─────────────────────────────────────────────────────── */

:root {
  /* Brand colours — set in local CSS */
  --colour-primary:       #1a73e8;
  --colour-primary-hover: #1255c2;
  --colour-primary-light: #e8f0fe;
  --colour-primary-fg:    #fff;
  --colour-secondary:     #34a853;
  --colour-pill-bg:       var(--colour-primary);
  --colour-pill-fg:       var(--colour-primary-fg);

  /* Typography — @import font + set family in local CSS */
  --font-sans:    system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: var(--font-sans);

  /* Backgrounds — set in local CSS */
  --page-bg-colour:  #111827;
  --page-bg-image:   none;
  --page-bg-overlay: rgba(0, 0, 0, 0.55);
  --header-bg:       rgba(0, 0, 0, 0.88);

  /* Header height — set to 0px via JS when banner is hidden */
  --header-h: 76px;

  /* Design tokens — no need to override */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --shadow:     0 2px 8px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10);
  --ease:       .22s ease;

  /* Text on page background — override in local CSS for light themes */
  --page-fg:        #fff;
  --page-fg-muted:  rgba(255, 255, 255, .65);
  --page-fg-subtle: rgba(255, 255, 255, .4);
  --page-line:      rgba(255, 255, 255, .12);

  /* Glass panels on page background (conditions accordion, etc.) */
  --glass-bg:       rgba(255, 255, 255, .07);
  --glass-border:   rgba(255, 255, 255, .12);
  --glass-fg:       rgba(255, 255, 255, .7);
  --glass-fg-muted: rgba(255, 255, 255, .5);
}


/* ─── Reset & Base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background-color: var(--page-bg-colour);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--font-heading);
}

a { text-decoration: none; }


/* ─── Page Background ───────────────────────────────────────────────────────── */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--page-bg-colour);
  background-image: var(--page-bg-image);
  background-size: cover;
  background-position: center;
}

.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--page-bg-overlay);
}


/* ─── Header ────────────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
}

.header .container {
  width: 100%;
}

.header-logo {
  max-height: calc(var(--header-h) - 30px);
  width: auto;
  display: block;
}

.header .text-center {
  display: flex;
  justify-content: center;
}


/* ─── Page Layout ───────────────────────────────────────────────────────────── */

#page_content {
  position: relative;
  z-index: 10;
  padding-top: var(--header-h); /* clear fixed header */
}

.step-panel {
  padding-top: 32px;
  padding-bottom: 64px;
}

/* Bootstrap container cap — consistent across all panels */
.page-purchase-giftcard .container {
  max-width: 880px;
}


/* ─── Typography ────────────────────────────────────────────────────────────── */

h1 {
  color: var(--page-fg);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

h2,h3 {
  color: var(--page-fg);
}

h4 { /* used for gift card titles inside interactive cards */
  font-family: var(--font-heading);
}

a { color: var(--colour-primary); }
a:hover { color: var(--colour-primary-hover); }

.feature-colour,strong  { color: var(--colour-primary); }

/* ─── Page Intro ────────────────────────────────────────────────────────────── */

.page-intro {
  text-align: center;
  padding: 16px 0 36px;
}

.page-intro p {
  color: var(--page-fg-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

#page-logo {max-width: 500px;margin:30px auto}

/* ─── Step Progress Indicator ───────────────────────────────────────────────── */
/*
 * State is driven entirely by CSS :has() — no JS required.
 * When #Home is visible → step 1 active.
 * When #Customer is visible → step 1 done, step 2 active.
 * When #Payment is visible → steps 1–2 done, step 3 active.
 * When #Complete is visible → progress hidden.
 */

.step-progress {
  padding: 20px 0 0;
}

.steps {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  gap: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

/* Connector line between steps */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--page-line);
  transition: background var(--ease);
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--page-line);
  background: var(--glass-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--page-fg-subtle);
  font-weight: 700;
  font-size: 13px;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.step-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--page-fg-subtle);
  transition: color var(--ease);
}

/* ── Active step ── */
.step.is-active .step-dot {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colour-primary) 30%, transparent);
}
.step.is-active .step-label { color: var(--page-fg); }

/* ── Completed step ── */
.step.is-done .step-dot {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  font-size: 0; /* hide number */
}
.step.is-done .step-dot::before {
  content: '✓';
  font-size: 13px;
}
.step.is-done .step-label { color: var(--colour-primary); }
.step.is-done:not(:last-child)::after { background: var(--colour-primary); }

/* ── CSS :has() state management — no JS needed ── */

/* Step 1 — Home visible */
#page_content:has(#Home:not(.d-none)) .step[data-step="1"] { @extend .is-active; }

#page_content:has(#Home:not(.d-none)) .step[data-step="1"] .step-dot {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colour-primary) 30%, transparent);
}
#page_content:has(#Home:not(.d-none)) .step[data-step="1"] .step-label {
  color: var(--page-fg);
}

/* Step 2 — Customer visible */
#page_content:has(#Customer:not(.d-none)) .step[data-step="1"] .step-dot,
#page_content:has(#Payment:not(.d-none))  .step[data-step="1"] .step-dot,
#page_content:has(#Payment:not(.d-none))  .step[data-step="2"] .step-dot {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: transparent;
  font-size: 0;
}
#page_content:has(#Customer:not(.d-none)) .step[data-step="1"] .step-dot::before,
#page_content:has(#Payment:not(.d-none))  .step[data-step="1"] .step-dot::before,
#page_content:has(#Payment:not(.d-none))  .step[data-step="2"] .step-dot::before {
  content: '✓';
  font-size: 13px;
  color: #fff;
}
#page_content:has(#Customer:not(.d-none)) .step[data-step="1"] .step-label,
#page_content:has(#Payment:not(.d-none))  .step[data-step="1"] .step-label,
#page_content:has(#Payment:not(.d-none))  .step[data-step="2"] .step-label {
  color: var(--colour-primary);
}
#page_content:has(#Customer:not(.d-none)) .step[data-step="1"]:not(:last-child)::after,
#page_content:has(#Payment:not(.d-none))  .step[data-step="1"]:not(:last-child)::after,
#page_content:has(#Payment:not(.d-none))  .step[data-step="2"]:not(:last-child)::after {
  background: var(--colour-primary);
}

#page_content:has(#Customer:not(.d-none)) .step[data-step="2"] .step-dot,
#page_content:has(#Payment:not(.d-none))  .step[data-step="3"] .step-dot {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colour-primary) 30%, transparent);
}
#page_content:has(#Customer:not(.d-none)) .step[data-step="2"] .step-label,
#page_content:has(#Payment:not(.d-none))  .step[data-step="3"] .step-label {
  color: var(--page-fg);
}

/* Complete — hide progress entirely */
#page_content:has(#Complete:not(.d-none)) .step-progress {
  display: none;
}

#Payment .form-panel { height: auto; }

/* ─── Step Section Labels ────────────────────────────────────────────────────── */

.step-section {
  margin-bottom: 16px;
}

.step-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--page-fg-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.step-section-label::before,
.step-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--page-line);
}

/* ─── Step Actions (CTA row) ─────────────────────────────────────────────────── */

.step-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}

/* Back button — two contexts: dark page bg and inside white form-panel */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--page-line);
  color: var(--page-fg-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.btn-back:hover {
  border-color: var(--page-fg-subtle);
  color: var(--page-fg);
}

.form-panel .btn-back {
  border-color: #e5e7eb;
  color: #9ca3af;
}
.form-panel .btn-back:hover {
  border-color: #9ca3af;
  color: #374151;
}


/* ─── Gift Card Value Cards ──────────────────────────────────────────────────── */

.select-giftcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 28px 22px 20px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
  position: relative;
  overflow: hidden;
}

/* gradient top-edge — appears on hover / selected */
.select-giftcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--colour-primary), var(--colour-secondary));
  opacity: 0;
  transition: opacity var(--ease);
}

.select-giftcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.select-giftcard:hover::before { opacity: 1; }

/* title */
.giftcard-title {
  font-size: 24px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
  text-align: left;
}
.giftcard-title i {
  display: none;
  color: var(--colour-primary);
  margin-right: 6px;
}

/* description */
.giftcard-description { flex: 1; }
.giftcard-description p,.giftcard-description li {
  color: #6b7280 !important;
  font-size: 16px !important;
  line-height: 1.55;
  margin-bottom: 4px !important;
  text-align: left !important;
}

/* price strip */
.select-giftcard .giftcard-price {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}
.product-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--colour-primary);
  line-height: 1;
}
.product-sale-price {
  font-size: .9rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-left: 6px;
}

/* Selected state */
.select-giftcard.selected {
  background: var(--colour-primary-light);
  border-color: var(--colour-primary);
}
.select-giftcard.selected::before              { opacity: 1; }
.select-giftcard.selected .giftcard-title      { color: var(--colour-primary); }
.select-giftcard.selected .giftcard-title i    { display: inline; }
.select-giftcard.selected .giftcard-description p { color: #374151 !important; }


/* ─── Card Style Selector ───────────────────────────────────────────────────── */

.select-cardstyle {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.15);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.select-cardstyle img { display: block; width: 100%; }

.select-cardstyle:hover {
  border-color: rgba(255,255,255,.55);
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}
.select-cardstyle.selected {
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary);
}


/* ─── Form Panels ───────────────────────────────────────────────────────────── */

.form-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
  box-shadow: var(--shadow-lg);
}

.form-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colour-primary);
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 24px;
}

.join-receipt .form-panel-title {
  border-bottom: none;
  margin-bottom: 0;
}

/* form controls */
.form-control {
  border-color: #e5e7eb;           /* no !important — lets validation states override */
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control:focus {
  border-color: var(--colour-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-primary) 18%, transparent) !important;
}

/* Validation states */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: none !important;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .2) !important;
}
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #e5e7eb !important; /* suppress Bootstrap's green on valid — less noisy */
  background-image: none !important;
}

.form-floating > label { color: #9ca3af; }

/* invalid-feedback inside form-floating needs a nudge since
   the label is absolutely positioned above the text baseline */
.form-floating .invalid-feedback {
  margin-top: 2px;
}

.input-note {
  font-size: .73rem;
  color: #9ca3af;
  margin-top: 4px;
  display: block;
}

.form-check-label {
  font-size: 13px;
  color: #374151 !important;
}
.form-check-label a { color: var(--colour-primary); }

/* Checkbox invalid state */
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545 !important;
}

.invalid-feedback { font-size: .75rem; }

.alert-danger { border-radius: var(--radius-sm); }


/* ─── Payment Summary ───────────────────────────────────────────────────────── */

#giftcardSummary {
  text-align: center;
  margin-bottom: 28px;
}

#giftcardSummary .wrapper {
  background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary));
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 16px;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.giftcard-to {
  font-size: 13px;
  opacity: .8;
  margin-bottom: 6px;
}

#productDescription {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.giftcard-message {
  font-size: 13px;
  opacity: .75;
  font-style: italic;
  margin: 0 0 6px;
}

.giftcard-from {
  font-size: 13px;
  opacity: .8;
  margin: 0;
}

.giftcard-price-display {
  margin: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 12px;
}

#productPrice {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
}

#promoMessage p {
  color: var(--colour-secondary);
  font-size: .9rem;
  margin: 0 0 12px;
}


/* ─── Buttons ───────────────────────────────────────────────────────────────── */

.btn-primary,
.btn-success {
  background-color: var(--colour-primary) !important;
  border-color: var(--colour-primary) !important;
  color: var(--colour-primary-fg) !important;
  border-radius: 50px !important;
  padding: 12px 40px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  transition: background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease) !important;
}
.btn-primary:hover,
.btn-success:hover {
  background-color: var(--colour-primary-hover) !important;
  border-color: var(--colour-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22) !important;
}
.btn-primary:active,
.btn-success:active { transform: translateY(0) !important; }
.btn-primary:disabled,
.btn-success:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Nudges Bootstrap's small spinner up to align with adjacent button text */
.spinner-border-sm { vertical-align: -2px; }


/* ─── Digital Wallet Buttons ────────────────────────────────────────────────── */

.btn-wallet {
  height: 56px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--ease);
}
.btn-wallet:hover { opacity: .85; }

/* Apple Pay — -webkit-appearance renders the official button in Safari.
   Other browsers show a plain black button (matches Apple Pay visual). */
.btn-apay {
  background: #000;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-style: black;
  -apple-pay-button-type: buy;
}

/* Google Pay — prototype placeholder.
   In production the Google Pay SDK replaces this button with its own. */
.btn-gpay {
  background: #000;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .03em;
  gap: 2px;
}
.gpay-label {
  font-style: italic;
  font-size: 20px;
  background: linear-gradient(180deg, #4285F4 25%, #34A853 25% 50%, #FBBC04 50% 75%, #EA4335 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}


/* ─── Or-divider ────────────────────────────────────────────────────────────── */

.divider-icon {
  position: relative;
  height: 1px;
  background: #e5e7eb;
  margin: 20px 0;
}
.divider-icon i {
  position: absolute;
  padding: 0 10px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #9ca3af;
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}


/* ─── Apple Pay ─────────────────────────────────────────────────────────────── */

.apple-pay-button {
  height: 56px;
  width: 100%;
  border-radius: var(--radius-sm);
  -webkit-appearance: -apple-pay-button;
}
.apple-pay-button-with-text > * { display: none; }
.apple-pay-button-black-with-text { -apple-pay-button-style: black; }
.apple-pay-button-white-with-text { -apple-pay-button-style: white; }
.apple-pay-button-text-buy { -apple-pay-button-type: buy; }


/* ─── Offers Page ───────────────────────────────────────────────────────────── */

.page-offer .container {
  max-width: 960px;
}

.offer-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 64px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.offer-copy > p:first-child {
  display: inline-block;
  max-width: fit-content;
  background: var(--colour-pill-bg);
  color: var(--colour-pill-fg) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.offer-copy h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  color: var(--page-fg);
  line-height: 1.1;
  margin-bottom: 16px;
}

.offer-copy p {
  color: var(--page-fg-muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 420px;
}

.offer-copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer-copy ul li {
  color: var(--page-fg-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.offer-copy ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--colour-primary);
  font-size: 12px;
  flex-shrink: 0;
}

.offer-success {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px 0;
}

.offer-success h2 {
  color: var(--page-fg);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.offer-success p {
  color: var(--page-fg-muted);
  font-size: 16px;
  line-height: 1.7;
}

.offer-success-icon {
  font-size: 72px;
  color: var(--colour-primary);
  margin-bottom: 24px;
}

/* ── In-panel success state ── */

.panel-success {
  text-align: center;
  padding: 12px 0 4px;
}

.panel-success-icon {
  font-size: 52px;
  color: var(--colour-primary);
  display: inline-block;
  margin-bottom: 20px;
}

.panel-success h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--colour-primary);
  margin-bottom: 14px;
  font-family: var(--font-heading);
}

.panel-success p {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
}


@media (max-width: 991px) {
  .offer-main { align-items: flex-start; }
  .offer-copy { text-align: center; }
  .offer-copy p { max-width: none; margin-left: auto; margin-right: auto; }
  .offer-copy ul { align-items: center; }
}


/* ─── Complete Page ─────────────────────────────────────────────────────────── */

.page-complete .container {
  max-width: 520px;
}

.complete-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 64px;
  text-align: center;
}

.complete-icon {
  font-size: 72px;
  color: var(--colour-primary);
  margin-bottom: 20px;
  line-height: 1;
}

.complete-heading {
  color: var(--page-fg);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 900;
  margin-bottom: 12px;
}

.complete-subtext {
  color: var(--page-fg-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.complete-summary {
  text-align: left;
  margin-bottom: 24px;
}

.receipt-message {
  font-style: italic;
  color: #6b7280;
}

.complete-cta {
  width: 100%;
}

#successContent p {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--page-fg-muted);
  margin: 0 auto;
}


/* ─── Suspended Page ────────────────────────────────────────────────────────── */

.suspended-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 64px;
  text-align: center;
}

.suspended-icon {
  font-size: 64px;
  color: var(--colour-primary);
  margin-bottom: 24px;
  line-height: 1;
}

.suspended-heading {
  color: var(--page-fg);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  margin-bottom: 16px;
}

.suspended-subtext {
  color: var(--page-fg-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}


/* ─── Join Page ─────────────────────────────────────────────────────────────── */

.page-join .container {
  max-width: 960px;
}

.join-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 64px;
}

/* Join copy — left column */
.join-copy h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--page-fg);
  line-height: 1.15;
  margin-bottom: 12px;
}

.join-copy h2 {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--colour-primary);
  margin-bottom: 10px;
}

.join-copy p {
  color: var(--page-fg-muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 420px;
}

#promoBody p {
  font-size: 20px;
  line-height: 1.6;
}

/* First <p> in promo heading renders as a pill badge */
#promoHeading > p:first-child {
  display: inline-block;
  max-width: fit-content;
  background: var(--colour-pill-bg);
  color: var(--colour-pill-fg) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* Checklist */
.join-copy ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.join-copy ul li {
  color: var(--page-fg-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.join-copy ul li::before {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--colour-primary);
  flex-shrink: 0;
}

/* Error state */
.join-error-state {
  text-align: center;
  padding: 40px 0 24px;
}

.join-error-msg {
  color: var(--page-fg-muted);
  font-size: 17px;
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.join-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .page-join .container {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Promo card */
.promo-card {
  background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary));
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  text-align: center;
}

.promo-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.promo-headline {
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}

.promo-subtext {
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 20px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.promo-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.promo-benefits li {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-benefits .fa-check-circle {
  color: #fff;
  opacity: .8;
  flex-shrink: 0;
}

.promo-offer {
  background: rgba(0, 0, 0, .18);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.promo-offer-label {
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

.promo-offer-value {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.promo-join-btn {
  color: var(--colour-primary) !important;
  font-weight: 700;
  padding: 12px 36px;
  border-radius: 50px;
}

.promo-join-btn:hover {
  background: rgba(255, 255, 255, .9) !important;
}

/* Receipt panel */
.join-receipt {
  margin-bottom: 20px;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.receipt-row:first-of-type {
  border-top: 1px solid #f3f4f6;
}

.receipt-label {
  font-size: 13px;
  color: #9ca3af;
}

.receipt-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: .04em;
}

/* Conditions accordion */
.join-footer-text {
  margin-top: 40px;
  font-size: 13px;
  color: var(--page-fg-muted);
  line-height: 1.7;
  text-align: left;
}

.join-conditions {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.conditions-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--glass-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.conditions-toggle:hover {
  color: var(--page-fg);
}

.conditions-chevron {
  flex-shrink: 0;
  transition: transform var(--ease);
  font-size: 12px;
}

.conditions-body {
  padding: 0 20px 20px;
  font-size: 13px;
  color: var(--glass-fg-muted);
  line-height: 1.7;
}

.conditions-body ul {
  padding-left: 18px;
  margin-bottom: 12px;
}

.conditions-body li {
  margin-bottom: 4px;
}

.conditions-body strong {
  color: var(--glass-fg);
}

.conditions-note {
  margin: 12px 0 0;
  font-style: italic;
  color: var(--page-fg-subtle);
}


/* ─── Offer unavailable ─────────────────────────────────────────────────────── */

.offer-unavailable {
  width: 100%;
  text-align: center;
  padding: 40px 24px;
  color: var(--page-fg);
  font-size: 18px;
  line-height: 1.6;
}


/* ─── reCAPTCHA ─────────────────────────────────────────────────────────────── */

/* Badge hidden per Google policy — disclosure text shown near the submit button */
.grecaptcha-badge { visibility: hidden; }

.recaptcha-disclosure {
  font-size: 10px;
  opacity: 0.55;
  line-height: 1.5;
  margin-top: 20px;
  text-align: center;
}

.recaptcha-disclosure a {
  color: inherit;
  text-decoration: underline;
}


/* ─── Login / Reset Pages ───────────────────────────────────────────────────── */

.page-login .container,
.page-reset .container,
.page-new .container {
  max-width: 480px;
}

.login-main,
.reset-main,
.new-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 64px;
}

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}

.auth-footer a {
  color: var(--colour-primary);
  font-weight: 600;
}

.auth-success {
  text-align: center;
  padding: 12px 0;
}

.auth-success-icon {
  font-size: 56px;
  color: var(--colour-primary);
  margin-bottom: 20px;
  line-height: 1;
}

.auth-success h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--colour-primary);
  margin-bottom: 12px;
}

.auth-success p {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
}


/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .header-logo { max-height: 70px; }

  .form-panel {
    padding: 24px 20px;
    border-radius: var(--radius);
  }

  #giftcardSummary .wrapper { padding: 24px 20px; }
}


/* ─── Members Portal — shared chrome (members.html + account.html) ─────────── */

.page-members .container {
  max-width: 1140px;
}

.page-account .container-fluid {
  max-width: 1200px;
}

.members-main,
.account-main {
  position: relative;
  z-index: 10;
  padding-top: calc(var(--header-h) + 60px + 32px);
  padding-bottom: 64px;
  min-height: 100vh;
}

/* Member top bar — sits directly under the branded .header, height matches
   the --topbar-offset value used below for sticky/fixed positioning math. */
.member-topbar {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 190;
  height: 60px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
}

.member-topbar .container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--page-fg-muted);
  transition: background var(--ease), color var(--ease);
}
.topbar-nav a:hover { color: var(--page-fg); }
.topbar-nav a.active {
  background: var(--colour-primary);
  color: var(--colour-primary-fg);
}

.points-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--page-fg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease);
  white-space: nowrap;
}
.points-pill:hover { border-color: var(--colour-primary); color: var(--page-fg); transform: translateY(-1px); }
.points-pill i { color: var(--colour-primary); }

.account-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--page-fg);
  font-size: 14px;
  font-weight: 600;
  padding: 2px;
  cursor: pointer;
}

.account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--colour-primary);
  color: var(--colour-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.account-menu-btn .fa-chevron-down { font-size: 10px; color: var(--page-fg-subtle); }

.account-dropdown-menu {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 200px;
}
.account-dropdown-menu .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-dropdown-menu .dropdown-item i { width: 16px; color: #9ca3af; }
.account-dropdown-menu .dropdown-item:hover { background: var(--colour-primary-light); color: var(--colour-primary); }
.account-dropdown-menu .dropdown-item:hover i { color: var(--colour-primary); }
.account-dropdown-menu .dropdown-item.text-danger:hover { background: #fef2f2; color: #dc3545 !important; }
.account-dropdown-menu .dropdown-item.text-danger:hover i { color: #dc3545; }
.account-dropdown-menu hr { margin: 6px 4px; }

@media (max-width: 767px) {
  .topbar-nav a span { display: none; }
  .points-pill .points-label { display: none; }
}


/* ─── Vehicle Panels (members.html) ─────────────────────────────────────────── */

:root {
  /* Wash Club feature colour — a fixed "royal purple", independent of each
     client's --colour-primary, so membership status reads the same way
     across every white-labelled client instead of blending into whatever
     the client's brand colour happens to be. */
  --colour-washclub:       #967adc;
  --colour-washclub-fg:    #fff;
  --colour-washclub-light: #f2effb;
}

.vehicle-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vehicle-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vehicle-panel.is-washclub { border-color: var(--colour-washclub); }

.vehicle-photo {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vehicle-photo img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-photo .fa-car-side { font-size: 46px; color: #c3c9d2; }

.vehicle-photo-upload {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(17, 24, 39, .75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  border: none;
  transition: background var(--ease);
}
.vehicle-photo-upload:hover { background: rgba(17, 24, 39, .92); }

.washclub-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--colour-washclub);
  color: var(--colour-washclub-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.washclub-badge.is-paused { background: #9ca3af; }
.washclub-badge.is-expired { background: #f59e0b; }
.washclub-badge.is-cancelling { background: #dc3545; }

.vehicle-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vehicle-rego { font-size: 1.15rem; font-weight: 800; color: #111827; letter-spacing: .03em; margin-bottom: 2px; }
.vehicle-desc { font-size: 13px; color: #9ca3af; margin-bottom: 14px; }

.vehicle-club-info {
  background: var(--colour-washclub-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #374151;
}
.vehicle-club-info .club-plan { font-weight: 700; color: var(--colour-washclub); display: block; margin-bottom: 2px; }

.vehicle-club-info.is-expired { background: #fef3e2; }
.vehicle-club-info.is-expired .club-plan { color: #b45309; }
.vehicle-club-info.is-cancelling { background: #fdecec; }
.vehicle-club-info.is-cancelling .club-plan { color: #dc3545; }

/* A scheduled-but-not-yet-effective change (e.g. SetNextSubscriptionProduct
   ahead of the next renewal) — subtler than the main plan line above it. */
.vehicle-club-info .club-pending {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, .1);
  font-size: 11.5px;
  font-style: italic;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* A vehicle "included" in another vehicle's multi-vehicle subscription
   (findGroupPrimary()) — distinct from its own Wash Club membership, so it
   gets the primary brand color rather than the washclub purple/status
   colors used elsewhere on this badge/info-box pair. */
.washclub-badge.is-included { background: var(--colour-primary); }
.vehicle-club-info.is-included { background: var(--colour-primary-light); }
.vehicle-club-info.is-included .club-plan { color: var(--colour-primary); }

/* Multi-vehicle subscription grouping — shown on the primary vehicle's
   panel (chips for each included vehicle + an "Add vehicle" chip when
   there's room) and cross-referenced from each included vehicle's own
   panel via .vehicle-club-info.is-included above. */
.club-group {
  margin-bottom: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, .1);
}
.club-group-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  margin-bottom: 6px;
}
.club-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.club-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  color: #374151;
  border-radius: 50px;
  padding: 4px 6px 4px 12px;
  font-size: 12px;
  font-weight: 600;
}
.club-group-chip-remove {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #6b7280;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.club-group-chip-remove:hover { background: #dc3545; color: #fff; }
.club-group-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px dashed var(--colour-primary);
  color: var(--colour-primary);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease);
}
.club-group-add-chip:hover { background: var(--colour-primary-light); }

.vehicle-actions { margin-top: auto; display: flex; gap: 8px; }
.vehicle-actions .btn { flex: 1; border-radius: 50px !important; font-size: 13px !important; padding: 9px 14px !important; }

.vehicle-more-btn {
  width: 38px;
  flex: 0 0 38px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  border: none !important;
  color: #6b7280 !important;
}
.vehicle-more-btn:hover { background: #e5e7eb !important; }

.vehicle-add-tile {
  height: 100%;
  min-height: 220px;
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--page-fg-muted);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
  background: var(--glass-bg);
}
.vehicle-add-tile:hover { border-color: var(--colour-primary); color: var(--page-fg); }
.vehicle-add-tile i { font-size: 28px; color: var(--colour-primary); }

.members-empty { text-align: center; padding: 60px 20px; color: var(--page-fg-muted); }
.members-empty i { font-size: 42px; color: var(--page-fg-subtle); margin-bottom: 16px; display: block; }


/* ─── Account Sidebar & Sections (account.html) ─────────────────────────────── */

.account-sidebar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  position: sticky;
  top: calc(var(--header-h) + 60px + 24px);
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--glass-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.account-nav-item i { width: 18px; text-align: center; color: var(--page-fg-subtle); }
.account-nav-item:hover { color: var(--page-fg); background: rgba(255,255,255,.06); }
.account-nav-item.active { background: var(--colour-primary); color: var(--colour-primary-fg); }
.account-nav-item.active i { color: var(--colour-primary-fg); }

/* Hamburger dropdown replacing the sidebar at <=991.98px (see the media
   query below) — hidden by default here since it's a mobile-only control.
   Its .dropdown-menu items reuse both .dropdown-item (for the white-card
   look, sourced from .account-dropdown-menu below) and .account-nav-item
   (for the active/hover states shared with the desktop sidebar) on the
   same elements — .account-dropdown-menu's rules win on specificity for
   the base state, .account-nav-item.active wins for the active pill
   (same specificity, later in the file), so no separate style block is
   needed for the menu items themselves. */
.account-mobile-nav { display: none; margin-bottom: 20px; }
.account-mobile-nav-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  color: var(--glass-fg);
  font-size: 14px;
  font-weight: 700;
}
.account-mobile-nav-toggle i:first-child { color: var(--page-fg-subtle); }
.account-mobile-nav-toggle .fa-chevron-down {
  margin-left: auto;
  font-size: 12px;
  color: var(--page-fg-subtle);
  transition: transform var(--ease);
}
.account-mobile-nav-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.account-mobile-nav .dropdown-menu { width: 100%; }

.account-section { display: none; }
.account-section.active { display: block; }

.account-section-title { font-size: 1.3rem; font-weight: 800; color: var(--page-fg); margin-bottom: 20px; }
/* Optional muted line directly under an .account-section-title (e.g.
   Invoices' "For the last 24 months") — pulls itself up into the title's
   own margin-bottom rather than changing that margin, so section titles
   with no subtitle (Vouchers, Payment Method, etc.) keep their existing
   spacing untouched. */
.account-section-subtitle { color: var(--page-fg-muted); font-size: 13.5px; margin: -14px 0 20px; }

/* Page/section headers populated from the API's `texts` object (Vehicles,
   VIP Points, Refer a Friend) — the API returns plain <h2>/<p> markup with
   no classes or inline styles, so this styles bare tags inside the wrapper
   rather than classes on the text itself. `.page-heading-lg` bumps the
   heading up to the size the Vehicles page used before (its own `<h1>`,
   larger than the account-section headings). */
.page-heading { margin-bottom: 20px; }
.page-heading h1, .page-heading h2, .page-heading h3 { font-size: 1.3rem; font-weight: 800; color: var(--page-fg); margin: 0 0 4px; }
.page-heading p { font-size: 14px; color: var(--page-fg-muted); margin: 0; }
.page-heading-lg h1, .page-heading-lg h2, .page-heading-lg h3 { font-size: 1.75rem; }
/* Vehicles page: heading sits as a flex item next to the "Add Vehicle"
   button, spacing to the content below is already handled by that flex
   row's own margin — no extra bottom margin needed here. */
.page-heading-lg { margin-bottom: 0; }

/* Optional CMS-driven content block at the top of the Overview section
   (texts.pageMembersHome) — arbitrary HTML, so only generic spacing/
   image-responsiveness rules here, no assumptions about its own tags.
   h1-h6 already get color: var(--page-fg) site-wide (see Typography
   above), but plain <p> tags don't — without this they inherit
   Bootstrap's default near-black body text, effectively invisible
   against this page's dark background (confirmed live: real CMS
   content's <p class="lead"> tags rendered at ~1.1:1 contrast). */
.members-home-content { margin-bottom: 20px; }
.members-home-content p { color: var(--page-fg-muted); }
.members-home-content img { max-width: 100%; height: auto; }

.points-stat-card {
  background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary));
  border-radius: var(--radius-lg);
  padding: 32px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  margin-bottom: 24px;
  text-align: center;
}
.points-stat-value { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.points-stat-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* Buy More Credit — sits on .points-stat-card's gradient background, same
   outline-on-gradient treatment as activate.html's own .credit-panel-btn
   on its account-credit promo panel (per the user, 2026-08-21). */
.points-stat-buy-btn {
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--colour-primary-fg) 55%, transparent);
  color: var(--colour-primary-fg);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
}
.points-stat-buy-btn:hover {
  background: color-mix(in srgb, var(--colour-primary-fg) 18%, transparent);
  color: var(--colour-primary-fg);
}

/* Generic frosted-glass panel — same treatment already used for the
   topbar/account-sidebar (--glass-bg/--glass-border + blur). Reusable
   anywhere a "single panel" look is wanted on the dark page background. */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

/* VIP Points — heading + stat merged into one glass panel (per the user,
   2026-08-14) instead of a heading sitting above a separate gradient
   card. The stat card keeps its own type scale but drops its gradient/
   shadow/margin so it reads as the lower half of one panel, separated
   only by a hairline divider. */
.points-panel .page-heading { margin-bottom: 0; }
.points-panel .points-stat-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--page-fg);
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--glass-border);
}

/* Redeem-now / next-reward rows (primaryWashProducts, per the user,
   2026-08-19) — sit inside .points-panel, below .points-stat-card. Only
   one of each ever renders at a time (see pointsRedemptionState() in
   members.html), so these are simple rows, not a repeatable list style. */
.points-redeem-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-top: 20px;
}
.points-redeem-image {
  width: 52px; height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.points-redeem-icon {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: var(--colour-primary-light);
  color: var(--colour-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.points-redeem-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--colour-primary); margin-bottom: 2px; }
.points-redeem-title { font-weight: 700; color: #111827; font-size: 15px; }
.points-redeem-desc { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

.points-next-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--page-fg-muted);
}
.points-next-row i { color: var(--colour-primary); }
.points-next-row strong { color: var(--page-fg); }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { font-weight: 700; color: #111827; font-size: 14px; margin-bottom: 2px; }
.list-row-sub { font-size: 12.5px; color: #9ca3af; }
.list-row-amount { font-weight: 800; color: var(--colour-primary); font-size: 15px; white-space: nowrap; }

/* Drivers list (per the user, 2026-08-21) — each row is a .list-row plus
   an authorization pill and Edit/Remove actions: a badge + two buttons
   next to a two-line sub-text is denser than any other .list-row user in
   this file (invoices/vouchers), and doesn't fit on one line on a phone.
   A plain `flex-wrap: wrap` on the row doesn't actually help here —
   .list-row-main uses `flex: 1` (flex-basis: 0%), and flex-basis-0 items
   don't contribute their content width to the wrap-overflow calculation,
   so the browser never considers the line "full" and just crushes
   .list-row-main down to a sliver instead of wrapping .driver-row-actions
   onto its own line — confirmed live (.list-row-main measured 44px wide,
   title/sub wrapped across many lines that the vertically-centered badge
   then visually overlapped). Fixed deterministically instead: below
   576px, stack the actions onto their own full-width line explicitly. */
.driver-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .driver-row { flex-direction: column; align-items: flex-start; }
  .driver-row-actions { width: 100%; flex-wrap: wrap; }
}
.driver-auth-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  white-space: nowrap;
}
.driver-auth-badge.is-authorized { background: var(--colour-primary-light); color: var(--colour-primary); }

.voucher-card {
  background: #fff;
  border: 2px dashed var(--colour-primary);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.voucher-code { font-family: monospace; font-weight: 800; font-size: 15px; color: var(--colour-primary); letter-spacing: .05em; }

/* type-5 vouchers link straight into activate.html to be used directly */
.voucher-card-trailing { display: flex; align-items: center; gap: 12px; }
a.voucher-card-link { text-decoration: none; color: inherit; transition: box-shadow var(--ease), transform var(--ease); }
a.voucher-card-link:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.voucher-card-arrow { color: var(--colour-primary); font-size: 14px; }

.card-on-file-display {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.card-on-file-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--colour-primary-light);
  color: var(--colour-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Fast Kiosk Checkout — a highlighted informational card on the Payment
   Method page (per the user, 2026-08-14) calling out an existing
   capability, not a per-customer preference. Same gradient treatment as
   .points-stat-card for visual consistency with the other "big/important"
   card on this page family. */
.feature-highlight-card {
  position: relative;
  background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary));
  border-radius: var(--radius-lg);
  padding: 26px 24px 20px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  margin-bottom: 24px;
}
.feature-highlight-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #fff;
  color: var(--colour-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.feature-highlight-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.feature-highlight-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.feature-highlight-text { flex: 1; min-width: 0; }
.feature-highlight-text h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: #fff; }
.feature-highlight-text p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
/* .feature-highlight-note removed (2026-08-21, per the user) — was the
   "Available during attended hours only" line under Fast Kiosk Checkout,
   dropped now that the PIN makes it usable outside attended hours too.
   No longer referenced by any markup in the suite. */

/* Fast Kiosk Checkout on/off switch (per the user, 2026-08-21) — its own
   labeled row (.fast-kiosk-toggle-row) below .feature-highlight-body, per
   the user's follow-up: it originally sat inline with the icon/text and,
   combined with Bootstrap's default .form-check-input's { float: left;
   margin-left: -1.5em } (meant to tuck a switch under an adjacent label,
   not to sit as a bare flex item with no left padding to offset it),
   rendered shifted left on top of the description text. float/margin are
   explicitly neutralized below so the switch behaves as an ordinary flex
   item instead. */
.fast-kiosk-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.fast-kiosk-toggle-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
/* Wraps the "Enabled"/"Disabled" status word and the switch together as
   one flex-shrink-0 unit on the row's trailing edge (per the user,
   2026-08-21: a switch's colour/position alone isn't clear enough for
   everyone) — synced in JS via syncFastKioskStatusText(). Fixed min-width
   + right-aligned text keeps the switch from shifting sideways as the
   word itself changes length ("Enabled" vs "Disabled"). */
.fast-kiosk-toggle-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fast-kiosk-status {
  min-width: 62px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.fast-kiosk-status.is-on { color: #fff; }
.fast-kiosk-toggle { flex-shrink: 0; margin: 0; padding: 0; }
.fast-kiosk-toggle .form-check-input {
  float: none;
  margin-left: 0;
  width: 44px;
  height: 24px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .6);
}
.fast-kiosk-toggle .form-check-input:checked {
  background-color: #fff;
  border-color: #fff;
  /* A neutral dark knob dot, not a hardcoded brand colour — this switch
     is shared across every white-label client's own primary colour
     (data: URIs can't reference this page's CSS custom properties), so a
     fixed accent colour here would be wrong on every client but one. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23334155'/%3e%3c/svg%3e");
}
.fast-kiosk-toggle .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.fast-kiosk-pin-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.fast-kiosk-pin-form .form-label { color: rgba(255, 255, 255, .85); font-size: 13px; margin-bottom: 8px; }
.fast-kiosk-pin-form .form-control {
  max-width: 110px;
  text-align: center;
  letter-spacing: .3em;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  /* Was a horizontally-scrolling bar at this breakpoint — replaced with
     the hamburger dropdown below, per the user (2026-08-19). */
  .account-sidebar { display: none; }
  .account-mobile-nav { display: block; }
}


/* ─── Manage Wash Club — in-modal action menu (members.html) ───────────────── */

.mwc-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.mwc-action-item:hover { border-color: var(--colour-primary); background: var(--colour-primary-light); }
.mwc-action-item i:first-child { width: 20px; color: var(--colour-primary); font-size: 16px; }
.mwc-action-item .mwc-action-label { flex: 1; font-weight: 600; font-size: 14px; color: #374151; }
.mwc-action-item.danger i:first-child,
.mwc-action-item.danger .mwc-action-label { color: #dc3545; }
.mwc-action-item.danger:hover { border-color: #dc3545; background: #fef2f2; }

/* Highlighted variant — "Renew Subscription Now" when
   subscription.flags bit 6 (renewalFailed) is set (per the user,
   2026-08-19): needs to visibly stand out from the plain white/bordered
   rows around it, not just read the same with different copy. Filled
   with the brand primary color (same one every "go/pay" button on this
   page already uses, e.g. the vehicle panel's own "Renew Now"), rather
   than a new accent, so it reads as *the* thing to do, not a new color
   language. */
.mwc-action-item.highlight {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  box-shadow: var(--shadow);
}
.mwc-action-item.highlight i:first-child,
.mwc-action-item.highlight .mwc-action-label,
.mwc-action-item.highlight .fa-angle-right { color: #fff; }
.mwc-action-item.highlight:hover { filter: brightness(1.06); }
.mwc-action-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

.mwc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: none;
  padding: 0 0 16px;
  cursor: pointer;
}
.mwc-back-link:hover { color: #374151; }

/* Cancel-reason radio list (mwc-reason-item) — selectable rows, same family
   as .mwc-action-item but for a single-choice list rather than navigation. */
.mwc-reason-item {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.mwc-reason-item:hover { border-color: var(--colour-primary); }
.mwc-reason-item .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.mwc-reason-item .form-check-input { margin: 0; flex-shrink: 0; }
.mwc-reason-item .form-check-label {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}
.mwc-reason-item:has(.form-check-input:checked) {
  border-color: var(--colour-primary);
  background: var(--colour-primary-light);
}
.mwc-reason-item:has(.form-check-input:checked) .form-check-label {
  color: var(--colour-primary);
  font-weight: 600;
}

@media (max-width: 767px) {
  .vehicle-photo { height: 140px; }
  .points-stat-value { font-size: 2.2rem; }
}