/*
 * Inspira Woo Add-ons · Product Video
 * v0.5.37 — Trigger button, loop indicator, modal.
 */

/* ─── Single-product summary button ───────────────────────────────
   Rendered directly into the summary column by
   render_single_button() at priority 36 of
   woocommerce_single_product_summary. Sits below Contact Channels
   (priority 30 with Bookings / 35 without) so it lands cleanly at
   the end of the buttons row.

   Option B (solid) button per Frick's spec, since this app runs on
   multiple types of websites.
*/
.iwa-product-video-trigger-wrap {
    margin: 14px 0 4px;
}
.iwa-product-video-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--iwa-pv-btn-bg, #14130F);
    color: var(--iwa-pv-btn-fg, #FFFFFF);
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
    line-height: 1.2;
}
.iwa-product-video-trigger:hover,
.iwa-product-video-trigger:focus-visible {
    opacity: 0.9;
    transform: translateY(-1px);
    outline: none;
}
.iwa-product-video-trigger-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ─── Shop loop marker (server-emitted, JS safety net consumes) ────
   PHP emits <span class="iwa-pv-loop-marker" data-iwa-video-url="X">
   inside each li.product for products with videos. Read by
   product-video.js when the primary PHP filter path doesn't land the
   icon inside .iwa-relocated-frame. Never renders itself. */
.iwa-pv-loop-marker {
    display: none !important;
}

