/* ==================================================
   TRIPFLORIC HOMEPAGE — Premium redesign
   Inspired by Airbnb, Booking.com, GetYourGuide, Viator
   ================================================== */

/* ---- Reset (style.css not loaded on homepage) ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Base overrides for the home page ---- */
.home-v2 {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

html,
body.home-v2 {
  /* overflow-x: hidden on body creates a scroll container that breaks ALL
     position: sticky on the page (topbar, navbar, account minibar/sidebar).
     Use clip: it prevents horizontal overflow without becoming a scroll
     container, so sticky keeps working. */
  overflow-x: clip;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.home-v2 h1,
.home-v2 h2,
.home-v2 h3,
.home-v2 h4 {
  font-family: var(--font-primary);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.home-v2 h1 {
  font-weight: 800;
}

.home-v2 h2 {
  font-weight: 700;
}

.home-v2 h3,
.home-v2 h4 {
  font-weight: 600;
}

.home-v2 p {
  margin: 0;
}

.home-v2 a {
  text-decoration: none;
}

.home-v2 img {
  display: block;
  max-width: 100%;
}

/* ---- Container ---- */
.hv2-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ==================================================
   MOBILE MENU
   ================================================== */
.hv2-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 999998 !important;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}

.hv2-mobile-overlay.active {
  display: block;
  opacity: 1;
}

.hv2-mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: white;
  z-index: 999999 !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 0;
  flex-direction: column;
}

.hv2-mobile-menu.open {
  right: 0;
}

.hv2-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.hv2-mobile-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.hv2-mobile-close:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.hv2-mobile-nav-links {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  flex: 1;
}

.hv2-mobile-nav-links li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s;
}

.hv2-mobile-nav-links li a:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.hv2-mobile-nav-links li a i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--primary);
}

.hv2-mobile-menu-bottom {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
}

.hv2-mobile-login {
  flex: 1;
  padding: 12px;
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s;
}

.hv2-mobile-login:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.hv2-mobile-signup {
  flex: 1;
  padding: 12px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.hv2-mobile-signup:hover {
  background: var(--primary-hover);
}

[x-cloak] {
  display: none !important;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .hv2-topbar {
    display: none;
  }
}

/* ---- Section rhythm ---- */
.hv2-section {
  padding: 64px 0;
}

.hv2-section--compact {
  padding: 40px 0;
}

.hv2-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hv2-section-head .head-left {
  max-width: 640px;
}

.hv2-section-head h2 {
  font-size: 30px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.hv2-section-head .head-sub {
  font-size: 16px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.hv2-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 15px;
  transition: gap 0.2s;
}

.hv2-view-all:hover {
  gap: 10px;
}

/* ==================================================
   TOP BAR
   ================================================== */
.hv2-topbar {
  background: var(--primary);
  color: white;
  font-size: 13px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1100;
}

.hv2-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hv2-topbar-left,
.hv2-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hv2-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  transition: color 0.2s;
}

.hv2-topbar-link:hover {
  color: white;
}

.hv2-topbar-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
}

.hv2-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 13px;
  transition: background 0.2s;
}

.hv2-topbar-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.hv2-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
}

.hv2-topbar-btn:hover {
  background: white;
  color: var(--primary);
  border-color: white;
}

/* ==================================================
   NAVBAR
   ================================================== */
