/* Vida Daurada — eigen overrides bovenop Nicepage */

/* 1. Bovenste menubalk:
      - Alleen op de homepage, cadeaukaart- en incheckpagina's is de balk
        transparant boven de hero (body krijgt .vd-transparent-header via JS).
      - Zodra je scrollt (u-sticky-scroll op body) vloeit hij naar blauw + wit.
      - Op alle andere pagina's is de balk meteen blauw #1e9eb7 (zelfde
        kleur als de homepage-header krijgt na scroll). */

/* Basisregel — transition + geen border. Kleur wordt hieronder specifieker
   gezet, zodat we Nicepage's u-overlap-transparent-regel kunnen verslaan. */
header.u-header {
  border-bottom: none !important;
  transition: background-color 300ms ease !important;
}

/* De teal menubalk is vervallen: logo, taalstoplicht, Reservar-knop en
   menuknop hebben elk hun eigen witte kader, dus er hoeft niets meer
   achter te zitten. De header blijft sticky en transparant — in alle
   toestanden, ook gescrolld en ook op de pagina's met een hero eronder. */
body:not(.vd-transparent-header) header.u-header,
body:not(.vd-transparent-header) .u-header,
body:not(.vd-transparent-header).u-overlap header.u-header,
body:not(.vd-transparent-header).u-overlap .u-header,
body:not(.vd-transparent-header).u-overlap.u-overlap-transparent header.u-header,
body:not(.vd-transparent-header).u-overlap.u-overlap-transparent .u-header,
body.vd-transparent-header:not(.u-sticky-scroll) header.u-header,
body.vd-transparent-header:not(.u-sticky-scroll) .u-header,
body.vd-transparent-header.u-overlap.u-overlap-transparent:not(.u-sticky-scroll) header.u-header,
body.vd-transparent-header.u-overlap.u-overlap-transparent:not(.u-sticky-scroll) .u-header,
body.vd-transparent-header.u-sticky-scroll header.u-header,
body.vd-transparent-header.u-sticky-scroll .u-header,
body.vd-transparent-header.u-overlap.u-sticky-scroll header.u-header,
body.vd-transparent-header.u-overlap.u-sticky-scroll .u-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Body: geen padding-top nodig — u-overlap regelt dat de header
   absoluut boven section 1 zweeft. Wel padding-bottom voor de bottom-nav. */
body.u-body {
  padding-bottom: 100px !important;
  background-color: #ffffff !important;
}

/* Container-collapse zelf vangt geen klikken op (laat klikken doorlopen) */
.u-nav-container-collapse {
  pointer-events: none !important;
}
.u-nav-container-collapse .u-sidenav,
.u-nav-container-collapse .u-menu-overlay,
.u-sidenav,
.u-menu-overlay {
  pointer-events: auto !important;
}

/* Sluit-X expliciet klikbaar + ruimer hit-area */
.u-menu-close,
.u-menu-close-1 {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10 !important;
  position: relative !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
.u-menu-overlay {
  cursor: pointer !important;
}

/* Bij offcanvas-open blijft de header vast bovenaan */
.u-overlap.u-offcanvas-opened .u-header.u-sticky,
.u-offcanvas-opened header.u-header,
body.u-offcanvas-opened header.u-header {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* 2. Menu-tekst wit op de blauwe balk (Nicepage-default herstellen bij overlap-transparent) */
.u-overlap .u-header .u-nav-1 > li > a,
.u-overlap:not(.u-sticky-scroll) .u-header .u-nav-1 > li > a,
.u-overlap.u-sticky-scroll .u-header .u-nav-1 > li > a {
  color: #ffffff !important;
}
.u-overlap .u-header .u-nav-1 > li > a:hover,
.u-overlap:not(.u-sticky-scroll) .u-header .u-nav-1 > li > a:hover,
.u-overlap.u-sticky-scroll .u-header .u-nav-1 > li > a:hover {
  color: #d4eff5 !important;
}

/* 4. Footer: originele blauwe achtergrond + witte tekst */
footer.u-footer,
.u-footer.u-custom-color-33,
footer.u-footer.u-custom-color-33 {
  background-color: #1e9eb7 !important;
  background-image: none !important;
}
.u-footer,
.u-footer * {
  color: #ffffff !important;
}

/* Uitzondering: RTC- en RNA-registratienummers mogen in goudgeel — dat zijn
   de spans met Nicepage's originele u-text-custom-color-1 klasse. Copyright
   staat buiten die spans en blijft dus wit. */
.u-footer .u-text-custom-color-1,
.u-footer .u-text-custom-color-1 * {
  color: #d1c883 !important;
}

/* Footer social-icons (email/instagram/facebook): witte cirkels behouden
   en het icoontje binnenin blauw kleuren zodat 't opvalt in de witte cirkel. */
.u-footer .u-social-icons .u-social-icon svg circle,
.u-footer .u-social-icons .u-social-icon svg [fill="currentColor"] {
  fill: #ffffff !important;
}
.u-footer .u-social-icons .u-social-icon svg path {
  fill: #1e9eb7 !important;
}
.u-footer .u-social-icons .u-social-url:hover .u-social-icon svg circle,
.u-footer .u-social-icons .u-social-url:hover .u-social-icon svg [fill="currentColor"] {
  fill: #d4eff5 !important;
}
.u-footer .u-social-icons .u-social-url:hover .u-social-icon svg path {
  fill: #115664 !important;
}


/* =================================================
   NIEUWE onderste menubalk (snelnavigatie)
   Zwevend wit kader in de stijl van Booking.com's app-menu: alle vijf
   knoppen zitten in EEN pil met blur + subtiele shadow, in plaats van
   vijf losse kaartjes. Hover/actief geeft de knop een eigen licht-grijs
   pilletje met donkere tekst + icoon. Iconen zijn ongewijzigd.
   ================================================= */
.vd-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 990;
  background: transparent;
  padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  /* Alleen de zwevende pil vangt klikken; daarbuiten niets blokkeren zodat
     er geen dode zone rond de balk ontstaat. */
  pointer-events: none;
}
.vd-bottom-nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 8px 24px rgba(15, 25, 60, 0.10),
    0 2px 6px rgba(15, 25, 60, 0.06);
}
/* Fallback zonder backdrop-filter: iets solider wit zodat het contrast blijft */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vd-bottom-nav__inner { background: #ffffff; }
}
.vd-bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: #1e9eb7;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.vd-bottom-nav__icon {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: currentColor;
}
.vd-bottom-nav__icon svg {
  width: 100%; height: 100%;
  display: block;
  fill: currentColor;
}
.vd-bottom-nav__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: 'Nunito', sans-serif;
  line-height: 1.15;
  color: currentColor;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hover — grijs knop-eigen pilletje + donkere tekst/icoon (Booking-stijl) */
@media (hover: hover) {
  .vd-bottom-nav__item:hover { background: #eef0f2; color: #1b2a2e; }
}
.vd-bottom-nav__item:focus-visible { background: #eef0f2; color: #1b2a2e; }
/* Actief — dezelfde staat als hover, maar blijft staan op de huidige pagina */
.vd-bottom-nav__item.is-active { background: #eef0f2; color: #1b2a2e; }

@media (max-width: 420px) {
  .vd-bottom-nav__label { font-size: 10px; }
  .vd-bottom-nav__item { padding: 7px 2px; }
}

/* =================================================
   Taalbolletjes in de bovenste menubalk
   ================================================= */
/* Taalbolletjes: liggende "stoplicht"-rij links van de Reservar-knop, in een
   wit kader dat vastzit aan de bovenkant van de menubalk (platte bovenhoeken,
   afgeronde onderhoeken — zelfde plaatsing als de pills in de Posta7-header).
   Niet-actieve talen zijn gedimd, de actieve "licht op". */
.vd-lang-balls {
  position: fixed;
  top: 0;               /* vast aan de bovenkant — JS houdt dit aan */
  left: 100px;          /* fallback — JS zet dit links van de Reservar-knop */
  z-index: 1100;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 7px 9px 8px;
  background: #ffffff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.18);
  pointer-events: auto;
}
.vd-lang-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  /* Alle vlaggen staan standaard in volle kleur — geen gedimde "uit"-staat. */
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.vd-lang-ball img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Actief en hover: tealrand om het vlaggetje. */
.vd-lang-ball:hover,
.vd-lang-ball.is-active {
  box-shadow: 0 0 0 2px #1e9eb7;
}
.vd-lang-ball:hover {
  transform: scale(1.08);
}

/* Verberg de bestaande 3-talen-dropdown in de bovenbalk
   (de balletjes hebben hun rol overgenomen) */
.u-header .u-nav-container .u-nav-1 {
  display: none !important;
}

@media (max-width: 720px) {
  /* Logo: krapper wit kader + tegen de linkerrand */
  .u-header a.u-logo,
  .u-header a.u-logo.u-image-1,
  header.u-header .u-logo {
    padding: 3px 6px !important;
    border-radius: 8px !important;
    margin-left: -10px !important;   /* duwt 'm tegen de linkerrand */
  }

  /* Taalbolletjes op smal scherm: iets krapper, blijft vast aan de bovenkant */
  .vd-lang-balls {
    top: 0;
    padding: 6px 7px 7px;
    gap: 5px;
  }

}

/* =================================================
   Sectie 2 wit-kaart: voordelen-lijst met VI-bullets
   ================================================= */
/* De hele lijst gecentreerd in de kaart en elk item (icoon + tekst)
   ook horizontaal gecentreerd. */
.u-section-2 ul {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  padding-left: 0 !important;
  list-style: none !important;
}
.u-section-2 ul .vd-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0;
}
.u-section-2 ul .vd-feature .u-list-icon {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;   /* Nicepage's u-custom-list zet 'm absolute — terugtrekken in flex-flow */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
.u-section-2 ul .vd-feature .u-list-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  position: static !important;
  vertical-align: middle;
}
/* Allotjament-regel: geen icoon, met fijne scheidingslijn erboven */
.u-section-2 ul .vd-allot {
  list-style: none;
  margin-top: 14px;
  padding-top: 14px;
  padding-left: 0;
  border-top: 1px solid rgba(30, 158, 183, 0.18);
  display: block;
}
.u-section-2 ul .vd-allot::before { content: none !important; }

/* =================================================
   'Què veure'-pagina: kaart + markers + modal
   ================================================= */
.vd-map-section {
  padding: 118px 0 130px;   /* 90px header + 28px lucht boven de titel */
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}
.vd-map-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 0 16px;
  text-align: center;
}
.vd-map-title {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.vd-map-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
.vd-map-subtitle {
  color: #4a6b75;
  font-size: 1rem;
  margin: 0;
}
.vd-map {
  width: 100%;
  max-width: none;
  height: 70vh;
  min-height: 480px;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.10);
}

/* Marker: wit kaartje met foto + ronde pin met VI-icoon eronder */
.vd-marker-wrap { background: transparent !important; border: 0 !important; }
.vd-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.vd-marker:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 12px rgba(30, 158, 183, 0.35)); }
.vd-marker__photo {
  width: 42px;
  height: 42px;
  background: #ffffff;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 3px 10px rgba(30, 158, 183, 0.30);
  margin-bottom: 4px;
  overflow: hidden;
}
.vd-marker__photo img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 7px;
  display: block;
}
/* Driehoekje als verbinding tussen foto en pin */
.vd-marker__photo::after {
  content: '';
  position: absolute;
  top: 44px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #ffffff;
  filter: drop-shadow(0 2px 2px rgba(30, 158, 183, 0.25));
}
.vd-marker__pin {
  width: 34px; height: 34px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(30, 158, 183, 0.30);
  margin-top: 4px;
}
.vd-marker__pin img {
  width: 22px; height: 22px;
  display: block;
}

