/* =========================================
   ViDat Shoppable Reels v1.3
   Mobile: 50vh, 2 cards
   Tablet: 42vh, 3 cards
   Desktop: 38vh, 4-5 cards (compact)
   ========================================= */

.vidat-reels-wrapper *,
.vidat-reels-wrapper *::before,
.vidat-reels-wrapper *::after {
    box-sizing: border-box !important;
}

/* ══════════════════════════════════
   MOBILE FIRST (< 640px)
   50% screen height, 2 cards
══════════════════════════════════ */
.vidat-reels-wrapper {
    width: 100% !important;
    height: 50vh !important;
    min-height: 260px !important;
    max-height: 420px !important;
    background: #ffffff !important;
    border-top: 1px solid #ececec !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.vidat-reels-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 10px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
    margin: 0 !important;
}
.vidat-reels-track::-webkit-scrollbar { display: none !important; }

/* Mobile: 2 cards exactly visible */
.vidat-reel-card {
    flex: 0 0 calc(50% - 12px) !important;
    min-width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    scroll-snap-align: start !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid #e0e0e0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    cursor: pointer !important;
    transition: none !important;
}

/* No border highlight on active */
.vidat-reel-card.is-active {
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════
   VIDEO AREA — 70% of card
══════════════════════════════════ */
.vidat-vid-area {
    flex: 0 0 70% !important;
    height: 70% !important;
    position: relative !important;
    background: #1a1a1a !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    cursor: pointer !important;
}

.vidat-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Overlay: views + actions */
.vidat-vid-overlay {
    position: absolute !important;
    bottom: 5px !important;
    left: 4px !important;
    right: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}
.vidat-views-pill {
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    font-size: 9px !important;
    border-radius: 20px !important;
    padding: 2px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
}
.vidat-views-pill svg { width: 9px !important; height: 9px !important; }

.vidat-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}
.vidat-like-btn,
.vidat-share-btn {
    background: rgba(0,0,0,0.45) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    transition: transform 0.15s ease !important;
    line-height: 1 !important;
}
.vidat-like-btn svg,
.vidat-share-btn svg { width: 11px !important; height: 11px !important; }
.vidat-like-btn.liked svg { fill: #ff4d6d !important; stroke: #ff4d6d !important; }

/* ══════════════════════════════════
   PRODUCT AREA — 30% of card
══════════════════════════════════ */
.vidat-prod-area {
    flex: 1 1 30% !important;
    min-height: 0 !important;
    padding: 5px 7px 10px !important;  /* 10px bottom padding */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-top: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    background: #fff !important;
    gap: 2px !important;
}

.vidat-prod-top {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
}
.vidat-prod-thumb {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
    border: 1px solid #e0e0e0 !important;
}
.vidat-prod-thumb img {
    width: 20px !important;
    height: 20px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}
.vidat-prod-name {
    font-size: 8.5px !important;
    font-weight: 600 !important;
    color: #111 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vidat-price-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
}
.vidat-price-new,
.vidat-price-new .woocommerce-Price-amount,
.vidat-price-new .woocommerce-Price-amount bdi {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none !important;
}
.vidat-price-old,
.vidat-price-old .woocommerce-Price-amount,
.vidat-price-old .woocommerce-Price-amount bdi {
    font-size: 8px !important;
    color: #bbb !important;
    text-decoration: line-through !important;
}
.vidat-off-badge {
    font-size: 8px !important;
    color: #1a9a3a !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
}

/* Add to Cart — with bottom padding via parent */
.vidat-cart-btn {
    display: block !important;
    width: 100% !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 5px 3px !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.2s !important;
}
.vidat-cart-btn:hover  { background: #333 !important; color: #fff !important; }
.vidat-cart-btn.loading { background: #666 !important; cursor: not-allowed !important; }
.vidat-cart-btn.added   { background: #1a9a3a !important; }

/* ══════════════════════════════════
   TABLET (640px – 1023px)
   42vh, 3 cards compact
══════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1023px) {
    .vidat-reels-wrapper {
        height: 42vh !important;
        min-height: 240px !important;
        max-height: 360px !important;
    }
    .vidat-reel-card {
        /* 3 cards: (100% - 20px padding - 2×8px gap) / 3 */
        flex: 0 0 calc(33.333% - 12px) !important;
        min-width: calc(33.333% - 12px) !important;
        max-width: calc(33.333% - 12px) !important;
    }
    .vidat-prod-name  { font-size: 9px !important; }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount bdi { font-size: 10.5px !important; }
    .vidat-cart-btn   { font-size: 9px !important; padding: 5px !important; }
}

/* ══════════════════════════════════
   DESKTOP (≥ 1024px)
   38vh, 5 compact cards
══════════════════════════════════ */
@media (min-width: 1024px) {
    .vidat-reels-wrapper {
        height: 32vh !important;
        min-height: 200px !important;
        max-height: 270px !important;
    }
    .vidat-reels-track {
        gap: 10px !important;
        padding: 8px 16px !important;
    }
    /* 5 cards on wide desktop */
    .vidat-reel-card {
        flex: 0 0 calc(20% - 10px) !important;
        min-width: calc(20% - 10px) !important;
        max-width: calc(20% - 10px) !important;
    }
    .vidat-prod-area  { padding: 6px 8px 12px !important; }
    .vidat-prod-name  { font-size: 9.5px !important; }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount bdi { font-size: 11px !important; }
    .vidat-cart-btn   { font-size: 9.5px !important; padding: 6px 4px !important; }
    .vidat-views-pill { font-size: 10px !important; }
    .vidat-like-btn,
    .vidat-share-btn  { width: 24px !important; height: 24px !important; }
}

/* ══════════════════════════════════
   FULLSCREEN MODAL
══════════════════════════════════ */
.vidat-fs-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: #000 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}
.vidat-fs-overlay.open { display: flex !important; }
.vidat-fs-video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
    display: block !important;
}
.vidat-fs-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

/* ══════════════════════════════════
   TOAST
══════════════════════════════════ */
.vidat-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(80px) !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    border-radius: 24px !important;
    z-index: 9999999 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    opacity: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}
