/* Moderne opmaak voor detailschermen (professional, klant, organisatie, adres, abonnement, account).
   1. Tabbladen: een zachtgekleurde balk (scheiding tussen de kop en de gegevens) met de tabbladen erin;
      het actieve tabblad is een witte "knop" met gekleurde tekst. Icoon per tabblad waar aanwezig.
      Op een smal scherm scrollen de tabbladen horizontaal in plaats van over meerdere regels.
   2. Sectiekoppen (.mb-sectie) om een formulier in duidelijke blokken te verdelen.
   Kleuren via variabelen; allino-thema.css zet deze om naar turquoise. */
:root {
    --mb-merk: #4C176E;
    --mb-merk-zacht: #F3EFFC;
    --mb-balk: #EDE8FF;
}

.nav.nav-pills.mb-tabs {
    background-color: var(--mb-balk);
    border-radius: .6rem;
    padding: .3rem;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Smal scherm: op een regel, horizontaal scrollen. Op een breed scherm breekt de rij af,
   anders valt het laatste tabblad buiten beeld (29-09). */
@media (max-width: 767.98px) {
    .nav.nav-pills.mb-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
}

.nav.nav-pills.mb-tabs .nav-item {
    padding-right: 0;
    flex: 0 0 auto;
}

.nav.nav-pills.mb-tabs .btn.subnav {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 0;
    border-radius: .45rem;
    background-color: transparent;
    color: #495057;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
}

.nav.nav-pills.mb-tabs .btn.subnav:hover,
.nav.nav-pills.mb-tabs .btn.subnav:focus-visible {
    background-color: rgba(255, 255, 255, .6);
    color: #212529;
}

.nav.nav-pills.mb-tabs .btn.subnav.active {
    background-color: #fff !important;
    color: var(--mb-merk) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.nav.nav-pills.mb-tabs .btn.subnav .bi {
    font-size: 1.05em;
    line-height: 1;
}

.mb-sectie {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.75rem 0 1rem;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--mb-balk);
    color: var(--mb-merk);
    font-size: 1.1rem;
    font-weight: 600;
}

.mb-sectie:first-of-type {
    margin-top: .75rem;
}