/* Modal */
.vd-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vd-modal[hidden] { display: none; }
.vd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 38, 56, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: pointer;
}
.vd-modal__card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 22px 24px;
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(30, 158, 183, 0.35);
}
.vd-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 158, 183, 0.10);
  color: #1e9eb7;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.vd-modal__close:hover { background: rgba(30, 158, 183, 0.20); }
.vd-modal__photo {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #e8f4f7;
}
.vd-modal__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vd-modal__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  color: #1e9eb7;
  margin: 0 0 8px;
  font-size: 1.6rem;
  padding-right: 40px;
}
.vd-modal__text {
  color: #4a6b75;
  margin: 0 0 18px;
  line-height: 1.55;
}
.vd-modal__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #1e9eb7;
  color: #ffffff !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.15s ease;
}
.vd-modal__route:hover { background: #1a869b; transform: translateY(-1px); }

/* =================================================
   Verberg alle vlaggetjes in de body — alleen de
   taalbolletjes-stapel in de bovenbalk blijft zichtbaar
   ================================================= */
img[src*="Flag_of_"],
img[src*="/flag.png"],
img[src*="/flag1.png"],
img[src*="/world.png"],
img[src$="flag.png"],
img[src$="flag1.png"],
img[src$="world.png"] {
  display: none !important;
}
.vd-lang-balls img {
  display: block !important;
}

/* =================================================
   Fotopagina — classy/glassy make-over voor de
   galerij-secties (zelfde palet als 'Què veure').
   ================================================= */
body.vd-photos-page section[class*="u-section-"] {
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%) !important;
  background-image: none !important;
}
body.vd-photos-page section[class*="u-section-"]:nth-of-type(even) {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
}

/* Sectie-koppen: Nunito sans-serif in brand-blauw */
body.vd-photos-page section[class*="u-section-"] h2.u-text-1 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1e9eb7 !important;
  letter-spacing: 0.01em;
  margin: 0 auto 28px !important;
  text-transform: none !important;
}

/* Subtiele gouden onderstreping als classy accent */
body.vd-photos-page section[class*="u-section-"] h2.u-text-1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}

/* Galerij-container: wit paneel met blauwe schaduw + afgeronde hoeken */
body.vd-photos-page .u-gallery {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.12) !important;
  overflow: hidden;
}

/* Individuele foto's: afgeronde hoeken, soft hover lift */
body.vd-photos-page .u-gallery-item {
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
body.vd-photos-page .u-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 158, 183, 0.22);
  z-index: 2;
}
body.vd-photos-page .u-gallery-item .u-back-slide,
body.vd-photos-page .u-gallery-item .u-back-image {
  border-radius: 12px;
}

/* Hover-overlay: centraal donker zodat Nicepage's 'Click'-icoon erop leesbaar blijft.
   Exact begrensd door de afgeronde foto, dus nooit witte uitstulping. */
body.vd-photos-page .u-gallery-item .u-over-slide,
body.vd-photos-page .u-gallery-item .u-shading {
  background:
    radial-gradient(circle at center, rgba(10, 38, 56, 0.55) 0%, rgba(30, 158, 183, 0.35) 70%, rgba(30, 158, 183, 0.05) 100%) !important;
  border-radius: 12px;
  color: #ffffff !important;
}

/* Forceer dat de overlay overal verschijnt op hover, ook in galerijen die
   Nicepage met u-show-text-none / u-effect-hover-zoom heeft uitgeschakeld. */
body.vd-photos-page .u-gallery-item .u-over-slide {
  display: block !important;
  opacity: 0 !important;
  transition: opacity 450ms ease !important;
  pointer-events: none;
}
body.vd-photos-page .u-gallery-item:hover .u-over-slide,
body.vd-photos-page .u-gallery-item.u-effect-active .u-over-slide {
  opacity: 1 !important;
}

/* Sectie 1 (horizontale slider): het 'lift'-effect plus zachte zoom op de back-image,
   zodat het schitterende hover-effect daar ook werkt zoals in de eerste galerijen */
body.vd-photos-page .u-gallery-item .u-back-image,
body.vd-photos-page .u-gallery-item .u-back-slide {
  transition: transform 500ms ease !important;
}
body.vd-photos-page .u-gallery-item:hover .u-back-image,
body.vd-photos-page .u-gallery-item:hover .u-back-slide {
  transform: scale(1.08) !important;
}
/* Eventueel ingespoten tekst/icoontjes (Click etc.) centraal op de foto + leesbaar wit */
body.vd-photos-page .u-gallery-item .u-over-slide *,
body.vd-photos-page .u-gallery-item .u-shading * {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* =================================================
   Titelblok bovenaan de fotopagina
   ================================================= */
.vd-photos-intro {
  padding: 118px 16px 4px;   /* 90px header + 28px lucht boven de titel */
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}
/* Sectie meteen ná het titelblok: minder lucht erboven */
body.vd-photos-page .vd-photos-intro + section[class*="u-section-"] {
  padding-top: 12px !important;
}
/* Sectie 1: de Nicepage-CSS forceert een grote min-height en een margin-top
   van 147 px op de slider; allebei wegmaken zodat de slider direct aansluit */
body.vd-photos-page section.u-section-1 .u-sheet-1 {
  min-height: 0 !important;
}
body.vd-photos-page section.u-section-1 .u-gallery-1 {
  margin-top: 0 !important;
}
.vd-photos-intro__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.vd-photos-intro__title {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.vd-photos-intro__subtitle {
  color: #4a6b75;
  font-size: 1rem;
  margin: 0;
}
.vd-photos-intro__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}

/* Sectie-padding wat luchtiger */
body.vd-photos-page section[class*="u-section-"] {
  padding: 60px 0 !important;
}
@media (max-width: 720px) {
  body.vd-photos-page section[class*="u-section-"] {
    padding: 40px 0 !important;
  }
  body.vd-photos-page .u-gallery {
    padding: 10px !important;
    border-radius: 14px !important;
  }
}

/* =================================================
   Homepage — classy/glassy make-over voor hero,
   witte kaart, recensies en accordion.
   ================================================= */

/* --- Fotos casa-knop in de hero: zelfde stijl als de Reservar-knop --- */
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn,
section.u-section-1[data-image-width="4000"][id="block-2"] a.u-btn-1.vd-foto-btn {
  display: flex !important;            /* block-level flex zodat margin-auto blijft werken */
  align-items: center;
  gap: 8px;
  width: fit-content !important;       /* krimpt naar content i.p.v. volle breedte */
  margin: 39px 0 0 auto !important;    /* originele positie: 39 px van boven, rechts uitgelijnd */
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1e9eb7 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.18) !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn:hover {
  background-color: #f0f8fa !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 158, 183, 0.28) !important;
}
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn,
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn .vd-foto-btn__label,
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn .vd-foto-btn__icon {
  color: #1e9eb7 !important;
}
section.u-section-1[data-image-width="4000"][id="block-2"] a.vd-foto-btn .vd-foto-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --- Hero (sectie 1): oorspronkelijke Lato + goudgeel (#d1c883) in blokletters --- */
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1,
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1 span {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  color: #d1c883 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(10, 38, 56, 0.45);
}

/* --- Sectie 2: lichte gradient-rand, witte kaart in classy stijl.
   De kaart hangt met z'n onderkant tegen de onderkant van de fotosectie
   en staat ietwat naar rechts. --- */
body.vd-home-page section.u-section-2 {
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%) !important;
  background-image: none !important;
  padding: 48px 0 0 !important;
}
body.vd-home-page section.u-section-2 .u-sheet-1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;     /* horizontaal naar rechts */
  justify-content: flex-end !important; /* verticaal naar onderen */
  padding: 0 clamp(16px, 6vw, 60px) 0 16px !important;
  min-height: 622px !important;
  box-sizing: border-box;
}
body.vd-home-page section.u-section-2 .u-group-1 {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 18px 18px 0 0 !important;  /* onderkant vlak tegen sectie-onderrand */
  box-shadow: 0 -8px 30px rgba(30, 158, 183, 0.12) !important;
  padding: 38px 28px !important;
  max-width: 640px !important;
  width: min(640px, calc(100% - 32px)) !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 767px) {
  /* Op mobiel toch gecentreerd, past beter bij smaller scherm */
  body.vd-home-page section.u-section-2 .u-sheet-1 {
    align-items: center !important;
    padding: 0 16px !important;
  }
}
body.vd-home-page section.u-section-2 .u-group-elements-1,
body.vd-home-page section.u-section-2 .u-group-elements-2,
body.vd-home-page section.u-section-2 .u-container-layout-1 {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Titel 'Vida Daurada' — zelfde stijl als 'Oasi' op fotopagina */
body.vd-home-page section.u-section-2 h1.u-text-1,
body.vd-home-page section.u-section-2 h1.u-text-1 span {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  color: #1e9eb7 !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
  margin: 0 auto !important;
  text-align: center !important;
}
body.vd-home-page section.u-section-2 h1.u-text-1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 12px auto 18px;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* Paradijs-onderschrift (blockquote) gecentreerd, normaal lettertype (zoals
   de ondertitels op 'Què veure' en de fotopagina) */
body.vd-home-page section.u-section-2 blockquote.u-text-2 {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 1rem !important;
  color: #4a6b75 !important;
  text-align: center !important;
  border: none !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
}

/* --- Sectie 5 (recensies): lichte gradient, wit paneel met blauwe schaduw --- */
body.vd-home-page section.u-section-5 {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
  background-image: none !important;
  padding: 56px 16px !important;
}
body.vd-home-page section.u-section-5 .u-sheet-1 {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.12);
  padding: 36px 22px !important;
  max-width: 720px;
  margin: 0 auto !important;
  min-height: 0 !important;
}

