/* Trip header capsules (premium info bar) */
.trip-header-capsules {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0 10px;
  gap: 6px;
}
.trip-header-capsules .top-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trip-header-capsules .capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  font-size: 0.95rem;
  color: #E0E6ED;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}
.trip-header-capsules .capsule.price {
  color: #D4AF37;
  font-weight: 600;
  border-color: rgba(212, 175, 55, 0.5);
}
.trip-header-capsules .capsule.time { color: #F5F5F5; }
.trip-header-capsules .bottom-row { display: flex; justify-content: center; }
.trip-header-capsules .capsule.location {
  max-width: 90%;
  text-align: center;
  white-space: normal;
}
.trip-header-capsules .capsule .icon {
  opacity: 0.85;
  margin-right: 6px;
  display: inline-block;
}
@media (max-width: 400px) {
  .trip-header-capsules .top-row { justify-content: center; }
  .trip-header-capsules .capsule.location { max-width: 100%; }
}

/* Stop capsules (per-stop time + address), matching trip header style */
.stop-capsules {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 6px 0 8px;
  gap: 6px;
}
.stop-capsules .top-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stop-capsules .capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  font-size: 0.92rem;
  color: #E0E6ED;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}
.stop-capsules .capsule.time { color: #F5F5F5; }
.stop-capsules .capsule.location { max-width: 100%; text-align: left; white-space: normal; }
.stop-capsules .capsule .icon { opacity: 0.85; margin-right: 6px; display: inline-block; }

/* ===========================
   GREEKAWAY – STYLE SHEET
   =========================== */

/* Root theme variables (site-wide colors) */
:root {
  --site-gradient: linear-gradient(180deg, #1B2A3A 0%, #223345 100%);
  --site-bg-color: #1B2A3A;
  /* category accent RGB tuples for overlays */
  --sea-1: 0,170,255;
  --sea-2: 0,102,204;
  --mountain-1: 34,153,84;
  --mountain-2: 20,83,45;
  --culture-1: 243,156,18;
  --culture-2: 214,160,52;

  /* Shared step flow & surface tokens (used by step2 / step3 pages) */
  --panel-top: 5vh; /* vertical anchor for middle bands */
  --surface-band-top: rgba(84, 122, 176, 0.38);
  --surface-band-bot: rgba(54, 86, 136, 0.30);
  --surface-card-top: rgba(58, 78, 102, 0.98);
  --surface-card-bot: rgba(36, 50, 68, 0.98);

  /* 🎨 Greekaway Color Palette v1 (official) */
  /* Keep these as the canonical names used in discussions/docs */
  --color-background: var(--site-bg-color); /* κύριο φόντο */
  --color-background-gradient: var(--site-gradient);
  --color-logo-bg: #0E1520; /* φόντο λογότυπου & κουμπιών */
  --color-gold: #D4AF37; /* χρυσό λογότυπου & τίτλων */

  /* Global text tokens (default: dark mode → white) */
  --ga-text: #FFFFFF;
  --ga-heading: #FFFFFF;
}

/* =============================================
   Shared action buttons (Booking Step1 / Step2 / Step3)
   Centralized to eliminate duplicate declarations across
   booking.css, step2.css and step3.css. Keep page files
   only for size/font overrides. Do NOT change HTML.
   ============================================= */
#bookingOverlay #step1 .booking-actions .btn,
.s2-actions .btn,
.s3-actions .btn {
  background: #0E1520; /* unified dark navy */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 114px; /* smallest base; larger sizes override locally */
  box-shadow:
    0 10px 18px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.28);
  transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
  cursor: pointer;
}


/* -------- Βασικά -------- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--site-gradient);
  color: #ecf0f1;
  text-align: center;
  padding-bottom: 64px; /* reserve space matching global footer height */
  transition: background 0.4s, color 0.4s;
}

html, body { min-height: 100%; }

/* Background video moved to welcome.css */

/* Welcome hero layout moved to welcome.css */

@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply the same logo fade/zoom to specific tiles (e.g. Olympia) */
.logo-pop {
  opacity: 0;
  transform: scale(0.85);
  animation: logoFadeIn 1.5s ease forwards;
  animation-delay: 0.3s;
}

/* -------- Footer (Πόδια) -------- */
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #0d1a26;
  color: #ecf0f1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* unified height/padding will be enforced below; keep minimal here */
  padding: 8px 0;
  border-radius: 20px 20px 0 0;
  z-index: 12000; /* above overlay (which is z-index: 10000) */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
  /* baseline behavior; advanced mobile guards handled in admin UI CSS/JS */
}
footer a {
  color: #ecf0f1;
  text-decoration: none;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, color 0.3s ease;
}
footer a i {
  font-size: 1.5rem;
  margin-bottom: 3px;
  transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease;
  padding: 8px 10px;
  border-radius: 12px;
}

footer a:hover {
  color: #00aaff;
  transform: translateY(-3px);
}

footer a:hover i {
  background: #004080;
  color: #fff;
  transform: scale(1.1);
}

/* Κεντρικό κουμπί (Δες Εκδρομές / Κράτηση) */
footer a.central-btn i {
  background: #004080;
  color: #fff;
}
footer a.central-btn:hover i {
  background: #0066cc;
}

/* -------- Overlays (Παράθυρα) -------- */

