/* ══════════════════════════════════════════════════════════════════════════════
   Verhuurkalender op de publieke site (_VerhuurKalender.cshtml + wf-verhuur.js), naar het
   ontwerp "Webfix Boekingskalender Website" (Tom 02-10-2026). Gedeeld door alle templates.

   Kleuren: VAST op elke site, niet de huisstijl (Tom 03-10-2026): fris groen = vrij en uw verblijf,
   roze = bezet, een wisseldag half groen half roze, amber = vandaag. Zo leest elke boekingskalender
   hetzelfde, en vrolijk genoeg om zin te krijgen om te boeken. De knop "Reserveer dit verblijf" houdt
   de knopstijl van de template (VerhuurKnopKlasse); hier alleen de breedte en het pijltje.
   De indeling volgt de breedte van de kalender zelf (container query), niet die van het scherm: een
   woningpagina met een zijkolom is smaller.
   ══════════════════════════════════════════════════════════════════════════ */
.wf-vh {
  --c1: #1DB46C;                 /* fris groen: aankomst, uw verblijf, accenten */
  --c2: #F5A524;                 /* amber: vandaag, de tip */
  --vh-vrij: #E3F6EC;            /* licht groen: vrij */
  --vh-vrij-ink: #11663F;
  --vh-roze: #FDE4EE;            /* licht roze: bezet */
  --vh-roze-ink: #C2185B;
  --vh-ink: #1B1E24;
  --vh-body: #5F6368;
  --vh-lijn: rgba(1, 16, 61, .08);
  container-type: inline-size;
  color: var(--vh-ink);
}

/* -- kop ------------------------------------------------------------------------ */
.wf-vh-kop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.wf-vh-titel { margin: 0 !important; }
.wf-vh-sub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--vh-body); }
.wf-vh-sub b { color: var(--vh-ink); }
.wf-vh-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wf-vh-pijl {
  width: 42px; height: 42px; border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .12); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--vh-ink);
  transition: border-color .2s, color .2s;
}
.wf-vh-pijl:hover { border-color: var(--c1); color: var(--c1); }
.wf-vh-pijl:disabled { opacity: .35; cursor: default; }
.wf-vh-pijl:disabled:hover { border-color: rgba(1, 16, 61, .12); color: var(--vh-ink); }

/* -- indeling: kalender links, kaart rechts; smal = onder elkaar -------------------- */
.wf-vh-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@container (min-width: 1000px) {
  .wf-vh-wrap { grid-template-columns: minmax(0, 1fr) 330px; }
  .wf-vh-som { position: sticky; top: 110px; }
}
.wf-vh-kaart {
  background: #fff; border: 1px solid var(--vh-lijn); border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 12px 32px rgba(1, 16, 61, .06);
}

/* -- maanden ------------------------------------------------------------------------ */
.wf-vh-maanden { display: grid; gap: 24px; }
.wf-vh-maanden.-n1 { grid-template-columns: minmax(0, 1fr); }
.wf-vh-maanden.-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-vh-maanden.-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-vh-maanden.-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (min-width: 620px) { .wf-vh-maanden.-n1 { max-width: 420px; } }
.wf-vh-mt {
  margin: 0 0 10px !important; text-align: center; font-weight: 800; font-size: 15px !important; line-height: 1.3;
  text-transform: capitalize; color: var(--vh-ink);
}
.wf-vh-wd, .wf-vh-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.wf-vh-wd span {
  padding: 3px 0 5px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8A8F96;
}

