/* =============================================================================
    CUSTOM.CSS — BIVABO OVERRIDES & RESPONSIVE TWEAKS
    ============================================================================= */

/* Align Bootstrap "success" color with Bivabo blue on all
   marketing pages that load legacy assets/css/bootstrap.min.css. */
:root {
    --bs-success-rgb: 6, 23, 134;
}

/* =============================================================================
    [01] DARK MODE (MARKETING PAGES)
    =============================================================================
   Triggered by the theme toggle adding `html.dark` and/or `html[data-theme="dark"]`.
   Goal: make the *entire page* readable in dark mode even with legacy /assets/css/style.css.
*/
html.dark,
html[data-theme="dark"] {
    color-scheme: dark;

    --bivabo-bg: #0b1220;
    --bivabo-surface: #111827;
    --bivabo-surface-2: #0f172a;
    --bivabo-border: rgba(255, 255, 255, 0.10);
    --bivabo-text: #e5e7eb;
    --bivabo-muted: #9ca3af;
    --bivabo-link: #93c5fd;
    --bivabo-link-hover: #bfdbfe;
}

html.dark body,
html[data-theme="dark"] body {
    background: var(--bivabo-bg) !important;
    color: var(--bivabo-text) !important;
}

html.dark .page_wrapper,
html[data-theme="dark"] .page_wrapper,
html.dark main.page_content,
html[data-theme="dark"] main.page_content {
    background: transparent !important;
    color: inherit;
}

/* -----------------------------------------------------------------------------
    [01.A] Typography
    ----------------------------------------------------------------------------- */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--bivabo-text) !important;
}

html.dark .text-muted,
html[data-theme="dark"] .text-muted {
    color: var(--bivabo-muted) !important;
}

/* -----------------------------------------------------------------------------
    [01.B] Links (avoid breaking buttons)
    ----------------------------------------------------------------------------- */
html.dark a:not(.btn):not(.hotline_btn),
html[data-theme="dark"] a:not(.btn):not(.hotline_btn) {
    color: var(--bivabo-link);
}

html.dark a:not(.btn):not(.hotline_btn):hover,
html[data-theme="dark"] a:not(.btn):not(.hotline_btn):hover {
    color: var(--bivabo-link-hover);
}

/* -----------------------------------------------------------------------------
    [01.C] Footer: keep all content white (not light blue)
    ----------------------------------------------------------------------------- */
html.dark .site_footer,
html[data-theme="dark"] .site_footer {
    color: #fff !important;
}

html.dark .site_footer a,
html.dark .site_footer p,
html.dark .site_footer li,
html.dark .site_footer span,
html.dark .site_footer h1,
html.dark .site_footer h2,
html.dark .site_footer h3,
html.dark .site_footer h4,
html[data-theme="dark"] .site_footer a,
html[data-theme="dark"] .site_footer p,
html[data-theme="dark"] .site_footer li,
html[data-theme="dark"] .site_footer span,
html[data-theme="dark"] .site_footer h1,
html[data-theme="dark"] .site_footer h2,
html[data-theme="dark"] .site_footer h3,
html[data-theme="dark"] .site_footer h4 {
    color: #fff !important;
}

html.dark .site_footer a:hover,
html[data-theme="dark"] .site_footer a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
    [01.D] Contact section ("Hulp nodig? Wij staan voor je klaar!")
    -----------------------------------------------------------------------------
   The large panel is light in the legacy template; in dark mode we convert it to a dark surface
   so headings/descriptions remain readable.
*/
html.dark .contact_section .heading_block .badge,
html[data-theme="dark"] .contact_section .heading_block .badge {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #bfdbfe !important;
}

html.dark .contact_section .insurance_contact_info,
html[data-theme="dark"] .contact_section .insurance_contact_info {
    background: var(--bivabo-surface) !important;
    border: 1px solid var(--bivabo-border) !important;
}

