/*
Theme Name:         Casa Olivar — Bellevue Child
Theme URI:          https://casaolivar.es
Description:        Child-theme van Bellevue. Legt het warme, mediterrane Casa Olivar-palet en de serif+sans typografie over de Bellevue-structuur heen (boutique Mediterranean stay). Technische basis: Bellevue. Visuele richting: Casa Melanita.
Author:             Casa Olivar
Version:            1.0.0
Template:           bellevuex
Text Domain:        casa-olivar
*/

/* =====================================================================
   LET OP — Template-slug
   De regel  "Template: bellevuex"  hierboven moet exact overeenkomen met
   de MAPNAAM van je geïnstalleerde Bellevue-thema (map in wp-content/themes/).
   Bij deze download is dat 'bellevuex'. Heet jouw map 'bellevue', pas dan
   die regel aan naar:  Template: bellevue
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS (warm, natuurlijk palet) ---------- */
:root {
  --c-offwhite: #FBF7F0;
  --c-cream:    #F4ECDF;
  --c-sand:     #EADDC9;
  --c-beige:    #DFCDB4;
  --c-taupe:    #B7A183;
  --c-espresso: #2A241E;
  --c-brown:    #4A3B2C;
  --c-olive:    #A38E6A;
  --c-olive-lt: #C4B49A;

  --c-primary:  #2A241E;   /* Bellevue-primair (was #151515) */
  --c-accent:   #A38E6A;   /* Bellevue-accent  (was #F5BE58) */
  --c-text:     #322B23;
  --c-muted:    #8A7A63;
  --c-line:     rgba(74, 59, 44, 0.16);

  --font-serif: "Cormorant Garamond", "Hoefler Text", Garamond, serif;
  --font-sans:  "Jost", "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- 2. TYPOGRAFIE ---------- */
/* Body / UI: moderne sans */
body,
button, input, select, textarea,
.navbar .navbar-nav > li > a,
p, li, .th-service-block p, .widget {
  font-family: var(--font-sans);
}
body {
  background-color: var(--c-offwhite);
  color: var(--c-text);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Headlines: elegante serif */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title h1,
#main-flex-slider .slides h1, #main-flex-slider .slides h2,
.elementor-heading-title,
.elementor-widget-themo-header .elementor-icon-box-title,
.elementor-widget-themo-service-block .elementor-icon-box-title,
.elementor-widget-themo-info-card .elementor-icon-box-title,
.th-pricing-cost, .th-pkg-content h3, .map-info h3,
.elementor-widget-toggle .elementor-toggle-title,
blockquote {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  letter-spacing: 0.005em;
}
h1, #main-flex-slider .slides h1 { font-weight: 300; line-height: 1.12; }
h2 { font-weight: 300; }

/* Kicker/labels: uppercase sans */
.elementor-widget-themo-header .elementor-heading-title + *,
.wpb_text_column .kicker, .kicker {
  font-family: var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ---------- 3. KLEUREN — overschrijft Bellevue color.css ---------- */
/* Primair (links, accenten, koppen) — was #151515 */
a, .accent,
.page-title h1, .inner-container > h1.entry-title,
#main-flex-slider .slides h1,
.th-cta .th-cta-text span,
.map-info h3, .th-pkg-content h3, .th-pricing-cost,
.elementor-widget-themo-header .th-header-wrap .elementor-icon-box-title,
.elementor-widget-themo-info-card .th-info-card-wrap .elementor-icon-box-title,
.elementor-widget-themo-service-block .th-service-block-w .elementor-icon-box-title,
.elementor-widget-toggle .elementor-toggle .elementor-toggle-title,
.elementor-widget-toggle .elementor-toggle .elementor-toggle-title.active,
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon {
  color: var(--c-primary) !important;
}
a:hover, a:focus { color: var(--c-olive) !important; }

/* Primaire achtergronden (knoppen, submits) — was #151515 */
.btn-cta-primary,
.btn-standard-primary,
form input[type=submit],
.search-submit, .search-submit:hover,
.th-pricing-column.th-highlight,
.th-conversion form input[type=submit],
html .woocommerce a.button, html .woocommerce-page a.button,
.woocommerce #respond input#submit.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.navbar .navbar-nav > li > a:hover:after,
.navbar .navbar-nav > li.active > a:after {
  background-color: var(--c-primary) !important;
}
.btn-standard-primary,
.btn-standard-primary:hover,
.btn-cta-primary:hover {
  border-color: var(--c-primary) !important;
  color: #F5EEE0 !important;
}

/* Ghost-knop — was #151515 rand/tekst */
.btn-ghost-primary,
.th-portfolio-filters a.current,
.a2c-ghost.woocommerce a.button {
  color: var(--c-primary) !important;
  border-color: var(--c-taupe) !important;
}
.btn-ghost-primary:hover {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #F5EEE0 !important;
}

/* Accent (iconen in service-/header-blokken) — was #F5BE58 */
.elementor-widget-themo-header .th-header-wrap .elementor-icon,
.elementor-widget-themo-header.elementor-view-default .th-header-wrap .elementor-icon,
.elementor-widget-themo-service-block .th-service-block-w .elementor-icon,
.elementor-widget-themo-service-block.elementor-view-default .th-service-block-w .elementor-icon,
.elementor-widget-themo-info-card .elementor-icon {
  color: var(--c-accent) !important;
}

/* Formulier-focus */
form select:focus, form textarea:focus, form input:focus,
.search-form input:focus {
  border-color: var(--c-olive) !important;
}

/* ---------- 4. KNOPVORM (rustiger, luxe) ---------- */
.btn-standard-primary, .btn-ghost-primary, .btn-cta-primary,
.woocommerce a.button, form input[type=submit] {
  font-family: var(--font-sans) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.btn-standard-primary:hover, .btn-cta-primary:hover { background-color: var(--c-brown) !important; border-color: var(--c-brown) !important; transform: translateY(-2px); }

/* ---------- 5. HEADER / NAVIGATIE ---------- */
.navbar .navbar-nav > li > a {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 400;
}
/* Sticky header (headhesive clone) — warme achtergrond */
.headhesive--clone,
.headhesive.headhesive--stick {
  background-color: rgba(251, 247, 240, 0.96) !important;
  box-shadow: 0 1px 0 var(--c-line) !important;
}

/* ---------- 6. SECTIE-ACHTERGRONDEN ---------- */
/* Bellevue/Elementor secties met witte achtergrond → crème/zand.
   (Stel in Elementor bij voorkeur per sectie in; dit is een zachte default.) */
body, .site-content, .main { background-color: var(--c-offwhite); }

/* ---------- 7. PRIJZEN / SERVICE-BLOKKEN ---------- */
.th-pricing-column {
  border: 1px solid var(--c-line);
  border-radius: 2px;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.th-pricing-column:hover, .th-pricing-column.th-highlight {
  box-shadow: 0 24px 50px -30px rgba(42,36,30,.4);
  transform: translateY(-4px);
}
.th-pricing-column.th-highlight .th-pricing-cost { color: #F5EEE0 !important; }

/* ---------- 8. FAQ (toggle) ---------- */
.elementor-widget-toggle .elementor-toggle-item { border-bottom: 1px solid var(--c-line); }

/* ---------- 9. FOOTER ---------- */
.footer, .site-footer, footer[role="contentinfo"] {
  background-color: var(--c-espresso) !important;
  color: #C9BCA8;
}
.footer a, .site-footer a { color: #C9BCA8; }
.footer a:hover, .site-footer a:hover { color: #fff; }

/* ---------- 10. SCROLL-TO-TOP ---------- */
#scrollUp { background-color: var(--c-espresso) !important; color: #F5EEE0 !important; }

/* ---------- 11. SELECTIE ---------- */
::selection { background: var(--c-beige); color: var(--c-espresso); }

/* =====================================================================
   12. HERO à la referentie (Casa Melanita-compositie, eigen palet/fonts)
   ===================================================================== */
.co-hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
  color: #fff;
  padding: 150px 6vw 44px;
  overflow: hidden;
}
.co-hero__inner { position: relative; z-index: 2; max-width: 1000px; margin-bottom: 3.2rem; }

.co-badge {
  display: inline-block;
  padding: .62em 1.25em;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 100px;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: #f3ead9;
  background: rgba(30,24,18,.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.co-badge b {
  display: inline-block;
  background: var(--c-olive); color: var(--c-espresso); font-weight: 600;
  padding: .5em 1em; border-radius: 100px;
  margin: -.62em .5em -.62em -.85em;
}

.co-hero__title {
  font-family: var(--font-serif); font-weight: 300; color: #fff;
  font-size: clamp(2.8rem, 6.5vw, 5.6rem); line-height: 1.05; letter-spacing: .01em;
  margin: 1.4rem 0 0; text-shadow: 0 2px 40px rgba(0,0,0,.28);
}
.co-hero__title em { font-style: italic; }

.co-hero__lead {
  max-width: 48ch; font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.98rem, 1.15vw, 1.15rem); line-height: 1.7;
  color: rgba(255,255,255,.92); margin: 1.6rem 0 2.2rem;
}

.co-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.co-btn {
  display: inline-block; font-family: var(--font-sans); font-weight: 500;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.15em 2.5em; border-radius: 100px;
  transition: all .35s cubic-bezier(.22,1,.36,1); cursor: pointer;
}
.co-btn--solid { background: var(--c-espresso); color: #f5eee0; border: 1px solid var(--c-espresso); }
.co-btn--solid:hover { background: #f5eee0; color: var(--c-espresso); transform: translateY(-2px); }
.co-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.co-btn--ghost:hover { background: #fff; color: var(--c-espresso); }

.co-facts {
  position: relative; z-index: 2;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.28);
  display: flex; flex-wrap: wrap; gap: .6rem 0;
  font-family: var(--font-sans); font-size: .92rem; font-weight: 300;
  letter-spacing: .03em; color: rgba(255,255,255,.92);
}
.co-facts span { display: inline-flex; align-items: center; padding: 0 1.6rem; }
.co-facts span:first-child { padding-left: 0; }
.co-facts span:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.5); margin-left: 1.6rem;
}
.co-scroll {
  position: absolute; right: 2.2vw; bottom: 44px; z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}

@media (max-width: 768px) {
  .co-hero { padding: 120px 24px 30px; min-height: 92vh; }
  .co-hero__title { font-size: clamp(3rem, 15vw, 4.4rem); }
  .co-facts { font-size: .82rem; }
  .co-facts span { padding: 0 .9rem; }
  .co-facts span:not(:last-child)::after { margin-left: .9rem; }
  .co-scroll { display: none; }
}

/* =====================================================================
   13. Pill-knoppen overal + verfijnde transparante header
   ===================================================================== */
.btn-standard-primary, .btn-ghost-primary, .btn-cta-primary,
.woocommerce a.button, form input[type=submit],
.elementor-button, .elementor-button-wrapper .elementor-button {
  border-radius: 100px !important;
  letter-spacing: .16em; text-transform: uppercase;
}
.elementor-button { padding: 1.05em 2.3em !important; font-weight: 500 !important; }

/* Header-CTA als pill (menu-item met class 'nav-cta') */
.navbar .navbar-nav > li.nav-cta > a {
  background: var(--c-olive); color: var(--c-espresso) !important; border-radius: 100px;
  padding: .7em 1.5em !important; margin-left: .6em;
}
.navbar .navbar-nav > li.nav-cta > a:after { display: none !important; }
.navbar .navbar-nav > li.nav-cta > a:hover { background: var(--c-brown); }
/* Telefoon-item (class 'nav-phone') */
.navbar .navbar-nav > li.nav-phone > a { letter-spacing: .04em; text-transform: none; opacity: .95; }
.navbar .navbar-nav > li.nav-phone > a:after { display: none !important; }

/* =====================================================================
   14. Casa Melanita-opbouw — custom blokken (eigen palet/fonts)
   ===================================================================== */

/* ---- Stats-strip ---- */
.co-stats { display:flex; flex-wrap:wrap; }
.co-stats > div { flex:1 1 0; text-align:center; padding:.5rem 1rem; border-right:1px solid var(--c-line); }
.co-stats > div:last-child { border-right:0; }
.co-stats b { display:block; font-family:var(--font-serif); font-weight:300; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--c-espresso); line-height:1; }
.co-stats span { display:block; margin-top:.5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-taupe); }
@media(max-width:768px){ .co-stats > div { flex:1 1 40%; border-right:0; padding:1rem; } }

/* ---- Galerij met tabs ---- */
.co-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:2rem; }
.co-tabs button { font-family:var(--font-sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-brown); background:transparent; border:1px solid var(--c-line); border-radius:100px; padding:.7em 1.4em; cursor:pointer; transition:.3s; }
.co-tabs button:hover { border-color:var(--c-taupe); }
.co-tabs button.is-active { background:var(--c-espresso); color:#f5eee0; border-color:var(--c-espresso); }
.co-g-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.co-g-item { position:relative; margin:0; overflow:hidden; border-radius:2px; aspect-ratio:1/1; cursor:pointer; }
.co-g-item img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.co-g-item:hover img { transform:scale(1.06); }
.co-g-item figcaption { position:absolute; left:0; right:0; bottom:0; padding:1rem; color:#fff; font-family:var(--font-sans); font-size:.8rem; letter-spacing:.08em; background:linear-gradient(180deg,rgba(30,24,18,0),rgba(30,24,18,.72)); opacity:0; transition:.35s; }
.co-g-item:hover figcaption { opacity:1; }
.co-g-item.hide { display:none; }
@media(max-width:1024px){ .co-g-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .co-g-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- Lightbox ---- */
.co-lb { position:fixed; inset:0; z-index:99999; background:rgba(26,21,16,.94); display:none; align-items:center; justify-content:center; }
.co-lb.open { display:flex; }
.co-lb img { max-width:88vw; max-height:86vh; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.co-lb button { position:absolute; color:#fff; background:none; border:0; cursor:pointer; font-family:var(--font-serif); }
.co-lb .lbx { top:24px; right:32px; font-size:2.6rem; line-height:1; }
.co-lb .lbn { top:50%; transform:translateY(-50%); font-size:3rem; padding:0 26px; opacity:.7; }
.co-lb .lbn:hover { opacity:1; } .co-lb .lbp { left:6px; } .co-lb .lbnx { right:6px; }

/* ---- Inclusief-checklist ---- */
.co-includes { max-width:900px; margin:0 auto; background:var(--c-cream); border:1px solid var(--c-line); border-radius:3px; padding:2.4rem 2.6rem; }
.co-includes h4 { font-family:var(--font-serif); font-size:1.5rem; color:var(--c-espresso); margin:0 0 1.2rem; }
.co-includes ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem 1.5rem; }
.co-includes li { position:relative; padding-left:1.6rem; font-size:.95rem; color:var(--c-text); }
.co-includes li::before { content:"✓"; position:absolute; left:0; color:var(--c-olive); font-weight:600; }
.co-includes .co-note { margin:1.4rem 0 0; font-size:.88rem; color:var(--c-muted); }
@media(max-width:768px){ .co-includes ul { grid-template-columns:1fr 1fr; } }

/* ---- Beschikbaarheid: kalender + formulier ---- */
.co-avail { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; max-width:1040px; margin:0 auto; align-items:start; }
.co-avail-cal, .co-form { background:var(--c-offwhite); border:1px solid var(--c-line); border-radius:3px; padding:1.8rem; }
.co-cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.co-cal-head h4 { margin:0; font-family:var(--font-serif); font-size:1.3rem; color:var(--c-espresso); }
.co-cal-head span { cursor:pointer; color:var(--c-taupe); }
.co-cal { width:100%; border-collapse:collapse; text-align:center; }
.co-cal th { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-taupe); font-weight:500; padding:.5rem 0; }
.co-cal td { padding:.55rem 0; font-size:.9rem; color:var(--c-text); }
.co-cal td.bk { color:#c3b8a8; text-decoration:line-through; }
.co-cal td.fr { color:var(--c-olive); font-weight:500; }
.co-legend { margin-top:1rem; display:flex; gap:1.4rem; font-size:.8rem; }
.co-legend .fr { color:var(--c-olive); } .co-legend .bk { color:#c3b8a8; }
.co-legend span::before { content:"●"; margin-right:.4em; }
.co-form h4 { margin:0 0 1.2rem; font-family:var(--font-serif); font-size:1.4rem; color:var(--c-espresso); }
.co-form label { display:block; margin-bottom:1rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-taupe); }
.co-form input, .co-form select, .co-form textarea { display:block; width:100%; margin-top:.4rem; padding:.85rem 1rem; border:1px solid var(--c-line); background:var(--c-cream); font-family:var(--font-sans); font-size:.95rem; color:var(--c-text); border-radius:2px; text-transform:none; letter-spacing:normal; }
.co-form input:focus, .co-form select:focus, .co-form textarea:focus { outline:none; border-color:var(--c-olive); }
.co-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.co-form .co-btn { border:0; margin-top:.4rem; }
.co-form .co-note { text-transform:none; letter-spacing:normal; color:var(--c-muted); font-size:.85rem; margin:.9rem 0 0; }
@media(max-width:768px){ .co-avail { grid-template-columns:1fr; } }

/* ---- Omgeving: 5 categorie-kaarten ---- */
.co-areas { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.co-area { position:relative; display:flex; align-items:flex-end; min-height:420px; border-radius:3px; overflow:hidden; background-size:cover; background-position:center; background-color:#8a7a63; text-decoration:none; transition:transform .4s var(--ease); }
.co-area:hover { transform:translateY(-4px); }
.co-area-cap { padding:1.6rem; color:#fff; z-index:2; }
.co-area-cap h3 { font-family:var(--font-serif); font-weight:400; font-size:1.5rem; color:#fff; margin:0 0 .6rem; }
.co-area-cap ul { list-style:none; padding:0; margin:0; }
.co-area-cap li { font-size:.85rem; color:rgba(255,255,255,.85); padding:.15rem 0; }
@media(max-width:1024px){ .co-areas { grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px){ .co-areas { grid-template-columns:1fr 1fr; } .co-area { min-height:320px; } }

/* ---- Contact-info ---- */
.co-contact { list-style:none; padding:0; margin:1.5rem 0 0; }
.co-contact li { padding:1rem 0; border-bottom:1px solid var(--c-line); }
.co-contact span { display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-taupe); }
.co-contact b { font-family:var(--font-serif); font-weight:400; font-size:1.3rem; color:var(--c-espresso); }

/* ---- Footer (4 kolommen) ---- */
.co-footer { max-width:1240px; margin:0 auto; padding:clamp(3.5rem,7vw,6rem) 24px 2rem; color:#c9bca8; }
.co-foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.4rem; }
.co-foot-logo { display:flex; align-items:center; gap:.8rem; }
.co-foot-logo span { width:46px; height:46px; border:1px solid var(--c-olive-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); color:#f3ead9; }
.co-foot-logo b { font-family:var(--font-serif); font-weight:400; font-size:1.4rem; color:#f3ead9; display:block; }
.co-foot-logo small { display:block; font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--c-olive-lt); margin-top:2px; }
.co-foot-brand p { margin:1.2rem 0 0; max-width:34ch; font-size:.95rem; color:#b3a894; }
.co-footer h5 { font-family:var(--font-sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#efe5d5; margin:0 0 1.2rem; font-weight:500; }
.co-footer ul { list-style:none; padding:0; margin:0; }
.co-footer li { margin-bottom:.7rem; font-size:.95rem; }
.co-footer a { color:#c9bca8; } .co-footer a:hover { color:#fff; }
.co-foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:3.5rem; padding-top:2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:#8f8471; }
@media(max-width:900px){ .co-foot-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .co-foot-grid { grid-template-columns:1fr; } }

/* Verberg de standaard Bellevue-footer op de homepage (we hebben een eigen footer) */
.home .content-info, .home footer.content-info, .home #footer { display:none !important; }

/* =====================================================================
   15. Nav leesbaar op transparante header + omgeving-lijstjes
   ===================================================================== */
/* Omgeving — lijst met plaatsen + rijtijden */
.co-omg-list { list-style:none; padding:0; margin:1.3rem 0 0; }
.co-omg-list li { padding:.75rem 0; border-bottom:1px solid var(--c-line); display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; }
.co-omg-list li:last-child { border-bottom:0; }
.co-omg-list b { font-family:var(--font-sans); font-weight:500; color:var(--c-espresso); font-size:1rem; }
.co-omg-list .t { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-taupe); }
.co-omg-list li > span:last-child { flex:1 1 100%; font-size:.92rem; color:var(--c-muted); }

/* =====================================================================
   16. Omgeving — 5 kaarten naast elkaar (foto boven, kop, intro, lijst)
   ===================================================================== */
.co-omgcards { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:start; }
.co-omgcard { background:var(--c-cream); border:1px solid var(--c-line); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; }
.co-omgcard .ph { aspect-ratio:4/3; overflow:hidden; }
.co-omgcard .ph img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.co-omgcard:hover .ph img { transform:scale(1.05); }
.co-omgcard .bd { padding:1.4rem 1.3rem 1.6rem; }
.co-omgcard h3 { font-family:var(--font-serif); font-weight:400; font-size:1.45rem; color:var(--c-espresso); margin:0 0 .5rem; }
.co-omgcard .bd > p { font-size:.9rem; color:var(--c-muted); line-height:1.6; margin:0 0 1rem; }
.co-omgcard ul { list-style:none; padding:0; margin:0; }
.co-omgcard li { padding:.65rem 0; border-bottom:1px solid var(--c-line); }
.co-omgcard li:last-child { border-bottom:0; }
.co-omgcard li b { display:inline; font-family:var(--font-sans); font-weight:500; font-size:.92rem; color:var(--c-espresso); }
.co-omgcard li .t { float:right; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-taupe); margin-top:.15rem; }
.co-omgcard li .d { display:block; clear:both; font-size:.84rem; color:var(--c-muted); line-height:1.5; margin-top:.15rem; }
@media(max-width:1200px){ .co-omgcards { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .co-omgcards { grid-template-columns:1fr; } }

/* Vinkjes 'Inbegrepen in de prijs' — donkerbruin */
.co-includes li::before { color: var(--c-brown); }

/* =====================================================================
   17. Prijzen — specifieke periodes + altijd inbegrepen + notes
   ===================================================================== */
.co-pricing-extra { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.co-pricing-extra .col { background:var(--c-cream); border:1px solid var(--c-line); border-radius:3px; padding:2rem 2.2rem; }
.co-pricing-extra h4 { font-family:var(--font-serif); font-weight:400; font-size:1.4rem; color:var(--c-espresso); margin:0 0 1.1rem; }
.co-pricing-extra ul { list-style:none; padding:0; margin:0; }
.co-pricing-extra li { padding:.55rem 0; border-bottom:1px solid var(--c-line); font-size:.95rem; color:var(--c-text); }
.co-pricing-extra li:last-child { border-bottom:0; }
.co-pricing-extra li b { font-weight:500; color:var(--c-espresso); }
.co-pricing-extra .notes { grid-column:1 / -1; text-align:center; }
.co-pricing-extra .notes p { margin:.3rem 0; font-size:.9rem; color:var(--c-muted); }
@media(max-width:768px){ .co-pricing-extra { grid-template-columns:1fr; } }

/* =====================================================================
   18. Omgeving — donkere sectie met kicker, kop, intro en 5 tab-pills
   ===================================================================== */
.co-omg { max-width:1240px; margin:0 auto; }
.co-omg-head { text-align:center; max-width:760px; margin:0 auto 2.6rem; }
.co-omg-head .k {
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--font-sans); font-size:.72rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--c-olive);
}
.co-omg-head .k::before, .co-omg-head .k::after {
  content:""; width:34px; height:1px; background:var(--c-olive);
}
.co-omg-head h2 {
  font-family:var(--font-serif); font-weight:300; color:#F7F1E6;
  font-size:clamp(2.4rem,4.6vw,3.8rem); margin:.6rem 0 1rem; line-height:1.1;
}
.co-omg-head p { color:#C9BCA8; font-size:1.05rem; line-height:1.7; margin:0; }

/* Tab-pills op donker */
.co-omgtabs { justify-content:center; margin-bottom:2.6rem; }
.co-omgtabs button {
  color:#E8DECE; border-color:rgba(255,255,255,.28); background:transparent;
}
.co-omgtabs button:hover { border-color:var(--c-olive); color:#fff; }
.co-omgtabs button.is-active { background:var(--c-olive); border-color:var(--c-olive); color:var(--c-espresso); }

/* Panelen: foto links (afgerond), tekst rechts */
.co-omg-panel { display:none; }
.co-omg-panel.is-active { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.co-omg-panel .ph { border-radius:22px; overflow:hidden; aspect-ratio:4/3; }
.co-omg-panel .ph img { width:100%; height:100%; object-fit:cover; }
.co-omg-panel .bd h3 { font-family:var(--font-serif); font-weight:400; color:#F7F1E6; font-size:clamp(1.8rem,3vw,2.6rem); margin:0 0 .6rem; }
.co-omg-panel .bd > p { color:#C9BCA8; font-size:1rem; line-height:1.7; margin:0 0 1.3rem; }
.co-omg-panel ul { list-style:none; padding:0; margin:0; }
.co-omg-panel li { padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.co-omg-panel li:last-child { border-bottom:0; }
.co-omg-panel li b { font-family:var(--font-sans); font-weight:500; font-size:.95rem; color:#F0E8D9; }
.co-omg-panel li .t { float:right; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-olive); margin-top:.2rem; }
.co-omg-panel li .d { display:block; clear:both; font-size:.86rem; color:#A99C86; line-height:1.5; margin-top:.15rem; }
@media(max-width:768px){ .co-omg-panel.is-active { grid-template-columns:1fr; } }

/* =====================================================================
   19. 'Altijd inbegrepen' — brede kaart met 4-koloms vinkjeslijst
   ===================================================================== */
.co-pricing-extra { grid-template-columns:1fr; max-width:1180px; }
.co-incl-card {
  background:var(--c-offwhite); border:1px solid var(--c-line);
  border-radius:22px; padding:clamp(2rem,4vw,3.2rem);
  box-shadow:0 30px 60px -45px rgba(42,36,30,.35);
}
.co-incl-card h4 {
  font-family:var(--font-serif); font-weight:400; font-size:1.7rem;
  color:var(--c-espresso); margin:0 0 1.6rem; text-align:left;
}
.co-incl-grid {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 2.2rem;
}
.co-incl-grid li {
  position:relative; padding:0 0 0 1.9rem; border:0 !important;
  font-size:.98rem; color:var(--c-text); line-height:1.55;
}
.co-incl-grid li::before {
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--c-brown); font-weight:600;
}
.co-incl-note {
  margin:1.9rem 0 0; padding-top:1.4rem; border-top:1px solid var(--c-line);
  font-size:.92rem; color:var(--c-muted); line-height:1.6;
}
@media(max-width:1024px){ .co-incl-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .co-incl-grid { grid-template-columns:1fr; } }

/* =====================================================================
   20. Knoptekst altijd zichtbaar (override van de globale a-kleurregel)
   ===================================================================== */
.elementor-button, a.elementor-button { color: #F5EEE0 !important; }
.elementor-button:hover, a.elementor-button:hover { color: #FFFFFF !important; }
.co-btn--solid { color: #F5EEE0 !important; }
.co-btn--solid:hover { color: var(--c-espresso) !important; background: #F5EEE0 !important; }
.co-btn--ghost { color: #FFFFFF !important; }
.co-btn--ghost:hover { color: var(--c-espresso) !important; background: #FFFFFF !important; }
.co-form .co-btn { color: #F5EEE0 !important; }
.co-form .co-btn:hover { color: var(--c-espresso) !important; }

/* =====================================================================
   21. Prijzen — kop met streepjes, 3 witte kaarten + badge, periodes-kaart
   ===================================================================== */
.co-price-head { text-align:center; max-width:760px; margin:0 auto 3rem; }
.co-price-head .k {
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--font-sans); font-size:.72rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--c-taupe);
}
.co-price-head .k::before, .co-price-head .k::after { content:""; width:34px; height:1px; background:var(--c-taupe); }
.co-price-head h2 { font-family:var(--font-serif); font-weight:300; color:var(--c-espresso); font-size:clamp(2.4rem,4.6vw,3.8rem); margin:.6rem 0 1rem; line-height:1.1; }
.co-price-head p { color:var(--c-muted); font-size:1.05rem; line-height:1.7; margin:0; }

.co-price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1180px; margin:0 auto; align-items:stretch; }
.co-price-card {
  position:relative; background:var(--c-offwhite); border:1px solid var(--c-line);
  border-radius:18px; padding:2.6rem 2rem 2.2rem; text-align:center;
  box-shadow:0 30px 55px -45px rgba(42,36,30,.4);
}
.co-price-card.is-current { border-color:var(--c-taupe); }
.co-price-card .badge {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--c-taupe); color:var(--c-espresso);
  font-family:var(--font-sans); font-size:.64rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.6em 1.4em; border-radius:100px; white-space:nowrap;
}
.co-price-card .season { display:block; font-family:var(--font-sans); font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--c-taupe); margin-bottom:.9rem; }
.co-price-card .amount { font-family:var(--font-serif); font-weight:400; font-size:clamp(3.2rem,5vw,4.6rem); color:var(--c-espresso); line-height:1; }
.co-price-card .amount sup { font-size:.4em; vertical-align:super; margin-right:.06em; }
.co-price-card .sub { display:block; font-size:.85rem; color:var(--c-muted); margin-top:.7rem; }
.co-price-card hr { border:0; border-top:1px solid var(--c-line); margin:1.4rem 0 1.2rem; }
.co-price-card .period { font-size:.95rem; color:var(--c-text); }
@media(max-width:900px){ .co-price-cards { grid-template-columns:1fr; max-width:460px; } }

.co-periods-card {
  background:var(--c-offwhite); border:1px solid var(--c-line);
  border-radius:22px; padding:clamp(1.8rem,3.5vw,2.8rem);
  max-width:900px; margin:0 auto;
  box-shadow:0 30px 60px -45px rgba(42,36,30,.35);
}
.co-periods-card h4 { font-family:var(--font-serif); font-weight:400; font-size:1.5rem; color:var(--c-espresso); margin:0 0 1rem; }
.co-periods-card ul { list-style:none; padding:0; margin:0; }
.co-periods-card li { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--c-line); }
.co-periods-card li:last-child { border-bottom:0; }
.co-periods-card .dts b { display:block; font-family:var(--font-sans); font-weight:500; font-size:1rem; color:var(--c-text); }
.co-periods-card .dts span { font-size:.85rem; color:var(--c-muted); }
.co-periods-card .prc { white-space:nowrap; }
.co-periods-card .prc b { font-family:var(--font-sans); font-weight:600; color:var(--c-brown); font-size:1rem; }
.co-periods-card .prc span { font-size:.82rem; color:var(--c-muted); }

/* =====================================================================
   22. Beschikbaarheid — interactieve kalender + paneel 'Jouw verblijf'
   ===================================================================== */
.co-book { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; max-width:1240px; margin:0 auto; align-items:start; }
.co-cal-card {
  background:var(--c-offwhite); border:1px solid var(--c-line); border-radius:22px;
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:0 30px 60px -45px rgba(42,36,30,.35);
}
.co-cal-card .head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.co-cal-card .head h4 { font-family:var(--font-serif); font-weight:400; font-size:1.7rem; color:var(--c-espresso); margin:0; }
.co-cal-card .head .sub { font-size:.85rem; color:var(--c-muted); }
.co-cal-card .nav button {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--c-line); background:transparent;
  font-size:1.3rem; color:var(--c-espresso); cursor:pointer; margin-left:8px; transition:.25s;
}
.co-cal-card .nav button:hover { border-color:var(--c-taupe); background:var(--c-cream); }
.co-cal-card .legend { display:flex; gap:1.4rem; font-size:.82rem; color:var(--c-muted); margin-bottom:1.4rem; }
.co-cal-card .legend span::before { content:""; display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:.45em; vertical-align:-1px; }
.co-cal-card .legend .l-free::before { background:var(--c-cream); border:1px solid var(--c-beige); }
.co-cal-card .legend .l-booked::before { background:repeating-linear-gradient(45deg,#E7D8C6 0 3px,#F4E9DA 3px 6px); }
.co-cal-card .legend .l-sel::before { background:var(--c-taupe); }
.co-cal-card .months { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.co-month .cap { font-family:var(--font-serif); font-size:1.3rem; color:var(--c-espresso); text-align:center; margin-bottom:.8rem; }
.co-month .dow { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:6px; }
.co-month .dow span { text-align:center; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-taupe); }
.co-month .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.co-month .day {
  aspect-ratio:1/1.05; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--c-cream); border:1px solid var(--c-beige); cursor:pointer; transition:.2s; line-height:1.15;
}
.co-month .day b { font-weight:500; font-size:.92rem; color:var(--c-espresso); }
.co-month .day i { font-style:normal; font-size:.62rem; color:var(--c-muted); }
.co-month .day:hover:not(.past):not(.bk):not(.off) { border-color:var(--c-taupe); transform:translateY(-1px); }
.co-month .day.off { background:transparent; border:0; cursor:default; }
.co-month .day.past { background:transparent; border-color:transparent; cursor:default; opacity:.35; }
.co-month .day.bk {
  background:repeating-linear-gradient(45deg,#EDDFCE 0 4px,#F6EDDF 4px 8px);
  border-color:var(--c-beige); cursor:not-allowed;
}
.co-month .day.bk b { color:#B3A28C; text-decoration:line-through; }
.co-month .day.bk i { display:none; }
.co-month .day.sel { background:var(--c-taupe); border-color:var(--c-taupe); }
.co-month .day.sel b, .co-month .day.sel i { color:#2A241E; }
.co-cal-card .nf-title { font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--c-taupe); margin:2rem 0 1rem; }
.co-cal-card .nf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.co-cal-card .nf-card { border:1px solid var(--c-line); border-radius:14px; padding:1.2rem 1.3rem; }
.co-cal-card .nf-card .n { display:block; font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-taupe); margin-bottom:.4rem; }
.co-cal-card .nf-card b { display:block; font-family:var(--font-sans); font-weight:500; font-size:1rem; color:var(--c-espresso); margin-bottom:.3rem; }
.co-cal-card .nf-card .p { font-size:.85rem; color:var(--c-muted); }

.co-book-panel {
  background:var(--c-espresso); color:#D8CCB8; border-radius:22px;
  padding:clamp(1.8rem,3vw,2.4rem); position:sticky; top:90px;
}
.co-book-panel h4 { font-family:var(--font-serif); font-weight:400; font-size:1.9rem; color:#F7F1E6; margin:0 0 .3rem; }
.co-book-panel .pl { font-size:.92rem; color:#B7AB95; margin:0 0 1.4rem; }
.co-book-panel .dates { display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.co-book-panel .dates > div { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1rem; }
.co-book-panel .dates span { display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#9C8F79; margin-bottom:.3rem; }
.co-book-panel .dates b { font-weight:400; color:#F0E8D9; font-size:.98rem; }
.co-book-panel .arrow { color:var(--c-taupe); }
.co-book-panel .chosen { border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:1rem 0; font-size:.95rem; margin-bottom:1rem; }
.co-book-panel .total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.co-book-panel .total span { font-size:1rem; }
.co-book-panel .total b { font-family:var(--font-serif); font-weight:300; font-size:2.6rem; color:#F7F1E6; }
.co-book-panel .hint { font-size:.9rem; color:#B7AB95; margin:0 0 1.4rem; }
.co-book-panel .pf label { display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#9C8F79; margin-bottom:1rem; }
.co-book-panel .pf input, .co-book-panel .pf select, .co-book-panel .pf textarea {
  display:block; width:100%; margin-top:.4rem; padding:.85rem 1rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  color:#F0E8D9; font-family:var(--font-sans); font-size:.95rem; letter-spacing:normal; text-transform:none;
}
.co-book-panel .pf input::placeholder, .co-book-panel .pf textarea::placeholder { color:#8A7E6A; }
.co-book-panel .pf input:focus, .co-book-panel .pf select:focus, .co-book-panel .pf textarea:focus { outline:none; border-color:var(--c-taupe); }
.co-book-panel .pf .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.co-book-panel .pf .co-btn { border:0; width:100%; text-align:center; background:var(--c-taupe); color:var(--c-espresso) !important; }
.co-book-panel .pf .co-btn:hover { background:#C9B695 !important; color:var(--c-espresso) !important; }
@media(max-width:1024px){ .co-book { grid-template-columns:1fr; } .co-book-panel { position:static; } .co-cal-card .months { grid-template-columns:1fr; } }

/* =====================================================================
   23. Kaart (Google Maps) onder contact
   ===================================================================== */
.co-map { position:relative; }
.co-map iframe {
  display:block; width:100%; height:420px; border:0;
  filter:sepia(.18) saturate(.85);   /* warme tint, past bij het palet */
}
.co-map-link {
  position:absolute; right:22px; bottom:22px;
  background:var(--c-espresso); color:#F5EEE0 !important;
  font-family:var(--font-sans); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.85em 1.6em; border-radius:100px;
  box-shadow:0 10px 30px -10px rgba(42,36,30,.5);
}
.co-map-link:hover { background:var(--c-brown); }

/* =====================================================================
   24. Footer-links leesbaar op donker (override globale a-kleurregel)
   ===================================================================== */
.co-footer a, .site-footer a, .footer a { color: #C9BCA8 !important; }
.co-footer a:hover, .site-footer a:hover, .footer a:hover { color: #FFFFFF !important; }

/* =====================================================================
   25. Contact — rijen met icoon-tegels (mail / telefoon / facebook / adres)
   ===================================================================== */
.co-contact2 { list-style:none; padding:0; margin:1.6rem 0 0; }
.co-contact2 li { display:block; padding:1.3rem 0; border-bottom:1px solid var(--c-line); }
.co-contact2 li:last-child { border-bottom:0; }
.co-contact2 li, .co-contact2 .fb-row { display:flex; align-items:flex-start; gap:1.1rem; }
.co-contact2 a.fb-row { padding:0; }
.co-contact2 .ic {
  flex:0 0 54px; width:54px; height:54px; border-radius:16px;
  background:var(--c-offwhite); border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-taupe); box-shadow:0 10px 24px -14px rgba(42,36,30,.3);
}
.co-contact2 .ic svg { width:24px; height:24px; }
.co-contact2 .ic-fb { background:var(--c-offwhite); border-color:var(--c-line); color:var(--c-taupe); }
.co-contact2 b { display:block; font-family:var(--font-sans); font-weight:600; font-size:1.05rem; color:var(--c-espresso) !important; margin-bottom:.2rem; }
.co-contact2 div > span { font-size:.98rem; color:var(--c-muted); line-height:1.6; }
.co-contact2 .fb-row:hover b { color:var(--c-brown) !important; }

/* =====================================================================
   26. Gelijke afstand tussen de prijsblokken
   (seizoenskaarten → periodes-kaart even groot als periodes → inbegrepen)
   ===================================================================== */
#prijzen { padding-bottom: 10px !important; }

/* =====================================================================
   27. Kaart in de contact-kolom (afgerond, knop linksboven, natuurlijke kleuren)
   ===================================================================== */
.co-map { margin-top:1.8rem; border-radius:22px; overflow:hidden; position:relative;
          border:1px solid var(--c-line); box-shadow:0 30px 60px -45px rgba(42,36,30,.35); }
.co-map iframe { height:270px; filter:none; border-radius:0; }
.co-map-link {
  top:18px; left:18px; right:auto; bottom:auto;
  background:#FDFBF6; color:var(--c-brown) !important;
  border-radius:10px; padding:.8em 1.3em; letter-spacing:.1em;
  box-shadow:0 8px 24px -8px rgba(42,36,30,.35);
}
.co-map-link:hover { background:var(--c-cream); color:var(--c-espresso) !important; }

/* =====================================================================
   28. Contactformulier — eigen kaart, bovenaan uitgelijnd en sticky
   ===================================================================== */
#contact .elementor-column { align-self:flex-start; }
#contact .co-form {
  border-radius:22px; padding:clamp(1.8rem,3vw,2.6rem);
  box-shadow:0 30px 60px -45px rgba(42,36,30,.35);
  position:sticky; top:100px;
}
@media(max-width:768px){ #contact .co-form { position:static; } }

/* =====================================================================
   29. Contactformulier — titel, subtitel en brede verzend-pill
   ===================================================================== */
.co-form--contact h3 { font-family:var(--font-serif); font-weight:400; font-size:1.9rem; color:var(--c-espresso); margin:0 0 .3rem; }
.co-form--contact .fs { font-size:.95rem; color:var(--c-muted); margin:0 0 1.5rem; text-transform:none; letter-spacing:normal; }
.co-btn--wide {
  display:block; width:100%; text-align:center; border:0;
  text-transform:none !important; letter-spacing:.03em !important;
  font-size:1.02rem !important; font-weight:500;
  padding:1.15em !important; border-radius:100px;
}
.co-form--contact .co-note { text-align:left; }

/* =====================================================================
   30. Contact — ruimte tussen kop en inhoud (verhoudingen referentie)
   ===================================================================== */
#contact { padding-bottom: 30px !important; }
#contact .co-price-head { margin-bottom: 2rem; }

/* Contact: beide kolommen bovenaan laten beginnen (formulier niet centreren) */
#contact + .elementor-section .elementor-widget-wrap,
#contact + section .elementor-widget-wrap {
  align-content: flex-start !important;
  align-items: flex-start !important;
}

/* =====================================================================
   31. Contact — kaart rekt mee zodat hij onderaan gelijk eindigt
   met de formulier-kaart (bovenkant blijft top-uitgelijnd)
   ===================================================================== */
#contact + section .elementor-widget-wrap,
#contact + .elementor-section .elementor-widget-wrap {
  display: flex; flex-direction: column;
  align-items: stretch !important; align-content: stretch !important;
  justify-content: flex-start;
  height: 100%;
}
#contact + section .elementor-column,
#contact + .elementor-section .elementor-column { align-self: stretch; }
/* de widget met de kaart vult de resterende ruimte in de linkerkolom */
#contact + section .elementor-widget:has(.co-map),
#contact + .elementor-section .elementor-widget:has(.co-map) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#contact + section .elementor-widget:has(.co-map) > div,
#contact + .elementor-section .elementor-widget:has(.co-map) > div {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
#contact + section .co-map,
#contact + .elementor-section .co-map { flex: 1; display: flex; min-height: 0; }
#contact + section .co-map iframe,
#contact + .elementor-section .co-map iframe { flex: 1; height: auto; min-height: 240px; }

/* =====================================================================
   32. Contact — formulier-kaart rekt door tot de onderkant van de kaart
   ===================================================================== */
#contact + section .elementor-widget:has(.co-form--contact),
#contact + .elementor-section .elementor-widget:has(.co-form--contact) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#contact + section .elementor-widget:has(.co-form--contact) > div,
#contact + .elementor-section .elementor-widget:has(.co-form--contact) > div {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
#contact + section .co-form--contact,
#contact + .elementor-section .co-form--contact {
  flex: 1; display: flex; flex-direction: column;
  position: static;              /* sticky uit: kaart vult nu de kolom */
}
/* het berichtveld groeit mee zodat de kaart mooi gevuld blijft */
.co-form--contact label:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.co-form--contact textarea { flex: 1; min-height: 140px; resize: none; }

/* =====================================================================
   33. Sticky header — verschijnt bij scrollen (top-header blijft onaangetast)
   ===================================================================== */
header.banner.co-stuck {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(251, 247, 240, 0.97) !important;
  box-shadow: 0 1px 0 var(--c-line);
  animation: co-slidedown .35s ease;
}
@keyframes co-slidedown { from { transform: translateY(-100%); } to { transform: none; } }
/* donkere, leesbare tekst op de lichte sticky balk */
header.banner.co-stuck .navbar-nav > li > a { color: var(--c-brown) !important; }
header.banner.co-stuck .navbar-nav > li > a:hover { color: var(--c-espresso) !important; }
header.banner.co-stuck .navbar-brand,
header.banner.co-stuck .navbar-brand * { color: var(--c-espresso) !important; }
header.banner.co-stuck .navbar-toggle .icon-bar { background: var(--c-espresso) !important; }
/* Boeken-pill blijft taupe met donkere tekst */
header.banner.co-stuck .navbar-nav > li.nav-cta > a { color: var(--c-espresso) !important; }

/* =====================================================================
   34. Menurij verticaal centreren — 'Boeken'-pill netjes in het midden
   ===================================================================== */
@media (min-width: 768px) {
  .navbar .navbar-nav { display: flex; align-items: center; }
  .navbar .navbar-nav > li { float: none; }
  .navbar .navbar-nav > li.nav-cta > a { display: inline-block; margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* =====================================================================
   35. MotoPress kalender + boekformulier in demo-stijl
   ===================================================================== */
/* legenda */
.co-mphb-legend { display:flex; gap:1.4rem; justify-content:flex-start;
  max-width:900px; margin:0 auto 1rem; font-family:var(--font-sans);
  font-size:.85rem; color:var(--c-muted); }
.co-mphb-legend span::before { content:""; display:inline-block; width:12px; height:12px;
  border-radius:4px; margin-right:.45em; vertical-align:-1px; }
.co-mphb-legend .l-free::before { background:var(--c-cream); border:1px solid var(--c-beige); }
.co-mphb-legend .l-booked::before { background:repeating-linear-gradient(45deg,#E7D8C6 0 3px,#F4E9DA 3px 6px); }
.co-mphb-legend .l-sel::before { background:var(--c-taupe); }

/* kaarten */
.mphb_sc_availability_calendar-wrapper, .mphb_sc_booking_form-wrapper {
  max-width:900px; margin:0 auto 1.6rem;
  background:var(--c-offwhite); border:1px solid var(--c-line); border-radius:22px;
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 30px 60px -45px rgba(42,36,30,.35);
  font-family:var(--font-sans);
}

/* navigatie + maandkoppen */
.mphb-calendar .datepick-nav, .mphb-calendar .datepick-ctrl { background:transparent !important; border:0; }
.mphb-calendar .datepick-nav a, .mphb-calendar .datepick-ctrl a {
  background:transparent !important; color:var(--c-brown) !important;
  font-family:var(--font-sans); letter-spacing:.08em; }
.mphb-calendar .datepick-cmd-today { display:none !important; }
.mphb-calendar .datepick-month-header, .mphb-calendar .datepick-header {
  background:transparent !important; color:var(--c-espresso) !important;
  font-family:var(--font-serif) !important; font-size:1.45rem !important; }
.mphb-calendar .datepick-month-header select {
  -webkit-appearance:none; appearance:none; background:transparent !important;
  border:0 !important; font-family:var(--font-serif) !important;
  font-size:1.45rem !important; color:var(--c-espresso) !important; padding:0 .1em; }
.mphb-calendar .datepick-month, .mphb-calendar .datepick-month-row,
.mphb-calendar .datepick-inline .datepick-group { background:transparent !important; }
.mphb-calendar .datepick-inline { background:transparent !important; border:0 !important; width:100%; }
.mphb-calendar .datepick-month th { background:transparent !important;
  color:var(--c-taupe) !important; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; }

/* dag-chips */
.mphb-calendar .datepick-month td { padding:2.5px !important; background:transparent !important; }
.mphb-calendar .datepick-month td span, .mphb-calendar .datepick-month td a {
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  min-height:50px; line-height:1.15; border-radius:12px;
  background:var(--c-cream) !important; border:1px solid var(--c-beige) !important;
  color:var(--c-espresso) !important; font-family:var(--font-sans) !important;
  font-size:.95rem; text-decoration:none;
}
.mphb-calendar .datepick-month td span:empty { background:transparent !important; border:0 !important; min-height:50px; }
/* prijs onder het dagnummer */
.mphb-calendar .mphb-date-cell__price { display:block; font-size:.6rem; color:var(--c-muted); margin-top:1px; }
/* niet-beschikbaar: strepen + doorgehaald */
.mphb-calendar .datepick-month td.datepick-unselectable span,
.mphb-calendar .datepick-month td .mphb-unselectable-date,
.mphb-calendar .datepick-month td span.mphb-unselectable-date {
  background:repeating-linear-gradient(45deg,#EDDFCE 0 4px,#F6EDDF 4px 8px) !important;
  color:#B3A28C !important; text-decoration:line-through; }
.mphb-calendar .datepick-month td.datepick-unselectable .mphb-date-cell__price { display:none; }
/* selectie/checkin: taupe */
.mphb-calendar .datepick-month td a.datepick-selected,
.mphb-calendar .datepick-month td .datepick-selected,
.mphb-calendar .datepick-month td .datepick-highlight,
.mphb-calendar .datepick-month td a.datepick-highlight,
.mphb-calendar .datepick-month td .mphb-check-in-date,
.mphb-calendar .datepick-month td .mphb-check-out-date {
  background:var(--c-taupe) !important; border-color:var(--c-taupe) !important;
  color:var(--c-espresso) !important; }
.mphb-calendar .datepick-month td a:hover { border-color:var(--c-taupe) !important; }

/* boekformulier */
.mphb-booking-form label { font-family:var(--font-sans); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-taupe); }
.mphb-booking-form input, .mphb-booking-form select {
  background:var(--c-cream) !important; border:1px solid var(--c-line) !important;
  border-radius:10px !important; padding:.85em 1.05em !important;
  font-family:var(--font-sans) !important; color:var(--c-text) !important; }
.mphb-booking-form input:focus { border-color:var(--c-olive) !important; }
.mphb-booking-form .mphb-check-in-date-wrapper,
.mphb-booking-form .mphb-check-out-date-wrapper {
  display:inline-block; width:48%; vertical-align:top; }
.mphb-booking-form .mphb-check-in-date-wrapper { margin-right:3%; }
.mphb-booking-form input.mphb-datepick { width:100%; }
.mphb-required-fields-tip small { color:var(--c-muted); font-family:var(--font-sans); }
.mphb-reserve-btn, .mphb-booking-form button[type=submit], button.mphb-button {
  background:var(--c-espresso) !important; color:#F5EEE0 !important; border:0 !important;
  border-radius:100px !important; padding:1.05em 2.6em !important;
  font-family:var(--font-sans) !important; font-weight:500 !important;
  letter-spacing:.14em; text-transform:uppercase; opacity:1 !important; }
.mphb-reserve-btn:hover, button.mphb-button:hover { background:var(--c-brown) !important; }
.mphb-reserve-btn:disabled { opacity:.55 !important; }

/* =====================================================================
   36. Boeking-rij: kalender links, donker 'Jouw verblijf'-paneel rechts
   (zoals de oorspronkelijke demo)
   ===================================================================== */
/* wrappers vullen hun kolom (override van blok 35) */
#boeking .mphb_sc_availability_calendar-wrapper,
#boeking .mphb_sc_booking_form-wrapper {
  max-width:none; margin:0; width:100%;
}
/* twee maanden netjes naast elkaar in de linkerkaart */
#boeking .mphb-calendar .datepick-inline { display:flex; gap:1.6rem; }
#boeking .mphb-calendar .datepick-inline .datepick-group {
  width:50% !important; float:none !important; background:transparent !important;
}
#boeking .co-mphb-legend { max-width:none; margin:0 0 1rem; }

/* rechterkolom = donker paneel */
#boeking .elementor-column:last-child > .elementor-widget-wrap {
  background:var(--c-espresso); border-radius:22px;
  padding:clamp(1.8rem,3vw,2.4rem); color:#D8CCB8;
  position:sticky; top:100px;
}
.co-bp-head h4 { font-family:var(--font-serif); font-weight:400; font-size:1.9rem;
  color:#F7F1E6; margin:0 0 .3rem; }
.co-bp-head p { font-family:var(--font-sans); font-size:.92rem; color:#B7AB95; margin:0 0 1.2rem; }

/* formulier in het donkere paneel */
#boeking .mphb_sc_booking_form-wrapper {
  background:transparent; border:0; box-shadow:none; padding:0;
}
#boeking .mphb-booking-form label { color:#9C8F79; }
#boeking .mphb-required-fields-tip small { color:#8A7E6A; }
#boeking .mphb-booking-form input, #boeking .mphb-booking-form select {
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#F0E8D9 !important; border-radius:12px !important;
}
#boeking .mphb-booking-form input::placeholder { color:#8A7E6A !important; }
#boeking .mphb-booking-form input:focus { border-color:var(--c-taupe) !important; }
#boeking .mphb-booking-form .mphb-check-in-date-wrapper,
#boeking .mphb-booking-form .mphb-check-out-date-wrapper {
  display:block; width:100%; margin-right:0;
}
#boeking .mphb-booking-form p, #boeking .mphb-booking-form .mphb-rooms-quantity,
#boeking .mphb-booking-form output, #boeking .mphb-booking-form span { color:#D8CCB8; }
#boeking .mphb-errors-wrapper { color:#E8B9A5; }
/* knop: taupe pill met donkere tekst (zoals demo) */
#boeking .mphb-reserve-btn, #boeking .mphb-booking-form button[type=submit] {
  width:100%; text-align:center;
  background:var(--c-taupe) !important; color:var(--c-espresso) !important;
}
#boeking .mphb-reserve-btn:hover { background:#C9B695 !important; }
/* het uitklap-kalendertje van het formulier (popup) leesbaar laten */
#boeking .mphb-booking-form .mphb-calendar { background:var(--c-offwhite); border-radius:14px; padding:.8rem; }

@media (max-width: 1024px) {
  #boeking .mphb-calendar .datepick-inline { display:block; }
  #boeking .mphb-calendar .datepick-inline .datepick-group { width:100% !important; }
  #boeking .elementor-column:last-child > .elementor-widget-wrap { position:static; }
}

/* =====================================================================
   37. Kalender: te korte verblijven niet selecteerbaar + melding-puls
   ===================================================================== */
.co-month .day.md { opacity:.35; cursor:not-allowed; }
.co-month .day.md:hover { transform:none; border-color:var(--c-beige); }
.co-book-panel .hint.pulse { animation:ar-hintpulse 1s ease; }
@keyframes ar-hintpulse {
  0%,100% { color:#B7AB95; }
  25% { color:#F0C9A8; }
  60% { color:#F0C9A8; }
}

/* =====================================================================
   38. Kalenderkleuren: groen = vrij, rood gestreept = verhuurd
   ===================================================================== */
.co-month .day {
  background:#E9F2E6; border-color:#C7DCC2; color:#3E7247;
}
.co-month .day b { color:#3E7247; }
.co-month .day i { color:#6B9A6E; }
.co-month .day.bk {
  background:repeating-linear-gradient(45deg,#F3D0CB 0 4px,#FBE9E6 4px 8px);
  border-color:#E8C2BC; cursor:not-allowed;
}
.co-month .day.bk b { color:#B0564A; text-decoration:none; }
.co-month .day.past {
  background:#EDE7DC; border-color:#E3DACB; color:#B9AE9D; opacity:.85; cursor:default;
}
.co-month .day.past b { color:#B9AE9D; }
.co-month .day.sel { background:var(--c-taupe) !important; border-color:var(--c-taupe) !important; }
.co-month .day.sel b, .co-month .day.sel i { color:var(--c-espresso) !important; }
.co-month .day.md { opacity:.35; }
/* legenda mee in kleur */
.co-cal-card .legend .l-free::before { background:#E9F2E6; border:1px solid #C7DCC2; }
.co-cal-card .legend .l-booked::before { background:repeating-linear-gradient(45deg,#F3D0CB 0 3px,#FBE9E6 3px 6px); }
.co-cal-card .legend .l-sel::before { background:var(--c-taupe); }

/* meldingen in het paneel */
.co-msg { border-radius:12px; padding:.95em 1.15em; margin-bottom:1rem;
  font-family:var(--font-sans); font-size:.95rem; line-height:1.5; }
.co-msg.ok  { background:rgba(122,158,120,.18); border:1px solid rgba(122,158,120,.45); color:#CBE3C9; }
.co-msg.err { background:rgba(196,110,96,.16); border:1px solid rgba(196,110,96,.45); color:#F0C4BB; }

/* Eindschoonmaak-regel in het paneel */
.co-book-panel .feeline {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--font-sans); font-size:.95rem; color:#D8CCB8;
}
.co-book-panel .feeline b { font-weight:500; color:#F0E8D9; }
/* Tekst op headerfoto beter leesbaar */
.co-hero {
  position: relative;
}

.co-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(25, 20, 16, 0.50) 0%,
      rgba(25, 20, 16, 0.20) 48%,
      rgba(25, 20, 16, 0.03) 75%
    ),
    linear-gradient(
      0deg,
      rgba(25, 20, 16, 0.30) 0%,
      transparent 42%
    );
  pointer-events: none;
  z-index: 1;
}

.co-hero > * {
  position: relative;
  z-index: 2;
}

.co-hero p,
.co-hero .facts {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
/* Tekst met kenmerken onderaan de header */
.co-facts {
  font-size: 20px !important;
}
@media (max-width: 768px) {
  .co-facts {
    font-size: 15px !important;
  }
}/* Foto in het verhaal op mobiel groter */
@media (max-width: 767px) {
  .elementor-widget-image img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}/* Prijslabel bovenaan op mobiel */
@media (max-width: 767px) {
  .co-badge {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
    padding: 5px 10px !important;
  }

  .co-badge strong,
  .co-badge b {
    white-space: nowrap !important;
  }
}/* Kenmerken header netjes op mobiel */
@media (max-width: 768px) {
  .co-facts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding-top: 20px !important;
  }

  .co-facts span {
    display: block !important;
    padding: 0 !important;
  }

  .co-facts span::after {
    display: none !important;
  }

  .co-facts span:last-child {
    grid-column: 1 / -1 !important;
    padding-top: 4px !important;
  }
}/* Nieuw logo weer zichtbaar maken */
.navbar-brand,
.custom-logo-link {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.navbar-brand img,
.custom-logo-link img {
  display: block !important;
  width: auto !important;
  max-width: 300px !important;
  height: 58px !important;
  object-fit: contain;
}