/* style.css */

/* =========================================== */
/* Estilos Gerais e para o Painel Administrativo */
/* =========================================== */

/* Reset básico para consistência (boa prática, não altera funcionalidade) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Estilos gerais do painel */
.grw-admin-wrap {
    font-family: -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #32373c;
    background: #f0f2f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 1200px;
    margin: 20px auto; /* Centraliza o wrapper */
}

.grw-main-title {
    color: #2c3e50;
    font-size: 2em;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
}

/* Container de programações (Flexbox para layout responsivo) */
.grw-programacoes-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    gap: 25px; /* Espaçamento entre os cartões */
    margin-bottom: 30px;
}

/* Estilo do cartão de programação individual */
.grw-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    /* ALTERADO: flex para 3 colunas em telas maiores */
    flex: 1 1 calc(33.333% - 17px); /* 3 colunas considerando o gap de 25px. (25px * 2) / 3 = 16.66px, então aprox 17px */
    min-width: 280px; /* Reduzido o min-width para melhor ajuste em telas menores, mas ainda permitindo 3 colunas */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.grw-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.grw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e9ecef;
}

.grw-card-title {
    margin: 0;
    font-size: 1.3em;
    color: #34495e;
}

/* Grupos de input */
.grw-input-group {
    margin-bottom: 18px;
}

.grw-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}

.grw-input-group input[type="text"],
.grw-input-group input[type="time"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
    font-size: 1em;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: #fcfcfc;
}

.grw-input-group input[type="text"]:focus,
.grw-input-group input[type="time"]:focus {
    border-color: #007cba; /* Cor de foco do WP */
    box-shadow: 0 0 0 1px #007cba, 0 0 0 4px rgba(0, 124, 186, 0.2);
    outline: none;
}

/* Grupo de horários (Início e Fim) */
.grw-time-group {
    display: flex;
    gap: 15px; /* Espaçamento entre os campos de hora */
    margin-bottom: 18px;
}

.grw-input-time {
    flex: 1; /* Faz com que ambos os campos de hora ocupem o mesmo espaço */
}

/* Grupo de upload de imagem */
.grw-image-upload-group {
    margin-bottom: 20px;
}

.grw-image-upload-group > label { /* Use ">" para atingir diretamente o label pai */
    margin-bottom: 10px;
}

.grw-image-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Garante que os itens se ajustem em telas menores */
}

.grw-image-preview-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ddd;
    display: flex; /* Para centralizar o texto "Sem imagem" */
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0; /* Evita que o preview encolha */
}

.grw-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo */
    display: block; /* Remove espaço extra abaixo da imagem */
    border-radius: 50%; /* Mantém a imagem circular */
}

.grw-no-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7em; /* Fonte um pouco menor */
    color: #999;
    text-align: center;
    line-height: 1.2;
    padding: 5px; /* Para não grudar nas bordas */
}

/* Estilos dos botões */
.grw-button {
    /* Base para todos os botões personalizados */
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    text-decoration: none;
    display: inline-flex; /* Para alinhar ícones ou texto centralizado */
    align-items: center;
    justify-content: center;
}

/* Botão Adicionar Programação */
.grw-add-button {
    background-color: #4CAF50; /* Verde mais vibrante */
    border-color: #4CAF50;
    color: #fff;
    font-size: 1.1em;
}

.grw-add-button:hover {
    background-color: #45a049;
    border-color: #45a049;
    color: #fff;
}

/* Botão Salvar Programações */
.grw-save-button {
    background-color: #008CBA; /* Azul mais vibrante */
    border-color: #008CBA;
    color: #fff;
    font-size: 1.1em;
}

.grw-save-button:hover {
    background-color: #0073a4;
    border-color: #0073a4;
    color: #fff;
}

/* Botão de Upload (já usa estilo padrão do WP) */
.grw-upload-button {
    padding: 8px 15px;
    font-size: 0.95em;
    min-width: 120px; /* Garante largura mínima para o texto completo */
}

/* Botão de Remover Programação (Link de delete do WP) */
.grw-remove-button {
    color: #dc3232 !important; /* Vermelho padrão do WP para erro/delete */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none; /* Remove sublinhado padrão */
    font-size: 0.9em;
    padding: 5px 10px;
}

.grw-remove-button:hover {
    color: #a00 !important;
    text-decoration: underline;
}

/* Botão Remover Imagem (Novo) */
.grw-remove-image-button {
    background-color: #f8d7da; /* Fundo levemente avermelhado */
    border-color: #f5c6cb;
    color: #721c24;
    padding: 8px 15px;
    font-size: 0.95em;
    min-width: 120px; /* Garante largura mínima */
}

.grw-remove-image-button:hover {
    background-color: #f5c6cb;
    border-color: #f1b0b7;
    color: #61131b;
}

/* Estilo para a área dos botões na parte inferior */
.grw-buttons-bottom {
    display: flex;
    gap: 15px;
    justify-content: flex-end; /* Alinha os botões à direita */
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #e9ecef;
}

/* Responsividade para o Painel Administrativo */
/* Ajustado para garantir 2 colunas em tablets e 1 em celulares */
@media (max-width: 992px) {
    .grw-card {
        flex: 1 1 calc(50% - 12.5px); /* 2 colunas em tablets, ajusta gap */
        min-width: unset; /* Remove min-width para melhor ajuste */
    }
}

