/* ===== Zelfgehoste fonts (Google Fonts, OFL-licentie) =====
   Poppins: HoHB-redesign (XD "Voorstel_styling"); Open Sans: label LY.
   Een font wordt pas gedownload zodra een label het via --rz-text-font-family gebruikt. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/open-sans-latin-var.woff2') format('woff2');
}

:root {
    --rz-body-background-color: white;
    --rz-text-title-color: var(--hohb-dark); /* 320611: kopjes antraciet, gelijk aan 'Dekking' */
    /* HoHB redesign design-tokens (PBI 315193) */
    --hohb-dark: #363C41;
    --hohb-border: #D6DBDE;
    --hohb-text: #676C72;
    --hohb-success: #22A3A3;
    --hohb-link: #0079C0;
    --hohb-block-bg: #F4F5F6; /* grijze achtergrond van de blokken (fieldsets) */
    --hohb-primary-tint: rgba(229, 50, 44, 0.05); /* hover-tint: 5% van de labelkleur; elk label overschrijft dit in de eigen intermediary-css */
}

.main-page {
    position: relative; /* anker voor absolute Terug-knop */
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
}

.rz-layout {
    height: auto;
    overflow: auto;
    display: block;
}

.ta-payment-term {
    display: none;
}

/* Bedragen in kolom. Werkt alleen als het font tabulaire cijfers heeft: de
   Poppins-subsets krijgen die OpenType-feature ('tnum') via
   tools/fonts/add-tabular-figures.py - zie tools/fonts/README.md.
   Deze regel blijft ook nodig als het font niet laadt en de browser terugvalt
   op een systeemfont. */
.ta-form-group-control > .ta-static-text {
    font-variant-numeric: tabular-nums;
}

/* Bedragen rechts uitlijnen in premieoverzicht cards - voor alle schermen.
   Control-type via .ta-form-group--static-text (TimaFormGroup), dus zonder
   veldnaam-selector. */
#Offreren\.PremieoverzichtBlok .ta-form-group--static-text .ta-static-text,
#Acceptatie\.PremieoverzichtBlok .ta-form-group--static-text .ta-static-text {
    text-align: right;
    display: block;
    width: 100%;
}

/* Totaalregel opvallender. Control-type via ControlKind="total-premium"
   (generator), dus zonder veldnaam-selector. */
.ta-form-group--total-premium {
    font-weight: bold;
    font-size: 16px;
    color: var(--hohb-dark);
}

div[name=COLO_TXTPRV] {
    font-size: 12px;
    margin-top: -15px;
}

.add-insurance-panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 25px;
    background-color: rgba(103, 108, 114, 0.05); /* #676C72 5% */
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

    .add-insurance-panel:hover {
        background-color: var(--hohb-primary-tint);
    }

    .add-insurance-panel.add-insurance-panel--disabled {
        cursor: default;
        opacity: 0.55;
    }

        .add-insurance-panel.add-insurance-panel--disabled:hover {
            background-color: rgba(103, 108, 114, 0.05);
        }

    .add-insurance-panel > i,
    .add-insurance-panel > .product-icon-svg {
        font-size: 32px;
    }

    .add-insurance-panel .add-insurance-panel-text > h6 {
        margin-bottom: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
    }

    .add-insurance-panel > .rz-button {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 50%;
    }

        .add-insurance-panel > .rz-button .rzi {
            font-size: 18px;
        }

.product-icon-svg {
    width: 32px;
    height: 32px;
    background-color: var(--rz-primary);
}

/* Mobiel: ademruimte rond de product-cards en paginatitel (Pakket samenstellen) */
@media (max-width: 767.98px) {
    .add-insurance-panel {
        margin-inline: 1rem;
    }

    .main-page > .rz-text-display-h5 {
        margin-inline: 1rem;
    }
}

/* Insurance card styling - Desktop */
.insurance-card-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

    .insurance-card-wrapper .rz-fieldset {
        position: relative;
        padding-top: 1rem;
        padding-bottom: 3.5rem;
    }

