/* =========================================================
   AANBOD DETAIL PAGINA
   ========================================================= */

.mwwobjectdetail #Content{padding:0 !important; --ad-tint:color-mix(in srgb,var(--kleur1) 4%,#ffffff 96%); background:var(--ad-tint);}
.mwwobjectdetail .lijn p{text-transform:uppercase;}
#ad-omschrijving{background:#ffffff;}
.ad_chat_teaser_wrap{background:linear-gradient(to bottom,#ffffff 0%,#ffffff 50%,var(--ad-tint) 50%,var(--ad-tint) 100%); margin-bottom: 32px;}

/* Hero - foto als volledige achtergrond, tekst + thumbnails liggen er als overlay bovenop */
.ad_hero{position:relative; min-height:660px; display:flex; align-items:flex-end; overflow:hidden;}
.ad_hero_photo{position:absolute; inset:0; background-size:cover; background-position:center center; background-repeat:no-repeat;}
.ad_hero_photo_overlay{position:absolute; inset:0; --ad-hero-donker:color-mix(in srgb,var(--kleur1) 50%,#000000 50%); background:linear-gradient(180deg,color-mix(in srgb,var(--ad-hero-donker) 5%,transparent 95%) 0%,color-mix(in srgb,var(--ad-hero-donker) 40%,transparent 60%) 50%,color-mix(in srgb,var(--ad-hero-donker) 85%,transparent 15%) 80%,var(--ad-hero-donker) 100%);}
/* Statuslabel boven de straatnaam/titel in .ad_hero_main (aanboddetail/bogdetail/nieuwbouwdetail) -
   hergebruikt de bestaande .aanbod_status_pill-opmaak (kleur2/kleur1 per status via de status_<slug>
   class), gewoon inline i.p.v. absoluut gepositioneerd - dit zit al in de tekst-overlay onderin de hero. */
.ad_hero_badges{margin-bottom:14px;}
.ad_hero_badges .aanbod_status_pill{display:inline-block;}
.ad_hero_inner{position:relative; z-index:2; width:100%; padding:0 128px 40px; box-sizing:border-box; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px;}
.ad_hero_main{color:#ffffff; min-width:0;}
.ad_hero_titel{color:#ffffff; font-size:46px; font-weight:400; margin:0 0 10px;}
.ad_hero_prijs{font-size:32px; font-weight:700; color:#ffffff; margin-bottom:24px;}
.ad_hero_kenmerken{display:grid; grid-template-columns:1fr 1fr; column-gap:0; margin-bottom:28px; max-width:480px; border-bottom:1px solid rgba(255,255,255,.3);}
.ad_hero_kenmerk{display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.9); padding:16px 0; border-top:1px solid rgba(255,255,255,.3);}
.ad_hero_kenmerk:nth-child(odd){padding-right:24px;}
.ad_hero_kenmerk:nth-child(even){padding-left:24px;}
.ad_hero_kenmerk:last-child:nth-child(odd){grid-column:1 / -1; padding-right:0;}
.ad_hero_kenmerk i{color:#ffffff; font-size:16px; flex:0 0 auto;}
.ad_hero_cta{display:flex; gap:16px;}
.ad_hero_btn{display:inline-flex; align-items:center; gap:10px; padding:16px 24px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;}
.ad_hero_btn:hover{text-decoration:none;}
.ad_hero_btn_outline{background:transparent; border:1px solid rgba(255,255,255,.6); color:#ffffff;}
.ad_hero_btn_outline:hover{background:rgba(255,255,255,.12); color:#ffffff;}
.ad_hero_btn_solide{background:var(--kleur2); color:#ffffff;}
.ad_hero_btn_solide:hover{background:color-mix(in srgb,var(--kleur2) 80%,#000 20%); color:#ffffff;}

.ad_hero_fotos{width:640px; max-width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-self:end;}
.ad_hero_foto_thumb{position:relative; display:block; aspect-ratio:4/3; overflow:hidden;}
.ad_hero_foto_thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.ad_hero_foto_verborgen{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;}

.ad_tabs{position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background:color-mix(in srgb,var(--kleur1) 50%,#000000 50%); padding:0 128px;}
.ad_tabs::before{content:""; position:absolute; top:0; left:128px; right:128px; height:1px; background:rgba(255,255,255,.15);}
.ad_tabs_nav{display:flex; flex-wrap:wrap;}
.ad_tabs_link{padding:20px 24px; color:rgba(255,255,255,.75); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-decoration:none; border-bottom:3px solid transparent;}
.ad_tabs_link:hover,.ad_tabs_link.actief{color:#ffffff; border-bottom-color:var(--kleur2); text-decoration:none;}
.ad_tabs_brochure{display:inline-flex; align-items:center; gap:8px; padding:6px 20px; border:1px solid rgba(255,255,255,.4); color:#ffffff; font-size:13px; font-weight:600; text-decoration:none;}
.ad_tabs_brochure:hover{background:var(--kleur2); border-color:var(--kleur2); color:#ffffff; text-decoration:none;}

/* Algemene sectie-opmaak */
.ad_section{padding:40px 128px; box-sizing:border-box;}
/* .ad_section_titel.ad_section_titel (dubbele class i.p.v. 1x) - deze pagina-eigen stijl moet winnen van de algemene .h2/.h3 utility-klassen uit style.css (die nu ook op deze elementen staan sinds de kop geen echte heading-tag meer is), en style.css laadt na aanboddetail.css */
.ad_section_titel.ad_section_titel{font-size:70px; font-weight:300; margin:32px 0 64px; color:var(--font_color);}
.ad_section_titel b{font-weight:800;}

/* Omschrijving */
.ad_section_grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:start; margin-top: 32px;}
.ad_omschrijving_tekst{color:color-mix(in srgb,var(--font_color) 80%,#ffffff 20%); font-size:15px; line-height:1.7;}
.ad_omschrijving_ingekort{max-height:280px; overflow:hidden;}
.ad_leesmeer{-webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; margin-top:16px; margin-bottom: 32px; height:44px; padding:0 24px; border:1px solid color-mix(in srgb,var(--font_color) 25%,transparent) !important; background:transparent !important; color:var(--font_color) !important; font-size:13px; font-weight:600; cursor:pointer; box-shadow:none !important; outline:none !important;}
.ad_leesmeer:hover,.ad_leesmeer:focus,.ad_leesmeer:active{border-color:var(--kleur1) !important; background:transparent !important; color:var(--kleur1) !important;}
.ad_section_foto_wrap{position:relative; padding-bottom:40px; padding-left:40px;}
.ad_section_foto{width:100%; height:460px;}
.ad_section_foto_img{width:100%; height:100%; background-size:cover; background-position:center center; background-repeat:no-repeat;}
.ad_section_stats{position:absolute; left:0; bottom:0; width:calc(100% - 40px); display:grid; grid-template-columns:repeat(4,1fr); background:color-mix(in srgb,var(--kleur1) 8%,#ffffff 92%); padding:20px 24px; box-shadow:0 12px 28px rgba(20,30,45,.12);}
/* Kleinere lettergrootte dan de oorspronkelijke 26px - deze balk toont nu echte kenmerken i.p.v. korte
   statistiek-getalletjes, en een lange eenwoordige waarde (bv. "Winkelruimte") past anders niet in de
   1fr-kolombreedte en loopt over de volgende kolom heen (grid-kolommen krimpen standaard niet onder de
   intrinsieke breedte van niet-afbrekende tekst). overflow-wrap als extra vangnet voor nog langere waardes. */
.ad_stat_value{font-size:20px; font-weight:400; color:var(--kleur1); line-height:1.25; overflow-wrap:break-word;}
.ad_stat_label{font-size:13px; color:color-mix(in srgb,var(--font_color) 60%,#ffffff 40%);}
/* nieuwbouwdetail.php heeft geen .ad_section_stats-balkje over de omschrijvingsfoto (dat bestaat alleen op aanboddetail/bogdetail) - de padding-left/bottom hierboven reserveert daar ruimte voor, die hier dus altijd leeg blijft en de foto lelijk laat "zweven" */
body.nieuwbouwdetail .ad_section_foto_wrap{padding:0;}

/* AI chat teaser */
.ad_chat_teaser{position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) 260px minmax(0,1.2fr); align-items:center; column-gap:40px; row-gap:20px; background:color-mix(in srgb,var(--kleur1) 55%,#000 45%); margin:0 128px; padding:0px 64px 0px 64px;}
/* color expliciet wit - .ad_section_titel.ad_section_titel hierboven zet zelf color:var(--font_color) (zwart) en wint daar met gelijke specificiteit (0,2,0) van .witte_tekst in style.css, dus hier als latere regel in hetzelfde bestand overschrijven */
.ad_chat_teaser .ad_section_titel{font-size:70px; line-height:1.15; white-space:nowrap; margin:0 0 14px; color:#ffffff;}
.ad_chat_foto{align-self:end; height:300px; width:360px; background-size:contain; background-position:bottom center; background-repeat:no-repeat;}
.ad_chat_tekst p{color:rgba(255,255,255,.78); font-size:15px; line-height:1.6; margin:0;}
.ad_chat_input{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.ad_chat_input input{width:500px !important; max-width:100% !important; height:56px; padding:0 20px; border:1px solid rgba(255,255,255,.3) !important; background:#ffffff !important; color:var(--font_color) !important; font-size:15px; box-shadow:none !important; box-sizing:border-box;}
.ad_chat_input input::placeholder{color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%) !important; opacity:1 !important;}
.ad_chat_input button{flex:0 0 auto; height:44px; padding:0 20px; border:0; background:var(--kleur2); color:#ffffff; font-size:13px; font-weight:600; cursor:pointer;}
.ad_chat_input button:hover{background:#ffffff; color:var(--kleur1);}
.ad_chat_input input:disabled,.ad_chat_input button:disabled{opacity:.6; cursor:default;}

.ad_chat_meta{display:none !important;}

/* AI chat pop-up - het gesprek zelf, zelfde witte-kaart/donkere-overlay opzet als .sneak_popup/.aankoop_popup elders op de site */
.ad_chat_popup{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:32px; box-sizing:border-box;}
.ad_chat_popup[hidden]{display:none !important;}
.ad_chat_popup_overlay{position:absolute; inset:0; background:rgba(10,20,35,.7);}
.ad_chat_popup_venster{position:relative; z-index:1; display:flex; flex-direction:column; width:100%; max-width:640px; max-height:calc(100vh - 64px); background:#ffffff; padding:40px 40px 32px; box-sizing:border-box; box-shadow:0 24px 60px rgba(0,0,0,.3);}
.ad_chat_popup_close{position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; border:0; background:transparent; color:var(--kleur1); font-size:26px; line-height:1; cursor:pointer;}
.ad_chat_popup_header{margin-bottom:20px;}
.ad_chat_popup_header .lijn p{color:var(--kleur2); text-transform:uppercase;}
.ad_chat_popup_titel.ad_chat_popup_titel{margin:8px 0 0; color:var(--font_color); font-size:24px; font-weight:700;}

.ad_chat_body{display:flex; flex-direction:column; gap:14px; min-height:120px; max-height:50vh; overflow-y:auto; margin-bottom:16px; padding-right:4px;}
.ad_chat_msg{display:flex; align-items:flex-end; gap:10px;}
.ad_chat_msg_user{justify-content:flex-end;}
.ad_chat_msg_antwoord{justify-content:flex-start;}
.ad_chat_avatar{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.ad_chat_bubble{max-width:75%; padding:14px 18px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word;}
.ad_chat_bubble_user{background:var(--kleur1); color:#ffffff; border-bottom-right-radius:0;}
.ad_chat_bubble_antwoord{background:color-mix(in srgb,var(--kleur1) 6%,#ffffff 94%); color:var(--font_color); border-bottom-left-radius:0;}
.ad_chat_bubble_typing{font-style:italic; color:color-mix(in srgb,var(--font_color) 60%,#ffffff 40%);}

.ad_chat_popup_input{display:flex; align-items:stretch; gap:10px;}
.ad_chat_popup_input input{flex:1 1 auto; min-width:0; height:50px; padding:0 18px; border:1px solid color-mix(in srgb,var(--font_color) 20%,transparent); border-radius:0; color:var(--font_color); font-size:14px; background:#ffffff; box-shadow:none;}
.ad_chat_popup_input input::placeholder{color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%); opacity:1;}
.ad_chat_popup_input input:focus{outline:none; border-color:var(--kleur1);}
.ad_chat_popup_input button{flex:0 0 auto; width:50px; height:50px; border:0; background:var(--kleur2); color:#ffffff; font-size:15px; cursor:pointer;}
.ad_chat_popup_input button:hover{background:var(--kleur1);}
.ad_chat_popup_input input:disabled,.ad_chat_popup_input button:disabled{opacity:.6; cursor:default;}

.ad_chat_disclaimer{margin:14px 0 0; color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%); font-size:11px; line-height:1.5;}

/* Kenmerken */
.ad_kenmerken_tabs{display:flex; align-items:flex-end; flex-wrap:wrap; gap:0; border-bottom:1px solid rgba(18,35,52,.75); margin-bottom:34px;}
.ad_kenmerken_tab{appearance:none; -webkit-appearance:none; position:relative; border:0 !important; background:transparent !important; padding:0 20px 17px; margin:0; font-size:15px; line-height:1; font-weight:500; letter-spacing:1.25px; text-transform:uppercase; color:var(--font_color); cursor:pointer; box-shadow:none !important; outline:none !important; white-space:nowrap;}
.ad_kenmerken_tab:first-child{padding-left:0;}
.ad_kenmerken_tab + .ad_kenmerken_tab{margin-left:4px;}
.ad_kenmerken_tab:hover,.ad_kenmerken_tab:focus,.ad_kenmerken_tab:active{background:transparent !important; color:var(--font_color) !important;}
.ad_kenmerken_tab.actief{color:var(--font_color) !important; font-weight:700; border:0 !important;}
.ad_kenmerken_tab.actief::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:5px; background:var(--kleur2);}
.ad_kenmerken_grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:21px; width:100%; margin-bottom: 64px;}
.ad_kenmerken_grid[hidden]{display:none !important;}
.ad_kenmerk_card{background:transparent; border:1px solid rgba(38,105,145,.16); height:182px; min-height:182px; padding:38px 35px 26px; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
.ad_kenmerk_card i{display:block; height:40px; margin:0 0 10px; color:var(--kleur1); font-size:32px; line-height:40px;}
.ad_kenmerk_label{display:block; margin:0 0 3px; color:var(--font_color); opacity:.72; font-size:14px; font-weight:400; line-height:1.2; letter-spacing:.6px; text-transform:lowercase;}
.ad_kenmerk_card b{display:block; margin:0; color:var(--font_color); font-size:21px; font-weight:600; line-height:1.15; letter-spacing:.8px; text-transform:lowercase;}
.ad_kenmerk_card b.ad_energielabel{display:inline-block; text-transform:none;}


/* Sneak preview CTA */
.ad_sneak_cta{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; background:color-mix(in srgb,var(--kleur1) 55%,#000 45%); align-items:center;}
.ad_sneak_foto{width:120px; height:120px; border-radius:50%; background-size:cover; background-position:center center; background-repeat:no-repeat; margin-bottom:24px;}
.ad_sneak_tekst p{color:rgba(255,255,255,.78); font-size:14px; line-height:1.6; margin:0 0 20px;}
.ad_sneak_voordelen{list-style:none; margin:0; padding:0;}
.ad_sneak_voordelen li{position:relative; padding-left:22px; margin-bottom:8px; color:rgba(255,255,255,.9); font-size:14px;}
.ad_sneak_voordelen li::before{content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:1px; color:var(--kleur2); font-size:12px;}
.ad_sneak_form_placeholder{background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35); color:rgba(255,255,255,.75); font-size:13px; padding:24px; text-align:center;}

/* Gallerij */
#ad-gallerij{background:#ffffff; padding-top:128px;}
.ad_gallerij{display:grid; grid-template-columns:280px minmax(0,1fr); gap:150px; align-items:start; border-top:2px solid color-mix(in srgb,var(--font_color) 15%,transparent); padding-top:64px;}
.ad_gallerij_sidebar{display:flex; flex-direction:column; border-left:1px solid color-mix(in srgb,var(--font_color) 12%,transparent);}
.ad_gallerij_tab{appearance:none; -webkit-appearance:none; display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:0 0 0 -1px; border:0; border-left:3px solid transparent; background:transparent; padding:15px 20px; font-size:15px; font-weight:500; letter-spacing:.6px; text-transform:uppercase; text-align:left; color:color-mix(in srgb,var(--font_color) 70%,#ffffff 30%); cursor:pointer; box-shadow:none !important; outline:none !important; width:100%;}
.ad_gallerij_tab span{padding:2px 9px; border-radius:20px; background:color-mix(in srgb,var(--kleur1) 8%,#ffffff 92%); color:var(--font_color); font-size:12px; font-weight:600; letter-spacing:0;}
.ad_gallerij_tab:hover{color:var(--font_color);}
.ad_gallerij_tab.actief{border-left-color:var(--kleur2); color:var(--font_color); font-weight:700;}
.ad_gallerij_content{min-width:0;}
.ad_gallerij_viewer{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#000000;}
.ad_gallerij_viewer img{display:block; width:100%; height:100%; object-fit:cover;}
.ad_gallerij_nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.9); color:var(--font_color); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(20,30,45,.15);}
.ad_gallerij_nav:hover{background:var(--kleur2); border-color:var(--kleur2); color:#ffffff;}
.ad_gallerij_prev{left:16px;}
.ad_gallerij_next{right:16px;}
.ad_gallerij_thumbs{position:relative; margin-top:16px;}
.ad_gallerij_thumbs .item{aspect-ratio:4/3;}
.ad_gallerij_thumb{appearance:none; -webkit-appearance:none; display:block; width:100%; height:100%; padding:0 !important; border:2px solid transparent; background:transparent !important; box-shadow:none !important; outline:none !important; cursor:pointer; overflow:hidden;}
.ad_gallerij_thumb:hover,.ad_gallerij_thumb:focus,.ad_gallerij_thumb:active{background:transparent !important; box-shadow:none !important; outline:none !important;}
.ad_gallerij_thumb:hover,.ad_gallerij_thumb:focus,.ad_gallerij_thumb:active{border-color:transparent !important;}
.ad_gallerij_thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.ad_gallerij_thumbs .owl-nav button.owl-prev,
.ad_gallerij_thumbs .owl-nav button.owl-next{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.95) !important; color:var(--font_color) !important; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(20,30,45,.15); margin:0 !important;}
.ad_gallerij_thumbs .owl-nav button.owl-prev::before{content:"\2039";}
.ad_gallerij_thumbs .owl-nav button.owl-next::before{content:"\203A";}
.ad_gallerij_thumbs .owl-nav button.owl-prev{left:-14px;}
.ad_gallerij_thumbs .owl-nav button.owl-next{right:-14px;}
.ad_gallerij_thumbs .owl-nav button.disabled{display:none;}
.ad_gallerij_plattegronden{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
.ad_gallerij_plattegronden img{display:block; width:100%; height:auto;}

/* 360 graden foto viewer (pannellum, via woning360/pan.js) - panoramawoning_rw krijgt zelf geen afmetingen van pannellum, dus die komen van deze wrapper */
.ad_360_viewer{position:relative; width:100%; aspect-ratio:3/2; background:#000000; overflow:hidden;}
.ad_360_viewer #panoramawoning_rw{position:absolute; inset:0; width:100%; height:100%;}
.ad_360_viewer select{position:absolute; z-index:5; top:16px; right:16px; padding:10px 16px; border:0; border-radius:0; background:var(--kleur1); color:#ffffff; font-size:13px; font-weight:600; box-shadow:none; cursor:pointer;}
.ad_360_viewer select:focus{outline:none; background:var(--kleur1);}
.pnlm-about-msg{display:none !important;}

/* Overtuigd? Ga ervoor - rendert nu de Betheme Global Section (post 50) via Mfn_Builder_Front. De .verkoopplan-section styling (overflow/max-width/responsive) staat sitewide in style.css, dus hier alleen de pagina-specifieke spacing. */
.ad_overtuigd_global_wrap{padding-top:32px; background:#ffffff; overflow:hidden;}

/* Locatie (placeholder tot buurtstatistieken gebouwd is) */
.ad_locatie_placeholder{color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%); font-size:14px;}

/* "In de buurt" - iframe-embed (mtmo-ww.nl/embed/indebuurt/{id}), iframe-show.js regelt de hoogte */
.ad_indebuurt_frame{width:100%;}
.ad_indebuurt_frame iframe{display:block; width:100%; border:0;}

/* Bezichtiging-popup formulier (CF7) */
#popup-contact{max-width:1800px !important; width:95% !important; box-sizing:border-box;}
.mfp-content:has(#popup-contact){max-width:1800px !important; width:95% !important;}
#popup-contact .popup-inner{max-width:100%; box-sizing:border-box;}
/* margin-top compenseert hier de -16px margin-bottom van de ".lijn p" erboven (sitewide label-stijl) - bij dit grote lettertype (42px/line-height 1.25) was die -16px niet genoeg en raakte de kop het label */
.ad_bezichtiging_titel.ad_bezichtiging_titel{font-size:42px; line-height:1.25; font-weight:300; margin:24px 0 32px; color:var(--font_color);}
.ad_bezichtiging_titel b{font-weight:800;}
.bezichtiging-form{width:100%;}
.bezichtiging-form p{margin:0 !important;}
.bezichtiging-sectielabel{margin:0 0 12px; color:var(--kleur1); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;}
.bezichtiging-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:20px;}
.bezichtiging-grid .wpcf7-form-control-wrap{display:block; width:100%;}
.bezichtiging-grid input,.bezichtiging-grid select{display:block; box-sizing:border-box; width:100%; height:56px; margin:0; padding:0 16px; border:1px solid color-mix(in srgb,var(--font_color) 20%,transparent); border-radius:0; color:var(--font_color); font-size:14px; background:#ffffff;}
.bezichtiging-grid select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px;}
.bezichtiging-grid input::placeholder{color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%); opacity:1;}
.bezichtiging-opmerking{margin-bottom:20px;}
.bezichtiging-opmerking .wpcf7-form-control-wrap{display:block; width:100%;}
.bezichtiging-opmerking textarea{display:block; box-sizing:border-box; width:100%; height:100px; margin:0; padding:14px 16px; border:1px solid color-mix(in srgb,var(--font_color) 20%,transparent); border-radius:0; color:var(--font_color); font-size:14px; font-family:inherit; resize:vertical;}
.bezichtiging-opmerking textarea::placeholder{color:color-mix(in srgb,var(--font_color) 55%,#ffffff 45%); opacity:1;}
.bezichtiging-submit{display:block; margin:0; text-align:right;}
.bezichtiging-submit p{margin:0 !important; display:inline-flex !important; box-sizing:border-box !important; align-items:center !important; justify-content:center !important; gap:12px !important; height:52px !important; padding:0 22px !important; background:var(--kleur2) !important; border:0 !important;}
.bezichtiging-submit input[type="submit"]{display:block !important; box-sizing:border-box !important; flex:0 0 auto !important; width:auto !important; height:50px !important; min-height:50px !important; margin:0 !important; padding:0 !important; background:transparent !important; background-image:none !important; border:0 !important; color:#ffffff !important; line-height:50px !important; box-shadow:none !important; font-weight:600 !important; font-size:14px !important;}
.bezichtiging-submit:hover p{background:color-mix(in srgb,var(--kleur2) 85%,#000 15%) !important;}
.bezichtiging-submit i{position:static !important; display:block !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; color:#ffffff !important; line-height:1 !important;}
.bezichtiging-submit .wpcf7-spinner{display:none !important;}

/* Media popup (foto's + plattegronden) */
.ad_media_popup{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(10,15,25,.85); padding:48px; box-sizing:border-box;}
.ad_media_popup[hidden]{display:none !important;}
.ad_media_popup img{display:block; max-width:100%; max-height:100%; background:#ffffff;}
.ad_media_popup_close{position:absolute; top:24px; right:32px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--font_color); font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none !important; outline:none !important;}
.ad_media_popup_close:hover{background:var(--kleur2); color:#ffffff;}
.ad_media_popup_nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--font_color); font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none !important; outline:none !important;}
.ad_media_popup_nav:hover{background:var(--kleur2); color:#ffffff;}
.ad_media_popup_prev{left:24px;}
.ad_media_popup_next{right:24px;}

/* Footer contactblok - rendert nu de Betheme Global Section (post 49) via Mfn_Builder_Front, geen eigen CSS meer nodig */
.ad_verkoopplan_global_wrap{background:linear-gradient(to bottom,var(--ad-tint) 0%,var(--ad-tint) 50%,#ffffff 50%,#ffffff 100%);}
.ad_verkoopplan_global_wrap .mcb-section{margin-top:0 !important;}

@media(max-width:999px){
	/* "Overtuigd? Ga ervoor" global section - de desktop padding-top:64px laat op mobiel/tablet te veel lege ruimte boven dit blok vallen */
	.ad_overtuigd_global_wrap{padding-top:0;}

	/* Op mobiel/tablet geen tekst-overlay meer bovenop de foto: titel+prijs+kenmerken+knoppen+thumbnails samen hebben meer hoogte nodig dan de foto dan nog leesbaar zou blijven. Foto en tekst worden losse, gestapelde blokken (zelfde patroon als de home-hero) */
	.ad_hero{display:block; min-height:auto;}
	.ad_hero_photo{position:relative; inset:auto; width:100%; height:280px;}
	.ad_hero_photo_overlay{background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--kleur1) 50%,#000000 50%) 100%);}
	.ad_hero_inner{position:static; display:block; padding:32px 24px; background:color-mix(in srgb,var(--kleur1) 50%,#000000 50%);}
	.ad_hero_fotos{width:auto; margin-top:24px;}
	.ad_section{padding:32px 24px;}
	/* De iframe-inhoud heeft al zijn eigen zijpadding - de sectie- EN pagebuilder-padding zouden hier dubbelop komen, dus trekt alleen de iframe zelf (niet de titel erboven) los tot de viewportrand (full-bleed, onafhankelijk van hoeveel wrappers eromheen nog eigen padding hebben) */
	.ad_indebuurt_frame{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw;}
	.ad_section_titel.ad_section_titel{font-size:48px; line-height:1.15; margin:24px 0 40px;}
	.ad_section_grid{grid-template-columns:1fr;}
	/* Statistieken-balk over de omschrijvingsfoto - stond nog vast op 4 kolommen, wat op mobiel veel te weinig ruimte per cijfer (bv. "1.204") overlaat */
	.ad_section_foto_wrap{padding-bottom:24px; padding-left:24px;}
	.ad_section_stats{width:calc(100% - 24px); grid-template-columns:repeat(2,1fr); gap:16px 12px; padding:16px;}
	.ad_stat_value{font-size:20px;}
	.ad_stat_label{font-size:12px;}
	.ad_chat_teaser{grid-template-columns:1fr; margin:0 24px; padding:24px 24px 32px; overflow:hidden;}
	/* .ad_chat_teaser .ad_section_titel forceert white-space:nowrap op 70px, ongeacht schermbreedte - dat duwde de hele sectie breder dan de viewport */
	/* .lijn p heeft sitewide margin-bottom:-16px (trekt het label strak tegen de titel eronder) - dat werkte hier toevallig door de grote line-height op 70px, maar bij 40px gaat de titel daardoor door het "direct antwoord" label heen */
	.ad_chat_teaser .ad_section_titel{font-size:40px; white-space:normal; margin-top:20px;}
	.ad_chat_tekst,.ad_chat_input{min-width:0;}
	/* Foto valt op mobiel/tablet weg - de 3-koloms opzet (tekst/foto/input) werkt hier niet meer en de foto voegt in 1 kolom weinig toe */
	.ad_chat_foto{display:none;}
	.ad_chat_input{align-items:stretch;}
	.ad_chat_input input{width:100% !important;}
	.ad_chat_input button{width:100%; min-width:0; height:auto; min-height:44px; padding:12px 20px; white-space:normal; text-align:center; justify-content:center;}
	.ad_chat_popup{padding:16px;}
	.ad_chat_popup_venster{max-height:calc(100vh - 32px); padding:28px 20px 24px;}
	.ad_chat_popup_titel.ad_chat_popup_titel{font-size:20px;}
	.ad_sneak_cta{grid-template-columns:1fr; padding:48px 24px;}
	.ad_kenmerken_grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.ad_kenmerk_card{height:182px; min-height:182px;}
	/* overflow-x:auto laat (afhankelijk van browser/OS) een zichtbare scrollbalk zien onder de tabs - dat grijze balkje heeft niets met de actieve tab te maken, dus verbergen */
	.ad_kenmerken_tabs{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none;}
	.ad_kenmerken_tabs::-webkit-scrollbar{display:none;}
	.ad_kenmerken_tab{flex:0 0 auto;}
	.ad_tabs{padding:0 24px;}
	.ad_tabs::before{left:24px; right:24px;}
	/* .ad_gallerij had nog de desktop grid-gap van 150px, wat bij 1 kolom een enorme lege verticale ruimte tussen de tabs en de foto's gaf */
	#ad-gallerij{padding-top:56px;}
	.ad_gallerij{grid-template-columns:1fr; gap:24px; padding-top:32px;}
	.ad_gallerij_sidebar{flex-direction:row; flex-wrap:wrap; border-left:0; border-bottom:1px solid color-mix(in srgb,var(--font_color) 12%,transparent); margin-bottom:24px;}
	.ad_gallerij_tab{margin:0 0 -1px; border-left:0; border-bottom:3px solid transparent; -webkit-tap-highlight-color:transparent;}
	.ad_gallerij_tab.actief{background:transparent; border-left:0; border-bottom-color:var(--kleur2);}
}

@media(min-width:768px) and (max-width:999px){
	/* Hero-foto op tablet groter voordat de onderste fade (.ad_hero_photo_overlay) begint - de vaste mobiele hoogte (280px) liet hier te weinig van de woningfoto zien voordat die wegviel in de donkere overlay */
	.ad_hero_photo{height:420px;}

	/* Bezichtiging-popup titel - desktop line-height (1.25) oogt op de smallere tablet-breedte (3 regels) te verdicht, meer lucht tussen de regels */
	.ad_bezichtiging_titel.ad_bezichtiging_titel{line-height:1.5;}
}

@media(max-width:767px){
	.ad_hero_titel{font-size:26px;}
	/* .ad_hero_prijs had geen mobiele verkleining en geen eigen line-height - bij een langere prijs met achtervoegsel (bv. "Kosten koper" op bogdetail) breekt die naar 2 regels en oogt zonder line-height alsof de tekst over elkaar heen valt */
	.ad_hero_prijs{font-size:22px; line-height:1.3; margin-bottom:16px;}
	.ad_section_titel.ad_section_titel{font-size:34px; margin:16px 0 28px;}
	.ad_chat_teaser .ad_section_titel{font-size:28px;}
	/* Zelfde probleem als bij de andere titels: geen mobiele verkleining, en het "bezichtiging aanvragen" label erboven trekt zichzelf -16px omhoog, dus zonder top-marge liep de titel er dwars doorheen */
	#popup-contact .popup-inner{padding:0px !important;}
	.ad_bezichtiging_titel.ad_bezichtiging_titel{font-size:26px; margin-top:16px; margin-bottom:20px;}
	.bezichtiging-sectielabel{margin-bottom:8px;}
	/* 2 velden per rij liet placeholders als "Tussenvoeg", "Telefoonnur" en "E-mailadres" afbreken - op mobiel 1 veld per rij, met kleinere marges want alles onder elkaar loopt anders snel lang op */
	.bezichtiging-grid{grid-template-columns:1fr; gap:10px; margin-bottom:14px;}
	.bezichtiging-grid input,.bezichtiging-grid select{height:48px;}
	.bezichtiging-opmerking{margin-bottom:14px;}
	.bezichtiging-opmerking textarea{height:72px;}
	.bezichtiging-submit{text-align:stretch;}
	.bezichtiging-submit p{width:100%; justify-content:center; height:48px;}
	.bezichtiging-submit input[type="submit"]{height:46px; min-height:46px; line-height:46px;}
	.ad_hero_cta{flex-direction:column;}
	.ad_kenmerken_grid{grid-template-columns:1fr; gap:12px;}
	/* Op 1 volle-breedte kolom oogde de vaste kaarthoogte (182px, icoon-boven-tekst) veel te leeg - op mobiel wordt het een compacte rij: icoon links, label+waarde ernaast. Grid i.p.v. flex-row, anders schuift de waarde mee met de lengte van het label (niet uitgelijnd) */
	.ad_kenmerk_card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center; height:auto; min-height:0; padding:16px 20px;}
	.ad_kenmerk_card i{grid-column:1; grid-row:1 / 3; height:auto; margin:0; font-size:24px; line-height:1;}
	.ad_kenmerk_label{grid-column:2; grid-row:1; margin:0;}
	.ad_kenmerk_card b{grid-column:2; grid-row:2; font-size:16px;}
}