/* ============================================================
   MOSAFERSALAM HOMEPAGE REDESIGN — homepage-style.css
   ============================================================ */

/* ── Google Font ── */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap");

/* ── Root tokens ── */
.ms-redesign-root {
  --ms-yellow: #f59e0b;
  --ms-yellow-d: #d97706;
  --ms-blue: #1e3a5f;
  --ms-blue-l: #2563eb;
  --ms-red: #ef4444;
  --ms-dark: #0f172a;
  --ms-grey: #64748b;
  --ms-grey-l: #cbd5e1;
  --ms-light: #f8fafc;
  --ms-white: #ffffff;
  --ms-card-r: 16px;
  --ms-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-family: "Vazirmatn", Tahoma, "Arial", sans-serif;
  direction: rtl;
  box-sizing: border-box;
}
.ms-redesign-root *,
.ms-redesign-root *::before,
.ms-redesign-root *::after {
  box-sizing: inherit;
}

/* ── Container ── */
.ms-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Generic section spacing ── */
.ms-section {
  padding: 80px 0;
}

/* ── Section head ──
   Eyebrow stacked ABOVE the title (not a pill beside it), the pair
   right-aligned, with an optional blue ribbon running off the start edge. */
.ms-section-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
}
/* Grows to fill, so its content hugs the ribbon on the right and anything
   after it (the arrow pair) is pushed to the far left of the container. */
.ms-head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ms-section-eyebrow {
  display: block;
  color: var(--ms-grey);
  font-size: 13px;
  font-weight: 500;
}
.ms-section-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  color: var(--ms-dark);
  margin: 0;
  line-height: 1.5;
}

/* Blue ribbon: first child, so RTL flex places it on the right. Stays
   fully inside the container — no viewport bleed. */
.ms-head-ribbon {
  flex: 0 0 clamp(80px, 13%, 170px);
  align-self: flex-end;
  height: 26px;
  margin-bottom: 6px;
  background: var(--ms-blue-l);
  border-radius: 4px;
}

/* ── Shared bare arrow pair (both carousels) ──
   No pill, border or shadow. Colour alone carries state: blue when the
   track can move that way, grey when it can't. */
.ms-nav-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.ms-hotels-nav,
.ms-dest-nav {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-blue-l);
  cursor: pointer;
  transition:
    color 0.2s,
    transform 0.2s;
}
.ms-hotels-nav-next:hover,
.ms-dest-nav-next:hover {
  transform: translateX(-4px);
}
.ms-hotels-nav-prev:hover,
.ms-dest-nav-prev:hover {
  transform: translateX(4px);
}
.ms-hotels-nav.is-disabled,
.ms-dest-nav.is-disabled {
  color: var(--ms-grey-l);
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.ms-hero-section {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  /* No overflow:hidden here — the background layer below is already exactly
	   inset:0 to this section, and clipping would also cut off the city/guest
	   dropdowns, which pop open below the search fields and can extend past
	   this section's bottom edge since the search bar sits low in the hero. */
}

/* Single full-bleed background image (editable via the plugin's image picker — see $img_placeholders['hero_bg']) */
.ms-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.ms-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(15, 23, 42, 0.72) 0%,
    rgba(30, 58, 95, 0.6) 100%
  );
}

/* Navbar */
.ms-top-nav {
  position: relative;
  z-index: 10;
  padding: 18px 0;
}
.ms-nav-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ms-nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
}
.ms-nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ms-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ms-logo-main {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.ms-logo-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1px;
}

.ms-nav-links {
  display: flex;
  gap: 6px;
}
.ms-nav-item {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  transition:
    background 0.2s,
    color 0.2s;
}
.ms-nav-item:hover,
.ms-nav-item.active {
  color: #fff;
}

.ms-nav-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
}
.ms-nav-why {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}
.ms-nav-login {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ms-blue-l);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.ms-nav-login:hover {
  background: #1d4ed8;
}

/* Hero body */
.ms-hero-body {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 48px;
  text-align: center;
}
.ms-hero-tagline {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 40px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  letter-spacing: -1px;
  min-height: 1.2em;
}
.ms-typewriter-cursor {
  display: inline-block;
  margin-inline-start: 2px;
  animation: ms-caret-blink 1s step-end infinite;
}
@keyframes ms-caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-typewriter-cursor {
    animation: none;
  }
}

/* ── Search bar, per the design: separate white cards floating over the hero
   with the photo showing through the gaps — city | (check-in + check-out
   together in ONE card) | guests | submit. The date pair is the only place
   two fields share a card, split by a hairline. ── */