/* --- Sectie 6 (accordion): lichte achtergrond, classy accordion-stijl --- */
body.vd-home-page section.u-section-6 {
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%) !important;
  padding: 56px 16px !important;
}
body.vd-home-page section.u-section-6 .u-sheet-1 {
  max-width: 820px;
  margin: 0 auto !important;
}
/* Homepage sectie 6 — JS herschrijft het accordeon-item naar een echte
   <h2>-titel + tekstblok. Hier alleen de nieuwe classes stylen; alle
   oude accordion-CSS hieronder is inert (want die elementen bestaan niet meer). */
body.vd-home-page section.u-section-6 .vd-section6-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: #1e9eb7;
  text-align: center;
  margin: 0 auto 18px;
  max-width: 720px;
}
body.vd-home-page section.u-section-6 .vd-section6-body {
  max-width: 720px;
  margin: 0 auto;
  color: #4a6b75;
  line-height: 1.65;
}
body.vd-home-page section.u-section-6 .vd-section6-body p,
body.vd-home-page section.u-section-6 .vd-section6-body .u-text {
  color: #4a6b75 !important;
  margin: 0 0 12px;
}
body.vd-home-page section.u-section-6 .vd-section6-body a {
  color: #1e9eb7 !important;
}

/* — Legacy accordeon-selectors hieronder blijven staan als noop-vangnet
     voor 't geval JS nog niet is gedraaid (voorkomt FOUC-flits). — */
body.vd-home-page section.u-section-6 .u-accordion-link {
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto 18px !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1e9eb7 !important;
  text-align: center !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  max-width: 720px;
}
body.vd-home-page section.u-section-6 .u-accordion-link,
body.vd-home-page section.u-section-6 .u-accordion-link *,
body.vd-home-page section.u-section-6 .u-accordion-link .u-accordion-link-text {
  color: #1e9eb7 !important;
}
/* Vlaggetje voor de intro-zin weg + uitklap-pijltje weg */
body.vd-home-page section.u-section-6 .u-accordion-link .u-file-icon,
body.vd-home-page section.u-section-6 .u-accordion-link-icon {
  display: none !important;
}
/* Pane permanent open + platte styling (geen kaart-look meer). */
body.vd-home-page section.u-section-6 .u-accordion-pane {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 4px 12px !important;
}
body.vd-home-page section.u-section-6 .u-accordion-item + .u-accordion-item {
  margin-top: 18px;
}

/* =================================================
   Locatiekaarten onder de Què veure-kaart
   Twee koloms op desktop, één kolom op mobiel.
   Zelfde stijl als de pop-up.
   ================================================= */
.vd-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 16px;
}
@media (max-width: 760px) {
  .vd-locations { grid-template-columns: 1fr; gap: 22px; }
}
.vd-location-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.vd-location-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(30, 158, 183, 0.22);
}
.vd-location-card__photo {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #e8f4f7;
  flex: 0 0 auto;
}
.vd-location-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}
/* Zelfde hover-effect als de galerij-pagina: zachte zoom + radiale overlay */
.vd-location-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 38, 56, 0.55) 0%, rgba(30, 158, 183, 0.35) 70%, rgba(30, 158, 183, 0.05) 100%);
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}
.vd-location-card:hover .vd-location-card__photo img {
  transform: scale(1.08);
}
.vd-location-card:hover .vd-location-card__photo::after {
  opacity: 1;
}
.vd-location-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vd-location-card__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  color: #1e9eb7;
  margin: 0 0 8px;
  font-size: 1.6rem;
  line-height: 1.2;
}
.vd-location-card__text {
  color: #4a6b75;
  margin: 0 0 18px;
  line-height: 1.55;
  flex: 1;
}
.vd-location-card__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #1e9eb7;
  color: #ffffff !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.15s ease;
  align-self: flex-start;
}
.vd-location-card__route:hover {
  background: #1a869b;
  transform: translateY(-1px);
}

/* =================================================
   FAQ-pagina (preguntes / preguntas / faq) — alleen
   VISUELE make-over. Layout en positionering blijven
   exact zoals Nicepage ze plaatste; we kleuren en
   stylen alleen wat zichtbaar is.
   ================================================= */

/* --- Hero-sectie 1: lichte tint i.p.v. beige; titel in serif blauw --- */
body.vd-faq-page section.u-section-1 {
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%) !important;
  background-image: none !important;
}
body.vd-faq-page section.u-section-1 h1.u-text-1,
body.vd-faq-page section.u-section-1 h1.u-text-1 font,
body.vd-faq-page section.u-section-1 h1.u-text-1 span {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
  width: 100% !important;
  max-width: none !important;
}
/* Nicepage plafonneerde het titel-groepje op 338px breed — dat perst de
   subtitel visueel klein. Op de FAQ-pagina zetten we die breedte open. */
body.vd-faq-page section.u-section-1 .u-group-elements-1 {
  width: 100% !important;
  max-width: 720px !important;
  min-height: 0 !important;
  margin: 35px auto !important;
}
/* Gradient-streepje onder Preguntes */
body.vd-faq-page section.u-section-1 h1.u-text-1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 18px;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* Ondertitel-regeltje (JS-injected) onder het streepje — zelfde grootte
   als '.vd-map-subtitle' onder "Què veure". */
body.vd-faq-page section.u-section-1 .vd-faq-subtitle {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  color: #4a6b75 !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

/* Contactpagina 'Contacte' + subtitel-styling zodat 'ie qua opmaak matcht */
body.vd-contact-page section.u-section-1 h2.u-text-1,
body.vd-contact-page section.u-section-1 h2.u-text-1 span,
body.vd-contact-page section.u-section-1 h2.u-text-1 font {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
  width: 100% !important;
  max-width: none !important;
}
body.vd-contact-page section.u-section-1 h2.u-text-1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 18px;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* Ondertitel-regeltje ('Atenció: consulta les preguntes') ook centreren */
body.vd-contact-page section.u-section-1 p.u-text-2 {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
}

/* --- Sectie 2 (accordeon-container): zachte achtergrond --- */
body.vd-faq-page section.u-section-2 {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
  background-image: none !important;
}

/* --- Top-level accordeon (alle 10 categorieën). Nicepage onderscheidt
   ze van sub-vragen doordat de top-level GEEN 'u-text-body-alt-color'
   krijgen. Met :not() pakken we ze allemaal in één keer mee. --- */
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color) {
  background-color: #1e9eb7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.18) !important;
  border: none !important;
  font-family: 'Nunito', sans-serif !important;   /* zelfde als footer-tekst */
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color):hover {
  background-color: #1a869b !important;
  box-shadow: 0 6px 20px rgba(30, 158, 183, 0.28) !important;
}
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color),
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color) * {
  color: #ffffff !important;
}
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color) svg path,
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color) svg {
  fill: #ffffff !important;
}

/* --- Sub-level accordeon (alle losse vragen) — herkennen we aan
   de class 'u-text-body-alt-color' die alleen op vragen voorkomt --- */
