:root { --c-blue: #3498db; --c-blue-dark: #2666b2; --c-green: #1f964d; --c-green-dark: #166835; }
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------
 * Navbar visibility fix
 *
 * Tailwind v3 CDN (geladen door deze partial) heeft een utility
 *   .collapse { visibility: collapse; }
 * die botst met Bootstrap's .collapse-class op het site-navbar
 *   <div class="collapse navbar-collapse" id="navbar-header">.
 * Tailwind wint omdat 't CDN-stylesheet na Bootstrap ingevoegd
 * wordt, dus de nav-items + CTAs werden onzichtbaar.  visibility:
 * visible !important op de navbar-scope hergeeft Bootstrap z'n
 * gedrag; Bootstrap regelt de toon/verberg via display:none
 * (niet via visibility) dus we verstoren niks.
 * ------------------------------------------------------------ */
header .navbar-collapse,
header .navbar-collapse.collapse,
header .navbar-collapse.collapsing,
header .navbar-collapse.show,
header .navbar-nav,
header .navbar-nav .nav-link,
header .navbar-nav .dropdown-menu,
header .navbar-nav .dropdown-item {
    visibility: visible !important;
}

/* ------------------------------------------------------------
 * Kleur-erving herstellen binnen de wizard
 *
 * maastrichtmarina.css zet met een universele selector
 *   *, html, body { color: var(--color-text); }
 * een DIRECTE kleur op elk element.  Directe regels winnen altijd
 * van overerving, dus een kale <span>/<i> in een button of
 * gekleurde container werd donkerblauw — ook op een blauwe
 * actieve tab, een groene knop of een geselecteerde kalenderdag.
 * Scoped teruggeven aan inheritance; elementen met een eigen
 * text-kleurklasse behouden die via specificiteit (button-content
 * met eigen kleurintentie krijgt die van de button zelf). */
.mm-booking-outer button span,
.mm-booking-outer button i { color: inherit; }
/* Stap-indicator: cirkels (rounded-full divs) met nummer/vinkje. */
.mm-booking-outer .rounded-full > span,
.mm-booking-outer .rounded-full > i { color: inherit; }
/* Kalenderdag: dagnummer volgt de celstaat (wit op selected);
   de vanaf-prijs (.mm-cal-price) houdt z'n eigen groen. */
.mm-cal-day span:not(.mm-cal-price) { color: inherit; }

/* Mobile bleed: eat Bootstrap .col-12 en .container padding op mobile
   zodat de white-card van de partial edge-to-edge staat.  Bootstrap's
   .container + .row + .col-12 nesting voegt 30px totaal aan
   horizontale padding toe, wat op een 375px scherm bijna 10% is. */
@media (max-width: 640px) {
    .mm-booking-outer {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* Kalender-cel iets groter kliken op small devices; font wat
   compacter zodat 2-cijferige dagen niet tegen rand plakken. */
@media (max-width: 400px) {
    .mm-cal-day { font-size: 0.8rem; }
    .mm-cal-price { font-size: 0.5rem; }
}

/* Mobiel: vierkante cellen maken de kalender een heel scherm hoog.
   Een vaste, iets lagere celhoogte scheelt ~60px op zes weekrijen
   zonder onder de 44px-tapmaat te zakken. */
@media (max-width: 640px) {
    .mm-cal-day { aspect-ratio: auto; min-height: 44px; padding: 4px 0 3px; }
}

/* Scroll & Swipe */
/* overflow-x hidden: de container is uitsluitend een verticale scroller.
   overflow-y:auto maakt de computed overflow-x ook 'auto', en de sticky
   tab-balk (full-bleed via negatieve marges) kan door subpixel-/zoom-
   afronding dan een horizontale scrollbar onderin de wizard opleveren
   (zichtbaar op Windows). Horizontaal knippen we altijd. */
.mm-wizard-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overflow-x: hidden; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Buttons: Altijd wit, goed contrast */
.mm-btn-primary {
    background-color: var(--c-blue);
    color: #ffffff !important;
    border-radius: 8px; padding: 12px 24px;
    font-weight: 700; transition: all 0.3s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; border: none; text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.mm-btn-primary:hover:not(:disabled) { background-color: var(--c-blue-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.mm-btn-primary:disabled { background-color: #94a3b8; cursor: not-allowed; opacity: 0.7; transform: none; }

.mm-btn-outline { background: transparent; color: var(--c-green); border: 2px solid var(--c-green); padding: 8px 16px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; transition: all 0.2s; }
.mm-btn-outline:hover { background: var(--c-green); color: white; }

.mm-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.mm-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); border-color: var(--c-blue); }

/* Feature-kaart voor een categorie met precies één optie (stap 1):
   afbeelding links, inhoud rechts op ≥md.  Eigen regel in plaats van
   Tailwinds md:flex-row, want dit bestand laadt ná de door de
   Tailwind-CDN geïnjecteerde <style> — bij gelijke specificiteit zou
   .mm-card's flex-direction: column anders altijd winnen. */
@media (min-width: 768px) {
    .mm-card-feature { flex-direction: row; }
}

/* De site-css (maastrichtmarina.css) zet h2/h3 op display-groottes
   met !important; binnen de wizard en de cross-sell strip verliezen
   de Tailwind-tekst-utilities dat gevecht en ballonnen kaarttitels
   en stap-koppen op.  Scoped her-declaratie (hogere specificiteit +
   !important) geeft de utilities hun bedoelde maat terug. */
.mm-booking-outer .text-xs,  .mm-cross-sell .text-xs  { font-size: .75rem  !important; line-height: 1rem    !important; }
.mm-booking-outer .text-sm,  .mm-cross-sell .text-sm  { font-size: .875rem !important; line-height: 1.25rem !important; }
.mm-booking-outer .text-base, .mm-cross-sell .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.mm-booking-outer .text-lg,  .mm-cross-sell .text-lg  { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.mm-booking-outer .text-xl,  .mm-cross-sell .text-xl  { font-size: 1.25rem  !important; line-height: 1.75rem !important; }
.mm-booking-outer .text-2xl { font-size: 1.5rem   !important; line-height: 2rem    !important; }
@media (min-width: 640px) {
    .mm-booking-outer .sm\:text-base { font-size: 1rem     !important; line-height: 1.5rem  !important; }
    .mm-booking-outer .sm\:text-lg   { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .mm-booking-outer .sm\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .mm-booking-outer .sm\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
}
@media (min-width: 768px) {
    .mm-booking-outer .md\:text-lg,  .mm-cross-sell .md\:text-lg  { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .mm-booking-outer .md\:text-xl,  .mm-cross-sell .md\:text-xl  { font-size: 1.25rem  !important; line-height: 1.75rem !important; }
    .mm-booking-outer .md\:text-2xl { font-size: 1.5rem   !important; line-height: 2rem    !important; }
    .mm-booking-outer .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
}
@media (min-width: 1024px) {
    .mm-booking-outer .lg\:text-sm { font-size: .875rem  !important; line-height: 1.25rem !important; }
    .mm-booking-outer .lg\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
}

.mm-input { width: 100%; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.mm-input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); }

.mm-cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #475569; position: relative; transition: all 0.2s; }
.mm-cal-day:hover:not(.disabled):not(.min-stay):not(.past) { background: #e0f2fe; color: var(--c-blue); transform: scale(1.05); }
/* Verleden dag: neutraal gedimd.  Rood + doorstrepen blijft voor écht
   bezet — een maand die halverwege begint las anders als "vol". */
.mm-cal-day.past { opacity: 0.3; cursor: not-allowed; color: #94a3b8; }
.mm-cal-day.selected { background: var(--c-blue) !important; color: white !important; transform: scale(1.05); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.mm-cal-day.in-range { background: #dcfce7 !important; color: var(--c-green-dark); }
.mm-cal-day.disabled { background: #fee2e2; color: #ef4444; text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
/* Te korte checkout bij minimaal-verblijf (zoneMinNights): de dag is
   niet bezet, alleen (nog) geen geldige uitcheckdatum — neutraal
   gedimd, bewust geen rood/doorhaling zoals bij echt geblokkeerd. */
.mm-cal-day.min-stay { opacity: 0.35; cursor: not-allowed; }
.mm-cal-day.loading { opacity: 0.5; pointer-events: none; }
/* Vanaf-prijs onder het dagnummer (conversie).  Groen brand-token;
   op geselecteerde/in-range cellen erft de prijs de celkleur zodat
   het contrast op de blauwe/groene achtergrond behouden blijft. */
.mm-cal-price { font-size: 0.58rem; font-weight: 600; line-height: 1.1; color: var(--c-green); letter-spacing: -0.01em; }
.mm-cal-day.selected .mm-cal-price, .mm-cal-day.in-range .mm-cal-price { color: inherit; }

.mm-photo-badge { background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); }

/* ================================
   STAP 1 — KEUZEPANEEL OP HET MERKBLAUW
   Alleen actief wanneer er meerdere categorieen te kiezen zijn; op een
   categoriepagina blijft stap 1 licht.
================================== */
.mm-pick{
  background:linear-gradient(160deg,#062b45 0%,#0d3d5e 60%,#11354d 100%);
  border-radius:18px;
  /* Mobiel krap: elke rem hier duwt de kaarten een scroll verder weg. */
  padding:1.1rem .8rem .9rem;
}
/* De categoriepanelen zijn <section>-elementen; de site geeft die op
   >=992px 80px padding, wat binnen dit paneel een gat trekt tussen de
   tabs en de kaarten. */
.mm-pick section{ padding:0; }
@media(min-width:768px){ .mm-pick{ padding:2.5rem 2rem 1.5rem; } }

.mm-pick .mm-pick-head h2,
.mm-pick .mm-pick-head p{ color:#fff; }
.mm-pick .mm-pick-head p{ color:#bcd6e6; }

/* Spoor + schuivende markering */
.mm-pick-tabs-wrap{ margin-bottom:1rem; }
@media(min-width:768px){ .mm-pick-tabs-wrap{ margin-bottom:1.5rem; } }
.mm-pick-tabs{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:.4rem;
  /* De markering veert een klein stukje door; overflow houdt 'm binnen
     het spoor in plaats van er even buiten te schieten. */
  overflow:hidden;
}
@media(min-width:768px){ .mm-pick-tabs{ display:flex; } }

.mm-pick-thumb{ display:none; }
@media(min-width:768px){
  .mm-pick-thumb{
    display:block; position:absolute; top:.4rem; bottom:.4rem; left:.4rem; z-index:0;
    width:calc((100% - .8rem - (var(--mm-tab-n) - 1) * .5rem) / var(--mm-tab-n));
    transform:translateX(calc(var(--mm-tab-i) * (100% + .5rem)));
    background:#fff; border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.3);
    transition:transform .42s cubic-bezier(.34,1.2,.44,1);
  }
}

.mm-pick-tab{
  position:relative; z-index:1; flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  border:0; background:transparent; color:#d6e7f2; font-weight:700;
  font-size:.85rem; padding:.7rem .5rem; border-radius:9px; cursor:pointer;
  transition:color .22s ease, background .18s ease, transform .12s ease;
}
@media(min-width:768px){ .mm-pick-tab{ font-size:.92rem; gap:.5rem; padding:.7rem .6rem; } }
.mm-pick-tab i, .mm-pick-tab span{ color:inherit; }
.mm-pick-tab:hover{ background:rgba(255,255,255,.12); color:#fff; }
.mm-pick-tab:active{ transform:scale(.97); }
.mm-pick-tab.is-active{ color:#0d3d5e; }
.mm-pick-tab.is-active:hover{ background:transparent; color:#0d3d5e; }
/* Geen zwarte focusring na een muisklik, wel een zichtbare voor wie met
   het toetsenbord navigeert. */
.mm-pick-tab:focus{ outline:none; }
.mm-pick-tab:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }
/* Onder 768px staan de tabs in twee rijen; daar zou de markering
   diagonaal moeten springen, dus die blijft weg. */
@media(max-width:767px){
  .mm-pick-tab.is-active{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); }
}

/* Het icoon wipt even op zodra een tab actief wordt. */
.mm-pick-tab.is-active i{ animation:mmPickPop .5s cubic-bezier(.34,1.5,.44,1); }
@keyframes mmPickPop{
  0%{ transform:scale(1); }
  38%{ transform:scale(1.28) translateY(-2px); }
  100%{ transform:scale(1); }
}

.mm-pick-pill{
  display:none; font-size:.7rem; line-height:1; font-weight:700; border-radius:999px;
  padding:.22rem .45rem; min-width:20px; text-align:center; flex-shrink:0;
  background:rgba(255,255,255,.2); color:#fff; transition:background .22s ease;
}
@media(min-width:768px){ .mm-pick-pill{ display:inline-block; } }
.mm-pick-tab.is-active .mm-pick-pill{ background:#0d3d5e; color:#fff; }

.mm-pick .mm-pick-ctx,
.mm-pick .mm-pick-ctx span{ color:#cfe2ee; }

@media(prefers-reduced-motion:reduce){
  .mm-pick-thumb{ transition:none; }
  .mm-pick-tab.is-active i{ animation:none; }
  .mm-pick-tab:active{ transform:none; }
}

/* Voorbeeldtekst in een invoerveld moet duidelijk géén ingevulde waarde
   lijken.  De "7,5" in het lengteveld werd voor een waarde aangezien. */
.mm-input-hint::placeholder { color: #9aa7b4; opacity: 1; font-style: italic; }
.mm-input-hint::-webkit-input-placeholder { color: #9aa7b4; font-style: italic; }

/* ================================
   MOBIELE STICKY ACTIEBALK (stap 2-4)
   De primaire actie ("Kies Extra's" / "Afrekenen" / "Betalen") staat op
   mobiel vast onderin met de context (datums, totaal) ernaast; zonder
   balk verdween de doorknop onder de vouw en bleef onduidelijk waarom
   hij uit stond.  Alleen tot 640px; daarboven de inline knoppenrij.
================================== */
.mm-action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border-top:1px solid #e5e7eb;
  padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 18px rgba(2,20,35,.10);
}
/* Desktop-verbergen hier expliciet, NIET alleen via Tailwinds sm:hidden:
   de Play-CDN injecteert zijn <style> vóór dit bestand, dus bij gelijke
   specificiteit wint onze display:flex van sm:hidden en stond de balk
   ook op desktop in beeld. */
@media (min-width: 640px){
  .mm-action-bar{ display:none; }
}
.mm-action-back{
  width:40px; height:40px; flex-shrink:0; border-radius:9999px;
  border:1.5px solid #e2e8f0; background:#fff; color:#64748b;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mm-action-back:active{ background:#f1f5f9; }
.mm-action-ctx{ min-width:0; flex:1 1 auto; line-height:1.25; }
.mm-action-ctx .ctx-main{
  display:block; font-weight:700; color:#1f2937; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mm-action-ctx .ctx-sub{
  display:block; color:#6b7280; font-size:.72rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mm-action-ctx .ctx-hint{ color:#6b7280; font-size:.8rem; font-weight:600; white-space:normal; }
.mm-action-bar .mm-btn-primary{ padding:11px 16px; font-size:.9rem; white-space:nowrap; flex-shrink:0; }
.mm-action-bar .mm-btn-green{ background-color:var(--c-green); }
.mm-action-bar .mm-btn-green:hover:not(:disabled){ background-color:var(--c-green-dark); }
/* De balk mag de laatste inhoud (en de footer-links) niet afdekken:
   zolang hij zichtbaar is krijgt de wizard-buitenkant extra bodemruimte. */
@media (max-width:639.98px){
  .mm-booking-outer.mm-has-bar{ padding-bottom:76px; }
}