/* FORM BASE LAYOUT */
#donation-form .section {
    margin-bottom: 2rem;
}

/* Two-column flex rows for standard fields */
#donation-form .section .field {
    width: 100%;
}

/* Create horizontal field pairs */
#donation-form .section:is(.contact, .billing-address, .custom-fields) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

#donation-form .section:is(.contact, .billing-address, .custom-fields) .field {
    flex: 1 1 calc(50% - 1.5rem);
    min-width: 260px; /* prevents weird wrapping on narrow screens */
}

/*
 Full-width overrides:
 These fields are ALWAYS 100% width even inside flex-2 groups
*/

#donation-form .field.checkbox,
#donation-form .field.radio,
#donation-form .field.street-address,
#donation-form .field.comment,
#donation-form .section h3,
#donation-form .field#stripe-cc-fields,
#donation-form .btn-group {
    grid-column: span 2;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #donation-form
        .section:is(.contact, .billing-address, .custom-fields)
        .field {
        flex: 1 1 100%;
    }
}

#donation-form label[for="recurring"] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

#donation-form .section label {
    margin-bottom: 0.25em;
}

#donation-form .field.street-address {
    grid-column: 2;
}

#donation-form .field.street-address.required {
    grid-column: 2;
}

#donation-form .field,
#donation-form .field :is(textarea, input, select) {
    max-width: unset;
}

#donation-form label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: start;
    gap: 0.25em;
}
