/* OMT TikTok Feed — Frontend CSS */

.omt-tiktok-widget {
    margin-bottom: 1rem;
}

.omt-tiktok-widget .omt-widget__title {
    margin-bottom: 4px !important;
}

.omt-tt-feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Setas discretas */
.omt-tt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--omt-gray-400, #aaa);
    padding: 0;
    transition: color 0.2s ease;
}

.omt-tt-nav:hover:not(:disabled) {
    color: var(--omt-gray-900, #333);
}

.omt-tt-nav:disabled {
    opacity: 0.2;
    cursor: default;
}

/* Player */
.omt-tt-player {
    width: 100%;
    position: relative;
}

.omt-tt-slide {
    display: none;
    width: 100%;
}

.omt-tt-slide.is-active {
    display: block;
}

.omt-tt-slide iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 6px;
    display: block;
    overflow: hidden;
}

/* Contador */
.omt-tt-counter {
    font-size: 0.7rem;
    color: var(--omt-gray-400, #aaa);
    text-align: center;
    line-height: 1;
}

/* Botao seguir — discreto */
.omt-tt-follow {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--omt-gray-600, #555) !important;
    padding: 4px 0 0;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}

.omt-tt-follow:hover {
    color: #000 !important;
}

/* ========================================================
   CORREÇÃO ESPECÍFICA PARA TV OMT - EVITAR CONFLITO COM CSS DO YOUTUBE
   ======================================================== */

/* Isolar o widget TikTok na página TV OMT */
.omt-tv-grid + .omt-sidebar .omt-tiktok-widget,
.omt-tv-grid ~ .omt-sidebar .omt-tiktok-widget {
    position: relative !important;
    z-index: 10 !important;
}

/* Garantir que o iframe do TikTok não seja afetado por estilos do YouTube */
.omt-tiktok-widget iframe {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    border: none !important;
    border-radius: 6px !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Evitar sobreposição de elementos */
.omt-tt-slide {
    position: static !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Container do slide para isolar completamente */
.omt-tt-slide > div:first-child {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
}

/* Específico para página TV OMT - evitar conflitos com o grid do YouTube */
body.category-tv-omt .omt-tiktok-widget,
body.category-tv .omt-tiktok-widget {
    clear: both !important;
    margin-top: 2rem !important;
    position: relative !important;
    z-index: 100 !important;
    isolation: isolate !important; /* Criar novo stacking context */
}

/* Resetar possíveis heranças do CSS do YouTube */
body.category-tv-omt .omt-tt-slide iframe,
body.category-tv .omt-tt-slide iframe {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

/* Proteger contra sobreposição de texto */
.omt-tiktok-widget .omt-tt-player {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate !important;
}

/* Garantir que o contador e navegação fiquem acima */
.omt-tiktok-widget .omt-tt-counter,
.omt-tiktok-widget .omt-tt-nav {
    position: relative !important;
    z-index: 10 !important;
}

/* Evitar conflitos com elementos flutuantes */
body.category-tv-omt .omt-tiktok-widget::before,
body.category-tv .omt-tiktok-widget::before {
    content: '';
    display: block;
    clear: both;
    height: 1px;
    margin-bottom: -1px;
}

/* Reset específico para iframes do TikTok */
.omt-tt-slide iframe[src*="tiktok.com"] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    border: none !important;
    border-radius: 6px !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 1 !important;
}