/**
 * Blue Zone Vacations — Coastal Refined Design System
 * Standalone stylesheet — no Arsha dependency.
 * Author: Steve Lang | Updated: Feb 2026
 */

/* Newsreader is used only for guest review quotes (.voices-quote). A serif
   reads as something a person wrote; the surrounding Nunito reads as the site
   talking. Same request as Nunito — one stylesheet, no extra connection. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&family=Newsreader:opsz,wght@6..72,300;6..72,400&display=swap');

/* =================================================================
   Variables & Reset
   ================================================================= */
:root {
  /* Fonts */
  --heading-font: 'Nunito', sans-serif;
  --default-font: 'Nunito', sans-serif;
  --nav-font: 'Nunito', sans-serif;

  /* Core Colors */
  --bz-gray: #D1CBC1;
  --bz-soft-white: #E7E4E0;
  --bz-white: #FFFFFF;
  --bz-palm: #8BA87A;
  --bz-water: #A5C8D0;
  --bz-blue: #005b96;
  --bz-navy: #1F2D35;
  --bz-text: #444444;
  /* Rating star. Deliberately a muted brass rather than Bootstrap's
     text-warning gold — a row of bright gold stars on every card reads as
     a sales badge, which is the thing we're trying not to be. */
  --bz-brass: #9B7B3F;

  /* Guest review quotes only. */
  --voice-font: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Semantic aliases */
  --background-color: var(--bz-white);
  --default-color: var(--bz-text);
  --heading-color: var(--bz-navy);
  --accent-color: var(--bz-blue);
  --surface-color: var(--bz-white);
  --contrast-color: var(--bz-white);

  /* Nav colors */
  --nav-color: var(--bz-white);
  --nav-hover-color: var(--bz-gray);
  --nav-active-color: var(--bz-gray);
  --nav-background-color: var(--bz-blue);
  --nav-scrolled-background-color: var(--bz-blue);
  --nav-mobile-background-color: var(--bz-white);
  --nav-dropdown-color: var(--bz-text);
  --nav-dropdown-hover-color: var(--bz-blue);

  /* Layout */
  --header-height: 72px;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 7.5rem;

  /* Shadows — soft depth */
  --bz-shadow-soft: 0 2px 16px rgba(31, 45, 53, 0.06);
  --bz-shadow-medium: 0 8px 24px rgba(31, 45, 53, 0.10);
  --bz-shadow-lift: 0 12px 30px rgba(31, 45, 53, 0.14);

  /* Hero gradient */
  --hero-gradient: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.12) 35%,
    rgba(0, 0, 0, 0.50) 100%
  );

  scroll-behavior: smooth;
}

/* Section background presets */
.light-background {
  --background-color: var(--bz-soft-white);
  --surface-color: var(--bz-white);
}

.dark-background {
  --background-color: var(--bz-navy);
  --default-color: var(--bz-white);
  --heading-color: var(--bz-white);
  --surface-color: var(--bz-navy);
  --contrast-color: var(--bz-white);
}

/* =================================================================
   Typography
   ================================================================= */
body {
  font-family: var(--default-font);
  color: var(--default-color);
  background-color: var(--background-color);
  padding-top: var(--header-height);
  line-height: 1.75;
  font-weight: 400;
  font-size: 1rem;
}

a {
  color: var(--bz-blue);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--bz-navy);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--bz-navy);
}

h1 {
  font-weight: 800;
  font-size: 2.75rem;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
}

h3 {
  font-weight: 600;
  font-size: 1.35rem;
}

h4 {
  font-weight: 600;
  font-size: 1.15rem;
}

h5, h6 {
  font-weight: 600;
}

.text-small, .caption {
  font-weight: 300;
  font-size: 0.85rem;
}

/* =================================================================
   Layout & Spacing
   ================================================================= */
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 50px 0;
  scroll-margin-top: calc(var(--header-height) + 20px);
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: calc(var(--header-height) + 10px);
  }
}

.section-title {
  text-align: center;
  padding-bottom: 40px;
  position: relative;
}

.section-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--bz-blue);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 2px;
}

.section-title p {
  margin-bottom: 0;
  color: var(--bz-text);
}

/* Scroll margin for anchor sections */
#about,
#contact,
#listings,
#resorts {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* =================================================================
   Header & Navigation
   ================================================================= */
#header {
  background-color: var(--bz-blue);
  padding: 0;
  height: var(--header-height);
  transition: all 0.4s ease;
  z-index: 997;
}

#header .container {
  height: 100%;
}

/* Index/home page: transparent header over hero, solid on scroll */
.index-page {
  padding-top: 0;  /* Hero goes behind the transparent header */
}

.index-page #header {
  background-color: transparent;
}

.index-page.scrolled #header {
  background-color: rgba(0, 91, 150, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* Non-index pages: always solid */
body:not(.index-page) #header {
  background-color: var(--bz-blue);
}

/* Brand */
.bz-brand {
  font-variant: small-caps;
  letter-spacing: 1px;
  color: var(--bz-white);
  font-weight: 700;
  text-decoration: none;
}

.bz-brand:hover {
  color: var(--bz-white);
  opacity: 0.85;
}

#header .logo {
  line-height: 1;
}

#header .logo a {
  font-family: var(--heading-font);
  font-variant: small-caps;
  letter-spacing: 1px;
  color: var(--bz-white);
  text-transform: none;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  text-decoration: none;
}

#header .logo a:hover {
  color: var(--bz-white);
  opacity: 0.85;
}

.header-logo-img {
  /* New round brand mark (1:1) is self-contained with its own ring on a
     transparent background, so it needs no white card / border / shadow. */
  height: calc(var(--header-height) - 16px);
  width: calc(var(--header-height) - 16px);
  display: block;
  object-fit: contain;
  margin-right: 14px;
  transition: transform 0.3s ease;
}

.header-logo-img:hover {
  transform: scale(1.05);
}

/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    gap: 4px;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 10px 16px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.3s;
    border-radius: 8px;
    text-decoration: none;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* Mobile Navigation — slide-in overlay from right */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    display: block;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    padding: calc(var(--header-height) + 20px) 0 20px;
    margin: 0;
    background-color: var(--bz-white);
    overflow-y: auto;
    z-index: 9998;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--bz-navy);
    padding: 14px 24px;
    font-family: var(--nav-font);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none;
    border-bottom: 1px solid var(--bz-soft-white);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--bz-blue);
    background-color: var(--bz-soft-white);
  }

  /* Active mobile nav state */
  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: var(--bz-navy);
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    font-size: 32px;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: rgba(31, 45, 53, 0.6);
    z-index: 9997;
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
    transform: translateX(0);
  }
}

@media (min-width: 1200px) {
  .mobile-nav-toggle {
    display: none;
  }
}

/* =================================================================
   Header User Menu — account dropdown (role-based portals)
   ================================================================= */
.bz-logout-form {
  margin: 0;
  padding: 0;
}

/* Trigger: name + avatar + caret, styled like a nav link */
.bz-user-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  gap: 9px;
}

.bz-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bz-water), var(--bz-palm));
  color: var(--bz-navy);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.bz-user-avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.bz-user-caret {
  font-size: 11px;
  transition: transform 0.25s ease;
  opacity: 0.85;
}

.bz-user-menu.is-open .bz-user-caret {
  transform: rotate(180deg);
}