.hv2-navbar {
  position: sticky;
  /* sticks right below the topbar — height measured live by header sync script */
  top: var(--tf-topbar-h, var(--header-height-topbar, 36px));
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: white;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.hv2-navbar.scrolled {
  background: #ffffff;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
  border-bottom-color: rgba(203, 213, 225, 0.6);
  padding: 12px 0;
}

.hv2-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hv2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.hv2-brand:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.hv2-navbar.scrolled .hv2-brand,
.hv2-navbar.scrolled .hv2-nav-lang {
  color: var(--text-primary);
}

.hv2-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hv2-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.hv2-nav-link {
  padding: 8px 18px;
  margin: 0;
  color: #475569;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hv2-nav-link i {
  color: var(--primary);
  font-size: 14px;
  transition: transform 0.22s ease, color 0.22s ease;
}

.hv2-nav-link:hover {
  color: var(--primary);
  background: rgba(0, 84, 166, 0.07);
  transform: translateY(-1px);
}

.hv2-nav-link:hover i {
  transform: scale(1.12);
}

.hv2-nav-link::after {
  display: none !important;
}

/* Unmistakable "you are here" marker — elevated crisp white pill */
.hv2-nav-link.active {
  background: #ffffff !important;
  color: var(--primary) !important;
  font-weight: 700;
  border-color: rgba(0, 84, 166, 0.16) !important;
  box-shadow: 0 3px 10px rgba(0, 84, 166, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hv2-nav-link.active i {
  color: var(--primary) !important;
  transform: scale(1.08);
}

.hv2-navbar.scrolled .hv2-nav-link {
  color: #475569;
}

.hv2-navbar.scrolled .hv2-nav-link:hover {
  color: var(--primary);
}

.hv2-navbar.scrolled .hv2-nav-link.active {
  color: var(--primary) !important;
}

.hv2-nav-partner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  padding: 8px 18px;
  background: var(--primary, #0054A6);
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 84, 166, 0.25);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  flex-shrink: 0;
}

.hv2-nav-partner i {
  font-size: 14px;
}

.hv2-nav-partner:hover {
  background: var(--primary-hover, #004488);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 84, 166, 0.35);
}

.hv2-nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hv2-nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.hv2-btn-login {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px;
}

.hv2-btn-signup {
  background: var(--primary);
  color: white !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hv2-btn-signup:hover {
  background: var(--primary-hover);
}

/* 44px minimum touch target. The icon keeps its own size (the media queries
   smaller it down to 18px under 400px) — without this the button measured
   28x30 at 320px, well under the 44px minimum for a primary nav control. */
.hv2-nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
}

.hv2-nav-mobile-toggle:hover {
  background: var(--bg-secondary);
}

/* ==================================================
   NAVBAR — Partner CTA Pill
   ================================================== */
.hv2-nav-partner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 20px;
  padding: 8px 16px;
  background: var(--primary, #0054A6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.hv2-nav-partner:hover {
  color: #fff;
  background: var(--primary-hover, #004488);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 84, 166, 0.35);
}

/* ==================================================
   HERO
   ================================================== */
.hv2-hero {
  position: relative;
  min-height: 560px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 100px;
  overflow: hidden;
}

.hv2-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hv2-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Used when no published listing has a photo yet — brands the hero instead of
   borrowing stock photography. */
.hv2-hero-bg--fallback {
  background: linear-gradient(135deg, #0054A6 0%, #004488 55%, #0F172A 100%);
}

/* Branded stand-in for a card whose listing has no photo. */
.hv2-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(140deg, #0054A6 0%, #0054A6 58%, #003D7A 100%);
  color: rgba(255, 255, 255, 0.66);
  font-size: 34px;
}

.hv2-tour-image .hv2-card-fallback {
  position: absolute;
  inset: 0;
}

.hv2-lux-card .hv2-card-fallback {
  position: absolute;
  inset: 0;
}

/* Listing-fact chips (format, space, policy, payment) shown when there is no
   review score to display yet. Replaces the old "New on TripFloric" platform
   tag, which told the visitor nothing about the listing itself. */
.hv2-tour-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.hv2-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv2-fact i {
  font-size: 9.5px;
  color: var(--primary);
}

/* Green = the guest saves or gets flexibility. */
.hv2-fact--good {
  background: #ECFDF5;
  border-color: #BBF7D0;
  color: #166534;
}

.hv2-fact--good i {
  color: var(--success);
}

/* Brand teal = bookable right now without waiting on the host. */
.hv2-fact--brand {
  background: var(--primary-light, #E8F0FA);
  border-color: #D0E1F5;
  color: var(--primary);
}

.hv2-fact--brand i {
  color: var(--primary);
}

.hv2-tour-price-old {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: line-through;
  margin-right: 2px;
}

.hv2-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, 
      rgba(8, 23, 48, 0.90) 0%, 
      rgba(10, 31, 68, 0.82) 28%, 
      rgba(11, 41, 92, 0.62) 45%, 
      rgba(14, 55, 115, 0.32) 65%, 
      rgba(15, 65, 140, 0.10) 80%, 
      transparent 95%
    ),
    linear-gradient(180deg, 
      rgba(6, 18, 38, 0.45) 0%, 
      transparent 22%, 
      transparent 65%, 
      rgba(6, 18, 38, 0.60) 100%
    );
}

@media (max-width: 768px) {
  .hv2-hero-bg::after {
    background:
      linear-gradient(180deg, 
        rgba(8, 23, 48, 0.92) 0%, 
        rgba(10, 31, 68, 0.85) 55%, 
        rgba(8, 23, 48, 0.95) 100%
      );
  }
}

.hv2-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: fadeInUp 0.6s ease both;
}

.hv2-hero-trust {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.hv2-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 14px;
  padding: 13px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.hv2-hero-trust-item:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 14px 36px rgba(0, 84, 166, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hv2-hero-trust-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0054A6 0%, #2563EB 100%);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.40);
}

.hv2-hero-trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

.hv2-hero-trust-item span {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.hv2-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 130px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tf-flight-path-wrap {
  position: absolute;
  top: 14%;
  left: 40%;
  width: 480px;
  height: 200px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.tf-flight-svg {
  width: 100%;
  height: 100%;
}
.tf-plane-icon {
  position: absolute;
  top: 10%;
  right: 6%;
  color: #ffffff;
  font-size: 19px;
  transform: rotate(45deg);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation: tf-plane-bob 3s ease-in-out infinite alternate;
}
@keyframes tf-plane-bob {
  0% { transform: rotate(45deg) translateY(0); }
  100% { transform: rotate(48deg) translateY(-6px); }
}
@media (max-width: 991px) {
  .tf-flight-path-wrap { display: none; }
}

.hv2-hero h1 {
  /* Fluid instead of 58 → 48 → 42 → 24 at three breakpoints: the heading now
     scales with the viewport, so there is no size jump between 400px and
     1440px. The 32px floor matches the <=540px rule below so a 541px viewport
     never gets a smaller heading than a 540px one. */
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 720px;
  color: white;
  margin-bottom: 16px;
}

.hv2-hero h1 .hv2-text-primary {
  color: #60A5FA;
  background: linear-gradient(135deg, #BAE6FD 0%, #60A5FA 50%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 14px rgba(96, 165, 250, 0.40));
}

.hv2-hero-sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 460px;
  margin-bottom: 28px;
}

/* ---- Floating Search Box ---- */
/* ---- Search tabs (Hotels / Vacation Rentals / Tours / Events / Packages)
   Branded segmented control sitting over the hero photo: unselected tabs are a
   dark glass pill, the selected one is filled with the site's primary colour so
   the control reads as part of the brand instead of a plain white chip. ---- */
.hv2-search-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hv2-search-tabs::-webkit-scrollbar { display: none; }

.hv2-search-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hv2-search-tabs button i {
  font-size: 12.5px;
  opacity: 0.9;
}

.hv2-search-tabs button:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(96, 165, 250, 0.5);
  transform: translateY(-1px);
}

.hv2-search-tabs button.is-active {
  background: linear-gradient(135deg, #0054A6 0%, #004488 100%);
  border-color: rgba(96, 165, 250, 0.65);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 84, 166, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hv2-search-tabs button.is-active i {
  opacity: 1;
  color: #93C5FD;
}

.hv2-search-tabs button:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

.hv2-search-wrap {
  position: relative;
  z-index: 3;
  /* How far the card rides up over the hero photo. The homepage sets
     --hv2-search-offset:-100px on the element itself; because this default
     resolves through a variable, the measured breakpoint rules below can
     still override margin-top at narrow widths. It used to be an inline
     style, which out-ranked every breakpoint and left the card (and its tab
     row) sitting on top of the hero's trust badges on tablets. */
  margin-top: var(--hv2-search-offset, -40px);
  margin-bottom: 20px;
}

.hv2-search {
  background: white;
  border-radius: 14px;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.08),
    0 24px 48px rgba(15, 23, 42, 0.12);
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  border: 1px solid var(--border-light);
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.hv2-search:hover {
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.08),
    0 16px 40px rgba(15, 23, 42, 0.10),
    0 32px 64px rgba(15, 23, 42, 0.15);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.hv2-search-field {
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
}

.hv2-search-field:hover {
  background: var(--bg-secondary);
}

.hv2-search-field input[type="text"],
.hv2-search-field input[type="date"] {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #1e293b;
  padding: 0;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.hv2-search-field input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.hv2-search-field+.hv2-search-field::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border-light);
}

.hv2-search-field .field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.hv2-search-field .field-label i {
  color: var(--primary);
  font-size: 14px;
  transition: transform 0.2s;
}

.hv2-search-field:hover .field-label i {
  transform: scale(1.1);
}

.hv2-search-field .field-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-tertiary);
}

.hv2-search-field .field-value i {
  color: var(--primary);
  font-size: 14px;
  transition: transform 0.2s;
}

.hv2-search-field:hover .field-value i {
  transform: scale(1.1);
}

/* The destination field is a real typing input, unlike the date fields. */
.hv2-search-field #hv2-dest {
  cursor: text;
  font-weight: 700;
  color: #0f172a;
}

/* ==================================================
   Hero "Select Dates" range calendar — same visual language as the tours
   bar (shared-search-bar.css). Scoped under .hv2-search-field--dates so the
   homepage needs no extra stylesheet. Palette: --primary / --primary-light.
   ================================================== */
.hv2-search-field--dates .bk-cal-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 99999;
  background: white;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
  width: 640px;
  max-width: min(640px, 92vw);
  overflow: hidden;
  box-sizing: border-box;
}

.hv2-search-field--dates .bk-cal-body { padding: 16px; }

.hv2-search-field--dates .bk-cal-months { display: flex; gap: 12px; }
.hv2-search-field--dates .bk-cal-month { flex: 1; min-width: 0; }

.hv2-search-field--dates .bk-cal-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hv2-search-field--dates .bk-cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #475569);
  font-size: 12px;
  padding: 2px 6px;
}
.hv2-search-field--dates .bk-cal-nav:hover { color: var(--primary, #0054A6); }

.hv2-search-field--dates .bk-cal-month-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.hv2-search-field--dates .bk-cal-weekdays,
.hv2-search-field--dates .bk-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.hv2-search-field--dates .bk-cal-weekdays { margin-bottom: 4px; }

.hv2-search-field--dates .bk-cal-weekday {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  text-align: center;
  padding: 4px 0;
}

.hv2-search-field--dates .bk-cal-day {
  aspect-ratio: 1;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #111827);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  font-family: inherit;
  padding: 0;
}

.hv2-search-field--dates .bk-cal-day.empty { cursor: default; }
.hv2-search-field--dates .bk-cal-day.disabled { color: #cbd5e1; cursor: not-allowed; }
.hv2-search-field--dates .bk-cal-day.today { font-weight: 700; color: var(--primary, #0054A6); }
.hv2-search-field--dates .bk-cal-day:not(.disabled):not(.empty):hover { background: var(--primary-light, #E8F0FA); }

.hv2-search-field--dates .bk-cal-day.range-start,
.hv2-search-field--dates .bk-cal-day.range-end {
  background: var(--primary, #0054A6) !important;
  color: white !important;
  font-weight: 700;
}

.hv2-search-field--dates .bk-cal-day.in-range {
  background: var(--primary-light, #E8F0FA);
  color: var(--primary-hover, #004488);
  border-radius: 0;
}

.hv2-search-field--dates .bk-cal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light, #E2E8F0);
  background: var(--bg-primary, #F8FAFC);
}

.hv2-search-field--dates .bk-cal-footer-hint {
  font-size: 12.5px;
  color: var(--text-secondary, #475569);
  font-weight: 500;
}

.hv2-search-field--dates .rotate-180 { transform: rotate(180deg); }
.hv2-search-field--dates .field-value i { transition: transform 0.2s; }

/* Hero location picker — same visual language as the listing sidebar picker,
   scoped to the hero search so it never drifts with other dropdowns. */
.hv2-search-field .hv2-dest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 340px;
  max-height: 380px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  padding: 6px 0;
  z-index: 60;
  cursor: default;
}

.hv2-search-field .hv2-dest-head {
  padding: 12px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.hv2-search-field .hv2-dest-loading,
.hv2-search-field .hv2-dest-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 14px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.hv2-search-field .hv2-dest-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.hv2-search-field .hv2-dest-option:hover,
.hv2-search-field .hv2-dest-option:focus-visible {
  background: var(--primary-light, #E8F0FA);
  outline: none;
}

.hv2-search-field .hv2-dest-option>i {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light, #E8F0FA);
  color: var(--primary);
  font-size: 13px;
}

.hv2-search-field .hv2-dest-option>span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hv2-search-field .hv2-dest-option strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv2-search-field .hv2-dest-option small {
  font-size: 12px;
  color: var(--text-tertiary);
}

.hv2-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary, #0054A6);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0 24px;
  height: 46px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  position: relative;
  align-self: center;
}

.hv2-search-btn:hover {
  background: var(--primary-hover, #004488);
  box-shadow: 0 6px 18px rgba(0, 84, 166, 0.32);
  transform: translateY(-1px);
}

.hv2-search-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 84, 166, 0.25);
}

/* ==================================================
   TRUST BAR
   ================================================== */
.hv2-trust-bar {
  background: white;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
  position: relative;
  z-index: 2;
}

.hv2-trust-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hv2-trust-bar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.hv2-trust-bar-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}

.hv2-trust-bar-item:hover .hv2-trust-bar-icon {
  background: #D0E1F5;
  color: var(--primary);
  transform: scale(1.08);
}

.hv2-trust-bar-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.hv2-trust-bar-text span {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* ==================================================
   HORIZONTAL SCROLL CONTAINERS
   ================================================== */
.hv2-scroll-wrap,
.hv2-scroll-container-wrap {
  position: relative;
  overflow: visible;
}

.hv2-scroll-container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 16px;
  scrollbar-width: none;
  max-width: 100%;
}

.hv2-scroll-container::-webkit-scrollbar {
  display: none;
}

.hv2-scroll-container>.hv2-tour-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

.hv2-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  color: var(--text-primary);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.hv2-scroll-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.hv2-scroll-btn-left {
  left: -22px;
}

.hv2-scroll-btn-right {
  right: -22px;
}

.hv2-scroll-card {
  position: relative;
  flex: 0 0 300px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.3s, box-shadow 0.3s;
}

.hv2-scroll-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

.hv2-scroll-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.hv2-scroll-card:hover img {
  transform: scale(1.08);
}

.hv2-scroll-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.85) 100%);
  z-index: 1;
}

.hv2-scroll-card-body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.dest-h-name {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

.dest-h-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.dest-h-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}

.dest-h-rating i {
  color: var(--warning);
  font-size: 11px;
}



/* ==================================================
   POPULAR TOURS
   ================================================== */

.hv2-tour-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.hv2-tour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
}

.hv2-tour-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.hv2-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.hv2-tour-card:hover .hv2-tour-image img {
  transform: scale(1.06);
}

.hv2-tour-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--primary-light, #E8F0FA);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hv2-tour-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.hv2-tour-badges .hv2-tour-badge {
  position: static;
}

.hv2-tour-badge--seller {
  background: var(--warning-light, #FEF3C7);
  color: #92400e;
}

.hv2-tour-badge--popular {
  background: var(--primary-light, #E8F0FA);
  color: var(--primary);
}

.hv2-tour-badge--kind {
  background: var(--primary-light, #E8F0FA);
  color: var(--primary);
}

.hv2-tour-badge--limited {
  background: var(--danger-light, #FEE2E2);
  color: var(--danger);
}

.hv2-tour-badge--new {
  background: var(--success-light, #DCFCE7);
  color: var(--success);
}

.hv2-tour-card:hover .hv2-tour-badge--popular,
.hv2-tour-card:hover .hv2-tour-badge--kind,
.hv2-tour-card:hover .hv2-tour-badge:not(.hv2-tour-badge--seller):not(.hv2-tour-badge--limited):not(.hv2-tour-badge--new) {
  background: #D0E1F5;
  transition: background 0.25s ease;
}

.hv2-deal-old {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-muted, #94a3b8);
  text-decoration: line-through;
  font-weight: 500;
  font-size: 13px;
}

.hv2-tour-wishlist {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: none;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.hv2-tour-wishlist:hover,
.hv2-tour-wishlist.active {
  background: white;
  color: var(--danger);
}

.hv2-tour-body {
  padding: 14px 16px 16px;
}

.hv2-tour-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.hv2-tour-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.hv2-tour-loc i {
  color: var(--primary);
  font-size: 11px;
}

.hv2-tour-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.hv2-tour-rating i {
  color: var(--warning);
  font-size: 11px;
}

.hv2-tour-rating strong {
  color: var(--text-primary);
  font-weight: 700;
}

.hv2-tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.hv2-tour-dur {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.hv2-tour-dur i {
  color: var(--text-secondary);
}

.hv2-tour-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.hv2-tour-price small {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.hv2-tour-price strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ==================================================
   WHY CHOOSE US
   ================================================== */
.hv2-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hv2-why-card {
  background: white;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--border-light);
  transition: transform 0.3s, box-shadow 0.3s;
}

.hv2-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border-color: transparent;
}

.hv2-why-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  background: var(--primary-light);
  color: var(--primary-hover);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.hv2-why-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.hv2-why-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ==================================================
   LUXURY EXPERIENCES
   ================================================== */
/* The intro row is a standard .hv2-section-head so the cards can own the full
   container width. Four across means four items never leave a stranded card. */
.hv2-lux-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hv2-lux-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  cursor: pointer;
  transition: transform 0.3s;
}

.hv2-lux-card:hover {
  transform: translateY(-4px);
}

.hv2-lux-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.hv2-lux-card:hover img {
  transform: scale(1.06);
}

.hv2-lux-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, 0.9) 100%);
}

.hv2-lux-body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  color: white;
}

.hv2-lux-body h3 {
  font-size: 20px;
  color: white;
  margin-bottom: 2px;
}

.hv2-lux-body .lux-country {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.hv2-lux-body .lux-price {
  font-size: 13px;
  color: white;
  font-weight: 600;
}

/* Play button overlay on luxury cards */
.hv2-lux-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding-left: 3px;
  /* optical center for play icon */
}

.hv2-lux-card:hover .hv2-lux-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* ==================================================
   TRAVEL CATEGORIES
   ================================================== */
.hv2-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.hv2-cat-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.hv2-cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 15px 30px rgba(0, 84, 166, 0.15);
}

.hv2-cat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--primary-light);
  color: var(--primary-hover);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}

.hv2-cat-card:hover .hv2-cat-icon {
  background: var(--primary);
  color: white;
  transform: scale(1.08);
}

.hv2-cat-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.hv2-cat-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ==================================================
   SPECIAL OFFERS — PROMO BANNER
   ================================================== */
.hv2-promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--primary);
  border-radius: 18px;
  overflow: hidden;
  min-height: 100px;
}

/* flex: 1 1 auto — the copy is the only part allowed to give up width, so the
   photo panel can never be squeezed off the right edge of the row. */
.hv2-promo-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px;
  flex: 1 1 auto;
  min-width: 0;
}

