/* 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 {
  /* 90px header + lucht boven de titel. Onderaan geen ruimte meer: de
     landkaart staat nu onderin en loopt tot tegen de footer. */
  padding: 118px 0 0;
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}
.vd-map-intro {
  max-width: 720px;
  /* 26px, de vaste afstand tussen een ondertitel en het kader eronder */
  margin: 0 auto 26px;
  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;
}
img.vd-404__vlag {
  display: inline-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;
  /* Nicepage zet met "h2:not(.u-subtitle)" élke h2 in blokletters. Dat
     is hier een hele zin, en een zin in kapitalen leest slecht. Deze
     regel is specifieker, dus hij wint zonder !important. */
  text-transform: none;
}
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: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  /* Bovenaan niets: de 26px onder de ondertitel doet dat al. Onderaan
     lucht tussen de laatste kaart en de landkaart. */
  margin: 0 auto 64px;
  padding: 0 16px;
}
@media (max-width: 760px) {
  /* Ook op een telefoon twee naast elkaar: de kaartjes tonen alleen nog
     een naam en een knop, dus ze hebben weinig breedte nodig. */
  .vd-locations { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* De pagina van één plek heeft geen kaartje. De titel staat al als
   paginakop, dus een kaartje met diezelfde titel en diezelfde foto
   erin zou alles dubbel tonen. De beschrijving en de knop staan hier
   gewoon in de pagina, in dezelfde kolombreedte als de ondertitel. */
.vd-locatie-tekst {
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 16px;
  text-align: center;
}
/* p.-prefix nodig: Nicepage heeft een regel "p:not(.u-text-variant)"
   die deze tekst anders wit maakt. */
p.vd-locatie-beschrijving {
  color: #4a6b75 !important;
  font-size: 18px !important;
  line-height: 1.8;
  margin: 0 0 28px;
}
/* Hier is wél breedte, dus naast elkaar. */
.vd-locatie-tekst .vd-routes {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

/* De foto van de plek, paginabreed, onder de tekst en boven de
   landkaart. Staat alleen op de pagina van één plek, en alleen als er
   een echte foto is.

   Hoogte op auto: de foto houdt zijn eigen verhouding en wordt dus
   nergens bijgesneden. Elke plek heeft een foto met zijn eigen maten. */
.vd-locatie-hero {
  display: block;
  width: 100%;
  height: auto;
  /* Niet hoger dan 1080px. Pas boven die hoogte wordt er iets van de
     boven- en onderkant afgehaald; daaronder blijft de foto heel. */
  max-height: 1080px;
  object-fit: cover;
  object-position: center;
}
.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);
}
/* Op het overzicht is dit een <a> en op de pagina van één plek een
   <div>. Vandaar display:block — een link is van zichzelf inline en
   trekt zich dan niets van de hoogte aan. */
.vd-location-card__photo {
  display: block;
  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;
}
/* De naam is een link, maar hoort er niet als een link uit te zien:
   dezelfde kleur als de kop en geen streepje eronder. */
.vd-location-card__naamlink,
.vd-location-card__naamlink:hover,
.vd-location-card__naamlink:focus {
  color: inherit !important;
  text-decoration: none;
}
.vd-location-card__naamlink:hover { color: #1a869b !important; }
.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);
}
/* Plekken waar je alleen te voet komt hebben meer dan één route, elk
   met een regeltje eronder waar je vandaan rijdt. Deze klassen staan
   los van het kaartje: ze worden ook gebruikt in het venstertje bij
   een speld op de kaart. Daar is weinig breedte, dus onder elkaar is
   de standaard; op de pagina van een plek staan ze naast elkaar. */
.vd-routes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.vd-routeblok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vd-routebij {
  font-style: italic;
  color: #4a6b75;
  font-size: 0.88rem;
  line-height: 1.3;
}
/* Op het overzicht staat de knop altijd rechtsonder in het kaartje.
   De kaartjes in een rij zijn even hoog, dus de knoppen liggen op één
   lijn, ook als de ene naam over twee regels loopt en de andere niet.
   Op de pagina van één plek blijft de knop linksonder onder de tekst. */
.vd-locations:not(.vd-locations--een) .vd-location-card__route {
  margin-top: auto;
  align-self: flex-end;
}
/* Twee kaartjes naast elkaar op een telefoon zijn elk maar zo'n 160px
   breed. Op het overzicht staat daar alleen een naam en een knop in,
   dus daar mag alles een maatje kleiner. De pagina van één plek
   (--een) houdt de gewone maten. */
@media (max-width: 760px) {
  .vd-locations:not(.vd-locations--een) .vd-location-card__photo { height: 130px; }
  .vd-locations:not(.vd-locations--een) .vd-location-card__body { padding: 14px 14px 16px; }
  .vd-locations:not(.vd-locations--een) .vd-location-card__title { font-size: 1.1rem; }
  .vd-locations:not(.vd-locations--een) .vd-location-card__route {
    padding: 9px 14px;
    font-size: 0.8rem;
    gap: 6px;
  }
}

/* =================================================
   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 */
  /* Zelfde vormtaal als het cadeaubonformulier en de locatiekaarten:
     lichte tealtint met een zachte tealschaduw, in plaats van het
     zandkleurige kader van Nicepage. */
  background: #f6fbfd;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
}
@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);
}
/* Terug vóór deze maand kan niet: daar valt niets te boeken. De knop
   blijft staan zodat de maandnaam in het midden blijft, maar hij is dof
   en reageert nergens meer op. */
.vd-cal-nav__btn--uit,
.vd-cal-nav__btn--uit:hover {
  color: #c3d6db;
  background: #f4f8f9;
  box-shadow: none;
  cursor: default;
  transform: none;
}
.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 — groen, net als elke andere keuze in
   de reserveringsstappen (gastenaantal, nationaliteit, bezorgwijze). */
.vd-cal-day--selected {
  background: #dff3d9 !important;
  color: #226b2b !important;
  box-shadow: 0 2px 6px rgba(46, 156, 58, 0.25) !important;
}
.vd-cal-day--arrival,
.vd-cal-day--departure {
  background: #2e9c3a !important;   /* donkerder = duidelijk begin/eind */
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.45) !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: #f6fbfd;
  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;
}
/* Omhoog openklappen wanneer er onder de knop te weinig ruimte is.
   Het formulier staat op de homepage onderin de hero, en die knipt alles
   af wat erbuiten valt — dat afknippen houdt de gescheurde randen op hun
   plek, dus dat laten we staan. */
.vd-cal-form__nat-menu--omhoog {
  top: auto;
  bottom: calc(100% + 8px);
}
.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);
}
/* Regel onder de bevestigingsknop: bevestigen zet de betaalklok in gang. */
p.vd-cal-form__note {
  margin: 12px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #4a6b75;
}

/* Geruststelling eronder: gratis annuleren. Zelfde groen als in het
   prijsvenstertje, zodat het als één boodschap herkenbaar blijft. */
p.vd-cal-form__cancel {
  margin: 6px 0 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #2e9c3a;
}
/* Deels terug is goed nieuws, maar minder dan gratis. Teal in plaats van
   groen, zodat de twee niveaus visueel uit elkaar te houden zijn. */