.overlay {
  /* Full-viewport overlay; used for Booking, Help, Profile, etc. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* cover footer */
  background: #07121a; /* fully opaque dark background */
  color: #ecf0f1;
  z-index: 10000; /* above footer/nav */
  overflow-y: auto;
  overflow-x: clip; /* prevent tiny horizontal scroll/gutter without creating scrollbars */
  display: flex;
  align-items: flex-start;
  justify-content: center; /* center inner panel horizontally */
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlay .overlay-inner {
  /* Centered panel with no horizontal overflow and safe padding */
  width: 100%;
  max-width: 920px;
  margin: 4vh auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(24,38,52,1), rgba(14,22,30,1));
  padding: 1.2rem 1rem;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transform: translateY(-6px);
  transition: transform 220ms ease;
}

.overlay.active .overlay-inner { transform: translateY(0); }

.overlay h2 {
  color: #f9d65c;
  margin-bottom: 0.6rem;
}

/* About overlay: ensure vertical flow and readable typography */
#aboutOverlay .overlay-inner { display: block; }
#aboutOverlay h2 {
  margin-bottom: 0.8rem;
  line-height: 1.15;
  /* a bit smaller on mobile to avoid wrapping awkwardly */
  font-size: clamp(1.2rem, 2.6vw + 0.9rem, 1.8rem);
}
#aboutOverlay p {
  max-width: 46ch;
  line-height: 1.5;
}

/* Light-blue variant for the Step 2 overlay */
#step2Overlay.overlay { background: rgba(10, 24, 40, 0.66); }
#step2Overlay .overlay-inner {
  background: linear-gradient(180deg, #e9f6ff 0%, #dff1ff 100%);
  color: #09233a;
  border: 1px solid rgba(9,35,58,0.08);
}
#step2Overlay h2 { color: #0b5ea8; }
#step2Overlay .btn { background: #0b5ea8; color: #fff; }
#step2Overlay .btn.ghost { background: transparent; color: #0b5ea8; border: 1px solid rgba(11,94,168,0.3); }

/* Prevent 1–2px right-side seam on iOS Safari by avoiding fractional widths */
.overlay, .overlay .overlay-inner { max-width: 100vw; }
.overlay .overlay-inner { width: 100%; }
@media (min-width: 600px) {
  .overlay .overlay-inner { width: auto; max-width: 920px; }
}

.overlay button,
.overlay form button {
  margin-top: 1rem;
  background: #004080;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s;
}

.overlay button:hover,
.overlay form button:hover {
  background: #0066cc;
}

.overlay input,
.overlay textarea,
.overlay select {
  width: 100%;
  padding: 10px;
  margin: 0.4rem 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
}

/* Close button (top-right) */
.overlay .close-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2050;
}

.overlay .close-overlay:hover { background: rgba(255,255,255,0.04); }

/* Make the overlay-inner take most of the screen on mobile */
@media (max-width: 599px) {
  .overlay .overlay-inner {
    margin: 0;
    border-radius: 0;
    padding: 18px 16px 16px;
    min-height: calc(var(--vh, 1vh) * 100);
    /* Reserve space so any bottom action bar is always reachable */
    padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
  }
  /* Make About overlay text layout friendly on mobile */
  #aboutOverlay .overlay-inner { text-align: left; }
  #aboutOverlay p { margin-top: 0.2rem; }
  /* Avoid tiny right gutter by matching overlay padding to panel */
  /* Prevent dark left strip / horizontal shift on some mobile browsers by
     removing overlay side padding and using safe-area insets. This makes
     overlays full-bleed while keeping content inset from device edges. */
  .overlay {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    margin-left: 0; margin-right: 0;
  }
  .overlay .close-overlay { top: 10px; right: 10px; }
  /* ensure selects are inset from the screen edges on mobile for breathing room */
  .overlay select, .profile-select { width: 90vw; max-width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
  /* Phone-only: place the X close button closer to the right edge */
  #aiOverlay .ga-chat-close { right: 12px; }
  /* Phone-only: shift the chat bar content to the right WITHOUT changing its width.
     We increase left padding by a small shift and decrease right padding by the
     same amount so total inner width remains constant. */
  #aiOverlay .ga-inputbar {
    --ga-pad: clamp(16px, 5vw, 32px);
    --ga-shift: 12px; /* ~3 taps worth on small phones; adjustable */
    padding-left: calc(var(--ga-pad) + var(--ga-shift)) !important;
    padding-right: max(0px, calc(var(--ga-pad) - var(--ga-shift))) !important;
  }
  /* Ensure wrapper fills full available width; do not shrink or grow beyond 100% */
  #aiOverlay .ga-inputwrap { margin-left: 0 !important; width: 100% !important; box-sizing: border-box; }
  /* Send arrow stays pinned inside the input on the right */
  #aiOverlay .ga-send { right: 12px; }
}

/* Additional guard: ensure html/body have no unintended margin that can
   create a visible gap when overlays are fixed. */
html, body { margin: 0; padding: 0; }

/* New trip header line (price, time, place) - premium unified bar */
.trip-header-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.97rem;
  color: #E0E6ED;
  margin-top: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px; /* extra breathing room before description */
}
.trip-header-line .price {
  color: #D4AF37;
  font-weight: 600;
  font-size: 1.05rem;
}
.trip-header-line .icon { opacity: 0.85; margin-right: 4px; }
.trip-header-line span { display: flex; align-items: center; gap: 4px; }

