/* ========= ESTILOS GERAIS E FORMULÁRIO PÚBLICO ========= */
body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    color: #333;
    padding: 20px;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.form-container h2 { text-align: center; margin-bottom: 10px; }
.form-container p { text-align: center; margin-bottom: 25px; color: #666; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }

.form-group input[type="text"],
.form-group textarea,
.admin-login-container input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.form-group input[type="file"] { padding: 10px; border: 1px solid #ddd; border-radius: 4px; }

button[type="submit"],
.admin-login-container button[type="submit"] {
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover,
.admin-login-container button[type="submit"]:hover {
    background-color: #0056b3;
}

.rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.rating > input { display: none; }
.rating > label { font-size: 2.5rem; color: #ddd; cursor: pointer; transition: color 0.2s; }
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label { color: #f7d106; }

.mensagem { padding: 15px; margin-bottom: 20px; border-radius: 5px; text-align: center; font-weight: bold; }
.mensagem.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.mensagem.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ========= ESTILOS DA EXIBIÇÃO DE DEPOIMENTOS (IFRAME) ========= */
.iframe-body { background-color: transparent; padding: 0; margin: 0; }
.depoimentos-container { max-width: 1290px; margin: 0 auto; }
.depoimento-nav { display: flex; justify-content: center; gap: 10px; margin-top: 20px; padding-right: 20px; }
.nav-btn { background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; }
.nav-btn:hover { background-color: #f8f9fa; }
.nav-btn img { width: 18px; height: 18px; }
.depoimentos-grid { display: flex; gap: 25px; overflow-x: auto; padding-bottom: 20px; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; }
.depoimentos-grid::-webkit-scrollbar { display: none; }
.card-depoimento { flex: 0 0 350px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 25px; display: flex; scroll-snap-align: start; flex-direction: column; }
.card-estrelas { color: #00b67a; font-size: 1.2rem; margin-bottom: 15px; }
.card-texto { font-size: 1rem; line-height: 1.6; color: #4a5568; flex-grow: 1; margin-bottom: 16px; }
.card-autor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.card-autor-imagem { width: 37px; height: 37px; border-radius: 50%; object-fit: cover; }
.card-autor-info { display: flex; flex-direction: column; }
.card-autor .autor-nome { font-weight: bold; color: #131313; margin: 0; }
.card-autor .autor-data { font-size: 0.9rem; color: #718096; margin: 4px 0 0 0; }

@media (max-width: 768px) {
    .depoimentos-grid { gap: 16px; padding: 0 10%; padding-bottom: 20px; }
    .card-depoimento { flex-basis: 80%; scroll-snap-align: center; }
}

/* ========= ESTILOS DA PÁGINA DE ADMINISTRAÇÃO ========= */
.admin-container { max-width: 1290px; margin: 40px auto; padding: 20px; }
.admin-login-container { max-width: 400px; margin: 100px auto; padding: 40px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; }
.admin-login-container h2 { margin-bottom: 25px; }
.admin-login-container .form-group { margin-bottom: 20px; text-align: left; }

/* --- ESTILOS DA TABELA DO ADMIN --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9rem; /* Diminui um pouco a fonte para caber mais texto */
}

th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
    vertical-align: top; /* Alinha o conteúdo no topo da célula */
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Garante que o texto longo quebre a linha na coluna de experiência */
td:nth-child(3) {
    word-break: break-word;
}

.foto-depoimento {
    max-width: 100px; /* Limita a largura da imagem */
    max-height: 100px;/* Limita a altura da imagem */
    border-radius: 4px;
    display: block;
}

.status { font-weight: bold; text-transform: capitalize; }
.status-pendente { color: orange; }
.status-aprovado { color: green; }
.status-oculto { color: red; }

.acoes a { margin-right: 10px; text-decoration: none; color: #007bff; }
.acoes a.excluir { color: #dc3545; }


/* --- ESTILOS DA PAGINAÇÃO DO ADMIN --- */
.paginacao { margin-top: 30px; text-align: center; }
.paginacao a, .paginacao span { display: inline-block; padding: 8px 14px; margin: 0 4px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #007bff; transition: background-color 0.2s, color 0.2s; }
.paginacao a:hover { background-color: #f4f4f9; }
.paginacao .pagina-ativa { background-color: #007bff; color: white; border-color: #007bff; font-weight: bold; }

/* Estilo para os botões de navegação quando desativados */
.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========= NOVO: MEDIA QUERY PARA A TABELA DO ADMIN RESPONSIVA ========= */
@media (max-width: 768px) {
    /* Esconde o cabeçalho da tabela no mobile */
    table thead {
        display: none;
    }

    /* Transforma cada linha em um card */
    table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Transforma cada célula para empilhar verticalmente */
    table td {
        display: block;
        text-align: right; /* Alinha o conteúdo à direita */
        font-size: 0.9rem;
        border: none;
        border-bottom: 1px solid #eee;
        padding-left: 50%; /* Dá espaço para o label */
        position: relative;
    }

    table td:last-child {
        border-bottom: none; /* Remove a linha do último item */
    }

    /* A mágica acontece aqui: cria os labels usando o atributo data-label */
    table td::before {
        content: attr(data-label); /* Pega o texto do atributo data-label */
        position: absolute;
        left: 10px; /* Alinha o label à esquerda */
        width: calc(50% - 20px);
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
    }
    
    .foto-depoimento {
        max-width: 70px;
        max-height: 70px;
    }
    
    .acoes a {
        display: inline-block;
        margin-bottom: 5px; /* Adiciona espaço entre os botões de ação */
    }
}