.hv2-promo-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warning);
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hv2-promo-text h3 {
  color: white;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.hv2-promo-text p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.4;
}

/* The banner links to the deals page instead of collecting an email — the
   site-wide newsletter band already sits above the footer. The old
   .hv2-promo-form email-input wrapper is gone, so this is a standalone class
   and nothing forces width / flex / padding onto it any more. */
.hv2-promo-form--link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  margin-left: 8px;
  border-radius: 10px;
  background: white;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}

.hv2-promo-form--link:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}


.hv2-promo-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-left: auto;
  flex-shrink: 0;
}

.hv2-promo-badge {
  text-align: center;
  color: white;
}

.hv2-promo-badge strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.hv2-promo-badge span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
}

.hv2-promo-badge-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Full-bleed photo panel: it stretches the full height of the band and sits
   flush against the right edge. The banner's own radius + overflow:hidden clip
   the corners, so no inset and no rounded inner card (that inset was showing up
   as a gap on the right). */
.hv2-promo-image {
  width: 220px;
  align-self: stretch;
  flex-shrink: 0;
  overflow: hidden;
  margin: 0;
  position: relative;
}

.hv2-promo-image-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 100%;
  background: linear-gradient(to right, var(--primary), transparent);
  z-index: 1;
  pointer-events: none;
}