.ms-inline-search-wrap {
  width: 100%;
  max-width: 980px;
}
.ms-inline-search-form {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 72px;
  /* Nothing may clip here. The city and guest dropdowns are absolutely
     positioned BELOW their field, outside this 72px box — an overflow:hidden
     on this container (or on any field) makes both panels invisible while
     still technically "open", which reads as the dropdowns being dead. */
}

/* The white card surface — worn either by a standalone field or by the
   wrapper pairing the two date fields. */
.ms-search-field,
.ms-field-group {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  transition: box-shadow 0.2s;
}
.ms-search-field:hover,
.ms-search-field.active,
.ms-field-group:hover {
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}

.ms-search-field {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 18px;
  position: relative;
  cursor: pointer;
}

/* Check-in + check-out: one shared card, so the fields inside it drop their
   own card styling and become flat segments of the parent. */
.ms-field-group {
  display: flex;
  align-items: stretch;
  flex: 1.9;
}
.ms-field-group .ms-search-field {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ms-field-divider {
  display: block;
  align-self: center;
  width: 1px;
  height: 34px;
  background: var(--ms-grey-l);
  flex-shrink: 0;
}
.ms-field-icon {
  color: var(--ms-grey);
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.ms-field-icon svg {
  width: 18px;
  height: 18px;
}
.ms-field-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.ms-field-label {
  font-size: 11px;
  color: var(--ms-grey);
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Guest field's caret — pinned to the card's far left (it's the last child of
   this RTL row) rather than sitting inline next to the value, as in the design. */
.ms-field-caret {
  display: flex;
  align-items: center;
  color: var(--ms-grey);
  margin-right: 10px;
  flex-shrink: 0;
}

/* Inputs & Selectors */
.ms-city-selector,
.ms-guest-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-dark);
  font-size: 14px;
  font-weight: 700;
  width: 100%;
}
.ms-city-value,
.ms-guest-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-date-input {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ms-dark);
  font-family: inherit;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.ms-date-input::placeholder {
  color: var(--ms-dark);
}

/* Fix for jalali daterangepicker showing 2 calendars in single mode */
.daterangepicker.ms-single-picker .drp-calendar.right,
.daterangepicker.ms-single-picker .calendar.right {
  display: none !important;
}
.daterangepicker.ms-single-picker .drp-calendar.left,
.daterangepicker.ms-single-picker .calendar.left {
  display: block !important;
  clear: both;
}

/* Dropdowns */
.ms-city-dropdown,
.ms-guest-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s;
  z-index: 100;
}
.ms-search-field.active .ms-city-dropdown,
.ms-search-field.active .ms-guest-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* City list inside dropdown */
.ms-city-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 8px 0;
}
.ms-city-option {
  padding: 10px 20px;
  font-size: 13px;
  color: var(--ms-dark);
  cursor: pointer;
  transition: background 0.15s;
}
.ms-city-option:hover {
  background: #f1f5f9;
}

/* Guest dropdown */
.ms-guest-dropdown {
  padding: 16px;
  min-width: 260px;
}
.ms-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ms-guest-row:last-child {
  margin-bottom: 0;
}
.ms-guest-row-label {
  font-size: 14px;
  color: var(--ms-dark);
  font-weight: 600;
}
.ms-guest-counter {
  display: flex;
  align-items: center;
  border: 1px solid var(--ms-grey-l);
  border-radius: 6px;
  overflow: hidden;
}
.ms-guest-counter button {
  background: #f8fafc;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: var(--ms-dark);
  transition: background 0.15s;
}
.ms-guest-counter button:hover {
  background: #e2e8f0;
}
.ms-guest-counter input {
  width: 40px;
  height: 32px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-left: 1px solid var(--ms-grey-l);
  border-right: 1px solid var(--ms-grey-l);
  pointer-events: none;
}

