/* VOTUJ Sponsor UI - shared CSS for presentation + user surfaces */

/* ===== STRIP (sticky/idle/break) ===== */
.sp-strip {
    width: 100%;
    height: var(--sp-height, 70px);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    position: relative;
    z-index: 50;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sp-strip .sp-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 100%;
    padding: 6px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-strip .sp-track::-webkit-scrollbar { display: none; }
.sp-strip .sp-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--sp-height, 70px) - 16px);
    /* Pevná minimálna šírka „chlievika" — aj malé logá sa zobrazia
       roztiahnuté do celej výšky, nie ako miniatúrka v rohu. */
    min-width: 120px;
    padding: 4px 12px;
    background: #fff;
    border-radius: 6px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.5s ease, transform 0.3s ease;
    cursor: pointer;
    /* Anti-flash pri loadovaní obrázka: kým <img> nedohrá, tile je
       neviditeľný (žiadne biele pozadie bez loga). JS pridá .sp-loaded
       až po `load` evente. */
    opacity: 0;
}
.sp-strip .sp-item.sp-loaded { opacity: 1; }
.sp-strip .sp-item img {
    /* Logá vždy vyplnia výšku chlievika; pomer strán zachová object-fit. */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.sp-strip .sp-item:hover { transform: scale(1.05); }

.sp-strip .sp-single {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sp-strip .sp-single .sp-item {
    position: absolute;
    pointer-events: none;
    /* základný štart: schované */
}
.sp-strip .sp-single .sp-item.active {
    pointer-events: auto;
}
/* === CAROUSEL: cross-fade (plynulý fade-in/out) === */
.sp-strip.sp-mode-carousel .sp-single .sp-item {
    opacity: 0;
    transition: opacity 0s linear 0.75s;
    z-index: 1;
}
.sp-strip.sp-mode-carousel .sp-single .sp-item.active.sp-loaded {
    opacity: 1;
    transition: opacity 0.6s ease 0s;
    z-index: 2;
}
/* === SLIDESHOW: horizontálny slide (logá sa „posúvajú" cez plochu) === */
.sp-strip.sp-mode-slideshow .sp-single .sp-item {
    opacity: 0;
    transform: translateX(60%);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.4,.0,.2,1);
    z-index: 1;
}
.sp-strip.sp-mode-slideshow .sp-single .sp-item.active.sp-loaded {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}
.sp-strip.sp-mode-slideshow .sp-single .sp-item.sp-leaving {
    opacity: 0;
    transform: translateX(-60%);
    z-index: 2;
}

/* ===== ROLLER / MARQUEE ===== */
.sp-strip .sp-roller {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
}
.sp-strip .sp-roller-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding: 6px 0;
    width: max-content;
    /* GPU compositing layer — transform updates zí JS rAF loopú
       (žiadna CSS @keyframes animácia → žiadny restart
       → žiadny vizuálny reset pozície). */
    will-change: transform;
    backface-visibility: hidden;
}
.sp-strip .sp-roller-inner img {
    /* Force layer for each logo — prevents per-image repaints when
       images decode lazily during scroll. Veľkosť dedí z .sp-item. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Marquee animácia je teraz JS-driven (rAF), keyframes nie sú
   potrebné. Pre sístotu fallback aj tak nechávame definíciu — ak by
   ju pôvodne používal externý kód, neexploduje. */
@keyframes sp-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--sp-shift, 50%)), 0, 0); }
}

/* === ROLLER: čisté kontinuálne rolovanie bez extra efektov === */
/* (žiadne dodatočné animácie — len zdieľaný marquee scroll) */

/* === MARQUEE: rolovanie + logo v strede sa jemne zoomne ===
   JS priebežne pridáva triedu .sp-center logu, ktoré je práve najbližšie
   horizontálnemu stredu stripu. Tranzícia je krátka (250ms) aby zoom
   plynulo prešiel z jedného loga na susedné keď scroll postupuje.

   Aby zväčšené logo neprekrývalo susedov, v marquee móde zväčšujeme
   medzeru medzi položkami (gap) — tým získa zoom dosť priestoru
   po oboch stranách. transform-origin: center => rastie symetricky
   z obidvoch strán. */
