/*
 * Het aanvraagformulier op /adverteren/. Kleuren en maten uit
 * docs/ONTWERPSYSTEEM.md; de terugvalwaarden gelden waar de Oxygen-variabelen
 * ontbreken. Oxygen overschrijft display en text-align, vandaar de !important.
 */

.er-aanvraag {
    display: flex !important;
    flex-direction: column;
    gap: var(--er-space-6, 24px);
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    color: var(--er-ink, #151912);
    text-align: left !important;
}

.er-aanvraag__indeling {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--er-space-6, 24px);
}

.er-aanvraag__hoofd {
    display: flex !important;
    flex-direction: column;
    gap: var(--er-space-6, 24px);
    min-width: 0;
}

.er-aanvraag__stap {
    min-width: 0;
    margin: 0;
    padding: var(--er-space-6, 24px);
    border: 1px solid var(--er-border, #cfd3d7);
    border-radius: var(--er-radius-md, 10px);
    background: var(--er-surface, #fff);
}

/* Het introductieblok: een rand in de huiskleur, geen tweede kaart naast de pakketten. */
.er-aanvraag__introductie {
    margin: 0 auto var(--er-space-6, 24px);
    max-width: 720px;
    padding: var(--er-space-4, 16px) var(--er-space-5, 20px);
    border-left: 4px solid var(--er-primary, #f5a912);
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-surface-alt, #f9f9f9);
}

.er-aanvraag__introductie strong {
    display: block;
    margin-bottom: var(--er-space-1, 4px);
    font: 700 17px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__introductie p {
    margin: 0;
    color: var(--er-ink-soft, #424b54);
}

.er-aanvraag__stap--pakket {
    padding: 0;
    border: 0;
    background: none;
}

.er-aanvraag__stap legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--er-space-3, 12px);
    padding: 0;
    font: 700 19px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__stap--pakket legend {
    margin-bottom: var(--er-space-5, 20px);
    font-size: 24px;
    text-align: center;
}

.er-aanvraag__stap legend + * {
    clear: both;
}

.er-aanvraag__uitleg,
.er-aanvraag__klein {
    margin: 0 0 var(--er-space-3, 12px);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--er-ink-soft, #424b54);
}

label .er-aanvraag__uitleg {
    display: block;
    margin: var(--er-space-2, 8px) 0 0;
}

.er-aanvraag__klein {
    margin: 0;
    font-size: 13px;
}

.er-aanvraag__veld {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 var(--er-space-3, 12px);
    font-size: 15px;
    font-weight: 600;
}

.er-aanvraag__veld:last-child {
    margin-bottom: 0;
}

.er-aanvraag__veld[hidden] {
    display: none !important;
}

/* Bij een verborgen kamerveld is de locatie het laatste zichtbare veld. */
.er-aanvraag__veld:has(+ [hidden]) {
    margin-bottom: 0;
}

.er-aanvraag__veld input,
.er-aanvraag__veld select,
.er-aanvraag__veld textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--er-space-3, 12px);
    border: 1px solid var(--er-border-strong, #aaa);
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-surface, #fff);
    color: inherit;
    font: 400 16px/1.4 inherit;
}

.er-aanvraag__indeling[hidden] {
    display: none !important;
}

.er-aanvraag__poort {
    padding: var(--er-space-5, 24px);
    border: 1px solid var(--er-border, #ddd);
    border-radius: var(--er-radius-md, 10px);
    background: var(--er-surface, #fff);
    text-align: center;
}

.er-aanvraag__poort[hidden] {
    display: none;
}

.er-aanvraag__poortkop {
    margin: 0 0 var(--er-space-2, 8px);
    font-size: 20px;
    font-weight: 700;
}

.er-aanvraag__poortknoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--er-space-3, 12px) var(--er-space-5, 24px);
    align-items: center;
    justify-content: center;
}

.er-aanvraag__poortknoppen .er-aanvraag__knop {
    display: inline-block;
    width: auto;
    padding-right: var(--er-space-6, 32px);
    padding-left: var(--er-space-6, 32px);
    text-decoration: none;
}

.er-aanvraag__poortknoppen [hidden] {
    display: none;
}

.er-aanvraag__poortlink {
    color: var(--er-primary-tekst, inherit);
    font-weight: 600;
}

/* Voor spambots: mensen zien dit veld niet. */
.er-aanvraag__veldje {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* De pakketten: het middelste steekt uit en staat op oranje. */

.er-aanvraag__pakketten {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1000px;
    margin: 0 auto;
}

.er-aanvraag__pakket {
    position: relative;
    display: flex !important;
    flex-direction: column;
    margin: var(--er-space-7, 32px) 0;
    padding: var(--er-space-7, 32px) var(--er-space-6, 24px) var(--er-space-6, 24px);
    border: 2px solid var(--er-border, #cfd3d7);
    background: var(--er-surface, #fff);
    cursor: pointer;
    transition: border-color 150ms ease;
}

.er-aanvraag__pakket:first-child {
    border-right: 0;
    border-radius: var(--er-radius-md, 10px) 0 0 var(--er-radius-md, 10px);
}

.er-aanvraag__pakket:last-child {
    border-left: 0;
    border-radius: 0 var(--er-radius-md, 10px) var(--er-radius-md, 10px) 0;
}

.er-aanvraag__pakket--aanrader {
    z-index: 1;
    margin: 0;
    border-color: var(--er-primary, #f5a912);
    border-radius: var(--er-radius-md, 10px);
    background: var(--er-primary, #f5a912);
}

.er-aanvraag__pakket:has(input:checked) {
    z-index: 2;
    border: 2px solid var(--er-cta, #427a54);
    border-radius: var(--er-radius-md, 10px);
}

.er-aanvraag__pakket:has(input:focus-visible),
.er-aanvraag button:focus-visible {
    outline: 2px solid var(--er-primary-tekst, #8a5a00);
    outline-offset: 2px;
}

.er-aanvraag__pakket input {
    position: absolute;
    opacity: 0;
}

.er-aanvraag__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-2, 8px);
}

.er-aanvraag__naam {
    font: 700 20px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__aanrader {
    padding: 3px 10px;
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-surface, #fff);
    color: var(--er-ink, #151912);
    font-size: 12px;
    font-weight: 700;
}

.er-aanvraag__belofte {
    margin-top: var(--er-space-1, 4px);
    font-size: 14px;
    font-weight: 600;
}

.er-aanvraag__prijs {
    margin-top: var(--er-space-5, 20px);
    padding-bottom: var(--er-space-5, 20px);
    border-bottom: 1px solid var(--er-track, #eceeef);
    color: var(--er-ink-soft, #424b54);
    font-size: 18px;
    font-weight: 600;
}

.er-aanvraag__prijs strong {
    color: var(--er-ink, #151912);
    font: 800 34px/1 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__pakket--aanrader .er-aanvraag__prijs {
    border-color: var(--er-primary-dark, #c48507);
    color: var(--er-ink, #151912);
}

.er-aanvraag__pakket ul {
    display: flex;
    flex-direction: column;
    gap: var(--er-space-3, 12px);
    margin: var(--er-space-5, 20px) 0 var(--er-space-6, 24px);
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.er-aanvraag__pakket li {
    position: relative;
    margin: 0;
    padding-left: 28px;
}

.er-aanvraag__pakket li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--er-cta, #427a54) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 8 12.5 13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.er-aanvraag__pakket--aanrader li::before {
    background-color: var(--er-surface, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 8 12.5 13 6.5' fill='none' stroke='%23427a54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.er-aanvraag__kies {
    margin-top: auto;
    padding: var(--er-space-3, 12px);
    border: 1px solid var(--er-border-strong, #aaa);
    border-radius: var(--er-radius-sm, 5px);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

/* Plat wit op oranje las als een invulveld; de onderrand geeft de knop diepte. */
.er-aanvraag__pakket--aanrader .er-aanvraag__kies {
    border-color: var(--er-surface, #fff);
    background: var(--er-surface, #fff);
    color: var(--er-ink, #151912);
    font-weight: 700;
    box-shadow: 0 4px 0 var(--er-primary-dark, #c48507), 0 6px 10px rgba(21, 25, 18, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}

.er-aanvraag__pakket--aanrader:hover .er-aanvraag__kies {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--er-primary-dark, #c48507), 0 3px 6px rgba(21, 25, 18, 0.2);
}

.er-aanvraag__kies-wel {
    display: none;
}

.er-aanvraag__pakket:has(input:checked) .er-aanvraag__kies {
    border-color: var(--er-cta, #427a54);
    background: var(--er-cta, #427a54);
    color: var(--er-surface, #fff);
}

/* Gekozen is ingedrukt: de diepte gaat weg, de tekst wordt groen. */
.er-aanvraag__pakket--aanrader:has(input:checked) .er-aanvraag__kies {
    border-color: var(--er-surface, #fff);
    background: var(--er-surface, #fff);
    color: var(--er-cta, #427a54);
    transform: translateY(4px);
    box-shadow: none;
}

.er-aanvraag__pakket:has(input:checked) .er-aanvraag__kies-niet {
    display: none;
}

.er-aanvraag__pakket:has(input:checked) .er-aanvraag__kies-wel {
    display: inline;
}

/* De kalender: je kiest hele weken, dus de hele rij is de knop. */

.er-aanvraag__maandbalk {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-3, 12px);
    margin-bottom: var(--er-space-3, 12px);
}

.er-aanvraag__pijl {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--er-border, #cfd3d7);
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-surface, #fff);
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.er-aanvraag__pijl:disabled {
    opacity: 0.4;
    cursor: default;
}

.er-aanvraag__legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--er-space-4, 16px);
    margin: 0;
    color: var(--er-ink-soft, #424b54);
    font-size: 13px;
}

.er-aanvraag__teken {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.er-aanvraag__teken::before {
    content: "";
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid var(--er-border, #cfd3d7);
    border-radius: 3px;
}

.er-aanvraag__teken--gekozen::before {
    border-color: var(--er-primary, #f5a912);
    background: var(--er-primary, #f5a912);
}

.er-aanvraag__teken--vol::before {
    background: var(--er-track, #eceeef);
}

.er-aanvraag__teken--druk::before {
    border: 0;
    border-bottom: 3px solid var(--er-primary-dark, #c48507);
    border-radius: 0;
}

.er-aanvraag__maanden {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--er-space-6, 24px);
}

.er-aanvraag__maandnaam {
    margin: 0 0 var(--er-space-2, 8px);
    font-weight: 700;
    text-align: center;
}

.er-aanvraag__dagen,
.er-aanvraag__week {
    display: grid !important;
    grid-template-columns: 30px repeat(7, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
}

.er-aanvraag__dagen {
    margin-bottom: var(--er-space-1, 4px);
    color: var(--er-ink-soft, #424b54);
    font-size: 12px;
    font-weight: 600;
}

.er-aanvraag__week {
    min-height: 36px;
    margin: 0 0 2px;
    padding: var(--er-space-1, 4px) 0;
    border: 1px solid transparent;
    border-radius: var(--er-radius-sm, 5px);
    background: none;
    color: inherit;
    font: 400 14px/1.3 inherit;
    cursor: pointer;
}

button.er-aanvraag__week:hover:not(:disabled) {
    border-color: var(--er-primary, #f5a912);
}

.er-aanvraag__weeknummer {
    color: var(--er-ink-soft, #424b54);
    font-size: 11px;
    font-weight: 600;
}

.er-aanvraag__dag--buiten {
    opacity: 0.45;
}

.er-aanvraag__week--voorbij {
    opacity: 0.4;
    cursor: default;
}

.er-aanvraag__week--vol {
    background: var(--er-track, #eceeef);
    color: var(--er-ink-soft, #424b54);
    cursor: not-allowed;
}

/* Een streep onder de week, zodat vrij, gekozen en vol gewoon leesbaar blijven. */
.er-aanvraag__week--druk {
    box-shadow: inset 0 -3px 0 var(--er-primary-dark, #c48507);
}

.er-aanvraag__week[aria-pressed="true"] {
    background: var(--er-primary, #f5a912);
    font-weight: 600;
}

.er-aanvraag__week[aria-pressed="true"] .er-aanvraag__weeknummer {
    color: inherit;
}

.er-aanvraag__week[aria-pressed="true"] .er-aanvraag__dag--buiten {
    opacity: 0.7;
}

.er-aanvraag__thuis {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 2px;
    padding: 1px var(--er-space-2, 8px);
    border-radius: var(--er-radius-pill, 999px);
    background: var(--er-surface, #fff);
    color: var(--er-ink, #151912);
    font-size: 11px;
    font-weight: 600;
}

/* De samenvatting beweegt mee; de lijst scrolt zelf als je veel weken kiest. */

.er-aanvraag__overzicht {
    position: sticky;
    top: var(--er-aanvraag-top, 24px);
    display: flex !important;
    flex-direction: column;
    gap: var(--er-space-3, 12px);
    min-width: 0;
    padding: var(--er-space-5, 20px);
    border: 1px solid var(--er-border, #cfd3d7);
    border-radius: var(--er-radius-md, 10px);
    background: var(--er-surface, #fff);
}

.er-aanvraag__overzichtkop {
    margin: 0;
    font: 700 19px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__regel {
    display: flex !important;
    justify-content: space-between;
    gap: var(--er-space-3, 12px);
    margin: 0 0 var(--er-space-1, 4px);
    font-size: 14px;
}

.er-aanvraag__regel span:last-child {
    font-weight: 600;
    text-align: right !important;
}

.er-aanvraag__regel--totaal {
    margin: var(--er-space-2, 8px) 0 0;
    padding-top: var(--er-space-3, 12px);
    border-top: 1px solid var(--er-border, #cfd3d7);
    font: 700 18px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__leeg {
    margin: var(--er-space-3, 12px) 0 0;
    color: var(--er-ink-soft, #424b54);
    font-size: 14px;
}

.er-aanvraag__gekozen {
    max-height: 240px;
    margin: var(--er-space-3, 12px) 0;
    padding: var(--er-space-2, 8px) 0;
    overflow-y: auto;
    border-block: 1px solid var(--er-track, #eceeef);
    list-style: none;
}

.er-aanvraag__gekozen li {
    display: flex !important;
    align-items: center;
    gap: var(--er-space-2, 8px);
    margin: 0;
    padding: var(--er-space-1, 4px) 0;
    font-size: 14px;
}

.er-aanvraag__gekozentekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.er-aanvraag__gekozenthuis,
.er-aanvraag__gekozendruk {
    color: var(--er-primary-tekst, #8a5a00);
    font-size: 13px;
    font-weight: 600;
}

.er-aanvraag__gekozenprijs {
    font-weight: 600;
}

.er-aanvraag__uit {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--er-radius-sm, 5px);
    background: none;
    color: var(--er-ink-soft, #424b54);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.er-aanvraag__uit:hover {
    background: var(--er-track, #eceeef);
}

.er-aanvraag__knop {
    width: 100%;
    padding: 15px 26px;
    border: 0;
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-primary, #f5a912);
    color: var(--er-ink, #151912);
    font: 600 17px/1.3 inherit;
    cursor: pointer;
}

.er-aanvraag__knop:hover {
    background: var(--er-primary-dark, #c48507);
}

.er-aanvraag__knop:disabled {
    opacity: 0.6;
    cursor: wait;
}

.er-aanvraag__melding {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--er-danger, #c62828);
}

.er-aanvraag__melding:empty {
    display: none;
}

.er-aanvraag__melding--goed {
    color: var(--er-cta, #427a54);
}

/* De homepagekeuze */

.er-aanvraag__dialoog {
    width: min(440px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: var(--er-space-6, 24px);
    border: 0;
    border-radius: var(--er-radius-md, 10px);
    background: var(--er-surface, #fff);
    color: var(--er-ink, #151912);
}

.er-aanvraag__dialoog::backdrop {
    background: rgba(21, 25, 18, 0.6);
}

.er-aanvraag__dialoogkop {
    margin: 0 var(--er-space-7, 32px) var(--er-space-2, 8px) 0;
    font: 700 19px/1.3 "montserrat-custom", Montserrat, sans-serif;
}

.er-aanvraag__sluit {
    position: absolute;
    top: var(--er-space-3, 12px);
    right: var(--er-space-3, 12px);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--er-radius-sm, 5px);
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.er-aanvraag__dialoogkeuze {
    display: flex !important;
    flex-direction: column;
    gap: var(--er-space-2, 8px);
    margin-top: var(--er-space-4, 16px);
}

.er-aanvraag__optie {
    width: 100%;
    padding: 14px var(--er-space-4, 16px);
    border: 1px solid var(--er-border-strong, #aaa);
    border-radius: var(--er-radius-sm, 5px);
    background: var(--er-surface, #fff);
    color: inherit;
    font: 600 15px/1.3 inherit;
    cursor: pointer;
}

.er-aanvraag__optie--thuis {
    border-color: var(--er-primary, #f5a912);
    background: var(--er-primary, #f5a912);
}

.er-aanvraag__nietvragen {
    display: block;
    margin-top: var(--er-space-3, 12px);
    color: var(--er-ink-soft, #424b54);
    font-size: 14px;
}

.er-aanvraag__nietvragen[hidden],
.er-aanvraag__weghalen[hidden] {
    display: none;
}

.er-aanvraag__weghalen {
    margin-top: var(--er-space-3, 12px);
    padding: 0;
    border: 0;
    background: none;
    color: var(--er-danger, #c62828);
    font: 600 14px/1.3 inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .er-aanvraag__indeling {
        grid-template-columns: minmax(0, 1fr);
    }

    .er-aanvraag__overzicht {
        position: static;
    }

    .er-aanvraag__pakketten {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--er-space-3, 12px);
        max-width: 480px;
    }

    .er-aanvraag__pakket,
    .er-aanvraag__pakket:first-child,
    .er-aanvraag__pakket:last-child {
        margin: 0;
        padding-top: var(--er-space-6, 24px);
        border: 2px solid var(--er-border, #cfd3d7);
        border-radius: var(--er-radius-md, 10px);
    }

    .er-aanvraag__pakket--aanrader {
        border-color: var(--er-primary, #f5a912);
    }

    .er-aanvraag__pakket:has(input:checked) {
        border-color: var(--er-cta, #427a54);
    }
}

@media (max-width: 767px) {
    .er-aanvraag__stap {
        padding: var(--er-space-4, 16px);
    }

    .er-aanvraag__stap--pakket {
        padding: 0;
    }

}

@media (max-width: 640px) {
    .er-aanvraag__maanden {
        grid-template-columns: minmax(0, 1fr);
    }
}