/* ============================================================
   AddressForm — layout-only stylesheet.
   Field appearance (input height, padding, borders, fonts, etc.)
   is inherited from Bootstrap's .form-control / .form-label /
   .form-select that addressForm.js applies to generated markup.
   This file only manages how fields are arranged into rows.
   ============================================================ */

/*.af-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}*/

.af-row {
    display: grid;
    gap: 16px;
}

.af-row--1col {
    grid-template-columns: 1fr;
}

.af-row--2col {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
    .af-row--2col {
        grid-template-columns: 1fr;
    }
}

.af-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.af-required {
    color: #c0392b;
    margin-left: 2px;
}

.af-error {
    color: #c0392b;
/*    font-size: 0.85em;*/
    min-height: 1em;
}

span.af-error:empty {
    display: none;
}

.af-field--error .form-control {
    border-color: #c0392b;
}