:root {
  --blue-700: #0b63ce;
  --blue-600: #1273ea;
  --blue-100: #eaf4ff;
  --blue-050: #f5fbff;
  --ink-900: #121826;
  --ink-700: #2f3a4a;
  --ink-500: #64748b;
  --gray-050: #fafbfc;
  --gray-100: #f4f6f8;
  --gray-200: #e6ebf1;
  --gray-300: #d3dbe5;
  --ink-600: #4a5666;
  --ink-400: #94a3b8;
  --ink-300: #b4bdc9;
  --blue-200: #aacdf5;
  --white: #ffffff;
  --orange: #f59e0b;
  --green: #11885a;
  --shadow: 0 0 0 1px rgba(23, 49, 110, 0.04), 0 2px 6px rgba(15, 23, 42, 0.10), 0 10px 24px rgba(23, 49, 110, 0.16), 0 24px 54px rgba(23, 49, 110, 0.20);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --step-gap: 16px;            /* uniform vertical gap: step title → content, and between stacked sub-items */
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--white);
  color: var(--ink-900);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

button { cursor: pointer; }

/* Scroll reveal — visual only; .reveal is added by JS so content never hides without it.
   transform/opacity don't reflow, so nothing changes size or layout. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.site-header {
  position: sticky;
  top: 22px;                                   /* sits further down from the top, still floating on scroll */
  z-index: 20;
  width: auto;
  max-width: min(1100px, 92vw);                /* centered + inset from both edges (~20% gap on wide screens) */
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 5px clamp(16px, 4vw, 40px);         /* shorter (less vertical height) */
  background: transparent;
  border: 1px solid var(--gray-200);           /* full border (was bottom-only) for the floating card edge */
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
/* Tiny boats sailing across the header, BEHIND a frosted-glass overlay (you can kinda tell). */
.header-boats { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: 18px; }
.header-boats .hb { position: absolute; line-height: 1; opacity: 1; will-change: transform; animation: hb-sail linear infinite; }
/* A little water splash/wake behind each boat — same-ish size, trailing the direction of travel. */
.header-boats .hb::before { content: "🌊"; position: absolute; left: -0.5em; bottom: -0.05em; font-size: 0.85em; opacity: 0.8; z-index: -1; }
.header-boats .hb:nth-child(1) { top: 0;    font-size: 30px; animation-duration: 19s; animation-delay: 0s; }
.header-boats .hb:nth-child(2) { top: 22px; font-size: 22px; animation-duration: 27s; animation-delay: -5s; }
.header-boats .hb:nth-child(3) { top: 10px; font-size: 34px; animation-duration: 16s; animation-delay: -11s; }
.header-boats .hb:nth-child(4) { top: 26px; font-size: 22px; animation-duration: 23s; animation-delay: -3s; }
.header-boats .hb:nth-child(5) { top: 4px;  font-size: 26px; animation-duration: 31s; animation-delay: -17s; }
.header-boats .hb:nth-child(6) { top: 16px; font-size: 28px; animation-duration: 21s; animation-delay: -8s; }
@keyframes hb-sail { from { transform: translateX(-56px); } to { transform: translateX(calc(100vw + 56px)); } }
/* ~40% glass but a softer blur so the boats stay faintly visible behind it. */
.header-glass { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 18px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px) saturate(150%); -webkit-backdrop-filter: blur(6px) saturate(150%); }
.site-header > .brand, .site-header > nav.desktop-nav, .site-header > .header-actions, .site-header > .nav-toggle { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .header-boats { display: none; } }
/* iOS/Android draw the 🚤 emoji with orange tones; tint the header boats to brand blue on mobile. */
@media (max-width: 640px) { .header-boats .hb { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(185deg) brightness(0.9); } }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-logo {
  display: block;
  width: clamp(160px, 20vw, 216px);
  height: clamp(40px, 5vw, 54px);
  min-width: 0;
  overflow: hidden;
}

.site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
  pointer-events: none;
}

.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 18px; letter-spacing: -0.03em; }
.brand-copy small { color: var(--ink-500); font-weight: 700; }

.desktop-nav, .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--ink-700);
  font-weight: 800;
  font-size: 14px;
}

.nav-link:hover, .nav-link.is-active { background: var(--blue-100); color: var(--blue-700); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  margin-left: auto;
  transition: background 0.15s;
}
.nav-toggle:hover { background: var(--blue-050); }
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink-700);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dropdown-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: clamp(12px, 3vw, 40px);
  min-width: 200px;
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 8px;
  z-index: 60;
}
.dropdown-nav.is-open { display: flex; }
.dropdown-nav a {
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--ink-700);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.12s;
}
.dropdown-nav a:hover { background: var(--blue-050); color: var(--blue-700); }
.dropdown-nav a.is-active { background: var(--blue-100); color: var(--blue-700); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue-700); color: var(--white); box-shadow: 0 12px 28px rgba(11, 99, 206, 0.22); }
.btn-primary:hover { background: var(--blue-600); }
.btn-soft { background: var(--blue-100); color: var(--blue-700); }
.btn-small { min-height: 40px; padding: 10px 15px; font-size: 14px; }
.btn-full { width: 100%; }

/* Sticky footer: the shell fills the viewport and the content grows so the footer sits at the
   bottom on short pages (e.g. the portal) instead of floating with empty space above/below it. */
#site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.page-shell {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 48px;
  flex: 1 0 auto;
}
.site-footer { flex-shrink: 0; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 28px;
  align-items: stretch;
}

.app-hero {
  position: relative;
  overflow: hidden;
  padding: 26px;
  background: var(--blue-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.app-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.25) 100%);
}

.hero-copy, .hero-panel { position: relative; z-index: 2; }

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vw, 44px);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue-700);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 820px;
  margin-bottom: 16px;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1; letter-spacing: -0.045em; }
h3 { font-size: 22px; line-height: 1.1; letter-spacing: -0.035em; }

.hero-copy p, .page-title p, .section-heading p { color: var(--ink-500); font-size: 18px; }

.hero-eyebrow {
  margin: 0 0 8px;
  color: var(--ink-500);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.hero-panel {
  min-height: 420px;
  display: flex;
  align-items: stretch;
}

.quick-quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 26px;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
}

.weather-meta {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 2px;
}

.weather-strip {
  display: flex;
  gap: 4px;
  background: var(--blue-050);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 8px 4px;
  align-items: center;
  min-height: 62px;
}
.weather-loading {
  font-size: 11px;
  color: var(--ink-400);
  text-align: center;
  width: 100%;
}
.weather-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  padding: 4px 2px;
  transition: background 0.15s;
}
.weather-day:hover { background: var(--gray-100); }
.weather-day .w-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.weather-day .w-icon { font-size: 15px; line-height: 1.3; }
.weather-day .w-high { font-size: 12px; font-weight: 800; color: var(--ink-900); line-height: 1; }
.weather-day .w-low { font-size: 10px; color: var(--ink-400); line-height: 1; }

.tap-list-title {
  display: block;
  text-align: center;
  color: var(--ink-900);
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
  margin: 6px 0 2px;
}
.tap-list-title:hover { text-decoration: underline; }

.tap-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.qq-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 2px auto 0;
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.qq-google:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.qq-google-g { flex-shrink: 0; }
.qq-google-rating { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.qq-google-stars { color: #fbbc05; letter-spacing: 1px; font-size: 13px; }
.qq-google-count { font-size: 12px; font-weight: 600; color: var(--ink-400); }

.qq-occasions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
}

.qq-occasions-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-300);
}

.qq-occasions a {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-050);
}

.qq-occasions a:hover { background: var(--blue-100, #dbeafe); }

.qq-perk {
  text-align: center;
  margin: 6px 0;
}
.perk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #b45309;
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qq-risk {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
  margin: 0 0 8px;
}

/* Boat-ramp meeting point — a quiet, supporting block under the primary CTA. Intentionally lower
   contrast and smaller than "Pick Your Lake Day" so it informs without competing with it. */
.qq-ramp {
  margin-top: 12px;
  padding: 16px 12px 14px;
  border-radius: 20px;
  text-align: center;
  /* Soft centre glow that fades to the card's white — lifts the address off the card without
     adding a hard-edged box, and stays lighter than the CTA so the booking button still leads. */
  background: radial-gradient(72% 122% at 50% 48%,
    rgba(11, 99, 206, 0.22) 0%,
    rgba(11, 99, 206, 0.11) 45%,
    rgba(11, 99, 206, 0.02) 76%,
    rgba(11, 99, 206, 0) 92%);
}

.qq-ramp-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.qq-ramp-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 11px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-900);
}

.qq-ramp-pin { flex: none; color: var(--blue-700); }
/* Keeps a long address from stranding the ZIP alone on line 2 on narrow phones. */
.qq-ramp-address span { text-wrap: balance; }

.qq-ramp-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qq-ramp-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* WCAG-comfortable phone tap target */
  padding: 0 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(11, 99, 206, 0.22);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(11, 99, 206, 0.13);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .qq-ramp-links a:hover {
    border-color: rgba(11, 99, 206, 0.45);
    box-shadow: 0 4px 12px rgba(11, 99, 206, 0.20);
  }
}

.qq-ramp-links a:focus-visible { outline: 2px solid var(--ink-700); outline-offset: 2px; }

.tap-list span,
.tap-list a,
.helper-box,
.night-note {
  display: block;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--blue-050);
  border: 1px solid var(--gray-200);
  color: var(--ink-700);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.tap-list { justify-items: center; position: relative; }
.tap-list a, .tap-list span {
  width: 240px;
  max-width: 100%;
  padding: 8px 24px;
  text-align: center;
}

