/* TVS Checkout Beautifier v14.0 */

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
a.tvs-cta,a.tvs-cta:link,a.tvs-cta:visited,a.tvs-cta:active,.tvs-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#f1c349!important;color:#fff!important;font-weight:700!important;font-size:14px!important;font-family:inherit!important;line-height:1.3!important;padding:11px 22px!important;border:none!important;border-radius:8px!important;text-decoration:none!important;cursor:pointer!important;transition:all .2s!important;box-shadow:none!important;box-sizing:border-box!important}
a.tvs-cta:hover,a.tvs-cta:focus,.tvs-cta:hover{background:#dba82f!important;color:#fff!important;text-decoration:none!important;transform:translateY(-1px)!important;box-shadow:0 4px 14px rgba(241,195,73,.4)!important}
.tvs-cta-up{white-space:nowrap!important;flex-shrink:0!important}
.tvs-cta-add{width:100%!important;text-align:center!important;margin-top:8px!important}
.tvs-cta-sm{padding:9px 16px!important;font-size:13px!important;white-space:nowrap!important}
.tvs-cta-xs{padding:7px 14px!important;font-size:12px!important;white-space:nowrap!important;border-radius:6px!important}
a.tvs-cta-done,.tvs-cta-done{opacity:.6!important;pointer-events:none!important}
a.tvs-cta-busy,.tvs-cta-busy{opacity:.7!important;pointer-events:none!important}
.tvs-spin{display:inline-block!important;width:14px!important;height:14px!important;border:2px solid rgba(255,255,255,.3)!important;border-top-color:#fff!important;border-radius:50%!important;animation:tvsSpin .5s linear infinite!important;margin-right:6px!important}
@keyframes tvsSpin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════
   SAVE BADGE
═══════════════════════════════════════════════════════════════ */
.tvs-save{display:inline-block!important;background:#27ae60!important;color:#fff!important;font-size:11px!important;font-weight:700!important;padding:3px 8px!important;border-radius:4px!important;text-transform:uppercase!important;vertical-align:middle!important;text-decoration:none!important;line-height:1.2!important}
.tvs-save-inline{font-size:10px!important;padding:2px 6px!important}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE BANNER (Cart)
═══════════════════════════════════════════════════════════════ */
.tvs-banner{background:#fff!important;border:2px solid #f1c349!important;border-radius:10px!important;overflow:hidden!important;margin:0 0 20px!important}
.tvs-banner-ribbon{background:#f1c349!important;color:#1a1a1a!important;text-align:center!important;padding:7px 14px!important;font-size:13px!important;font-weight:700!important}
.tvs-banner-body{display:flex!important;align-items:center!important;gap:16px!important;padding:16px 20px!important;flex-wrap:wrap!important}
.tvs-banner-img{width:60px!important;height:60px!important;object-fit:contain!important;border-radius:8px!important;flex-shrink:0!important}
.tvs-banner-info{flex:1!important;min-width:180px!important}
.tvs-banner-info h3{margin:0 0 4px!important;font-size:15px!important;font-weight:700!important;color:#1a1a1a!important}
.tvs-banner-price{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:4px!important;flex-wrap:wrap!important}
.tvs-banner-price del{color:#999!important;font-size:14px!important}
.tvs-banner-price strong{font-size:17px!important;color:#1a1a1a!important}
.tvs-banner-perks{font-size:12px!important;color:#555!important}

/* ═══════════════════════════════════════════════════════════════
   CART UPSELL CARDS
═══════════════════════════════════════════════════════════════ */
.tvs-upsells{margin:28px 0!important}
.tvs-upsells-h{font-size:20px!important;font-weight:800!important;color:#1a1a1a!important;text-align:center!important;margin:0 0 4px!important}
.tvs-upsells-sub{font-size:13px!important;color:#777!important;text-align:center!important;margin:0 0 20px!important}
.tvs-upsells-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:18px!important}
.tvs-card{background:#fff!important;border:1px solid #e5e5e5!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 2px 8px rgba(0,0,0,.05)!important;display:flex!important;flex-direction:column!important;transition:box-shadow .2s,transform .2s!important}
.tvs-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)!important;transform:translateY(-2px)!important}
.tvs-card-img{background:#f7f7f7!important;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:160px!important}
.tvs-card-img img{max-width:100%!important;max-height:160px!important;object-fit:contain!important}
.tvs-card-body{padding:16px!important;display:flex!important;flex-direction:column!important;flex:1!important}
.tvs-card-body h3{font-size:18px!important;font-weight:800!important;color:#1a1a1a!important;margin:0 0 8px!important}
.tvs-bl{list-style:none!important;padding:0!important;margin:0 0 12px!important}
.tvs-bl li{font-size:13px!important;color:#333!important;padding:2px 0!important;line-height:1.5!important}
.tvs-bl li::before{content:"✓ "!important;color:#27ae60!important;font-weight:700!important}
.tvs-bl-sm li{font-size:12px!important;padding:1px 0!important}
.tvs-card-foot{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:6px!important;border-top:1px solid #eee!important;padding-top:12px!important;margin-top:auto!important}
.tvs-card-price{font-size:18px!important;font-weight:800!important;color:#1a1a1a!important}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT UPSELL BAR — Vertical cards, identical to cart cards
═══════════════════════════════════════════════════════════════ */
.tvs-co-bar{background:#fffdf2!important;border:1px solid #f1c349!important;border-radius:10px!important;padding:16px 18px!important;margin:0 0 20px!important;box-sizing:border-box!important}
.tvs-co-bar-label{font-size:15px!important;font-weight:700!important;color:#1a1a1a!important;margin:0 0 14px!important}

/* Grid — same as cart upsell grid */
.tvs-co-upsells-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;
    gap:16px!important;
}

/* Card — VERTICAL, same as .tvs-card on cart page */
.tvs-co-upsell-card{
    background:#fff!important;
    border:1px solid #e5e5e5!important;
    border-radius:10px!important;
    overflow:hidden!important;
    box-shadow:0 2px 8px rgba(0,0,0,.05)!important;
    display:flex!important;
    flex-direction:column!important;
    transition:box-shadow .2s,transform .2s!important;
}
.tvs-co-upsell-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)!important;transform:translateY(-2px)!important;border-color:#f1c349!important}

/* Image pane — top of card */
.tvs-co-upsell-img{
    background:#f7f7f7!important;
    padding:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:150px!important;
}
.tvs-co-upsell-img img{
    max-width:100%!important;
    max-height:150px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
    display:block!important;
}

/* Body pane */
.tvs-co-upsell-body{
    padding:16px!important;
    display:flex!important;
    flex-direction:column!important;
    flex:1!important;
}
.tvs-co-upsell-body h3{font-size:17px!important;font-weight:800!important;color:#1a1a1a!important;margin:0 0 8px!important}
.tvs-co-upsell-foot{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:6px!important;border-top:1px solid #eee!important;padding-top:12px!important;margin-top:auto!important}

/* Legacy classes — hidden */
.tvs-co-card,.tvs-co-chip,.tvs-co-cards-row{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT LAYOUT — CSS Grid (Left: billing + reviews | Right: order)
═══════════════════════════════════════════════════════════════ */

/* Override WooCommerce/Astra's default float/column layout on checkout */
form.woocommerce-checkout,
.woocommerce-checkout-payment ~ *,
.woocommerce form.checkout{
    /* We only restructure the inner content — not the <form> itself */
}

/* The checkout form inner wrapper */
.woocommerce-checkout .col2-set + #order_review,
.woocommerce-checkout #customer_details + #order_review{
    /* handled by grid below */
}

/* Grid container — wraps #customer_details and #order_review */
.woocommerce .woocommerce-checkout{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
        "billing  order"
        "reviews  order"!important;
    column-gap:32px!important;
    align-items:start!important;
}

/* Billing / customer details — left col, row 1 */
.woocommerce .woocommerce-checkout #customer_details,
.woocommerce .woocommerce-checkout .col2-set{
    grid-area:billing!important;
    width:100%!important;
    float:none!important;
    margin:0!important;
}

/* Order review — right col, spans BOTH rows */
.woocommerce .woocommerce-checkout #order_review{
    grid-area:order!important;
    width:100%!important;
    float:none!important;
    margin:0!important;
}

/* Reviews in checkout LEFT col, row 2 */
.tvs-reviews-co{
    grid-area:reviews!important;
    width:100%!important;
    float:none!important;
    clear:none!important;
    margin:0!important;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT FIELD PADDING
═══════════════════════════════════════════════════════════════ */
.woocommerce-checkout .form-row{margin-bottom:12px!important}
.woocommerce-checkout .form-row input,.woocommerce-checkout .form-row select,.woocommerce-checkout .form-row textarea{padding:10px 14px!important}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS — shared base styles
═══════════════════════════════════════════════════════════════ */
.tvs-reviews{margin:24px 0 0!important;padding:22px 24px!important;background:#f7f7f7!important;border:1px solid #e5e5e5!important;border-radius:12px!important;clear:both!important}
.tvs-rev-h{font-size:17px!important;font-weight:700!important;color:#1a1a1a!important;margin:0 0 16px!important}
.tvs-gold-stars{color:#f1c349!important;margin-right:6px!important}
.tvs-gold-stars-sm{color:#f1c349!important;font-size:12px!important}
.tvs-rev-layout{display:flex!important;gap:18px!important;align-items:flex-start!important}
.tvs-rev-vids{flex:0 0 200px!important;display:flex!important;flex-direction:column!important;gap:16px!important}
.tvs-rev-txts{flex:1!important;display:flex!important;flex-direction:column!important;gap:10px!important;min-width:0!important}

/* ── Video thumbnails ── */
.tvs-vid{cursor:pointer!important;transition:transform .2s!important}
.tvs-vid:hover{transform:translateY(-2px)!important}
.tvs-vid-thumb{
    position:relative!important;
    width:200px!important;
    height:150px!important;
    border-radius:10px!important;
    overflow:hidden!important;
    background:#1a1a1a!important;   /* dark bg — NO star, just dark */
    box-shadow:0 3px 14px rgba(0,0,0,.18)!important;
}
.tvs-vid-thumb img,
/* Fix 2: Hide native browser play overlay — only our gold button shows */
.tvs-vid-preview{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;pointer-events:none!important}
.tvs-vid-preview::-webkit-media-controls{display:none!important;opacity:0!important}
.tvs-vid-preview::-webkit-media-controls-enclosure{display:none!important;opacity:0!important}
.tvs-vid-preview::-webkit-media-controls-overlay-play-button{display:none!important;opacity:0!important}
.tvs-vid-preview::-moz-media-controls{display:none!important}

/* Clean dark placeholder when no thumb available — NO star icon */
.tvs-vid-nothumb{
    width:100%!important;
    height:100%!important;
    background:linear-gradient(135deg,#1a1a1a 0%,#2e2e2e 100%)!important;
    display:block!important;
}

/* Play button overlay — clean circle, no star */
.tvs-play{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:46px!important;
    height:46px!important;
    background:rgba(241,195,73,.92)!important;
    color:#fff!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:16px!important;
    padding-left:3px!important;   /* optical centre for triangle */
    box-shadow:0 3px 12px rgba(0,0,0,.4)!important;
    transition:transform .2s,background .2s!important;
    pointer-events:none!important;
    z-index:2!important;
}
.tvs-vid:hover .tvs-play{
    transform:translate(-50%,-50%) scale(1.15)!important;
    background:#f1c349!important;
}
/* top-badge removed in v14 */
.tvs-vid-meta{padding:6px 0 4px!important;font-size:13px!important}
.tvs-vid-meta strong{color:#1a1a1a!important;font-size:14px!important;margin-right:4px!important}

/* ── AI Summary block ── */
.tvs-ai-wrap{
    background:#fffdf2!important;
    border:1px solid #f1e8a0!important;
    border-radius:7px!important;
    padding:8px 10px!important;
    margin-top:2px!important;
}
.tvs-ai-badge{
    display:inline-block!important;
    font-size:10px!important;
    font-weight:700!important;
    color:#b8860b!important;
    background:#fef9e7!important;
    border:1px solid #f1e8a0!important;
    border-radius:4px!important;
    padding:2px 6px!important;
    margin-bottom:4px!important;
    letter-spacing:.3px!important;
}
.tvs-ai-text{
    font-size:12px!important;
    color:#444!important;
    line-height:1.5!important;
    margin:0!important;
    font-style:italic!important;
}

/* ── Text / photo reviews ── */
.tvs-txt{background:#fff!important;border:1px solid #e5e5e5!important;border-radius:8px!important;padding:12px 14px!important}
.tvs-txt-top{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:8px!important}
.tvs-txt-av{width:34px!important;height:34px!important;border-radius:50%!important;background:#f1c349!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;font-weight:700!important;flex-shrink:0!important}
.tvs-txt-avi{width:34px!important;height:34px!important;border-radius:50%!important;object-fit:cover!important;flex-shrink:0!important}
.tvs-txt-who{display:flex!important;align-items:center!important;gap:5px!important;flex:1!important;flex-wrap:wrap!important}
.tvs-txt-who strong{font-size:14px!important;color:#1a1a1a!important}
.tvs-bv{font-size:10px!important;font-weight:600!important;color:#27ae60!important;background:rgba(39,174,96,.1)!important;padding:2px 6px!important;border-radius:3px!important}
.tvs-txt-dt{font-size:11px!important;color:#999!important;margin-left:auto!important;flex-shrink:0!important}
.tvs-txt-body{font-size:13px!important;color:#333!important;line-height:1.55!important;margin:0!important;font-style:italic!important}
.tvs-txt-pic{width:80px!important;height:80px!important;border-radius:8px!important;object-fit:cover!important;margin-top:10px!important;border:1px solid #eee!important}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT METHODS — CC first, default selected
═══════════════════════════════════════════════════════════════ */
.woocommerce-checkout #payment ul.payment_methods{display:flex!important;flex-direction:column!important}

/* ═══════════════════════════════════════════════════════════════
   VIDEO MODAL
═══════════════════════════════════════════════════════════════ */
.tvs-modal{position:fixed!important;inset:0!important;z-index:999999!important;background:rgba(0,0,0,.9)!important;display:none!important;align-items:center!important;justify-content:center!important}
.tvs-modal.tvs-on{display:flex!important}
.tvs-modal-box{position:relative!important;width:92%!important;max-width:700px!important;aspect-ratio:16/9!important;border-radius:10px!important;overflow:hidden!important;background:#000!important}
.tvs-modal-box iframe,.tvs-modal-box video{width:100%!important;height:100%!important;border:0!important}
.tvs-modal-x{position:absolute!important;top:-40px!important;right:0!important;background:none!important;border:none!important;color:#fff!important;font-size:32px!important;cursor:pointer!important;line-height:1!important}

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.tvs-toast{position:fixed!important;top:20px!important;right:20px!important;z-index:999998!important;background:#1a1a1a!important;color:#fff!important;padding:12px 20px!important;border-radius:8px!important;font-size:14px!important;font-weight:600!important;box-shadow:0 8px 28px rgba(0,0,0,.15)!important;transform:translateX(120%)!important;transition:transform .3s!important;border-left:4px solid #f1c349!important}
.tvs-toast.tvs-on{transform:translateX(0)!important}

/* ═══════════════════════════════════════════════════════════════
   CART PORTRAIT INFOGRAPHIC (left of cart totals)
═══════════════════════════════════════════════════════════════ */
/* Fix 1: Spacing above cart collaterals (portrait image + cart totals) */
.woocommerce .cart-collaterals{display:flex!important;align-items:flex-start!important;gap:24px!important;flex-wrap:wrap!important;margin-top:32px!important;padding-top:8px!important}
.tvs-cart-portrait-wrap{flex:0 0 auto!important;width:270px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important}
.tvs-cart-portrait-img{width:100%!important;height:auto!important;border-radius:14px!important;box-shadow:0 4px 20px rgba(0,0,0,.1)!important;display:block!important}
.tvs-cart-portrait-caption{font-size:13px!important;font-weight:700!important;color:#1a1a1a!important;text-align:center!important;margin:0!important;padding:6px 10px!important;background:#fffdf2!important;border:1px solid #f1c349!important;border-radius:6px!important;width:100%!important;box-sizing:border-box!important}
.tvs-cart-portrait-cta{font-size:13px!important;padding:10px 16px!important;width:100%!important}
.woocommerce .cart-collaterals .cart_totals{flex:1!important;min-width:280px!important}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT INFOGRAPHIC (below checkout, full-width)
═══════════════════════════════════════════════════════════════ */
.tvs-infographic{margin:28px 0 10px!important;text-align:center!important;clear:both!important}
.tvs-infographic img{max-width:100%!important;height:auto!important;border-radius:16px!important;box-shadow:0 4px 20px rgba(0,0,0,.08)!important}
.tvs-info-desktop{display:block!important}
.tvs-info-mobile{display:none!important}
.tvs-info-heading{font-size:20px!important;font-weight:700!important;color:#1a1a1a!important;margin:0 0 14px!important;text-align:center!important}
.tvs-info-cta{width:auto!important;margin-top:16px!important;font-size:16px!important;padding:14px 30px!important}

/* ═══════════════════════════════════════════════════════════════
   HIDE OVERSIZED CHECKOUT ORDER TABLE IMAGES
═══════════════════════════════════════════════════════════════ */
.woocommerce-checkout-review-order-table .product-name img{display:none!important}

/* Fix 3: Hide "Your order" heading above the order review panel */
.woocommerce-checkout #order_review > h3,
.woocommerce-checkout #order_review > h3.order-review-heading,
.woocommerce-checkout h3#order_review_heading{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   TABLET  (769–1024)
═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px) and (min-width:769px){
    .tvs-rev-vids{flex:0 0 170px!important}
    .tvs-vid-thumb{width:170px!important;height:128px!important}
    .tvs-co-upsells-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
    .tvs-cart-portrait-wrap{width:230px!important}
    .woocommerce .woocommerce-checkout{column-gap:22px!important}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE  (≤768px)
═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    /* Upgrade banner */
    .tvs-banner-body{flex-direction:column!important;text-align:center!important;gap:10px!important;padding:12px!important}
    .tvs-banner-img{width:48px!important;height:48px!important}
    .tvs-banner-price{justify-content:center!important}
    a.tvs-cta-up,.tvs-cta-up{width:100%!important;padding:12px!important}

    /* Cart upsell grid */
    .tvs-upsells-grid{grid-template-columns:1fr!important}

    /* Checkout upsell cards — single column, full width on mobile */
    .tvs-co-upsells-grid{grid-template-columns:1fr!important}
    .tvs-co-upsell-card{width:100%!important}
    .tvs-co-upsell-img{min-height:120px!important}
    .tvs-co-upsell-img img{max-height:120px!important}

    /* Checkout grid → single column */
    .woocommerce .woocommerce-checkout{
        display:block!important;
        grid-template-areas:unset!important;
    }
    .tvs-reviews-co{margin-top:24px!important}

    /* Reviews */
    .tvs-reviews{padding:16px 18px!important}
    .tvs-rev-layout{flex-direction:column!important}
    .tvs-rev-vids{flex:none!important;flex-direction:row!important;overflow-x:auto!important;width:100%!important;-webkit-overflow-scrolling:touch!important;padding-bottom:6px!important;gap:12px!important}
    .tvs-vid{flex:0 0 160px!important}
    .tvs-vid-thumb{width:160px!important;height:120px!important}
    .tvs-play{width:40px!important;height:40px!important;font-size:14px!important}

    /* Cart portrait */
    .woocommerce .cart-collaterals{flex-direction:column!important}
    .tvs-cart-portrait-wrap{width:100%!important;max-width:360px!important;margin:0 auto!important}

    /* Infographic */
    .tvs-info-desktop{display:none!important}
    .tvs-info-mobile{display:block!important;margin:0 auto!important}
    .tvs-info-cta{width:100%!important;font-size:14px!important;padding:12px 20px!important}

    /* Modal */
    .tvs-modal-box{width:96%!important;max-width:none!important}

    /* Toast */
    .tvs-toast{left:16px!important;right:16px!important;text-align:center!important;transform:translateY(-120%)!important}
    .tvs-toast.tvs-on{transform:translateY(0)!important}

    .tvs-save,.tvs-save-inline{font-size:9px!important;padding:2px 5px!important}
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE (≤480px)
═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
    .tvs-co-bar{padding:10px 12px!important}
    .tvs-co-upsells-grid{grid-template-columns:1fr!important}
    .tvs-vid{flex:0 0 140px!important}
    .tvs-vid-thumb{width:140px!important;height:105px!important}
    .tvs-rev-h{font-size:15px!important}
    .tvs-infographic{margin:20px 0 8px!important}
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP INFOGRAPHIC RESTORE
═══════════════════════════════════════════════════════════════ */
@media(min-width:769px){
    .tvs-info-desktop{display:block!important}
    .tvs-info-mobile{display:none!important}
}

@media print{.tvs-banner,.tvs-upsells,.tvs-co-bar,.tvs-reviews,.tvs-infographic,.tvs-cart-portrait-wrap{display:none!important}}