.hv2-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}











/* ---- Special Offers Banner Responsive ----
   The banner is a single flex row: [icon + copy] [See All Deals] [badges]
   [photo]. The copy is the only flexible part (flex: 1 1 auto); everything
   else is fixed width, so below the row's natural width a part has to be
   dropped — left to wrap, they stacked into rows of their own (at 1024px the
   banner grew to ~320px tall with its photo stranded bottom-left).

   Measured intrinsic widths, so these breakpoints are not guesses:
     copy 586 · pill 163 (155 + 8 margin) · badges 363 · photo 220
     copy + pill          =  749  → needs a ≥  790px row
     copy + pill + photo  =  969  → needs a ≥ 1010px row
     all four             = 1332  → needs a ≥ 1372px row
   The row is .hv2-container, capped at 1440px minus its 40px gutters, so from
   a 1372px viewport up there is room for all four parts.

   Order of sacrifice: the badges go first (they restate the section), then the
   photo, which is why the photo only disappears on tablet-or-narrower. */
@media (max-width: 1371px) {
  /* Row under 1332px: the badges step aside before the photo, which carries
     the section visually. */
  .hv2-promo-badges {
    display: none;
  }

  /* With the badges gone the pill takes over holding the right edge. The 24px
     keeps it clear of both the banner's rounded corner and the photo panel. */
  .hv2-promo-form--link {
    margin-left: auto;
    margin-right: 24px;
  }
}

