/* ==========================================================================
   Boxkoning – aanbodkaart locatiepagina's (te huur / te koop)
   Okt 2026, feedback Paul Smits: tabs vervangen door gestapelde blokken,
   twee duidelijke opties (WhatsApp / aanvraag), korting goed zichtbaar.
   Classes staan in Beaver Builder onder Geavanceerd → Class.
   ========================================================================== */

:root{--bk-red:#e30613;--bk-red-dark:#b8040f;--bk-red-soft:#fdf1f1;--bk-green:#15803d;--bk-green-dark:#116632;--bk-green-soft:#eff8f2;--bk-ink:#2b2b2b;--bk-muted:#5b5b5b;--bk-line:#e6e6e6}

/* Kaart (kolom) */
.fl-col.bk-offer > .fl-col-content{background:#fff;border:1px solid var(--bk-line);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:32px 32px 28px}
@media (min-width:769px){.fl-col.bk-offer{position:relative;z-index:10;margin-top:-325px;padding-left:30px}}
.fl-col.bk-offer .fl-module{margin-left:0!important;margin-right:0!important}
.fl-col.bk-offer .fl-module-content{margin:0!important}
.fl-col.bk-offer .fl-col-group-nested{margin:0}

/* Koppen */
.bk-offer .bk-kicker{margin:0 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--bk-muted)}
.bk-offer .bk-offer-title{margin:0;font-size:34px;line-height:1.05;color:var(--bk-ink)}
.bk-offer .bk-lead{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--bk-muted)}

/* Prijs */
.bk-offer .fl-module.bk-price{margin-top:16px!important}
.bk-offer .bk-price p{margin:0}
.bk-offer .bk-price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.bk-offer .bk-price-from{font-family:'Bebas Neue',display;font-size:28px;color:var(--bk-red)}
.bk-offer .bk-price-now{font-family:'Bebas Neue',display;font-size:64px;line-height:1;color:var(--bk-red)}
.bk-offer .bk-price-per{font-family:'Bebas Neue',display;font-size:28px;color:var(--bk-red)}
.bk-offer .bk-price .bk-price-deal{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:10px;padding:6px 12px;border-radius:4px;background:var(--bk-green-soft);color:var(--bk-green-dark);font-size:16px;line-height:1.35}
.bk-offer .bk-price-old{color:var(--bk-muted);text-decoration:line-through}
.bk-offer .bk-price .bk-price-note{margin-top:10px;font-size:15px;line-height:1.45;color:var(--bk-muted)}
.bk-offer .bk-price .bk-badge{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:4px;background:var(--bk-green-soft);color:var(--bk-green-dark);font-size:15px}
.bk-offer ul.bk-sizes{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--bk-line)}
.bk-offer ul.bk-sizes li{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid var(--bk-line);font-size:16px;color:var(--bk-ink)}
.bk-offer ul.bk-sizes li span:last-child{white-space:nowrap}

/* Opties (WhatsApp / aanvraag) */
.fl-col.bk-opt{margin-top:20px}
.fl-col.bk-opt > .fl-col-content{border-radius:6px;padding:20px 22px 22px}
.fl-col.bk-opt--wa > .fl-col-content{background:var(--bk-green-soft)}
.fl-col.bk-opt--rent > .fl-col-content,.fl-col.bk-opt--buy > .fl-col-content{background:var(--bk-red-soft)}
.bk-opt h3{margin:0 0 6px;font-size:26px;line-height:1.1;color:var(--bk-ink)}
.bk-opt p{margin:0;font-size:16px;line-height:1.5;color:var(--bk-muted)}
.bk-offer .bk-opt .fl-module-button{margin-top:16px!important}
.bk-offer .bk-opt .fl-module-button + .fl-module-button{margin-top:10px!important}
.bk-opt a.fl-button,.bk-opt a.fl-button:visited{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 20px;border:0!important;border-radius:4px;font-size:18px;line-height:1.2;text-decoration:none!important;transition:background-color .2s ease}
.bk-opt a.fl-button .fl-button-text,.bk-opt a.fl-button i{color:#fff!important;text-decoration:none!important}
.bk-opt a.fl-button i{font-size:22px;margin:0!important}
.bk-opt a.fl-button i.fl-button-icon-before{margin-right:10px!important}
.bk-opt a.fl-button i.fl-button-icon-after{margin-left:10px!important}
.bk-opt--wa a.fl-button{background:var(--bk-green)!important}
.bk-opt--wa a.fl-button:hover,.bk-opt--wa a.fl-button:focus{background:var(--bk-green-dark)!important}
.bk-opt--rent a.fl-button,.bk-opt--buy a.fl-button{background:var(--bk-red)!important}
.bk-opt--rent a.fl-button:hover,.bk-opt--rent a.fl-button:focus,.bk-opt--buy a.fl-button:hover,.bk-opt--buy a.fl-button:focus{background:var(--bk-red-dark)!important}
.bk-opt a.fl-button:focus-visible{outline:3px solid var(--bk-ink);outline-offset:2px}
.bk-offer .fl-module.bk-microcopy{margin-top:10px!important}
.bk-microcopy p{font-size:14px;text-align:center;color:var(--bk-muted)}

/* Te koop / geen aanbod */
.bk-offer .fl-module.bk-sale{margin-top:24px!important;padding-top:20px;border-top:1px solid var(--bk-line)}
.bk-offer .bk-sale .bk-offer-title{font-size:28px}
.bk-offer .bk-sale .bk-price-now{font-size:48px}
.bk-offer .fl-module.bk-sale-modal{margin-top:8px!important}
.bk-sale-modal .uabb-modal-action-wrap{text-align:left!important}
.bk-sale-modal .uabb-modal-action,.bk-sale-modal .uabb-modal-action *{color:var(--bk-red)!important;font-size:16px}

/* Mobiel */
@media (max-width:768px){.fl-col.bk-offer > .fl-col-content{margin:0 16px;padding:24px 20px;box-shadow:0 10px 28px rgba(0,0,0,.10)}.bk-offer .bk-offer-title{font-size:30px}.bk-offer .bk-sale .bk-offer-title{font-size:26px}.bk-offer .bk-price-now{font-size:56px}.fl-col.bk-opt > .fl-col-content{padding:18px 16px}.bk-opt h3{font-size:24px}.bk-opt a.fl-button{font-size:17px}}
@media (prefers-reduced-motion:reduce){.bk-opt a.fl-button{transition:none}}

/* Ruimte onder de kaart op mobiel (feedback 22-10): tekst plakte tegen de kaart */
@media (max-width:768px){.fl-col.bk-offer{margin-bottom:40px!important}}