/* ============================================================
   WOW TV ADDONS — Estilos para exportação
   Versão 1.0.0

   Copie este arquivo no seu tema ou importe-o no CSS principal.
   Depende de um framework de grid compatível com classes Bulma
   (columns, column, is-3, is-6, etc.) ou Bootstrap equivalente.
   ============================================================ */

/* ============================================================
   6. POSTS — Grid e Lista (base comum a todos os widgets)
   ============================================================ */

.posts .post-item{display:flex;align-items:flex-start;position:relative}
.posts .post-item .post-content{align-self:center;flex-basis:auto;flex-grow:1;flex-shrink:1}
.posts .image:not(.is-fit){height:100%;display:block;overflow:hidden;position:relative}
.posts .image:not(.is-fit):hover .post-thumb{transform:scale(1.1);-webkit-transform:scale(1.1);-ms-transform:scale(1.1)}
.posts .image:not(.is-fit) .post-thumb{width:100%;height:100%;position:relative;overflow:hidden;transition:-webkit-transform .3s;-webkit-transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;vertical-align:top}
.posts .is-fit{width:100%;overflow:hidden;margin:0;padding-top:56.25%;position:relative;background:#ccc}
.posts .is-fit, .post-thumbnail{background-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 100%);background-repeat:no-repeat;background-size:800px 300px;display:inline-block;position:relative;animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-name:placeholderShimmer;-webkit-animation-name:placeholderShimmer;animation-timing-function:linear;-webkit-animation-timing-function:linear}
.posts .is-fit .post-thumb{width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;color:transparent;transform:translate(-50%, -50%);transition:-webkit-transform .3s;-webkit-transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}
.posts .is-fit:hover .post-thumb{transform:translate(-50%, -50%) scale(1.1);-webkit-transform:translate(-50%, -50%) scale(1.1);-ms-transform:translate(-50%, -50%) scale(1.1)}
.posts .is-fit.no-scale:hover .post-thumb{transform:translate(-50%, -50%)}
.posts .is-rounded.is-fit, .posts .is-squared.is-fit{padding-top:100%}

.posts .is-title a{width:100%;display:block}
.posts .widget-title{margin-bottom:2rem}
.posts .post-list .image{width:100px}
.posts .post-block{flex-wrap:wrap}
.posts .post-block .post-content{margin-top:.5rem}
.posts .post-block .image, .posts .post-block figure{width:100%}
.posts .post-content-info, .posts .post-tile .post-text, .posts .post-tile .post-footer{display:none}
.posts .post-link{display:block}
.posts .overlay-content + .post-link{width:100%;height:100%;position:absolute;top:0;z-index:2}
.posts .post-tile-list .is-vertical .post-item + .post-item, .zm-tabs-content li .post-item + .post-item{margin-top:1.5rem}
.posts .post-tile .is-over{height:100%}
.posts .post-journal{margin:0 !important}
.posts .post-journal .journal-big-tile .post-categories{position:absolute;display:block;top:1rem;left:1rem;z-index:100}
.posts .post-journal .tag:not(body):hover{filter:brightness(95%)}
.posts .post-item.post-list.post-grid figure>.tag{display:none}
.posts .post-item figure a{display:block}
.posts .tag:hover{text-decoration:none}
.posts .hat{font-family:serif;font-size:.875rem;display:block}
.posts .hat.light{color:#fff !important}


.posts .post-item {
    display: flex;
    align-items: flex-start;
    position: relative;
}
.posts .post-item .post-content {
    align-self: center;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}
.posts .image:not(.is-fit) {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
}
.posts .image:not(.is-fit):hover .post-thumb { transform: scale(1.1); }
.posts .image:not(.is-fit) .post-thumb {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .3s;
    vertical-align: top;
}
.posts .is-fit {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding-top: 56.25%;
    position: relative;
    background: #ccc;
}
.posts .is-fit .post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%; left: 50%;
    color: transparent;
    transform: translate(-50%,-50%);
    transition: transform .3s;
}
.posts .is-fit:hover .post-thumb {
    transform: translate(-50%,-50%) scale(1.1);
}
.posts .is-fit.no-scale:hover .post-thumb {
    transform: translate(-50%,-50%);
}
.posts .is-title a { width: 100%; display: block; }
.posts .post-list .image { width: 100px; }
.posts .post-block { flex-wrap: wrap; }
.posts .post-block .post-content { margin-top: .5rem; }
.posts .post-block .image,
.posts .post-block figure { width: 100%; }
.posts .post-link { display: block; }
.posts .overlay-content + .post-link {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
}
.post-list > figure { margin-right: 1rem; }