.tap-list::before, .tap-list::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--blue-200, #aacdf5) 20%, var(--blue-700) 50%, var(--blue-200, #aacdf5) 80%, transparent);
  opacity: 0.55;
}
.tap-list::before { left: calc(25% - 60px); }
.tap-list::after { right: calc(25% - 60px); }

.tap-list a:hover { background: var(--blue-100, #dbeafe); }

@media (max-width: 380px) {
  .tap-list::before, .tap-list::after { display: none; }
}

.section-block { margin-top: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading.compact { display: block; max-width: 760px; }
.section-heading.compact h2 { margin-bottom: 10px; }
.section-heading h2 { margin-bottom: 0; }

.boat-grid, .pricing-grid, .dashboard-grid, .status-grid, .contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.boat-card,
.price-card,
.info-card,
.dashboard-card,
.status-card,
.text-card,
.contact-card,
.auth-card,
.gallery-boat-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.boat-card { overflow: hidden; }
.boat-photo { position: relative; min-height: 240px; background-size: cover; background-position: center; }
.boat-photo-img, .gallery-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.boat-photo span {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-700);
  font-weight: 950;
  font-size: 12px;
}

.boat-card-body, .price-card, .info-card, .dashboard-card, .status-card, .text-card, .contact-card, .auth-card, .gallery-boat-block { padding: 22px; }
.boat-card-body p { color: var(--ink-500); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip-row span {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 850;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step-card {
  min-height: 150px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--blue-050);
  border: 1px solid var(--gray-200);
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.step-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.step-card strong { display: block; margin-bottom: 10px; font-size: 28px; letter-spacing: -0.04em; }
.step-card span { color: var(--ink-500); font-weight: 750; }

.page-title {
  padding: 40px 0 24px;
  max-width: 920px;
}

.page-title h1 { margin-bottom: 14px; }
body[data-page="pricing"] .page-title h1 { max-width: none; font-size: clamp(32px, 4.6vw, 54px); }

/* Booking page hero bubble — photo BEHIND the text, like the pricing hero. Swap .booking-hero-bg src
   for a different photo; the light gradient overlay keeps the dark text readable over any image. */
.booking-hero-card { position: relative; overflow: hidden; max-width: 980px; margin: 28px auto 8px; padding: clamp(22px, 3.5vw, 40px); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.booking-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.booking-hero-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.3) 100%); }
.booking-hero-text { position: relative; z-index: 2; }
.booking-hero-text .page-title { padding: 0; max-width: none; }

.pricing-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); margin-bottom: 22px; padding: clamp(14px, 2.5vw, 22px); }
.pricing-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.25) 100%); }
.pricing-hero .pricing-grid { position: relative; z-index: 2; margin: 0; }

.price-card.featured { background: var(--white); border-color: #bedbff; }
.price-card h2 { margin-bottom: 12px; color: var(--ink-900); }
.price-card h2 span { font-size: 18px; color: var(--ink-500); letter-spacing: 0; }
.price-card p { color: var(--ink-500); min-height: 52px; }
.price-card { display: flex; flex-direction: column; border-color: #bedbff; }
.price-card .btn { margin-top: auto; }

.price-split { position: relative; display: flex; align-items: stretch; gap: 14px; margin-bottom: 12px; }
.price-split .price-tier { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.price-split .price-tier h2 { margin: 0; font-size: clamp(22px, 3.2vw, 32px); color: var(--ink-900); }
.price-split .price-tier small { color: var(--ink-500); font-weight: 850; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.price-split::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--blue-200) 20%, var(--blue-700) 50%, var(--blue-200) 80%, transparent);
  opacity: 0.6;
}

.booking-app { margin-top: 10px; }

.summary-bar {
  position: sticky;
  top: 79px;
  z-index: 15;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 18px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.summary-bar span {
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--ink-700);
  font-weight: 900;
  font-size: 13px;
}

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.booking-steps { display: grid; gap: 18px; }

.booking-step {
  padding: 20px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.step-head > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--blue-700);
  color: var(--white);
  font-weight: 950;
}

.step-head h2 { margin: 0 0 5px; font-size: 25px; }
.step-head p { margin: 0; color: var(--ink-500); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.select-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  min-height: 116px;
  padding: 16px;
  border: 2px solid var(--gray-200);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink-900);
  text-align: left;
}

.select-card:hover { border-color: var(--blue-600); background: var(--blue-050); }
.select-card.selected { border-color: var(--blue-700); background: var(--blue-100); box-shadow: 0 10px 24px rgba(11, 99, 206, 0.12); }
.select-card strong { font-size: 17px; }
.select-card span { color: var(--ink-500); font-weight: 750; }
.select-card em { margin-top: auto; color: var(--blue-700); font-style: normal; font-weight: 950; }

.boat-select { min-height: 178px; }
.mini-photo { width: 100%; height: 76px; border-radius: 15px; background-size: cover; background-position: center; }

.field-label { display: block; margin: 12px 0 8px; color: var(--ink-700); font-weight: 950; }
.tap-input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 2px solid var(--gray-200);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink-900);
  font-weight: 900;
}
.tap-input:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }

.scroll-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scroll-snap-type: x mandatory;
}

.pill {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-700);
  font-weight: 950;
  scroll-snap-align: start;
}

.pill:hover, .pill.selected { border-color: var(--blue-700); background: var(--blue-700); color: var(--white); }

.quote-panel {
  position: sticky;
  top: 148px;
  padding: 22px;
  border: 1px solid #bedbff;
  border-radius: var(--radius-lg);
  background: var(--blue-050);
  box-shadow: var(--shadow);
}

.quote-panel h2 { margin-bottom: 5px; color: var(--blue-700); font-size: 48px; }
.quote-rule { color: var(--ink-700); font-weight: 950; }

.quote-lines {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.quote-lines div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
}
.quote-lines span { color: var(--ink-500); font-weight: 800; }
.quote-lines strong { font-size: 17px; }
.fee-on { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }

.small-note { color: var(--ink-500); font-size: 13px; font-weight: 750; }

.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rule-card { padding: 22px; border: 1px solid #bedbff; border-radius: var(--radius-md); background: var(--blue-050); }
.rule-card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-900); }
.rule-card p { margin: 0; color: var(--ink-500); font-weight: 600; font-size: 0.95rem; line-height: 1.55; }
a.rule-card { cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
a.rule-card:hover { border-color: var(--blue-700); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 99, 206, 0.12); }
.rule-card-more { display: inline-block; margin-top: 12px; color: var(--blue-700); font-weight: 800; font-size: 0.85rem; }
@media (max-width: 720px) { .rules-grid { grid-template-columns: 1fr; } }

.gallery-stack { display: grid; gap: 22px; }

.gallery-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  margin-bottom: 22px;
}
.gallery-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0.4) 100%);
}
.gallery-hero .page-title {
  position: relative;
  z-index: 2;
  max-width: none;
  padding: 40px clamp(20px, 4vw, 44px) 28px;
}

.boat-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  background: var(--gray-100);
}
.boat-slideshow .boat-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-700);
  font-weight: 950;
  font-size: 12px;
}
.boat-slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.boat-slideshow .slide.active { opacity: 1; }
.slideshow-book-btn { position: absolute; left: 16px; bottom: 16px; z-index: 3; }
.slideshow-dots { position: absolute; right: 16px; bottom: 22px; z-index: 3; display: flex; gap: 6px; }
.slideshow-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background 0.2s;
}
.slideshow-dots .dot.active { background: #fff; }
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-900);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.slide-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.slide-arrow svg { width: 20px; height: 20px; }
.slide-prev { left: 12px; }
.slide-next { right: 12px; }

/* Full-screen photo viewer (boat card → tap photo). Overlay only — never navigates. */
.photo-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 12, 20, 0.93); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.photo-lightbox .pl-stage { max-width: 100vw; max-height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; }
.photo-lightbox .pl-img { max-width: 94vw; max-height: 88vh; object-fit: contain; user-select: none; -webkit-user-drag: none; border-radius: 6px; cursor: zoom-in; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5); }
.photo-lightbox .pl-img.is-zoomed { max-width: none; max-height: none; width: auto; height: 165vh; cursor: zoom-out; border-radius: 0; }
.photo-lightbox .pl-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink-900); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.photo-lightbox .pl-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink-900); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.photo-lightbox .pl-prev { left: 14px; }
.photo-lightbox .pl-next { right: 14px; }
.photo-lightbox .pl-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; font-weight: 700; }
@media (max-width: 600px) { .photo-lightbox .pl-arrow { width: 40px; height: 40px; font-size: 26px; } .photo-lightbox .pl-img { max-width: 100vw; max-height: 84vh; } }

.photo-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.gallery-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gallery-photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 99, 206, 0.22);
}
.gallery-photo span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--blue-700);
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(11, 99, 206, 0.22);
}

.auth-card { max-width: 460px; display: grid; gap: 10px; }
.auth-card label { font-weight: 950; color: var(--ink-700); }
.auth-card input {
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--gray-200);
  border-radius: 16px;
}

.dashboard-card, .status-card, .contact-card { display: grid; gap: 7px; min-height: 140px; }
.dashboard-card strong, .status-card strong, .contact-card strong { font-size: 21px; letter-spacing: -0.03em; }
.dashboard-card span, .status-card span, .contact-card span { color: var(--ink-500); font-weight: 750; }

.contact-card, .status-grid .status-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.contact-card:hover, .status-grid .status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 99, 206, 0.22);
}
/* Forms page cards are now links — drop the default underline/color, keep the card look. */
a.status-card { text-decoration: none; color: inherit; cursor: pointer; }
.form-foot-note { margin-top: 14px; color: var(--ink-500); font-size: 14px; }

