/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — phase 1
   Loaded AFTER styles.css so every rule wins. Adds:
   • SF-Pro inspired typography ramp + bigger headlines.
   • Translucent sticky nav with frosted-glass on scroll.
   • Generous section vertical rhythm (Apple-style breathing room).
   • Scroll-reveal entrance animation hook (.fx-reveal).
   • 3D mouse-tilt hook (.fx-tilt) on cards / images.
   • Parallax on hero background (.fx-parallax).
   • Card depth shadows + smooth float on hover.
   ════════════════════════════════════════════════════════════════ */

/* ── Typography ramp ── */
:root {
  --apple-font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --apple-display: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
}
html, body {
  font-family: var(--apple-font) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Heading scale — display weights, very tight tracking, Apple-style */
h1, .ms-hero-h1, .ms-hero-brandmark {
  font-family: var(--apple-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
}
h2 {
  font-family: var(--apple-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(38px, 5.5vw, 80px) !important;
  line-height: 1.05 !important;
}
h3 {
  font-family: var(--apple-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  line-height: 1.15 !important;
}
em, h1 em, h2 em, h3 em {
  font-style: normal !important; /* Apple uses weight, not italic */
  color: var(--brand) !important;
  font-weight: inherit !important;
}

/* Brand wordmark in the hero — bigger but constrained so it never
   overflows the viewport. Apple uses ~clamp(56,8vw,96) for product
   titles; we go slightly larger because "MarrakechStory" is the name. */
.ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark {
  font-size: clamp(48px, 8.5vw, 112px) !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  white-space: nowrap;
}
.ms-hero-content-centered .ms-hero-h1 {
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: #fff !important;
}
.ms-hero-content-centered { max-width: 92vw !important; }

/* Eyebrow / kicker label — small caps, terracotta, tracked wide */
.eyebrow, .ms-hero-eyebrow,
[class*='eyebrow'] {
  font-family: var(--apple-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--brand) !important;
  opacity: 0.95 !important;
}
.ms-hero-eyebrow {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  backdrop-filter: saturate(180%) blur(8px) !important;
}

/* Lead / body copy — slightly larger, looser leading */
.ms-hero-lead, .lead, p.lead {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.85);
}

/* ── Sticky translucent nav · Apple frosted-glass on scroll ── */
.nav {
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease, padding 0.3s ease !important;
}
.nav.scrolled {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
}
.nav.over-hero {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.18) 50%,
    transparent 100%) !important;
  backdrop-filter: none !important;
}
.nav .nav-links a {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}
.nav .nav-links a:hover { opacity: 0.65; }

/* ── Section rhythm — Apple-grade breathing room ── */
.section,
section.section,
.itin-section,
.reiseplaner-section,
.catalog,
#contact {
  padding-top: clamp(80px, 10vh, 160px) !important;
  padding-bottom: clamp(80px, 10vh, 160px) !important;
}

/* ── Big section headlines centred Apple-style ── */
.section-head, .catalog .section-head, .itin-section .section-head {
  margin-bottom: clamp(48px, 7vh, 96px) !important;
}

/* ── Card depth — Apple uses very soft, large shadows ── */
.cat-card,
.itin-form,
.ag-card,
.dur-pkg-card,
.opt-card,
.rental-card {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.04) !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease !important;
}
.cat-card:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.06),
    0 24px 64px rgba(0,0,0,0.10) !important;
  transform: translateY(-6px) !important;
}

/* ── 3D mouse-tilt hook (.fx-tilt) ──
   JS sets --tx and --ty in degrees on mouse-move. */
.fx-tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px)
             rotateX(var(--ty, 0deg))
             rotateY(var(--tx, 0deg))
             translateZ(0);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-tilt:hover { transition: transform 0.1s linear; }
.fx-tilt > * { transform: translateZ(20px); }

/* ── Parallax hook (.fx-parallax) ──
   JS sets --py in px on scroll. */
.fx-parallax {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ── Scroll-reveal entrance (.fx-reveal) ──
   JS adds .is-in when the element enters the viewport. */
.fx-reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.985);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* CRITICAL: must end at `transform: none`, NOT an identity transform.
   Any transform on a parent breaks `position: fixed` for descendants
   (such as modals), making them position relative to the section
   instead of the viewport. */
.fx-reveal.is-in { opacity: 1; transform: none; }

/* Staggered children when the container has .fx-reveal-stagger */
.fx-reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-reveal-stagger.is-in > * { opacity: 1; transform: none; }
.fx-reveal-stagger.is-in > *:nth-child(1)  { transition-delay: 0.00s; }
.fx-reveal-stagger.is-in > *:nth-child(2)  { transition-delay: 0.05s; }
.fx-reveal-stagger.is-in > *:nth-child(3)  { transition-delay: 0.10s; }
.fx-reveal-stagger.is-in > *:nth-child(4)  { transition-delay: 0.15s; }
.fx-reveal-stagger.is-in > *:nth-child(5)  { transition-delay: 0.20s; }
.fx-reveal-stagger.is-in > *:nth-child(6)  { transition-delay: 0.25s; }
.fx-reveal-stagger.is-in > *:nth-child(7)  { transition-delay: 0.30s; }
.fx-reveal-stagger.is-in > *:nth-child(8)  { transition-delay: 0.35s; }

/* ── Hero overlay — slightly stronger so the typography pops ── */
.ms-slide-grad-1 { background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.20)) !important; }
.ms-slide-grad-2 { background: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0.45)) !important; }
.ms-slide-vignette { background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.30)) !important; }

/* Hero CTA — Apple "Buy" / "Learn more" pattern */
.ms-hero-cta {
  font-size: 15px !important;
  padding: 13px 26px !important;
  border-radius: 980px !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
  text-transform: none !important;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}
