/* ReelVault - Frontend CSS v2.1 */

/* ══════════════════════════════════════════════════════
   FULL-SCREEN PAGE — hide header/footer, keep bottom nav
   ══════════════════════════════════════════════════════ */
body.rv-reels-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

/* Hide site header only (Astra + generic themes) */
body.rv-reels-page #masthead,
body.rv-reels-page #site-header,
body.rv-reels-page .site-header,
body.rv-reels-page header.site-header,
body.rv-reels-page .ast-site-header-wrap,
body.rv-reels-page #ast-desktop-header,
body.rv-reels-page #ast-mobile-header,
body.rv-reels-page .main-header-bar,
body.rv-reels-page .main-header-bar-wrap,
body.rv-reels-page #header,
body.rv-reels-page .header-main,
body.rv-reels-page .elementor-location-header,
body.rv-reels-page .wp-block-template-part[class*="header"] {
    display: none !important;
}

/* Hide site footer ONLY (the top-level footer tag / site footer div)
   — does NOT hide the custom bottom nav the user added separately */
body.rv-reels-page #colophon,
body.rv-reels-page footer.site-footer,
body.rv-reels-page .footer-wrap,
body.rv-reels-page .elementor-location-footer {
    display: none !important;
}

/* Hide sidebars */
body.rv-reels-page #secondary,
body.rv-reels-page .widget-area,
body.rv-reels-page aside.sidebar {
    display: none !important;
}

/* Remove page/content wrapper padding */
body.rv-reels-page #page,
body.rv-reels-page #content,
body.rv-reels-page .site-content,
body.rv-reels-page .ast-container,
body.rv-reels-page .content-area,
body.rv-reels-page #primary,
body.rv-reels-page main,
body.rv-reels-page .entry-content,
body.rv-reels-page article,
body.rv-reels-page .post-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}

/* Reels root — full screen, but leave 60px at bottom for the custom nav bar */
body.rv-reels-page .rv-reels-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
}

/* Each reel fills the full container */
body.rv-reels-page .rv-reel {
    height: 100% !important;
}

/* Actions (Like/Save/Share) — anchor to bottom of reel */
body.rv-reels-page .rv-actions {
    bottom: 100px !important;
}

/* Product overlay — sits at very bottom of reel */
body.rv-reels-page .rv-product-overlay {
    bottom: 0 !important;
    padding-bottom: 16px !important;
}

/* WP admin bar offset when logged in */
body.rv-reels-page.admin-bar .rv-reels-root {
    top: 32px !important;
    height: calc(100vh - 32px - 60px) !important;
    height: calc(100dvh - 32px - 60px) !important;
}

@media screen and (max-width: 782px) {
    body.rv-reels-page.admin-bar .rv-reels-root {
        top: 46px !important;
        height: calc(100vh - 46px - 60px) !important;
        height: calc(100dvh - 46px - 60px) !important;
    }
}

/* Toast notification — above the bottom nav */
body.rv-reels-page .rv-toast {
    bottom: 70px !important;
}

/* ── Customizable design tokens (overridden by ReelVault → Customize) ── */
:root {
    --rv-accent:         #A04E95;
    --rv-text-primary:   #ffffff;
    --rv-text-secondary: rgba(255,255,255,0.75);
    --rv-icon-color:     #ffffff;
    --rv-like-color:     #ff4f6d;
    --rv-cart-bg:        transparent;
    --rv-cart-text:      #A04E95;
    --rv-cart-border:    #A04E95;
    --rv-buy-bg:         #A04E95;
    --rv-buy-text:       #ffffff;
    --rv-btn-radius:     10px;
    --rv-btn-font-size:  13px;
    --rv-icon-size:      28px;
    --rv-title-size:     17px;
    --rv-price-size:     20px;
    --rv-desc-size:      12px;
    --rv-font-family:    inherit;
}

/* ── Root container ── */
.rv-reels-root {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
    touch-action: none;
    height: 80vh; /* default (desktop); overridden by media queries below */
}
@media (max-width: 768px) {
    .rv-reels-root { height: calc(var(--vh,1vh)*100 - 60px); height: calc(100dvh - 60px); max-width: 100%; border-radius: 0; }
}
@media (max-width: 380px) {
    .rv-reels-root { height: calc(var(--vh,1vh)*100 - 56px); height: calc(100dvh - 56px); }
}
@media (min-width: 769px) {
    .rv-reels-root { height: 80vh; border-radius: 16px; }
}

