/* ============================================================
   ZenHotels Design Tweaks — Live transfer from the redesign mockup
   Out of scope: .footer__*, .home-app-promo, .app-promo* (untouched)
   ============================================================ */

/* ===== Part 1 — Foundation: brand color variables + Montserrat baseline ===== */

:root {
  --zh-pink:    #EC5A5B;
  --zh-pink-d:  #d44546;
  --zh-blue:    #004661;
  --zh-blue-d:  #00334a;
  --zh-violet:  #5C77CC;
  --zh-violet-d:#4a62b0;
  --zh-cream:   #F0EDE8;
  --zh-ink:     #1a2330;
  --zh-mute:    #6b7280;
  --zh-line:    #e6e2dc;
  --zh-shadow:    0 6px 20px rgba(0, 70, 97, 0.08);
  --zh-shadow-lg: 0 12px 32px rgba(0, 70, 97, 0.14);
}

/* Default body type — Montserrat, baseline ink color. Wrapped in :where()
   so it has zero specificity and individual theme rules still win where
   they need to. Footer and app-promo blocks are explicitly NOT targeted. */
:where(body, .wrapper-content, .site, p) {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   Part 2 — Header
   ============================================================ */

/* Bottom-align logo and menu on a single row */
header.container {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding-top: 6px !important;
  padding-bottom: 14px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.header-elements {
  align-self: flex-end !important;
}

/* Hide the heart/favorites icon (kept in markup, just hidden visually) */
.header-elements-favorites { display: none !important; }

/* Inline horizontal logo lockup (zenhotels | TRAVEL DEALS) — viewBox 500×80 */
.zh-header-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 286px;
}
@media (max-width: 768px) {
  .zh-header-logo { height: 35px; max-width: 231px; }
}

/* ============================================================
   Part 3 — Trust strip (above the header, outside .home-scroller)
   ============================================================ */

.zh-trust-strip {
  background: #fff;
  border-top: 1px solid var(--zh-line);
  border-bottom: 1px solid var(--zh-line);
  padding: 12px 0;
  /* Sprint 19: top margin halved (12px -> 6px) — tighter gap below the header. */
  margin: 6px 0 4px;
}
/* Sprint 20: homepage only — pull the strip up so the gap to the header is
   visibly halved. The (invisible) first .holiday-types section between the
   header and the strip adds ~17 CSS px of empty space; a -10px margin-top
   on the strip pulls it into that area without affecting other pages
   (where the strip sits directly below the header and a negative margin
   would overlap it).
   Sprint 21: match the bottom gap to the (Sprint 20) top gap (~13 CSS px)
   so the strip has equal breathing room above and below on the homepage. */
body.home .zh-trust-strip {
  margin-top: -10px;
  margin-bottom: 13px;
}
.zh-trust-strip__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.zh-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--zh-ink);
  flex: 1 1 220px;
  justify-content: center;
}
.zh-trust-item strong { color: var(--zh-blue); font-weight: 700; }
.zh-trust-item .zh-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--zh-blue);
}
.zh-trust-item .zh-icon svg { width: 100%; height: 100%; display: block; }

/* Trustpilot star rating with partial fill (e.g., 4.3/5 → 89%) */
.zh-stars-rating {
  position: relative;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
  vertical-align: middle;
}
.zh-stars-rating .zh-stars-bg { color: #d0d6dc; }
.zh-stars-rating .zh-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #00b67a;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   Part 4 — Hero H1
   ============================================================ */

.home-hero { position: relative; }
.home-hero__inner { position: relative; z-index: 2; }
.home-hero__content { position: relative; z-index: 2; }
.home-hero__content h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Part 5 — "Select holiday type" section
   ============================================================ */

/* Section padding — tight, controlled by inner container */
.holiday-types {
  padding-bottom: 20px !important;
}
.holiday-types > .container,
.holiday-types .container {
  padding-top: 20px !important;
  margin-top: 0 !important;
}

/* "Select holiday type" title — Montserrat 800 in brand blue with pink underline rule */
.holiday-types .section-title {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 9px !important;
  padding-bottom: 0 !important;
}
.holiday-types .section-title h3,
.holiday-types h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--zh-blue);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.holiday-types h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--zh-pink);
  margin-top: 12px;
  border-radius: 2px;
}

/* Holiday-type chip text — brand blue, tightened to the icon above */
.holiday-types-carousel {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.holiday-type-item__image {
  margin-bottom: 0 !important;
}
.holiday-type-item__title {
  display: block;
  font-weight: 600;
  color: var(--zh-blue);
  font-size: 14px;
  margin-top: -8px !important;
  padding-top: 0 !important;
}

/* ============================================================
   Part 6 — "Explore top destinations"
   ============================================================ */

.top-destinations {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}
.top-destinations > .container,
.top-destinations .container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.top-destinations__items {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.top-destinations__item__title {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Section heading — matches Travel-ideas treatment */
.top-destinations h2,
.top-destinations h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--zh-blue);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.top-destinations h2::after,
.top-destinations h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--zh-pink);
  margin-top: 12px;
  border-radius: 2px;
}

