/*
 * Huisstijl van Onderlinge Online voor de mock, bovenop Bootstrap 5.3.
 *
 * Kleuren, typografie, kaarten, knoppen, voortgangsbalk en zijbalk volgen het
 * Figma-bestand van Onderlinge Online (pagina "MijnOG - desktop"). De namen
 * van de tokens zijn de namen van de variabelen in Figma. Zie
 * docs/huisstijl.md. Pas kleuren en lettergroottes alleen hier aan, via de
 * tokens hieronder.
 */

:root {
    /* Kleuren (Figma: "Onderlinge - ...") */
    --og-red: #b01338;
    --og-dark-blue: #425d66;
    --og-air-force-blue: #557c89;
    --og-light-blue: #d8e8e9;
    --og-sand: #f0ead9;
    --og-yellow: #ffcf53;
    --og-white: #ffffff;

    /* Maten uit het ontwerp */
    --og-hoek: 20px;
    --og-kaart-padding: 36px;
    --og-breedte: 1240px;
    --og-zijbalk: 380px;

    --bs-body-font-family: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 18px;
    --bs-body-line-height: 32px;
    --bs-body-color: var(--og-dark-blue);
    --bs-link-color: var(--og-red);
    --bs-link-color-rgb: 176, 19, 56;
    --bs-link-hover-color: var(--og-dark-blue);
    --bs-link-hover-color-rgb: 66, 93, 102;
}

