/*
 * WooCommerce Product Video — Frontend Styles
 * v1.2.0 — with mobile optimisation
 */

/* ── Core wrapper ──────────────────────────────────────────────────────── */
.wcpv-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* aspect-ratio injected inline per product */
    background: #0a0a0a;
    border-radius: 12px;
    display: block;
    /* GPU-composited layer improves scroll performance on mobile */
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.wcpv-video iframe,
.wcpv-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    /* Ensure <video> fills without black bars */
    object-fit: cover;
    object-position: center;
}

/* ── Portrait videos (Shorts / Reels): constrain & centre ─────────────── */
.wcpv-video[data-video-type="youtube_shorts"],
.wcpv-video[data-video-type="instagram"] {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Cover mode: fills its container like a CSS background-video ───────── */
.wcpv-video.wcpv-cover {
    border-radius: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.wcpv-video.wcpv-cover iframe,
.wcpv-video.wcpv-cover video {
    object-fit: cover;
}

/* ── Dark placeholder shown before iframe loads ────────────────────────── */
.wcpv-video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, #111827 0%, #1f2937 60%, #0f172a 100%);
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: inherit;
}

.wcpv-video.is-loaded::before {
    opacity: 0;
}

/* ── Animated loading spinner ──────────────────────────────────────────── */
.wcpv-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: wcpv-spin 0.8s linear infinite;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.wcpv-video.is-loaded .wcpv-spinner {
    opacity: 0;
}

@keyframes wcpv-spin {
    to { transform: rotate(360deg); }
}

/* ── Platform badge ────────────────────────────────────────────────────── */
.wcpv-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* YouTube / Shorts — red */
.wcpv-video[data-video-type="youtube"] .wcpv-badge,
.wcpv-video[data-video-type="youtube_shorts"] .wcpv-badge {
    background: #ff0000;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
}

/* Instagram — gradient */
.wcpv-video[data-video-type="instagram"] .wcpv-badge {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    box-shadow: 0 2px 8px rgba(188, 24, 136, 0.4);
}

/* Vimeo — teal */
.wcpv-video[data-video-type="vimeo"] .wcpv-badge {
    background: #1ab7ea;
    box-shadow: 0 2px 8px rgba(26, 183, 234, 0.4);
}

/* ── Elementor context ─────────────────────────────────────────────────── */
.elementor-widget-html .wcpv-video {
    margin-bottom: 0;
}

/* ── Tablet (≤ 768 px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /*
     * If a mobile aspect-ratio override was set via --wcpv-ar-mobile,
     * apply it. This custom property is injected inline by wcpv_embed().
     */
    .wcpv-video[style*="--wcpv-ar-mobile"] {
        aspect-ratio: var(--wcpv-ar-mobile) !important;
    }

    /* Portrait videos: allow full width on tablet */
    .wcpv-video[data-video-type="youtube_shorts"],
    .wcpv-video[data-video-type="instagram"] {
        max-width: 420px;
    }

    /* Slightly smaller border-radius on smaller screens */
    .wcpv-video {
        border-radius: 8px;
    }

    /* Shrink spinner proportionally */
    .wcpv-spinner {
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
    }
}

/* ── Mobile (≤ 480 px) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Full-width portrait videos on small phones */
    .wcpv-video[data-video-type="youtube_shorts"],
    .wcpv-video[data-video-type="instagram"] {
        max-width: 100%;
    }

    .wcpv-video {
        border-radius: 6px;
    }

    /* Larger tap target for the badge */
    .wcpv-badge {
        font-size: 9px;
        padding: 5px 10px;
        top: 8px;
        left: 8px;
    }
}

/* ── iOS Safari: fix tap-to-play overlay in inline video ───────────────── */
.wcpv-video video::-webkit-media-controls-play-button {
    display: none;
}

/* Prevent iOS from forcing its own full-screen on tap */
.wcpv-video video {
    -webkit-playsinline: true;
}