/* Shared quote-widget CSS (extracted from index.php's own <style> block,
   confirmed 2026-09-23) — the interactive quote-card, its fields,
   autocomplete dropdown, calendar/time pickers, passenger counter, vehicle
   class cards and price/options panel. Loaded on every page that embeds
   inc/quote_widget.php (index.php and destination pages alike), alongside
   the always-loaded css/site_chrome.css (login-modal, field-clearable,
   quote-contact icons, etc. — not duplicated here). */
  /* ===== QUICK QUOTE BOX (visual placeholder — real backend to be wired next) ===== */
  .quote-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 28px;
  }
  .opt-tag {
    color: var(--grey);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }
  .route-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
  }
  .route-swap {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--grey-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--grey);
    cursor: pointer;
    transition: all .15s;
    font-size: 15px;
    flex-shrink: 0;
  }
  .route-swap:hover { background: var(--orange); color: white; transform: rotate(180deg); }

  .field {
    position: relative;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px 8px 44px;
    transition: border-color .15s, box-shadow .15s;
    background: white;
  }
  .route-row .field, #outboundField, #returnField, #paxField { padding-right: 40px; }
  .field:focus-within {
    border-color: var(--blue-light);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
  }
  .field.invalid { border-color: #ef4444; }
  .field.invalid:focus-within { box-shadow: 0 0 0 4px rgba(239,68,68,0.1); }
  .field.invalid label { display: none; }
  /* Same-origin-and-destination check: just the red border, unlike
     .invalid this doesn't hide the label or show the "select from the
     list" badge, since that message doesn't apply here (confirmed
     2026-09-21). */
  .field.route-error { border-color: #ef4444; }
  .field.route-error:focus-within { box-shadow: 0 0 0 4px rgba(239,68,68,0.1); }
  .field-error-badge {
    display: none;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ef4444;
    margin-bottom: 2px;
  }
  .field.invalid .field-error-badge { display: block; }
  .field-error-badge .err-short { display: none; }
  @media (max-width: 420px) {
    .field-error-badge .err-full { display: none; }
    .field-error-badge .err-short { display: inline; }
  }
  .field-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--orange);
    display: flex;
    align-items: center;
  }
  .field-icon.filled { color: var(--ink); }
  .field label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grey);
    margin-bottom: 2px;
  }
  .field input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    font-family: inherit;
  }
  .field input::placeholder { color: #cbd5e1; font-weight: 500; }
  #paxDisplay { cursor: pointer; }
  #paxDisplay:hover { color: var(--orange); }
  .dt-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .dt-part { cursor: pointer; white-space: nowrap; }
  .dt-part:hover { color: var(--orange); }
  .dt-part.empty { color: #cbd5e1; font-weight: 500; }
  .dt-sep { color: #cbd5e1; }

  .quote-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  .quote-details-row.visible {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 16px;
    overflow: visible;
  }
  .quote-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .quote-special-request {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  .quote-special-request.open {
    max-height: 340px;
    opacity: 1;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
  }
  .quote-special-request-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .quote-special-request-input, .quote-special-request-textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 8px;
    outline: none;
  }
  .quote-special-request-input:focus, .quote-special-request-textarea:focus { border-color: var(--blue-light); }
  .quote-special-request-textarea { resize: none; }
  .quote-special-request-send {
    width: 100%;
    background: var(--orange);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
  }
  .quote-special-request-send:hover:not(:disabled) { background: var(--orange-dark); }
  .quote-special-request-send:disabled { background: #fdd3a8; cursor: not-allowed; }
  .btn-quote {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: white;
    border: none;
    padding: 15px 34px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    /* When .quote-submit-row wraps to two lines on narrow screens, this
       keeps the button flush right on its own line — matching the desktop
       layout — instead of space-between's default of sitting flush left
       when it's the only thing on that line (confirmed 2026-09-20). */
    margin-left: auto;
  }
  .btn-quote:hover:not(:disabled) { background: var(--ink); }
  .btn-book {
    display: block;
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: white;
    border: none;
    padding: 15px 34px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
  }
  .btn-book:hover { background: var(--ink); }
  .btn-quote:disabled { opacity: .55; cursor: not-allowed; }

  .quote-price-result {
    display: none;
    margin-top: 16px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--grey-light);
  }
  .quote-price-result.show { display: block; }
  /* .hero p sets a white color, a 600px max-width and centering margin —
     none of which belong to a message box nested inside the (light) quote
     card, so every property it could leak is reset here explicitly. */
  .quote-price-result p { max-width: none; margin: 0; line-height: 1.5; }
  .quote-price-result.error { background: #fef2f2; font-size: 14px; }
  .quote-price-result.error p { color: #b91c1c; }
  .quote-price-result.unavailable { background: #eff6ff; font-size: 14px; }
  .quote-price-result.unavailable p { text-align: center; }
  .unavailable-headline { color: var(--orange-dark); font-weight: 700; }
  .unavailable-subtext { color: var(--ink); }
  /* 595px is where the longer sentence ("We'll get back to...") itself
     actually fits on one line at this font size — 481px was too low a
     guess: between 481 and ~594px the phrase was kept nowrap but didn't
     actually fit, overflowing past the card's edge instead of wrapping
     (confirmed 2026-09-21 from real measurements at 480/535/596px). Below
     595px, .unavailable-phrase falls back to normal wrapping (no rule at
     all here means the default white-space: normal applies), so it breaks
     cleanly word-by-word instead of overflowing or cutting a word in half. */
  @media (min-width: 595px) {
    .unavailable-phrase { white-space: nowrap; }
  }
  .quote-price-total { font-size: 26px; font-weight: 800; color: var(--ink); }
  .quote-price-total span { font-size: 13px; font-weight: 600; color: var(--grey); margin-left: 4px; }
  .quote-price-legs { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
  .quote-price-leg { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--grey); }
  .quote-price-leg strong { color: var(--ink); font-weight: 700; }
  .quote-price-debug {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--grey);
    font-family: 'SF Mono', 'Consolas', monospace;
  }
  .quote-price-debug strong { color: var(--ink); }

  .quote-legs-summary { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--grey); margin-bottom: 14px; }
  .quote-legs-summary strong { color: var(--ink); }
  .quote-summary-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .quote-summary-meta { gap: 16px; flex-wrap: wrap; margin-top: 2px; }
  .quote-summary-meta span { display: flex; align-items: center; gap: 5px; }
  /* Kept as one unbreakable phrase — "(up to 2h40m High traffic day)" never
     splits mid-sentence — but otherwise flows normally: it stays on the
     same line as "Duration 1h20m" whenever there's room, and only wraps to
     its own line when the row is too narrow to fit both (confirmed
     2026-09-20 — a forced flex-basis:100% here was wrong, it always broke
     the line even on wide screens). */
  .quote-peak-note { color: var(--orange-dark); font-weight: 700; cursor: pointer; white-space: nowrap; }
  .quote-summary-duration { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .quote-summary-icon { display: inline-flex; color: var(--grey); flex-shrink: 0; }
  .quote-summary-icon svg { width: 18px; height: 18px; display: block; }
  .quote-summary-route { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
  .quote-summary-route-icon { display: inline-flex; color: var(--orange); flex-shrink: 0; }
  .quote-summary-route-icon svg { width: 22px; height: 22px; display: block; }

  .quote-promo-banner {
    border-radius: 12px; padding: 10px 16px; font-size: 13.5px; margin-bottom: 10px; text-align: center;
    background: #ecfdf5; color: #047857;
  }
  .quote-classes { display: flex; flex-direction: column; gap: 10px; }
  .quote-class-card {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 4px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .quote-class-card:hover { border-color: #cbd5e1; }
  .quote-class-card:has(input:checked) { border-color: var(--blue-light); background: #e0f2fe; }
  .quote-class-card input { position: absolute; opacity: 0; pointer-events: none; }
  .quote-class-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
  .quote-class-bottom { display: flex; align-items: center; gap: 14px; }
  .quote-class-img { width: 90px; height: 60px; flex-shrink: 0; }
  .quote-class-img img { width: 100%; height: 100%; object-fit: contain; }
  .quote-class-info { flex: 1; min-width: 0; }
  .quote-class-name { font-size: 14px; font-weight: 500; color: var(--ink); }
  .quote-class-name strong { font-weight: 700; }
  .quote-class-desc { font-size: 12px; color: var(--grey); margin-top: 1px; line-height: 1.35; }
  .quote-class-price-wrap { text-align: right; }
  .quote-class-price { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
  .quote-class-allinclusive { font-size: 11px; font-weight: 600; color: var(--grey); margin-top: 1px; }
  .quote-class-radio {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #cbd5e1; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .quote-class-card:has(input:checked) .quote-class-radio { border-color: var(--blue-light); }
  .quote-class-card:has(input:checked) .quote-class-radio::after {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-light);
  }
  /* On narrow screens the name can wrap to 2-3 lines — instead of squeezing
     the price/radio into that same shrinking row (where they end up
     overlapping the wrapped text), stack the card into 3 rows: photo,
     then text, then price + checkbox (confirmed 2026-09-20). */
  @media (max-width: 500px) {
    .quote-class-card { flex-wrap: wrap; row-gap: 8px; }
    .quote-class-main { flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 6px; }
    .quote-class-bottom { flex: 1 1 100%; justify-content: flex-end; }
  }

  .quote-options { margin-top: 4px; }
  /* ===== SUGGESTIONS DROPDOWN (mock) ===== */
  .suggest-box {
    /* Always exactly the width of the field it belongs to, whether the
       fields sit side by side (desktop) or stacked (mobile) — never a
       fixed pixel width, so it can't spill past the page edge either. */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 30px -8px rgba(15,23,42,0.2);
    border: 1px solid #e2e8f0;
    z-index: 20;
    display: none;
    flex-direction: column;
    /* Tall enough that the "Popular places" grid (fixed at a handful of
       airports/resorts/cities per column) never needs its own internal
       scroll at the current, larger suggest-group-item font size and line
       height (confirmed 2026-09-24) — capped by viewport height only as a
       safety net for very short screens, and for a long typed-search
       result list, where .suggest-scroll's own overflow-y:auto still
       kicks in as before. */
    max-height: min(85vh, 560px);
    overflow: hidden;
  }
  .suggest-box.show { display: flex; }
  .suggest-scroll {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
    min-height: 0;
  }
  .suggest-empty {
    padding: 14px 12px;
    font-size: 13.5px;
    color: var(--grey);
    text-align: center;
  }
  .suggest-heading {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grey);
  }
  .suggest-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 4px;
    padding: 2px 4px;
  }
  .suggest-group-col { display: flex; flex-direction: column; min-width: 0; }
  .suggest-group-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--orange);
    padding: 4px 8px 3px;
  }
  .suggest-group-label svg { width: 13px; height: 13px; flex-shrink: 0; }
  .suggest-group-item {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    line-height: 20px;
  }
  .suggest-group-item:hover { background: var(--grey-light); }
  .suggest-hint {
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
    padding: 8px 12px;
    font-size: 11.5px;
    color: var(--grey);
    text-align: center;
    background: white;
  }
  .suggest-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
  }
  .suggest-item:hover { background: var(--grey-light); }
  .suggest-item i { color: var(--orange); width: 18px; flex-shrink: 0; text-align: center; font-size: 15px; margin-top: 1px; }
  .suggest-item-text { display: flex; flex-direction: column; min-width: 0; }
  .suggest-main { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .suggest-sub { font-size: 12px; color: var(--grey); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ===== CALENDAR (date pickers) ===== */
  .cal-popup {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: min(480px, 80vh);
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px -4px rgba(15,23,42,0.15), 0 24px 48px -12px rgba(15,23,42,0.35), 0 0 0 1px rgba(15,23,42,0.04);
    border: 1px solid #e2e8f0;
    z-index: 50;
    overflow: hidden;
  }
  .cal-popup.show { display: flex; }
  .cal-popup.flip-up { top: auto; bottom: calc(100% + 6px); }
  .cal-scroll { overflow-y: auto; padding: 14px; flex: 1; min-height: 0; }
  .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .cal-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
  .cal-nav {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--grey);
    cursor: pointer;
  }
  .cal-nav:hover { background: var(--grey-light); color: var(--ink); }
  .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--grey);
    margin-bottom: 4px;
  }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .cal-day {
    aspect-ratio: 1;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .cal-day.empty { cursor: default; }
  .cal-day:hover:not(.past):not(.empty) { background: var(--grey-light); }
  .cal-day.today { border: 1.5px solid var(--orange); }
  .cal-day.selected { background: var(--orange); color: white; }
  .cal-day.past { color: #cbd5e1; cursor: not-allowed; }
  .cal-time-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 2px;
  }
  .cal-time-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--grey);
  }
  .cal-time-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
  }
  .cal-time-group-label {
    color: var(--orange);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 10px 0 6px;
  }
  .cal-time-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }
  .cal-time-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
  }
  .cal-time-btn:hover { background: var(--grey-light); }
  .cal-time-btn.selected { background: var(--blue-light); color: white; }

  /* ===== PASSENGERS ===== */
  .pax-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
  .pax-row[hidden] { display: none; }
  .pax-row + .pax-row { border-top: 1px solid #f1f5f9; }
  .pax-row-title { font-size: 14px; font-weight: 700; color: var(--ink); }
  .pax-row-title-suffix { font-weight: 400; color: var(--grey); white-space: nowrap; }
  .quote-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
  .quote-tip-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--orange); display: inline-flex; align-items: center; }
  .quote-tip-btn svg { width: 16px; height: 16px; display: block; }
  .quote-tip-title { color: var(--orange); }
  .quote-tip-bubble {
    position: absolute; top: 100%; left: 0; margin-top: 6px;
    background: var(--ink); color: white; font-size: 12px; font-weight: 500;
    padding: 8px 10px; border-radius: 8px; width: 220px; line-height: 1.4;
    box-shadow: var(--shadow); z-index: 20;
  }
  .quote-tip-bubble[hidden] { display: none; }
  .pax-row-sub { font-size: 12px; color: var(--grey); margin-top: 1px; }
  .pax-stepper { display: flex; align-items: center; gap: 12px; }
  .pax-step-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: white;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
  }
  .pax-step-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
  .pax-step-btn:disabled { opacity: .35; cursor: not-allowed; }
  .pax-count { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; color: var(--ink); }

@media (max-width: 860px) {
  .quote-details-row { grid-template-columns: 1fr; }
  .route-row { grid-template-columns: 1fr; }
  .route-swap { justify-self: center; transform: rotate(90deg); }
}