:root {
  --bg: #FFFFFF;
  --text: #111827;
  --muted: #374151;
  --primary: #1976D2;
  --primary-light: #42A5F5;
  --primary-dark: #0D47A1;
  --success: #2E7D32;
  --card: #F3F4F6;
}
[hidden] { display: none !important; }
.compact-row.disabled { opacity: 0.6; pointer-events: none }
.compact-display:disabled { opacity: 0.6; cursor: not-allowed }
#journey-modal .section-title{
  margin: 14px 0 8px;
  font-weight: 900;
  color:#111827;
}
#details-modal .section-hint{
  margin: -4px 0 10px;
  color:#6b7280;
  font-size: 0.95rem;
}
#details-modal .account-box{
  border:1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background:#f8fafc;
}
#details-modal .checkout-footer{
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
}
#details-modal .checkout-footer .btn{ margin:0 }
#details-modal .back-link{
  background:none;
  border:0;
  padding:0;
  color:#374151;
  font-weight:800;
  cursor:pointer;
}
#details-modal .footer-total{ font-weight: 800 }
#details-modal .info-pill{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  font-size:12px;
  color:#374151;
  background:#f8fafc;
}
/* Stage confirmation lines */
#details-modal .stage-line{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f8fafc;
  font-weight:800;
  color:#111827;
}
#details-modal .stage-line .tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid #10b981;
  color:#065f46;
  font-size:12px;
}
* { box-sizing: border-box }
img { max-width: 100%; height: auto; }
html, body { height: 100% }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif;
  line-height: 1.5;
}
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.header {
  position: sticky;
  top: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 50px;
  min-height: 50px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.logo {
  width: auto;
  height: 32px;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0.9);
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9rem;
}
.nav a { text-decoration: none; color: #111827; font-weight: 500 }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.menu-toggle {
  display: inline-grid;
  place-items: center;
  border: none;
  background: transparent;
  color: #0a0f1c;
  font-size: 28px;
  cursor: pointer;
  padding: 4px;
  margin-left: 1.75rem;
}
/* Desktop: show burger now as nav links removed */
/* @media (min-width: 768px) { .menu-toggle { display: none } } */
/* Mobile: stack logo + burger, hide full nav */
@media (max-width: 767px) {
  .header-inner { padding-inline: 1rem }
  .nav-links { display: none }
}
.brand-text {
  font-weight: 700;
  color: var(--primary-dark);
}
.header .nav .btn {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #0b63ce;
  color: #fff;
  border: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
  font: inherit;
  box-sizing: border-box;
}
.help-stack { display: grid; gap: 12px }
.invoice-actions { display: grid; gap: 10px; margin-top: 10px }
.invoice-action-btn { width: 100% }
.invoice-page .invoice-action-btn { min-height: 40px }
/* Enhanced active state for Get Price button */
.btn.primary:not(:disabled) {
  background: #0b5ed7;
  color: white;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.btn.primary:not(:disabled):hover {
  transform: translateY(-2px);
  background: #0a58ca;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.btn.primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #1fa7e8, #0b63ce);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(11,99,206,0.25);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
}
.btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,99,206,0.35);
}
.btn.primary:disabled,
.btn.primary[disabled],
#hero_get_quote:disabled {
  background: linear-gradient(135deg, #1fa7e8, #0b63ce) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.primary.full-width { width: 100%; text-align: center; padding: 0.55rem 1.1rem; font-size: 0.9rem }
.more-services {
  margin-top: 40px;
  background: #f8fafc;
  padding: 24px;
  border-radius: 8px;
}
.more-services a {
  display: block;
  margin: 8px 0;
  font-weight: 500;
  color: #1a73e8;
  text-decoration: none;
}
.more-services a:hover { text-decoration: underline; }
.more-services a:visited { color: #1a73e8; }
.hero {
  position: relative;
  padding: 12px 0 12px;
  background: url("../media/cards/drivenbydrivers-hero.webp") center/cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,99,206,0.65) 0%, rgba(31,167,232,0.45) 35%, rgba(31,167,232,0.0) 70%);
  z-index: 1;
  pointer-events: none;
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 899px) {
  .hero-logo-img {
    display: none;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    order: 1;
  }
  .quote-card {
    order: 2;
  }
}
@media (min-width: 900px) {
  .hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
}
.hero-copy { display: block; position: relative }
.quote-card { width: 100% }

/* Expanded hero state */
.hero.expanded .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); justify-content: center }
.hero.expanded .hero-copy { display: block }
.hero-copy > * { transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1) }
.hero-copy .hero-start { opacity: 0; transform: translateY(8px); font-weight: 800; font-size: clamp(32px, 6vw, 56px); color: #ffffff; position: absolute; top: 0; left: 0; width: 100% }
.hero.expanded .hero-copy > *:not(.hero-start) { opacity: 1; transform: none; pointer-events: auto }
.hero.expanded .hero-copy .hero-start { opacity: 1; transform: none }

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal-content {
  background: var(--bg);
  border-radius: 18px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  line-height: 1;
}
.modal-close:hover {
  color: var(--text);
}
.modal-body {
  padding: 2rem;
}
.modal-body h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.modal-body .map {
  height: 200px;
  margin-bottom: 1rem;
}
.modal-body .route-caption {
  margin-bottom: 1.5rem;
}
.modal-body .price-breakdown {
  margin-bottom: 2rem;
}

.price-summary { display: grid; gap: 6px; margin-bottom: 1rem }
.price-total { font-weight: 700; font-size: 1.25rem }
.price-subtotals { color: var(--muted) }
.price-banner {
  display: block;
  margin: 0 0 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #4FD3E6 0%, #1FA7E8 50%, #0B63CE 100%);
  color: #ffffff;
  border-radius: 0;
  border: 0;
}
.price-banner .price-total { color: #ffffff }
.price-banner .price-subtotals { color: rgba(255,255,255,0.9) }
#journey-modal .price-banner .price-trust { color: rgba(255,255,255,0.95); font-size: 13px }
#journey-modal .picker-display.price-banner {
  border-radius: 0;
  border: 0;
  background: linear-gradient(90deg, #4FD3E6 0%, #1FA7E8 50%, #0B63CE 100%);
  color: #ffffff;
}
/* Journey modal price hero tightening */
#journey-modal .price-banner { min-height: 0; padding: 10px 14px; border-radius: 12px }
#journey-modal .price-banner .price-total { font-size: 26px; line-height: 1.1; margin: 0 0 6px 0 }
#journey-modal .price-banner .price-subtotals { font-size: 14px; line-height: 1.25; margin: 0 }

@media (max-width: 560px) {
  .modal-body { padding: 1rem; }
  .modal-content { width: 100%; max-width: 100vw; }
  .price-banner { margin: 0 0 1rem; padding: 1rem; border-radius: 8px; }
}
.dashboard-panel { margin-top: 1rem }
.grid.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.card { border: 1px solid #e6e8eb; border-radius: 14px; padding: 14px; background: #fbfbfd; box-shadow: 0 6px 18px rgba(0,0,0,0.06) }
.card-title { font-weight: 700; color: #0a0f1c; margin-bottom: 8px; letter-spacing: -0.01em }
.card-value { font-size: 1.25rem; font-weight: 700 }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px }
.metric-grid.two-up { grid-template-columns: repeat(2, 1fr) }
@media (max-width: 899px) { .metric-grid { grid-template-columns: 1fr 1fr } }
.metric-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; background: #fff; display: grid; gap: 6px }
.metric-label { color: #6b7280; font-weight: 700; font-size: 0.85rem }
.metric-value { font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums }
.metric-sub { color: #6b7280; font-size: 0.9rem }
.metric-header { display: flex; align-items: center; gap: 8px }
.metric-icon svg { width: 18px; height: 18px; display: inline-block }
#today_kpis .metric-card:nth-child(1){ border-left:4px solid #2563eb }
#today_kpis .metric-card:nth-child(2){ border-left:4px solid #16a34a }
#today_kpis .metric-card:nth-child(3){ border-left:4px solid #f59e0b }
#today_kpis .metric-card:nth-child(4){ border-left:4px solid #ef4444 }
.chart-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; background: #fff; margin-top: 12px }
.chart-title { margin: 0 0 10px; font-size: 1rem; font-weight: 800; color: #111827 }
.bar-list { display: grid; gap: 10px }
.bar-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: center }
.bar-row .bar-label { font-size: 0.9rem; color: #374151; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bar { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4FD3E6 0%, #1FA7E8 50%, #0B63CE 100%) }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 800; color: #111827 }
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.admin-filters .btn { padding: 0.55rem 0.75rem }
.admin-filters select { border: 1px solid #d1d5db; border-radius: 10px; padding: 0.5rem 0.6rem; font-size: 0.95rem; background: #ffffff }
.admin-filters input { border: 1px solid #d1d5db; border-radius: 10px; padding: 0.5rem 0.6rem; font-size: 0.95rem; background: #ffffff }
#admin_booking_modal .modal { width: min(1100px, 94vw) }
#admin_operator_modal .modal { width: min(1100px, 94vw) }
.like-table { display: grid; grid-auto-rows: max-content; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch }
.like-table .row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, max-content); gap: 0; align-items: stretch; padding: 0; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; width: 100%; min-width: max-content; overflow: hidden }
.like-table .row.header { font-weight: 800; background: #f8f9fb }
.like-table .row .cell { white-space: nowrap; min-width: 0; padding: 10px 12px; border-right: 1px solid #f3f4f6; display: flex; align-items: center }
.like-table .row .cell:last-child { border-right: none }
.like-table .row .cell.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 160px; max-width: 240px }
.like-table .row .cell.actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }
.like-table .row .cell.center { text-align: center; justify-self: center }
.like-table .row:hover { background: #f8fafc }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 900; font-size: 0.85rem; border: 1px solid #e5e7eb; background: #f8f9fb; color: #111827; white-space: nowrap }
.badge.success { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.12); color: #065f46 }
.badge.pending { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.12); color: #92400e }
.badge.danger { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); color: #991b1b }

.btn.btn-secondary {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  border-radius: 999px;
  font-weight: 800;
}
.btn.btn-secondary:hover { background: #f8fafc }
.btn.danger {
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
  color: #991b1b;
  font-weight: 900;
}
.btn.danger:hover { background: rgba(239,68,68,0.16) }
.btn.primary.btn.small { padding: 8px 10px; font-size: 13px }
.btn.danger.btn.small { padding: 8px 10px; font-size: 13px }
.btn.btn-secondary.btn.small { padding: 8px 10px; font-size: 13px }

/* Optimized Table Layouts using minmax(min-content, auto) where appropriate */
#operators_table.like-table .row { 
    grid-auto-flow: unset; 
    grid-auto-columns: unset; 
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 1.5fr) 100px minmax(140px, auto) 
}

#bookings_table.like-table .row { 
    grid-auto-flow: unset; 
    grid-auto-columns: unset; 
    grid-template-columns: minmax(100px, max-content) minmax(180px, 1fr) 110px 110px 110px 90px minmax(100px, auto)
}

#bookings_table.like-table .row-group {
    display: contents; /* Ensure rows flow naturally in table/grid */
}

#bids_table.like-table .row { 
    grid-auto-flow: unset; 
    grid-auto-columns: unset; 
    grid-template-columns: minmax(200px, 1fr) 110px minmax(200px, 1.5fr) 110px 120px 
}

#mb_table.like-table .row { 
    grid-auto-flow: unset; 
    grid-auto-columns: unset; 
    grid-template-columns: 140px minmax(200px, 1fr) minmax(200px, 1fr) 120px 110px 160px 
}

#customers_table.like-table .row { 
    grid-auto-flow: unset; 
    grid-auto-columns: unset; 
    grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.5fr) 140px 100px 100px 140px minmax(100px, auto)
}

#pricing_table.like-table .row {
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    grid-template-columns: 80px 120px 120px 120px 100px;
    justify-content: start;
}

/* Mobile expand toggle visibility */
#hero_quote_expand { display: none }
@media (max-width: 900px) {
  #operators_table.like-table .row { grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 1.5fr) 90px minmax(120px, auto) }
  #bookings_table.like-table .row { grid-template-columns: 110px minmax(140px, 1fr) 100px 100px 100px 80px minmax(100px, auto) }
  #customers_table.like-table .row { grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) 120px 80px 80px 100px minmax(80px, auto) }
  #bids_table.like-table .row { grid-template-columns: 220px 110px minmax(260px, 1fr) 110px 120px }
  #mb_table.like-table .row { grid-template-columns: 130px minmax(240px, 1fr) minmax(240px, 1fr) 110px 100px 150px }
  #pricing_table.like-table .row { grid-template-columns: 70px 100px 100px 100px 90px }
}