.sp-strip.sp-mode-marquee .sp-track,
.sp-strip.sp-mode-marquee .sp-roller-inner {
    gap: 56px;
}
.sp-strip.sp-mode-marquee .sp-roller-inner .sp-item {
    /* Dlhší, mäkký prechod aby sa zoom plynule rozbehol/utlmil pri
       prechode loga cez horizontálny stred stripu. */
    transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1);
    transform-origin: center center;
    will-change: transform;
}
.sp-strip.sp-mode-marquee .sp-roller-inner .sp-item.sp-center {
    transform: scale(1.18);
    z-index: 3;
}
/* Marker triedy pre seamless wrap — JS na 1 frame vypne transition
   keď preskakuje sp-center triedu medzi DOM-duplikátmi rovnakého loga
   (na konci jedného cyklu marquee). */
.sp-strip.sp-mode-marquee .sp-roller-inner .sp-item.sp-no-trans {
    transition: none !important;
}

/* ===== CORNER WATERMARK (presentation only) ===== */
.sp-corner {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: var(--sp-corner-size, 80px);
    height: var(--sp-corner-size, 80px);
    z-index: 40;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    pointer-events: auto;
}
.sp-corner .sp-item {
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    text-decoration: none;
}
.sp-corner .sp-item.active { opacity: 1; }
.sp-corner .sp-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ===== FULL BREAK (presentation, plays during sponsors_break) ===== */
.sp-break {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a0a1a, #1a0a2a);
    color: #fff;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 40px;
}
.sp-break-inner {
    width: 100%;
    max-width: 1400px;
    text-align: center;
}
.sp-break-title {
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sp-break-subtitle {
    font-size: clamp(14px, 1.4vw, 22px);
    color: rgba(255,255,255,0.75);
    margin-bottom: 28px;
}
.sp-break-grid {
    display: grid;
    /* Driven by sp-break-layout-* + CSS vars set by JS:
       --sp-break-min  – min tile width (logo size)
       --sp-break-cols – 'auto-fit' or fixed integer */
    grid-template-columns: repeat(var(--sp-break-cols, auto-fit), minmax(var(--sp-break-min, 220px), 1fr));
    gap: 20px;
}
/* layout: row – jeden vodorovný riadok, loga vedľa seba */
.sp-break-layout-row .sp-break-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.sp-break-layout-row .sp-break-tile {
    width: var(--sp-break-min, 220px);
    aspect-ratio: 1.6;
}
/* layout: featured – prvé logo veľké, ostatné menšie pod ním */
.sp-break-layout-featured .sp-break-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--sp-break-min, 220px), 1fr));
    gap: 16px;
}
.sp-break-layout-featured .sp-break-tile:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 2.6;
}
.sp-break-layout-featured .sp-break-tile:first-child img { max-height: 72%; }

/* layout: carousel – horizontálne scrollovateľný pás (mobil-friendly) */
.sp-break-layout-carousel .sp-break-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
}
.sp-break-layout-carousel .sp-break-tile {
    flex: 0 0 var(--sp-break-min, 220px);
    aspect-ratio: 1.6;
    scroll-snap-align: center;
}

