/* =========================================================
   Big Kahuna Car Hire — UI Makeover Phase 1
   Global public-site design system only.

   IMPORTANT:
   - This file is presentation-only.
   - No booking, pricing, fleet, payment or SEO logic is changed.
   - Admin pages are intentionally excluded via .admin-body.
   ========================================================= */

/* ---- Public design tokens -------------------------------- */
body:not(.admin-body) {
  --bk-black: #111516;
  --bk-black-soft: #191d1e;
  --bk-gold: #D9A52E;
  --bk-gold-dark: #B88416;
  --bk-cream: #F7F6F2;
  --bk-muted: #6B7072;

  --color-primary-900: var(--bk-black);
  --color-primary-800: #1B2021;
  --color-primary-700: #252B2C;
  --color-accent-500: var(--bk-gold);
  --color-accent-600: var(--bk-gold-dark);
  --color-charcoal: var(--bk-black);
  --color-sand: var(--bk-cream);
  --color-sand-dark: #ECEAE3;
  --color-text: #1B2021;
  --color-text-muted: var(--bk-muted);
  --color-text-soft: #4F5557;
  --color-text-faint: #8A8F90;
  --color-border: #E2E1DC;
  --color-bg-page: #F5F4F0;
  --color-bg-subtle: #FBFAF7;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 18px rgba(17, 21, 22, 0.07);
  --shadow-md: 0 14px 40px rgba(17, 21, 22, 0.12);
  --container: 1240px;
  --header-height: 78px;
}

body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3,
body:not(.admin-body) h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: none;
}

body:not(.admin-body) section {
  padding: clamp(64px, 7vw, 96px) 0;
}

body:not(.admin-body) .container {
  padding-left: clamp(18px, 3vw, 28px);
  padding-right: clamp(18px, 3vw, 28px);
}

/* ---- Global controls ------------------------------------- */
body:not(.admin-body) .btn {
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

body:not(.admin-body) .btn:hover {
  transform: translateY(-2px);
}

body:not(.admin-body) .btn-primary {
  background: var(--bk-gold);
  color: var(--bk-black);
}

body:not(.admin-body) .btn-primary:hover {
  background: #E3B33C;
  box-shadow: 0 10px 24px rgba(217, 165, 46, .22);
}

body:not(.admin-body) .btn-dark {
  background: var(--bk-black);
  color: #fff;
}

body:not(.admin-body) .btn-dark:hover {
  background: #252A2B;
  box-shadow: var(--shadow-sm);
}

body:not(.admin-body) .btn-outline {
  border-color: rgba(255,255,255,.72);
}

body:not(.admin-body) .btn-outline:hover {
  color: var(--bk-black);
}

/* ---- Form controls --------------------------------------- */
body:not(.admin-body) label {
  color: #343A3B;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
}

body:not(.admin-body) input,
body:not(.admin-body) select,
body:not(.admin-body) textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 46px;
  padding: 11px 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(17,21,22,.02);
}

body:not(.admin-body) input:hover,
body:not(.admin-body) select:hover,
body:not(.admin-body) textarea:hover {
  border-color: #C9C8C1;
}

body:not(.admin-body) input:focus,
body:not(.admin-body) select:focus,
body:not(.admin-body) textarea:focus {
  border-color: var(--bk-gold);
  box-shadow: 0 0 0 3px rgba(217,165,46,.14);
}

/* ---- Top contact strip ----------------------------------- */
body:not(.admin-body) .topbar {
  background: var(--bk-black-soft);
  color: rgba(255,255,255,.72);
  padding: 7px 0;
  font-size: .74rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

body:not(.admin-body) .topbar-contact,
body:not(.admin-body) .topbar-social {
  gap: 18px;
}

body:not(.admin-body) .topbar a:hover,
body:not(.admin-body) .topbar-social a:hover {
  color: var(--bk-gold);
}

/* ---- Global public header -------------------------------- */
body:not(.admin-body) .site-header {
  background: rgba(17,21,22,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
}

body:not(.admin-body) .site-header .container {
  min-height: var(--header-height);
}

body:not(.admin-body) .brand {
  gap: 10px;
}

body:not(.admin-body) .brand-mark {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(217,165,46,.7);
  color: var(--bk-gold);
  font-size: 1rem;
}

body:not(.admin-body) .brand-text {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .03em;
}

body:not(.admin-body) .brand-text span {
  color: var(--bk-gold);
}

body:not(.admin-body) .main-nav ul {
  gap: 2px;
}

body:not(.admin-body) .main-nav a {
  color: rgba(255,255,255,.82);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: .84rem;
  font-weight: 600;
}

body:not(.admin-body) .main-nav a:hover,
body:not(.admin-body) .main-nav a.active {
  background: rgba(255,255,255,.06);
  color: var(--bk-gold);
}

body:not(.admin-body) .main-nav .btn-primary {
  color: var(--bk-black);
  margin-left: 8px;
  padding-left: 18px;
  padding-right: 18px;
}

body:not(.admin-body) .nav-toggle {
  color: #fff;
}

/* ---- Section headings ------------------------------------ */
body:not(.admin-body) .section-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

body:not(.admin-body) .section-eyebrow {
  color: var(--bk-gold-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

body:not(.admin-body) .section-head h2 {
  color: var(--bk-black);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

body:not(.admin-body) .section-head p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: var(--bk-muted);
}

/* ---- Cards: common premium surface ----------------------- */
body:not(.admin-body) .category-card,
body:not(.admin-body) .car-card,
body:not(.admin-body) .testimonial-card,
body:not(.admin-body) .contact-form-card,
body:not(.admin-body) .contact-info-card,
body:not(.admin-body) .booking-card {
  border: 1px solid rgba(17,21,22,.07);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body:not(.admin-body) .category-card:hover,
body:not(.admin-body) .car-card:hover,
body:not(.admin-body) .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---- Footer ---------------------------------------------- */
body:not(.admin-body) .site-footer {
  background: var(--bk-black);
  padding: 72px 0 22px;
}

body:not(.admin-body) .footer-grid h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

body:not(.admin-body) .footer-social a {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

body:not(.admin-body) .footer-social a:hover {
  background: var(--bk-gold);
  border-color: var(--bk-gold);
}

/* ---- Mobile global polish -------------------------------- */
@media (max-width: 900px) {
  body:not(.admin-body) .main-nav {
    background: var(--bk-black);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  body:not(.admin-body) .main-nav ul {
    padding: 18px;
  }

  body:not(.admin-body) .main-nav a {
    border-radius: 10px;
  }
}

@media (max-width: 560px) {
  body:not(.admin-body) .topbar-contact span {
    display: none;
  }

  body:not(.admin-body) .brand-text {
    font-size: .96rem;
  }

  body:not(.admin-body) .brand-mark {
    width: 34px;
    height: 34px;
  }

  body:not(.admin-body) section {
    padding: 58px 0;
  }
}


/* =========================================================
   Big Kahuna Car Hire — UI Makeover Phase 2
   Homepage + Fleet + Vehicle Detail visual transformation.

   Presentation only: existing PHP variables, routes, forms,
   booking/payment logic and SEO markup remain unchanged.
   ========================================================= */

body:not(.admin-body) {
  --bk-gold-light: #f2cf75;
  --bk-ink: #111516;
  --bk-ink-2: #191d1e;
  --bk-cream: #f7f6f2;
  --bk-line: rgba(17,21,22,.09);
  --bk-card: #fff;
}

/* ---------- Homepage hero -------------------------------- */
body:not(.admin-body) .bk-hero {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bk-ink);
  color: #fff;
  padding: 92px 0 138px;
  isolation: isolate;
}
body:not(.admin-body) .bk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,165,46,.16), transparent 35%),
    linear-gradient(90deg, rgba(17,21,22,.98) 0%, rgba(17,21,22,.86) 42%, rgba(17,21,22,.32) 75%, rgba(17,21,22,.72) 100%);
  z-index: 1;
}
body:not(.admin-body) .bk-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body:not(.admin-body) .bk-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .72;
  filter: saturate(.92) contrast(1.04);
}
body:not(.admin-body) .bk-hero .container {
  position: relative;
  z-index: 2;
}
body:not(.admin-body) .bk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
  gap: clamp(38px, 6vw, 90px);
  align-items: center;
}
body:not(.admin-body) .bk-hero-copy { max-width: 690px; }
body:not(.admin-body) .bk-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bk-gold-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
body:not(.admin-body) .bk-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bk-gold);
}
body:not(.admin-body) .bk-hero h1 {
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: .94;
  letter-spacing: -.055em;
  margin: 0 0 25px;
  max-width: 760px;
}
body:not(.admin-body) .bk-hero h1 em {
  color: var(--bk-gold-light);
  font-style: normal;
}
body:not(.admin-body) .bk-hero-lead {
  max-width: 620px;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  margin-bottom: 28px;
}
body:not(.admin-body) .bk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
body:not(.admin-body) .bk-hero-actions .btn { min-height: 52px; padding-inline: 25px; }
body:not(.admin-body) .bk-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  color: rgba(255,255,255,.78);
  font-size: .83rem;
}
body:not(.admin-body) .bk-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
body:not(.admin-body) .bk-hero-proof i { color: var(--bk-gold); }

