/* ============================================================================
   Digitour — cruises.css
   Cruise search + results + enquiry. Built on base.css's existing tokens
   (--g700/--gold/--line/--muted/etc.) and .field/.input/.btn/.modal/.badge
   classes rather than inventing a parallel style system, so this page reads
   as the same site as Egypt/Maldives/packages, not a bolted-on demo.
   ========================================================================== */

/* ── Search form ─────────────────────────────────────────────────────────── */
/* The form itself is now the shared .search widget (search.css) — nothing
   cruise-specific to style there. Just the vendor tabs above it and the
   region-coverage hint below it are page-specific. */

.cruisevendor__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.cruisevendor__tab {
  font-size: .8125rem; font-weight: 600; color: #fff;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,255,255,.34);
  display: inline-flex; align-items: center;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.cruisevendor__tab:hover { background: rgba(255,255,255,.16); }
.cruisevendor__tab.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.cruisesearch__hint {
  color: var(--on-dark-2);
  font-size: .8125rem;
  margin-top: 10px;
}

/* ── Results ─────────────────────────────────────────────────────────────── */
/* Deliberately tight — a wide date window can return a dozen+ itinerary
   groups, each with several sail dates, and this is what a customer has to
   scroll through to compare them. Every padding/gap/font-size below is the
   smallest that stays legible, not the site's normal generous spacing
   (that's .section's job at the page level, untouched here — this is
   card-internal only). The route map is the biggest single space cost by
   far (a bare <img> at native size, often 400px+ tall) — capped below. */
.cruisegrid {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.cruisecard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 14px 16px;
}

.cruisecard__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}

.cruisecard__meta {
  color: var(--muted);
  margin-top: 2px;
  font-size: .8125rem;
}

.cruisecard__price {
  text-align: right;
  white-space: nowrap;
}

.cruisecard__price strong {
  display: block;
  font-size: 1.125rem;
  color: var(--g700);
}

.cruisecard__departures {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cruisedep {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.cruisedep:first-child {
  border-top: 0;
  padding-top: 0;
}

.cruisedep__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: .875rem;
  margin-bottom: 8px;
}

@media (min-width: 720px) {
  .cruisedep__row {
    grid-template-columns: 1.3fr .8fr 1.6fr .8fr;
    align-items: center;
  }
}

.cruisedep__date { font-weight: 600; color: var(--ink); }
.cruisedep__price { color: var(--g700); font-weight: 700; text-align: right; }

.cruisedep__itinerary-title {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 6px 0 5px;
}

/* Map + table stacked (mobile) or side by side, map left / table right
   (desktop) — see the blade comment at this wrapper's markup. */
.cruisedep__itinerary-body { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (min-width: 720px) {
  .cruisedep__itinerary-body { flex-direction: row; align-items: flex-start; gap: 16px; }
  .cruisedep__itinerary-body .cruisedep__map { flex: 0 0 260px; margin-bottom: 0; }
  .cruisedep__itinerary-body .cruisedep__itinerary-scroll { flex: 1 1 auto; min-width: 0; }
}

.cruisedep__map {
  margin-bottom: 8px;
  /* Native map images run 400px+ tall — this is a route overview, not a
     photo, so it stays legible shrunk down. object-fit: contain (not
     cover) so nothing at the edges gets cropped, just scaled. */
  max-height: 220px;
  display: flex;
  justify-content: center;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cruisedep__map img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  object-fit: contain;
}

.cruisedep__itinerary-scroll {
  overflow-x: auto;
}

.cruise-itinerary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}

.cruise-itinerary-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.cruise-itinerary-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.cruisedep__toggle {
  margin-top: 8px;
}

.cruisedep__fares {
  margin-top: 10px;
}

.cruisedep__fares-note {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 10px;
  font-style: italic;
}

/* ── Cabin & package options — a card list, not a table (see the docblock
   in cruise-fare-table.blade.php: this only ever renders inside the
   640px-capped fares popup, and a 5-column table never fit that without
   a horizontal scrollbar hiding the price/button off-screen). Every
   piece of text wraps normally instead, so the popup never needs to
   scroll sideways at any viewport width. ─────────────────────────────── */
.farelist { display: flex; flex-direction: column; }
.farelist__row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 0;
}
/* Confirmed live 2026-09-09 — the drinks filter's row.hidden = true
   (cruises.js's dtApplyCruiseDrinksFilterToFares()) was silently not
   hiding anything: an author-stylesheet display:flex beats the browser's
   own [hidden]{display:none} UA rule regardless of specificity, so a row
   with display:flex set anywhere in author CSS needs this exact override
   or [hidden] does nothing. search.css already has the identical fix for
   .search__field[hidden] — same root cause, missed here originally. */
