/*
 * Car Detail Page — hand-written CSS (not Tailwind-dependent).
 *
 * public/css/tailwind.css is a pre-built static file (npm run build:css);
 * new utility classes not already present elsewhere in the compiled HTML
 * would not be styled without a rebuild. This page's markup is rendered
 * entirely by JS (see public/js/modules/car-detail/), so it gets its own
 * self-contained stylesheet instead, following the same pattern as
 * booking-redesign.css. Colors match the app's existing dark theme palette.
 */

.cd-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #0f172a, #1e293b);
  color: #e2e8f0;
}

/* Room for the mobile fixed fare bar below (.cd-fare-summary) so it doesn't
   sit on top of the last bit of scrollable content — sized for the bar's
   real *collapsed* height (~170px: card padding + window/total/excl lines
   + toggle + Continue button), not the old 96px guess, which was already
   too small even collapsed, let alone with the breakup rows expanded.
   Desktop has no fixed bar (sticky sidebar instead), so no reservation
   needed there. */
@media (max-width: 1023px) {
  .cd-page {
    padding-bottom: 190px;
  }
}

/*
 * .cd-sticky-header wraps .cd-topbar + .cd-nav so both stick together as one
 * block, positioned right below the app's own fixed header (index.html's
 * <header>, h-14/56px on mobile, sm:h-16/64px from the 640px breakpoint up —
 * the same breakpoint used below). .cd-topbar/.cd-nav get explicit
 * min-heights so the combined offset .cd-section's scroll-margin-top needs
 * is a known, exact number rather than a guess at rendered content height.
 */
.cd-sticky-header {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #334155;
}
@media (min-width: 640px) {
  .cd-sticky-header { top: 64px; }
}

/*
 * One merged row — back button, title and the section tabs all share a
 * single header band on screens wide enough to fit them (title is
 * flex-shrink:0 so it never gets squeezed; the nav takes the remaining
 * space and scrolls horizontally if it still doesn't quite fit). Below
 * the breakpoint there usually isn't room for a car title plus nine tabs
 * on one line without truncating something, so it falls back to the
 * original two-row stack instead.
 */
.cd-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  min-height: 56px;
  box-sizing: border-box;
}

.cd-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Matches the other booking-flow back button's design (index.html's
   #bookingPage header, .text-slate-400 hover:text-cyan-400 with no
   background box) — this one used to have a permanent bordered/filled
   pill, which read as a rectangular highlight the same way that other
   button's hover state used to, before it was stripped down to a plain
   color change. */
