/* Shared billing dialog and address form layout */

.billing-dialog-body {
    max-height: 70vh;
    overflow-y: auto;
}

.billing-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 28rem;
}

.billing-form--wide {
    max-width: 36rem;
}

.billing-form-field {
    display: block;
    width: 100%;
    max-width: 28rem;
}

.billing-form-field--full {
    max-width: 100%;
}

.billing-form-field--lg {
    max-width: 22rem;
}

.billing-form-field--md {
    max-width: 16rem;
}

.billing-form-field--sm {
    max-width: 10rem;
}

.billing-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    max-width: 28rem;
}

.billing-form-row--wide {
    max-width: 36rem;
}

.billing-form-row .billing-form-field--city {
    flex: 2 1 9rem;
    min-width: 7rem;
    max-width: none;
}

.billing-form-row .billing-form-field--state {
    flex: 1 1 5.5rem;
    min-width: 4.5rem;
    max-width: 7rem;
}

.billing-form-row .billing-form-field--postal {
    flex: 1 1 5.5rem;
    min-width: 4.5rem;
    max-width: 7.5rem;
}

.billing-form-row .billing-form-field--half {
    flex: 1 1 8rem;
    min-width: 7rem;
    max-width: none;
}

.billing-form-row .billing-form-field--third {
    flex: 1 1 6rem;
    min-width: 5rem;
    max-width: none;
}

.billing-form-field fluent-text-field,
.billing-form-field fluent-text-area,
.billing-form-field fluent-select,
.billing-form-field fluent-number-field,
.billing-form-field fluent-checkbox {
    display: block;
    width: 100%;
}

.billing-location-form {
    max-width: 28rem;
}