/* Backward-compat: keep old class working if still present somewhere */
.trip-meta {
  font-size: 15px;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  opacity: 0.92;
  justify-content: center; /* center under title */
}
.trip-meta span { color: var(--ga-text, #fff); font-weight: 500; }
.trip-meta .price { color: var(--color-gold, #D4AF37); font-weight: 600; }

/* Mobile wrap for trip header line */
@media (max-width: 400px) {
  .trip-header-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Lock background scroll when any overlay is open (applies globally) */
body.overlay-open { overflow: hidden; touch-action: none; }
html.overlay-open { overflow: hidden; }

/* -------- Responsive -------- */
@media (min-width: 600px) {
  /* welcome-title responsive sizing moved to welcome.css */
  footer { padding: 0.8rem 0; }
}

@media (min-width: 1024px) {
  body { font-size: 1.05rem; }
  footer a i { font-size: 1.6rem; }
  /* welcome-logo desktop sizing moved to welcome.css */
}

/* ===============================
   AI Chat Overlay (full-screen black)
   =============================== */
/* Make AI overlay a native chat screen: black background, no panel edges */
#aiOverlay.overlay { background: rgba(11,21,32,0.96); z-index: 20000; }
#aiOverlay .close-overlay { display: none; }
#aiOverlay .overlay-inner {
  background: #000;
  color: #fff;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;   /* ensure full-width children on pages that override overlays */
  justify-content: flex-start !important; /* keep topbar at the very top */
  overflow-x: hidden; /* prevent right-side overflow */
}

/* Top bar */
#aiOverlay .ga-chat-topbar {
  position: relative; /* allow absolute-positioned close button */
  height: 56px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* title at left; close is absolutely positioned */
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#aiOverlay .ga-chat-title { font-weight: 600; font-size: 24px; }

/* Remove any assistant hint/suggestion text */
#aiOverlay .ga-suggestion { display: none !important; }
#aiOverlay [data-i18n="welcome.ask"] { display: none !important; }

/* Close button: rounded square with X */
#aiOverlay .ga-chat-close {
  position: absolute;
  top: 50%;
  right: calc(clamp(72px, 14vw, 192px) + env(safe-area-inset-right)); /* push it well left from the edge */
  transform: translateY(calc(-50% - 16px));
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: none !important;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  z-index: 2;
}
#aiOverlay .ga-chat-close:active { transform: translateY(calc(-50% - 16px)) scale(0.98); }

/* On tablets and desktops, keep close button at the far right */
@media (min-width: 600px) {
  #aiOverlay .ga-chat-topbar {
    padding-right: calc(120px + env(safe-area-inset-right));
  }
  #aiOverlay .ga-chat-close {
    position: static;
    right: auto; top: auto;
    transform: none;
  margin-top: -2px; /* one-click downward adjustment on larger screens */
    margin-left: auto; /* push to the right in the flex row */
    margin-right: 32px;
  }
  #aiOverlay .ga-chat-close:active { transform: scale(0.98); }
}

/* Chat log area */
#aiOverlay .ga-chat-log {
  flex: 1;
  overflow-y: auto;
  /* at least 5% side gutters to avoid edge overflow */
  padding: 12px clamp(16px, 5vw, 32px) 16px;
}

#aiOverlay .ga-msg { margin: 8px 0; display: flex; gap: 8px; }
#aiOverlay .ga-msg.user { justify-content: flex-end; }
#aiOverlay .ga-msg.assistant { justify-content: flex-start; }
#aiOverlay .ga-bubble {
  padding: 8px 10px;
  border-radius: 12px;
  max-width: 86%;
  white-space: pre-wrap;
}
#aiOverlay .ga-msg.user .ga-bubble { background: #0b4066; }
#aiOverlay .ga-msg.assistant .ga-bubble { background: #111827; border: 1px solid rgba(255,255,255,0.06); }

/* Suggestion chip above input */
#aiOverlay .ga-suggestion {
  color: #cbd5e1;
  font-size: 1.35rem; /* 50% larger */
  padding: 6px 12px;
  margin: 4px auto 8px; /* center horizontally */
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: inline-block;
}

/* Bottom input bar */
#aiOverlay .ga-inputbar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.06);
  /* move input a bit further down inside the bar, near the bottom edge */
  padding: 14px clamp(16px, 5vw, 32px) calc(8px + env(safe-area-inset-bottom)) !important;
  z-index: 5;
}
#aiOverlay .ga-form { display: flex; gap: 8px; }
#aiOverlay .ga-chat-log,
#aiOverlay .ga-inputbar {
  width: 100%;
  max-width: 820px; /* center content on wide screens */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#aiOverlay .ga-inputwrap { position: relative; flex: 1 1 auto; }
#aiOverlay .ga-inputwrap {
  max-width: 100%;
  width: 100%;
  margin: 8px 0 0;
  margin-left: 0; /* keep centered within the container on all devices (incl. iPad/iPad mini) */
  box-sizing: border-box;
}
#aiOverlay .ga-form input[type="text"] {
  width: 100%;
  padding: 10px 44px 10px 12px !important; /* slightly tighter right padding */
  border-radius: 16px; border: 1px solid #333945 !important;
  background: #0e1620 !important; color: #fff !important; font-size: 16px !important; /* iOS: >=16px prevents auto-zoom */
  box-sizing: border-box;
}
#aiOverlay .ga-form input[type="text"]::placeholder { color: #9ba6b2; }
#aiOverlay .ga-form input[type="text"]:focus { outline: 2px solid #334155; outline-offset: 0; }