.cd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cd-back-btn:hover { color: #22d3ee; }
.cd-back-btn i { transition: transform 0.15s ease; }
.cd-back-btn:hover i { transform: translateX(-3px); }

.cd-car-title {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.cd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  box-sizing: border-box;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}
.cd-nav::-webkit-scrollbar { height: 4px; }

.cd-nav-item {
  /* These are real <button> elements, so custom.css's global
     button{min-height:44px (48px from 640px up); padding:0.75rem 1.5rem}
     rule applies unless overridden — same class-beats-tag specificity trap
     as the fuel-level/date-picker fields elsewhere in this app. Padding
     alone (below) wasn't enough to shrink these; min-height had to be
     reset too, otherwise it stayed floored at 44-48px regardless. */
  min-height: 0;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.cd-nav-item:hover { color: #e2e8f0; }
.cd-nav-item.cd-nav-active {
  color: #ffffff;
  background: linear-gradient(90deg, #0891b2, #2563eb);
  border-color: transparent;
}

/* Below this, a car title plus nine tabs can't share one legible row —
   stack back+title above a full-width, left-aligned, horizontally
   scrollable tab strip, matching the original layout. */
@media (max-width: 900px) {
  /* Padding trimmed from 12px/8px (top/bottom) — reported as a large
     empty gap above/below the back-button-and-title row. The row's own
     content height is mostly the back button's 44px touch target
     (custom.css's global (pointer:coarse) minimum, kept as-is —
     shrinking that would hurt tap accuracy, not just save a few px), so
     the real opportunity here was always the padding wrapped around it,
     not the touch target itself. */
  .cd-topbar {
    flex-wrap: wrap;
    padding: 8px 16px 4px;
    /* The base rule's gap:20px (desktop's horizontal space between the
       title and the tab strip on one shared row) doesn't stop applying
       just because flex-wrap has moved the tabs to a second row below —
       flexbox's gap is a row-gap AND column-gap together, so that same
       20px was also landing as unwanted VERTICAL space between the two
       wrapped rows, on top of .cd-nav's own margin-top/border below.
       This was the actual bulk of the still-reported "blank space around
       the title" — the padding trim above alone was never going to be
       enough while this was still adding 20px by itself. */
    gap: 0;
  }
  .cd-nav {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 1px solid #334155;
  }
  /* .cd-topbar-left's flex-shrink:0 (desktop default, kept as-is above
     900px) exists so the title never loses room to the nav on a single
     shared row — but below 900px .cd-nav already moves to its own full-
     width row, so .cd-topbar-left is effectively alone on the first row
     with nothing to protect its width against. A long car name (real
     ones run well past "Nissan Magnite" — trim/fuel/transmission
     variants easily exceed 30-40 characters) then had nowhere to go:
     flex-shrink:0 plus .cd-car-title's own white-space:nowrap forced the
     whole row, and with it the page, wider than the viewport — reported
     as the page "hanging"/overlapping on mobile with text only visible
     by zooming out. Reproduced directly (a real DOM measurement showed
     body scrollWidth 552px against a 375px viewport with a realistic
     long title) and confirmed fixed by the 3 rules below: the title now
     truncates with an ellipsis instead of pushing the row wider. */
  .cd-topbar-left {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }
  .cd-car-title {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

.cd-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px 0;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .cd-body {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.cd-main { min-width: 0; }

.cd-section {
  /* App fixed header (56px) + .cd-topbar (56px) + .cd-nav (48px) = 160px,
     so scrollIntoView()/anchor jumps land below the full sticky stack
     instead of partially hidden under it. */
  scroll-margin-top: 160px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  /* Every section here (FAQs, Reviews, Cancellation, Deposit,
     Inclusions/Exclusions, Location address, ...) renders admin/customer-
     entered text with no length limit — a single long unbroken token (a
     URL, a long code, a run-on word with no spaces) has no natural break
     point, so normal word-wrap leaves it as-is and it overflows the
     section horizontally instead of wrapping. That doesn't just look bad
     locally: <html> has overflow-x:hidden as the app's one global guard
     against horizontal scroll (body deliberately does NOT, see the
     comment above body{} in custom.css — that would turn body into an
     unintended scroll container and break position:sticky elements
     throughout the app), and some mobile browsers don't fully honor
     overflow-x:hidden on <html> alone when a descendant genuinely
     overflows — so on real devices this reachable overflow was making
     the whole page horizontally scrollable, which is what let the
     mobile fixed-position fare-summary bar (position:fixed, pinned to
     the true viewport, unaffected by document scroll) visually drift out
     of sync with the normal-flow content next to it once the page had
     been scrolled sideways even slightly (reported as the two sections
     "misaligned" on mobile). break-word as a fallback beyond normal
     wrapping is what actually stops a single long token from ever
     forcing the section wider than its box. */
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 640px) {
  .cd-section { scroll-margin-top: 168px; } /* app header grows to 64px at this breakpoint */
}

.cd-section-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-empty-state {
  color: #64748b;
  font-size: 13px;
  padding: 8px 0;
}

/* ── Fare summary — desktop right card / mobile fixed bottom bar ───────── */

.cd-fare-summary {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 18px;
}

@media (min-width: 1024px) {
  /* top must clear .cd-sticky-header's real height at this breakpoint:
     64px app header + 56px single-row .cd-topbar (the two-row wrapped
     layout only kicks in below 900px, well under this 1024px floor) =
     120px. The old 76px landed inside that header's own box, so the fare
     card's top ~44px scrolled in behind it (z-index:20) instead of
     settling below — looking like it wasn't "staying constant" so much as
     partially disappearing under the header as you scrolled. */
  .cd-fare-summary { position: sticky; top: 128px; max-height: calc(100vh - 148px); overflow-y: auto; }
}

@media (max-width: 1023px) {
  .cd-fare-summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    /* Safety net for short viewports: without this, a tall expanded
       breakup (see .cd-fare-breakup below, which is the real fix for the
       common case) plus a small phone screen could push the panel's top —
       and the price rows in it — off-screen above the viewport, with no
       way to scroll up to them since position:fixed elements don't get
       their own scrollbar by default. */
    max-height: 85vh;
    overflow-y: auto;
  }
  /* The expandable price-breakup rows are what actually make this panel
     tall — capping just this section (not the whole panel) means the
     rows scroll internally while the total/toggle/Continue button above
     and below it stay fully visible without the customer needing to
     scroll to find the button. */
  .cd-fare-breakup {
    max-height: 28vh;
    overflow-y: auto;
  }
}

.cd-fare-window {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.cd-fare-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.cd-fare-total {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(90deg, #22d3ee, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cd-fare-excl {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 12px;
}

.cd-fare-breakup-toggle {
  font-size: 12px;
  color: #22d3ee;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}

.cd-fare-breakup {
  border-top: 1px solid #334155;
  padding-top: 10px;
  margin-bottom: 12px;
}

.cd-fare-breakup-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #cbd5e1;
  padding: 3px 0;
}
.cd-fare-breakup-row.cd-fare-deposit-row { color: #34d399; }

.cd-pay-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.cd-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Photo gallery + lightbox ───────────────────────────────────────────── */

.cd-gallery-main {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #1e293b;
  display: flex;
  cursor: zoom-in;
}
.cd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.cd-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}
.cd-gallery-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.7;
}
.cd-gallery-thumb.cd-thumb-active { border-color: #06b6d4; opacity: 1; }
.cd-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.cd-lightbox-close, .cd-lightbox-prev, .cd-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); /* keeps the glyph legible with no backdrop, against bright photo areas */
  transition: color 0.15s ease;
}
.cd-lightbox-close:hover, .cd-lightbox-close:active,
.cd-lightbox-prev:hover, .cd-lightbox-prev:active,
.cd-lightbox-next:hover, .cd-lightbox-next:active {
  color: #22d3ee;
}
.cd-lightbox-close { top: 16px; right: 16px; }
.cd-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cd-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ── Km package cards ───────────────────────────────────────────────────── */

.cd-package-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
  margin-bottom: 10px;
}
.cd-package-card.cd-package-selected { border-color: #06b6d4; background: rgba(8, 145, 178, 0.12); }
.cd-package-title { font-weight: 700; color: #fff; font-size: 14px; }
.cd-package-desc { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.cd-package-note { font-size: 11px; color: #f59e0b; margin-top: 0; }
.cd-package-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 12px;
}
/* Late-return rate applies the same regardless of km package — shown once,
   right-aligned opposite the "can't be changed" note rather than repeated
   inside each package card. Orange (not the note's amber) so the two
   distinct policies stay visually distinguishable at a glance. */
.cd-package-late-rate {
  font-size: 11px;
  color: #fb923c;
  margin: 0 0 0 auto;
  text-align: right;
}

/* ── Reviews ─────────────────────────────────────────────────────────────── */

.cd-stars { color: #facc15; font-size: 13px; }
.cd-review-agg { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cd-review-avg { font-size: 32px; font-weight: 900; color: #fff; }
.cd-review-dist-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #94a3b8; }
.cd-review-dist-bar { flex: 1; height: 6px; border-radius: 4px; background: #334155; overflow: hidden; }
.cd-review-dist-fill { height: 100%; background: #facc15; }
.cd-review-item { border-top: 1px solid #334155; padding: 12px 0; }
.cd-review-item:first-child { border-top: none; padding-top: 0; }
.cd-review-name { font-weight: 700; color: #fff; font-size: 13px; }
.cd-review-date { font-size: 11px; color: #64748b; }
.cd-review-feedback { font-size: 13px; color: #cbd5e1; margin-top: 4px; }
.cd-load-more-btn {
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
}

/* ── Location ────────────────────────────────────────────────────────────── */

/* Leaflet's own z-index scheme runs up to 1000 for its zoom controls,
   sized for pages where the map is the dominant element. Here it's one
   section among several, below a sticky header — position:relative +
   isolation:isolate forces a brand-new stacking context, so Leaflet's
   internal z-index values can only ever be compared against each other,
   never against the sticky header/nav or other sections as the page
   scrolls, regardless of how leaflet.css's own containment behaves. */
.cd-map { width: 100%; height: 240px; border-radius: 12px; overflow: hidden; position: relative; isolation: isolate; }
.cd-map-address { font-size: 13px; color: #cbd5e1; margin-top: 10px; }
.cd-map-viewlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #22d3ee;
  margin-top: 4px;
  text-decoration: none;
}
.cd-map-viewlink:hover { color: #67e8f9; text-decoration: underline; }
.cd-map-viewlink i { font-size: 10px; }
.cd-map-distance { font-size: 12px; color: #22d3ee; margin-top: 4px; }

/* ── Features grid ───────────────────────────────────────────────────────── */

.cd-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.cd-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid #334155;
  font-size: 13px;
  color: #e2e8f0;
}
.cd-feature-item i { color: #22d3ee; }

/* ── Cancellation table ──────────────────────────────────────────────────── */

.cd-cancellation-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-cancellation-table th, .cd-cancellation-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #334155;
  color: #cbd5e1;
}
.cd-cancellation-table th { color: #94a3b8; font-weight: 600; font-size: 12px; }
.cd-cancellation-deposit-note { font-size: 12px; color: #34d399; margin-top: 10px; }

/* ── Inclusions/exclusions ──────────────────────────────────────────────── */

.cd-incl-excl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cd-incl-excl-grid { grid-template-columns: 1fr 1fr; } }
.cd-incl-excl-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cd-incl-excl-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #cbd5e1; }
.cd-incl-item i { color: #34d399; }
.cd-excl-item i { color: #f87171; }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */

.cd-faq-item { border-bottom: 1px solid #334155; }
.cd-faq-item:last-child { border-bottom: none; }
.cd-faq-question {
  width: 100%;
  text-align: left;
  padding: 12px 0;
  background: none;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  /* flex-start, not center: once the question text wraps to 2+ lines
     (below), centering the chevron against the whole wrapped block looks
     off — this keeps it level with the first line instead. */
  align-items: flex-start;
  gap: 10px;
}
/* This button was silently forced onto one line by the app-wide
   `button, .btn { white-space: nowrap }` reset (custom.css's shared
   button design system) - .cd-faq-question never overrode that
   property itself, and since white-space is inherited, the <span> here
   inherited nowrap from its <button> parent regardless of the
   min-width:0/overflow-wrap fix below. overflow-wrap only breaks WITHIN
   a word once wrapping is already happening, so with nowrap still in
   effect it had nothing to act on — a long question just kept running
   in a straight line and forced the row into horizontal scroll
   (reported, with a screenshot showing the chevron overlapping the
   question text instead of sitting clear of it). white-space:normal
   here is what actually restores normal multi-line wrapping; min-width:0
   and overflow-wrap:break-word stay as the fallback for a single
   long/unbroken word within that wrapped text. The chevron stays a
   fixed size (flex-shrink:0 below) and never shrinks — the text is what
   wraps. */
.cd-faq-question span {
  white-space: normal;
  min-width: 0;
  overflow-wrap: break-word;
}
.cd-faq-chevron {
  flex-shrink: 0;
}
.cd-faq-answer {
  font-size: 13px;
  color: #94a3b8;
  padding-bottom: 12px;
  display: none;
}
.cd-faq-item.cd-faq-open .cd-faq-answer { display: block; }
.cd-faq-item.cd-faq-open .cd-faq-chevron { transform: rotate(180deg); }
.cd-faq-chevron { transition: transform 0.2s; }