/* ==========================================================
   THEME v6 (Luxe glass) — unified ATE design system
   Green background + gold accents, consistent components.
   Loads after all other CSS.
   ========================================================== */

:root{
  --bg0:#051510;
  --bg1:#071a14;
  --bg2:#0a241b;

  --gold:#d6c28b;
  --gold2:#bfa765;

  --text: rgba(247,245,239,0.96);
  --muted: rgba(247,245,239,0.72);
  --muted2: rgba(247,245,239,0.58);

  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.045);
  --border: rgba(214,194,139,0.20);
  --border2: rgba(255,255,255,0.09);

  --shadow1: 0 18px 46px rgba(0,0,0,0.38);
  --shadow2: 0 10px 26px rgba(0,0,0,0.32);

  --radius: 18px;
  --radius-sm: 14px;
  --tap: 52px;

  /* Spacing scale (premium rhythm) */
  --space-1: 10px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Brand accents (used sparingly) */
  --brand:#2ea46f;
  --brand2:#3bc684;
}

/* =============================
   Uniform page titles (site-wide)
   ============================= */
/* Keep headings consistent across Info / Login / Drivers / misc pages */
main h1,
.page h1,
.page-head h1,
.hero h1,
.hero-card h1,
.card h1,
.asap-h1,
.h1,
.section-title,
.step__title{
  font-size: clamp(32px, 6.2vw, 46px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
}

/* Secondary heading spacing */
main h2,
.page h2,
.card h2{
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}

/* Lead text under titles */
.page-head p,
.hero p,
.hero-card p,
.page > p,
main h1 + p,
main h1 + .sub,
.page h1 + p,
.card h1 + p{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  opacity: .92;
}

/* Kicker label (FOR DRIVERS / HELP / PROOF etc.) */
.kicker,
.page-kicker,
.hero-kicker,
.tagline,
.eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}

/* Back link consistency */
a.back,
.back a,
.backlink,
.backlink a{
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
}
a.back:hover,
.back a:hover,
.backlink:hover,
.backlink a:hover{
  text-decoration: underline;
}

html,body{ background: var(--bg0) !important; }
body{
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(214,194,139,0.12), rgba(0,0,0,0) 55%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,255,255,0.06), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 45%, var(--bg2) 100%) !important;
}

/* ==========================================================
   PASS: Premium rhythm + mobile spacing consistency
   - Standardises section spacing, card spacing, header height
   - Prevents overlaps with bottom nav / FAB (iOS safe-area)
   ========================================================== */

/* Prevent accidental horizontal scroll from decorative elements */
html, body{ overflow-x: hidden; }