/* Multiline chat input (textarea) — keep same visuals and wrapping */
#aiOverlay .ga-form textarea#gaChatInput {
  width: 100%;
  min-height: 42px; /* align with previous input height */
  max-height: min(40vh, 220px);
  resize: none; /* autosize via JS */
  overflow-y: hidden; /* becomes auto past max height */
  padding: 10px 44px 10px 12px !important; /* preserve space for send button */
  border-radius: 16px; border: 1px solid #333945 !important;
  background: #0e1620 !important; color: #fff !important; font-size: 16px !important;
  box-sizing: border-box;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
#aiOverlay .ga-form textarea#gaChatInput::placeholder { color: #9ba6b2; }
#aiOverlay .ga-form textarea#gaChatInput:focus { outline: 2px solid #334155; outline-offset: 0; }

/* Up-arrow send button inside the input */
#aiOverlay .ga-send {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 35px; height: 35px; /* +~3% hit area */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; /* square-ish */
  background: transparent !important;
  color: inherit;
  border: 1px solid transparent !important; box-shadow: none !important;
  cursor: pointer;
  font-size: 19px; /* +~3% */
}
/* slightly lift the button to align visually with text baseline */
#aiOverlay .ga-send { transform: translateY(calc(-50% - 19px)) !important; }
#aiOverlay .ga-send:active { transform: translateY(calc(-50% - 19px)) scale(0.98) !important; }
#aiOverlay .ga-form button {
  background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 12px; padding: 10px 14px;
}
#aiOverlay .ga-form button:hover { background: #334155; }

/* Theme-aware send button arrow & border colors */
@media (prefers-color-scheme: light) {
  #aiOverlay .ga-send {
    border-color: #000 !important;
    background: #000 !important;
    color: #fff !important; /* arrow */
  }
}
@media (prefers-color-scheme: dark) {
  #aiOverlay .ga-send {
    border-color: #fff !important;
    background: #fff !important;
    color: #000 !important; /* arrow */
  }
}

/* Global 3% magnification for the chat input bar text and controls */
#aiOverlay .ga-inputbar { font-size: 103%; }

/* Mobile-only: fine-tune AI overlay without changing widths */
@media (max-width: 599px) {
  /* X close button: move 2 clicks further left from the right edge */
  #aiOverlay .ga-chat-close { right: 60px; }
  /* Keep input wrapper full width; no negative nudge */
  #aiOverlay .ga-inputwrap { margin-left: 0; width: 100%; }
  /* Shift chat bar content half-click to the right while preserving inner width */
  #aiOverlay .ga-inputbar {
    --ga-pad: clamp(16px, 5vw, 32px);
    --ga-shift: 4px; /* half-click right */
    /* add to left padding and reduce right padding for a right shift */
    padding-left: calc(var(--ga-pad) + var(--ga-shift)) !important;
    padding-right: max(0px, calc(var(--ga-pad) - var(--ga-shift))) !important;
  }
}

/* Hide global footer while AI chat overlay is open */
#aiOverlay.active ~ footer { display: none !important; }
/* Defensive: ensure AI overlay remains above any fixed elements from booking/profile pages */
body.overlay-open #aiOverlay { z-index: 20000 !important; }


/* -------- Mobile gutters & content max-widths -------- */
/* Avoid edge-to-edge content on small screens */
@media (max-width: 599px) {
  /* give main content a slightly larger horizontal padding for mobile */
  #categories-container, #trips-container, main, #trip-section {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* make trip cards respect the container padding and add subtle elevation */

  /* iOS/Safari: help stabilize text sizing and gestures inside AI overlay */
  #aiOverlay { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
  .trip-card {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    /* visuals moved to cards.css (.ga-card) */
  }

  .trip-card h3 { font-size: 1.05rem; }

  /* media elements (map, videos) shouldn't touch edges */
  #map, .video-wrap {
    width: calc(100% - 32px);
    margin: 0 auto 1rem auto;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
  }

  body.trip-page #trip-main,
  body[data-view="trip"] #trip-main,
  body.trip-page #trip-section,
  body[data-view="trip"] #trip-section {
    padding-left: 0;
    padding-right: 0;
  }

  body.trip-page #map,
  body[data-view="trip"] #map,
  body.trip-page .video-wrap,
  body[data-view="trip"] .video-wrap {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* slightly larger footer icons on mobile for tap targets */
  footer a i { font-size: 1.8rem; padding: 10px 12px; }
}