#operators_table.like-table .row .cell.email { white-space: normal; overflow-wrap: anywhere; font-size: 0.95rem; color: #111827 }
#operators_table.like-table .row .cell.company { font-weight: 900; color: #0a0f1c; overflow: hidden; text-overflow: ellipsis }
#operators_table.like-table .row .cell.contact { white-space: normal; overflow-wrap: anywhere; color: #374151; font-size: 0.95rem }
#operators_table.like-table .row .cell.actions .btn.small { padding: 0.45rem 0.65rem }
@media (min-width: 900px) {
  #operator-dashboard .modal-content { width: 900px; max-width: 1000px }
}
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1rem }
.team-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; text-align: center; background: #fff }
.team-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 999px; display: inline-block; box-shadow: 0 6px 16px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06) }
.team-name { margin-top: 8px; font-weight: 700; color: #111827 }
.team-role { color: #6b7280 }
.owners-hero { margin: 16px 0; display: flex; justify-content: center }
.owners-photo { width: 100%; max-width: 560px; height: auto; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.12) }
@media (max-width: 639px) {
  .team-grid { grid-template-columns: 1fr }
}
.price-breakdown strong { display: block; font-weight: 700; margin-bottom: 0.5rem }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.price-table td { padding: 6px 8px; }
.price-table td:first-child { text-align: left; color: var(--muted); }
.price-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.price-table .total-row td { font-weight: 700; border-top: 1px solid #e5e7eb; padding-top: 10px; }
.price-table .grand-total td { font-weight: 900; background: #f8fafc; border: 1px solid #e5e7eb; padding: 10px 8px; }
.price-table .grand-total td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px }
.price-table .grand-total td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px }

.modal-body, .price-breakdown { overflow-x: auto }

.status-banner {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.status-banner.good { border-color: rgba(46,125,50,0.35); background: rgba(46,125,50,0.08) }
.status-banner.warn { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.12) }
.status-banner strong { display: block; font-weight: 800; margin-bottom: 4px }
.status-banner a { color: #0b63ce; font-weight: 700; text-decoration: none }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px }
@media (max-width: 767px) { .help-grid { grid-template-columns: 1fr } }
.help-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; background: #fff }
.help-card h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 900; color: #111827 }
.help-card p { margin: 0; color: var(--muted); font-size: 0.95rem }

.addr-block { display: grid; gap: 2px }
.addr-line1 { font-weight: 800; color: #111827; line-height: 1.2 }
.addr-line2 { color: #6b7280; font-size: 0.92rem; line-height: 1.2 }
.kv-list { display: grid; gap: 10px; margin-top: 4px }
.kv { display: grid; gap: 4px }
.kv-title { color: #374151; font-weight: 900; font-size: 0.85rem }
.kv-value { color: #111827; font-weight: 800; line-height: 1.25 }
.help-card p strong { color: #111827 }
.hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 999px; border: 1px solid #d1d5db; color: #6b7280; font-weight: 900; font-size: 12px; line-height: 1; vertical-align: middle; cursor: help; user-select: none }
.hint-icon:hover { background: #f8fafc }
.faq-list { margin-top: 12px }
.faq-list details { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #fff }
.faq-list details + details { margin-top: 10px }
.faq-list summary { cursor: pointer; font-weight: 700 }
.faq-list details p { margin: 8px 0 0; color: var(--muted) }

.auth-divider { text-align: center; color: var(--muted); margin: 1rem 0 }
.booking-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 0.5rem }
.booking-form .form-row { display: grid; gap: 6px }
.booking-form label { font-size: 0.9rem; color: var(--muted) }
.booking-form input { border: 1px solid #d1d5db; border-radius: 20px; padding: 0.5rem 0.6rem; font-size: 0.95rem }
.modal-overlay#journey-modal .modal-content {
  width: min(1100px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.modal-overlay#journey-modal .modal-body {
  max-height: calc(90vh - 48px);
  overflow: auto;
  padding: 10px 14px;
}
.modal-overlay#journey-modal .route-summary {
  color: #374151;
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem;
}
.modal-overlay#details-modal .modal-content,
.modal-overlay#success-modal .modal-content {
  width: min(900px, 95vw);
  max-width: 900px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.modal-overlay#details-modal .modal-body,
.modal-overlay#success-modal .modal-body {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.details-summary {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px;
  background: #f8f9fb;
  font-size: 14px;
  color: #0a0f1c;
  display: grid;
  gap: 10px;
  margin: 0.5rem 0 0.25rem;
}
.details-kv-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
}
.details-kv-key {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.details-kv-val { font-size: 14px; text-align: right; }
.details-kv-val .dt-sub { font-size: 12px; color: #6b7280; margin-bottom: 2px }
.details-kv-val .dt-val { font-weight: 700; color: #111827 }

.booking-alert {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 12px 16px;
  color: #0369a1;
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 0;
}

.inclusions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 16px 0;
  list-style: none;
  padding: 0;
}

.inclusions-grid li {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
}

.inclusions-grid li::before {
  content: "✓";
  margin-right: 8px;
  color: #111827;
}

#journey-modal .choice-buttons .btn.primary {
  background: #0b63ce;
  border-radius: 999px;
  padding: 12px;
  font-weight: 700;
}

#journey-modal .choice-buttons .btn.btn-secondary {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 12px;
  font-weight: 700;
  color: #111827;
}
.tabs { display: flex; gap: 8px; margin: 0.5rem 0 1rem }
.tabs .btn { flex: 1 1 0 }
.choice-panel { margin: 0.3rem 0 0.6rem }
.choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px }
/* Scoped alignment for Options Modal vehicle selection */
#options-modal .options-form .manual-controls select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #111827;
  padding: 6px 8px;
}
#options-modal .options-form .form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
#options-modal .options-form .inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
@media (max-width: 560px) {
  #options-modal .options-form .form-row.two-col { grid-template-columns: 1fr }
}
.choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.choice-btn { padding: 0.75rem 1rem; font-size: 1rem }
/* Continue to price button rectangular like Get Price */
#options-modal #opt_continue_price.btn.primary {
  border-radius: 6px;
  background: linear-gradient(135deg, #1fa7e8, #0b63ce);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.45rem 1.0rem;
}
/* Ensure modal can scroll independently while background is locked */
#options-modal .modal-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.modal-overlay#options-modal .modal-body { padding: 0.4rem }
#options-modal .options-form .form-row { margin-bottom: 2px }
#options-modal .options-form .form-row.two-col { gap: 4px }
#options-modal .options-form .inline { gap: 3px }
#options-modal .choice-buttons { gap: 4px }
#options-modal .option-card { padding: 8px; margin-bottom: 4px }
#options-modal .choice-panel { margin: 0.15rem 0 0.3rem }
#options-modal .choice-panel:first-of-type { margin-top: 0 }
.options-form h3 { margin-bottom: 0 }
#options-modal .option-header { margin-bottom: 4px }
#options-modal .option-content { margin-left: 26px }
#options-modal .option-desc { margin: 0; line-height: 1.3 }
#options-modal .option-helper { margin: 0; line-height: 1.3 }
.menu-overlay { position: fixed; inset: 0; background: rgba(10, 15, 28, 0.55); display: flex; justify-content: flex-end; z-index: 60 }
.menu-drawer { width: 320px; max-width: 85vw; background: #ffffff; height: 100%; box-shadow: -6px 0 24px rgba(0,0,0,0.1); padding: 16px; position: relative }
.menu-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 24px; cursor: pointer }
.menu-content { margin-top: 24px; display: grid; gap: 16px }
.menu-section h4 { margin: 0 0 8px; font-size: 1rem; color: #374151 }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.menu-link { color: #0a0f1c; text-decoration: none; }
.menu-link:hover { text-decoration: underline; }
.btn-link { background: none; border: 0; padding: 0; text-align: left; cursor: pointer }
.menu-divider { border: 0; height: 1px; background: #e5e7eb }
@media (min-width: 768px) { .menu-toggle { display: inline-grid } }
/* Pricing Modal Enhancements */
.price-row-basis {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 4px;
  grid-column: 1 / -1;
}

.price-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  cursor: help;
  vertical-align: middle;
  position: relative;
}

.price-tooltip-trigger:hover .price-tooltip-content {
  display: block;
}

.price-tooltip-content {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  width: 200px;
  z-index: 100;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  text-align: left;
  line-height: 1.4;
  font-weight: 400;
}

.price-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

.modal-inclusions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.modal-inclusions h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.modal-inclusions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.modal-inclusions li {
  font-size: 0.95rem;
  color: #0a0f1c;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-assumptions {
  margin-top: 16px;
}

.modal-assumptions summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 0;
}

.modal-assumptions .content {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  margin-top: 4px;
}

.operator-assignment {
  margin-top: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0369a1;
}

@media (max-width: 520px) {
  .modal-inclusions ul {
    grid-template-columns: 1fr;
  }
}



/* Desktop: modal positioned to the right */
@media (min-width: 900px) {
  .modal-overlay {
    justify-content: flex-end;
    padding-right: 2rem;
  }
  .modal-content {
    margin-top: 100px;
    width: 400px;
    max-height: calc(100vh - 120px);
  }
  #journey-modal.booking-mode .modal-content {
    width: 800px;
    max-width: 900px;
  }
}

/* Mobile: modal below */
@media (max-width: 899px) {
  .modal-overlay {
    align-items: flex-end;
    padding-bottom: 1rem;
  }
  .modal-content {
    width: 95%;
    margin-bottom: 1rem;
    border-radius: 12px 12px 0 0;
  }
}
/* Journey modal positioning and tighter spacing */
@media (min-width: 900px) {
  #journey-modal .modal-content { margin-top: 24px; width: min(1100px, 92vw) !important; max-width: none; max-height: calc(100vh - 120px); overflow: hidden }
  #journey-modal.modal-overlay { justify-content: center; padding-right: 0 }
}
#journey-modal .modal-body { padding: 10px 14px }
#journey-modal .modal-body h3 { margin-bottom: 0.75rem }
#journey-modal .modal-body .map { margin-bottom: 0.75rem; height: 220px }
#journey-modal .modal-body .route-caption { margin-bottom: 0.75rem }
#journey-modal .route-summary {
  font-weight: 700;
  color: #111827;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 899px;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
}

/* Right column spacing tighter */
#journey-modal .details-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tighter spacing above breakdown toggle */
#journey-modal #modal_toggle_breakdown {
  margin-top: 6px !important;
}

#journey-modal .modal-header{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: 6px 12px 4px;
  border-bottom: 1px solid #e5e7eb;
}
#journey-modal .modal-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#journey-modal .modal-title { font-size: 1rem; line-height: 1.1; margin: 0 }
#journey-modal .modal-close {
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #111827;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

#journey-modal .modal-close:hover {
  background: #e5e7eb;
}

#journey-modal .details-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px 18px;
  align-items: start;
}
@media (max-width: 899px) {
  #journey-modal .details-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Sticky CTA on right column */
#journey-modal .cta-panel {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding-top: 4px;
}

/* Right column compact overrides */
#journey-modal .details-summary { padding: 10px; gap: 8px; margin-top: 0 }
#journey-modal .modal-inclusions { margin-top: 8px; padding-top: 8px }
#journey-modal .operator-assignment { margin-top: 8px; padding: 10px }

/* Centered, prominent breakdown toggle */
#journey-modal #modal_toggle_breakdown {
  display: block;
  margin: 16px auto !important;
  color: #0b63ce;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
}

