/* Phase 4 Stage A - Quick View (docs/QUICK_VIEW.md "Layout"). Dialog chrome
   and Quick View's own body layout only (rm-qv-*) - the Global Options and
   Allergens content inside it reuses frontend.css's rm-go-frontend and
   rm-allergens classes completely unchanged, never a second style set. The
   close button, quantity buttons, Add to cart colours, scroll lock, skeleton
   pulse and visually-hidden helper are shared with the other overlays in ui.css;
   colours are the Theme tokens (class-rm-theme.php) with the earlier literal as
   the fallback.
   (Never write a class wildcard like "name-*" followed by a slash in a
   comment here: that closes the comment early and silently drops the
   first rule below - the confirmed cause of the unanchored, unlayered
   sheet in live testing.) */

/*
 * Locked product decision (docs/QUICK_VIEW.md "Layout"): Quick View opens
 * from the bottom/footer area on EVERY viewport, desktop included - never
 * a small centered floating popup.
 *
 * The sheet is a native <dialog> opened with showModal(): it lives in the
 * browser's top layer, above the Menu, theme content and the Sticky/Footer
 * Cart whatever their z-index, with the browser's own ::backdrop behind
 * it. Author styles replace the UA dialog box (centered, padded, bordered)
 * with the bottom-anchored sheet.
 *
 * Desktop: about 800px wide, centered horizontally, anchored to the bottom
 * edge (live review: full viewport width was too wide; a centered
 * mid-screen popup stays ruled out). The 32px keeps backdrop visible at
 * both sides on narrower desktops.
 */