/* Back button for trip pages */
.back-btn {
  position: fixed;
  top: 14px;
  left: 12px;
  background: rgba(13,26,38,0.85);
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 1500;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.back-btn i { font-size: 1.1rem; }
.back-btn:hover { transform: translateY(-2px); background: rgba(0,64,128,0.9); }

/* 3D variant for a more tactile back button (use .back-btn.three-d) */
.back-btn.three-d {
  position: relative;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(180deg,#0b2a3a 0%, #02324a 40%, #012231 100%);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(2,14,20,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.back-btn.three-d i { margin-right: 6px; }
.back-btn.three-d::after{
  /* subtle bottom lip to enhance 3D */
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: -6px; height: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
  border-radius: 6px;
  filter: blur(2px);
  z-index: -1;
}
.back-btn.three-d:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px rgba(2,14,20,0.65); }
.back-btn.three-d:active{ transform: translateY(1px); box-shadow: 0 6px 12px rgba(2,14,20,0.5); }


@media (min-width: 1024px) {
  .back-btn { top: 20px; left: 20px; }
}

/* ===============================
   ΚΑΤΗΓΟΡΙΕΣ (TRIPS.HTML)
   =============================== */

/* Categories container: use responsive grid so items flow into columns */
#categories-container {
  margin: 0;
  font-family: Arial, sans-serif;
  display: grid;
  /* small app-icons by default (mobile) */
  grid-template-columns: repeat(auto-fit, 80px);
  gap: 14px;
  padding: 36px 12px 100px;
  justify-content: center;
  justify-items: center;
}
/* RTL support when Hebrew or other RTL language is selected */
.rtl {
  direction: rtl !important;
}

/* language selector styling: flags + text appear in the option text (emoji) */
#langSelect { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.08); padding: 4px 8px; border-radius: 8px; height: 34px; }
#langSelect option { padding: 2px 6px; color: #000; }
/* Visibility: show on all pages (can be positioned by page markup) */
/* previously hidden on non-welcome pages; now always visible */
/* #langSelect display rules removed to allow universal visibility */
/* Prevent the footer items from reversing order when document dir is rtl.
   Keep text alignment and reading order inside footer left-to-right while
   the rest of the page can be RTL. This preserves the footer layout for
   icons and consistent UX. */
body.rtl footer {
  direction: ltr; /* keep layout left-to-right */
}

/* Global footer base (PWA-specific adjustments live in /css/pwa-fixes.css) */
footer { height: 64px; padding: 8px 0; }

/* Mobile stability: reduce rubber-band overscroll that can "pull" the footer */
@media (max-width: 599px) {
  html, body { overscroll-behavior-y: none; overscroll-behavior: contain; }
  body { touch-action: manipulation; }
}


/* ===== Category page panel (as in screenshot) ===== */
/* only apply the navy panel when we're on the category listing (not the trip page) */
body[data-category][data-view="category"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}

/* Emergency overrides: ensure no container paints a white background over the page
   for the culture category listing. These are high-specificity and use !important
   to neutralize inline or other author styles that may be hiding the body bg. */
/* Targeted culture listing overrides moved to higher-specificity selectors
   (keeps the same effect as the previous !important rules but using
   attribute selector specificity instead). This avoids inline styles and
   many !important usages while keeping the look identical. */
html[data-category="culture"][data-view="category"],
body[data-category="culture"][data-view="category"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
}

/* Ensure main containers remain transparent on the culture listing by
   targeting the same attribute combination and the container element.
   This is sufficiently specific so !important is unnecessary. */
html[data-category="culture"][data-view="category"] #trips-container,
body[data-category="culture"][data-view="category"] #trips-container,
html[data-category="culture"][data-view="category"] main,
body[data-category="culture"][data-view="category"] main,
html[data-category="culture"][data-view="category"] #categories-container,
body[data-category="culture"][data-view="category"] #categories-container {
  background: transparent;
}

/* Make sure the H2 is visible on the culture listing without !important */
html[data-category="culture"][data-view="category"] h2,
body[data-category="culture"][data-view="category"] h2 {
  color: #f1f5f8;
}

/* (booking-specific enhancements moved to booking.css) */


/* If we're viewing an individual trip in the culture category, keep the
   deep navy backdrop for the trip page; specificity above avoids !important. */
html[data-category="culture"][data-view="trip"],
body[data-category="culture"][data-view="trip"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}

/* For sea trips, use a nautical navy background on the trip page so the
   layout reads as part of the 'sea' theme (darker than the listing gradient). */
html[data-category="sea"][data-view="trip"],
body[data-category="sea"][data-view="trip"] {
  /* use the exact site gradient used on the home page */
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}

/* Explicit navy override class for special trips (e.g. olympia) */
body.navy-bg, html.navy-bg {
  /* Explicit navy override but use unified site gradient for consistency */
  background-color: var(--site-bg-color) !important;
  background-image: var(--site-gradient) !important;
  color: #ecf0f1 !important;
}

/* Page title */
body[data-category] h2 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 18px;
  font-size: 2rem;
  color: #f1f5f8;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

/* The central panel containing tiles */
#trips-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 36px 12px 120px;
}

/* tiles look */
#trips-container .trip-card {
  width: 140px;
  height: 140px;
  /* visuals moved to cards.css (.ga-card) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

/* Disabled legacy trip-card overlay + hover (now unified in theme.css) */

#trips-container .trip-card h3 {
  /* color handled by cards.css; keep spacing only */
  margin: 0;
  padding: 6px;
  font-size: 1rem;
  z-index: 2;
}


/* Trip card visible styling for category pages */
.trip-card {
  /* visuals moved to cards.css (.ga-card) */
  padding: 14px;
  margin: 10px auto;
  max-width: 760px;
  text-align: left;
}

.trip-card h3 { margin: 0; }

/* Make trip cards inside the category list behave like app-icon tiles */
#trips-container .trip-card {
  /* default mobile-size to match category icons */
  width: 80px;
  height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* visuals moved to cards.css (.ga-card) */
}