body.vd-faq-page .u-accordion-link.u-text-body-alt-color {
  background-color: #f6fbfd !important;
  background-image: none !important;
  color: #1e9eb7 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.08) !important;
  border: none !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
body.vd-faq-page .u-accordion-link.u-text-body-alt-color,
body.vd-faq-page .u-accordion-link.u-text-body-alt-color *,
body.vd-faq-page .u-accordion-link.u-text-body-alt-color span {
  text-decoration: none !important;
}
body.vd-faq-page .u-accordion-link.u-text-body-alt-color:hover {
  background-color: #e8f4f7 !important;
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.16) !important;
}
body.vd-faq-page .u-accordion-link.u-text-body-alt-color,
body.vd-faq-page .u-accordion-link.u-text-body-alt-color * {
  color: #1e9eb7 !important;
}
body.vd-faq-page .u-accordion-link.u-text-body-alt-color svg path,
body.vd-faq-page .u-accordion-link.u-text-body-alt-color svg {
  fill: #1e9eb7 !important;
}

/* Antwoord-panes universeel: wit met zachte border */
body.vd-faq-page .u-accordion-pane {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(30, 158, 183, 0.10);
}
/* Top-level pane (die de sub-accordeon bevat) krijgt iets grotere
   afgeronde hoeken en een buitenste shadow voor de kaart-look */
body.vd-faq-page .u-accordion-pane:has(.u-accordion-link.u-text-body-alt-color) {
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(30, 158, 183, 0.10) !important;
}
body.vd-faq-page .u-accordion-pane p,
body.vd-faq-page .u-accordion-pane .u-rich-text {
  color: #4a6b75 !important;
}
body.vd-faq-page .u-accordion-pane a {
  color: #1e9eb7 !important;
  text-decoration: underline;
}

/* ============================================================
   Accordeon uitklap-pijltjes: rond bolletje + 180° flip actief
   ============================================================ */

/* Basis: het icoon-wrapper wordt een rond bolletje op elke accordeon */
body.vd-faq-page .u-accordion-link .u-accordion-link-icon,
body.vd-home-page section.u-section-6 .u-accordion-link .u-accordion-link-icon,
body.vd-targeta-page .u-accordion-link .u-accordion-link-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, background-color 0.25s ease;
}

/* Top-level (blauwe balk) → wit translucent bolletje */
body.vd-faq-page .u-accordion-link.u-custom-color-33:not(.u-text-body-alt-color) .u-accordion-link-icon,
body.vd-home-page section.u-section-6 .u-accordion-link .u-accordion-link-icon {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Sub-level (lichte balk) + cadeaukaart → blauw translucent bolletje */
body.vd-faq-page .u-accordion-link.u-text-body-alt-color .u-accordion-link-icon,
body.vd-targeta-page .u-accordion-link .u-accordion-link-icon {
  background-color: rgba(30, 158, 183, 0.14) !important;
}

/* Nicepage stopt twee SVGs in de icoon-span: de definitie (u-svg-content)
   en de zichtbare gebruik-versie (u-svg-link met <use>). Verberg de definitie
   zodat we geen dubbel pijltje zien. */
body.vd-faq-page .u-accordion-link .u-accordion-link-icon .u-svg-content,
body.vd-home-page section.u-section-6 .u-accordion-link .u-accordion-link-icon .u-svg-content,
body.vd-targeta-page .u-accordion-link .u-accordion-link-icon .u-svg-content {
  display: none !important;
}

/* Zorg dat de zichtbare SVG binnen 't bolletje netjes past */
body.vd-faq-page .u-accordion-link .u-accordion-link-icon .u-svg-link,
body.vd-home-page section.u-section-6 .u-accordion-link .u-accordion-link-icon .u-svg-link,
body.vd-targeta-page .u-accordion-link .u-accordion-link-icon .u-svg-link {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Actieve (uitgeklapte) accordeon: bolletje 180° draaien = hint dat je 'm
   weer in kunt klappen. Bubbels krijgen iets meer contrast. */
body.vd-faq-page .u-accordion-link.active .u-accordion-link-icon,
body.vd-home-page section.u-section-6 .u-accordion-link.active .u-accordion-link-icon,
body.vd-targeta-page .u-accordion-link.active .u-accordion-link-icon {
  transform: rotate(180deg);
}
body.vd-faq-page .u-accordion-link.u-custom-color-33.active:not(.u-text-body-alt-color) .u-accordion-link-icon,
body.vd-home-page section.u-section-6 .u-accordion-link.active .u-accordion-link-icon {
  background-color: rgba(255, 255, 255, 0.38) !important;
}
body.vd-faq-page .u-accordion-link.u-text-body-alt-color.active .u-accordion-link-icon,
body.vd-targeta-page .u-accordion-link.active .u-accordion-link-icon {
  background-color: rgba(30, 158, 183, 0.28) !important;
}

/* ============================================================
   Strong Viking-stijl: rauwe scheuren op de homepage hero-foto.
   Menubalk blijft de originele Nicepage-look (blauw + wit).
   Implementatie via SVG-background-images (data-URI).
   ============================================================ */


/* ---- Homepage hero: rauwe, donkere scheuren boven en onder ---- */
section.u-section-1[data-image-width="4000"][id="block-2"] {
  position: relative !important;
  overflow: hidden !important;
}

section.u-section-1[data-image-width="4000"][id="block-2"]::before,
section.u-section-1[data-image-width="4000"][id="block-2"]::after {
  content: '' !important;
  position: absolute !important;
  left: -4px !important;
  right: -4px !important;
  height: 48px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) !important;
}

/* TOP-scheur — donker met jagged onderrand die in de foto bijt */
section.u-section-1[data-image-width="4000"][id="block-2"]::before {
  top: -2px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23050810'/><stop offset='55%25' stop-color='%230a1422'/><stop offset='100%25' stop-color='%23162032' stop-opacity='0.7'/></linearGradient></defs><path d='M0 0 L400 0 L400 28 L397 10 L394 36 L391 18 L388 42 L385 22 L382 32 L379 8 L376 40 L373 16 L370 28 L367 6 L364 38 L361 20 L358 32 L355 10 L352 44 L349 22 L346 30 L343 12 L340 40 L337 18 L334 34 L331 8 L328 42 L325 24 L322 30 L319 14 L316 38 L313 20 L310 44 L307 16 L304 30 L301 10 L298 42 L295 22 L292 34 L289 8 L286 40 L283 18 L280 30 L277 12 L274 44 L271 24 L268 32 L265 6 L262 38 L259 20 L256 34 L253 14 L250 42 L247 22 L244 30 L241 10 L238 44 L235 18 L232 34 L229 8 L226 40 L223 22 L220 30 L217 12 L214 42 L211 20 L208 36 L205 6 L202 38 L199 22 L196 32 L193 14 L190 44 L187 18 L184 30 L181 10 L178 42 L175 24 L172 34 L169 8 L166 38 L163 20 L160 32 L157 12 L154 44 L151 22 L148 30 L145 6 L142 40 L139 18 L136 36 L133 14 L130 42 L127 24 L124 30 L121 10 L118 44 L115 20 L112 32 L109 8 L106 38 L103 22 L100 34 L97 12 L94 40 L91 18 L88 30 L85 6 L82 42 L79 24 L76 32 L73 14 L70 44 L67 20 L64 36 L61 8 L58 38 L55 22 L52 30 L49 10 L46 42 L43 18 L40 34 L37 12 L34 40 L31 24 L28 32 L25 6 L22 44 L19 20 L16 30 L13 10 L10 38 L7 22 L4 34 L0 16 Z' fill='url(%23g)'/></svg>") !important;
}

/* BOTTOM-scheur — gespiegeld */
section.u-section-1[data-image-width="4000"][id="block-2"]::after {
  bottom: -2px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'><defs><linearGradient id='g2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23162032' stop-opacity='0.7'/><stop offset='45%25' stop-color='%230a1422'/><stop offset='100%25' stop-color='%23050810'/></linearGradient></defs><path d='M0 48 L400 48 L400 20 L397 38 L394 12 L391 30 L388 6 L385 26 L382 16 L379 40 L376 8 L373 32 L370 20 L367 42 L364 10 L361 28 L358 16 L355 38 L352 4 L349 26 L346 18 L343 36 L340 8 L337 30 L334 14 L331 40 L328 6 L325 24 L322 18 L319 34 L316 10 L313 28 L310 4 L307 32 L304 18 L301 38 L298 6 L295 26 L292 14 L289 40 L286 8 L283 30 L280 18 L277 36 L274 4 L271 24 L268 16 L265 42 L262 10 L259 28 L256 14 L253 34 L250 6 L247 26 L244 18 L241 38 L238 4 L235 30 L232 14 L229 40 L226 8 L223 26 L220 18 L217 36 L214 6 L211 28 L208 12 L205 42 L202 10 L199 26 L196 16 L193 34 L190 4 L187 30 L184 18 L181 38 L178 6 L175 24 L172 14 L169 40 L166 10 L163 28 L160 16 L157 36 L154 4 L151 26 L148 18 L145 42 L142 8 L139 30 L136 12 L133 34 L130 6 L127 24 L124 18 L121 38 L118 4 L115 28 L112 16 L109 40 L106 10 L103 26 L100 14 L97 36 L94 8 L91 30 L88 18 L85 42 L82 6 L79 24 L76 16 L73 34 L70 4 L67 28 L64 12 L61 40 L58 10 L55 26 L52 18 L49 38 L46 6 L43 30 L40 14 L37 36 L34 8 L31 24 L28 16 L25 42 L22 4 L19 28 L16 18 L13 38 L10 10 L7 26 L4 14 L0 32 Z' fill='url(%23g2)'/></svg>") !important;
}

/* Mobiel: ondieper */
@media (max-width: 767px) {
  section.u-section-1[data-image-width="4000"][id="block-2"]::before,
  section.u-section-1[data-image-width="4000"][id="block-2"]::after {
    height: 32px !important;
  }
}

/* =================================================
   Reservar-pagina — content-blok + titel-styling
   ================================================= */
/* Contentkader waar 'Reservar/Book' in staat: licht ivoor i.p.v. blauw */
body.vd-reservar-page section.u-section-1 .u-group-1,
body.vd-reservar-page section.u-section-1 .u-container-style.u-custom-color-33.u-group-1 {
  background-color: #fcfdff !important;
  background-image: none !important;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.12) !important;
  border-radius: 18px !important;
}
/* Nicepage propte de titel in een 324px-groepje binnen het content-blok —
   we openen de inner-containers zodat de titel zich echt centreert over 't
   hele blok en de subtitel + streepje er onder passen. */
