:root {
    --color-form-control-background: rgb(38, 38, 50);
    --color-form-control-border: rgba(255, 255, 255, 0.18);
    --color-form-focus-border: rgb(224, 120, 40);
    --color-form-control-focus-background: rgb(48, 48, 64);

    /* Ontbrekende framework-variabelen voor dark theme */
    --color-border: rgba(255, 255, 255, 0.12);
    --color-text: rgba(255, 255, 255, 0.92);
    --color-link: rgb(224, 120, 40);
    --color-danger: #f87171;
}

.form__field {
    color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
}

/* Checkout: --color-primary als volledige kleur (framework CSS gebruikt het direct) */
.checkout {
    --color-primary: rgb(224, 120, 40);
    --color-primary-05: rgba(224, 120, 40, 0.05);
}

/* Checkout content en basket: dark panels */
.checkout__content,
.checkout__shopping-basket {
    background: rgb(22, 22, 30);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.checkout__main {
    gap: 1.5rem;
}

/* Shopping basket sidebar: dark theme override */
.checkout .shopping-basket__total {
    background: rgba(255, 255, 255, 0.03);
}

.checkout .shopping-basket {
    border-color: rgba(255, 255, 255, 0.08);
}

.checkout .shopping-basket__header,
.checkout .shopping-basket__total {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Checkout formulieren: verticaal (label boven input), volledige breedte */
.checkout .formElement:not(.formElement--button) {
    display: block;
}

.checkout .formElement__label {
    flex: none;
    padding: 0 0 .4em;
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
    font-weight: 500;
}

.checkout .formElement__input {
    margin-left: 0;
    margin-bottom: 1.25rem;
}

.checkout .form__field {
    width: 100%;
}