@media (max-width: 1008px) {
  /* Copy + pill + photo stops fitting; the pill keeps the right edge alone. */
  .hv2-promo-image {
    display: none;
  }
}

@media (max-width: 768px) {
  .hv2-promo-banner {
    min-height: auto;
    flex-wrap: wrap;
  }

  /* Copy owns the first row so the pill wraps under it instead of squeezing
     the heading into a narrow column. */
  .hv2-promo-left {
    flex: 1 1 100%;
    padding: 20px 24px;
  }

  /* Left-aligned with the icon above it (same 24px as the copy's padding). */
  .hv2-promo-form--link {
    margin: 0 24px 18px;
  }
}

/* Phones: stack into a centred card — icon, copy, then the button. */
@media (max-width: 540px) {
  .hv2-promo-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .hv2-promo-left {
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 20px 4px;
    text-align: center;
  }

  .hv2-promo-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .hv2-promo-text h3 {
    font-size: 16px;
  }

  .hv2-promo-text p {
    font-size: 12.5px;
  }

  .hv2-promo-form--link {
    align-self: center;
    width: fit-content;
    margin: 4px 0 20px;
  }
}

@media (max-width: 400px) {
  .hv2-promo-banner {
    border-radius: 12px;
  }

  .hv2-promo-left {
    padding: 18px 14px 4px;
  }

  .hv2-promo-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .hv2-promo-text h3 {
    font-size: 15px;
  }

  .hv2-promo-text p {
    font-size: 11.5px;
  }

  .hv2-promo-form--link {
    margin: 4px 0 16px;
    padding: 10px 18px;
    font-size: 12.5px;
  }
}

/* ==================================================
   TESTIMONIALS — single-row scroll, light cards
   ================================================== */
.hv2-testimonials-row>.hv2-testimonial-slide {
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.hv2-testimonial-slide {
  display: flex;
  flex-direction: column;
}

.hv2-testimonial-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border: 1px solid var(--border-light);
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.hv2-testimonial-quote-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 40px;
  color: var(--primary);
  opacity: 0.12;
  line-height: 1;
  transition: opacity 0.3s, transform 0.3s;
}

.hv2-testimonial-card:hover .hv2-testimonial-quote-icon {
  opacity: 0.22;
  transform: scale(1.05);
}

.hv2-testimonial-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  opacity: 0;
  transition: opacity 0.3s;
}

.hv2-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 84, 166, 0.1);
  border-color: var(--primary-light, #E8F0FA);
}

.hv2-testimonial-card:hover::after {
  opacity: 1;
}

.hv2-testimonial-rating {
  display: flex;
  gap: 3px;
  color: var(--warning);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.hv2-testimonial-quote {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
  font-style: italic;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  z-index: 1;
}

.hv2-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  position: relative;
  z-index: 1;
}

.hv2-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--primary-light, #E8F0FA);
}

.hv2-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hv2-testimonial-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light, #E8F0FA);
  color: var(--primary, #0054A6);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.hv2-testimonial-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #0054A6);
  margin-top: 2px;
}

.hv2-testimonial-meta h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.hv2-testimonial-meta span {
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hv2-testimonial-meta span i {
  color: var(--primary);
  font-size: 11px;
  opacity: 0.75;
}

/* ==================================================
   GALLERY
   ================================================== */
.hv2-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.hv2-gallery-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.hv2-gallery-tile {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(3, 20, 42, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hv2-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.hv2-gallery-tile:hover img {
  transform: scale(1.05);
}

.hv2-gallery-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(3, 20, 42, 0.22);
}

.hv2-gallery-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* The caption is always on: an idle tile still names what it shows, and the
   "View" affordance plus a deeper wash arrive on hover. */
.hv2-gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(3, 20, 42, 0) 45%, rgba(3, 20, 42, 0.82) 100%);
  color: #fff;
  transition: background 0.3s ease;
  pointer-events: none;
}

.hv2-gallery-tile:hover .hv2-gallery-overlay,
.hv2-gallery-tile:focus-visible .hv2-gallery-overlay {
  background: linear-gradient(180deg, rgba(3, 20, 42, 0.18) 0%, rgba(3, 20, 42, 0.94) 100%);
}

