/**
 * Copyright © 2025 AQELTech. All rights reserved.
 * Review Lightbox + media/badge/response polish for the Breeze theme.
 *
 * Organic v4.3 re-skin (2026-07): the lightbox root (#review-lightbox,
 * rendered once page-level by reviews/lightbox.phtml, NOT nested inside
 * .aqeltech-unifiedreviews) and the per-card photo rail
 * (.review-card__media*, real markup emitted by product/view/_card.phtml)
 * pick up the same Organic palette/radius language as unified-reviews.css.
 * Colours are literal hex/rgba here (not var(--aqr-*)) because this root can
 * render outside that block's DOM subtree, so the custom properties declared
 * on .aqeltech-unifiedreviews would not reliably cascade to it.
 *
 * Wave 5, Part 2 - media build: adds the review sidebar panel (desktop
 * side-by-side, mobile stacked) and inline video playback, AND fixes two
 * stale-colour findings from the design pass that predate this file's own
 * Organic re-skin comment above (the re-skin covered the media-thumbnail
 * block below but missed these two):
 *   - .review-lightbox__close/-prev/-next :hover/:focus-visible hardcoded
 *     the pre-Fix-1 stale mustard shade -> now --aqr-accent-dark (#013f6a).
 *   - .review-lightbox__caption hardcoded a stale cream shade with no token
 *     equivalent -> now an on-token light literal (#eaf1f8, matching
 *     --aqr-page) for contrast against the dark backdrop/stage, the same
 *     family the close/prev/next glyphs' white already reads against.
 *
 * review-lightbox.js's DOM contract (#review-lightbox,
 * .review-lightbox__image, #review-lightbox-caption,
 * .review-lightbox__close/-prev/-next, [data-review-photo]) is UNCHANGED -
 * the root stays the SAME fixed, full-viewport, click-outside-closes
 * backdrop it always was; .review-lightbox__stage/-sidebar are its two flex
 * children (row on desktop, column on mobile), not a second wrapper level,
 * so no existing JS assumption about the root's role breaks.
 */

.review-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 32, 0.82);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem;
}

.review-lightbox__stage {
    position: relative;
    flex: 1 1 60%;
    min-width: 0;
    max-width: 640px;
    aspect-ratio: 4 / 3;
    background: #0c1724;
    border-radius: 20px 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}

.review-lightbox__image,
.review-lightbox__video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.review-lightbox__image[hidden],
.review-lightbox__video[hidden] {
    display: none;
}

/* Modern: scope chip + counter share one top-left row (see lightbox.phtml /
   review-lightbox.js). Chip is a bordered navy pill; the counter is plain
   white text ("N of M · video") beside it. */