/* Estilo claro (fundo escuro) */
.posts-dark .posts .is-fit { background: none !important; }
.posts-dark .is-title a { color: #fff !important; }
.posts-dark .is-title a:hover { color: #ffd800 !important; }
.posts-dark .color-3rd { color: rgba(255,255,255,.7); }
.posts-dark .button { border-color: rgba(255,255,255,.7); color: #fff; }
.posts-dark .image { background: transparent !important; }

/* Metadados do post */
.post-meta { font-size: .75rem; margin-top: .25rem; }
.post-meta > span { margin-right: .5rem; }
.post-meta > span:last-of-type { margin-right: 0; }
.post-meta i { margin-right: 4px; }

/* Overlays de conteúdo sobre imagem */
.overlay-gradient {
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.9) 100%);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: -1px; left: 0;
    transition: background-color .25s ease;
}
.overlay-content {
    text-align: left;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    z-index: 3;
}



/* ============================================================
   1. VIDEO PLAYER — Container e iframe
   ============================================================ */

.video-embed {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: 1;
}
.video-embed iframe,
.video-embed .video-js {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* ============================================================
   2. VIDEO PLAYER — Tela "Sem sinal"
   ============================================================ */

.video-offline {
    display: none;
    padding-bottom: 56.25% !important;
    z-index: 9998;
}
.video-offline .info {
    width: 100%;
    font-size: 3rem;
    text-align: center;
    font-weight: 700;
    line-height: 3rem;
    position: absolute;
    z-index: 99992;
    color: #fff;
    top: 50%;
    margin-top: -48px;
}
.video-offline .info span { font-size: 1rem; }
.video-offline .info > span { display: block; }
.video-offline .layer {
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}
.video-offline .tv-static {
    background-image: repeating-radial-gradient(circle at 17% 32%, rgb(100,100,100), black 0.00085px);
    top: 0; bottom: 0; right: 0; left: 0;
    position: absolute;
    z-index: 99991;
}
.animation-static { animation: static 0.1s linear infinite; }
@keyframes static {
    from { background-size: 48.56% 50%; }
    to   { background-size: 43.9% 50.1%; }
}


/* ============================================================
   3. VIDEO PLAYER — Overlays de interação
   ============================================================ */

/* Camada escura 20% (visível no estado inicial e pausado) */
.player-dark-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 50;
    pointer-events: none;
}

/* Wrapper central — contém o botão play */
.player-overlay-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    z-index: 99;
    width: 85%;
    pointer-events: none;
}
.player-overlay-center > * { pointer-events: auto; }

/* Botão Play centralizado */
.player-play-btn {
    cursor: pointer;
    transition: transform .15s ease;
    flex-shrink: 0;
    line-height: 0;
}
.player-play-btn:hover { transform: scale(1.08); }
.player-play-btn svg {
    width: 90px;
    height: 90px;
    filter: drop-shadow(0 3px 14px rgba(0,0,0,.65));
}