.site-footer {
  /* Floating card matching the header (.site-header): inset, rounded, soft shadow + glass top. */
  width: auto;
  max-width: min(1100px, 92vw);
  margin: 28px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--ink-500);
}
.footer-area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.footer-area p { margin: 0; font-size: 0.82rem; }
.footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-logo {
  display: block;
  height: clamp(48px, 7vw, 96px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
}
.footer-links a { font-weight: 850; color: var(--ink-700); font-size: 0.88rem; white-space: nowrap; }

/* Footer "Areas We Serve" — clean full-width row: centered title + two tidy columns (Cities | Lakes). */
.footer-areas { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--gray-200); margin-top: 4px; padding-top: 12px; }
.footer-areas-title { margin: 0 0 8px; text-align: center; font-weight: 850; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); }
.footer-areas-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.footer-areas-cols .col-head { display: block; margin-bottom: 5px; font-weight: 850; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); }
.footer-areas-cols .links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-areas-cols .links a { font-size: 0.8rem; color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.footer-areas-cols .links a:hover { color: var(--blue-700); text-decoration: underline; }
@media (max-width: 560px) { .footer-areas-cols { grid-template-columns: 1fr; } }

.float-cta {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 50;
  padding: 14px 28px;
  border-radius: 100px;
  background: var(--blue-700);
  color: var(--white);
  font-weight: 950;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.float-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

.empty-state { padding: 60px 0; text-align: center; }

@media (max-width: 980px) {
  .desktop-nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }
  .hero, .booking-grid { grid-template-columns: 1fr; }
  .quote-panel { position: static; }
  .boat-grid, .pricing-grid, .dashboard-grid, .status-grid, .contact-grid, .step-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { margin: 20px auto; }
}

@media (max-width: 720px) {
  .site-header { padding: 12px 14px; }
  .brand-mark { width: 42px; height: 42px; }
  .page-shell { width: min(100% - 22px, var(--max)); padding-top: 20px; }
  .app-hero { padding: 12px; border-radius: 24px; }
  .hero-copy { padding: 18px; }
  h1 { font-size: 44px; }
  .hero-panel { min-height: unset; }
  .boat-grid, .pricing-grid, .dashboard-grid, .status-grid, .contact-grid, .step-grid, .choice-grid, .choice-grid.two, .photo-grid { grid-template-columns: 1fr; }
  .gallery-photo:first-child { min-height: 260px; grid-row: auto; }
  .summary-bar { top: 67px; border-radius: 20px; }
  .booking-step { padding: 16px; border-radius: 24px; }
  .select-card { min-height: 108px; }
  .quote-panel h2 { font-size: 42px; }
  .mobile-tabbar { display: flex; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; padding: 16px 18px; }
  .footer-area { justify-content: center; }
  .footer-area p { text-align: center; }
  .footer-links { justify-content: center; }
}

/************************************************************
 * Booking Calculator — App-Style Patch
 * Only affects the booking calculator section.
 ************************************************************/

.booking-app-shell {
  width: 100%;
  padding: 48px 16px 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f7f9fc;
}

.booking-app-wrap {
  width: min(100%, 760px);
  margin: 0 auto;
}

.booking-app-header {
  max-width: 680px;
  margin: 0 auto 22px;
  text-align: center;
}

.booking-app-header h1 {
  margin: 0 0 10px;
  color: #111827;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.045em;
}

.booking-app-header p {
  margin: 0 auto;
  max-width: 620px;
  color: #5b6472;
  line-height: 1.6;
}

.booking-app {
  width: 100%;
  display: flex;
  justify-content: center;
}

.booking-phone-card {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.booking-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 4px 16px;
}

.booking-progress span {
  height: 7px;
  border-radius: 999px;
  background: #e5eaf2;
}

.booking-progress span.active {
  background: #1597ff;
}

.booking-choice-list {
  display: grid;
  gap: 10px;
}

.booking-choice-row {
  position: relative;
  width: 100%;
  min-height: 92px;
  padding: 16px 48px 16px 16px;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid #dbe4f0;
  border-radius: 24px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.booking-choice-row:hover {
  transform: translateY(-1px);
  border-color: #1597ff;
  box-shadow: 0 14px 34px rgba(21, 151, 255, 0.12);
}

.booking-choice-row:active {
  transform: scale(0.99);
}

.booking-choice-row.has-thumb { padding-right: 128px; }

.choice-thumb {
  position: absolute;
  top: 50%;
  right: 66px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.choice-label {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.choice-main {
  color: #111827;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.choice-helper {
  color: #5b6472;
  font-size: 0.9rem;
  line-height: 1.35;
}

.choice-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #0077d9;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 800;
}

.booking-extras-card,
.quote-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: 26px;
  border: 1px solid #dbe4f0;
  background: #f8fbff;
}

.booking-extras-card { background: #ffffff; }

.mini-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.mini-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 1.05rem;
}

.extras-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extra-pill {
  padding: 11px 13px;
  display: grid;
  gap: 2px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.extra-pill strong {
  font-size: 0.9rem;
}

.extra-pill span {
  color: #6b7280;
  font-size: 0.78rem;
}

.extra-pill.active {
  border-color: #1597ff;
  background: #eaf6ff;
}

.extra-pill:hover {
  transform: translateY(-1px);
}

.quote-card {
  background: #eaf6ff;
  border-color: #bfe4ff;
}

.quote-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}

.quote-topline h2 {
  margin: 0;
  color: #071827;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.06em;
}

.quote-badge {
  padding: 8px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #0077d9;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.quote-lines {
  display: grid;
  gap: 8px;
}

.quote-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 119, 217, 0.14);
  color: #263445;
  font-size: 0.93rem;
}

.quote-line strong {
  color: #071827;
  white-space: nowrap;
}
/* Live per-unit rate shown next to "Base rental" (e.g. ($100/hr)) — muted so the price stands out. */
.quote-rate { color: var(--ink-400); font-weight: 600; white-space: nowrap; }

.night-status {
  margin-top: 14px;
  padding: 13px;
  display: grid;
  gap: 10px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 217, 0.14);
}

.night-status strong {
  color: #111827;
}

.night-status p {
  margin: 4px 0 0;
  color: #5b6472;
  font-size: 0.88rem;
  line-height: 1.45;
}

.quote-alert {
  color: #b45309;
  font-weight: 900;
  font-size: 0.9rem;
}

.quote-muted {
  color: #2563eb;
  font-weight: 800;
  font-size: 0.9rem;
}

.primary-booking-btn {
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  border: 0;
  border-radius: 20px;
  background: #1597ff;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(21, 151, 255, 0.25);
}

.primary-booking-btn:hover {
  background: #007ee6;
}
.primary-booking-btn:disabled { background: var(--gray-300, #cbd2dc); cursor: not-allowed; }
.booking-unavailable { margin: 10px 4px 0; color: #b91c1c; font-weight: 700; font-size: 0.85rem; }

.booking-footnote {
  margin: 12px 4px 0;
  color: #5b6472;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

/* Bottom pop-up sheet */

body.sheet-open {
  overflow: hidden;
}

.booking-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.booking-sheet.open {
  display: block;
}

.booking-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 25, 0.48);
}

.booking-sheet-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 560px);
  max-height: 85vh;
  transform: translate(-50%, -50%);
  padding: 16px 16px 20px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  overflow-y: auto;
  animation: sheetPop 160ms ease-out;
}

@keyframes sheetPop {
  from {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.booking-sheet-grabber {
  width: 48px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #c9d4e2;
}

.booking-sheet-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}

.booking-sheet-top h2 {
  margin: 0;
  color: #111827;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.sheet-close-btn {
  padding: 9px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f8fbff;
  color: #111827;
  font-weight: 900;
  cursor: pointer;
}

.booking-sheet-options {
  max-height: calc(78vh - 110px);
  padding-right: 4px;
  display: grid;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-option {
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
}

.sheet-option:hover {
  border-color: #1597ff;
  background: #f2f9ff;
}

.sheet-option.active {
  border-color: #1597ff;
  background: #eaf6ff;
}

.sheet-option strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.98rem;
}

.sheet-option small {
  display: block;
  color: #667085;
  line-height: 1.35;
}

.sheet-option b {
  color: #0077d9;
  font-size: 0.78rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .booking-app-shell {
    padding: 30px 12px 60px;
  }

  .booking-app-header {
    text-align: left;
    padding: 0 4px;
  }

  .booking-phone-card {
    border-radius: 28px;
    padding: 12px;
  }

  .booking-choice-row {
    min-height: 86px;
    border-radius: 21px;
  }

  .booking-sheet-panel {
    width: 92%;
  }
}

/* Emergency booking centering + white-screen-safe app layout */

#booking-app.booking-app-fixed-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0 70px;
}

#booking-app.booking-app-fixed-center .booking-phone-card {
  width: min(100%, 540px);
  margin: 0 auto;
}

#booking-app.booking-app-fixed-center .quote-lines {
  margin: 0;
}

#booking-app.booking-app-fixed-center .quote-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 119, 217, 0.14);
}

#booking-app.booking-app-fixed-center .quote-line:first-child {
  border-top: 0;
}

/* Booking calculator side-by-side layout + calendar picker */

#booking-app.booking-app-fixed-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0 70px;
}

#booking-app.booking-app-fixed-center .booking-phone-card.booking-split-card {
  width: min(100%, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.booking-edit-panel,
.booking-quote-panel {
  min-width: 0;
}

.booking-quote-panel {
  position: sticky;
  top: 96px;
  margin-top: 0;
}

.quote-summary-card {
  margin: 0 0 14px;
  padding: 13px;
  display: grid;
  gap: 4px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 217, 0.14);
}