/* Submit button — its own card, same height and radius as the fields. */
.ms-search-submit {
  height: 100%;
  width: 72px;
  background: var(--ms-yellow);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.2s;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.ms-search-submit:hover {
  background: var(--ms-yellow-d);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}

/* Scroll down — pinned to the bottom edge of the hero section (which is
   position:relative, height:100vh) rather than sitting inline with the
   centered hero content. A scroll cue reads as "there's more below" only
   when it's actually down near the fold; stacked in the middle of the
   centered column it just looked like more hero content. */
.ms-scroll-down {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.85);
  animation: ms-bounce 2s infinite;
  transition:
    color 0.2s,
    transform 0.2s;
}
.ms-scroll-down:hover {
  color: var(--ms-yellow);
  /* Pause the bounce keyframe — it runs continuously and would otherwise
     overwrite this transform every frame, making the hover state invisible. */
  animation-play-state: paused;
  transform: translateX(-50%) translateY(4px);
}
.ms-scroll-down svg {
  width: 26px;
  height: 26px;
}
/* Must include translateX(-50%) at every step — this element is centered via
   transform (left:50%; transform:translateX(-50%)), so a keyframe that only
   sets translateY would silently drop the centering offset mid-bounce. */
@keyframes ms-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

/* ============================================================
   SECTION 2 — HOTELS: FEATURED CARD + FILMSTRIP CAROUSEL
   ============================================================ */
.ms-hotels-section {
  background: #fff;
}

/* ── Badges (discount / promo pills, physically top-left of image) ── */
.ms-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
  z-index: 2;
}
.ms-badge-discount {
  background: var(--ms-red);
}

/* ── Carousel shell ── */
.ms-hotels-carousel-wrap {
  position: relative;
}

.ms-hotels-carousel {
  /* One height for every slide, collapsed or expanded — see .ms-hotel-media. */
  --ms-hotel-media-h: 380px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Soft band behind the filmstrip; the expanded slide paints white over it,
     which is what separates the two in the design. */
  background: #f8fafc;
  border-radius: 18px;
  padding: 20px 20px 28px;
  margin: 0 -20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ms-hotels-carousel::-webkit-scrollbar {
  display: none;
}

/* ── Slide ──
   No panel, no border, no shadow: the image carries the card and the
   caption sits directly on the section background. Collapsed slides
   stack (image over caption); the expanded one turns into a row with
   the detail panel beside the image. `row-reverse` under RTL puts the
   image on the left and the panel on the right, matching the design. */
.ms-hotel-slide {
  scroll-snap-align: start;
  flex: 0 0 186px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  cursor: pointer;
  transition: flex-basis 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.ms-hotel-slide:focus-visible {
  outline: 2px solid var(--ms-blue-l);
  outline-offset: 6px;
  border-radius: 14px;
}

.ms-hotel-slide.is-expanded {
  flex-basis: min(600px, 88vw);
  flex-direction: row-reverse;
  gap: 20px;
  background: #fff;
  cursor: default;
}

/* ── Media ──
   Height is a fixed track-wide value rather than an aspect-ratio, so a
   collapsed slide stands exactly as tall as the expanded one and the
   filmstrip reads as a single band. Aspect-ratio cannot do this: the
   expanded slide is ~3x wider, so a shared ratio would make it tower
   over its neighbours. */
.ms-hotel-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #e2e8f0;
  height: var(--ms-hotel-media-h);
}
.ms-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.ms-hotel-slide:not(.is-expanded):hover .ms-hotel-media img {
  transform: scale(1.05);
}
.ms-hotel-slide.is-expanded .ms-hotel-media {
  flex: 0 0 46%;
  height: var(--ms-hotel-media-h);
}

.ms-img-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}

/* ── Collapsed caption ── */
.ms-hotel-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.ms-hotel-slide.is-expanded .ms-hotel-caption {
  display: none;
}
.ms-hotel-caption-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-grey);
  margin: 0;
  line-height: 1.5;
  transition: color 0.2s;
}
.ms-hotel-slide:hover .ms-hotel-caption-title {
  color: var(--ms-dark);
}

/* ── Expanded detail panel ── */
.ms-hotel-detail {
  display: none;
}
.ms-hotel-slide.is-expanded .ms-hotel-detail {
  flex: 1 1 54%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px 8px 0;
}
.ms-hotel-detail-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ms-blue-l);
  margin: 0;
  line-height: 1.4;
}
.ms-hotel-perks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-hotel-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ms-dark);
}
.ms-perk-plus {
  color: var(--ms-blue-l);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.ms-hotel-detail-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-hotel-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ms-grey);
}
.ms-hotel-address svg {
  flex-shrink: 0;
}

.ms-hotel-stars {
  display: flex;
  gap: 2px;
}

/* ── Shared price / CTA ── */
.ms-hotel-price {
  font-size: 12.5px;
  color: var(--ms-grey);
}
.ms-price-from {
  font-size: 12.5px;
  color: var(--ms-grey);
}
.ms-hotel-price strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ms-dark);
  margin-inline-start: 4px;
}
.ms-price-call {
  font-size: 12px;
  color: var(--ms-grey);
}