/* Global content padding + breathing room */
main, .main, .content, .page, .page-wrap, .wrap, .container{
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

/* Consistent vertical rhythm between major blocks */
.section, section{
  margin-bottom: var(--space-3) !important;
}

/* Heading spacing (avoid cramped stacks) */
h1{ margin: 0 0 var(--space-2) !important; }
h2{ margin: 0 0 var(--space-1) !important; }
h3{ margin: 0 0 8px !important; }

/* Card stacking rhythm */
.card, .panel, .ate-card, .tile, .pricing-card, .quote-card, .faq-item, .review-card,
.sum-card, .summary, .bk-card, .wiz-summary, .route-summary{
  margin-bottom: var(--space-2) !important;
}

/* Make pages feel less tall on mobile (hero/header trims) */
@media (max-width: 768px){
  .site-header, header.site-header, .header, header{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Keep last content clear of bottom nav + iOS safe area */
  main, .main, .content, .page, .page-wrap, .wrap{
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* Typography */
h1,h2,h3{ color: var(--text) !important; letter-spacing: -0.01em; }
.small,.tiny,.muted{ color: var(--muted) !important; }

/* Links: no underlines in CTAs */
a{ color: var(--gold) !important; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--gold2) !important; }
a.btn, a[class*="btn"], a.cta, a.cta-btn{ text-decoration: none !important; }

/* Surfaces: unify cards/panels/tiles */
.card, .panel, .ate-card, .tile, .pricing-card, .quote-card, .faq-item, .review-card,
.sum-card, .summary, .bk-card, .wiz-summary, .route-summary{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2) !important;
  backdrop-filter: blur(14px);
}

/* Nav bars */
header, .header, .topbar, .proof-ribbon{
  background: rgba(7,26,20,0.72) !important;
  border-bottom: 1px solid rgba(214,194,139,0.16) !important;
  backdrop-filter: blur(14px);
}
.bottom-nav, .app-nav, nav.bottom{
  background: rgba(7,26,20,0.86) !important;
  border-top: 1px solid rgba(214,194,139,0.16) !important;
  backdrop-filter: blur(14px);
}
.bottom-nav a, .app-nav a{ color: rgba(247,245,239,0.70) !important; text-decoration: none !important; }
.bottom-nav a.active, .app-nav a.active{ color: var(--brand) !important; }

/* Nav icon consistency */
.app-nav .nav-ico svg{
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.75 !important;
  opacity: 0.95;
}
.app-nav .nav-label{
  font-size: 12px !important;
  letter-spacing: -0.01em;
}

/* Inputs */
input, select, textarea{ color: var(--text) !important; }
input::placeholder, textarea::placeholder{ color: rgba(247,245,239,0.52) !important; }
.field input, .field select, .field textarea,
input[type="text"], input[type="tel"], input[type="number"], input[type="email"],
input[type="date"], input[type="time"], textarea, select{
  min-height: var(--tap);
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(214,194,139,0.22) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(214,194,139,0.58) !important;
  box-shadow: 0 0 0 4px rgba(214,194,139,0.14) !important;
}

/* Button system (strict) */
button, .btn, .bk-btn, .wiz-btn, .cta-btn{
  min-height: var(--tap);
  border-radius: var(--radius-sm) !important;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

/* Primary */
.btn--primary, .btn.primary, button.primary, .bk-btn.primary, .wiz-next, .cta-primary{
  background: linear-gradient(180deg, var(--gold), var(--gold2)) !important;
  color: var(--bg0) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.34) !important;
}

/* Secondary */
.btn--secondary, .btn.secondary, .bk-btn.secondary, .wiz-back, .cta-secondary{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* Ghost */
.btn--ghost, .btn.ghost, .bk-btn.ghost{
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid rgba(214,194,139,0.22) !important;
}

/* Kill button underlines (your screenshots) */
button *, .btn *, .bk-btn *, a.btn *{ text-decoration: none !important; }

/* Chips/pills */
.pill, .chip, .badge{
  background: rgba(214,194,139,0.12) !important;
  border: 1px solid rgba(214,194,139,0.22) !important;
  color: var(--text) !important;
}

/* Wizard step pills */
.wiz-steps .step, .wiz-pill, .step-pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--muted) !important;
}
.wiz-steps .step.active, .step-pill.active{
  border-color: rgba(214,194,139,0.42) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(214,194,139,0.10) !important;
}

/* Stop WhatsApp FAB blocking booking CTAs */
body[data-page^="booking"] .whatsapp-fab,
body[data-page^="booking"] .whatsapp-float,
body[data-page="booking2"] .whatsapp-fab{ display: none !important; }

/* Hide any debug overlay unless ?debug=1 (JS also enforces) */
.atw-debug, .debug-overlay, .places-debug, #debugBox, #debugOverlay{ display: none !important; }

/* Reduce random section padding causing 'mashed' */
section{ padding-top: 24px !important; padding-bottom: 24px !important; }

/* Make tap targets consistent in bottom nav */
.bottom-nav a, .app-nav a{ padding: 12px 10px !important; }

CSS
/* =============================
   My ATE polish (contrast + rewards)
   ============================= */

.ate-toast{
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  background: rgba(8,12,10,0.92);
  border: 1px solid rgba(214,194,139,0.22);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 24px);
  z-index: 9999;
}
.ate-toast.is-on{ opacity: 1; transform: translateX(-50%) translateY(-4px); }
.ate-toast.is-error{ border-color: rgba(255,90,90,0.45); }