html.dark .contact_section .insurance_contact_info .heading_text,
html.dark .contact_section .insurance_contact_info .heading_description,
html.dark .contact_section .insurance_contact_info p,
html[data-theme="dark"] .contact_section .insurance_contact_info .heading_text,
html[data-theme="dark"] .contact_section .insurance_contact_info .heading_description,
html[data-theme="dark"] .contact_section .insurance_contact_info p {
    color: var(--bivabo-text) !important;
}

html.dark .contact_section .insurance_member,
html[data-theme="dark"] .contact_section .insurance_member {
    border: 1px solid var(--bivabo-border) !important;
}

/* -----------------------------------------------------------------------------
    [01.E] Bootstrap surfaces
    ----------------------------------------------------------------------------- */
html.dark .bg-white,
html[data-theme="dark"] .bg-white {
    background-color: var(--bivabo-surface) !important;
}

html.dark .bg-light,
html[data-theme="dark"] .bg-light {
    background-color: var(--bivabo-surface-2) !important;
}

html.dark .border,
html.dark .border-top,
html.dark .border-bottom,
html.dark .border-start,
html.dark .border-end,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--bivabo-border) !important;
}

/* -----------------------------------------------------------------------------
    [01.F] Common marketing blocks/cards
    ----------------------------------------------------------------------------- */
html.dark .service_block,
html.dark .service_item,
html.dark .iconbox_block,
html.dark .review_block_4,
html.dark .blog_item,
html.dark .blog_card,
html.dark .accordion-item,
html[data-theme="dark"] .service_block,
html[data-theme="dark"] .service_item,
html[data-theme="dark"] .iconbox_block,
html[data-theme="dark"] .review_block_4,
html[data-theme="dark"] .blog_item,
html[data-theme="dark"] .blog_card,
html[data-theme="dark"] .accordion-item {
    background: var(--bivabo-surface) !important;
    color: var(--bivabo-text) !important;
    border-color: var(--bivabo-border) !important;
}

html.dark .accordion-button,
html[data-theme="dark"] .accordion-button {
    background: var(--bivabo-surface-2) !important;
    color: var(--bivabo-text) !important;
}

/* -----------------------------------------------------------------------------
    [01.G] Forms
    ----------------------------------------------------------------------------- */
html.dark input,
html.dark select,
html.dark textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--bivabo-surface-2) !important;
    color: var(--bivabo-text) !important;
    border-color: var(--bivabo-border) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(229, 231, 235, 0.65) !important;
}

/* -----------------------------------------------------------------------------
    [01.H] Unified navbar in dark mode
    ----------------------------------------------------------------------------- */
html.dark .unified-navbar,
html[data-theme="dark"] .unified-navbar {
    background: #0b1220 !important;
    box-shadow: 0 2px 22px rgba(0, 0, 0, 0.35) !important;
}

html.dark .unified-navbar .main_menu_list .nav-link,
html[data-theme="dark"] .unified-navbar .main_menu_list .nav-link {
    color: var(--bivabo-text) !important;
}

html.dark .unified-navbar .dropdown-menu,
html[data-theme="dark"] .unified-navbar .dropdown-menu {
    background: var(--bivabo-surface) !important;
    border-color: var(--bivabo-border) !important;
}

html.dark .unified-navbar .dropdown-menu > li > a,
html[data-theme="dark"] .unified-navbar .dropdown-menu > li > a {
    color: var(--bivabo-text) !important;
}

/* =============================================================================
    [02] HOMEPAGE BLOCK TWEAKS
    ============================================================================= */

/* -----------------------------------------------------------------------------
    [02.A] Funfact (stats) cards
    ----------------------------------------------------------------------------- */
html.dark .funfact_section .heading_block .badge,
html[data-theme="dark"] .funfact_section .heading_block .badge,
html.dark .review_section .heading_block .badge,
html[data-theme="dark"] .review_section .heading_block .badge {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #bfdbfe !important;
}