.ms-card-btn {
  display: block;
  margin-top: 8px;
  background: var(--ms-yellow);
  color: var(--ms-dark);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s;
}
.ms-card-btn:hover {
  background: var(--ms-yellow-d);
}

/* Arrow styling for this carousel lives with .ms-nav-group up in the
   shared section-head block — the pair sits in the heading row. */

/* ============================================================
   SECTION 3 — DESTINATIONS CAROUSEL
   ============================================================ */
.ms-destinations-section {
  background: #fff;
}
.ms-dest-container {
  position: relative;
}
/* Anchored top-right, above the heading, as in the design — not centred. */
.ms-dest-watermark {
  position: absolute;
  top: -46px;
  right: 24px;
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 900;
  color: rgba(15, 23, 42, 0.045);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  letter-spacing: -4px;
  transition: opacity 0.3s;
}

/* ── Carousel shell (mirrors the hotels carousel pattern) ──
   The left gutter is reserved for the arrow pair so a full track can never
   scroll underneath them; cards stay flush right, level with the title. */
.ms-dest-carousel-wrap {
  position: relative;
  padding-left: 100px;
}

.ms-destinations-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 52px 4px 8px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ms-destinations-grid::-webkit-scrollbar {
  display: none;
}

/* ── Drag-to-pan affordance (both carousels) ──
   No `touch-action` override here on purpose: an earlier `pan-y` was
   telling touch devices this track scrolls vertically only, which
   blocked the very horizontal swipe it was meant to protect. The drag
   script ignores touch entirely and lets native scrolling handle it. */
.ms-hotels-carousel,
.ms-destinations-grid {
  cursor: grab;
}
/* Applied by the script only once a press has become a real drag, so a
   plain click never picks up these styles. Snapping and smooth scroll
   are switched off mid-drag so the track tracks the cursor 1:1 instead
   of fighting it. */
.ms-hotels-carousel.is-dragging,
.ms-destinations-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-user-select: none;
  user-select: none;
}

.ms-dest-slide {
  position: relative;
  flex: 0 0 268px;
  scroll-snap-align: start;
}

/* Faded rank numeral: sits BEHIND the card, top-right, so the image crops
   its lower half — the overlap in the design is the whole point of it. */
.ms-dest-rank {
  position: absolute;
  top: -46px;
  right: 10px;
  z-index: 0;
  font-size: 76px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* No panel, no border, no shadow — just the image and the text under it. */
.ms-dest-card {
  position: relative;
  z-index: 1;
  text-decoration: none;
  display: block;
  background: transparent;
  transition: transform 0.25s;
}
.ms-dest-card:hover {
  transform: translateY(-3px);
}

.ms-dest-img-wrap {
  position: relative;
  aspect-ratio: 27 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
}
.ms-dest-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.ms-dest-card:hover .ms-dest-img-wrap img {
  transform: scale(1.06);
}
.ms-dest-img-empty {
  width: 100%;
  height: 100%;
  background: #dde3ec;
}

/* ── Info block below the image (no padding box — it sits on the page) ── */
.ms-dest-info {
  padding: 12px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ms-dest-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-dest-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ms-dark);
}
.ms-dest-count {
  font-size: 12px;
  color: var(--ms-grey);
}
.ms-dest-price {
  font-size: 12px;
  color: var(--ms-grey);
}

/* ── Nav arrows ──
   Same bare pair as section 2 (styled in the shared block near the top),
   here parked in the empty gutter at the left end of the track, level
   with the card images. */
.ms-dest-nav-group {
  position: absolute;
  left: 0;
  top: 102px; /* track padding-top (52) + half an image (~50) */
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 5;
}

/* ============================================================
   SECTION 4 — ABOUT
   ============================================================ */
.ms-about-section {
  background: #fff;
  overflow: hidden;
}
.ms-about-flex {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

/* Text takes the wider share; graphic is fixed-width on the right */
.ms-about-text {
  flex: 1 1 480px;
  min-width: 280px;
  order: 2;
}
.ms-about-graphic {
  flex: 1 1 480px;
  min-width: 280px;
  order: 1;
}

.ms-about-eyebrow {
  display: inline-block;
  color: var(--ms-grey);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.ms-about-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--ms-dark);
  margin: 0 0 20px;
  line-height: 1.55;
}
.ms-about-body {
  font-size: 14px;
  color: var(--ms-grey);
  line-height: 2;
  margin: 0 0 16px;
}
.ms-about-stats {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.ms-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ms-blue);
}
.ms-stat-label {
  font-size: 12px;
  color: var(--ms-grey);
}