.quote-summary-card strong {
  color: #111827;
  font-size: 0.98rem;
}

.quote-summary-card span {
  color: #5b6472;
  font-size: 0.88rem;
}

/* Themed month-grid calendar (replaces native date input) */
.cal-box { padding: 4px 2px 2px; display: grid; gap: 12px; }
.cal-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.cal-head strong { font-size: 1.05rem; font-weight: 900; color: var(--ink-900); text-align: center; }
.cal-nav {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--gray-200); background: var(--white);
  color: var(--blue-700); font-size: 22px; font-weight: 900; line-height: 1;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-nav:hover:not(:disabled) { background: var(--blue-050); border-color: var(--blue-200); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 800; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.04em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1 / 1; }
.cal-blank { visibility: hidden; }
.cal-day {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--gray-050); color: var(--ink-900);
  font-size: 0.95rem; font-weight: 800; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-day:hover:not(:disabled):not(.selected) { background: var(--blue-050); border-color: var(--blue-200); }
.cal-day.selected { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); box-shadow: 0 8px 18px rgba(11, 99, 206, 0.22); }
.cal-day:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
/* Fully-booked day: distinct from past/out-of-range — muted + struck through so the
   customer can see at a glance the day is taken (not just disabled). */
.cal-day.cal-full { opacity: 1; color: var(--ink-300); background: var(--gray-100, #f0f1f3); text-decoration: line-through; cursor: not-allowed; }
.cal-note { margin: 0; color: var(--ink-500); font-size: 0.9rem; line-height: 1.45; }

#booking-app.booking-app-fixed-center .quote-lines {
  margin: 0;
}

#booking-app.booking-app-fixed-center .quote-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 119, 217, 0.14);
}

#booking-app.booking-app-fixed-center .quote-line:first-child {
  border-top: 0;
}

@media (max-width: 900px) {
  #booking-app.booking-app-fixed-center .booking-phone-card.booking-split-card {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
  }

  .booking-quote-panel {
    position: static;
  }
}

/* Gas note inside live quote */

.quote-gas-note {
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  text-align: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 217, 0.14);
  color: #0077d9;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Google Reviews Badge */

.google-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  width: fit-content;
}

.google-reviews-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.13);
}

.google-g-icon {
  flex-shrink: 0;
}

.google-stars {
  color: #FBBC04;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
}

.google-rating {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.google-review-label {
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 800;
}

/* ── Multi-step booking flow ── */

.booking-step-card {
  width: min(100%, 540px);
  margin: 0 auto;
}

.step-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid #dbe4f0;
}

