/*
Theme Name: DooPlay
Version: 2.5.5
Theme URI: https://doothemes.com/items/dooplay/
Author: Doothemes
*/

/* --- AJUSTES GERAIS DESKTOP --- */
#header .hbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 70px;
}

/* =========================================
   ESTILOS MOBILE PERSONALIZADO (NOVO)
   ========================================= */

/* Por padrão, esconde os elementos mobile no PC */
#custom-mobile-header,
#cm-sidebar,
#cm-overlay,
#cm-search-box {
    display: none;
}

@media screen and (max-width: 900px) {

    /* 1. ESCONDER O HEADER ANTIGO COMPLETAMENTE */
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Ajuste para o conteúdo não ficar escondido atrás do menu fixo */
    #dt_contenedor {
        padding-top: 60px; 
    }

    /* 2. BARRA SUPERIOR FIXA */
    #custom-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 60px;
        background-color: #1a1a1a; /* Fundo escuro */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        border-bottom: 1px solid #333;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Botões (Ícones) */
    #custom-mobile-header button {
        background: none;
        border: none;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        padding: 5px;
    }

    /* Logo Centralizado */
    .cm-center img {
        height: 35px;
        width: auto;
        vertical-align: middle;
    }

    /* 3. MENU LATERAL (GAVETA) */
    #cm-sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: -280px; /* Escondido na esquerda */
        width: 280px;
        height: 100vh;
        background-color: #141414;
        z-index: 10002;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }

    #cm-sidebar.active {
        left: 0; /* Mostra o menu */
    }

    /* Cabeçalho do Menu Lateral */
    .cm-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: #0f0f0f;
        border-bottom: 1px solid #2a2a2a;
        color: #408BEA;
        font-weight: bold;
        font-size: 18px;
    }

    /* Links do Menu */
    ul.cm-menu-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ul.cm-menu-links li {
        border-bottom: 1px solid #222;
    }

    ul.cm-menu-links li a {
        display: block;
        padding: 15px 20px;
        color: #ddd;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.2s;
    }

    ul.cm-menu-links li a i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
        color: #408BEA;
    }

    ul.cm-menu-links li a:hover {
        background-color: #1f1f1f;
        color: #fff;
        padding-left: 25px; /* Efeito de slide */
    }

    /* 4. OVERLAY (Fundo Escuro) */
    #cm-overlay {
        display: none; /* Só aparece com JS */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 10001;
        backdrop-filter: blur(2px);
    }

    /* 5. BARRA DE BUSCA */
    #cm-search-box {
        display: none;
        position: fixed;
        top: 60px; /* Logo abaixo do header */
        left: 0;
        width: 100%;
        background: #1a1a1a;
        padding: 15px;
        z-index: 9999;
        box-sizing: border-box;
        border-bottom: 1px solid #333;
    }

    #cm-search-box form {
        display: flex;
        position: relative;
    }

    #cm-search-box input {
        width: 100%;
        padding: 12px 15px;
        border-radius: 5px;
        border: 1px solid #333;
        background: #0f0f0f;
        color: #fff;
        font-size: 16px;
    }

    #cm-search-box button {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 50px;
        background: #408BEA;
        border: none;
        color: #fff;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
    }

    /* =======================================================
       6. CORREÇÃO DAS CAPAS (GRID) - Deixa as capas maiores
       ======================================================= */
    
    /* Container dos itens */
    .module .content .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Espalha os itens */
        padding: 0 10px; /* Margem lateral da tela */
        height: auto !important; /* Remove altura fixa antiga */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Cada Filme/Série (Card) */
    article.item {
        /* Padrão para Tablets: 3 por linha */
        width: calc(33.33% - 8px) !important; 
        margin: 0 0 15px 0 !important;
        float: none !important;
    }

    /* Garante que a imagem ocupe o espaço todo do card */
    article.item .poster, 
    article.item .poster img {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        border-radius: 5px;
    }

    /* Remove espaçamentos estranhos do tema original */
    article.item .data {
        padding: 5px 0 !important;
        text-align: center;
    }

    article.item .data h3 {
        font-size: 14px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* =======================================================
       AJUSTE PARA CELULARES (Telas pequenas < 500px)
       Aqui colocamos 2 por linha para ficar GRANDE
       ======================================================= */
    @media (max-width: 550px) {
        article.item {
            width: calc(50% - 6px) !important; /* 2 por linha (metade da tela) */
        }
        
        .module .content header h2 {
            font-size: 20px;
            margin-left: 10px;
            border-left: 4px solid #408BEA;
            padding-left: 10px;
        }
    }
}
/* =======================================================
   CORREÇÃO ESPECÍFICA PARA RESULTADOS DE BUSCA (MOBILE)
   Força 2 capas por linha e aumenta o tamanho
   ======================================================= */
@media screen and (max-width: 768px) {
    
    /* Força o container da busca a usar Flexbox */
    #archive-content.items {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px !important;
    }

    /* Estilo de cada capa na busca */
    #archive-content.items article.item {
        width: 48% !important; /* Ocupa quase metade da tela (2 por linha) */
        margin: 0 0 15px 0 !important; /* Espaço em baixo */
        float: none !important;
        height: auto !important;
    }

    /* Força a imagem a aparecer grande */
    #archive-content.items article.item .poster {
        width: 100% !important;
        height: auto !important;
        min-height: 230px !important; /* Garante altura mínima se a img demorar */
        overflow: hidden;
    }

    #archive-content.items article.item .poster img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Preenche o quadrado sem distorcer */
    }

    /* Ajuste do texto embaixo da capa */
    #archive-content.items article.item .data {
        width: 100% !important;
        text-align: center;
        margin-top: 5px;
    }
    
    #archive-content.items article.item .data h3 {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}