.hv2-gallery-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.hv2-gallery-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kept in flow (never display:none) so revealing it cannot nudge the name. */
.hv2-gallery-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hv2-gallery-tile:hover .hv2-gallery-view,
.hv2-gallery-tile:focus-visible .hv2-gallery-view {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
   FOOTER — Premium Design
   ================================================== */
.hv2-footer {
  background: linear-gradient(180deg, var(--primary) 0%, #003D7A 100%);
  color: rgba(255, 255, 255, 0.8);
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}

.hv2-footer::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.hv2-footer::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

.hv2-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.hv2-footer .hv2-brand {
  color: white;
  margin-bottom: 20px;
  font-size: 24px;
}

.hv2-footer-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 320px;
}

.hv2-footer-social {
  display: flex;
  gap: 10px;
}

.hv2-footer-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hv2-footer-social a:hover {
  background: white;
  color: var(--primary);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.hv2-footer-col h4 {
  color: white;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px;
}

.hv2-footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--warning);
  border-radius: 2px;
}

.hv2-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hv2-footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hv2-footer-col a:hover {
  color: white;
  transform: translateX(4px);
}

.hv2-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hv2-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  transition: color 0.3s;
}

.hv2-footer-contact li:hover {
  color: white;
}

.hv2-footer-contact i {
  color: var(--warning);
  margin-top: 4px;
  font-size: 16px;
}