.vidat-toast.show {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
}

.vidat-empty {
    text-align: center !important;
    color: #aaa !important;
    font-size: 13px !important;
    padding: 24px !important;
}

/* ══ DESKTOP OVERRIDE — compact height ══ */
@media (min-width: 1024px) {
    .vidat-reels-wrapper {
        height: 32vh !important;
        min-height: 195px !important;
        max-height: 265px !important;
    }
    .vidat-reels-track {
        gap: 10px !important;
        padding: 8px 16px !important;
        align-items: stretch !important;
    }
    .vidat-reel-card {
        flex: 0 0 calc(20% - 10px) !important;
        min-width: calc(20% - 10px) !important;
        max-width: calc(20% - 10px) !important;
        border-radius: 10px !important;
    }
    .vidat-prod-area {
        padding: 5px 8px 10px !important;
    }
    .vidat-prod-name  { font-size: 9px !important; -webkit-line-clamp: 1 !important; }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount,
    .vidat-price-new .woocommerce-Price-amount bdi { font-size: 10px !important; }
    .vidat-price-old,
    .vidat-price-old .woocommerce-Price-amount bdi  { font-size: 8px !important; }
    .vidat-off-badge  { font-size: 7.5px !important; }
    .vidat-cart-btn   { font-size: 9px !important; padding: 5px 4px !important; }
}

/* ══ TABLET OVERRIDE — compact height ══ */
@media (min-width: 640px) and (max-width: 1023px) {
    .vidat-reels-wrapper {
        height: 40vh !important;
        min-height: 230px !important;
        max-height: 310px !important;
    }
    .vidat-reel-card {
        flex: 0 0 calc(33.333% - 11px) !important;
        min-width: calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
    }
}

