/*
 * Arquivo: previsao-tempo-plus/css/ptp-widget.css
 * Versão: 2.16
 * Ajustes para layout mobile (3 linhas, ao lado da logo) e animações.
 * **IMPORTANTE**: Este CSS foi ajustado para a NOVA ESTRUTURA HTML do shortcode.
 */

/* Estilos Globais do Widget para Desktop/Base */
#ptp-widget {
    font-family: Arial, sans-serif;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    max-width: 350px; /* Largura máxima para desktop */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Organiza cidade e bloco de dados em coluna */
}

/* Opcional: Classe para modo compacto (se desejar ativar via JS/PHP para telas específicas) */
#ptp-widget.ptw-compact {
    max-height: 55px; /* Altura para versão compacta (aproximadamente 2 linhas) */
    overflow: hidden;
}

#ptp-widget .ptw-cidade {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px; /* Reduzindo a margem */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* NOVO CONTÊINER .ptw-temp-umidade para a SEGUNDA LINHA e TERCEIRA LINHA no desktop */
#ptp-widget .ptw-temp-umidade {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaço entre temp e umidade */
    align-items: center;
}

/* Bloco de clima no desktop (agora é a linha 3, no final) */
#ptp-widget .ptw-bloco .ptw-clima {
    order: 3; /* Coloca o clima por último no desktop (ordem flex) */
    margin-top: 5px; /* Espaçamento da linha de cima */
}


/* Bloco original para animação de entrada (contem agora temp+umidade e clima) */
#ptp-widget .ptw-bloco {
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* Sem gap direto entre os elementos principais, controlamos dentro */
    align-items: center;
    opacity: 0; /* Para animação de entrada */
    transform: translateY(10px); /* Para animação de entrada */
    transition: all 0.3s ease;
    flex-grow: 1;
    line-height: 1.2;
    flex-direction: column; /* Para empilhar temp+umidade e clima */
}

#ptp-widget.show .ptw-bloco {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para os filhos diretos de .ptw-temp-umidade e .ptw-clima */
#ptp-widget .ptw-temp-umidade > div,
#ptp-widget .ptw-clima {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-grow: 1;
    flex-basis: auto;
    padding: 2px 0;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Estilização dos ícones */
#ptp-widget .ptw-bloco i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    padding: 3px; /* Ajuste para que a borda pareça envolver o ícone */
    border-radius: 5px;
    font-size: 1em;
    min-width: 20px;
    text-align: center;
    box-sizing: border-box;
    position: relative; /* Necessário para animação de movimento da nuvem */
    overflow: hidden; /* Esconde conteúdo que transborda (para a nuvem) */
    display: inline-flex; /* Permite alinhamento interno e transform */
    justify-content: center;
    align-items: center;
    transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