body {
    background: var(--og-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

p,
ul {
    margin-bottom: 24px;
}

:focus-visible {
    outline: 3px solid var(--og-air-force-blue);
    outline-offset: 2px;
}

/* --- Typografie (Figma-tekststijlen) --------------------------------------- */

/* Kaartentitel: Poppins Regular 34/44 */
.og-kaartentitel {
    font-size: 34px;
    line-height: 44px;
    font-weight: 400;
    margin: 0 0 24px;
}

/* Paginatitel: Poppins Bold 20/28, hoofdletters */
.og-paginatitel {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 24px;
}

/* Sectietitel: Poppins SemiBold 17/33, hoofdletters */
.og-sectietitel {
    font-size: 17px;
    line-height: 33px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 24px;
}

/* Highlights: Poppins Bold 18/32 */
.og-highlight {
    font-weight: 700;
}

/* Bijschriften: Poppins Regular 15/22 */
.og-bijschrift {
    font-size: 15px;
    line-height: 22px;
}

.og-geen-afbreking {
    white-space: nowrap;
}

/* --- Mock-hulpmiddelen (horen niet bij het ontwerp van Onderlinge) ---------- */
.mock-balk {
    background: var(--og-yellow);
    color: #2b2b2b;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: center;
}

.mock-balk-links {
    display: flex;
    gap: 16px;
}

.mock-balk a {
    color: inherit;
    font-weight: 600;
}

.mock-kader {
    border: 2px dashed var(--og-air-force-blue);
    border-radius: var(--og-hoek);
    padding: var(--og-kaart-padding);
    margin-bottom: 24px;
}

.mock-kader > :last-child {
    margin-bottom: 0;
}

.mock-kader-label {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.mock-bank {
    max-width: 640px;
    margin-inline: auto;
}

.mock-bank-keuzes {
    display: grid;
    gap: 12px;
}

.mock-bank-keuzes .og-knop {
    justify-content: center;
    height: auto;
    min-height: 50px;
    white-space: normal;
    text-align: center;
}

.mock-klanten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.mock-klanten .og-kaart {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.mock-klanten .og-knoppen {
    margin-top: auto;
}

/* --- Pagina-indeling -------------------------------------------------------- */
.og-pagina {
    width: 100%;
    max-width: calc(var(--og-breedte) + 2 * 24px);
    margin-inline: auto;
    padding: 0 24px 80px;
    flex: 1;
}

.og-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 0;
}

/* Tekstmerk; het echte logo staat in Figma (zie docs/huisstijl.md). */
.og-logo {
    font-size: 30px;
    line-height: 42px;
    font-weight: 700;
    color: var(--og-red);
    text-decoration: none;
}

.og-logo span {
    font-weight: 400;
    color: var(--og-dark-blue);
}

.og-gebruiker {
    border: 1px solid var(--og-light-blue);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 22px;
}

.og-banner {
    height: 120px;
    border-radius: var(--og-hoek);
    background: linear-gradient(100deg, var(--og-light-blue), var(--og-sand));
    margin-bottom: 64px;
}

.og-kolommen {
    display: grid;
    grid-template-columns: var(--og-zijbalk) minmax(0, 810px);
    gap: 49px;
    align-items: start;
}

.og-kolommen-breed {
    grid-template-columns: minmax(0, 1fr);
}

.og-skip:focus {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    background: var(--og-white);
    padding: 8px 16px;
}

@media (max-width: 991.98px) {
    .og-kolommen {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Op een smal scherm eerst de inhoud, dan het menu. */
    .og-zijbalk {
        order: 2;
    }

    .og-header {
        padding: 20px 0;
        gap: 16px;
    }

    .og-logo {
        font-size: 22px;
        line-height: 30px;
    }

    .og-gebruiker {
        white-space: nowrap;
        padding: 8px 16px;
    }

    .og-banner {
        height: 64px;
        margin-bottom: 32px;
    }

    .og-kaartentitel {
        font-size: 26px;
        line-height: 36px;
    }

    :root {
        --og-kaart-padding: 24px;
    }
}

/* --- Zijbalk ---------------------------------------------------------------- */
.og-zijbalk {
    display: grid;
    gap: 48px;
}

.og-menu {
    border: 1px solid var(--og-light-blue);
    border-radius: var(--og-hoek);
    padding-bottom: 32px;
}

.og-menu ul,
.og-direct ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.og-menu-titel {
    font-weight: 700;
    margin: 0;
    padding: 32px 36px 20px;
}

.og-direct .og-menu-titel {
    padding: 0 36px 12px;
}

.og-menu-item,
.og-direct-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--og-dark-blue);
    text-decoration: none;
}

.og-menu-item {
    min-height: 51px;
    padding: 9px 36px;
}

.og-menu-item::after,
.og-direct-item::after {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    background: url("../img/pijl-zand.svg") center / contain no-repeat;
}

a.og-menu-item:hover,
.og-direct-item:hover {
    color: var(--og-red);
}

.og-menu-item-uit {
    opacity: 0.55;
}

.og-direct ul {
    display: grid;
    gap: 8px;
}

.og-direct-item {
    border: 1px solid var(--og-light-blue);
    border-radius: var(--og-hoek);
    padding: 16px 36px;
}

/* --- Kaarten ---------------------------------------------------------------- */
.og-kaart {
    background: var(--og-sand);
    border-radius: var(--og-hoek);
    padding: var(--og-kaart-padding);
    margin-bottom: 24px;
}

.og-kaart-wit {
    background: var(--og-white);
    border: 1px solid var(--og-light-blue);
}

.og-kaart > :last-child {
    margin-bottom: 0;
}

/* Gegevens: het label gewoon, de waarde vet eronder. */
.og-gegevens {
    margin: 0;
}

.og-gegevens dt {
    font-weight: 400;
}

.og-gegevens + p {
    margin-top: 24px;
}

.og-gegevens dd {
    font-weight: 700;
    margin: 0 0 24px;
}

.og-gegevens dd:last-child {
    margin-bottom: 0;
}

.og-tabel {
    width: 100%;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 24px;
}

.og-tabel th,
.og-tabel td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--og-light-blue);
    vertical-align: top;
}

/* --- Voortgangsbalk --------------------------------------------------------- */
.og-voortgang {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 16px;
    border: 0;
    border-radius: 6px;
    background: var(--og-light-blue);
    overflow: hidden;
    margin: 24px 0 48px;
}

.og-voortgang::-webkit-progress-bar {
    background: var(--og-light-blue);
}