html.dark .funfact_section .funfact_block,
html[data-theme="dark"] .funfact_section .funfact_block {
    background: var(--bivabo-surface) !important;
    border: 1px solid var(--bivabo-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

html.dark .funfact_section .funfact_value,
html.dark .funfact_section .funfact_title,
html[data-theme="dark"] .funfact_section .funfact_value,
html[data-theme="dark"] .funfact_section .funfact_title {
    color: var(--bivabo-text) !important;
}

/* -----------------------------------------------------------------------------
    [02.B] Reviews/testimonials readability
    ----------------------------------------------------------------------------- */
html.dark .review_section .review_block_4,
html[data-theme="dark"] .review_section .review_block_4 {
    background: rgba(17, 24, 39, 0.92) !important;
    border: 1px solid var(--bivabo-border) !important;
}

html.dark .review_section .review_block_4::before,
html.dark .review_section .review_block_4::after,
html[data-theme="dark"] .review_section .review_block_4::before,
html[data-theme="dark"] .review_section .review_block_4::after {
    background: none !important;
    opacity: 0 !important;
}

html.dark .review_section .review_comment,
html[data-theme="dark"] .review_section .review_comment {
    color: var(--bivabo-text) !important;
}

html.dark .review_section .author_name,
html[data-theme="dark"] .review_section .author_name {
    color: #fff !important;
}

html.dark .review_section .author_designation,
html[data-theme="dark"] .review_section .author_designation {
    color: var(--bivabo-muted) !important;
}

html.dark .review_section strong.text-dark,
html[data-theme="dark"] .review_section strong.text-dark {
    color: #fff !important;
}

html.dark .review_section .review_marquee_vertical_up:before,
html.dark .review_section .review_marquee_vertical_bottom:before,
html[data-theme="dark"] .review_section .review_marquee_vertical_up:before,
html[data-theme="dark"] .review_section .review_marquee_vertical_bottom:before {
    background-image: linear-gradient(0deg, transparent, #050b16) !important;
}

html.dark .review_section .review_marquee_vertical_up:after,
html.dark .review_section .review_marquee_vertical_bottom:after,
html[data-theme="dark"] .review_section .review_marquee_vertical_up:after,
html[data-theme="dark"] .review_section .review_marquee_vertical_bottom:after {
    background-image: linear-gradient(0deg, #050b16, transparent) !important;
}

/* -----------------------------------------------------------------------------
    [02.C] "Vergelijk hypotheekverstrekkers" panel
    ----------------------------------------------------------------------------- */
html.dark .clients_section .insurance_clients_logo_wrap,
html[data-theme="dark"] .clients_section .insurance_clients_logo_wrap {
    background: #050b16 !important;
    border: 1px solid var(--bivabo-border) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28) !important;
}

html.dark .clients_section .heading_description,
html[data-theme="dark"] .clients_section .heading_description {
    color: var(--bivabo-muted) !important;
}

html.dark .clients_section .clients_logo li,
html[data-theme="dark"] .clients_section .clients_logo li {
    background: #050b16 !important;
    border-color: var(--bivabo-border) !important;
}

html.dark .clients_section .clients_logo:before,
html[data-theme="dark"] .clients_section .clients_logo:before {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

html.dark .clients_section .insurance_clients_logo_wrap [class*="fa-star"],
html[data-theme="dark"] .clients_section .insurance_clients_logo_wrap [class*="fa-star"] {
    color: #9fb6ff !important;
}

/* -----------------------------------------------------------------------------
    [02.E] Ons Hypotheekadvies: force light feature panel to dark mode
    ----------------------------------------------------------------------------- */
html.dark .page-hypotheekadvies .insurance_decoration_wrap.bg-light,
html[data-theme="dark"] .page-hypotheekadvies .insurance_decoration_wrap.bg-light {
    background: #050b16 !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] {
    background: #050b16 !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .card,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .card-body,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-item,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-button,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-body,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .card,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .card-body,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-item,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-button,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .accordion-body {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h1,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h2,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h3,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h4,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h5,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] h6,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] p,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] li,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .lead,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h1,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h2,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h3,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h4,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h5,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] h6,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] p,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] li,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .lead {
    color: #e5e7eb !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .heading_description,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .card-text,
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] .author_designation,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .heading_description,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .card-text,
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] .author_designation {
    color: #cbd5e1 !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="background: linear-gradient"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="background: linear-gradient"] {
    background: #111827 !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #061786"],
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#061786"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #061786"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#061786"] {
    color: #9fb6ff !important;
}

html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #6c757d"],
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#6c757d"],
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #495057"],
html.dark .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#495057"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #6c757d"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#6c757d"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color: #495057"],
html[data-theme="dark"] .page-hypotheekadvies .about_section[style*="f8f9fa"] [style*="color:#495057"] {
    color: #cbd5e1 !important;
}

html.dark .page-hypotheekadvies .faq_section .step-card,
html.dark .page-hypotheekadvies .faq_section .process-container,
html.dark .page-hypotheekadvies .faq_section .process-content,
html.dark .page-hypotheekadvies .faq_section .documents-container,
html.dark .page-hypotheekadvies .faq_section .document-item,
html.dark .page-hypotheekadvies .faq_section .benefit-box,
html.dark .page-hypotheekadvies .faq_section .timeline-item,
html.dark .page-hypotheekadvies .faq_section .step-progress-container,
html.dark .page-hypotheekadvies .faq_section .step-box,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-card,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .process-container,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .process-content,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .documents-container,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .document-item,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .benefit-box,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .timeline-item,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-progress-container,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-box {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark .page-hypotheekadvies .faq_section .step-title,
html.dark .page-hypotheekadvies .faq_section .step-title-large,
html.dark .page-hypotheekadvies .faq_section .step-subtitle,
html.dark .page-hypotheekadvies .faq_section .section-title,
html.dark .page-hypotheekadvies .faq_section p,
html.dark .page-hypotheekadvies .faq_section li,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-title,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-title-large,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .step-subtitle,
html[data-theme="dark"] .page-hypotheekadvies .faq_section .section-title,
html[data-theme="dark"] .page-hypotheekadvies .faq_section p,
html[data-theme="dark"] .page-hypotheekadvies .faq_section li {
    color: #e5e7eb !important;
}

html.dark .page-hypotheekadvies .faq_section [style*="background: white"],
html.dark .page-hypotheekadvies .faq_section [style*="background:#fff"],
html.dark .page-hypotheekadvies .faq_section [style*="background: #fff"],
html[data-theme="dark"] .page-hypotheekadvies .faq_section [style*="background: white"],
html[data-theme="dark"] .page-hypotheekadvies .faq_section [style*="background:#fff"],
html[data-theme="dark"] .page-hypotheekadvies .faq_section [style*="background: #fff"] {
    background: #0b1220 !important;
}

html.dark .hero_insurance .iconbox_block,
html[data-theme="dark"] .hero_insurance .iconbox_block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.dark .hero_insurance .iconbox_block .iconbox_content,
html.dark .hero_insurance .iconbox_block p,
html.dark .hero_insurance .iconbox_block .iconbox_title,
html[data-theme="dark"] .hero_insurance .iconbox_block .iconbox_content,
html[data-theme="dark"] .hero_insurance .iconbox_block p,
html[data-theme="dark"] .hero_insurance .iconbox_block .iconbox_title {
    background: transparent !important;
    color: #ffffff !important;
}

html.dark .about_section .iconbox_icon img,
html.dark .funfact_section .funfact_icon img,
html.dark .contact_section .iconbox_icon img,
html[data-theme="dark"] .about_section .iconbox_icon img,
html[data-theme="dark"] .funfact_section .funfact_icon img,
html[data-theme="dark"] .contact_section .iconbox_icon img {
    filter: brightness(0) invert(1) !important;
}

/* -----------------------------------------------------------------------------
    [02.D] Shared section header readability
    ----------------------------------------------------------------------------- */
html.dark .heading_text,
html.dark .page_title,
html.dark .hero_title,
html[data-theme="dark"] .heading_text,
html[data-theme="dark"] .page_title,
html[data-theme="dark"] .hero_title {
    color: var(--bivabo-text) !important;
}

/* =============================================================================
    [03] GLOBAL RESPONSIVE SAFETY TWEAKS
    ============================================================================= */

/* -----------------------------------------------------------------------------
    [03.A] Base image responsiveness
    ----------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
    [03.B] Width safety
    ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Safety net: keep template lists (navbar, buttons, breadcrumbs) readable
   even if legacy /assets/css/style.css is missing or not loaded. */
[class*="unordered_list"] {
    margin: 0;
    padding: 0;
}

.unordered_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.unordered_list > li,
.unordered_list_block > li {
    list-style: none;
}

.unordered_list_block {
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------------------------------------
    [03.C] Overflow wrapper fixes
    ----------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
}

.index_insurance .page_wrapper,
.index_insurance main.page_content {
    overflow: visible !important;
}

/* -----------------------------------------------------------------------------
    [03.D] Utility: service title wrapping
    ----------------------------------------------------------------------------- */
.service_title {
    line-height: 1.2;
}

/* -----------------------------------------------------------------------------
    [03.E] Hero section adjustments
    ----------------------------------------------------------------------------- */
.hero_section {
    padding-top: 4rem;
    padding-bottom: 3rem;
}

.hero_section .hero_title {
    font-weight: 800;
}

.hero_section .iconbox_block p {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
    [03.F] About section image consistency
    ----------------------------------------------------------------------------- */
.about_section .image_block img {
    border-radius: inherit;
    display: block;
}

/* -----------------------------------------------------------------------------
    [03.G] Funfacts media responsiveness
    ----------------------------------------------------------------------------- */
.funfact_section .image_block img {
    display: block;
}

/* -----------------------------------------------------------------------------
    [03.H] Funfacts layout normalization
    ----------------------------------------------------------------------------- */
.insurance_achievement_funfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.insurance_achievement_funfacts>.funfact_block,
.insurance_achievement_funfacts>.image_block {
    flex: 1 1 280px;
    min-width: 240px;
}

.funfact_block {
    width: auto !important;
}

.funfact_title {
    white-space: normal;
}

/* -----------------------------------------------------------------------------
    [03.I] Review card narrow-screen stretching
    ----------------------------------------------------------------------------- */
.review_section .review_block_4 {
    height: auto;
}

/* -----------------------------------------------------------------------------
    [03.J] Decorative asset tightening
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .decoration_item {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------------
    [03.K] Desktop/tablet collision prevention
    ----------------------------------------------------------------------------- */
@media (min-width: 576px) {

    /* Give the Funfact section some breathing room below service/tabs blocks */
    .funfact_section {
        margin-top: 2rem !important;
        padding-top: 1rem;
        clear: both;
    }
}

@media (min-width: 992px) {
    .funfact_section {
        margin-top: 2.5rem !important;
    }

    .insurance_achievement_funfacts {
        gap: 24px;
    }
}

/* =============================================================================
    [04] BREAKPOINT BLOCKS
    ============================================================================= */

/* -----------------------------------------------------------------------------
    [04.A] XS: phones
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Fluid typography */
    :root {
        --fz-hero: 1.75rem;
        --fz-h2: 1.25rem;
        --fz-body: 0.95rem;
    }

    .hero_section .hero_title {
        font-size: var(--fz-hero);
    }

    h2.heading_text {
        font-size: var(--fz-h2);
    }

    body {
        font-size: var(--fz-body);
    }

    /* Add vertical gutters between bootstrap rows */
    .row {
        --bs-gutter-y: 1rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack hero with image first for visual impact */
    .hero_section .row>.col-lg-7 {
        order: 2;
    }

    .hero_section .row>.col-lg-5 {
        order: 1;
        margin-bottom: 1.25rem;
    }

    .hero_section .btns_group {
        justify-content: center !important;
    }

    .hero_section .col-lg-7 {
        text-align: center;
    }

    .hero_section .iconbox_block {
        text-align: left;
    }

    /* Reduce paddings */
    .section_space {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .about_section .mb-5 {
        margin-bottom: 1.25rem !important;
    }

    /* Service titles should not be clipped */
    .service_title {
        height: auto !important;
    }

    /* Ratings alignment */
    .rating_block {
        gap: .5rem;
    }

    /* Make button groups wrap nicely with gaps */
    .btns_group.unordered_list {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    /* Space iconboxes evenly to avoid collisions */
    .about_insurance_advice .iconbox_block {
        margin-bottom: .75rem;
    }

    /* Make funfacts wrap nicely with minimum item width */
    .insurance_achievement_funfacts {
        gap: 16px;
    }

    .insurance_achievement_funfacts>.funfact_block,
    .insurance_achievement_funfacts>.image_block {
        flex: 1 1 260px;
        min-width: 220px;
    }

    .funfact_block {
        margin: 0;
    }

    .funfact_title {
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.35;
    }

    /* Ensure review columns have breathing room */
    .review_updown_style {
        row-gap: 1rem;
    }

    .review_marquee_vertical_bottom,
    .review_marquee_vertical_up {
        padding-bottom: .5rem;
    }

    /* Modal layout */
    #continuePrompt>div {
        width: calc(100% - 2rem);
        max-width: 460px;
        padding: 16px;
    }
}

/* -----------------------------------------------------------------------------
    [04.B] SM: small tablets
    ----------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero_section .row>.col-lg-7 {
        order: 2;
    }

    .hero_section .row>.col-lg-5 {
        order: 1;
    }

    .hero_section {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    .section_space {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .service_title {
        height: auto !important;
    }
}

/* -----------------------------------------------------------------------------
    [04.C] MD: tablets
    ----------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero_section {
        padding-top: 4.5rem;
        padding-bottom: 3.5rem;
    }

    .hero_section .row>.col-lg-7 {
        order: 2;
    }

    .hero_section .row>.col-lg-5 {
        order: 1;
    }

    .section_space {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* -----------------------------------------------------------------------------
    [04.D] LG: small desktops
    ----------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero_section {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }
}

/* -----------------------------------------------------------------------------
    [04.E] XL+: fine-tune max widths
    ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* -----------------------------------------------------------------------------
    [04.F] Carousel/marquee overflow safety
    ----------------------------------------------------------------------------- */
.review_marquee_vertical_bottom,
.review_marquee_vertical_up {
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
    [04.G] Hero/image block fluid media
    ----------------------------------------------------------------------------- */
.hero_image img,
.image_block img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
    [04.H] Back-to-top touch target
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .backtotop a {
        width: 44px;
        height: 44px;
    }
}

/* -----------------------------------------------------------------------------
    [04.I] Floating action buttons on mobile
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .floating-actions {
        bottom: 1rem;
        right: 1rem;
        gap: .5rem;
    }

    .floating-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* -----------------------------------------------------------------------------
    [04.J] Tabs container wrapping
    ----------------------------------------------------------------------------- */
.tabs {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* -----------------------------------------------------------------------------
    [04.K] SM+ spacing harmonization
    ----------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .btns_group.unordered_list {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1rem;
    }

    .insurance_achievement_funfacts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .review_updown_style {
        row-gap: 1rem;
    }
}

/* -----------------------------------------------------------------------------
    [04.L] Legal/long-form readability on small screens
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1,
    h2,
    h3 {
        line-height: 1.25;
    }

    p {
        line-height: 1.6;
    }
}

/* -----------------------------------------------------------------------------
    [04.M] Iconbox spacing consistency
    ----------------------------------------------------------------------------- */
.about_insurance_advice .iconbox_block {
    display: flex;
    gap: .75rem;
}

.about_insurance_advice .iconbox_icon {
    flex: 0 0 auto;
}

.about_insurance_advice .iconbox_content {
    flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
    [04.N] Terms page readability
    ----------------------------------------------------------------------------- */
.page-terms p {
    line-height: 1.75;
}

.page-terms ul {
    padding-left: 1.25rem;
}

@media (max-width: 575.98px) {
    .page-terms h1 {
        font-size: 1.5rem;
    }
}

/* -----------------------------------------------------------------------------
    [04.O] Appointment page small-device spacing
    ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .page-afspraak .card-body {
        padding: 1rem !important;
    }

    .page-afspraak .d-grid.d-sm-flex {
        flex-wrap: wrap;
        gap: .75rem 1rem;
    }
}

/* =============================================================================
    [05] DARK MODE — CHAT MODALS (BIVABOT + MEDEWERKER)
    ============================================================================= */
html.dark #chatbotModal .modal-content,
html[data-theme="dark"] #chatbotModal .modal-content,
html.dark #medewerkerchatModal .modal-content,
html[data-theme="dark"] #medewerkerchatModal .modal-content {
    background: var(--bivabo-surface) !important;
    border-color: var(--bivabo-border) !important;
    color: var(--bivabo-text) !important;
}

html.dark #chatbotModal .modal-title,
html.dark #chatbotModal #question-text,
html[data-theme="dark"] #chatbotModal .modal-title,
html[data-theme="dark"] #chatbotModal #question-text,
html.dark #medewerkerchatModal .modal-title,
html.dark #medewerkerchatModal #question-text,
html[data-theme="dark"] #medewerkerchatModal .modal-title,
html[data-theme="dark"] #medewerkerchatModal #question-text {
    color: var(--bivabo-text) !important;
}

html.dark #chatbotModal .chatbox,
html[data-theme="dark"] #chatbotModal .chatbox {
    background: var(--bivabo-surface-2) !important;
    border-color: var(--bivabo-border) !important;
}

html.dark #chatbotModal #chatbox-input,
html.dark #chatbotModal #chatbox-input.form-control,
html[data-theme="dark"] #chatbotModal #chatbox-input,
html[data-theme="dark"] #chatbotModal #chatbox-input.form-control {
    background-color: var(--bivabo-surface-2) !important;
    border-color: var(--bivabo-border) !important;
    color: var(--bivabo-text) !important;
}

html.dark #chatbotModal #chatbox-input::placeholder,
html[data-theme="dark"] #chatbotModal #chatbox-input::placeholder {
    color: rgba(229, 231, 235, 0.65) !important;
}

html.dark #medewerkerchatModal #quickSupportTicketForm textarea,
html.dark #medewerkerchatModal #quickSupportTicketForm input,
html.dark #medewerkerchatModal #quickSupportTicketForm .form-control,
html[data-theme="dark"] #medewerkerchatModal #quickSupportTicketForm textarea,
html[data-theme="dark"] #medewerkerchatModal #quickSupportTicketForm input,
html[data-theme="dark"] #medewerkerchatModal #quickSupportTicketForm .form-control {
    background-color: var(--bivabo-surface-2) !important;
    border-color: var(--bivabo-border) !important;
    color: var(--bivabo-text) !important;
}

html.dark #medewerkerchatModal #quickSupportTicketForm textarea::placeholder,
html.dark #medewerkerchatModal #quickSupportTicketForm input::placeholder,
html[data-theme="dark"] #medewerkerchatModal #quickSupportTicketForm textarea::placeholder,
html[data-theme="dark"] #medewerkerchatModal #quickSupportTicketForm input::placeholder {
    color: rgba(229, 231, 235, 0.65) !important;
}

html.dark .btn-close,
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
}