/* Panel card */
.bz-user-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.bz-user-panel__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bz-user-panel__name {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--bz-navy);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-user-panel__email {
  font-size: 12.5px;
  color: var(--bz-text);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-user-panel__group {
  padding: 6px;
}

/* Menu items — selectors scoped under .navmenu to outrank `.navmenu a` */
.navmenu .bz-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--nav-font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bz-navy);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navmenu .bz-user-item i {
  font-size: 16px;
  color: var(--bz-blue);
  width: 18px;
  text-align: center;
  transition: color 0.2s ease;
}

.navmenu .bz-user-item:hover,
.navmenu .bz-user-item:focus-visible {
  background-color: rgba(0, 91, 150, 0.08);
  color: var(--bz-blue);
  outline: none;
}

.navmenu .bz-user-item--logout {
  color: #b2452f;
}

.navmenu .bz-user-item--logout i {
  color: #b2452f;
}

.navmenu .bz-user-item--logout:hover,
.navmenu .bz-user-item--logout:focus-visible {
  background-color: rgba(178, 69, 47, 0.09);
  color: #93341f;
}

.navmenu .bz-user-item--logout:hover i {
  color: #93341f;
}

/* Desktop: floating dropdown card */
@media (min-width: 1200px) {
  .bz-user-menu {
    margin-left: 6px;
  }

  .bz-user-trigger {
    color: var(--nav-color);
  }

  .bz-user-menu.is-open .bz-user-trigger {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--nav-hover-color);
  }

  .bz-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bz-user-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 256px;
    background: var(--bz-white);
    border: 1px solid rgba(31, 45, 53, 0.08);
    border-radius: 14px;
    box-shadow: var(--bz-shadow-lift);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
  }

  /* Coastal accent strip on the identity header */
  .bz-user-panel__head {
    background: linear-gradient(135deg, rgba(165, 200, 208, 0.18), rgba(139, 168, 122, 0.14));
    border-bottom: 1px solid rgba(31, 45, 53, 0.06);
  }

  .bz-user-panel__group + .bz-user-panel__group {
    border-top: 1px solid rgba(31, 45, 53, 0.07);
  }

  .bz-user-menu.is-open .bz-user-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
}

/* Mobile: render items inline within the slide-in panel */
@media (max-width: 1199px) {
  .bz-user-trigger {
    color: var(--bz-navy);
    font-weight: 700;
    border-bottom: 1px solid var(--bz-soft-white);
    pointer-events: none;
  }

  .bz-user-caret {
    display: none;
  }

  .bz-user-panel__head {
    display: none;
  }

  .navmenu .bz-user-item {
    border-radius: 0;
    padding: 14px 24px;
    font-size: 15px;
    border-bottom: 1px solid var(--bz-soft-white);
  }

  .navmenu .bz-user-item:hover,
  .navmenu .bz-user-item:focus-visible {
    background-color: var(--bz-soft-white);
  }

  .bz-logout-form {
    display: block;
  }
}

/* =================================================================
   Hero & Search
   ================================================================= */
#hero {
  width: 100%;
  height: 75vh;
  min-height: 550px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 32px;
}

#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Hero carousel items */
#heroCarousel .carousel-item {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Ken Burns zoom effect */
#heroCarousel .carousel-item.active {
  animation: kenBurns 8s ease-in-out forwards;
}

@keyframes kenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Film grain overlay */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Top gradient for header legibility */
#hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Hide carousel indicators */
#heroCarousel .carousel-indicators {
  display: none;
}

.hero-content-overlay {
  z-index: 3;
  width: 100%;
  position: relative;
}

.brand-title {
  color: var(--bz-white);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
}

.hero-subtext {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--bz-white);
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 0;
}

.hero-tagline {
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.03em;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Hero search form — pill-shaped horizontal bar */
.hero-search-form {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.search-form-inner {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 640px;
  padding: 8px 8px 8px 32px;
  display: flex;
  align-items: center;
  gap: 0;
}

.search-form-inner form {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.search-field {
  flex: 1;
  position: relative;
  padding: 8px 16px;
}

.search-field:first-child {
  padding-left: 0;
}

.search-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bz-navy);
  margin-bottom: 2px;
}

.search-field input[type="date"] {
  border: none;
  background: transparent;
  font-family: var(--default-font);
  font-size: 0.95rem;
  color: var(--bz-text);
  padding: 0;
  width: 100%;
  outline: none;
}

.search-field input[type="date"]:focus {
  color: var(--bz-navy);
}

.hero-date-display {
  font-family: var(--default-font);
  font-size: 0.95rem;
  color: var(--bz-navy);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.hero-date-display.placeholder {
  color: var(--bz-text);
  font-weight: 400;
}

.search-divider {
  width: 1px;
  height: 36px;
  background-color: var(--bz-gray);
  flex-shrink: 0;
}

.search-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: var(--bz-blue);
  border: none;
  color: var(--bz-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.search-btn:hover {
  background-color: var(--bz-navy);
  transform: scale(1.08);
}

/* Hero responsive */
@media (max-width: 768px) {
  #hero {
    height: auto;
    min-height: 520px;
    padding: 100px 0 16px;
    align-items: flex-end;
  }

  .brand-title {
    font-size: 2.25rem;
  }

  .hero-subtext {
    font-size: 1rem;
  }

  .hero-tagline {
    font-size: 0.8rem;
  }

  .search-form-inner {
    border-radius: 16px;
    padding: 16px 20px;
    flex-direction: column;
    max-width: 400px;
  }

  .search-form-inner form {
    flex-direction: column;
    gap: 12px;
  }

  .search-field {
    padding: 0;
    width: 100%;
  }

  .search-field input[type="date"] {
    padding: 10px 12px;
    border: 1.5px solid var(--bz-gray);
    border-radius: 10px;
    background: var(--bz-soft-white);
  }

  .search-field input[type="date"]:focus {
    border-color: var(--bz-blue);
  }

  .hero-date-display {
    padding: 10px 12px;
    border: 1.5px solid var(--bz-gray);
    border-radius: 10px;
    background: var(--bz-soft-white);
  }

  .search-divider {
    display: none;
  }

  .search-btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    margin-left: 0;
  }

  .hero-search-form {
    margin-top: 28px;
  }
}

/* =================================================================
   Listing Cards
   ================================================================= */
.bz-listing-card {
  position: relative;
  background: var(--bz-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--bz-shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.bz-listing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bz-shadow-lift);
  color: inherit;
  text-decoration: none;
}

.bz-listing-card .card-img-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.bz-listing-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bz-listing-card:hover .card-img-wrap img {
  transform: scale(1.03);
}

.bz-listing-card .card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background-color: var(--bz-palm);
  color: var(--bz-white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.bz-listing-card .card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bz-listing-card .card-location {
  font-size: 0.85rem;
  color: var(--bz-text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bz-listing-card .card-location i {
  color: var(--bz-blue);
  font-size: 0.8rem;
}

.bz-listing-card .card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 8px;
}

.bz-listing-card .card-details {
  font-size: 0.85rem;
  color: var(--bz-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bz-listing-card .card-details .dot {
  width: 3px;
  height: 3px;
  background: var(--bz-gray);
  border-radius: 50%;
  display: inline-block;
}

.bz-listing-card .card-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bz-blue);
  font-size: 0.9rem;
  font-weight: 600;
  transition: gap 0.2s ease;
}

.bz-listing-card:hover .card-cta {
  gap: 10px;
}

.bz-listing-card .card-cta i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.bz-listing-card:hover .card-cta i {
  transform: translateX(2px);
}

/* Listing grid */
@media (min-width: 1400px) {
  .listing-grid .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
}

/* Legacy service-item support (for other components) */
.service-item {
  background: var(--bz-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--bz-shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  padding: 0;
  border: none;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--bz-shadow-lift);
}

/* =================================================================
   Listing Detail
   ================================================================= */

/* Photo gallery — mosaic grid */
.bz-gallery-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
  max-height: 480px;
}

.bz-gallery-mosaic .gallery-item {
  overflow: hidden;
  position: relative;
}

.bz-gallery-mosaic .gallery-item:first-child {
  grid-row: 1 / 3;
}

.bz-gallery-mosaic .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.bz-gallery-mosaic .gallery-item:hover img {
  transform: scale(1.03);
}

.bz-gallery-mosaic .gallery-show-all {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--bz-white);
  color: var(--bz-navy);
  border: 1px solid var(--bz-navy);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
}

.bz-gallery-mosaic .gallery-show-all:hover {
  background: var(--bz-navy);
  color: var(--bz-white);
}

/* Fallback carousel for mobile / few photos */
.listing-hero-container {
  width: 100%;
  margin-bottom: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--bz-shadow-soft);
}

