/* ==========================================================================
   Components — Contact
   ========================================================================== */

/* TASK-061L.1: same alert-banner look as components-checkout.css's own
   .checkout-alert — reused by class name rather than importing that whole
   checkout-specific stylesheet, matching components-track-order.css's own
   existing precedent of re-declaring this small rule per page. */
.checkout-alert {
    display: none;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    border: 1px solid var(--color-feedback-error);
    background-color: color-mix(in srgb, var(--color-feedback-error) 10%, var(--color-surface));
    color: var(--color-text-primary);
}

.checkout-alert:not(:empty) {
    display: block;
}