/* ============================================================
   SECTION 5 — BLOG
   ============================================================ */
.ms-blog-section {
  background: #fff;
}
.ms-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.ms-blog-card {
  background: #fff;
  border-radius: var(--ms-card-r);
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
.ms-blog-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
.ms-blog-img {
  height: 180px;
  background: #e2e8f0;
  overflow: hidden;
}
.ms-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.ms-blog-card:hover .ms-blog-img img {
  transform: scale(1.06);
}
.ms-blog-img-empty {
  width: 100%;
  height: 100%;
  background: #dde3ec;
}
.ms-blog-body {
  padding: 16px;
}
.ms-blog-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-dark);
  margin: 0 0 8px;
  line-height: 1.5;
}
.ms-blog-date {
  font-size: 12px;
  color: var(--ms-grey);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ms-hotel-slide,
  .ms-hotel-media img,
  .ms-dest-card,
  .ms-dest-img-wrap img,
  .ms-hotels-nav,
  .ms-dest-nav {
    transition: none;
  }
  .ms-scroll-down {
    animation: none;
  }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.ms-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  gap: 16px;
  text-align: center;
}
.ms-empty-icon {
  opacity: 0.6;
}
.ms-empty-text {
  font-size: 15px;
  color: var(--ms-grey);
  margin: 0;
}
.ms-empty-btn {
  background: var(--ms-yellow);
  color: var(--ms-dark);
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}
.ms-empty-btn:hover {
  background: var(--ms-yellow-d);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ms-nav-links {
    display: none;
  }

  /* About Section */
  .ms-about-flex {
    flex-direction: column;
    gap: 32px;
  }
  .ms-about-text {
    order: 1;
    flex: none;
    width: 100%;
  }
  .ms-about-graphic {
    order: 2;
    flex: none;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Search Form: everything stacks into full-width rows. */
  .ms-inline-search-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: auto;
  }
  /* The date pair stops sharing a card once stacked — side-by-side is the
     whole reason they were grouped, and a two-row card would just look like
     an oversized field. */
  .ms-field-group {
    flex: none;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .ms-field-group .ms-search-field {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  }
  .ms-field-divider {
    display: none;
  }
  .ms-search-field {
    flex: none;
    width: 100%;
    height: 64px;
    padding: 0 20px;
  }
  .ms-search-submit {
    flex: none;
    width: 100%;
    height: 64px;
  }
}

@media (max-width: 600px) {
  .ms-section {
    padding: 50px 0;
  }

  /* Too little width left for the ribbon to read as anything but clutter. */
  .ms-head-ribbon {
    display: none;
  }

  /* Hero Section */
  .ms-hero-tagline {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: 32px;
  }
  .ms-hero-body {
    padding: 20px 16px 40px;
  }

  /* Destinations: arrows drop below the track instead of into a gutter
     that no longer exists at this width. */
  .ms-dest-carousel-wrap {
    padding-left: 0;
  }
  .ms-dest-nav-group {
    position: static;
    justify-content: flex-start;
    margin-top: 18px;
  }
  .ms-dest-slide {
    flex-basis: 224px;
  }
  .ms-dest-rank {
    font-size: 54px;
    top: -32px;
  }
  .ms-destinations-grid {
    padding-top: 38px;
  }

  /* Hotels: the expanded slide stacks image over detail. */
  .ms-hotels-carousel {
    --ms-hotel-media-h: 232px;
  }
  .ms-hotel-slide {
    flex-basis: 150px;
  }
  .ms-hotel-slide.is-expanded {
    flex-basis: 84vw;
    flex-direction: column;
    gap: 16px;
  }
  /* Stacked, so matching the collapsed height no longer buys anything —
     height:auto releases the track-wide value and hands control back to
     aspect-ratio for a landscape crop. */
  .ms-hotel-slide.is-expanded .ms-hotel-media {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .ms-hotel-slide.is-expanded .ms-hotel-detail {
    flex: none;
    width: 100%;
    padding: 0;
  }
  /* Ribbon gives up its space to the title before the arrows do. */
  .ms-head-ribbon {
    flex-basis: 48px;
  }

  /* Typography scaling */
  .ms-section-title {
    font-size: 22px;
  }
  .ms-about-title {
    font-size: 24px;
  }

  .ms-blog-grid {
    grid-template-columns: 1fr;
  }
}