.listing-hero-carousel .carousel-inner {
  aspect-ratio: 3 / 2;
  height: auto;
}

.listing-hero-carousel .carousel-item {
  height: 100%;
}

.listing-hero-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .bz-gallery-mosaic {
    display: none;
  }

  .listing-hero-container {
    border-radius: 0;
  }
}

@media (min-width: 769px) {
  .bz-gallery-mobile-only {
    display: none;
  }
}

/* GLightbox caption styling — must beat .glightbox-clean specificity */
.glightbox-clean .gslide-description {
  background: rgba(31, 45, 53, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glightbox-clean .gslide-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bz-soft-white);
  margin-bottom: 6px;
}

.glightbox-clean .gslide-desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #000 !important;
}

.glightbox-clean .gslide-desc * {
  color: #000 !important;
}

.glightbox-mobile .glightbox-container .gslide-desc,
.glightbox-mobile .glightbox-container .gslide-desc * {
  color: #000 !important;
}

/* Resort summary blockquote */
.resort-summary {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--bz-text);
  border-left: 4px solid var(--bz-blue);
  padding: 16px 20px;
  background: var(--bz-soft-white);
  border-radius: 0 12px 12px 0;
  margin-bottom: 24px;
  line-height: 1.75;
}

/* Property header */
.property-header h1 {
  color: var(--bz-navy);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.property-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 15px;
  color: var(--bz-text);
}

.property-highlights span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Content sections — clean dividers */
.detail-section {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--bz-soft-white);
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section h3 {
  color: var(--bz-navy);
  margin-bottom: var(--space-md);
}

/* Description wrappers */
.description-wrapper {
  position: relative;
}

.section-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(transparent, var(--bz-white));
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.toggle-btn {
  color: var(--bz-blue);
  font-weight: 600;
}

.toggle-btn:hover {
  color: var(--bz-navy);
}

/* Sticky section sub-nav */
.detail-subnav {
  position: sticky;
  top: var(--header-height);
  z-index: 100;
  background: var(--bz-white);
  border-bottom: 1px solid var(--bz-soft-white);
  padding: 12px 0;
  margin-bottom: var(--space-md);
}

.detail-subnav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.detail-subnav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bz-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.detail-subnav a:hover,
.detail-subnav a.active {
  color: var(--bz-blue);
  border-bottom-color: var(--bz-blue);
}

/* Review carousel controls */
#reviewCarousel .carousel-control-prev,
#reviewCarousel .carousel-control-next {
  width: 50px;
  opacity: 0.8;
}

#reviewCarousel .carousel-control-prev:hover,
#reviewCarousel .carousel-control-next:hover {
  opacity: 1;
}

#reviewCarousel .carousel-control-prev-icon,
#reviewCarousel .carousel-control-next-icon {
  background-color: transparent;
  filter: invert(0.3) brightness(0.5);
}

/* =================================================================
   Calendar & Booking
   ================================================================= */

/* Booking card */
.booking-card {
  border: 1px solid var(--bz-soft-white);
  border-radius: 16px;
  box-shadow: var(--bz-shadow-medium);
  background: var(--bz-white);
}

@media (min-width: 992px) {
  .booking-card {
    position: sticky;
    top: calc(var(--header-height) + 20px);
  }
}

/* Date trigger — split pill */
.date-trigger {
  display: flex;
  border: 1.5px solid var(--bz-gray);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.date-trigger:hover {
  border-color: var(--bz-blue);
}

.date-trigger .date-half {
  flex: 1;
  padding: 10px 14px;
  transition: background-color 0.2s ease;
}

.date-trigger .date-half.active {
  background-color: var(--bz-soft-white);
}

.date-trigger .date-half label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bz-text);
  margin-bottom: 2px;
}

.date-trigger .date-half .date-value {
  font-size: 0.9rem;
  color: var(--bz-navy);
  font-weight: 500;
}

.date-trigger .date-half .date-value.placeholder {
  color: var(--bz-gray);
}

.date-trigger .date-divider {
  width: 1px;
  background: var(--bz-gray);
}

/* Calendar popover — fixed position, centered on screen */
.bz-calendar-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background: var(--bz-white);
  border-radius: 16px;
  box-shadow: 0 12px 60px rgba(31, 45, 53, 0.25);
  padding: 24px;
  display: none;
  min-width: 620px;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.bz-calendar-popover.open {
  display: block;
}

/* Backdrop when popover is open */
.bz-calendar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 45, 53, 0.3);
  z-index: 1040;
}

.bz-calendar-backdrop.open {
  display: block;
}

.bz-calendar-popover .cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bz-calendar-popover .cal-header h5 {
  margin: 0;
  font-weight: 700;
  color: var(--bz-navy);
  font-size: 1rem;
}

.bz-calendar-popover .cal-nav-btn {
  background: none;
  border: 1px solid var(--bz-gray);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--bz-navy);
}

.bz-calendar-popover .cal-nav-btn:hover {
  background: var(--bz-soft-white);
  border-color: var(--bz-blue);
}

.bz-calendar-popover .cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal-months-container {
  display: flex;
  gap: 24px;
}

.cal-month {
  flex: 1;
}

/* Calendar table styles */
.calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.calendar-table th {
  padding: 8px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bz-text);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-table td {
  height: 56px;
  vertical-align: top;
  padding: 4px;
  position: relative;
  text-align: center;
  border-radius: 8px;
}

