/* Shared UI foundation for the customer-facing overlays (docs/FRONTEND.md
   "Shared UI styles"): the rules that Quick View, the Mini Cart, the method
   chooser and the price-change confirmation repeated verbatim. Only what is
   genuinely identical lives here; every component keeps its own layout, sizes
   and colours where they differ. Loaded first (a dependency of those
   sheets), so a component's own rule wins any tie.

   Colours come from the Theme tokens (class-rm-theme.php), each with the
   literal that was there before as its fallback, so this sheet looks the same
   without the inline :root block. Controls are hardened against theme
   `button` rules the same way the component rules were: scoped selectors
   plus !important on the properties a theme button reset touches. */

/* Visually hidden, still read by assistive technology. */
.rm-qv-sr,
.rm-mini-cart-sr,
.rm-checkout-method-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scroll lock while Quick View or the Mini Cart is open: the top layer/backdrop
   makes the page inert but does not stop it scrolling. quick-view.js and
   cart.js toggle these classes on html + body (a theme may make either the
   scroller). The scrollbar keeps its gutter while locked: hiding it would change
   the viewport width, re-lay out the whole long Menu and fire the sticky-nav
   ResizeObserver on every open/close. Overlay-scrollbar platforms never change
   width. */
html.rm-qv-open,
body.rm-qv-open,
html.rm-mini-cart-open,
body.rm-mini-cart-open {
    overflow: hidden;
}

html.rm-qv-open,
html.rm-mini-cart-open {
    scrollbar-gutter: stable;
}

/* The "Added to cart" toast (assets/toast.js): one reused status element, bottom centre, above the Sticky Cart so it never covers
   its Cart / Checkout buttons. Never takes a click (pointer-events), never wider than the screen, so no horizontal scroll. */
.rm-toast {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 95000;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--rm-text, #1f2933);
    color: #fff;
    font-weight: 600;
    font-size: .95em;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
}

.rm-toast.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .rm-toast {
        transform: translate(-50%, 8px);
        transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
    }

    .rm-toast.is-visible {
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }
}

/* Loading skeleton pulse (Quick View and Mini Cart bars). */
@media (prefers-reduced-motion: no-preference) {
    .rm-qv-skeleton-block,
    .rm-mini-cart-skeleton .rm-skeleton-block {
        animation: rm-ui-pulse 1.2s ease-in-out infinite;
    }
}

@keyframes rm-ui-pulse {
    50% { opacity: .55; }
}

/* Round close button in a dialog header (Quick View, Mini Cart). Hardened
   against theme `button` styles (live browser review confirmed a bare X was
   invisible at rest). `.header .close` (0,2,0) outranks a bare `button` rule;
   color/background/border/shadow are also pinned with !important as a floor,
   since the exact competing theme selector cannot be enumerated from source. */
.rm-qv-header .rm-qv-close,
.rm-mini-cart-header .rm-mini-cart-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none;
    line-height: 1;
    font: inherit;
    color: var(--rm-text, #1f2933) !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rm-qv-header .rm-qv-close:hover,
.rm-qv-header .rm-qv-close:focus-visible,
.rm-mini-cart-header .rm-mini-cart-close:hover,
.rm-mini-cart-header .rm-mini-cart-close:focus-visible {
    background: rgba(0, 0, 0, .06) !important;
    outline: none;
}

.rm-qv-header .rm-qv-close:focus-visible,
.rm-mini-cart-header .rm-mini-cart-close:focus-visible {
    box-shadow: 0 0 0 2px var(--rm-focus, #2563eb) !important;
}

/* CSS-owned X icon - no SVG presentation attributes to lose to theme CSS. */
.rm-qv-close-icon,
.rm-mini-cart-close-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Quantity [-] 1 [+] buttons (Quick View, Mini Cart): every size-determining
   property is pinned at component scope so inherited theme padding/min sizes
   can never enlarge or distort them (live review). Never a global reset. */
.rm-qv-dialog .rm-qv-qty-minus,
.rm-qv-dialog .rm-qv-qty-plus,
.rm-mini-cart-drawer .rm-mini-cart-qty-minus,
.rm-mini-cart-drawer .rm-mini-cart-qty-plus {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    border: 1px solid #d1d5db !important;
    border-radius: var(--rm-radius, 8px) !important;
    background: var(--rm-surface, #ffffff) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: var(--rm-text, #1f2933) !important;
    font-family: inherit;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rm-qv-dialog .rm-qv-qty-minus:hover,
.rm-qv-dialog .rm-qv-qty-plus:hover,
.rm-mini-cart-drawer .rm-mini-cart-qty-minus:hover,
.rm-mini-cart-drawer .rm-mini-cart-qty-plus:hover {
    background: #f3f4f6 !important;
    color: var(--rm-text, #1f2933) !important;
}

.rm-qv-dialog .rm-qv-qty-minus:focus-visible,
.rm-qv-dialog .rm-qv-qty-plus:focus-visible,
.rm-mini-cart-drawer .rm-mini-cart-qty-minus:focus-visible,
.rm-mini-cart-drawer .rm-mini-cart-qty-plus:focus-visible {
    outline: 2px solid var(--rm-focus, #2563eb) !important;
    outline-offset: 1px;
}

/* Primary action button (Add to cart, "Switch to ..." confirm, chooser
   Continue): colours, states and the theme-button floor. Each component keeps
   its own size and spacing. */
.rm-qv-dialog .rm-qv-add-to-cart,
.rm-switch-confirm .rm-switch-confirm-ok,
.rm-method-chooser-panel .rm-method-chooser-continue {
    border: 0 !important;
    background: var(--rm-primary, #2563eb) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #fff !important;
    font-family: inherit;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rm-qv-dialog .rm-qv-add-to-cart:hover,
.rm-switch-confirm .rm-switch-confirm-ok:hover,
.rm-method-chooser-panel .rm-method-chooser-continue:hover {
    background: var(--rm-primary-hover, #1d4ed8) !important;
    color: #fff !important;
}

.rm-qv-dialog .rm-qv-add-to-cart:focus-visible,
.rm-switch-confirm .rm-switch-confirm-ok:focus-visible,
.rm-method-chooser-panel .rm-method-chooser-continue:focus-visible {
    background: var(--rm-primary-hover, #1d4ed8) !important;
    color: #fff !important;
    outline: 2px solid var(--rm-focus, #2563eb) !important;
    outline-offset: 2px;
}

.rm-qv-dialog .rm-qv-add-to-cart:disabled,
.rm-qv-dialog .rm-qv-add-to-cart.is-loading,
.rm-method-chooser-panel .rm-method-chooser-continue:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Touch: the small round/square controls grow to a 44px target. */
@media (pointer: coarse) {
    .rm-qv-header .rm-qv-close,
    .rm-mini-cart-header .rm-mini-cart-close,
    .rm-qv-dialog .rm-qv-qty-minus,
    .rm-qv-dialog .rm-qv-qty-plus,
    .rm-mini-cart-drawer .rm-mini-cart-qty-minus,
    .rm-mini-cart-drawer .rm-mini-cart-qty-plus {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}