/* Casa Biscotti – beschikbaarheidskalender. Kleuren volgen de site (olijf, terracotta, citroen, crème). */
.cbk { --k-olijf: #69734D; --k-olijf-d: #4E5636; --k-terra: #B35A20; --k-citroen: #F2D46B; --k-licht: #FBF7EE; --k-zand: #ECE3CF; --k-tekst: #3B3F32;
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; color: var(--k-tekst); }
@media (max-width: 1024px) { .cbk { grid-template-columns: 1fr; } }
.cbk-kalender, .cbk-form, .cbk-bedankt { background: var(--k-licht); border-radius: 6px; padding: 28px; }
@media (max-width: 767px) { .cbk-kalender, .cbk-form, .cbk-bedankt { padding: 20px 14px; } }
.cbk-bedankt { grid-column: 1 / -1; text-align: center; padding: 48px 28px; }
.cbk-bedankt h2 { margin-bottom: 10px; }

.cbk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cbk-hint { margin: 0; text-align: center; font-weight: 700; color: var(--k-olijf-d); font-size: 15px; }
.cbk-hint.is-fout { color: #9B3412; }
.cbk .cbk-pijl { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1px solid var(--k-zand); background: #fff; color: var(--k-olijf-d); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
.cbk .cbk-pijl:hover:not(:disabled) { background: var(--k-olijf); color: #fff; }
.cbk .cbk-pijl:disabled { opacity: .3; cursor: default; }

.cbk-maanden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.cbk-maandnaam { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; color: var(--k-olijf); margin: 0 0 8px; text-transform: capitalize; text-align: center; }
.cbk-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cbk-dagnaam { font-size: 12px; text-align: center; color: #6b6e60; padding: 4px 0; text-transform: lowercase; }
.cbk .cbk-dag { aspect-ratio: 1 / 1; border: 0; border-radius: 4px; background: #fff; color: var(--k-tekst); font: inherit; font-size: 15px; cursor: pointer; padding: 0; position: relative; }
.cbk .cbk-dag:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--k-olijf); }
.cbk .cbk-dag:focus-visible { outline: 2px solid var(--k-terra); outline-offset: 1px; }
.cbk .cbk-dag.is-verleden { background: transparent; color: #b9b6aa; cursor: default; }
.cbk .cbk-dag.is-bezet { background: #D9D3C2; color: #8a8676; text-decoration: line-through; }
.cbk .cbk-dag.is-voorbehoud { background: #F8E9B0; }
.cbk .cbk-dag.is-binnen { background: #DCE3C6; color: var(--k-olijf-d); text-decoration: none; }
.cbk .cbk-dag.is-aankomst, .cbk .cbk-dag.is-vertrek { background: var(--k-olijf); color: #fff; font-weight: 700; text-decoration: none; }

.cbk-legenda { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.cbk-legenda li { display: flex; align-items: center; gap: 7px; }
.cbk-vak { width: 16px; height: 16px; border-radius: 3px; display: inline-block; border: 1px solid var(--k-zand); }
.cbk-vak--vrij { background: #fff; } .cbk-vak--bezet { background: #D9D3C2; } .cbk-vak--voorbehoud { background: #F8E9B0; } .cbk-vak--gekozen { background: var(--k-olijf); }

.cbk-keuze { background: #fff; border-left: 4px solid var(--k-olijf); padding: 16px 18px; margin-bottom: 20px; border-radius: 4px; scroll-margin-top: 90px; }
.cbk-keuze p { margin: 0 0 6px; }
.cbk-keuze__data span { color: #6b6e60; }
.cbk-keuze__prijs { font-size: 14px; color: var(--k-olijf-d); }
.cbk .cbk-wissen { background: none; border: 0; padding: 0; color: var(--k-terra); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

.cbk-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1024px) and (min-width: 600px) { .cbk-velden { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cbk-velden { grid-template-columns: 1fr; } }
.cbk-velden label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 14px; color: var(--k-olijf-d); }
.cbk-velden .cbk-breed { grid-column: 1 / -1; }
@media (min-width: 1025px) { .cbk-velden { grid-template-columns: 1fr; } }
.cbk-velden input, .cbk-velden select, .cbk-velden textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 11px 13px; border: 1px solid #d8cfb8; border-radius: 4px; background: #fff; color: var(--k-tekst); width: 100%; box-sizing: border-box; }
.cbk-velden input:focus, .cbk-velden select:focus, .cbk-velden textarea:focus { outline: none; border-color: var(--k-olijf); box-shadow: 0 0 0 2px rgba(105,115,77,.2); }
.cbk-honing { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cbk-melding { background: #FBE9E1; color: #9B3412; padding: 10px 14px; border-radius: 4px; margin: 16px 0 0; }
.cbk-vrijblijvend { font-size: 14px; margin: 16px 0 12px; }
.cbk .cbk-knop { background: var(--k-terra); color: #fff; border: 0; border-radius: 40px; padding: 15px 30px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; width: 100%; }
.cbk .cbk-knop:hover { background: var(--k-olijf); }
.cbk .cbk-knop:disabled { opacity: .6; cursor: wait; }
.cbk-privacy { font-size: 13px; margin: 12px 0 0; color: #6b6e60; }
.cbk .cbk-dag, .cbk .cbk-pijl, .cbk .cbk-wissen { min-width: 0; min-height: 0; line-height: 1; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cbk .cbk-dag.is-aankomst, .cbk .cbk-dag.is-vertrek { font-weight: 700; }