.ms-hero-cta.btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}
.ms-hero-cta.btn-primary:hover { background: var(--brand-deep) !important; transform: scale(1.02); }
.ms-hero-cta-alt {
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.ms-hero-cta-alt:hover { background: rgba(255,255,255,0.18) !important; transform: scale(1.02); }

/* ── Page background — slightly warm off-white ── */
body, html { background: #fbfbfd !important; }
.section:nth-of-type(odd), .catalog, .reiseplaner-section { background: #fbfbfd !important; }
.section:nth-of-type(even), .itin-section { background: #f5f5f7 !important; }

/* Sharp Apple-style buttons with soft hover */
.btn, .btn-primary, .btn-outline, .btn-ink {
  border-radius: 980px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
.btn-primary:hover { transform: scale(1.025); }
.btn-outline:hover { transform: scale(1.025); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fx-tilt, .fx-parallax, .fx-reveal, .fx-reveal-stagger > * {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 2 additions
   • Apple-style cards (radius, depth, hover lift)
   • Combined nav pill for language + currency
   • Unified tab-bar between Itineraries and Catalog
   ════════════════════════════════════════════════════════════════ */

/* ── Cards reimagined the Apple way ────────────────────────────────
   • Generous radius — Apple uses 18px on product cards.
   • Soft layered shadow that lifts on hover.
   • Image fills the top half, content sits in a clean white well.
   • Title in display-weight sans; metadata smaller, restrained.
   • Action row uses Apple's "Learn more →" pattern instead of two
     fighting buttons. */
.cat-card,
.ag-card,
.dur-pkg-card {
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.05) !important;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease !important;
}
.cat-card:hover,
.ag-card:hover,
.dur-pkg-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.06),
    0 28px 64px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* Images get the generous Apple curve too */
.cat-card .cat-img,
.cat-card img,
.ag-card-img,
.ag-card img {
  border-radius: 0 !important;
}
.cat-card .cat-img { aspect-ratio: 5 / 4; }
.cat-card img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
.cat-card:hover img { transform: scale(1.05) !important; }

/* Card titles + meta — Apple sizing */
.cat-card .cat-title,
.ag-card-title,
.dur-pkg-label {
  font-family: var(--apple-display) !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: #1d1d1f !important;
  margin: 4px 0 !important;
}
.cat-card .cat-desc,
.ag-card-tagline {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #6e6e73 !important;
}
.cat-card .cat-area,
.cat-card .cat-duration {
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: #6e6e73 !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.cat-card .cat-rating strong { font-weight: 600 !important; color: #1d1d1f; }
.cat-card .cat-foot { border-top: 1px solid #f5f5f7 !important; padding-top: 12px !important; }
.cat-card .cat-arrow {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  border: none !important;
  width: 32px; height: 32px;
  border-radius: 50% !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.cat-card:hover .cat-arrow {
  background: #1d1d1f !important;
  color: #fff !important;
  transform: scale(1.1);
}

/* Catalog modal — Apple sheet radius + soft white surface */
.cat-modal {
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25) !important;
}
.cat-modal-close {
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  width: 34px !important; height: 34px !important;
}
.cat-modal-title { font-family: var(--apple-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }

/* Modal-style cards stay sharp on Apple too */
.itin-form, .itin-preview {
  border-radius: 22px !important;
  overflow: hidden;
}

/* ── Tab bars — unify Itineraries & Catalog ────────────────────────
   Both sections now use the SAME big Apple "segmented control" style
   so they read as one design language. */
.cat-tabs-v2 {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 18px !important;
  /* hug the tabs — no trailing empty space in the pill */
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cat-tabs-v2 .cat-tab-v2 {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  padding: 10px 18px !important;
  font-family: var(--apple-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  border-radius: 999px !important;
  color: #424245 !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}
.cat-tabs-v2 .cat-tab-v2:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
}
.cat-tabs-v2 .cat-tab-v2.active {
  background: #1d1d1f !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}
.cat-tabs-v2 .cat-tab-v2 .count {
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: rgba(0,0,0,0.08) !important;
  color: #6e6e73 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
}
.cat-tabs-v2 .cat-tab-v2.active .count {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
/* Override the older itineraries-specific squeeze */
#itineraries .cat-tabs-v2 .cat-tab-v2,
#catalog    .cat-tabs-v2 .cat-tab-v2 {
  padding: 10px 18px !important;
  font-size: 14px !important;
}
@media (max-width: 720px) {
  .cat-tabs-v2 .cat-tab-v2 { padding: 8px 14px !important; font-size: 12.5px !important; }
}
/* Special tabs in itineraries — same pill, dashed brand outline */
.reiseplaner-special-tab {
  background: rgba(225, 67, 42, 0.08) !important;
  color: var(--brand) !important;
  border: none !important;
}
.reiseplaner-special-tab:hover { background: rgba(225, 67, 42, 0.15) !important; }

/* ── Combined language + currency popover (Apple-style chip) ────── */
.ms-lc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  border: none;
  font-family: var(--apple-font);
  font-size: 14px;
  line-height: 1;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}
.ms-lc-pill .ms-lc-flag { font-size: 15px; }
.nav.over-hero .ms-lc-pill {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.ms-lc-pill:hover { background: rgba(0,0,0,0.10); }
.nav.over-hero .ms-lc-pill:hover { background: rgba(255,255,255,0.22); }
.ms-lc-flag { font-size: 14px; line-height: 1; }
.ms-lc-sep { opacity: 0.45; padding: 0 2px; }

.ms-lc-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding: 10px;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.ms-lc-col-head {
  font-family: var(--apple-font);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6e6e73;
  font-weight: 600;
  padding: 8px 10px 4px;
  grid-column: span 1;
}
.ms-lc-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease;
}
/* When the column only has flags, wrap them in a tighter row */
.ms-lc-menu > div:has(.flags-only) {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ms-lc-opt:hover { background: #f5f5f7; }
.ms-lc-opt.is-active { background: rgba(225, 67, 42, 0.10); color: var(--brand); }
.ms-lc-opt .flag { font-size: 14px; }
.ms-lc-opt .check { margin-left: auto; opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 3
   Deep application across every interactive element:
     • Form fields, steppers, calendar, day nav, taste chips
     • Auth / quick-book / tweak modals
     • Floating action buttons (chat, instagram, weather, AI)
     • Mobile compaction — widgets become small circles
   ════════════════════════════════════════════════════════════════ */

/* ── Form panels (itinerary builder) ── */
.itin-form, .itin-preview {
  border-radius: 22px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 16px 40px rgba(0,0,0,0.06) !important;
}
.itin-preview { background: linear-gradient(160deg, #1d1d1f 0%, #2a1410 70%, #b8331e 220%) !important; }

/* ── Step navigator pills — Apple segmented control ── */
.itin-stepper {
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  padding: 6px;
  border: none !important;
  gap: 4px !important;
  flex-wrap: wrap;
}
.itin-step-pill {
  border-radius: 999px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--apple-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: #424245 !important;
  text-transform: none !important;
  transition: background 0.22s ease, color 0.22s ease !important;
}
.itin-step-pill:hover { background: rgba(0,0,0,0.05) !important; color: #1d1d1f !important; }
.itin-step-pill.active {
  background: #1d1d1f !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}
.itin-step-pill.active .n { background: var(--brand) !important; color: #fff !important; border: none !important; }
.itin-step-pill.done { color: var(--brand) !important; }
.itin-step-pill.done .n { background: var(--brand) !important; color: #fff !important; border: none !important; }
.itin-step-pill .n { background: rgba(0,0,0,0.06) !important; border: none !important; }

/* ── Form inputs — Apple field style ── */
.fld input, .fld select, .fld textarea,
.ms-qb-field input, .ms-qb-field select, .ms-qb-field textarea,
.cat-rental-fld input,
.auth-fields .fld input {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: var(--apple-font) !important;
  color: #1d1d1f !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.fld input:focus, .fld select:focus, .fld textarea:focus,
.ms-qb-field input:focus, .ms-qb-field textarea:focus,
.cat-rental-fld input:focus,
.auth-fields .fld input:focus {
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(225, 67, 42, 0.15) !important;
}
.fld label { font-size: 12px !important; letter-spacing: -0.005em !important; color: #6e6e73 !important; font-weight: 500 !important; }

/* ── Option cards (trip type, accommodation, transport, etc.) ── */
.opt-card {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important;
  padding: 14px !important;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease !important;
}
.opt-card:hover { border-color: rgba(0,0,0,0.18) !important; transform: translateY(-2px); }
.opt-card.active {
  border-color: #1d1d1f !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px #1d1d1f, 0 8px 20px rgba(0,0,0,0.08) !important;
}
.opt-card.active::after {
  content: "✓";
  position: absolute; top: 8px; right: 10px;
  color: var(--brand); font-weight: 700; font-size: 14px;
}
.opt-card .ttl { font-size: 13.5px !important; font-weight: 600 !important; color: #1d1d1f !important; letter-spacing: -0.01em !important; }
.opt-card .sub { font-size: 11.5px !important; color: #6e6e73 !important; }

/* ── Counter / stepper +/− buttons ── */
.counter-btns button,
.mc-night-ctrl button,
.ms-qb-stepper button {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.05) !important;
  border: none !important;
  color: #1d1d1f !important;
  font-size: 16px;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.counter-btns button:hover,
.mc-night-ctrl button:hover,
.ms-qb-stepper button:hover { background: rgba(0,0,0,0.10) !important; transform: scale(1.06); }
.form-counter { background: #f5f5f7 !important; border-radius: 14px !important; border: none !important; padding: 14px 16px !important; }
.form-counter .name { font-weight: 600 !important; color: #1d1d1f !important; letter-spacing: -0.005em !important; }

/* ── Date-range calendar (Apple visual) ── */
.rcal { border-radius: 16px !important; border: 1px solid rgba(0,0,0,0.08) !important; background: #fff !important; }
.rcal-nav { border-radius: 50% !important; background: rgba(0,0,0,0.05) !important; border: none !important; }
.rcal-nav:hover { background: rgba(0,0,0,0.10) !important; border-color: transparent !important; }
.rcal-cell { border-radius: 10px !important; }
.rcal-cell:not(:disabled):hover { background: rgba(225,67,42,0.10) !important; color: var(--brand) !important; }
.rcal-cell.start, .rcal-cell.end { background: #1d1d1f !important; color: #fff !important; font-weight: 600 !important; }
.rcal-cell.in, .rcal-cell.in-hover { background: rgba(29,29,31,0.06) !important; color: #1d1d1f !important; }

/* ── Day-by-day navigator pills (Smak step) ── */
.day-nav {
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  padding: 6px;
  border: none !important;
  gap: 4px;
}
.day-nav-pill {
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 14px !important;
  font-family: var(--apple-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #424245 !important;
}
.day-nav-pill:hover { background: rgba(0,0,0,0.05) !important; color: #1d1d1f !important; }
.day-nav-pill.active { background: #1d1d1f !important; color: #fff !important; }
.day-nav-pill.filled:not(.active) { background: rgba(225,67,42,0.10) !important; color: var(--brand) !important; }
.day-nav-arrow {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.05) !important;
  border: none !important;
}
.day-nav-arrow:hover:not(:disabled) { background: rgba(0,0,0,0.12) !important; }

/* ── Taste chips ── */
.taste-chip {
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  padding: 8px 14px !important;
  font-family: var(--apple-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.005em !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
.taste-chip:hover { border-color: #1d1d1f !important; }
.taste-chip.active { background: #1d1d1f !important; border-color: #1d1d1f !important; color: #fff !important; }
.taste-more { color: var(--brand) !important; font-weight: 600 !important; font-family: var(--apple-font) !important; }

/* ── Multi-city stops UI ── */
.mc-stop { border-radius: 14px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.08) !important; }
.mc-toggle { border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.10) !important; }
.mc-toggle.active { background: #1d1d1f !important; border-color: #1d1d1f !important; }
.mc-add { border-radius: 999px !important; border-style: dashed !important; }
.mc-remove { border-radius: 50% !important; }

/* ── Rental cars + booking widget ── */
.rental-card { border-radius: 16px !important; border: 1px solid rgba(0,0,0,0.08) !important; }
.rental-card.active { box-shadow: 0 0 0 2px #1d1d1f !important; border-color: transparent !important; }
.cat-rental-book { border-radius: 16px !important; background: #f5f5f7 !important; border: none !important; }

/* ── Smak section card ── */
.taste-section-h { font-family: var(--apple-font) !important; font-weight: 600 !important; color: #1d1d1f !important; letter-spacing: -0.005em !important; }
.taste-section-meta { background: rgba(0,0,0,0.05) !important; color: #6e6e73 !important; border-radius: 999px !important; }

/* ── Auth modal · Apple sheet ── */
.auth-modal {
  border-radius: 22px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25) !important;
  border: none !important;
}
.auth-close { border-radius: 50% !important; background: rgba(0,0,0,0.06) !important; color: #1d1d1f !important; }
.auth-google-btn { border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.12) !important; transition: background 0.2s ease, border-color 0.2s ease !important; }
.auth-google-btn:hover { background: #f5f5f7 !important; }
.auth-skip { color: var(--brand) !important; font-weight: 600 !important; font-family: var(--apple-font) !important; }
.auth-alt-btn { border-radius: 12px !important; padding: 12px 18px !important; font-weight: 500 !important; }
.auth-title { font-family: var(--apple-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }

/* ── QuickBook + Tweak modals ── */
.ms-qb-modal, .ms-tweak-modal {
  border-radius: 22px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25) !important;
}
.ms-qb-close, .ms-tweak-close { border-radius: 50% !important; background: rgba(255,255,255,0.92) !important; }
.ms-qb-transport { border-radius: 14px !important; border: 1px solid rgba(225,67,42,0.30) !important; }
.ms-qb-transport-addr { border-radius: 10px !important; }

/* Itinerary modal */
.itin-modal { border-radius: 22px !important; box-shadow: 0 32px 80px rgba(0,0,0,0.30) !important; }

/* ── Floating action buttons — circular Apple-style ── */
.ms-chat-fab,
.ms-instagram-fab,
.ms-weather-fab,
.ms-ai-fab,
.fab, .chat-fab {
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.15),
    0 1px 3px rgba(0,0,0,0.10) !important;
  border: none !important;
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease, background 0.25s ease !important;
}
.ms-chat-fab:hover,
.ms-instagram-fab:hover,
.ms-weather-fab:hover,
.ms-ai-fab:hover {
  transform: scale(1.10) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.20),
    0 2px 6px rgba(0,0,0,0.10) !important;
}

/* Weather + chat FABs default-sized pills become smaller circles */
.ms-weather-fab {
  padding: 0 !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  color: #1d1d1f !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 4px;
}
.ms-weather-fab .ms-weather-icon { font-size: 18px !important; }
.ms-weather-fab .ms-weather-temp { font-size: 13px !important; font-weight: 600 !important; }
.ms-weather-fab .ms-weather-city { display: none !important; }
/* Default width loosens to fit "26° + icon" — let it auto */
@media (min-width: 1024px) {
  .ms-weather-fab { width: auto !important; min-width: 70px; padding: 0 14px !important; border-radius: 999px !important; }
  .ms-weather-fab .ms-weather-city { display: inline-block !important; font-size: 10px !important; letter-spacing: 0.06em !important; }
}

/* AI / "+" / Instagram FABs */
.ms-ai-fab { background: var(--brand) !important; color: #fff !important; }
.ms-chat-fab { background: #D97757 !important; color: #fff !important; }
.ms-chat-fab.open { background: #B85C43 !important; }
.ms-instagram-fab {
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%) !important;
  color: #fff !important;
}

/* ── Mobile compaction — widgets become small circles ── */
@media (max-width: 768px) {
  .ms-chat-fab,
  .ms-instagram-fab,
  .ms-weather-fab,
  .ms-ai-fab,
  .fab, .chat-fab {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }
  .ms-weather-fab {
    padding: 0 !important;
    min-width: 0 !important;
    width: 44px !important;
  }
  .ms-weather-fab .ms-weather-city,
  .ms-weather-fab .ms-weather-temp { display: none !important; }
  .ms-weather-fab .ms-weather-icon { font-size: 20px !important; }

  /* Step pills get a touch smaller on mobile */
  .itin-stepper { padding: 4px !important; }
  .itin-step-pill { padding: 6px 10px !important; font-size: 11.5px !important; }
  .itin-step-pill .n { width: 18px !important; height: 18px !important; }

  /* Auth modal sticks to top with breathing room */
  .auth-modal { border-radius: 18px !important; }

  /* Tab bars and counter buttons compact */
  .form-counter { padding: 10px 12px !important; }
  .counter-btns button { width: 28px !important; height: 28px !important; }

  /* Catalog modal radius slightly smaller */
  .cat-modal, .ag-modal, .itin-modal, .ms-qb-modal, .ms-tweak-modal {
    border-radius: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 4
   Universal rounded corners across every surface (desktop + mobile)
   ════════════════════════════════════════════════════════════════ */

/* Generic surfaces — anything that looks like a card, panel, tile, box */
.card, .panel, .tile, .box, .surface,
.cat-card, .ag-card, .opt-card, .dur-pkg-card, .rental-card,
.itin-card, .itin-day, .itin-block, .itin-section, .itin-preview,
.mc-stop, .pkg-card, .pkg-tile, .feature-card, .info-card,
.review-card, .testimonial-card, .stat-card, .price-card,
.chatbot, .ms-chatbot, .ms-chat-window, .ms-ai-window,
.ms-instagram-panel, .ms-weather-panel, .ip-phone-stage,
.cookie-banner, .ms-cookie-banner, .toast, .ms-toast,
.dropdown, .popover, .menu, .nav-pill-menu, .ms-lc-menu,
.tag, .badge, .pill, .chip,
.section, section.section, .wrap, .wrap-wide {
  border-radius: 18px;
}

/* Images / media — rounded everywhere */
img, video, picture, .media, .thumb, .thumbnail,
.cat-img, .ag-img, .itin-img, .hero-img, .pkg-img {
  border-radius: 14px;
}
.nav-logo img, .logo-img, .avatar, .ms-avatar { border-radius: 50%; }

/* Buttons — always pill */
button, .btn, .button, .cta, a.btn, a.button, input[type=button], input[type=submit] {
  border-radius: 999px;
}

/* Inputs / fields / selects / textareas */
input, select, textarea, .field, .fld, .input, .form-control {
  border-radius: 12px;
}
textarea { border-radius: 14px; }

/* Tabs / segmented controls */
.tabs, .tab-bar, .segmented, .cat-tabs-v2, .itin-stepper, .day-nav {
  border-radius: 999px;
}
.tab, .tab-btn, .cat-tab-v2, .itin-step-pill, .day-nav-pill, .taste-chip {
  border-radius: 999px;
}

/* Modals & overlays */
.modal, .modal-content, .modal-body, .modal-inner,
.cat-modal, .ag-modal, .itin-modal, .auth-modal,
.ms-qb-modal, .ms-tweak-modal, .ms-modal {
  border-radius: 22px;
}

/* Floating action buttons stay circular */
.fab, .chat-fab, .ms-chat-fab, .ms-instagram-fab,
.ms-weather-fab, .ms-ai-fab, .scroll-top, .back-to-top {
  border-radius: 50%;
}

/* Footer + nav softeners */
.footer, footer.footer { border-top-left-radius: 28px; border-top-right-radius: 28px; }
.nav, nav.nav { border-radius: 0; }

/* Mobile — keep things rounded, slightly tighter */
@media (max-width: 768px) {
  .card, .panel, .tile, .box, .surface,
  .cat-card, .ag-card, .opt-card, .dur-pkg-card, .rental-card,
  .itin-card, .itin-day, .itin-block, .itin-preview,
  .mc-stop, .pkg-card, .feature-card, .info-card,
  .review-card, .testimonial-card, .stat-card, .price-card {
    border-radius: 16px;
  }
  img, video, picture, .media, .thumb { border-radius: 12px; }
  .modal, .modal-content, .cat-modal, .ag-modal, .itin-modal,
  .auth-modal, .ms-qb-modal, .ms-tweak-modal { border-radius: 18px; }
  .footer, footer.footer { border-top-left-radius: 22px; border-top-right-radius: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 5
   • Catalog transport toggle (iOS-style switch)
   • Make every widget container visibly round (not square)
   ════════════════════════════════════════════════════════════════ */

/* iOS-style toggle for "Need transport?" in catalog modal */
.cat-transport-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
}
.cat-transport-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cat-transport-switch {
  position: relative;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.cat-transport-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cat-transport-toggle input:checked + .cat-transport-switch { background: #30d158; }
.cat-transport-toggle input:checked + .cat-transport-switch::after { transform: translateX(18px); }
.cat-transport-label {
  font-family: var(--apple-font);
  font-size: 13.5px;
  font-weight: 500;
  color: #1d1d1f;
}

/* Make all widget surfaces visibly round — override any leftover square corners */
.ms-chat-window, .ms-ai-window, .ms-chatbot, .chatbot,
.ms-instagram-panel, .ms-weather-panel, .ms-weather-detailed,
.ip-phone-stage, .ip-phone-frame, .ms-cookie-banner, .cookie-banner,
.toast, .ms-toast, .nav-pill-menu, .ms-lc-menu,
.popover, .dropdown-menu, .ms-tooltip,
.cat-tabs-v2-wrap, .reiseplaner-section-header,
.itin-card, .itin-day, .itin-block,
.ms-qb-host, .ms-qb-inner {
  border-radius: 22px !important;
  overflow: hidden;
}
.ip-phone-frame { border-radius: 38px !important; }
.ip-phone-stage { border-radius: 42px !important; overflow: visible; }

/* Phone widget inner */
.ip-phone-screen, .ms-chat-header, .ms-instagram-header, .ms-weather-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* All buttons inside widgets — round */
.ms-chat-window button, .ms-ai-window button,
.ms-instagram-panel button, .ms-weather-panel button {
  border-radius: 999px !important;
}

/* Mobile — keep them generously round */
@media (max-width: 768px) {
  .ms-chat-window, .ms-ai-window, .ms-instagram-panel,
  .ms-weather-panel, .ms-cookie-banner {
    border-radius: 20px !important;
  }
  .ip-phone-frame { border-radius: 32px !important; }
}

/* ════════════════════════════════════════════════════════════════
   POP-UP — single bulletproof pattern (after audit & reset)
   ────────────────────────────────────────────────────────────────
   Simplest possible model that works on every browser:
     • Backdrop = fixed, blurred, flex-center. No scroll.
     • Modal   = block element with max-height ≤ viewport,
                 overflow-y:auto on itself. Everything inside it
                 scrolls together — hero image included.
   ════════════════════════════════════════════════════════════════ */

/* Backdrop */
.cat-modal-backdrop,
.ag-modal-backdrop,
.itin-modal-backdrop,
.auth-backdrop,
.ms-qb-backdrop,
.ms-tweak-backdrop,
.ms-picker-backdrop,
.ms-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(20, 16, 14, 0.55) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  animation: fadeIn 0.2s ease !important;
}

/* Modal — block layout, scrolls itself */
.cat-modal,
.ag-modal,
.itin-modal,
.auth-modal,
.ms-qb-modal,
.ms-tweak-modal,
.ms-picker-modal {
  position: relative !important;
  display: block !important;
  width: min(1200px, 100%) !important;
  max-width: min(1200px, 100%) !important;
  max-height: calc(100dvh - 32px) !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.32),
    0 64px 120px rgba(0,0,0,0.22) !important;
  animation: slideUp 0.25s ease !important;
}

/* Small forms (auth, date picker) stay narrow */
.auth-modal,
.ms-picker-modal {
  width: min(520px, 100%) !important;
  max-width: min(520px, 100%) !important;
}

/* Hero images scroll with content but feel cinematic */
.cat-modal-img,
.itin-modal-hero,
.ag-modal-img {
  height: clamp(200px, 32vh, 360px) !important;
  border-radius: 22px 22px 0 0 !important;
}

/* Body padding scales with width */
.cat-modal-body,
.itin-modal-body,
.ag-modal-body,
.ms-qb-body,
.ms-tweak-body {
  padding: clamp(24px, 3vw, 40px) !important;
}

/* Close button — fixed to the viewport of the modal, always visible
   even when scrolling. position:fixed within the scroll container
   anchors it to the top-right corner of the visible modal area. */
.cat-modal-close,
.itin-modal-close,
.ag-modal-close,
.auth-close,
.ms-qb-close,
.ms-tweak-close,
.ms-picker-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 30 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.cat-modal-close:hover,
.itin-modal-close:hover,
.ag-modal-close:hover,
.auth-close:hover,
.ms-qb-close:hover,
.ms-tweak-close:hover,
.ms-picker-close:hover { background: rgba(0,0,0,0.78) !important; }

/* Two-column day grid on wide screens */
@media (min-width: 960px) {
  .itin-modal-days {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
  }
  .itin-modal-day { padding-bottom: 0 !important; border-bottom: 0 !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .cat-modal-backdrop,
  .ag-modal-backdrop,
  .itin-modal-backdrop,
  .auth-backdrop,
  .ms-qb-backdrop,
  .ms-tweak-backdrop,
  .ms-picker-backdrop {
    padding: 8px !important;
  }
  .cat-modal,
  .ag-modal,
  .itin-modal,
  .auth-modal,
  .ms-qb-modal,
  .ms-tweak-modal {
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }
  .cat-modal-img,
  .itin-modal-hero,
  .ag-modal-img {
    height: 220px !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .cat-modal-body,
  .itin-modal-body,
  .ag-modal-body,
  .ms-qb-body,
  .ms-tweak-body {
    padding: 22px 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v210 — Trip info pop-ups: ~40% smaller overall. Narrower card,
   shorter hero, tighter padding, smaller text — a compact floating
   panel rather than a full-screen sheet. Dark, high-contrast copy.
   ════════════════════════════════════════════════════════════════ */
.cat-modal,
.ag-modal,
.itin-modal,
.ms-qb-modal,
.ms-tweak-modal {
  width: min(728px, 100%) !important;   /* +40% wider than the 520 compact size */
  max-width: min(728px, 100%) !important;
  max-height: min(86vh, 86dvh) !important;
  border-radius: 18px !important;
}
/* Shorter hero */
.cat-modal-img,
.itin-modal-hero,
.ag-modal-img {
  height: clamp(105px, 14vh, 150px) !important;
  border-radius: 18px 18px 0 0 !important;
}
/* Tighter body padding */
.cat-modal-body,
.itin-modal-body,
.ag-modal-body,
.ms-qb-body,
.ms-tweak-body {
  padding: 16px 18px !important;
}
/* Dark, readable, smaller text everywhere in the pop-ups */
.cat-modal, .cat-modal-body,
.itin-modal, .itin-modal-body,
.ag-modal, .ag-modal-body,
.ms-qb-modal, .ms-qb-body,
.ms-tweak-modal, .ms-tweak-body {
  color: #1d1d1f !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.cat-modal-body p, .itin-modal-body p,
.cat-modal-body li, .itin-modal-body li,
.cat-modal-desc, .itin-modal-overview,
.cat-modal-area, .cat-modal-atmosphere {
  color: #2c2c2e !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
.cat-modal-body h1, .cat-modal-body h2, .cat-modal-body h3, .cat-modal-body h4,
.itin-modal-body h1, .itin-modal-body h2, .itin-modal-body h3, .itin-modal-body h4,
.cat-modal-title, .itin-modal-title {
  color: #111113 !important;
}
.cat-modal-body h3, .itin-modal-body h3 { font-size: 14px !important; }
.cat-modal-title, .itin-modal-title { font-size: 19px !important; line-height: 1.2 !important; margin-bottom: 5px !important; }
/* Single-column day list — the narrow card reads better stacked
   (overrides the earlier ≥960px two-column rule) */
.itin-modal-days { display: block !important; grid-template-columns: none !important; }
/* Tighten the vertical rhythm so condensed content stays organised */
.cat-modal-body > *, .itin-modal-body > * { margin-top: 0 !important; }
.cat-modal-body > * + *, .itin-modal-body > * + * { margin-top: 11px !important; }
.itin-modal-day { padding: 8px 0 !important; }
.cat-modal-pill, .itin-modal-tags > * { font-size: 11.5px !important; padding: 4px 10px !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 7 · Partner trip (Happy Surfers)
   Partner strip, formulas grid, optional extras
   ════════════════════════════════════════════════════════════════ */

.itin-partner-strip {
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 20px 0 28px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
}
.itin-partner-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.itin-partner-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6e6e73;
  font-weight: 600;
}
.itin-partner-name {
  font-family: var(--apple-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-top: 2px;
}
.itin-partner-tag {
  font-size: 13px;
  color: #6e6e73;
  margin-top: 2px;
}
.itin-partner-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.itin-partner-link:hover { opacity: 0.7; }

.itin-partner-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.itin-partner-thumb {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  transition: transform 0.4s ease;
}
.itin-partner-thumb:hover { transform: scale(1.03); }

.itin-formulas { margin-top: 28px; }
.itin-formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.itin-formula-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.itin-formula-card:hover {
  border-color: #1d1d1f;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.itin-formula-name {
  font-family: var(--apple-display);
  font-weight: 600;
  font-size: 16px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.itin-formula-tag {
  font-size: 13px;
  color: #6e6e73;
  margin-top: 4px;
  line-height: 1.4;
}
.itin-formula-price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.itin-formula-price span {
  font-size: 11px;
  font-weight: 500;
  color: #6e6e73;
  letter-spacing: 0;
}

.itin-extras { margin-top: 28px; }
.itin-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.itin-extra-card {
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  padding: 12px 14px;
}
.itin-extra-name {
  font-weight: 600;
  font-size: 14px;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.itin-extra-desc {
  font-size: 12.5px;
  color: #6e6e73;
  line-height: 1.45;
  margin-top: 3px;
}

@media (max-width: 768px) {
  .itin-partner-head { flex-direction: column; gap: 8px; }
  .itin-partner-gallery { grid-template-columns: repeat(3, 1fr); }
  .itin-partner-thumb { border-radius: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 9 · Theme strip in trips section
   ════════════════════════════════════════════════════════════════ */
.theme-strip { margin: 0 0 56px; }
.theme-strip-head { text-align: center; margin-bottom: 28px; }
.theme-strip-h {
  font-family: var(--apple-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  margin: 4px 0 0 !important;
  color: #1d1d1f !important;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.theme-card {
  display: flex; flex-direction: column;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s ease;
}
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 24px 60px rgba(0,0,0,0.10);
}
.theme-card-img {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f7;
}
.theme-card-emoji {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  font-size: 18px;
  backdrop-filter: blur(6px);
}
.theme-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.theme-card-name {
  font-family: var(--apple-display) !important;
  font-weight: 600;
  font-size: 16px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.theme-card-brief {
  font-size: 13px;
  line-height: 1.5;
  color: #6e6e73;
  margin: 0;
  flex: 1;
}
.theme-card-cta {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
@media (max-width: 768px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .theme-card-body { padding: 12px 14px 14px; }
  .theme-card-brief { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 10
   Auth modal redesign + contact phone widget slot
   ════════════════════════════════════════════════════════════════ */

/* Auth modal — Apple sheet styling */
.auth-modal {
  padding: 36px 32px 28px !important;
  background: #fff !important;
}
.auth-hero { text-align: center; margin-bottom: 22px; }
.auth-logo { display: inline-flex; margin-bottom: 14px; }
.auth-logo img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.auth-title {
  font-family: var(--apple-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
  color: #1d1d1f !important;
}
.auth-title em { font-style: normal !important; color: var(--brand) !important; font-weight: inherit !important; }
.auth-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #6e6e73;
  margin: 0 auto 8px;
  max-width: 360px;
}
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  font-family: var(--apple-font);
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-top: 8px;
}
.auth-google-btn:hover { background: #f5f5f7; border-color: rgba(0,0,0,0.22); }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  font-size: 12px;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08);
}
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-alt-btn {
  padding: 12px 14px !important;
  border-radius: 999px !important;
  font-family: var(--apple-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.auth-alt-btn-secondary {
  background: rgba(0,0,0,0.05) !important;
  color: #1d1d1f !important;
}
.auth-alt-btn-secondary:hover { background: rgba(0,0,0,0.10) !important; }
.auth-alt-btn-primary {
  background: #1d1d1f !important;
  color: #fff !important;
}
.auth-alt-btn-primary:hover { background: #000 !important; }
.auth-submit { width: 100%; margin-top: 6px; }
.auth-skip {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.auth-skip:hover { opacity: 0.7; }
.auth-back {
  background: transparent;
  border: none;
  color: #1d1d1f;
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  opacity: 0.65;
}
.auth-back:hover { opacity: 1; }
.auth-fields { display: flex; flex-direction: column; gap: 12px; }
.auth-fields .fld label {
  font-size: 12px;
  font-weight: 500;
  color: #6e6e73;
  display: block;
  margin-bottom: 4px;
}
.auth-fields input {
  width: 100%;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #f5f5f7 !important;
  font-family: var(--apple-font) !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.auth-fields input:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(225,67,42,0.15) !important;
}
.auth-err {
  font-size: 13px;
  color: var(--brand);
  margin: -2px 0 0;
}
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: #6e6e73;
  margin: 18px 0 0;
}
.auth-switch button {
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.auth-switch button:hover { opacity: 0.7; }

/* Contact section — phone widget replaces the old map */
.contact-phone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
}
@media (max-width: 768px) {
  .contact-phone-wrap { min-height: 0; margin-top: 24px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 11
   • Themes mixed into trip grid (no separate strip)
   • Catalog cards show price from €N
   ════════════════════════════════════════════════════════════════ */

/* Theme cards inside the trip grid — same layout, just a visual cue */
.cat-card-theme .cat-tag.brand {
  background: rgba(29,29,31,0.85) !important;
  color: #fff !important;
  letter-spacing: 0.08em;
}
.cat-card-theme .reiseplan-badge {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Catalog card price */
.cat-price-from {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6e6e73;
  font-weight: 600;
  margin-right: 6px;
}
.cat-price-amount {
  font-family: var(--apple-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 12
   Tight one-line trip filter bar + cleaner trip cards
   ════════════════════════════════════════════════════════════════ */

/* Single-line filter bar — segmented control style with horizontal
   scroll on small screens so it never wraps to two lines. */
.trip-filter-bar {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.trip-filter-scroll {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trip-filter-scroll::-webkit-scrollbar { display: none; }

.trip-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.trip-filter-chip:hover { background: rgba(0,0,0,0.05); }
.trip-filter-chip.active {
  background: #1d1d1f;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.trip-filter-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.55;
  font-feature-settings: 'tnum';
}
.trip-filter-chip.active .trip-filter-count { opacity: 0.7; }

/* CTA row under the filter bar */
.trip-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
.trip-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(0,0,0,0.05);
  color: #1d1d1f;
  border: none;
  border-radius: 999px;
  font-family: var(--apple-font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.trip-cta:hover { background: rgba(0,0,0,0.10); }
.trip-cta-primary {
  background: var(--brand);
  color: #fff;
}
.trip-cta-primary:hover { background: #c43a23; }
.trip-chapter-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Improved trip card layout */
.trip-card-body { padding: 18px 18px 16px !important; }
.trip-card-title {
  font-family: var(--apple-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #1d1d1f !important;
  line-height: 1.25 !important;
  margin: 6px 0 4px !important;
}
.trip-card-route {
  font-size: 12.5px !important;
  color: #6e6e73 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px !important;
}
.trip-card-desc {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #424245 !important;
  margin: 0 0 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trip-card-meta-sep { color: #d2d2d7; margin: 0 4px; }
.trip-card-meta-dim {
  color: #6e6e73;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.trip-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.trip-card-tag {
  padding: 4px 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: 0.005em;
}
.cat-card-theme .trip-card-tag {
  background: rgba(225,67,42,0.10);
  color: var(--brand);
}
.trip-card-foot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.trip-card-cta-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
.cat-card-theme .trip-card-cta-label { color: #1d1d1f; }

@media (max-width: 768px) {
  .trip-cta-row { gap: 8px; }
  .trip-cta { padding: 8px 14px; font-size: 12.5px; }
  .trip-chapter-count { width: 100%; text-align: center; margin: 4px 0 0; }
  .trip-card-title { font-size: 17px !important; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 13
   Everything in one tab bar: filters + Themes + Team / Wedding / Lag din reise
   ════════════════════════════════════════════════════════════════ */

.trip-filter-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(0,0,0,0.10);
  margin: 0 4px;
  align-self: center;
  flex-shrink: 0;
}

.trip-filter-cta {
  background: rgba(0,0,0,0.04) !important;
  color: #1d1d1f !important;
}
.trip-filter-cta:hover { background: rgba(0,0,0,0.10) !important; }
.trip-filter-cta-primary {
  background: var(--brand) !important;
  color: #fff !important;
}
.trip-filter-cta-primary:hover { background: #c43a23 !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 14
   Featured promo trip card + brand-color discipline
   • Brand color used ONLY for prices, CTAs, accents.
   • Backgrounds: white + light grey.
   • Text: near-black for headlines, mid-grey for body.
   ════════════════════════════════════════════════════════════════ */

/* When a single duration is filtered, the grid collapses to one row
   and the single trip becomes a wide promo hero card. */
.reiseplaner-grid-feature {
  display: block !important;
}

.trip-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 18px 48px rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s ease;
}
.trip-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 32px 80px rgba(0,0,0,0.14);
}

.trip-feature-img {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f7;
}
.trip-feature-badge {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--apple-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(225,67,42,0.40);
}
.trip-feature-duration {
  position: absolute;
  top: 16px; right: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #1d1d1f;
  font-family: var(--apple-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
}

.trip-feature-body {
  padding: 32px 36px 28px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.trip-feature-eyebrow {
  font-family: var(--apple-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.trip-feature-title {
  font-family: var(--apple-display) !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: #1d1d1f !important;
  margin: 0 0 12px !important;
}
.trip-feature-teaser {
  font-size: 15px;
  line-height: 1.55;
  color: #424245;
  margin: 0 0 16px;
}
.trip-feature-ideal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f5f5f7;
  border-radius: 999px;
  font-size: 13px;
  color: #1d1d1f;
  margin-bottom: 16px;
  align-self: flex-start;
}
.trip-feature-ideal-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e73;
}
.trip-feature-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trip-feature-highlights li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1d1d1f;
}
.trip-feature-highlights li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.trip-feature-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.trip-feature-from {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-right: 6px;
}
.trip-feature-price {
  font-family: var(--apple-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.trip-feature-per {
  font-size: 13px;
  color: #6e6e73;
  margin-left: 2px;
}
.trip-feature-cta {
  padding: 12px 22px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--apple-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 18px rgba(225,67,42,0.30);
}
.trip-feature-cta:hover { background: #c43a23; transform: translateY(-1px); }

@media (max-width: 900px) {
  .trip-feature { grid-template-columns: 1fr; }
  .trip-feature-img { min-height: 260px; }
  .trip-feature-body { padding: 24px 22px 22px; }
  .trip-feature-price { font-size: 26px; }
}

/* ── Theme/normal cards: price line in brand color, no orange tags ─── */
.trip-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.trip-card-price-from {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6e6e73;
}
.trip-card-price-amount {
  font-family: var(--apple-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.01em;
}

/* Theme tag chips — light grey instead of brand-tinted */
.cat-card-theme .trip-card-tag {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}

/* "Plan this / See details" CTA label always in brand color */
.trip-card-cta-label,
.cat-card-theme .trip-card-cta-label {
  color: var(--brand) !important;
}

/* Cards with the duration tag overlay: black pill instead of orange */
.cat-card .cat-tag.brand {
  background: rgba(0,0,0,0.78) !important;
  color: #fff !important;
}
.cat-card-theme .cat-tag.brand {
  background: rgba(255,255,255,0.92) !important;
  color: #1d1d1f !important;
}

/* Top-right "THEME" / "MOST BOOKED" badge — brand color only */
.reiseplan-badge {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}


/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 15
   Itinerary modal: pure white surface throughout
   ════════════════════════════════════════════════════════════════ */
.itin-modal,
.itin-modal-body,
.itin-modal-overview,
.itin-modal-grid,
.itin-modal-day,
.itin-modal-price,
.itin-modal-tags,
.itin-modal-ul,
.itin-modal-ul.itin-included,
.itin-modal-ul.itin-excluded {
  background: #fff !important;
}
.itin-modal-day {
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.itin-modal-price {
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.itin-modal-tag {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 16
   Trip modal: hero text in white over the photo
   ════════════════════════════════════════════════════════════════ */
.itin-modal-hero {
  position: relative;
}
.itin-modal-hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.78) 100%) !important;
}

/* ── Hero image carousel ── */
.itin-carousel { position: absolute; inset: 0; overflow: hidden; }
.itin-carousel-track { position: absolute; inset: 0; z-index: 1; }
.itin-carousel-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.itin-carousel-slide.is-active { opacity: 1; animation: itinKenBurns 6s ease-out both; }
@keyframes itinKenBurns { from { transform: scale(1.08); } to { transform: scale(1); } }
/* overlay sits above slides but never eats pointer events meant for controls */
.itin-carousel > .itin-modal-hero-overlay { z-index: 2; pointer-events: none; }
.itin-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.32); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s; padding: 0;
}
.itin-carousel-arrow:hover { background: rgba(0,0,0,0.6); }
.itin-carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
.itin-carousel-arrow.prev { left: 12px; }
.itin-carousel-arrow.next { right: 12px; }
.itin-carousel-count {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(0,0,0,0.42); color: #fff; font-size: 11px;
  font-family: 'JetBrains Mono', monospace; padding: 3px 9px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.itin-carousel-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 6px; align-items: center;
}
.itin-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.25s;
}
.itin-carousel-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .itin-carousel-slide.is-active { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SPLIT-SCREEN TRIP MODAL — images left, info right (desktop)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  /* full-screen: drop the backdrop padding so the modal can fill the viewport */
  .itin-modal-backdrop { padding: 0 !important; }
  .itin-modal-backdrop .itin-modal.itin-modal-split {
    display: grid !important;
    grid-template-columns: 0.82fr 1fr !important;
    grid-template-rows: 100% !important;        /* one full-height row */
    position: fixed !important; inset: 0 !important;  /* fill viewport, ignore backdrop padding */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  /* close button stays out of the grid flow, pinned to the modal corner */
  .itin-modal-backdrop .itin-modal.itin-modal-split > .itin-modal-close { position: absolute !important; z-index: 30 !important; }
  /* Left column — carousel fills the full height of the modal
     (high-specificity selector to beat .itin-modal.itin-modal-v2 .itin-modal-hero) */
  .itin-modal-backdrop .itin-modal.itin-modal-split > .itin-modal-hero {
    grid-column: 1 !important; grid-row: 1 !important;
    height: 100% !important; min-height: 0 !important; align-self: stretch !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .itin-modal-split .itin-carousel,
  .itin-modal-split .itin-carousel-track { position: absolute; inset: 0; }
  /* Right column — info scrolls independently */
  .itin-modal-backdrop .itin-modal.itin-modal-split > .itin-modal-body {
    grid-column: 2 !important; grid-row: 1 !important;
    height: 100% !important; min-height: 0 !important; max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* dots sit a touch higher so they clear the title overlay on the tall image */
  .itin-modal-split .itin-carousel-dots { bottom: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   SPLIT-SCREEN CATALOG MODAL — gallery left, info right (desktop)
   Mirrors the trip modal split. ≥860px only; stacks on mobile.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  /* full-screen: drop the backdrop padding so the modal can fill the viewport */
  .cat-modal-backdrop { padding: 0 !important; }
  .cat-modal-backdrop .cat-modal.cat-modal-split {
    display: grid !important;
    grid-template-columns: 0.85fr 1fr !important;
    grid-template-rows: 100% !important;
    position: fixed !important; inset: 0 !important;  /* fill viewport, ignore backdrop padding */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-close { position: absolute !important; z-index: 30 !important; }
  /* LEFT column — gallery or single image fills the full height */
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-gallery,
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-img {
    grid-column: 1 !important; grid-row: 1 !important;
    height: 100% !important; min-height: 0 !important; align-self: stretch !important;
    margin: 0 !important; border-radius: 0 !important;
  }
  /* gallery = vertical flex: photo grows, thumbnail strip pinned to the bottom */
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-gallery {
    display: flex !important; flex-direction: column !important;
  }
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-gallery > .cat-modal-img {
    flex: 1 1 auto !important; height: auto !important; min-height: 0 !important;
    border-radius: 0 !important;
  }
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-gallery > .cat-modal-thumbs {
    flex: 0 0 auto !important; border-radius: 0 !important;
  }
  /* RIGHT column — info scrolls independently */
  .cat-modal-backdrop .cat-modal.cat-modal-split > .cat-modal-body {
    grid-column: 2 !important; grid-row: 1 !important;
    height: 100% !important; min-height: 0 !important; max-height: none !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
}

/* ── Carousel inside the homepage feature card ── */
.trip-feature-img { overflow: hidden; }
.trip-feature-img .itin-carousel { position: absolute; inset: 0; z-index: 0; }
.trip-feature-img .itin-carousel-count { display: none; }      /* declutter the card */
.trip-feature-img .itin-carousel-arrow { width: 34px; height: 34px; font-size: 20px; }
.trip-feature-img .itin-carousel-dots { bottom: 14px; }
/* keep the badge / duration chips above the slides */
.trip-feature-img .trip-feature-badge,
.trip-feature-img .trip-feature-duration { z-index: 4; }
.itin-modal-hero-overlay .itin-modal-eyebrow,
.itin-modal-hero-overlay .itin-modal-title,
.itin-modal-hero-overlay .itin-modal-route,
.itin-modal .itin-modal-title,
h2.itin-modal-title {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 18px rgba(0,0,0,0.45);
}
.itin-modal-hero-overlay .itin-modal-eyebrow {
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}
.itin-modal-hero-overlay .itin-modal-route {
  color: rgba(255,255,255,0.82) !important;
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 17
   Trip slider — horizontal scroll with floating arrow controls
   (Themes view only; duration tabs already render one wide promo)
   ════════════════════════════════════════════════════════════════ */

.trip-slider {
  position: relative;
}

/* Track behaves as a single-row carousel on Themes view */
.trip-slider:not(.trip-slider-feature) .trip-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 4px 60px 12px;          /* leave room for the arrow buttons */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trip-slider:not(.trip-slider-feature) .trip-slider-track::-webkit-scrollbar { display: none; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card {
  flex: 0 0 calc((100% - 124px - 18px * 2) / 3);   /* 3 visible at desktop */
  min-width: 240px;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card {
    flex: 0 0 calc((100% - 124px - 18px) / 2);     /* 2 visible at tablet */
  }
}
@media (max-width: 700px) {
  .trip-slider:not(.trip-slider-feature) .trip-slider-track {
    padding: 4px 16px 12px;
  }
  .trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card {
    flex: 0 0 80%;                                  /* 1 visible at mobile */
    min-width: 0;
  }
}

/* Arrow buttons — floating brand-color circles */
.trip-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.10),
    0 8px 24px rgba(0,0,0,0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.trip-slider-arrow:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.trip-slider-arrow.prev { left: 8px; }
.trip-slider-arrow.next { right: 8px; }
.trip-slider-arrow.prev svg { transform: rotate(180deg); }

@media (max-width: 700px) {
  .trip-slider-arrow { width: 38px; height: 38px; }
  .trip-slider-arrow.prev { left: 4px; }
  .trip-slider-arrow.next { right: 4px; }
}

/* Feature view leaves the wide promo card unchanged */
.trip-slider-feature .trip-slider-track {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 18
   Hero search bar + slider arrows for the feature-mode trip card
   ════════════════════════════════════════════════════════════════ */

/* Hero search bar — Apple-grade glass pill */
.ms-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 90vw);
  margin: 24px auto 0;
  padding: 10px 22px 10px 18px;
  background: rgba(255,255,255,0.18);
  /* single clean box — submit button removed, Enter submits */
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
.ms-hero-search-icon {
  color: #fff;
  opacity: 0.85;
  flex-shrink: 0;
}
.ms-hero-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--apple-font);
  font-size: 15px;
  padding: 8px 4px;
  outline: none;
}
.ms-hero-search-submit-hidden { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ms-hero-search input::placeholder {
  color: rgba(255,255,255,0.78);
  font-weight: 400;
}
.ms-hero-search-btn {
  flex-shrink: 0;
  padding: 10px 22px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--apple-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(225,67,42,0.32);
}
.ms-hero-search-btn:hover { background: #c43a23; transform: translateY(-1px); }

@media (max-width: 600px) {
  .ms-hero-search { padding: 4px 4px 4px 14px; }
  .ms-hero-search input { font-size: 14px; }
  .ms-hero-search-btn { padding: 9px 16px; font-size: 13px; }
}

/* Slider arrows in feature mode — anchor them to the promo card itself */
.trip-slider-feature {
  position: relative;
}
/* push the slider arrows out into the gutter so they don't overlap the card's
   own image carousel arrows */
.trip-slider-feature .trip-slider-arrow.prev { left: -54px; }
.trip-slider-feature .trip-slider-arrow.next { right: -54px; }
@media (max-width: 1240px) {
  .trip-slider-feature .trip-slider-arrow.prev { left: -20px; }
  .trip-slider-feature .trip-slider-arrow.next { right: -20px; }
}
@media (max-width: 900px) {
  /* no room in the gutter — drop the slider arrows to the bottom corners,
     clear of the centred image arrows */
  .trip-slider-feature .trip-slider-arrow { top: auto; bottom: 12px; transform: none; }
  .trip-slider-feature .trip-slider-arrow:hover { transform: scale(1.08); }
  .trip-slider-feature .trip-slider-arrow.prev { left: 10px; }
  .trip-slider-feature .trip-slider-arrow.next { right: 10px; }
}
/* belt-and-braces: every slider / carousel / nav arrow is fully round */
.trip-slider-arrow, .itin-carousel-arrow, .cat-modal-nav,
.ms-ld-lb-nav, .ms-ld-cal-arrow, .ms-hero-search-btn-round { border-radius: 50% !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 19
   • Restore old serif italic "Story" for the hero brandmark
   • Centre hero text + search bar
   • Make the hero search bar fully transparent (line only)
   • Sliding animation when stepping between trips
   ════════════════════════════════════════════════════════════════ */

/* Re-enable Fraunces serif + italic for the hero brand wordmark only —
   the Apple sans rule earlier in this file killed italics everywhere. */
.ms-hero-content-centered .ms-hero-h1,
.ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark,
.ms-hero-content-centered .ms-hero-h1 em,
.ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark em {
  font-family: 'Fraunces', 'Playfair Display', serif !important;
}
.ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(78px, 11.2vw, 134px) !important;
}
.ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark em {
  color: var(--brand) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.ms-hero-content-centered .ms-hero-h1 em {
  font-style: italic !important;
  color: var(--ms-sand, #C9B99A) !important;
  font-weight: 400 !important;
}

/* Centre the whole hero content stack */
.ms-hero-content-centered {
  text-align: center !important;
}
.ms-hero-content-centered .ms-hero-eyebrow,
.ms-hero-content-centered .ms-hero-h1,
.ms-hero-content-centered .ms-hero-cta-row {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center;
}
/* v207 — tagline relocated to sit just under the "Plan my trip" CTA */
.ms-hero-eyebrow-below {
  display: inline-block !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

/* Search bar — fully transparent except for a hairline border */
.ms-hero-search {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-left: auto;
  margin-right: auto;
}
.ms-hero-search input {
  color: #fff !important;
}
.ms-hero-search input::placeholder {
  color: rgba(255,255,255,0.75) !important;
}

/* ── Sliding animation for the feature promo trip card ── */
@keyframes tripSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes tripSlideInRev {
  from { opacity: 0; transform: translateX(-40px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}
.trip-feature {
  animation: tripSlideIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trip-slider-feature[data-dir="prev"] .trip-feature {
  animation-name: tripSlideInRev;
}

/* Theme card carousel: gentle fade-in on tab activation */
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card {
  animation: tripSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(1) { animation-delay: 0.00s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(2) { animation-delay: 0.05s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(3) { animation-delay: 0.10s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(4) { animation-delay: 0.15s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(5) { animation-delay: 0.20s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(6) { animation-delay: 0.25s; }
.trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card:nth-child(7) { animation-delay: 0.30s; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 20
   • Search bar: input itself transparent (was inheriting white)
   • Hero: every text node centred including sub-lines
   ════════════════════════════════════════════════════════════════ */

/* Kill the white input background inside the search pill */
.ms-hero-search input,
.ms-hero-search input:focus,
.ms-hero-search input:active,
.ms-hero-search input:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: center !important;
  color: #fff !important;
}
.ms-hero-search input::-webkit-search-cancel-button,
.ms-hero-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Autofill rule: Chrome paints inputs yellow/white on autofill —
   force it transparent on this one. */
.ms-hero-search input:-webkit-autofill,
.ms-hero-search input:-webkit-autofill:hover,
.ms-hero-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #fff;
}

/* Centre every text node in the hero (including line-broken spans
   and the eyebrow pill). */
.ms-hero-content-centered,
.ms-hero-content-centered .ms-hero-h1,
.ms-hero-content-centered .ms-hero-h1-line,
.ms-hero-content-centered .ms-hero-eyebrow,
.ms-hero-content-centered .ms-hero-cta-row,
.ms-hero-content-centered .ms-hero-search {
  text-align: center !important;
  justify-content: center;
  align-items: center;
}
.ms-hero-content-centered .ms-hero-h1-line { display: block !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 21
   Hero — vertically and horizontally centred as a single stack.
   Brings the credibility row inside the centred column.
   ════════════════════════════════════════════════════════════════ */

.ms-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Re-flow the absolute-positioned content into normal flex flow so
   it can be centred together with the credibility row. */
.ms-hero-content-centered {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  width: 100%;
  max-width: 92vw !important;
  margin: 0 auto !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px;
}
.ms-hero-content-centered > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Credibility row — drop the absolute bottom positioning, let it sit
   under the CTAs as part of the centred stack. */
.ms-hero-credibility {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 24px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 12px 28px;
  max-width: 92vw;
}

/* Mount the credibility row right after the .ms-hero-content via grid
   reorder is not possible across siblings, so keep them as siblings
   under .ms-hero flexbox and centre both. */
.ms-hero > .ms-hero-bg { position: absolute !important; inset: 0; z-index: 0; }
.ms-hero > .ms-hero-content-centered { z-index: 5; }
.ms-hero > .ms-hero-credibility { z-index: 5; position: absolute !important; bottom: 20px; left: 0; right: 0; }
@media (min-width: 901px) {
  .ms-hero > .ms-hero-credibility { bottom: 28px; }
}

/* Phase 21 follow-up: kill the legacy msSlideIn animation that finished
   on translateY(-50%) — it was pushing the content above viewport
   centre even after we switched to flex centring. */
.ms-hero-content-centered {
  animation: none !important;
}

/* Phase 21 follow-up #2 — the .ms-hero-content (NOT -centered) class
   in styles.css applies transform: translateY(-50%). Overriding it. */
.ms-hero-content,
.ms-hero-content.ms-hero-content-centered {
  transform: none !important;
  top: auto !important;
  left: auto !important;
  position: static !important;
}

/* Phase 21 follow-up #3 — styles.css has a desktop media-query rule with
   3-class specificity that pulls the hero content back to the LEFT and
   re-applies translateY(-50%). Override with matching specificity. */
@media (min-width: 1024px) {
  .ms-hero.ms-hero-static .ms-hero-content.ms-hero-content-centered {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 92vw !important;
  }
  .ms-hero.ms-hero-static .ms-hero-cta-row { justify-content: center !important; }
}

/* Phase 21 follow-up #4 — credibility bar got top:433 from a more
   specific desktop rule; force it back to the bottom of the hero. */
.ms-hero > .ms-hero-credibility,
.ms-hero.ms-hero-static .ms-hero-credibility {
  top: auto !important;
  bottom: 24px !important;
  left: 16px !important;
  right: 16px !important;
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 22
   • Trip feature card +30% taller, more breathing room.
   • Catalog prices in brand color.
   • Theme cards: no price chips.
   ════════════════════════════════════════════════════════════════ */

/* Feature card: image min-height +30%, body padding +30% */
.trip-feature-img { min-height: 546px !important; }
.trip-feature-body { padding: 42px 46px 36px !important; }
.trip-feature-title { font-size: clamp(28px, 2.6vw, 40px) !important; }
.trip-feature-teaser { font-size: 16px !important; line-height: 1.6 !important; }
.trip-feature-highlights { gap: 10px !important; margin: 0 0 26px !important; }
.trip-feature-highlights li { font-size: 14.5px !important; }

@media (max-width: 900px) {
  .trip-feature-img { min-height: 338px !important; }
  .trip-feature-body { padding: 30px 26px 28px !important; }
}

/* Catalog price amount in brand color (we already had it on trip
   cards — apply the same rule to the catalog grid). */
.cat-price-amount,
#catalog .cat-price-amount {
  color: var(--brand) !important;
  font-family: var(--apple-display);
  font-weight: 700;
}
.cat-price-from,
#catalog .cat-price-from {
  color: #6e6e73 !important;
  letter-spacing: 0.10em;
}

/* Theme cards: no price block in the foot row even if data exists */
.cat-card-theme .trip-card-price { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 23
   Trip pop-up modal: brand color on headlines and features
   ════════════════════════════════════════════════════════════════ */

/* Section headings inside the modal (HØYDEPUNKTER, TEMA, DAG FOR DAG,
   INKLUDERT, IKKE INKLUDERT, T&Cs etc.) */
.itin-modal-h3 {
  color: var(--brand) !important;
  font-weight: 700 !important;
}

/* Day-card eyebrow ("DAG 1", "DAY 1", "JOUR 1") */
.itin-modal-day-num {
  color: var(--brand) !important;
  font-weight: 700 !important;
}

/* Day route (the trip line under the day number) — keep ink, but for
   visual hierarchy let the route remain dark. We only brand the headlines. */
.itin-modal-day-route {
  color: #1d1d1f !important;
}

/* "From / On request" price block in the side meta column */
.itin-modal-price-label { color: #6e6e73 !important; }
.itin-modal-price-value { color: var(--brand) !important; }
.itin-modal-price-sub   { color: #6e6e73 !important; }

/* Feature bullets in the highlights list (the dashes turn brand,
   but the included ✓ stays green, excluded ✕ stays orange — those
   are semantic and shouldn't be re-coloured). */
.itin-modal-ul li::before { color: var(--brand) !important; }
.itin-modal-ul.itin-included li::before { color: #2a7c5a !important; }
.itin-modal-ul.itin-excluded li::before { color: var(--brand, #e0432a) !important; }

/* "Idéal pour / Perfekt for" label inside the feature trip card
   already lives outside the modal — these are the modal-side accents
   only. */

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 24
   Trip pop-up modal v2 — tabbed layout + nicer itinerary timeline
   ════════════════════════════════════════════════════════════════ */

/* ── Tab bar sitting between the hero and the body ─────────────── */
.itin-modal-v2 .itin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: 0;
  z-index: 4;
}
.itin-modal-v2 .itin-tabs::-webkit-scrollbar { display: none; }
.itin-modal-v2 .itin-tab {
  position: relative;
  padding: 16px 16px;
  background: transparent;
  border: none;
  font-family: var(--apple-font);
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.itin-modal-v2 .itin-tab:hover { color: #1d1d1f; }
.itin-modal-v2 .itin-tab.is-active {
  color: var(--brand);
  font-weight: 600;
}
.itin-modal-v2 .itin-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* ── Hero "Ideal for" pill ───────────────────────────────────── */
.itin-modal-hero-pill {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-size: 13px;
  align-self: flex-start;
}
.itin-modal-hero-pill-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* ── Overview stat row (Duration · From · Route) ──────────────── */
.itin-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 20px 0 28px;
  padding: 16px 18px;
  background: #f5f5f7;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.04);
}
.itin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.itin-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6e6e73;
}
.itin-stat-value {
  font-family: var(--apple-display);
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.itin-stat-price { color: var(--brand) !important; }
.itin-stat-route { font-size: 14px; font-weight: 500; line-height: 1.35; }

/* ── Itinerary tab: vertical timeline ─────────────────────────── */
.itin-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.itin-timeline-h {
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
.itin-timeline-count {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(224,67,42,0.08);
  padding: 4px 11px;
  border-radius: 999px;
}
.itin-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.itin-timeline-list::before {
  content: '';
  position: absolute;
  left: 17px; top: 18px; bottom: 18px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(224,67,42,0.35), rgba(224,67,42,0.06));
}
.itin-timeline-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 16px;
}
.itin-timeline-item:last-child { padding-bottom: 0; }
.itin-timeline-marker {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 1;
}
/* Numbered circle badge — replaces old dot + floating number */
.itin-tl-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(224,67,42,0.28), 0 0 0 3px #fff;
  flex-shrink: 0;
  font-family: -apple-system, system-ui, sans-serif;
}
/* keep old dot + day classes for backward compat */
.itin-timeline-dot { display: none; }
.itin-timeline-day { display: none; }
.itin-timeline-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 13px 17px 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.22s ease;
}
.itin-timeline-card:hover {
  border-color: rgba(224,67,42,0.22);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateX(3px);
}
.itin-timeline-eyebrow { display: none; }
.itin-timeline-route {
  font-family: var(--apple-display);
  font-weight: 600;
  font-size: 15px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.itin-timeline-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.58;
  color: #4a4a4f;
}

/* ── Includes tab: two distinct columns with subtle backgrounds ── */
.itin-includes-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.itin-includes-col {
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #f5f5f7;
  border: 1px solid rgba(0,0,0,0.05);
}
.itin-includes-col-yes { background: rgba(42,124,90,0.06); border-color: rgba(42,124,90,0.18); }
.itin-includes-col-no  { background: rgba(224,67,42,0.06); border-color: rgba(224,67,42,0.18); }
@media (max-width: 700px) {
  .itin-includes-grid { grid-template-columns: 1fr; }
}

/* ── Booking tab: price hero card + CTA row + terms ──────────── */
.itin-booking-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f5f5f7 0%, #fff 100%);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 22px;
  text-align: center;
}
.itin-booking-from {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e6e73;
}
.itin-booking-amount {
  font-family: var(--apple-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.025em;
  line-height: 1;
}
.itin-booking-per {
  font-size: 12.5px;
  color: #6e6e73;
}
.itin-booking-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}
.itin-booking-cta-row .btn { border-radius: 999px !important; padding: 12px 22px !important; }
.itin-booking-btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(225,67,42,0.30);
}

/* Terms list refined */
.itin-modal-terms {
  background: #f5f5f7;
  border-radius: 16px;
  padding: 20px 22px;
}
.itin-modal-terms .itin-modal-h3 { margin-top: 0 !important; }
.itin-modal-terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-modal-terms-list li {
  padding-left: 18px;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: #424245;
}
.itin-modal-terms-list li::before {
  content: '·';
  position: absolute;
  left: 6px; top: -2px;
  color: var(--brand);
  font-weight: 700;
  font-size: 18px;
}

/* Tweaks to body padding so the tabbar lines up nicely */
.itin-modal-v2 .itin-modal-body { padding: 24px 28px 28px !important; }
@media (max-width: 700px) {
  .itin-modal-v2 .itin-modal-body { padding: 20px 18px 24px !important; }
  .itin-modal-v2 .itin-tabs { padding: 0 14px; }
  .itin-modal-v2 .itin-tab { padding: 14px 12px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 25
   • Auth modal redesigned to match the Account / Apple-ID sheet
   • Brand-color accents, calm white background, generous padding
   ════════════════════════════════════════════════════════════════ */

/* Modal sheet — tighten the surface to a calmer width */
.auth-modal {
  width: min(440px, 100%) !important;
  max-width: min(440px, 100%) !important;
  background: #fff !important;
  padding: 40px 36px 32px !important;
  border-radius: 26px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 24px 60px rgba(0,0,0,0.18),
    0 64px 120px rgba(0,0,0,0.10) !important;
}

/* Logo block on home view — small product avatar like Apple ID */
.auth-modal .auth-logo {
  display: inline-flex !important;
  margin: 0 auto 18px !important;
}
.auth-modal .auth-logo img {
  width: 64px; height: 64px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
}

/* Title sits big and tight, em → brand red */
.auth-modal .auth-title {
  font-family: var(--apple-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  margin: 0 0 6px !important;
  text-align: center;
}
.auth-modal .auth-title em {
  font-style: normal !important;
  color: var(--brand) !important;
  font-weight: inherit !important;
}
.auth-modal .auth-sub {
  font-size: 14px;
  line-height: 1.55;
  color: #6e6e73;
  text-align: center;
  max-width: 340px;
  margin: 0 auto 18px !important;
}

/* Google button — full pill, off-white, hairline border */
.auth-modal .auth-google-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 999px !important;
  font-family: var(--apple-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1d1d1f !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
.auth-modal .auth-google-btn:hover { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.24) !important; }
.auth-modal .auth-google-btn:disabled { opacity: 0.6; cursor: wait; }

/* Divider — thin line · OR · thin line */
.auth-modal .auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 16px;
  font-size: 11px;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.auth-modal .auth-divider::before,
.auth-modal .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

/* Sign-in / Create-account split row */
.auth-modal .auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.auth-modal .auth-alt-btn {
  padding: 13px 14px !important;
  border-radius: 999px !important;
  font-family: var(--apple-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.auth-modal .auth-alt-btn-secondary {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}
.auth-modal .auth-alt-btn-secondary:hover { background: #ececef !important; }
.auth-modal .auth-alt-btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(225,67,42,0.30);
}
.auth-modal .auth-alt-btn-primary:hover { background: #c43a23 !important; }
.auth-modal .auth-submit { width: 100%; margin-top: 8px !important; }

/* Skip link — quiet text link */
.auth-modal .auth-skip {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 6px;
  background: transparent;
  border: none;
  color: #6e6e73;
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-modal .auth-skip:hover { color: var(--brand); }

/* Back link */
.auth-modal .auth-back {
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  opacity: 0.85;
}
.auth-modal .auth-back:hover { opacity: 1; }

/* Fields */
.auth-modal .auth-fields {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.auth-modal .auth-fields .fld label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 5px;
}
.auth-modal .auth-fields input {
  width: 100%;
  padding: 13px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fafafa !important;
  font-family: var(--apple-font) !important;
  font-size: 14.5px !important;
  color: #1d1d1f !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.auth-modal .auth-fields input:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(225,67,42,0.14) !important;
}

/* Error pill */
.auth-modal .auth-err {
  margin: 4px 0 0 !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(225,67,42,0.08);
  border: 1px solid rgba(225,67,42,0.25);
  font-size: 13px;
  color: var(--brand);
  line-height: 1.4;
}

/* Bottom switch line */
.auth-modal .auth-switch {
  text-align: center;
  font-size: 13px;
  color: #6e6e73;
  margin: 18px 0 0 !important;
}
.auth-modal .auth-switch button {
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* Close button override — soft grey circle, not the dark-glass one */
.auth-modal .auth-close,
.auth-modal-backdrop .auth-close,
.auth-backdrop .auth-close {
  background: rgba(0,0,0,0.06) !important;
  color: #1d1d1f !important;
  width: 32px !important; height: 32px !important;
  backdrop-filter: none !important;
}
.auth-modal .auth-close:hover,
.auth-backdrop .auth-close:hover { background: rgba(0,0,0,0.12) !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 26
   • Floating Instagram + WhatsApp widgets guaranteed circular
   • WhatsApp button now carries the official-style logo + pulse
   ════════════════════════════════════════════════════════════════ */

/* Force the social FABs to a perfect circle. The earlier universal
   pill rule made buttons 999px which IS a circle on a square box —
   but extras.jsx wraps them with .ig-scroll-widget / .wa-widget
   containers that picked up the universal 18px-radius from Phase 4.
   Reset radii on the wrapper, then enforce 50% on the buttons. */
.wa-widget,
.ig-scroll-widget,
.ig-scroll-widget.expanded,
.wa-widget.open {
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.wa-btn,
.ig-scroll-btn {
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
}

/* WhatsApp button — proper green + softer shadow */
.wa-btn {
  background: #25D366 !important;
  color: #fff !important;
  box-shadow:
    0 6px 22px rgba(37,211,102,0.45),
    0 2px 8px rgba(37,211,102,0.30) !important;
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease !important;
}
.wa-btn:hover {
  transform: scale(1.08);
  box-shadow:
    0 10px 30px rgba(37,211,102,0.55),
    0 3px 10px rgba(37,211,102,0.32) !important;
}
.wa-btn svg { width: 28px !important; height: 28px !important; }

/* Pulse ring around WhatsApp button — calm + brand-green */
.wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  border: 2px solid #25D366;
  opacity: 0;
  animation: msWaPulse 2.4s cubic-bezier(0.2,0.8,0.2,1) infinite;
  pointer-events: none;
}
@keyframes msWaPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Instagram button — keep the brand gradient, ensure circular */
.ig-scroll-btn {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(220,39,67,0.42), 0 2px 8px rgba(220,39,67,0.28) !important;
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease !important;
}
.ig-scroll-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(220,39,67,0.50), 0 3px 10px rgba(220,39,67,0.30) !important;
}

/* WhatsApp open panel — round corners, white surface, no glass */
.wa-panel {
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.08) !important;
  padding: 18px !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  overflow: hidden !important;
}
.wa-panel-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  margin-bottom: 12px !important;
}
.wa-avatar {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa-panel-info strong { color: #1d1d1f !important; font-size: 14px !important; }
.wa-panel-info span { color: #6e6e73 !important; font-size: 11px !important; }
.wa-online {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(37,211,102,0.55);
}
.wa-bubble {
  background: #f5f5f7 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: #1d1d1f !important;
  margin-bottom: 12px !important;
}
.wa-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #fff !important;
  font-family: var(--apple-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 6px 18px rgba(37,211,102,0.35);
}
.wa-cta:hover { background: #1cb455 !important; transform: translateY(-1px); }

/* WhatsApp hint label that pops out next to the button */
.wa-hint {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  padding: 10px 14px !important;
  color: #1d1d1f !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
.wa-hint strong { color: #25D366 !important; }
.wa-hint span { color: #6e6e73 !important; }

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 27 · Auth-modal OAuth provider grid
   ════════════════════════════════════════════════════════════════ */

.auth-providers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.auth-provider-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  font-family: var(--apple-font);
  font-size: 11.5px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.auth-provider-btn:hover {
  background: #f5f5f7;
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.auth-provider-btn:disabled { opacity: 0.55; cursor: wait; }
.auth-provider-btn svg { display: block; }

@media (max-width: 380px) {
  .auth-providers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 28
   Hero live-search dropdown (as-you-type results across the site)
   ════════════════════════════════════════════════════════════════ */

.ms-hero-search-wrap {
  position: relative;
  width: min(560px, 92vw);
  margin: 0 auto;
}

.ms-hero-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.16),
    0 24px 60px rgba(0,0,0,0.14);
  padding: 8px;
  z-index: 10;
  max-height: 60vh;
  overflow-y: auto;
  animation: msHeroSearchIn 0.18s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes msHeroSearchIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-hero-search-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: #6e6e73;
  font-family: var(--apple-font);
}

.ms-hero-search-result {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
  font-family: var(--apple-font);
}
.ms-hero-search-result:hover,
.ms-hero-search-result.is-active {
  background: #f5f5f7;
}

.ms-hero-search-icon-cell {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}

.ms-hero-search-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-hero-search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-hero-search-result-sub {
  font-size: 12px;
  color: #6e6e73;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-hero-search-result-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  background: rgba(225,67,42,0.10);
  color: var(--brand);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .ms-hero-search-dropdown { border-radius: 18px; padding: 6px; }
  .ms-hero-search-result { grid-template-columns: 32px 1fr auto; gap: 8px; }
  .ms-hero-search-icon-cell { width: 32px; height: 32px; font-size: 16px; }
  .ms-hero-search-result-tag { padding: 3px 8px; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 29
   Mobile = native-app feel · minimalist · roomy · smooth touch
   ════════════════════════════════════════════════════════════════ */

/* Flags-only pill — two flags separated by a dot */
.ms-lc-pill {
  padding: 4px 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  gap: 4px !important;
}
.ms-lc-flag  { font-size: 16px !important; line-height: 1; }
.ms-lc-sep   { font-size: 11px !important; opacity: 0.4; padding: 0 1px; }
/* Flags-only option buttons — compact square grid cells */
.ms-lc-opt.flags-only {
  justify-content: center !important;
  padding: 8px 6px !important;
  font-size: 20px !important;
  width: auto !important;
  min-width: 44px !important;
  gap: 4px !important;
}

/* ── iOS rendering basics ─────────────────────────────────────── */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input, textarea, select, button { font-size: 16px !important; }   /* avoid Safari zoom */
button, a, label, .clickable { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: none) {
  /* On touch devices, kill the hover-lift transforms that cause "stuck hover" */
  .cat-card:hover, .theme-card:hover, .trip-feature:hover { transform: none !important; }
}

/* Active-state spring for buttons + cards (Apple-style press) */
@media (hover: none) and (pointer: coarse) {
  button:active, .btn:active, .cat-card:active, .theme-card:active,
  .trip-feature:active, .trip-filter-chip:active, .ms-lc-pill:active,
  .nav-pill-btn:active, .trip-feature-cta:active, .auth-alt-btn:active,
  .auth-google-btn:active, .auth-provider-btn:active {
    transform: scale(0.97) !important;
    transition: transform 0.10s ease-out !important;
  }
}

/* ── Phone (≤640) — full app shell ────────────────────────────── */
@media (max-width: 640px) {

  /* Roomier, gentler section rhythm */
  .section, section.section, .itin-section, .reiseplaner-section,
  .catalog, #contact, #plan, .ms-form-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .wrap, .wrap-wide { padding-left: 16px; padding-right: 16px; }

  /* Section heads breathe more, type calmer */
  .section-head { margin-bottom: 28px !important; }
  h1, .hero-h1 { font-size: clamp(32px, 9vw, 48px) !important; line-height: 1.04 !important; }
  h2 { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(18px, 4.6vw, 22px) !important; }
  p, li, .lead { font-size: 14.5px !important; line-height: 1.55 !important; }

  /* Nav: clean app top bar with safe area + slimmer height */
  .nav { padding-top: env(safe-area-inset-top, 0) !important; }
  .nav .nav-links { display: none !important; }    /* nav links → hidden, use search/scroll */
  .nav-inner { padding: 8px 14px !important; }
  .nav-logo { font-size: 15px !important; gap: 6px !important; }
  .logo-img { width: 30px !important; height: 30px !important; border-radius: 9px !important; }

  /* Hero: tighter padding so it never feels squeezed and never overflows */
  .ms-hero,
  .ms-hero.ms-hero-static {
    min-height: calc(100dvh - 64px) !important;
    height: auto !important;
  }
  .ms-hero-content-centered { padding: 16px !important; gap: 14px !important; }
  .ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark {
    font-size: clamp(56px, 18vw, 88px) !important;
    line-height: 1.02 !important;
  }
  .ms-hero-content-centered .ms-hero-h1 {
    font-size: clamp(18px, 4.5vw, 24px) !important;
  }
  .ms-hero-eyebrow { font-size: 10.5px !important; padding: 6px 14px !important; }
  .ms-hero-cta-row { flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; }
  .ms-hero-cta { padding: 12px 20px !important; font-size: 14.5px !important; }
  .ms-hero-credibility {
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    gap: 8px 18px !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-left: 16px; padding-right: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ms-hero-credibility::-webkit-scrollbar { display: none; }
  .ms-cred-item { flex-shrink: 0 !important; min-width: 0 !important; }

  /* Hero search: full pill, comfortable height, transparent */
  .ms-hero-search-wrap { width: 100% !important; max-width: 100% !important; }
  .ms-hero-search { padding: 5px 5px 5px 12px !important; }
  .ms-hero-search input { font-size: 15px !important; padding: 9px 4px !important; }
  .ms-hero-search-btn { padding: 9px 16px !important; font-size: 13px !important; }
  .ms-hero-search-dropdown { left: 4px; right: 4px; max-height: 56vh; }

  /* Trip section: roomy single-column */
  .trip-feature { border-radius: 22px !important; }
  .trip-feature-img { min-height: 240px !important; }
  .trip-feature-body { padding: 22px 18px 20px !important; }
  .trip-feature-title { font-size: 22px !important; }
  .trip-feature-teaser { font-size: 14.5px !important; }
  .trip-feature-highlights li { font-size: 13.5px !important; }
  .trip-feature-cta { width: 100%; padding: 14px 18px !important; }
  .trip-slider-feature .trip-slider-arrow.prev { left: -6px !important; }
  .trip-slider-feature .trip-slider-arrow.next { right: -6px !important; }
  .trip-slider-arrow { width: 38px !important; height: 38px !important; }

  /* Trip filter bar: scroll horizontal, padding for fingers */
  .trip-filter-scroll { padding: 5px !important; }
  .trip-filter-chip { padding: 9px 14px !important; font-size: 13px !important; min-height: 40px; }

  /* Catalog cards: full-width, big tap area */
  .cat-grid, .reiseplaner-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cat-card { border-radius: 20px !important; }
  .cat-img { aspect-ratio: 16/10 !important; }
  .cat-body { padding: 16px 18px 18px !important; }
  .cat-title { font-size: 17px !important; }
  .cat-arrow { width: 40px !important; height: 40px !important; }

  /* Catalog tabs: become a clean scrollable segmented control */
  .cat-tabs-v2, .cat-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 4px !important;
    background: rgba(0,0,0,0.05) !important;
    border-radius: 999px !important;
    scrollbar-width: none;
  }
  .cat-tabs-v2::-webkit-scrollbar { display: none; }
  .cat-tab-v2, .cat-tab {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }
  .cat-tab-v2.active, .cat-tab.active {
    background: #1d1d1f !important;
    color: #fff !important;
  }

  /* Themes carousel: cards 80% width, snap */
  .trip-slider:not(.trip-slider-feature) .trip-slider-track > .cat-card {
    flex: 0 0 78% !important;
    min-width: 0 !important;
  }
  .trip-slider:not(.trip-slider-feature) .trip-slider-track { padding: 4px 12px 12px !important; }

  /* Form sections: roomy inputs */
  .fld input, .fld textarea, .fld select, input, textarea, select {
    padding: 14px 14px !important;
    border-radius: 14px !important;
    min-height: 48px;
  }
  textarea { min-height: 110px; }
  .btn { padding: 14px 22px !important; font-size: 15px !important; min-height: 48px; border-radius: 999px !important; }
  .btn-primary, .btn.btn-primary { box-shadow: 0 6px 18px rgba(225,67,42,0.32) !important; }

  /* Itinerary modal hero crops less aggressively */
  .itin-modal-hero { height: 240px !important; }
  .itin-modal-title { font-size: 26px !important; }
  .itin-modal-route { font-size: 12.5px !important; }
  .itin-modal-v2 .itin-tabs { padding: 0 10px !important; }
  .itin-modal-v2 .itin-tab { padding: 14px 10px !important; font-size: 13px !important; }
  .itin-timeline-list::before { left: 15px !important; }
  .itin-timeline-item { grid-template-columns: 30px 1fr !important; gap: 10px !important; }
  .itin-tl-badge { width: 30px !important; height: 30px !important; font-size: 11px !important; }

  /* Auth modal: full-width sheet from the bottom feel */
  .auth-modal { padding: 28px 22px 22px !important; }
  .auth-modal .auth-title { font-size: 22px !important; }

  /* Contact section: phone widget + copy stack with breathing room */
  .contact-phone-wrap { min-height: 0 !important; margin-top: 16px !important; }
  .footer { padding: 40px 14px env(safe-area-inset-bottom, 20px) !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }

  /* Floating widgets push a little further from edge to avoid home indicator */
  .wa-widget, .ig-scroll-widget {
    bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
  }
}

/* (Bottom safe-area is handled per-element on .wa-widget, .ig-scroll-widget,
   .footer and modal sheets — no global body padding to avoid stray
   whitespace below the footer.) */

/* ── Tiny phone tweaks (≤420px) so brandmark always fits inside ── */
@media (max-width: 420px) {
  .ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark {
    font-size: clamp(40px, 13.5vw, 64px) !important;
    white-space: normal !important;
  }
  .ms-hero-eyebrow {
    white-space: normal !important;
    text-align: center;
    line-height: 1.35;
  }
}

/* Even smaller phones — make the brandmark word break to fit */
@media (max-width: 420px) {
  .ms-hero-content-centered .ms-hero-h1.ms-hero-brand .ms-hero-brandmark {
    font-size: clamp(34px, 11vw, 54px) !important;
    letter-spacing: -0.025em !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 30
   Deep mobile QA pass:
   • Tab bars no longer crash (flex-shrink:0 → real horizontal scroll)
   • Contact section fits inside the viewport
   • Instagram + WhatsApp widgets / panels constrained
   • Brand-color accents reinforced site-wide
   ════════════════════════════════════════════════════════════════ */

/* ─── TAB BARS — universal, smooth horizontal scroll ─────────── */
.cat-tabs-v2, .cat-tabs, .trip-filter-scroll, .itin-tabs,
.cat-filters, .reiseplaner-section-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.cat-tabs-v2::-webkit-scrollbar,
.cat-tabs::-webkit-scrollbar,
.trip-filter-scroll::-webkit-scrollbar,
.itin-tabs::-webkit-scrollbar,
.cat-filters::-webkit-scrollbar { display: none; }

.cat-tab-v2, .cat-tab, .trip-filter-chip, .itin-tab, .cat-filter,
#itineraries .cat-tabs-v2 .cat-tab-v2,
#catalog .cat-tabs-v2 .cat-tab-v2 {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  min-width: 0 !important;
  scroll-snap-align: start;
  white-space: nowrap !important;
}

/* Active tab — uses brand red instead of black so the system feels
   tied to the rest of the site */
.cat-tab-v2.active, .cat-tab.active {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(225,67,42,0.30) !important;
}
.trip-filter-chip.active {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ─── INSTAGRAM + WHATSAPP — contain to screen ─────────────── */
.ig-scroll-popup,
.wa-panel {
  max-width: calc(100vw - 28px) !important;
  width: min(320px, calc(100vw - 28px)) !important;
  box-sizing: border-box;
  word-break: break-word;
}
.wa-widget, .ig-scroll-widget {
  max-width: 100vw;
  z-index: 200 !important;
}

/* Phone widget inside contact area — clip to viewport */
.contact-phone-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 30 · MOBILE (≤640) — fix every overflow + nicer look
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Contact section: drop the side-by-side, full-width column,
     reset wild paddings, brand-tinted card */
  .contact-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    margin: 0 6px;
  }
  .contact-info { padding: 28px 22px !important; }
  .contact-rows { gap: 8px !important; margin-bottom: 22px !important; }
  .contact-row {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
  }
  .contact-row strong, .contact-row span { font-size: 13px !important; word-break: break-word; }

  /* Section heads + body inside contact — keep inside the viewport */
  #contact h2 { font-size: 26px !important; }
  #contact p { font-size: 14px !important; }

  /* Itinerary form step pills — fold to clean grid so they don't
     overflow on a 375px screen */
  .itin-stepper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    background: rgba(0,0,0,0.04) !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }
  .itin-step-pill {
    border-radius: 14px !important;
    padding: 10px 8px !important;
    font-size: 11.5px !important;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
  }
  .itin-step-pill .n {
    width: 18px !important; height: 18px !important;
    font-size: 10.5px !important;
    background: rgba(0,0,0,0.10);
  }
  .itin-step-pill.active { background: var(--brand) !important; color: #fff !important; }
  .itin-step-pill.active .n { background: #fff !important; color: var(--brand) !important; }

  /* IG + WA + Chatbot stack cleanly — no overlap on mobile */
  .wa-widget        { right: 14px !important; bottom: 18px  !important; }
  .ms-chat-fab      { right: 14px !important; bottom: 76px  !important; }
  .ig-scroll-widget { right: 14px !important; bottom: 134px !important; }
  .ms-weather-fab, .ms-weather { left: 14px !important; bottom: 18px !important; }
  .wa-btn, .ig-scroll-btn { width: 50px !important; height: 50px !important; }

  /* WhatsApp panel sits comfortably */
  .wa-panel {
    right: 0 !important;
    left: auto !important;
    width: min(310px, calc(100vw - 28px)) !important;
    padding: 16px !important;
  }
  .wa-bubble { font-size: 13px !important; }
  .wa-cta { font-size: 13.5px !important; padding: 11px 14px !important; }
  .wa-hint { font-size: 12px !important; padding: 8px 12px !important; }

  /* Instagram popup follows the same rule */
  .ig-scroll-popup {
    right: 0 !important;
    left: auto !important;
    width: min(290px, calc(100vw - 28px)) !important;
    padding: 14px !important;
  }
  .ig-scroll-desc { font-size: 12.5px !important; }

  /* Catalog modal — already responsive; just polish */
  .cat-modal-title { font-size: 22px !important; line-height: 1.2 !important; }
  .cat-modal-body  { padding: 22px 18px !important; }

  /* Filter sub-row (ALL · DISCOVER · IN THE AIR · NAUTICAL …) */
  .cat-filters { gap: 6px !important; padding-bottom: 6px; }
  .cat-filter, .cat-filter-pill {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
    flex-shrink: 0;
  }

  /* No element is allowed to overflow the page horizontally */
  html, body { overflow-x: hidden !important; }

  /* Footer credibility row — tighter */
  .footer-grid { gap: 22px !important; }
  .footer-grid h4 { font-size: 13px !important; }
  .footer-grid a, .footer-grid span { font-size: 13px !important; }

  /* Apple-style segmented control accent inside the trip modal tabs */
  .itin-modal-v2 .itin-tab.is-active {
    color: var(--brand) !important;
  }
  .itin-modal-v2 .itin-tab.is-active::after {
    background: var(--brand) !important;
  }

  /* Auth modal OAuth provider grid — make sure 6 cells fit */
  .auth-providers-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .auth-provider-btn { padding: 10px 4px !important; font-size: 10.5px !important; border-radius: 12px !important; }
}

/* Very small phones (≤380) — keep WhatsApp panel inside */
@media (max-width: 380px) {
  .wa-panel { width: calc(100vw - 28px) !important; }
  .ig-scroll-popup { width: calc(100vw - 28px) !important; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 31
   • Collapsible <details> for trip-modal terms
   • Tab bars get a brand-coloured fade + nudge so visitors see
     there's more content to scroll
   • Catalog grid switches to 2-per-row on mobile
   ════════════════════════════════════════════════════════════════ */

/* ── Collapsible terms ───────────────────────────────────────── */
.itin-terms-collapsible {
  background: #f5f5f7 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden;
}
.itin-terms-collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 16px 18px;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}
.itin-terms-collapsible summary::-webkit-details-marker { display: none; }
.itin-terms-collapsible summary:hover { background: rgba(0,0,0,0.03); }
.itin-terms-eyebrow {
  font-family: var(--apple-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
}
.itin-terms-chev {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: #fff;
  color: var(--brand);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.itin-terms-collapsible[open] .itin-terms-chev {
  transform: rotate(-180deg);
}
.itin-terms-collapsible .itin-modal-terms-list {
  padding: 0 18px 18px;
  animation: msTermsIn 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes msTermsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tab-bar scroll hint — gradient fade on the right edge ─── */
.cat-tabs-v2,
.cat-tabs,
.trip-filter-scroll,
.itin-tabs,
.cat-filters {
  position: relative;
  scroll-padding-left: 4px;
}
/* Mask edges with a brand-tinted fade so visitors see content
   continues beyond the visible row */
.trip-filter-bar,
#catalog .reiseplaner-section-header,
#catalog .cat-tabs-v2-wrap,
.cat-tabs-wrap {
  position: relative;
}
.trip-filter-bar::after,
.cat-tabs-fade-right {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44px;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.85) 60%, #fff 100%);
  border-radius: 0 999px 999px 0;
}
@keyframes msScrollNudge {
  0%, 100% { transform: translateX(0); }
  60%      { transform: translateX(-6px); }
}
.trip-filter-bar::before {
  content: '›';
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  pointer-events: none;
  z-index: 1;
  animation: msScrollNudge 1.6s ease-in-out infinite;
}

/* When the user has scrolled to the end, hide the hint */
.trip-filter-bar.is-at-end::before,
.trip-filter-bar.is-at-end::after { display: none; }

/* Apply the same fade hint at catalog top-level tabs */
.cat-tabs-v2 + *,
.cat-tabs + * { position: relative; }

/* ── Catalog grid 2 per row on mobile ─────────────────────── */
@media (max-width: 640px) {
  #catalog .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Keep card paddings comfortable in the smaller cell */
  #catalog .cat-card { border-radius: 18px !important; }
  #catalog .cat-img { aspect-ratio: 1 / 1 !important; }
  #catalog .cat-body { padding: 12px 12px 14px !important; }
  #catalog .cat-title {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #catalog .cat-area, #catalog .cat-duration {
    font-size: 10.5px !important;
    margin-bottom: 4px;
  }
  #catalog .cat-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 6px 0 8px !important;
  }
  #catalog .cat-rating { font-size: 11px !important; gap: 4px !important; }
  #catalog .cat-price-from { font-size: 9.5px !important; }
  #catalog .cat-price-amount { font-size: 14px !important; }
  #catalog .cat-foot { gap: 6px !important; flex-wrap: wrap !important; }
  #catalog .cat-arrow { width: 32px !important; height: 32px !important; }
  /* Trip grid (themes) stays as the slider above — only change catalog */

  /* Filter sub-row inside catalog — also gets the hint */
  .cat-filters { position: relative; }
  .cat-filters::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, #fff);
  }
}

/* ════════════════════════════════════════════════════════════════
   APPLE REDESIGN — Phase 32
   Catalog mobile cards: keep only rating · title · price · CTA
   (Tap opens the full detail in the modal.)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #catalog .cat-area,
  #catalog .cat-duration,
  #catalog .cat-desc,
  #catalog .cat-modal-pill {
    display: none !important;
  }
  #catalog .cat-body {
    padding: 10px 12px 12px !important;
    gap: 4px;
  }
  /* Tighten the rating chip so it sits right above the title */
  #catalog .cat-rating { margin-bottom: 4px !important; }
  /* Title — let it go 2 lines but no extra padding around */
  #catalog .cat-title { margin: 2px 0 4px !important; }
  /* Foot row: price · arrow, no extra spacing */
  #catalog .cat-foot {
    border-top: none !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ITINERARY MODAL — Apple Design
   Small fonts · brand color arrows · smooth & elegant
   ═══════════════════════════════════════════════════════════════════ */

/* Backdrop — frosted glass */
.itin-modal-backdrop {
  background: rgba(0,0,0,0.50) !important;
  backdrop-filter: saturate(160%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(28px) !important;
  align-items: center !important;
  padding: 20px 16px !important;
}

/* Modal shell */
.itin-modal.itin-modal-v2 {
  max-width: min(1200px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 16px 48px rgba(0,0,0,0.22),
    0 40px 100px rgba(0,0,0,0.18),
    0 0 0 0.5px rgba(0,0,0,0.06) !important;
}

/* Close button */
.itin-modal.itin-modal-v2 .itin-modal-close {
  position: sticky !important;
  float: right !important;
  top: 14px !important;
  margin: 14px 14px -44px 0 !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(8px) !important;
  color: rgba(0,0,0,0.65) !important;
  font-size: 15px !important;
  z-index: 10 !important;
  box-shadow: none !important;
}
.itin-modal.itin-modal-v2 .itin-modal-close:hover {
  background: rgba(0,0,0,0.18) !important;
}

/* Hero */
.itin-modal.itin-modal-v2 .itin-modal-hero {
  height: clamp(210px, 30vh, 310px) !important;
  border-radius: 0 !important;
}
.itin-modal.itin-modal-v2 .itin-modal-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.82) 100%
  ) !important;
  padding: 20px 24px 22px !important;
}
.itin-modal.itin-modal-v2 .itin-modal-eyebrow {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.70) !important;
  margin-bottom: 7px !important;
  text-transform: uppercase !important;
}
.itin-modal.itin-modal-v2 .itin-modal-title {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: clamp(20px, 4vw, 26px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35) !important;
}
.itin-modal.itin-modal-v2 .itin-modal-route {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.72) !important;
  letter-spacing: 0.01em !important;
}
.itin-modal.itin-modal-v2 .itin-modal-hero-pill {
  margin-top: 10px !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 999px !important;
  padding: 4px 11px 4px 9px !important;
  font-size: 11.5px !important;
  font-family: -apple-system, system-ui, sans-serif !important;
  backdrop-filter: blur(8px) !important;
}
.itin-modal.itin-modal-v2 .itin-modal-hero-pill-label {
  font-size: 9.5px !important;
  letter-spacing: 0.09em !important;
  opacity: 0.72 !important;
}

/* ── Tab bar ── */
.itin-modal.itin-modal-v2 .itin-tabs {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  backdrop-filter: blur(12px) !important;
}

/* Arrows — brand color */
.itin-modal.itin-modal-v2 .itin-tab-arrow {
  color: var(--brand, #e0432a) !important;
  opacity: 1 !important;
}
.itin-modal.itin-modal-v2 .itin-tab-arrow:disabled {
  color: rgba(0,0,0,0.18) !important;
  opacity: 1 !important;
}
.itin-modal.itin-modal-v2 .itin-tab-arrow:hover:not(:disabled) {
  background: rgba(224,67,42,0.06) !important;
  color: var(--brand, #e0432a) !important;
}
.itin-modal.itin-modal-v2 .itin-tab-arrow-prev {
  border-right-color: rgba(0,0,0,0.07) !important;
}
.itin-modal.itin-modal-v2 .itin-tab-arrow-next {
  border-left-color: rgba(0,0,0,0.07) !important;
}

/* Tabs */
.itin-modal.itin-modal-v2 .itin-tab {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: rgba(0,0,0,0.38) !important;
  padding: 12px 8px !important;
  text-transform: uppercase !important;
}
.itin-modal.itin-modal-v2 .itin-tab.is-active {
  color: var(--brand, #e0432a) !important;
  font-weight: 600 !important;
}
.itin-modal.itin-modal-v2 .itin-tab::after {
  background: var(--brand, #e0432a) !important;
  height: 2px !important;
}
.itin-modal.itin-modal-v2 .itin-tab:hover:not(.is-active) {
  color: rgba(0,0,0,0.58) !important;
}

/* ── Body ── */
.itin-modal.itin-modal-v2 .itin-modal-body {
  padding: 24px 32px 40px !important;
}

/* Overview */
.itin-modal.itin-modal-v2 .itin-modal-overview {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: rgba(0,0,0,0.52) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 20px !important;
}

/* Stats row */
.itin-modal.itin-modal-v2 .itin-stat-row {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  gap: 0 !important;
}
.itin-modal.itin-modal-v2 .itin-stat {
  gap: 3px !important;
}
.itin-modal.itin-modal-v2 .itin-stat-label {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: var(--brand, #e0432a) !important;
  text-transform: uppercase !important;
}
.itin-modal.itin-modal-v2 .itin-stat-value {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
}
.itin-modal.itin-modal-v2 .itin-stat-price {
  color: var(--brand, #e0432a) !important;
}

/* Section headings */
.itin-modal.itin-modal-v2 .itin-modal-h3 {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--brand, #e0432a) !important;
  margin-bottom: 10px !important;
}

/* Lists */
.itin-modal.itin-modal-v2 .itin-modal-ul li {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(0,0,0,0.68) !important;
  line-height: 1.52 !important;
  letter-spacing: -0.005em !important;
}
.itin-modal.itin-modal-v2 .itin-modal-ul li::before {
  color: var(--brand, #e0432a) !important;
}
.itin-modal.itin-modal-v2 .itin-modal-ul.itin-included li::before {
  content: '✓' !important;
  color: #2a9d5c !important;
}
.itin-modal.itin-modal-v2 .itin-modal-ul.itin-excluded li::before {
  content: '✕' !important;
  color: #d04c2f !important;
}

/* Tags */
.itin-modal.itin-modal-v2 .itin-modal-tags {
  gap: 5px !important;
}
.itin-modal.itin-modal-v2 .itin-modal-tag {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: rgba(224,67,42,0.08) !important;
  color: var(--brand, #e0432a) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  letter-spacing: -0.01em !important;
}

/* Grid */
.itin-modal.itin-modal-v2 .itin-modal-grid {
  gap: 16px !important;
  margin-bottom: 22px !important;
}

/* ── Timeline ── */
.itin-modal.itin-modal-v2 .itin-timeline-list::before {
  background: linear-gradient(to bottom, rgba(224,67,42,0.30), rgba(224,67,42,0.05)) !important;
  width: 2px !important;
  left: 17px !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-item {
  grid-template-columns: 36px 1fr !important;
  gap: 14px !important;
  padding-bottom: 14px !important;
}
.itin-modal.itin-modal-v2 .itin-tl-badge {
  width: 36px !important; height: 36px !important;
  background: var(--brand, #e0432a) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(224,67,42,0.25), 0 0 0 3px #fff !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-card {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 13px !important;
  padding: 12px 16px 14px !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-card:hover {
  background: #eaeaec !important;
  transform: translateX(2px) !important;
  box-shadow: none !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-route {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
  margin-bottom: 5px !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-text {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: rgba(0,0,0,0.50) !important;
  letter-spacing: -0.005em !important;
}
/* Timeline header (count pill) */
.itin-modal.itin-modal-v2 .itin-timeline-header {
  margin-bottom: 18px !important;
}
.itin-modal.itin-modal-v2 .itin-timeline-count {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 10px !important;
  background: rgba(224,67,42,0.09) !important;
  color: var(--brand, #e0432a) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* ── Time-of-day slots inside timeline card ── */
/* ── Time-of-day slots — stacked layout, no overflow ── */
.itin-tl-slots {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 8px;
}
.itin-tl-slot {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.itin-tl-slot-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand, #e0432a);
  opacity: 0.7;
}
.itin-tl-slot-icon { font-size: 11px; line-height: 1; opacity: 0.85; }
.itin-tl-slot-text {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,0.65);
  line-height: 1.55;
  padding-left: 1px;
}

/* ── Includes / Excludes — clean, no backgrounds ── */
.itin-inex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  overflow: hidden;
}
.itin-inex-col {
  padding: 20px 20px 22px;
}
.itin-inex-col-no {
  border-left: 1px solid rgba(0,0,0,0.07);
}
.itin-inex-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.itin-inex-header-yes { color: #2a9d5c; }
.itin-inex-header-no  { color: #86868b; }
.itin-inex-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-inex-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(0,0,0,0.68);
  line-height: 1.45;
}
.itin-inex-dot {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  width: 14px;
  text-align: center;
}
.itin-inex-dot-yes { color: #2a9d5c; }
.itin-inex-dot-no  { color: #c0c0c8; }

@media (max-width: 600px) {
  .itin-inex { grid-template-columns: 1fr; }
  .itin-inex-col-no { border-left: none; border-top: 1px solid rgba(0,0,0,0.07); }
  .itin-tl-slot { gap: 2px; }
}

/* ── Booking tab ── */
.itin-modal.itin-modal-v2 .itin-booking-price-card {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 24px 22px !important;
  margin-bottom: 20px !important;
  gap: 4px !important;
}
.itin-modal.itin-modal-v2 .itin-booking-from {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.32) !important;
}
.itin-modal.itin-modal-v2 .itin-booking-amount {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: clamp(34px, 6vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  color: var(--brand, #e0432a) !important;
  line-height: 1.05 !important;
}
.itin-modal.itin-modal-v2 .itin-booking-per {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(0,0,0,0.36) !important;
  letter-spacing: -0.01em !important;
}
.itin-modal.itin-modal-v2 .itin-booking-cta-row {
  gap: 10px !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
}
.itin-modal.itin-modal-v2 .itin-booking-cta-row .btn {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  letter-spacing: -0.01em !important;
}
.itin-modal.itin-modal-v2 .itin-booking-btn-primary {
  background: var(--brand, #e0432a) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(224,67,42,0.30) !important;
}
.itin-modal.itin-modal-v2 .itin-booking-btn-primary:hover {
  opacity: 0.90 !important;
}

/* ── Terms ── */
.itin-modal.itin-modal-v2 .itin-modal-terms {
  background: #f5f5f7 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-top: 8px !important;
}
.itin-modal.itin-modal-v2 .itin-terms-eyebrow {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.42) !important;
  letter-spacing: 0.01em !important;
}
.itin-modal.itin-modal-v2 .itin-modal-terms-list {
  margin-top: 12px !important;
  gap: 7px !important;
}
.itin-modal.itin-modal-v2 .itin-modal-terms-list li {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(0,0,0,0.42) !important;
  line-height: 1.55 !important;
  padding-left: 15px !important;
}
.itin-modal.itin-modal-v2 .itin-modal-terms-list li::before {
  content: '·' !important;
  color: var(--brand, #e0432a) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  top: 1px !important;
}

/* ── Partner strip ── */
.itin-modal.itin-modal-v2 .itin-partner-strip {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}
.itin-modal.itin-modal-v2 .itin-partner-eyebrow {
  font-size: 9.5px !important;
  font-family: -apple-system, system-ui, sans-serif !important;
  letter-spacing: 0.10em !important;
  color: rgba(0,0,0,0.30) !important;
}
.itin-modal.itin-modal-v2 .itin-partner-name {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
}

/* ── Formulas / Extras ── */
.itin-modal.itin-modal-v2 .itin-formula-card,
.itin-modal.itin-modal-v2 .itin-extra-card {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 12px !important;
}
.itin-modal.itin-modal-v2 .itin-formula-name,
.itin-modal.itin-modal-v2 .itin-extra-name {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
}
.itin-modal.itin-modal-v2 .itin-formula-price {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--brand, #e0432a) !important;
}

/* ── Mobile sheet ── */
@media (max-width: 580px) {
  .itin-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .itin-modal.itin-modal-v2 {
    border-radius: 22px 22px 0 0 !important;
    max-width: 100% !important;
    max-height: 93dvh !important;
  }
  .itin-modal.itin-modal-v2 .itin-modal-body {
    padding: 18px 16px 32px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   COLLABORATION FORM — footer band + nav link
   ════════════════════════════════════════════════════════════════ */

/* Nav collaborate link — subtle accent */
.nav-links .nav-collab-link {
  color: var(--brand, #e0432a) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 8px 14px !important;       /* match the other nav links so it aligns */
  border-radius: 999px !important;
  background: none !important;
  white-space: nowrap;
}
.nav-links .nav-collab-link:hover {
  background: none !important;
  opacity: .8;
}
.nav.over-hero .nav-links .nav-collab-link {
  color: #fff !important;
}
.nav.over-hero .nav-links .nav-collab-link:hover {
  background: none !important;
}

/* Collab band in footer */
.footer-collab {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px 48px;
  align-items: start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 36px 40px;
  margin: 40px 0 32px;
}
.footer-collab-eyebrow {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--brand, #e0432a);
  margin-bottom: 10px;
}
.footer-collab-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  line-height: 1.2 !important;
}
.footer-collab-sub {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.footer-collab-thanks {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.footer-collab-thanks span {
  font-size: 20px;
  color: #4ade80;
}

/* Collab form fields */
.footer-collab-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-collab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.footer-collab-form input,
.footer-collab-form select,
.footer-collab-form textarea {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, background 0.2s !important;
  font-family: var(--apple-font, sans-serif) !important;
}
.footer-collab-form input::placeholder,
.footer-collab-form textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
.footer-collab-form input:focus,
.footer-collab-form select:focus,
.footer-collab-form textarea:focus {
  outline: none !important;
  border-color: rgba(224, 67, 42, 0.7) !important;
  background: rgba(255,255,255,0.12) !important;
}
.footer-collab-form select option {
  background: #2d2d2d;
  color: #fff;
}
.footer-collab-form button[type="submit"] {
  background: var(--brand, #e0432a) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  align-self: flex-start !important;
  transition: opacity 0.2s, transform 0.15s !important;
}
.footer-collab-form button[type="submit"]:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

/* Mobile */
@media (max-width: 700px) {
  .footer-collab {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 22px !important;
    margin: 28px 0 24px !important;
  }
  .footer-collab-row {
    grid-template-columns: 1fr !important;
  }
  .nav-links .nav-collab-link {
    display: none !important;
  }
}

/* Discreet staff/admin access — a subtle dot in the footer copyright line */
.footer-admin-link {
  display: inline-block;
  margin-left: 8px;
  color: rgba(255,255,255,0.28) !important;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
  cursor: pointer;
}
.footer-admin-link:hover { color: var(--brand, #e0432a) !important; }

/* ============================================================
   v205 — iOS-26 "Liquid Glass" + 3D bubbly motion (public site)
   Additive, scoped to public classes (not .msa- admin).
   Respects prefers-reduced-motion.
   ============================================================ */
:root { --ms-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Floating colour orbs behind the hero for glassy depth */
.ms-hero { position: relative; overflow: hidden; }
.ms-hero::before, .ms-hero::after {
  content: ''; position: absolute; border-radius: 50%; z-index: 1; pointer-events: none;
  filter: blur(70px); opacity: .45; mix-blend-mode: screen;
  animation: msOrb 18s ease-in-out infinite;
}
.ms-hero::before { width: 380px; height: 380px; top: -80px; left: -60px; background: radial-gradient(circle, rgba(224,67,42,.7), transparent 70%); }
.ms-hero::after { width: 320px; height: 320px; bottom: -70px; right: -50px; background: radial-gradient(circle, rgba(255,165,90,.6), transparent 70%); animation-delay: -9s; }
@keyframes msOrb { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-26px) scale(1.12); } 66% { transform: translate(-26px,18px) scale(.92); } }
.ms-hero-content, .ms-hero-content-centered, .ms-hero-credibility, .ms-hero-search-wrap { position: relative; z-index: 3; }

/* 3D bubbly cards — springy lift + glass edge highlight */
.cat-card, .trip-feature, .trip-card, .reiseplan-card, .itin-card, .ms-mini-card,
.pkg-card, .review-card, .testimonial-card, .ms-profile-trip {
  transition: transform .42s var(--ms-spring), box-shadow .42s var(--ms-spring) !important;
  will-change: transform;
}
.cat-card:hover, .trip-feature:hover, .trip-card:hover, .reiseplan-card:hover,
.itin-card:hover, .ms-mini-card:hover, .pkg-card:hover {
  transform: translateY(-9px) scale(1.015) !important;
  box-shadow: 0 26px 54px rgba(20,16,14,.18), 0 8px 18px rgba(20,16,14,.08),
              inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.cat-card:active, .trip-feature:active, .trip-card:active { transform: translateY(-3px) scale(.995) !important; }

/* Card images get a gentle zoom for depth */
.cat-img, .trip-feature-img, .itin-img { transition: transform .6s var(--ms-spring); }
.cat-card:hover .cat-img, .trip-feature:hover .trip-feature-img { transform: scale(1.06); }

/* Bubbly buttons — glass sheen sweep + spring press */
.btn-primary, .btn-ink, .reiseplaner-cta-chip, .ms-hero-cta, .cat-modal-cta, .cat-reserve-btn {
  position: relative; overflow: hidden;
  transition: transform .25s var(--ms-spring), box-shadow .25s ease, filter .25s ease !important;
}
.btn-primary:hover, .btn-ink:hover, .ms-hero-cta:hover, .cat-reserve-btn:hover {
  transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px rgba(224,67,42,.34);
}
.btn-primary:active, .btn-ink:active, .ms-hero-cta:active, .cat-reserve-btn:active { transform: translateY(0) scale(.95); }
.btn-primary::after, .btn-ink::after, .ms-hero-cta::after, .cat-reserve-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .7s ease;
}
.btn-primary:hover::after, .btn-ink:hover::after, .ms-hero-cta:hover::after, .cat-reserve-btn:hover::after { transform: translateX(130%); }

/* Stronger frosted glass on the nav + lang pill + widgets */
.nav.scrolled { background: rgba(255,255,255,0.55) !important; -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important; }
.ms-lc-pill, .ms-lc-menu, .nav-pill-menu { -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.ms-lc-menu, .nav-pill-menu { background: rgba(255,255,255,0.78) !important; }

/* Glassy modal sheets (catalog / itinerary) */
.cat-modal, .itin-modal { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Floating widgets (WhatsApp/chat/instagram) get a gentle bob */
.wa-widget, .ms-chat-fab { animation: msBob 4.5s ease-in-out infinite; }
@keyframes msBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .ms-hero::before, .ms-hero::after, .wa-widget, .ms-chat-fab { animation: none !important; }
  .cat-card, .trip-feature, .trip-card, .reiseplaner-card, .btn-primary, .btn-ink { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   v224 — Hero tidy-up. The absolutely-positioned credibility strip only
   lays out cleanly as a single row on wide desktop. Below ~900px it
   wrapped and collided with the CTAs / floating buttons (messy on phone
   AND tablet). Show it only on wide screens; tidy the phone hero.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ms-hero .ms-hero-credibility,
  .ms-hero > .ms-hero-credibility { display: none !important; }
}
@media (max-width: 640px) {
  .ms-hero-eyebrow-below { margin-top: 16px !important; }
  .ms-hero.ms-hero-static .ms-hero-content-centered { padding-bottom: 8px !important; }
}

/* ════════════════════════════════════════════════════════════════
   v232 — round hero search button + trip-info modal (wider +40%,
   shorter −30%) + 2-col day grid on the wider modal
   ════════════════════════════════════════════════════════════════ */
.ms-hero-search-btn.ms-hero-search-btn-round {
  width: 46px !important; height: 46px !important; min-width: 46px;
  padding: 0 !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
  .ms-hero-search-btn.ms-hero-search-btn-round { width: 42px !important; height: 42px !important; min-width: 42px; padding: 0 !important; font-size: 0 !important; }
}

/* Trip-information pop-up only (not the catalogue modals) */
.itin-modal-backdrop .itin-modal {
  width: min(1020px, 100%) !important; max-width: min(1020px, 100%) !important;
  max-height: min(62vh, 62dvh) !important;   /* ~30% shorter than full-height */
}
.itin-modal-hero { height: clamp(110px, 16vh, 180px) !important; }
@media (min-width: 820px) {
  .itin-modal .itin-modal-days { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px 26px !important; }
  .itin-modal .itin-modal-day { padding-bottom: 4px !important; border-bottom: 0 !important; }
}
@media (max-width: 820px) {
  .itin-modal-backdrop .itin-modal { max-height: min(82vh, 82dvh) !important; }
}

/* ════════════════════════════════════════════════════════════════
   v237 — structured day-by-day timeline: time | activity rows stacked
   ════════════════════════════════════════════════════════════════ */
.itin-tl-rows { display: flex; flex-direction: column; margin-top: 8px; }
.itin-tl-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid rgba(0,0,0,0.07);
}
.itin-tl-row:first-child { border-top: none; }
.itin-tl-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600;
  color: var(--brand, #e0432a); white-space: nowrap; letter-spacing: -0.01em; padding-top: 1px;
}
.itin-tl-time-none { color: var(--ink-3, #b9ada0); }
.itin-tl-act { font-size: 13.5px; line-height: 1.5; color: var(--ink, #2c2c2e); }
@media (max-width: 600px) {
  .itin-tl-row { grid-template-columns: 76px 1fr; gap: 9px; }
  .itin-tl-time { font-size: 11px; }
  .itin-tl-act { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   MS LISTING DETAIL — Airbnb-style trip/catalogue modal (ms-ld-*)
   ════════════════════════════════════════════════════════════════ */
.ms-ld-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20,16,13,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px; overflow-y: auto; animation: fadeIn .2s ease;
}
.ms-ld-card {
  position: relative; background: #fff; color: #222;
  width: min(1280px, 100%); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
  font-family: var(--apple-font, -apple-system, "Segoe UI", Roboto, sans-serif);
  animation: slideUp .25s ease; display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}
.ms-ld-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* sticky top bar */
.ms-ld-topbar {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #ececec;
}
.ms-ld-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent;
  font-size: 16px; color: #222; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ms-ld-close:hover { background: #f1f1f1; }
.ms-ld-actions { display: flex; gap: 6px; }
.ms-ld-iconbtn {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
  font-size: 13.5px; font-weight: 600; color: #222; cursor: pointer; padding: 8px 12px; border-radius: 10px;
  transition: background .15s;
}
.ms-ld-iconbtn span { font-size: 15px; }
.ms-ld-iconbtn:hover { background: #f1f1f1; }
.ms-ld-iconbtn.on { color: var(--brand, #e0432a); }
/* title */
.ms-ld-title {
  margin: 22px 40px 14px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: #1d1d1f;
}
/* mosaic */
.ms-ld-mosaic { position: relative; margin: 0 40px; }
.ms-ld-mosaic-grid {
  display: grid; gap: 8px; height: min(54vh, 440px); border-radius: 16px; overflow: hidden;
}
.ms-ld-mo { background-size: cover; background-position: center; cursor: pointer; transition: filter .2s; background-color: #eee; }
.ms-ld-mo:hover { filter: brightness(.93); }
/* adaptive layouts by photo count — only real images, never duplicated */
.ms-ld-mg-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ms-ld-mg-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ms-ld-mg-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ms-ld-mg-3 .ms-ld-mo-main { grid-row: 1 / 3; }
.ms-ld-mg-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ms-ld-mg-5 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.ms-ld-mg-5 .ms-ld-mo-main { grid-column: 1 / 3; grid-row: 1 / 3; }
.ms-ld-showall {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #222; border-radius: 9px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #222; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ms-ld-showall:hover { background: #f7f7f7; }
.ms-ld-showall-ico { font-size: 13px; }
/* mobile carousel (hidden on desktop) */
.ms-ld-mcar { display: none; }
/* two-column body */
.ms-ld-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 56px;
  padding: 28px 40px 56px; align-items: start;
}
.ms-ld-main { min-width: 0; }
.ms-ld-sec { padding-top: 26px; }
.ms-ld-divtop { border-top: 1px solid #ebebeb; margin-top: 26px; }
.ms-ld-card .ms-ld-h2 { font-size: 21px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; margin: 0 0 8px !important; color: #1d1d1f !important; }
.ms-ld-card .ms-ld-h3 { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; margin: 0 0 16px !important; color: #1d1d1f !important; }
.ms-ld-dots { color: #555; font-size: 14.5px; }
.ms-ld-dots span:not(:last-child)::after { content: "·"; margin: 0 7px; color: #999; }
/* trust badge card */
.ms-ld-badgecard {
  display: flex; align-items: center; gap: 14px; border: 1px solid #e2e2e2; border-radius: 14px;
  padding: 16px 18px; margin-top: 20px;
}
.ms-ld-badgecard-ico { font-size: 24px; color: var(--brand, #e0432a); line-height: 1; }
.ms-ld-badgecard-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand, #e0432a); margin-bottom: 3px; }
.ms-ld-badgecard-sub { font-size: 14px; color: #444; line-height: 1.45; }
/* listing highlights */
.ms-ld-hl-list { display: flex; flex-direction: column; gap: 12px; }
.ms-ld-hl { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #333; line-height: 1.5; }
.ms-ld-hl-ico { color: var(--brand, #e0432a); font-weight: 700; flex: none; }
/* description */
.ms-ld-desc { font-size: 15.5px; line-height: 1.65; color: #333; white-space: pre-line; margin: 0; }
.ms-ld-desc.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ms-ld-link { background: none; border: none; padding: 6px 0 0; font-size: 14.5px; font-weight: 600; color: #1d1d1f; text-decoration: underline; cursor: pointer; }
.ms-ld-link:hover { color: var(--brand, #e0432a); }
/* amenities */
.ms-ld-amen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ms-ld-amen { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #333; line-height: 1.45; }
.ms-ld-amen-ico { color: #2a9d5c; font-weight: 700; flex: none; }
.ms-ld-amen-no { color: #888; }
.ms-ld-amen-no .ms-ld-amen-ico { color: #aaa; }
.ms-ld-outline {
  margin-top: 22px; display: inline-block; background: #fff; border: 1px solid #222; border-radius: 9px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; color: #222; cursor: pointer;
}
.ms-ld-outline:hover { background: #f7f7f7; }
.ms-ld-notinc { margin-top: 24px; }
.ms-ld-notinc-h { font-size: 14px; font-weight: 700; color: #555; margin-bottom: 12px; }
/* timeline reuse */
.ms-ld-timeline { margin-top: 4px; }
/* calendar */
.ms-ld-avail-sub { font-size: 14px; color: #666; margin-bottom: 16px; }
.ms-ld-cal { position: relative; }
.ms-ld-cal-head { position: absolute; top: 2px; right: 0; display: flex; gap: 6px; }
.ms-ld-cal-arrow { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; cursor: pointer; font-size: 17px; color: #222; }
.ms-ld-cal-arrow:hover:not(:disabled) { background: #f1f1f1; }
.ms-ld-cal-arrow:disabled { color: #ccc; cursor: not-allowed; }
.ms-ld-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ms-ld-cal-mn { text-align: center; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ms-ld-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.ms-ld-cal-dows span { text-align: center; font-size: 11px; color: #999; font-weight: 600; }
.ms-ld-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ms-ld-cal-d {
  aspect-ratio: 1; border: none; background: transparent; border-radius: 50%; cursor: pointer;
  font-size: 13.5px; color: #222; transition: background .12s;
}
.ms-ld-cal-d:hover:not(:disabled) { background: #f0f0f0; outline: 1px solid #222; }
.ms-ld-cal-d.past { color: #ccc; text-decoration: line-through; cursor: not-allowed; }
.ms-ld-cal-d.sel { background: var(--brand, #e0432a); color: #fff; }
.ms-ld-cal-d.range { background: rgba(224,67,42,.12); border-radius: 0; }
/* map */
.ms-ld-map { border-radius: 14px; overflow: hidden; border: 1px solid #e6e6e6; height: 340px; }
.ms-ld-map { position: relative; }
.ms-ld-map-fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #9a948c; font-size: 14px; background: linear-gradient(135deg, #f3f1ec, #e8ece8); }
.ms-ld-map iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
/* things to know */
.ms-ld-ttk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ms-ld-ttk-h { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ms-ld-ttk-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ms-ld-ttk-col li { font-size: 13.5px; color: #555; line-height: 1.45; }
/* breadcrumb */
.ms-ld-crumb { margin-top: 36px; padding-top: 22px; border-top: 1px solid #ebebeb; font-size: 13px; color: #888; }
/* sticky booking card */
.ms-ld-aside-sticky { position: sticky; top: 80px; }
.ms-ld-book { border: 1px solid #e0e0e0; border-radius: 16px; padding: 22px; box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.ms-ld-book-pill { display: inline-block; background: #f3ede2; color: #7a5e2e; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.ms-ld-book-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 18px; }
.ms-ld-book-amt { font-size: 24px; font-weight: 700; color: #1d1d1f; }
.ms-ld-book-per { font-size: 13.5px; color: #666; }
.ms-ld-book-fields { border: 1px solid #c9c9c9; border-radius: 12px; overflow: hidden; }
.ms-ld-book-dates { display: grid; grid-template-columns: 1fr 1fr; }
.ms-ld-book-cell { padding: 10px 12px; border-bottom: 1px solid #c9c9c9; }
.ms-ld-book-cell:first-child { border-right: 1px solid #c9c9c9; }
.ms-ld-book-cell span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #444; }
.ms-ld-book-cell b { font-size: 13.5px; font-weight: 500; color: #222; }
.ms-ld-book-guests { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; }
.ms-ld-book-guests span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #444; }
.ms-ld-book-guests select { border: none; background: transparent; font-size: 13.5px; color: #222; padding: 6px 0; cursor: pointer; }
.ms-ld-book-contact { display: flex; flex-direction: column; border-top: 1px solid #c9c9c9; }
.ms-ld-book-contact input { border: none; border-bottom: 1px solid #ededed; padding: 11px 12px; font-size: 13.5px; outline: none; }
.ms-ld-book-contact input:last-child { border-bottom: none; }
.ms-ld-book-cta {
  width: 100%; margin-top: 16px; border: none; border-radius: 11px; padding: 14px;
  background: var(--brand, #e0432a); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: filter .15s;
}
.ms-ld-book-cta:hover { filter: brightness(1.06); }
.ms-ld-book-note { text-align: center; font-size: 13px; color: #888; margin-top: 12px; }
.ms-ld-book-error {
  margin-top: 10px; color: #b42318; background: #fff1f0; border: 1px solid #fecdca;
  border-radius: 9px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4;
}
.ms-ld-book-contact [aria-invalid="true"] { background: #fff8f7; box-shadow: inset 3px 0 0 #d92d20; }
.ms-ld-book-2nd { width: 100%; margin-top: 12px; border: 1px solid #ccc; background: #fff; border-radius: 11px; padding: 12px; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; }
.ms-ld-book-2nd:hover { background: #f7f7f7; }
.ms-ld-book-sent { text-align: center; padding: 14px 0; }
.ms-ld-book-sent-ic { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: #e8f6ee; color: #2a9d5c; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.ms-ld-book-sent strong { display: block; font-size: 16px; margin-bottom: 4px; }
.ms-ld-book-sent span { font-size: 13.5px; color: #666; }
.ms-ld-report { display: block; margin: 18px auto 0; background: none; border: none; color: #888; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ms-ld-report:hover { color: var(--brand, #e0432a); }
/* mobile bottom bar (hidden on desktop) */
.ms-ld-mbar { display: none; }
/* lightbox */
.ms-ld-lb { position: fixed; inset: 0; z-index: 10010; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
.ms-ld-lb-img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.ms-ld-lb-close { position: absolute; top: 20px; left: 20px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; }
.ms-ld-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; cursor: pointer; }
.ms-ld-lb-nav.prev { left: 24px; } .ms-ld-lb-nav.next { right: 24px; }
.ms-ld-lb-nav:hover, .ms-ld-lb-close:hover { background: rgba(255,255,255,.26); }
.ms-ld-lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* ── Responsive: single column, mobile carousel, fixed bottom bar ── */
@media (max-width: 860px) {
  .ms-ld-backdrop { padding: 0; align-items: stretch; }
  .ms-ld-card { width: 100%; max-height: 100dvh; border-radius: 0; }
  .ms-ld-title { margin: 16px 18px 12px; }
  .ms-ld-mosaic { display: none; }
  .ms-ld-mcar { display: block; position: relative; margin: 0; }
  .ms-ld-mcar-img { height: 56vw; max-height: 360px; background-size: cover; background-position: center; }
  .ms-ld-mcar-count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
  .ms-ld-mcar-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
  .ms-ld-mcar-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
  .ms-ld-mcar-dot.on { background: #fff; }
  .ms-ld-grid { grid-template-columns: 1fr; gap: 0; padding: 18px 18px 90px; }
  .ms-ld-aside-sticky { position: static; }
  .ms-ld-aside { border-top: 1px solid #ebebeb; margin-top: 26px; padding-top: 26px; }
  .ms-ld-cal-months { grid-template-columns: 1fr; gap: 24px; }
  .ms-ld-ttk { grid-template-columns: 1fr; gap: 22px; }
  .ms-ld-amen-grid { grid-template-columns: 1fr; }
  .ms-ld-mbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; bottom: 0; z-index: 7; background: #fff; border-top: 1px solid #e6e6e6;
    padding: 12px 18px; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }
  .ms-ld-mbar-price b { font-size: 17px; } .ms-ld-mbar-price span { font-size: 12px; color: #666; }
  .ms-ld-mbar-cta { border: none; border-radius: 10px; padding: 13px 26px; background: var(--brand, #e0432a); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
}
.ms-ld-maplegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.ms-ld-maplegend-item { font-size: 13px; color: #444; display: inline-flex; align-items: center; gap: 6px; }
.ms-ld-maplegend-item b { width: 18px; height: 18px; border-radius: 50%; background: var(--brand, #e0432a); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.ms-ld-book-contact textarea { border: none; padding: 11px 12px; font-size: 13.5px; outline: none; resize: vertical; font-family: inherit; }
.ms-ld-map .leaflet-container { height: 100%; width: 100%; border-radius: 14px; }

/* ════════════════════════════════════════════════════════════════
   MS REVIEWS + PHOTO GALLERY (ms-rev- / ms-gal-) — below contact
   ════════════════════════════════════════════════════════════════ */
.ms-rev-section { background: #faf7f2; padding: 64px 20px 72px; }
.ms-rev-inner, .ms-gal-inner { max-width: 1200px; margin: 0 auto; }
.ms-gal-inner { margin-top: 64px; }
.ms-rev-h {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600 !important; text-align: center;
  font-size: clamp(28px, 4vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important;
  color: #2b2620 !important; margin: 0 0 10px !important;
}
.ms-rev-sub { text-align: center; color: #7a7368; font-size: 15px; margin-bottom: 34px; }
.ms-rev-stars { color: #fbbc04; letter-spacing: 1px; }
.ms-rev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ms-rev-card {
  background: #fff; border: 1px solid #ece7df; border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.ms-rev-top { display: flex; align-items: center; gap: 12px; }
.ms-rev-ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #c1440e; color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.ms-rev-name { font-weight: 600; font-size: 14.5px; color: #2b2620; }
.ms-rev-meta .ms-rev-stars { font-size: 13px; }
.ms-rev-text { font-size: 13.5px; line-height: 1.6; color: #5a544c; margin: 0; }
/* gallery */
.ms-gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ms-gal-item { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #eee; }
.ms-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.ms-gal-item:hover img { transform: scale(1.07); }
.ms-gal-more-row { text-align: center; margin-top: 28px; }
.ms-gal-more {
  border: 1px solid #c1440e; background: #fff; color: #c1440e; border-radius: 999px;
  padding: 12px 30px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.ms-gal-more:hover { background: #c1440e; color: #fff; }
@media (max-width: 760px) {
  .ms-rev-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ms-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ms-rev-card { padding: 16px; }
  .ms-rev-section { padding: 44px 14px 52px; }
}

/* ── Rooms & tents rows (camps) ── */
.ms-ld-rooms-n { color: #999; font-weight: 500; font-size: 15px; }
.ms-ld-rooms { display: flex; flex-direction: column; }
.ms-ld-room { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px dashed #e7e2d9; align-items: flex-start; }
.ms-ld-room:last-child { border-bottom: none; }
.ms-ld-room-img {
  width: 118px; height: 88px; flex: none; border-radius: 10px;
  background-size: cover; background-position: center; background-color: #eee;
  display: block; transition: filter .2s;
}
.ms-ld-room-img:hover { filter: brightness(.92); }
.ms-ld-room-name { font-size: 14.5px; font-weight: 600; color: #1d1d1f; margin-bottom: 3px; }
.ms-ld-room-desc { font-size: 13px; line-height: 1.5; color: #666; }
.ms-ld-room-price { font-size: 13px; font-weight: 600; color: var(--brand, #e0432a); margin-top: 5px; }
.ms-ld-rooms-note { font-size: 12.5px; color: #999; margin-top: 14px; }
@media (max-width: 600px) {
  .ms-ld-room-img { width: 92px; height: 70px; }
}

/* ── Passes & offers rows (camps) ── */
.ms-ld-passes { display: flex; flex-direction: column; gap: 10px; }
.ms-ld-pass {
  display: flex; gap: 14px; align-items: flex-start;
  background: #faf7f1; border: 1px solid #efe9dd; border-radius: 12px; padding: 12px 14px;
}
.ms-ld-pass-tag {
  flex: none; font-size: 12px; font-weight: 700; color: #7a5e2e;
  background: #f0e9dd; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.ms-ld-pass-txt { font-size: 13.5px; line-height: 1.55; color: #4a443c; }
@media (max-width: 600px) {
  .ms-ld-pass { flex-direction: column; gap: 7px; }
}
/* ms-ld-room-img is now a button — reset chrome */
button.ms-ld-room-img { border: none; padding: 0; cursor: pointer; }
.cat-title-acc { color: #8a8378; font-weight: 500; font-size: 0.85em; }
.cat-price-offers { font-size: 13.5px; font-weight: 700; color: var(--brand, #e0432a); }
/* gallery anchor clears the sticky nav */
#gallery { scroll-margin-top: 86px; }

/* Google-style numbered map pins */
.ms-ld-pinwrap { background: transparent !important; border: none !important; }
.ms-ld-pin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.45); color: #fff; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ── Related-experience hashtags (trip → catalogue) ── */
.ms-ld-related { display: flex; flex-wrap: wrap; gap: 9px; }
.ms-ld-htag {
  display: inline-flex; align-items: center; gap: 2px;
  background: #faf1ee; border: 1px solid #f1d9d2; color: var(--brand, #e0432a);
  border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
}
.ms-ld-htag-hash { font-weight: 800; opacity: .85; }
.ms-ld-htag:hover { background: var(--brand, #e0432a); color: #fff; border-color: var(--brand, #e0432a); }
.ms-ld-htag:active { transform: scale(.96); }

/* ── Reviews + gallery: full-screen width ── */
.ms-rev-inner, .ms-gal-inner { max-width: min(1640px, 94vw) !important; }

/* ── Round corners on (almost) every box that isn't already pill/round ── */
[class*="card"], [class*="-box"], [class*="box-"], [class*="panel"], [class*="tile"],
[class*="-field"], [class*="field-"], [class*="well"], [class*="callout"],
.msa-card, .admin-card, .stat-card, .reiseplaner-card, .insight-card, .kpi,
fieldset, .form-group, .input-group,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="pill"]):not([class*="round"]),
textarea, select {
  border-radius: 14px;
}

/* ── Sub-tabs / filter chips: pill-shaped (override legacy sharp-corners) ── */
.filter-chip, .trip-filter-chip, .cat-filter, .cat-tab, .itin-tab,
.cat-showmore, .cat-showall {
  border-radius: 999px !important;
}

/* ── Language / currency pill — round, single-flag, language-only menu ── */
.ms-lc-pill { border-radius: 999px !important; }
.ms-lc-menu { border-radius: 16px !important; }
.ms-lc-menu-lang {
  display: block !important;
  min-width: 200px !important;
  padding: 8px !important;
}
.ms-lc-menu-lang .ms-lc-lang-col { display: flex !important; flex-direction: column; gap: 2px; }
.ms-lc-menu-lang .ms-lc-opt {
  border-radius: 10px !important;
  width: 100% !important;
  justify-content: flex-start !important;
  font-size: 13.5px !important;
}
.ms-lc-lang-label { flex: 1; }
.ms-lc-lang-cur { font-size: 12px; color: #8a8a8e; font-variant-numeric: tabular-nums; }
.ms-lc-opt.is-active { background: #f3ece9; }
.ms-lc-opt.is-active .ms-lc-lang-cur { color: var(--brand, #e0432a); }

/* ── Chatbot — Claude orange theming ── */
.ms-chat-head { background: #D97757 !important; }
.ms-chat-msg.user { background: #D97757 !important; }
.ms-chat-send, .ms-chat-form button[type="submit"] { background: #D97757 !important; color: #fff !important; }
.ms-chat-suggestion:hover { border-color: #D97757 !important; color: #B85C43 !important; }

/* ── Hero search bar — round, single clean field (drop legacy input box) ── */
.ms-hero-search { border-radius: 999px !important; }
.ms-hero-search input,
.ms-hero-search input[type="search"] {
  border: none !important;
  background: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding-left: 4px !important;
}

/* ── Mobile: sub-tab / filter rows stay on one horizontal scrolling line ── */
@media (max-width: 768px) {
  .cat-filters, .cat-tabs-v2, .trip-filter-scroll, .cat-tabs, .itin-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-filters::-webkit-scrollbar,
  .cat-tabs-v2::-webkit-scrollbar,
  .cat-tabs::-webkit-scrollbar,
  .itin-tabs::-webkit-scrollbar { display: none; }
  .cat-filters .filter-chip,
  .cat-tabs-v2 .cat-tab-v2,
  .cat-tabs .cat-tab { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ── Katalog tab bar + sub-tab bar: active highlight uses the brand colour ── */
.cat-tabs-v2 .cat-tab-v2.active,
.cat-tab-v2.active, .cat-tab.active,
.cat-filters .filter-chip.active,
.filter-chip.active {
  background: var(--brand, #e0432a) !important;
  border-color: var(--brand, #e0432a) !important;
  color: #fff !important;
}
.cat-tab-v2.active .count,
.filter-chip.active .count { color: rgba(255,255,255,0.85) !important; }

/* ============================================================
   Season Trip — Norwegian-calendar "event trip" band
   ============================================================ */
.season { max-width: 1180px; margin: 64px auto; padding: 0 20px; }
.season-card {
  position: relative; border-radius: 28px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,14,10,0.72) 0%, rgba(24,14,10,0.86) 42%, rgba(20,12,9,0.96) 100%),
    var(--season-img) center/cover no-repeat;
  box-shadow: 0 30px 80px -30px rgba(40,18,10,0.55);
  color: #fff; padding: 30px clamp(20px, 4vw, 52px) 40px;
  border: 1px solid rgba(255,255,255,0.10);
}
.season-ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--msa-brand, #e0432a); color: #fff;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: 12px; padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 8px 22px -8px rgba(224,67,42,0.8);
}
.season-ribbon::before { content: "★"; font-size: 12px; }
.season-head { margin-top: 18px; max-width: 760px; }
.season-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.season-chip {
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.season-chip-date { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.season-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; margin: 4px 0 10px;
  font-weight: 700; letter-spacing: -0.01em;
}
.season-intro { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 0 18px; }
.season-bookearly {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  background: rgba(224,67,42,0.16); border: 1px solid rgba(224,67,42,0.4);
  border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.45;
}
.season-bookearly strong { color: #ffd9cf; font-weight: 800; }
.season-bookearly span:last-child { color: rgba(255,255,255,0.86); }
.season-be-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff6a4d; align-self: center;
  box-shadow: 0 0 0 0 rgba(255,106,77,0.7); animation: seasonPulse 2s infinite; }
@keyframes seasonPulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,77,0.65);} 70% { box-shadow: 0 0 0 10px rgba(255,106,77,0);} 100% { box-shadow: 0 0 0 0 rgba(255,106,77,0);} }

.season-tabs { display: flex; gap: 8px; margin: 24px 0 0; flex-wrap: wrap; }
.season-tab {
  flex: 1 1 0; min-width: 120px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; padding: 12px 14px; border-radius: 14px; font-size: 16px; font-weight: 700;
  transition: background .2s, border-color .2s, transform .15s;
}
.season-tab:hover { background: rgba(255,255,255,0.14); }
.season-tab.active { background: #fff; color: #1c120d; border-color: #fff; transform: translateY(-1px);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.6); }
.season-tab-sub { font-size: 12px; font-weight: 500; opacity: .7; }
.season-tab.active .season-tab-sub { opacity: .6; }

.season-body {
  margin-top: 18px; background: rgba(255,255,255,0.96); color: #241a14;
  border-radius: 18px; padding: clamp(18px, 2.6vw, 28px);
}
.season-pitch-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.season-pitch { flex: 1 1 320px; font-size: 16px; line-height: 1.55; margin: 0; color: #3a2c22; }
.season-priceblock { display: flex; flex-direction: column; align-items: flex-end; min-width: 140px; }
.season-price-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #9a7e6a; }
.season-price { font-size: 30px; font-weight: 800; color: var(--msa-brand, #e0432a); line-height: 1; }
.season-price-unit { font-size: 12px; color: #8a7565; margin-top: 2px; }

.season-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.season-hi { font-size: 13px; font-weight: 600; color: #6a4a2f;
  background: #f3ece0; border: 1px solid #e6d8c4; padding: 6px 12px; border-radius: 999px; }

.season-timeline { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.season-day { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #efe6d8; }
.season-day:first-child { border-top: none; }
.season-day-n { flex: 0 0 64px; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--msa-brand, #e0432a); padding-top: 2px; }
.season-day-body { display: flex; flex-direction: column; gap: 3px; }
.season-day-title { font-size: 15.5px; font-weight: 700; color: #2a1f17; }
.season-day-text { font-size: 14.5px; line-height: 1.5; color: #5c4a3b; }

.season-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.season-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; }
.season-btn-primary { background: var(--msa-brand, #e0432a); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(224,67,42,0.75); }
.season-btn-primary:hover { transform: translateY(-2px); }
.season-btn-ghost { background: #fff; color: #241a14; border-color: #e2d6c4; }
.season-btn-ghost:hover { background: #f6efe2; }

@media (max-width: 640px) {
  .season { margin: 40px auto; }
  .season-card { padding: 22px 18px 28px; border-radius: 22px; }
  .season-pitch-row { flex-direction: column; }
  .season-priceblock { align-items: flex-start; }
  .season-day-n { flex-basis: 52px; }
  .season-cta .season-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   Trips tabs — clean, premium, minimal
   Top: segmented control · Vacation: underline tabs ·
   Audience: small segmented control
   ============================================================ */

/* ── Top tabs: Season tours · Tours · Lag din egen reise ── */
.trip-toptabs { display: flex; justify-content: center; gap: 3px; width: fit-content;
  margin: 0 auto 30px; padding: 4px; background: #fff; border: 1px solid #ece3d4;
  border-radius: 999px; box-shadow: 0 10px 34px -24px rgba(80,50,30,0.45); }
.trip-toptab { cursor: pointer; border: none; background: transparent; color: #8a7560;
  font-size: 14.5px; font-weight: 600; letter-spacing: .005em; padding: 11px 26px; border-radius: 999px;
  line-height: 1; white-space: nowrap; transition: color .16s, background .16s; }
.trip-toptab:hover { color: #2f2118; }
.trip-toptab.active { background: var(--msa-brand, #e0432a); color: #fff; font-weight: 700; }
@media (max-width: 620px) {
  .trip-toptabs { display: flex; width: 100%; gap: 2px; }
  .trip-toptab { padding: 11px 8px; font-size: 12.5px; flex: 1 1 0; text-align: center; justify-content: center; }
}

/* ── Vacation picker (whole year) → understated underline tabs ── */
.season-vac-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 26px;
  margin: 0 auto 18px; max-width: 860px; border-bottom: 1px solid #ece3d4; }
.season-vac-tab { position: relative; cursor: pointer; background: transparent; border: none;
  color: #a8957e; font-size: 14px; font-weight: 600; padding: 11px 2px 13px;
  border-radius: 0 !important; transition: color .16s; }
.season-vac-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--msa-brand, #e0432a); transform: scaleX(0); transition: transform .2s ease; }
.season-vac-tab:hover { color: #3a2c22; }
.season-vac-tab.active { color: #2a1f17; font-weight: 700; }
.season-vac-tab.active::after { transform: scaleX(1); }
.season-vac-now { margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--msa-brand, #e0432a); vertical-align: middle; }

/* ── Audience sub-tabs (Couple / Friends / Family) + date caption ── */
.season-subtabs { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 2px 0 32px; }
.season-subtabs-date { font-size: 13px; font-weight: 500; color: #a08a72; letter-spacing: .01em; }
.season-subtabs-track { display: inline-flex; gap: 3px; background: #fff;
  border: 1px solid #ece3d4; border-radius: 999px; padding: 4px; }
.season-subtab { cursor: pointer; border: none; background: transparent; color: #8a7560;
  font-size: 14px; font-weight: 600; padding: 9px 26px; border-radius: 999px; line-height: 1;
  transition: color .16s, background .16s; }
.season-subtab:hover { color: #3a2c22; }
.season-subtab.active { background: var(--msa-brand, #e0432a); color: #fff; font-weight: 700; }
@media (max-width: 560px) { .season-subtab { padding: 9px 18px; } }

/* Keep the feature card softly rounded */
.trip-slider-feature .trip-feature { border-radius: 22px; overflow: hidden; }

/* Plan prompt panel */
.plan-prompt { max-width: 720px; margin: 8px auto 8px; text-align: center;
  background: linear-gradient(180deg, #fff, #fdf6ee); border: 1.5px solid #ecd9c4;
  border-radius: 24px; padding: 38px 28px; box-shadow: 0 20px 50px -30px rgba(120,70,40,0.35); }
.plan-prompt-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 3.4vw, 34px);
  color: #2a1f17; margin: 0 0 10px; }
.plan-prompt-text { font-size: 16px; line-height: 1.55; color: #5c4a3b; margin: 0 auto 22px; max-width: 540px; }
.plan-prompt-btn { cursor: pointer; border: none; background: var(--msa-brand, #e0432a); color: #fff;
  font-size: 16px; font-weight: 800; padding: 14px 30px; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(224,67,42,0.8); transition: transform .15s; }
.plan-prompt-btn:hover { transform: translateY(-2px); }

/* ============================================================
   Global rounded corners — tabs, sub-tabs & background boxes
   (overrides the editorial sharp-corner reset in styles.css,
   which sets border-radius:0 !important on button/input/.btn …)
   ============================================================ */
/* Tab/sub-tab containers (segmented-control tracks) → pill track */
.trip-toptabs, .season-subtabs-track, .trip-filter-bar,
.ms-profile-tabs { border-radius: 999px !important; }

/* Tabs · sub-tabs · chips · pills · buttons → fully rounded */
.nav-pill, .nav-pill-btn, .nav-cta,
.cat-tab-v2, .filter-chip, .trip-filter-chip, .trip-filter-cta,
.trip-toptab, .season-subtab,
.itin-chip, .ms-lc-pill, .trip-card-tag, .reiseplan-badge,
.ms-profile-tabs button, .day-nav-pills button, .day-nav-pill,
.btn, .btn-primary, .btn-ghost, .btn-outline, .btn-ink, .btn-text, .btn-sm,
.wa-btn, .wa-cta, .ms-hero-cta, .ms-hero-cta-alt, .ms-cookie-btn,
.flight-help-btn, .ig-scroll-btn, .ig-scroll-cta, .plan-prompt-btn,
.trip-feature-cta, .trip-feature-badge, .trip-feature-duration,
.hero-v2-cta { border-radius: 999px !important; }

/* Cards · panels · background boxes → soft rounded */
.cat-card, .trip-feature, .opt-card, .contact-card, .contact-cta-row,
.itin-card, .itin-tl-card, .itin-tl-card-top, .itin-contact-card, .itin-summary,
.ms-profile-card, .ms-profile-panel, .ms-rev-card,
.rental-card, .flight-help-box, .flight-help-fields, .ms-chat-panel,
.wa-panel, .plan-prompt, .hero-flight-cta-wrap,
.hero-tab, .hero-tabs-grid, .weather-widget, .hero-stat-card,
.season-subtabs, .season-vac-tabs { border-radius: 20px !important; }

/* Clip card imagery to the rounded card */
.cat-card, .trip-feature, .opt-card, .rental-card, .ms-rev-card { overflow: hidden; }

/* Form fields → rounded */
#plan input, #plan select, #plan textarea,
.flight-help-fields input, .flight-help-fields select, .flight-help-fields textarea,
.contact-card input, .contact-card select, .contact-card textarea,
.ms-chat-panel input, .ms-chat-panel textarea { border-radius: 14px !important; }

/* ============================================================
   Trips section — compact, minimalist redesign (preview only)
   ============================================================ */
.reiseplaner-section { padding-top: 44px !important; padding-bottom: 52px !important; }
.reiseplaner-section .section-head { margin: 0 auto 20px !important; }
.reiseplaner-section .section-head .eyebrow { font-size: 11px !important; letter-spacing: .14em !important; margin-bottom: 5px !important; opacity: .8; }
.reiseplaner-section .section-head h2 { font-size: clamp(25px, 3.2vw, 38px) !important; margin: 0 0 5px !important; line-height: 1.05 !important; }
.reiseplaner-section .section-head p { font-size: 13.5px !important; opacity: .75; margin: 0 auto !important; }

/* Primary tab bar — clean & tight (the "top bar" of the section) */
.reiseplaner-section .trip-toptabs { margin: 0 auto 12px !important; padding: 4px !important;
  box-shadow: 0 6px 24px -20px rgba(80,50,30,0.4) !important; }
.reiseplaner-section .trip-toptab { padding: 9px 20px !important; font-size: 13.5px !important; }

/* Season vacation picker — single compact scrollable row */
.reiseplaner-section .season-vac-tabs { gap: 0 22px !important; margin: 0 auto 10px !important; max-width: 760px !important;
  flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: center !important;
  scrollbar-width: none; padding-bottom: 0 !important; }
.reiseplaner-section .season-vac-tabs::-webkit-scrollbar { display: none; }
.reiseplaner-section .season-vac-tab { font-size: 13px !important; padding: 8px 2px 9px !important; white-space: nowrap; flex: 0 0 auto; }

/* Audience segment + date on ONE tight row */
.reiseplaner-section .season-subtabs { flex-direction: row !important; align-items: center !important;
  justify-content: center !important; gap: 12px !important; margin: 0 0 20px !important; flex-wrap: wrap; }
.reiseplaner-section .season-subtabs-date { font-size: 12px !important; color: #a08a72 !important; order: 2; }
.reiseplaner-section .season-subtabs-track { padding: 3px !important; order: 1; }
.reiseplaner-section .season-subtab { padding: 8px 20px !important; font-size: 13.5px !important; }

/* ============================================================
   Trips section v2 — ONE unified horizontal bar (preview only)
   ============================================================ */
.reiseplaner-section .trip-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin: 0 auto 22px !important; max-width: 1040px;
}
.reiseplaner-section .trip-bar .trip-toptabs { margin: 0 !important; }
.reiseplaner-section .trip-bar-ctx {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.reiseplaner-section .trip-bar-sep { width: 1px; height: 26px; background: #ece3d4; margin: 0 2px; }
@media (max-width: 760px) { .reiseplaner-section .trip-bar-sep { display: none; } }

/* Season selector — compact pill dropdown (replaces 6 underline tabs) */
.reiseplaner-section .trip-season-select { display: inline-flex; }
.reiseplaner-section .trip-season-select select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  background-color: #fff; border: 1px solid #ece3d4; border-radius: 999px;
  padding: 9px 34px 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: #2a1f17;
  line-height: 1; box-shadow: 0 6px 24px -20px rgba(80,50,30,0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8957e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.reiseplaner-section .trip-season-select select:hover { border-color: #d9cbb5; }
.reiseplaner-section .trip-season-select select:focus { outline: none; border-color: var(--msa-brand, #e0432a); }

/* Date caption inside the bar */
.reiseplaner-section .trip-bar-date { font-size: 12px; color: #a08a72; white-space: nowrap; }

/* Keep the audience segment tidy in the bar */
.reiseplaner-section .trip-bar .season-subtabs-track { padding: 3px !important; margin: 0 !important; }
.reiseplaner-section .trip-bar .season-subtab { padding: 8px 18px !important; font-size: 13.5px !important; }

/* ============================================================
   Master tab bar — trips + catalog folded into one (preview only)
   ============================================================ */
/* Bar = column: tab row on top, contextual controls beneath */
.reiseplaner-section .trip-bar { display: block !important; max-width: none !important; margin: 0 0 14px !important; }
/* Master tab row reuses the catalog .cat-tabs-v2 look, centered, one tight line */
.reiseplaner-section .trip-maintabs-v2 {
  max-width: 1120px; margin: 0 auto 12px !important; justify-content: flex-start;
  scrollbar-width: thin;
}
@media (min-width: 1180px) { .reiseplaner-section .trip-maintabs-v2 { justify-content: center; } }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .ico { font-size: 14px; opacity: .85; }
.reiseplaner-section .trip-maintabs-sep { flex: 0 0 auto; width: 1px; height: 22px; background: #e4d9c8; align-self: center; margin: 0 6px; }
/* contextual season row sits directly under the bar, centered & tight */
.reiseplaner-section .trip-bar-ctx { margin: 0 auto 4px !important; }

/* Catalog, when shown via the master bar — sits right under the bar, no own header */
.catalog-hub.catalog.section { padding-top: 8px !important; padding-bottom: 40px !important; }
.catalog-hub .cat-filters { margin-top: 0 !important; }
.reiseplaner-section { padding-bottom: 22px !important; }

/* Compact the master tab row so all 10 fit one line (incl. Basseng) */
.reiseplaner-section .trip-maintabs-v2 { gap: 2px !important; padding: 5px !important; max-width: 100% !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 { padding: 7px 9px !important; font-size: 12px !important; gap: 5px !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .ico { font-size: 12.5px; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .count { padding: 1px 5px !important; font-size: 9px !important; }
.reiseplaner-section .trip-maintabs-sep { margin: 0 4px !important; }

/* Fit all 10 on one line — tighter still */
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 { padding: 6px 8px !important; font-size: 11.5px !important; gap: 4px !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .ico { font-size: 11.5px; }
.reiseplaner-section .trip-maintabs-sep { margin: 0 3px !important; }

/* Let the master bar use a touch more width so all 10 tabs fit one line */
.reiseplaner-section .trip-maintabs-v2 {
  width: min(1380px, calc(100vw - 36px)) !important; max-width: none !important;
  margin-left: 50% !important; transform: translateX(-50%) !important;
}

/* Final nudge to fit all 10 on one line */
.reiseplaner-section .trip-maintabs-v2 { width: min(1400px, calc(100vw - 24px)) !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 { padding: 6px 7px !important; gap: 4px !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .count { margin-left: -1px; }

/* exact fit */
.reiseplaner-section .trip-maintabs-v2 { width: min(1420px, calc(100vw - 14px)) !important; gap: 1px !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 { gap: 3px !important; }

/* ============================================================
   Polish: uniform headlines · emoji-less master bar (preview only)
   ============================================================ */
/* All section headlines match "Våre beste reiser" */
.section .section-head h2, .section-head h2 { font-size: clamp(25px, 3.2vw, 38px) !important; line-height: 1.06 !important; }

/* Master bar without emojis: fits the column, centered, tighter, group divider */
.reiseplaner-section .trip-maintabs-v2 {
  width: auto !important; max-width: 1265px !important; margin: 0 auto 12px !important;
  transform: none !important; left: auto !important; justify-content: center !important;
}
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 { padding: 7px 11px !important; gap: 6px !important; font-size: 12.5px !important; }
.reiseplaner-section .trip-maintabs-v2 .cat-tab-v2 .count { padding: 1px 6px !important; font-size: 9.5px !important; }
.reiseplaner-section .trip-maintabs-sep { flex: 0 0 auto; width: 1px; height: 24px; background: #d9ccb8; align-self: center; margin: 0 8px !important; }

/* Season vacations inline (one line) — no dropdown, no date (date is in the trip details) */
.reiseplaner-section .trip-bar-ctx { gap: 6px 10px !important; }
.reiseplaner-section .season-vac-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 3px; }
.reiseplaner-section .season-vac-pill {
  border: none; background: transparent; cursor: pointer; color: #8a7560;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  white-space: nowrap; transition: color .15s, background .15s;
}
.reiseplaner-section .season-vac-pill:hover { color: #2f2118; background: #f3ece1; }
.reiseplaner-section .season-vac-pill.active { background: var(--msa-brand, #e0432a); color: #fff; font-weight: 700; }
.reiseplaner-section .season-vac-pill .season-vac-now { margin-left: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--msa-brand, #e0432a); }
.reiseplaner-section .season-vac-pill.active .season-vac-now { color: #fff; opacity: .9; }
.trip-feature-dates { white-space: nowrap; }

/* When a catalog category or the planner is active, the trips section is just the
   header + bar — drop its bottom padding so the sub-tabs / form sit right under it. */
.reiseplaner-section.cat-active, .reiseplaner-section.plan-active { padding-bottom: 0 !important; }
.reiseplaner-section.cat-active .trip-bar, .reiseplaner-section.plan-active .trip-bar { margin-bottom: 0 !important; }
.reiseplaner-section.cat-active + .catalog-hub, .catalog-hub.catalog.section { padding-top: 6px !important; }

/* ============================================================
   Trips section polish (2026-07) — subtab pills, nav align, plan gap
   ============================================================ */
/* Par / Venner / Familie — same bare rounded-pill style as Vinterferie/Påske */
.reiseplaner-section .season-subtabs-track {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 999px !important; display: inline-flex; gap: 2px 3px !important;
}
.reiseplaner-section .trip-bar .season-subtab,
.reiseplaner-section .season-subtab {
  border: none !important; background: transparent !important; cursor: pointer; color: #8a7560 !important;
  font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 12px !important;
  border-radius: 999px !important; white-space: nowrap; transition: color .15s, background .15s;
}
.reiseplaner-section .season-subtab:hover { color: #2f2118 !important; background: #f3ece1 !important; }
.reiseplaner-section .season-subtab.active { background: var(--msa-brand, #e0432a) !important; color: #fff !important; font-weight: 700 !important; }

/* Top bar — align the compact search with language/currency + login */
.nav .nav-cta { align-items: center !important; }
.ms-hero-search-wrap--nav { display: flex; align-items: center; }
.ms-hero-search-wrap--nav .ms-hero-search { height: 36px; display: flex; align-items: center; }
.ms-hero-search-wrap--nav .ms-hero-search input { height: 34px; }

/* "Lag din egen" — kill the empty gap between the tab bar and the form */
#plan.itin-section { padding-top: 10px !important; }
#plan .section-head { margin-bottom: 24px !important; }

/* Hero search — sits under the "Hei & Velkommen til MarrakechStory" heading */
.ms-hero .ms-hero-searchrow { display: flex; justify-content: center; margin-top: 22px; }
.ms-hero .ms-hero-searchrow .ms-hero-search-wrap { width: min(560px, 82vw); max-width: 560px; margin: 0; }
.ms-hero .ms-hero-searchrow .ms-hero-search { width: 100%; }
@media (max-width: 700px) { .ms-hero .ms-hero-searchrow { margin-top: 16px; } }

/* ============================================================
   Hero fix (2026-07): remove black band above the parallax image
   + reduce the darkening overlays by ~40%
   ============================================================ */
/* Bleed the parallax background past the hero edges so the translate never shows black */
.ms-hero.ms-hero-static .ms-hero-bg { top: -140px !important; bottom: -140px !important; height: auto !important; }
/* Lighter shadow (each dark overlay alpha cut ~40%) */
.ms-slide-grad-1 { background: linear-gradient(to right, rgba(0,0,0,0.33), rgba(0,0,0,0.12)) !important; }
.ms-slide-grad-2 { background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.27)) !important; }
.ms-slide-vignette { background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.18)) !important; }
.nav.over-hero { background-image: linear-gradient(rgba(0,0,0,0.21), rgba(0,0,0,0.11)) !important; }

/* Season contextual bar (Vinterferie…/Par…) — boxed rounded container like the master bar */
.reiseplaner-section .trip-bar-ctx {
  background: #fff !important;
  border: 1px solid var(--line, #e6e6ea) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  box-shadow: var(--shadow-soft, 0 10px 30px -22px rgba(80,50,30,0.45)) !important;
  width: fit-content;
  max-width: min(1120px, calc(100vw - 24px));
  margin: 0 auto 16px !important;
  gap: 6px 10px !important;
}
.reiseplaner-section .trip-bar-ctx .trip-bar-sep { height: 22px; }

/* Season pills (Vinterferie…) — ensure the active red background is a rounded pill */
.reiseplaner-section .trip-bar-ctx .season-vac-pill,
.reiseplaner-section .trip-bar-ctx .season-vac-pill.active,
.reiseplaner-section .trip-bar-ctx .season-vac-pill.is-now { border-radius: 999px !important; }

/* ============================================================
   Mobile polish (2026-07) — fit hero name, single-column reviews,
   tidy hero social stats
   ============================================================ */
@media (max-width: 600px) {
  /* Hero brand name fits one line on phones (54px floor was too big) */
  .ms-hero-content-centered .ms-hero-h1.ms-hero-h1-sm.ms-hero-brand .ms-hero-brandmark { font-size: clamp(30px, 9vw, 46px) !important; }
  /* Reviews: one clean full-width column instead of two cramped ones */
  .ms-rev-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* Hero social stats + CTAs: centered, wrap, never clipped by the FAB */
  .ms-hero .ms-hero-bottom { flex-direction: column !important; align-items: center !important; gap: 12px !important; left: 4vw !important; right: 4vw !important; }
  .ms-hero .ms-hero-cta-row { justify-content: center !important; }
  .ms-hero .ms-hero-socials-bar { gap: 8px 16px !important; flex-wrap: wrap; justify-content: center; }
}

/* Mobile: the master tab bar must start at "Sesongturer" (centering hides the start
   in an overflow-scroll container) */
@media (max-width: 600px) {
  .reiseplaner-section .trip-maintabs-v2 { justify-content: flex-start !important; }
}

/* ============================================================
   Hero spacing fix (2026-07): give room so heading clears the nav
   and the search doesn't collide with the CTA / social bar
   ============================================================ */
.ms-hero.ms-hero-static { height: 64vh !important; min-height: 560px !important; }
.ms-hero.ms-hero-static .ms-hero-content.ms-hero-content-centered.ms-hero-content-top { top: 96px !important; }
@media (max-width: 600px) {
  .ms-hero.ms-hero-static { min-height: 600px !important; align-items: flex-start !important; }
  .ms-hero.ms-hero-static .ms-hero-content.ms-hero-content-centered.ms-hero-content-top { top: 92px !important; }
}

/* ============================================================
   Mobile app bottom tab bar (Airbnb-style) — mobile only
   ============================================================ */
.ms-tabbar { display: none; }
@media (max-width: 600px) {
  .ms-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: #fff; border-top: 1px solid #ebebeb;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 18px -10px rgba(0,0,0,.16);
  }
  .ms-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; color: #6f6f73; padding: 4px 2px; -webkit-tap-highlight-color: transparent; }
  .ms-tab-ico { width: 24px; height: 24px; display: inline-flex; }
  .ms-tab-ico svg { width: 24px; height: 24px; }
  .ms-tab-lbl { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
  .ms-tab.active { color: var(--msa-brand, #e0432a); }
  .ms-tab.active .ms-tab-ico svg { stroke-width: 2.1; }
  /* leave room for the fixed bar so nothing hides behind it */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* Lift the floating widgets above the mobile tab bar */
@media (max-width: 600px) {
  .wa-widget        { bottom: 82px  !important; }
  .ms-chat-fab      { bottom: 140px !important; }
  .ig-scroll-widget { bottom: 198px !important; }
  .ms-weather-fab, .ms-weather { bottom: 82px !important; }
}

/* Hero social stats — 40% smaller */
.ms-hero .ms-hero-socials-bar { gap: 6px !important; }
.ms-hero .ms-hero-socials-bar .ms-social-item { padding: 4px 9px !important; gap: 5px !important; }
.ms-hero .ms-hero-socials-bar .ms-social-icon { width: 18px !important; height: 18px !important; }
.ms-hero .ms-hero-socials-bar .ms-social-icon svg { width: 13px !important; height: 13px !important; }
.ms-hero .ms-hero-socials-bar strong { font-size: 10px !important; }
.ms-hero .ms-hero-socials-bar span { font-size: 8px !important; }

/* ============================================================
   Airbnb-style catalog (offer) cards — mobile only
   ============================================================ */
@media (max-width: 600px) {
  #catalog .cat-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  #catalog .cat-img, #catalog .cat-img-resolved { border-radius: 14px !important; overflow: hidden; aspect-ratio: 1/1 !important; }
  #catalog .cat-body { padding: 9px 2px 2px !important; }
  #catalog .cat-desc, #catalog .cat-duration { display: none !important; }
  #catalog .cat-title { font-size: 14.5px !important; font-weight: 600 !important; margin: 1px 0 2px !important; line-height: 1.25 !important; }
  #catalog .cat-rating { font-size: 12.5px !important; margin-bottom: 1px !important; }
  #catalog .cat-area { font-size: 12px !important; }
  #catalog .cat-foot { margin-top: 4px !important; padding-top: 0 !important; border-top: none !important; }
  #catalog .cat-price, #catalog .cat-price-amount, #catalog .cat-price-offers { font-weight: 700 !important; font-size: 13.5px !important; }
  #catalog .cat-fav { top: 8px !important; right: 8px !important; }
}

/* Free-consultation (contact) heading — same size as the "best offers" heading */
.contact .contact-info h2 { font-size: clamp(25px, 3.2vw, 38px) !important; line-height: 1.06 !important; }