.calendar-day {
  position: relative;
  height: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.calendar-day.empty-day {
  cursor: default;
}

.calendar-day.past-day {
  color: var(--bz-gray);
  cursor: not-allowed;
}

.calendar-day.available-day:hover {
  background-color: rgba(0, 91, 150, 0.06);
}

.calendar-day.today .day-number {
  font-weight: 700;
  color: var(--bz-blue);
}

.calendar-day.booked-day {
  cursor: not-allowed;
}

.calendar-day.booked-day .day-number {
  text-decoration: line-through;
  color: var(--bz-gray);
}

/* Day number and price */
.day-number {
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  z-index: 6;
  line-height: 1.3;
}

.day-price {
  font-size: 0.65rem;
  color: var(--bz-text);
  font-weight: 400;
  position: relative;
  z-index: 6;
  opacity: 0.7;
}

/* Selected states */
.calendar-day.selected-start,
.calendar-day.selected-end {
  background-color: var(--bz-blue);
  border-radius: 50%;
}

.calendar-day.selected-start .day-number,
.calendar-day.selected-end .day-number,
.calendar-day.selected-start .day-price,
.calendar-day.selected-end .day-price {
  color: var(--bz-white);
}

.calendar-day.in-range {
  background-color: rgba(0, 91, 150, 0.06);
  border-radius: 0;
}

.calendar-day.selected-start {
  border-radius: 50% 0 0 50%;
}

.calendar-day.selected-end {
  border-radius: 0 50% 50% 0;
}

.calendar-day.selected-start.selected-end {
  border-radius: 50%;
}

/* Calendar pill-based ranges (legacy support for full-page calendar) */
.calendar-pill {
  position: absolute;
  top: 68%;
  height: 34px;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
  border-radius: 17px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.booked-range {
  background-color: #ff8a80;
}

.selected-range {
  background-color: var(--bz-blue);
}

.selected-single {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--bz-blue);
  left: 50%;
  transform: translate(-50%, -50%);
  top: 68%;
  box-shadow: 0 4px 12px rgba(0, 91, 150, 0.3);
}

td.has-pill {
  border-left: none;
  border-right: none;
  background-color: var(--bz-white);
}

tr:has(td.has-pill) td {
  border-left: none;
  border-right: none;
}

/* Calendar popover footer */
.cal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bz-soft-white);
}

.cal-footer .clear-dates {
  font-size: 0.85rem;
  color: var(--bz-text);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.cal-footer .clear-dates:hover {
  color: var(--bz-navy);
}

.cal-footer .close-cal {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bz-white);
  background: var(--bz-navy);
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cal-footer .close-cal:hover {
  background: var(--bz-blue);
}

/* Price breakdown animation */
.price-breakdown {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.price-breakdown.hidden {
  max-height: 0;
  opacity: 0;
}

.price-breakdown.visible {
  max-height: 300px;
  opacity: 1;
}

.reservation-summary-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 6px;
}

.reservation-summary-stay-row {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--bz-text);
}

/* Reserve button */
.reserve-btn {
  background-color: var(--bz-blue);
  color: var(--bz-white);
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.reserve-btn:hover:not(:disabled) {
  background-color: var(--bz-navy);
  transform: translateY(-1px);
  box-shadow: var(--bz-shadow-medium);
}

.reserve-btn:disabled {
  background-color: var(--bz-gray);
  color: var(--bz-white);
  cursor: not-allowed;
}

/* Adjacent-night pricing nudge */
.adjacent-nudge {
  margin-bottom: 16px;
}

.nudge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(156, 175, 152, 0.18), rgba(165, 200, 208, 0.18));
  border: 1.5px solid var(--bz-palm);
  border-radius: 10px;
  font-size: 0.84rem;
  color: var(--bz-navy);
  line-height: 1.4;
  margin-bottom: 6px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nudge-item:hover {
  background: linear-gradient(135deg, rgba(156, 175, 152, 0.28), rgba(165, 200, 208, 0.28));
  box-shadow: 0 2px 8px rgba(156, 175, 152, 0.25);
}

.nudge-action {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.nudge-item:last-child {
  margin-bottom: 0;
}

.nudge-item i {
  color: var(--bz-palm);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.nudge-item strong {
  color: var(--bz-blue);
}

/* Promo code (LAUNCH26 etc.) — quiet affordance that unfolds inline;
   the applied state is a dashed "ticket" chip in the palm/water language. */
.promo-block {
  margin-top: 10px;
}

.promo-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--bz-blue);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.promo-toggle:hover {
  color: var(--bz-navy);
}

.promo-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  animation: promo-unfold 0.25s ease;
}

.promo-input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 8px 12px;
  border: 1.5px solid var(--bz-gray);
  border-radius: 8px;
  color: var(--bz-navy);
}

.promo-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: #9a948a;
}

.promo-input:focus {
  outline: none;
  border-color: var(--bz-blue);
  box-shadow: 0 0 0 3px rgba(0, 91, 150, 0.12);
}

.promo-apply-btn {
  border: 1.5px solid var(--bz-blue);
  background: var(--bz-white);
  color: var(--bz-blue);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.promo-apply-btn:hover {
  background: var(--bz-blue);
  color: var(--bz-white);
}

.promo-applied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1.5px dashed var(--bz-palm);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 168, 122, 0.14), rgba(165, 200, 208, 0.14));
  font-size: 0.84rem;
  color: var(--bz-navy);
  animation: promo-settle 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.promo-applied i.bi-tag-fill {
  color: var(--bz-palm);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.promo-applied .promo-code-label {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.promo-applied .promo-saved {
  margin-left: auto;
  font-weight: 700;
  color: var(--bz-blue);
  white-space: nowrap;
}

.promo-remove {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  color: var(--bz-text);
  opacity: 0.55;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.promo-remove:hover {
  opacity: 1;
}

.promo-error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #b0564a;
}

.promo-note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--bz-text);
}

@keyframes promo-unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes promo-settle {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* The promo ribbon that used to live here (a full-width navy strip pinned
   over the hero) was removed 2026-07-26. The ?promo= handoff is unaffected:
   bz-core.js stashes the code in sessionStorage and the booking card applies
   it on the listing page. The promo-unfold/promo-settle keyframes above are
   still used by the booking card and welcome-back page. */

/* Welcome-back page — frame QR destination for returning guests.
   Reads as a note from the owners: condo photo under the translucent navy
   brand band (same treatment as the frame slides), then one white card that
   overlaps the photo, one savings figure, one CTA, one email field. */
.bz-wb-page {
  background: var(--bz-soft-white);
  padding-bottom: 56px;
}

.bz-wb-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: var(--bz-navy);
}

