/* Crystal Bay — shared section stylesheet.
   Was ~24 KB of identical inline <style> in beachresort/includes/header.php and
   yachtclub/includes/header.php, re-sent inside the HTML of every page view.
   Externalised 2026-09-02 (sweep, CODE-17/19) so it is fetched once and cached.
   Three identical copies exist — /css, /beachresort/css, /yachtclub/css — because
   section-bootstrap.php rewrites a root-relative href into the section folder.
   Edit /css/section.css and copy it to the other two, then bump CB_ASSET_V. */
*, *::before, *::after { box-sizing: border-box; }
/* Guest-quote blockquotes in blog posts (verbatim reviews) */
.post-quote {
    margin: 1.75rem 0;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-left: 3px solid var(--gold-500, #C9A84C);
    font-style: italic;
    color: #4a4a4a;
}
.post-quote p { margin: 0 0 0.5rem; line-height: 1.6; }
.post-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.875rem;
    color: #6b7280;
}
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    font-family: 'DM Sans', sans-serif;
    color: #3a3a3a;
    background: #FDFCF9;
}

/* Hero word-by-word stagger */
@keyframes wordFadeIn {
    0% { opacity: 0; transform: translateY(24px) rotateX(-10deg); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}
.word-reveal { display: inline-block; opacity: 0; animation: wordFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.word-delay-1 { animation-delay: 0.1s; }
.word-delay-2 { animation-delay: 0.25s; }
.word-delay-3 { animation-delay: 0.4s; }

/* Hero sub-elements fade */
@keyframes fadeSlideUp { to { opacity: 1; transform: translateY(0); } }
.hero-fade { opacity: 0; transform: translateY(30px); }
.hero-fade-1 { animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards; }
.hero-fade-2 { animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
.hero-fade-3 { animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards; }

/* Scroll reveal */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed { opacity: 1; transform: translate(0, 0); }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.35s; }
.stagger-4 { transition-delay: 0.5s; }

/* Navigation */
.main-nav { transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.main-nav.scrolled {
    background: rgba(249, 246, 240, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 16px rgba(0,0,0,0.06);
}
.main-nav.scrolled .nav-link { color: #3a3a3a; }
.main-nav.scrolled .nav-link:hover { color: #b30026; }
.main-nav.scrolled .nav-logo-img { filter: none !important; }
.main-nav.scrolled .hamburger-line { background: #3a3a3a !important; }
.main-nav.solid-nav { background: rgba(249, 246, 240, 0.97); backdrop-filter: blur(20px); box-shadow: 0 1px 16px rgba(0,0,0,0.06); }
/* Sister-property link + its separator (Tailwind is purged here — plain CSS only) */
.nav-sep { display:block; width:1px; height:14px; background: rgba(58,58,58,.25); }
.main-nav[data-transparent="true"] .nav-sep { background: rgba(255,255,255,.35); }
.main-nav.scrolled .nav-sep { background: rgba(58,58,58,.25); }
.nav-prop-link { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.nav-prop-link svg { opacity:.6; transition: transform .25s ease; }
.nav-prop-link:hover svg { transform: translateX(2px); }
/* Live Chat was left white on the cream scrolled nav — it had no scrolled override like .nav-link does */
.main-nav.scrolled .nav-chat { color: rgba(58,58,58,.6); }
.main-nav.scrolled .nav-chat:hover { color: #3a3a3a; }

/* Mobile drawer */
/* A11Y-01: the drawer is only moved off-screen, so its 10-11 links stayed in the tab
   order and the a11y tree on every page, desktop included. visibility:hidden removes
   them; the 0s-delayed transition holds it visible until the slide-out finishes. */
.mobile-drawer { transform: translateX(100%); visibility: hidden; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s; }
.mobile-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; }
.drawer-overlay { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.prop-switch { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem 1rem; margin-bottom:.5rem; border:1px solid hsl(40,33%,86%); border-radius:.8rem; background:#fff; color:#3a3a3a; font-size:1.05rem; transition:border-color .25s, color .25s; }
.prop-switch:hover { border-color:#b30026; color:#b30026; }

/* Glassmorphism */
.glass {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(255,255,255,0.40);
    box-shadow: 0 25px 50px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Booking widget inputs — !important needed to override Tailwind preflight */
.widget-input {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px !important;
    color: #3a3a3a !important;
    padding: 10px 12px !important;
    width: 100% !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    outline: none !important;
    transition: border-color 0.2s ease;
    display: block !important;
}
.widget-input:focus { border-color: #b30026 !important; box-shadow: 0 0 0 3px rgba(179, 0, 38, 0.1) !important; }
.widget-input option { background: #fff; color: #3a3a3a; }
.widget-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b30026;
    margin-bottom: 4px;
}
.widget-icon { color: #b30026; width: 14px; height: 14px; flex-shrink: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }
.widget-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b30026' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
    padding-right: 28px !important;
}

/* Input focus */
input:focus, select:focus { outline: none; border-color: #C9A84C !important; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); }

/* Gold line draw */
@keyframes drawLine { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.gold-line-animate { transform-origin: left center; animation: drawLine 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards; transform: scaleX(0); }
.gold-rule { transform: scaleX(0); transform-origin: center; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.gold-rule.revealed { transform: scaleX(1); }

/* CTA micro-interaction */
.cta-press { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cta-press:hover { transform: scale(1.02); }
.cta-press:active { transform: scale(0.97); }

/* Card hover */
.card-hover { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); }

/* Image zoom */
.img-hover-zoom { overflow: hidden; }
.img-hover-zoom img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.img-hover-zoom:hover img { transform: scale(1.05); }

/* Room card */
.room-card { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); }
.room-card img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.room-card:hover img { transform: scale(1.05); }

/* Room image carousel */
.room-carousel { position: relative; overflow: hidden; }
.room-carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.room-carousel-track img { flex-shrink: 0; width: 100%; height: 100%; object-fit: cover; }
.room-carousel-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.room-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.2s; }
.room-carousel-dot.active { background: #fff; }
.room-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s; z-index: 5; border: none; }
.room-carousel:hover .room-carousel-arrow { opacity: 1; }
.room-carousel-arrow:hover { background: rgba(0,0,0,0.6); }
.room-carousel-arrow.prev { left: 8px; }
.room-carousel-arrow.next { right: 8px; }

/* Expandable room listing (Bas/Oli L1) — Booking.com search-row layout, Crystal Bay brand.
   Reference: Oli's oli_14 screenshot. Big left photo (full row height), bold name +
   config + perk in the middle, price block bottom-right; thin dividers between rows.
   All dimensions live here (not Tailwind utilities) because the site loads a purged
   tailwind.min.css that omits classes not used elsewhere. */
/* Each row is its own separate card with breathing space between (Oli, 2026-06-24:
   "get some space around these blocks"). */
.room-listings { display: flex; flex-direction: column; gap: 16px; }
.room-listing { border: 1px solid rgba(15,23,42,0.10); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.room-listing:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.10); border-color: rgba(179,0,38,0.22); }
.room-listing.open { background: #fffdfa; box-shadow: 0 16px 40px rgba(0,0,0,0.11); border-color: rgba(179,0,38,0.22); }

.room-listing-head { display: flex; align-items: stretch; gap: 0; width: 100%; min-height: 178px; text-align: left; cursor: pointer; padding: 12px; transition: background 0.2s; }
.room-listing-head:hover { background: rgba(179,0,38,0.035); }

/* Left photo — large, fixed height so every row is an identical rigid block */
.room-listing-photo { position: relative; flex-shrink: 0; width: 200px; align-self: stretch; min-height: 154px; border-radius: 10px; overflow: hidden; }
.room-listing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.room-listing-head:hover .room-listing-photo img { transform: scale(1.05); }
.room-listing-badge { position: absolute; top: 8px; left: 8px; font-size: 0.58rem; padding: 3px 8px; letter-spacing: 0.06em; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.room-listing-badge.badge-gold-deep { background-color: #7a5e00; } /* AA-contrast gold for white badge text */

/* Middle info column — vertically centred against the photo so rows feel balanced */
.room-listing-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px 16px; }
.room-listing-name { font-size: 1.55rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; color: #1d1410; margin-bottom: 7px; }
.room-listing-config { font-size: 0.9rem; font-weight: 600; color: rgba(29,20,16,0.82); }
.room-listing-preview { margin-top: 4px; font-size: 0.8rem; color: rgba(29,20,16,0.72); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.room-listing-dot { margin: 0 6px; color: rgba(29,20,16,0.25); }
.room-listing-perk { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: #3f7a43; white-space: nowrap; }
.room-listing-perk svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Right price column — vertically centred, tight right-aligned stack, hairline divider */
.room-listing-price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; min-width: 132px; padding-left: 20px; border-left: 1px solid rgba(29,20,16,0.11); }
.room-listing-fromline { font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(140,38,52,1); margin-bottom: 3px; line-height: 1; }
.room-listing-amount { font-size: 1.78rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; white-space: nowrap; }
.room-listing-cur { font-size: 0.82rem; font-weight: 600; letter-spacing: 0; }
.room-listing-pernight { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(140,38,52,1); margin-top: 5px; line-height: 1; }

/* Dedicated expand chevron — quiet affordance; the crimson price stays the loudest right element */
.room-listing-toggle { flex-shrink: 0; align-self: center; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 12px; border-radius: 50%; background: rgba(29,20,16,0.045); color: rgba(29,20,16,0.42); transition: background 0.25s ease, color 0.25s ease; }
.room-listing-chevron { width: 17px; height: 17px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.room-listing-head:hover .room-listing-toggle { background: rgba(179,0,38,0.09); color: #b30026; }
.room-listing.open .room-listing-toggle { background: rgba(179,0,38,0.09); color: #b30026; }
.room-listing.open .room-listing-chevron { transform: rotate(180deg); }

/* Expanded body */
.room-listing-body { padding: 0 12px 20px; }
.room-listing .room-carousel { height: 260px; margin-bottom: 16px; border-radius: 12px; }
/* grid-rows 0fr -> 1fr animates variable-height content with no JS measuring */
.room-listing-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22,1,0.36,1); }
.room-listing.open .room-listing-panel { grid-template-rows: 1fr; }
/* A11Y-01: a collapsed panel is 0fr tall but still focusable — 11 rooms x 3 controls
   = 33 invisible tab stops per homepage. Hide it for real while it is closed. */
.room-listing-panel-clip { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.45s; }
.room-listing.open .room-listing-panel-clip { visibility: visible; transition: visibility 0s linear 0s; }

@media (min-width: 640px) {
  .room-listing-head { padding: 14px; min-height: 192px; }
  .room-listing-photo { width: 248px; min-height: 164px; border-radius: 12px; }
  .room-listing-name { font-size: 1.8rem; margin-bottom: 8px; white-space: normal; overflow: visible; }
  .room-listing-config { font-size: 0.95rem; }
  .room-listing-preview { font-size: 0.83rem; }
  .room-listing-amount { font-size: 2.15rem; }
  .room-listing-cur { font-size: 0.98rem; }
  .room-listing-price { min-width: 138px; padding-left: 24px; }
  .room-listing-body { padding: 0 16px 24px; }
  .room-listing .room-carousel { height: 340px; }
}
@media (max-width: 560px) {
  .room-listings { gap: 13px; }
  /* let the card grow to fit text on mobile — never clip the name/config */
  .room-listing-head { min-height: 0; padding: 11px; align-items: center; }
  .room-listing-photo { width: 104px; min-height: 104px; align-self: stretch; }
  .room-listing-info { padding: 2px 0 2px 12px; min-width: 0; }
  .room-listing-name { font-size: 1.05rem; line-height: 1.18; margin-bottom: 4px; white-space: normal; overflow: visible; }
  .room-listing-config { font-size: 0.76rem; line-height: 1.3; white-space: normal; }
  .room-listing-preview { display: none; }
  .room-listing-perk { font-size: 0.68rem; margin-top: 7px; }
  .room-listing-amount { font-size: 1.3rem; }
  .room-listing-cur { font-size: 0.7rem; }
  .room-listing-fromline, .room-listing-pernight { font-size: 0.55rem; }
  .room-listing-price { min-width: 76px; padding-left: 10px; }
  .room-listing-toggle { width: 28px; height: 28px; margin-left: 7px; }
  .room-listing-chevron { width: 15px; height: 15px; }
  .room-listing-body { padding: 0 11px 16px; }
  .room-listing .room-carousel { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .room-listing-panel { transition: none; } }

/* Property showcase hover */
.property-showcase img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.property-showcase:hover img { transform: scale(1.02); box-shadow: 0 30px 60px rgba(0,0,0,0.12); }

/* Review card hover */
.review-card { border: 1px solid transparent; transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.review-card:hover { border-color: #C9A84C; box-shadow: 0 12px 40px rgba(201, 168, 76, 0.08); transform: translateY(-3px); }

/* Review quote mark */
.review-card .quote-mark { font-family: 'Playfair Display', Georgia, serif; font-size: 4rem; line-height: 1; color: #C9A84C; opacity: 0.3; }

/* Masonry */
.masonry-grid { columns: 1; column-gap: 1.25rem; }
@media (min-width: 768px) { .masonry-grid { columns: 2; } }
@media (min-width: 1024px) { .masonry-grid { columns: 3; } }
.masonry-grid .masonry-item { break-inside: avoid; margin-bottom: 1.25rem; }

/* Parallax */
.parallax-container { position: relative; overflow: hidden; }
.parallax-bg-video { position: absolute; inset: -20% 0; width: 100%; height: 140%; object-fit: cover; will-change: transform; }
@media (max-width: 767px) {
    .parallax-bg-video { inset: 0; height: 100%; will-change: auto; transform: none !important; }
}

/* Property tab */
.property-tab, .property-tab-bottom, .property-tab-bottom-explore { transition: background 0.3s ease, color 0.3s ease; }
.property-tab.active, .property-tab-bottom.active, .property-tab-bottom-explore.active { background: #b30026; color: #fff; box-shadow: 0 4px 14px rgba(179, 0, 38, 0.25); }

/* Star rating */
.star-rating { color: #C9A84C; letter-spacing: 2px; }

/* Ornamental star */
.ornament-star { display: inline-flex; align-items: center; gap: 12px; }
.ornament-star::before, .ornament-star::after { content: ''; width: 40px; height: 1px; background: #C9A84C; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F9F6F0; }
::-webkit-scrollbar-thumb { background: #C9A84C; border-radius: 3px; }

/* Hide scrollbar utility */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Email form */
.email-success { display: none; text-align: center; padding: 1rem; }
.email-success.show { display: block; }
.email-form.hidden { display: none; }

/* Film grain (desktop only) */
.film-grain { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.018; 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; }
@media (max-width: 768px) { .film-grain { display: none; } }

/* Reduced motion */
@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; }
    .hero-fade, .word-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .reveal-up, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
    .gold-line-animate, .gold-rule { transform: scaleX(1) !important; }
    .parallax-bg-video { position: absolute !important; transform: none !important; }
}

/* SR only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* A11Y-09: skip-to-content, the pattern already shipping on the Beach Club. */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto; clip: auto; padding: .5rem 1rem; background: #fff; color: #b30026; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; box-shadow: 0 2px 12px rgba(0,0,0,.2); }

/* A11Y-07 item 1: the shipped gold #b4933a measures 2.46-2.93:1 on our light
   backgrounds — far under the 4.5:1 AA needs. #856619 is the lightest gold that
   clears AA on cream, sand and white. Written as plain CSS because text-gold-700
   exists in none of the compiled Tailwind builds and there is no build step. */
.text-gold-600 { color: #856619; }

/* A11Y-07 items 2-4: the secondary text colours measured 2.6-4.4:1 on our light
   backgrounds; AA body text needs 4.5:1. /75 measures 5.33 on white, 5.08 on cream
   and 4.81 on sand. Written here rather than as ~180 class edits across two
   properties, so one line governs the whole section. */
.text-dark\/50, .text-dark\/60, .text-dark\/70 { color: rgba(58,58,58,.75); }

/* Scroll indicator */
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }

/* Fade in animation */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }

/* Keep the Cloudbeds Whistle chat launcher clear of the sticky mobile booking bar.
   The widget (#w-live-chat) is fixed bottom:0 z-index:1000 and overlaps the
   Book Direct button. Lift it above the bar on mobile; leave it normal when the
   chat is open fullscreen (html.w-live-chat--open) and on desktop (>=1024px). */
@media (max-width: 1023px) {
    html:not(.w-live-chat--open) #w-live-chat { bottom: 88px !important; }
}

/* Balance the whitespace around the Rooms/Explore tab pill (Bas 2026-07-12).
   Mobile/tablet: the desktop booking bar is hidden, so the pill's top gap is just
   the tab bar's own padding — zero the panel's top padding so below == above. */
@media (max-width: 1023px) {
    #panel-rooms > section:first-of-type,
    #panel-explore > section:first-of-type { padding-top: 0 !important; }
}
/* Desktop: the booking bar sits above, so trim the tab bar's padding ~10% and give
   the room panel a small top padding so the gap below the pill == the gap above it. */
@media (min-width: 1024px) {
    #resort-tabs, #tab-section { padding-top: 26px !important; padding-bottom: 26px !important; }
    #panel-rooms > section:first-of-type,
    #panel-explore > section:first-of-type { padding-top: 24px !important; }
}