/* ===================================
    Crafto - Hotel and resort
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* variable */
:root {     
    --base-color: #17342B;
    --medium-gray:#817F7C;
    --very-light-gray:#F4F1ED;
    --alt-font: 'Rufina', serif;
    --primary-font: 'Urbanist', sans-serif;
}
/* sonesta border override */
.border-color-base-color {
    border-color: rgb(239, 236, 114) !important;
}
.border-4 {
    border-width: 5px !important;
}
/* reset */
body {
    font-size: 18px;
    line-height: 30px; 
    letter-spacing: .3px;
}
html {
    overflow-x: hidden;
}
section.half-section {
    padding-top: 70px;
    padding-bottom: 70px;
}
.icon-extra-large {
    font-size: 53px;
}
.mt-minus-5{
    margin-top: -5%;
}
h2 {
    line-height: 3.3rem;
}
h3 {
    line-height: 2.9rem;
}
h5 {
    line-height: 2.5rem;
}
h6 {
    line-height: 2.2rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 20px;
}
/* header */
header .navbar-brand {
    padding: 20px 0;
}
header .navbar-brand img {
    max-height: 54px;
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a span {
    font-size: 17px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 280px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
    font-size: 15px;
}
.center-logo .navbar-left, .center-logo .navbar-right {
    width: 40%;
}
/* btn */
.btn {
    font-weight: 600;
    text-transform: inherit;
    font-family: var(--primary-font);
    letter-spacing: 0;
}
.btn.btn-switch-text.btn-extra-large > span {
    font-size: 18px;
    padding:16px 34px;
}
.btn.btn-switch-text.btn-large > span {
    font-size: 16px;
    padding: 13px 25px;
}
.btn.btn-switch-text.btn-medium > span {
    font-size: 15px;
    padding: 11px 20px;
}
.btn.btn-switch-text.btn-small > span {
    font-size: 14px;
    padding: 10px 20px;
}
.btn.btn-switch-text.btn-very-small > span {
    font-size: 12px;
    padding: 8px 15px;
}
.btn.btn-hover-animation-switch .btn-icon {
    margin-left: 5px;
}
/* page title */
.page-title-large h1 {
    font-size: 4.375rem;
    line-height: 5.313rem;
}
/* banner highlight separator */
.highlight-separator[data-shadow-animation] span img { 
    height: 8px;
    bottom: 10px;
}
/* bg transparent */
.bg-transparent-base-color {
    background-color: rgba(23,52,43,.2) !important;
}
.bg-gradient-dark-transparent {
    background: #FFFFFF00;
    background: -webkit-linear-gradient(top, #FFFFFF00, #131313);
    background: -moz-linear-gradient(top, #FFFFFF00, #131313);
    background: linear-gradient(to bottom, #FFFFFF00, #131313);
}
/* border color */
.border-color-transparent-base-color {
    border-color: rgba(23,52,43,.2) !important;
}
.border-color-transparent-dark-very-light {
    border-color: rgba(112, 112, 112, 0.2) !important;
}
/* tab style 07 */
.tab-style-07 .nav-tabs .nav-item .nav-link {
    border-color: rgba(112, 112, 112, 0.2) !important; 
}
.tab-style-07 .nav-tabs .nav-item .nav-link span >span {
    color: var(--base-color);
}
/* swiper slider */
.slider-navigation-style-01.swiper-button-next {
    right: 30px;
}
.slider-navigation-style-01.swiper-button-prev {
    left: 30px;
}
/* tab style 08 */
.tab-style-08 ul .nav-item .nav-link {
    color: var(--dark-gray);
}
.tab-style-08 ul .nav-item .nav-link.active, .tab-style-08 ul .nav-item .nav-link.show, .tab-style-08 ul .nav-item .nav-link:hover {
    color: var(--dark-gray);   
}
/* footer */
footer .nav-link {
    color:var(--dark-gray);
    line-height: normal;
}
footer .elements-social li {
    margin: 0 12px 0 0;
}
@media (max-width: 1399px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 40px 35px;
    }
}
@media (max-width: 1199px) {
    .tab-style-07 {
        border-right: 1px solid rgba(112, 112, 112, 0.2);
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 37%;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 25px 40px;
    }
}
@media (max-width: 991px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 35px 25px;
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 100%;
    }
    header.sticky .navbar-brand,
    header .navbar-brand {
        padding: 15px 0;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 20px 18px;
        line-height: 28px;
    }
}
@media (max-width: 767px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link .number-box {
        right: 40px;
    }
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 25px 25px;
    }
    .tab-style-07 {
        border-right: 0;
    }
    .slider-navigation-style-01.swiper-button-next {
        right: 15px;
    }
    .slider-navigation-style-01.swiper-button-prev {
        left: 15px;
    }
    .tab-style-08 ul .nav-item .tab-border {
        top: inherit;
        bottom: 0;
    }
}
@media (max-width: 575px) {
    .pricing-table-style-13 li {
        text-align: left;
    }
    .btn.btn-switch-text.btn-medium > span {
        padding: 10px 18px;
    }
}
/* ============================================================
   Family-header (10-09): transparant boven de hero, zoals Beach
   Plaza — alleen desktop (>=992px); de witte balk keert terug via
   Crafto's eigen .sticky-gedrag. Mobiel houdt de witte header.
   ============================================================ */
@media (min-width: 992px) {
  header { position: absolute; top: 0; left: 0; right: 0; z-index: 99; }
  /* Crafto-JS zet inline margin-top = headerhoogte; met een absolute
     header hoort de hero gewoon op de viewport-top te beginnen */
  .top-space-margin { margin-top: 0 !important; }

  header:not(.sticky) .navbar { background: transparent !important; box-shadow: none !important; }
  header:not(.sticky) .navbar .nav-link,
  header:not(.sticky) .widget-text,
  header:not(.sticky) .widget-text a,
  header:not(.sticky) .navbar .dropdown-toggle { color: #fff !important; }
  header:not(.sticky) .navbar .nav-item.active .nav-link { color: rgba(255, 255, 255, 0.72) !important; }
  header:not(.sticky) .navbar-brand img { filter: brightness(0) invert(1); }

  /* leesbaarheid: zachte scrim over de bovenrand van elke hero */
  #banner::after,
  .page-title-separate-breadcrumbs.cover-background::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 230px;
    background: linear-gradient(to bottom, rgba(20, 24, 22, 0.55), rgba(20, 24, 22, 0));
    pointer-events: none; z-index: 0;
  }
  .page-title-separate-breadcrumbs.cover-background { position: relative; }
}

/* topbar teruggeplaatst (operator 10-09): boven de hero meebewegen met de
   transparante header — witte links, hairline; bij sticky verbergt Crafto's
   eigen JS de topbar zoals vanouds */
@media (min-width: 992px) {
  header:not(.sticky) .header-top-bar {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
  }
  header:not(.sticky) .header-top-bar a { color: #fff !important; }
}

/* ============================================================
   Plan your stay — journey bar (familie-patroon, 10-09).
   Zelfde interactie-DNA als Beach Plaza, volledig Sonesta-huid:
   Urbanist/Rufina, groen #17342B, geel #EFEC72, licht #F4F1ED.
   Desktop-only; motion alleen transform/opacity, in 240ms/uit 160ms.
   ============================================================ */
#sjb { display: none; }
@media (min-width: 992px) {
  #sjb {
    display: block; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    width: min(980px, calc(100vw - 280px)); z-index: 9000;
    font-family: var(--primary-font, sans-serif);
  }
  /* hero full-screen zoals Beach Plaza (Crafto trekt anders de headerhoogte eraf) */
  #banner { height: 100svh !important; }
  /* tagline vrij van de gedockte bar */
  .sjb-tagline { margin-bottom: 130px; }
  .sjb-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 8px 6px; color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
  }
  .sjb-kicker::before { content: ""; width: 22px; height: 3px; background: #EFEC72; }
  html.sjb-stage .sjb-kicker { text-shadow: none; }
  .sjb-bar {
    position: relative;
    display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr auto; align-items: center;
    background: #fff; border: 1px solid rgba(23, 52, 43, 0.14); border-radius: 18px;
    padding: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  }
  .sjb-divider { width: 1px; height: 34px; background: rgba(23, 52, 43, 0.14); }
  .sjb-field {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; padding: 12px 22px;
    border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
    font-family: inherit;
    transition: background-color 180ms ease;
  }
  .sjb-field:hover { background: var(--very-light-gray, #F4F1ED); }
  .sjb-field:active { transform: scale(0.99); }
  .sjb-label {
    position: relative; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--medium-gray, #817F7C);
  }
  .sjb-label::after {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: #EFEC72; transform: scaleX(0); transform-origin: left;
    transition: transform 180ms ease;
  }
  .sjb-field:hover .sjb-label::after,
  .sjb-field:focus-visible .sjb-label::after,
  .sjb-field.is-next .sjb-label::after { transform: scaleX(1); }
  .sjb-value { font-size: 16px; font-weight: 600; color: #1f2420; line-height: 1.3; }
  .sjb-value.is-empty { color: var(--medium-gray, #817F7C); font-weight: 500; }
  .sjb-ring {
    position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
    border-radius: 12px; background: var(--very-light-gray, #F4F1ED);
    box-shadow: inset 0 0 0 1.5px var(--base-color, #17342B);
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease;
  }
  .sjb-ring.is-on { opacity: 1; }
  .sjb-ring.no-anim { transition: none; }
  .sjb-nightsnote { color: var(--medium-gray, #817F7C); font-weight: 500; margin-left: 6px; white-space: nowrap; }
  /* CTA verankert als volwaardige cel: volledige balkhoogte, geen zwevende knop */
  .sjb-action { padding-left: 6px; align-self: stretch; display: flex; }
  .sjb-action .sjb-cta { height: 100%; }
  .sjb-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 26px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: var(--base-color, #17342B); color: #fff; border: 1px solid var(--base-color, #17342B);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  /* 28-09: korte notatie vervangen door `background-color`. De korte notatie
     zet ook `background-image` en `background-size` terug op hun beginwaarde en
     wiste daarmee de gele veeg verderop in dit bestand. */
  .sjb-cta:not(.is-ghost):hover { background-color: var(--base-color, #17342B); border-color: transparent; }
  .sjb-cta.is-ghost:hover { border-color: #224a3d; }
  .sjb-cta.is-ghost { background: transparent; color: var(--base-color, #17342B); }
  .sjb-cta.is-ghost:hover { background: var(--very-light-gray, #F4F1ED); }
  .sjb-cta.is-ready-pulse { animation: sjb-ready 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }

  .sjb-panel {
    position: absolute; bottom: calc(100% - 1px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid rgba(23, 52, 43, 0.14); border-radius: 18px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.16);
    transform-origin: 50% 100%;
    transform: translateY(6px) scale(0.97); opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
    pointer-events: none;
  }
  .sjb-panel.is-open {
    transform: none; opacity: 1; pointer-events: auto;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 240ms ease;
  }
  .sjb-panel--guests { left: auto; width: 340px; padding: 8px 22px 18px; }
  .sjb-cal-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(23, 52, 43, 0.14);
  }
  .sjb-cal-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 18px; color: #1f2420; }
  .sjb-hint { font-size: 13px; color: var(--medium-gray, #817F7C); }
  .sjb-cal-nav { display: flex; align-items: center; gap: 16px; padding: 14px 0 10px; }
  .sjb-month-labels { flex: 1; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
  .sjb-month-labels span { font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: #1f2420; }
  .sjb-round {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(23, 52, 43, 0.2); border-radius: 999px; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: #1f2420; font-family: inherit;
  }
  .sjb-round:hover { background: var(--very-light-gray, #F4F1ED); }
  .sjb-round[disabled] { opacity: .4; cursor: default; }
  .sjb-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
  .sjb-months.is-swap { animation: sjb-mswap 150ms ease-out; }
  .sjb-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
  .sjb-weekdays span {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--medium-gray, #817F7C); text-align: center;
  }
  .sjb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
  .sjb-day {
    height: 42px; border: 0; background: none; border-radius: 999px;
    font-family: inherit; font-weight: 500; font-size: 14px; color: #1f2420; cursor: pointer;
  }
  .sjb-day:hover { background: var(--very-light-gray, #F4F1ED); }
  .sjb-day.is-past { color: #c4c0ba; cursor: default; }
  .sjb-day.is-past:hover { background: none; }
  .sjb-day.is-dim { color: var(--medium-gray, #817F7C); }
  .sjb-day.is-today { box-shadow: inset 0 0 0 1px rgba(23, 52, 43, 0.35); }
  .sjb-day.in-range { background: var(--very-light-gray, #F4F1ED); border-radius: 0; }
  .sjb-day.is-edge { background: var(--base-color, #17342B); color: #fff; font-weight: 600; border-radius: 999px; }
  .sjb-day.just-picked { animation: sjb-pop 150ms cubic-bezier(0.2, 0.7, 0.3, 1); }
  .sjb-day-blank { height: 42px; }
  .sjb-cal-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(23, 52, 43, 0.14);
  }
  .sjb-clear {
    border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: #1f2420; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .sjb-foot-actions { display: flex; gap: 10px; }
  .sjb-cta--sm { min-height: 40px; padding: 0 18px; }
  .sjb-guest-row {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
  }
  .sjb-guest-row + .sjb-guest-row { border-top: 1px solid rgba(23, 52, 43, 0.14); }
  .sjb-guest-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: #1f2420; }
  .sjb-stepper { display: flex; align-items: center; gap: 12px; }
  .sjb-count { font-weight: 600; font-size: 16px; min-width: 18px; text-align: center; }
  .sjb-guest-foot { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid rgba(23, 52, 43, 0.14); }

  /* Stage Light: hero dimt, header wijkt; alles omkeerbaar via één klasse */
  #banner::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(10, 16, 13, 0.32); opacity: 0; transition: opacity 250ms ease;
  }
  html.sjb-stage #banner::before { opacity: 1; }
  html.sjb-stage header { opacity: 0.55; }
  header { transition: opacity 250ms ease; }

  /* header-CTA in dezelfde vormtaal als de journey-bar-CTA (operator 10-09) */
  header .btn.btn-base-color {
    border-radius: 12px !important; min-height: 48px; padding: 0 26px;
    font-size: 13px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    display: inline-flex; align-items: center;
  }
  /* 28-09: de donkergroene hoverkleur is vervangen door de gele veeg verderop in
     dit bestand. De rand moet doorzichtig blijven, anders blijft er een groene
     omlijning om de gele vulling staan; deze regel is specifieker dan de veeg. */
  header .btn.btn-base-color:hover { background-color: var(--base-color, #17342B) !important; border-color: transparent !important; }

  /* cabana-launcher boven de bar (in-page style wint anders op volgorde) */
  #daypass-launcher { bottom: 128px !important; }
  /* cabana-launcher in dezelfde vormtaal als de andere knoppen, eigen kleur:
     geel merkaccent met donkergroen — onderscheidt het DayPass-product */
  #daypass-launcher {
    border-radius: 12px !important;
    background: #EFEC72 !important; color: var(--base-color, #17342B) !important;
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .1em !important; text-transform: uppercase;
    min-height: 48px; padding: 0 26px !important;
  }
  #daypass-launcher:hover { background: #f5f2a0 !important; }
}
@keyframes sjb-ready { 50% { transform: scale(1.02); } }
@keyframes sjb-mswap { from { opacity: 0.35; transform: translateX(var(--swapx, 10px)); } }
@keyframes sjb-pop { from { transform: scale(0.88); } }
@media (prefers-reduced-motion: reduce) {
  #sjb *, #sjb *::before, #sjb *::after, #banner::before { transition: none !important; animation: none !important; }
}

/* scroll-indicator ook in de hero zichtbaar (operator 10-09) — Crafto's JS
   toont hem pas na 200px scroll; mix-blend-mode houdt hem overal leesbaar */
.scroll-progress { opacity: 1 !important; visibility: visible !important; }

/* ============================================================
   Journey-bar dock: zodra de footer in beeld komt schuift de bar
   vloeiend naar een volledige balk vast op de onderrand
   (operator-verzoek 10-09) — desktop-only, net als de bar zelf.
   ============================================================ */
@media (min-width: 992px) {
  #sjb { transition: bottom .35s ease, width .35s ease, background-color .35s ease, padding .35s ease; }
  #sjb .sjb-kicker { transition: opacity .25s ease, visibility .25s ease; }
  /* Gedockt: de balk zelf blijft exact het origineel (afgerond, eigen breedte,
     gecentreerd); alleen de achtergrond wordt een witte strook over de volle
     breedte van de site. */
  #sjb.sjb-docked {
    bottom: 0; width: 100vw;
    background: #fff; border-top: 1px solid rgba(23, 52, 43, 0.10);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
    padding: 12px 0 14px;
  }
  /* kicker blijft zichtbaar, uitgelijnd op de inhoud; donker op de witte strook */
  #sjb.sjb-docked .sjb-kicker {
    color: var(--base-color, #17342B); text-shadow: none;
    margin-left: calc((100vw - min(980px, 100vw - 280px)) / 2 + 6px);
  }
  #sjb.sjb-docked .sjb-kicker::before { background: #EFEC72; }
  /* de balk-inhoud blijft exact origineel; het witte vlak (de strook) groeit
     alleen aan de zijkanten mee — binnenrand en schaduw vallen weg zodat
     strook en balk één vlak vormen */
  #sjb.sjb-docked .sjb-bar {
    width: min(980px, calc(100vw - 280px));
    margin: 0 auto;
    border-color: transparent; box-shadow: none;
  }
  /* precies genoeg scrollruimte om de gedockte strook vrij te houden —
     geen lege band tussen footer en balk */
  body:has(#sjb:not(.sjb-summon-hidden)) { padding-bottom: 112px; }
  /* cabana-knop zakt bij het docken mee de witte strook in (rechts naast
     de velden), zodat hij geen footerinhoud meer afdekt */
  #daypass-launcher { transition: bottom .35s ease; }
  body:has(#sjb.sjb-docked) #daypass-launcher { bottom: 30px !important; }
  /* kalender-/gastenpaneel behoudt in gedockte staat het subtiele
     originele formaat (gecentreerd), groeit niet mee naar volle breedte */
  #sjb.sjb-docked .sjb-panel {
    left: 50%; right: auto;
    width: min(980px, calc(100vw - 280px));
    transform: translateX(-50%) translateY(6px) scale(0.97);
  }
  #sjb.sjb-docked .sjb-panel.is-open { transform: translateX(-50%); }
  /* footerlinks op één regel — het label "Mondi Jan Thiel" duwde
     Privacy anders naar een tweede rij */
  footer .footer-navbar {
    display: flex; flex-wrap: nowrap; justify-content: center;
    white-space: nowrap;
  }
  footer .footer-navbar .nav-item { margin: 0 8px; }
}

/* Op pagina's buiten home/rooms/facilities start de journey-bar verborgen en
   verschijnt hij pas wanneer "Check availability" / "Book online" wordt geklikt. */
#sjb.sjb-summon-hidden { display: none !important; }


/* === Sonesta 2026-09-24: desktopopmaak van de journey bar herbruikt in de mobiele overlay ===
   De volledige visuele opmaak van #sjb stond in @media (min-width: 992px). Hieronder staan
   dezelfde regels, machinaal afgeleid uit dat blok en gescoped op .sjb-overlay, zodat de
   overlay er onder 992px net zo uitziet. Alleen selectors zijn geprefixt; geen waarde gewijzigd.
   De overlay-specifieke afwijkingen (1 kolom, panelen in de flow) staan hierna en winnen. */
.sjb-overlay #sjb {
  display: block; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    width: min(980px, calc(100vw - 280px)); z-index: 9000;
    font-family: var(--primary-font, sans-serif);
}
.sjb-overlay .sjb-tagline {
  margin-bottom: 130px;
}
.sjb-overlay .sjb-kicker {
  display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 8px 6px; color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.sjb-overlay .sjb-kicker::before {
  content: ""; width: 22px; height: 3px; background: #EFEC72;
}
.sjb-overlay .sjb-bar {
  position: relative;
    display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr auto; align-items: center;
    background: #fff; border: 1px solid rgba(23, 52, 43, 0.14); border-radius: 18px;
    padding: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.sjb-overlay .sjb-divider {
  width: 1px; height: 34px; background: rgba(23, 52, 43, 0.14);
}
.sjb-overlay .sjb-field {
  position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; padding: 12px 22px;
    border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
    font-family: inherit;
    transition: background-color 180ms ease;
}
.sjb-overlay .sjb-field:hover {
  background: var(--very-light-gray, #F4F1ED);
}
.sjb-overlay .sjb-field:active {
  transform: scale(0.99);
}
.sjb-overlay .sjb-label {
  position: relative; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--medium-gray, #817F7C);
}
.sjb-overlay .sjb-label::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: #EFEC72; transform: scaleX(0); transform-origin: left;
    transition: transform 180ms ease;
}
.sjb-overlay .sjb-field:hover .sjb-label::after, .sjb-overlay .sjb-field:focus-visible .sjb-label::after, .sjb-overlay .sjb-field.is-next .sjb-label::after {
  transform: scaleX(1);
}
.sjb-overlay .sjb-value {
  font-size: 16px; font-weight: 600; color: #1f2420; line-height: 1.3;
}
.sjb-overlay .sjb-value.is-empty {
  color: var(--medium-gray, #817F7C); font-weight: 500;
}
.sjb-overlay .sjb-ring {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
    border-radius: 12px; background: var(--very-light-gray, #F4F1ED);
    box-shadow: inset 0 0 0 1.5px var(--base-color, #17342B);
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease;
}
.sjb-overlay .sjb-ring.is-on {
  opacity: 1;
}
.sjb-overlay .sjb-ring.no-anim {
  transition: none;
}
.sjb-overlay .sjb-nightsnote {
  color: var(--medium-gray, #817F7C); font-weight: 500; margin-left: 6px; white-space: nowrap;
}
.sjb-overlay .sjb-action {
  padding-left: 6px; align-self: stretch; display: flex;
}
.sjb-overlay .sjb-action .sjb-cta {
  height: 100%;
}
.sjb-overlay .sjb-cta {
  display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 26px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: var(--base-color, #17342B); color: #fff; border: 1px solid var(--base-color, #17342B);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
/* 28-09: zie de toelichting bij `.sjb-cta:hover` hierboven. */
.sjb-overlay .sjb-cta:not(.is-ghost):hover {
  background-color: var(--base-color, #17342B); border-color: transparent;
}
.sjb-overlay .sjb-cta.is-ghost:hover { border-color: #224a3d; }
.sjb-overlay .sjb-cta.is-ghost {
  background: transparent; color: var(--base-color, #17342B);
}
.sjb-overlay .sjb-cta.is-ghost:hover {
  background: var(--very-light-gray, #F4F1ED);
}
.sjb-overlay .sjb-cta.is-ready-pulse {
  animation: sjb-ready 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sjb-overlay .sjb-panel {
  position: absolute; bottom: calc(100% - 1px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid rgba(23, 52, 43, 0.14); border-radius: 18px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.16);
    transform-origin: 50% 100%;
    transform: translateY(6px) scale(0.97); opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
    pointer-events: none;
}
.sjb-overlay .sjb-panel.is-open {
  transform: none; opacity: 1; pointer-events: auto;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 240ms ease;
}
.sjb-overlay .sjb-panel--guests {
  left: auto; width: 340px; padding: 8px 22px 18px;
}
.sjb-overlay .sjb-cal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(23, 52, 43, 0.14);
}
.sjb-overlay .sjb-cal-title {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 18px; color: #1f2420;
}
.sjb-overlay .sjb-hint {
  font-size: 13px; color: var(--medium-gray, #817F7C);
}
.sjb-overlay .sjb-cal-nav {
  display: flex; align-items: center; gap: 16px; padding: 14px 0 10px;
}
.sjb-overlay .sjb-month-labels {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; text-align: center;
}
.sjb-overlay .sjb-month-labels span {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: #1f2420;
}
.sjb-overlay .sjb-round {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(23, 52, 43, 0.2); border-radius: 999px; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: #1f2420; font-family: inherit;
}
.sjb-overlay .sjb-round:hover {
  background: var(--very-light-gray, #F4F1ED);
}
.sjb-overlay .sjb-round[disabled] {
  opacity: .4; cursor: default;
}
.sjb-overlay .sjb-months {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px;
}
.sjb-overlay .sjb-months.is-swap {
  animation: sjb-mswap 150ms ease-out;
}
.sjb-overlay .sjb-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px;
}
.sjb-overlay .sjb-weekdays span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--medium-gray, #817F7C); text-align: center;
}
.sjb-overlay .sjb-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0;
}
.sjb-overlay .sjb-day {
  height: 42px; border: 0; background: none; border-radius: 999px;
    font-family: inherit; font-weight: 500; font-size: 14px; color: #1f2420; cursor: pointer;
}
.sjb-overlay .sjb-day:hover {
  background: var(--very-light-gray, #F4F1ED);
}
.sjb-overlay .sjb-day.is-past {
  color: #c4c0ba; cursor: default;
}
.sjb-overlay .sjb-day.is-past:hover {
  background: none;
}
.sjb-overlay .sjb-day.is-dim {
  color: var(--medium-gray, #817F7C);
}
.sjb-overlay .sjb-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(23, 52, 43, 0.35);
}
.sjb-overlay .sjb-day.in-range {
  background: var(--very-light-gray, #F4F1ED); border-radius: 0;
}
.sjb-overlay .sjb-day.is-edge {
  background: var(--base-color, #17342B); color: #fff; font-weight: 600; border-radius: 999px;
}
.sjb-overlay .sjb-day.just-picked {
  animation: sjb-pop 150ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sjb-overlay .sjb-day-blank {
  height: 42px;
}
.sjb-overlay .sjb-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(23, 52, 43, 0.14);
}
.sjb-overlay .sjb-clear {
  border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: #1f2420; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sjb-overlay .sjb-foot-actions {
  display: flex; gap: 10px;
}
.sjb-overlay .sjb-cta--sm {
  min-height: 40px; padding: 0 18px;
}
.sjb-overlay .sjb-guest-row {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
}
.sjb-overlay .sjb-guest-row + .sjb-guest-row {
  border-top: 1px solid rgba(23, 52, 43, 0.14);
}
.sjb-overlay .sjb-guest-title {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: #1f2420;
}
.sjb-overlay .sjb-stepper {
  display: flex; align-items: center; gap: 12px;
}
.sjb-overlay .sjb-count {
  font-weight: 600; font-size: 16px; min-width: 18px; text-align: center;
}
.sjb-overlay .sjb-guest-foot {
  display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid rgba(23, 52, 43, 0.14);
}

/* === Sonesta 2026-09-24: mobiele overlay voor "Plan your stay" ===
   De journey bar staat onder 992px op display:none en helemaal onderaan de pagina.
   De mobiele knop "Book your stay" opent hem nu als overlay bovenop de pagina.
   Het bestaande #sjb-element wordt VERPLAATST (niet gekloond), dus dezelfde
   velden, kalender, gastenteller en SynXis-handoff; geen dubbele ID's. */
.sjb-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; }
.sjb-overlay[hidden] { display: none; }
.sjb-overlay__backdrop { position: absolute; inset: 0; background: rgba(12, 26, 21, .55); }
.sjb-overlay__dialog {
  position: relative; z-index: 1; width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
}
.sjb-overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid rgba(23, 52, 43, .12); flex: 0 0 auto;
}
.sjb-overlay__title {
  color: #17342b; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.sjb-overlay__close {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%;
  font-size: 26px; line-height: 1; color: #17342b; cursor: pointer;
}
.sjb-overlay__close:focus-visible { outline: 2px solid #17342b; outline-offset: 2px; }
.sjb-overlay__body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
}
.sjb-overlay #sjb,
.sjb-overlay .sjb-bar,
.sjb-overlay .sjb-panel {
  width: 100%; max-width: 100%; min-width: 0;
  margin-left: 0; margin-right: 0; left: auto; right: auto; transform: none;
}
/* Mobiele overlay: het eerdere summon-blok (r531) geeft `.sjb-overlay #sjb` nog position:fixed; bottom:24px.
   Met left:auto + width:100% hing de balk daardoor los van het venster: 14px naar rechts geschoven (rechts
   afgesneden) en boven het scherm uit (gemeten 27-10 op 390 en 360 px: left 14, right 404 > 390).
   Zelfde oplossing als Miami (corendon-south-beach.css r1235, 02-10): in de overlay loopt de balk mee in de flow. */
.sjb-overlay #sjb { display: block; position: static; bottom: auto; }
.sjb-overlay .sjb-kicker { display: none; }
.sjb-overlay .sjb-bar { grid-template-columns: 1fr; padding: 6px; border-radius: 16px; }
.sjb-overlay .sjb-divider,
.sjb-overlay .sjb-ring { display: none; }
.sjb-overlay .sjb-field { padding: 14px 18px; min-height: 58px; border-radius: 12px; }
.sjb-overlay .sjb-field + .sjb-field { border-top: 1px solid rgba(23, 52, 43, .12); }
.sjb-overlay .sjb-action { padding: 8px 8px 6px; }
.sjb-overlay .sjb-action .sjb-cta { width: 100%; min-height: 52px; }
.sjb-overlay .sjb-panel {
  position: static; margin-top: 10px; padding: 16px 14px 14px; border-radius: 16px;
}
.sjb-overlay .sjb-months { grid-template-columns: 1fr; gap: 18px 0; }
.sjb-overlay .sjb-month-labels { grid-template-columns: 1fr; }
.sjb-overlay .sjb-guest-foot { justify-content: stretch; }
.sjb-overlay .sjb-guest-foot .sjb-cta { width: 100%; }
body.sjb-overlay-open { overflow: hidden; }
/* De zwevende DayPass-launcher ligt anders over de CTA van de overlay heen. */
body.sjb-overlay-open #daypass-launcher { display: none; }

/* === Sonesta 2026-09-25: leeftijd per kind in het gastenpaneel ===
   SynXis eist de leeftijden (parameter `childages`, pipe-gescheiden). Zonder
   leeftijd toont de engine "Please add the ages of your children" en geen prijs. */
.sjb-ages { display: grid; gap: 10px; margin-top: 4px; }
.sjb-ages[hidden] { display: none; }
.sjb-age-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sjb-age-label { color: #17342b; font-size: 14px; }
.sjb-age-select {
  flex: 0 0 140px; max-width: 55%; box-sizing: border-box;
  min-width: 118px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(23, 52, 43, .22); border-radius: 10px;
  background: #fff; color: #17342b; font-family: inherit; font-size: 14px; cursor: pointer;
}
.sjb-age-select:focus-visible { outline: 2px solid #17342b; outline-offset: 2px; }
.sjb-overlay .sjb-age-row { gap: 10px; }

/* === Sonesta 2026-09-25: navigatie op één regel tussen 992 en 1199 ===
   De navlinks dragen `text-nowrap`, zodat "Mondi Jan Thiel" niet meer binnen de
   link afbreekt. Tussen 992 en 1199 is de middenkolom smal (col-lg-5 naast het
   gecentreerde logo); met de standaard padding van 15px komt de eerste link dan
   te dicht bij het logo. Iets minder padding, alleen in die band. */
@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; }
}


/* === Cabana-drawer (DayPass) — verplaatst uit index.html op 2026-09-25 ===
   Staat nu in de gedeelde stylesheet zodat Facilities en Rooms dezelfde drawer
   kunnen tonen zonder een kopie van de opmaak. */
/* Floating launcher button, bottom-right */
  #daypass-launcher {
    position: fixed; right: 24px; bottom: 24px; z-index: 10000;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border: none; cursor: pointer;
    background: var(--base-color, #d8a07a); color: #fff;
    font-family: var(--primary-font, sans-serif); font-size: 15px; font-weight: 600;
    letter-spacing: .3px; border-radius: 50px;
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #daypass-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(0,0,0,.28); }
  #daypass-launcher svg { width: 18px; height: 18px; flex: 0 0 auto; }
  /* Dimmed backdrop */
  #daypass-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  #daypass-overlay.is-open { opacity: 1; visibility: visible; }
  /* Slide-over panel from the right */
  #daypass-drawer {
    position: fixed; top: 0; right: 0; z-index: 10002;
    /* 100vw telt de verticale scrollbar mee, waardoor het paneel 15px links
       buiten beeld schoof op smalle schermen (gemeten 24-09 op 390px).
       100% is de layoutbreedte zonder scrollbar. */
    width: 460px; max-width: 100%; height: 100%;
    background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.25);
    transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
  }
  #daypass-drawer.is-open { transform: translateX(0); }
  #daypass-drawer .dp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid #eee; flex: 0 0 auto;
  }
  #daypass-drawer .dp-head span {
    font-family: var(--alt-font, var(--primary-font, serif)); font-size: 18px; color: #2d2d2d; font-weight: 600;
  }
  #daypass-close {
    background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1;
    color: #888; padding: 4px 8px;
  }
  #daypass-close:hover { color: #2d2d2d; }
  #daypass-drawer iframe { flex: 1 1 auto; width: 100%; border: 0; }
  @media (max-width: 575px) {
    #daypass-launcher { right: 16px; bottom: 16px; padding: 12px 20px; font-size: 14px; }
  }

/* === Sonesta 2026-09-25: tabstrip Facilities ===
   Acht tabs werden in gelijke kolommen van 115–148px geperst; labels braken
   daardoor midden in het woord ("Swi mmi ng pool"), op álle breedtes tot en met
   1440px. Labels blijven nu op één regel en de strip scrollt horizontaal zodra
   ze niet passen. Iconen staan náást de tekst, niet in plaats daarvan: twee van
   de acht tabs zijn zwembaden, die zijn zonder woorden niet te onderscheiden. */
.sjb-tabstrip {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.sjb-tabstrip::-webkit-scrollbar { height: 4px; }
.sjb-tabstrip::-webkit-scrollbar-thumb { background: rgba(23, 52, 43, .22); border-radius: 4px; }
.sjb-tabstrip .nav-item { flex: 0 0 auto; scroll-snap-align: start; }
.sjb-tabstrip .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 18px;
}
.sjb-tab-icon { font-size: 18px; line-height: 1; opacity: .75; }
.nav-link.active .sjb-tab-icon { opacity: 1; }
.sjb-tab-label { white-space: nowrap; }


/* === Sonesta 2026-09-25: header-CTA en navigatiemarkering ===
   1) "Check availability" brak in de knop af tot twee regels (gemeten 1240px:
      2 regels, breedte 159px, white-space normal). De knop houdt zijn tekst nu
      op één regel.
   2) Hover en actieve pagina worden gemarkeerd in het geel van de site (#EFEC72).
      Let op de twee headerstanden: boven de hero is de header transparant met
      witte tekst — daar mag de tekst zelf geel worden. Zodra hij sticky wordt is
      de achtergrond wit; geel op wit haalt een contrast van ongeveer 1,3:1 en is
      dan onleesbaar. In die stand blijft de tekst donker en doet een gele
      onderlijn het werk. */
header a.btn { white-space: nowrap; }

header .navbar-nav .nav-link { position: relative; }
header .navbar-nav .nav-link::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px;
  background: #EFEC72; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
  pointer-events: none;
}
header .navbar-nav .nav-link:hover::after,
header .navbar-nav .nav-link:focus-visible::after,
header .navbar-nav .nav-item.active > .nav-link::after,
header .navbar-nav .nav-link.active::after { transform: scaleX(1); }

/* Transparante header boven de hero: tekst zelf geel. */
header:not(.sticky-active) .navbar-nav .nav-link:hover,
header:not(.sticky-active) .navbar-nav .nav-link:focus-visible,
header:not(.sticky-active) .navbar-nav .nav-item.active > .nav-link,
header:not(.sticky-active) .navbar-nav .nav-link.active { color: #EFEC72 !important; }

@media (prefers-reduced-motion: reduce) {
  header .navbar-nav .nav-link::after { transition: none; }
}

/* === Sonesta 2026-09-25: voorzieningenlijst Facilities ===
   Stond in drie vaste kolommen van 237px in een rij van 712px, terwijl het
   langste item 257px nodig heeft. Drie regels braken daardoor af. De lijst is
   nu één lijst met kolommen die zich aan de inhoud aanpassen: de browser maakt
   er twee van op desktop en één op smalle schermen, en een item breekt nooit
   meer over twee regels. */
.fac-amenities {
  column-width: 260px;
  column-gap: 40px;
}
.fac-amenities > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .fac-amenities { column-width: auto; columns: 1; }
  .fac-amenities > li { white-space: normal; }
}

/* === Sonesta 2026-09-25: locatie en telefoon in de header ===
   De regel "Jan Thiel Bay · +599 9 747 0332" brak in twee regels en duwde de
   navigatie opzij. Gemeten: de tekst heeft 189px op één regel nodig; bij 1500px
   viewport staat hij op twee regels, bij 1550px op één. Onder 1600px (marge
   ingebouwd) tonen we daarom alleen de iconen. De volledige tekst blijft
   beschikbaar via `aria-label` (schermlezers) en `title` (tooltip), dus er gaat
   geen informatie verloren. */
.hdr-contact__icon { margin-right: 6px; font-size: 14px; vertical-align: -1px; }

/* Meting 25-09: de tekst heeft 189px op één regel nodig, met iconen erbij 250px.
   Op 1500 en 1550 brak hij, met iconen zelfs nog op 1700 en 1750; pas vanaf
   1800px past het geheel op één regel. Die breedte haalt vrijwel niemand, dus
   tonen we hier consequent alleen de iconen. De volledige gegevens blijven in
   `aria-label` en `title`, en staan voluit in de footer en op de contactpagina. */
.hdr-contact__label,
.hdr-contact__sep { display: none; }
.hdr-contact__icon { margin-right: 0; font-size: 17px; }
.hdr-contact > a + a { margin-left: 10px; }
/* Zonder tekst is het klikdoel niet hoger dan het icoon (14px gemeten). */
.hdr-contact > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px; border-radius: 6px;
}
.hdr-contact > a:focus-visible { outline: 2px solid #EFEC72; outline-offset: 2px; }

/* === Sonesta 2026-09-28: gele vulling bij hover op de knoppen ===
   De knop schildert zijn eigen vulling; er komt géén pseudo-element aan te pas
   en er wordt niet geclipt. Dat is bewust, en gemeten.

   Eerst geprobeerd: een `::before` met de gele vulling, `overflow: hidden` op de
   knop en een overstek van 1 tot 2px. Daar bleef een zichtbare rand omheen staan.
   Oorzaak: het thema geeft elke `.btn` een `border: 2px solid transparent`, en de
   achtergrondkleur van de knop loopt onder die rand door. `overflow` knipt af op
   de *padding*-rand, dus die strook van 2px bleef altijd zichtbaar, hoeveel
   overstek de vullaag ook kreeg. Meting op de echte knop (headless Chrome, 2x,
   telling van donkere pixels rond het gele vlak): `inset: -1px` → 3608 randpixels,
   `inset: -2px` → 3608, eigen achtergrond over de randbox → 0.

   Daarom `background-origin`/`background-clip: border-box`: de vulling loopt tot
   en met de buitenrand. De veeg gebeurt met een groeiende `background-size` en
   niet met `background-position`, omdat een procentuele positie rekent ten
   opzichte van *container min afbeelding*; bij een afbeelding die breder is dan
   de knop schuift een negatieve waarde dan juist de verkeerde kant op.

   De slagschaduw van `btn-box-shadow` blijft behouden (clippen zou die weghalen)
   en de tekstwissel van `btn-switch-text` blijft werken.
   De zwevende cabana-knop (`#daypass-launcher`) blijft ongemoeid: die is zelf al
   geel en heeft al een eigen hover. */
.btn.btn-dark-gray,
.btn.btn-base-color,
.btn.btn-white,
.sjb-cta:not(.is-ghost),
.sjb-overlay .sjb-cta:not(.is-ghost) {
  /* `!important` is hier nodig, niet cosmetisch: het thema zet op knoppen met
     `btn-box-shadow` de korte notatie `background:` in hover- en active-regels
     (o.a. `.btn.btn-box-shadow.btn-dark-gray:hover`, specificiteit 0-4-0). Een
     korte notatie zet `background-image` en `background-size` terug op hun
     beginwaarde, waardoor de vulling verdween terwijl de tekstkleur wél omsloeg:
     donkere tekst op een donkere knop. Gemeten op index.html: `background-size`
     werd `auto` in plaats van `142% 100%`. */
  background-image: linear-gradient(90deg, #EFEC72 0 74%, rgba(239, 236, 114, 0) 100%) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size 420ms cubic-bezier(.33, 0, .15, 1),
              color 180ms linear,
              transform 180ms ease,
              box-shadow 180ms ease;
}
.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:focus-visible,
.btn.btn-base-color:hover,
.btn.btn-base-color:focus-visible,
.btn.btn-white:hover,
.btn.btn-white:focus-visible,
.sjb-cta:not(.is-ghost):hover,
.sjb-cta:not(.is-ghost):focus-visible,
.sjb-overlay .sjb-cta:not(.is-ghost):hover,
.sjb-overlay .sjb-cta:not(.is-ghost):focus-visible {
  background-size: 142% 100% !important;
  color: #17342B !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}
/* Het thema maakt de achtergrond doorzichtig bij hover. Dat mag hier niet: de
   staart van de gradient is doorzichtig, dus halverwege de veeg zou de knop
   gedeeltelijk doorschijnend worden. */
.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:focus-visible { background-color: var(--dark-gray, #232323) !important; }
.btn.btn-base-color:hover,
.btn.btn-base-color:focus-visible { background-color: var(--base-color, #17342B) !important; }
.btn.btn-white:hover,
.btn.btn-white:focus-visible { background-color: #fff !important; }
.sjb-cta:not(.is-ghost):hover,
.sjb-overlay .sjb-cta:not(.is-ghost):hover { background-color: var(--base-color, #17342B); }

.btn.btn-dark-gray:active,
.btn.btn-base-color:active,
.btn.btn-white:active,
.sjb-cta:not(.is-ghost):active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn.btn-dark-gray,
  .btn.btn-base-color,
  .btn.btn-white,
  .sjb-cta:not(.is-ghost) { transition-duration: 1ms; }
  .btn.btn-dark-gray:hover,
  .btn.btn-base-color:hover,
  .btn.btn-white:hover,
  .sjb-cta:not(.is-ghost):hover { transform: none; }
}

/* === Sonesta 2026-10-01: locatie/telefoon-iconen naast Contact ===
   Op 1200-1279px is er maar 1px ruimte tot "Check Availability" (gemeten 01-10).
   Daar verbergen; vanaf 1280px is er 35px of meer. Bootstrap's .d-xl-flex is !important. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  header .navbar .navbar-right > li.d-xl-flex { display: none !important; }
}

/* === Sonesta 2026-10-01: "Plan your stay" — balk op de onderrand + stap-knop ===
   Operator-ontwerp (Plan your stay.html): de knop toont de stap (twee streepjes,
   "Step 1 of 2 / Choose arrival") en wisselt naar een donkere "Check availability →"
   zodra beide datums staan. Huisstijl: --base-color i.p.v. zwart, Urbanist (inherit).
   Geldt ook in de mobiele overlay: #sjb wordt daarheen verplaatst. */
@media (min-width: 992px) {
  #sjb { bottom: 0; }
  #sjb .sjb-bar {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }
}
#sjb .sjb-action { align-items: center; padding-right: 4px; }
#sjb .sjb-action .sjb-cta--step { height: auto; min-height: 60px; }
#sjb .sjb-cta--step {
  position: relative; overflow: hidden;
  display: grid; align-items: center; justify-items: start;
  min-width: 228px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
#sjb .sjb-cta--step.is-ghost {
  background: var(--very-light-gray, #F4F1ED);
  border-color: rgba(23, 52, 43, 0.12); color: var(--base-color, #17342B);
}
#sjb .sjb-cta--step.is-ghost:hover { border-color: #224a3d; }
#sjb .sjb-step-hint,
#sjb .sjb-step-ready {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 12px;
  transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1);
}
#sjb .sjb-step-ready { justify-self: center; gap: 10px; opacity: 0; transform: translateY(10px); }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-hint { opacity: 0; transform: translateY(-10px); }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-ready { opacity: 1; transform: none; }
#sjb .sjb-step-arrow { display: inline-block; transform: translateX(-8px); transition: transform 500ms cubic-bezier(.2,.7,.2,1) 150ms; }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-arrow { transform: none; }
#sjb .sjb-step-dashes { display: flex; gap: 4px; }
#sjb .sjb-step-dashes i {
  display: block; width: 18px; height: 3px; border-radius: 999px;
  background: rgba(23, 52, 43, 0.18); transition: background-color 300ms ease;
}
#sjb .sjb-cta--step[data-step="arrival"] .sjb-step-dashes i:first-child,
#sjb .sjb-cta--step[data-step="departure"] .sjb-step-dashes i,
#sjb .sjb-cta--step[data-step="guests"] .sjb-step-dashes i { background: var(--base-color, #17342B); }
#sjb .sjb-step-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; line-height: 1.2; }
#sjb .sjb-step-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--medium-gray, #817F7C);
}
#sjb .sjb-step-text { font-size: 14px; font-weight: 600; color: var(--base-color, #17342B); }
@media (prefers-reduced-motion: reduce) {
  #sjb .sjb-step-hint, #sjb .sjb-step-ready, #sjb .sjb-step-arrow, #sjb .sjb-step-dashes i { transition: none; }
}

/* === Sonesta 2026-10-02: "Plan your stay"-kicker volgt de achtergrond ===
   De kicker staat fixed en schuift over video, lichte banden en foto's. js/plan-your-stay.js
   meet per frame wat er onder de tekst geschilderd is: effen licht vlak → groen, effen
   donker vlak → wit, foto/video → wit met de bestaande schaduw. In de gedockte stand
   (witte strook bij de footer) blijft de bestaande regel #sjb.sjb-docked .sjb-kicker gelden.
   Zelfde aanpak als Corendon South Beach (02-10). */
#sjb .sjb-kicker.is-on-light { color: var(--base-color, #17342B); text-shadow: none; }
#sjb .sjb-kicker.is-on-dark { color: #fff; text-shadow: none; }

/* Border glow on hover (operator GO 09-10, as on the Corendon Miami sites; technique from Banden
   Service Veenendaal / AYCE), in Sonesta's own hover yellow #EFEC72 (the "gele veeg" on the
   buttons). js/plan-your-stay.js adds one .sls-glow-layer per target and feeds the cursor into
   --glow-x/--glow-y: soft wash, 2px masked ring around the cursor, outer glow. Mouse only.
   Targets: photo cards (dining/home), the four white info cards, the journey bar (not docked:
   operator 09-10 on South Beach, a glow on the docked strip reads as a box inside a box). The
   flip cards (rotate-box) are left out: they turn in 3D and a layer does not flip with them. */
.sls-glow { position: relative; --glow-x: 50%; --glow-y: 50%; transition: box-shadow .3s ease; }
.sls-glow-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--glow-x) var(--glow-y), rgba(239, 236, 114, .22) 0%, rgba(239, 236, 114, .08) 40%, transparent 70%); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .sls-glow-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
        background:
            radial-gradient(300px circle at var(--glow-x) var(--glow-y), #EFEC72 0%, rgba(239, 236, 114, .9) 18%, rgba(196, 192, 60, .55) 36%, rgba(196, 192, 60, .15) 56%, transparent 76%),
            linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(239, 236, 114, .18), rgba(255, 255, 255, .04));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
@media (hover: hover) and (pointer: fine) {
    .sls-glow:hover > .sls-glow-layer { opacity: 1; }
    .sls-glow:hover { box-shadow: 0 0 0 1px rgba(196, 192, 60, .55), 0 0 48px rgba(239, 236, 114, .55), 0 18px 50px rgba(23, 52, 43, .22) !important; }
}
#sjb.sjb-docked .sjb-bar > .sls-glow-layer { display: none; }
#sjb.sjb-docked .sjb-bar.sls-glow:hover { box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .sls-glow, .sls-glow-layer { transition: none; } }

/* Why-stay photo cards under the hero (operator 09-10, replacing the USP icon row so all
   Corendon-managed sites match; structure from Corendon South Beach Miami, Crafto demo-corporate
   "Corporate services"). White band, dark-green kicker pill, white card labels, cards 600/710.
   The engine dims .content-title to .6 — on photography the sentence stays at full white over a
   shade. Keyboard focus shows the hover state. */
.sls-why { background-color: #fff; padding: 110px 0 60px; }
.sls-why-kicker { display: inline-block; margin-bottom: 18px; padding: 0 22px; border-radius: 100px;
    background: #17342B; color: #fff; font-size: 13px; line-height: 38px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sls-why-heading { color: #17342B; letter-spacing: -1px; }
.sls-why-intro { color: #5f5d5a; font-size: 18px; line-height: 30px; margin: 0; }
.sls-why-navs { gap: 10px; }
.sls-why-nav { width: 52px; height: 52px; margin: 0; color: #17342B; background: transparent;
    border: 1px solid rgba(23, 52, 43, .3); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }
.sls-why-nav:hover, .sls-why-nav:focus-visible { background: #17342B; color: #fff; border-color: #17342B; }
.sls-why-nav:focus-visible { outline: 2px solid #EFEC72; outline-offset: 3px; }
.sls-why-nav::after { display: none; }
.sls-why-nav.swiper-button-disabled { opacity: .35; }
.sls-why-nav.swiper-button-lock { display: none; }
.sls-why-slider { overflow: visible; }
.sls-why-card { aspect-ratio: 600 / 710; border-radius: 6px; background: #17342B; }
.sls-why-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sls-why-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(18, 38, 32, .92) 0%, rgba(18, 38, 32, .55) 38%, rgba(18, 38, 32, 0) 65%); }
.sls-why-card .image-content { padding: 30px 26px; }
.sls-why-label { background: #fff; color: #17342B; border-radius: 30px;
    padding: 0 18px; font-size: 12px; line-height: 30px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sls-why-foot { padding-right: 0; }
.sls-why-title { color: #fff; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; }
.sls-why-card .sls-why-text { color: #fff; opacity: 1; font-size: 15px; line-height: 23px; margin: 0; }
.sls-why-more { color: #fff; font-size: 13px; line-height: 24px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.sls-why-card .content-arrow { width: 50px; height: 50px; line-height: 50px; color: #17342B; font-size: 15px; }
.sls-why-overlay { background: linear-gradient(to top, rgba(23, 52, 43, .96) 0%, rgba(23, 52, 43, .55) 100%); }
.sls-why-card .image-content:focus-within .content-arrow { opacity: 1; transform: translateY(-42%); }
.sls-why-card .image-content:focus-within .content-title { opacity: 0; visibility: hidden; transform: translateY(-20px); }
.sls-why-card .image-content:focus-within .content-title-hover { visibility: visible; transform: translateY(-3px); }
.sls-why-card .image-content:focus-within .box-overlay { opacity: 1; visibility: visible; }
.sls-why-card .image-content:focus-within .hover-label-icon .label { opacity: 0; margin-top: -20px; }
.sls-why-card .image-content:focus-within .hover-label-icon i { opacity: 1; top: 0; }
.sls-why-card a:focus-visible { outline: 3px solid #EFEC72; outline-offset: -3px; border-radius: 6px; }
@media (max-width: 991px) { .sls-why { padding: 80px 0 60px; } }
@media (max-width: 767px) { .sls-why { padding: 64px 0 64px; } .sls-why-card .image-content { padding: 26px 24px; } }
@media (prefers-reduced-motion: reduce) { .sls-why-card > img, .sls-why-card .image-content * { transition: none !important; } }

/* Navigation in capitals (operator 09-10), the same treatment as the Corendon Miami sites and
   the header CTA: 13px / 700 / .1em (was 18px / 600). */
header .navbar .navbar-nav .nav-link { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .1em; }