/* Hero booking panel */
body:not(.admin-body) .bk-hero-search {
  background: rgba(255,255,255,.96);
  color: var(--bk-ink);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  padding: 25px;
  box-shadow: 0 26px 70px rgba(0,0,0,.27);
  backdrop-filter: blur(12px);
}
body:not(.admin-body) .bk-hero-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
body:not(.admin-body) .bk-hero-search-head span {
  color: var(--bk-gold-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body:not(.admin-body) .bk-hero-search-head h2 {
  margin: 4px 0 0;
  font-size: 1.45rem;
  color: var(--bk-ink);
}
body:not(.admin-body) .bk-search-form { display: grid; gap: 12px; }
body:not(.admin-body) .bk-search-form .form-group { margin: 0; }
body:not(.admin-body) .bk-search-form label {
  display: block;
  margin-bottom: 6px;
  color: #52585a;
  letter-spacing: .04em;
}
body:not(.admin-body) .bk-search-form select { width: 100%; background: #fff; }
body:not(.admin-body) .bk-search-submit { width: 100%; min-height: 52px; margin-top: 3px; }
body:not(.admin-body) .bk-search-note {
  margin: 12px 0 0;
  color: #74797a;
  font-size: .74rem;
  text-align: center;
}

/* ---------- Trust strip ---------------------------------- */
body:not(.admin-body) .bk-trust-strip {
  position: relative;
  z-index: 5;
  margin-top: -65px;
  padding: 0 0 20px;
}
body:not(.admin-body) .bk-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(17,21,22,.1);
  overflow: hidden;
}
body:not(.admin-body) .bk-trust-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 24px 22px;
  border-right: 1px solid var(--bk-line);
}
body:not(.admin-body) .bk-trust-item:last-child { border-right: 0; }
body:not(.admin-body) .bk-trust-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(217,165,46,.12);
  color: var(--bk-gold-dark);
}
body:not(.admin-body) .bk-trust-item strong { display: block; font-size: .9rem; }
body:not(.admin-body) .bk-trust-item span { display: block; margin-top: 3px; color: var(--bk-muted); font-size: .74rem; }

/* ---------- Shared premium section ----------------------- */
body:not(.admin-body) .bk-section { position: relative; }
body:not(.admin-body) .bk-section-head { max-width: 760px; margin-bottom: 42px; }
body:not(.admin-body) .bk-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
body:not(.admin-body) .bk-section-head .section-eyebrow { margin-bottom: 9px; }
body:not(.admin-body) .bk-section-head h2 { margin-bottom: 12px; }
body:not(.admin-body) .bk-section-head p { line-height: 1.7; }
body:not(.admin-body) .bk-section-dark { background: var(--bk-ink); color: #fff; }
body:not(.admin-body) .bk-section-dark h2 { color: #fff; }
body:not(.admin-body) .bk-section-dark .section-eyebrow { color: var(--bk-gold-light); }
body:not(.admin-body) .bk-section-dark .bk-section-head p { color: rgba(255,255,255,.68); }

/* ---------- Category tiles -------------------------------- */
body:not(.admin-body) .bk-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
body:not(.admin-body) .bk-category-card {
  position: relative;
  min-height: 210px;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--bk-line);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body:not(.admin-body) .bk-category-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -35px;
  bottom: -35px;
  border-radius: 50%;
  background: rgba(217,165,46,.08);
}
body:not(.admin-body) .bk-category-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(17,21,22,.1); border-color: rgba(217,165,46,.35); }
body:not(.admin-body) .bk-category-icon { font-size: 1.45rem; color: var(--bk-gold-dark); margin-bottom: 30px; }
body:not(.admin-body) .bk-category-card h3 { margin: 0 0 8px; font-size: 1.1rem; }
body:not(.admin-body) .bk-category-card p { color: var(--bk-muted); font-size: .83rem; line-height: 1.6; margin: 0; }