.insurance-card-edit-button {
    position: absolute;
    top: 1.25rem;
    right: 2rem;
    z-index: 10;
}

    .insurance-card-edit-button .rz-button {
        color: black !important;
    }

        .insurance-card-edit-button .rz-button .rz-button-box {
            color: black !important;
        }

            .insurance-card-edit-button .rz-button .rz-button-box i {
                color: black !important;
            }

.insurance-card-remove-button {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
}

    .insurance-card-remove-button .rz-button-text {
        text-decoration: none !important;
        color: var(--hohb-text) !important;
    }

    .insurance-card-remove-button .rzi {
        color: var(--hohb-text) !important;
    }

    .insurance-card-remove-button .rz-button:hover {
        background: transparent !important;
        background-color: transparent !important;
    }

.insurance-email-button {
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

    .insurance-email-button .rz-button-text {
        text-decoration: none !important;
        color: var(--hohb-link) !important;
    }

    .insurance-email-button .rzi {
        color: var(--hohb-link) !important;
    }

    .insurance-email-button .rz-button:hover {
        background: transparent !important;
        background-color: transparent !important;
    }

        .insurance-email-button .rz-button:hover .rz-button-box {
            background: transparent !important;
            background-color: transparent !important;
        }

.insurance-card-wrapper .rz-fieldset-content {
    position: relative;
    z-index: 1;
}

/* PBI 313521: hostpagina levert buitenmarge; SOM houdt horizontale app-padding compact.
   320611: padding-top 70px = ademruimte onder de absolute Terug-knop (10px top + 50px hoog),
   op alle pagina's gelijk (winkelmand had dit al). */
.ta-page {
    padding-top: 70px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 15px !important;
    display: flex;
    flex-direction: column;
}

    .ta-page > :nth-child(1) {
        order: -2;
    }

    .ta-page > :nth-child(2) > .combined-overview-subtitle {
        order: -1;
    }

    /* Terug-knop linksboven: knop met tekst (HoHB redesign, PBI 315193) */
    .ta-flow-button--prev {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        margin: 0 !important;
        z-index: 100 !important;
        height: 50px;
        padding: 0 1.25rem !important;
        background: white !important;
        background-color: white !important;
        border: 1px solid var(--hohb-border) !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }

        .ta-flow-button--prev .rz-button-box {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            gap: 0.5rem;
        }

        .ta-flow-button--prev .rz-button-text {
            color: var(--hohb-text) !important;
            font-weight: 600;
        }

        .ta-flow-button--prev .rzi {
            color: var(--rz-primary) !important;
        }

        .ta-flow-button--prev:hover {
            background: var(--rz-base-100) !important;
            background-color: var(--rz-base-100) !important;
        }

/* Remove underline from all buttons */
.rz-button,
.rz-button .rz-button-text {
    text-decoration: none !important;
}

/* Desktop button layout */
@media screen and (min-width: 768px) {
    .action-buttons-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .insurance-email-button {
        margin: 0;
    }

    .add-insurance-button-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    .button-group {
        width: 100%;
        align-items: center !important;
    }

    /* Horizontale layout voor email en add insurance buttons */
    .insurance-email-button-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

}

/* Mobile optimizations */
@media screen and (max-width: 767px) {
    .action-buttons-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .add-insurance-button-wrapper {
        order: -1;
    }

    /* PBI 313514: premie-regels (label + bedrag) op 1 regel op mobiel.
       Control-type via .ta-form-group--static-text (TimaFormGroup), dus zonder
       has-selector of veldnaam-selectors. */
    #Offreren\.PremieoverzichtBlok .ta-form-group--static-text,
    #Acceptatie\.PremieoverzichtBlok .ta-form-group--static-text,
    #Offreren\.DekkingenPremieBlok .ta-form-group--static-text,
    #Acceptatie\.DekkingenPremieBlok .ta-form-group--static-text {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

        #Offreren\.PremieoverzichtBlok .ta-form-group--static-text > .ta-form-group-label,
        #Acceptatie\.PremieoverzichtBlok .ta-form-group--static-text > .ta-form-group-label,
        #Offreren\.DekkingenPremieBlok .ta-form-group--static-text > .ta-form-group-label,
        #Acceptatie\.DekkingenPremieBlok .ta-form-group--static-text > .ta-form-group-label {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: none !important;
            padding-right: 15px !important;
        }

        #Offreren\.PremieoverzichtBlok .ta-form-group--static-text > .ta-form-group-control,
        #Acceptatie\.PremieoverzichtBlok .ta-form-group--static-text > .ta-form-group-control,
        #Offreren\.DekkingenPremieBlok .ta-form-group--static-text > .ta-form-group-control,
        #Acceptatie\.DekkingenPremieBlok .ta-form-group--static-text > .ta-form-group-control {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: none !important;
            text-align: right !important;
        }

            #Offreren\.PremieoverzichtBlok .ta-form-group--static-text .ta-static-text,
            #Acceptatie\.PremieoverzichtBlok .ta-form-group--static-text .ta-static-text,
            #Offreren\.DekkingenPremieBlok .ta-form-group--static-text .ta-static-text,
            #Acceptatie\.DekkingenPremieBlok .ta-form-group--static-text .ta-static-text {
                width: auto !important;
                white-space: nowrap !important;
            }

    .ta-coverage-details {
        display: block !important;
        margin-top: 0.5rem;
        width: 100%;
    }

        .ta-coverage-details,
        .ta-coverage-details .ta-static-text {
            font-size: 10px;
        }

    /* Button group alignment op mobiel */
    .button-group {
        align-items: stretch !important;
        gap: 1rem !important;
    }

        /* Alle primary buttons full-width op mobiel */
        .ta-page .rz-stack button.rz-button.rz-primary,
        .nav-buttons button.rz-button.rz-primary,
        .button-group button.rz-button.rz-primary {
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 20px !important;
        }

    /* Add insurance button - zelfde breedte als Volgende button op mobiel */
    .add-insurance-btn {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Insurance card mobile adjustments */
    .insurance-card-wrapper .rz-fieldset {
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    /* Edit button - rechtsboven met meer ruimte */
    .insurance-card-edit-button {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        margin: 0 !important;
        z-index: 100 !important;
    }

        .insurance-card-edit-button .rz-button {
            min-width: 40px !important;
            width: 40px !important;
            height: 40px !important;
            padding: 0 !important;
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

            .insurance-card-edit-button .rz-button .rz-button-box {
                background: transparent !important;
                background-color: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            .insurance-card-edit-button .rz-button:hover {
                background: transparent !important;
                background-color: transparent !important;
            }

    /* Remove button - linksonder */
    .insurance-card-remove-button {
        position: absolute !important;
        bottom: 10px !important;
        left: 10px !important;
        margin: 0 !important;
        z-index: 100 !important;
    }

        .insurance-card-remove-button .rz-button {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 0.5rem !important;
            min-width: auto !important;
            width: auto !important;
            height: 40px !important;
        }

            .insurance-card-remove-button .rz-button .rz-button-box {
                background: transparent !important;
                background-color: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            .insurance-card-remove-button .rz-button:hover {
                background: transparent !important;
                background-color: transparent !important;
            }
}

@media (max-width: 480px) {
    

    .add-insurance-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Insurance card extra small screen adjustments */
    .insurance-card-wrapper .rz-fieldset {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    .insurance-card-edit-button {
        top: 0.75rem !important;
        right: 0.75rem !important;
    }

        .insurance-card-edit-button .rz-button {
            width: 36px !important;
            height: 36px !important;
        }

    .insurance-card-remove-button {
        bottom: 5px !important;
        left: 5px !important;
    }

        .insurance-card-remove-button .rz-button {
            height: 36px !important;
        }
}

.rz-fieldset {
    position: relative !important;
    padding-top: 1rem !important;
}

    /* 320611: legend-tekst op dezelfde inset als de blok-content. Radzen geeft de
       legend eigen margin-/padding-inline waardoor de bloktitel verder inspringt
       dan de velden; nulstellen en uitlijnen op --rz-fieldset-padding (per label). */
    .rz-fieldset[id] legend {
        position: absolute !important;
        top: 20px !important;
        left: var(--rz-fieldset-padding, 1.25rem) !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        font-weight: bold;
        color: var(--hohb-dark);
    }

    .rz-fieldset[id*="Paginatitels"] {
        border: none !important;
    }

#showAfd {
    z-index: 1 !important;
}

/* PBI 313516 - combined premium overview cards */
.insurance-card-wrapper .rz-fieldset {
    padding-top: 3.25rem !important;
}

    .insurance-card-wrapper .rz-fieldset > legend {
        position: absolute !important;
        top: 1.25rem !important;
        left: 1.875rem !important;
        z-index: 2;
        display: block;
        max-width: calc(100% - 6rem);
        padding: 0;
        margin: 0;
        line-height: 1.25;
    }

    .insurance-card-wrapper .rz-fieldset .rz-fieldset-content > .rz-stack {
        gap: 0.125rem;
    }

    .insurance-card-wrapper .rz-fieldset .ta-form-group--static-text {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        row-gap: 0;
        margin-block: 0;
    }

        .insurance-card-wrapper .rz-fieldset .ta-form-group--static-text > .ta-form-group-label {
            flex: 1 1 auto;
            width: auto;
            max-width: none;
            min-width: 0;
            padding-right: 1rem;
        }

            .insurance-card-wrapper .rz-fieldset .ta-form-group--static-text > .ta-form-group-label .rz-label {
                line-height: 1.3;
                white-space: normal;
            }

        .insurance-card-wrapper .rz-fieldset .ta-form-group--static-text > .ta-form-group-control {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            text-align: right;
            white-space: nowrap;
            padding-top: 0;
        }

            .insurance-card-wrapper .rz-fieldset .ta-form-group--static-text > .ta-form-group-control .ta-static-text {
                display: inline-block;
                width: auto;
            }

    /* PBI 313516: totaalregel (PP_TTOT) iets losser van de premieregels erboven.
       Control-type via ControlKind="total" (TimaFormGroup), dus zonder veldnaam-selector. */
    .insurance-card-wrapper .rz-fieldset .ta-form-group--total-premium {
        margin-top: 0.75rem;
    }

    .insurance-card-wrapper .rz-fieldset .ta-html {
        margin-top: 0.125rem;
        margin-bottom: 0.75rem;
    }

    .insurance-card-wrapper .rz-fieldset .ta-checkbox {
        padding: 0.25rem 0;
    }

        .insurance-card-wrapper .rz-fieldset .ta-checkbox .ta-label {
            font-size: 16px;
            line-height: 1.3;
            text-decoration: none;
        }

.rz-card {
    line-height: 1.6;
}

    .rz-card .rz-text {
        line-height: 1.6;
    }

/* PBI 313517 - pakketkaart-fieldsets: host and cards already provide horizontal spacing. */
.rz-fieldset-content:has(.ta-action-card) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* SOM card hierarchy: label + premium close together, help text below. */
.ta-checkbox-card,
.ta-radio-card {
    padding: 0.9rem 1rem;
}

/* Bug 315345: cards dicht onder de blok-top, MAAR alleen wanneer het blok GEEN legend
   heeft. Een blok met legend (bv. Auto "Aanvullende dekkingen") houdt de standaard 50px
   ruimte die de absolute legend nodig heeft, anders valt de legend over de eerste card.
   Een blok zonder legend (bv. Reis "Uitbreidingen", kop staat als los tekstveld erin/ervoor)
   krijgt de compacte 1rem. Conditie op legend, niet op cards. */
.rz-fieldset:has(> legend) {
    padding-top: 1.5rem !important;
}

.rz-fieldset:not(:has(> legend)) .rz-fieldset-content {
    padding-top: 0 !important;
}

.ta-checkbox-card.ta-selected,
.ta-radio-card.ta-selected {
    border: 2px solid var(--rz-primary) !important;
}

.ta-checkbox-card > .rz-row:first-child,
.ta-radio-card > .rz-row:first-child {
    align-items: center;
    row-gap: 0;
}

.ta-checkbox-card .ta-card-control,
.ta-checkbox-card .ta-card-premium,
.ta-radio-card .ta-card-control,
.ta-radio-card .ta-card-premium {
    line-height: 1.15;
}

.ta-checkbox-card .ta-card-help-text,
.ta-radio-card .ta-card-help-text {
    margin-top: 0.55rem;
    line-height: 1.4;
}

/* SOM gebruikt geen classic Meetingpoint right-aligned labels; verborgen info-icons
   hoeven daarom geen labelruimte te reserveren. */
.ta-hidden {
    display: none !important;
}

/* DEFECT 315921: mobiel TIMA/Radzen info-tooltips binnen de viewport houden.
   De popup krijgt inline positie vanuit Radzen; daarom hier bewust met !important. */
@media screen and (max-width: 767px) {
    .ta-info-popup {
        position: absolute !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1.5rem) !important;
        max-height: 22rem !important;
        transform: none !important;
        transition: none !important;
        z-index: 2000 !important;
    }

        .ta-info-popup > .rz-tooltip-content {
            box-sizing: border-box;
            width: 100%;
            max-width: none !important;
            max-height: inherit !important;
            overflow-x: hidden;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: normal;
        }
}

@media screen and (min-width: 768px) {
    .ta-info-popup {
        max-width: min(300px, calc(100vw - 1.5rem)) !important;
        transform: translate(var(--ta-tooltip-shift-x, 0), var(--ta-tooltip-shift-y, 0)) !important;
        z-index: 2000 !important;
    }

        .ta-info-popup > .rz-tooltip-content {
            box-sizing: border-box;
            max-width: inherit !important;
            max-height: calc(100vh - 1.5rem) !important;
            overflow-x: hidden;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: normal;
        }
}

/* Bug 315345 (#2): op mobiel stacken titel en bedrag (kolommen worden volle breedte).
   Met row-gap 0 plakt het bedrag direct onder de titel. Geef het op mobiel wat lucht.
   Op desktop staan titel en bedrag naast elkaar (row-gap heeft geen effect), dus dit
   wordt niet voor de rest doorgevoerd. */
@media screen and (max-width: 767px) {
    .ta-checkbox-card > .rz-row:first-child,
    .ta-radio-card > .rz-row:first-child {
        row-gap: 0.25rem;
    }
}

.rz-fieldset:has(+ .rz-fieldset .ta-radio-card),
.rz-fieldset:has(+ .rz-fieldset .ta-checkbox-card) {
    padding-bottom: 0.5rem !important;
}

/* Desktop button layout */
@media screen and (min-width: 768px) {
    .action-buttons-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .insurance-email-button {
        margin: 0;
    }

    .add-insurance-button-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    .button-group {
        width: 100%;
        align-items: center !important;
    }

    /* Horizontale layout voor email en add insurance buttons */
    .insurance-email-button-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* Verberg de mobiele add insurance button op desktop */
    .insurance-add-button-mobile {
        display: none !important;
    }

    .add-insurance-btn {
        margin-bottom: 0 !important;
    }
}

/* Mobile optimizations */
@media screen and (max-width: 767px) {
    /* Verberg de desktop add insurance button op mobiel */
    .insurance-add-button-desktop {
        display: none !important;
    }

    .action-buttons-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* Checkbox toggle styling met chevron aan rechterkant */
.ta-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
    width: 100%;
}

    .ta-checkbox .ta-chevron {
        margin-left: auto;
        order: 3;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--rz-text-color, #3A3A3A);
        border-bottom: 2px solid var(--rz-text-color, #3A3A3A);
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    .ta-checkbox:has(.rz-chkbox input:checked) .ta-chevron {
        transform: rotate(-135deg);
    }

    .ta-checkbox .rz-chkbox {
        flex-shrink: 0;
        order: 1;
    }

    .ta-checkbox .ta-label {
        order: 2;
        flex-grow: 1;
        color: var(--rz-text-color);
    }

.combined-overview-subtitle {
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-text-subtitle1-font-size);
    line-height: var(--rz-text-subtitle1-line-height);
    letter-spacing: var(--rz-text-subtitle1-letter-spacing);
    color: var(--rz-text-subtitle1-color);
    display: block;
    unicode-bidi: isolate;
    margin-block: 0;
}

.combined-application-overview .application-overview-agreement-card {
    border: 1px solid var(--rz-border-color);
    box-shadow: none;
}

.combined-application-overview .application-overview-card-wrapper .rz-fieldset {
    padding-bottom: 1rem;
}

.combined-application-overview .application-overview-card-wrapper .rz-fieldset > legend {
    max-width: calc(100% - 3.75rem);
}

.combined-application-overview .application-overview-agreement-card p {
    margin-top: 0;
}

.combined-application-overview .application-overview-agreement-card ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.combined-application-overview .application-overview-button-group {
    margin-top: 0;
}

/* 320611 (feedbackronde 2): alle kopjes in de verzekeringskaart (winkelmand en samenvatting
   dragen beide .insurance-card-wrapper) in het grijs van het XD-scherm (#676C72 = --hohb-text)
   en 600, niet bold: kaarttitel (legend), Heading-controls (h6), totaalregel (control-kind
   total-premium) en de Voorwaarden-checkbox. Bloktitels op de flow-pagina's blijven antraciet/bold.
   .ta-page erbij zodat deze regel wint van de generieke .ta-page h6 / .rz-fieldset[id] legend. */
.ta-page .insurance-card-wrapper .rz-fieldset > legend,
.ta-page .insurance-card-wrapper h6.rz-text-subtitle1,
.ta-page .insurance-card-wrapper .ta-form-group--total-premium,
.ta-page .insurance-card-wrapper .ta-checkbox .ta-label {
    color: var(--hohb-text);
    font-weight: 600;
}

.ta-page .insurance-card-wrapper .rz-fieldset > legend,
.ta-page .insurance-card-wrapper h6.rz-text-subtitle1 {
    font-size: 16px;
}

/* 320611 (feedbackronde 2): lopende tekst in de verzekeringskaart (dekkingsregels, bedragen,
   voetnoot) ook in XD-grijs #676C72 i.p.v. het Radzen-default #3A3A3A; XD kent maar twee
   tekstkleuren. Links houden hun eigen kleur. */
.ta-page .insurance-card-wrapper .rz-fieldset-content {
    color: var(--hohb-text);
}

/* 320611 (feedbackronde 2): op flow-pagina's staat de paginatitel in een Paginatitels-fieldset
   (padding-top 1rem); de winkelmand/samenvatting-titel staat kaal in .ta-page. Zelfde offset
   onder de Terug-knop geven (gemeten: flow 26px, winkelmand zonder deze regel 10px). */
.combined-premium-overview > h6.rz-text-subtitle1,
.combined-application-overview > h6.rz-text-subtitle1 {
    margin-top: 1rem;
}

/* 320611: winkelmand/samenvatting titel- en intro-witruimte gelijk aan flow-pagina's:
   titel->intro = stack-gap (1rem); intro->eerste kaart = stack-gap + blok-padding
   (gemeten op flow: 16px en 16+30px met TJ-label). */
.combined-premium-overview > h6.rz-text-subtitle1,
.combined-application-overview > h6.rz-text-subtitle1 {
    margin-bottom: 1rem;
}

.combined-overview-subtitle {
    margin-bottom: var(--rz-fieldset-padding, 1.25rem);
}

/* Combined overview title and subtitle alignment: zelfde inset als blok-content (320611) */
.ta-page > .rz-text-subtitle1:first-child {
    padding-left: var(--rz-fieldset-padding, 1.25rem);
}

.ta-page > .rz-text-subtitle1:nth-of-type(2) {
    padding-left: var(--rz-fieldset-padding, 1.25rem);
}

.ta-page > .rz-stack > .combined-overview-subtitle {
    padding-left: var(--rz-fieldset-padding, 1.25rem);
}

/* De dekkingstabellen zijn gegenereerde componenten. Houd mobiele correcties generiek
   op tabelvorm, zodat de absoluut gepositioneerde fieldset-legend niet over de tabel valt. */
@media (max-width: 1024px) {
    .rz-fieldset:has(table[class*="-dekking"]) {
        padding-top: 3rem !important;
    }

    #Offreren\.DekkingenPremieBlok {
        padding-top: 3rem !important;
    }

        #Offreren\.DekkingenPremieBlok > legend {
            display: inline-block !important;
            width: auto !important;
            max-width: max-content !important;
            margin-inline: 0 !important;
            padding-inline: 0 !important;
        }

    .rz-fieldset:has(table[class*="-dekking"]) > legend {
        left: 0.5rem !important;
        display: inline-block !important;
        width: auto !important;
        max-width: max-content !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    .rz-fieldset-content:has(table[class*="-dekking"]) {
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .ta-action-card-header .rz-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.10rem;
    }

    .ta-action-card-header .rz-column {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===== HoHB redesign (PBI 315193): action cards + flow-knoppen ===== */

/* Koppen: groepstitels donker; alleen paginatitels + subtitels grijs (conform XD) */
.ta-page h6.rz-text-subtitle1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--hohb-dark);
}

.rz-fieldset[id*="Paginatitelsensubtitels"] h6.rz-text-subtitle1,
.combined-premium-overview > h6.rz-text-subtitle1,
.combined-application-overview > h6.rz-text-subtitle1 {
    font-size: 20px;
    color: var(--hohb-text);
}

.rz-fieldset[id*="Paginatitelsensubtitels"] .ta-html,
.combined-overview-subtitle {
    color: var(--hohb-text);
}

/* CheckBox/Radio cards: fonts en spacing, bedrag + vinkje in primary */
.ta-checkbox-card .ta-card-control,
.ta-radio-card .ta-card-control {
    font-size: 16px;
}

.ta-checkbox-card .ta-label,
.ta-radio-card .ta-label,
.ta-radio-card .rz-radiobutton-label {
    font-weight: 600;
    color: var(--hohb-dark);
}

.ta-checkbox-card .ta-premium,
.ta-radio-card .ta-premium {
    color: var(--rz-primary);
    font-size: 20px;
    font-weight: 600;
}

.ta-checkbox-card .ta-card-help-text,
.ta-radio-card .ta-card-help-text {
    color: var(--hohb-text);
}

/* Checkbox in primary: outline ongeselecteerd, gevuld met wit vinkje geselecteerd */
.ta-checkbox-card .rz-chkbox-box {
    border: 2px solid var(--rz-primary) !important;
    background-color: white !important;
    box-shadow: none !important;
}

    .ta-checkbox-card .rz-chkbox-box.rz-state-active {
        background-color: var(--rz-primary) !important;
    }

    .ta-checkbox-card .rz-chkbox-box .rzi {
        color: white !important;
    }

/* Radio's in primary: outline ongeselecteerd, rode dot geselecteerd.
   Generiek voor radio-cards en losse radiobuttons (PBI: Annulering + Auto). */
.ta-page .rz-radiobutton-box {
    border: 2px solid var(--rz-primary) !important;
    background-color: white !important;
    box-shadow: none !important;
}

    .ta-page .rz-radiobutton-box .rzi {
        color: var(--rz-primary) !important;
        /* Radzen kleurt de dot via background-color (was wit -> onzichtbaar op witte box) */
        background-color: var(--rz-primary) !important;
    }

/* Informatie/succes-meldingen (Goed om te weten e.d.) in HoHB-groen */
.ta-html .rz-alert.rz-info,
.ta-html .rz-alert.rz-success {
    background-color: var(--hohb-success) !important;
    color: white !important;
    border-radius: 5px;
}

    .ta-html .rz-alert.rz-info .rz-alert-icon,
    .ta-html .rz-alert.rz-success .rz-alert-icon,
    .ta-html .rz-alert.rz-info .rz-alert-title,
    .ta-html .rz-alert.rz-success .rz-alert-title {
        color: white !important;
    }


/* 320611: info-tooltips in dezelfde HoHB-groen als de rz-alert infoblokken;
   het pijltje erft de achtergrond (background-color: inherit in Radzen). */
.ta-info-popup > .rz-tooltip-content {
    background-color: var(--hohb-success) !important;
    color: white !important;
}

/* Card-header in antraciet, andere kleur dan de rode actieknop */
.ta-action-card-header {
    background-color: var(--hohb-dark) !important;
}

/* Knoppen conform XD: 50px hoog, hoekradius 5px, semibold tekst. Bewust buiten de
   media query: de label-css zet --rz-button-border-radius: 50px, waardoor mobiel
   anders een pill-vorm terugkrijgt (320611); de pijl blijft desktop-only. */
.ta-action-card-button,
.ta-flow-button--next,
.ta-flow-button--submit {
    height: 50px;
    border-radius: 5px !important;
    padding: 0 1.25rem !important;
}

    .ta-action-card-button .rz-button-text,
    .ta-flow-button--next .rz-button-text,
    .ta-flow-button--submit .rz-button-text {
        font-weight: 600;
        font-size: 16px;
    }

/* Desktop: knoppenrij rechts uitlijnen; actieknoppen vaste breedte met
   links-aligned tekst en rechts-aligned pijl. Mobiel blijft full-width. */
@media screen and (min-width: 768px) {
    .ta-flow-buttons,
    .nav-buttons {
        justify-content: flex-end !important;
        width: 100%;
    }

    .ta-action-card-button {
        width: 240px;
        align-self: flex-end;
    }

        .ta-flow-button--next .rz-button-box,
        .ta-flow-button--submit .rz-button-box,
        .ta-action-card-button .rz-button-box {
            width: 100%;
            justify-content: space-between;
            gap: 0.75rem;
        }

            .ta-flow-button--next .rz-button-box::after,
            .ta-flow-button--submit .rz-button-box::after,
            .ta-action-card-button .rz-button-box::after {
                font-family: var(--rz-icon-font-family);
                content: "arrow_forward";
                font-size: 1.15rem;
                line-height: 1;
                -webkit-font-feature-settings: "liga";
                font-feature-settings: "liga";
            }
}

/* Winkelmand: 'Nog een verzekering toevoegen' als outline-knop in primary */
.add-insurance-btn {
    background: white !important;
    background-color: white !important;
    border: 1px solid var(--rz-primary) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

    .add-insurance-btn .rz-button-box,
    .add-insurance-btn .rz-button-text,
    .add-insurance-btn .rzi {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--rz-primary) !important;
    }

    .add-insurance-btn:hover {
        background: var(--hohb-primary-tint) !important;
        background-color: var(--hohb-primary-tint) !important;
    }

/* Grijze achtergrond op de blokken (RadzenFieldset) op de flow-pagina's;
   titelblokken (PaginatitelsensubtitelsNBlok, conventie in alle producten) blijven transparant. */
.ta-page .rz-fieldset:not([id*="Paginatitelsensubtitels"]) {
    background-color: var(--hohb-block-bg);
}