.og-voortgang::-webkit-progress-value {
    background: var(--og-dark-blue);
}

.og-voortgang::-moz-progress-bar {
    background: var(--og-dark-blue);
}

/* --- Knoppen ---------------------------------------------------------------- */
.og-knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
}

/* Eén knop: rechts, zoals "volgende" in het ontwerp. */
.og-knoppen > :only-child {
    margin-left: auto;
}

.og-knoppen-links {
    margin-top: 24px;
    justify-content: flex-start;
}

.og-knoppen-links > :only-child {
    margin-left: 0;
}

.og-knop {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    min-height: 50px;
    padding: 10px 24px;
    border: 1px solid var(--og-dark-blue);
    border-radius: 100px;
    background: var(--og-white);
    color: var(--og-dark-blue);
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.og-knop:hover {
    background: var(--og-light-blue);
    color: var(--og-dark-blue);
}

.og-knop-volgende {
    padding-right: 12px;
}

.og-knop-vorige {
    padding-left: 12px;
}

.og-knop-volgende::after,
.og-knop-vorige::before {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    background: url("../img/pijl-rood.svg") center / contain no-repeat;
}

.og-knop-vorige::before {
    transform: rotate(180deg);
}

/* --- Formulieren ------------------------------------------------------------ */
.og-label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}

.og-invoer {
    font: inherit;
    color: inherit;
    background: var(--og-white);
    border: 1px solid var(--og-air-force-blue);
    border-radius: 12px;
    padding: 8px 16px;
    width: 100%;
    max-width: 320px;
}

.og-keuzelijst {
    max-width: 400px;
}

.og-bedrag-invoer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.og-bedrag-invoer .og-invoer {
    max-width: 220px;
}

.og-fout,
.field-validation-error {
    display: block;
    color: var(--og-red);
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    margin-top: 8px;
}

.field-validation-valid {
    display: none;
}

.og-keuzes {
    display: grid;
    gap: 16px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.og-keuze,
.og-vinkje {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.og-keuze {
    border: 1px solid var(--og-light-blue);
    border-radius: var(--og-hoek);
    padding: 20px var(--og-kaart-padding);
}

.og-keuze:has(input:checked) {
    border-color: var(--og-dark-blue);
    background: #f4f9f9;
}

.og-keuze label {
    display: grid;
    cursor: pointer;
}

.og-keuze-uit {
    background: #f3f3f3;
    border-color: #e0e0e0;
}

.og-keuze-uit label {
    cursor: default;
    color: #6b7a80;
}

/* De reden blijft goed leesbaar, ook al is de verzekering grijs. */
.og-keuze-reden {
    color: var(--og-dark-blue);
    font-size: 15px;
    line-height: 22px;
    margin-top: 4px;
}

.form-check-input {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 5px;
    border-color: var(--og-air-force-blue);
}

.form-check-input:checked {
    background-color: var(--og-dark-blue);
    border-color: var(--og-dark-blue);
}

/* --- Uitleg-knopje ("i'tje") ------------------------------------------------ */
.og-uitleg summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.og-uitleg summary::-webkit-details-marker {
    display: none;
}

.og-uitleg-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--og-dark-blue);
    color: var(--og-white);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    font-style: italic;
}

.og-uitleg p {
    background: var(--og-white);
    border: 1px solid var(--og-light-blue);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 22px;
    margin: 4px 0 8px;
}

/* --- Meldingen -------------------------------------------------------------- */
.og-melding {
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 24px;
    background: var(--og-light-blue);
}

.og-melding-waarschuwing {
    background: #fff3cd;
}

.og-melding-gelukt {
    background: #dff2e3;
}

/* --- Voet ------------------------------------------------------------------- */
.og-footer {
    background: var(--og-dark-blue);
    color: var(--og-white);
    font-size: 15px;
    line-height: 22px;
}

.og-footer-binnen {
    max-width: calc(var(--og-breedte) + 2 * 24px);
    margin-inline: auto;
    padding: 44px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
}

.og-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}