/* -- dagvakje ------------------------------------------------------------------------ */
.wf-vh-d {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 9px; background: #fff; cursor: pointer; overflow: hidden;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--vh-body);
  transition: box-shadow .15s, background .15s, color .15s;
}
.wf-vh-d:disabled { cursor: default; }
.wf-vh-d.-leeg { visibility: hidden; pointer-events: none; }
.wf-vh-d.-past { background: transparent; color: #C5C8CE; }
/* vrij, maar geen aankomstdag */
.wf-vh-d.-vrij { background: #F3F6F4; color: #6B7078; }
/* vrij én te kiezen (aankomst, of tijdens het kiezen: vertrek): vet, met een stip */
.wf-vh-d.-aank { background: var(--vh-vrij); color: var(--vh-vrij-ink); font-weight: 800; }
.wf-vh-d.-aank::after {
  content: ""; position: absolute; bottom: 12%; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 9999px; background: var(--c1);
}
.wf-vh-d.-aank:hover { box-shadow: inset 0 0 0 2px var(--c1); }
/* bezet */
.wf-vh-d.-bezet { cursor: not-allowed; background: var(--vh-roze); color: var(--vh-roze-ink); }
/* wisseldag: halve dag bezet (-in = de nacht erna is bezet, -uit = de nacht ervóór) */
.wf-vh-d.-in { background: linear-gradient(135deg, var(--vh-vrij) 50%, var(--vh-roze) 50%); }
.wf-vh-d.-uit { background: linear-gradient(135deg, var(--vh-roze) 50%, var(--vh-vrij) 50%); }
.wf-vh-d.-in.-vrij, .wf-vh-d.-uit.-vrij { color: #6B7078; }
/* uw verblijf: aankomst, de nachten ertussen en vertrek allemaal in hetzelfde groen, zodat de hele periode
   in één oogopslag "van u" is (Tom 03-10-2026). !important op de kleur: een wisseldag (-in.-vrij) wint anders. */
.wf-vh-d.-sa, .wf-vh-d.-rng, .wf-vh-d.-sb { background: var(--c1); color: #fff !important; font-weight: 800; }
.wf-vh-d.-sa::after, .wf-vh-d.-sb::after { background: #fff; }
.wf-vh-d.-sb.-voorbeeld, .wf-vh-d.-rng.-voorbeeld { background: color-mix(in srgb, var(--c1) 55%, #fff); }
.wf-vh-d.-today { box-shadow: inset 0 0 0 2px var(--c2); }

/* -- legenda ------------------------------------------------------------------------- */
.wf-vh-leg {
  display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin-top: 18px; padding-top: 15px;
  border-top: 1px solid rgba(1, 16, 61, .07);
}
.wf-vh-li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; color: var(--vh-body); }
.wf-vh-sw { flex: none; position: relative; width: 18px; height: 18px; border-radius: 5px; overflow: hidden; }
.wf-vh-sw.-aank { background: var(--vh-vrij); }
.wf-vh-sw.-aank::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 9999px; background: var(--c1);
}
.wf-vh-sw.-vrij { background: #F3F6F4; box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06); }
.wf-vh-sw.-bezet { background: var(--vh-roze); }
.wf-vh-sw.-wissel { background: linear-gradient(135deg, var(--vh-roze) 50%, var(--vh-vrij) 50%); }
.wf-vh-sw.-sel { background: var(--c1); }
.wf-vh-sw.-today { background: #fff; box-shadow: inset 0 0 0 2px var(--c2); }
.wf-vh-rule { margin: 12px 0 0 !important; font-size: 12.5px; line-height: 1.5; color: #6B7078; }
.wf-vh-rule i { margin-right: 6px; color: var(--c1); }

/* -- kaart "Uw verblijf" ----------------------------------------------------------------- */
.wf-vh-som {
  background: #fff; border: 1px solid var(--vh-lijn); border-radius: 22px;
  box-shadow: 0 12px 32px rgba(1, 16, 61, .06); overflow: hidden;
}
.wf-vh-som-h { padding: 16px 20px; background: color-mix(in srgb, var(--c1) 8%, #fff); border-bottom: 1px solid rgba(1, 16, 61, .06); }
.wf-vh-som-h b { display: block; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--vh-ink); }
.wf-vh-som-h span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--vh-body); }
.wf-vh-som-b { padding: 18px 20px 20px; }
.wf-vh-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(1, 16, 61, .12); border-radius: 14px; overflow: hidden; }
.wf-vh-dt { padding: 10px 13px; }
.wf-vh-dt + .wf-vh-dt { border-left: 1px solid rgba(1, 16, 61, .12); }
.wf-vh-dt span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A8F96; line-height: 1.4; }
.wf-vh-dt b { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--vh-ink); }
.wf-vh-dt b.-leeg { color: #A3A7AD; font-weight: 600; }

.wf-vh-pers { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--vh-body); }
.wf-vh-pers > span { flex: 1 1 auto; min-width: 0; }
.wf-vh-pers select {
  flex: none; width: 96px !important; min-width: 0; height: 38px; margin: 0 !important; padding: 0 30px 0 12px; border: 1px solid rgba(1, 16, 61, .14); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; color: var(--vh-ink);
}
.wf-vh-pers select:focus { outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 18%, transparent); }
.wf-vh-dier { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; color: var(--vh-body); cursor: pointer; }
.wf-vh-dier input { width: 16px; height: 16px; accent-color: var(--c1); }

.wf-vh-lines { margin: 16px 0 0; transition: opacity .2s; }
.wf-vh-lines.is-bezig { opacity: .5; }
.wf-vh-ln { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; line-height: 1.45; color: var(--vh-body); }
.wf-vh-ln > span:last-child { flex: none; white-space: nowrap; color: var(--vh-ink); }
.wf-vh-ln.-zacht > span:last-child { color: #8A8F96; font-style: italic; white-space: normal; text-align: right; }
.wf-vh-ln.-apart { margin-top: 4px; font-size: 12.5px; }
.wf-vh-ln.-apart > span:last-child { color: var(--vh-body); }
.wf-vh-tot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--vh-lijn); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--vh-ink);
}
.wf-vh-tot small { display: block; font-weight: 600; font-size: 11.5px; color: #8A8F96; }
.wf-vh-laden, .wf-vh-fout { margin: 16px 0 0 !important; font-size: 13px; line-height: 1.5; color: var(--vh-body); }
.wf-vh-fout { padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #9B1C1C; }

/* De knop: stijl van de template, hier alleen volle breedte en het pijltje. Zonder keuze een rustige, uitgeschakelde stand. */
.wf-vh-cta { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; }
.wf-vh-cta i { font-size: 13px; }
.wf-vh-cta.is-uit { background: #D8DBE1 !important; border-color: #D8DBE1 !important; color: #8A8F96 !important; box-shadow: none !important; transform: none !important; pointer-events: none; cursor: default; }
.wf-vh-wis {
  display: block; margin: 10px auto 0; padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #6B7078;
}
.wf-vh-wis:hover { color: var(--c1); }
.wf-vh-hint {
  display: flex; gap: 9px; margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--c2) 14%, #fff); font-size: 12.5px; line-height: 1.5; color: #5A4A2A;
}
.wf-vh-hint i { flex: none; margin-top: 1px; color: color-mix(in srgb, var(--c2) 70%, #000); }
.wf-vh-trust { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; font-size: 12.5px; line-height: 1.4; color: var(--vh-body); }
.wf-vh-trust i { width: 16px; margin-right: 6px; color: var(--c1); }

@container (max-width: 619px) {
  .wf-vh-kaart { padding: 16px 14px 14px; border-radius: 18px; }
  .wf-vh-nav { margin-left: 0; }
}

/* Donkere site (business1-dark): de kaarten blijven licht, zodat de kalender leesbaar blijft. */
[data-bs-theme="dark"] .wf-vh-kop, [data-bs-theme="dark"] .wf-vh-sub { color: #e8eaee; }
[data-bs-theme="dark"] .wf-vh-sub b { color: #fff; }

/* -- "Powered by Webfix boekingen" onderin de kalenderkaart (Tom 03-10-2026): onder een lichtgrijze lijn, links,
   met ons beeldmerk iets hoger dan de tekst. */
.wf-vh-powered { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(1, 16, 61, .07); }
.wf-vh-powered a {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; color: #8A8F96;
  text-decoration: none; opacity: .85; transition: opacity .2s, color .2s;
}
.wf-vh-powered a:hover { opacity: 1; color: var(--vh-ink); }
.wf-vh-powered img { display: block; height: 16px; width: auto; position: relative; top: 0; }
/*  "Powered by" op dezelfde basislijn als het woord Webfix in het logo (dat staat onderin zijn plaatje). */
.wf-vh-powered a > span:first-child { position: relative; top: 2.5px; }
/*  "Ingetogen", net als "Site by Webfix" onderaan de site (Tom 04-10-2026): het logo in grijs en gedempt, bij hover in
    zijn eigen kleuren. "Powered by" en "Boekingen" zijn gewone tekst in dezelfde letter, maat en kleur (Plus Jakarta
    Sans Medium, eigen font-face-naam zodat hij nooit botst met een lettertype van de template). */
.wf-vh-powered img { filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease; }
.wf-vh-powered a:hover img, .wf-vh-powered a:focus-visible img { filter: none; opacity: 1; }
@font-face { font-family: 'WfJakarta'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/google/plus-jakarta-sans/500.woff2') format('woff2'); }
.wf-vh-powered a { font-family: 'WfJakarta', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; }
.wf-vh-powered-woord { position: relative; top: 2.5px; }   /* zelfde basislijn als "Powered by" */