/* =====================================================================
   Quick fixes vakantiehuispagina — plak onderaan hondenopvakantieV2.css
   Kleuren uit de bestaande stylesheet (groen #1F5A43 / #296F3D, oranje #b94c03)
   ===================================================================== */

/* ---------- Tips & Ervaringen ---------- */

/* Koppen: rustiger, zelfde stijl als de rest van de nieuwe secties */
#tabs-3 h4 {
    color: #1C2421 !important;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 24px;
}
#tabs-3 h4 b { font-weight: 600; }

/* Tabellen omzetten naar een raster met kaarten */
#tabs-3 table,
#tabs-3 tbody { display: block; width: 100%; }
#ContentPlaceHolder1_ErvaringenOverigTable tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
#tabs-3 tr { display: contents; }
#tabs-3 td { display: block; }
#tabs-3 td hr { display: none; }

/* De review zelf */
#tabs-3 td p {
    box-sizing: border-box;
    height: 100%;
    margin: 0 0 14px 0;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #E6E9E7;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #3D4743;
}
#ContentPlaceHolder1_ErvaringenOverigTable td p { margin-bottom: 0; }

/* Uitgelichte review bovenaan */
#ContentPlaceHolder1_lbErvaringenHeaderTekst td p {
    border-left: 4px solid #b94c03;
    background: #FFFCFA;
}

/* Naam */
#tabs-3 td p > b:first-of-type {
    color: #1C2421;
    font-size: 15px;
}

/* Datum: van fel oranje naar rustig grijs */
#tabs-3 td p > span {
    color: #5B6661 !important;
    font-weight: 500 !important;
    font-size: 14px;
}

/* Gebruikersicoon als rond avatar */
#tabs-3 .fa-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 6px 8px 0;
    border-radius: 50%;
    background: #E8F2EA;
    color: #1F5A43 !important;
    font-size: 14px;
    vertical-align: middle;
}

/* ---------- Tab Locatie ---------- */

#kaart {
    height: 600px;
    border: 1px solid #E6E9E7;
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 720px) {
    #kaart { height: 60vh; min-height: 360px; }
}

.llg-kop {
    margin: 28px 0 12px 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #1C2421;
}