body.vd-reservar-page section.u-section-1 .u-group-elements-1,
body.vd-reservar-page section.u-section-1 .u-group-elements-2,
body.vd-reservar-page section.u-section-1 .u-group-elements-3 {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}
/* Titel 'Reservar/Book' in dezelfde stijl als de vier titel-pagina's */
body.vd-reservar-page section.u-section-1 h1.u-text-1,
body.vd-reservar-page section.u-section-1 h1.u-text-1 span,
body.vd-reservar-page section.u-section-1 h1.u-text-1 font {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
  width: 100% !important;
  max-width: none !important;
}
/* Streepje onder de Reservar-titel */
body.vd-reservar-page section.u-section-1 h1.u-text-1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 18px;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* Ondertitel-regeltje (JS-injected) — icoon inline in de tekstflow zodat
   'ie op mobiel netjes bij de tekst blijft zitten (ook bij wrap). */
body.vd-reservar-page section.u-section-1 .vd-reservar-subtitle-wrap {
  text-align: center;
  margin: 0 auto 8px;
  padding: 0 12px;
}
body.vd-reservar-page section.u-section-1 .vd-reservar-subtitle {
  color: #4a6b75 !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}
body.vd-reservar-page section.u-section-1 .vd-reservar-subtitle svg {
  width: 18px;
  height: 18px;
  vertical-align: -0.25em;
  margin-right: 6px;
  color: #1e9eb7;
}
/* De prijs-tekst in het contentkader (was wit op blauw) leesbaar krijgen
   nu de achtergrond licht is */
body.vd-reservar-page section.u-section-1 .u-group-1 p.u-text-3,
body.vd-reservar-page section.u-section-1 .u-group-1 p.u-text-3 span {
  color: #4a6b75 !important;
}
body.vd-reservar-page section.u-section-1 .u-group-1 .u-text-custom-color-1,
body.vd-reservar-page section.u-section-1 .u-group-1 .u-text-custom-color-1 span {
  color: #1a869b !important;
}

/* =================================================
   Reservar-pagina — beschikbaarheidskalender
   ================================================= */
.vd-cal {
  max-width: 920px;
  margin: 0 auto;
  padding: 110px clamp(20px, 4vw, 48px) 56px;   /* zelfde padding als stap 2/3 */
  background: #eeecd5;                          /* zelfde lichtgoud als stap 2/3 */
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(209, 200, 131, 0.30);
}
@media (max-width: 767px) {
  .vd-cal { padding-top: 130px; }
}
.vd-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.vd-cal-title {
  font-family: serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: #1a869b;
  letter-spacing: 0.01em;
}
.vd-cal-nav__btn {
  width: 36px; height: 36px;
  background: #ffffff;
  color: #1e9eb7;
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-nav__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25);
}
.vd-cal-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 0 20px;
  color: #4a6b75;
  font-size: 0.9rem;
}
.vd-cal-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.vd-cal-legend__sw {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 4px;
}
.vd-cal-legend__sw--free {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 158, 183, 0.20);
}
.vd-cal-legend__sw--booked {
  background: #e24b4a;
  box-shadow: 0 2px 6px rgba(226, 75, 74, 0.30);
}
.vd-cal-body {
  display: flex;
  justify-content: center;
}
.vd-cal-month {
  width: 100%;
  max-width: 360px;   /* twee keer 25% kleiner: 640px → 480px → 360px */
}
.vd-cal-month__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.vd-cal-month__title {
  display: inline-block;
  background: #ffffff;
  color: #1a869b;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 8px 22px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  min-width: 180px;
  text-align: center;
}
.vd-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.vd-cal-dayhdr {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1a869b;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(30, 158, 183, 0.10);
  margin-bottom: 4px;
}
.vd-cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  color: #1e9eb7;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(30, 158, 183, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-day:not(.vd-cal-day--empty):not(.vd-cal-day--past):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 158, 183, 0.22);
}
.vd-cal-day--empty {
  background: transparent;
  box-shadow: none;
}
.vd-cal-day--booked {
  background: #e24b4a;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(226, 75, 74, 0.30);
}
.vd-cal-day--booked:hover {
  box-shadow: 0 4px 12px rgba(226, 75, 74, 0.40);
}
.vd-cal-day--past {
  opacity: 0.4;
}
/* Geselecteerde vakantieperiode — goudgeel (Vida Daurada-tint) */
.vd-cal-day--selected {
  background: #d1c883 !important;
  color: #4a3f00 !important;
  box-shadow: 0 2px 6px rgba(209, 200, 131, 0.45) !important;
}
.vd-cal-day--arrival,
.vd-cal-day--departure {
  background: #c4b76a !important;   /* iets donkerder = duidelijk begin/eind */
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(209, 200, 131, 0.55) !important;
}
/* Statusregel onder de kalender */
.vd-cal-status {
  margin: 18px auto 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.10);
  color: #4a6b75;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
  max-width: 720px;   /* smaller dan de kalender — past zelfs de langste
                        datumcombinatie in CA/ES/EN nog binnen */
}
.vd-cal-status__prompt { color: #4a6b75; }
.vd-cal-status__pick {
  color: #2e9c3a;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vd-cal-status__info {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.vd-cal-status__note   { color: #4a6b75; font-weight: 400; }
.vd-cal-status__ok-text { color: #1a869b; }
.vd-cal-status__err    { color: #c81a1a; font-weight: 700; letter-spacing: 0.01em; }

/* Fout-toestand: lichtroze strook met driehoekig alarmsymbooltje */
.vd-cal-status--err {
  background: #fdecea;
  box-shadow: 0 2px 8px rgba(226, 75, 74, 0.20);
}
.vd-cal-status__warn {
  width: 22px;
  height: 22px;
  color: #c81a1a;
  flex-shrink: 0;
}
.vd-cal-status--err .vd-cal-status__reset {
  background: rgba(255, 255, 255, 0.75);
  color: #1e9eb7;
  box-shadow: 0 1px 4px rgba(200, 26, 26, 0.15);
}
.vd-cal-status--err .vd-cal-status__reset:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(200, 26, 26, 0.22);
}
/* Per-veld compact fout-strookje (in stap 2, direct onder pills of dropdown) */
.vd-cal-status--field {
  margin: 8px auto 0;
  padding: 8px 14px;
  max-width: 520px;
  font-size: 0.9rem;
  gap: 8px;
}
.vd-cal-status--field .vd-cal-status__warn {
  width: 18px;
  height: 18px;
}
.vd-cal-status__reset {
  border: none;
  background: #f0f8fa;      /* zichtbare pill i.p.v. transparant */
  color: #1e9eb7;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(30, 158, 183, 0.15);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vd-cal-status__reset:hover {
  background: #dceff5;      /* iets donkerder tint — subtiele hover */
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.25);
}

/* Kies-toestand (aankomst óf vertrek nog uit te kiezen):
   lichtgoudkleurige strook — dezelfde tint als de achtergrond van
   de contactpagina (rgba(238, 236, 213, 1) = #eeecd5). */
.vd-cal-status--pick {
  background: #eeecd5;
  box-shadow: none;   /* zelfde kleur als het frame — shadow was overbodig */
}
.vd-cal-status--pick .vd-cal-status__prompt,
.vd-cal-status--pick .vd-cal-status__note {
  color: #4a6b75;
}
.vd-cal-status--pick .vd-cal-status__pick {
  color: #2e9c3a;   /* groen blijft groen zodat 't opvalt op de gouden strook */
}
.vd-cal-status--pick .vd-cal-status__reset {
  background: rgba(255, 255, 255, 0.7);
  color: #1e9eb7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.vd-cal-status--pick .vd-cal-status__reset:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Succes-toestand: lichtgroene strook, links check + tekst + reset,
   rechts een 'Volgende'-knop. */
.vd-cal-status--ok {
  background: #edf9ea;   /* héél lichtgroen */
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.15);
  justify-content: space-between;
  text-align: left;
  gap: 14px;
}
.vd-cal-status--ok .vd-cal-status__reset {
  background: rgba(255, 255, 255, 0.75);
  color: #1a869b;
  box-shadow: 0 1px 4px rgba(46, 156, 58, 0.12);
}
.vd-cal-status--ok .vd-cal-status__reset:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.20);
}
.vd-cal-status__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vd-cal-status__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.vd-cal-status__price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(74, 107, 117, 0.12);
  color: #4a6b75;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-status__price:hover {
  background: rgba(74, 107, 117, 0.20);
  box-shadow: 0 2px 6px rgba(74, 107, 117, 0.20);
}
.vd-cal-status__price-info-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.8; }