.hv2-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.hv2-footer-bottom .payments {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hv2-footer-bottom .payments i {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s, transform 0.3s;
}

.hv2-footer-bottom .payments i:hover {
  color: white;
  transform: scale(1.1);
}

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 1200px) {
  /* The navbar row (brand + six links + the partner pill) needs ~1172px to sit
     inside its gutters. Between 1000px and that width it used to push the pill
     past the viewport, where html/body's overflow-x:clip silently cut it off —
     measured at 1024px the pill's right edge landed at 1127px. Tighten the row
     here, and collapse to the hamburger below 1000px (see the 1000px block). */
  .hv2-nav-inner {
    gap: 16px;
  }

  .hv2-nav-links {
    gap: 0;
  }

  .hv2-nav-link {
    padding: 7px 10px;
    margin: 0;
    font-size: 14px;
    gap: 5px;
  }

  .hv2-nav-partner {
    margin-left: 0;
    padding: 7px 12px;
    font-size: 13px;
  }

  .hv2-brand {
    font-size: 20px;
    gap: 8px;
  }

  .hv2-scroll-card {
    flex: 0 0 260px;
    height: 180px;
  }

  .hv2-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hv2-lux-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hv2-lux-card {
    aspect-ratio: 16/9;
  }

  .hv2-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hv2-section-head h2 {
    font-size: 26px;
  }

  .hv2-testimonials-row>.hv2-testimonial-slide {
    flex: 0 0 300px;
  }

  .hv2-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Below 1000px the tightened row above no longer fits its gutters, so collapse
   to the hamburger — same behaviour the header already had under 900px, just
   starting where the desktop row actually runs out of room. */
@media (max-width: 1000px) {
  .hv2-nav-links {
    display: none;
  }

  .hv2-nav-partner {
    display: none;
  }

  .hv2-nav-mobile-toggle {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .hv2-topbar-left {
    display: none;
  }

  .hv2-topbar-right {
    gap: 12px;
    font-size: 12px;
  }

  .hv2-navbar {
    top: 0;
    position: sticky;
  }

  .hv2-container {
    padding: 0 24px;
  }

  .hv2-section {
    padding: 50px 0;
  }

  .hv2-section--compact {
    padding: 32px 0;
  }

  .hv2-testimonials-row>.hv2-testimonial-slide {
    flex: 0 0 280px;
  }

  .hv2-nav-links {
    display: none;
  }

  .hv2-nav-partner {
    display: none;
  }

  .hv2-nav-mobile-toggle {
    display: inline-flex;
  }

  .hv2-navbar {
    padding: 14px 0;
  }

  .hv2-nav-right {
    gap: 10px;
  }

  .hv2-nav-lang {
    font-size: 13px;
  }

  .hv2-btn-login {
    font-size: 13px;
    padding: 6px 2px;
  }

  .hv2-btn-signup {
    padding: 8px 16px;
    font-size: 13px;
  }

  .hv2-brand {
    font-size: 19px;
  }

  .hv2-brand-mark {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .hv2-hero {
    min-height: 480px;
    padding-top: 80px;
  }

  .hv2-hero-sub {
    font-size: 16px;
    max-width: 380px;
  }

  /* Keep the two trust badges side by side and let them wrap only when they
     genuinely cannot fit, instead of stacking into two full-width bars (which
     also made the hero tall enough for the search card to land on top of
     them). */
  .hv2-hero-trust {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hv2-hero-trust-item {
    padding: 10px 16px;
  }

  .hv2-search-wrap {
    margin-top: -30px;
  }

  .hv2-search {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 6px;
  }

  .hv2-search-field {
    padding: 8px 12px;
  }

  .hv2-search-field .field-label {
    font-size: 10px;
  }

  .hv2-search-field .field-value {
    font-size: 12px;
  }

  .hv2-search-field+.hv2-search-field::before {
    top: 8px;
    bottom: 8px;
  }

  .hv2-search-btn {
    grid-column: span 2;
    padding: 14px;
    font-size: 13px;
  }

  /* Two-column bar: occupancy is the odd field out, so let it own the whole
     second row rather than leaving an empty cell next to it. `1 / -1` spans
     every explicit column, so it stays correct when the bar drops to one
     column on phones (a bare `span 2` would ask for an implicit column). */
  .hv2-search-field:last-of-type {
    grid-column: 1 / -1;
  }

  .hv2-trust-bar {
    padding: 16px 0;
  }

  .hv2-trust-bar-inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .hv2-trust-bar-item {
    flex: 0 0 calc(50% - 8px);
  }

  .hv2-scroll-card {
    flex: 0 0 220px;
    height: 160px;
    border-radius: 12px;
  }

  .hv2-scroll-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }

  .hv2-scroll-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .hv2-scroll-btn-left {
    left: -8px;
  }

  .hv2-scroll-btn-right {
    right: -8px;
  }

  .hv2-tour-body {
    padding: 12px 14px 14px;
  }

  .hv2-tour-body h3 {
    font-size: 14px;
  }

  .hv2-tour-price strong {
    font-size: 15px;
  }

  .hv2-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .hv2-why-card {
    padding: 20px 16px;
  }

  .hv2-lux {
    gap: 28px;
  }

  .hv2-lux-intro h2 {
    font-size: 32px;
  }

  .hv2-lux-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .hv2-lux-card {
    aspect-ratio: 16/9;
  }

  .hv2-lux-body h3 {
    font-size: 18px;
  }

  .hv2-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .hv2-cat-card {
    padding: 16px 10px;
  }

  .hv2-cat-icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .hv2-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .hv2-gallery-tile {
    aspect-ratio: 1/1;
  }

  .hv2-footer {
    padding: 60px 0 24px;
  }

  .hv2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 40px;
  }

  .hv2-footer-desc {
    font-size: 13px;
  }

  .hv2-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .hv2-hero-content {
    padding-bottom: 40px;
  }

  .hv2-hero-tag {
    font-size: 12px;
  }

  .hv2-scroll-wrap {
    margin: 0;
    padding: 0;
  }

  .hv2-scroll-container {
    padding: 8px 0 16px;
  }

}

@media (max-width: 768px) {
  .hv2-hero-trust {
    gap: 12px;
  }

  .hv2-hero-trust-item {
    padding: 10px 14px;
  }

  .hv2-hero-trust-item strong {
    font-size: 13px;
  }

  .hv2-hero-trust-item span {
    font-size: 11px;
  }

  .hv2-search {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  .hv2-search-field+.hv2-search-field::before {
    top: 8px;
    bottom: 8px;
  }

  .hv2-search-btn {
    grid-column: span 2;
  }

  .hv2-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hv2-testimonials-row>.hv2-testimonial-slide {
    flex: 0 0 260px;
  }

  .hv2-testimonial-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .hv2-testimonial-quote {
    font-size: 14px;
  }

  .hv2-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 540px) {
  .hv2-container {
    padding: 0 16px;
  }

  .hv2-section {
    padding: 36px 0;
  }

  .hv2-section--compact {
    padding: 24px 0;
  }

  .hv2-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  .hv2-section-head .head-left {
    max-width: 100%;
  }

  .hv2-section-head h2 {
    font-size: 24px;
  }

  .hv2-section-head .head-sub {
    font-size: 14px;
  }

  .hv2-hero {
    min-height: 420px;
    padding-top: 70px;
  }

  .hv2-hero h1 {
    font-size: 32px;
  }

  .hv2-hero-sub {
    font-size: 14px;
    max-width: 300px;
    margin-bottom: 20px;
  }

  .hv2-hero-content {
    padding-bottom: 30px;
  }

  .hv2-hero-trust {
    flex-direction: column;
    gap: 10px;
  }

  .hv2-hero-trust-item {
    padding: 10px 14px;
    gap: 10px;
  }

  .hv2-hero-trust-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .hv2-hero-trust-item strong {
    font-size: 13px;
  }

  .hv2-hero-trust-item span {
    font-size: 11px;
  }

  .hv2-hero-tag {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .hv2-navbar {
    padding: 10px 0;
  }

  .hv2-navbar.scrolled {
    padding: 8px 0;
  }

  .hv2-nav-right {
    gap: 6px;
  }

  .hv2-nav-lang {
    display: none;
  }

  .hv2-nav-partner {
    padding: 6px 12px;
    font-size: 12px;
    margin-left: 6px;
  }

  .hv2-btn-login {
    font-size: 12px;
    padding: 6px 0;
  }

  .hv2-btn-signup {
    padding: 6px 14px;
    font-size: 12px;
  }

  .hv2-brand {
    font-size: 17px;
    gap: 6px;
  }

  .hv2-brand-mark {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 8px;
  }

  .hv2-search-wrap {
    margin-top: -24px;
    margin-bottom: 12px;
  }

  .hv2-search {
    grid-template-columns: 1fr;
    padding: 4px;
    gap: 2px;
    border-radius: 12px;
  }

  .hv2-search-field {
    padding: 8px 12px;
  }

  .hv2-search-field .field-label {
    font-size: 11px;
  }

  .hv2-search-field .field-value {
    font-size: 11px;
  }

  .hv2-search-field+.hv2-search-field::before {
    display: none;
  }

  .hv2-search-btn {
    grid-column: auto;
    padding: 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  .hv2-trust-bar {
    padding: 12px 0;
  }

  .hv2-trust-bar-inner {
    gap: 12px;
  }

  .hv2-trust-bar-item {
    flex: 0 0 100%;
  }

  .hv2-trust-bar-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .hv2-trust-bar-text strong {
    font-size: 13px;
  }

  .hv2-trust-bar-text span {
    font-size: 11px;
  }

  .hv2-scroll-card {
    flex: 0 0 200px;
    height: 150px;
  }

  .hv2-scroll-card-body {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .dest-h-name {
    font-size: 13px;
  }

  .dest-h-count {
    font-size: 11px;
  }

  .dest-h-rating {
    font-size: 11px;
    padding: 3px 6px;
  }

  .hv2-scroll-btn {
    display: none;
  }

  .hv2-tour-card {
    border-radius: 16px;
  }

  .hv2-tour-image {
    aspect-ratio: 16/9;
  }

  .hv2-tour-badge {
    font-size: 10px;
    padding: 4px 10px;
    top: 10px;
    left: 10px;
  }

  .hv2-tour-wishlist {
    width: 32px;
    height: 32px;
    font-size: 12px;
    top: 10px;
    right: 10px;
  }

  .hv2-tour-body {
    padding: 10px 12px 12px;
  }

  .hv2-tour-body h3 {
    font-size: 13px;
  }

  .hv2-tour-loc {
    font-size: 11px;
  }

  .hv2-tour-rating {
    font-size: 11px;
  }

  .hv2-tour-price strong {
    font-size: 14px;
  }

  .hv2-tour-foot {
    padding-top: 8px;
  }

  .hv2-why-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hv2-why-card {
    padding: 16px 14px;
  }

  .hv2-lux-intro h2 {
    font-size: 26px;
  }

  .hv2-lux-intro p {
    font-size: 14px;
  }

  .hv2-lux-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hv2-lux-card {
    aspect-ratio: 16/10;
  }

  .hv2-lux-body h3 {
    font-size: 16px;
  }

  .hv2-lux-body {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .hv2-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .hv2-cat-card {
    padding: 14px 8px;
    border-radius: 12px;
  }

  .hv2-cat-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .hv2-cat-name {
    font-size: 12px;
  }

  .hv2-cat-count {
    font-size: 10px;
  }

  .hv2-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hv2-gallery-tile {
    aspect-ratio: 1;
    border-radius: 12px;
  }

  .hv2-testimonials-row>.hv2-testimonial-slide {
    flex: 0 0 260px;
  }

  .hv2-testimonial-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .hv2-testimonial-quote {
    font-size: 14px;
    line-height: 1.65;
  }

  .hv2-testimonial-avatar {
    width: 44px;
    height: 44px;
  }

  .hv2-testimonial-meta h4 {
    font-size: 14px;
  }

  .hv2-testimonial-meta span {
    font-size: 12px;
  }

  .hv2-testimonial-quote-icon {
    font-size: 36px;
    top: 14px;
    right: 16px;
  }

  .hv2-footer {
    padding: 48px 0 20px;
  }

  .hv2-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
    text-align: center;
  }

  .hv2-footer-desc {
    max-width: 100%;
  }

  .hv2-footer-social {
    justify-content: center;
  }

  .hv2-footer-col ul {
    align-items: center;
  }

  .hv2-footer-col h4 {
    padding-bottom: 8px;
  }

  .hv2-footer-col h4::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .hv2-footer-contact li {
    text-align: left;
  }

  .hv2-footer-bottom {
    padding: 20px 0;
    gap: 12px;
  }

  .hv2-footer-bottom .payments {
    gap: 12px;
  }

  .hv2-footer-bottom .payments i {
    font-size: 24px;
  }

}

/* ---- Extra Small Devices ---- */
@media (max-width: 400px) {
  .hv2-container {
    padding: 0 12px;
  }

  .hv2-section {
    padding: 28px 0;
  }

  .hv2-section--compact {
    padding: 20px 0;
  }

  .hv2-hero {
    min-height: 380px;
    padding-top: 60px;
  }

  .hv2-hero h1 {
    font-size: 26px;
    line-height: 1.1;
  }

  .hv2-hero-sub {
    font-size: 13px;
    max-width: 260px;
  }

  .hv2-hero-tag {
    font-size: 10px;
    margin-bottom: 12px;
  }

  .hv2-hero-trust-item {
    padding: 8px 12px;
    gap: 8px;
  }

  .hv2-hero-trust-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .hv2-hero-trust-item strong {
    font-size: 12px;
  }

  .hv2-hero-trust-item span {
    font-size: 10px;
  }

  .hv2-section-head h2 {
    font-size: 20px;
  }

  .hv2-scroll-card {
    flex: 0 0 180px;
    height: 130px;
  }

  .hv2-tour-body h3 {
    font-size: 12px;
  }

  .hv2-tour-price strong {
    font-size: 13px;
  }

  .hv2-tour-dur {
    font-size: 11px;
  }

  .hv2-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hv2-why-card h3 {
    font-size: 13px;
  }

  .hv2-why-card p {
    font-size: 11px;
  }

  .hv2-testimonial-card {
    padding: 16px 14px;
  }

  .hv2-testimonial-quote {
    font-size: 13px;
    line-height: 1.6;
  }

  .hv2-testimonial-avatar {
    width: 40px;
    height: 40px;
  }

  .hv2-testimonial-meta h4 {
    font-size: 13px;
  }

  .hv2-brand {
    font-size: 16px;
  }

  .hv2-nav-partner {
    padding: 5px 10px;
    font-size: 11px;
    margin-left: 4px;
  }

  .hv2-btn-signup {
    padding: 6px 12px;
    font-size: 11px;
  }

  .hv2-btn-login {
    font-size: 11px;
  }

  .hv2-lux-body h3 {
    font-size: 15px;
  }

  .hv2-lux-body .lux-price {
    font-size: 12px;
  }

  .hv2-lux-intro h2 {
    font-size: 22px;
  }

}

/* ---- Mobile Touch Improvements ---- */
@media (hover: none) and (pointer: coarse) {

  .hv2-tour-card:hover,
  .hv2-scroll-card:hover,
  .hv2-why-card:hover,
  .hv2-cat-card:hover,
  .hv2-lux-card:hover,
  .hv2-testimonial-card:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  }

  .hv2-scroll-btn:hover {
    background: white;
    color: var(--text-primary);
  }
}

/* ==================================================
   OCCUPANCY DROPDOWN (Guests & Rooms)
   ================================================== */
.lp-occ-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
}

.lp-occ-arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}

.lp-occ-arrow.rotated {
  transform: rotate(180deg);
}

.lp-occ-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-light);
  z-index: 100;
  margin-top: 8px;
  padding: 20px;
}

.lp-occ-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.lp-occ-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-occ-label strong {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.lp-occ-label span {
  font-size: 11px;
  color: var(--text-tertiary);
}

.lp-occ-counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--primary);
  border-radius: 6px;
  overflow: hidden;
}