/* Knop "Bekijk" blijft wit na klikken (globale a:focus maakt hem anders donker) */
.llg-meer:focus, .llg-meer:visited { color: #FFFFFF; }

/* Globale li-marge niet in de tags */
.llg-tags li { margin: 0; }

/* ---------- Afstanden (In de buurt) ---------- */

.hov-afstanden {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.hov-afstanden li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: #F2F4F3;
    border-radius: 12px;
    font-size: 15px;
}
.hov-afst-icoon { display: inline-flex; color: #1F5A43; }
.hov-afst-icoon svg { width: 20px !important; height: 20px; display: block; }  /* site-CSS zet svg op width:50% */
.hov-afst-km {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1F5A43;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* =====================================================================
   1. Compacte prijsbalk onderaan (mobiel en tablet, < 1200px)
      Werkt samen met /js/prijsbalk.js
   ===================================================================== */
.pb-samenvatting { display: none; }

@media (max-width: 1199px) {
    .mobilefixed {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;
        left: 0;
        right: 0;
        margin: 0 !important;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #E6E9E7;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08) !important;
    }

    /* Bootstrap-kolommen 'oplossen' zodat de inhoud direct in het raster staat */
    .mobilefixed > [class*="col-"]:not(#meldingkeuze) { display: contents; }

    /* Niet nodig in de balk: lange datums, losse links, regeleinden, optie, gastenknop */
    .mobilefixed #LabelBeschikbarePeriode,
    .mobilefixed #anderedatum,
    .mobilefixed br,
    .mobilefixed #OptieLink,
    .mobilefixed #LabelPrijs .badge,
    .mobilefixed .gk-knop { display: none !important; }

    /* Gastenkeuze: alleen het paneel (bottom sheet) blijft actief */
    .mobilefixed .gk { position: absolute; width: 0; height: 0; margin: 0; }

    /* Meldingen ("Kies een vertrekdatum…") boven de balk */
    .mobilefixed #meldingkeuze {
        position: absolute; left: 0; right: 0; bottom: 100%;
        padding: 8px 16px; background: #FFFFFF; border-top: 1px solid #E6E9E7;
    }
    .mobilefixed #meldingkeuze:empty { display: none; }

    .mobilefixed #LabelPrijs { grid-column: 1; grid-row: 1; text-align: left; }
    .mobilefixed #LabelPrijs .prijsstyle { font-size: 20px; }
    .mobilefixed #LabelPrijs .prijsstyle > span[onclick] { font-size: 12px; }

    /* Tweede regel: twee duidelijke knoppen met 'Wijzig' */
    .mobilefixed .pb-samenvatting {
        display: flex; gap: 8px;
        grid-column: 1 / -1; grid-row: 2;
        margin-top: 8px;
    }
    .pb-chip {
        flex: 1 1 0; min-width: 0;
        display: flex; align-items: center; gap: 6px;
        min-height: 42px; padding: 4px 10px;
        background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 8px;
        color: #1C2421 !important; font: inherit; font-size: 14px; font-weight: 500 !important;
        text-decoration: none !important; text-align: left; cursor: pointer;
    }
    .pb-chip svg { flex: 0 0 18px; width: 18px !important; height: 18px; color: #4A5056; }
    .pb-waarde { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; line-height: 1.2; }
    .pb-pers { margin-right: 8px; font-weight: 600; }
    .pb-hond { font-weight: 600; }
    .pb-wijzig { flex: 0 0 auto; color: #1F5A43; font-size: 13px; font-weight: 700; text-decoration: underline; }

    .mobilefixed #BoekingLink {
        grid-column: 2; grid-row: 1;
        width: auto !important; margin: 0 !important;
        padding: 10px 22px !important; font-size: 17px !important;
        border-radius: 10px; white-space: nowrap;
    }

    /* Kleine telefoons: doorgestreepte prijs weglaten, anders breekt de regel */
    @media (max-width: 374px) {
        .mobilefixed #LabelPrijs span[style*="line-through"] { display: none; }
    }

    /* Ruimte onderaan zodat de balk geen inhoud bedekt */
    body { padding-bottom: 130px !important; }
}

/* =====================================================================
   2. Tabs: rustige tabbalk met onderstreping (scrollbaar op mobiel)
   ===================================================================== */
#myTab {
    display: flex; flex-wrap: nowrap; gap: 4px;
    margin: 8px 0 0 0; padding: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-bottom: 1px solid #E6E9E7;
}
#myTab::-webkit-scrollbar { display: none; }
#myTab .nav-item { flex: 0 0 auto !important; margin: 0; list-style: none !important; }
#myTab .nav-link {
    margin: 0 !important; padding: 12px 14px !important;
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
    background: none !important; color: #5B6661 !important;
    font-size: 16px; white-space: nowrap;
}
#myTab .nav-link b { font-weight: 600; }
#myTab .nav-link:hover { color: #1C2421 !important; }
#myTab .nav-link.active { color: #1C2421 !important; border-bottom-color: #b94c03 !important; }
@media (max-width: 767px) {
    #myTab .nav-link { padding: 10px 12px !important; font-size: 15px; }
}

/* =====================================================================
   3. Menubalk niet meer doorzichtig
   ===================================================================== */
.navbar.fixed-top {
    background-color: #fefcfa !important;
    background-image: none !important;
    opacity: 1 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* =====================================================================
   4. Koppen in gewone hoofdletters (Poppins), sitebreed
   ===================================================================== */
h1, h2 {
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-family: var(--font-heading);
}

/* De pagina zet li overal op list-style: disc !important — niet in deze onderdelen */
.llg-tags li, .hov-afstanden li, .gk li { list-style: none !important; }

/* =====================================================================
   "Waarom dit huis?" — max. 3 voordelen naast elkaar (UspRenderer)
   ===================================================================== */
.usp-kop {
    margin: 8px 0 14px 0;
    font-family: var(--font-heading);
    font-size: 1.25rem; font-weight: 600; color: #1C2421;
}
.usp-lijst {
    list-style: none; margin: 0 0 8px 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.usp {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 0; padding: 16px;
    background: #F2F4F3; border-radius: 14px;
    list-style: none !important;
}
.usp-icoon {
    flex: 0 0 48px; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; border-radius: 50%; color: #1F5A43;
}
.usp-icoon svg { width: 26px !important; height: 26px; display: block; }   /* site-CSS zet svg op width:50% */
.usp strong { display: block; font-size: 16px; line-height: 1.3; color: #1C2421; }
.usp span:not(.usp-icoon) { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: #5B6661; }

@media (max-width: 767px) {
    .usp-lijst { grid-template-columns: 1fr; gap: 8px; }
    .usp { padding: 12px 14px; }
}

/* =====================================================================
   "Vragen over dit huis?" — WhatsApp en e-mail (ContactRenderer)
   ===================================================================== */
.vk {
    margin: 20px 0 0 0; padding: 16px;
    background: #F2F4F3; border-radius: 14px;
}
.vk-tekst strong { display: block; font-size: 16px; color: #1C2421; }
.vk-tekst span { display: block; margin-top: 2px; font-size: 14px; color: #5B6661; }
.vk { max-width: 720px; }
.vk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vk-knoppen .vk-knop { flex: 1 1 240px; }
.vk-knop {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 0 16px; border-radius: 10px;
    font-size: 15px; font-weight: 600 !important; text-decoration: none !important;
}
.vk-knop img { width: 20px; height: 20px; }
.vk-knop svg { width: 20px !important; height: 20px; flex: 0 0 20px; }     /* site-CSS zet svg op width:50% */
.vk-whatsapp, .vk-whatsapp:hover, .vk-whatsapp:focus { background: #FFFFFF; border: 1.5px solid #25D366; color: #1C2421 !important; }
.vk-whatsapp:hover { background: #F0FBF4; }
.vk-mail, .vk-mail:hover, .vk-mail:focus { background: #FFFFFF; border: 1px solid #CCCCCC; color: #1C2421 !important; }
.vk-mail svg { color: #4A5056; }
.vk-mail:hover { border-color: #999999; }



/* =====================================================================
   Titelblok, kenmerken en voorzieningen (KenmerkenRenderer)
   ===================================================================== */

/* Titel + subtitel */
.kh-titel h1 { margin: 4px 0 6px 0 !important; padding: 0 !important; }
.kh-sub {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
    font-size: 15px; color: #5B6661;
}
.kh-plek { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kh-plek svg { width: 18px !important; height: 18px; color: #4A5056; flex: 0 0 18px; }
.kh-kaart { margin-left: 6px; color: #1F5A43 !important; font-weight: 600 !important; text-decoration: underline; }
.kh-code { font-size: 13px; color: #8A8A8A; letter-spacing: .02em; }

/* Kenmerken: rustige rij met iconen, zonder kaders */
.kf {
    list-style: none; margin: 18px 0 0 0; padding: 14px 0;
    display: flex; flex-wrap: wrap; gap: 12px 28px;
    border-top: 1px solid #EEF0EF; border-bottom: 1px solid #EEF0EF;
}
.kf-item {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; padding: 0;
    list-style: none !important; font-size: 15px; color: #3D4743;
}
.kf-icoon { flex: 0 0 20px; display: inline-flex; color: #6B746F; }
.kf-icoon svg { width: 20px !important; height: 20px; }                  /* site-CSS zet svg op width:50% */
.kf-extra { font-style: normal; font-size: 12px; font-weight: 600; color: #1F5A43;
            background: #E8F2EA; padding: 1px 7px; border-radius: 999px; margin-left: 2px; }

/* Titel met hondenicoon en vuurwerklogo rechts */
.kh-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kh-badges { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kh-vuurwerk { height: 30px; width: auto; }
.kh-honden { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 800; color: #1C2421; }
.kh-honden img { height: 30px; width: auto; }

/* Voorzieningen */
.kv-kop { margin: 24px 0 10px 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: #1C2421; }
.kv {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px;
}
.kv li {
    display: flex; align-items: center; gap: 8px; margin: 0;
    list-style: none !important; font-size: 15px; color: #3D4743;
}
.kv svg { width: 18px !important; height: 18px; flex: 0 0 18px; color: #1F5A43; }

@media (max-width: 767px) {
    .kf { gap: 10px 20px; }
    .kf-item { font-size: 14px; }
    .kv { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Fotoviewer (FotoRenderer + fotoviewer.js)
   ===================================================================== */
.fv { position: relative; margin-bottom: 8px; }
.fv-foto {
    display: block; width: 100%; height: 100%; padding: 0; margin: 0;
    border: 0; background: #E6E9E7; cursor: zoom-in; overflow: hidden;
}
.fv-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s, filter .2s; }
.fv-foto:hover img { filter: brightness(.92); }

.fv-alle {
    position: absolute; right: 14px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px;
    background: #FFFFFF; color: #1C2421; border: 1px solid #1C2421; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.fv-alle svg { width: 18px !important; height: 18px; }                   /* site-CSS zet svg op width:50% */
.fv-teller { display: none; }

/* Desktop / tablet: raster met 1 grote en max. 4 kleine foto's */
@media (min-width: 768px) {
    .fv-raster {
        display: grid; gap: 8px; height: 460px;
        grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
        border-radius: 14px; overflow: hidden;
    }
    .fv-raster .fv-foto:first-child { grid-row: 1 / span 2; }
    .fv-raster .fv-foto:nth-child(n+6) { display: none; }

    .fv-n1 .fv-raster { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .fv-n2 .fv-raster { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .fv-n2 .fv-raster .fv-foto:first-child { grid-row: auto; }
    .fv-n3 .fv-raster { grid-template-columns: 2fr 1fr; }
    .fv-n4 .fv-raster { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
    .fv-n4 .fv-raster .fv-foto:first-child { grid-row: 1 / span 3; }
}

/* Mobiel: swipebare strip */
@media (max-width: 767px) {
    .fv-raster {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        border-radius: 12px;
    }
    .fv-raster::-webkit-scrollbar { display: none; }
    .fv-raster .fv-foto { flex: 0 0 100%; aspect-ratio: 4 / 3; height: auto; scroll-snap-align: start; }
    .fv-teller {
        display: block; position: absolute; right: 10px; bottom: 10px;
        padding: 4px 10px; border-radius: 999px;
        background: rgba(0, 0, 0, .6); color: #FFFFFF; font-size: 13px; font-weight: 600;
        pointer-events: none;
    }
    .fv-alle { display: none; }
}

/* Volledig scherm */
.fv-open, .fv-open body { overflow: hidden; }
.fv-lb { position: fixed; inset: 0; z-index: 2000; background: rgba(12, 14, 13, .96); display: flex; flex-direction: column; }
.fv-lb[hidden] { display: none; }
.fv-lb-balk { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #FFFFFF; }
.fv-lb-teller { font-size: 15px; font-weight: 600; }
.fv-lb-sluit, .fv-lb-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #FFFFFF; cursor: pointer;
}
.fv-lb-sluit:hover, .fv-lb-nav:hover { background: rgba(255, 255, 255, .25); }
.fv-lb svg { width: 26px !important; height: 26px; }
.fv-lb-podium { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 72px 24px; min-height: 0; }
.fv-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.fv-lb-vorige { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.fv-lb-volgende { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
    .fv-lb-podium { padding: 0 0 16px; }
    .fv-lb-nav { width: 42px; height: 42px; background: rgba(0, 0, 0, .35); }
}

/* Tab Detailfoto's: foto's onder elkaar, klikbaar */
.fv-detail { display: grid; gap: 12px; }
.fv-detail .fv-foto { border-radius: 10px; height: auto; }
.fv-detail .fv-foto img { height: auto; }

/* Kenmerken: link "Meer info" bij omheinde tuin */
.kf-link { margin-left: 4px; font-size: 13px; font-weight: 600 !important; color: #1F5A43 !important; text-decoration: underline; }

/* =====================================================================
   Onder de omschrijving: omheinde-tuin-info en "Goed om te weten"
   ===================================================================== */
.kw-omheind {
    margin: 24px 0 0 0; padding: 16px 18px;
    background: #F2F4F3; border-radius: 14px;
    scroll-margin-top: 140px;                 /* niet achter de vaste menubalk bij "Meer info" */
}
.kw-kop { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #1C2421; }
.kw-kop svg, .kw-lijst svg { width: 20px !important; height: 20px; flex: 0 0 20px; color: #1F5A43; }
.kw-bron { margin: 2px 0 10px 30px; font-size: 13px; color: #6B746F; }
.kw-tekst { margin-left: 30px; font-size: 15px; line-height: 1.6; color: #3D4743; }

.kw { margin: 24px 0 0 0; }
.kw-titel { margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #1C2421; }
.kw-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kw-lijst li { display: flex; align-items: flex-start; gap: 10px; margin: 0; list-style: none !important; font-size: 15px; color: #3D4743; }
.kw-lijst .kw-let-op { padding: 10px 12px; background: #FFF7E8; border-radius: 10px; color: #1C2421; }
.kw-lijst .kw-let-op svg { color: #B26B00; }
.kf-extra-grijs { color: #5B6661; background: #EEF0EF; }
.kw-lijst span { overflow-wrap: anywhere; }          /* lange licentienummers breken netjes af */

/* =====================================================================
   Prijsblok desktop (>= 1200px): gastenkeuze bovenaan over de volle breedte,
   'Andere datum' als knop naast 'Boek nu'
   ===================================================================== */
@media (min-width: 1200px) {
    .mobilefixed {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;   /* kol 1 = breedte 'Andere datum' */
        column-gap: 10px;
        align-items: start;
        margin: 0;
    }
    /* Bootstrap-kolommen 'oplossen' zodat de inhoud direct in het raster staat */
    .mobilefixed > [class*="col-"]:not(#meldingkeuze) { display: contents; }

    /* Regel 1: gastenkeuze over de volle breedte */
    .mobilefixed .gk { grid-column: 1 / -1; grid-row: 1; margin: 0; min-width: 0; }
    .mobilefixed .gk-paneel { min-width: 320px; }

    .mobilefixed #anderedatum {
        grid-column: 1; grid-row: 4; align-self: stretch;
        display: inline-flex; justify-content: center; align-items: center; gap: 8px;
        min-height: 46px; margin: 14px 0 0 0 !important; padding: 0 12px;
        background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 8px;
        color: #1C2421 !important; font-size: 15px; font-weight: 500 !important;
        text-decoration: none !important; white-space: nowrap; cursor: pointer;
    }
    .mobilefixed #anderedatum::before {
        content: ""; flex: 0 0 18px; width: 18px; height: 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5056' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    .mobilefixed #anderedatum:hover { border-color: #1F5A43; color: #1F5A43 !important; }

    /* Regel 2: meldingen over de volle breedte */
    .mobilefixed #meldingkeuze { grid-column: 1 / -1; grid-row: 2; flex: none; max-width: none; padding: 0; }
    .mobilefixed #meldingkeuze:not(:empty) { margin-top: 10px; }

    /* Regel 3: datums links, prijs rechts */
    .mobilefixed #LabelBeschikbarePeriode { grid-column: 1 / 3; grid-row: 3; margin-top: 14px; }
    .mobilefixed #LabelPrijs { grid-column: 3; grid-row: 3; margin-top: 14px; text-align: right; }
    /* Losse regeleinden tussen de blokken weg; die binnen datum en prijs blijven */
    .mobilefixed > [class*="col-"] > br { display: none; }

    /* Regel 4: Andere datum (smal, links) + Boek nu (vult de rest); regel 5: optie */
    .mobilefixed #BoekingLink,
    .mobilefixed #BoekingLinkParticulier,
    .mobilefixed [id$="BedrijfLabel"] { grid-column: 2 / -1; grid-row: 4; align-self: stretch; width: 100%;
        display: flex; align-items: center; justify-content: center;
        min-height: 46px; margin: 14px 0 0 0 !important; padding: 0 22px !important;
        font-size: 18px !important; border-radius: 8px; white-space: nowrap; }
    .mobilefixed #OptieLink { grid-column: 1 / -1; grid-row: 5; margin-top: 10px; text-align: center; }
}

/* =====================================================================
   Betalingsvoorwaarden / flexibel betalen (UspRenderer.RenderBetalen)
   Zelfde stijl als "Goed om te weten" en de omheinde-tuin-info
   ===================================================================== */
.kb-betalen {
    margin: 24px 0 0 0; padding: 16px 20px;
    background: #F2F4F3; border: 1px solid #E6E9E7; border-radius: 12px;
}
.kb-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: #1C2421; }
.kb-kop svg { width: 22px !important; height: 22px; flex: 0 0 22px; color: #1F5A43; }
.kb-tekst { margin-left: 32px; font-size: 15px; line-height: 1.6; color: #3D4743; }
.kb-tekst p { margin: 0 0 8px 0; }
.kb-tekst p:last-child, .kb-tekst ul:last-child { margin-bottom: 0; }
.kb-tekst ul { margin: 0 0 8px 0; padding-left: 18px; }
.kb-tekst li { margin: 2px 0; }
.kb-tekst b, .kb-tekst strong { color: #1C2421; }
.kb-tekst a { color: #1F5A43; text-decoration: underline; }
.kb-tekst br + br { display: none; }               /* dubbele witregels uit de database */
@media (max-width: 575px) {
    .kb-betalen { padding: 14px 16px; }
    .kb-tekst { margin-left: 0; }
}

/* Periodelijst: tijdens bijwerken en periodes zonder omheinde tuin */
#mogelijkeperiodes { transition: opacity .2s; }
#mogelijkeperiodes.is-laden { opacity: .45; pointer-events: none; }
#mogelijkeperiodes .periode-nb { font-size: 12px; font-weight: 600; color: #B26B00; }
#mogelijkeperiodes .periode-zonder,
#mogelijkeperiodes .periode-met { margin-right: 6px; font-size: 12px; font-weight: 600; }
#mogelijkeperiodes .periode-zonder { color: #6B746F; }
#mogelijkeperiodes .periode-met { color: #1F5A43; }

/* Uitleg boven de periodelijst bij omheinde tuin (Booking Experts) */
.omheind-hint {
    display: none; align-items: flex-start; gap: 10px;
    margin: 0 0 10px 0; padding: 10px 14px;
    background: #FFF7E8; border-radius: 10px;
    font-size: 14px; line-height: 1.45; color: #1C2421;
}
.omheind-hint.is-zichtbaar { display: flex; }
.omheind-hint svg { width: 20px !important; height: 20px; flex: 0 0 20px; margin-top: 1px; color: #B26B00; }
#mogelijkeperiodes .list-group-item { cursor: pointer; }       /* regels zijn klikbaar (geen href) */
#mogelijkeperiodes .list-group-item:not(.active):hover { background: #F2F4F3; }

/* Gekozen periode: zacht groen met donkere tekst i.p.v. fel groen met witte tekst */
#mogelijkeperiodes .list-group-item.active {
    z-index: 2;
    background: #EAF3EE !important;
    border-color: #1F5A43 !important;
    box-shadow: inset 4px 0 0 #1F5A43;                 /* groene streep links */
    color: #1C2421 !important;
    font-weight: normal;
}
#mogelijkeperiodes .list-group-item.active > .beschikbaarheidlabel { color: #1C2421 !important; }
#mogelijkeperiodes .list-group-item.active > .overnachting { color: #5B6661 !important; }
#mogelijkeperiodes .list-group-item.active > span:last-child { font-weight: 700; color: #1C2421; }

/* Terug naar zoekresultaten */
a.kh-terug, a.kh-terug:hover {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 0; font-size: 14px; font-weight: 600 !important;
    color: #1F5A43 !important; text-decoration: none;
}
a.kh-terug svg { width: 18px !important; height: 18px; flex: 0 0 18px; transition: transform .15s; }
a.kh-terug:hover span { text-decoration: underline; }
a.kh-terug:hover svg { transform: translateX(-3px); }

/* Omheinde tuin op aanvraag (keuzeblok boven "Waarom dit huis?") */
.ko-blok {
    margin: 8px 0 24px 0; padding: 16px 20px;
    background: #F2F4F3; border: 1px solid #E6E9E7; border-radius: 12px;
}
.ko-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: #1C2421; }
.ko-kop svg { flex: 0 0 22px; color: #1F5A43; }
.ko-tekst { margin: 0 0 12px 32px; font-size: 15px; line-height: 1.6; color: #3D4743; }
.ko-keuze {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 0 32px; padding: 12px 14px;
    background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 10px;
    cursor: pointer; font-weight: normal;
}
.ko-keuze:hover { border-color: #1F5A43; }
.ko-keuze input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: #1F5A43; cursor: pointer; }
.ko-label { display: flex; flex-direction: column; line-height: 1.35; }
.ko-label strong { font-size: 15px; color: #1C2421; }
.ko-label small { font-size: 13px; color: #5B6661; }
.ko-keuze:has(input:checked) { background: #EAF3EE; border-color: #1F5A43; box-shadow: inset 4px 0 0 #1F5A43; }
@media (max-width: 575px) {
    .ko-blok { padding: 14px 16px; }
    .ko-tekst, .ko-keuze { margin-left: 0; }
}

/* =====================================================================
   Alleen ferienhaus-mit-hunden.de: beschrijving van de Freilaufgebiete
   (geen detailpagina's, dus uitklapbaar in de lijst)
   ===================================================================== */
.llg-item .llg-info { grid-column: 1 / -1; margin: -4px 0 0 0; }
.llg-info summary {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: #1F5A43; cursor: pointer; list-style: none;
}
.llg-info summary::-webkit-details-marker { display: none; }
.llg-info summary::after {
    content: ""; width: 8px; height: 8px; margin-left: 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.llg-info[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.llg-info-tekst { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #3D4743; }
.llg-disclaimer { margin: 10px 0 0 0; font-size: 13px; font-style: italic; color: #5B6661; }