/* Prijsopbouw-modal */
.vd-cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  animation: vd-cal-modal-fade 0.15s ease-out;
}
@keyframes vd-cal-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.vd-cal-modal {
  background: #f7f4e2;            /* lichter goudgeel dan #eeecd5 */
  border-radius: 18px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.vd-cal-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #4a6b75;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.vd-cal-modal__close svg { width: 20px; height: 20px; display: block; }
.vd-cal-modal__close:hover { background: rgba(0, 0, 0, 0.08); }
.vd-cal-modal__breakdown {
  font-family: 'Nunito', sans-serif;
  margin-top: 4px;
}
.vd-cal-modal__line,
.vd-cal-modal__line b {
  color: #1a869b !important;   /* Nicepage's u-custom-color-24 forceerde 'm wit */
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}
.vd-cal-modal__note {
  color: #4a6b75 !important;
  font-weight: 400;
  font-size: 0.9rem;
}
.vd-cal-modal__total,
.vd-cal-modal__total b {
  color: #1a869b !important;
  font-weight: 700;
  font-size: 1.2rem;
  border-top: 1px solid rgba(30, 158, 183, 0.30);
  padding-top: 10px;
  margin-top: 10px;
}
.vd-cal-modal__tax {
  font-family: 'Nunito', sans-serif;
  color: #4a6b75 !important;
  font-style: italic;
  font-size: 0.9rem;
  margin: 20px 0 8px;
  line-height: 1.5;
}
.vd-cal-modal__cancel {
  font-family: 'Nunito', sans-serif;
  color: #2e9c3a !important;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 8px 0 0;
}
.vd-cal-modal__close { color: #4a6b75 !important; }

/* Stap 4 — bedankpagina met betaalinstructies */
.vd-cal-thanks__intro {
  font-family: 'Nunito', sans-serif !important;
  color: #1a869b !important;
  text-align: center;
  font-size: 1rem;
  margin: 24px auto 12px;
  max-width: 520px;
}
/* Kaart + oranje deadline-balk als één afgerond blok */
.vd-cal-thanks__card-wrap {
  max-width: 520px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.15);
  font-family: 'Nunito', sans-serif;
}
.vd-cal-thanks__card {
  background: #ffffff;
  padding: 18px 22px;
}
/* Onderbalk: lichtoranje bg met oranje tekst + klok + countdown */
.vd-cal-thanks__deadline-bar {
  background: #fff1de;
  color: #c26414 !important;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(194, 100, 20, 0.15);
}
.vd-cal-thanks__deadline-bar svg {
  width: 18px;
  height: 18px;
  color: #c26414;
  flex-shrink: 0;
}
.vd-cal-thanks__deadline-lbl,
.vd-cal-thanks__countdown {
  color: #c26414 !important;
}
.vd-cal-thanks__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.vd-cal-thanks__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30, 158, 183, 0.10);
}
.vd-cal-thanks__row:last-child { border-bottom: none; }
.vd-cal-thanks__lbl {
  color: #4a6b75 !important;
  font-size: 0.85rem;
  font-weight: 600;
}
.vd-cal-thanks__val {
  color: #1a869b !important;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.95rem;
  word-break: break-all;
}
.vd-cal-thanks__copy {
  background: #f0f8fa;
  color: #1e9eb7 !important;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vd-cal-thanks__copy:hover { background: #dceff5; }
.vd-cal-thanks__copy--on {
  background: #edf9ea;
  color: #2e9c3a !important;
}
.vd-cal-thanks__after {
  font-family: 'Nunito', sans-serif !important;
  color: #4a6b75 !important;
  font-style: italic;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 4px auto 20px;
  max-width: 520px;
}
.vd-cal-thanks__back-home {
  display: block;
  text-align: center;
  color: #1e9eb7 !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  text-decoration: underline;
  margin-top: 16px;
}
.vd-cal-thanks__back-home:hover { color: #115664 !important; }
@media (max-width: 560px) {
  .vd-cal-thanks__row { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .vd-cal-thanks__copy { justify-self: start; }
}
.vd-cal-status__check {
  width: 22px;
  height: 22px;
  color: #2e9c3a;
  flex-shrink: 0;
}
.vd-cal-status__next {
  border: none;
  background: #2e9c3a;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.30);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-size: 0.95rem;
}
.vd-cal-status__next:hover {
  background: #268d31;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46, 156, 58, 0.40);
}
@media (max-width: 560px) {
  .vd-cal-status--ok { justify-content: center; }
  .vd-cal-status__left { justify-content: center; text-align: center; }
}
.vd-cal-loading {
  text-align: center;
  color: #4a6b75;
  padding: 32px;
  font-size: 1.5rem;
}

/* =================================================
   Reservar-pagina — booking-form (na klik op Volgende)
   Contentkader in dezelfde afmetingen als de kalender,
   met lichtgoudkleurige achtergrond (#eeecd5).
   ================================================= */
/* .vd-cal.vd-cal--form gebruikt nu volledig dezelfde frame-styling als de
   kalender-stap (background/radius/shadow/padding zijn nu al op de base
   .vd-cal-klasse gezet, dus geen aparte overrides meer nodig). */
.vd-cal-form__title {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  color: #1a869b !important;
  letter-spacing: 0.01em;
  text-align: center !important;
  margin: 0 auto 8px !important;
  width: 100% !important;
}
.vd-cal-form__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
.vd-cal-form__subtitle,
.vd-cal-form__subtitle * {
  text-align: center;
  color: #1a869b !important;   /* Nicepage's u-custom-color-33 forceerde 'm wit — override */
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  margin: 14px auto 22px;
  font-style: italic;
}
.vd-cal-status--form { margin: 0 auto 28px; max-width: 720px; }
.vd-cal-form__h2,
.vd-cal-form__h2 * {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #1a869b !important;
  margin: 24px 0 12px;
  text-align: center;
}
/* Guest-pills */
.vd-cal-form__pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vd-cal-form__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #1e9eb7;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 90px;
  justify-content: center;
}
.vd-cal-form__pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25);
}
.vd-cal-form__pill > svg {
  width: 18px;
  height: 18px;
  color: currentColor;
  flex-shrink: 0;
}
.vd-cal-form__pill-icons {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.vd-cal-form__pill-icons svg {
  width: 16px;
  height: 16px;
  color: currentColor;
  flex-shrink: 0;
  margin-left: -3px;   /* subtiele overlap = 'groepje' */
}
.vd-cal-form__pill-icons svg:first-child { margin-left: 0; }
.vd-cal-form__pill--on {
  background: #edf9ea;
  color: #2e9c3a;
  border-color: #2e9c3a;
}
.vd-cal-form__pill--on:hover {
  background: #dff3d9;
}
.vd-cal-form__pill--on svg:first-child {
  color: #2e9c3a;   /* het check-vinkje */
}
.vd-cal-form__pill-num {
  font-weight: 700;
  font-size: 1.05rem;
}
/* Custom nationaliteit-dropdown met SVG-vlaggen */
.vd-cal-form__nat-wrap {
  max-width: 360px;
  margin: 0 auto;
  position: relative;
}
.vd-cal-form__nat-btn {
  width: 100%;
  padding: 12px 40px 12px 18px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #4a6b75;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  position: relative;
}
.vd-cal-form__nat-btn::after {
  content: '▾';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #1e9eb7;
  pointer-events: none;
  font-size: 0.9rem;
}
.vd-cal-form__nat-btn:hover  { box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25); }
.vd-cal-form__nat-btn:focus-visible {
  box-shadow: 0 0 0 2px #1e9eb7, 0 4px 14px rgba(30, 158, 183, 0.25);
}
.vd-cal-form__nat-wrap--on .vd-cal-form__nat-btn {
  background: #edf9ea;
  color: #2e9c3a;
  font-weight: 600;
  box-shadow: 0 0 0 2px #2e9c3a, 0 2px 8px rgba(46, 156, 58, 0.20);
}
.vd-cal-form__nat-wrap--on .vd-cal-form__nat-btn::after {
  color: #2e9c3a;
}
.vd-cal-form__nat-placeholder { color: #4a6b75; opacity: 0.75; }
.vd-cal-form__nat-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vd-cal-form__flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.vd-cal-form__nat-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(30, 158, 183, 0.25);
  z-index: 100;
  padding: 8px 0;
}
.vd-cal-form__nat-grouplabel {
  padding: 10px 18px 4px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #1a869b;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vd-cal-form__nat-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  cursor: pointer;
  color: #4a6b75;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  transition: background 0.1s ease;
}
.vd-cal-form__nat-opt:hover {
  background: #f0f8fa;
  color: #1e9eb7;
}
.vd-cal-form__nat-opt--on {
  background: #edf9ea;
  color: #2e9c3a;
  font-weight: 600;
}
.vd-cal-form__nat-opt--on:hover {
  background: #dff3d9;
  color: #2e9c3a;
}
/* Vinkje voor geselecteerde optie / in de trigger-knop */
.vd-cal-form__nat-btn > .vd-cal-status__check,
.vd-cal-form__nat-opt > .vd-cal-status__check {
  width: 16px;
  height: 16px;
  color: #2e9c3a;
  flex-shrink: 0;
}
/* Actions row */
.vd-cal-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.vd-cal-form__back {
  background: #ffffff;
  color: #1e9eb7;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-form__back:hover {
  background: #f0f8fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25);
}
.vd-cal-form__submit {
  background: #2e9c3a;
  color: #ffffff;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.30);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-form__submit:hover {
  background: #268d31;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46, 156, 58, 0.40);
}
@media (max-width: 560px) {
  .vd-cal-form__actions { justify-content: center; }
}