@media (max-width: 768px) {
    .grw-card {
        flex: 1 1 100%; /* 1 coluna em celulares */
        padding: 20px; /* Um pouco menos de padding em telas pequenas */
    }

    .grw-time-group {
        flex-direction: column; /* Horários em coluna */
        gap: 0;
    }

    .grw-input-time {
        margin-bottom: 15px; /* Espaçamento entre os campos de hora empilhados */
    }

    .grw-image-controls {
        flex-direction: column;
        align-items: flex-start; /* Alinha itens à esquerda */
    }

    .grw-image-preview-wrapper {
        margin-bottom: 10px;
    }

    .grw-buttons-bottom {
        flex-direction: column;
        align-items: stretch; /* Estica os botões para largura total */
    }

    .grw-button {
        width: 100%;
        text-align: center;
    }
}

/* =========================================== */
/* Estilos para o Shortcode no Frontend */
/* =========================================== */

.programa-radio {
    display: flex;
    align-items: center;
    background-color: #f9f9f9; /* Fundo mais claro e sólido */
    color: #333;
    border-radius: 15px;
    padding: 15px 20px;
    max-width: 350px; /* Largura máxima para o bloco, ajuste se necessário */
    /* REMOVIDA: box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    overflow: hidden; /* Garante que elementos filhos não vazem */
    position: relative;
    font-family: -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    transition: all 0.3s ease-in-out;
    /* REMOVIDA: border: 1px solid #ddd; */
}

.programa-radio:hover {
    transform: translateY(-5px);
    /* REMOVIDA: box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
}

.locutor-img {
    width: 70px; /* Reduzi um pouco o tamanho */
    height: 70px; /* Reduzi um pouco o tamanho */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff0000; /* Vermelho do "AO VIVO" */
    margin-right: 8px; /* Mantido em 8px para proximidade com o texto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Esta sombra é na IMAGEM do locutor. Se quiser remover, diga! */
    flex-shrink: 0; /* Evita que a imagem encolha */
}

.info {
    flex-grow: 1; /* Permite que o bloco de info ocupe o espaço restante */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ao-vivo {
    background-color: #ff0000; /* Fundo vermelho para o "AO VIVO" */
    color: #ffffff; /* Texto branco */
    font-weight: bold;
    padding: 5px 12px; /* Padding para ajustar ao texto */
    border-radius: 8px;
    font-size: 0.8em; /* Tamanho da fonte */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: inline-flex; /* Para alinhar a bolinha ao texto */
    align-items: center; /* Alinha verticalmente a bolinha e o texto */
    width: fit-content; /* Faz o fundo se ajustar ao conteúdo */
    position: relative; /* Para posicionar a bolinha */
}

.ao-vivo::before {
    content: ''; /* Conteúdo vazio para criar a bolinha */
    display: inline-block;
    width: 8px; /* Tamanho da bolinha */
    height: 8px; /* Tamanho da bolinha */
    border-radius: 50%; /* Faz a bolinha ser um círculo */
    background-color: #ffdd00; /* Cor amarela da bolinha */
    margin-right: 8px; /* Espaçamento entre a bolinha e o texto */
    animation: piscar 1s infinite alternate; /* Aplica a animação de piscar */
}

@keyframes piscar {
    0% { opacity: 1; } /* Completamente visível no início */
    100% { opacity: 0.3; } /* Quase transparente no final, criando o efeito de piscar */
}

.titulo {
    font-size: 1.2em; /* Ajustei o tamanho */
    font-weight: 700;
    margin-bottom: 2px; /* Reduzi a margem */
    line-height: 1.3;
    color: #333; /* Cor escura para o título */
}

.locutor {
    font-size: 0.9em;
    color: #666; /* Cor cinza para o locutor */
    font-weight: 400;
}

/* Fallback para quando não há programação - estiliza o shortcode se a imagem estiver vazia */
.programa-radio:has(.locutor-img[src=""]) { /* Seleciona se a img estiver vazia */
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 15px; /* Ajustei o padding */
}

.programa-radio:has(.locutor-img[src=""]) .locutor-img {
    display: none; /* Esconde a imagem se não houver URL */
}

.programa-radio:has(.locutor-img[src=""]) .info {
    align-items: center;
}

.programa-radio:has(.locutor-img[src=""]) .ao-vivo {
    margin-bottom: 10px; /* Ajustei a margem */
}

/* Estilo para "Nenhuma programação no ar." (quando o shortcode retorna apenas texto) */
.programa-radio:not(:has(.ao-vivo)) { /* Quando não tem a classe ao-vivo, significa que é o fallback de texto */
    background: #f9f9f9; /* Mantém o mesmo fundo do bloco principal */
    color: #7f8c8d;
    /* REMOVIDA: box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
    justify-content: center;
    text-align: center;
    padding: 15px; /* Ajustei o padding */
    /* REMOVIDA: border: 1px solid #ddd; */
    font-weight: 600;
    flex-direction: row; /* Garante que fique em linha se estava em coluna */
}

.programa-radio:not(:has(.ao-vivo)):hover {
    transform: none; /* Remove animação de hover */
    /* REMOVIDA: box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
}

/* Responsividade básica para o shortcode */
@media (max-width: 480px) {
    .programa-radio {
        flex-direction: column;
        text-align: center;
        padding: 12px; /* Reduzi um pouco o padding em telas pequenas */
        max-width: 95%; /* Ajusta em telas muito pequenas */
        margin-left: auto;
        margin-right: auto;
    }

    .locutor-img {
        margin-right: 0;
        margin-bottom: 8px; /* Reduzi a margem */
    }

    .info {
        align-items: center;
    }

    .ao-vivo {
        align-self: center;
        margin-bottom: 8px; /* Ajustei a margem */
    }
}