:root {
    --rz-body-background-color: white;
    --rz-text-title-color: black;
}

.main-page {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
}

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

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

.ta-form-group-control > .ta-static-text {
    font-variant-numeric: tabular-nums;
}

#Offreren\.PremieoverzichtBlok, #Acceptatie\.PremieoverzichtBlok {
    > legend 
    
    {
        font-weight: bold;
        color: black;
        font-size: 16px;
    }

}


/* Bedragen rechts uitlijnen in premieoverzicht cards - voor alle schermen */
#Offreren\.PremieoverzichtBlok span[id$=_TTOT],
#Acceptatie\.PremieoverzichtBlok span[id$=_TTOT] {
    text-align: right;
    display: block;
    width: 100%;
}

div[name=PP_TTOT_FG] {
    font-weight: bold;
    font-size: 16px;
    color: black;
}

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

.add-insurance-panel {
    > div

{
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div

{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    > i,
    > .product-icon-svg

{
    font-size: 32px;
    flex-shrink: 0;
}

> h6 {
    margin-bottom: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

}
}
}

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

/* 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: underline !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: underline !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. */
.ta-page {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 20px !important;
    display: flex;
    flex-direction: column;
}

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

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

    /* Back button styling - pijltje linksboven ALTIJD */
    /* Voor TIMA flow pages - alleen wanneer NIET binnen .button-group */
    .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child,
    .ta-page > .rz-stack > button.rz-button.rz-light:first-child,
    /* Voor nav-buttons binnen button-group */
    .nav-buttons > button.rz-button.rz-secondary:first-of-type,
    .nav-buttons > button.rz-button.rz-light:first-of-type {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        margin: 0 !important;
        z-index: 100 !important;
        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;
    }

        .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child .rz-button-box,
        .ta-page > .rz-stack > button.rz-button.rz-light:first-child .rz-button-box,
        .nav-buttons > button.rz-button.rz-secondary:first-of-type .rz-button-box,
        .nav-buttons > button.rz-button.rz-light:first-of-type .rz-button-box {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child .rz-button-text,
        .ta-page > .rz-stack > button.rz-button.rz-light:first-child .rz-button-text,
        .nav-buttons > button.rz-button.rz-secondary:first-of-type .rz-button-text,
        .nav-buttons > button.rz-button.rz-light:first-of-type .rz-button-text {
            font-size: 0 !important;
            line-height: 0 !important;
        }

            .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child .rz-button-text::before,
            .ta-page > .rz-stack > button.rz-button.rz-light:first-child .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-secondary:first-of-type .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-light:first-of-type .rz-button-text::before {
                content: "\2190";
                font-size: 2rem !important;
                font-weight: 200 !important;
                line-height: 1 !important;
                color: #555 !important;
                display: block;
            }

        .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child:hover,
        .ta-page > .rz-stack > button.rz-button.rz-light:first-child:hover,
        .nav-buttons > button.rz-button.rz-secondary:first-of-type:hover,
        .nav-buttons > button.rz-button.rz-light:first-of-type:hover {
            background: transparent !important;
            background-color: transparent !important;
        }

            .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child:hover .rz-button-text::before,
            .ta-page > .rz-stack > button.rz-button.rz-light:first-child:hover .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-secondary:first-of-type:hover .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-light:first-of-type:hover .rz-button-text::before {
                color: #000 !important;
            }

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

/* Override for specific buttons that should have underline */
.insurance-card-remove-button .rz-button-text,
.insurance-email-button .rz-button-text {
    text-decoration: underline !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;
    }

    .add-insurance-btn {
        background-color: white !important;
        color: var(--rz-secondary) !important;
        border: 1px solid var(--rz-secondary) !important;
    }

        .add-insurance-btn .rz-button-box {
            background-color: white !important;
            color: var(--rz-secondary) !important;
        }

        .add-insurance-btn:hover {
            background-color: var(--rz-secondary-lighter) !important;
        }

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

/* 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;
        background-color: white !important;
        color: var(--rz-secondary) !important;
        border: 1px solid var(--rz-secondary) !important;
    }

        .add-insurance-btn .rz-button-box {
            background-color: white !important;
            color: var(--rz-secondary) !important;
        }

        .add-insurance-btn:hover {
            background-color: var(--rz-secondary-lighter) !important;
        }

            .add-insurance-btn:hover .rz-button-box {
                background-color: transparent !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;
            }
}

.ta-page {
    padding-top: 55px !important;
    padding-bottom: 15px !important;
}

@media (max-width: 480px) {
    

        .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child,
        .ta-page > .rz-stack > button.rz-button.rz-light:first-child,
        .nav-buttons > button.rz-button.rz-secondary:first-of-type,
        .nav-buttons > button.rz-button.rz-light:first-of-type {
            top: 5px !important;
            left: 5px !important;
            width: 36px !important;
            height: 36px !important;
        }

            .ta-page > .rz-stack > button.rz-button.rz-secondary:first-child .rz-button-text::before,
            .ta-page > .rz-stack > button.rz-button.rz-light:first-child .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-secondary:first-of-type .rz-button-text::before,
            .nav-buttons > button.rz-button.rz-light:first-of-type .rz-button-text::before {
                font-size: 1.75rem !important;
            }

    .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;
}

    .rz-fieldset[id] legend {
        position: absolute !important;
        top: 20px !important;
        left: 0.1rem !important;
        font-weight: bold;
    }

    .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 {
            color: black;
            font-size: 16px;
            font-weight: bold;
            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 {
        background-color: white !important;
        color: var(--rz-secondary) !important;
        border: 1px solid var(--rz-secondary) !important;
        margin-bottom: 0 !important;
    }

        .add-insurance-btn .rz-button-box {
            background-color: white !important;
            color: var(--rz-secondary) !important;
        }

        .add-insurance-btn:hover {
            background-color: var(--rz-secondary-lighter) !important;
        }

            .add-insurance-btn:hover .rz-button-box {
                background-color: transparent !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;
}

/* Combined overview title and subtitle alignment */
.ta-page > .rz-text-subtitle1:first-child {
    padding-left: 1rem;
}

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

.ta-page > .rz-stack > .combined-overview-subtitle {
    padding-left: 1rem;
}

/* Beide subtitels in Paginatitelsensubtitels1Blok */
#Offreren\.Paginatitelsensubtitels1Blok .rz-text-subtitle1 {
    font-size: 23px !important;
}

/* DEFECT 315917: legend ("Jouw premie") en het premie-label ("Premie per maand")
   moeten exact onder elkaar starten. De Radzen-legend is absoluut gepositioneerd en
   heeft daarnaast eigen margin-/padding-inline die de tekst extra naar rechts duwen.
   Die zetten we op 0 en lijnen de legend-tekst uit op dezelfde inset als de
   fieldset-content (waarin het label staat): --rz-fieldset-padding. Zo blijven ze
   altijd gelijk, ongeacht de themawaarde. */
#Offreren\.DekkingenPremieBlok > legend {
    left: var(--rz-fieldset-padding, 1.25rem) !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* 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;
    }
}