#journey-modal #modal_toggle_breakdown:hover {
  text-decoration: underline;
}
/* Details (Confirm your booking) modal: raise position and tighten spacing */
@media (min-width: 900px) {
  #details-modal .modal-content { margin-top: 24px }
}
#details-modal .modal-body { padding: 1rem }
#details-modal .modal-body h3 { margin-bottom: 0.75rem; color: #111827 }
#details-modal .booking-form .form-row { margin-bottom: 6px }
#details-modal .toggle-group { margin-bottom: 8px }
#details-modal .btn.primary,
#details-modal .btn.btn-secondary { border-radius: 6px }
#details-modal .btn.primary { background: linear-gradient(135deg, #1fa7e8, #0b63ce); border: none; color: #fff; font-weight: 600; padding: 0.55rem 1.3rem }
#details-modal .btn.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; font-weight: 600; padding: 0.55rem 1.3rem }
/* Compact inline form rows */
#details-modal .booking-form { gap: 10px }
#details-modal .booking-form .form-row { grid-template-columns: 160px 1fr; align-items: center }
#details-modal .booking-form label { font-size: 0.9rem; color: #374151 }
#details-modal .booking-form input { padding: 0.45rem 0.6rem; border-radius: 8px }
@media (max-width: 560px) {
  #details-modal .booking-form .form-row { grid-template-columns: 1fr }
}
/* Details summary tighter spacing */
#details-modal .details-summary { gap: 8px }
#details-modal .modal-body { overflow-x: hidden }

/* Details layout container */
#details-modal .details-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Modal header (sticky title + tabs) */
#details-modal .modal-header{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e5e7eb;
}
#details-modal .modal-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#details-modal .tabs{ margin: 10px 0 0 }
#details-modal .modal-close{ top: 12px; right: 12px }

/* Two-column layout on wide screens */
@media (min-width: 900px) {
  #details-modal .details-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 20px;
    align-items: start;
  }
  #details-modal .booking-form {
    grid-template-columns: 1fr; /* avoid empty left column; use inner two-col groups */
    gap: 10px 16px;
    align-items: start;
  }
  #details-modal #auth_panel_guest {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 10px 16px;
  }
  #details-modal #auth_panel_guest p { grid-column: 1 / -1 }
  #details-modal #det_create_account_wrapper { grid-column: 1 / -1 }
  #details-modal #det_account_fields {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 10px 16px;
  }
  #details-modal #auth_panel_login {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 10px 16px;
  }
  #details-modal #auth_panel_loggedin { grid-column: 1 / -1 }
  #details-modal #booking_common_fields {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 10px 16px;
  }
  /* Full-width rows: terms checkbox and button rows */
  #details-modal #booking_common_fields .form-row:has(#det_terms) { grid-column: 1 / -1 }
  #details-modal .booking-form .form-row:has(.btn.full-width) { grid-column: 1 / -1 }
  /* Shorter field widths and label column */
  #details-modal .booking-form .form-row { grid-template-columns: 120px minmax(0, 1fr) }
  #details-modal .booking-form input { max-width: none }
  #details-modal #auth_panel_guest .form-row,
  #details-modal #det_account_fields .form-row,
  #details-modal #auth_panel_login .form-row,
  #details-modal #booking_common_fields .form-row { grid-template-columns: 140px minmax(0, 1fr) }
}
.hero-logo-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-bottom: 4px;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.hero-copy h1 {
  margin: 0 0 2px;
  font-size: clamp(28px, 6vw, 48px);
}
.hero-copy .hero-title {
  font-size: clamp(20px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(11, 99, 206, 0.55), 0 0 4px rgba(11, 99, 206, 0.35);
}
.hero-copy .hero-subline { font-size: clamp(11px, 1.7vw, 20px); font-weight: 700; color: #eef4ff; margin: 2px 0 6px; opacity: 1; white-space: nowrap; text-shadow: 0 0 2px rgba(11, 99, 206, 0.4), 0 0 3px rgba(11, 99, 206, 0.25); }
.hero-copy p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 18px;
}
.trust-line { font-size: 14px; color: #6b7280; opacity: 0.85; margin-top: 16px }
.hero-copy { max-width: 44rem; padding-right: 0; }
.hero-bullets {
  margin: 1rem 0 0.6rem;
  padding-left: 0;
  list-style: none;
  max-width: 28rem;
  font-size: 0.95rem;
  opacity: 0.85;
  color: var(--text);
}
.hero-bullets li {
  margin-bottom: 0.25rem;
  line-height: 1.3;
  font-weight: 700;
}
.hero-visual { margin-top: 0.5rem; position: relative }
.hero-image { width: 100%; display: block; border-radius: 20px; object-fit: cover; object-position: center; max-height: 260px; }
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(closest-side, transparent 65%, #ffffff 100%);
  mask-image: radial-gradient(closest-side, transparent 65%, #ffffff 100%);
}
.cta {
  display: none;
}
.cta-note {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.text-center { text-align: center }
/* Card Header & Stepper Updates */
.quote-card-header-new {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.quote-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-card-title-new {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}
.quote-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}
.quote-trust-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.trust-chip {
  font-size: 0.7rem;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.quote-stepper-ui {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.2rem;
  margin-top: 10px;
}
.step-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.step-pill.active {
  background: #0b63ce;
  color: #fff;
  border-color: #0b63ce;
}
.step-connector {
  flex: 1;
  height: 2px;
  background: #d1d5db;
  border-radius: 2px;
}
.step-connector.filled {
  background: #0b63ce;
}
.quote-card { 
  max-width: 480px;
  padding: 1rem 0.9rem 0.4rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.35);
  color: #111827;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  overflow: visible;
  margin-top: 4px;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  position: relative;
  z-index: 2;
}
.quote-card-inner {
  padding: 0;
  transform-origin: top;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.quote-card[data-state="closed"] .quote-card-inner {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .quote-card-inner { transition: none }
}
.quote-card-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 0.35rem;
}
.quote-card-title {
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}
.quote-card-sub { font-size: 0.8rem; color: #6b7280; margin: 0 auto 0.2rem; max-width: 32ch; text-align: center; font-weight: 700 }
.quote-logo { display: flex; justify-content: center; align-items: center; margin-bottom: 0 }
.quote-logo img { width: 100px; height: auto; display: block; filter: drop-shadow(0 6px 16px rgba(255,255,255,0.75)) }
.quote-card-form { display: flex; flex-direction: column; gap: 0.2rem }
.quote-card.collapsed .quote-stepper-ui,
.quote-card.collapsed .quote-head,
.quote-card.collapsed .quote-pane,
.quote-card.collapsed .route-caption,
.quote-card.collapsed .route-summary,
.quote-card.collapsed .pane-actions { display: none !important; }
.quote-card.collapsed .quote-card-form .form-row:nth-of-type(n+3) { display: none !important; }
.quote-card.collapsed .quote-card-form { padding-bottom: 0; }
.route-summary {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.quote-pane .route-summary { color: #334155 }
.time-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}
.step-btn {
  height: 36px;
  min-width: 36px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #f6f7f9;
  border-radius: 10px;
}
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #f6f7f9;
}
.pill.active {
  background: rgba(0, 194, 255, 0.12);
  border-color: rgba(0, 194, 255, 0.35);
}
.stops-list .stop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 6px;
}
.route-preview {
  margin-top: 10px;
}
.route-caption {
  font-size: 12px;
  color: #475569;
  margin-top: 6px;
}
.origin-helper { margin-top: 6px; font-size: 12px; color: #475569 }
@media (min-width: 1100px) {
  .hero-inner {
    grid-template-columns: 460px 1fr;
  }
}
/* Passenger control tweaks */
.compact-stepper input {
  font-weight: 700;
  text-align: center;
  padding: 0;
  height: 32px;
  line-height: 32px;
}
.compact-stepper .step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  #hero_quote_expand { display: inline-block }
  .quote-card-form .row-inline { flex-direction: column }
  .input-row { flex-direction: column }
}
.steps {
  padding: 40px 0 72px;
}
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr) }
}
.step {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 20px;
}
.step h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.step p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.swirl-bg {
  background-image: url('../media/live-homepage/swirl-bg.svg');
  background-position: center;
  background-size: cover;
}
.cta-operators {
  padding: 56px 0;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.cta-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 5vw, 36px);
}
.cta-copy p {
  margin: 0 0 16px;
  color: var(--muted);
}
.testimonials {
  padding: 56px 0;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr) }
}
.testimonial {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 20px;
}
.testimonial .quote {
  margin: 0 0 10px;
  font-size: 16px;
}
.testimonial .meta {
  color: var(--muted);
  font-size: 14px;
}
.faqs {
  padding: 56px 0 72px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover {
  border-color: rgba(0,0,0,0.15);
}
.faq-item.open {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 16px 24px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.faq-q::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-weight: 400;
  font-size: 1.5rem;
  color: #0b63ce;
  transition: transform 0.25s ease;
  transform-origin: center;
}
.faq-item.open .faq-q::after {
  content: "+";
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-a {
  padding-bottom: 24px;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal {
  width: min(1000px, 94vw);
  background: #ffffff;
  color: #0a0f1c;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 14px 48px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f6f7f9;
  color: #0a0f1c;
}
.modal-content.two-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 20px 20px;
}
.quote-form {
  padding: 16px 20px 20px;
}
.side-panel {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-row { margin-bottom: 6px }
.form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #0a0f1c;
}
.destination-group input {
  font-size: 16px;
}
.origin-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.origin-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0a0f1c;
}
.origin-info .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0a0f1c;
}
.switch input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
.link-button {
  background: transparent;
  border: none;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 8px;
}
.origin-edit {
  margin-top: 6px;
}
.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #ffffff;
  color: #0a0f1c;
}
.form-row select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #ffffff;
  color: #0a0f1c;
}
.radio-group {
  display: inline-flex;
  gap: 16px;
}
.input-with-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.btn.small {
  padding: 8px 10px;
  font-size: 13px;
}
/* removed use-my-location button styles */
.btn-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
}
.btn-emoji {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}
.modal-overlay.show { display: flex }
.map {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
}
@media (max-width: 900px) { .map { height: 180px } }
.price-breakdown {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px;
  background: #f8f9fb;
  font-size: 14px;
  color: #0a0f1c;
}
.collapsible, .more-options { margin-top: 0.25rem; border: none; border-radius: 0; padding: 0; background: transparent }
.collapsible > summary, .more-options > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: #0b63ce;
  padding: 0;
}
.collapsible[open] > summary, .more-options[open] > summary { margin-bottom: 0.5rem }
.collapsible .form-row, .more-options .form-row { margin-top: 8px }
.mid-copy {
  padding: 40px 0;
}
.mid-copy .btn {
  margin-top: 8px;
}
.why {
  padding: 56px 0;
}
.why h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 4.5vw, 32px);
}
.why h4 {
  margin: 24px 0 8px;
  font-size: 18px;
}
.why p {
  margin: 0 0 10px;
  color: var(--muted);
}
.gallery {
  padding: 24px 0 56px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) }
}
.img-rounded {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.use-cases {
  padding: 24px 0 56px;
}
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .use-cases-grid { grid-template-columns: repeat(2, 1fr) }
}
.use-case {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.use-case h4 {
  margin: 12px 0 6px;
  font-size: 16px;
}
.use-case p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  flex-grow: 1;
}
.services {
  padding: 24px 0 72px;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr }
}
.service {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
}
@media (max-width: 520px) {
  .map { height: 220px }
  .two-col { grid-template-columns: 1fr }
  .modal { width: 96vw }
  .modal-content.two-pane { grid-template-columns: 1fr }
}
/* Google Places autocomplete popup polish */
.pac-container {
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22) !important;
  overflow: hidden;
}
.pac-item {
  font-family: inherit;
  font-size: 14px;
}

/* New PlaceAutocompleteElement styling */
.gmp-place-autocomplete {
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22) !important;
  overflow: hidden;
  z-index: 1000 !important;
  position: absolute !important;
  background: white !important;
  /* border: 1px solid #e5e7eb !important; Removed to prevent double borders */
  margin-top: 4px !important;
}
.gmp-place-autocomplete-item {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.gmp-place-autocomplete-item:hover {
  background-color: #f9fafb !important;
}
.gmp-place-autocomplete-item[aria-selected="true"] {
  background-color: #eef2ff !important;
}
/* Ensure input elements are properly positioned for autocomplete */
input[type="text"], input[type="search"] {
  position: relative !important;
}
.service h4 {
  margin: 12px 0 6px;
  font-size: 16px;
}
/* Booking widget grouped rows and pill controls */
/* Consistent card styling across sections */
.card, .use-case, .service, .testimonial {
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.12);
}
.quote-card-form .form-row { display: flex; flex-direction: column; gap: 0.18rem }
.quote-card-form .row-inline { flex-direction: row; flex-wrap: wrap; gap: 0.6rem }
/* CTA row: remove trailing space */
.quote-card-form .form-row.cta-row { margin-bottom: 0 }
.quote-card-form .form-row.lr { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem }
.quote-card-form .form-row.lr .field-label { margin: 0 }
.quote-card-form .form-row.lr { grid-template-columns: 140px 1fr }
.quote-card-form .form-row.lr > .input-row,
.quote-card-form .form-row.lr > .toggle-group,
.quote-card-form .form-row.lr > .stepper-row,
.quote-card-form .form-row.lr > .picker-row { width: 100%; min-height: 34px; align-items: center; gap: 0.35rem }