#trips-container .trip-card h3 {
  font-size: 0.85rem;
  padding: 6px;
  line-height: 1.1;
}

@media (max-width: 599px) {
  /* True fullscreen overlay on mobile */
  .overlay { bottom: 0; width: 100vw; height: calc(var(--vh, 1vh) * 100); }
  .overlay .overlay-inner { margin: 0; border-radius: 0; padding: 1rem; min-height: calc(var(--vh, 1vh) * 100); }
  .overlay .close-overlay { top: 10px; right: 10px; }
}

@media (min-width: 400px) and (max-width: 767px) {
  #trips-container .trip-card { width: 96px; height: 96px; }
  #trips-container .trip-card h3 { font-size: 0.8rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #trips-container .trip-card { width: 128px; height: 128px; }
  #trips-container .trip-card h3 { font-size: 0.9rem; }
}

@media (min-width: 1024px) {
  #trips-container .trip-card { width: 160px; height: 160px; }
  #trips-container .trip-card h3 { font-size: 1rem; }
}

/* Κουμπί Κατηγορίας */
.category-btn {
  position: relative;
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  display: block;
  /* visuals moved to cards.css (.ga-card) */
}

/* Cinematic entrance for main category tiles (zoom + fade + deblur) */
@keyframes cinematicEntrance {
  0% {
    transform: scale(0.92);
    opacity: 0;
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

.category-btn.cinematic {
  will-change: transform, opacity, filter;
  transform: scale(0.92);
  opacity: 0;
  filter: blur(6px);
  animation: cinematicEntrance 820ms cubic-bezier(.22,.9,.32,1) both;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .category-btn.cinematic {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Legacy category overlay/hover removed (handled in theme.css) */

/* subtle border removed (handled by cards.css) */

/* Per-category color themes */
/* Force gold overlay for each category variant as well (no per-category tint) */
.category-btn.cat-sea::before,
.category-btn.cat-mountain::before,
.category-btn.cat-culture::before {
  background: linear-gradient(135deg, rgba(212,175,55,0.95), rgba(184,134,11,0.85));
}

/* per-category hover shadows removed (handled by cards.css) */

/* Η εικόνα γεμίζει όλο το τετράγωνο */
.category-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.35s ease, filter 0.3s ease;
  position: relative;
  z-index: 0;
}

/* Category card title (Sea, Mountain, Culture) — gold by default and above overlay */
/* label color/weight unified in cards.css */
.category-btn .cat-label {
  position: relative; /* keep in flow but enable z-index */
  z-index: 3;        /* above ::before overlay (z-index:2) */
  mix-blend-mode: normal;
  -webkit-font-smoothing: antialiased; /* lighter on macOS */
  text-rendering: optimizeLegibility;
}
/* Extra specificity per category to defeat any inherited accent colors */
/* per-category label color removed (handled by cards.css) */

/* Slightly lighten Greek to offset heavier glyph rendering */
html[lang="el"] .category-btn .cat-label { font-weight: 500; }
/* Disabled legacy label hover brightness; theme.css controls hover visuals */
/* .category-btn:hover .cat-label { filter: brightness(1.08); } */

/* Disabled legacy trip-card overlay + hover (unified in theme.css) */

/* Trip card category accents */
/* per-category trip-card overlays removed (handled by theme/cards) */

/* Disabled per-category hover shadows for trip cards (theme.css unifies) */

/* Breakpoints: give app-like fixed sizes per device class */
/* Fixed app-like sizes per breakpoint */
@media (max-width: 399px) {
  /* very small phones */
  #categories-container { grid-template-columns: repeat(auto-fit, 64px); gap: 10px; }
  .category-btn { width: 64px; height: 64px; }
}

@media (min-width: 400px) and (max-width: 767px) {
  /* large phones */
  #categories-container { grid-template-columns: repeat(auto-fit, 96px); gap: 12px; }
  .category-btn { width: 96px; height: 96px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets */
  #categories-container { grid-template-columns: repeat(auto-fit, 128px); gap: 18px; }
  .category-btn { width: 128px; height: 128px; }
}

@media (min-width: 1024px) {
  /* desktop */
  #categories-container { grid-template-columns: repeat(auto-fit, 160px); gap: 24px; }
  .category-btn { width: 160px; height: 160px; }
}

/* Per-page background based on category */
body[data-category="sea"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}
body[data-category="mountain"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}
body[data-category="culture"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
  color: #ecf0f1;
}

/* ensure html also inherits background (some browsers) */
html[data-category="sea"], body[data-category="sea"] { background-attachment: fixed; }
html[data-category="mountain"], body[data-category="mountain"] { background-attachment: fixed; }
html[data-category="culture"], body[data-category="culture"] { background-attachment: fixed; }

/* Zoom εφέ */
.category-btn:hover img {
  transform: scale(1.1);
  filter: brightness(1.15);
}

/* ===============================
   Automatic Light Theme Overrides
   ===============================
   Honor user's system preference. Default remains the existing dark theme
   and gradient. In light mode we flip page/background surfaces to light
   while keeping gradients and gold untouched.
*/
@media (prefers-color-scheme: light) {
  /* Flip text tokens for light mode */
  :root { --ga-text: #1B2A3A; --ga-heading: #1B2A3A; }

  /* Base document background only (don't force text so headings/titles remain styled) */
  html, body {
    background: #FFF9EB !important; /* new lighter vanilla tone */
    transition: background 0.4s ease-in-out, background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  }

  /* Pages that explicitly force the site gradient/dark navy by attributes */
  html[data-category],
  body[data-category],
  html[data-category][data-view="category"],
  body[data-category][data-view="category"],
  html[data-category][data-view="trip"],
  body[data-category][data-view="trip"],
  html[data-view="category"],
  body[data-view="category"],
  html[data-view="trip"],
  body[data-view="trip"],
  html.navy-bg,
  body.navy-bg {
    background: #FFF9EB !important;
    background-image: none !important; /* neutralize dark gradient in light mode */
    background-color: #FFF9EB !important;
    transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
  }

  /* Normal content text: apply token color + slight weight bump for readability.
     Excludes headings/titles/logos/buttons/navigation. */
  :where(main, .overlay .overlay-inner, #trips-container, #trip-section, .card, .video-card, .booking-form, .booking-step, #aiOverlay, #aboutOverlay, #checkoutOverlay) :is(p, li, small, label, span, em, strong) {
    color: var(--ga-text) !important;
    transition: color 0.4s ease-in-out;
  }
  :where(main, .overlay .overlay-inner, #trips-container, #trip-section, .card, .video-card, .booking-form, .booking-step, #aiOverlay, #aboutOverlay, #checkoutOverlay) :is(p, li, small, label, span) {
    font-weight: 600;
  }

  /* Overlays and modals — flip to light surfaces and dark text */
  .overlay {
    background: rgba(255, 249, 235, 0.92) !important; /* soften backdrop to match new light bg */
    color: var(--ga-text) !important;
    transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
  }
  .overlay .overlay-inner {
    background: #FFF9EB !important; /* unify light panel tone */
    color: var(--ga-text) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* subtle depth */
    border: 1px solid rgba(0,0,0,0.04) !important;
    transition: background 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }
  /* Overlay close button readable on light */
  .overlay .close-overlay { color: rgba(27,42,58,0.9) !important; }

  /* Booking overlay container: ensure light backdrop even if dark by default */
  #bookingOverlay.overlay { background: #FFF9EB !important; }

  /* AI Assistant overlay — invert fully to light */
  #aiOverlay.overlay,
  #aiOverlay .overlay-inner { background: #FFF9EB !important; color: var(--ga-text) !important; }
  #aiOverlay .ga-chat-topbar { background: #FFF9EB !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
  #aiOverlay .ga-inputbar { background: #FFF9EB !important; border-top: 1px solid rgba(0,0,0,0.06) !important; }
  #aiOverlay .ga-form input[type="text"],
  #aiOverlay .ga-form textarea#gaChatInput {
    background: #FFF9EB !important;
    color: var(--ga-text) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  #aiOverlay .ga-send { color: #fff !important; }
  #aiOverlay .ga-msg.user .ga-bubble {
    background: #FFF9EB !important;
    color: var(--ga-text) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }
  #aiOverlay .ga-msg.assistant .ga-bubble {
    background: #FFF9EB !important;
    color: var(--ga-text) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }
  #aiOverlay .ga-suggestion {
    background: #FFF9EB !important;
    color: var(--ga-text) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* AI close buttons: solid black bg, white X */
  #aiOverlay .ga-chat-close,
  #aiOverlay .close-overlay {
    border-radius: 8px !important;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
  }

  /* Preserve gold text for trip cards and category labels in light mode */
  /* label/title colors unified in cards.css */

  /* Welcome subtitle light-mode override moved to welcome.css */

  /* Traveler profile (Step 2) trip title in light mode */
  .step2-header .trip-title { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Step 3 (traveler profile final step) — trip title */
  .step3-header .trip-title { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Category listing title (e.g., Εκδρομές Βουνού) */
  body[data-category] h2 { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Select Category page title */
  header h1 { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Checkout page title */
  .checkout-header .title-wrap h1 { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Trip details page title and description */
  #trip-title { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }
  #trip-description { color: #1B2A3A !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

  /* Language selector: navy text/border in light mode */
  #langSelect { color: #1B2A3A !important; border: 1px solid #1B2A3A !important; background: transparent !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08); }
  #langSelect option { color: #1B2A3A; }

  /* Language selector remains visible in light mode as well */

  /* Subtle text shadow for dark navy text across common content (exclude buttons and gold text) */
  :where(h1,h2,h3,h4,h5,h6,p,li,small,label,span,.title,.price-top,.stop-title, body[data-category] h2, #trip-title, #trip-description, header h1):not(.cat-label):not(.welcome-title):not(.overlay h2):not(button):not(.btn):not(.central-btn):not(#trips-container .trip-card h3) {
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  /* Slightly lighten very dark buttons (#0E1520 -> #1F2F40) */
  /* Booking primary action buttons */
  #bookingOverlay #step1 .booking-actions .btn { background: #1F2F40 !important; }
}

/* Explicit dark mode reinforcement for AI overlay to fully mask background */
@media (prefers-color-scheme: dark) {
  #aiOverlay.overlay,
  #aiOverlay .overlay-inner,
  #aiOverlay .ga-inputbar,
  #aiOverlay .ga-chat-topbar { background: rgba(7, 18, 26, 0.98) !important; }

  /* AI close buttons: solid white bg, black X */
  #aiOverlay .ga-chat-close,
  #aiOverlay .close-overlay {
    border-radius: 8px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
  }

  /* Send button: solid white bg, black arrow */
  #aiOverlay .ga-send {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
  }
}

/* Εμφάνιση με zoom */
@keyframes appearZoom {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* has-bg-video neutralization moved to welcome.css */

/* --------------------------------------------------------------------------
  .overlay .close-overlay { color: var(--ga-text) !important; }
   If a browser or another stylesheet is overriding the background, these
   rules force the per-category backgrounds to apply. Kept minimal and
   specific to reduce risk. Remove !important later if not needed.
   -------------------------------------------------------------------------- */
/* High-priority per-category backgrounds — keep these via attribute selectors
   and specific html/body targeting. These are the canonical per-category
   backgrounds and intentionally omit !important because selector specificity
   is sufficient in normal pages. */
html[data-category="sea"], body[data-category="sea"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
}
html[data-category="mountain"], body[data-category="mountain"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
}
html[data-category="culture"], body[data-category="culture"] {
  background-image: var(--site-gradient);
  background-color: var(--site-bg-color);
}

/* culture-specific trip-card visuals removed (unified by cards.css/theme.css) */

/* Disabled legacy logo-pop hover/white glow (theme.css unifies visuals) */

/* persistent subtle highlight on the trip page when navigated from a logo-pop button */
body.highlight-trip {
  /* very subtle inset highlight so background gradient remains visible */
  box-shadow: inset 0 0 60px rgba(255,255,255,0.02);
}

/* per-category hover/active transforms removed */

/* Pop-in animation when entering a category: small grow then settle */
@keyframes popIn {
  0% { transform: scale(0.92); opacity: 0.88; }
  75% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* legacy pop-in animations removed (theme.css handles cinematic entrance) */



/* Ensure category overlays are above images and visible */
.category-btn::before {
  z-index: 2;
}
.category-btn img {
  z-index: 0; /* explicit: image stays below overlay */
}

/* Trip-card overlays: ensure the pseudo-element sits above card content */
.trip-card { position: relative; }
#trips-container .trip-card::before {
  z-index: 1;
}

/* -----------------------------
   Responsive layout for trip pages
   - Mobile: full-width video (100% of viewport)
   - Tablet: boxed centered content (max-width ~960px)
   - Desktop: two-column layout (content + sticky map)
   ----------------------------- */
.trip-section {
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px 48px;
}

/* Ensure trip content doesn't paint a solid background that hides body background */
.trip-section, .trip-section .card, #stops, #stops .trip-stop {
  background: transparent !important;
}

.video-box iframe,
.video-box video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

/* Experience panel shown after stops (appears under last video on mobile,
   and stays within the stops column on desktop where videos are left). */
.trip-experience {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(12,22,30,0.65);
  border-radius: 12px;
  color: #f1f5f8;
  text-align: left;
}

@media (min-width: 1024px) {
  /* On desktop, ensure experience panel remains in the stops column (right side
     already contains the map). We keep it visually grouped with stops. */
  .trip-experience { margin-top: 0.8rem; }
}

/* tablet and up: center content in a box */
@media (max-width: 599px) {
  /* keep overlay content comfortable on small screens */
  .overlay .overlay-inner { padding: 12px; min-height: calc(calc(var(--vh, 1vh) * 100) - var(--footer-offset, 80px)); }
}
@media (min-width: 1024px) {
  .trip-section {
    max-width: 1100px; /* slightly wider on desktop */
    margin: 0 auto 64px;
    padding: 0 20px 64px;
    box-sizing: border-box;
  }

  #map {
    height: 340px; /* larger map on desktop */
    position: relative;
    top: auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }

  /* ensure stops column doesn't exceed available width */
  #stops { max-width: 820px; margin: 0 auto; }

  /* Match video height to the map height on desktop for consistent visuals */
  .video-box { height: 340px; }
  .video-box iframe, .video-box video { height: 340px; width: 100%; object-fit: cover; }
}

/* Floating focus route button */
/* focus-route-btn removed per user request */

/* Stripe Elements: make card inputs visible and high-contrast */
.StripeElement,
.StripeElement iframe {
  background: #ffffff !important;
  color: #111 !important;
  padding: 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cfcfcf !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
}
.StripeElement--focus { box-shadow: 0 0 0 4px rgba(0,102,204,0.12) !important; }
.StripeElement--invalid { border-color: #ff6b6b !important; }

/* Card elements layout for checkout */
.card-elements-wrapper { display:block; margin-bottom:1.25rem; }
.card-field-label { display:block; color: #dfe9f2; font-size:0.85rem; margin-bottom:6px; text-align:left; }
.card-field-label.small { font-size:0.8rem; }
.stripe-mount { margin-bottom:10px; }
.card-number-mount { min-height:48px; }
.card-expiry-mount, .card-cvc-mount { min-height:44px; }

/* Make the result box text dark so it contrasts with light success/error backgrounds */
#result, .result { color: #111 !important; font-weight: 600; }

/* Reduce width of name/email inputs on checkout so they are not full-bleed */
#checkoutForm input[type="text"],
#checkoutForm input[type="email"] {
  width: 70%;            /* relative to form container */
  max-width: 560px;      /* cap at a comfortable reading width */
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* On small screens keep them full width for usability */
@media (max-width: 599px) {
  #checkoutForm input[type="text"],
  #checkoutForm input[type="email"] {
    width: 100%;
    max-width: none;
  }
}