/* Styling voor composite form-fields gerendered door PHP-classes
   (PersonalNameField, AddressField, ZipcodeField, etc.).

   Werkt onafhankelijk van form-builder.css — laad deze stylesheet op
   pagina's waar composite-velden gebruikt worden. */

.mm-composite {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Een rij binnen een composite — inputs naast elkaar, wrap'pen op smal scherm. */
.mm-composite-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    width: 100%;
}

.mm-composite-input {
    flex: 1 1 6rem;
    min-width: 0;
    padding: .5rem .65rem;
    background: var(--input-bg, #fff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    color: var(--text, #0f172a);
    font: inherit;
    box-sizing: border-box;
}
.mm-composite-input:focus {
    outline: none;
    border-color: var(--primary, #3b82f6);
}

/* Smaller width voor 'middle' / huisnummer / postcode / cvc. */
.mm-composite-input--narrow {
    flex: 0 1 7rem;
}

/* Compact — bij content-fit (afstand-dropdown). */
.mm-composite-input--compact {
    flex: 0 0 auto;
    width: auto;
}

.mm-composite-salutation {
    flex: 0 0 auto;
    min-width: 6rem;
}

/* Custom-select-display binnen een composite mag NIET z'n default
   min-width: 12rem afdwingen — die laat 'm uitsteken naast de andere
   inputs. Door 'm dezelfde flex-basis als mm-composite-input te geven,
   gedraagt 'ie zich identiek aan een normale input qua breedte. */
.mm-composite .mm-select-display,
.mm-composite-row .mm-select-display {
    flex: 1 1 6rem;
    min-width: 0;
    box-sizing: border-box;
    padding: .5rem .65rem;          /* match mm-composite-input padding */
}
.mm-composite .mm-select-display.mm-composite-input--narrow,
.mm-composite-row .mm-select-display.mm-composite-input--narrow {
    flex: 0 1 7rem;
}
.mm-composite .mm-select-display.mm-composite-input--compact,
.mm-composite-row .mm-select-display.mm-composite-input--compact {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

/* Mobile: alles onder elkaar */
@media (max-width: 540px) {
    .mm-composite {
        flex-direction: column;
    }
    .mm-composite-input,
    .mm-composite-input--narrow,
    .mm-composite-salutation {
        flex: 1 1 auto;
        width: 100%;
    }
}