/**
 * PSDM Orientation Gate — attention highlight shown when a customer tries to add
 * to cart without choosing an orientation. Paired with psdm-orientation-gate.js.
 */

.psdm-orientation-selector {
    border-radius: 8px;
    scroll-margin-top: 90px; /* clear sticky header when scrolled into view */
}

.psdm-orientation-attention {
    animation: psdm-orientation-pulse 0.9s ease-out 2;
}

@keyframes psdm-orientation-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.psdm-orientation-gate-msg {
    margin: 8px 0 0;
    color: #dc3545;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Honor reduced-motion: a static outline instead of the pulse. */
@media (prefers-reduced-motion: reduce) {
    .psdm-orientation-attention {
        animation: none;
        outline: 2px solid #dc3545;
        outline-offset: 3px;
    }
}