/* Overlay de programação — posicionado a 65% do topo */
.player-schedule-overlay {
    position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 98;
    padding: .1rem 1.5rem;
}
.player-schedule-overlay .player-schedule-label {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: .25rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
.player-schedule-overlay .player-schedule-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
    display: block;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Título acima do player */
.player-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.player-title .player-title-label {
    font-size: .7rem;
    font-weight: 600;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: .2rem;
}
.player-title .player-title-program { display: block; }


/* ============================================================
   4. VIDEO PLAYER — Cabeçalho de vídeo (video-header)
   ============================================================ */

.video-header { position: relative; }
.video-header::before {
    background: #111;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    content: "";
}
.video-header .column.is-4 { position: relative; }
.video-header,
.video-header * { color: rgba(255,255,255,.8) !important; }

/* Lista de players múltiplos */
.video-player-list { padding: 1rem; }
.video-player-list .post-video { cursor: pointer; }
.video-player-list-hor {
    padding: 1.5rem;
    overflow: hidden;
    overflow-y: auto;
    max-height: 469px;
}
.video-player-list-hor .post-item + .post-item { margin-top: 1.5rem; }
.video-player-hor .video-player-list-hor { display: none; }


/* ============================================================
   5. WIDGET VÍDEOS — Itens da grade/lista
   ============================================================ */

.post-video .post-thumb { height: auto; padding-top: 0; }
.post-video .image:hover .video-play-icon { opacity: 1; }
.post-video .image:hover .video-darkener { opacity: .3; }

.post-video .video-darkener {
    background-color: #000;
    width: 100%;
    height: 100%;
    transition: opacity .1s linear;
    position: absolute;
    bottom: 0; left: 0;
    opacity: 0;
    z-index: 10;
}
.post-video .video-duration {
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .75rem;
    position: absolute;
    bottom: 5px; right: 5px;
    padding: 0 5px;
    z-index: 11;
}
.post-video .video-play-icon {
    width: 12.44%;
    height: 42%;
    transform: translateX(-50%) translateY(-50%);
    transition: opacity .1s linear;
    position: absolute;
    fill: #fff;
    opacity: 0;
    left: 50%; top: 50%;
    z-index: 100;
}
.post-video .video-author { margin-top: .25rem; }
.post-video .video-author a { font-size: .75rem; }
.post-video .video-author a + a { margin-left: .25rem; }
.post-video .video-author a + a::before {
    content: "/";
    padding-right: .5rem;
    font-size: .75rem;
}
.post-video .video-date { font-size: .75rem; }
.post-video .video-date + .video-views { margin-left: 1rem; }
.post-video.post-list figure { width: auto; }
.post-video.post-block .post-meta div { flex: 1; }
.post-video.post-block .post-meta .video-views { text-align: right; }
.post-video.post-block .post-meta .video-views:only-child { text-align: left; }



/* ============================================================
   7. WIDGET PROGRAMAÇÃO — Playing Now e schedule list
   ============================================================ */

.playing-now {
    flex-direction: column;
    justify-content: start;
}
.playing-now figure { display: flex; }
.playing-now figure,
.posts .playing-now .image { width: 100%; }
.playing-now h3 span { display: block; }
.playing-now .post-content { width: 100%; }
.playing-now .program-time { font-weight: 400; font-size: .875rem; }
.playing-now .overlay-content-top { top: 0; bottom: auto; }
.playing-now .overlay-content-top span { font-size: .875rem; padding: .25rem .5rem; display: none; }
.playing-now .overlay-content-top span.active { display: inline; }
.playing-now .playing-type-live { background: #e00; color: #fff; }
.playing-now .playing-type-rerun { background: #555; color: #fff; }

.playing-next { padding: 1rem; }
.playing-next-info { line-height: 1.25rem; }
.playing-next-time { font-size: .75rem; line-height: .75rem; }
.playing-next-title { font-weight: 700; }
.playing-next-btn { margin-top: .25rem; align-self: center; }

.next-container { display: none; }
.next-container h2 { font-size: 1.25rem; margin: 0 0 1rem !important; }

.next-list .program-title { font-size: 1.25rem; font-weight: 700; }
.next-item { display: flex; }
.next-item + .next-item { margin-top: .5rem; }
.next-item .program-info { align-self: center; display: block; }
.next-item .program-image { max-width: 100px; margin-right: 1rem; }
.next-item .program-time { font-size: .835rem; }
.next-item .program-time span { border: 1px solid #ebebeb; padding: 0 5px; border-radius: 4px; }
.next-item i { margin-right: .25rem; }

/* Lista de programação com accordion */
.schedule-list .is-title a { display: inline; }
.schedule-list .media-content { overflow: hidden; }
.schedule-list .post-content {
    position: relative;
    animation: accordion-flipdown .5s ease both;
}
.schedule-list .post-content input[type="checkbox"] {
    position: absolute;
    cursor: pointer;
    width: 100%; height: 100%;
    z-index: 1;
    opacity: 0;
}
.schedule-list .post-content input[type="checkbox"]:checked ~ .schedule-extra {
    max-height: unset; opacity: 1; transform: translate(0,0);
}
.schedule-list .post-content input[type="checkbox"]:checked ~ .schedule-more span::before {
    transform: rotate(90deg);
}
.schedule-list .post-content input[type="checkbox"]:checked ~ .schedule-more span::after {
    transform: rotate(180deg);
}
.schedule-list .post-content input[type="checkbox"]:checked ~ .schedule-time {
    margin-top: 0;
}

.schedule-time { font-size: .875rem; margin-bottom: .5rem; transition: margin 250ms; }
.schedule-time i { font-size: 1rem; display: inline-block; margin-right: .25rem; }

.schedule-more { position: absolute; right: 0; top: 2rem; }
.schedule-more span { width: 20px; height: 20px; position: relative; right: 1.5rem; display: block; }
.schedule-more span::before,
.schedule-more span::after { content: ""; position: absolute; transition: transform .25s ease-out; }
.schedule-more span::before { width: 4px; height: 100%; top: 0; left: 50%; margin-left: -2px; background: currentColor; }
.schedule-more span::after  { width: 100%; height: 4px; top: 50%; left: 0; margin-top: -2px; background: currentColor; }

.schedule-extra {
    position: relative;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    max-height: 0;
    transform: translate(0,50%);
    z-index: 2;
    transition: all .25s ease-in-out;
}
.schedule-extra p { margin-top: 1rem; }
.schedule-extra ul { margin: 0; padding: 0 0 1rem; }
.schedule-extra li { clear: left; margin-top: 1rem; overflow: hidden; }

.schedule-type {
    font-size: .75rem;
    display: inline-block;
    border: 1px solid #a5a5a5;
    padding: .05rem .25rem;
    margin-top: 1rem;
    border-radius: .25rem;
}
.schedule-type.default { display: none; }

@keyframes accordion-flipdown {
    0%   { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); }
    5%   { opacity: 1; }
    80%  { transform: rotateX(8deg); }
    83%  { transform: rotateX(6deg); }
    92%  { transform: rotateX(-3deg); }
    100% { transform-origin: top center; transform: rotateX(0deg); }
}


/* ============================================================
   8. WIDGET PROGRAMAS
   ============================================================ */

.post-program .program-schedule { margin-top: 1rem; padding: 10px 20px; }


/* ============================================================
   9. TABS (zm-tabs — usado no widget Programação)
   ============================================================ */

.zm-tabs { position: relative; }
.zm-tabs.zm-tabs-scroll-ended::after {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.zm-tabs nav { overflow: auto; -webkit-overflow-scrolling: touch; }

.zm-tabs-navigation {
    width: 700px;
    padding: 0;
    align-items: center;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
}
.zm-tabs-navigation::after { content: ""; display: table; clear: both; }
.zm-tabs-navigation li { display: block; }
.zm-tabs-navigation a {
    width: 100px;
    position: relative;
    display: block;
    text-align: center;
    font-weight: 700;
    padding: 20px 15px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: .875em;
}

.zm-tabs-content { padding: 0; margin: 0 !important; }
.zm-tabs-content > li { display: none; padding: 1.4em 0 0; }
.zm-tabs-content > li.tab-selected { display: block; animation: tab-fade-in .5s; }

@keyframes tab-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================================================
   10. UTILITÁRIOS
   ============================================================ */

/* Paginação */
.post-pagination { margin-top: 1.5rem; }
.pagination { margin: .5rem 0 0; justify-content: center; }
.pagination a,
.pagination span { padding: 6px 13px 4px; margin: 0 3px; border: 1px solid currentColor; }
.pagination a:hover { text-decoration: none; }

/* Link "Mais itens" */
.read-more { text-align: right; font-weight: 700; margin-top: 1rem; }

/* Animação de carregamento (ellipsis) */
.ldg-ellipsis { display: flex; align-items: center; flex-direction: column; }
.ldg-ellipsis i { font-size: 3rem; }

.lds-ellipsis { width: 64px; height: 24px; display: inline-block; position: relative; }
.lds-ellipsis div {
    background: #ccc;
    width: 11px; height: 12px;
    position: absolute;
    top: 6px;
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0,1,1,0);
}
.lds-ellipsis div:nth-child(1) { left: 6px;  animation: lds-ellipsis1 .6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 6px;  animation: lds-ellipsis2 .6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 26px; animation: lds-ellipsis2 .6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 45px; animation: lds-ellipsis3 .6s infinite; }

@keyframes lds-ellipsis1 { 0% { transform: scale(0); }      100% { transform: scale(1); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0,0); } 100% { transform: translate(19px,0); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); }      100% { transform: scale(0); } }

/* Shimmer de carregamento de thumbnails */
.posts .is-fit {
    background-image: linear-gradient(to right,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0.5) 20%,
        rgba(255,255,255,0)   40%,
        rgba(255,255,255,0)   100%);
    background-repeat: no-repeat;
    background-size: 800px 300px;
    animation: placeholderShimmer 1s linear infinite forwards;
}
@keyframes placeholderShimmer {
    0%   { background-position: -468px 0; }
    100% { background-position:  468px 0; }
}