p.vd-cal-form__cancel--deels { color: #1a869b; }
.vd-cal-modal__cancel--deels   { color: #1a869b !important; }

.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; }

/* Telefoonveld: links het landnummer uit een lijst, rechts het nummer.
   Het landnummer blijft smal, zodat het nummerveld zelf de ruimte houdt
   die het in de rij al had. */
.vd-cal-form__tel {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 8px;
  align-items: start;
}
.vd-cal-form__tel-kies { position: relative; }
.vd-cal-form__tel-btn {
  width: 100%;
  padding: 12px 24px 12px 14px;
  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: 8px;
  text-align: left;
  position: relative;
}
.vd-cal-form__tel-btn::after {
  content: '▾';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #1e9eb7;
  pointer-events: none;
  font-size: 0.9rem;
}
.vd-cal-form__tel-btn:hover { box-shadow: 0 4px 14px rgba(30, 158, 183, 0.25); }
.vd-cal-form__tel-btn:focus-visible {
  box-shadow: 0 0 0 2px #1e9eb7, 0 4px 14px rgba(30, 158, 183, 0.25);
}
.vd-cal-form__tel-kies--on .vd-cal-form__tel-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__tel-kies--on .vd-cal-form__tel-btn::after { color: #2e9c3a; }
.vd-cal-form__tel-code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* De lijst is breder dan het knopje: er moet een landnaam in passen. */
.vd-cal-form__tel-menu {
  right: auto;
  min-width: 290px;
  max-width: min(360px, calc(100vw - 32px));
}
.vd-cal-form__tel-menu .vd-cal-form__nat-opt { gap: 8px; }
.vd-cal-form__tel-optcode {
  margin-left: auto;
  padding-left: 10px;
  color: #1a869b;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.vd-cal-form__nat-opt--on .vd-cal-form__tel-optcode { color: #2e9c3a; }
/* Het nummerveld heeft links het telefoonicoontje en rechts het vinkje;
   dat is de gewone pil, dus daar hoeft niets voor te wijzigen. */
@media (max-width: 420px) {
  .vd-cal-form__tel { grid-template-columns: 104px 1fr; }
  .vd-cal-form__tel-btn { padding-left: 11px; font-size: 0.95rem; }
}

/* Het vinkje voor de tegoedbon staat boven de voorwaarden en heeft
   dezelfde vorm; het veld eronder is een gewone pil. */
.vd-cal-form__bon {
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 18px auto 0;
  color: #1a869b;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
}
.vd-cal-form__bonveld {
  max-width: 640px;
  margin: 10px auto 0;
}

/* De oude prijs in de prijsopbouw, doorgestreept omdat er een
   tegoedbon vanaf gaat. */
.vd-cal-modal__oud {
  color: #8aa4ad;
  text-decoration-thickness: 2px;
}
.vd-cal-modal__bon b { color: #2e9c3a; }

/* 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; }
/* Het eigen vakje hierboven komt in de plaats van het aanvinkhokje van
   de browser; dat laatste blijft bestaan voor toetsenbord en
   schermlezer, maar is niet te zien. Geldt voor de voorwaarden en voor
   de tegoedbon, die hetzelfde vakje gebruikt. */
.vd-cal-form__terms input,
.vd-cal-form__bon 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,
.vd-cal-form__bon 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,
.vd-cal-form__bon 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;
  /* Zonder deze twee regels tekent de browser het verloop alleen bínnen
     de rand (background-origin staat standaard op padding-box) en vult
     hij de randstrook met een herhaling van het verloop. Daar is dat wit,
     dus er liep een haarlijntje wit onderlangs de teal hoek. Nu loopt het
     verloop door tot aan de buitenrand en herhaalt het niet. */
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* 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; }

p.vd-cal-form__note { font-size: 0.78rem; }
p.vd-cal-form__cancel { font-size: 0.78rem; }

/* 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,
.vd-cal-form__bon { 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;
}

/* Turnstile-widget. Staat in 'interaction-only', dus normaal gesproken is
   dit blokje leeg en neemt het geen ruimte in. Alleen als Cloudflare aan
   de bezoeker twijfelt verschijnt er een vinkje. */
.vd-turnstile-host {
  display: flex;
  justify-content: center;
}
.vd-turnstile-host:not(:empty) {
  margin: 14px 0;
}

/* =================================================
   Kalenderraster bestand tegen brede dagkoppen
   =================================================
   Chrome vertaalt de pagina automatisch voor bezoekers met een andere
   taalinstelling. De Catalaanse afkorting 'DC' werd zo 'WOENSDAG', en
   omdat 'repeat(7, 1fr)' eigenlijk 'minmax(auto, 1fr)' betekent, kan een
   kolom niet smaller worden dan z'n inhoud. Eén lang woord duwde het hele
   raster buiten de gouden kaart.
   Met minmax(0, 1fr) mogen de kolommen wél krimpen; het label wordt dan
   afgekapt in plaats van dat de lay-out breekt. */
.vd-cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.vd-cal-dayhdr {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}

/* =================================================
   Cadeaubonpagina — zelfde opbouw als 'Fotos' en 'Què fer'
   -------------------------------------------------
   Nicepage leverde deze pagina met de sfeerfoto als sectie-achtergrond
   en alle inhoud in een teal blok. Dat week af van de rest van de site.
   Nu: rustig titelblok, sfeerfoto paginabreed, inhoud in een wit
   zwevend kader — dezelfde vormtaal als de locatiekaarten en de
   fotogalerij.
   ================================================= */

/* Titelblok, identiek aan dat van de fotopagina */
.vd-giftcard-intro {
  /* 90px header + lucht boven de titel; onderlangs 26px, de vaste
     afstand tussen een ondertitel en het kader eronder. Het kader zelf
     heeft daarom geen ruimte meer aan de bovenkant. */
  padding: 118px 16px 26px;
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}
.vd-giftcard-intro__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.vd-giftcard-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-giftcard-intro__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* p.-prefix nodig: Nicepage heeft een regel "p:not(.u-text-variant)" die
   deze tekst anders wit maakt, en die weegt zwaarder dan een losse klasse. */
p.vd-giftcard-intro__subtitle {
  color: #115664 !important;
  font-size: 18px !important;
  line-height: 1.8;
  margin: 0;
}

/* De sfeerfoto over de volle breedte, onderaan de pagina net boven de
   footer. De afbeelding zelf wordt per pagina ingesteld, zodat elke
   taal haar eigen versie laadt.

   Hij stond eerst tussen de titel en het kader in, en werd toen 30px
   omhoog getrokken en aan de bovenkant bijgesneden. Nu hij onderaan
   staat is dat niet meer nodig en is de foto in zijn geheel te zien. */
.vd-giftcard-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: 100% auto;      /* volle breedte, niets bijgesneden */
  background-position: center bottom;
  background-repeat: no-repeat;
  display: block;
}

/* De oude hero-sectie hield alleen nog de titel vast; die staat nu in
   het titelblok hierboven. */
body.vd-giftcard-page section.u-section-1 {
  display: none !important;
}

/* Inhoud in een wit zwevend kader in plaats van het teal blok.
   Schaduw en ronding komen overeen met .vd-location-card. */
body.vd-giftcard-page section.u-section-2 {
  background-image: none !important;
  background-color: #ffffff !important;
  padding: 0 0 64px !important;
}
/* Nicepage gaf het vel een vaste hoogte mee die hoorde bij de oude
   opmaak — ruim 600px meer dan het kader nodig heeft. Op een telefoon
   viel dat weg omdat het kader daar hoger is dan het vel; op een breed
   scherm stond er een gat tussen het kader en de foto eronder. */
body.vd-giftcard-page section.u-section-2 .u-sheet {
  min-height: 0 !important;
  height: auto !important;
}
body.vd-giftcard-page section.u-section-2 .vd-bg-zoom {
  display: none !important;
}
body.vd-giftcard-page .u-group-1,
body.vd-giftcard-page .u-group-1 > .u-container-layout {
  background-color: #ffffff !important;
  background-image: none !important;
}
body.vd-giftcard-page .u-group-1 {
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15) !important;
  /* Nicepage gaf het kader 9px bovenmarge mee; die kwam bovenop de
     26px van het titelblok. De 60px ondermarge kwam bovenop de ruimte
     die de sectie zelf al onder het kader laat. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Het formulierblok zat in een tweede teal kader. Een wit kader in een
   wit kader oogt rommelig, dus dit wordt een rustige tint eronder. */
body.vd-giftcard-page .u-group-2 {
  background-color: #f6fbfd !important;
  background-image: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Tekst stond wit tegen teal; op wit moet dat donker worden. */
body.vd-giftcard-page .u-group-1,
body.vd-giftcard-page .u-group-1 p,
body.vd-giftcard-page .u-group-1 h1,
body.vd-giftcard-page .u-group-1 h2,
body.vd-giftcard-page .u-group-1 h3,
body.vd-giftcard-page .u-group-1 h5,
body.vd-giftcard-page .u-group-1 label,
body.vd-giftcard-page .u-group-1 blockquote,
body.vd-giftcard-page .u-group-1 span {
  color: #1b2a2e;
}
/* De accordeonbalk blijft een donkerblauwe balk; daar hoort witte tekst
   bij. Zonder deze regel erft de span erin de donkere kleur hierboven. */
body.vd-giftcard-page .u-group-1 .u-accordion-link,
body.vd-giftcard-page .u-group-1 .u-accordion-link * {
  color: #ffffff !important;
}
/* Deze link was goudkleurig voor leesbaarheid op teal; op wit verdwijnt
   hij bijna. */
body.vd-giftcard-page .u-group-1 a.u-button-link {
  color: #1a869b !important;
}
/* De knop was lichtgroen met witte tekst: nauwelijks te lezen. Nu het
   groen dat ook op het reserveringsformulier staat. */
body.vd-giftcard-page .u-group-1 .u-btn-step-next,
body.vd-giftcard-page .u-group-1 .u-btn-submit {
  background-color: #2e9c3a !important;
}

/* De uitklapbalk van de uitleg had nog de Nicepage-stijl. Nu dezelfde
   vormtaal als de uitklappers op de vragenpagina: teal balk met witte
   tekst, en een wit paneel eronder. */
body.vd-giftcard-page .u-group-1 .u-accordion-link {
  background-color: #1e9eb7 !important;
  background-image: none !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;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.vd-giftcard-page .u-group-1 .u-accordion-link:hover {
  background-color: #1a869b !important;
  box-shadow: 0 6px 20px rgba(30, 158, 183, 0.28) !important;
}
body.vd-giftcard-page .u-group-1 .u-accordion-link svg,
body.vd-giftcard-page .u-group-1 .u-accordion-link svg path {
  fill: #ffffff !important;
}
body.vd-giftcard-page .u-group-1 .u-accordion-pane {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(30, 158, 183, 0.10) !important;
}

/* Het formulierblok staat bovenaan en sluit het kader daar af: geen
   strook wit meer boven het blok. De bovenste hoeken volgen daarom de
   ronding van het kader zelf (20px) in plaats van de eigen 14px. */
body.vd-giftcard-page .u-group-1 > .u-container-layout {
  padding-top: 0 !important;
  padding-bottom: 28px !important;
}
body.vd-giftcard-page .u-group-1 {
  overflow: hidden !important;
}
body.vd-giftcard-page .u-group-2 {
  border-radius: 20px 20px 14px 14px !important;
  margin-bottom: 28px !important;
  padding: 28px 28px 32px !important;
}

/* Nicepage legt het kader een vaste minimumhoogte op (1967px). De inhoud
   is korter, dus bleef er onderaan een strook wit staan. */
body.vd-giftcard-page .u-group-1 {
  min-height: 0 !important;
  height: auto !important;
}

/* De accordeonbalk hield zijn oude donkerblauw: Nicepage zet die kleur
   met !important via een actief-class. Door de klasse te verdubbelen
   weegt onze regel zwaarder, zonder aan de Nicepage-CSS te komen. */
body.vd-giftcard-page .u-group-1 .u-accordion-link.u-accordion-link {
  background-color: #1e9eb7 !important;
}
body.vd-giftcard-page .u-group-1 .u-accordion-link.u-accordion-link:hover {
  background-color: #1a869b !important;
}

/* Ook het formulierblok kreeg van Nicepage een vaste minimumhoogte
   (806px), waardoor er onder de voorwaarden een lege strook overbleef. */
body.vd-giftcard-page .u-group-2,
body.vd-giftcard-page .u-group-2 > .u-container-layout {
  min-height: 0 !important;
  height: auto !important;
}

/* --- Cadeaubonformulier ---------------------------------------------
   Het formulier gebruikt dezelfde bouwstenen als het reserverings-
   formulier (vd-cal-form__*). Hieronder alleen wat eigen is: vijf
   bedragen naast elkaar, het gouden 'populair'-label dat aan de pil
   vastzit, en de twee bezorgkeuzes met icoon. */
.vd-gift__pills {
  flex-wrap: wrap;
  justify-content: center;
}
button.vd-gift__pill {
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding: 0 14px;
  min-width: 88px;
  overflow: hidden;
}
/* Het bedrag vult de ruimte boven het label en staat daarin gecentreerd.
   Bij een pil zonder label is dat de hele pil, zodat de bedragen met en
   zonder label allebei mooi in het midden staan. */
.vd-gift__pill-bedrag {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  padding: 12px 0;
}
/* Het label zit vast aan de onderkant van de pil, over de volle breedte,
   zodat het één geheel vormt met het bedrag. */
.vd-gift__label {
  display: block;
  width: calc(100% + 28px);
  margin: 0 -14px;
  padding: 3px 0 4px;
  background: linear-gradient(90deg, #c4b76a, #d1c883);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
button.vd-gift__pill--wijze {
  flex-direction: row;
  gap: 8px;
  padding: 10px 18px;
  min-width: 0;
}
.vd-gift__wijze-icoon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.vd-gift__wijze-tekst { font-weight: 600; }

/* In plaats van de vraag hoe je de bon wilt ontvangen staat er nu een
   mededeling: hij komt als PDF in de mailbox. Zelfde groen en zelfde
   opmaak als de regel over gratis annuleren op het reserveringsformulier
   (p.vd-cal-form__cancel), zodat de twee als dezelfde soort
   geruststelling te herkennen zijn. De marge erboven is wat ruimer,
   want hier staat geen kopje meer boven. */
p.vd-gift__levering {
  margin: 20px 0 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #2e9c3a;
}

/* Het bedankscherm hoort bij het formulier, dus die blijft binnen het
   teal blok staan in plaats van over het witte kader uit te lopen. */
.vd-gift .vd-cal-form__title,
.vd-gift .vd-cal-form__subtitle {
  text-align: center;
}

/* Het Nicepage-blok stond op flex in rijrichting, waardoor de kop en de
   pillen naast elkaar belandden. Een formulier hoort van boven naar
   beneden te lopen. */
body.vd-giftcard-page .u-group-2.vd-gift {
  display: block !important;
}

/* Nicepage gaf het blok 2px marge bovenaan; daardoor bleef er een dun
   wit randje boven het formulier staan. */
body.vd-giftcard-page .u-group-2.vd-gift {
  margin-top: 0 !important;
}

/* Uitleg onder de kop 'Van en voor wie': welke namen op de kaart komen. */
p.vd-gift__hint {
  /* Zelfde breedte en centrering als de veldenrij eronder, zodat de
     regel links uitlijnt met het eerste invulveld. */
  max-width: 640px;
  margin: -4px auto 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a6b75 !important;
  font-style: italic;
}

/* De twee populaire bedragen krijgen een zachte gouden gloed, zodat ze
   opvallen zonder te schreeuwen. */
button.vd-gift__pill:has(.vd-gift__label) {
  background: linear-gradient(180deg, #fffdf4 0%, #ffffff 62%);
  box-shadow: 0 0 0 1px rgba(196, 183, 106, 0.40),
              0 4px 18px rgba(196, 183, 106, 0.30);
}
button.vd-gift__pill:has(.vd-gift__label):hover {
  box-shadow: 0 0 0 1px rgba(196, 183, 106, 0.55),
              0 6px 22px rgba(196, 183, 106, 0.40);
}
/* Zodra het bedrag gekozen is, neemt de gewone groene staat het over. */
button.vd-gift__pill.vd-cal-form__pill--on:has(.vd-gift__label) {
  background: #edf9ea;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
}

/* Knoppenrij even breed als de invulvelden, zodat Terug en Volgende
   met de velden uitlijnen in plaats van tegen de rand van het blok. */
.vd-gift .vd-cal-form__actions {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* Eerste stap heeft alleen 'Volgende'; die hoort rechts te staan. */
.vd-gift .vd-gift__actions--een {
  justify-content: flex-end;
}

/* =====================================================================
   FRESH TEMPLATE — het titelblok bovenaan een pagina
   =====================================================================
   Rustig titelblok met serif-titel in brandblauw, een fijn streepje
   eronder en een ondertitel. Gebruikt op de check-in-pagina.

   Dezelfde vormtaal staat — met een eigen klassenaam uit de tijd dat er
   nog geen gedeelde versie was — ook op 'Què veure' (.vd-map-intro),
   Fotos (.vd-photos-intro) en de cadeaubonpagina (.vd-giftcard-intro).
   Nieuwe pagina's gebruiken .vd-fresh. */
.vd-fresh {
  padding: 118px 16px 28px;   /* 90px menubalk + lucht boven de titel */
  background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}
.vd-fresh__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.vd-fresh__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-fresh__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #1e9eb7, transparent);
  opacity: 0.6;
}
/* p.-prefix nodig: Nicepage heeft een regel "p:not(.u-text-variant)" die
   deze tekst anders wit maakt, en die weegt zwaarder dan een losse
   klasse. */
p.vd-fresh__subtitle {
  color: #115664 !important;
  font-size: 18px !important;
  line-height: 1.8;
  margin: 0;
}
p.vd-fresh__subtitle b,
p.vd-fresh__subtitle strong {
  font-weight: 800;
  color: #1a869b;
}

/* =====================================================================
   Check-in: twee teal kaders met een metrolijn
   =====================================================================
   De oude pagina was een smalle kolom accordeons over een sfeerfoto.
   Nu twee kaders in dezelfde vormtaal als het reserverings- en
   cadeaubonformulier, naast elkaar op een breed scherm en onder elkaar
   op een telefoon.

   Links 'wat vooraf': drie stappen op een metrolijn met haltes, elk met
   een voortgangsbalkje op de bovenrand. Reservar en Confirmada zijn al
   gebeurd voordat een gast deze pagina opent, dus die staan vol en hun
   naam is doorgestreept; Obligació staat op een streepje oranje met een
   zandloper.

   Rechts 'bij aankomst': geen stappen en dus geen haltes, alleen een
   lijntje dat de tegels met elkaar verbindt. Die tegels beginnen daarom
   ook hoger (geen lijn erboven) en zijn op een telefoon breder (geen
   lijn ernaast). */

/* De oude Nicepage-sectie (inclusief de sfeerfoto als achtergrond) blijft
   in de HTML staan, maar wordt niet meer getoond. */
body.vd-checkin-page section.u-section-1 {
  display: none !important;
  /* Ook de sfeerfoto losmaken, anders haalt de browser hem alsnog op
     voor een sectie die niemand te zien krijgt. */
  background-image: none !important;
}

.vd-metro-section {
  background: #ffffff;
  padding: 0 16px 72px;
}
/* Drie tegels links, vier rechts: met 3fr/4fr zijn de tegels in beide
   kaders even breed. */
.vd-metro-duo {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 22px;
  /* Allebei even hoog: het rechterkader loopt met het linker mee tot
     onderaan. De tegels erin houden hun eigen hoogte; alleen het kader
     wordt groter. */
  align-items: stretch;
}
.vd-metro {
  padding: 22px clamp(14px, 2vw, 24px) 26px;
  background: #f6fbfd;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
}
h2.vd-metro__kop {
  text-transform: none !important;
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #1a869b !important;
  text-align: center;
  margin: 0 0 16px !important;
}

.vd-metro__stations {
  display: grid;
  grid-template-columns: repeat(var(--vd-kolommen, 3), 1fr);
  align-items: stretch;
}
/* Alle tegels even hoog, ook al hebben alleen de stappen een
   voortgangsbalkje en een statuslabel. */
.vd-metro__station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 5px;
}
.vd-metro__station .vd-metro__tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.vd-metro__station .vd-metro__tile-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- De lijn met de haltes (alleen het eerste kader) --- */
.vd-metro__rail {
  position: relative;
  /* De stations hebben 5px zijkant-padding; de lijn loopt daar dwars
     doorheen, anders staan er gaatjes tussen de stukken. */
  width: calc(100% + 10px);
  margin: 0 -5px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vd-metro__rail::before,
.vd-metro__rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #dceff5;
}
.vd-metro__rail::before { left: 0; }
.vd-metro__rail::after  { right: 0; }
/* De lijn begint bij het eerste station en houdt op bij het laatste.
   Een klasse, geen :last-child: het paneel staat ook in het raster. */
.vd-metro__station:first-child .vd-metro__rail::before,
.vd-metro__station--laatste .vd-metro__rail::after { display: none; }

/* Gevuld tot en met het station waar de gast nu staat. */
.vd-metro__station--klaar .vd-metro__rail::before,
.vd-metro__station--klaar .vd-metro__rail::after,
.vd-metro__station--nu    .vd-metro__rail::before { background: #2e9c3a; }

.vd-metro__dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #cfe6ee;
}
.vd-metro__station--klaar .vd-metro__dot {
  background: #2e9c3a;
  border-color: #2e9c3a;
}
.vd-metro__station--nu .vd-metro__dot {
  border-color: #c26414;
  box-shadow: 0 0 0 4px rgba(194, 100, 20, 0.16);
}

/* --- Het tweede kader: een lijn zonder haltes ---
   Geen rail erboven, dus de tegels beginnen hoger. Tussen elke twee
   tegels loopt een lijntje op halve hoogte. */
.vd-metro--info .vd-metro__station { padding: 0 9px; }
.vd-metro--info .vd-metro__station::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -9px;
  width: 18px;
  height: 3px;
  transform: translateY(-50%);
  background: #dceff5;
}
.vd-metro--info .vd-metro__station:first-child::before { display: none; }

/* --- De tegels --- */
.vd-metro__tile {
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1e9eb7;
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  box-shadow: 0 3px 12px rgba(30, 158, 183, 0.28);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* In het tweede kader hangt er geen lijn boven de tegels. */
.vd-metro--info .vd-metro__tile { margin-top: 0; }

/* Alleen de knoppen reageren op de muis; het eindkaartje is geen knop. */
button.vd-metro__tile { cursor: pointer; }
button.vd-metro__tile:hover {
  background: #1a869b;
  transform: translateY(-2px);
}
.vd-metro__tile--open {
  background: #1a869b;
  box-shadow: 0 0 0 3px rgba(30, 158, 183, 0.35), 0 6px 18px rgba(30, 158, 183, 0.3);
}

/* Voortgangsbalkje op de bovenrand, in het groen van een gemaakte keuze
   elders op de site (aantal personen, WhatsApp of e-mail). */
.vd-metro__bar {
  position: relative;
  display: block;
  height: 18px;
}
.vd-metro__bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
}
.vd-metro__bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 6px;
  transform: translateY(-50%);
  background: #2e9c3a;
}
.vd-metro__station--klaar .vd-metro__bar-fill { width: 100%; }
/* De stap die nog moet gebeuren: net begonnen, vandaar een streepje. */
.vd-metro__station--nu .vd-metro__bar-fill {
  width: 5%;
  background: #c26414;
}
/* Rondje aan het einde van de balk: een vinkje als het af is, een
   zandloper zolang we erop wachten. */
.vd-metro__bar-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vd-metro__station--klaar .vd-metro__bar-end {
  right: 5px;
  background: #edf9ea;
  color: #2e9c3a;
  box-shadow: 0 0 0 2px #2e9c3a;
}
.vd-metro__station--nu .vd-metro__bar-end {
  left: 5%;
  margin-left: 3px;
  background: #fdf0e0;
  color: #c26414;
  box-shadow: 0 0 0 2px #c26414;
}
.vd-metro__bar-end svg { width: 9px; height: 9px; }

.vd-metro__tile-body {
  display: block;
  padding: 10px 8px 12px;
}
/* Titels van meer dan een woord moeten in een smalle kolom passen
   zonder een stapeling van losse woorden te worden. */
.vd-metro__titel {
  display: block;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.25;
}
/* Twee icoontjes boven de titel bij de weetjes rechts. */
.vd-metro__iconen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 7px;
}
.vd-metro__iconen svg {
  width: 19px;
  height: 19px;
  opacity: 0.9;
}
/* Kleinere, schuine regel onder een titel, zoals 'Obligatori per llei'.
   Schuingedrukt in plaats van tussen haakjes: het is een toelichting bij
   de tegel, geen bijzin. */
.vd-metro__subtitel {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.82;
}
/* Afgeronde stappen: naam gedempt. Samen met de volle groene balk, het
   vinkje en het groene pilletje is in één oogopslag te zien dat ze klaar
   zijn; een streep door de naam erbij was te veel van het goede. */
.vd-metro__station--klaar .vd-metro__titel {
  color: #cfe2e9;
}
.vd-metro__stand {
  align-self: center;
  margin-top: 6px;
  /* Hoofdletters staan van zichzelf hoog in de regel: onder de basislijn
     zit de ruimte voor staartletters, die hier niet voorkomen. Vandaar
     twee pixels meer boven dan onder; dan staat het woord optisch
     midden in het pilletje. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 5px 10px 3px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #edf9ea;
  color: #2e9c3a;
}
.vd-metro__stand--nu {
  background: #fdf0e0;
  color: #c26414;
}

.vd-metro__chevron {
  display: block;
  width: 8px;
  height: 8px;
  margin: 9px auto 0;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
}
.vd-metro__tile--open .vd-metro__chevron {
  margin-top: 13px;
  transform: rotate(-135deg);
}

/* --- De beschrijving, uitgeklapt onder de tegel zelf --- */
.vd-metro__paneel {
  position: relative;
  margin: 12px 5px 0;   /* 5px = de zijkant-padding van een station */
  padding: 16px 20px;
  align-self: start;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(30, 158, 183, 0.14);
}
/* Pijltje naar de tegel waar het paneel uit komt; de plek komt uit
   --vd-pijl, want het paneel is breder dan één tegel. */
.vd-metro__paneel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--vd-pijl, 50%);
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 3px;
  background: #ffffff;
  transform: rotate(45deg);
}
/* Nicepage zet al zijn koppen in kapitalen; hier hoort gewone
   schrijfwijze. */
h2.vd-metro__paneel-titel {
  text-transform: none !important;
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  color: #1a869b !important;
  margin: 0 0 6px !important;
}
p.vd-metro__paneel-tekst {
  color: #1b2a2e !important;
  font-size: 1rem !important;
  line-height: 1.7;
  margin: 0;
}
a.vd-metro__link {
  color: #1e9eb7 !important;
  font-weight: 700;
  text-decoration: underline;
}

/* --- Het slot van de lijn: een kaartje in plaats van een knop --------
   Daurada is geen stap en geen weetje om open te klappen; het is de
   afsluiting. De tekst staat er meteen in, met de gouden confetti van de
   cadeaubon erachter. Die snippers zijn letterlijk uit
   card-targeta-regal-ca.webp gehaald: de lichtblauwe achtergrond is
   weggerekend door de doorzichtigheid te bepalen uit het verschil tussen
   rood en blauw, zodat alleen het goud overbleef.

   De kleuren staan andersom dan bij de andere tegels: wit vlak, blauwe
   letters. Zo springt het slot eruit. */
.vd-metro__tile--eind {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(30, 158, 183, 0.18);
}
.vd-metro__confetti {
  position: absolute;
  inset: 0;
  background-image: url('images/confetti-daurada.webp');
  background-size: 150px auto;
  background-position: center -4px;
  background-repeat: repeat-x;
  /* De snippers dwarrelen van boven naar beneden en vervagen voordat ze
     bij de tekst komen. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 86%);
  pointer-events: none;
}
/* De tekst hoort boven de confetti te liggen. */
.vd-metro__tile--eind .vd-metro__tile-body {
  position: relative;
  justify-content: flex-start;
  /* 22px om onder de dichtste snippers te blijven, plus 17,6px voor de
     regel waar vroeger de titel stond. Die titel is weg, maar de tekst
     hoort op dezelfde hoogte te blijven staan als daarvoor. */
  padding-top: 39.6px;
}
.vd-metro__eind-tekst {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #115664;
}

/* --- Telefoon: de kaders onder elkaar, de lijn rechtop ---------------
   Tegels naast elkaar worden op een telefoon onleesbaar smal, en juist
   daar wordt deze pagina gelezen: onderweg, bij aankomst. De
   beschrijving komt dan direct onder de aangetikte tegel. */
@media (max-width: 860px) {
  .vd-metro-section { padding-bottom: 56px; }
  .vd-metro-duo {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vd-metro { padding: 20px 16px 18px; }
  .vd-metro__stations { grid-template-columns: 1fr; }
  .vd-metro__station {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }
  .vd-metro__rail {
    flex: 0 0 26px;
    width: 26px;
    height: auto;
    margin: 0;
  }
  .vd-metro__rail::before,
  .vd-metro__rail::after {
    left: 50%;
    right: auto;
    width: 3px;
    height: 50%;
    transform: translateX(-50%);
  }
  .vd-metro__rail::before { top: 0; }
  .vd-metro__rail::after  { top: auto; bottom: 0; }

  /* Tweede kader: geen lijn ernaast, dus de tegels lopen door tot de
     rand. Het verbindingslijntje staat nu tussen de tegels in.
     De tussenruimte gaat daarvoor van 10 naar 18 pixels: even lang als
     het lijntje op een breed scherm. Op 10 pixels was het een stipje dat
     je moest zoeken. */
  .vd-metro--info .vd-metro__station { padding: 0; }
  .vd-metro--info .vd-metro__tile { margin-bottom: 18px; }
  .vd-metro--info .vd-metro__station--laatste .vd-metro__tile { margin-bottom: 0; }
  .vd-metro--info .vd-metro__station::before {
    top: -18px;
    left: 50%;
    width: 3px;
    height: 18px;
    transform: translateX(-50%);
  }
  /* Staat er een beschrijving uitgeklapt, dan valt de tussenruimte boven
     het paneel buiten de tegels; daar hoort het lijntje door te lopen.
     De ruimte eronder wordt al gedekt door het lijntje van de volgende
     tegel. */
  .vd-metro--info .vd-metro__paneel::before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -16px;        /* 18px tussenruimte min de 2px die het paneel omhoog staat */
    height: 16px;
    width: 3px;
    margin-left: 0;
    border-radius: 0;
    background: #dceff5;
  }

  .vd-metro__tile {
    margin: 0 0 10px;
    text-align: left;
  }
  button.vd-metro__tile:hover { transform: none; }
  /* Zelfde gewicht als de regel die de tegels op een breed scherm even
     hoog maakt, anders blijft die kolomrichting hier staan. */
  .vd-metro__station .vd-metro__tile-body {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  /* Titel en de kleine regel eronder vormen samen een kolom, anders
     wordt de titel tot een paar letters breed geperst. */
  .vd-metro__kop-groep {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .vd-metro__titel { font-size: 1rem; }
  .vd-metro__stand { align-self: auto; margin-top: 0; }
  .vd-metro__chevron { margin: 0 2px 3px 0; flex: 0 0 auto; }
  .vd-metro__tile--open .vd-metro__chevron { margin: 3px 2px 0 0; }

  .vd-metro__paneel {
    margin: -2px 0 14px 36px;   /* uitlijnen met de tegels ernaast */
    padding: 14px 16px;
  }
  /* In het tweede kader lopen de tegels door tot de rand, dus het
     paneel ook. */
  .vd-metro--info .vd-metro__paneel { margin-left: 0; }
  .vd-metro__paneel::before { display: none; }
  /* De lijn loopt dwars door het uitgeklapte paneel heen, anders valt er
     een gat in de metrolijn zodra je een tegel opent. */
  .vd-metro--stappen .vd-metro__paneel::after {
    content: '';
    position: absolute;
    /* Het paneel springt 36px in en het midden van de rail ligt op 13px,
       dus -23px. Net als bij de rail zelf verschuift het lijntje daarna
       zijn eigen halve breedte, anders staat het een halve pixel naast
       de rest van de lijn en zie je hem verspringen. */
    left: -23px;
    transform: translateX(-50%);
    top: -2px;
    bottom: -14px;
    width: 3px;
    background: #dceff5;
  }
  .vd-metro--stappen .vd-metro__paneel--groen::after { background: #2e9c3a; }

  /* Op het eindkaartje staat de titel boven de tekst, niet ernaast. */
  .vd-metro__station--eind .vd-metro__tile-body {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
  }
}

/* --- Afgeschermde beschrijving --------------------------------------
   Twee tegels vertellen iets wat niet op een openbare pagina hoort. Hun
   venster staat grijs met een doorgestreept oog, tot de gast de laatste
   vier letters van zijn referentienummer intikt. Het invulveld gebruikt
   dezelfde bouwstenen als de formulieren, zodat het groen wordt met een
   vinkje zodra het klopt. */
.vd-metro__paneel--slot {
  background: #f1f3f5;
  text-align: center;
  box-shadow: 0 4px 16px rgba(30, 158, 183, 0.10);
}
.vd-metro__paneel--slot::before { background: #f1f3f5; }
.vd-metro__slot-oog {
  display: block;
  color: #8fa3ab;
  margin-bottom: 8px;
}
.vd-metro__slot-oog svg { width: 26px; height: 26px; }
p.vd-metro__slot-tekst {
  color: #5c7078 !important;
  font-size: 0.9rem !important;
  line-height: 1.55;
  margin: 0 auto 12px !important;
  max-width: 34em;
}
.vd-metro__slot-wrap {
  max-width: 290px;
  margin: 0 auto;
}
/* Geen icoon links in dit veld, dus daar hoeft geen ruimte voor. Het
   hele boekingsnummer past hier in; letters uit elkaar trekken zou het
   juist onleesbaar maken. */
.vd-metro__slot-veld {
  padding-left: 20px !important;
  text-align: center;
  font-weight: 700;
}
/* Meldinkje onder het invulveld: even wachten, of het nummer klopt niet. */
p.vd-metro__slot-melding {
  margin: 10px 0 0 !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  color: #5c7078 !important;
}
p.vd-metro__slot-melding--fout { color: #c0392b !important; }

/* =====================================================================
   Check-informulier per gast
   =====================================================================
   Verschijnt onder de uitleg bij 'Omplir el formulari de check-in',
   zodra de gast zijn referentienummer heeft ingetikt. Eén knop per
   geboekte persoon, en per persoon hetzelfde invulblad. De velden zijn
   dezelfde bouwstenen als het reserverings- en cadeaubonformulier
   (vd-cal-form__*); hieronder staat alleen wat eigen is. */
.vd-gastform {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e3eef2;
  text-align: left;
}
h3.vd-gastform__kop {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #1a869b !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}
p.vd-gastform__uitleg {
  color: #4a6b75 !important;
  font-size: 0.86rem !important;
  line-height: 1.5;
  margin: 0 0 14px !important;
}

/* Eén knop per geboekte gast. Wie klaar is krijgt een vinkje. */
.vd-gastform__personen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.vd-gastform__persoon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: #1e9eb7;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.15);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vd-gastform__persoon svg { width: 15px; height: 15px; }
.vd-gastform__persoon:hover { background: #eaf6f9; }
.vd-gastform__persoon--klaar {
  background: #edf9ea;
  color: #2e9c3a;
  border-color: #2e9c3a;
}
/* Welke gast je nu invult: gevuld in het blauw van de tegels. */
.vd-gastform__persoon--actief {
  background: #1e9eb7;
  color: #ffffff;
  border-color: #1e9eb7;
}
.vd-gastform__persoon--actief:hover { background: #1a869b; }
.vd-gastform__persoon--klaar.vd-gastform__persoon--actief {
  background: #2e9c3a;
  border-color: #2e9c3a;
  color: #ffffff;
}

/* Velden onder elkaar of naast elkaar, afhankelijk van de ruimte: dit
   formulier staat in een kader dat maar een deel van de pagina breed is. */
.vd-gastform__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.vd-gastform .vd-cal-form__h2 {
  margin-top: 16px;
}
.vd-gastform__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.vd-gastform__pill-icoon svg { width: 15px; height: 15px; }

/* De twee verklaringen. Aanklikbaar als geheel, met een vakje dat groen
   wordt — hetzelfde groen als een gemaakte keuze elders. */
.vd-gastform__akkoord {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.12);
  cursor: pointer;
}
.vd-gastform__akkoord--on {
  background: #edf9ea;
  box-shadow: 0 0 0 2px #2e9c3a;
}
.vd-gastform__vink {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 2px solid #cfe2e9;
  background: #ffffff;
  color: #2e9c3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vd-gastform__akkoord--on .vd-gastform__vink {
  border-color: #2e9c3a;
  background: #ffffff;
}
.vd-gastform__vink svg { width: 12px; height: 12px; }
.vd-gastform__akkoord-tekst {
  font-family: 'Nunito', sans-serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #1b2a2e;
}

.vd-gastform__actions {
  justify-content: flex-end;
  margin-top: 18px;
}
.vd-gastform__dank {
  margin-top: 8px;
}
/* Vriendelijk duwtje als iemand meteen naar de laatste gast springt. */
p.vd-gastform__hint {
  margin: 0 0 4px !important;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fdf0e0;
  color: #9c5312 !important;
  font-size: 0.84rem !important;
  line-height: 1.45;
  font-weight: 600;
}

/* =====================================================================
   /cp22 — overzicht van boekingen en bestellingen
   =====================================================================
   Intern schermpje achter een inlog. Zelfde vormtaal als de rest: het
   fresh template bovenaan, daaronder een teal kader met per boeking één
   regel. Het schuifje gaat om zodra de betaling bij de bank binnen is;
   dat verstuurt de definitieve bevestiging. */
.vd-cp22-section {
  background: #ffffff;
  padding: 0 16px 80px;
}
.vd-cp22 {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px clamp(16px, 3vw, 30px) 28px;
  background: #f6fbfd;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
}

/* --- Inloggen --- */
.vd-cp22__inlog {
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vd-cp22__veld { padding-left: 20px !important; }
.vd-cp22__knop { align-self: stretch; }
p.vd-cp22__melding {
  margin: 0 !important;
  text-align: center;
  color: #c0392b !important;
  font-size: 0.86rem !important;
  font-weight: 600;
}

/* --- De lijst --- */
.vd-cp22__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px 10px;
  border-bottom: 1px solid #dceff5;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a869b;
}
.vd-cp22__regel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid #e8f4f7;
}
.vd-cp22__regel:last-child { border-bottom: none; }
.vd-cp22__regel--bezig { opacity: 0.55; }
.vd-cp22__gegevens {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vd-cp22__ref {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #115664;
  word-break: break-word;
}
.vd-cp22__naam {
  font-family: 'Nunito', sans-serif;
  font-size: 0.86rem;
  color: #4a6b75;
}
/* Het bedrag waar de regel om gaat, onder de naam. */
.vd-cp22__bedrag {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: #1a869b;
}
/* Heeft de gast nog bericht gehad toen de termijn verliep? Rood als
   dat niet zo is: die zit in het ongewisse. */
.vd-cp22__bericht {
  margin-top: 2px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}
.vd-cp22__bericht--wel  { color: #4a6b75; }
.vd-cp22__bericht--niet { color: #c0392b; }
.vd-cp22__stempel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #2e9c3a;
}
.vd-cp22__stempel svg { width: 11px; height: 11px; }
.vd-cp22__fout {
  margin-top: 3px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #c0392b;
}

/* Het schuifje. Uit is grijs, aan is groen — hetzelfde groen als een
   gemaakte keuze elders op de site. Eenmaal om blijft het staan: er is
   dan een mail de deur uit en die haal je niet terug. */
.vd-cp22__schuif {
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 3px;
  border: none;
  border-radius: 999px;
  background: #cfe2e9;
  cursor: pointer;
  transition: background 0.18s;
}
.vd-cp22__schuif:hover:not(:disabled) { background: #b9d6e0; }
.vd-cp22__knopje {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(17, 86, 100, 0.3);
  transition: transform 0.18s;
}
.vd-cp22__schuif--aan { background: #2e9c3a; }
.vd-cp22__schuif--aan .vd-cp22__knopje { transform: translateX(22px); }
.vd-cp22__schuif:disabled { cursor: default; }

p.vd-cp22__leeg {
  margin: 0 !important;
  text-align: center;
  color: #4a6b75 !important;
  font-size: 0.95rem !important;
}

/* --- 'Ik heb betaald' op het bedankscherm --------------------------
   De balk onder de betaalgegevens is oranje zolang er nog overgemaakt
   moet worden, met daarin de knop. Klikt de gast erop, dan wordt de balk
   groen met het bekende vinkje en verschijnt pas dan de tekst over wat
   er daarna gebeurt. */
.vd-cal-thanks__betaald {
  margin-left: 4px;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  background: #c26414;
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(194, 100, 20, 0.3);
  transition: background 0.15s, transform 0.15s;
}
.vd-cal-thanks__betaald:hover {
  background: #a85410;
  transform: translateY(-1px);
}
.vd-cal-thanks__betaald:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.vd-cal-thanks__deadline-bar--betaald {
  background: #edf9ea;
  color: #2e9c3a !important;
  border-top-color: rgba(46, 156, 58, 0.18);
  text-align: left;
}
.vd-cal-thanks__deadline-bar--betaald svg { color: #2e9c3a; }
.vd-cal-thanks__betaald-tekst {
  color: #2e7d33 !important;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 46em;
}

/* Tussen het teal formulierblok en de afbeelding van de cadeaubon zat
   een witte strook van 31px: Nicepage geeft het blok een ondermarge en
   de afbeelding een bovenmarge, die samen inklappen tot de grootste van
   de twee. Ze horen tegen elkaar aan te liggen. */
body.vd-giftcard-page .u-group-2 { margin-bottom: 0 !important; }
body.vd-giftcard-page img.u-image-2 { margin-top: 0 !important; }

/* Termijn voorbij zonder dat er op 'Ik heb betaald' is geklikt: de balk
   wordt lichtrood met een kruis. De boeking vervalt en de dagen komen
   weer vrij voor anderen. */
.vd-cal-thanks__deadline-bar--verlopen {
  background: #fdeceb;
  color: #c0392b !important;
  border-top-color: rgba(192, 57, 43, 0.18);
  text-align: left;
}
.vd-cal-thanks__deadline-bar--verlopen svg { color: #c0392b; }
.vd-cal-thanks__deadline-bar--verlopen .vd-cal-thanks__betaald-tekst {
  color: #a3291c !important;
}

/* Tweede schuifje op /cp22: onbetaald. Rood, want het laat een boeking
   vervallen en stuurt de gast bericht. */
.vd-cp22__kop-acties {
  display: flex;
  gap: 14px;
  flex: 0 0 auto;
}
/* Elk kopje staat precies boven zijn eigen schuifje, dus even breed.
   Kleiner lettertje en ruimte om af te breken, anders lopen "Confirmar"
   en "No pagat" in elkaar over. */
.vd-cp22__kop-acties span {
  width: 52px;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.vd-cp22__actie {
  display: flex;
  gap: 14px;
  flex: 0 0 auto;
}
.vd-cp22__schuif--onbetaald.vd-cp22__schuif--aan { background: #c0392b; }
.vd-cp22__schuif--onbetaald:hover:not(:disabled) { background: #e8bdb7; }
.vd-cp22__stempel--rood { color: #c0392b; }
.vd-cp22__regel--onbetaald .vd-cp22__ref { text-decoration: line-through; }

/* =================================================
   Bovenbalk op telefoonbreedte: alles op één rij
   =================================================
   Het taalstoplicht paste er niet bij en viel terug naar een los kadertje
   onder het logo. De ruimte was er wel, alleen verkeerd verdeeld: naast
   het logo en naast de menuknop stond de zijmarge van Nicepage, en de
   Reservar-knop was breder dan zijn woord in welke taal dan ook nodig
   heeft (Reservar / Reservar / Book).

   Het schuiven naar de randen gebeurt in _zoom.js, omdat die marge per
   breakpoint verschilt en dus gemeten moet worden. Hier staat wat er
   verder voor nodig is: de hoek die tegen de schermrand komt wordt
   vierkant, en de knop en het stoplicht worden krapper.

   Dit blok staat bewust achteraan: de regels voor het witte logokader en
   de Reservar-knop staan verderop in dit bestand dan het oudere
   telefoonblok, en wonnen het daarvan. */
@media (max-width: 720px) {
  /* Logo tegen de linkerrand: daar hoort geen ronding meer. */
  .u-header a.u-logo,
  .u-header a.u-logo.u-image-1,
  header.u-header .u-logo {
    position: relative;
    border-bottom-left-radius: 0 !important;
  }

  /* Menuknop tegen de rechterrand: idem aan die kant. */
  .u-header .u-hamburger-link {
    position: relative;
    border-bottom-right-radius: 0 !important;
  }

  /* Reservar-knop: de lucht om het woord heen weg. Het icoon had zowel
     een eigen rechtermarge als de flex-gap van de knop; samen 18px voor
     één spatie. */
  .u-header a.u-btn-1 {
    padding-left: 9px !important;
    padding-right: 9px !important;
    gap: 5px !important;
  }
  .u-header a.u-btn-1 .u-icon {
    margin-right: 0 !important;
  }

  /* Taalstoplicht een slag krapper, zodat het er zeker bij past. */
  .vd-lang-balls {
    padding: 0 4px !important;
    gap: 3px !important;
  }
}

/* Smaller dan 375: de Reservar-knop nog een slag krapper
   -------------------------------------------------------
   Op 360 breed — veel Android-toestellen — komt de rij 14px tekort en
   viel het taalstoplicht alsnog onder het logo. Die 14px halen we uit de
   Reservar-knop: krappere rand, kleiner icoontje en een punt kleinere
   letter. Dat is precies genoeg, met een paar pixels speling.

   Bewust pas onder 375: op een telefoon van 375 of breder is de ruimte er
   wel, en daar hoeft de knop dus niets in te leveren. */
@media (max-width: 374px) {
  .u-header a.u-btn-1 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    gap: 3px !important;
    font-size: 14px !important;
  }
  .u-header a.u-btn-1 .u-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }
}

/* =================================================
   /cp22: klok naast de schuifjes, en een prullenbak
   =================================================
   De klok telt af vanaf het moment van de aanvraag. Loopt hij nog, dan
   kan de gast nog betalen en houdt de boeking zijn dagen vast; staat er
   'termijn passat', dan zijn die dagen weer vrijgegeven. Heeft de gast
   op 'Ik heb betaald' geklikt, dan is er niets meer af te tellen: die
   boeking blijft staan tot jij hem bevestigt of op onbetaald zet.

   De prullenbak gooit de regel echt weg — bedoeld om testorders op te
   ruimen. Er gaat geen mail uit; zie functions/api/cp22/verwijder.js. */
.vd-cp22__klok {
  width: 86px;
  flex: 0 0 86px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;   /* cijfers die niet verspringen */
  color: #4a6b75;
}
.vd-cp22__klok--loopt   { color: #c87f1a; }   /* zelfde oranje als de betaalbalk */
.vd-cp22__klok--op      { color: #c0392b; }
.vd-cp22__klok--gemeld  { color: #2e9c3a; }
.vd-cp22__klok--leeg    { color: transparent; }

.vd-cp22__kop-acties .vd-cp22__kop-tijd { width: 86px; }
.vd-cp22__kop-acties .vd-cp22__kop-weg  { width: 30px; }

.vd-cp22__weg {
  width: 30px;
  flex: 0 0 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: #a8c2c9;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.vd-cp22__weg svg { width: 17px; height: 17px; display: block; }
/* Pas bij aanwijzen rood: hij staat naast twee schuifjes die je wél
   vaak gebruikt, en mag daar niet om aandacht staan schreeuwen. */
.vd-cp22__weg:hover:not(:disabled) {
  color: #c0392b;
  background: #fbecea;
}
.vd-cp22__weg:disabled { opacity: 0.4; cursor: default; }

/* Op een smal scherm is er geen plek voor het hele referentienummer
   naast de twee schuifjes: dat brak af tot één letter per regel. Daar
   staat nu een knopje 'Mostra' dat het nummer in een venstertje laat
   zien, en houdt de linkerkolom een bodem zodat de naam heel blijft. */
.vd-cp22__reftoon { display: none; }
@media (max-width: 560px) {
  .vd-cp22__ref { display: none; }
  .vd-cp22__reftoon {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: #e8f4f7;
    color: #115664;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .vd-cp22__gegevens {
    flex: 1 1 auto;
    min-width: 92px;
  }
  .vd-cp22__klok {
    width: 58px;
    flex: 0 0 58px;
    font-size: 0.72rem;
  }
  .vd-cp22__kop-acties .vd-cp22__kop-tijd { display: none; }
}

/* Het venstertje met het referentienummer. */
.vd-cp22__refvenster {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 86, 100, 0.45);
}
.vd-cp22__refkaart {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(15, 25, 60, 0.3);
  padding: 22px 24px 18px;
  text-align: center;
  max-width: 320px;
}
p.vd-cp22__refkop {
  margin: 0 0 6px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a6b75 !important;
}
p.vd-cp22__refnummer {
  margin: 0 0 18px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800;
  color: #115664 !important;
  word-break: break-word;
}
.vd-cp22__refsluit {
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: #1e9eb7;
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.vd-cp22__refsluit:hover { background: #1a869b; }

/* Ontbrekend check-informulier terwijl de aankomst eraan komt.
   -----------------------------------------------------------
   Staat onder de naam in het overzicht, met de knop ernaast. Oranje:
   het is geen fout, het is iets wat nog moet gebeuren. Het rood op deze
   pagina is voorbehouden aan wat misging. */
.vd-cp22__checkin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c87f1a;
}
.vd-cp22__checkin svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
}
.vd-cp22__herinner {
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #c87f1a;
  background: #fdf3e3;
  border: 1px solid #f0d9ae;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vd-cp22__herinner:hover:not(:disabled) {
  background: #c87f1a;
  color: #ffffff;
}
.vd-cp22__herinner:disabled { opacity: 0.5; cursor: default; }
/* Al verstuurd: wanneer dat was, gedempt ernaast. De knop blijft
   bruikbaar, want soms is één zetje niet genoeg. */
.vd-cp22__herinnerd {
  font-weight: 400;
  font-size: 0.72rem;
  color: #4a6b75;
}

/* =================================================
   Footer: het eerste vak wit, de andere twee blauw
   =================================================
   De footer bestaat uit drie vakken: links de registratienummers, in
   het midden het logo met de Reservar-knop, rechts het adres met de
   social-icons en de beoordelingen. Het linkervak wordt wit met blauwe
   letters; daarna loopt het via het bekende teal-verloop over in het
   blauw van de andere twee.

   Het verloop staat op de footer zelf en niet op het vak. De drie
   vakken steken namelijk een pixel of vijftien boven de footer uit; een
   witte achtergrond op het vak zou dus over de foto erboven heen lopen.

   Daardoor moeten de overgangspunten wel per schermmaat kloppen, want
   het vak zit niet altijd op dezelfde plek. Alle percentages hieronder
   zijn opgemeten: waar de tekst van het eerste vak ophoudt, en waar het
   witte logo begint. Tussen die twee ligt het verloop. */

/* Breed scherm: drie vakken naast elkaar. Doorgerekend op de gedraaide
   as: de tekst van het eerste vak komt tot 28%, het logo begint op 38%.
   Daartussen ligt de schuine band. */
@media (min-width: 992px) {
  footer.u-footer,
  .u-footer.u-custom-color-33,
  footer.u-footer.u-custom-color-33 {
    background-image: linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 27.5%,
      #e3f2f6 30.5%,
      #a9dae4 33.5%,
      #1e9eb7 37.5%,
      #1e9eb7 100%) !important;
  }
}

/* Tussenmaat: nog steeds naast elkaar, maar het eerste vak is smal en de
   nummers lopen tot vlak bij de rand (32%), terwijl het logo al op 33,6%
   begint. Tussen die twee past geen zacht verloop meer, dus hier begint
   het al onder het staartje van de langste regel. Dat kan: donker teal
   op dat lichte blauw blijft goed te lezen, en het ziet eruit alsof de
   tekst in het verloop overgaat in plaats van tegen een harde rand te
   stoppen. */
@media (min-width: 768px) and (max-width: 991px) {
  footer.u-footer,
  .u-footer.u-custom-color-33,
  footer.u-footer.u-custom-color-33 {
    background-image: linear-gradient(96deg,
      #ffffff 0%,
      #ffffff 27%,
      #e3f2f6 30.5%,
      #a9dae4 33.5%,
      #1e9eb7 35.5%,
      #1e9eb7 100%) !important;
  }
}

/* Telefoon: de drie vakken staan onder elkaar, dus de band loopt van
   boven naar beneden — ook schuin, alleen de andere kant op gekanteld.
   Tekst tot 28%, logo vanaf 35,5%. */
@media (max-width: 767px) {
  footer.u-footer,
  .u-footer.u-custom-color-33,
  footer.u-footer.u-custom-color-33 {
    background-image: linear-gradient(170deg,
      #ffffff 0%,
      #ffffff 28%,
      #e3f2f6 30.5%,
      #a9dae4 32.5%,
      #1e9eb7 35%,
      #1e9eb7 100%) !important;
  }
}

/* De letters in dat eerste vak. Ze waren wit (copyright) en goudgeel
   (de registratienummers); allebei onleesbaar op wit. Nu het donkere
   teal dat elders op de site ook de nadruktekst is. */
.u-footer .u-layout-cell-1,
.u-footer .u-layout-cell-1 * {
  color: #115664 !important;
}

/* De ruimte voor de zwevende onderbalk hoort binnen de footer
   ------------------------------------------------------------
   body.u-body had 100px padding onderaan, zodat de onderste inhoud niet
   achter de zwevende navigatiebalk verdwijnt. Die 100px liet de witte
   achtergrond van de pagina zien als een lege strook onder de footer.
   Zolang de footer helemaal blauw was viel dat niet op; nu wel.

   De ruimte blijft nodig, maar valt nu binnen de footer, zodat de
   achtergrond van de footer gewoon doorloopt tot onderaan. */
body.u-body { padding-bottom: 0 !important; }
footer.u-footer { padding-bottom: 100px !important; }

/* Sterren, gastenboekknop en de twee platform-beeldmerken in de footer
   --------------------------------------------------------------------
   De sterren stonden rechtsonder tussen de cijfers; ze horen bij wat
   gasten vinden en staan nu links onder het copyright, boven de knop
   naar het gastenboek. Het indelen zelf gebeurt in _zoom.js, want de
   footer-HTML staat 28 keer in het project. */

/* De kolom sluit om de knop heen (inline-flex), zodat de sterren precies
   boven die knop gecentreerd staan en niet over het hele vak. */
.vd-gastenboek {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 26px 0 0;
}
.vd-sterren {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
}
/* De regel die alle letters in dit vak blauw maakt geldt ook voor het
   <path> binnen de SVG, en currentColor pakt dan dat blauw op. Kleur
   daarom het pad zelf, niet de tekstkleur eromheen. */
.u-footer .u-layout-cell-1 .vd-sterren svg path {
  fill: #ffd166 !important;    /* dezelfde ster als in de recensieblokken */
}
.vd-sterren svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Zelfde maatvoering als de Reservar-knop in het middelste vak:
   43px hoog, letter op 16px, volledig ronde hoeken. De breedte volgt de
   tekst, met dezelfde ondergrens als die knop zodat ze bij een kort
   woord even breed zijn. De kleur moet !important én specifieker dan de
   regel die alle letters in dit vak blauw maakt, anders wint die. */
.u-footer .u-layout-cell-1 a.vd-gastenboek-knop,
.u-footer .u-layout-cell-1 a.vd-gastenboek-knop span {
  color: #ffffff !important;
}
.u-footer .u-layout-cell-1 a.vd-gastenboek-knop svg path {
  stroke: #ffffff !important;
}
.vd-gastenboek-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 166px;
  height: 43px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 100px;
  background: #1e9eb7;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(30, 158, 183, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vd-gastenboek-knop svg { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
.vd-gastenboek-knop:hover,
.vd-gastenboek-knop:focus {
  background: #115664;
  transform: translateY(-1px);
}

/* De twee beeldmerken onderaan de rechterkolom. Die kolom lijnt rechts
   uit, dus ze komen vanzelf onder de social-icons te staan. */
.vd-platforms {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin: 28px 0 0;
}
.vd-platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 86, 100, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vd-platform img {
  max-width: 32px;
  max-height: 32px;
  display: block;
}
.vd-platform:hover,
.vd-platform:focus {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(17, 86, 100, 0.28);
}

/* Op een telefoon staan de drie vakken onder elkaar en lijnt de
   rechterkolom links uit; de beeldmerken volgen dat. */
@media (max-width: 767px) {
  .vd-platforms { justify-content: flex-start; }
  .vd-gastenboek { margin-top: 20px; }
}

/* =================================================
   Gastenboek
   =================================================
   Titelblok in dezelfde vorm als de andere pagina's (.vd-fresh), daar-
   onder de filterknoppen en een rooster met blauwe blokken: twee naast
   elkaar op een breed scherm, één op een telefoon. De blokken zijn even
   breed maar niet even hoog — een korte recensie hoeft geen lege ruimte
   te krijgen. */
.vd-gb {
  background: #ffffff;
  padding: 0 16px 80px;
}
.vd-gb__filters {
  max-width: 1080px;
  margin: 0 auto 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.vd-gb__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid #cfe6ec;
  border-radius: 999px;
  background: #ffffff;
  color: #115664;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}
.vd-gb__filter img { width: 18px; height: 18px; border-radius: 4px; display: block; }
.vd-gb__filter:hover { border-color: #1e9eb7; background: #f2fafc; }
/* De actieve knop is gevuld, niet alleen omlijnd: op een rij pillen is
   een kleurverschil in de rand te weinig om te zien welke aan staat. */
.vd-gb__filter--aan {
  background: #1e9eb7;
  border-color: #1e9eb7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.28);
}
.vd-gb__filter--aan:hover { background: #115664; border-color: #115664; }

.vd-gb__rooster {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;      /* blokken houden hun eigen hoogte */
  gap: 22px;
}
@media (max-width: 767px) {
  .vd-gb__rooster { grid-template-columns: 1fr; gap: 16px; }
  .vd-gb { padding-bottom: 56px; }
}

.vd-gb__blok {
  background: linear-gradient(to bottom right, #2da4bc 0%, #1e9eb7 55%, #1a869b 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 22px 24px 20px;
  box-shadow: 0 4px 16px rgba(30, 158, 183, 0.22);
}
.vd-gb__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
/* De rij is even hoog als het cijfervakje van Booking
   (.vd-gb__cijfer, 38px), zodat beide soorten beoordelingen op dezelfde
   lijn staan. De sterren zelf zijn een slag kleiner dan dat vakje —
   vijf van 38px werden samen wel erg breed. */
.vd-gb__sterren { display: flex; align-items: center; gap: 2px; color: #ffd166; height: 38px; }
.vd-gb__ster { width: 30px; height: 30px; display: block; }
/* Het merkje in een wit vlakje, net als in de footer, zodat het logo
   op zijn eigen achtergrond staat en niet op het blauw. */
.vd-gb__merk {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ffffff;
  padding: 3px;
  box-sizing: border-box;
  object-fit: contain;
  flex: 0 0 auto;
}
.vd-gb__tekst {
  margin: 0 0 14px;
  font-family: 'Nunito', sans-serif;
  font-style: italic;   /* een citaat; stond zo door nicepage.css, nu met opzet */
  font-size: 0.97rem;
  line-height: 1.6;
  color: #ffffff;
}
.vd-gb__wie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: #dff1f4;
}
.vd-gb__naam { font-weight: 800; color: #ffffff; }
/* Het scheidingspuntje hoorde bij de oude opzet, waarin naam, land en
   datum achter elkaar op één regel stonden. Nu staat de datum op zijn
   eigen regel onder het vlaggetje en hoort er niets voor. */

.vd-gb__leeg {
  max-width: 1080px;
  margin: 40px auto 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  color: #4a6b75;
}

/* De footer korter maken
   ---------------------
   Nicepage duwde het logo in het middelste vak met een marge van 125px
   ver naar beneden, en vulde het nummerblok links op met losse <br>'s.
   Samen maakte dat de footer veel hoger dan de inhoud nodig heeft. De
   <br>'s haalt _zoom.js weg; de marge van het logo zetten we hier.

   Scoped op .u-footer: het logo in de bovenbalk heeft dezelfde klassen
   en moet blijven staan waar het staat. */
.u-footer a.u-logo,
.u-footer a.u-logo.u-image-1 {
  margin-top: 24px !important;
}

/* Nicepage zet een vaste minimumhoogte op het footervel (370px) en op
   elk vak (396px). Die waarden horen bij de oude indeling met het logo
   ver naar beneden; nu de inhoud hoger staat houden ze alleen lege
   ruimte vast. Laat de inhoud de hoogte bepalen.
   De 100px onderaan de footer blijft: dat is de ruimte voor de
   zwevende navigatiebalk. */
.u-footer .u-sheet,
.u-footer .u-sheet-1 {
  min-height: 0 !important;
}
.u-footer .u-layout-cell {
  min-height: 0 !important;
}
/* En het blokje om de nummers heen heeft een vaste 352px. Dat is de
   echte boosdoener: het hield de hele rij op hoogte. */
.u-footer .u-position,
.u-footer .u-position-1 {
  min-height: 0 !important;
  height: auto !important;
}

/* Gastenboekblok: gast linksboven, waardering rechtsboven
   ------------------------------------------------------
   Links een rondje met de eerste letter van de gast, daarnaast zijn
   naam met daaronder zijn vlaggetje en de maand van het verblijf.
   Rechts de waardering: bij Airbnb de sterren, bij Booking hun eigen
   cijfervakje. */
.vd-gb__kop {
  align-items: flex-start;
  margin-bottom: 14px;
}
.vd-gb__gast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.vd-gb__bol {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #4a6b75;              /* als er geen kleur is meegegeven */
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
}
.vd-gb__gegevens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.vd-gb__naam {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.2;
}
.vd-gb__vlag {
  width: 22px;
  height: 15px;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.vd-gb__wanneer {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  color: #dff1f4;
}

/* Het cijfervakje van Booking: hun donkerblauw, en rondom afgerond
   behalve linksonder — net als op hun eigen site. */
.vd-gb__cijfer {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0c3b7c;
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 8px 8px 8px 0;
}

/* De kop van de recensie. Met h2 ervoor en !important, want nicepage
   geeft elke h2 op de site 48px en hoofdletters. */
h2.vd-gb__titel {
  margin: 0 0 8px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

/* Het merkje van het platform onderaan, rechts uitgelijnd. */
.vd-gb__voet {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* De regel onder een vertaalde recensie. Grijs en klein: hij hoort bij
   de tekst maar mag er niet mee concurreren. 'Toon origineel' is een
   knop, geen link — er wordt niets geladen, alleen dit ene blok wisselt
   van tekst. */
.vd-gb__vertaalregel {
  margin: -4px 0 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #cfe6ec;
}
.vd-gb__wissel {
  padding: 0;
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
}
.vd-gb__wissel:hover,
.vd-gb__wissel:focus { color: #ffd166; }

/* Twee dingen die het aflegden tegen bestaande regels
   ---------------------------------------------------
   1. Alle vlaggetjes in de body staan op display:none, zodat alleen het
      taalstoplicht er een toont. Het vlaggetje bij een gast is een
      bewuste uitzondering daarop.
   2. Nicepage geeft elke <p> achttien pixels. De regel onder een
      vertaalde recensie hoort net zo klein te zijn als de knop erin. */
img.vd-gb__vlag {
  display: block !important;
}
p.vd-gb__vertaalregel,
p.vd-gb__vertaalregel .vd-gb__vertaaluitleg,
p.vd-gb__vertaalregel .vd-gb__wissel {
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

/* De beoordelingenstrook op de homepage
   -------------------------------------
   Daar stonden alleen de twee platformlogo's met hun cijfers op een wit
   kaartje. Nu staan de sterren en de knop naar het gastenboek er groot
   bovenop, en loopt er een verloop door de strook: gedacht in drieën is
   het linkerderde blauw en zijn de twee rechter derden wit. De overgang
   ligt dus rond een derde. */
/* Het verloop ligt op de hele strook en niet op het witte kaartje dat
   erin stond: zo loopt de band over de volle breedte van de pagina, en
   dat is wat je ziet als je hem in drieen deelt. Het kaartje zelf wordt
   dus doorzichtig. */
section#block-9 {
  background-image: linear-gradient(100deg,
    #1e9eb7 0%,
    #1e9eb7 23%,
    #85cad8 27%,
    #dff1f4 30%,
    #ffffff 33%,
    #ffffff 100%) !important;
}
section#block-9 .vd-beoordelingen {
  background: transparent !important;
  box-shadow: none !important;
}

/* De sterren hier een stuk groter dan in de footer: dit is het eerste
   wat je van de beoordelingen ziet. */
.vd-gastenboek--groot {
  display: flex;
  margin: 8px auto 26px;
}
.vd-gastenboek--groot .vd-sterren {
  gap: 7px;
  margin-bottom: 16px;
}
.vd-gastenboek--groot .vd-sterren svg {
  width: 46px;
  height: 46px;
}
/* In de footer moest het goud afgedwongen worden tegen de regel die dat
   vak blauw maakt; hier staat niets in de weg, maar de kleur hoort wel
   dezelfde te zijn. */
.vd-gastenboek--groot .vd-sterren svg path { fill: #ffd166; }
.vd-gastenboek--groot .vd-gastenboek-knop svg path { stroke: #ffffff; }

/* De twee platformblokjes eronder, netjes naast elkaar in het midden
   in plaats van met de marges van nicepage over elkaar heen. */
.vd-beoordelingen .u-group-elements {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}
.vd-beoordelingen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vd-beoordelingen .u-group-elements-1,
.vd-beoordelingen .u-group-elements-2 { flex: 0 0 auto; }

@media (max-width: 767px) {
  .vd-gastenboek--groot .vd-sterren svg { width: 34px; height: 34px; }
  /* Op een telefoon is een verloop over de breedte niet te zien; dan
     maar van boven naar beneden, met dezelfde verhouding. */
  section#block-9 {
    background-image: linear-gradient(170deg,
      #1e9eb7 0%,
      #1e9eb7 18%,
      #85cad8 24%,
      #dff1f4 30%,
      #ffffff 36%,
      #ffffff 100%) !important;
  }
}

/* De knoptekst is overal wit. In de footer moest dat met een extra
   specifieke regel afgedwongen worden tegen het blauw van dat vak; op
   de homepage stond er niets in de weg maar ook niets vóór, waardoor
   de tekst de kleur van zijn omgeving overnam. Hier dus algemeen. */
a.vd-gastenboek-knop,
a.vd-gastenboek-knop span {
  color: #ffffff !important;
}
a.vd-gastenboek-knop svg path {
  stroke: #ffffff !important;
}

/* De strook was 323px hoog voor 105px inhoud: de sectie hield 56px
   boven en onder aan, het vel daarbinnen nog eens 36px, en de kolom
   met de sterren had ook nog marges. Die lagen stapelden op elkaar.
   Eén marge is genoeg. */
section#block-9 {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}
section#block-9 .vd-beoordelingen {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.vd-gastenboek--groot {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tweede sfeerblok op de homepage: titel in de huisstijl, gecentreerd
   ------------------------------------------------------------------
   'Vida Daurada' stond er als Nunito 36px in een blok dat op een breed
   scherm tegen de rechterkant werd gedrukt. Het krijgt nu dezelfde kop
   als elke andere pagina (.vd-fresh__title): schreefletter, het
   streepje eronder, en dezelfde maat. De ondertitel eronder krijgt de
   maat van .vd-fresh__subtitle.

   Alles hangt aan body.vd-home-page, want #block-1 bestaat ook op de
   check-in-pagina's en die moeten hier niets van merken. */

/* Het vel is een flex-kolom. Daar regelt align-items de zijkant en
   justify-content de hoogte — die stond op flex-end en duwde de kaart
   dus naar rechts. Alleen align-items aanpassen; de verticale plaatsing
   (onderaan de foto) blijft zoals hij was. */
body.vd-home-page section#block-1 .u-sheet {
  align-items: center !important;
  /* Het vel had 60px ruimte rechts en 16px links; dat hoorde bij de
     kaart die tegen de rechterkant stond. Nu hij in het midden staat
     moet die ruimte aan beide kanten gelijk zijn, anders staat hij er
     net naast. */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* De kop. De kleur zit op de span erbinnen, dus die moet mee. */
body.vd-home-page section#block-1 h1.u-text-1,
body.vd-home-page section#block-1 h1.u-text-1 span {
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  color: #1a869b !important;
  text-transform: none !important;
}
/* Nicepage geeft kop en ondertitel display: table. Zo'n blok is precies
   zo breed als zijn tekst en gaat links staan; de tekst erbinnen
   centreren verandert dan niets. Als gewoon blok vullen ze de breedte
   en komt het centreren wél aan. */
body.vd-home-page section#block-1 h1.u-text-1,
body.vd-home-page section#block-1 blockquote.u-text-2 {
  display: block !important;
  width: auto !important;
  text-align: center !important;
}
body.vd-home-page section#block-1 h1.u-text-1 {
  margin: 0 0 8px !important;
}
/* Hetzelfde streepje als op de andere pagina's. */
body.vd-home-page section#block-1 h1.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;
}

/* De ondertitel. Het is een blockquote, dus nicepage maakt hem schuin
   en kleiner; .vd-fresh__subtitle is een gewone alinea van 18px. */
body.vd-home-page section#block-1 blockquote.u-text-2 {
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #115664 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  text-align: center !important;
}

/* === Homepage sectie 6: blauw kader om de openingsalinea =============
   De eerste drie regels (de piscina, de vida daurada en het lema) zijn
   de kern van het verhaal. Die staan nu in een gevuld kader in het
   huisstijlblauw, zodat ze als intro loskomen van de alinea's eronder.
   Het is een <span> en geen <div>: de hele tekst staat in een <p> die
   Nicepage hier neerzet, en daar mag geen blok-element in staan. Met
   display:block gedraagt hij zich verder gewoon als een kader.
   De drie taalvarianten staan alledrie in de pagina; JS toont er een. */
body.vd-home-page section.u-section-6 .vd-section6-body .vd-intro-kader {
  display: block;
  background: #1a869b;
  color: #ffffff !important;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 22px;
  line-height: 1.6;
}

/* De sportieve inleiding van de alinea daaronder vet. De witregel naar
   de rest van die alinea zit in de HTML (<br><br>), omdat het binnen
   een en dezelfde <p> staat en een marge daar niets doet. */
body.vd-home-page section.u-section-6 .vd-section6-body .vd-intro-vet {
  font-weight: 700;
  color: #2a5c68;
}

/* Nicepage gaf het accordeon-omhulsel een harde breedte:
   .u-section-6 .u-accordion-1 { width: 1001px }. Het vel eromheen is
   820px, dus die 1001px paste er niet in; 'margin: auto' kan een te
   breed blok niet centreren en dus stak het er 181px aan de rechterkant
   uit. Daardoor stond de hele tekst van deze sectie — titel, kader en
   alinea's — 91px uit het midden van de pagina. Met een breedte van
   100% volgt hij gewoon het vel. */
body.vd-home-page section.u-section-6 .u-accordion-1 {
  width: 100% !important;
  max-width: 100% !important;
}

/* De slotregel met de doorverwijzingen schuingedrukt, inclusief de drie
   links erin. <em> is van zichzelf al cursief; deze regel staat er voor
   het geval een Nicepage-regel dat alsnog terugzet. */
body.vd-home-page section.u-section-6 .vd-section6-body .vd-intro-slot,
body.vd-home-page section.u-section-6 .vd-section6-body .vd-intro-slot a {
  font-style: italic !important;
}

/* === Fotopagina: de swipe-strook bovenaan over de volle breedte =====
   Het vel eromheen was 1140px breed; nu loopt de strook van rand tot
   rand. Het witte paneel eromheen — afgeronde hoeken, schaduw en een
   rand van 18px — hoort niet bij een strook die de hele breedte pakt,
   dus dat gaat er voor deze ene sectie af. De foto's zelf houden hun
   eigen ronde hoeken. */
body.vd-photos-page section#block-gallery .u-sheet {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: relative;
}
body.vd-photos-page section#block-gallery .u-gallery {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Het handje dat aangeeft dat je op de foto's kunt klikken en vegen.
   Het woordje 'Clic' is eruit. Het icoon lag half onder de foto's in de
   witte rand; het ligt nu als overlay op de strook zelf. De horizontale
   plek zet vdHandjeOpFoto() in _zoom.js: op het midden van de foto die
   het dichtst bij het midden van de strook ligt, zodat het nooit in de
   naad tussen twee foto's valt. De 50% hieronder is alleen de stand
   voordat die functie heeft gedraaid, en staat daarom zonder !important
   — anders zou de stijl van het script het niet kunnen overschrijven.
   pointer-events staat uit, anders vangt het handje de klik af die naar
   de foto eronder moet. */
body.vd-photos-page section#block-gallery p.u-text-1 {
  position: absolute !important;
  left: 50%;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: center !important;
  pointer-events: none;
  z-index: 3;
}
body.vd-photos-page section#block-gallery p.u-text-1 .u-icon-1 {
  width: 86px !important;
  height: 76px !important;
  display: inline-block !important;
  vertical-align: middle;
}
body.vd-photos-page section#block-gallery p.u-text-1 .vd-veeg__svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* Een schaduwtje, zodat het witte handje ook op een lichte foto
     zichtbaar blijft. */
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
}
/* Het handje schuift zachtjes heen en weer; de pijltjes ernaast blijven
   staan, zodat je ziet hoe ver de beweging gaat. */
@keyframes vd-veeg-heen-en-weer {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-7px); }
  65%      { transform: translateX(7px); }
}
body.vd-photos-page section#block-gallery p.u-text-1 .vd-veeg__hand {
  animation: vd-veeg-heen-en-weer 2.6s ease-in-out infinite;
}
/* Zodra er geveegd is, verdwijnt het handje. Het komt binnen dit bezoek
   niet meer terug; de klasse zet vdStrookVegen() in _zoom.js. */
body.vd-photos-page section#block-gallery p.u-text-1 {
  /* visibility springt van zichzelf, dus die pas omzetten als het
     wegvagen klaar is — anders is het handje ineens weg in plaats van
     dat het oplost. */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
body.vd-photos-page section#block-gallery p.u-text-1.vd-veeg--weg {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  body.vd-photos-page section#block-gallery p.u-text-1 .vd-veeg__hand {
    animation: none;
  }
}
@media (max-width: 767px) {
  body.vd-photos-page section#block-gallery p.u-text-1 .u-icon-1 {
    width: 70px !important;
    height: 62px !important;
  }
}

/* === Fotopagina: geen bolletjes meer naast de strook ================
   Die van Nicepage (.u-gallery-nav) blijven in de pagina staan, want
   zijn eigen script zoekt ze op, maar niemand ziet of raakt ze. Vegen
   is nu de enige manier; met een muis kun je de strook verslepen, dat
   regelt vdStrookVegen() in _zoom.js. */
body.vd-photos-page section#block-gallery .u-gallery-nav {
  display: none !important;
}
body.vd-photos-page section#block-gallery .u-gallery-inner {
  cursor: grab;
}
body.vd-photos-page section#block-gallery .u-gallery-inner.vd-sleept {
  cursor: grabbing;
  user-select: none;
}

/* === Het fotoscherm (PhotoSwipe): makkelijker weer weg =============
   Het kruisje was 44px, half doorzichtig en verdween op een telefoon
   vanzelf zodra je het scherm aanraakte. Nu een duidelijk bolletje in
   dezelfde stijl als de knoppen bij de strook, dat blijft staan. Een tik
   naast de foto sluit het scherm ook; dat regelt _zoom.js. */
.pswp__top-bar {
  background: none !important;
}
.pswp__ui--idle .pswp__top-bar,
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui .pswp__button--close {
  opacity: 1 !important;
  transform: none !important;
}
.pswp__button--close {
  width: 54px !important;
  height: 54px !important;
  margin: 10px 12px 0 0 !important;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #1a869b !important;
  background-image: none !important;   /* het spritevelletje van PhotoSwipe */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  position: relative;
}
/* Het kruisje zelf: twee streepjes, zodat we niet van het spritevelletje
   afhankelijk zijn en het op elk formaat scherp blijft. */
.pswp__button--close::before,
.pswp__button--close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2.6px;
  margin: -1.3px 0 0 -12px;
  border-radius: 2px;
  background: #ffffff;
}
.pswp__button--close::before { transform: rotate(45deg); }
.pswp__button--close::after  { transform: rotate(-45deg); }
@media (hover: hover) {
  .pswp__button--close:hover { background: #115664 !important; }
}
@media (max-width: 767px) {
  .pswp__button--close {
    width: 48px !important;
    height: 48px !important;
    margin: 8px 8px 0 0 !important;
  }
  .pswp__button--close::before,
  .pswp__button--close::after { width: 21px; margin-left: -10.5px; }
}

/* Ook in het fotoscherm geen bladerpijlen. Je veegt er doorheen — met
   een vinger, en met de muis door de foto te verslepen, wat PhotoSwipe
   zelf al kan. De pijltjestoetsen op het toetsenbord blijven werken. */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  display: none !important;
}

/* === Contactpagina: één kolom =======================================
   De pagina stond in twee kolommen, met links het adres en rechts het
   formulier in een wit kader binnen een blauw kader. Nu één kolom in
   het midden: titel, ondertitel, het formulier in hetzelfde lichte
   kader als op de andere formulierpagina's, en daaronder WhatsApp.
   vdContactEenKoloms() in _zoom.js zet de onderdelen op hun plek. */
.vd-contact {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 8px;
  text-align: center;
}
body.vd-contact-page section.u-section-1 .u-sheet {
  max-width: 1140px;
}

/* Titel en ondertitel boven het kader. De opmaak van de titel zelf
   staat al hoger in dit bestand bij 'Contactpagina'. */
.vd-contact .vd-contact__onder {
  margin: 0 auto 26px !important;
  color: #4a6b75 !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
}
/* Nicepage hing er drie lege regels onder om ruimte te maken naast de
   oude tweede kolom; die hoeven niet meer. */
.vd-contact .vd-contact__onder br { display: none; }

/* Het kader zelf: dezelfde vorm, kleur en schaduw als het kader om het
   reserveringsformulier en het check-informulier. */
.vd-contact__kader {
  background: #f6fbfd;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
  padding: 28px 24px 32px;
  text-align: left;
}
/* Het witte kader binnenin verdwijnt: het kader eromheen is nu het
   kader. */
.vd-contact__kader .u-form {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.vd-contact__kader .u-form form {
  padding: 0 !important;
  margin: 0 !important;
}

/* Kopje binnen het kader en het kopje boven de WhatsApp-knop: dezelfde
   maat, zodat de twee manieren om contact op te nemen als een paar
   lezen. */
.vd-contact .vd-contact__formkop,
.vd-contact .vd-contact__appkop {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #1a869b !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.vd-contact .vd-contact__appkop { margin-top: 34px !important; }

/* De velden. De vorm komt van .vd-cal-form__input; hier alleen wat dit
   formulier nog nodig heeft. */
.vd-contact__kader .u-form-group {
  margin: 0 0 16px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
/* De labels stonden boven de velden en herhaalden letterlijk wat er al
   in het veld staat. */
.vd-contact__kader .u-label { display: none !important; }

.vd-contact__kader .vd-cal-form__input {
  height: auto !important;
  min-height: 0 !important;
  border: none !important;
}
/* Het berichtveld is geen pilletje maar een vlak; het icoon staat
   daarom bovenin en niet in het midden. */
.vd-contact__bericht .vd-cal-form__input {
  border-radius: 18px !important;
  min-height: 130px !important;
  padding: 14px 44px 14px 44px !important;
  resize: vertical;
}
.vd-contact__bericht .vd-cal-form__input-icon,
.vd-contact__bericht .vd-cal-form__input-check {
  top: 20px;
  transform: none;
}

/* De verzendknop in het conversiegroen van de andere formulieren, in
   het midden onder de velden. */
.vd-contact__kader .u-form-submit {
  text-align: center !important;
  margin: 22px 0 0 !important;
}
.vd-contact__kader .u-btn-submit {
  display: inline-block !important;
  background: #2e9c3a !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.30) !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .vd-contact__kader .u-btn-submit:hover {
    background: #268d31 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(46, 156, 58, 0.40) !important;
  }
}

/* De WhatsApp-knop onder het kader, in de groene huisstijlkleur van
   WhatsApp zelf en even groot als de verzendknop. */
.vd-contact .vd-contact__wa {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #25d366 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.32) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .vd-contact .vd-contact__wa:hover {
    background: #1fb855 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.42) !important;
  }
}
.vd-contact .vd-contact__wa .u-icon {
  width: 20px;
  height: 20px;
  margin: 0 !important;
}
.vd-contact .vd-contact__wa .u-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* De meldingen onder het formulier netjes in het midden. */
.vd-contact__kader .u-form-send-message {
  text-align: center !important;
  margin-top: 14px !important;
}

@media (max-width: 575px) {
  .vd-contact__kader { padding: 22px 16px 26px; }
}

/* Nicepage zet de vorm en de kleuren van deze knoppen en velden met
   !important via zijn eigen kleurklassen (u-custom-color-29 voor de
   verzendknop, u-custom-color-34 voor WhatsApp, u-radius voor de
   velden). Door de klasse te verdubbelen weegt onze regel zwaarder,
   zonder aan de Nicepage-CSS zelf te komen. */
body.vd-contact-page .vd-contact__kader .vd-cal-form__input.vd-cal-form__input {
  border-radius: 999px !important;
}
body.vd-contact-page .vd-contact__bericht .vd-cal-form__input.vd-cal-form__input {
  border-radius: 18px !important;
}
body.vd-contact-page .vd-contact__kader .u-btn-submit.u-btn-submit {
  background-color: #2e9c3a !important;
  color: #ffffff !important;
}
@media (hover: hover) {
  body.vd-contact-page .vd-contact__kader .u-btn-submit.u-btn-submit:hover {
    background-color: #268d31 !important;
  }
}
body.vd-contact-page .vd-contact .vd-contact__wa.vd-contact__wa {
  background-color: #25d366 !important;
  color: #ffffff !important;
}
@media (hover: hover) {
  body.vd-contact-page .vd-contact .vd-contact__wa.vd-contact__wa:hover {
    background-color: #1fb855 !important;
  }
}

/* De velden liepen 20px buiten het kader: Nicepage geeft de rij een
   negatieve marge en elk veld een eigen padding om die weer op te
   vangen. Binnen dit kader is die constructie niet nodig. */
body.vd-contact-page .vd-contact__kader .u-inner-form,
body.vd-contact-page .vd-contact__kader .u-form-spacing-20 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.vd-contact-page .vd-contact__kader .u-form-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nicepage maakt het formulier 20px breder dan zijn omhulsel en vangt
   dat op met een negatieve marge. Die marge hebben we hierboven al
   weggehaald; dan moet de breedte ook terug naar normaal, anders steekt
   alles 20px buiten het kader. */
body.vd-contact-page .vd-contact__kader .u-inner-form {
  width: 100% !important;
}

/* De sectie had nog de beige Nicepage-achtergrond. Op alle andere
   pagina's met een formulier loopt daar hetzelfde lichte verloop. */
body.vd-contact-page section.u-section-1 {
  /* Wit bovenaan, zodat het lichtblauwe kader daar los van komt. */
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
  padding: 48px 0 64px !important;
}

/* De kop van de pagina kwam onder de koptekstbalk, want de balk ligt
   over de eerste sectie heen (u-overlap). Ruimte erboven dus. */
body.vd-contact-page section.u-section-1 {
  padding-top: 124px !important;
}

/* Nicepage zet het formulier op flex met een tussenruimte van 20px.
   Samen met de marge onder elk veld werd dat 36px. Eén van de twee is
   genoeg. */
body.vd-contact-page .vd-contact__kader .u-inner-form {
  gap: 18px !important;
}
body.vd-contact-page .vd-contact__kader .u-form-group {
  margin-bottom: 0 !important;
}
body.vd-contact-page .vd-contact__kader .u-form-submit {
  margin-top: 6px !important;
}
/* Het plekje voor de Turnstile-controle is in rust nul pixels hoog;
   Cloudflare vult het alleen als hij twijfelt aan de bezoeker. Zijn
   eigen marges kwamen boven op de tussenruimte van het formulier en
   lieten daar een gat achter. De tussenruimte doet het werk al. */
body.vd-contact-page .vd-contact__kader .vd-turnstile-host {
  margin: 0 !important;
}

/* Nicepage geeft het WhatsApp-logo een breedte van 1em bij een
   lettergrootte van 34px, waardoor het buiten de knop stak. */
body.vd-contact-page .vd-contact__wa .u-icon,
body.vd-contact-page .vd-contact__wa .u-icon img {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  flex: none;
}

/* Het vel had een vaste minimumhoogte van 917px, afgestemd op de oude
   twee kolommen. Eén kolom is korter, dus bleef er een lege strook van
   bijna 280px onder de WhatsApp-knop staan. */
body.vd-contact-page section.u-section-1 .u-sheet {
  min-height: 0 !important;
  height: auto !important;
}

/* De WhatsApp-knop in hetzelfde conversiegroen als de verzendknop. */
body.vd-contact-page .vd-contact .vd-contact__wa,
body.vd-contact-page .vd-contact .vd-contact__wa.vd-contact__wa {
  background-color: #2e9c3a !important;
  box-shadow: 0 2px 8px rgba(46, 156, 58, 0.30) !important;
}
@media (hover: hover) {
  body.vd-contact-page .vd-contact .vd-contact__wa.vd-contact__wa:hover {
    background-color: #268d31 !important;
    box-shadow: 0 4px 14px rgba(46, 156, 58, 0.40) !important;
  }
}
/* Het logo hing op de tekstregel in plaats van in het midden van de
   knop: het staat in een inline span en een afbeelding gaat daar op de
   basislijn staan, met de ruimte voor staartletters eronder. */
body.vd-contact-page .vd-contact__wa .u-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
body.vd-contact-page .vd-contact__wa .u-icon img {
  display: block !important;
  vertical-align: middle;
}

/* === Reservar-pagina: eerst de kop en de prijzen, dan de kalender ====
   De kalender stond bovenaan en het blok met 'Reservar/Book', de
   ondertitel en de prijzen kwam er pas onder. Nu leest de pagina als
   alle andere: kop, ondertitel, tekst, en daarna pas het formulier.
   De volgorde zelf zet _calendar.js; hier staat wat er aan opmaak bij
   hoort. */

/* Geen sfeerfoto meer achter deze sectie, net als op de andere pagina's
   met een formulier. */
body.vd-reservar-page section.u-section-1,
body.vd-reservar-page section.u-section-1.u-image {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
  padding-top: 124px !important;
  padding-bottom: 64px !important;
}
body.vd-reservar-page section.u-section-1::before,
body.vd-reservar-page section.u-section-1 > .vd-bg-zoom {
  display: none !important;
}
/* Het vel had een vaste hoogte die op de oude indeling was afgestemd. */
body.vd-reservar-page section.u-section-1 .u-sheet {
  min-height: 0 !important;
  height: auto !important;
}

/* De kalender hield 110px ruimte vrij omdat hij vlak onder de
   koptekstbalk begon. Die ruimte zit nu in de sectie zelf; hier is een
   gewone tussenruimte genoeg. */
body.vd-reservar-page .vd-cal {
  padding-top: 40px !important;
  margin-top: 34px;
}

/* 'van november tot maart' hoort bij de prijs erboven en mag kleiner. */
body.vd-reservar-page .vd-prijs-periode {
  font-size: 0.9rem;
  font-weight: 400 !important;
}

/* Nicepage hield 195px vrij boven de prijzenlijst, ruimte voor iets dat
   er in de oude indeling naast stond. Nu is het gewoon de volgende
   alinea onder de ondertitel. */
body.vd-reservar-page section.u-section-1 .u-group-1 p.u-text-3 {
  margin-top: 26px !important;
}

/* Het contentkader had een vaste minimumhoogte van 878px uit de oude
   indeling; daardoor bleef er onder de uitzonderingsregel een lege
   strook van zo'n 250px staan. */
body.vd-reservar-page section.u-section-1 .u-group-1,
body.vd-reservar-page section.u-section-1 .u-group-1 > .u-container-layout {
  min-height: 0 !important;
  height: auto !important;
}

/* De kop en de ondertitel staan nu boven het kader (dat regelt
   _calendar.js). Wat overblijft in het kader is de prijzenlijst; die
   krijgt dezelfde vorm en breedte als het kalenderblok eronder, zodat
   de twee als een paar onder elkaar staan. Het bijna-witte kader viel
   op de lichte achtergrond toch weg. */
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 {
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #f6fbfd !important;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15) !important;
}

/* De uitzonderingsregel onder de prijzen stond in het wit, want hij lag
   vroeger op het blauwe kader. Op het lichte kader was daar niets meer
   van te lezen. */
body.vd-reservar-page section.u-section-1 blockquote.u-text-5,
body.vd-reservar-page section.u-section-1 blockquote.u-text-5 span,
body.vd-reservar-page section.u-section-1 blockquote.u-text-5 font {
  color: #4a6b75 !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}
body.vd-reservar-page section.u-section-1 blockquote.u-text-5 span[style*="font-weight: 700"],
body.vd-reservar-page section.u-section-1 blockquote.u-text-5 b {
  color: #1a869b !important;
}
/* Het blauwe streepje links hoorde bij de oude opmaak; een gecentreerde
   regel heeft er niets aan. */
body.vd-reservar-page section.u-section-1 blockquote.u-text-5 {
  border-left: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 26px auto 0 !important;
  max-width: 620px;
}

/* === Het uitklapbare 'ALTRES / OTROS / OTHER'-pilletje ==============
   De wintermaanden hebben een uitzondering voor de feestdagen. Die drie
   regels hoeven niet altijd in beeld; ze zitten achter een pilletje met
   een pijltje. _zoom.js klapt het open en dicht. */
body.vd-reservar-page .vd-prijs-pil {
  /* inline-block en niet inline-flex: in een flexbox vallen de spaties
     tussen de woorden weg, en dan staat er OTHER77,-. */
  display: inline-block;
  margin: 0;
  padding: 7px 16px;
  border: 1px solid rgba(30, 158, 183, 0.28);
  border-radius: 999px;
  background: rgba(30, 158, 183, 0.07);
  color: #1a869b;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  body.vd-reservar-page .vd-prijs-pil:hover {
    background: rgba(30, 158, 183, 0.14);
    border-color: rgba(30, 158, 183, 0.45);
  }
}
body.vd-reservar-page .vd-prijs-pil:focus-visible {
  outline: 2px solid #1a869b;
  outline-offset: 2px;
}
body.vd-reservar-page .vd-prijs-ster {
  font-weight: 700;
}
body.vd-reservar-page .vd-prijs-chevron {
  width: 16px;
  height: 16px;
  margin-left: 9px;
  vertical-align: -3px;
  transition: transform 0.2s ease;
}
body.vd-reservar-page .vd-prijs-pil[aria-expanded="true"] .vd-prijs-chevron {
  transform: rotate(180deg);
}

/* De drie feestdagregels achter het pilletje. */
body.vd-reservar-page .vd-prijs-extra {
  display: block;
  margin: 14px auto 0;
  max-width: 420px;
  text-align: center;
}
body.vd-reservar-page .vd-prijs-extra[hidden] {
  display: none;
}
body.vd-reservar-page .vd-prijs-extra__ster {
  display: block;
  color: #1a869b;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
body.vd-reservar-page .vd-prijs-extra__regel {
  display: block;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #4a6b75;
}
body.vd-reservar-page .vd-prijs-extra__regel i {
  font-style: italic;
}
body.vd-reservar-page .vd-prijs-extra__regel b {
  font-weight: 700;
  color: #1a869b;
}

/* === Reservar-pagina: kalender en prijzen in één kader ==============
   Op een breed scherm staat de kalender links en de prijzenlijst rechts
   ernaast, rechts uitgelijnd. Op een smal scherm vallen ze onder
   elkaar: eerst de kalender, dan de prijzen. De kalender zelf staat in
   de pagina als eerste kind van het kader; dat zet _calendar.js.
   Alleen hier — de kalender op de homepage blijft zoals hij was. */
body.vd-reservar-page section.u-section-1 .u-group-1 > .u-container-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 24px 24px 28px !important;
}
@media (min-width: 992px) {
  body.vd-reservar-page section.u-section-1 .u-group-1 > .u-container-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    column-gap: 40px;
    align-items: start;
  }
  body.vd-reservar-page section.u-section-1 .vd-cal {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  body.vd-reservar-page section.u-section-1 .u-group-elements-1 {
    grid-column: 2;
    grid-row: 1;
  }
  body.vd-reservar-page section.u-section-1 blockquote.u-text-5 {
    grid-column: 2;
    grid-row: 2;
  }
  /* De prijzen rechts uitgelijnd, zodat de bedragen onder elkaar aan
     de buitenrand staan. */
  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-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 {
    text-align: right !important;
  }
  body.vd-reservar-page section.u-section-1 blockquote.u-text-5 {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  body.vd-reservar-page section.u-section-1 .vd-prijs-extra {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
}

/* De kalender is nu een onderdeel van het kader en geen eigen kaart
   meer: geen tweede achtergrond, schaduw of ronding binnen de eerste. */
body.vd-reservar-page section.u-section-1 .vd-cal {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Het kader mag breder nu er twee kolommen in staan. */
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 {
  max-width: 1040px;
}

/* Het groepje waar de titel in zat is leeg achtergebleven. */
body.vd-reservar-page section.u-section-1 .u-group-elements-3:empty {
  display: none !important;
}

@media (max-width: 991px) {
  /* Onder elkaar: kalender boven, prijzen eronder, met wat lucht
     ertussen. */
  body.vd-reservar-page section.u-section-1 .u-group-elements-1 {
    margin-top: 26px;
  }
}

/* De prijzenkolom begon 57px lager dan de kalender ernaast: Nicepage
   gaf het groepje een eigen bovenruimte en de alinea nog een marge.
   Naast elkaar horen ze op dezelfde hoogte te beginnen. */
@media (min-width: 992px) {
  body.vd-reservar-page section.u-section-1 .u-group-elements-1,
  body.vd-reservar-page section.u-section-1 .u-group-elements-2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
  }
  body.vd-reservar-page section.u-section-1 .u-group-1 p.u-text-3 {
    margin-top: 0 !important;
  }
}

/* Het kader hing 84px onder de ondertitel, nog van de oude indeling.
   Net als op de contactpagina mag het er vlak onder staan. */
body.vd-reservar-page section.u-section-1 .u-group-1 {
  margin-top: 26px !important;
}

/* === De prijzenlijst als echte regels ===============================
   Was één lap tekst met <br>'s, waarin april, mei en juni ook nog in
   hetzelfde omhulsel zaten. Nu is elke maand een eigen regel met een
   data-maand, zodat de kalender de maanden kan dimmen waar de gast
   niet logeert. */
body.vd-reservar-page .vd-prijs-regel {
  display: block;
}
body.vd-reservar-page .vd-prijs-regel + .vd-prijs-regel {
  margin-top: 20px;
}
body.vd-reservar-page .vd-prijs-regel b {
  font-weight: 700;
}
/* Een witregel tussen oktober en het pilletje. */
body.vd-reservar-page .vd-prijs-regel--pil {
  margin-top: 44px !important;
}
body.vd-reservar-page .vd-prijs-periode {
  margin-top: 7px !important;
}

/* Maanden waarin de gekozen periode niet valt, raken op de achtergrond.
   markeerPrijzen() in _calendar.js zet de klasse bij elke keuze. */
body.vd-reservar-page [data-maand] {
  transition: opacity 0.25s ease;
}
body.vd-reservar-page [data-maand].vd-prijs-uit {
  opacity: 0.28;
}


/* === Check-in: het derde kader met de vragen =======================
   De vragen over check-in en check-out stonden als uitklapcategorie op
   de vragenpagina; daar moest je ze zoeken terwijl ze hier horen. De
   categorie eromheen is weg, maar elke vraag blijft een uitklapper,
   net als op de vragenpagina. Het kader loopt over de volle breedte,
   onder de twee andere, in één kolom. */
.vd-metro--vragen {
  max-width: 1180px;
  margin: 22px auto 0;
}
.vd-vragen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* De vraag zelf: een witte balk die je aanklikt. Wit en niet lichtblauw
   zoals op de vragenpagina, want het kader eronder heeft daar al die
   kleur en dan zie je de balk niet. */
.vd-vraag__knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 158, 183, 0.12);
  color: #1e9eb7;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .vd-vraag__knop:hover {
    background: #e8f4f7;
    box-shadow: 0 4px 14px rgba(30, 158, 183, 0.2);
  }
}
.vd-vraag__knop:focus-visible {
  outline: 2px solid #1a869b;
  outline-offset: 2px;
}
.vd-vraag__knop[aria-expanded="true"] {
  background: #1e9eb7;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.24);
}
/* Vetgedrukt in de vraag zelf. De balk staat al op 600, dus 700 zou
   nauwelijks opvallen; 800 wel. */
.vd-vraag__tekst b { font-weight: 800; }

/* Een verbodsteken achter de vraag, even hoog als de regel zelf. */
.vd-vraag__verbod {
  width: 1.7em;
  height: 1.7em;
  margin-left: 8px;
  vertical-align: -0.5em;
}

/* Het pijltje in een bolletje, zoals de knoppen elders op de site. */
.vd-vraag__pijl {
  width: 16px;
  height: 16px;
  padding: 6px;
  box-sizing: content-box;
  flex: none;
  border-radius: 50%;
  background: rgba(30, 158, 183, 0.12);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.vd-vraag__knop[aria-expanded="true"] .vd-vraag__pijl {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(180deg);
}

.vd-vraag__antwoord {
  padding: 12px 18px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4a6b75;
}
.vd-vraag__antwoord[hidden] {
  display: none;
}
/* Een antwoord van meer dan één alinea: witregels ertussen, niets
   eromheen. Nicepage zet op elke <p> een eigen regelafstand en kleur;
   binnen een antwoord telt die van het antwoord zelf. */
.vd-vraag__antwoord p {
  margin: 0 0 10px;
  font-size: inherit !important;
  line-height: inherit;
  color: inherit !important;
}
.vd-vraag__antwoord p:last-child { margin-bottom: 0; }

/* Vetgedrukt in een antwoord krijgt het huisstijlblauw, zodat tijden en
   voorwaarden er echt uit springen. */
.vd-vraag__antwoord b {
  font-weight: 700;
  color: #1a869b;
}

/* Hetzelfde vragenkader op de reserveringspagina, even breed als het
   kader met de kalender en de prijzen erboven. */
body.vd-reservar-page .vd-metro--vragen {
  max-width: 1040px;
  margin: 22px auto 0;
}

/* Een opsomming in een antwoord: bolletjes in het huisstijlblauw, en
   wat lucht tussen de regels. */
.vd-vraag__antwoord ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Staat er een opsomming tussen alinea's in, dan hoort er aan beide
   kanten evenveel lucht als tussen twee alinea's. */
.vd-vraag__antwoord p + ul,
.vd-vraag__antwoord b + ul { margin-top: 10px; }
.vd-vraag__antwoord ul + p { margin-top: 10px; }
.vd-vraag__antwoord li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
}
.vd-vraag__antwoord li:last-child {
  margin-bottom: 0;
}
.vd-vraag__antwoord li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a869b;
}

/* Een link in een antwoord in hetzelfde goud als het 'vragen'-linkje
   onder de kop van de contactpagina. */
.vd-vraag__antwoord a.vd-vraag__link,
.vd-vraag__antwoord a.vd-vraag__link:visited {
  color: #d1c883;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 200, 131, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .vd-vraag__antwoord a.vd-vraag__link:hover {
    color: #c0b566;
    border-bottom-color: #c0b566;
  }
}

/* Een beoordeling zonder toelichting: geen citaatblok maar een rustig
   regeltje, zodat het blok niet leeg oogt. */
p.vd-gb__geentekst {
  margin: 0 0 4px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.92rem !important;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Het linkje naar de huisregels, onderaan de rechterkolom van de
   voettekst. Klein en rustig: het hoort erbij, maar het hoeft niet op
   te vallen naast de beeldmerken erboven. */
a.vd-regels-link {
  display: block;
  margin: 18px 0 0;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8125rem;
  color: #ffffff;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
a.vd-regels-link:hover,
a.vd-regels-link:focus { opacity: 1; color: #ffffff; }

/* =================================================
   Normes i condicions
   =================================================
   Zes tegels die naar zes onderdelen op dezelfde pagina springen:
   drie naast elkaar op een breed scherm, twee op een telefoon. De
   onderdelen eronder staan in dezelfde kaders als elders op de site. */
/* De vaste 26px tussen de ondertitel en wat eronder komt. .vd-fresh
   houdt er standaard 28 aan; hier telt de huisregel. */
body.vd-regels-page .vd-fresh { padding-bottom: 26px; }

.vd-regels {
  background: #ffffff;
  padding: 0 16px 80px;
}
.vd-regels__tegels {
  max-width: 1080px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .vd-regels__tegels { grid-template-columns: repeat(2, 1fr); }
}
/* De tegel is een knop: hij klapt zijn eigen onderdeel open. Vandaar de
   paar regels die de eigen opmaak van een <button> wegnemen. */
.vd-regels__tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 22px 14px 18px;
  border: none;
  border-radius: 14px;
  background: #1e9eb7;
  box-shadow: 0 4px 14px rgba(30, 158, 183, 0.18);
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.vd-regels__tegel:hover,
.vd-regels__tegel:focus-visible {
  background: #1a869b;
  box-shadow: 0 6px 20px rgba(30, 158, 183, 0.28);
  transform: translateY(-2px);
}
/* 'Article 1' in een eigen pilletje bovenaan de tegel. Stond eerst als
   los cijfer in de hoek; met het woord erbij past dat niet meer, en
   gecentreerd boven het icoontje botst het ook nooit met de titel. */
.vd-regels__nr {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.vd-regels__icoon {
  display: inline-flex;
  color: #ffffff;
}
.vd-regels__icoon svg { width: 30px; height: 30px; display: block; }
.vd-regels__tegelkop {
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
}
@media (max-width: 420px) {
  .vd-regels__tegel { padding: 20px 10px 16px; }
  .vd-regels__tegelkop { font-size: 0.875rem; }
}

/* Het onderdeel dat een tegel openklapt: het staat in hetzelfde
   rooster, vlak onder de rij van zijn eigen tegel, over de volle
   breedte. Het puntje erboven wijst naar de tegel waar het uit komt;
   waar dat puntje staat wordt gemeten en komt binnen als --vd-punt. */
.vd-regels__paneel {
  position: relative;
  align-self: start;
  scroll-margin-top: 124px;
}
.vd-regels__paneel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--vd-punt, 50%);
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 3px;
  background: #f6fbfd;
  transform: rotate(45deg);
}
/* De open tegel blijft donker staan, zodat te zien is waar het
   onderdeel eronder vandaan komt. */
.vd-regels__tegel--open {
  background: #1a869b;
  box-shadow: 0 6px 20px rgba(30, 158, 183, 0.28);
}

/* Het slotblok onder de tegels staat los van het rooster. */
.vd-regels__kaart--algemeen {
  max-width: 1080px;
  margin: 22px auto 0;
}
.vd-regels__kaart {
  padding: 22px clamp(14px, 2vw, 24px) 26px;
  background: #f6fbfd;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 158, 183, 0.15);
  /* De menubalk blijft bovenaan staan; zonder deze marge verdwijnt de
     kop van het onderdeel eronder zodra je op een tegel klikt. */
  scroll-margin-top: 124px;
}
h2.vd-regels__kop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: none !important;
  font-family: serif !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: #1a869b !important;
  text-align: center;
  margin: 0 !important;
}
.vd-regels__kopnr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #1e9eb7;
  color: #ffffff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8125rem;
}
.vd-regels__tekst {
  margin: 16px auto 0;
  max-width: 760px;
  color: #4a6b75;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}
.vd-regels__tekst p { margin: 0 0 12px; }
.vd-regels__tekst p:last-child { margin-bottom: 0; }

/* Staan er uitklapvragen in een onderdeel, dan hangen ze los onder de
   kop. Geen eigen kader eromheen: de kaart ís het kader al. */
.vd-regels__kaart .vd-vragen {
  margin: 16px auto 0;
  max-width: 900px;
}