/* ── Spinner ── */
.rv-spinner { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:3px solid rgba(255,255,255,0.2);border-top-color:var(--rv-accent);border-radius:50%;animation:rv-spin 0.8s linear infinite; }
@keyframes rv-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ── Track ── */
.rv-track { width:100%;height:100%;display:flex;flex-direction:column;transition:transform 0.32s cubic-bezier(0.22,0.61,0.36,1);will-change:transform; }
.rv-track.dragging { transition:none; }

/* ── Single reel ── */
.rv-reel { width:100%;flex-shrink:0;position:relative;overflow:hidden;background:#111; }
.rv-bgm { display:none; }
@media (max-width: 768px) { .rv-reel { height:calc(var(--vh,1vh)*100 - 60px);height:calc(100dvh - 60px); } }
@media (max-width: 380px) { .rv-reel { height:calc(var(--vh,1vh)*100 - 56px);height:calc(100dvh - 56px); } }
@media (min-width: 769px) { .rv-reel { height:80vh; } }

/* ── Video ── */
.rv-video { width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0; }
.rv-iframe-wrap { position:absolute;inset:0;pointer-events:none; }
.rv-iframe-wrap iframe { width:100%;height:100%;border:0; }

/* ── Gradients ── */
.rv-grad-top { position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,rgba(0,0,0,0.6),transparent);pointer-events:none;z-index:2; }
.rv-grad-bot { position:absolute;bottom:0;left:0;right:0;height:65%;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);pointer-events:none;z-index:2; }

/* ── Top bar ── */
.rv-topbar { position:absolute;top:0;left:0;right:0;z-index:20;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,0.55),transparent); }
.rv-topbar-title { color:var(--rv-text-primary);font-size:17px;font-weight:700;letter-spacing:0.3px; }
.rv-topbar-cart { position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);text-decoration:none; }
.rv-topbar-cart svg { width:20px;height:20px; }
.rv-cart-badge { position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff4f6d;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;display:none;box-shadow:0 0 0 2px rgba(0,0,0,0.35);}
.rv-cart-badge.show { display:block; }
.rv-cart-badge.bump { animation: rv-badge-bump 0.35s ease; }
@keyframes rv-badge-bump { 0%{transform:scale(1);} 35%{transform:scale(1.35);} 100%{transform:scale(1);} }

/* ── Mute btn ── */


/* ── RIGHT ACTION BUTTONS (Like / Save / Share) ── */
.rv-actions {
    position: absolute;
    right: 12px;
    bottom: 200px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
@media (max-width: 768px) { .rv-actions { bottom: 210px; } }

.rv-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    color: var(--rv-icon-color);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.rv-action-btn svg {
    width: var(--rv-icon-size);
    height: var(--rv-icon-size);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
    transition: transform 0.15s;
    stroke: var(--rv-icon-color);
}
.rv-action-btn:active svg { transform: scale(0.82); }
.rv-action-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--rv-icon-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    line-height: 1;
}
/* Liked/saved state always shows in the like accent color, regardless of icon color above */
.rv-like-btn.rv-liked svg { fill: var(--rv-like-color) !important; stroke: var(--rv-like-color) !important; }

/* ── Real wishlist plugin button (YITH/TI), kept functional but invisible.
   Our own heart/bookmark icon is what shoppers see; this just receives a
   programmatic click so the product really lands on the site's wishlist. ── */
