/* =========================================================
   TIME VOX – REFERENCE PAGE
   Samostatný styl. Načítá se pouze na stránce s šablonou
   "TIME VOX Reference" (page-reference.php).
   ========================================================= */

/* ---------- OFFSET POD PLOVOUCÍ HEADER ---------- */

.tvx-ref-hero {
  padding-top: 150px !important;
  padding-bottom: 20px !important;
}

/* ---------- KATEGORIE (Video / Audio / Grafika / Partneři) ---------- */

.tvx-ref-cat {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.tvx-ref-cat-head {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 22px;
  text-align: center;
}

.tvx-ref-cat-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  color: #bfe7ff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tvx-ref-cat-head h3 {
  margin: 16px 0 0;
  font-family: 'Space Grotesk', Inter, Arial, sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: -0.03em;
  color: #fff;
}

/* ---------- MŘÍŽKA LOGO DLAŽDIC ---------- */

.tvx-ref-pill-grid {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* poslední neúplný řádek se vycentruje */
  gap: 16px;
}

.tvx-ref-pill {
  flex: 0 1 240px;
  position: relative;
  height: 130px;
  display: grid;
  place-items: center;
  padding: 24px 28px;
  border-radius: 24px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* ---------- DVĚ VERZE LOGA (šedivá -mono → barevná -color) ---------- */

.tvx-ref-logo {
  max-width: 78%;
  max-height: 92px;
  object-fit: contain;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tvx-ref-logo-default {
  filter: brightness(0) invert(0.82);
}

.tvx-ref-logo-color {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  border-radius: 14px;
}

.tvx-ref-pill:hover,
.tvx-ref-pill:focus-visible,
.tvx-ref-pill.is-active {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(143, 228, 255, 0.55);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(143, 228, 255, 0.22);
}

.tvx-ref-pill:hover .tvx-ref-logo-default,
.tvx-ref-pill:focus-visible .tvx-ref-logo-default,
.tvx-ref-pill.is-active .tvx-ref-logo-default {
  opacity: 0;
}

.tvx-ref-pill:hover .tvx-ref-logo-color,
.tvx-ref-pill:focus-visible .tvx-ref-logo-color,
.tvx-ref-pill.is-active .tvx-ref-logo-color {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

/* ---------- STATICKÉ DLAŽDICE PARTNERŮ (bez ukázek) ---------- */

.tvx-ref-tile {
  flex: 0 1 240px;
  position: relative;
  height: 130px;
  display: grid;
  place-items: center;
  padding: 24px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.tvx-ref-tile:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(143, 228, 255, 0.55);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(143, 228, 255, 0.22);
}

.tvx-ref-tile:hover .tvx-ref-logo-default {
  opacity: 0;
}

.tvx-ref-tile:hover .tvx-ref-logo-color {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

/* ---------- LIGHTBOX MODAL ---------- */

.tvx-ref-modal {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tvx-ref-modal.is-open {
  display: flex;
}

.tvx-ref-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tvx-ref-modal-card {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
    rgba(7, 18, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  animation: tvxRefIn 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes tvxRefIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.tvx-ref-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.25s ease;
  z-index: 2;
}

/* hlavička modalu – vycentrované barevné logo firmy nahoře */
.tvx-ref-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 4px 44px 16px;
}

.tvx-ref-modal-logo {
  max-height: 46px;
  max-width: 70%;
  object-fit: contain;
  border-radius: 10px; /* zaoblení log s vlastním pozadím (Kores, Bitters…) */
}

.tvx-ref-modal-media {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.tvx-ref-modal-media img,
.tvx-ref-modal-media video,
.tvx-ref-modal-media iframe {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  border: 0;
}

.tvx-ref-modal-media iframe {
  aspect-ratio: 16 / 9;
  max-height: none;
}

/* ---------- AUDIO PŘEHRÁVAČ ---------- */
.tvx-ref-audio {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 26px;
  background:
    radial-gradient(120% 140% at 20% 20%, rgba(0, 220, 180, 0.10), transparent 60%),
    #071221;
  border-radius: 16px;
}

.tvx-ref-audio-player {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.tvx-ref-aplay {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  color: #06131f;
  border: 0;
  background: linear-gradient(135deg, #8fe4ff, #35d0b5);
  box-shadow: 0 8px 18px rgba(53, 208, 181, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tvx-ref-aplay:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(53, 208, 181, 0.34);
}
.tvx-ref-aplay .ic-play { display: none; }
.tvx-ref-audio.is-paused .tvx-ref-aplay .ic-play { display: block; }
.tvx-ref-audio.is-paused .tvx-ref-aplay .ic-pause { display: none; }

.tvx-ref-audio-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tvx-ref-audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tvx-ref-audio .tvx-ref-time {
  min-width: auto;
  text-align: left;
}

/* mute ikona v audiu */
.tvx-ref-audio.is-muted .tvx-ref-mute .ic-vol { display: none; }
.tvx-ref-audio.is-muted .tvx-ref-mute .ic-muted { display: block; }

/* fallback pro nativní audio (kdyby se někde použil) */
.tvx-ref-audio-wrap { padding: 46px 28px; }
.tvx-ref-audio-wrap audio { width: 100%; }

.tvx-ref-empty {
  padding: 60px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

body.tvx-modal-open {
  overflow: hidden !important;
}

/* =========================================================
   VIDEO PLAYER V MODALU (lazy-load + vlastní ovládání)
   ========================================================= */

.tvx-ref-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05101d;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tvx-ref-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- IDLE: poster + tlačítko Stáhnout --- */
.tvx-ref-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(0, 220, 180, 0.10), transparent 60%),
    #05101d;
}

.tvx-ref-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  color: #06131f;
  font-family: 'Space Grotesk', Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  background: linear-gradient(135deg, #8fe4ff, #35d0b5);
  box-shadow: 0 8px 20px rgba(53, 208, 181, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tvx-ref-download:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(53, 208, 181, 0.34);
}

/* --- LOADING --- */
.tvx-ref-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.tvx-ref-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(143, 228, 255, 0.25);
  border-top-color: #8fe4ff;
  animation: tvxSpin 0.8s linear infinite;
}

@keyframes tvxSpin {
  to { transform: rotate(360deg); }
}

/* --- VIDEO --- */
.tvx-ref-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  cursor: pointer;
}

/* --- VELKÉ STARTOVACÍ PLAY (po stažení, čeká na první spuštění) --- */
.tvx-ref-bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  display: none;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #06131f;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}

.tvx-ref-bigplay svg {
  display: block;
  transform: translateX(-2px); /* optické vycentrování play trojúhelníku (táhne doprava) */
}

.tvx-ref-bigplay:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
}

.tvx-ref-player.is-ready .tvx-ref-video {
  filter: brightness(0.7) blur(3px);
}
.tvx-ref-player.is-ready .tvx-ref-bigplay { display: flex; }
.tvx-ref-player.is-ready .tvx-ref-controls { opacity: 0; pointer-events: none; }

/* --- OVLÁDÁNÍ --- */
.tvx-ref-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  transition: opacity 0.3s ease;
}

.tvx-ref-playpause {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #06131f;
  border: 0;
  background: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tvx-ref-playpause:hover { transform: scale(1.08); }
.tvx-ref-playpause svg { display: block; width: 22px; height: 22px; }
.tvx-ref-playpause .ic-play { transform: translateX(-1px); } /* optické vycentrování */

.tvx-ref-playpause .ic-play { display: none; }
.tvx-ref-player.is-paused .tvx-ref-playpause .ic-play { display: block; }
.tvx-ref-player.is-paused .tvx-ref-playpause .ic-pause { display: none; }

.tvx-ref-progress {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  overflow: hidden;
}

.tvx-ref-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fe4ff, #35d0b5);
  transition: width 0.1s linear;
}

.tvx-ref-time {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: right;
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --- PUSTIT ZNOVU (po skončení) --- */
.tvx-ref-replay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  color: #06131f;
  font-family: 'Space Grotesk', Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  background: linear-gradient(135deg, #8fe4ff, #35d0b5);
  box-shadow: 0 8px 20px rgba(53, 208, 181, 0.28);
}

.tvx-ref-player.is-ended .tvx-ref-replay { display: inline-flex; }
.tvx-ref-player.is-ended .tvx-ref-controls { opacity: 0; pointer-events: none; }

/* ---------- HLASITOST (rozbalovací) ---------- */
.tvx-ref-volume {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tvx-ref-mute {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: transparent;
  border: 0;
  transition: background 0.2s ease;
}
.tvx-ref-mute:hover { background: rgba(255, 255, 255, 0.15); }
.tvx-ref-mute .ic-muted { display: none; }
.tvx-ref-player.is-muted .tvx-ref-mute .ic-vol { display: none; }
.tvx-ref-player.is-muted .tvx-ref-mute .ic-muted { display: block; }

.tvx-ref-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  opacity: 0;
  margin-left: 0;
  height: 6px;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: none;
  background: linear-gradient(90deg,
    #8fe4ff 0%, #35d0b5 var(--vol, 60%),
    rgba(255, 255, 255, 0.25) var(--vol, 60%));
  transition: width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}

.tvx-ref-volume.is-open .tvx-ref-volume-slider {
  width: 78px;
  opacity: 1;
  margin-left: 8px;
  pointer-events: auto;
}

.tvx-ref-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer;
}
.tvx-ref-volume-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer;
}

/* ve stavu is-ready (nahráno, čeká na spuštění) ukázat play ikonu v malém tlačítku */
.tvx-ref-player.is-ready .tvx-ref-playpause .ic-play { display: block; }
.tvx-ref-player.is-ready .tvx-ref-playpause .ic-pause { display: none; }

/* =========================================================
   PŘEBITÍ ČERVENÝCH STAVŮ TÉMATU (Hello Elementor)
   Platí JEN na stránce referencí (.tvx-ref-page).
   Téma dává tlačítkům na :hover I :focus červené POZADÍ (#c36)
   i text – proto to bylo červené i po kliknutí (prvek zůstane
   ve stavu :focus). Tady rušíme pozadí, text, okraj i outline.
   ========================================================= */

/* žádný červený focus/outline */
.tvx-ref-page a:focus,
.tvx-ref-page a:focus-visible,
.tvx-ref-page a:active,
.tvx-ref-page button:focus,
.tvx-ref-page button:focus-visible,
.tvx-ref-page button:active {
  outline: none !important;
}

/* PILULKY + DLAŽDICE – teal glass i na hover/focus/active, nikdy červené */
.tvx-ref-pill:hover,
.tvx-ref-pill:focus,
.tvx-ref-pill:focus-visible,
.tvx-ref-pill:active,
.tvx-ref-tile:hover,
.tvx-ref-tile:focus,
.tvx-ref-tile:focus-visible,
.tvx-ref-tile:active {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(143, 228, 255, 0.55) !important;
  color: inherit !important;
}

/* barevné logo ať naskočí i při :focus (po kliknutí) */
.tvx-ref-pill:focus .tvx-ref-logo-default,
.tvx-ref-tile:focus .tvx-ref-logo-default { opacity: 0; }
.tvx-ref-pill:focus .tvx-ref-logo-color,
.tvx-ref-tile:focus .tvx-ref-logo-color { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }

/* PLAY / PAUZA – bílé, teal hover, nikdy červené */
.tvx-ref-playpause,
.tvx-ref-playpause:focus,
.tvx-ref-playpause:active {
  background: #fff !important;
  color: #06131f !important;
  border-color: transparent !important;
}
.tvx-ref-playpause:hover {
  background: #8fe4ff !important;
  color: #06131f !important;
}

/* MUTE / HLASITOST – bílé, nikdy červené */
.tvx-ref-mute,
.tvx-ref-mute:hover,
.tvx-ref-mute:focus,
.tvx-ref-mute:active {
  color: #fff !important;
  border-color: transparent !important;
  background-color: transparent !important;
}
.tvx-ref-mute:hover { background-color: rgba(255, 255, 255, 0.15) !important; }

/* STÁHNOUT / PUSTIT ZNOVU – teal gradient vždy */
.tvx-ref-download,
.tvx-ref-download:hover,
.tvx-ref-download:focus,
.tvx-ref-download:active,
.tvx-ref-replay,
.tvx-ref-replay:hover,
.tvx-ref-replay:focus,
.tvx-ref-replay:active,
.tvx-ref-aplay,
.tvx-ref-aplay:hover,
.tvx-ref-aplay:focus,
.tvx-ref-aplay:active {
  background: linear-gradient(135deg, #8fe4ff, #35d0b5) !important;
  color: #06131f !important;
  border-color: transparent !important;
}

/* VELKÉ PLAY – bílé vždy */
.tvx-ref-bigplay,
.tvx-ref-bigplay:focus,
.tvx-ref-bigplay:active {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #06131f !important;
  border-color: transparent !important;
}
.tvx-ref-bigplay:hover { background: #fff !important; color: #06131f !important; }

/* ZAVÍRACÍ KŘÍŽEK – bílý, teal hover, nikdy červený */
.tvx-ref-modal-close,
.tvx-ref-modal-close:focus,
.tvx-ref-modal-close:active {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.tvx-ref-modal-close:hover {
  background: rgba(143, 228, 255, 0.22) !important;
  color: #fff !important;
  border-color: #8fe4ff !important;
}

/* HEADER (menu tlačítko) – nepřebarvovat červeně, nechat jeho pozadí ze style.css */
.tvx-ref-page .tvx-menu-toggle:hover,
.tvx-ref-page .tvx-menu-toggle:focus,
.tvx-ref-page .tvx-menu-toggle:active {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* odkazy v menu a footeru */
.tvx-ref-page .tvx-menu-panel a:hover,
.tvx-ref-page .tvx-menu-panel a:focus,
.tvx-ref-page .tvx-footer-nav a:hover,
.tvx-ref-page .tvx-footer-nav a:focus {
  background-color: transparent !important;
  color: #bfe7ff !important;
}

/* ---------- VYCENTROVANÝ OBSAH ---------- */

.tvx-ref-hero .tvx-section-head {
  text-align: center;
}

.tvx-ref-hero .tvx-section-head p {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   VYNUCENÉ VYCENTROVÁNÍ IKON V TLAČÍTKÁCH
   Téma dává tlačítkům vlastní padding a box-sizing, což
   ikony odtlačuje ze středu. Tady to srovnáme.
   ========================================================= */

.tvx-ref-modal-close,
.tvx-ref-playpause,
.tvx-ref-mute,
.tvx-ref-aplay {
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  text-align: center;
}

/* .tvx-ref-bigplay NENÍ v seznamu výše schválně - jeho zobrazení řídí
   .tvx-ref-player.is-ready (viz výš), "display: flex !important" by ho
   nutilo být vidět pořád, i během přehrávání. */
.tvx-ref-bigplay {
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  text-align: center;
}

.tvx-ref-modal-close svg,
.tvx-ref-playpause svg,
.tvx-ref-mute svg,
.tvx-ref-aplay svg,
.tvx-ref-bigplay svg {
  display: block;
}
.tvx-ref-aplay .ic-play { transform: translateX(1px); } /* optické vycentrování */

/* zavírací křížek je textový znak – srovnat na střed */
.tvx-ref-modal-close {
  line-height: 1 !important;
  font-size: 16px;
}

/* ---------- ODKAZ NA WEB PARTNERA (pod médiem) ---------- */

.tvx-ref-modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.tvx-ref-modal-footer:empty {
  margin-top: 0;
}

.tvx-ref-weblink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  font-family: 'Space Grotesk', Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #bfe7ff !important;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.tvx-ref-weblink:hover {
  transform: translateY(-2px);
  color: #06131f !important;
  background: linear-gradient(135deg, #8fe4ff, #35d0b5);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(53, 208, 181, 0.28);
}

.tvx-ref-weblink svg { display: block; }

/* žádná červená z tématu */
.tvx-ref-weblink:focus,
.tvx-ref-weblink:active,
.tvx-ref-weblink:visited {
  color: #bfe7ff !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  outline: none !important;
}

/* -------------------------------------- MOBILE ---------------------------------- */

@media (max-width: 819px) {
  .tvx-ref-hero { padding-top: 130px !important; }

  .tvx-ref-pill-grid {
    gap: 10px;
  }

  .tvx-ref-pill,
  .tvx-ref-tile {
    flex: 0 1 calc(50% - 5px);   /* 2 dlaždice na řádek, lichá se vycentruje */
    height: 108px;
    padding: 18px;
    border-radius: 20px;
  }

  .tvx-ref-logo { max-height: 70px; max-width: 80%; }

  .tvx-ref-pill.tvx-glow-active { transform: none !important; }
  .tvx-ref-pill.tvx-glow-active .tvx-ref-logo-default { opacity: 0; }
  .tvx-ref-pill.tvx-glow-active .tvx-ref-logo-color   { opacity: 1; }

  /* VIDEO NA MOBILU */
  /* velké play skryté – stačí play dole */
  .tvx-ref-bigplay { display: none !important; }

  /* ve stavu is-ready ukázat spodní ovládání (aby šlo spustit) */
  .tvx-ref-player.is-ready .tvx-ref-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* jemnější blur na mobilu */
  .tvx-ref-player.is-ready .tvx-ref-video { filter: brightness(0.75) blur(2px); }

  .tvx-ref-controls { gap: 8px; padding: 12px; }
  .tvx-ref-time { min-width: 74px; font-size: 12px; }
  .tvx-ref-volume.is-open .tvx-ref-volume-slider { width: 60px; }
  .tvx-ref-modal-logo { max-height: 40px; }

  /* AUDIO na mobilu */
  .tvx-ref-audio { padding: 24px 16px; min-height: 130px; }
  .tvx-ref-audio-player { gap: 14px; }
  .tvx-ref-aplay { width: 52px; height: 52px; }
}