/* Stap 3 — invulformulier */
.vd-cal-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .vd-cal-form__row { grid-template-columns: 1fr; }
}
.vd-cal-form__input-wrap {
  position: relative;
}
.vd-cal-form__input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #1e9eb7;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}
.vd-cal-form__input-icon svg { width: 18px; height: 18px; }
.vd-cal-form__input {
  width: 100%;
  padding: 12px 44px 12px 44px;   /* ruimte links (icoon) + rechts (vinkje) */
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #4a6b75;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-form__input::placeholder { color: #4a6b75; opacity: 0.6; }
.vd-cal-form__input:hover { box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25); }
.vd-cal-form__input:focus { box-shadow: 0 0 0 2px #1e9eb7, 0 4px 14px rgba(30, 158, 183, 0.25); }
.vd-cal-form__input-wrap--on .vd-cal-form__input {
  background: #edf9ea;
  color: #2e9c3a;
  font-weight: 600;
  box-shadow: 0 0 0 2px #2e9c3a, 0 2px 8px rgba(46, 156, 58, 0.20);
}
.vd-cal-form__input-wrap--on .vd-cal-form__input-icon { color: #2e9c3a; }
/* Groen vinkje rechts in het invulveld — alleen zichtbaar als 't veld gevuld is */
.vd-cal-form__input-check {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #2e9c3a;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.vd-cal-form__input-check svg { width: 18px; height: 18px; }
.vd-cal-form__input-wrap--on .vd-cal-form__input-check { opacity: 1; }

/* Terms-checkbox — samengesteld: [label prefix + vakje] + [link] + [suffix] */
.vd-cal-form__terms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 640px;
  margin: 20px auto 0;
  color: #1a869b;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
}
.vd-cal-form__terms-clickable {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.vd-cal-form__terms-link {
  color: #1e9eb7;
  text-decoration: underline;
  font-weight: 600;
}
.vd-cal-form__terms-link:hover { color: #115664; }
.vd-cal-form__terms input { position: absolute; opacity: 0; pointer-events: none; }
.vd-cal-form__terms-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px #1e9eb7, 0 1px 4px rgba(30, 158, 183, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vd-cal-form__terms-box svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.15s ease; }
.vd-cal-form__terms input:checked + .vd-cal-form__terms-box {
  background: #edf9ea;   /* lichtgroen, zelfde als ingevuld invulveld */
  color: #2e9c3a;         /* vinkje zichtbaar in groen */
  box-shadow: 0 0 0 2px #2e9c3a, 0 2px 8px rgba(46, 156, 58, 0.20);
}
.vd-cal-form__terms input:checked + .vd-cal-form__terms-box svg { opacity: 1; }
.vd-cal-form__terms-text { line-height: 1.4; }

/* =================================================
   Header-items vast aan de bovenkant (Posta7-plaatsing)
   =================================================
   Logo-kader, taalstoplicht, Reservar-knop en menuknop zitten met hun
   kader tegen de bovenrand van de menubalk: platte bovenhoeken, afgeronde
   onderhoeken. Het optillen zelf gebeurt in _zoom.js (vdFlushHeaderItems),
   omdat Nicepage de verticale positie per breakpoint met marges regelt. */

/* --- Logo: teal logo in een wit kader --- */
.u-header a.u-logo,
.u-header a.u-logo.u-image-1,
header.u-header .u-logo {
  background: #ffffff !important;
  padding: 8px 14px 10px !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.18);
  box-sizing: border-box;
}

/* --- Reservar-knop: kleuren omgedraaid (wit kader, teal tekst), platte
       bovenhoeken en een gewone afronding onder — niet de volle pil-ronding. */
.u-header a.u-btn-1 {
  background-color: #ffffff !important;
  color: #1e9eb7 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.18);
}
/* Hover keert 'm om naar de oude staat: teal vlak met witte tekst. */
.u-header a.u-btn-1:hover,
.u-header a.u-btn-1:focus {
  background-color: #1e9eb7 !important;
  color: #ffffff !important;
}
.u-header a.u-btn-1 .vd-btn-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}

/* --- Menuknop: teal hamburger in een wit kader.
       width:auto haalt Nicepage's vaste 48px content-breedte weg, waardoor
       het icoon links in het kader hing met witruimte rechts. --- */
.u-header .u-hamburger-link {
  background: #ffffff !important;
  width: auto !important;
  padding: 11px 10px 13px !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.18);
  box-sizing: content-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.u-header .u-hamburger-link .vd-hamburger-svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: #1e9eb7;
}

/* Items die door JS zijn opgetild — relatief verschoven, dus geen invloed
   op de flow van de rest van de balk. */
.vd-header-flush {
  position: relative;
}

/* Telefoonbreedte: geen ruimte voor logo + stoplicht + Reservar + menuknop
   op één rij. Het stoplicht hangt dan als los kadertje onder het logo en is
   dus rondom afgerond in plaats van alleen onderaan. */
.vd-lang-balls--dropped {
  border-radius: 16px !important;
}

/* Nicepage hangt een leeg ::after van 24px achter de hamburger-link (zijn
   eigen icoon-plek). Nu we het icoon zelf als SVG plaatsen, duwt dat het
   icoon uit het midden en maakt het kader onnodig breed. */
.u-header .u-hamburger-link::after {
  display: none !important;
}

/* De span om het knop-icoon zet color:#fff, dus currentColor gaf een wit —
   en dus onzichtbaar — icoon op het nieuwe witte vlak. Expliciet teal. */
.u-header a.u-btn-1 .vd-btn-icon {
  stroke: #1e9eb7 !important;
}
.u-header a.u-btn-1:hover .vd-btn-icon,
.u-header a.u-btn-1:focus .vd-btn-icon {
  stroke: #ffffff !important;
}

/* =================================================
   Gelijke hoogte voor de drie pills in de header
   =================================================
   Taalstoplicht, Reservar-knop en menuknop hadden elk hun eigen hoogte
   (35 / 43 / 48 px), wat een rommelige onderrand gaf. Eén hoogte voor alle
   drie; de verticale padding regelt de rest. */
.vd-lang-balls,
.u-header a.u-btn-1,
.u-header .u-hamburger-link {
  height: 46px !important;
  box-sizing: border-box !important;
}
.vd-lang-balls {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
.u-header .u-hamburger-link {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Nicepage geeft de knop display:table, en daarbij geldt 'height' alleen als
   minimum — de knop bleef zo 47px door de regelhoogte van het icoon. Als
   flexbox wordt de hoogte wel exact aangehouden. width:fit-content houdt 'm
   net als een table om z'n inhoud heen, zodat de plaatsing gelijk blijft;
   de gap vervangt de witruimte tussen icoon en tekst die in flexbox wegvalt. */
.u-header a.u-btn-1 {
  display: flex !important;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* =================================================
   Uitklapmenu: wit met het kleurverloop uit de huisstijl
   =================================================
   Kleuren afgelezen uit de aangeleverde afbeelding: teal (#2da4bc) in de
   linkeronderhoek naar wit rechtsboven. In die vierkante afbeelding is wit
   bereikt op 75% van de verlooplijn — dat is ruwweg 1,06x de bakbreedte.
   Het menupaneel is smal en hoog (256 x ~870), dus dezelfde percentages
   zouden het hele paneel teal maken. De stops zijn daarom teruggerekend
   naar diezelfde afstand-in-paneelbreedtes: wit op 30%. Zo blijft het
   paneel wit waar de menu-items staan, met de teal als hoekwassing.
   Nicepage zet het paneelvlak op een ::before, dus daar moet het op. */
.u-sidenav::before,
.u-sidenav.u-sidenav-1::before {
  background-color: transparent !important;
  background-image: linear-gradient(
      to top right,
      #2da4bc 0%,
      #85cad8 7.5%,
      #dff1f4 15%,
      #ffffff 30%) !important;
  opacity: 1 !important;
}

/* Menu-onderwerpen teal in plaats van wit */
.u-sidenav .u-nav-link,
.u-sidenav a.u-button-style {
  color: #1e9eb7 !important;
}
/* Sluit-kruisje teal */
.u-sidenav .u-menu-close,
.u-menu-close-1,
.u-sidenav .u-menu-close svg,
.u-menu-close-1 svg {
  color: #1e9eb7 !important;
  fill: #1e9eb7 !important;
}

/* Menu-iconen: het zijn witte PNG's, dus onzichtbaar op het lichte vlak.
   We gebruiken het plaatje als masker en vullen het met teal; de <img>
   zelf blijft staan (visibility:hidden) zodat het vakje z'n maat houdt. */
.u-sidenav .vd-menu-icon {
  display: inline-block;
  background-color: #1e9eb7;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.u-sidenav .vd-menu-icon img {
  visibility: hidden;
}

/* Welkomsttekst onderin het menu teal. De losse spans dragen inline
   styles (waaronder één met color:#115664), vandaar !important op alles
   binnen de alinea. */
.u-sidenav .u-text-1,
.u-sidenav .u-text-1 *,
.u-sidenav .u-group-elements-1 .u-text,
.u-sidenav .u-group-elements-1 .u-text * {
  color: #1e9eb7 !important;
}

/* Nicepage legt een TWEEDE teal vlak over het menu: naast .u-sidenav::before
   krijgt ook de binnenste container een ::before met background-color
   #1e9eb7 (regel '.u-custom-color-33 > .u-inner-container-layout:before' in
   nicepage-site.css). Die laag dekt het verloop hierboven volledig af, dus
   die moet weg — anders blijft het paneel egaal teal. */
.u-sidenav > .u-inner-container-layout::before,
.u-sidenav .u-inner-container-layout::before,
.u-sidenav.u-custom-color-33 > .u-inner-container-layout::before {
  display: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =================================================
   Uitklapmenu: actief en hover als in het bottom-menu
   =================================================
   Zelfde principe als .vd-bottom-nav__item: licht-grijs pilletje met
   donkere tekst en donker icoon, zowel bij hover als op de pagina waar je
   staat. Selector is net zo specifiek als Nicepage's
   '.u-menu.u-offcanvas .u-sidenav .u-nav-link', anders wint diens
   padding:0 !important van de pil-padding. */
.u-menu.u-offcanvas .u-sidenav .u-nav-link,
.u-sidenav .u-nav-link {
  border-radius: 14px;
  padding: 7px 14px !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.u-menu.u-offcanvas .u-sidenav .u-nav-link:hover,
.u-menu.u-offcanvas .u-sidenav .u-nav-link:focus,
.u-menu.u-offcanvas .u-sidenav .u-nav-link:active,
.u-menu.u-offcanvas .u-sidenav .u-nav-link.is-active,
.u-sidenav .u-nav-link:hover,
.u-sidenav .u-nav-link:focus,
.u-sidenav .u-nav-link:active,
.u-sidenav .u-nav-link.is-active {
  background-color: #eef0f2 !important;
  color: #1b2a2e !important;
  text-decoration: none !important;
}
/* Het icoon is een masker gevuld met background-color, dus die mee donker */
.u-sidenav .u-nav-link:hover .vd-menu-icon,
.u-sidenav .u-nav-link:focus .vd-menu-icon,
.u-sidenav .u-nav-link:active .vd-menu-icon,
.u-sidenav .u-nav-link.is-active .vd-menu-icon {
  background-color: #1b2a2e;
}

/* =================================================
   Hetzelfde hoekverloop in het bottom-menu en het logokader
   =================================================
   Stops zijn per element teruggerekend naar de kleinste maat van dat
   element, zodat de teal een hoekwassing blijft en niet het hele vlak
   overneemt (net als bij het uitklapmenu). */

/* Bottom-menu: brede, lage pil — verloop in de linkeronderhoek. De stops
   staan in rgba zodat de doorzichtigheid (en dus de blur erachter) blijft. */
.vd-bottom-nav__inner {
  background-image: linear-gradient(
      to top right,
      rgba(45, 164, 188, 0.88) 0%,
      rgba(133, 202, 216, 0.88) 7%,
      rgba(223, 241, 244, 0.88) 15%,
      rgba(255, 255, 255, 0.88) 30%) !important;
}

/* Logokader: kleiner en bijna vierkant — verloop blijft in de hoek zodat
   het teal logo op wit blijft staan. */
.u-header a.u-logo,
.u-header a.u-logo.u-image-1,
header.u-header .u-logo {
  background-image: linear-gradient(
      to top right,
      #2da4bc 0%,
      #85cad8 10%,
      #dff1f4 22%,
      #ffffff 42%) !important;
}

/* VI-embleem onderin het menu dichter boven de welkomsttekst. Nicepage
   trekt het logo met een negatieve marge (-137px) boven de alinea; die
   alinea begint bovendien met een lege regel (&nbsp;<br>), waardoor er
   ruim 30px lucht tussen embleem en 'Benvinguts!' zat. We schuiven het
   embleem relatief omlaag in plaats van die marge te herschrijven, zodat
   het onafhankelijk blijft van Nicepage's eigen marge per breakpoint. */
.u-sidenav .u-image-2 {
  position: relative;
  top: 22px;
}

/* Hero-kop op de homepage ('Vista panoràmica / Piscina privada' en de ES/EN
   varianten) wit in plaats van het goud van u-text-custom-color-1. De
   selector is op de hero-sectie zelf gezet (#block-2 + de hero-afbeelding),
   want elke pagina heeft een eigen 'section.u-section-1 h1.u-text-1'. */
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1,
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1 span,
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1 font {
  color: #ffffff !important;
}

/* =================================================
   Filterknoppen op 'Què fer'
   =================================================
   Staan onder de ondertitel en gebruiken dezelfde vormtaal als het
   bottom-menu: één zwevende witte pil met daarin de knoppen, icoon boven
   het label, en een licht-grijs pilletje met donkere tekst voor de actieve
   staat. Standaard staan beide knoppen aan (alles zichtbaar). */
.vd-filters {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  margin: 18px auto 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 8px 24px rgba(15, 25, 60, 0.10),
    0 2px 6px rgba(15, 25, 60, 0.06);
}
.vd-filter {
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: #1e9eb7;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.vd-filter__icon {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: currentColor;
}
.vd-filter__icon svg {
  width: 100%; height: 100%;
  display: block;
  fill: currentColor;
}
.vd-filter__label {
  white-space: nowrap;
  color: currentColor;
}
@media (hover: hover) {
  .vd-filter:hover { background: #eef0f2; color: #1b2a2e; }
}
.vd-filter:focus-visible { background: #eef0f2; color: #1b2a2e; }
.vd-filter.is-active { background: #eef0f2; color: #1b2a2e; }

/* Verborgen kaarten in het raster onder de kaart */
.vd-location-card[hidden] { display: none !important; }

/* =================================================
   Reserveringskalender op de homepage
   =================================================
   Dezelfde kalender als op de reservar-pagina, maar onder de hero-kop en
   gecentreerd. De forse bovenruimte die daar nodig is (het titelblok schuift
   er overheen) hoeft hier niet. */
.vd-cal--home {
  margin-left: auto;
  margin-right: auto;
  margin-top: 28px;
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}
@media (max-width: 767px) {
  .vd-cal--home { padding-top: 24px; }
}

/* Weekdagkoppen (Dl Dt Dc Dj Dv Ds Dg): alleen de letters, zonder kadertje. */
.vd-cal-dayhdr {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Goudkleurige kaart sluit strak om het maandraster. De zijpadding stond op
   clamp(20px, 4vw, 48px) — die rekent met de vensterbreedte, niet met de
   kaart, dus bleef er op ruimere schermen lucht naast het raster staan.
   Nu vast op 24px: 360px raster + 2 × 24px = 408px. Geldt ook voor de
   formulierstappen, zodat alle stappen even breed blijven. */
.vd-cal {
  max-width: 408px;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Kader achter de maandnaam (Novembre 2026) weg, net als bij de weekdagen. */
.vd-cal-month__title {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =================================================
   Boekingsformulier passend op de smallere kaart
   =================================================
   De kaart is overal 480px; in plaats van 'm voor de formulierstappen weer
   te verbreden, gaat het formulier zelf een slag kleiner. Zo houden de
   kalender en de drie stappen dezelfde breedte. */
.vd-cal-form__title {
  font-size: clamp(1.6rem, 5.5vw, 2rem) !important;
}
.vd-cal-form__subtitle,
.vd-cal-form__subtitle * {
  font-size: 0.9rem !important;
  margin: 10px auto 18px !important;
}
/* Nicepage duwde hier 48px doorheen, waardoor 'Nombre de persones' over twee
   regels brak. De in dit bestand bedoelde maat krijgt nu voorrang. */
.vd-cal-form__h2,
.vd-cal-form__h2 * {
  font-size: 1.1rem !important;
  margin: 18px 0 10px !important;
}
.vd-cal-status--form {
  max-width: none;
  margin-bottom: 20px;
}

/* Gasten-pills */
.vd-cal-form__pills { gap: 8px; }
.vd-cal-form__pill {
  font-size: 0.9rem;
  padding: 8px 15px;
  min-width: 72px;
  gap: 6px;
}
.vd-cal-form__pill-icons svg { width: 13px; height: 13px; }

/* Nationaliteit */
.vd-cal-form__nat-btn {
  font-size: 0.9rem;
  padding: 10px 34px 10px 14px;
}
.vd-cal-form__nat-menu   { font-size: 0.9rem; }
.vd-cal-form__nat-opt    { padding: 8px 14px; }

/* Contactvelden: één kolom — twee naast elkaar wordt te krap in 480px, en
   de invoervelden hebben links en rechts ruimte nodig voor icoon en vinkje. */
.vd-cal-form__row {
  grid-template-columns: 1fr;
  gap: 10px;
}
.vd-cal-form__input {
  font-size: 0.9rem;
  padding: 10px 38px;
}
.vd-cal-form__input-icon svg,
.vd-cal-form__input-check svg { width: 16px; height: 16px; }

/* Voorwaarden + knoppen */
.vd-cal-form__terms { font-size: 0.85rem; }
.vd-cal-form__back,
.vd-cal-form__submit {
  font-size: 0.85rem;
  padding: 10px 18px;
}

/* Aankomst en vertrek elk op een eigen regel in de statusbalk. Eerder stond
   het als één doorlopende zin met een pijl ertussen; op de smallere kaart
   brak die precies verkeerd af, met 'novembre (20 nits)' los onder Sortida. */
.vd-cal-status__line {
  display: block;
}

/* Hero-kop op de homepage: een slag kleiner en gecentreerd boven de
   reserveringskalender, in plaats van rechts uitgelijnd op volle grootte.
   Nicepage zet de uitlijning via .u-align-right op het element zelf, dus
   text-align moet met voorrang. */
section.u-section-1[data-image-width="4000"][id="block-2"] h1.u-text-1 {
  font-size: clamp(1.9rem, 5vw, 2.4rem) !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}