.bz-wb-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bz-wb-hero-band {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background: rgba(0, 91, 150, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.bz-wb-hero-band img {
  height: 40px;
}

.bz-wb-card {
  position: relative;
  margin-top: -72px;
  background: var(--bz-white);
  border-radius: 16px;
  box-shadow: var(--bz-shadow-lift);
  padding: 36px 32px 28px;
  animation: promo-settle 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.bz-wb-title {
  color: var(--bz-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 10px;
}

.bz-wb-sub {
  color: var(--bz-text);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.bz-wb-savings {
  text-align: center;
  padding: 22px 18px;
  border-radius: 12px;
  border: 1.5px dashed var(--bz-palm);
  background: linear-gradient(135deg, rgba(139, 168, 122, 0.12), rgba(165, 200, 208, 0.12));
  margin-bottom: 20px;
}

.bz-wb-savings-amount {
  color: var(--bz-navy);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bz-wb-savings-label {
  color: var(--bz-navy);
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 8px;
}

.bz-wb-savings-note {
  color: var(--bz-text);
  font-size: 0.78rem;
  margin-top: 8px;
  opacity: 0.85;
}

.bz-wb-seasonal {
  position: relative;
  padding: 18px 20px 16px 26px;
  border-radius: 12px;
  border: 1px solid rgba(0, 91, 150, 0.18);
  background: linear-gradient(135deg, rgba(0, 91, 150, 0.07), rgba(165, 200, 208, 0.20));
  overflow: hidden;
  margin-bottom: 20px;
}

.bz-wb-seasonal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--bz-blue);
}

.bz-wb-seasonal-eyebrow {
  color: var(--bz-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bz-wb-seasonal-headline {
  color: var(--bz-navy);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.bz-wb-seasonal-body {
  color: var(--bz-text);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.bz-wb-promo-line {
  text-align: center;
  font-size: 0.92rem;
  color: var(--bz-text);
  margin-bottom: 20px;
}

.bz-wb-code {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bz-palm);
  color: var(--bz-navy);
  white-space: nowrap;
}

.bz-wb-cta {
  display: block;
  width: 100%;
  background: var(--bz-blue);
  color: var(--bz-white);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 13px 20px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.bz-wb-cta:hover {
  background: var(--bz-navy);
  color: var(--bz-white);
  transform: translateY(-1px);
}

.bz-wb-capture {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--bz-soft-white);
}

.bz-wb-capture-title {
  color: var(--bz-navy);
  font-weight: 700;
  font-size: 0.95rem;
}

.bz-wb-capture-sub {
  color: var(--bz-text);
  font-size: 0.84rem;
  margin: 6px 0 12px;
}

.bz-wb-capture-form {
  display: flex;
  gap: 8px;
}

.bz-wb-capture-form input {
  flex: 1;
}

.bz-wb-capture-btn {
  background: var(--bz-navy);
  color: var(--bz-white);
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
}

.bz-wb-capture-btn:hover {
  background: var(--bz-blue);
  color: var(--bz-white);
}

.bz-wb-fineprint {
  text-align: center;
  color: var(--bz-text);
  font-size: 0.76rem;
  margin: 22px 0 0;
  opacity: 0.8;
}

.bz-wb-fineprint a {
  color: var(--bz-blue);
}

@media (max-width: 575px) {
  .bz-wb-hero { height: 220px; }
  .bz-wb-card { margin-top: -56px; padding: 28px 20px 22px; }
  .bz-wb-title { font-size: 1.3rem; }
  .bz-wb-savings-amount { font-size: 2.5rem; }
}

/* Mobile bottom bar */
.bz-mobile-bottom-bar {
  display: none;
}

@media (max-width: 991px) {
  .bz-mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--bz-gray);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 12px 20px;
    /* Column so the book-direct strip can sit above the price/CTA row
       without disturbing either. .mobile-bar-row keeps the original
       side-by-side layout. */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .bz-mobile-bottom-bar .mobile-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .bz-mobile-bottom-bar .mobile-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bz-navy);
    cursor: pointer;
  }

  .bz-mobile-bottom-bar .mobile-price span {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--bz-text);
  }

  /* Selected-range edit affordance: tappable dates + nightly rate */
  .bz-mobile-bottom-bar .mobile-price .mp-range {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bz-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .bz-mobile-bottom-bar .mobile-price .mp-range i {
    font-size: 0.72rem;
    text-decoration: none;
    display: inline-block;
  }

  .bz-mobile-bottom-bar .mobile-price .mp-rate {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bz-navy);
  }

  /* Prompt/feedback text shown before valid dates are chosen */
  .bz-mobile-bottom-bar .mobile-price .mobile-hint {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bz-text);
  }

  .bz-mobile-bottom-bar .mobile-price .mobile-hint.warn {
    color: #c0392b;
  }

  .bz-mobile-bottom-bar .mobile-cta {
    background: var(--bz-blue);
    color: var(--bz-white);
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .bz-mobile-bottom-bar .mobile-cta:hover {
    background: var(--bz-navy);
  }
}

/* Mobile calendar drawer */
.bz-calendar-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(31, 45, 53, 0.5);
}

.bz-calendar-drawer.open {
  display: block;
}

.bz-calendar-drawer .drawer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--bz-white);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  /* Backstop: content must never paint outside the sheet. Without this a
     content div missing .drawer-scroll silently spills thousands of pixels
     down an unscrollable page and strands the footer off-screen. */
  overflow: hidden;
}

.bz-calendar-drawer.open .drawer-panel {
  transform: translateY(0);
}

/* Header holds the grab handle (tap to dismiss). Stays fixed at the top. */
.drawer-header {
  flex-shrink: 0;
  text-align: center;
  padding: 8px 16px 4px;
}

.drawer-handle {
  display: block;
  width: 44px;
  height: 5px;
  background: var(--bz-gray);
  border: none;
  border-radius: 3px;
  padding: 0;
  margin: 6px auto;
  cursor: pointer;
}

/* The calendar scrolls here, between the fixed header and footer. */
.drawer-scroll {
  flex: 1 1 auto;
  min-height: 0; /* let this shrink inside the flex column instead of pushing the footer out */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 20px 16px;
}

/* Month rail — pinned to the top of the sheet so any month in the booking
   window is one tap away instead of eight screens of scrolling. */
.cal-month-rail {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Negative margin bleeds the rail to the sheet edges through the scroll
     container's 20px side padding. */
  margin: 0 -20px 12px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--bz-soft-white);
}

.cal-month-rail::-webkit-scrollbar {
  display: none;
}

.cal-month-chip {
  flex: 0 0 auto;
  border: 1px solid var(--bz-soft-white);
  background: var(--bz-white);
  color: var(--bz-text);
  font-family: var(--default-font);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cal-month-chip.is-active {
  background: var(--bz-navy);
  border-color: var(--bz-navy);
  color: var(--bz-white);
}

.cal-month-block {
  margin-bottom: 24px;
}

.cal-month-title {
  font-weight: 600;
  color: var(--bz-navy);
  margin-bottom: 8px;
}

/* Footer is pinned to the bottom of the sheet in normal flow (NOT position:fixed,
   which breaks inside the transformed panel and covers the last week of dates). */
.drawer-footer {
  flex-shrink: 0;
  background: var(--bz-white);
  border-top: 1px solid var(--bz-soft-white);
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.drawer-footer .clear-dates {
  background: none;
  border: none;
  color: var(--bz-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 4px;
}

.drawer-footer .close-cal {
  background: var(--bz-blue);
  color: var(--bz-white);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 32px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.drawer-footer .close-cal:hover {
  background: var(--bz-navy);
}

/* Full-page calendar fallback (legacy _guest_calendar.html) */
.calendar-section .calendar-table {
  border: 1px solid var(--bz-soft-white);
  border-radius: 12px;
  overflow: hidden;
}

.calendar-section .calendar-table th {
  background-color: var(--bz-soft-white);
  border-bottom: 1px solid var(--bz-gray);
}

.calendar-section .calendar-table td {
  border-top: 1px solid var(--bz-soft-white);
  height: 70px;
  padding: 8px;
}

/* =================================================================
   Location Map
   ================================================================= */

.location-section h3 {
  color: var(--bz-navy);
}

/* Custom map marker */
.property-marker {
  background-color: var(--bz-blue);
  width: 40px;
  height: 40px;
  border-radius: 50% 50% 50% 0;
  position: relative;
  transform: rotate(-45deg);
  border: 3px solid white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.property-marker::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 12px 16px;
  min-width: 200px;
}

.place-card {
  transition: all 0.2s ease;
  border: 1px solid #dee2e6;
}

.place-card:hover {
  background-color: var(--bz-soft-white);
  border-left: 3px solid var(--bz-blue);
  transform: translateX(2px);
}

.distance-badge {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

@keyframes marker-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 var(--bz-blue)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 10px var(--bz-blue)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 var(--bz-blue)); }
}

.highlight-marker {
  animation: marker-pulse 0.6s ease-in-out 3;
  z-index: 1000 !important;
}

/* Keep map controls below the header */
.leaflet-top,
.leaflet-bottom {
  z-index: 990 !important;
}

/* =================================================================
   Checkout Flow — Guided Experience
   ================================================================= */

/* --- Progress bar --- */
/* --- Listing hero banner (checkout flow) --- */
.checkout-hero-banner {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: var(--space-md);
  background-color: var(--bz-navy);
}
.checkout-hero-banner .checkout-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkout-hero-banner .checkout-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px;
  background: linear-gradient(transparent, rgba(0, 30, 60, 0.7));
}
.checkout-hero-banner .checkout-hero-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.checkout-hero-banner .checkout-hero-location {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-sm) 0 var(--space-md);
}