.lp-occ-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-right: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 0;
}

.lp-occ-btn:last-child {
  border-right: none;
  border-left: 1px solid var(--primary);
}

.lp-occ-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.lp-occ-btn:disabled {
  border-color: #d1d5db;
  color: #d1d5db;
  cursor: not-allowed;
  background: #f5f5f5;
}

.lp-occ-btn:disabled:hover {
  background: #f5f5f5;
  color: #d1d5db;
}

.lp-occ-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 36px;
  text-align: center;
}

.lp-occ-divider {
  border-top: 1px solid var(--border-light);
  margin: 4px 0 12px;
}

.lp-occ-pets {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
}

.lp-occ-pets-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-occ-pets-info strong {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.lp-occ-pets-note {
  font-size: 12px;
  color: var(--text-tertiary);
}

.lp-occ-pets-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: underline;
  margin-top: 2px;
}

.lp-occ-pets-link:hover {
  color: var(--primary-hover);
}

.lp-occ-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 4px;
}

.lp-occ-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.lp-occ-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.3s;
}

.lp-occ-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  bottom: 3px;
  left: 3px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lp-occ-toggle input:checked+.lp-occ-toggle-slider {
  background: var(--primary);
}

.lp-occ-toggle input:checked+.lp-occ-toggle-slider::before {
  transform: translateX(20px);
}

.lp-occ-done {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}

.lp-occ-done:hover {
  background: var(--primary-hover);
}

/* ---- Smooth scrolling preference ---- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}