/* ─── Shop loop clickable icon (inside relocated frame) ────────────
   PHP filter render_loop_icon_in_wrap() appends this icon INSIDE the
   image wrap (QV wrap if QV is on, Wishlist wrap if only WL is on,
   our own .iwa-product-video-loop-wrap fallback otherwise).
   card-opacity-escape.js relocates it into .iwa-relocated-frame at
   li.product level — same treatment QV + Wishlist get.
   Position rules below use body classes set by add_body_class() so
   admin can pick center-right or center-left, and stack when QV /
   Wishlist share the corner.
*/
.iwa-product-video-trigger--card {
    position: absolute;
    /* z-index 150 matches Quick View's trigger (works reliably across
       themes). Was 4 in v0.5.42 which risked being occluded by any
       theme card element with a higher z-index. */
    z-index: 150;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--iwa-pv-trigger-bg, #14130F);
    color: var(--iwa-pv-trigger-fg, #FFFFFF);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    transition: transform 0.15s ease, opacity 0.15s ease;
    /* Match QV / Wishlist card triggers' subtle shadow */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.iwa-product-video-trigger--card:hover,
.iwa-product-video-trigger--card:focus-visible {
    transform: scale(1.08);
    outline: none;
}
.iwa-product-video-trigger--card svg {
    /* Filled play triangle has an off-center optical center — nudge
       right by 1px so it visually centers inside the circle. */
    transform: translateX(1px);
}

/* Fallback wrap when QV is NOT active — we create our own image
   wrap so card-opacity-escape.js can still find the trigger.
   Registered in that JS's WRAP_SELECTORS list. */
.iwa-product-video-loop-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* ─── Position (center + horizontal) ───────────────────────────────
   PHP adds body classes (iwa-pv-pos-center + iwa-pv-pos-{right|left})
   from the saved setting. --iwa-pv-offset is published at :root by
   print_root_css_vars(), matching the QV / WL offset pattern.        */

body.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-center li.product > .iwa-product-video-trigger--card,
body.iwa-pv-pos-center .product-block > .iwa-product-video-trigger--card,
body.iwa-pv-pos-center .product-card > .iwa-product-video-trigger--card {
    top: 50%;
    transform: translateY(-50%);
}
body.iwa-pv-pos-right .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-pos-right .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-pos-right .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-right .iwa-product-video-loop-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-right li.product > .iwa-product-video-trigger--card,
body.iwa-pv-pos-right .product-block > .iwa-product-video-trigger--card,
body.iwa-pv-pos-right .product-card > .iwa-product-video-trigger--card {
    right: var(--iwa-pv-offset, 10px);
    left: auto;
}
body.iwa-pv-pos-left .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-pos-left .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-pos-left .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-left .iwa-product-video-loop-wrap .iwa-product-video-trigger--card,
body.iwa-pv-pos-left li.product > .iwa-product-video-trigger--card,
body.iwa-pv-pos-left .product-block > .iwa-product-video-trigger--card,
body.iwa-pv-pos-left .product-card > .iwa-product-video-trigger--card {
    left: var(--iwa-pv-offset, 10px);
    right: auto;
}

/* Preserve the scale hover — combine with translateY(-50%) so the
   nudge stays but scales together. Must come AFTER the pos-center
   rule to win specificity. */
body.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center li.product > .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center li.product > .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center .product-block > .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .product-block > .iwa-product-video-trigger--card:focus-visible,
body.iwa-pv-pos-center .product-card > .iwa-product-video-trigger--card:hover,
body.iwa-pv-pos-center .product-card > .iwa-product-video-trigger--card:focus-visible {
    transform: translateY(-50%) scale(1.08);
}

/* ─── Stack detection (respect zone) ───────────────────────────────
   When QV or Wishlist shares my corner, offset me by 40px so we
   don't overlap. Two collisions = 80px offset (both stack classes
   apply, additive). Body classes:
     iwa-pv-stack-with-qv  = QV is at center + same horizontal
     iwa-pv-stack-with-wl  = Wishlist is at center + same horizontal
*/
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card {
    top: calc(50% + 40px);
}
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card:hover,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card:hover,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card:hover,
body.iwa-pv-stack-with-qv.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card:hover {
    transform: translateY(-50%) scale(1.08);
}

body.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card {
    top: calc(50% + 40px);
}
/* When BOTH QV + Wishlist collide — 80px offset. This rule wins by
   specificity (two stack classes). */
body.iwa-pv-stack-with-qv.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-relocated-frame .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-qv-image-wrap    .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-wishlist-image-wrap .iwa-product-video-trigger--card,
body.iwa-pv-stack-with-qv.iwa-pv-stack-with-wl.iwa-pv-pos-center .iwa-product-video-loop-wrap .iwa-product-video-trigger--card {
    top: calc(50% + 80px);
}

/* ─── Quick View title-row icon (same button, in QV summary) ───────
   Icon renders inside .iwa-qv-title-row via Quick_View::render_body
   calling icon_ref_html(). Not absolutely positioned here — inline
   flex layout with the title. Reset the absolute positioning that
   the .iwa-product-video-trigger--card base rule applies. */
.iwa-qv-title-row .iwa-product-video-trigger--card {
    position: static;
    width: 24px;
    height: 24px;
    box-shadow: none;
    vertical-align: middle;
    margin-left: 6px;
}
.iwa-qv-title-row .iwa-product-video-trigger--card:hover,
.iwa-qv-title-row .iwa-product-video-trigger--card:focus-visible {
    transform: scale(1.08); /* no translateY reset needed — position is static */
}

/* ─── Modal ────────────────────────────────────────────────────────
   Full-viewport backdrop + centered card containing the video.
   z-index MUST sit above Quick View's drawer (2147483000) so opening
   the video modal from inside QV puts video on top without
   dismissing the QV drawer. Backdrop one below the card so backdrop-
   click closes the modal cleanly.
*/
.iwa-product-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.iwa-product-video-modal[hidden] { display: none; }
.iwa-product-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
    /* Soft blur for premium feel — matches drawer aesthetic in QV. */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.iwa-product-video-modal-card {
    position: relative;
    z-index: 1;
    background: #000000;
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.iwa-product-video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 0;
}
.iwa-product-video-modal-close:hover,
.iwa-product-video-modal-close:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    outline: none;
}
.iwa-product-video-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Aspect-ratio friendly — video fits inside without cropping. */
    background: #000000;
}
.iwa-product-video-modal-body video {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    outline: none;
}

/* ─── Mobile responsive ────────────────────────────────────────────
   Below 640px: modal takes full viewport minus small padding,
   close button slightly bigger for touch targets.
*/
@media (max-width: 640px) {
    .iwa-product-video-modal {
        padding: 8px;
    }
    .iwa-product-video-modal-close {
        width: 40px;
        height: 40px;
        top: 8px;
        right: 8px;
    }
    .iwa-product-video-trigger {
        width: 100%;
        max-width: 340px;
    }
}

/* ─── Reduced motion ───────────────────────────────────────────────
   Kill button transforms + modal backdrop blur when the user opts
   out of motion.
*/
@media (prefers-reduced-motion: reduce) {
    .iwa-product-video-trigger,
    .iwa-product-video-modal-close {
        transition: none;
    }
    .iwa-product-video-trigger:hover,
    .iwa-product-video-trigger:focus-visible {
        transform: none;
    }
    .iwa-product-video-modal-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}