/* 9px gap between title and country thumbnails */
.top-destinations h3 {
  margin-bottom: 9px !important;
}
.top-destinations__items {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fixed-size circular thumbnails (every item identical) */
.top-destinations__item img {
  display: block !important;
  width: 159px !important;
  height: 159px !important;
  max-width: 159px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  margin: 0 auto 0 !important;
  transform: none;
  transition: transform 0.2s ease;
}
.top-destinations__item:hover img {
  transform: translateY(-2px);
}

/* Country name — brand blue, 8px gap below the icon */
.top-destinations__item__title {
  font-weight: 700;
  color: var(--zh-blue);
  letter-spacing: 0.01em;
  margin-top: 8px !important;
  padding-top: 0 !important;
}

/* Destinations page only: the .global-hero sits flush against both the
   header above and the "Top destinations" section below. Add a gap below
   the hero equal to the band between the header menu and the hero (22px —
   header menu bottom 110px, hero top 132px), so the hero is evenly spaced. */
.page-template-destinations .top-destinations {
  margin-top: 22px !important;
}

/* ============================================================
   Part 7 — Deal cards ("Travel ideas and inspiration")
   ============================================================ */

/* Section spacing — gap above the "Travel ideas" heading driven solely by
   .top-destinations padding-bottom (zero out everything else). */
.deals {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.deals > .container,
.deals .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Section heading — uniform with Select holiday type / Explore top destinations */
.deals h2,
.deals h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--zh-blue);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 12px !important;
}
.deals .offer-listing-inner,
.offer-listing-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.deals h2::after,
.deals h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--zh-pink);
  margin-top: 12px;
  border-radius: 2px;
}

/* Card container */
.offer-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--zh-line);
  box-shadow: var(--zh-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--zh-shadow-lg);
}

.offer-card-image { position: relative; }
.offer-card-image img { transition: transform 0.4s ease; }
.offer-card:hover .offer-card-image img { transform: scale(1.04); }

/* Holiday-type tag — pink pill in the top-left of the card */
.offer-card-holiday-type {
  background: var(--zh-pink);
  color: #fff !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(236, 90, 91, 0.35);
}
.offer-card-holiday-type a { color: #fff !important; text-decoration: none; }

/* Price — white pill, blue label + pink price */
.offer-card-price {
  background: rgba(255, 255, 255, 0.96);
  color: var(--zh-blue);
  font-weight: 800;
  font-size: 18px;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 70, 97, 0.15);
}
.offer-card-price [data-price] {
  color: var(--zh-pink);
  font-weight: 800;
  font-size: 20px;
}

/* Content area */
.offer-card-content { padding: 18px 20px 20px; }
.offer-card-title {
  color: var(--zh-blue);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.offer-card-subtitle {
  color: var(--zh-mute);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Location — hide theme's blue-gray SVG pin, keep only a red 📍 emoji pin */
.offer-card-location {
  color: var(--zh-blue);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.offer-card-location svg { display: none; }
.offer-card-location::before {
  content: "📍 ";
  margin-right: 2px;
}

/* "Posted on" — urgency cue, pink with clock prefix */
.offer-card-posted-on {
  color: var(--zh-pink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.offer-card-posted-on::before {
  content: "🕐 ";
  margin-right: 2px;
}

/* Member-rate badge — small Loyalty-Violet pill in bottom-right corner with hover tooltip */
.offer-card.has-member-rate { border: 2px solid var(--zh-violet); }

.offer-card-member-rate {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--zh-violet) 0%, var(--zh-violet-d) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px 4px 21px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(92, 119, 204, 0.35);
  cursor: help;
  line-height: 1;
}
.offer-card-member-rate::before {
  content: "★";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
}
.offer-card-member-rate::after {
  content: "Members get extra discounts on top of public rates. Free to join.";
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  background: var(--zh-blue);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  width: 220px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.offer-card-member-rate:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Part 8 — "Show more" button (centered, brand colors)
   ============================================================ */

.deals__more {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  background: transparent;
  color: var(--zh-pink);
  border: 2px solid var(--zh-pink);
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  text-align: center;
}
.deals__more:hover {
  background: var(--zh-pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(236, 90, 91, 0.3);
}

/* ============================================================
   Part 9 — Newsletter section (sibling before .home-app-promo)
   The app-promo banner itself is intentionally not modified.
   ============================================================ */

.zh-newsletter {
  background: linear-gradient(135deg, var(--zh-blue) 0%, var(--zh-blue-d) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 22px 32px 24px;
  margin: 28px auto 24px;
  max-width: 1080px;
  text-align: center;
  box-shadow: var(--zh-shadow-lg);
  position: relative;
  overflow: hidden;
}
.zh-newsletter::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(236, 90, 91, 0.45), transparent 70%);
  pointer-events: none;
}
.zh-newsletter::after {
  content: "";
  position: absolute;
  bottom: -60px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(92, 119, 204, 0.35), transparent 70%);
  pointer-events: none;
}
.zh-newsletter__title {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0 0 8px;
  position: relative;
}
.zh-newsletter__sub {
  font-size: 15px;
  opacity: 0.9;
  margin: 0 0 14px;
  position: relative;
  color: #fff;
}
.zh-newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.zh-newsletter__form input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  color: var(--zh-ink);
}
.zh-newsletter__form button {
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: var(--zh-pink);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: inherit;
}
.zh-newsletter__form button:hover:not(:disabled) {
  background: var(--zh-pink-d);
  transform: translateY(-1px);
}
.zh-newsletter__form button:disabled { opacity: 0.85; cursor: default; }
.zh-newsletter__note {
  font-size: 12px;
  opacity: 0.65;
  margin-top: 10px;
  position: relative;
  color: #fff;
}

/* External-margin-only tweak on .home-app-promo: tightens the gap to the
   footer below. Internal banner styling is NOT modified. */
.home-app-promo {
  margin-bottom: 8px !important;
}