.anm-live-markets-page{--live-accent:#11a565} .anm-live-markets-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .anm-live-markets-count{display:inline-flex;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap} .anm-live-slide-wrap{position:relative} .anm-live-promoted-label,.anm-live-market-label{position:absolute;z-index:12;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 110px);padding:6px 9px;border-radius:999px;background:rgba(5,14,10,.76);backdrop-filter:blur(10px);color:#fff;text-decoration:none;font-size:11px;font-weight:850;box-shadow:0 5px 20px rgba(0,0,0,.18)} .anm-live-promoted-label{background:linear-gradient(135deg,rgba(255,153,0,.96),rgba(230,106,0,.96));color:#fff} .anm-live-market-label small{font-size:10px;font-weight:650;opacity:.78} .anm-live-slide-wrap.is-promoted{outline:1px solid rgba(255,153,0,.24);outline-offset:-1px} .anm-live-promo-action{position:absolute;z-index:13;left:14px;bottom:18px} .anm-live-promo-action a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#fff;color:#16231c;text-decoration:none;font-size:11px;font-weight:900;box-shadow:0 7px 24px rgba(0,0,0,.2)} @media(max-width:620px){.anm-live-markets-hero{align-items:flex-start}.anm-live-markets-count{font-size:9px;padding:5px 7px}.anm-live-promoted-label,.anm-live-market-label{top:10px;left:10px;padding:5px 7px;font-size:9px}.anm-live-market-label small{font-size:8px}.anm-live-promo-action{left:10px;bottom:12px}.anm-live-promo-action a{padding:6px 9px;font-size:9px}} @media(prefers-color-scheme:dark){.anm-live-promo-action a{background:#eef8f2;color:#102018}} /* V2 placement: Explore remains free at top-left; identity and tags live top-right. */ .anm-live-top-right{position:absolute;z-index:24;top:12px;right:12px;left:auto;display:flex;max-width:min(72%,520px);flex-direction:column;align-items:flex-end;gap:5px;text-align:right;pointer-events:none} .anm-live-top-right>*{pointer-events:auto} .anm-live-identity-name{max-width:100%;overflow:hidden;padding:5px 8px;border-radius:999px;background:rgba(5,14,10,.72);backdrop-filter:blur(10px);color:#fff;font-size:11px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 5px 18px rgba(0,0,0,.18)} .anm-live-top-right .anm-live-promoted-label,.anm-live-top-right .anm-live-market-label{position:static;max-width:100%;margin:0} .anm-live-bottom-right{position:absolute;z-index:25;right:14px;bottom:18px;left:auto} .anm-live-bottom-right a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#fff;color:#13231b;text-decoration:none;font-size:10px;font-weight:900;box-shadow:0 7px 24px rgba(0,0,0,.22)} /* Vertical right reactions for gallery-only and synthetic promoted media. */ .anm-live-gallery-reactions{position:absolute;z-index:26;right:13px;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(-50%)} .anm-live-gallery-reactions button,.anm-live-gallery-reactions a,.anm-live-gallery-views{display:flex;width:42px;min-height:42px;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:999px;background:rgba(7,16,11,.67);backdrop-filter:blur(9px);color:#fff;text-decoration:none;font:inherit;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.18)} .anm-live-gallery-reactions i{font-size:16px}.anm-live-gallery-reactions span{font-size:9px;font-weight:850}.anm-live-gallery-reactions button.is-active{color:#ff5470}.anm-live-gallery-reactions button:disabled{opacity:.55} .anm-live-gallery-views{cursor:default} /* Old V1 positions are superseded. */ .anm-live-promo-action{display:none!important} @media(max-width:620px){ .anm-live-top-right{top:9px;right:9px;max-width:68%} .anm-live-identity-name{padding:4px 7px;font-size:9px} .anm-live-bottom-right{right:9px;bottom:11px} .anm-live-bottom-right a{padding:6px 9px;font-size:9px} .anm-live-gallery-reactions{right:8px;gap:8px} .anm-live-gallery-reactions button,.anm-live-gallery-reactions a,.anm-live-gallery-views{width:37px;min-height:37px} .anm-live-gallery-reactions i{font-size:14px}.anm-live-gallery-reactions span{font-size:8px} } /* V3 top-left controls: Explore + voluntary full stream refresh */ .anm-live-top-left{position:fixed;z-index:90;top:calc(var(--anm-sticky-header-height, 0px) + 10px);left:10px;display:flex;align-items:center;gap:5px;max-width:calc(100vw - 20px)} .anm-live-top-left a,.anm-live-top-left button{display:inline-flex;min-height:32px;align-items:center;justify-content:center;gap:5px;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,14,10,.76);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);color:#fff;text-decoration:none;font:inherit;font-size:10px;font-weight:850;line-height:1;box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer} .anm-live-top-left a:hover,.anm-live-top-left button:hover{background:rgba(9,35,22,.88)} .anm-live-top-left .anm-live-refresh{background:rgba(10,121,74,.82)} .anm-live-top-left .anm-live-refresh i{font-size:10px} .anm-live-top-left .anm-live-refresh.is-refreshing i{animation:anmLiveRefreshSpin .72s linear infinite} .anm-live-top-left .anm-live-refresh:disabled{cursor:wait;opacity:.82} @keyframes anmLiveRefreshSpin{to{transform:rotate(360deg)}} /* Old shared fixed-back element is not rendered by this page anymore. */ .anm-live-markets-page~.anm-media-fixed-back{display:none} @media(max-width:620px){ .anm-live-top-left{top:calc(var(--anm-sticky-header-height, 0px) + 7px);left:7px;gap:4px} .anm-live-top-left a,.anm-live-top-left button{min-height:29px;padding:5px 7px;font-size:9px} } @media(prefers-reduced-motion:reduce){.anm-live-top-left .anm-live-refresh.is-refreshing i{animation:none}} /* ========================================================== V4 — ONE VISUAL LANGUAGE Existing feed/update controls are the reference design. ========================================================== */ /* Seller realtime Messenger must never float over immersive Live media. */ body:has(.anm-live-markets-page) #anmSellerRealtimeGlobal, .anm-live-markets-page ~ #anmSellerRealtimeGlobal, #anmSellerRealtimeGlobal:has(~ .anm-live-markets-page){display:none!important} /* Gallery-only controls imitate the established Market Update reaction rail. */ .anm-live-gallery-reactions{right:12px;gap:8px} .anm-live-gallery-reactions button, .anm-live-gallery-reactions a, .anm-live-gallery-views{ width:48px; min-height:48px; padding:5px 3px; border:0; border-radius:50%; background:rgba(45,43,38,.86); color:#fff; box-shadow:0 3px 12px rgba(0,0,0,.18); } .anm-live-gallery-reactions i{font-size:20px;line-height:1} .anm-live-gallery-reactions span{font-size:10px;line-height:1;font-weight:800} .anm-live-gallery-reactions button.is-active{color:#ff4764} /* Organic slides have one top-right name only — no duplicate Market name/tag. */ .anm-live-top-right .anm-live-market-label{display:none!important} @media(max-width:620px){ .anm-live-gallery-reactions{right:9px;gap:7px} .anm-live-gallery-reactions button, .anm-live-gallery-reactions a, .anm-live-gallery-views{width:46px;min-height:46px} .anm-live-gallery-reactions i{font-size:19px} } /* ========================================================== V6 — ONE SHARED SLIDE / ONE SHARED REACTION RAIL media_gallery_slide.php + media-gallery.css own the UI. ========================================================== */ /* Never render the old V4 custom reaction rail / custom bottom CTA. */ .anm-live-gallery-reactions, .anm-live-bottom-right, .anm-live-promo-action{display:none!important} /* The shared action rail is the ONLY reaction rail on every Live slide. */ .anm-live-markets-page .anm-media-actions{ z-index:18; } /* * Bottom information owns the left/bottom area. * CTA stays inside this shared information block, so Read more and CTA are * siblings rather than independent overlays competing for the same pixels. */ .anm-live-markets-page .anm-media-slide__info{ z-index:12; padding-right:78px; } .anm-live-markets-page .anm-media-caption{ max-width:min(74vw,680px); } .anm-live-markets-page .anm-media-slide__cta{ position:relative; z-index:2; margin-top:8px; } /* * VIDEO CONTROL SAFE ZONE * Native