/* ==========================
   RESET BÁSICO
========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==========================
   ESTILO GERAL
========================== */

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}


/* ==========================
   CABEÇALHO
========================== */
header {
    width: 100%;
    height: 380px;

    background-image: url('../img/header-feira.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-site {
    width: 100%;
    height: 380px;

    background-image: url('../img/header-feira.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ==========================
   MENU
========================== */

nav {
    background-color: #1b5e20;
    padding: 12px 10px;
    text-align: center;
}

nav a {
    display: inline-block;
    color: #fff;
    margin: 5px 15px;
    text-decoration: none;
    font-weight: bold;

    transition:
        color 0.3s ease,
        transform 0.2s ease;
}

nav a:hover {
    color: #c8e6c9;
    transform: translateY(-2px);
}


/* ==========================
   CONTAINER PRINCIPAL
========================== */

.container {
    width: 90%;
    max-width: 1100px;

    margin: 20px auto;
    padding: 20px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0.85)
        ),
        url('../img/header-feira.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 8px;
}


/* ==========================
   BLOCOS BRANCOS
========================== */

.box {
    background-color: #fff;

    border-radius: 8px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1);
}


/* ==========================
   BANNER
========================== */

.banner {
    background:
        url('../img/banner.jpg')
        no-repeat
        center
        center / cover;

    height: 400px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: #fff;

    font-size: 2rem;
    font-weight: bold;

    padding: 20px;
}


/* ==========================
   TÍTULOS
========================== */

h2 {
    margin-bottom: 20px;

    color: #1b5e20;
}

h3 {
    margin: 10px 0 5px;
}


/* ==========================
   GRID
========================== */

.grid,
.produtos {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;
}


/* ==========================
   CARDS
========================== */

.card {
    background-color: #fff;

    padding: 15px;

    border-radius: 8px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1);

    text-align: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15);
}

.card h3 {
    margin-top: 12px;
}

.card p {
    font-size: 14px;
    color: #555;
    text-align: justify;
}

p {
    text-align: justify;
}


/* ==========================
   IMAGENS DOS PRODUTOS
========================== */

.card img {
    width: 100%;
    height: 180px;

    object-fit: cover;

    border-radius: 5px;
}


/* ==========================
   FOTO DOS PRODUTORES
========================== */

.card img.perfil {
    width: 140px;
    height: 140px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 10px;
}


/* ==========================
   BOTÕES PADRÃO
========================== */

.btn,
button {
    display: inline-block;

    margin-top: 10px;

    padding: 10px 14px;

    background-color: #2e7d32;
    color: #fff;

    text-decoration: none;

    border: none;
    border-radius: 5px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
}

.btn:hover,
button:hover {
    background-color: #256428;

    transform: scale(1.02);
}


/* ==========================
   BOTÃO WHATSAPP
========================== */

.btn-whatsapp {
    display: inline-block;

    margin-top: 10px;

    padding: 10px 18px;

    background-color: #25D366;
    color: #fff;

    text-decoration: none;
    font-weight: bold;

    border-radius: 5px;

    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
}

.btn-whatsapp:hover {
    background-color: #1ebe5d;

    transform: scale(1.02);
}


/* ==========================
   FORMULÁRIOS
========================== */

form {
    display: grid;

    gap: 15px;
}

input,
textarea,
select {
    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;
    border-radius: 5px;

    font: inherit;

    background-color: #fff;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;

    border-color: #2e7d32;
}

textarea {
    resize: vertical;

    min-height: 120px;
}

.info {
    margin-top: 20px;
}


/* ==========================
   DETALHES DO AGRICULTOR
========================== */

.agricultor-detalhes {
    display: flex;

    align-items: center;

    gap: 30px;

    background-color:
        rgba(255, 255, 255, 0.95);

    padding: 25px;

    border-radius: 8px;

    margin-bottom: 30px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1);
}


/* ==========================
   FOTO DO AGRICULTOR
========================== */

.agricultor-foto {
    flex-shrink: 0;
}

.agricultor-foto img {
    width: 180px;
    height: 180px;

    object-fit: cover;

    border-radius: 50%;
}


/* ==========================
   INFORMAÇÕES DO AGRICULTOR
========================== */

.agricultor-info {
    flex: 1;
}

.agricultor-info h2 {
    margin-bottom: 10px;
}

.agricultor-info p {
    margin-bottom: 10px;
    
}


/* ==========================
   PRODUTOS DO AGRICULTOR
========================== */

.produtos-agricultor {
    margin-top: 30px;
}

.produtos-agricultor h2 {
    margin-bottom: 20px;
}


/* ==========================
   QUEM SOMOS
========================== */

.quem-somos {
    max-width: 900px;

    margin: 0 auto;

    padding: 30px;
}

