/* ShopTV Reels Premium — app-like focus, smooth desktop viewing and readable actions */
.reels-body{background:#050B18!important;color:#fff}
.reels-body .reels-topbar{z-index:60;gap:13px;padding:12px max(14px,calc((100vw - 520px)/2));min-height:66px;background:linear-gradient(180deg,rgba(3,9,22,.92),rgba(3,9,22,.52) 72%,transparent);backdrop-filter:blur(6px)}
.reels-body .reels-back{border:1px solid #ffffff32;background:rgba(255,255,255,.12);box-shadow:0 6px 20px #0003;transition:background .18s,transform .18s}
.reels-body .reels-back:hover{transform:translateX(-2px);background:rgba(255,255,255,.2)}
.reels-body .reels-discover{border-color:#ffffff3d;background:rgba(8,124,255,.28);box-shadow:inset 0 1px #ffffff17;transition:background .18s,border-color .18s}
.reels-body .reels-discover:hover{background:rgba(8,124,255,.48);border-color:#83C4FF}
.reels-body .reel-feed{background:radial-gradient(ellipse at 50% 45%,#13294B 0%,#081326 58%,#040914 100%);scroll-padding-block:10px}
.reels-body .reel-card{background:transparent}
.reels-body .reel-media{isolation:isolate;background:#0B1424}
.reels-body .reel-video-shade{background:linear-gradient(180deg,rgba(3,7,15,.38),transparent 22%,transparent 42%,rgba(3,7,15,.22) 58%,rgba(3,7,15,.91) 100%)}
.reels-body .reel-top-meta{letter-spacing:.015em}
.reels-body .reel-live-dot{background:#22D8FF;box-shadow:0 0 0 4px rgba(34,216,255,.18),0 0 15px rgba(34,216,255,.25)}
.reels-body .reel-counter{border-color:#ffffff35;background:rgba(4,12,27,.55);backdrop-filter:blur(12px)}
.reels-body .reel-shop-avatar{border:2px solid rgba(255,255,255,.88);background:linear-gradient(135deg,#087CFF,#22D8FF);box-shadow:0 7px 22px #0006,0 0 0 4px rgba(8,124,255,.17)}
.reels-body .reel-action-button{transition:transform .18s ease}
.reels-body .reel-action-button:hover{transform:translateY(-2px)}
.reels-body .reel-action-symbol{border-color:#ffffff45;background:rgba(5,13,28,.68);box-shadow:0 5px 17px #0004;backdrop-filter:blur(12px)}
.reels-body .reel-action-button.is-liked .reel-action-symbol{background:#fff;color:#F02363;box-shadow:0 0 0 4px rgba(240,35,99,.16),0 7px 25px #0005}
.reels-body .reel-product-info{gap:8px}
.reels-body .reel-shop-name{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #ffffff29;border-radius:999px;background:rgba(4,14,32,.55);backdrop-filter:blur(10px)}
.reels-body .reel-product-title{text-wrap:balance;text-shadow:0 2px 20px #000f}
.reels-body .reel-description{max-width:430px;line-height:1.6}
.reels-body .reel-price-row strong{font-size:1.23rem;color:#fff;text-shadow:0 2px 12px #0008}
.reels-body .reel-price-row del{padding:3px 7px;border-radius:7px;background:#0A1528A8;color:#D8E4F5}
.reels-body .reel-buy-button{width:min(100%,330px);min-height:49px;padding:12px 17px;border:1px solid rgba(166,220,255,.85);border-radius:15px;background:linear-gradient(115deg,#22D8FF 0%,#087CFF 48%,#0757C9 100%);color:#fff;box-shadow:0 10px 28px rgba(8,124,255,.32),inset 0 1px rgba(255,255,255,.34);transition:filter .18s,transform .18s,box-shadow .18s}
.reels-body .reel-buy-button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 35px rgba(8,124,255,.4),inset 0 1px rgba(255,255,255,.4)}
.reels-body .reel-buy-button>span:last-child{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:rgba(255,255,255,.18)}
.reels-body .reels-empty-state{background:radial-gradient(ellipse at 50% 30%,#143668,#081326 58%,#040914 100%)}
.reels-body .reels-empty-state img{width:90px;height:90px;filter:drop-shadow(0 10px 22px #0005)}
.reels-body .reels-empty-state .button{background:linear-gradient(115deg,#22D8FF,#087CFF 62%,#0757C9);box-shadow:0 10px 30px #087CFF44}
.reels-body .shop-bottom-nav{background:rgba(4,11,25,.94)!important;border-color:#ffffff28!important;box-shadow:0 -12px 40px #0005!important}
.reels-body .bottom-nav-item{color:#A8B9D2}
.reels-body .bottom-nav-item.is-active{background:rgba(8,124,255,.18);color:#75CDFF}
.reels-body .bottom-nav-logo{border-color:#06142B;background:linear-gradient(145deg,#F8FDFF,#BEEBFF 65%,#5AB9FF)}
.reels-body .bottom-nav-logo-label{background:#0B1A32;border-color:#2A4E7F;color:#8ED9FF}
@media(min-width:761px){
  .reels-body{overflow:hidden}
  .reels-body .reels-topbar{left:50%;right:auto;width:490px;padding-inline:12px;transform:translateX(-50%)}
  .reels-body .reel-feed{padding:14px 0 22px;background:radial-gradient(ellipse at 50% 48%,#142A4B 0%,#091426 53%,#040914 100%)}
  .reels-body .reel-card{min-height:calc(100dvh - 36px);height:calc(100dvh - 36px);scroll-snap-align:start}
  .reels-body .reel-media{width:min(100% - 30px,470px);height:calc(100dvh - 54px);max-height:880px;border:1px solid rgba(190,218,255,.22);border-radius:28px;box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);}
  .reels-body .reel-top-meta{top:20px;inset-inline:18px}
  .reels-body .reel-action-rail{right:calc(50% - 262px);bottom:calc(105px + env(safe-area-inset-bottom));gap:14px}
  .reels-body .reel-product-info{left:calc(50% - 215px);right:calc(50% - 170px);bottom:calc(53px + env(safe-area-inset-bottom));}
  .reels-body .reel-product-title{font-size:1.32rem}
  .reels-body .reel-description{font-size:.78rem}
  .reels-body .reel-buy-button{min-height:47px}
  .reels-body .reel-modal-backdrop{align-items:center}
}
@media(max-width:760px){
  .reels-body .reels-topbar{min-height:58px;padding:8px 12px}
  .reels-body .reel-feed{padding:0}
  .reels-body .reel-media{border-radius:0}
  .reels-body .reel-product-info{bottom:calc(111px + env(safe-area-inset-bottom));left:13px;right:77px}
  .reels-body .reel-action-rail{right:10px;bottom:calc(166px + env(safe-area-inset-bottom));gap:12px}
  .reels-body .reel-buy-button{width:min(100%,310px);min-height:46px}
  .reels-body .reel-top-meta{top:65px;inset-inline:13px}
  .reels-body .shop-bottom-nav{left:50%;right:auto;bottom:calc(7px + env(safe-area-inset-bottom));width:calc(100% - 20px);max-width:520px;transform:translateX(-50%);border-radius:23px}
}
@media(max-width:420px){
  .reels-body .reel-product-info{bottom:calc(108px + env(safe-area-inset-bottom));}
  .reels-body .reel-action-rail{bottom:calc(158px + env(safe-area-inset-bottom));gap:10px}
}
@media(prefers-reduced-motion:reduce){.reels-body .reel-action-button,.reels-body .reel-buy-button{transition:none}}

/* Accessible playback controls for uploaded product videos */
.reels-body .reel-progress-track{position:absolute;z-index:6;top:7px;left:12px;right:12px;height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.32);pointer-events:none}
.reels-body .reel-progress-track>span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22D8FF,#fff);transform:scaleX(0);transform-origin:left center;will-change:transform;box-shadow:0 0 10px rgba(34,216,255,.6)}
html[dir=rtl] .reels-body .reel-progress-track>span{transform-origin:right center}
.reels-body .reel-play-toggle{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;margin-inline-start:3px;border:1px solid #ffffff43;border-radius:50%;background:rgba(4,13,29,.66);color:#fff;box-shadow:0 4px 15px #0004;backdrop-filter:blur(10px);cursor:pointer;transition:background .18s,transform .18s}
.reels-body .reel-play-toggle span{font-size:12px;font-weight:950;line-height:1}
.reels-body .reel-play-toggle:hover{transform:scale(1.06);background:rgba(8,124,255,.82)}
.reels-body .reel-play-toggle:focus-visible{outline:3px solid #8CD7FF;outline-offset:3px}
.reels-body .reel-card.is-video-paused .reel-play-toggle{border-color:#22D8FF;background:rgba(8,124,255,.8);box-shadow:0 0 0 4px rgba(34,216,255,.16),0 5px 18px #0005}
@media(prefers-reduced-motion:reduce){.reels-body .reel-progress-track>span,.reels-body .reel-play-toggle{transition:none}}