.farelist__row[hidden] { display: none; }
.farelist__row:first-child { padding-top: 0; }
.farelist__row:last-child { padding-bottom: 0; }
/* Was a 1px border-bottom on every row — replaced with an actual <hr>
   between rows (see cruise-fare-table.blade.php) for a clearer, more
   visible break between cabin/package options, per direct feedback that
   the old divider read as too subtle. */
.farelist__hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.farelist__info { min-width: 0; }
.farelist__cabin { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.farelist__inclusions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.farelist__photo-btn {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden; flex-shrink: 0; max-width: 220px; width: 100%;
}
.farelist__photo { display: block; width: 100%; border-radius: 10px; object-fit: cover; transition: transform var(--dur-2) ease; }
.farelist__photo-btn:hover .farelist__photo { transform: scale(1.04); }
.farelist__action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.farelist__price { display: flex; flex-direction: column; }
.farelist__enquire { flex-shrink: 0; white-space: nowrap; }

.cruise-fare-code { font-weight: 700; color: var(--ink); }
.cruise-fare-type { font-size: .75rem; color: var(--muted); }
.cruise-fare-price { color: var(--g700); font-weight: 700; white-space: nowrap; }
.cruise-fare-price .price-amd { display: block; font-weight: 400; margin-left: 0; }

/* Inclusion badges (drink packages etc. — CruiseService::classifyIncludedService()) */
.inclusion-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; color: var(--g700); background: var(--g100);
  border-radius: 999px; padding: 2px 10px;
}

.farelist__price-breakdown { font-size: .75rem; color: var(--g700); margin-top: 6px; font-weight: 600; }

/* Listing-card room-types summary (CruiseService::roomTypesSummary()) */
.cruisedep__room-types { color: var(--muted); margin: 4px 0 0; }


/* Search-form extras (nights range + drinks) — a second .search__fields
   row inside the SAME .search__panel, reusing .search__field/
   .search__label/.search__divider from search.css verbatim (confirmed
   live those classes carry no JS wiring search.js would misfire on —
   only specific data-search-* attributes trigger its popover logic) so
   these two look identical to the 4 fields above them, not a visually
   disconnected strip. Kept in this cruise-only stylesheet rather than
   search.css itself since Egypt/Maldives reuse that file verbatim and
   don't have these two fields at all. */
.search__fields--extra { margin-top: 4px; }
@media (min-width: 1024px) {
  /* .search__panel is grid-template-columns:1fr auto at this width (see
     search.css) — without this, grid auto-placement would try to slot
     this second .search__fields into the "auto" column meant for the
     submit button instead of dropping to its own full-width row (exact
     same fix .search__error already needs and has, right below this). */
  .search__fields--extra { grid-column: 1 / -1; margin-top: 0; }
}

.search__field--drinks { cursor: pointer; }
.search-drinks-value { display: flex; align-items: center; gap: 8px; }
.search-drinks-value input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.search-drinks-check {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line);
  flex-shrink: 0; position: relative; transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.search-drinks-value input:checked ~ .search-drinks-check {
  background: var(--g700); border-color: var(--g700);
}
.search-drinks-value input:checked ~ .search-drinks-check::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.search-drinks-value input:focus-visible ~ .search-drinks-check { outline: 2px solid var(--g600); outline-offset: 2px; }

/* Nights popover body — .cal__grid/.cal__cell/.cal__day (search.css) used
   VERBATIM, not a lookalike copy, so the range-fill/selected/preview
   visuals (data-in-range/data-edge/data-selected/data-preview) are
   pixel-identical to the real date calendar for free — see
   cruises.js's pickNight()/renderNightsGrid() for the logic that sets
   those same attributes. Only the hint line below the grid is
   nights-specific. */
.nights-pop__hint2 { font-size: .8125rem; color: var(--muted); margin-top: 14px; text-align: center; }

/* Cabin-photo lightbox (cruises.js) — a plain full-viewport overlay, not
   .pop/.sheet-backdrop (those are built for form content with a head/
   body/foot; a single image needs none of that). Sits above the fares
   modal (both position:fixed; this one is later in the DOM). */
.lightbox {
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) + 1);
  background: rgba(6, 28, 19, .88);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background-color var(--dur-1) ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 719px) {
  .cruisedep__row > span:not(.cruisedep__date):not(.cruisedep__price) { color: var(--muted); font-size: .8125rem; }
}

/* ── Cabin & package options popup (was expanded in place — see
   cruises.js's "Per-departure fare grid" and cruise-fares-modal.blade.php) ── */
.faresmodal .modal__box { max-width: 640px; }