.quote-card-form .form-row.lr > .toggle-group { min-height: 34px }

gmp-place-autocomplete,
gmp-place-autocomplete-element,
gmpx-place-autocomplete { min-height: 40px }

.toggle-group { min-height: 36px }
.stepper-row.large { min-height: 40px }
.picker-row #hero_datetime_trigger { height: 40px; width: 100%; display: block }
.field-block { flex: 1 1 0; min-width: 0 }
.field-label { display: block; font-size: 0.78rem; color: #6b7280; margin-bottom: 0.25rem }
.input-row { display: flex; gap: 0.35rem }
.input-row .field-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.8rem; color: #0b63ce }
.input-row input[type="text"] { flex: 1 1 auto }
#hero_use_my_location { flex: 0 0 auto }
.input-row.tight { gap: 0.35rem }
.picker-row { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; }
.time-dropdown {
  position: relative;
}
.time-dropdown select {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
}
.time-picker-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(15,23,42,0.25);
  padding: 20px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  z-index: 2000;
}
.time-picker-popover.hero-picker {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  width: min(210px, 65vw);
}
@media (max-width: 560px){
  .time-picker-popover{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 120px;
    margin-top: 0;
    width: auto;
  }
}
.time-picker-popover[hidden] {
  display: none !important;
}
.time-picker-popover:not([hidden]) {
  display: block !important;
}
.compact-form .input-shell { position: relative; }
.inline-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  padding: 8px;
  width: min(210px, 65vw);
  z-index: 100002;
}
.inline-picker .tp-body { display: grid; grid-template-columns: 1fr; gap: 8px }
@media (max-width: 560px){
  .inline-picker .tp-body { grid-template-columns: 1fr }
}
.inline-picker .tp-group { width: 100% }
.inline-picker .tp-group { border: 0; padding: 0 }
.inline-picker .tp-date-field-wrapper,
.inline-picker .tp-time-inputs-wrapper { width: 100% }
.inline-picker .tp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.inline-picker .tp-header { color: #111827; margin-bottom: 8px }
.inline-picker .tp-date-row,
.inline-picker .tp-time-row { gap: 8px }
/* Align date/time field heights and reduce vertical padding */
.inline-picker .tp-date-field-wrapper,
.inline-picker .tp-time-inputs-wrapper { height: 36px }
.inline-picker .tp-date { padding: 0 12px; height: 100% }
.inline-picker .tp-date-icon,
.inline-picker .tp-time-icon { padding: 0 12px }
.inline-picker .tp-hour-select,
.inline-picker .tp-minute-select { width: 72px; height: 36px; border: none; border-radius: 0; padding: 0 6px }
.inline-picker .tp-actions .btn { width: 100% }
.inline-picker .tp-actions .btn.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 6px }
.inline-picker .tp-actions .btn.primary { background: linear-gradient(135deg, #1fa7e8, #0b63ce); color: #fff; border: none; border-radius: 6px }

/* Use full shell width for expanded picker */
.compact-form .input-shell { display: grid; grid-template-columns: max-content 1fr; align-items: start; gap: 8px }
.compact-form .input-shell .input-prefix { grid-column: 1 }
.compact-form .input-shell .picker-row { grid-column: 2 }
.compact-form .input-shell .inline-picker { grid-column: 2 }
.tp-header { font-size: 16px; font-weight: 700; color: #0a0f1c; margin-bottom: 12px }
.tp-group > .tp-label { font-size: 16px; font-weight: 800; color: #0a0f1c; margin: 0 0 8px }
.tp-date-input { margin-bottom: 15px }
.tp-date { width: 100%; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background: #ffffff }
.tp-body { display: grid; grid-template-columns: 1fr; gap: 20px }
.tp-group { background: #ffffff; border: 1px solid #dbeafe; border-radius: 14px; padding: 12px }
.tp-group.disabled { opacity: 0.5 }
.tp-helper { font-size: 12px; color: #6b7280; margin-top: 8px }
.tp-section-title { font-size: 13px; font-weight: 700; color: #374151; margin: 8px 0 }
.tp-date-row { display: flex; flex-direction: row; align-items: center; gap: 12px }
.tp-date-row .tp-section-title { margin: 0; flex-shrink: 0 }
.tp-date-field-wrapper { display: flex; align-items: center; gap: 0; flex: 1; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; overflow: hidden; cursor: pointer }
.tp-date-field-wrapper:focus-within { border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,0.18) }
.tp-date { flex: 1; padding: 8px 12px; border: none; border-radius: 0; font-size: 14px; background: transparent; cursor: pointer }
.tp-date:focus { outline: none; }
.tp-date-icon { flex-shrink: 0; background: transparent; padding: 8px 12px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #cbd5e1; pointer-events: none }
.tp-date-icon svg { color: #6b7280 }
.tp-time-row { display: flex; flex-direction: row; align-items: center; gap: 12px }
.tp-time-row .tp-section-title { margin: 0; flex-shrink: 0 }
.tp-time-inputs-wrapper { display: flex; align-items: center; gap: 0; flex: 1; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; overflow: hidden }
.tp-time-icon { flex-shrink: 0; background: transparent; padding: 8px 12px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #cbd5e1; pointer-events: none }
.tp-time-icon svg { color: #6b7280 }
.tp-hour-select, .tp-minute-select { width: 88px; border: none; border-radius: 0; background: #ffffff; height: 36px; padding: 6px; text-align: center; font-size: 13px }

/* Hide inline picker sub-labels to save space */
.inline-picker .tp-section-title { display: none !important }
.inline-picker #tp_ret_date_title { display: none !important }
.tp-minute-select { border-left: 1px solid #cbd5e1 }
.tp-right { display: flex; align-items: center; gap: 10px }
.tp-inline-label { display: inline-block; font-size: 12px; color: #6b7280; font-weight: 600 }
.tp-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.tp-inline .inline { font-size: 13px; color: #0a0f1c; font-weight: 600 }
.tp-hour-select, .tp-minute-select { width: 60px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #111827; padding: 6px; text-align: center; font-size: 13px }
.tp-display { display: inline-flex; align-items: center; gap: 8px; font-size: 28px; background: #ffffff; color: #0a0f1c; border-radius: 14px; padding: 8px 14px; border: 1px solid #d1d5db }
.tp-ampm { display: inline-flex; gap: 0; margin-left: 10px; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.7) }
.tp-toggle { padding: 8px 14px; border: none; background: transparent; color: #0a0f1c; cursor: pointer }
.tp-toggle.active { background: #0b63ce; color: #ffffff }
.tp-label { display: block; font-size: 12px; color: #6b7280; margin-top: 12px }
.tp-minutes { width: 120px }
.tp-clock { position: relative; width: 240px; height: 240px; background: #f1f5f9; border-radius: 50%; border: 1px solid #cbd5e1 }
.tp-hour { position: absolute; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; background: #ffffff; color: #0a0f1c; border: 1px solid #cbd5e1; cursor: pointer; transform: translate(-50%, -50%) }
.tp-hour.active { background: #0b63ce; color: #ffffff; border-color: #0b63ce; box-shadow: 0 0 0 4px rgba(11,99,206,0.15) }
.tp-minute { display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid #cbd5e1; background: #ffffff; color: #0a0f1c; cursor: pointer; margin: 6px }
.tp-minute.active { background: #0b63ce; color: #ffffff; border-color: #0b63ce }
.tp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px }
.time-picker-popover .btn-primary { border-radius: 6px; background: linear-gradient(135deg, #1fa7e8, #0b63ce); border: none; color: #fff; font-weight: 700; padding: 0.45rem 1rem; cursor: pointer }
.time-picker-popover .btn-ghost { border-radius: 6px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; font-weight: 600; padding: 0.45rem 1rem; cursor: pointer }
.btn.ghost { background: transparent; border: none; color: #6b7280 }
.tp-selected {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  font-weight: 600;
  color: #0a0f1c;
}
.tp-hand-hour { stroke: #0b63ce; stroke-width: 6; stroke-linecap: round }
.tp-hand-minute { stroke: #7c3aed; stroke-width: 4; stroke-linecap: round }
.sr-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.picker-display {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #111827;
  font-size: 0.85rem;
  border: 1px solid #dbe3ff;
}
.picker-display:empty { display: none }
.quote-card-form input[type="text"],
.quote-card-form input[type="date"],
.quote-card-form input[type="time"],
.quote-card-form input[type="number"] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
  color: #111827;
  background: #f9fafb;
}
.field-help { font-size: 0.7rem; color: #9ca3af }
@media (min-width: 768px) { .field-help { display: none } }
.btn-secondary.small,
.btn-ghost.small {
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.btn-secondary.small { border: 1px solid #d1d5db; background: #ffffff; color: #111827 }
.btn-secondary.small#hero_datetime_trigger { background: #f0f6ff; border-color: #dbeafe; color: #0b63ce; font-weight: 500; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center }
.btn-ghost.small { border: none; background: transparent; color: #0b63ce }
.btn.full-width { width: 100% }
.stepper-row {
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  border: 1px solid #dbeafe;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
}
.stepper-row input {
  border: none;
  flex: 1;
  text-align: center;
  background: #f9fafb;
}
.stepper-row .step-btn {
  border: 1px solid #cfe0ff;
  background: #0b63ce;
  color: #fff;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}
.stepper-row.large { min-height: 40px }
.stepper-row.large { height: 40px }
.quote-card-form .form-row.lr > .stepper-row { height: 40px; align-self: center; box-sizing: border-box }
.stepper-row.large .step-btn { height: 36px; min-width: 36px }
.stepper-row.large input { font-weight: 600; font-size: 1rem; height: 36px; line-height: 36px }

.field-help.subtle { color: #6b7280 }

.journey-divider { width: 2px; height: 12px; background: rgba(209,213,219,0.6); border-radius: 2px; margin: 4px auto }
.row-two {
  grid-template-columns: 1fr;
}
.row-three {
  grid-template-columns: 1fr;
}
.row-cta {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .row-two { grid-template-columns: 1fr 1fr }
  .row-three { grid-template-columns: 1fr 1fr 1fr }
  .row-cta { grid-template-columns: auto 1fr }
}
.input-pill {
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.pill-label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  color: #6b7280;
}
.pill-inputs { display: flex; align-items: center; gap: 0.45rem }
.input-pill input[type="text"],
.input-pill input[type="date"],
.input-pill input[type="time"],
.input-pill input[type="number"] {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 0.9rem;
  color: #111827;
}
.input-pill input::placeholder { color: #9ca3af }
gmpx-place-autocomplete {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #f9fafb;
  flex: 1 1 auto;
  color-scheme: light;
  --gmpx-color-surface: #f9fafb;
  --gmpx-color-on-surface: #111827;
  --gmpx-color-outline: #d1d5db;
  --gmpx-color-primary: #0b63ce;
}
gmp-place-autocomplete,
gmp-place-autocomplete-element,
gmpx-place-autocomplete { color-scheme: light }
gmp-place-autocomplete,
gmp-place-autocomplete-element {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #111827;
}
gmp-place-autocomplete,
gmp-place-autocomplete-element {
  --gmpx-color-surface: #f9fafb;
  --gmpx-color-on-surface: #111827;
  --gmpx-color-outline: #d1d5db;
  --gmpx-color-primary: #0b63ce;
}
.stepper.large .step-btn {
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
}
.stepper.large input[type="number"] {
  text-align: center;
  font-size: 16px;
}
.toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #eaf3ff;
  border-radius: 999px;
  padding: 4px;
  border: 1px solid #dbeafe;
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  min-height: 2rem;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid #cfe0ff;
  background: #fff;
}
.toggle-pill span { font-size: 0.78rem }
.toggle-pill input { display: none }
.toggle-pill span { color: #374151 }
.toggle-pill.active { background: #0b63ce; color: #ffffff }
.toggle-pill.active span { color: #ffffff }
.quote-card-form .form-actions, .cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
#hero_get_quote.btn.primary {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1fa7e8, #0b63ce);
  border: none;
  color: #fff;
  font-weight: 600;
}
.quote-card-form button:not(.step-btn):not(.toggle-pill) {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1fa7e8, #0b63ce);
  border: none;
  color: #fff;
  font-weight: 600;
}
.quote-card-form .btn.small {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}
.cta-row { margin-top: 0.3rem }
.cta-subtext, .cta-note { font-size: 0.72rem; color: #6b7280; text-align: center; margin-top: 0.2rem }
.subtle-row { font-size: 0.8rem; color: #4b5563 }
.subtle-row { margin-top: 0.1rem }
.more-options > summary { font-size: 0.78rem; color: #0b63ce; padding: 0 }
.more-options { color: #4b5563 }
.more-options[open] { margin-top: 0.4rem }
/* ===== Hero two-pane and Places containment additions ===== */
.quote-card.expanded .quote-card-inner { display: block }
@media (max-width: 900px) { .quote-card.expanded .quote-card-inner { grid-template-columns: 1fr } }
.quote-card-sub { font-size: 0.85rem; color: #6b7280; margin: 0.8rem auto 0.8rem; text-align: center }
.quote-steps { margin: 0 0 0.8rem; padding-left: 1.2rem; font-size: 0.85rem; color: #6b7280 }
.quote-group { display: flex; flex-direction: column; gap: 0.6rem }
.quote-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start }
@media (min-width: 900px) { .quote-basics { align-items: center } }
@media (max-width: 520px) { .quote-basics { grid-template-columns: 1fr } }
.quote-advanced { margin-top: 0.5rem }
.input-row .field-icon { display: none }
#hero_quote_card .input-row { border: 1px solid #d1d5db; border-radius: 10px; padding: 2px; background: #f9fafb; box-sizing: border-box }
#hero_quote_card .input-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,118,210,.18) }
.input-shell { border: 1px solid #d1d5db; border-radius: 10px; padding: 2px; background: #f9fafb; box-sizing: border-box }
.input-shell:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,118,210,.18) }
gmp-place-autocomplete,
gmp-place-autocomplete *,
gmp-place-autocomplete-element,
gmp-place-autocomplete-element * { font-family: inherit !important; font-size: 15px !important }
gmp-place-autocomplete { width: 100%; display: block }
gmp-place-autocomplete,
gmp-place-autocomplete-element,
gmpx-place-autocomplete { min-height: 40px }
.quote-pane { display: flex; flex-direction: column; gap: 12px }
.quote-pane { border-left: 1px solid rgba(0,0,0,.08); padding-left: 16px }
@media (max-width: 900px) { .quote-pane { border-left: none; border-top: 1px solid rgba(0,0,0,.08); padding-left: 0; padding-top: 16px } }
.quote-total { font-size: 52px; font-weight: 750; letter-spacing: -0.03em; text-align: center; color: #111827; line-height: 1; margin: 10px 0 6px }
@media (min-width: 900px) { .quote-total { position: sticky; top: 12px } }
.quote-breakdown { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background: #f8fafc; font-size: 13px; color: #334155; min-height: 0 }
.quote-breakdown:empty { display: none }
.quote-breakdown > div { margin: 4px 0 }
.quote-pane .btn.primary { width: 100% }
.pane-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px }
.pane-actions .btn.primary { width: auto }
.pane-actions .btn.btn-secondary { border: 1px solid #d1d5db; background: #ffffff; color: #374151; border-radius: 999px; padding: 0.45rem 1rem; font-weight: 600 }
.more-options { color: #4b5563; opacity: 0.9 }
#hero_quote_card .form-row.lr { display: block }
#hero_quote_card .field-label { margin-bottom: 6px }
#hero_quote_card .input-row, #hero_quote_card .input-shell { width: 100% }
#hero_quote_card .input-row input[type="text"] { border: none; background: transparent; padding: 10px 12px }

#hero_quote_inner { display: block }
#hero_quote_card[data-quote="ready"] #hero_quote_inner { display: block }
@media (max-width: 900px) { #hero_quote_card[data-quote="ready"] #hero_quote_inner { grid-template-columns: 1fr } }

#hero_quote_pane { display: none; opacity: 0; transform: translateX(24px) }
#hero_quote_card[data-quote="ready"] #hero_quote_pane { display: flex; flex-direction: column; gap: 12px; position: absolute; left: calc(100% + 18px); top: 0; bottom: 0; width: 400px; background: rgba(255,255,255,0.98); color: #111827; border: 1px solid rgba(0,0,0,0.06); border-radius: 20px; box-shadow: 0 12px 36px rgba(15,23,42,0.25); padding: 2rem; overflow: auto; opacity: 1; transform: none }
@media (max-width: 900px) { #hero_quote_card[data-quote="ready"] #hero_quote_pane { position: static; width: 100%; margin-top: 16px } }

@media (min-width: 900px) { #hero_quote_card[data-quote="ready"] #hero_quote_pane { position: sticky; top: 100px; max-height: calc(100vh - 120px) } }

body.modal-open { overflow: hidden }

/* ===== # When any modal is open, prevent the background quote pane from expanding*/
body.modal-open #hero_quote_card[data-quote="ready"] #hero_quote_pane { display: none !important }

#hero_confirm_cta:disabled { opacity: .5; cursor: not-allowed }

/* Hide redundant CTA when expanded */
#hero_quote_card[data-quote="ready"] #hero_get_quote { display: none }
#hero_quote_card[data-quote="ready"] .cta-note { display: none }

.quote-head { margin-bottom: 4px; justify-content: center }
.quote-card-title { text-align: center }

/* Close button in quote card */
.quote-head { display: flex; align-items: center; justify-content: space-between }
.quote-close { background: transparent; border: none; color: #111827; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 8px }
.quote-close:hover { background: #f3f4f6 }

/* Smooth duo-card transition */
.quote-card, #hero_quote_pane { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms cubic-bezier(0.22, 1, 0.36, 1) }
#hero_quote_card[data-quote="ready"] .quote-card-inner { position: relative }

/* Inputs consistency within quote card against injected components */
.quote-card input,
.quote-card select,
.quote-card button { font-family: inherit }

/* === Enhanced toggle layout and sizing === */
.quote-card-form .form-row.lr > .toggle-group { width: 100%; display: flex; gap: 8px; justify-content: space-between; align-items: stretch }
.quote-card-form .form-row.lr > .toggle-group { height: 40px; padding: 2px 4px; align-self: center; box-sizing: border-box }
.toggle-group .toggle-pill { flex: 1 1 0; justify-content: center; align-items: center; text-align: center; padding: 0 0.6rem; min-height: 36px; height: 36px; font-size: 0.88rem; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151 }
.toggle-group .toggle-pill span { font-size: 0.95rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100% }
.toggle-group .toggle-pill:not(.active) { background: #e5e7eb; color: #6b7280; border-color: #d1d5db }
.toggle-group .toggle-pill.active { background: #0b63ce; color: #ffffff; border-color: #0b63ce }
.toggle-group .toggle-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(11,99,206,0.25) }

/* Vehicle type group spacing */
#hero_vehicle_group.toggle-group { width: 100% }

/* Simple shake animation for missing route */
.shake { animation: shake 180ms ease-in-out 0s 1 }
@keyframes shake { 0% { transform: translateX(0) } 25% { transform: translateX(-4px) } 50% { transform: translateX(4px) } 75% { transform: translateX(-2px) } 100% { transform: translateX(0) } }
.service p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.carousel { margin-top: 16px }
.carousel-viewport { overflow: hidden; position: relative }
.carousel-track { display: flex; gap: 16px; will-change: transform }
.carousel-item { flex: 0 0 320px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-items: start; text-align: center; background: var(--card); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 16px }
.carousel-item.off { filter: blur(2px); opacity: 0.6 }
.carousel .team-photo { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; margin: 0 auto }
.page-contact .container { max-width: 880px }
.page-contact h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 42px) }
.page-contact .container > p { font-size: 1rem; line-height: 1.6 }
.page-contact .like-table { margin-top: 16px; padding: 16px; background: var(--card); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px }
.page-contact .like-table .row { grid-template-columns: 180px 1fr; align-items: start }
.page-contact .like-table .row .cell:first-child { color: var(--muted); font-weight: 600 }
.page-contact .menu-divider { margin: 24px 0 }
.page-contact section.subtle-row { font-size: 0.95rem }
.page-contact section.subtle-row h2 { margin: 0 0 10px; font-size: clamp(22px, 4vw, 28px) }
.page-contact section.subtle-row h3 { margin: 16px 0 8px; font-size: 18px }
.page-contact ol { padding-left: 1.2rem }
.page-contact ol li { margin: 8px 0 }

.site-footer{
  padding: 28px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.footer-brand{
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-tagline{
  opacity: .85;
  margin-bottom: 10px;
}

.footer-trust{
  font-weight: 600;
  margin-bottom: 14px;
  opacity: .95;
}

.footer-links{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.footer-links a{
  text-decoration: none;
}

.footer-copy{
  opacity: .7;
  font-size: 0.9rem;
}

.legal-content {
  max-width: 880px;
  margin: 2rem auto;
  line-height: 1.7;
  font-size: 1rem;
  color: #111827;
}
.legal-content h1 { font-size: clamp(28px, 5vw, 36px); margin: 0 0 12px; }
.legal-content h2 { font-size: clamp(22px, 4vw, 28px); margin: 18px 0 10px; }
.legal-content h3 { font-size: 18px; margin: 14px 0 8px; }
.legal-content p { margin: 0 0 12px; }
.legal-content ol, .legal-content ul { padding-left: 1.3rem; margin: 10px 0; }
.legal-content li { margin: 6px 0; }
.legal-card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
}
.pdf-frame {
  width: 100%;
  height: 75vh;
  border: none;
  border-radius: 12px;
  background: #ffffff;
}
.pdf-fallback {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #6b7280;
}
body.modal-open .site-footer { display: none }

@media print {
  .header,
  .site-footer,
  .menu-overlay,
  .menu-toggle,
  #invoice_print,
  .no-print { display: none !important }
  body { background: #ffffff }
  .container { max-width: none }
  .help-card { break-inside: avoid; page-break-inside: avoid }
}

/* Option Cards */
.option-card {
  display: block;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.option-card:hover {
  border-color: #bbb;
}

/* Using :has selector for modern browsers */
.option-card:has(input:checked) {
  border-color: var(--primary);
  background-color: #f0f9ff;
}

/* Fallback for older browsers if needed, or JS toggle class */
.option-card.selected {
  border-color: var(--primary);
  background-color: #f0f9ff;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.option-title {
  font-weight: 600;
  font-size: 1.05rem;
}

.option-content {
  margin-left: 26px; /* Align with text, skipping radio */
}

.option-desc {
  margin: 0 0 8px 0;
  color: #555;
  font-size: 0.95rem;
}

.option-helper {
  font-weight: 500;
  color: var(--primary-dark);
  font-size: 0.95rem;
}

.manual-controls {
  margin-left: 26px;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #eee;
}

.warning-message {
  background-color: #fff3cd;
  color: #856404;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

/* --- Admin Portal Premium Styles --- */
.page-admin { display:flex; flex-direction:column; min-height:100vh; background: radial-gradient(1200px 600px at 20% -100px, #eef2ff 0%, #f6f7fb 40%, #f3f4f6 100%) }

.sidebar-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: 260px;
    background: #1f2937;
    color: #f9fafb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #374151;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.sidebar-header .brand { color: #fff; font-weight: 800; font-size: 1.2rem; }
.sidebar-header img { width: 100%; height: auto; display: block; }

.sidebar-nav {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid #374151;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #d1d5db;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.nav-item:hover {
    background: #374151;
    color: #fff;
}
.nav-item.active {
    background: #111827;
    color: #fff;
    border-left-color: #10b981;
}

.main-content { flex:1; padding:18px 22px 24px 16px; overflow-y:auto }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.admin-header h1 { margin:0; font-size:1.9rem; color:#0a0f1c; font-weight:800; letter-spacing:-0.01em }

.admin-toolbar { margin-bottom: 8px; }
.page-admin .admin-filters input[type="text"] { min-width: 240px; }

.like-table {
    border: none;
    box-shadow: none;
    background: transparent;
    gap: 0;
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.like-table .row {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0;
    display: table-row;
    width: 100%;
}
.like-table .row.header { background:transparent; border-bottom:2px solid #e5e7eb; color:#6b7280; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.06em; font-weight:800 }
.like-table .row:hover { background: transparent; }
.like-table .row:not(.header):hover { background: #f9fafb; }
.like-table .row .cell { 
    border-right: 1px solid #f3f4f6; 
    padding: 12px 16px; 
    font-size: 0.95rem; 
    display: table-cell;
    vertical-align: middle;
}
.like-table .row .cell:last-child { border-right: none; }

#operators_table.like-table .row,
#bookings_table.like-table .row,
#bids_table.like-table .row,
#mb_table.like-table .row,
#customers_table.like-table .row,
#pricing_table.like-table .row { 
    display: table-row;
    grid-template-columns: none;
}

#bookings_table.like-table .row-group {
    display: table-row-group;
    width: 100%;
}

#bookings_table.like-table .row-details {
    display: none;
    width: 100%;
}
#bookings_table.like-table .row-details.open {
    display: table-row;
}
#bookings_table.like-table .row-details > * {
    display: table-cell;
    grid-column: 1 / -1;
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Dropdown & Expanded Row Styles */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dropdown-trigger:hover {
    color: #111827;
    background: #f3f4f6;
    border-radius: 6px;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #ffffff;
    min-width: 180px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    z-index: 9999;
    overflow: hidden;
    margin-top: 4px;
}
.dropdown-menu.up {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
    margin-top: 0;
    box-shadow: 0 -10px 25px -5px rgba(0,0,0,0.15), 0 -8px 10px -6px rgba(0,0,0,0.1);
}

.like-table {
    min-height: 300px;
    padding-bottom: 100px;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
.modal-tab {
    padding: 12px 24px;
    cursor: pointer;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
}
.modal-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
.modal-tab-content {
    display: none;
}
.modal-tab-content.active {
    display: block;
}

.like-table .row {
    overflow: visible;
}
.like-table .row .cell.actions {
    overflow: visible;
}
.dropdown-trigger {
    white-space: nowrap;
}
.dropdown-menu.show {
    display: block;
}
.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
}
.dropdown-item:hover {
    background: #f9fafb;
    color: #111827;
}
.dropdown-item.danger {
    color: #ef4444;
}
.dropdown-item.danger:hover {
    background: #fef2f2;
}

.row-details {
    display: none;
    grid-column: 1 / -1;
    background: #f8fafc;
}

/* Mobile Sidebar & Responsive Overrides */
@media (max-width: 900px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .main-content {
        padding: 16px;
        width: 100%;
    }

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: #111827;
        padding: 8px;
        margin-left: 8px;
        cursor: pointer;
        border-radius: 6px;
    }
    .mobile-menu-toggle:active {
        background: #e5e7eb;
    }

    .admin-header {
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .admin-header h1 {
        font-size: 1.5rem;
    }
    
    .page-admin .admin-filters input[type="text"] {
        width: 100%;
        min-width: 0;
    }
    
    .like-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
    }
    .like-table .row {
        min-width: 800px;
    }
    
    .desktop-only {
        display: none !important;
    }

    .op-list {
        display: grid;
        gap: 12px;
    }
    .op-item {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }
    .op-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 12px 14px;
        cursor: pointer;
        list-style: none;
    }
    .op-item-head::-webkit-details-marker { display: none }
    .op-item-head > div {
        font-size: 0.95rem;
        color: #374151;
    }
    .op-item-head strong { color: #111827 }
    .op-item[open] .op-item-head {
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    .op-item-body {
        padding: 12px 14px;
    }
    .op-actions { display: grid; gap: 10px; margin-top: 12px }
    .kv-list.compact .kv {
        grid-template-columns: 140px 1fr;
    }
    /* My Account: Mobile Bookings List */

    /* My Account: Mobile Bookings List */
    .mb-list {
        display: grid;
        gap: 12px;
    }
    .mb-item {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }
    .mb-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 12px 14px;
        cursor: pointer;
        list-style: none;
    }
    .mb-item-head::-webkit-details-marker { display: none }
    .mb-item-head > div {
        font-size: 0.95rem;
        color: #374151;
    }
    .mb-item-head strong { color: #111827 }
    .mb-item[open] .mb-item-head {
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    .mb-item-body {
        padding: 12px 14px;
    }
    .kv-list.compact .kv {
        grid-template-columns: 140px 1fr;
    }
    .invoice-actions { display: grid; gap: 10px }
}

.mobile-menu-toggle {
    display: none;
}
.sidebar-overlay {
    display: none;
}

#mobile_bottom_nav { display: none }
@media (max-width: 900px) {
  #mobile_bottom_nav { display: flex }
}

#mobile_bottom_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111827;
  border-top: 1px solid #374151;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 9999;
}
#mobile_bottom_nav .nav-item {
  color: #e5e7eb;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

#mobile_more_menu {
  position: fixed;
  bottom: 60px;
  right: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
  border-radius: 10px;
  min-width: 180px;
  z-index: 10000;
  display: none;
  overflow: hidden;
}
#mobile_more_menu.open { display: block }
#mobile_more_menu a {
  display: block;
  padding: 10px 14px;
  color: #374151;
  text-decoration: none;
  font-weight: 600;
}
#mobile_more_menu a:hover {
  background: #f9fafb;
  color: #111827;
}
#mobile_more_menu a.logout-link { color: #ef4444 }
#mobile_more_menu a.logout-link:hover { background: #fef2f2 }

#admin_pricing_modal .form-actions { margin-top: 20px; }



.like-table .row {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0;
    display: table-row; /* Force table-row behavior */
    width: 100%;
}
.like-table .row.header {
    background: transparent;
    border-bottom: 2px solid #e5e7eb;
    color: #6b7280;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.like-table .row:hover { background: transparent; } /* Remove row hover for cleaner look, or subtle */
.like-table .row:not(.header):hover { background: #f9fafb; }
.like-table .row .cell { 
    border-right: 1px solid #f3f4f6; 
    padding: 12px 16px; 
    font-size: 0.95rem; 
    display: table-cell; /* Force table-cell behavior */
    vertical-align: middle;
}
.like-table .row .cell:last-child { border-right: none; }

/* Reset specialized grid definitions as we are moving to table-layout */
#operators_table.like-table .row,
#bookings_table.like-table .row,
#bids_table.like-table .row,
#mb_table.like-table .row,
#customers_table.like-table .row,
#pricing_table.like-table .row { 
    display: table-row;
    grid-template-columns: none;
}

#bookings_table.like-table .row-group {
    display: table-row-group; /* Ensure grouping works within table */
    width: 100%;
}

/* Fix for row details breaking the table structure */
#bookings_table.like-table .row-details {
    display: none;
    width: 100%;
}
#bookings_table.like-table .row-details.open {
    display: table-row;
}
/* We need to span the cell across all columns */
#bookings_table.like-table .row-details > * {
    display: table-cell;
    grid-column: 1 / -1; /* Fallback */
}
/* But wait, the content of row-details is not a cell, it's a div. 
   We need to wrap the content in a cell that spans 7 columns.
   However, we can't easily change the HTML structure from here without JS changes.
   
   Alternative: keep display: contents for .row-group, and make .row a table-row.
   And .row-details needs to be a row too, with a single cell spanning 7 cols.
   
   Let's try display: contents for row-group first, as added above. 
   If that doesn't work perfectly, we might need to adjust JS.
   
   Actually, the previous tool call added display: contents to #bookings_table.like-table .row-group.
   Let's ensure that rule is robust.
*/

@media (max-width: 900px) {
  /* On mobile, revert to block/grid for scrolling */
  .like-table { display: block; overflow-x: auto; }
  .like-table .row { display: flex; min-width: max-content; }
  .like-table .row .cell { display: block; }
  
  /* Reset row-group for mobile */
  #bookings_table.like-table .row-group { display: block; }
  
  /* Re-apply grid definitions for mobile only */
  #operators_table.like-table .row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 1.5fr) 90px minmax(120px, auto) }
  #bookings_table.like-table .row { display: grid; grid-template-columns: 110px minmax(140px, 1fr) 100px 100px 100px 80px minmax(100px, auto) }
  #customers_table.like-table .row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) 120px 80px 80px 100px minmax(80px, auto) }
  #bids_table.like-table .row { display: grid; grid-template-columns: 220px 110px minmax(260px, 1fr) 110px 120px }
  #mb_table.like-table .row { display: grid; grid-template-columns: 130px minmax(240px, 1fr) minmax(240px, 1fr) 110px 100px 150px }
  #pricing_table.like-table .row { display: grid; grid-template-columns: 70px 100px 100px 100px 90px }

/* Admin Dashboard Overview */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px }
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr } }
.kpi-tile { display:block; border:1px solid #e6e8eb; border-radius:14px; padding:16px; background:#fbfbfd; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.kpi-tile:active, .kpi-tile:hover { background:#f8fafc; transform:translateY(-1px); transition:transform 0.15s }
.kpi-value { font-size: 1.6rem; font-weight: 900; color: #0a0f1c }
.kpi-label { margin-top: 4px; color: #374151; font-weight: 600 }
.kpi-trend { margin-top: 2px; color: #6b7280; font-size: 0.85rem }

.alerts-list { display: grid; gap: 8px }
.alert-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e6e8eb; border-radius:12px; background:#fbfbfd; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.alert-item:hover { background: #f8fafc }
.alert-count { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-weight: 900 }
.alert-text { color: #374151; font-weight: 600 }

.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px }
@media (max-width: 640px) { .charts-grid { grid-template-columns: 1fr } }
.chart-container { position: relative; width: 100%; height: 220px }
.chart-link { text-decoration: none; color: inherit }

@media (max-width: 640px) {
  #kpi_section, #alerts_section, #upcoming_section, #charts_section { margin-top: 12px }
}

/* Upcoming table: fixed, readable columns */
#upcoming_table.like-table .row{
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  grid-template-columns: 120px minmax(260px, 1fr) 120px 110px 90px;
  min-width: 0;
}
#upcoming_table.like-table .cell{
  min-width: 0;
  font-size: 0.85rem;
}
#upcoming_table.like-table .row .cell:nth-child(2){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact upcoming variant */
.like-table.compact .row{
  grid-template-columns: 100px minmax(160px, 1fr) 80px 80px 70px;
  min-width: 0;
}
.like-table.compact .cell{
  font-size: 0.8rem;
}
@media (max-width: 899px){
  #upcoming_table.like-table .row{
    grid-template-columns: 110px minmax(180px, 1fr) 120px 110px 80px;
  }
}

#upcoming_table.compact .row .cell { padding: 6px 8px }

/* KPI grid: 3-up layout on desktop and hover affordance */
@media (min-width: 900px){
  #today_kpis.metric-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-grid .metric-value { font-size: 1.2rem; font-weight: 900; color: #0a0f1c }
  .metric-grid .metric-label { color: #374151; font-weight: 600; font-size: 0.85rem }
  .metric-grid .metric-sub { color: #6b7280; font-size: 0.8rem }
}
.metric-card{
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.metric-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 160px;
    width: 100%;
}

/* Operators page compact tweaks */
#operators_stats.metric-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.page-admin #operators_stats .metric-card { padding: 6px; }
.page-admin #operators_stats .metric-label { font-size: 0.8rem; }
.page-admin #operators_stats .metric-value { font-size: 1rem; }
.page-admin #operators_stats .metric-sub { font-size: 0.72rem; }
.page-admin #operators_table.like-table .row .cell,
.page-admin #operators_workload.like-table .row .cell { padding: 6px 8px; font-size: 0.86rem; line-height: 1.2; }
.page-admin #operators_table.like-table .row.header .cell,
.page-admin #operators_workload.like-table .row.header .cell { padding: 6px 8px; }
.page-admin .card { padding: 8px; }
.page-admin .admin-filters { gap: 6px; }
/* Reduce empty-space on operators tables */
.page-admin #operators_table.like-table,
.page-admin #operators_workload.like-table { min-height: 0; padding-bottom: 12px; }

/* Dropdown & Expanded Row Styles */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dropdown-trigger:hover {
    color: #111827;
    background: #f3f4f6;
    border-radius: 6px;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #ffffff;
    min-width: 180px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    z-index: 9999;
    overflow: hidden;
    margin-top: 4px;
}
/* Dropdown improvements */
.dropdown-menu.up {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
    margin-top: 0;
    box-shadow: 0 -10px 25px -5px rgba(0,0,0,0.15), 0 -8px 10px -6px rgba(0,0,0,0.1);
}

.like-table {
    /* Ensure minimum height so dropdowns don't clip if the table is empty-ish */
    min-height: 300px;
    padding-bottom: 100px; /* Spacer for last row dropdown */
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
.modal-tab {
    padding: 12px 24px;
    cursor: pointer;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
}
.modal-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
.modal-tab-content {
    display: none;
}
.modal-tab-content.active {
    display: block;
}

.like-table .row {
    overflow: visible; /* Allow dropdowns to escape row bounds */
}
.like-table .row .cell.actions {
    overflow: visible; /* Allow dropdowns to escape cell bounds */
}
.dropdown-trigger {
    white-space: nowrap; /* Prevent text wrap */
}
.dropdown-menu.show {
    display: block;
}
.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
}
.dropdown-item:hover {
    background: #f9fafb;
    color: #111827;
}
.dropdown-item.danger {
    color: #ef4444;
}
.dropdown-item.danger:hover {
    background: #fef2f2;
}

/* Expanded Row Content */
.row-details {
    display: none;
    grid-column: 1 / -1;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;
    animation: slideDown 0.2s ease-out;
}
.row-details.open {
    display: block;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.detail-section h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 8px 0;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.detail-group {
    margin-bottom: 12px;
}
.detail-label {
    font-size: 0.8rem;
    color: #6b7280;
}
.detail-value {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}
.bids-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}
.bid-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Grid Three Cols */
.grid.three-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .grid.three-cols { grid-template-columns: 1fr; }
    
    /* Specific override for admin dashboard charts grid */
    .grid.two-cols.charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Action Cards */
.action-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid transparent;
}
.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1);
}
.action-card.danger {
    border-left-color: #ef4444;
    background: #fef2f2;
}
.action-card.danger .metric-value { color: #b91c1c; }
.action-card.warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
}
.action-card.warning .metric-value { color: #b45309; }
.action-card.info {
    border-left-color: #3b82f6;
    background: #eff6ff;
}
.action-card.info .metric-value { color: #1d4ed8; }

/* Operators Page Specific Styles */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2rem 0 4rem;
}
@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.hero-mosaic img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.hero-mosaic img:nth-child(2) { margin-top: 2rem; }
.hero-mosaic img:nth-child(3) { margin-top: -2rem; }

.trust-bullets {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.trust-bullets li {
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trust-icon {
  color: var(--success);
  font-weight: bold;
}

/* Steps Section */
.steps-horizontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .steps-horizontal {
    grid-template-columns: repeat(4, 1fr);
  }
  .steps-horizontal.three-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}
.step-number {
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* Premium Section */
.premium-section {
  background: #f8fafc;
  padding: 4rem 0;
  margin: 4rem 0;
}
.premium-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}
.premium-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .premium-split {
    grid-template-columns: 1fr 1fr;
  }
}
.premium-image {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.ownership-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.ownership-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ownership-list li:last-child {
  border-bottom: none;
}

/* Image Grid 8 */
.grid-8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 600px) {
  .grid-8 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.grid-8 img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.2s;
}
.grid-8 img:hover {
  transform: scale(1.02);
}

/* Feature Icons */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.feature-card {
  text-align: center;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

/* Testimonials */
.testimonial-placeholder {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  font-style: italic;
  color: #6b7280;
  border: 1px dashed #d1d5db;
}

/* Final CTA */
.final-cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 20px;
  margin: 4rem 0;
}
.final-cta-section h2 { color: #fff; margin-bottom: 1rem; font-size: 2rem; }
.final-cta-section p { color: #94a3b8; margin-bottom: 2rem; font-size: 1.2rem; }

/* Payment Section */
.payment-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  margin: 4rem 0;
}
@media (min-width: 768px) {
  .payment-split {
    grid-template-columns: 1fr 1fr;
  }
}
.payment-illustration {
    background: #f3f4f6;
    border-radius: 16px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-weight: 600;
}

/* Page specific styles moved from how.html */
.card-icon-large {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.soft-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
.soft-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 600px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step-card {
  display: flex;
  flex-direction: column;
}
.standard-card {
  text-align: center;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  height: 100%;
}
.standard-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}
@media (min-width: 900px) {
  .split-section {
    grid-template-columns: 1fr 1fr;
  }
  .split-section.reversed .split-content {
    order: 2;
  }
  .split-section.reversed .split-image {
    order: 1;
  }
}
.split-image img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.split-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.split-list li {
  margin-bottom: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.split-list li::before {
  content: "✓";
  color: var(--primary);
  font-weight: 900;
}
.trust-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-radius: 24px;
  padding: 4rem 2rem;
  text-align: center;
  margin: 4rem 0;
  border: 1px solid #e0e7ff;
}
.trust-banner h2 {
  font-size: 2.5rem;
  color: #1e3a8a;
  margin-bottom: 1rem;
}
.step-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: auto;
}
.hero-bg-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}
.hero-bg-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}
/* Compact Form Styling (Trainline-ish) */
.compact-form {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Restored gap for spacing between shells */
  padding: 8px 4px;
}
.compact-form .field-label {
  display: none; /* Hide top labels as requested (since we have internal prefix) */
}

/* Input Shell: The container for Prefix + Input/Control */
.compact-form .input-shell {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 12px; /* Increased side padding */
  min-height: 44px; /* Slightly taller for better touch target */
  display: flex;
  align-items: center;
  gap: 12px; /* Space between prefix and input */
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0; /* Allow flex child to shrink on small screens */
}

.compact-form .input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,0.18);
}

.compact-form .input-shell .input-prefix {
  font-weight: 700;
  color: #374151;
  font-size: 0.95rem;
  white-space: nowrap;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
}
.compact-form .input-shell .input-prefix.passengers { justify-content: center }
.compact-form .input-shell .input-prefix.passengers svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Unified icon alignment inside controls */
.compact-form .input-shell .input-icon {
  width: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  margin-right: 6px;
}
.compact-form .compact-stepper .input-icon { margin-right: 8px }
.compact-form .compact-toggle .input-icon { margin-right: 8px }
.compact-form .compact-trigger .inline-icon { margin-right: 6px; color: #6b7280 }

/* Google Maps Autocomplete Styling within Shell */
.compact-form gmp-place-autocomplete,
.compact-form gmp-place-autocomplete-element,
.compact-form gmpx-place-autocomplete {
  min-height: 42px;
  height: 42px;
  flex: 1;
  position: relative;
  z-index: 4000; /* ensure popup stacks above other form elements */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  --gmpx-color-outline: transparent !important;
  --gmpx-color-outline-focus: transparent !important;
  --md-focus-ring-color: transparent !important;
  --md-focus-ring-width: 0 !important;
  --md-focus-ring-outer: 0 !important;
  --gmp-mat-color-outline-decorative: rgb(255, 255, 255) !important;
  --gmp-mat-color-primary: rgb(255, 255, 255) !important;
  transform: translateX(-10px); /* slight additional left nudge for icon alignment */
  width: calc(100% + 12px); /* extend to right edge */
  margin-right: -12px;      /* pull component to the shell border on the right */
  padding-right: 0 !important;
}
/* Explicitly remove host focus ring to prevent double blue outline */
.compact-form gmpx-place-autocomplete:focus,
.compact-form gmpx-place-autocomplete:focus-visible,
.compact-form gmp-place-autocomplete:focus,
.compact-form gmp-place-autocomplete:focus-visible,
.compact-form gmp-place-autocomplete-element:focus,
.compact-form gmp-place-autocomplete-element:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Try to elevate internal popup surfaces via Shadow DOM parts if exposed */
.compact-form gmpx-place-autocomplete::part(panel),
.compact-form gmpx-place-autocomplete::part(suggestions),
.compact-form gmpx-place-autocomplete::part(results),
.compact-form gmpx-place-autocomplete::part(container),
.compact-form gmp-place-autocomplete::part(panel),
.compact-form gmp-place-autocomplete::part(suggestions),
.compact-form gmp-place-autocomplete::part(results),
.compact-form gmp-place-autocomplete::part(container),
.compact-form gmp-place-autocomplete-element::part(panel),
.compact-form gmp-place-autocomplete-element::part(suggestions),
.compact-form gmp-place-autocomplete-element::part(results),
.compact-form gmp-place-autocomplete-element::part(container) {
  z-index: 5000;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  border-radius: 10px;
}

/* Ensure the hero quote card area doesn't clip overlays */
.quote-card-inner { overflow: visible; }

/* Force internal inputs of Web Component to have no border if exposed via parts or inheritance */
.compact-form gmp-place-autocomplete::part(input),
.compact-form gmp-place-autocomplete input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Nudge Google leading search icon slightly left, when parts are available */
.compact-form gmpx-place-autocomplete::part(leading-icon),
.compact-form gmp-place-autocomplete::part(leading-icon),
.compact-form gmp-place-autocomplete-element::part(leading-icon) {
  margin-left: -12px;
}
.compact-form gmpx-place-autocomplete::part(focus-ring),
.compact-form gmp-place-autocomplete::part(focus-ring),
.compact-form gmp-place-autocomplete-element::part(focus-ring) {
  opacity: 0 !important;
  border: 0 !important;
  display: none !important;
}
.compact-form .input-shell .focus-ring {
  opacity: 0 !important;
  border: 0 !important;
  display: none !important;
}
/* Ensure internal input part does not render its own focus ring */
.compact-form gmpx-place-autocomplete::part(input):focus,
.compact-form gmpx-place-autocomplete::part(input):focus-visible,
.compact-form gmp-place-autocomplete::part(input):focus,
.compact-form gmp-place-autocomplete::part(input):focus-visible,
.compact-form gmp-place-autocomplete-element::part(input):focus,
.compact-form gmp-place-autocomplete-element::part(input):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.compact-form gmp-place-autocomplete::after,
.compact-form gmp-place-autocomplete-element::after,
.compact-form gmpx-place-autocomplete::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px #ffffff;
  opacity: 0;
}
.compact-form gmp-place-autocomplete:focus-within::after,
.compact-form gmp-place-autocomplete-element:focus-within::after,
.compact-form gmpx-place-autocomplete:focus-within::after {
  opacity: 1;
}

.compact-form .gm-style iframe + div {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* General Input Reset within Shell */
.compact-form input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: 100%;
  font-size: 1rem;
  color: #111827;
  outline: none !important;
}
.compact-form .input-shell input { flex: 1 }
/* Slight left nudge for plain text inputs to visually align with calendar/clock icons */
.compact-form .input-shell .sr-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Specific nudge for hero text inputs */
#hero-quote-form #hero_from,
#hero-quote-form #hero_to {
  margin-left: -8px;
  width: calc(100% + 8px);
  margin-right: -8px;
}

/* --- Date & Time Trigger Styling --- */
.compact-form .input-shell .compact-trigger {
  width: 100%;
  text-align: left;
  padding: 0;
  background: transparent !important;
  border: none !important;
  justify-content: flex-start;
  color: #111827 !important;
  font-weight: 400;
  font-size: 1rem;
  height: 100%;
  white-space: normal;       /* allow wrapping */
  line-height: 1.25;         /* improve readability on two lines */
  overflow-wrap: anywhere;   /* prevent horizontal overflow on narrow screens */
}

/* Split date display fields */
.compact-form .compact-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #111827;
  cursor: pointer;
  flex: 1;
}
.compact-form .compact-display .inline-icon { margin-right: 6px; color: #6b7280 }

/* Ensure Out/Return buttons are not blue pills inside hero form */
#hero_departure_display,
#hero_return_display {
  background: transparent !important;
  background-image: none !important;
  color: #111827 !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

/* --- Stepper (Passengers) Styling --- */
.compact-form .input-shell .compact-stepper {
  background: transparent;
  border: none;
  width: 100%;
  flex: 1; /* Ensure it takes available space */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  gap: 4px; /* Small gap between the three blocks */
  height: 100%;
  border-radius: 4px;
  overflow: visible;
}

.compact-form .input-shell .step-btn {
  flex: 1;
  height: 32px;
  border-radius: 4px; /* Rectangular with slight softening */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding-bottom: 2px;
  cursor: pointer;
  transition: background 0.2s;
  min-width: 0; /* Allow shrinking if needed */
}

/* Minus Button */
.compact-form .input-shell #hero_p_minus {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.compact-form .input-shell #hero_p_minus:hover {
  background: #e5e7eb;
}

/* Plus Button */
.compact-form .input-shell #hero_p_plus {
  background: #f3f4f6; /* Changed to match minus for symmetry, or keep primary? User said "rectangle plus button", didn't specify color. Usually primary is good for action, but symmetry is nice for +/-. Let's keep primary for now as it was before, or switch to neutral? The previous code had primary. Let's stick to primary for Plus to encourage adding? Or neutral for cleaner look. User asked for "rectangle", didn't say color. I'll keep the previous color scheme but change shape. */
  background: #0b63ce;
  color: #fff;
  border: 1px solid #0b63ce;
}
.compact-form .input-shell #hero_p_plus:hover {
  background: #0951a8;
}

/* Passenger Count Input */
.compact-form .input-shell input[type="number"]#hero_passengers {
  flex: 1;
  width: auto;
  padding: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  height: 32px; /* Match button height */
  display: block;
}

/* Remove default form-row margins when using shells */
.compact-form .form-row {
  margin: 0;
}
.compact-form .form-row:focus-within {
  position: relative;
  z-index: 9000;
}
.compact-form .form-row.compact-row {
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.compact-form .form-row.compact-row:focus-within {
  border: 2px solid #0b63ce;
}
.compact-form .form-row.compact-row .input-shell {
  border: none !important;
  box-shadow: none !important;
}
.compact-form .form-row.compact-row .input-shell:focus-within {
  border: none !important;
  box-shadow: none !important;
}
.compact-form .form-row:focus-within ~ .form-row {
  pointer-events: none;
}

/* Split Row overrides for Type/Toggle if needed (though we might not need split-row anymore if stacked) */
.compact-form .form-row.split-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* --- Toggle (Journey Type) Styling --- */
.compact-form .input-shell .compact-toggle {
  background: transparent;
  border: none;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center; /* vertically center icon and pills within shell */
  padding: 0;
  height: 100%;
  gap: 4px;
}

/* Ensure generic toggle-group inside shells is vertically centered like the stepper */
.compact-form .input-shell .toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 4px;
}

.compact-form .input-shell .toggle-pill {
  flex: 1;
  height: 32px;
  min-height: 32px;
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  margin-block: auto; /* center within the 44px shell height */
}

.compact-form .input-shell .toggle-pill.active {
  background: #0b63ce;
  color: #fff;
  border-color: #0b63ce;
}

/* Mobile polish for the hero quote card */
@media (max-width: 520px) {
  .quote-card {
    border-radius: 18px;
  }

  .quote-card-inner {
    padding: 14px 14px 16px; /* slightly tighter but still airy */
  }

  .quote-card-form .form-row {
    gap: 0.25rem; /* consistent spacing between label + control */
    margin-bottom: 10px; /* your global .form-row margin-bottom is tiny */
  }

  .field-label {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }
}

/* Make controls feel premium + thumb-friendly */
.quote-card input[type="text"],
.quote-card input[type="number"],
.quote-card select,
.picker-row #hero_datetime_trigger,
.toggle-group,
.stepper-row.large {
  min-height: 44px;
}

.toggle-pill {
  min-height: 40px; /* inside the 44px group container */
}

/* Quote card: shell owns the border, inner controls are clean */
#hero_quote_card .input-shell input,
#hero_quote_card .input-row input {
  border: none !important;
  background: transparent !important;
  padding: 10px 12px;
  box-shadow: none !important;
}

#hero_quote_card .input-row:focus-within,
.input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,0.18);
}

.btn.primary:active {
  transform: translateY(1px);
}

@media (hover:hover) {
  .btn.primary:hover {
    filter: brightness(1.02);
  }
}

.btn.primary.full-width {
  min-height: 46px;
}

.stop-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}

.stop-drag-handle {
  cursor: move;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

.btn-remove-stop {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
}

.btn-remove-stop:active { transform: translateY(1px); }
@media (hover:hover) {
  .btn-remove-stop:hover { background: rgba(239,68,68,0.08); }
}

.btn-add-stop {
  font-size: 0.85rem;
  color: #6b7280;
  padding: 8px 10px;
  border-radius: 10px;
  display: block;
  width: 100%;
  text-align: center;
}

/* Scoped rectangular buttons inside hero compact form to match shell style */
.compact-form .btn,
.compact-form .btn.primary,
.compact-form .btn.btn-secondary,
.compact-form .btn.danger {
  border-radius: 6px;
}
.compact-form #hero_get_quote.btn.primary,
.compact-form .quote-card-form button:not(.step-btn):not(.toggle-pill) {
  border-radius: 6px;
}
/* Make Add Stop subdued, full-width, same shape as CTA inside hero compact form */
.compact-form .btn.btn-secondary.btn-add-stop {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.55rem 1.3rem;
  font-weight: 600;
  display: block;
  width: 100%;
  border-radius: 10px;
}
/* Two-button layout for Stop actions when stops present */
.compact-form #stop_actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.compact-form #stop_actions.two {
  grid-template-columns: 1fr 1fr;
}

@media (hover:hover) {
  .btn-add-stop:hover { background: #f3f4f6; color: #111827; }
}

/* Make remove stop span full width within its action container */
.stop-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}
.btn-remove-stop {
  width: auto;
  justify-content: center;
}

@media (max-width: 520px) {
  #hero_quote_card .compact-cta {
    position: sticky;
    bottom: 0;
    background: transparent;
    backdrop-filter: none;
    padding-top: 10px;
    margin-bottom: 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure Google Places widget fills available width inside shell */
.compact-form .input-shell gmpx-place-autocomplete,
.compact-form .input-shell gmp-place-autocomplete,
.compact-form .input-shell gmp-place-autocomplete-element {
  display: block;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.compact-form .input-shell .sr-input {
  display: none !important;
}

.compact-form gmpx-place-autocomplete::part(input),
.compact-form gmp-place-autocomplete::part(input),
.compact-form gmp-place-autocomplete-element::part(input),
.compact-form gmp-basic-place-autocomplete::part(input) {
  width: 100% !important;
}

.compact-form gmp-basic-place-autocomplete::part(input) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.compact-form gmp-basic-place-autocomplete::part(input):focus,
.compact-form gmp-basic-place-autocomplete::part(input):focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* Consolidated Modal Layout */
#journey-modal .modal-header { padding: 6px 12px 4px }
.details-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.details-left, .details-right { min-height: 0 }

@media (min-width: 900px) {
  .details-layout {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: start;
  }
  #modal-map {
    height: clamp(280px, 44vh, 440px) !important;
    min-height: 0 !important;
    border-radius: 14px;
    overflow: hidden;
  }
}

@media (max-width: 899px) {
  /* Mobile: Map Top, Details Middle, Auth Bottom */
  #modal-map {
    height: 220px !important; /* Mobile map slightly reduced */
    border-radius: 12px;
    flex-shrink: 0; /* Prevent map from shrinking to 0 */
  }
  
  #journey-modal .modal-content {
     max-height: 95dvh; /* Use dynamic viewport height for better mobile support */
     height: 95dvh;     /* Force height to almost full screen */
     border-radius: 18px 18px 0 0; /* Rounded top only for bottom sheet feel */
     margin-bottom: 0;
  }
  
  #journey-modal .modal-body {
      padding: 10px 14px; /* Slightly reduced padding */
      padding-bottom: 24px; /* Extra bottom padding for safe area */
  }
}

.details-kv-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.details-kv-key {
  font-weight: 500;
  color: var(--muted);
}

.details-kv-val {
  font-weight: 600;
  text-align: right;
  max-width: 60%;
}

/* Auth Split Layout */
.auth-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 24px auto;
}

@media (max-width: 768px) {
  .auth-split-layout {
    grid-template-columns: 1fr;
  }
}

.auth-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.auth-card.primary {
  border-color: #bfdbfe;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
}

.auth-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  color: #111827;
}

.auth-card p {
  color: #4b5563;
  font-size: 0.95rem;
  margin-bottom: 24px;
  line-height: 1.5;
}

.auth-card .form-actions {
  margin-top: auto;
}

.auth-subtext {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 12px;
  text-align: center;
}

/* Header dynamic styles */
.auth-header {
  text-align: center;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.auth-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #111827;
}

.auth-header p {
  font-size: 1.1rem;
  color: #4b5563;
}

/* Collapsible inclusions */
#journey-modal details.included summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
}
#journey-modal details.included[open] summary {
  margin-bottom: 8px;
}

/* Admin enhancements */
.dashboard-panel .card + .card {
  margin-top: 16px;
}
.skeleton-card {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 8px;
}
.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
#booking_drawer {
  position: fixed;
  top: 64px;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: calc(100vh - 64px);
  overflow-y: auto;
  border-left: 1px solid #e5e7eb;
  box-shadow: -8px 0 24px rgba(0,0,0,0.06);
}
.drawer-inner {
  padding: 16px;
}
.logout-link {
  color: #ef4444;
}
.calendar-header { font-weight: 900; color: #111827; margin-bottom: 8px }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; color: #6b7280; font-weight: 700 }
.calendar-weekday { text-align: center }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px }
.calendar-cell { border: 1px solid #e5e7eb; border-radius: 12px; min-height: 120px; background: #fff; padding: 8px; display: grid; gap: 6px }
.calendar-cell.empty { background: transparent; border-color: transparent }
.calendar-date { font-weight: 800; color: #374151 }
.calendar-items { display: grid; gap: 6px }
.calendar-item { font-size: 0.85rem; color: #111827 }
.calendar-more { font-size: 0.8rem; color: #6b7280; font-weight: 700 }
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 50;
  }
  .mobile-nav button {
    border: 0;
    background: none;
    font-weight: 800;
  }
  body.page-admin { padding-bottom: 56px; }
  .like-table .row { display: block; }
  .like-table .row .cell { display: block; border: 0; padding: 6px 12px; }
  #bookings_table .row { padding: 12px; }
  #bookings_table .cell.actions { margin-top: 8px; }
  #bookings_table .badge { margin-bottom: 6px; }
  #today_actions .row, #today_agenda .row { display: block; padding: 12px; }
  #today_actions .cell, #today_agenda .cell { display: block; border: 0; padding: 4px 0; }
  #today_actions .row { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 10px; background: #fff; }
  #upcoming_calendar_card { display: none; }
  .admin-filters { position: sticky; top: 0; background: #fff; padding: 8px; z-index: 10; }
  .modal { width: 100% !important; max-height: 100vh !important; border-radius: 0; }
}
.agenda-day-card { border:1px solid #e6e8eb; border-radius:12px; padding:12px; background:#fbfbfd; margin-bottom:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.agenda-day-title { font-weight: 800; color: #111827; margin-bottom: 8px }

/* Admin button styling — scoped to admin only */
.page-admin .btn { border-radius:10px; font-weight:800; padding:0.6rem 1rem; border:1px solid #d1d5db; color:#0a0f1c; background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,0.06) }
.page-admin .btn.small {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}
.page-admin .btn.primary { border:none; color:#ffffff; background:linear-gradient(135deg, #1F7AE8, #0B4FCE); box-shadow:0 8px 20px rgba(31,122,232,0.35) }
.page-admin .btn.btn-secondary {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
}
.page-admin .btn.danger {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #fecaca;
}
.page-admin .btn:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.page-admin .btn:disabled,
.page-admin .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.months-strip {
  margin: 8px 0 16px;
}
.months-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.month-chip {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.mc-label {
  font-weight: 700;
  color: #111827;
}
.mc-count {
  font-weight: 800;
  color: #0b63ce;
}
.calendar-cell.status-all {
  border-left: 4px solid #10b981;
}
.calendar-cell.status-needs {
  border-left: 4px solid #f59e0b;
}
@media (max-width: 900px) {
  .months-list {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Shared Mobile Collapsible Card Pattern */
.mobile-card {
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.mobile-details {
  margin: 0;
}
.mobile-summary {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
}
.mobile-summary-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.mobile-ref {
  font-weight: 700;
  color: #111827;
}
.mobile-date {
  color: #6b7280;
  font-weight: 700;
}
.mobile-details-content {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

/* Rating Stars */
#rate_stars {
  gap: 6px;
}
#rate_stars .star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  color: #6b7280;
}
#rate_stars .star-btn.active {
  color: #f59e0b;
}
#rate_stars .star-btn:focus {
  outline: 2px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
}