.portal-inline-msg{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-size: 14px;
}
.portal-inline-msg.is-error{
  border-color: rgba(255,90,90,0.35);
  background: rgba(255,90,90,0.10);
  color: var(--text);
}

.reward-hero.card,
.reward-card.card,
.empty-state.card{
  background: rgba(8,12,10,0.74) !important;
  border: 1px solid rgba(214,194,139,0.22) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
}

.reward-hero__title,
.reward-card__title{
  letter-spacing: 0.6px;
}

.progress{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}
.progress__bar{
  height: 100%;
  background: rgba(214,194,139,0.92);
  width: 0%;
}
.progress.is-done .progress__bar{ width: 100% !important; }

.progress-wrap{ margin-top: 12px; }
.progress-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.progress-sub{ margin-top: 8px; color: var(--muted); font-size: 13px; }

.reward-list{
  margin: 10px 0 0;
  padding: 0 0 0 18px;
}
.reward-actions{ margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.dot--gold{ background: rgba(214,194,139,0.92); }
.dot--green{ background: rgba(80,220,140,0.75); }

.job-card{
  background: rgba(8,12,10,0.64) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Make My ATE header stay readable over background images */
.customer-header.card{
  background: rgba(8,12,10,0.78) !important;
  border: 1px solid rgba(214,194,139,0.22) !important;
}

/* Make portal copy readable on iOS */
.customer-area .small{ color: rgba(245,245,245,0.84) !important; }
.customer-area .muted{ color: rgba(245,245,245,0.70) !important; }

/* Busy button */
button.is-busy{ opacity: .85; }

/* =========================================================
   My ATE (login) — match Book2 “premium cream surface” look
   Keeps the global dark-green canvas, but puts ALL portal UI
   on warm, consistent surface cards like Book2.
   ========================================================= */

body[data-page="login"] .card{
  background: rgba(255, 250, 240, 0.94) !important;
  color: #102416 !important;
  border: 1px solid rgba(16, 36, 22, 0.14) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.28) !important;
}

body[data-page="login"] .card .muted,
body[data-page="login"] .card .small.muted{
  color: rgba(16,36,22,0.68) !important;
}

body[data-page="login"] .card .small{
  color: rgba(16,36,22,0.78) !important;
}

body[data-page="login"] .customer-header__meta,
body[data-page="login"] .progress-sub{
  color: rgba(16,36,22,0.72) !important;
}

body[data-page="login"] .job-card{
  background: rgba(255, 250, 240, 0.94) !important;
  border: 1px solid rgba(16, 36, 22, 0.12) !important;
}

body[data-page="login"] .pill{
  border: 1px solid rgba(16,36,22,0.18) !important;
}

body[data-page="login"] .pill--upcoming{
  background: rgba(16, 36, 22, 0.08) !important;
  color: rgba(16,36,22,0.84) !important;
}

body[data-page="login"] .pill--done{
  background: rgba(214, 194, 139, 0.22) !important;
  color: rgba(16,36,22,0.86) !important;
}

body[data-page="login"] .progress{
  background: rgba(16,36,22,0.10) !important;
  border: 1px solid rgba(16,36,22,0.12) !important;
}

body[data-page="login"] .progress__bar{
  background: rgba(214,194,139,0.95) !important;
}

body[data-page="login"] .reward-hero__title,
body[data-page="login"] .reward-card__title,
body[data-page="login"] .customer-header__greeting,
body[data-page="login"] .section-title{
  color: #102416 !important;
}

body[data-page="login"] .stamp-badge{
  background: rgba(214,194,139,0.95) !important;
  color: #102416 !important;
}

body[data-page="login"] .btn.btn-ghost{
  border: 1px solid rgba(16,36,22,0.18) !important;
  background: rgba(255,255,255,0.65) !important;
  color: #102416 !important;
}

body[data-page="login"] .btn.btn-primary,
body[data-page="login"] .btn.primary{
  background: rgba(16,36,22,0.92) !important;
  color: rgba(255,250,240,0.98) !important;
}

body[data-page="login"] .job-route,
body[data-page="login"] .job-dt,
body[data-page="login"] .job-price{
  color: rgba(16,36,22,0.92) !important;
}

/* V14 Hero Badge Upgrade */
.hero img, .hero-logo, .logo-hero {
    max-width:130px !important;
    width:130px !important;
    margin-top:10px !important;
    margin-bottom:8px !important;
}

.hero {
    padding-top:10px !important;
    padding-bottom:10px !important;
}


/* V15 Hero Badge Full-Bleed */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* =========================================================
   My ATE — Booking cards spacing + “wallet-style” rhythm
   Fixes cramped buttons + harsh stacking on mobile
   ========================================================= */

body[data-page="login"] .customer-area{
  /* keep last card clear of WhatsApp FAB + bottom nav */
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

body[data-page="login"] .job-card{
  padding: 18px 18px 20px !important;
  border-radius: 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18) !important;
}

body[data-page="login"] .job-card__top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body[data-page="login"] .job-route{
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
}

body[data-page="login"] .job-price{
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  margin-top: 2px !important;
  margin-bottom: 12px !important;
}

body[data-page="login"] .job-actions{
  display:flex !important;
  justify-content:flex-end !important;
}

body[data-page="login"] .job-actions .btn{
  width: auto !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

/* If a wrapper is adding a circular plate/ring, neutralise it */
.hero .logo-wrap, .hero .logo-circle, .hero .badge, .hero .badge-ring {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* V15 Full-bleed Hero Badge */
.hero img, .hero-logo, .logo-hero {
  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.38) !important;
}
.hero {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}



/* PATCH: booking page label contrast */
body[data-page="booking3"] .q__label,
body[data-page="booking3"] .q__help{
  color:#27483b !important;
  opacity:1 !important;
  -webkit-text-fill-color:#27483b !important;
}


/* PATCH: booking form readability + kill ASAP */
#btnASAPFill,
#btnAsap,
.asap,
.asap-btn,
.asap-cta,
[data-asap],
[data-action="asap"],
button[aria-label="ASAP"],
button[title="ASAP"]{
  display:none !important;
}

body[data-page="booking3"] .q__label,
body[data-page="booking3"] .q label,
body[data-page="booking3"] .q-title,
body[data-page="booking3"] .question-label,
body[data-page="booking3"] .form-label,
body[data-page="booking3"] .field-label,
body[data-page="booking3"] [class*="label"],
body[data-page="booking3"] [class*="question"]{
  color:#27483b !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#27483b !important;
}

body[data-page="booking3"] .q__help,
body[data-page="booking3"] .step__sub,
body[data-page="booking3"] .field-help,
body[data-page="booking3"] .hint,
body[data-page="booking3"] [class*="help"]{
  color:#5f7269 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#5f7269 !important;
}

body[data-page="booking3"] input,
body[data-page="booking3"] textarea,
body[data-page="booking3"] select{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
  background:#fff !important;
}

body[data-page="booking3"] input::placeholder,
body[data-page="booking3"] textarea::placeholder{
  color:rgba(15,47,31,.45) !important;
  -webkit-text-fill-color:rgba(15,47,31,.45) !important;
}

body[data-page="booking3"] .step__title,
body[data-page="booking3"] h1,
body[data-page="booking3"] h2,
body[data-page="booking3"] h3{
  color:#0f2f1f !important;
  -webkit-text-fill-color:#0f2f1f !important;
}