.review-lightbox__topbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 96px);
}
.review-lightbox__scope {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(12, 23, 36, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 5px 13px;
    white-space: nowrap;
}
.review-lightbox__scope[hidden] { display: none; }
.review-lightbox__count {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(10, 20, 32, 0.7);
}

.review-lightbox__close,
.review-lightbox__prev,
.review-lightbox__next {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s cubic-bezier(.16, 1, .3, 1);
}

.review-lightbox__close:hover,
.review-lightbox__close:focus-visible,
.review-lightbox__prev:hover,
.review-lightbox__prev:focus-visible,
.review-lightbox__next:hover,
.review-lightbox__next:focus-visible {
    /* corrected - was the stale pre-Fix-1 mustard shade; now the same navy
       --aqr-accent-dark literal the pager pill / guest CTA hover already use. */
    background: #013f6a;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.review-lightbox__close { top: 10px; right: 10px; }
.review-lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.review-lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }

.review-lightbox__video-cta {
    /* Wave 5, Part 2 bug fix (found live via Playwright): this was
       `position: relative`, which made it a NORMAL-FLOW flex item competing
       for space with the (width:100%/height:100%) <video> inside
       .review-lightbox__stage's flex row instead of overlaying centered on
       top of it - the resulting layout let .review-lightbox__next's
       absolutely-positioned hit area intercept clicks meant for this
       button. `position: absolute` + an explicit centering transform takes
       it out of flex flow entirely, overlaid on the video, matching every
       other stage control's own absolute-positioning convention. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1a3350;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(10, 20, 32, 0.5);
    cursor: pointer;
    border: 0;
}
.review-lightbox__video-cta svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.review-lightbox__video-cta[hidden] { display: none; }

.review-lightbox__video-tag {
    position: absolute;
    top: 12px;
    right: 56px;
    z-index: 2;
    background: #e3a008;
    color: #1a3350;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.review-lightbox__video-tag[hidden] { display: none; }

.review-lightbox__video-duration {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(10, 20, 32, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.review-lightbox__video-duration[hidden] { display: none; }

.review-lightbox__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    color: #eaf1f8;
    background: linear-gradient(to top, rgba(10, 20, 32, .55), transparent);
    font-family: inherit;
    padding: 28px 16px 10px;
    text-align: center;
    font-size: 13px;
    pointer-events: none;
}
.review-lightbox__caption:empty { display: none; }

/* ── Modern: bottom filmstrip of the ACTIVE scope's media ─────────────────
   Absolute strip pinned to the stage bottom; the stage reserves space for it
   (padding-bottom) and the prev/next/caption shift up only when it is shown
   (.review-lightbox--has-strip, toggled by review-lightbox.js when a scope has
   >1 item). Thumbs are DOM-built with the lightbox-own [data-role] contract. */
.review-lightbox__filmstrip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    overflow-x: auto;
    background: linear-gradient(to top, rgba(6, 12, 20, 0.92), rgba(6, 12, 20, 0.72));
    scrollbar-width: thin;
}
.review-lightbox__filmstrip[hidden] { display: none; }
.review-lightbox--has-strip .review-lightbox__stage { padding-bottom: 72px; }
.review-lightbox--has-strip .review-lightbox__prev,
.review-lightbox--has-strip .review-lightbox__next { top: calc(50% - 36px); }
.review-lightbox--has-strip .review-lightbox__caption { bottom: 72px; }

.review-lightbox__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #17273a;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.16s cubic-bezier(.16, 1, .3, 1), border-color 0.16s cubic-bezier(.16, 1, .3, 1);
}
.review-lightbox__thumb:hover,
.review-lightbox__thumb:focus-visible { opacity: 1; outline: none; }
.review-lightbox__thumb:focus-visible { border-color: #fff; }
.review-lightbox__thumb--active { border-color: #e3a008; opacity: 1; }
.review-lightbox__thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-lightbox__thumb-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.review-lightbox__thumb-play::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
    margin-left: 1px;
}
.review-lightbox__thumb-dur {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: rgba(10, 20, 32, 0.8);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 3px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.review-lightbox__thumb-dur:empty { display: none; }

/* ── Sidebar (Wave 5, Part 2) - the review the open media belongs to.
   Literal hex re-declarations of the real card-person/meta-row/stars/
   verified/title/body/recommendation/vote classes (same reasoning as the
   rest of this file: var(--aqr-*) does not cascade here) so
   review-lightbox.js can reuse the EXACT SAME class names/markup shape
   _card.phtml already renders, staying visually consistent by
   construction rather than duplicated ad hoc styling. ─────────────────── */
.review-lightbox__sidebar {
    flex: 1 1 40%;
    min-width: 0;
    max-width: 360px;
    max-height: min(80vh, 560px);
    overflow-y: auto;
    background: #f4f6fa;
    border-radius: 0 20px 20px 0;
    padding: 1.5rem 1.5rem 1.3rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
}
.review-lightbox__sidebar[hidden] { display: none; }

.review-lightbox__sidebar .aqeltech-unifiedreviews__card-person {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-avatar {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(1, 78, 131, .10);
    color: #014e83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: inherit;
    flex: 0 0 auto;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-author { margin: 0; font-weight: 700; color: #1a3350; font-size: .95rem; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-date { margin: 0; color: #53667e; font-size: .76rem; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-meta-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .55rem;
    flex-wrap: wrap;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-stars { color: #e3a008; letter-spacing: .1em; font-size: .95rem; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-verified {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #e7f4ed;
    color: #0e7a52;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    margin: 0;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-verified[hidden] { display: none; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-title { font-size: 1.05rem; margin: .2rem 0 .35rem; color: #1a3350; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-body { color: #40536b; font-size: .92rem; margin: 0 0 .7rem; overflow-wrap: anywhere; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-recommendation { color: #0e7a52; font-weight: 700; font-size: .85rem; margin: 0 0 .8rem; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-recommendation[hidden] { display: none; }

.review-lightbox__sidebar-foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid #e2e8f1; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-vote {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1.5px solid #014e83;
    color: #014e83;
    font-weight: 700;
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    cursor: pointer;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-vote--voted {
    background: #014e83;
    color: #fff;
}
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-vote[disabled] { cursor: not-allowed; opacity: .65; }
.review-lightbox__sidebar .aqeltech-unifiedreviews__card-vote-n { font-variant-numeric: tabular-nums; }

body.review-lightbox-open { overflow: hidden; }

[data-review-photo],
[data-review-video] { cursor: zoom-in; }

/* ── Responsive: stack stage above sidebar on narrow viewports ────────── */
@media (max-width: 640px) {
    .review-lightbox { flex-direction: column; padding: 1rem; }
    .review-lightbox__stage {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 11;
        border-radius: 20px 20px 0 0;
    }
    .review-lightbox__sidebar {
        max-width: 100%;
        width: 100%;
        max-height: 40vh;
        border-radius: 0 0 20px 20px;
        padding: 1.2rem 1.2rem 1.4rem;
    }
}

/* --- Provider badges (step 57) --- */
.review-card__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}

.review-card__badge svg,
.review-card__badge img {
    height: 16px;
    width: auto;
}

/* --- Media thumbnails (step 76, re-tokenized): real per-card photo rail
   shared by the PDP card template (_card.phtml) and reviews/listing.phtml.
   Organic re-skin - small fixed-size rounded thumbs (--aqr-radius-thumb) in
   a tidy row + hover lift, same navy-tinted shadow language as
   unified-reviews.css's card hover. Unlike the lightbox root above, this
   markup is a genuine DESCENDANT of .aqeltech-unifiedreviews (emitted
   in-place by _card.phtml / _gallery.phtml, not appended elsewhere), so
   var(--aqr-*) DOES reliably cascade here - colours below are real token
   references, not the literal hex the lightbox root needs. */
.review-card__media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

/* Wave 6 bug fix: FIXED SQUARE (not a rectangle) so any source aspect
   ratio - including review 45549's 1280x4774 tall PNG - crops via
   object-fit:cover (below) to a tidy square instead of a lopsided
   rectangle or, pre-Fix-4, an unclamped full-height block. */
.review-card__media-button {
    width: 86px;
    height: 86px;
    padding: 0;
    border: 1px solid var(--aqr-line);
    border-radius: var(--aqr-radius-thumb);
    background: var(--aqr-surface);
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
    transition: transform 0.16s cubic-bezier(.16, 1, .3, 1), border-color 0.16s cubic-bezier(.16, 1, .3, 1), box-shadow 0.16s cubic-bezier(.16, 1, .3, 1);
}

.review-card__media-button:hover {
    transform: translateY(-2px);
    border-color: var(--aqr-line-2);
    box-shadow: var(--aqr-shadow);
}

.review-card__media-button:focus-visible {
    outline: 2px solid var(--aqr-accent);
    outline-offset: 2px;
}

.review-card__media-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    display: block;
}

/* Video play-badge overlay + duration pill (Wave 5, Part 2) - shared by the
   card rail AND the gallery-above section (same button contract, see
   _card.phtml / _gallery.phtml), so scoped generically rather than
   duplicated per context. Navy fill, never gold - the play glyph has no
   adjacent text of its own, same fill-safety rule already applied to the
   lightbox's own prev/next/close controls and the pager/CTA buttons
   (--aqr-accent-strong gold fails contrast for a filled circle + white
   icon with no text equivalent). */
.media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.media-play__c {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aqr-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(10, 20, 32, .4);
}
.media-play__c svg { width: 8px; height: 8px; fill: #fff; margin-left: 1px; }
.media-duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(10, 20, 32, .72);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Gallery-above section's larger thumbnail variant (130x130 vs the card
   rail's 86x86) - a scoped override, same pattern the mockup documents.
   Wave 6 bug fix: was a 104x80 RECTANGLE; now a FIXED SQUARE, same
   object-fit:cover crop rule as the card rail above. Density pass (fidelity
   fix #2): enlarged from 96px to match the mockup's measured ~130px tile. */
.aqeltech-unifiedreviews__gallery-row .review-card__media-button {
    /* Round-3 fidelity fix #4: nudged 130px -> 133px to match Codex's
       re-measurement of the mockup tile. */
    width: 133px;
    height: 133px;
}
.aqeltech-unifiedreviews__gallery-row .media-play__c { width: 30px; height: 30px; }
.aqeltech-unifiedreviews__gallery-row .media-play__c svg { width: 11px; height: 11px; margin-left: 2px; }
.aqeltech-unifiedreviews__gallery-row .media-duration { font-size: 9.5px; padding: 1px 6px; right: 6px; bottom: 6px; }

/* --- Merchant response (step 80) --- */
.review-card__response {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-left: 3px solid #1979c3;
    border-radius: 4px;
}

.review-card__response-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.95em;
}

.review-card__response-date {
    color: #666;
    font-size: 0.85em;
}

.review-card__response-body {
    color: #333;
    line-height: 1.5;
    white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
    .review-lightbox__close,
    .review-lightbox__prev,
    .review-lightbox__next,
    .review-card__media-button {
        transition: none;
    }
}