.checkout-progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--bz-gray);
  font-weight: 600;
  transition: color 0.3s ease;
}
.checkout-progress-step.active  { color: var(--bz-navy); }
.checkout-progress-step.done    { color: var(--bz-palm); }

.checkout-progress-step .step-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bz-soft-white);
  border: 2px solid var(--bz-gray);
  color: var(--bz-gray);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700;
  transition: all 0.3s ease;
}
.checkout-progress-step.active .step-dot {
  background: var(--bz-blue);
  border-color: var(--bz-blue);
  color: white;
  box-shadow: 0 0 0 4px rgba(0,91,150,0.10);
}
.checkout-progress-step.done .step-dot {
  background: var(--bz-palm);
  border-color: var(--bz-palm);
  color: white;
}

.checkout-progress-line {
  width: 56px; height: 2px;
  background: var(--bz-gray);
  margin: 0 14px;
  border-radius: 2px;
  transition: background 0.3s ease;
}
.checkout-progress-line.done { background: var(--bz-palm); }

/* --- Page intro --- */
.checkout-intro {
  margin-bottom: var(--space-lg);
}
.checkout-intro h1 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--bz-navy);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.checkout-intro .checkout-subtitle {
  font-size: 1rem;
  color: var(--bz-text);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Section labels --- */
.checkout-section {
  margin-bottom: var(--space-lg);
}
.checkout-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bz-water);
  margin-bottom: 4px;
}
.checkout-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: var(--space-sm);
}

/* --- Form inputs --- */
.checkout-form .form-control,
.checkout-form .form-select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--bz-gray);
  background-color: var(--bz-soft-white);
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.checkout-form .form-control:focus,
.checkout-form .form-select:focus {
  border-color: var(--bz-blue);
  box-shadow: none;
  background-color: var(--bz-white);
}

/* --- Payment option cards --- */
.payment-option {
  border: 2px solid var(--bz-soft-white);
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  background: white;
}
.payment-option.selected {
  border-color: var(--bz-blue);
  background: rgba(0,91,150,0.03);
  box-shadow: 0 0 0 1px rgba(0,91,150,0.08);
}
.payment-option:hover { border-color: var(--bz-blue); }

/* --- Policy panels --- */
.policy-panel {
  background: var(--bz-soft-white);
  border: 1.5px solid var(--bz-gray);
  border-radius: 12px;
  padding: 18px 20px;
}
.policy-panel ul { margin-bottom: 0; padding-left: 1.1rem; }
.policy-panel li { margin-bottom: 4px; font-size: 0.9rem; color: var(--bz-text); }

/* --- Commitment zone --- */
.checkout-commitment-zone {
  background: var(--bz-soft-white);
  border-radius: 16px;
  padding: var(--space-lg);
  margin-top: var(--space-md);
}
.checkout-commitment-zone .form-check-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--bz-navy);
}

/* --- Primary action button --- */
.checkout-submit-btn {
  background-color: var(--bz-blue);
  border: none;
  border-radius: 12px;
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bz-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  width: 100%;
  justify-content: center;
}
.checkout-submit-btn:hover:not(:disabled) {
  background-color: var(--bz-navy);
  transform: translateY(-1px);
  box-shadow: var(--bz-shadow-medium);
}
.checkout-submit-btn:disabled {
  background-color: var(--bz-gray);
  cursor: not-allowed;
}

/* Reassurance line below button */
.checkout-reassurance {
  text-align: center;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--bz-text);
  opacity: 0.65;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.checkout-reassurance i {
  font-size: 0.78rem;
  color: var(--bz-palm);
}

/* --- Trust signals --- */
.trust-signals {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  padding: var(--space-sm) 0;
  flex-wrap: wrap;
}
.trust-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--bz-text);
}
.trust-signal i {
  color: var(--bz-palm);
  font-size: 1rem;
}

/* --- Trip preview card (sidebar) --- */
.trip-preview-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--bz-shadow-soft);
  border: 1px solid rgba(0,0,0,0.04);
}
.trip-preview-card .trip-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: var(--space-sm);
}
.trip-preview-card .trip-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 2px;
}
.trip-preview-card .trip-location {
  font-size: 0.85rem;
  color: var(--bz-text);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}
.trip-preview-card .trip-dates {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--bz-soft-white);
}
.trip-preview-card .trip-dates .trip-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bz-water);
  margin-bottom: 2px;
}
.trip-preview-card .trip-dates .trip-date-value {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bz-navy);
}
.trip-preview-card .trip-dates .trip-date-detail {
  font-size: 0.8rem;
  color: var(--bz-text);
  opacity: 0.6;
}
.trip-preview-card .trip-divider {
  height: 1px;
  background: var(--bz-soft-white);
  margin: 14px 0;
}
.trip-preview-card .trip-cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--bz-text);
  margin-bottom: 8px;
}
.trip-preview-card .trip-cost-row.muted {
  opacity: 0.7;
}
.trip-preview-card .trip-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--bz-navy);
  padding-top: 14px;
  border-top: 2px solid var(--bz-soft-white);
}
.trip-preview-card .trip-savings {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bz-palm);
  margin-top: 8px;
}

/* --- Confirmation & cancellation pages --- */

/* Quick-actions bar beneath the hero */
.confirmation-actions-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--space-sm);
  background: var(--bz-soft-white);
  border-radius: 0 0 12px 12px;
  margin-top: -8px;
  padding: 6px 8px;
}
.confirmation-actions-bar a,
.confirmation-actions-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bz-navy);
  background: none;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.confirmation-actions-bar a:hover,
.confirmation-actions-bar button:hover {
  background: rgba(0, 91, 150, 0.08);
  color: var(--bz-blue);
}
.confirmation-actions-bar i {
  font-size: 0.9rem;
}

.confirmation-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}
.confirmation-icon.success  { background: #2e7d32; }
.confirmation-icon.cancelled { background: #c0392b; }
.confirmation-icon.pending  { background: var(--bz-water); }

.financial-summary {
  background: var(--bz-soft-white);
  border-radius: 16px;
  padding: var(--space-lg);
}

/* Gentle section divider for confirmation pages */
.confirmation-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bz-water);
  margin-bottom: var(--space-xs);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bz-soft-white);
}

/* Cancellation page: primary = keep, danger = cancel */
.cancel-actions .btn-keep {
  background: var(--bz-blue);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.25s ease;
}
.cancel-actions .btn-keep:hover {
  background: var(--bz-navy);
  transform: translateY(-1px);
  box-shadow: var(--bz-shadow-medium);
  color: white;
}
.cancel-actions .btn-cancel {
  background: transparent;
  color: var(--bz-text);
  border: 1.5px solid var(--bz-gray);
  border-radius: 12px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}