/* ============================================================
   11. RESPONSIVO
   ============================================================ */

@media screen and (min-width: 495px) and (max-width: 767px) {
    .posts .is-half-columns { display: flex; }
    .posts .is-half-column  { width: 50%; flex: none; }
}

@media screen and (min-width: 769px) {
    .posts .post-list .image  { width: 140px; }
    .posts .post-grid         { flex-wrap: wrap; }
    .posts .post-grid figure  { width: 100%; }
    .posts .post-list.post-grid .image { width: 100%; }
    .posts .post-grid .post-content    { margin-top: .5rem; }

    .video-header { padding: 2.5rem 0; }
    .video-header .video-embed    { width: 100%; left: 0; }
    .video-header .columns        { margin-bottom: .75rem; }
    .video-header .column.is-8    { padding-top: 0; padding-bottom: 0; }

    .video-player-hor .video-player-list     { display: none; }
    .video-player-hor .video-player-list-hor { display: block; }

    .zm-tabs::after         { display: none; }
    .zm-tabs nav            { position: relative; float: none; background: 0 0; }
    .zm-tabs-navigation     { width: 100%; }
    .zm-tabs-navigation a   { width: auto; text-align: left; padding: 20px; }
    .zm-tabs-content        { min-height: 0; }
    .zm-tabs-content > li   { padding: 2em 0 0; }

    .playing-now figure    { width: 80% !important; }
    .playing-now           { flex-direction: row; }
    .posts .playing-now .post-content { margin: 0; }
    .playing-next          { display: flex; flex-direction: row; justify-content: space-between; }

    .schedule-list .is-title { font-size: 1.25rem; }
    .schedule-time           { font-size: 1rem; }

    .next-item .program-image  { display: none; }
    .next-list .program-title  { font-size: 1rem; }
}

@media screen and (min-width: 1024px) {
    .elementor-col-100 .post-list .image,
    .elementor-col-66  .post-list .image              { width: 200px; }
    .elementor-col-100 .video-player-list-hor .post-list .image { width: 100px; }
    .post-program .is-title                            { font-size: 1.25rem; }
}