/* Floating-label form fields + inline validation.
   Used by the shared address modal and payment modal partials.
   Plain-CSS implementation: the label sits inside the input as a placeholder
   when empty, and floats up-and-into the top of the input when focused or filled.
*/

.floating-field {
    position: relative;
    margin-top: 14px;
}

.floating-field input,
.floating-field select,
.floating-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 20px 12px 8px;
    border: 1.5px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: #1f2933;
    line-height: 20px;
}

.floating-field textarea {
    resize: vertical;
    min-height: 96px;
}

.floating-field input::placeholder,
.floating-field textarea::placeholder {
    color: transparent;
}

.floating-field input:focus,
.floating-field select:focus,
.floating-field textarea:focus {
    outline: none;
    border-color: #003660;
    box-shadow: 0 0 0 3px rgba(0, 54, 96, 0.12);
}

.floating-field label {
    position: absolute;
    left: 10px;
    top: 26px;
    transform: translateY(-50%);
    display: inline-block;
    margin: 0;
    line-height: 1;
    pointer-events: none;
    color: #999;
    font-size: 14px;
    background: #fff;
    padding: 0 4px;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Special case: textarea label anchors near the top of the (taller) field. */
.floating-field--textarea label {
    top: 26px;
    transform: translateY(-50%);
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:focus + label,
.floating-field textarea:not(:placeholder-shown) + label,
.floating-field select:focus + label,
.floating-field select.has-value + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: #003660;
}

/* Readonly fields (e.g. State="California") keep the label always-floated so
   it doesn't overlap the static value. */
.floating-field input[readonly] + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: #777;
}

/* Inline validation */
.floating-field.is-invalid input,
.floating-field.is-invalid select,
.floating-field.is-invalid textarea {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

.floating-field .field-error {
    display: none;
    color: #d93025;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 4px;
}

.floating-field.is-invalid .field-error {
    display: block;
}

/* Standalone (non-floating-field) error slot — e.g. Stripe Elements errors */
.field-error--standalone {
    display: none;
    color: #d93025;
    font-size: 12px;
    margin-top: 6px;
    padding-left: 4px;
}
.field-error--standalone.is-active {
    display: block;
}

/* Address grid layout (3-col responsive) */
.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .address-grid {
        grid-template-columns: 1fr;
    }
}

/* Reveal a modal when JS toggles .is-open on a .modal element.
   Both checkout.css and profile.css set .modal { display: none } by default;
   adding .is-open flexes it into view, centered (matches the existing flex layout). */
.modal.is-open {
    display: flex;
}