/* ══════════════════════════════════════════
   FINAL DESKTOP FIX — same tall reel format
   as mobile, just more cards side by side
══════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* Tall like mobile — same reel feel */
    .vidat-reels-wrapper {
        height: 55vh !important;
        min-height: 340px !important;
        max-height: 520px !important;
    }
    .vidat-reels-track {
        gap: 10px !important;
        padding: 10px 20px !important;
        align-items: stretch !important;
    }
    /* 4 tall portrait cards on desktop */
    .vidat-reel-card {
        flex: 0 0 calc(25% - 10px) !important;
        min-width: calc(25% - 10px) !important;
        max-width: calc(25% - 10px) !important;
        border-radius: 12px !important;
        height: 100% !important;
    }
    /* video still 70%, product 30% — same as mobile */
    .vidat-vid-area {
        flex: 0 0 70% !important;
        height: 70% !important;
    }
    .vidat-prod-area {
        flex: 1 1 30% !important;
        padding: 7px 10px 12px !important;
    }
    .vidat-prod-name  { font-size: 10px !important; -webkit-line-clamp: 2 !important; }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount,
    .vidat-price-new .woocommerce-Price-amount bdi { font-size: 11px !important; }
    .vidat-off-badge  { font-size: 9px !important; }
    .vidat-cart-btn   { font-size: 10px !important; padding: 7px 4px !important; }
    .vidat-views-pill { font-size: 10px !important; padding: 3px 7px !important; }
    .vidat-like-btn,
    .vidat-share-btn  { width: 26px !important; height: 26px !important; }
    .vidat-like-btn svg,
    .vidat-share-btn svg { width: 13px !important; height: 13px !important; }
}

/* Tablet — 3 tall portrait cards */
@media (min-width: 640px) and (max-width: 1023px) {
    .vidat-reels-wrapper {
        height: 52vh !important;
        min-height: 300px !important;
        max-height: 450px !important;
    }
    .vidat-reel-card {
        flex: 0 0 calc(33.333% - 11px) !important;
        min-width: calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
        height: 100% !important;
    }
    .vidat-prod-name  { font-size: 9.5px !important; }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount bdi { font-size: 10.5px !important; }
    .vidat-cart-btn   { font-size: 9.5px !important; padding: 6px 4px !important; }
}

/* ══════════════════════════════════════════════
   v1.6 — FINAL FIX: Fixed px card width on
   desktop so cards stay PORTRAIT (not square).
   Percentage width = square on wide screens.
   Fixed px width = always tall reel shape.
══════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .vidat-reels-wrapper {
        height: 55vh !important;
        min-height: 340px !important;
        max-height: 500px !important;
    }
    .vidat-reels-track {
        gap: 10px !important;
        padding: 10px 20px !important;
        align-items: stretch !important;
    }
    /* FIXED px width — stays narrow & portrait */
    .vidat-reel-card {
        flex: 0 0 175px !important;
        min-width: 175px !important;
        max-width: 175px !important;
        width: 175px !important;
        height: 100% !important;
        border-radius: 12px !important;
    }
    .vidat-vid-area {
        flex: 0 0 70% !important;
        height: 70% !important;
    }
    .vidat-prod-area {
        flex: 1 1 30% !important;
        padding: 7px 10px 12px !important;
        gap: 3px !important;
    }
    .vidat-prod-name  {
        font-size: 10px !important;
        -webkit-line-clamp: 2 !important;
    }
    .vidat-price-new,
    .vidat-price-new .woocommerce-Price-amount,
    .vidat-price-new .woocommerce-Price-amount bdi {
        font-size: 11px !important;
    }
    .vidat-price-old,
    .vidat-price-old .woocommerce-Price-amount bdi {
        font-size: 9px !important;
    }
    .vidat-off-badge  { font-size: 9px !important; }
    .vidat-cart-btn   { font-size: 10px !important; padding: 6px 4px !important; }
    .vidat-views-pill { font-size: 10px !important; }
    .vidat-like-btn,
    .vidat-share-btn  { width: 26px !important; height: 26px !important; }
}

/* Tablet: fixed 155px cards */
@media (min-width: 640px) and (max-width: 1023px) {
    .vidat-reels-wrapper {
        height: 52vh !important;
        min-height: 300px !important;
        max-height: 440px !important;
    }
    .vidat-reel-card {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        width: 155px !important;
        height: 100% !important;
    }
    .vidat-prod-name  { font-size: 9.5px !important; }
    .vidat-cart-btn   { font-size: 9.5px !important; }
}