.quem-somos h2 {
    text-align: center;

    margin-bottom: 25px;
}

.quem-somos p {
    margin-bottom: 18px;

    text-align: justify;

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================
   RODAPÉ
========================== */

footer {
    background-color: #2e7d32;

    color: #fff;

    text-align: center;

    padding: 15px;

    margin-top: 20px;
}


/* ==========================
   RESPONSIVIDADE
========================== */

@media (max-width: 768px) {

    /* HEADER */

    .header-site {
        aspect-ratio: 16 / 7;

        background-position: center;
    }


    /* MENU */

    nav a {
        display: block;

        margin: 10px 0;
    }


    /* BANNER */

    .banner {
        height: 250px;

        font-size: 1.5rem;
    }


    /* CONTAINER */

    .container {
        width: 95%;

        padding: 15px;
    }


    /* DETALHES DO AGRICULTOR */

    .agricultor-detalhes {
        flex-direction: column;

        text-align: center;

        gap: 15px;
    }


    /* FOTO DO AGRICULTOR */

    .agricultor-foto img {
        width: 150px;
        height: 150px;
    }


    /* QUEM SOMOS */

    .quem-somos {
        padding: 20px;
    }

    .quem-somos p {
        text-align: left;
    }
}


/* ==========================
   CELULARES PEQUENOS
========================== */

@media (max-width: 480px) {

    .header-site {
        aspect-ratio: 16 / 8;
    }

    .container {
        width: 96%;

        margin: 10px auto;

        padding: 12px;
    }

    .grid,
    .produtos {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 12px;
    }

    .card img.perfil {
        width: 120px;
        height: 120px;
    }

    .agricultor-foto img {
        width: 130px;
        height: 130px;
    }

    h2 {
        font-size: 1.5rem;
    }

    .btn,
    .btn-whatsapp,
    button {
        width: 100%;

        text-align: center;
    }
}


/* ==========================
   CADASTRO DE PRODUTORES
========================== */

.cadastro-form {
    max-width: 750px;
    margin: 0 auto;
    padding: 30px;
}

.cadastro-form h2 {
    text-align: center;
    margin-bottom: 25px;
}

.campo-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-form label {
    font-weight: bold;
    color: #1b5e20;
}

.campo-form small {
    color: #666;
    font-size: 13px;
}

.mensagem-erro {
    background-color: #ffe5e5;
    color: #9c1c1c;

    padding: 12px;
    margin-bottom: 20px;

    border-radius: 5px;
    border: 1px solid #e4aaaa;
}

.mensagem-sucesso {
    background-color: #e8f5e9;
    color: #1b5e20;

    padding: 12px;
    margin-bottom: 20px;

    border: 1px solid #a5d6a7;
    border-radius: 5px;

    text-align: center;
}

/* ==========================
   GERENCIAMENTO DE PRODUTORES
========================== */

.gerenciar-produtores {
    padding: 30px;
}

.gerenciar-produtores h2 {
    text-align: center;
    margin-bottom: 25px;
}


/* TABELA RESPONSIVA */

.tabela-responsiva {
    width: 100%;
    overflow-x: auto;
}


/* TABELA */

.tabela-gerenciamento {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.tabela-gerenciamento th,
.tabela-gerenciamento td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.tabela-gerenciamento th {
    background-color: #1b5e20;
    color: #fff;
}

.tabela-gerenciamento tbody tr:hover {
    background-color: #f5f5f5;
}


/* FOTO */

.foto-tabela {
    width: 65px;
    height: 65px;

    border-radius: 50%;

    object-fit: cover;
}


/* FORMULÁRIO DE EXCLUSÃO */

.form-excluir {
    display: inline-block;
    margin-left: 5px;
}


/* BOTÃO EXCLUIR */

.btn-excluir {
    display: inline-block;

    margin-top: 10px;

    padding: 10px 14px;

    background-color: #c62828;
    color: white;

    border: none;
    border-radius: 5px;

    cursor: pointer;
}

.btn-excluir:hover {
    background-color: #a71919;
}


/* ==========================
   RESPONSIVIDADE
========================== */

@media (max-width: 768px) {

    .gerenciar-produtores {
        padding: 15px;
    }

    .tabela-gerenciamento th,
    .tabela-gerenciamento td {
        padding: 8px;
    }

}

/* ==========================
   GERENCIAMENTO DE PRODUTOS
========================== */

.gerenciar-produtos {
    padding: 30px;
}

.gerenciar-produtos h2 {
    text-align: center;
    margin-bottom: 25px;
}


/* IMAGEM DO PRODUTO NA TABELA */

.imagem-produto-tabela {
    width: 80px;
    height: 65px;

    object-fit: cover;

    border-radius: 6px;
}

/* ==========================
   EDIÇÃO DE PRODUTOS
========================== */

.imagem-edicao-produto {
    width: 220px;
    max-width: 100%;
    height: 160px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #ddd;
}


.acoes-formulario {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


.btn-secundario {
    display: inline-block;

    padding: 10px 15px;

    background-color: #666;
    color: #fff;

    text-decoration: none;

    border-radius: 5px;
}


.btn-secundario:hover {
    background-color: #444;
}

/* ==========================
   PAINEL DE GERENCIAMENTO
========================== */

.painel-gerenciamento {
    padding: 30px;
}


.painel-gerenciamento h2 {
    text-align: center;
    margin-bottom: 10px;
}


.descricao-gerenciamento {
    text-align: center;
    margin-bottom: 30px;
    color: #555;
}


.grid-gerenciamento {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 25px;
}


.card-gerenciamento {
    background-color: #fff;

    padding: 25px;

    border: 1px solid #ddd;
    border-radius: 8px;

    text-align: center;
}


.card-gerenciamento h3 {
    color: #1b5e20;
    margin-bottom: 10px;
}


.card-gerenciamento p {
    text-align: center;
    margin-bottom: 20px;
    color: #555;
}


.acoes-gerenciamento {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.acoes-gerenciamento .btn,
.acoes-gerenciamento .btn-secundario {
    width: 100%;
    text-align: center;
}


/* RESPONSIVIDADE */

@media (max-width: 600px) {

    .painel-gerenciamento {
        padding: 15px;
    }

}

/* ==========================
   PAGINAÇÃO
========================== */

.paginacao {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;
    margin-bottom: 10px;
}


.pagina-link {
    display: inline-block;

    padding: 8px 13px;

    background-color: #ffffff;

    color: #1b5e20;

    border: 1px solid #1b5e20;

    border-radius: 5px;

    text-decoration: none;

    transition: 0.2s;
}


.pagina-link:hover {
    background-color: #e8f5e9;
}


.pagina-atual {
    background-color: #1b5e20;
    color: #ffffff;
}


.pagina-atual:hover {
    background-color: #1b5e20;
}

/* ==========================
   AGENDA DAS FEIRAS
========================== */

.agenda-feiras {
    padding: 30px;
}


.agenda-feiras h2 {
    text-align: center;
    margin-bottom: 10px;
}


.agenda-introducao {
    text-align: center;
    margin-bottom: 30px;
    color: #555;
}


/* LISTA */

.lista-eventos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* CARD */

.evento-card {
    display: flex;

    gap: 20px;

    padding: 20px;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;
}


/* DATA */

.evento-data {
    width: 85px;
    min-width: 85px;

    height: 85px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background-color: #1b5e20;

    color: #fff;

    border-radius: 8px;
}


.evento-dia {
    font-size: 30px;
    font-weight: bold;

    line-height: 1;
}


.evento-mes {
    font-size: 14px;
    margin-top: 5px;
}


/* INFORMAÇÕES */

.evento-informacoes {
    flex: 1;
}


.evento-informacoes h3 {
    color: #1b5e20;
    margin-bottom: 10px;
}


.evento-informacoes p {
    margin-bottom: 7px;
}


.evento-descricao {
    margin-top: 12px;
}


.evento-observacao {
    margin-top: 10px;

    padding: 10px;

    background-color: #f4f4f4;

    border-radius: 5px;
}


/* SEM EVENTOS */

.sem-eventos {
    text-align: center;

    padding: 30px;

    background-color: #f5f5f5;

    border-radius: 8px;
}


/* RESPONSIVIDADE */

@media (max-width: 600px) {

    .agenda-feiras {
        padding: 15px;
    }

    .evento-card {
        flex-direction: column;
    }

    .evento-data {
        width: 70px;
        min-width: 70px;
        height: 70px;
    }

}

/* ==========================
   CADASTRO DE FEIRAS
========================== */

.grupo-horarios {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}


@media (max-width: 600px) {

    .grupo-horarios {
        grid-template-columns: 1fr;
    }

}

/* ==========================
   GERENCIAMENTO DE FEIRAS
========================== */

.gerenciar-feiras {
    padding: 30px;
}


.gerenciar-feiras h2 {
    text-align: center;
    margin-bottom: 20px;
}


.acoes-topo {
    display: flex;
    justify-content: flex-end;

    margin-bottom: 20px;
}


.descricao-tabela {
    margin-top: 5px;

    font-size: 13px;

    color: #666;
}


.acoes-tabela {
    white-space: nowrap;
}


@media (max-width: 600px) {

    .gerenciar-feiras {
        padding: 15px;
    }


    .acoes-topo {
        justify-content: center;
    }


    .acoes-topo .btn {
        width: 100%;
        text-align: center;
    }

}