.cancel-actions .btn-cancel:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* --- Rebook invitation (cancellation page) --- */
.rebook-invitation h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bz-navy);
}
.rebook-invitation p {
  color: var(--bz-text);
  font-size: 0.95rem;
}

/* Enhanced checkbox */
input[type="checkbox"].custom-check {
  border: 2px solid var(--bz-navy);
  box-shadow: none;
}
input[type="checkbox"].custom-check:checked {
  background-color: #2e7d32;
  border-color: #2e7d32;
}

/* --- Print styles for confirmation --- */
@media print {
  .checkout-progress, .checkout-hero-banner, .confirmation-actions-bar, .btn, .navbar, footer, .cancel-actions,
  .rebook-invitation, button[onclick], .no-print { display: none !important; }
  .container { margin-top: 0 !important; padding-top: 0 !important; }
  .card, .trip-preview-card { border: none !important; box-shadow: none !important; }
}

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
  .checkout-hero-banner { height: 180px; border-radius: 12px; }
  .checkout-hero-banner .checkout-hero-title { font-size: 1.2rem; }
  .checkout-hero-banner .checkout-hero-overlay { padding: 16px 20px; }
  .confirmation-actions-bar { flex-wrap: wrap; gap: 0; }
  .confirmation-actions-bar a,
  .confirmation-actions-bar button { padding: 6px 10px; font-size: 0.75rem; }
  .checkout-intro h1 { font-size: 1.4rem; }
  .checkout-progress-line { width: 32px; margin: 0 8px; }
  .checkout-progress-step span:not(.step-dot) { font-size: 0.78rem; }
  /* On mobile the trip summary moves above the form (order utilities); keep it
     in normal flow so it doesn't pin over the form as you scroll. */
  .trip-preview-card { padding: 20px; margin-bottom: var(--space-md); }
  .trip-preview-card.sticky-top { position: static; top: auto; }
  .property-header h1 { font-size: 1.55rem; }
  .trust-signals { flex-direction: column; align-items: center; gap: 8px; }
  .cancel-actions { flex-direction: column; }
  .cancel-actions .btn-keep,
  .cancel-actions .btn-cancel { width: 100%; }
}

/* =================================================================
   Reviews
   ================================================================= */
.reviews-section h3 {
  color: var(--bz-navy);
}

/* =================================================================
   Footer
   ================================================================= */
#footer {
  background: var(--bz-blue);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  padding-bottom: 0;
  position: relative;
}

/* Wave divider SVG */
.footer-wave {
  position: relative;
  margin-bottom: -2px;
}

.footer-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

#footer .footer-top {
  padding-top: 50px;
  padding-bottom: 30px;
}

#footer .sitename {
  font-family: var(--heading-font);
  font-variant: small-caps;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bz-white);
}

#footer .footer-tagline {
  font-size: 0.95rem;
  color: var(--bz-water);
  font-weight: 300;
  margin-top: 4px;
}

#footer h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bz-white);
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
}

#footer .footer-links {
  margin-bottom: 30px;
}

#footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-links ul li {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

#footer .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-links ul i {
  margin-right: 6px;
  font-size: 12px;
  color: var(--bz-water);
}

#footer a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease;
}

#footer a:hover {
  color: var(--bz-water);
}

#footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-right: 10px;
  transition: all 0.3s ease;
}

#footer .social-links a:hover {
  color: var(--bz-water);
  border-color: var(--bz-water);
  background: rgba(165, 200, 208, 0.1);
}

#footer .footer-contact p {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.75);
}

#footer .copyright {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

#footer .copyright p {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

#footer .copyright .sitename {
  font-size: 0.9rem;
}

/* =================================================================
   Scroll-to-Top Button
   ================================================================= */
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--bz-blue);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.4s;
  text-decoration: none;
}

.scroll-top i {
  font-size: 24px;
  color: var(--bz-white);
  line-height: 0;
}

.scroll-top:hover {
  background-color: var(--bz-navy);
  color: var(--bz-white);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/* =================================================================
   About Section
   ================================================================= */
.sticky-host-card {
  position: sticky;
  top: calc(var(--header-height) + 30px);
  z-index: 10;
  transition: all 0.3s ease;
}

#host-and-contact {
  overflow: visible;
}

.host-profile-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--bz-blue);
  box-shadow: var(--bz-shadow-medium);
}

#about .col-lg-4 .card {
  position: sticky;
  top: var(--header-height);
}

#about .card {
  border-radius: 16px;
  border: none;
  box-shadow: var(--bz-shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bz-shadow-medium);
}

#about .badge {
  font-size: 0.85rem;
  font-weight: 500;
}

/* =================================================================
   Contact Section
   ================================================================= */
#contact .card a {
  color: var(--bz-blue);
}

#contact .card a:hover {
  color: var(--bz-navy);
}

/* =================================================================
   Resort Cards
   ================================================================= */
.resort-item-card {
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 16px;
  border: none;
  box-shadow: var(--bz-shadow-soft);
}

.resort-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bz-shadow-lift);
}

.resort-item-card .carousel img {
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.resort-item-card:hover .carousel img {
  transform: scale(1.03);
}

.resort-item-card h3 {
  font-family: var(--heading-font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bz-navy);
  font-size: 1rem;
}

.resort-item-card .btn-outline-primary {
  border-color: var(--bz-blue);
  color: var(--bz-blue);
  font-family: var(--heading-font);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  border-radius: 8px;
}

.resort-item-card .btn-outline-primary:hover {
  background-color: var(--bz-blue);
  color: white;
}

/* =================================================================
   Amenity Mini-Popup
   ================================================================= */
.amenity-item {
  cursor: pointer;
}

.amenity-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bz-navy);
  color: var(--bz-white);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  max-width: 280px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.amenity-popup.visible {
  opacity: 1;
}

.amenity-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--bz-navy) transparent transparent transparent;
}

/* =================================================================
   Cards — General
   ================================================================= */
.card {
  border-radius: 16px;
  border: none;
  box-shadow: var(--bz-shadow-soft);
}

/* =================================================================
   Buttons — Primary
   ================================================================= */
.btn-primary {
  background-color: var(--bz-blue);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--bz-navy);
  transform: translateY(-1px);
  box-shadow: var(--bz-shadow-medium);
}

.btn-outline-primary {
  border-color: var(--bz-blue);
  color: var(--bz-blue);
  border-radius: 10px;
}

.btn-outline-primary:hover {
  background-color: var(--bz-blue);
  border-color: var(--bz-blue);
  color: var(--bz-white);
}

/* =================================================================
   Form inputs (global)
   ================================================================= */
.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--bz-gray);
  padding: 10px 14px;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-color: var(--bz-blue);
  box-shadow: 0 0 0 0.15rem rgba(0, 91, 150, 0.12);
}

.form-select {
  border-radius: 10px;
  border: 1.5px solid var(--bz-gray);
  padding: 10px 14px;
}

.form-select:focus {
  border-color: var(--bz-blue);
  box-shadow: 0 0 0 0.15rem rgba(0, 91, 150, 0.12);
}

/* =================================================================
   Utilities
   ================================================================= */
.cursor-pointer {
  cursor: pointer;
}

/* IntersectionObserver entrance animations (replaces AOS) */
[data-bz-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-bz-reveal].bz-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =================================================================
   Responsive (mobile-first overrides)
   ================================================================= */