/* ---------- Fleet cards ---------------------------------- */
body:not(.admin-body) .bk-fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
body:not(.admin-body) .bk-car-card {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 26px rgba(17,21,22,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
body:not(.admin-body) .bk-car-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(17,21,22,.13); }
body:not(.admin-body) .bk-car-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eceae3; }
body:not(.admin-body) .bk-car-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
body:not(.admin-body) .bk-car-card:hover .bk-car-media img { transform: scale(1.045); }
body:not(.admin-body) .bk-car-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--bk-gold); color: var(--bk-ink);
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
body:not(.admin-body) .bk-car-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
body:not(.admin-body) .bk-car-cat { color: var(--bk-gold-dark); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; }
body:not(.admin-body) .bk-car-body h3 { font-size: 1.3rem; margin: 0 0 14px; }
body:not(.admin-body) .bk-car-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
body:not(.admin-body) .bk-car-specs span { padding: 7px 9px; border-radius: 8px; background: #f5f4f0; color: #5f6566; font-size: .72rem; }
body:not(.admin-body) .bk-car-specs i { color: var(--bk-gold-dark); margin-right: 4px; }
body:not(.admin-body) .bk-car-footer { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: auto; padding-top: 17px; border-top: 1px solid var(--bk-line); }
body:not(.admin-body) .bk-car-price small { display: block; color: #8a8f90; font-size: .68rem; margin-bottom: 2px; }
body:not(.admin-body) .bk-car-price strong { font-size: 1.15rem; }
body:not(.admin-body) .bk-car-price span { color: #737879; font-size: .72rem; }

/* ---------- Service/benefit tiles ------------------------- */
body:not(.admin-body) .bk-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
body:not(.admin-body) .bk-service-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
}
body:not(.admin-body) .bk-service-icon { color: var(--bk-gold); font-size: 1.35rem; margin-bottom: 25px; }
body:not(.admin-body) .bk-service-card h3 { color: #fff; font-size: 1.02rem; margin-bottom: 8px; }
body:not(.admin-body) .bk-service-card p { color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.6; margin: 0; }

/* ---------- Why choose ----------------------------------- */
body:not(.admin-body) .bk-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(35px, 6vw, 90px);
  align-items: center;
}
body:not(.admin-body) .bk-why-panel { padding: 15px 0; }
body:not(.admin-body) .bk-why-list { display: grid; gap: 17px; margin-top: 28px; }
body:not(.admin-body) .bk-why-item { display: flex; gap: 13px; align-items: flex-start; }
body:not(.admin-body) .bk-why-check { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(217,165,46,.14); color: var(--bk-gold-dark); font-size: .72rem; }
body:not(.admin-body) .bk-why-item strong { display: block; margin-bottom: 3px; }
body:not(.admin-body) .bk-why-item span { color: var(--bk-muted); font-size: .8rem; line-height: 1.5; }
body:not(.admin-body) .bk-why-visual { position: relative; min-height: 440px; border-radius: 24px; overflow: hidden; background: #ddd; box-shadow: 0 25px 60px rgba(17,21,22,.15); }
body:not(.admin-body) .bk-why-visual img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
body:not(.admin-body) .bk-why-stat { position: absolute; left: 22px; bottom: 22px; background: rgba(17,21,22,.9); color: #fff; padding: 17px 20px; border-radius: 13px; backdrop-filter: blur(10px); }
body:not(.admin-body) .bk-why-stat strong { display: block; font-size: 1.45rem; color: var(--bk-gold-light); }
body:not(.admin-body) .bk-why-stat span { font-size: .72rem; color: rgba(255,255,255,.7); }

/* ---------- Locations ------------------------------------ */
body:not(.admin-body) .bk-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
body:not(.admin-body) .bk-location-card {
  display: flex; align-items: center; gap: 13px; padding: 17px;
  border: 1px solid var(--bk-line); border-radius: 13px; background: #fff;
  transition: transform .2s ease, border-color .2s ease;
}
body:not(.admin-body) .bk-location-card:hover { transform: translateY(-3px); border-color: rgba(217,165,46,.45); }
body:not(.admin-body) .bk-location-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(217,165,46,.11); color: var(--bk-gold-dark); flex: 0 0 38px; }
body:not(.admin-body) .bk-location-card strong { display: block; font-size: .82rem; }
body:not(.admin-body) .bk-location-card small { display: block; color: var(--bk-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(.admin-body) .bk-location-card > i:last-child { margin-left: auto; color: #9da1a1; }

/* ---------- Steps ---------------------------------------- */
body:not(.admin-body) .bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
body:not(.admin-body) .bk-step { position: relative; padding: 28px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(255,255,255,.035); }
body:not(.admin-body) .bk-step-num { color: var(--bk-gold); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
body:not(.admin-body) .bk-step-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 25px 0 18px; border-radius: 13px; background: rgba(217,165,46,.12); color: var(--bk-gold-light); }
body:not(.admin-body) .bk-step h3 { color: #fff; font-size: 1.08rem; margin-bottom: 7px; }
body:not(.admin-body) .bk-step p { color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.6; margin: 0; }

/* ---------- Testimonials --------------------------------- */
body:not(.admin-body) .bk-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
body:not(.admin-body) .bk-testimonial-card { padding: 26px; background: #fff; border: 1px solid var(--bk-line); border-radius: 17px; }
body:not(.admin-body) .bk-testimonial-stars { color: var(--bk-gold); letter-spacing: 2px; font-size: .72rem; }
body:not(.admin-body) .bk-testimonial-quote { color: #353b3c; font-size: .9rem; line-height: 1.7; margin: 20px 0; }
body:not(.admin-body) .bk-testimonial-author { font-weight: 800; font-size: .8rem; }
body:not(.admin-body) .bk-testimonial-role { color: #8a8f90; font-size: .7rem; margin-top: 3px; }

/* ---------- CTA ------------------------------------------ */
body:not(.admin-body) .bk-cta {
  position: relative; overflow: hidden; background: var(--bk-gold); color: var(--bk-ink); padding: 76px 0;
}
body:not(.admin-body) .bk-cta::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -130px; top: -170px; border: 70px solid rgba(255,255,255,.11); }
body:not(.admin-body) .bk-cta .container { position: relative; z-index: 1; text-align: center; }
body:not(.admin-body) .bk-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 12px; }
body:not(.admin-body) .bk-cta p { max-width: 600px; margin: 0 auto 24px; color: rgba(17,21,22,.72); }

/* ---------- Fleet page ----------------------------------- */
body:not(.admin-body) .bk-page-hero { background: var(--bk-ink); color: #fff; padding: 70px 0 60px; }
body:not(.admin-body) .bk-page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; margin-bottom: 13px; }
body:not(.admin-body) .bk-page-hero p { max-width: 650px; color: rgba(255,255,255,.68); line-height: 1.7; }
body:not(.admin-body) .bk-page-hero .breadcrumb { margin-top: 20px; }
body:not(.admin-body) .bk-fleet-filter {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end;
  padding: 20px; margin-top: -32px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--bk-line); border-radius: 17px; box-shadow: 0 20px 45px rgba(17,21,22,.1);
}
body:not(.admin-body) .bk-fleet-filter .form-group { margin: 0; }
body:not(.admin-body) .bk-fleet-filter label { display: block; margin-bottom: 6px; }
body:not(.admin-body) .bk-fleet-filter select { width: 100%; }

/* ---------- Vehicle detail -------------------------------- */
body:not(.admin-body) .bk-detail-hero { background: var(--bk-ink); color: #fff; padding: 48px 0 42px; }
body:not(.admin-body) .bk-detail-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.6rem); margin: 8px 0 0; }
body:not(.admin-body) .bk-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 32px; align-items: start; }
body:not(.admin-body) .bk-detail-main-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 20px; background: #eceae3; box-shadow: 0 22px 55px rgba(17,21,22,.12); }
body:not(.admin-body) .bk-detail-main-photo img { width: 100%; height: 100%; object-fit: cover; }
body:not(.admin-body) .bk-detail-gallery { display: flex; gap: 9px; overflow-x: auto; padding: 13px 1px 3px; }
body:not(.admin-body) .bk-detail-gallery .car-gallery-thumb { width: 82px; height: 60px; flex: 0 0 auto; border-radius: 9px; }
body:not(.admin-body) .bk-detail-copy h2 { font-size: 1.5rem; margin: 34px 0 10px; }
body:not(.admin-body) .bk-detail-copy p { color: #5e6465; line-height: 1.75; }
body:not(.admin-body) .bk-detail-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 25px; }
body:not(.admin-body) .bk-detail-spec { display: flex; gap: 9px; align-items: center; padding: 13px; border: 1px solid var(--bk-line); border-radius: 11px; background: #fff; }
body:not(.admin-body) .bk-detail-spec i { color: var(--bk-gold-dark); }
body:not(.admin-body) .bk-detail-spec span { display: block; font-size: .62rem; color: #929697; text-transform: uppercase; letter-spacing: .06em; }
body:not(.admin-body) .bk-detail-spec strong { display: block; font-size: .78rem; margin-top: 2px; }
body:not(.admin-body) .bk-detail-booking {
  position: sticky; top: 96px; background: #fff; border: 1px solid var(--bk-line); border-radius: 19px; padding: 25px; box-shadow: 0 22px 55px rgba(17,21,22,.12);
}
body:not(.admin-body) .bk-detail-booking .bk-detail-price { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; margin: 7px 0 16px; }
body:not(.admin-body) .bk-detail-booking .bk-detail-price small { display: block; font-size: .7rem; color: #929697; font-weight: 600; letter-spacing: 0; }
body:not(.admin-body) .bk-status { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); margin: 14px 0 18px; font-size: .8rem; }
body:not(.admin-body) .bk-status strong { color: #1e7b4d; }
body:not(.admin-body) .bk-status strong.status-unavailable { color: #c0392b; }
body:not(.admin-body) .bk-detail-booking .btn-block { min-height: 50px; }

/* ---------- Responsive ----------------------------------- */
@media (max-width: 1050px) {
  body:not(.admin-body) .bk-hero-grid { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-hero { min-height: auto; padding-bottom: 125px; }
  body:not(.admin-body) .bk-hero-search { max-width: 720px; }
  body:not(.admin-body) .bk-trust-grid { grid-template-columns: 1fr 1fr; }
  body:not(.admin-body) .bk-trust-item:nth-child(2) { border-right: 0; }
  body:not(.admin-body) .bk-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--bk-line); }
  body:not(.admin-body) .bk-category-grid { grid-template-columns: repeat(2, 1fr); }
  body:not(.admin-body) .bk-fleet-grid { grid-template-columns: repeat(2, 1fr); }
  body:not(.admin-body) .bk-service-grid { grid-template-columns: repeat(2, 1fr); }
  body:not(.admin-body) .bk-location-grid { grid-template-columns: repeat(2, 1fr); }
  body:not(.admin-body) .bk-detail-grid { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-detail-booking { position: static; }
}
@media (max-width: 760px) {
  body:not(.admin-body) .bk-hero { padding: 65px 0 105px; }
  body:not(.admin-body) .bk-hero h1 { font-size: clamp(2.7rem, 13vw, 4.1rem); }
  body:not(.admin-body) .bk-hero-search { padding: 20px; }
  body:not(.admin-body) .bk-trust-grid { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-trust-item { border-right: 0; border-bottom: 1px solid var(--bk-line); }
  body:not(.admin-body) .bk-trust-item:last-child { border-bottom: 0; }
  body:not(.admin-body) .bk-category-grid,
  body:not(.admin-body) .bk-fleet-grid,
  body:not(.admin-body) .bk-service-grid,
  body:not(.admin-body) .bk-location-grid,
  body:not(.admin-body) .bk-testimonial-grid,
  body:not(.admin-body) .bk-steps { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-why { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-why-visual { min-height: 340px; }
  body:not(.admin-body) .bk-why-visual img { min-height: 340px; }
  body:not(.admin-body) .bk-fleet-filter { grid-template-columns: 1fr 1fr; margin-top: -22px; }
  body:not(.admin-body) .bk-fleet-filter button { grid-column: 1 / -1; }
  body:not(.admin-body) .bk-detail-specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body:not(.admin-body) .bk-hero-actions { display: grid; }
  body:not(.admin-body) .bk-hero-actions .btn { width: 100%; }
  body:not(.admin-body) .bk-fleet-filter { grid-template-columns: 1fr; }
  body:not(.admin-body) .bk-fleet-filter button { grid-column: auto; }
  body:not(.admin-body) .bk-detail-specs { grid-template-columns: 1fr; }
}


/*
 * Phase 3 — customer journey & final UX polish
 * Presentation only: no business logic, routes, forms or dynamic data changed.
 */

:root{
  --bk-ink:#101416;
  --bk-ink-soft:#171d1f;
  --bk-gold:#d9a52e;
  --bk-gold-soft:#f8edcf;
  --bk-paper:#f7f6f2;
  --bk-line:#e5e4de;
  --bk-muted:#697174;
  --bk-success:#237544;
  --bk-danger:#a8323a;
}

/* ---------- Shared page rhythm ---------- */
.booking-section,
.account-booking-page,
.booking-success-page,
.contact-grid,
.account-booking-page section{scroll-margin-top:100px}

.page-header{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bk-ink) 0%,#202729 100%);padding:3.3rem 0 2.7rem;border-bottom:1px solid rgba(217,165,46,.28)}
.page-header:after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(217,165,46,.16);border-radius:50%;right:-120px;top:-150px;pointer-events:none}
.page-header h1{position:relative;z-index:1;color:#fff;letter-spacing:-.035em;font-size:clamp(2rem,5vw,3.1rem);margin:0 0 .45rem}
.page-header .breadcrumb{position:relative;z-index:1;color:rgba(255,255,255,.65);font-size:.78rem}
.page-header .breadcrumb a{color:#fff}

/* ---------- Booking journey ---------- */
.booking-section{padding:3.2rem 0 5rem;background:var(--bk-paper)}
.booking-container{max-width:1180px}
.booking-intro{max-width:720px;margin:0 auto 2rem;text-align:center}
.booking-intro h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.035em;margin:.35rem 0 .65rem;color:var(--bk-ink)}
.booking-intro p{color:var(--bk-muted);max-width:650px;margin:auto;line-height:1.7}

.booking-progress{max-width:760px;margin:0 auto 1.7rem;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:.55rem}
.booking-step-indicator{display:flex;align-items:center;gap:.45rem;color:#8a9091;font-size:.72rem;white-space:nowrap}
.booking-step-indicator span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e9e9e4;font-weight:800;transition:.2s ease}
.booking-step-indicator.is-active{color:var(--bk-ink);font-weight:800}
.booking-step-indicator.is-active span{background:var(--bk-gold);color:var(--bk-ink);box-shadow:0 0 0 5px rgba(217,165,46,.14)}
.booking-step-indicator.is-complete{color:var(--bk-success)}
.booking-step-indicator.is-complete span{background:#dcefe2;color:var(--bk-success)}
.booking-progress-line{height:1px;background:#dddcd5}

.booking-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.25rem;align-items:start}
.booking-main.contact-form-card{background:#fff;border:1px solid var(--bk-line);border-radius:1.25rem;padding:1.45rem;box-shadow:0 20px 50px rgba(16,20,22,.07)}
.booking-panel-heading{display:flex;gap:.9rem;align-items:flex-start;padding-bottom:1.15rem;margin-bottom:1.2rem;border-bottom:1px solid var(--bk-line)}
.booking-panel-heading .step-number{width:40px;height:40px;flex:0 0 40px;border-radius:.7rem;background:var(--bk-ink);color:var(--bk-gold);display:grid;place-items:center;font-weight:800;font-size:.75rem}
.booking-panel-heading h2{margin:0 0 .2rem;font-size:1.25rem;color:var(--bk-ink);letter-spacing:-.02em}
.booking-panel-heading p{margin:0;color:var(--bk-muted);font-size:.78rem}

.booking-main .form-group{margin-bottom:1rem}
.booking-main .form-group label{font-weight:700;color:#2b3335;font-size:.74rem;margin-bottom:.42rem}
.booking-main input,.booking-main select,.booking-main textarea{border:1px solid #d9ddd9;background:#fbfbf8;border-radius:.7rem;min-height:46px;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.booking-main textarea{min-height:110px}
.booking-main input:focus,.booking-main select:focus,.booking-main textarea:focus{background:#fff;border-color:var(--bk-gold);box-shadow:0 0 0 4px rgba(217,165,46,.12);outline:none}
.form-help{color:#858d8f;font-size:.67rem;line-height:1.45}
.field-error{display:block;margin-top:.35rem;color:var(--bk-danger);font-size:.68rem;font-weight:600}

.location-shortcuts button{background:#fff;border-color:#deded7;color:#3a4142;transition:.18s ease}
.location-shortcuts button:hover{border-color:var(--bk-gold);background:var(--bk-gold-soft);color:var(--bk-ink)}

.driver-choice{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--bk-line)}
.driver-choice>label{font-weight:700;color:#2b3335;font-size:.74rem}
.driver-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.5rem}
.driver-option-card{position:relative;display:block;cursor:pointer}
.driver-option-card input{position:absolute;opacity:0;pointer-events:none}
.driver-option-card span{display:grid;grid-template-columns:32px 1fr;column-gap:.55rem;align-items:center;padding:.85rem;border:1px solid #dfe1db;border-radius:.8rem;background:#fbfbf8;transition:.18s ease}
.driver-option-card span i{grid-row:span 2;width:32px;height:32px;display:grid;place-items:center;border-radius:.6rem;background:#ecece6;color:#697174}
.driver-option-card strong{font-size:.77rem;color:var(--bk-ink)}
.driver-option-card small{font-size:.65rem;color:var(--bk-muted)}
.driver-option-card input:checked+span{border-color:var(--bk-gold);background:#fffaf0;box-shadow:0 0 0 3px rgba(217,165,46,.10)}
.driver-option-card input:checked+span i{background:var(--bk-gold);color:var(--bk-ink)}
.price-note{display:block;min-height:18px;margin-top:.45rem;color:#876416;font-size:.68rem;font-weight:700}

.booking-panel-actions{display:flex;justify-content:space-between;gap:.65rem;margin-top:1.35rem;padding-top:1rem;border-top:1px solid var(--bk-line)}
.booking-panel-actions .btn{min-height:45px}
.booking-panel-actions .btn-primary{min-width:150px}

.booking-summary-card{position:sticky;top:92px;background:var(--bk-ink);color:#fff;border-radius:1.15rem;padding:1.3rem;box-shadow:0 22px 50px rgba(16,20,22,.16);overflow:hidden}
.booking-summary-card:before{content:"";position:absolute;right:-65px;top:-70px;width:170px;height:170px;border:1px solid rgba(217,165,46,.22);border-radius:50%}
.booking-summary-card .section-eyebrow{position:relative;color:var(--bk-gold)}
.summary-empty{text-align:center;padding:2.2rem .6rem;color:rgba(255,255,255,.58)}
.summary-empty i{display:grid;place-items:center;width:58px;height:58px;margin:0 auto .8rem;border-radius:50%;background:rgba(255,255,255,.07);color:var(--bk-gold);font-size:1.25rem}
.summary-empty p{font-size:.74rem;line-height:1.5;margin:0}
.summary-car{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.summary-car strong{display:block;color:#fff;font-size:1rem;margin-bottom:.2rem}
.summary-car span{color:rgba(255,255,255,.55);font-size:.7rem}
.summary-line{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.72rem}
.summary-line span{color:rgba(255,255,255,.58)}
.summary-line strong{color:#fff}
.summary-total{display:flex;justify-content:space-between;gap:1rem;align-items:end;padding:1rem 0 .45rem}
.summary-total span{font-size:.72rem;color:rgba(255,255,255,.62)}
.summary-total strong{font-size:1.25rem;color:var(--bk-gold)}
.summary-deposit{display:flex;justify-content:space-between;color:rgba(255,255,255,.52);font-size:.68rem;padding-bottom:.75rem}
.summary-deposit strong{color:#fff}
.summary-note{display:block;color:rgba(255,255,255,.42);font-size:.62rem;line-height:1.5}

.booking-review{background:#f8f8f4;border:1px solid var(--bk-line);border-radius:.85rem;padding:.9rem;margin-bottom:1rem}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.review-grid>div{padding:.7rem;background:#fff;border:1px solid #e8e8e2;border-radius:.65rem}
.review-grid span,.review-grid strong{display:block}
.review-grid span{font-size:.62rem;color:#7b8385;text-transform:uppercase;letter-spacing:.06em}
.review-grid strong{font-size:.74rem;color:var(--bk-ink);margin-top:.2rem}
.damage-agreement{padding:.8rem;border-radius:.75rem;background:#fffaf0;border:1px solid #ead9ac}
.damage-agreement label{display:flex;gap:.65rem;align-items:flex-start;font-size:.7rem;line-height:1.5;color:#5e4c1e}
.damage-agreement input{margin-top:.2rem;accent-color:var(--bk-gold)}
.booking-trust-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem;color:#707879;font-size:.64rem}
.booking-trust-row span{display:inline-flex;align-items:center;gap:.3rem}
.booking-trust-row i{color:var(--bk-gold)}

/* ---------- Confirmation / payment ---------- */
.booking-success-page{max-width:860px;padding:4.5rem 20px 5.5rem}
.booking-success-icon{width:82px;height:82px;background:var(--bk-ink);color:var(--bk-gold);box-shadow:0 0 0 8px rgba(217,165,46,.12);font-size:2rem}
.booking-success-page h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em}
.booking-success-lead{font-size:.9rem;line-height:1.7}
.booking-reference-card{max-width:520px;margin:1.4rem auto;padding:1.05rem;border:1px solid var(--bk-line);border-radius:.9rem;background:#fff;box-shadow:0 12px 35px rgba(16,20,22,.05)}
.booking-reference-card span{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:.6rem;color:#8a9192}
.booking-reference-card strong{display:block;font-size:1.35rem;letter-spacing:.04em;color:var(--bk-ink);margin:.2rem 0}
.booking-reference-card small{font-size:.68rem;color:var(--bk-muted)}
.payment-card{border-color:#d9d8d1;border-radius:1.15rem;padding:1.35rem;box-shadow:0 18px 50px rgba(16,20,22,.08)}
.payment-card-header{align-items:center}
.payment-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:.8rem;background:var(--bk-gold-soft);color:#8b681b;flex:0 0 auto}
.payment-card-header h2{font-size:1.35rem;color:var(--bk-ink);letter-spacing:-.025em}
.payment-tabs{background:#f5f4ef;border:1px solid #e7e5dc;border-radius:.7rem;padding:.2rem;border:0}
.payment-tab{border:0!important;border-radius:.55rem;padding:.65rem .8rem;font-size:.7rem;flex:1}
.payment-tab.is-active{background:var(--bk-ink);color:#fff;box-shadow:0 4px 12px rgba(16,20,22,.12)}
.payment-panel{padding-top:.2rem}
.payment-explain{font-size:.73rem;line-height:1.6;color:var(--bk-muted)}
.payment-card input{background:#fbfbf8;border-radius:.7rem;border-color:#dadcd7}
.payment-card input:focus{border-color:var(--bk-gold);box-shadow:0 0 0 4px rgba(217,165,46,.12)}
.payment-waiting{background:#faf7ec;border-radius:.8rem;border:1px solid #ebdfbb}
.payment-waiting i{color:#9a741e}
.payment-state{border-radius:.8rem;border:1px solid transparent}
.payment-state-success{background:#f1f8f3;border-color:#d1e8d7;color:var(--bk-success)}
.payment-state-pending{background:#fff9ec;border-color:#eadbb7;color:#7c5d18}
.manual-mpesa-box{background:var(--bk-ink);border-color:var(--bk-ink);color:#fff}
.manual-mpesa-box strong{color:#fff}
.manual-number{color:var(--bk-gold);font-weight:800;font-size:1.1rem}
.manual-amount{font-size:1.35rem;font-weight:800;color:#fff}
.manual-label{color:rgba(255,255,255,.58);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em}
.manual-steps{background:#f8f8f4;border-radius:.75rem;padding:1rem 1rem 1rem 2rem;color:#555e60;font-size:.7rem;line-height:1.7}
.manual-note{font-size:.68rem;color:#707879;line-height:1.5}

/* ---------- Account area ---------- */
.account-booking-page{background:var(--bk-paper);padding:3rem 0 5rem}
.account-booking-page .account-booking-top{margin-bottom:1.5rem}
.account-booking-top h1{font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.035em;color:var(--bk-ink)}
.account-booking-top p{font-size:.72rem}
.account-booking-actions .btn{min-height:42px}
.customer-status-track{gap:.55rem}
.customer-status-track>div{border-color:#deded7;background:#fff;border-radius:.8rem;padding:.85rem .7rem}
.customer-status-track>div.done{border-color:#d4e7d9;background:#f7fbf8;color:var(--bk-success)}
.customer-status-track span{background:#ecece6}
.customer-status-track .done span{background:#dcefe2}
.account-booking-grid{gap:1.25rem}
.account-booking-grid .card{border:1px solid var(--bk-line);border-radius:1rem;box-shadow:0 14px 40px rgba(16,20,22,.05)}
.customer-car-heading img,.customer-car-placeholder{width:130px;height:92px;border-radius:.8rem}
.customer-car-heading h2{font-size:1.3rem;color:var(--bk-ink)}
.customer-trip-grid>div{background:#f8f8f4;border:1px solid #ebeae3}
.customer-trip-grid strong{color:var(--bk-ink)}
.customer-payment-card{position:sticky;top:92px}
.customer-total{font-size:2rem;color:var(--bk-ink)}
.customer-payment-status{border-radius:.7rem}
.customer-help-card{background:var(--bk-ink);color:#fff!important;border-color:var(--bk-ink)!important}
.customer-help-card h2{color:#fff}
.customer-help-card p{color:rgba(255,255,255,.62)}
.customer-phone-link{color:var(--bk-gold)}

/* Dashboard cards inherit the new fleet language */
.empty-state{background:#fff!important;border:1px dashed #d8d8d1!important;border-radius:1rem!important;padding:3rem 1.5rem!important;box-shadow:none!important}
.empty-state i{color:var(--bk-gold)!important}

/* ---------- Auth / contact / utility pages ---------- */
.contact-form-card{border:1px solid var(--bk-line);border-radius:1rem;box-shadow:0 14px 40px rgba(16,20,22,.06);background:#fff}
.contact-form-card h2{color:var(--bk-ink)!important}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea{border-radius:.7rem;background:#fbfbf8;border-color:#deded8}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:var(--bk-gold);box-shadow:0 0 0 4px rgba(217,165,46,.11);outline:none}
.contact-info-card{border-radius:1rem!important;background:var(--bk-ink)!important;border-color:var(--bk-ink)!important;box-shadow:0 18px 45px rgba(16,20,22,.12)}
.contact-info-card h2,.contact-info-card strong{color:#fff!important}
.contact-info-item i{background:rgba(217,165,46,.13)!important;color:var(--bk-gold)!important}
.map-embed{border-radius:.8rem;overflow:hidden;border:1px solid rgba(255,255,255,.12)}

/* 404/500 — turn inline-styled utility pages into deliberate brand moments */
main>section:has(.container.text-center h1[style*="5rem"]){min-height:58vh;display:grid;place-items:center;background:var(--bk-paper)}
main>section:has(.container.text-center h1[style*="5rem"]) h1{font-size:clamp(5rem,15vw,9rem)!important;line-height:.8;text-shadow:8px 8px 0 rgba(217,165,46,.12)}
main>section:has(.container.text-center h1[style*="5rem"]) h2{font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.03em}

/* ---------- Focus / motion / accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(217,165,46,.45);outline-offset:2px}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.car-card,.card{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.car-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,20,22,.10)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .booking-layout{grid-template-columns:1fr}
  .booking-summary-card{position:relative;top:auto;order:-1}
  .account-booking-grid{grid-template-columns:1fr}
  .customer-payment-card{position:relative;top:auto}
}

@media(max-width:640px){
  .page-header{padding:2.5rem 0 2rem}
  .booking-section,.account-booking-page{padding:2.3rem 0 3.5rem}
  .booking-main.contact-form-card{padding:1rem;border-radius:.95rem}
  .booking-progress{grid-template-columns:1fr 1fr 1fr;gap:.35rem}
  .booking-progress-line{display:none}
  .booking-step-indicator{justify-content:center;flex-direction:column;gap:.25rem;font-size:.61rem}
  .booking-step-indicator span{width:29px;height:29px}
  .booking-layout{gap:.85rem}
  .driver-choice-grid,.review-grid{grid-template-columns:1fr}
  .booking-panel-actions{position:sticky;bottom:0;z-index:10;margin-left:-1rem;margin-right:-1rem;padding:.75rem 1rem;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 -10px 25px rgba(16,20,22,.06)}
  .booking-panel-actions .btn{flex:1}
  .booking-success-page{padding:3.2rem 16px 4rem}
  .payment-card{padding:1rem}
  .payment-card-header{align-items:flex-start}
  .payment-card-header h2{font-size:1.1rem}
  .payment-tabs{display:flex}
  .customer-car-heading{gap:.75rem}
  .customer-car-heading img,.customer-car-placeholder{width:105px;height:78px}
}

@media(max-width:480px){
  .account-booking-actions{width:100%}
  .account-booking-actions .btn{flex:1}
  .customer-status-track{grid-template-columns:1fr 1fr}
  .customer-trip-grid{grid-template-columns:1fr}
  .manual-mpesa-box{grid-template-columns:1fr}
  .payment-tab{font-size:.64rem;padding:.58rem .45rem}
}
.auth-section{padding:3.5rem 0 5rem;background:var(--bk-paper)}
.auth-container{position:relative}
.auth-card{padding:1.6rem!important}
.auth-card form{margin-top:.8rem}
.auth-card .btn-block{min-height:47px}
.auth-card p a{color:#8b681b!important;text-decoration:none!important;font-weight:700}
/* =========================================================
   Big Kahuna public layout foundation
   One source of truth for viewport/section sizing.
   Admin pages are excluded.
   ========================================================= */
html {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

body:not(.admin-body) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body:not(.admin-body) > .topbar,
body:not(.admin-body) > .site-header,
body:not(.admin-body) > main,
body:not(.admin-body) > .site-footer,
body:not(.admin-body) > header,
body:not(.admin-body) > footer {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

body:not(.admin-body) .topbar,
body:not(.admin-body) .site-header,
body:not(.admin-body) main,
body:not(.admin-body) .site-footer {
    width: 100%;
    max-width: none;
    min-width: 0;
}

body:not(.admin-body) section,
body:not(.admin-body) .bk-section,
body:not(.admin-body) .bk-hero,
body:not(.admin-body) .bk-page-hero,
body:not(.admin-body) .bk-detail-hero,
body:not(.admin-body) .bk-cta {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

body:not(.admin-body) .container {
    width: 100%;
    max-width: var(--container);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body:not(.admin-body) main *,
body:not(.admin-body) .site-header *,
body:not(.admin-body) .site-footer * {
    min-width: 0;
}

body:not(.admin-body) img,
body:not(.admin-body) svg,
body:not(.admin-body) video,
body:not(.admin-body) iframe {
    max-width: 100%;
}

@media (max-width: 760px) {
    body:not(.admin-body) .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    body:not(.admin-body) section,
    body:not(.admin-body) .bk-section,
    body:not(.admin-body) .bk-hero,
    body:not(.admin-body) .bk-page-hero,
    body:not(.admin-body) .bk-detail-hero,
    body:not(.admin-body) .bk-cta {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    body:not(.admin-body) .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================
   Public mobile shell + Paystack checkout compatibility
   ========================================================= */
html,
body:not(.admin-body) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body:not(.admin-body) {
  position: relative;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body:not(.admin-body) .site-header,
body:not(.admin-body) .topbar,
body:not(.admin-body) main,
body:not(.admin-body) .site-footer {
  width: 100%;
  max-width: none;
  min-width: 0;
}

@media (max-width: 900px) {
  body:not(.admin-body) .site-header {
    position: sticky;
    top: 0;
    z-index: 10000;
  }

  body:not(.admin-body) .site-header .container {
    width: 100%;
    max-width: 100%;
  }

  body:not(.admin-body) .nav-toggle {
    position: relative;
    z-index: 10002;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    touch-action: manipulation;
  }

  body:not(.admin-body) .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    width: auto;
    max-width: none;
    height: calc(100dvh - var(--header-height));
    z-index: 10001;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }

  body:not(.admin-body) .main-nav.open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  body:not(.admin-body) .main-nav ul {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.admin-body) .main-nav {
    left: 0;
    right: 0;
    overflow-x: hidden;
  }
}

@media (max-width: 900px) {
  html.nav-lock,
  html.nav-lock body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Paystack owns the checkout iframe. Never let the site's narrow mobile
   containers clip the checkout layer or force the customer to zoom/scroll. */
body.paystack-checkout-active {
  overflow: hidden !important;
}

body.paystack-checkout-active .site-header,
body.paystack-checkout-active main,
body.paystack-checkout-active .site-footer {
  isolation: auto;
}

.payment-waiting[hidden]{display:none !important;}

.payment-waiting.is-ready {
  border-color: rgba(217,165,46,.35);
}

.payment-waiting.is-ready i {
  color: var(--bk-gold-dark);
}


/* Paystack Popup V2 creates its own top-level checkout iframe. Do not apply
   the site's content-image sizing rule to that payment layer. */
body:not(.admin-body) > iframe[src*="paystack"] {
  max-width: none !important;
}
body:not(.admin-body) iframe[src*="checkout.paystack.com"],
body:not(.admin-body) iframe[src*="paystack.co"] {
  max-width: none !important;
}

/* =========================================================
   Payment experience refinement — Paystack / customer account
   Scoped to payment UI only.
   ========================================================= */
.payment-ui-card{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fcfbf7 100%)}
.payment-ui-heading{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.payment-ui-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:14px;background:var(--bk-gold-soft);color:#8b681b;font-size:1.05rem}
.payment-ui-heading h2{margin:.08rem 0 .18rem;color:var(--bk-ink);font-size:1.25rem;letter-spacing:-.025em}
.payment-ui-heading p{margin:0;color:var(--bk-muted);font-size:.68rem;line-height:1.45}
.payment-due-box{padding:1rem;border:1px solid #e8e5dc;border-radius:1rem;background:#f8f7f2;margin-bottom:.85rem}
.payment-due-box>span{display:block;color:#8a9192;text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;font-weight:700}
.payment-due-box>strong{display:block;margin:.15rem 0 .7rem;color:var(--bk-ink);font-size:2rem;line-height:1;letter-spacing:-.045em}
.payment-due-box>div{display:flex;justify-content:space-between;align-items:center;padding-top:.65rem;border-top:1px solid #e7e4dc;font-size:.67rem;color:var(--bk-muted)}
.payment-due-box b{color:#8b681b;font-size:.82rem}
.payment-action-panel{margin-top:.85rem;padding:1rem;border:1px solid #e8e5dc;border-radius:1rem;background:#fff;box-shadow:0 10px 28px rgba(16,20,22,.045)}
.payment-action-copy{margin-bottom:.75rem}
.payment-action-copy span{display:block;color:var(--bk-ink);font-weight:800;font-size:.78rem}
.payment-action-copy small{display:block;color:var(--bk-muted);font-size:.62rem;line-height:1.5;margin-top:.2rem}
.payment-pay-btn{min-height:50px;border-radius:.8rem;font-size:.78rem;font-weight:800;box-shadow:0 8px 20px rgba(217,165,46,.18)}
.payment-result{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem;border-radius:.85rem;margin:.8rem 0;font-size:.68rem;border:1px solid transparent}
.payment-result-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border-radius:10px;background:rgba(255,255,255,.7)}
.payment-result strong{display:block;color:inherit;font-size:.73rem;margin-bottom:.12rem}
.payment-result span:not(.payment-result-icon){display:block;line-height:1.5}
.payment-result-success{background:#eff8f1;border-color:#d6eadb;color:#247642}
.payment-result-pending{background:#fff8e9;border-color:#ecdfbf;color:#8a6416}
.payment-result-failed{background:#fff1ef;border-color:#efd5d1;color:#a13c32}
.payment-reference{margin:.7rem 0 0;padding:.7rem .8rem;border:1px dashed #dcd8cc;border-radius:.75rem;background:#fbfaf6}
.payment-reference span{display:block;color:#8a9192;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em}
.payment-reference strong{display:block;color:var(--bk-ink);font-size:.65rem;word-break:break-all;margin-top:.15rem}
.payment-reference-light{max-width:520px;margin:.7rem auto 0;text-align:left}
.payment-inline-state{margin-top:.65rem!important}
.payment-trust-row{display:flex;justify-content:space-between;gap:.35rem;margin-top:.75rem;color:#7c8586;font-size:.57rem;font-weight:700}
.payment-trust-row span{display:inline-flex;align-items:center;gap:.25rem}
.payment-trust-row i{color:#9a741e}
.payment-paystack-intro{padding:.85rem 0 .7rem}
.payment-paystack-brand{display:flex;align-items:center;gap:.55rem}
.payment-paystack-lock{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f6edd1;color:#8b681b}
.payment-paystack-brand strong{display:block;color:var(--bk-ink);font-size:.78rem}
.payment-paystack-brand span{display:block;color:var(--bk-muted);font-size:.59rem;margin-top:.08rem}
.payment-paystack-intro>p{margin:.6rem 0 0;color:var(--bk-muted);font-size:.67rem;line-height:1.55}

/* Paystack's V2 checkout is a top-level iframe. Keep it above all site
   containers and give it the full viewport so mobile users never need to
   scroll or zoom to find the payment form. */
body:not(.admin-body) > iframe[src*="paystack"],
body:not(.admin-body) > iframe[src*="checkout.paystack.com"],
body:not(.admin-body) iframe[src*="checkout.paystack.com"]{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  z-index:2147483647 !important;
}

@media(max-width:640px){
  .payment-ui-heading{align-items:flex-start}
  .payment-ui-icon{width:42px;height:42px;flex-basis:42px}
  .payment-due-box>strong{font-size:1.8rem}
  .payment-action-panel{padding:.85rem}
  .payment-trust-row{font-size:.52rem}
  .payment-paystack-intro>p{font-size:.64rem}
}


/* =========================================================
   Paystack-only checkout UX
   ========================================================= */
.payment-card-paystack {
    max-width: 720px;
    margin-inline: auto;
}

.payment-card-paystack .payment-card-header {
    gap: 14px;
}

.payment-card-paystack .payment-paystack-intro {
    background: #fbfaf5;
    border: 1px solid #ece7d8;
    border-radius: 14px;
    padding: 14px;
    margin: 12px 0 16px;
}

.payment-card-paystack .payment-paystack-intro > p {
    font-size: .78rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.payment-card-paystack .payment-pay-btn {
    min-height: 54px;
    font-size: .88rem;
    letter-spacing: -.01em;
}

.payment-card-paystack .payment-trust-row {
    font-size: .65rem;
    justify-content: center;
    gap: 18px;
}

.settings-security-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 18px;
    padding: 12px 14px;
    border: 1px solid #e8e5dc;
    border-radius: 10px;
    background: #faf9f5;
    color: var(--color-text-faint);
    font-size: .78rem;
    line-height: 1.5;
}

.settings-security-note i {
    color: var(--bk-gold-dark);
    margin-top: 2px;
}

@media (max-width: 560px) {
    .payment-card-paystack .payment-trust-row {
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .payment-card-paystack .payment-pay-btn {
        min-height: 52px;
    }
}

.payment-purpose-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.payment-purpose-badge.deposit{background:#fff5d8;color:#8b6500}
.payment-purpose-badge.balance{background:#e6f5ec;color:#187442}
.payment-history{padding-top:12px;border-top:1px solid rgba(16,20,22,.1)}

/* External reviews */
.bk-reviews-section,.bk-reviews-page{background:var(--color-white)}
.bk-review-summary{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin:0 auto 28px;max-width:980px;padding:22px 24px;border:1px solid rgba(16,20,22,.09);border-radius:18px;background:var(--color-white);box-shadow:0 10px 30px rgba(16,20,22,.05)}
.bk-review-score{display:flex;flex-direction:column;align-items:center;min-width:92px}.bk-review-score strong{font-size:2.2rem;line-height:1;font-weight:800;color:var(--bk-navy,#092d3a)}.bk-review-score span,.bk-review-summary-copy span{font-size:.78rem;color:var(--color-text-faint)}.bk-review-summary-copy{display:flex;flex-direction:column;gap:4px}.bk-review-stars{display:flex;gap:3px}.bk-review-stars i{font-size:.9rem;color:#d8dadd}.bk-review-stars i.is-on{color:#e5ad25}.bk-review-source-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.bk-review-source-pills span{padding:8px 10px;border-radius:999px;background:#f5f7f7;color:#59666a;font-size:.75rem}.bk-review-source-pills strong{color:#173b45}.bk-external-review-card h3{font-size:1rem;margin:0 0 8px}.bk-external-review-meta{display:flex;flex-direction:column;gap:2px;margin-top:16px}.bk-external-review-meta strong{font-size:.85rem}.bk-external-review-meta span{font-size:.72rem;color:var(--color-text-faint)}.bk-review-source-link{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:.75rem;font-weight:700}.bk-review-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.customer-review-request-card{background:linear-gradient(135deg,#fffdf6,#fff);border:1px solid rgba(213,166,43,.28)}.customer-review-request-card h2{margin:8px 0}.customer-review-request-card p{color:var(--color-text-faint);font-size:.88rem}.customer-review-actions{display:grid;gap:8px;margin-top:16px}.admin-review-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:18px}.review-source-status-grid{display:grid;gap:12px}.review-source-status{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(16,20,22,.08);border-radius:12px}.review-source-status>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.review-source-status span{font-size:.75rem;color:var(--color-text-faint)}.review-source-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}.review-source-logo.google{background:#f2f5f7;color:#4285f4}.review-source-logo.trip{background:#eaf7ef;color:#16a05d}.review-admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.review-admin-stats>div{padding:14px;border:1px solid rgba(16,20,22,.08);border-radius:12px}.review-admin-stats span,.review-admin-stats small{display:block;color:var(--color-text-faint);font-size:.72rem}.review-admin-stats strong{display:block;margin:4px 0}.review-rating-inline{color:#e5ad25;white-space:nowrap}.review-request-links{display:grid;gap:12px}.review-request-links div{display:grid;gap:4px}.review-request-links a{word-break:break-all;font-size:.8rem}.review-token-card{border-color:#e5ad25}.review-token-value{display:block;padding:12px;word-break:break-all;background:#f6f7f7;border-radius:8px;margin-top:10px}@media(max-width:800px){.bk-review-summary{grid-template-columns:1fr;text-align:center}.bk-review-summary-copy{align-items:center}.bk-review-source-pills{justify-content:center}.admin-review-grid{grid-template-columns:1fr}.review-source-status{grid-template-columns:44px 1fr}.review-source-status .btn{grid-column:2;justify-self:start}.review-admin-stats{grid-template-columns:1fr}}

.legal-page{padding:56px 0}
.legal-document{max-width:980px;margin:0 auto;padding:clamp(22px,4vw,42px)}
.legal-document__meta{display:flex;align-items:center;gap:8px;color:var(--color-text-faint);font-size:.82rem;border-bottom:1px solid rgba(16,20,22,.08);padding-bottom:16px;margin-bottom:26px}
.legal-document__content{color:var(--color-text-soft);font-size:.96rem;line-height:1.85;white-space:normal}
.legal-document__contact{margin-top:34px;padding:20px;border-radius:12px;background:var(--color-sand)}
.legal-document__contact h2{margin:0 0 8px;color:var(--color-text)}
.legal-document__contact p{margin:0 0 12px;color:var(--color-text-soft)}
.legal-document__contact a,.legal-document__contact span{display:block;margin-top:6px;color:var(--color-text)}
@media (max-width:720px){.legal-page{padding:28px 0}.legal-document{padding:20px}.legal-document__content{font-size:.92rem;line-height:1.75}}