.rv-wishlist-real {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
/* Hide the plugin's own floating confirmation/feedback bubbles so they don't
   pop up in a stray spot on screen — ReelVault's own toast already confirms. */
.rv-wishlist-real .yith-wcwl-wishlistaddedbrowse,
.rv-wishlist-real .yith-wcwl-wishlistexistsbrowse,
.rv-wishlist-real .feedback,
.rv-wishlist-real .tinvwl-message,
.rv-wishlist-real .tinv-wishlist-message { display: none !important; }

/* Like animation */
.rv-like-btn.rv-liked svg { animation: rv-heart-pop 0.35s cubic-bezier(.36,.07,.19,.97); }
@keyframes rv-heart-pop {
    0%  { transform: scale(1); }
    40% { transform: scale(1.4); }
    70% { transform: scale(0.9); }
    100%{ transform: scale(1); }
}

/* ── SHARE SHEET ── */
.rv-share-sheet {
    position: absolute;
    bottom: -220px;
    left: 0; right: 0;
    z-index: 50;
    background: rgba(18,18,18,0.97);
    backdrop-filter: blur(20px);
    border-radius: 20px 20px 0 0;
    padding: 12px 20px 28px;
    transition: bottom 0.35s cubic-bezier(0.22,1,0.36,1);
}
.rv-share-sheet.open { bottom: 0; }

/* ── VARIATION SELECTOR SHEET (color/size picker) ── */
.rv-variation-sheet {
    position: absolute;
    bottom: -100%;
    left: 0; right: 0;
    z-index: 60;
    max-height: 78%;
    overflow-y: auto;
    background: rgba(18,18,18,0.97);
    backdrop-filter: blur(20px);
    border-radius: 20px 20px 0 0;
    padding: 12px 20px 28px;
    transition: bottom 0.35s cubic-bezier(0.22,1,0.36,1);
    -webkit-overflow-scrolling: touch;
}
.rv-variation-sheet.open { bottom: 0; }

.rv-var-handle {
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 14px;
}
.rv-var-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 16px;
}
.rv-var-group { margin-bottom: 16px; }
.rv-var-label {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
.rv-var-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rv-var-opt {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rv-var-opt:hover { background: rgba(255,255,255,0.14); }
.rv-var-opt.selected {
    background: #fff;
    color: #111;
    border-color: #fff;
    font-weight: 600;
}
.rv-var-confirm {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rv-var-confirm svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.rv-var-confirm.rv-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.rv-var-view-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    text-decoration: underline;
}

.rv-share-handle {
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    margin: 0 auto 14px;
}
.rv-share-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 16px;
}
.rv-share-options {
    display: flex;
    justify-content: center;
    gap: 24px;
}
.rv-share-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.rv-share-opt:active { transform: scale(0.9); }
.rv-share-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.rv-share-icon svg { width: 26px; height: 26px; }
.rv-share-icon--wa   { background: #25D366; color: #fff; }
.rv-share-icon--wa svg { stroke: none; fill: #fff; }
.rv-share-icon--copy { background: rgba(255,255,255,0.15); color: #fff; }
.rv-share-icon--more { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Progress bar ── */
.rv-progress-wrap {
    position: absolute;
    top: 52px;
    left: 0; right: 0;
    z-index: 20;
    padding: 0 12px;
}
.rv-progress-bar {
    height: 2px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.rv-progress-fill {
    height: 100%;
    background: var(--rv-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.25s linear;
}

/* ── Countdown timer ── */
.rv-countdown {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    background: var(--rv-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    letter-spacing: 0.3px;
    opacity: 0.9;
}

/* ── Product overlay ── */
.rv-product-overlay { position:absolute;bottom:0;left:0;right:72px;z-index:10;padding:10px 14px 80px; }
@media (max-width: 768px) { .rv-product-overlay { padding-bottom:90px; } }
.rv-product-tag { display:inline-block;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,0.18);backdrop-filter:blur(6px);color:var(--rv-text-primary);font-size:10px;font-weight:600;letter-spacing:0.5px;border:0.5px solid rgba(255,255,255,0.35);margin-bottom:7px; }
.rv-product-name { color:var(--rv-text-primary);font-size:var(--rv-title-size);font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,0.5);margin-bottom:4px;line-height:1.3; }
.rv-product-desc { color:var(--rv-text-secondary);font-size:var(--rv-desc-size);margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.rv-price-row { display:flex;align-items:center;gap:7px;margin-bottom:6px; }
.rv-price     { color:var(--rv-text-primary);font-size:var(--rv-price-size);font-weight:800; }
.rv-price-og  { color:var(--rv-text-secondary);font-size:13px;text-decoration:line-through; }
.rv-discount  { background:var(--rv-accent);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px; }
.rv-rating    { color:var(--rv-text-secondary);font-size:11px;margin-bottom:10px; }
.rv-out-stock { color:#ff6b6b;font-size:12px;margin-bottom:8px;font-weight:600; }
.rv-no-product { color:var(--rv-text-secondary);font-size:12px;text-align:center;padding:10px 0; }

/* ── CTA buttons ── */
#rv-reels-root .rv-cta-row { display:flex!important;flex-direction:row!important;gap:8px!important;margin-top:6px!important;width:100%!important; }
#rv-reels-root .rv-btn-cart,
#rv-reels-root .rv-btn-buy { flex:1 1 0%!important;min-width:0!important;width:auto!important;max-width:none!important;padding:12px 0!important;border-radius:var(--rv-btn-radius)!important;font-size:var(--rv-btn-font-size)!important;font-weight:700!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;line-height:1.2!important;text-align:center!important;white-space:nowrap!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;outline:none!important;margin:0!important;height:auto!important;min-height:0!important;-webkit-appearance:none!important;appearance:none!important;transition:opacity 0.18s,transform 0.15s,filter 0.18s!important; }
#rv-reels-root .rv-btn-cart { background:var(--rv-cart-bg)!important;border:1.5px solid var(--rv-cart-border)!important;color:var(--rv-cart-text)!important; }
#rv-reels-root .rv-btn-cart svg { width:16px!important;height:16px!important;flex-shrink:0!important;stroke:var(--rv-cart-text)!important; }
#rv-reels-root .rv-btn-cart:hover { filter:brightness(1.15)!important; }
#rv-reels-root .rv-btn-buy { background:var(--rv-buy-bg)!important;border:none!important;color:var(--rv-buy-text)!important; }
#rv-reels-root .rv-btn-buy svg { width:16px!important;height:16px!important;flex-shrink:0!important;stroke:var(--rv-buy-text)!important; }
#rv-reels-root .rv-btn-buy:hover { filter:brightness(0.9)!important; }
#rv-reels-root .rv-btn-buy:active { opacity:0.88!important;transform:scale(0.97)!important; }
#rv-reels-root .rv-btn-disabled { opacity:0.4!important;cursor:not-allowed!important;pointer-events:none!important; }

/* ── Dot indicators ── */
.rv-dots { position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:10; }
.rv-dot { width:3px;height:20px;border-radius:2px;background:rgba(255,255,255,0.3);transition:all 0.3s; }
.rv-dot.active { background:var(--rv-accent);height:30px; }

/* ── Toast ── */
.rv-toast { position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:rgba(20,20,20,0.85);color:#fff;padding:8px 18px;border-radius:24px;font-size:13px;font-weight:500;z-index:99999;opacity:0;pointer-events:none;transition:opacity 0.25s;backdrop-filter:blur(8px);white-space:nowrap;max-width:90vw; }
.rv-toast.show { opacity:1; }

/* ── Swipe hint ── */
.rv-swipe-hint { position:absolute;bottom:5px;left:0;right:0;text-align:center;color:rgba(255,255,255,0.35);font-size:10px;z-index:10;pointer-events:none; }

/* ── Play/pause icon ── */
.rv-play-icon { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s; }
.rv-play-icon.show { opacity:1; }
.rv-play-icon svg { width:28px;height:28px;margin-left:3px; }

/* ── Empty state ── */
.rv-empty-state { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:#111; }
.rv-empty-state .icon { font-size:48px;margin-bottom:12px; }
.rv-empty-state p { color:rgba(255,255,255,0.6);font-size:14px; }

/* ── Conflict isolation ── */
.rv-reels-page .site-header,.rv-reels-page header.site-header,.rv-reels-page #masthead,.rv-reels-page #site-header,.rv-reels-page .main-header,.rv-reels-page .header-main,.rv-reels-page .elementor-location-header,.rv-reels-page #ast-desktop-header,.rv-reels-page .ocean-top-bar,.rv-reels-page #ocean-header,.rv-reels-page .nipstec-header,.rv-reels-page .top-bar,.rv-reels-page .woocommerce-store-notice,.rv-reels-page .admin-bar-placeholder { display:none!important; }
.rv-reels-page body,.rv-reels-page .site,.rv-reels-page #page,.rv-reels-page .site-content,.rv-reels-page #content,.rv-reels-page main,.rv-reels-page .site-main { padding-top:0!important;margin-top:0!important; }
.rv-reels-root .elementor,.rv-reels-root .elementor-section,.rv-reels-root .elementor-container { margin:0!important;padding:0!important; }
.rv-reels-root *,.rv-reels-root *::before,.rv-reels-root *::after { box-sizing:border-box;font-family:var(--rv-font-family); }
.rv-reels-root a,.rv-reels-root a:hover,.rv-reels-root a:focus { text-decoration:none!important;color:inherit; }
#rv-reels-root .rv-btn-cart img,#rv-reels-root .rv-btn-buy img,#rv-reels-root button img { display:none!important; }

/* ── Coupon pill ── */
.rv-coupon-pill { margin:6px 0 4px; }
.rv-coupon-tag  { display:inline-flex;align-items:center;gap:5px;background:rgba(224,68,68,0.88);color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px;backdrop-filter:blur(4px); }