/* Backgrounds */
.sp-break-bg-gradient { background: linear-gradient(135deg, #0a0a1a, #1a0a2a); }
.sp-break-bg-dark     { background: #0a0a0e; }
.sp-break-bg-light    { background: #f4f5fa; color: #1a1a2a; }
.sp-break-bg-light .sp-break-title {
    background: linear-gradient(135deg, #4834d4, #6c5ce7);
    -webkit-background-clip: text;
    background-clip: text;
}
.sp-break-bg-light .sp-break-subtitle { color: rgba(0,0,0,0.6); }
.sp-break-bg-brand    {
    background: linear-gradient(135deg, var(--brand-1, #6c5ce7), var(--brand-2, #a29bfe));
}
.sp-break-bg-transparent { background: transparent !important; }

/* Tile style variants */
.sp-break-tile {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    aspect-ratio: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.sp-break-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(108,92,231,0.4); }
.sp-break-tile img {
    max-width: 100%;
    max-height: 75%;
    object-fit: contain;
}
.sp-break-tile-flat .sp-break-tile {
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
}
.sp-break-tile-rounded .sp-break-tile { border-radius: 28px; }
.sp-break-tile-minimal .sp-break-tile {
    background: transparent;
    box-shadow: none;
    padding: 8px;
}
.sp-break-tile-minimal .sp-break-tile img { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.sp-break-tile-minimal .sp-break-name { color: rgba(255,255,255,0.85); }
.sp-break-bg-light.sp-break-tile-minimal .sp-break-name { color: rgba(0,0,0,0.65); }
.sp-break-name {
    margin-top: 12px;
    font-size: 14px;
    color: #2d3436;
    font-weight: 600;
}
/* Animations */
.sp-break-anim-pop   .sp-break-tile { animation: sp-pop   0.6s ease both; }
.sp-break-anim-fade  .sp-break-tile { animation: sp-fade  0.6s ease both; }
.sp-break-anim-slide .sp-break-tile { animation: sp-slide 0.6s cubic-bezier(.2,.8,.2,1) both; }
.sp-break-anim-none  .sp-break-tile { animation: none; }
@keyframes sp-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sp-slide {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== ADMIN MINI PREVIEW =====
   Used in admin → Sponzori → Zobrazenie. Wraps a real .sp-break tree but
   strips fixed positioning so it lives inline as a scaled-down preview card.
   All modifier classes (sp-break-bg-*, sp-break-layout-*, sp-break-tile-*,
   sp-break-anim-*) keep working unchanged. */
.sp-break-mini.sp-break {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 0;
    padding: 4%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.sp-break-mini .sp-break-title    { font-size: clamp(14px, 2.4vw, 26px); margin-bottom: 4px; }
.sp-break-mini .sp-break-subtitle { font-size: clamp(10px, 1.2vw, 14px); margin-bottom: 12px; }
.sp-break-mini .sp-break-grid     { gap: 10px; }
.sp-break-mini .sp-break-tile     { padding: 8px; aspect-ratio: 1.6; border-radius: 10px; }
.sp-break-mini .sp-break-name     { font-size: 11px; margin-top: 6px; }
.sp-break-mini.sp-break-tile-rounded .sp-break-tile { border-radius: 18px; }
.sp-break-mini-empty {
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.65); font-size:13px;
    width:100%; height:100%;
    border:1px dashed rgba(255,255,255,0.2); border-radius:10px;
}
.sp-break-mini-frame {
    position:relative; border-radius:14px; overflow:hidden;
    background:#0a0a14;
    /* "Screen" chrome to make it feel like a TV/monitor */
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.sp-break-mini-frame::before {
    content:''; display:block; height:18px;
    background:linear-gradient(180deg,#1a1a26,#0e0e16);
    border-bottom:1px solid rgba(255,255,255,0.06);
    position: relative; z-index: 2;
}
.sp-break-mini-frame::after {
    content:'● ● ●'; position:absolute; top:2px; left:10px;
    font-size:10px; letter-spacing:3px; color:#444; line-height:14px;
    z-index: 3;
}
/* 16:9 monitor-like stage, includes the 18px header bar at top. */
.sp-break-mini-frame-169 .sp-break-mini-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.sp-break-mini-stage { position: relative; }
.sp-break-mini-caption {
    text-align:center; font-size:11px; color:var(--text-muted, #888);
    margin-top:6px;
}

/* ===== USER (mobile) sticky strip in footer ===== */
.sp-user-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}
.sp-user-footer.sp-strip {
    height: var(--sp-height, 56px);
    transition: height 0.5s ease;
}
.sp-user-footer .sp-item {
    height: calc(var(--sp-height, 56px) - 16px);
    padding: 4px 8px;
}
.sp-user-footer .sp-item img {
    max-width: 100px;
}

/* ===== USER waiting / interstitial slideshow ===== */
.sp-user-slideshow {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 140px;
    margin: 24px auto 0;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
}
.sp-user-slideshow .sp-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.6s ease;
    text-decoration: none;
    cursor: pointer;
}
.sp-user-slideshow .sp-item.active { opacity: 1; }
.sp-user-slideshow .sp-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    pointer-events: none;
}

.sp-user-interstitial {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 24px;
}
.sp-user-interstitial-label {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sp-user-interstitial-logo {
    background: #fff;
    border-radius: 16px;
    padding: 24px 32px;
    max-width: 80vw;
    max-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: sp-pop 0.4s ease both;
}
.sp-user-interstitial-logo img {
    max-width: 100%;
    max-height: 30vh;
    object-fit: contain;
}
.sp-user-interstitial-skip {
    margin-top: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* Add bottom padding when user footer strip is active */
body.sp-has-footer { padding-bottom: var(--sp-user-footer-h, 56px); transition: padding-bottom 0.5s ease; }