/* ==================================== */
/* ANIMAÇÕES PARA DESKTOP (Aplicadas acima de 768px) */
/* ==================================== */
@media (min-width: 769px) {
    /* Animação para o ícone de nuvem: movimento e cor */
    #ptp-widget .ptw-clima i.fas.fa-cloud { /* Seletor mais específico */
        animation: cloud-move 3s infinite alternate ease-in-out,
                   color-pulse-cloud 4s infinite alternate ease-in-out;
    }

    @keyframes cloud-move {
        0% { transform: translateX(0px); }
        50% { transform: translateX(5px); } /* Move 5px para a direita */
        100% { transform: translateX(0px); }
    }

    /* Animação de cores automáticas para os outros ícones */
    #ptp-widget .ptw-temp-umidade i.fas.fa-temperature-high {
        animation: color-pulse-high-temp 4s infinite alternate ease-in-out;
    }

    #ptp-widget .ptw-temp-umidade i.fas.fa-temperature-low {
        animation: color-pulse-low-temp 4s infinite alternate ease-in-out;
    }

    #ptp-widget .ptw-temp-umidade i.fas.fa-tint {
        animation: color-pulse-humidity 4s infinite alternate ease-in-out;
    }

    /* Keyframes para as animações de cor */
    @keyframes color-pulse-cloud {
        0% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
        50% { color: #88eeff; border-color: #0088cc; } /* Cor azul-clara */
        100% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
    }

    @keyframes color-pulse-high-temp {
        0% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
        50% { color: #ff6600; border-color: #ff6600; } /* Laranja intenso */
        100% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
    }

    @keyframes color-pulse-low-temp {
        0% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
        50% { color: #00ccff; border-color: #00ccff; } /* Azul claro */
        100% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
    }

    @keyframes color-pulse-humidity {
        0% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
        50% { color: #3399ff; border-color: #3399ff; } /* Azul vibrante */
        100% { color: var(--ptp-highlight-color, #cceeff); border-color: var(--ptp-border-color, #3399cc); }
    }
}


/* ==================================== */
/* AJUSTES PARA MOBILE (Aplicados até 768px) */
/* ==================================== */
@media(max-width: 768px) {
    /* Oculta o widget #ptp-widget padrão se ele aparecer por engano no mobile. */
    #ptp-widget {
        display: none !important;
    }

    /* ---- Estilização do widget #ptp-widget QUANDO INSERIDO NO HEADER MOBILE DO JNEWS ---- */
    /* Seletor mais específico para o widget em si (dentro dos containers do JNews) */
    .jeg_nav_col_center .jeg_nav_grow #ptp-widget,
    .jeg_mobile_midbar #ptp-widget,
    .jeg_header_mobile #ptp-widget,
    .jeg_nav_row #ptp-widget,
    .jeg_nav_row.jeg_row #ptp-widget {
        display: flex !important; /* Força display flex */
        flex-direction: column !important; /* Coloca as 3 linhas em COLUNA */
        flex-wrap: nowrap !important; /* Impede quebra de linha do widget em si */
        align-items: flex-start !important; /* Alinha o conteúdo à esquerda dentro do widget */
        justify-content: center !important;
        width: auto !important; /* Largura automática para compactar ao máximo */
        max-width: 100% !important; /* Garante que não ultrapasse 100% da largura do pai */
        padding: 0px 0px !important; /* Padding zero para o widget */
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        min-height: 35px !important; /* Altura mínima para garantir espaço para as 3 linhas */
        box-sizing: border-box !important;
        line-height: 1.1 !important; /* Linha super compacta */
        flex-shrink: 1 !important; /* Permite que o widget encolha se não houver espaço */
        flex-grow: 1 !important; /* Permite crescer para ocupar o espaço */
    }

    /* Ajuste para o contêiner PAI que envolve o logo e o widget para alinhamento LADO A LADO */
    /* ESTE SELETOR É O MAIS CRÍTICO. PRECISA SER EXATO NO SEU TEMA. */
    .jeg_mobile_midbar,
    .jeg_nav_row.jeg_row { /* Adicione outros seletores pai se necessário */
        display: flex !important;
        flex-direction: row !important; /* Garante que os filhos (logo e widget) fiquem em linha */
        align-items: center !important; /* Alinha verticalmente */
        justify-content: space-between !important; /* Empurra logo para esquerda, widget para direita */
        flex-wrap: nowrap !important; /* Impede quebra de linha do pai */
        width: 100% !important; /* Ocupa a largura total */
        padding: 5px 10px !important; /* Padding geral do header */
        box-sizing: border-box !important;
    }
    /* Ajuste para o contêiner do logo, para que ele não ocupe todo o espaço */
    .jeg_mobile_logo_wrapper {
        flex-shrink: 0 !important; /* Não encolhe */
        flex-grow: 0 !important; /* Não cresce */
        width: auto !important; /* Largura automática */
        max-width: 80px !important; /* Largura máxima da logo (ajuste se a sua for maior) */
        margin-right: 5px !important; /* Espaço entre logo e widget (reduzido) */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }


    /* --- Layout interno do Widget em 3 Linhas (APÓS A REESTRUTURAÇÃO DO HTML) --- */

    /* PRIMEIRA LINHA: LOCALIZAÇÃO */
    #ptp-widget .ptw-cidade {
        font-size: 0.8em !important; /* Fonte menor */
        font-weight: bold !important;
        margin-bottom: 0px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important; /* Ocupa a largura total da linha */
        text-align: left !important;
        line-height: 1.1 !important;
        padding-left: 0px !important;
        min-height: 1.1em;
        color: inherit !important;
    }

    /* CONTÊINER PRINCIPAL DAS LINHAS 2 e 3 (ptw-bloco) */
    #ptp-widget .ptw-bloco {
        display: flex !important;
        flex-direction: column !important; /* Organiza linha 2 e 3 em COLUNA */
        flex-wrap: nowrap !important; /* Evita quebra */
        align-items: flex-start !important; /* Alinha o conteúdo à esquerda */
        justify-content: flex-start !important;
        gap: 0px !important; /* Sem gap entre as linhas */
        width: 100% !important; /* Ocupa a largura total */
        padding: 0 !important;
        line-height: 1.1 !important;
        margin-top: 0px !important; /* Sem margem superior do bloco de dados */
        min-height: 2.2em !important; /* Altura mínima para as duas linhas (2*1.1em) */
        opacity: 1 !important; /* Garante visibilidade (remove animação de entrada) */
        transform: translateY(0) !important;
        transition: none !important;
    }

    /* SEGUNDA LINHA: CLIMA (NUVENS DISPERSAS) */
    #ptp-widget .ptw-clima {
        display: flex !important; /* Força a exibição */
        flex-grow: 1 !important; /* Ocupa o espaço restante */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.8em !important; /* Fonte para o clima (Nuvens dispersas) */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important; /* Espaçamento entre ícone e descrição */
        padding: 0 !important;
        min-width: 0 !important;
        line-height: 1.1 !important;
        margin-top: 2px !important; /* Espaçamento da linha de cima */
        margin-bottom: 2px !important; /* Espaçamento para a linha abaixo */
    }
    #ptp-widget .ptw-clima i.fas.fa-cloud { /* Ícone da nuvem */
        display: inline-flex !important;
        font-size: 0.8em !important; /* Ícone da nuvem um pouco maior */
        min-width: 15px !important;
        padding: 0 !important;
        border: none !important;
    }
    #ptp-widget .ptw-clima span.ptw-descricao {
        font-size: 1em !important; /* Tamanho da fonte da descrição */
        line-height: 1 !important;
    }


    /* TERCEIRA LINHA: TEMPERATURAS + UMIDADE */
    #ptp-widget .ptw-temp-umidade { /* Este é o novo contêiner para temp+umidade */
        display: flex !important;
        flex-direction: row !important; /* Ícones e valores lado a lado */
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Alinha à esquerda */
        width: 100% !important; /* Ocupa a largura total da linha */
        padding: 0 !important;
        line-height: 1.1 !important;
        min-height: 1.1em !important;
        margin-top: 0px !important; /* Sem margem extra para a 3ª linha */
        gap: 5px !important; /* Espaçamento entre os blocos de temperatura e umidade */
    }
    /* Estilos para os blocos de Temperatura e Umidade DENTRO de .ptw-temp-umidade */
    #ptp-widget .ptw-temp-umidade .ptw-temp,
    #ptp-widget .ptw-temp-umidade .ptw-umidade {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important; /* Espaçamento entre ícone e valor */
        padding: 0 !important;
        font-size: 0.75em !important; /* Ligeiramente maior que o anterior */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important; /* Permite encolher */
        flex-basis: auto !important;
        min-width: 0 !important; /* Permite encolher ao máximo */
    }
    #ptp-widget .ptw-temp-umidade .ptw-umidade {
        margin-left: 5px !important; /* Espaço entre temperatura e umidade */
    }

    /* Estilização Geral para Ícones e Valores na Linha 2 e 3 */
    #ptp-widget .ptw-bloco i { /* Estilo geral para ícones no mobile */
        font-size: 0.8em !important;
        min-width: 15px !important;
        padding: 0px !important;
        border: none !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        color: inherit !important;
        flex-shrink: 0 !important;
    }
    #ptp-widget .ptw-bloco span { /* Estilo geral para textos de valores no mobile */
        font-size: 1em !important; /* Usar o tamanho do pai (ex: 0.75em ou 0.8em) */
        line-height: 1 !important;
    }


    /* ==================================== */
    /* ANIMAÇÕES MOBILE (Aplicar Keyframes do Desktop) */
    /* ==================================== */
    /* Os @keyframes já estão definidos no CSS global para mobile também. */

    /* Aplicar animações aos ícones no mobile */
    #ptp-widget .ptw-clima i.fas.fa-cloud {
        animation: cloud-move 3s infinite alternate ease-in-out,
                   color-pulse-cloud 4s infinite alternate ease-in-out;
    }
    #ptp-widget .ptw-temp-umidade i.fas.fa-temperature-high {
        animation: color-pulse-high-temp 4s infinite alternate ease-in-out;
    }
    #ptp-widget .ptw-temp-umidade i.fas.fa-temperature-low {
        animation: color-pulse-low-temp 4s infinite alternate ease-in-out;
    }
    #ptp-widget .ptw-temp-umidade i.fas.fa-tint {
        animation: color-pulse-humidity 4s infinite alternate ease-in-out;
    }
}