.step-summary-left {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.step-summary-left strong { font-size: 0.95rem; color: #111827; }
.step-summary-left span { color: #5b6472; font-size: 0.83rem; }
.step-summary-total { font-size: 1.1rem; color: #0077d9; white-space: nowrap; }

.step-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.step-back-btn {
  padding: 8px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #ffffff;
  color: #263445;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 160ms ease;
}

.step-back-btn:hover { background: #f2f9ff; }

.account-choice-btns { display: grid; gap: 10px; margin-top: 4px; }
.account-soft-btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #ffffff;
  color: #263445;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease;
}
.account-soft-btn:hover { background: #f2f9ff; }
.account-ghost-btn { background: transparent; border-style: dashed; color: #5b6472; }

.step-heading { margin-bottom: var(--step-gap); }
.step-heading h2 { margin-bottom: 6px; }
.step-heading p { margin: 0; color: #5b6472; font-size: 0.93rem; }

.step-form-grid { display: grid; gap: var(--step-gap); }

.step-form-group { display: grid; gap: 6px; }

.step-form-label {
  color: #263445;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.step-form-input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 700;
  transition: border-color 160ms ease;
}

.step-form-input:focus {
  outline: 3px solid rgba(21, 151, 255, 0.18);
  border-color: #1597ff;
}

.stripe-card-box {
  width: 100%;
  padding: 16px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #ffffff;
}

.stripe-error-text {
  min-height: 18px;
  color: #b45309;
  font-size: 0.85rem;
  font-weight: 800;
}

.terms-scroll-box {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f8fbff;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #263445;
}

.terms-scroll-box h3 { margin: 0 0 12px; font-size: 0.95rem; color: #111827; }
.terms-scroll-box p { margin: 0 0 10px; }
.terms-scroll-box p:last-child { margin-bottom: 0; }
.terms-scroll-box a, .text-card a { color: var(--blue-700); text-decoration: underline; font-weight: 700; }
.wiz-terms-link { color: var(--blue-700); text-decoration: underline; font-weight: 800; font-size: 0.95rem; }
/* Full terms document (e.g. /terms/ page) — explicit dark text so sections are always legible */
.terms-doc { color: var(--ink-900); }
.terms-doc h3 { margin: 22px 0 8px; color: var(--ink-900); }
.terms-doc h3:first-child { margin-top: 0; }
.terms-doc p { margin: 0 0 12px; color: var(--ink-900); }
.terms-doc ul { margin: 0 0 12px; padding-left: 20px; }
.terms-doc li { margin: 5px 0; color: var(--ink-900); }
/* Admin Terms editor (custom WYSIWYG) */
.terms-editor { display: flex; flex-direction: column; gap: 12px; }
.terms-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.terms-tool, .terms-font, .terms-size { padding: 8px 12px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-900); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.terms-tool:hover, .terms-font:hover, .terms-size:hover { border-color: var(--blue-700); color: var(--blue-700); }
.terms-edit-area { min-height: 360px; max-height: 62vh; overflow-y: auto; padding: 18px 20px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-md); background: var(--white); color: var(--ink-900); line-height: 1.55; }
.terms-edit-area:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }
.terms-edit-area h2 { font-size: 22px; margin: 18px 0 8px; }
.terms-edit-area h3 { font-size: 18px; margin: 16px 0 6px; }
.terms-edit-area p { margin: 0 0 10px; }
.terms-edit-area ul, .terms-edit-area ol { margin: 0 0 10px; padding-left: 22px; }
.terms-editor-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.terms-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  cursor: pointer;
  color: #263445;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.terms-agree-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #1597ff;
  cursor: pointer;
}

.terms-agree-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }

.terms-scroll-hint {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b06a00;
}

.booking-confirm-box {
  text-align: center;
  padding: 20px 0 10px;
}

.confirm-check {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 900;
}

.booking-confirm-box h2 { color: #111827; margin-bottom: 8px; }
.booking-confirm-box p { color: #5b6472; margin-bottom: 0; }

.confirm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f8fbff;
}

.confirm-detail-grid > div { display: grid; gap: 3px; }
.confirm-detail-grid strong { font-size: 0.9rem; color: #111827; word-break: break-word; }

/* Google Pay / Apple Pay button */

.pay-request-section {
  margin-bottom: 18px;
}

.pay-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: #9ca3af;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pay-divider::before,
.pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dbe4f0;
}

/* Home page embedded booking calculator */

.home-booking-panel {
  min-height: unset;
  align-items: flex-start;
}

#home-booking-app.booking-app-fixed-center {
  padding: 0;
  align-items: flex-start;
}

#home-booking-app.booking-app-fixed-center .booking-phone-card.booking-split-card {
  width: 100%;
  grid-template-columns: 1fr;
}

#home-booking-app.booking-app-fixed-center .booking-quote-panel {
  position: static;
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page { display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; min-height: 60vh; }
.auth-card { width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.auth-logo { height: 48px; width: auto; object-fit: contain; margin-bottom: 8px; }
.auth-card h2 { margin: 0; font-size: 1.5rem; }
.auth-sub { margin: 0; color: var(--ink-500); font-size: 0.9rem; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-weight: 800; font-size: 0.85rem; }
.auth-field input { padding: 12px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 1rem; }
.auth-field textarea { padding: 12px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; resize: vertical; }
.auth-field select { padding: 13px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 1.05rem; background: #fff; width: 100%; }
.form-done-chip { color: #15803d; font-weight: 750; font-size: 0.85rem; align-self: center; }
.auth-msg { font-size: 0.88rem; color: var(--blue-700); margin: 0; }
.auth-msg-error { color: #c0392b; }
.auth-note { font-size: 0.78rem; color: var(--ink-400); background: var(--blue-050); border-radius: 8px; padding: 10px 12px; margin: 0; }
.auth-links-row { margin: 0; font-size: 0.85rem; }
.auth-foot { margin: 0; font-size: 0.85rem; color: var(--ink-500); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-300); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ink-500); line-height: 1.4; }
.auth-check input { margin-top: 2px; flex-shrink: 0; }

/* Live password rules — each ticks bold blue with a ✓ as it's satisfied. */
.pw-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-checklist li { position: relative; padding-left: 24px; font-size: 0.82rem; color: var(--ink-400); transition: color 0.15s; }
.pw-checklist li::before { content: '○'; position: absolute; left: 0; top: 0; color: var(--ink-300); }
.pw-checklist li.is-met { color: var(--blue-700); font-weight: 800; }
.pw-checklist li.is-met::before { content: '✓'; color: var(--blue-700); font-weight: 800; }
.pw-match { margin: 0; font-size: 0.82rem; min-height: 1em; }
.pw-match.is-ok { color: var(--blue-700); font-weight: 700; }
.pw-match.is-error { color: #c0392b; }

/* One-time "verify your email" notice shown on home right after sign-up. */
.verify-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); padding: 16px; }
.verify-box { background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.25); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.verify-logo { height: 52px; width: auto; object-fit: contain; }
.verify-box h3 { margin: 0; font-size: 1.3rem; }
.verify-box p { margin: 0; color: var(--ink-500); font-size: 0.92rem; line-height: 1.5; }

/* ============================================================
   CUSTOMER PORTAL
   ============================================================ */
.portal-account p { display: flex; gap: 8px; margin: 0 0 6px; font-size: 0.9rem; }
.portal-account .cell-label { min-width: 56px; color: var(--ink-400); }

/* Admin sub-tabs (e.g. Customers | Documents) */
.admin-subtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-subtab { padding: 7px 16px; border: 1px solid var(--gray-200); background: var(--white); border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--ink-500); cursor: pointer; }
.admin-subtab.is-active { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }

/* Filter chip (e.g. "Needs info" toggle) + incomplete-profile badge */
.admin-chip { padding: 7px 14px; border: 1px solid var(--gray-200); background: var(--white); border-radius: 999px; font-weight: 700; font-size: 0.82rem; color: var(--ink-500); cursor: pointer; }
.admin-chip.is-active { background: #b45309; color: var(--white); border-color: #b45309; }
.incomplete-badge { display: inline-block; margin-top: 3px; font-size: 0.72rem; font-weight: 800; color: #b45309; background: #fef3e2; border-radius: 999px; padding: 2px 9px; }
.cust-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verify-badge { font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.verify-badge.is-verified { color: #166534; background: #dcfce7; }
.verify-badge.is-unverified { color: #b91c1c; background: #fee2e2; }
.field-err { color: #b91c1c; font-size: 0.8rem; font-weight: 700; margin: 4px 0 0; }
.field-err:empty { display: none; }

/* Consolidated form entry in My Documents (expand to see answers + photos + signature) */
.doc-detail { padding: 2px 0 12px 10px; border-bottom: 1px solid var(--gray-100); }
.doc-detail p { display: flex; gap: 8px; margin: 3px 0; font-size: 0.86rem; flex-wrap: wrap; }
.link-btn { border: none; background: none; color: var(--blue-700); font-weight: 700; cursor: pointer; padding: 0 4px; text-decoration: underline; }

/* Pre-departure inspection wizard */
.form-wiz { max-width: 460px; gap: var(--step-gap); }
/* Uniform vertical rhythm inside each wizard step (title → sub-text → content → sub-items), so every step matches. */
#wiz-body > * + * { margin-top: var(--step-gap); }
.wiz-progress { height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.wiz-bar { height: 100%; background: var(--blue-700); border-radius: 999px; transition: width 0.25s; }
.wiz-stepname { margin: 0; font-size: 0.82rem; font-weight: 800; color: var(--ink-500); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.wiz-nav .btn { flex: 1; }

/* Center the form wizard (pre-departure + end-of-rental): headings, text, labels, buttons & thumbnails
   center; inputs, the terms box, info boxes, and consent checkboxes stay LEFT so typed text + legal
   copy stay readable. Scoped to .form-wiz, so the sign-in / create-account pages are untouched. */
.form-wiz { text-align: center; }
.form-wiz input, .form-wiz select, .form-wiz textarea { text-align: left; }
.form-wiz .terms-scroll-box, .form-wiz .wiz-rules, .form-wiz .auth-check { text-align: left; }
.form-wiz .wiz-thumbs { justify-content: center; }
.wiz-count { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-500); }
.wiz-rules { font-size: 0.95rem; background: var(--gray-200); border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.45; }
.wiz-rules p { margin: 0; }
.wiz-rules ul { margin: 8px 0 0; padding-left: 18px; }
.wiz-rules li { margin: 4px 0; }
.wiz-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-thumb { font-size: 0.72rem; background: var(--gray-100); border-radius: 8px; padding: 4px 8px; display: inline-flex; gap: 6px; align-items: center; }
.wiz-thumb button { border: none; background: none; color: #b91c1c; font-weight: 800; cursor: pointer; }
.wiz-sig { width: 100%; height: auto; border: 1.5px dashed var(--gray-300); border-radius: var(--radius-sm); touch-action: none; background: #fff; }
/* Booking Step 3 signature pad — centered to match the form sign step. */
.bk-sig-group { text-align: center; }
.bk-sig-group .btn { margin-top: 8px; }
/* Condition photos — Take Photos / Choose From Library + in-page camera */
.wiz-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-photo-btns .btn { flex: 1; min-width: 140px; }
.wiz-cam { margin-top: 10px; }
.wiz-cam video { width: 100%; border-radius: var(--radius-sm); background: #000; max-height: 60vh; }
.wiz-cam-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wiz-cam-bar .btn { flex: 0 0 auto; }
.wiz-thumb { position: relative; padding: 0; overflow: hidden; }
.wiz-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; }
.wiz-thumb button { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.85); border-radius: 50%; width: 18px; height: 18px; padding: 0; line-height: 1; }
.wiz-thumb-ok { position: absolute; bottom: 1px; right: 4px; color: #15803d; font-weight: 800; font-size: .8rem; text-shadow: 0 0 3px #fff; }
.wiz-thumb.is-up { outline: 2px solid #15803d; }
/* Step 2 — per-driver license cards */
.wiz-driver { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; display: grid; gap: 8px; }
.wiz-driver-head { display: flex; justify-content: space-between; align-items: center; }
.wiz-driver .opt { font-weight: 400; color: var(--ink-500); font-size: .8rem; }
.portal-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.portal-header > div { display: grid; gap: 6px; }
.portal-header h1 { margin: 0; line-height: 1.15; }
.portal-header p { margin: 0; color: var(--ink-500); }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portal-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.portal-card.span2 { grid-column: span 2; }
.portal-card-header { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); background: var(--gray-050); }
.portal-card-header strong { font-size: 0.95rem; }
.portal-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.booking-row { display: flex; gap: 16px; align-items: flex-start; padding: 10px 18px; border-bottom: 1px solid var(--gray-100); font-size: 0.88rem; }
.booking-row:last-child { border-bottom: none; }
/* flex:1 = equal-width cells; align-items:flex-start above keeps every label chip
   on the SAME top line, so they read uniform even when a value wraps to 3 lines. */
.booking-cell { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; }
/* Mobile: cram-free booking cards — cells wrap 2-up, left-aligned; buttons stack full-width. */
@media (max-width: 640px) {
  .booking-row { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; }
  .booking-cell { flex: 0 0 calc(50% - 7px); justify-items: start; text-align: left; }
  .booking-form-actions { padding: 0 16px 14px; }
  .booking-form-actions .btn, .booking-form-actions .form-done-chip { flex: 1 1 100%; text-align: center; }
}
.cell-label {
  display: inline-block;
  background: var(--gray-100);
  color: var(--blue-700);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
}
.booking-list-empty { padding: 16px 18px; }
.booking-form-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 18px 16px; border-bottom: 1px solid var(--gray-100); }
.empty-msg { color: var(--ink-400); font-size: 0.88rem; margin: 0; }
.empty-msg a { color: var(--blue-700); }

/* ============================================================
   STATUS CHIPS
   ============================================================ */
.status-chip { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.status-pending { background: #fff3cd; color: #856404; }
.status-confirmed { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-completed { background: var(--blue-100); color: var(--blue-700); }

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.admin-header h1 { margin: 0; }
.admin-banner { background: #fff3cd; border: 1px solid #ffc107; color: #856404; border-radius: 10px; padding: 12px 16px; font-size: 0.88rem; margin-bottom: 20px; }

.admin-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.admin-tab { padding: 9px 18px; border: 1px solid var(--gray-200); background: var(--white); font-weight: 800; font-size: 0.88rem; color: var(--ink-500); cursor: pointer; border-radius: 999px; transition: all 0.15s; }
.admin-tab:hover { color: var(--blue-700); background: var(--blue-050); border-color: var(--blue-200); }
.admin-tab.is-active { color: var(--white); background: var(--blue-700); border-color: var(--blue-700); }

.admin-panel { min-height: 300px; }
.admin-loading { padding: 48px; text-align: center; color: var(--ink-400); }
.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-hint { font-size: 0.82rem; color: var(--ink-400); margin: 0; }
.admin-search { padding: 10px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.9rem; width: 280px; }
/* Custom sort dropdown (brand-styled — native <select> popups can't be themed) */
.admin-sort { position: relative; }
.admin-sort-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-900); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: border-color 0.12s; }
.admin-sort-btn:hover { border-color: var(--blue-700); }
.admin-sort-btn:focus-visible { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }
.admin-sort-caret { color: var(--ink-400); font-size: 0.7rem; }
.admin-sort-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 232px; margin: 0; padding: 6px; list-style: none; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px) saturate(150%); -webkit-backdrop-filter: blur(6px) saturate(150%); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 16px 38px rgba(15,23,42,0.18); z-index: 40; }
.admin-sort-menu[hidden] { display: none; }
.admin-sort-opt { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 650; color: var(--ink-700); cursor: pointer; white-space: nowrap; }
.admin-sort-opt:hover { background: var(--blue-050); color: var(--blue-700); }
.admin-sort-opt.is-selected { background: var(--blue-700); color: var(--white); }

/* Filter chips */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { padding: 6px 14px; border: 1.5px solid var(--gray-300); border-radius: 100px; font-size: 0.82rem; font-weight: 800; background: transparent; cursor: pointer; color: var(--ink-600); transition: all 0.12s; }
.filter-chip:hover { border-color: var(--blue-700); color: var(--blue-700); }
.filter-chip.is-active { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }

/* Pagination bar (Bookings, Audit, Customers) */
.admin-pager { margin-top: 12px; }
.perm-hidden { color: var(--ink-400); }   /* financial value hidden from staff without view_financials */

/* Non-blocking confirm modal (replaces native confirm() → no INP "blocked UI" lag) */
.confirm-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.45); padding: 16px; }
.confirm-box { background: var(--white); border-radius: 16px; padding: 22px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(15,23,42,0.25); }
.confirm-msg { margin: 0 0 16px; white-space: pre-line; color: var(--ink-600); font-size: 0.95rem; line-height: 1.5; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-yes { background: #dc2626; border: 1px solid #dc2626; color: #fff; }
.confirm-yes:hover { background: #b91c1c; border-color: #b91c1c; }

/* Admin "Edit a booking" modal */
.booking-editor { max-width: 600px; width: 100%; text-align: left; max-height: 90vh; overflow-y: auto; }
.be-title { margin: 0 0 14px; font-size: 1.1rem; color: var(--ink-700); }
.be-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.booking-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 800; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.03em; }
.booking-editor input, .booking-editor select, .booking-editor textarea { padding: 8px 10px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--ink-700); text-transform: none; letter-spacing: 0; }
.be-notes { margin-top: 10px; }
.be-msg { margin: 12px 0 0; color: #dc2626; font-size: 0.85rem; font-weight: 700; }
.be-sub { margin: -4px 0 14px; font-size: 0.86rem; color: var(--ink-500); }
.charge-summary { margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.charge-summary p { display: flex; justify-content: space-between; margin: 0; font-size: 0.9rem; color: var(--ink-600); }
.charge-summary .charge-final { border-top: 1px solid var(--gray-200); padding-top: 7px; margin-top: 3px; font-size: 1.05rem; font-weight: 800; color: var(--ink-900); }
/* Charge modal: pick which saved card to charge (site-style .admin-sort dropdown) + card manager. */
.charge-card-row { margin: 0 0 12px; }
.charge-card-label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ink-600); margin-bottom: 5px; }
.charge-card-controls { display: flex; align-items: center; gap: 10px; }
.charge-card-controls .admin-sort { flex: 1; }
.charge-card-controls .admin-sort-btn { width: 100%; justify-content: space-between; }
.charge-card-controls #ch-manage { white-space: nowrap; }
/* Saved-cards manager (shared by admin + portal). */
.cm-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.cm-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: #fff; }
.cm-card.is-default { border-color: var(--brand-blue, #0b63ce); box-shadow: 0 0 0 1px var(--brand-blue, #0b63ce) inset; }
.cm-card-info { flex: 1; font-weight: 700; color: var(--ink-900); font-size: 0.92rem; }
.cm-card-info small { font-weight: 600; color: var(--ink-500); margin-left: 4px; }
.cm-default { font-size: 0.74rem; font-weight: 800; color: var(--brand-blue, #0b63ce); text-transform: uppercase; letter-spacing: 0.03em; }
.cm-del { border: 0; background: transparent; color: #b91c1c; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cm-del:hover { color: #7f1d1d; }
.cm-add { margin: 4px 0 12px; }
.cm-element { padding: 4px 0 10px; }
.be-conflict { margin: 12px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; font-size: 0.82rem; font-weight: 700; }
/* Editor availability: website-style calendar (booked days crossed off) + open start-time chips. */
.be-availability { margin: 14px 0 4px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.be-cal .cal-box { width: 100%; max-width: 100%; }
.be-slots { min-height: 40px; }
.be-slot-note { margin: 0 0 8px; font-size: 0.8rem; color: var(--ink-500); font-weight: 700; }
.be-slot-ok { color: #15803d; }
.be-slot-bad { color: #b91c1c; }
.be-slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.be-slot { padding: 6px 10px; border: 1px solid var(--gray-300); background: var(--white); border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ink-600); cursor: pointer; }
.be-slot:hover { border-color: var(--blue-300); color: var(--blue-700); }
.be-slot.is-sel { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
@media (max-width: 560px) { .be-availability { grid-template-columns: 1fr; } }
.edit-btn { padding: 6px 12px; border: 1px solid var(--blue-200); background: var(--blue-050); color: var(--blue-700); border-radius: 8px; font-size: 0.8rem; font-weight: 800; cursor: pointer; margin-right: 6px; }
.invoice-btn { padding: 6px 12px; border: 1px solid var(--blue-200); background: var(--white); color: var(--blue-700); border-radius: 8px; font-size: 0.8rem; font-weight: 800; cursor: pointer; margin: 0 6px; }
.invoice-btn:hover { background: var(--blue-050); }

/* On-brand receipt / invoice (popup + print) */
.invoice-modal { max-width: 470px; width: 100%; text-align: left; max-height: 90vh; overflow-y: auto; }
.invoice-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--blue-700); margin-bottom: 14px; }
.invoice-logo { width: 40px; height: 40px; object-fit: contain; }
.invoice-head-name { display: flex; flex-direction: column; flex: 1; }
.invoice-head-name strong { color: var(--ink-900); font-size: 1rem; line-height: 1.1; }
.invoice-head-name span { color: var(--blue-700); font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.invoice-meta { display: flex; flex-direction: column; text-align: right; font-size: 0.74rem; color: var(--ink-400); font-weight: 700; }
.invoice-party { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; font-size: 0.85rem; color: var(--ink-700); }
.il-label { display: block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-400); margin-bottom: 2px; }
.invoice-section { margin-bottom: 12px; }
.is-title { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-700); background: var(--blue-050); padding: 4px 9px; border-radius: 6px; margin-bottom: 5px; }
.il { display: flex; justify-content: space-between; gap: 14px; padding: 4px 9px; font-size: 0.88rem; color: var(--ink-700); }
.il span:last-child { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.il-sub { border-top: 1px solid var(--gray-200); margin-top: 3px; }
.il-sub span { font-weight: 900 !important; }
.invoice-total { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; margin-top: 8px; background: var(--blue-700); color: #fff; border-radius: 10px; }
.invoice-total span { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; }
.invoice-total strong { font-size: 1.4rem; white-space: nowrap; }
.invoice-paid { margin-top: 8px; text-align: center; color: #15803d; font-weight: 800; font-size: 0.85rem; }
.invoice-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--gray-100); text-align: center; font-size: 0.72rem; color: var(--ink-400); }
.cm-min-note { margin: 10px 0 4px; font-size: 0.76rem; color: var(--ink-400); font-style: italic; }

/* Auto-charge card (admin → Bookings) — clean floating card matching the site. */
.autocharge-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 15px 18px; margin-bottom: 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); }
.ac-head { display: flex; flex-direction: column; margin-right: auto; }
.ac-head strong { font-size: 0.95rem; color: var(--ink-900); }
.ac-sub { font-size: 0.78rem; color: var(--ink-400); }
.ac-hours-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ink-600); white-space: nowrap; }
.ac-hours-label input { width: 60px; padding: 7px 9px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.88rem; }
.ac-msg { font-size: 0.8rem; color: var(--ink-500); font-weight: 700; }
@media (max-width: 640px) { .autocharge-card { flex-direction: column; align-items: stretch; } .ac-head { margin-right: 0; } }

/* Uncollected-money guard (Bookings tab) — a slim strip that appears ONLY when an ended rental with a card on file isn't charged. */
.uncollected-alert { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; color: #9a3412; font-size: 0.9rem; }
.uncollected-alert .uc-ico { font-size: 1rem; line-height: 1; }
.uncollected-alert .uc-text { flex: 1; }
.uncollected-alert .uc-review { border: 1px solid #fb923c; background: var(--white); color: #9a3412; border-radius: 8px; padding: 5px 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.uncollected-alert .uc-review:hover { background: #ffedd5; }

/* "Add to calendar" row under each upcoming booking — reuses the site's .filter-chip bubble. */
.booking-cal-row { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.booking-cal-label { font-size: 0.82rem; color: var(--ink-500); font-weight: 700; }
.booking-cal-row a.filter-chip { text-decoration: none; }

@media print {
  @page { size: portrait; margin: 0.5in; }
  /* Drop everything except the receipt from the flow (prevents the blank/extra pages). */
  body.printing-invoice > *:not(.confirm-overlay) { display: none !important; }
  body.printing-invoice .confirm-overlay { position: static !important; display: block !important; inset: auto !important; background: #fff !important; padding: 0 !important; }
  body.printing-invoice .invoice-modal { position: static !important; max-width: 100% !important; width: 100% !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; border-radius: 0 !important; }
  body.printing-invoice .invoice-actions { display: none !important; }
  /* Printers drop backgrounds by default — render with INK so the total/headers aren't light/invisible. */
  body.printing-invoice .is-title { background: transparent !important; color: #000 !important; border-bottom: 1.5px solid #000; border-radius: 0; padding: 2px 0; }
  body.printing-invoice .invoice-total { background: transparent !important; border: 2px solid #000; }
  body.printing-invoice .invoice-total span, body.printing-invoice .invoice-total strong { color: #000 !important; }
  body.printing-invoice .il span:last-child, body.printing-invoice .il-sub span { color: #000 !important; }
}
.edit-btn:hover { background: var(--blue-100); }
@media (max-width: 560px) { .be-grid { grid-template-columns: 1fr; } }
.pager-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-500); }
.pager-count { font-weight: 700; }
.pager-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager-btn { padding: 7px 12px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); font-weight: 800; font-size: 0.82rem; cursor: pointer; color: var(--ink-600); }
.pager-btn:hover:not(:disabled) { border-color: var(--blue-700); color: var(--blue-700); }
.pager-btn:disabled { opacity: 0.45; cursor: default; }
.pager-page { font-weight: 700; }
.pager-size { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pager-size select { padding: 6px 8px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; }

/* Customer 360 panel (admin expand) */
.c360 { padding: 4px 2px; }
.c360-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); }
.c360-id strong { font-size: 1rem; }
.c360-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* "Save contact" (vCard) button — SAVED state. Green, and !important so it wins over any base
   button style/hover (.btn-soft, .edit-btn) in either the customer 360 or a booking row. */
.is-saved, .is-saved:hover, .is-saved:focus, .is-saved:active {
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; transform: none !important;
}
/* Boat Key/Info popup — renter operating guide (photos + steps) */
.keyinfo-modal { max-width: 640px; text-align: left; max-height: 88vh; overflow-y: auto; }
.keyinfo-title { margin: 0 0 4px; }
.keyinfo-sub { color: var(--ink-400); font-size: 0.9rem; margin: 0 0 14px; }
.keyinfo-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.keyinfo-photo { margin: 0; }
.keyinfo-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--gray-200); }
.keyinfo-photo figcaption { font-size: 0.82rem; font-weight: 700; color: #374151; margin-top: 6px; text-align: center; }
.keyinfo-section { margin: 0 0 14px; }
.keyinfo-section h4 { margin: 0 0 4px; font-size: 0.95rem; }
.keyinfo-text { white-space: pre-line; color: #4b5563; font-size: 0.92rem; line-height: 1.5; margin: 0; }
/* Admin Boat Key/Info editor (in the Fleet manager, per boat) */
.fleet-keyinfo { margin: 10px 0 4px; border: 1px solid var(--gray-200); border-radius: 12px; padding: 0 12px; }
.fleet-keyinfo > summary { cursor: pointer; font-weight: 800; padding: 12px 0; color: var(--blue-700); }
.keyinfo-edit { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.keyinfo-edit > label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 0.85rem; }
.keyinfo-edit textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 8px; resize: vertical; }
.ki-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ki-photo { display: flex; flex-direction: column; gap: 4px; }
.ki-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--gray-200); }
.ki-cap { font: inherit; font-size: 0.8rem; padding: 5px 7px; border: 1px solid var(--gray-300); border-radius: 6px; }
.ki-del { align-self: flex-start; background: none; border: none; color: #dc2626; cursor: pointer; font-weight: 800; padding: 0; }
.ki-add { align-self: flex-start; cursor: pointer; }
.ki-actions { display: flex; align-items: center; gap: 10px; }
.ki-msg { font-size: 0.85rem; color: var(--ink-400); }
.ki-msg.is-ok { color: #15803d; }
.ki-msg.is-error { color: #dc2626; }
/* Customer "Boat Key/Info" button — bright orange at 20% so it stands out on the booking */
.portal-keyinfo { background: rgba(255, 119, 0, 0.2) !important; border: 1px solid rgba(255, 119, 0, 0.5) !important; color: #b45309 !important; }
.portal-keyinfo:hover { background: rgba(255, 119, 0, 0.32) !important; }
.c360-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); margin: 16px 0 8px; }
.c360-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: 6px; }
.c360-item-label { flex: 1; min-width: 140px; }
.c360-item .btn { margin-left: auto; }
.c360-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 10px; }
.c360-subtab { padding: 7px 16px; border: 1.5px solid var(--gray-300); border-radius: 999px; background: var(--white); font-weight: 800; font-size: 0.85rem; cursor: pointer; color: var(--ink-600); }
.c360-subtab.is-active { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
.c360-body { margin-top: 4px; }
.c360-rental { margin-bottom: 14px; }
.c360-rental-head { font-weight: 800; font-size: 0.82rem; color: var(--ink-500); padding: 6px 2px; border-bottom: 1px solid var(--gray-200); margin-bottom: 8px; }
.c360-review { padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin: 4px 0 10px; background: #f6f8fc; }

/* Customer portal: Upcoming open + sub-tabs (Documents/Forms/Past/Account) */
.portal-upcoming { margin-bottom: 14px; }
.portal-upcoming .portal-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portal-tabs { margin: 0 0 12px; }
.portal-pay-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.portal-help { margin-top: 12px; font-size: 0.9rem; }

/* Bookings table */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
/* Bookings (uses .admin-table): drop the boxing wrapper so the bubble rows float on the page. */
.admin-table-wrap:has(.admin-table) { border: 0; border-radius: 0; }
/* Each booking row = its own separated "bubble" card — white, light-grey border, soft 3D shadow
   (matches the .rate-card lakes bubble), with a small gap between rows and a subtle hover lift. */
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: 0.88rem; }
.admin-table th { padding: 4px 14px; text-align: left; font-weight: 900; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-400); }
.admin-table tbody tr { background: var(--white); box-shadow: var(--shadow); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.admin-table tbody tr:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); transform: translateY(-1px); }
.admin-table td { padding: 12px 14px; vertical-align: middle; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.admin-table td:first-child { border-left: 1px solid var(--gray-200); border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.admin-table td:last-child { border-right: 1px solid var(--gray-200); border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.admin-table small { color: var(--ink-400); }
.empty-row { text-align: center; color: var(--ink-400); padding: 32px; }
/* Keep this a real table cell (NOT display:flex) so it stretches to the row height and the shared
   `.admin-table td { vertical-align: middle }` centers the buttons top-to-bottom. Buttons stay on
   one line, spaced 6px, aligned to each other's middle. */
.action-cell { white-space: nowrap; }
.action-cell > * { vertical-align: middle; }
.action-cell > * + * { margin-left: 6px; }
.status-btn { padding: 5px 12px; border-radius: 100px; border: 1.5px solid var(--gray-300); font-size: 0.78rem; font-weight: 800; background: transparent; cursor: pointer; transition: all 0.12s; }
.status-btn:hover { border-color: var(--blue-700); color: var(--blue-700); }
.charge-btn { padding: 6px 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; border-radius: 8px; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.charge-btn:hover { background: #dcfce7; }
.refund-btn { padding: 6px 12px; border: 1px solid #fcd9a8; background: #fff7ed; color: #b45309; border-radius: 8px; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.refund-btn:hover { background: #ffedd5; }
.refund-btn:disabled { opacity: 0.6; cursor: default; }
.pay-paid { color: #15803d; font-weight: 800; font-size: 0.82rem; align-self: center; }
.pay-failed { color: #b91c1c; font-weight: 800; font-size: 0.82rem; align-self: center; }
.ac-hours-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-600); }
.ac-hours-label input { width: 64px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 8px; font: inherit; }
.payments-help { margin: -6px 2px 14px; max-width: 820px; line-height: 1.5; }

/* Fleet manager */
.fleet-manager { display: flex; flex-direction: column; gap: 8px; }
.fleet-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); cursor: grab; transition: box-shadow 0.15s; user-select: none; }
.fleet-row:active { cursor: grabbing; }
.fleet-row.dragging { opacity: 0.4; }
.fleet-row.drag-over { box-shadow: 0 0 0 2px var(--blue-700); }
.drag-handle { font-size: 1.2rem; color: var(--ink-300); cursor: grab; flex-shrink: 0; }
.fleet-row-info { flex: 1; }
.fleet-row-info strong { display: block; }
.fleet-row-info span { font-size: 0.82rem; color: var(--ink-400); }
.toggle-label { font-size: 0.82rem; font-weight: 800; color: var(--ink-500); min-width: 44px; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track { width: 44px; height: 24px; background: var(--gray-300); border-radius: 100px; transition: background 0.2s; position: relative; }
.toggle-switch input:checked + .toggle-track { background: var(--blue-700); }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-switch.small .toggle-track { width: 34px; height: 18px; }
.toggle-switch.small .toggle-thumb { width: 12px; height: 12px; top: 3px; left: 3px; }
.toggle-switch.small input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }

/* Fleet editor cards (admin) */
.fleet-edit-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.fleet-edit-card.dragging { opacity: 0.4; }
.fleet-edit-card.drag-over { box-shadow: 0 0 0 2px var(--blue-700); }
.fleet-edit-head { display: flex; align-items: center; gap: 12px; }
.fleet-edit-head .drag-handle { cursor: grab; }
.fleet-edit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fleet-edit-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 800; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.04em; }
.fleet-edit-card input, .fleet-edit-card textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--ink-900); background: var(--white); text-transform: none; letter-spacing: 0; font-weight: 500; }
.fleet-edit-card input:focus, .fleet-edit-card textarea:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }
.fleet-edit-card textarea { resize: vertical; }
.fleet-edit-full { width: 100%; }
.fleet-edit-actions { display: flex; align-items: center; gap: 12px; }
.fleet-save-msg { font-size: 0.85rem; font-weight: 700; color: var(--ink-400); }
.fleet-save-msg.is-ok { color: var(--green); }
.fleet-save-msg.is-error { color: #b91c1c; }
@media (max-width: 560px) { .fleet-edit-grid { grid-template-columns: 1fr; } }

.admin-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: 72px; z-index: 16; background: var(--white); padding: 8px 4px; border-bottom: 1px solid var(--gray-200); }

/* Lakes & Extras rate cards (admin) */
.rates-head { margin: 18px 0 10px; font-size: 1rem; color: var(--ink-900); }
.rates-list { display: flex; flex-direction: column; gap: 8px; }
.rate-card { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow); }
.rate-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 800; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.04em; }
.rate-card .r-name { min-width: 180px; }
.rate-card .r-amount { width: 120px; }
.rate-card input[type="text"], .rate-card input[type="number"] { font: inherit; padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--ink-900); font-weight: 500; text-transform: none; letter-spacing: 0; }
.rate-card input:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }
.rate-active { flex-direction: row !important; align-items: center; gap: 6px !important; }
.rate-card .drag-handle { align-self: center; }
.rate-card.dragging { opacity: 0.4; }
.rate-card.drag-over { box-shadow: 0 0 0 2px var(--blue-700); }

/* Customers */
/* Customers / Documents / Forms (all use .customer-row): each row is its own bubble card —
   white, grey border, soft 3D shadow, gapped + hover lift (matches the Lakes/.rate-card style). */
.customer-list { display: flex; flex-direction: column; gap: 10px; }
.customer-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.customer-row:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); transform: translateY(-1px); }
.customer-info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.customer-info strong { font-size: 0.95rem; }
.customer-info span { color: var(--ink-400); }
.customer-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 0.8rem; color: var(--ink-400); }
.member-chip { background: var(--blue-050); color: var(--blue-700); font-weight: 900; font-size: 0.72rem; padding: 2px 8px; border-radius: 100px; }
.customer-detail { padding: 14px 18px; background: var(--gray-050); border: 1px solid var(--gray-200); border-radius: var(--radius-md); }

/* Staff & permissions table */
.perm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
.perm-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
/* Keep the person's name visible while scrolling the wide permission grid sideways (mobile). */
.perm-table th:first-child, .perm-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
.perm-table thead th:first-child { background: var(--gray-050); z-index: 2; }
.perm-scroll-hint { display: none; }
.perm-table th { padding: 10px 12px; text-align: center; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gray-050); border-bottom: 1px solid var(--gray-200); color: var(--ink-500); white-space: nowrap; }
.perm-table th:first-child, .perm-table th:nth-child(2) { text-align: left; }
.perm-table td { padding: 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.perm-table tr:last-child td { border-bottom: none; }
.perm-col { width: 90px; }
.perm-cell { text-align: center; }
.role-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.role-admin { background: #ede9fe; color: #5b21b6; }
.role-system_manager { background: #fef3c7; color: #92400e; }
.role-employee { background: var(--blue-050); color: var(--blue-700); }
.role-select { padding: 5px 9px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700; background: var(--white); cursor: pointer; }
/* Disabled toggles elsewhere read muted. In the STAFF table we use a clearer 3-state color so
   on / off / locked are obvious at a glance: BLUE = on (always, even if you can't change it),
   ORANGE = off but you may turn it on, RED = off AND locked (not allowed). Scoped to .perm-table. */
.toggle-switch input:disabled + .toggle-track { opacity: 0.4; cursor: not-allowed; }
.perm-table .toggle-switch input:not(:checked) + .toggle-track { background: #f59e0b; }                                   /* off, you may turn it on */
.perm-table .toggle-switch input:not(:checked):disabled + .toggle-track { background: #ef4444; opacity: 1; cursor: not-allowed; } /* off + locked */
.perm-table .toggle-switch input:checked + .toggle-track { background: var(--blue-700); opacity: 1; }                     /* ON = blue, even when locked */
.add-staff-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 16px; background: var(--blue-050); border-radius: var(--radius-md); margin-bottom: 16px; }
.add-staff-form input, .add-staff-form select { padding: 9px 12px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.88rem; }
.staff-actions { white-space: nowrap; }
.staff-actions .btn { display: inline-flex; margin: 2px; }
/* Staff name cell: name on its own line; email shows below on desktop, behind a small toggle on
   mobile (long emails eat the narrow first column). */
.staff-name-cell strong { display: block; }
.name-missing { color: var(--ink-400); font-style: italic; font-weight: 600; }
.staff-email { display: block; font-size: 0.78rem; color: var(--ink-400); }
.email-toggle { display: none; margin-top: 3px; padding: 1px 9px; font-size: 0.7rem; font-weight: 800; color: var(--blue-700); background: var(--blue-050); border: 1px solid var(--blue-200); border-radius: 999px; cursor: pointer; }

/* Audit log */
.audit-feed { display: flex; flex-direction: column; gap: 10px; }
.audit-row { display: grid; grid-template-columns: 180px 140px 1fr; gap: 12px; padding: 12px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow); font-size: 0.85rem; align-items: center; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.audit-row:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); transform: translateY(-1px); }
.audit-time { color: var(--ink-400); font-size: 0.78rem; }
.audit-who { font-weight: 800; }
.audit-action { color: var(--ink-600); }

@media (max-width: 720px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card.span2 { grid-column: span 1; }
  .admin-tabs { gap: 2px; }
  .admin-tab { padding: 8px 12px; font-size: 0.8rem; }
  .perm-table th, .perm-table td { padding: 8px 6px; }
  .perm-scroll-hint { display: block; font-size: 0.78rem; color: var(--ink-400); margin: 0 0 8px; }
  /* Mobile: hide long emails behind the "email" toggle to keep the name column narrow. */
  .perm-table .staff-email { display: none; }
  .perm-table .staff-email.show { display: block; }
  .email-toggle { display: inline-block; }
  .audit-row { grid-template-columns: 1fr; gap: 4px; }
  /* On phones the Bookings table scrolls sideways, which clips the row box-shadows — so the grey
     separation between bubbles vanishes. Tint the row gaps grey instead (the border-spacing gap
     shows the table's own background), so the bubbles stay clearly separated on mobile. */
  .admin-table { background: var(--gray-100); }
  .customer-meta { display: none; }
  /* Stack Open 360 over Delete (full-width) so Delete isn't cut off / mis-tapped on phones. */
  .customer-row { flex-wrap: wrap; }
  .customer-row > .btn { flex: 1 1 100%; }
}

/* Admin Fleet — boat photo manager */
.fleet-photos { margin: 10px 0 4px; }
.fleet-photos-label { display:block; font-size:.78rem; font-weight:600; color:var(--muted, #6b7280); margin-bottom:6px; }
.fleet-photo-grid { display:flex; flex-wrap:wrap; gap:8px; }
.fleet-photo { position:relative; width:88px; height:66px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.12); background:#f3f4f6; }
.fleet-photo.is-main { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.35); }
.fleet-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.fleet-photo .photo-badge { position:absolute; left:4px; bottom:4px; font-size:.62rem; font-weight:700; color:#fff; background:#2563eb; padding:1px 6px; border-radius:6px; }
.fleet-photo .photo-setmain { position:absolute; left:4px; bottom:4px; font-size:.62rem; font-weight:700; color:#fff; background:rgba(0,0,0,.6); border:0; padding:2px 6px; border-radius:6px; cursor:pointer; }
.fleet-photo .photo-setmain:hover { background:#2563eb; }
.fleet-photo .photo-del { position:absolute; top:3px; right:3px; width:18px; height:18px; line-height:16px; text-align:center; font-size:.7rem; color:#fff; background:rgba(0,0,0,.6); border:0; border-radius:50%; cursor:pointer; padding:0; }
.fleet-photo .photo-del:hover { background:#dc2626; }
.fleet-photo-empty { font-size:.8rem; color:var(--muted, #6b7280); font-style:italic; }
.fleet-photo[draggable] { cursor:grab; }
.fleet-photo.dragging { opacity:.5; }
.fleet-photo.drag-over { outline:2px dashed #2563eb; outline-offset:2px; }
.fleet-photo-add { margin-top:8px; display:inline-block; cursor:pointer; }
.fleet-photo-add input[disabled] { cursor:not-allowed; }
.fleet-photo-msg { display:inline-block; margin-left:8px; font-size:.78rem; color:var(--muted, #6b7280); }
.fleet-photo-msg.is-error { color:#dc2626; }
.fleet-photo-msg.is-ok { color:#16a34a; }

/* Customer portal — My Documents */
.portal-doc-hint { font-size:.85rem; color:var(--muted, #6b7280); margin:0 0 8px; }
.doc-list { margin-bottom:10px; }
.doc-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.07); font-size:.88rem; }
.doc-row:last-child { border-bottom:0; }
.doc-row-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.doc-view { font-size:.8rem; font-weight:600; color:#2563eb; background:none; border:0; cursor:pointer; padding:2px 4px; }
.doc-view:hover { text-decoration:underline; }
.doc-upload { display:inline-block; cursor:pointer; }
.doc-upload-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.doc-upload-note { font-size:.8rem; color:var(--muted, #6b7280); }
.doc-name-input { flex:1; min-width:160px; padding:9px 12px; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); font-size:.95rem; }

/* Admin Fleet — per-boat add-ons picker */
.fleet-extras { margin: 10px 0 4px; }
.fleet-extras-list { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.fleet-extra-chip { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; padding:4px 9px; border:1px solid rgba(0,0,0,.14); border-radius:999px; cursor:pointer; user-select:none; background:#fff; }
.fleet-extra-chip input { margin:0; }
.fleet-extra-chip:has(input:checked) { border-color:#2563eb; background:rgba(37,99,235,.08); color:#1d4ed8; font-weight:600; }

/* Verify popup — email OTP code boxes (count = CODE_LEN in components.js; flex so 8 still fit a phone) */
.code-boxes { display:flex; gap:6px; justify-content:center; margin:6px 0 12px; width:100%; box-sizing:border-box; }
.code-digit { flex:1 1 0; min-width:0; max-width:40px; height:52px; text-align:center; font-size:1.2rem; font-weight:700; border:2px solid rgba(0,0,0,.18); border-radius:10px; background:#fff; padding:0; box-sizing:border-box; }
.code-digit:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.verify-msg { min-height:1.1em; margin:6px 0; font-size:.85rem; color:var(--muted,#6b7280); }
.verify-msg.is-error { color:#dc2626; }
.verify-link { background:none; border:0; color:var(--muted,#6b7280); cursor:pointer; font-size:.85rem; text-decoration:underline; margin-top:4px; }
.verify-help { font-size:.8rem; color:#64748b; margin:6px 0 4px; }
.verify-resend-pill { background:#fff; color:#0b63ce; border:1px solid #aacdf5; border-radius:999px; padding:6px 16px; font-size:.85rem; font-weight:700; cursor:pointer; }
.verify-resend-pill:hover { background:#eaf4ff; }
.verify-resend-pill:disabled { opacity:.6; cursor:default; }

/* Accessibility — respect OS reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}