/* Topscore Extra - Home popup (Rajagiri-style sliding modal). Accent matches theme #0d5ef4. */
/* --ts-popup-ratio = container shape (width/height). 3/4 = portrait announcement.
   --ts-popup-w tracks viewport height too, so it stays portrait and never overflows. */
:root{--ts-popup-accent:#0d5ef4;--ts-popup-ratio:3/4;--ts-popup-w:min(94vw,62vh,520px)}
#ts-popup-modal{position:fixed;inset:0;z-index:2147483647;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.4);opacity:0;transition:opacity .3s ease}
#ts-popup-modal.is-open{display:flex;opacity:1}
/* Glassmorphism dialog: frosted translucent panel that blends with the page behind */
#ts-popup-modal .ts-popup-dialog{position:relative;width:var(--ts-popup-w);max-width:var(--ts-popup-w);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.35);border-radius:14px;box-shadow:0 12px 45px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-40px);transition:transform .35s ease}
#ts-popup-modal.is-open .ts-popup-dialog{transform:translateY(0)}
/* padding: top right/left bottom -- increase the first value for more gap above the image */
#ts-popup-modal .ts-popup-body{padding:22px 6px 6px}
#ts-popup-modal .ts-popup-close{position:absolute;top:10px;right:10px;z-index:10;width:36px;height:36px;padding:0;border:none;border-radius:50%;background:var(--ts-popup-accent);color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:background .2s,transform .2s}
#ts-popup-modal .ts-popup-close:hover{transform:scale(1.08);filter:brightness(1.08)}
/* Portrait fixed-shape box: every slide is the same size, image fits inside (no modal resizing) */
#ts-popup-modal .ts-popup-slide{width:100%;aspect-ratio:var(--ts-popup-ratio)}
#ts-popup-modal .ts-popup-slide a{display:block;height:100%}
#ts-popup-modal .ts-popup-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;background:transparent}
/* Slick core (scoped, so no external slick.css needed) */
#ts-popup-modal .ts-popup-slider{position:relative;display:block;opacity:0}
#ts-popup-modal .ts-popup-slider.slick-initialized{opacity:1}
#ts-popup-modal .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
#ts-popup-modal .slick-track{position:relative;top:0;left:0;display:block}
#ts-popup-modal .slick-track:before,#ts-popup-modal .slick-track:after{display:table;content:''}
#ts-popup-modal .slick-track:after{clear:both}
#ts-popup-modal .slick-slide{float:left;min-height:1px}
#ts-popup-modal .slick-loading .slick-track{visibility:hidden}
/* Arrows (CSS chevrons - no icon font, avoids missing-glyph bug) */
#ts-popup-modal .ts-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:rgba(13,94,244,.85);cursor:pointer;font-size:0;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:background .2s}
#ts-popup-modal .ts-arrow:hover{background:var(--ts-popup-accent)}
#ts-popup-modal .ts-arrow:before{content:'';display:block;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff}
#ts-popup-modal .ts-prev{left:10px!important;right:auto!important}
#ts-popup-modal .ts-prev:before{transform:rotate(-135deg);margin-left:3px}
#ts-popup-modal .ts-next{right:10px!important;left:auto!important}
#ts-popup-modal .ts-next:before{transform:rotate(45deg);margin-right:3px}
/* Dots */
#ts-popup-modal .slick-dots{display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:10px 0 4px}
#ts-popup-modal .slick-dots li{font-size:0;line-height:0}
#ts-popup-modal .slick-dots button{width:10px;height:10px;padding:0;border:none;border-radius:50%;background:#cfd6e4;cursor:pointer;font-size:0}
#ts-popup-modal .slick-dots .slick-active button{background:var(--ts-popup-accent)}
/* Solid (non-glass) variant - active when #ts-popup-modal has class "ts-popup-solid" */
#ts-popup-modal.ts-popup-solid{background:rgba(0,0,0,.55)}
#ts-popup-modal.ts-popup-solid .ts-popup-dialog{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(0,0,0,.08);box-shadow:0 12px 45px rgba(0,0,0,.35)}
#ts-popup-modal.ts-popup-solid .ts-popup-img{background:#fff}
/* Responsive */
@media(max-width:768px){
#ts-popup-modal{padding:12px}
#ts-popup-modal .ts-popup-close{width:30px;height:30px;font-size:18px;top:8px;right:8px}
#ts-popup-modal .ts-arrow{width:24px;height:24px}
#ts-popup-modal .ts-arrow:before{width:6px;height:6px}
}