@media (max-width: 991px) {
  /* Hide desktop booking card on mobile */
  .booking-card-desktop {
    display: none;
  }

  .property-highlights {
    gap: 6px 16px;
  }

  /* Add bottom padding for mobile bottom bar */
  body.has-bottom-bar {
    padding-bottom: 80px;
  }

  /* Push scroll-to-top above the mobile bottom bar */
  body.has-bottom-bar .scroll-top.active {
    bottom: 85px;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  section,
  .section {
    padding: 36px 0;
  }

  .section-title {
    padding-bottom: 24px;
  }

  /* Calendar mobile */
  .calendar-table td {
    height: 52px;
    padding: 2px;
  }

  .day-number {
    font-size: 0.75rem;
  }

  .day-price {
    font-size: 0.6rem;
  }

  .calendar-pill {
    top: 70%;
    height: 30px;
  }

  .selected-single {
    top: 70%;
    width: 34px;
    height: 34px;
  }

  /* Calendar popover becomes full-width */
  .bz-calendar-popover {
    position: fixed;
    inset: 0;
    transform: none;
    border-radius: 0;
    min-width: auto;
    margin-top: 0;
    overflow-y: auto;
    padding-bottom: 80px;
  }

  .cal-months-container {
    flex-direction: column;
  }

  .trust-signals {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Mini popup legacy */
.mini-popup {
  position: absolute;
  bottom: 120%;
  left: 0;
  z-index: 100;
  background: var(--bz-navy);
  color: var(--bz-white);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  width: max-content;
  max-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.mini-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--bz-navy) transparent transparent transparent;
}

/* =================================================================
   Social proof
   -----------------------------------------------------------------
   The site holds thousands of guest reviews that, until now, only
   appeared on listing detail pages. These are the four places that
   surface them on the landing page and the booking card.

   House rules for this whole section: hairlines instead of shadows,
   one muted star instead of a gold row, and nothing that shouts.
   Evidence should look like evidence.
   ================================================================= */

/* --- 1. Hero trust line ------------------------------------------ */
.hero-trustline {
  margin-top: 14px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.45);
}

.hero-trustline i {
  color: #F0D9A8;
  font-size: 0.7rem;
}

.hero-trustline-score {
  font-weight: 700;
}

.hero-trustline-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

/* --- 2. Rating on the listing card ------------------------------- */
/* Shares a baseline with the location so it fills space the card already
   left empty — nothing below it shifts. */
.bz-listing-card .card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.bz-listing-card .card-meta-row .card-location {
  margin-bottom: 0;
  min-width: 0;
}

.bz-listing-card .card-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--bz-navy);
  font-variant-numeric: tabular-nums;
}

.bz-listing-card .card-rating i {
  color: var(--bz-brass);
  font-size: 0.72rem;
}

.bz-listing-card .card-rating-score {
  font-weight: 700;
}

.bz-listing-card .card-rating-count {
  color: var(--bz-text);
  opacity: 0.7;
}

/* --- 3. Guest voices strip --------------------------------------- */
.bz-voices {
  background: var(--bz-white);
}

.bz-voices .voices-head {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(31, 45, 53, 0.13);
}

.bz-voices .voices-head h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 6px;
}

.bz-voices .voices-sub {
  font-size: 0.85rem;
  color: var(--bz-text);
  opacity: 0.75;
  margin-bottom: 0;
}

.bz-voices .voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
}

.bz-voices .voices-item {
  margin: 0;
  padding: 0 28px;
  border-left: 1px solid rgba(31, 45, 53, 0.13);
}

.bz-voices .voices-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.bz-voices .voices-stars {
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  color: var(--bz-brass);
  font-size: 0.7rem;
}

.bz-voices .voices-quote {
  margin: 0;
  font-family: var(--voice-font);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--bz-navy);
}

/* Quotation marks live in CSS so the stored review text stays clean. */
.bz-voices .voices-quote::before { content: '\201C'; }
.bz-voices .voices-quote::after  { content: '\201D'; }

.bz-voices .voices-attrib {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--bz-text);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.bz-voices .voices-attrib a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(31, 45, 53, 0.25);
  text-underline-offset: 2px;
}

.bz-voices .voices-attrib a:hover {
  color: var(--bz-blue);
}

@media (max-width: 991.98px) {
  .bz-voices .voices-grid {
    grid-template-columns: 1fr;
  }

  .bz-voices .voices-item {
    padding: 26px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(31, 45, 53, 0.13);
  }

  .bz-voices .voices-item:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* --- 4. Owner note ----------------------------------------------- */
.bz-owner-note {
  background: var(--bz-soft-white);
}

.bz-owner-note .owner-note-inner {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.bz-owner-note .owner-note-portrait img {
  width: 160px;
  height: 190px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.bz-owner-note .owner-note-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bz-blue);
  margin-bottom: 4px;
}

.bz-owner-note h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bz-navy);
  margin-bottom: 16px;
}

.bz-owner-note .owner-note-body p:not(.owner-note-eyebrow):not(.owner-note-links) {
  font-family: var(--voice-font);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--bz-navy);
  margin-bottom: 14px;
  max-width: 58ch;
}

.bz-owner-note .owner-note-links {
  margin-top: 20px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  font-weight: 700;
}

.bz-owner-note .owner-note-links a {
  color: var(--bz-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 91, 150, 0.3);
  padding-bottom: 2px;
}

.bz-owner-note .owner-note-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bz-gray);
}

@media (max-width: 767.98px) {
  .bz-owner-note .owner-note-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bz-owner-note .owner-note-portrait img {
    width: 116px;
    height: 138px;
  }
}

/* --- 5. Book-direct comparison (booking card) -------------------- */
/* Replaces an asserted "save 10–15%" with the arithmetic. Framed as
   disclosure: a plain row, a single accent, and the method spelled out
   underneath so the number can be checked. */
.book-direct-compare {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--bz-palm);
  background: rgba(139, 168, 122, 0.12);
  border-radius: 2px;
}

.book-direct-compare .bdc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--bz-text);
}

.book-direct-compare .bdc-channel-total {
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-decoration-color: rgba(31, 45, 53, 0.4);
  opacity: 0.8;
}

.book-direct-compare .bdc-saving {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--bz-navy);
}

.book-direct-compare .bdc-saving strong {
  font-weight: 800;
}

.book-direct-compare .bdc-note {
  margin: 8px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--bz-text);
  opacity: 0.72;
}

/* Mobile strip above the sticky CTA. Same figures, one line, no box —
   the bar is already a surface and a second card inside it would shout. */
.bz-mobile-bottom-bar .mobile-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(31, 45, 53, 0.13);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--bz-text);
}

.bz-mobile-bottom-bar .mobile-compare[hidden] {
  display: none;
}

.bz-mobile-bottom-bar .mc-channel {
  text-decoration: line-through;
  text-decoration-color: rgba(31, 45, 53, 0.4);
  opacity: 0.8;
}

.bz-mobile-bottom-bar .mc-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bz-gray);
}

.bz-mobile-bottom-bar .mc-save {
  color: var(--bz-navy);
}

.bz-mobile-bottom-bar .mc-save strong {
  font-weight: 800;
}

/* =================================================================
   Print styles
   ================================================================= */
@media print {
  #header,
  #footer,
  .scroll-top,
  .bz-mobile-bottom-bar {
    display: none;
  }

  body {
    padding-top: 0;
  }
}