.rm-qv-dialog {
    position: fixed;
    inset: auto 0 0 0;
    box-sizing: border-box;
    width: min(800px, calc(100vw - 32px));
    max-width: none;
    max-height: min(85vh, 900px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--rm-surface, #ffffff);
    color: var(--rm-text, #1f2933);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
    --rm-qv-image-height: clamp(160px, 30vh, 240px);
}

/* Only an open dialog is displayed (the UA's closed dialog is display:none -
   an unconditional display here would override it). */
.rm-qv-dialog[open] {
    display: flex;
    flex-direction: column;
}

.rm-qv-dialog::backdrop {
    background: rgba(17, 24, 39, .55);
}

/* No showModal() support: the same sheet as a plain fixed overlay above the
   Sticky Cart (z-index 90000), the backdrop drawn by a spread shadow. */
.rm-qv-dialog.rm-qv-fallback {
    z-index: 100000;
    box-shadow: 0 0 0 100vmax rgba(17, 24, 39, .55), 0 -20px 60px rgba(0, 0, 0, .25);
}

/* Sticky header (docs/QUICK_VIEW.md "Header"): product title left, close
 * action right, always reachable regardless of how far the body below has
 * scrolled - a flex sibling of .rm-qv-scroll, never inside it. The close
 * button itself is styled in ui.css. */
.rm-qv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid var(--rm-border, #e5e7eb);
    flex: 0 0 auto;
}

.rm-qv-header-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-qv-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 24px 24px;
    flex: 1 1 auto;
    min-height: 0;
}

.rm-qv-loading {
    padding: 8px 0 0;
}

.rm-qv-load-error {
    padding: 48px 24px;
    text-align: center;
    color: var(--rm-danger, #b91c1c);
}

/* Loading skeleton (quick-view.js skeletonHtml()) - shown while an uncached
 * product loads; never a blank white panel. The pulse is in ui.css. */
.rm-qv-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rm-qv-skeleton-block {
    display: block;
    height: 14px;
    border-radius: 6px;
    background: #e2e6ec;
}

/* The skeleton's image block and the real image share one height, so swapping the content in does not move the sheet's top edge. */
.rm-qv-skeleton-image { height: var(--rm-qv-image-height); border-radius: 8px; }
.rm-qv-skeleton-w50 { width: 50%; height: 18px; }
.rm-qv-skeleton-w80 { width: 80%; }
.rm-qv-skeleton-w70 { width: 70%; }
.rm-qv-skeleton-option { height: 56px; border-radius: 8px; }
.rm-qv-skeleton-action { height: 48px; border-radius: 8px; margin-top: 8px; }

.rm-qv-load-error[hidden],
.rm-qv-loading[hidden] {
    display: none;
}

/* A fixed-height box (the picture is cropped to it, as it already was above the old 280px cap), so a late-decoding image only fills
   it and never moves the sheet. */
.rm-qv-image {
    display: block;
    width: 100%;
    height: var(--rm-qv-image-height);
    object-fit: cover;
    border-radius: var(--rm-radius, 8px);
    margin: 0 0 16px;
}

.rm-qv-price {
    font-weight: 600;
    margin: 0 0 12px;
}

.rm-qv-description {
    margin: 0 0 16px;
    opacity: .85;
}

.rm-qv-description p:first-child {
    margin-top: 0;
}

.rm-qv-description p:last-child {
    margin-bottom: 0;
}

.rm-qv-unavailable {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--rm-radius, 8px);
    background: var(--rm-danger-tint, #fef2f2);
    color: var(--rm-danger, #b91c1c);
    font-weight: 600;
}

.rm-qv-variations-form {
    margin: 0 0 16px;
}

.rm-qv-variations {
    width: 100%;
    border-collapse: collapse;
}

.rm-qv-variations td {
    padding: 6px 0;
    vertical-align: middle;
}

.rm-qv-variations td.label {
    padding-right: 12px;
    white-space: nowrap;
    font-weight: 600;
}

/* Scoped to the dialog so a theme's own select styling cannot restyle it; the
   border meets 3:1 against the sheet (WCAG 1.4.11) and the focus ring is the
   shared focus token. */
.rm-qv-dialog .rm-qv-variations select {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 8px 10px;
    border: 1px solid var(--rm-border-strong, #8b93a1);
    border-radius: 6px;
    background-color: var(--rm-surface, #ffffff);
    color: var(--rm-text, #1f2933);
    font: inherit;
}

.rm-qv-dialog .rm-qv-variations select:focus-visible {
    outline: 2px solid var(--rm-focus, #2563eb);
    outline-offset: 1px;
}

/* Why Add to Cart stopped, directly under the selectors (quick-view.js
   showVariationMessage()); text plus the red frame, never color alone. */
.rm-qv-variation-message {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--rm-danger, #b91c1c);
    border-radius: 4px;
    background: var(--rm-danger-tint, #fef2f2);
    color: var(--rm-danger, #b91c1c);
    font-size: .9em;
}

.rm-qv-variation-message[hidden] {
    display: none;
}

.rm-qv-dialog .rm-qv-variations select[aria-invalid="true"] {
    border-color: var(--rm-danger, #b91c1c);
}

/* -----------------------------------------------------------------------
 * "Global Options display" = Collapsed (quick-view.js enhanceOptionGroups()):
 * the whole group header is one real button (aria-expanded), + closed and
 * minus open. Hardened against theme button rules like every RM overlay
 * control; scoped to Quick View only.
 * --------------------------------------------------------------------- */
.rm-qv-dialog .rm-go-frontend--collapsible .rm-go-frontend-option {
    padding: 0;
}

.rm-qv-dialog .rm-go-frontend--collapsible .rm-go-frontend-option-label {
    margin: 0;
}

.rm-qv-dialog .rm-go-frontend-toggle {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--rm-text, #1f2933) !important;
    font: inherit;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-align: left;
    text-transform: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rm-qv-dialog .rm-go-frontend-toggle:hover {
    background: rgba(0, 0, 0, .03) !important;
}

.rm-qv-dialog .rm-go-frontend-toggle:focus-visible {
    outline: 2px solid var(--rm-focus, #2563eb) !important;
    outline-offset: -2px;
}

.rm-qv-dialog .rm-go-frontend-toggle-icon {
    margin-left: auto;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1;
}

.rm-qv-dialog .rm-go-frontend-toggle[aria-expanded="false"] .rm-go-frontend-toggle-icon::before {
    content: "+";
}

.rm-qv-dialog .rm-go-frontend-toggle[aria-expanded="true"] .rm-go-frontend-toggle-icon::before {
    content: "\2212";
}

.rm-qv-dialog .rm-go-frontend-option-body {
    padding: 0 14px 12px;
}

.rm-qv-dialog .rm-go-frontend-option-body[hidden] {
    display: none;
}

.rm-qv-single-variation:empty {
    display: none;
}

.rm-qv-single-variation {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f9fafb;
}

.rm-qv-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

/* The [-] and [+] buttons are shared with the Mini Cart (ui.css). The number
   field is Quick View's own: pinned against theme input rules, its border meets
   3:1 and it has a visible focus ring. */
.rm-qv-dialog .rm-qv-qty-input {
    box-sizing: border-box !important;
    width: 56px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center;
    border: 1px solid var(--rm-border-strong, #8b93a1) !important;
    border-radius: 8px !important;
    background: var(--rm-surface, #ffffff) !important;
    color: var(--rm-text, #1f2933) !important;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

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

/* The action area is part of the normal content flow (docs/QUICK_VIEW.md "Scroll /
 * action structure"): product, options, note, allergens, quantity, total, then
 * Add to cart, reached by scrolling the one scroll body. Nothing is fixed or
 * sticky, so it can never cover the last options; only the safe-area inset is kept
 * so the button clears a phone's home indicator. */
.rm-qv-actions {
    margin: 16px 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
}

.rm-qv-error {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--rm-danger-tint, #fef2f2);
    color: var(--rm-danger, #b91c1c);
}

.rm-qv-error[hidden] {
    display: none;
}

/* Colours and states are shared with the other primary buttons (ui.css). */
.rm-qv-dialog .rm-qv-add-to-cart {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    border-radius: var(--rm-radius, 8px) !important;
    font-size: 1em !important;
    line-height: 1.2 !important;
}

/* Mobile: the same bottom-anchored sheet grows to near-full-screen so a
 * long Global Options configuration has real room, per docs/QUICK_VIEW.md
 * "Layout" - not a different structure, just a taller sheet.
 *
 * Height is measured against the VISIBLE viewport (dvh), capped by the
 * viewport the fixed sheet sits in: 94vh alone is taller than the visible
 * area while mobile browser chrome is showing, which pushed the header
 * (close X) above the top edge. The 94vh line stays as the fallback for
 * browsers without dvh/min() support. */
@media (max-width: 640px) {
    .rm-qv-dialog {
        width: 100%;
        max-height: 94vh;
        max-height: min(94dvh, calc(100% - 12px));
        border-radius: 16px 16px 0 0;
    }

    /* Compact Global Options in the mobile sheet (live review: too much
       vertical space). Only the spacing around the content tightens - each
       choice row keeps a ~44px tap target. Quick View only; the product
       page keeps frontend.css as is. */
    .rm-qv-dialog .rm-go-frontend {
        gap: 8px;
        margin: 12px 0;
    }

    .rm-qv-dialog .rm-go-frontend-option {
        padding: 10px 12px;
    }

    .rm-qv-dialog .rm-go-frontend-option-label {
        margin-bottom: 6px;
    }

    .rm-qv-dialog .rm-go-frontend-choices {
        gap: 4px;
    }

    .rm-qv-dialog .rm-go-frontend-choice label {
        box-sizing: border-box;
        min-height: 44px;
        padding: 8px 10px;
    }

    .rm-qv-dialog .rm-go-frontend-choice input[type="checkbox"],
    .rm-qv-dialog .rm-go-frontend-choice input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    /* About two lines until the customer types; still resizable. */
    .rm-qv-dialog .rm-go-frontend-textarea {
        min-height: 60px;
        height: 60px;
        padding: 8px 10px;
        resize: vertical;
    }

    .rm-qv-dialog .rm-go-frontend-message {
        margin-top: 6px;
    }

    .rm-qv-dialog .rm-go-frontend-toggle {
        padding: 10px 12px !important;
    }

    .rm-qv-dialog .rm-go-frontend-option-body {
        padding: 0 12px 10px;
    }
}

/* Touch: the form controls grow to a 44px target (the [-]/[+] buttons do the
   same in ui.css). */
@media (pointer: coarse) {
    .rm-qv-dialog .rm-qv-qty-input {
        height: 44px !important;
        min-height: 44px !important;
    }

    .rm-qv-dialog .rm-qv-variations select {
        min-height: 44px;
    }
}

/* Restrained slide-up/slide-down only - no animation library
 * (docs/QUICK_VIEW.md "Open/close motion"). Respects prefers-reduced-
 * motion: with motion unwanted quick-view.js never adds these classes and
 * the dialog simply appears/disappears. */
@media (prefers-reduced-motion: no-preference) {
    .rm-qv-dialog {
        transition: transform .18s ease-out;
    }

    .rm-qv-dialog.rm-qv-entering,
    .rm-qv-dialog.rm-qv-leaving {
        transform: translateY(100%);
    }
}