/* ==========================================================================
   1. VARIÁVEIS E RESET (A base do design premium)
   ========================================================================== */
:root {
    --cor-primaria: #1A362D; /* Verde bem escuro/Esmeralda Profundo (Elegância) */
    --cor-secundaria: #C5A059; /* Dourado Fosco/Sofisticado (Conversão/Premium) */
    --cor-secundaria-hover: #B08D4C;
    --cor-fundo: #F8F7F5; /* Off-white/Areia quente (Tendência 2026) */
    --cor-texto: #333333;
    --cor-texto-claro: #666666;
    --cor-branco: #FFFFFF;
    --cor-whatsapp: #25D366; /* Verde Oficial do WhatsApp */
    --cor-bloqueado: #CCCCCC; /* Cinza para os gratuitos */
    
    --fonte-principal: 'Montserrat', sans-serif;
    --borda-raio: 8px;
    --sombra-suave: 0 4px 20px rgba(0,0,0,0.05);
    --sombra-forte: 0 10px 30px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Container que segura o conteúdo no meio da tela */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   2. CABEÇALHO (Onde a busca acontece)
   ========================================================================== */
.site-header {
    background-color: var(--cor-branco);
    box-shadow: var(--sombra-suave);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-primaria);
    letter-spacing: -0.5px;
}

.logo-img {
    width: 200px; /* Largura que você deseja */
    height: auto; /* Mantém a proporção original automaticamente */
    display: block;
}

/* Barra de Pesquisa Gigante */
.search-box {
    flex: 1;
    max-width: 600px;
}

.search-box form {
    display: flex;
    background-color: var(--cor-fundo);
    border-radius: 50px;
    border: 1px solid #E0E0E0;
    overflow: hidden;
}

.search-box input {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-family: var(--fonte-principal);
    outline: none;
}

.btn-buscar {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    padding: 0 25px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

.btn-buscar:hover {
    background-color: #12261f;
}

/* ==========================================================================
   3. BOTÕES (A psicologia do clique)
   ========================================================================== */
.btn-anuncie {
    background-color: var(--cor-secundaria);
    color: var(--cor-branco);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
}

.btn-anuncie:hover {
    background-color: var(--cor-secundaria-hover);
    transform: translateY(-2px);
}

.btn-painel {
    background-color: transparent;
    border: 2px solid var(--cor-primaria);
    color: var(--cor-primaria);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
}

.btn-painel:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
}

/* Botão WhatsApp Piscando */
.btn-whatsapp {
    display: inline-block;
    background-color: var(--cor-whatsapp);
    color: white;
    padding: 10px 20px;
    border-radius: var(--borda-raio);
    font-weight: 600;
    text-align: center;
    width: 100%;
    margin-top: 15px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Botão Bloqueado */
.btn-bloqueado {
    display: inline-block;
    background-color: var(--cor-bloqueado);
    color: #888;
    padding: 10px 20px;
    border-radius: var(--borda-raio);
    font-weight: 600;
    text-align: center;
    width: 100%;
    margin-top: 15px;
    cursor: not-allowed;
    border: none;
    font-family: var(--fonte-principal);
}

/* ==========================================================================
   4. RODAPÉ (Footer)
   ========================================================================== */
.site-footer {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    margin-top: 60px;
}

.footer-cta-block {
    background-color: var(--cor-secundaria);
    padding: 40px 20px;
    text-align: center;
}

.footer-cta-block h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.btn-anuncie-secundario {
    display: inline-block;
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    margin-top: 15px;
}

.btn-anuncie-secundario:hover {
    background-color: #12261f;
}

/*BOTÕES PLANOS*/
.btn-plano {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 20px;
    transition: all 0.3s ease;
    border: 2px solid #c5a059;
    color: #c5a059;
}

.btn-solid {
    background-color: #c5a059;
    color: white;
}

.btn-plano:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
    background-color: #c5a059;
    color: white;
}
/*//*/

.grid-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding: 60px 20px;
}

.footer-col h4 {
    color: var(--cor-secundaria);
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a:hover {
    color: var(--cor-secundaria);
    padding-left: 5px;
}

.footer-bottom {
    background-color: #12261f;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #aaa;
}

.footer-bottom a {
    color: var(--cor-secundaria);
}

/* ==========================================================================
   5. RESPONSIVO (Ajustes Finais para Celular)
   ========================================================================== */
@media (max-width: 768px) {
    /* --- AJUSTE DO CABEÇALHO --- */
    .header-container { flex-direction: column; }
    .search-box { width: 100%; order: 3; margin-top: 15px; }

    .logo-img {
        width: 240px; /* Um pouco menor no celular para sobrar espaço para o menu/busca */
        margin-top: 10px;
    }

    /* --- AJUSTE DO BANNER HERO (VERDE) --- */
    .hero-section {
        padding: 40px 0 80px !important; /* Mais respiro embaixo */
        text-align: center;
    }
    .hero-container {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .hero-texto h1 {
        font-size: 24px !important; /* Título menor para não quebrar feio */
        margin-bottom: 15px !important;
    }
    .hero-texto p {
        font-size: 14px !important;
        padding: 0 10px;
    }
    
    /* Corrigindo o botão gigante "Cadastrar Minha Empresa" */
    .hero-texto a {
        padding: 12px 20px !important; /* Reduz o tamanho interno */
        font-size: 0.9rem !important;  /* Diminui a letra */
        border-radius: 30px !important; /* Arredondado mais suave */
        margin-top: 20px !important;
        display: inline-flex !important;
        width: auto !important;
    }

    /* Box de Patrocinador no Mobile */
    .hero-banners { width: 100% !important; }
    .banner-destaque {
        height: 120px !important; /* Menor altura no celular */
        font-size: 13px !important;
    }

    /* --- AJUSTE DAS CATEGORIAS (MOBILE) --- */
    .categorias-section {
        margin-top: 10px !important; 
        padding: 10px 0 !important;
    }
    .grid-categorias {
        flex-direction: column !important; /* Coloca um botão debaixo do outro */
        gap: 12px !important; /* Espaço vertical entre os botões */
        padding: 0 20px !important; /* Margem lateral próxima às bordas da tela */
    }
    .card-categoria {
        width: 100% !important; /* Estica o botão de ponta a ponta (respeitando os 20px de margem) */
        padding: 15px 20px !important; /* Botão um pouco mais altinho para clique */
        font-size: 15px !important; /* Fonte um pouquinho maior para leitura */
        justify-content: center !important; /* Mantém o ícone e texto centralizados no meio do botão */
        box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    }
    .card-categoria .icone { 
        font-size: 20px !important; 
    }
    
    /* --- TÍTULOS DE SEÇÃO --- */
    .titulo-secao {
        margin: 30px 0 5px !important;
        font-size: 22px !important;
    }
    .subtitulo-secao { margin-bottom: 20px; font-size: 14px; }

    /*Endereço Mobile*/
    .linha-endereco-1, 
    .linha-endereco-2, 
    .linha-endereco-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cadastro-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Reduz drasticamente a borda branca (padding) ao redor do formulário */
    .form-wrapper {
        padding: 20px 15px !important; /* 20px em cima/baixo, apenas 15px nas laterais */
    }

    /* Garante que todos os campos de texto preencham o espaço sem vazar da tela */
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    select, 
    textarea, 
    .form-control {
        width: 100% !important;
        box-sizing: border-box !important; 
    }

    /* Ajusta o espaçamento das linhas do título no celular */
    .planos-hero h1 {
        line-height: 1.1 !important; /* 1.1 é ideal. Se achar muito junto, mude para 1.2. Se quiser mais apertado, 1.0 */
        margin-bottom: 10px; /* Garante que não fique colado no subtítulo */
    }
}

/* ==========================================================================
   6. HOME (Hero e NOVA SEÇÃO DE CATEGORIAS)
   ========================================================================== */
.hero-section {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    padding: 60px 0 80px !important;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-texto h1 {
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--cor-secundaria);
}

/* Abaixa o botão "Cadastrar Minha Empresa" no computador */
.hero-texto a {
    margin-top: 30px !important; 
    display: inline-flex; 
}

.hero-banners {
    flex: 1;
    min-width: 300px;
}

.banner-destaque {
    background: rgba(255,255,255,0.1);
    border: 2px dashed var(--cor-secundaria);
    height: 250px;
    border-radius: var(--borda-raio);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-secundaria);
    font-weight: bold;
}

/*BANNER PATROCINADOR MASTER*/
/* Estilos para o Banner Master em Fade */
.banner-fade-container {
    position: relative;
    width: 100%;
    height: 350px; 
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.banner-item.active {
    opacity: 1;
}

.banner-overlay-master {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    width: 100%;
    padding: 20px;
    color: white;
}

.badge-master {
    background: #c5a059;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- NOVA SEÇÃO DE CATEGORIAS --- */
.categorias-section {
    position: relative;
    z-index: 10;
    margin-top: -45px; /* Faz os botões subirem um pouco mais sobre o banner verde no desktop */
    padding: 20px 15px 50px 15px;
}

.grid-categorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os botões perfeitamente */
    align-items: center;
    gap: 15px; /* Espaço entre os botões */
    max-width: 1000px;
    margin: 0 auto;
}

.card-categoria {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Distância entre o ícone e o texto */
    background: #ffffff;
    color: var(--cor-primaria);
    padding: 14px 28px; /* Mais "respiro" interno (padding) */
    border-radius: 50px; /* Formato de pílula perfeito */
    text-decoration: none;
    font-weight: 600; /* Texto mais forte/legível */
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Sombra suave */
    border: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap; /* Impede que o texto quebre no meio do botão */
}

.card-categoria .icone {
    font-size: 20px; /* Ícone levemente maior */
}

/* Efeito ao passar o mouse */
.card-categoria:hover {
    transform: translateY(-4px); /* Sobe um pouquinho */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Sombra aumenta */
    border-color: var(--cor-secundaria); /* Borda dourada mágica */
    color: var(--cor-primaria);
}


/* ==========================================================================
   7. GRID DE FORNECEDORES (Cards)
   ========================================================================== */
.titulo-secao {
    text-align: center;
    font-size: 28px;
    color: var(--cor-primaria);
    margin: 25px 0 20px; /* Margem superior reduzida para aproximar das categorias no desktop */
}
.subtitulo-secao {
    text-align: center;
    color: var(--cor-texto-claro);
    margin-bottom: 40px;
}

.grid-fornecedores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.card-fornecedor {
    background: var(--cor-branco);
    border-radius: var(--borda-raio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s;
    border: 1px solid #eee;
}

.card-fornecedor.premium {
    border-top: 4px solid var(--cor-secundaria);
}

.card-fornecedor:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-forte);
}

.card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
}

.card-conteudo {
    padding: 20px;
}

.badge-categoria {
    display: inline-block;
    background: #f0f0f0;
    color: var(--cor-texto-claro);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 600;
}

.card-conteudo h3 {
    font-size: 18px;
    color: var(--cor-primaria);
    margin-bottom: 5px;
}

.card-conteudo .endereco {
    font-size: 13px;
    color: var(--cor-texto-claro);
    margin-bottom: 15px;
}

/* --- GRIDS RESPONSIVOS PARA FORMULÁRIOS --- */
.linha-endereco-1 { display: grid; grid-template-columns: 1fr 3fr; gap: 15px; margin-bottom: 15px; }
.linha-endereco-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 15px; }
.linha-endereco-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 15px; }

/* Telas grandes (Computador) */
.grid-cep-rua { grid-template-columns: 1fr 3fr; }
.grid-num-comp { grid-template-columns: 1fr 2fr; }
.grid-bairro-cid-est { grid-template-columns: 2fr 2fr 1fr; }

/* ==========================================================================
   8. PÁGINA DE PLANOS
   ========================================================================== */
.planos-hero { padding: 60px 20px 40px; }
.planos-hero h1 { color: var(--cor-primaria); font-size: 36px; margin-bottom: 15px; }
.subtitulo-planos { color: var(--cor-texto-claro); font-size: 18px; max-width: 700px; margin: 0 auto; }

.planos-tabela-section { padding: 20px 20px 80px; }
.grid-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: start; }

.card-plano {
    background: var(--cor-branco);
    border: 1px solid #EAEAEA;
    border-radius: var(--borda-raio);
    padding: 40px 30px;
    text-align: center;
    position: relative;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s;
}

.card-plano .preco { font-size: 42px; font-weight: 700; color: var(--cor-primaria); margin-bottom: 15px; }
.card-plano .preco span { font-size: 16px; color: var(--cor-texto-claro); font-weight: 400; }

.plano-recomendado {
    border: 2px solid var(--cor-secundaria);
    padding: 60px 30px;
    transform: scale(1.05);
    z-index: 10;
}

.badge-recomendado {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: var(--cor-secundaria); color: var(--cor-branco);
    padding: 5px 20px; border-radius: 20px; font-weight: bold; font-size: 14px;
}

/* ==========================================================================
   9. PÁGINA DE CADASTRO
   ========================================================================== */
.cadastro-section { padding: 60px 20px; background-color: var(--cor-fundo); }
.form-wrapper { max-width: 600px; margin: 0 auto; background: var(--cor-branco); padding: 40px; border-radius: var(--borda-raio); box-shadow: var(--sombra-forte); }

.form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--cor-primaria); font-size: 14px; }
.form-control { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: var(--borda-raio); font-size: 15px; }
.form-control:focus { outline: none; border-color: var(--cor-secundaria); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2); }

.btn-submit { width: 100%; background-color: var(--cor-primaria); color: var(--cor-branco); border: none; padding: 15px; font-size: 18px; font-weight: bold; border-radius: var(--borda-raio); cursor: pointer; margin-top: 20px; }


/* Alinha apenas a descrição e a lista para a esquerda */
.card-plano .descricao-plano,
.card-plano .lista-vantagens {
    text-align: left;
}

/* Remove a "bolinha" padrão da lista e tira o recuo (espaço vazio) lateral */
.card-plano .lista-vantagens {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

/* Dá um espacinho entre as linhas da lista para leitura ficar mais limpa */
.card-plano .lista-vantagens li {
    margin-bottom: 10px;
}


/* =========================================
   PAINEL DO CLIENTE (DASHBOARD)
   ========================================= */
.painel-section {
    padding: 60px 20px;
    background-color: var(--cor-fundo);
    min-height: 60vh;
}

.painel-container { 
    max-width: 800px; 
    background: #fff; 
    padding: 40px; 
    border-radius: 8px; 
    box-shadow: var(--sombra-suave); 
    margin: 0 auto; 
}

.painel-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 20px; 
    margin-bottom: 30px;
}

.painel-header h2 {
    color: var(--cor-primaria);
    margin: 0;
}

.btn-sair {
    color: #dc3545; 
    font-weight: bold;
    text-decoration: none;
}

.status-aprovado { 
    background: #d4edda; 
    color: #155724; 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 30px; 
    border-left: 5px solid #c3e6cb; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.status-pendente { 
    background: #fff3cd; 
    color: #856404; 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 30px; 
    border-left: 5px solid #ffeeba; 
}

.btn-vitrine { 
    background: #155724; 
    color: #fff; 
    padding: 10px 18px; 
    border-radius: 6px; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: bold; 
    white-space: nowrap; 
}

.painel-resumo {
    background: #fcfcfc; 
    border: 1px solid #eaeaea; 
    padding: 25px; 
    border-radius: 8px;
}

.painel-resumo h3 {
    color: var(--cor-secundaria); 
    margin-top: 0;
    margin-bottom: 15px;
}

.painel-resumo p {
    margin-bottom: 8px;
}

.acoes-botoes { 
    display: flex; 
    gap: 10px; 
    margin-top: 20px; 
}

.acoes-botoes .btn-outline {
    padding: 10px 20px; 
    border-radius: 8px;
    border: 2px solid #c5a059; /* Aqui entra a borda dourada */
    color: #c5a059; /* A cor do texto acompanha a borda */
    background-color: transparent;
    font-weight: bold; 
    text-decoration: none;
    transition: all 0.3s ease; /* Efeito suave ao passar o mouse */
}

/* Efeito quando passa o mouse por cima (Hover) */
.acoes-botoes .btn-outline:hover {
    background-color: #c5a059;
    color: white;
}

.acoes-botoes .btn-solid {
    padding: 10px 20px; 
    border-radius: 8px; 
    background: #c5a059; 
    color: white; 
    border: none; 
    font-weight: bold; 
    text-decoration: none;
}

/* Regras Responsivas para o Telemóvel */
@media (max-width: 768px) {
    .painel-section { 
        padding: 30px 10px; 
    }
    .painel-container { 
        padding: 20px; 
    }
    .status-aprovado {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-vitrine {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .acoes-botoes {
        flex-direction: column;
        gap: 15px;
    }
    .acoes-botoes a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* =========================================
   GALERIA DE FOTOS (UPLOAD)
   ========================================= */
.galeria-section {
    padding: 60px 20px;
    background-color: var(--cor-fundo);
    min-height: 60vh;
}

.galeria-container {
    max-width: 800px;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--sombra-suave);
    margin: 0 auto;
}

.galeria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.galeria-header h2 {
    color: var(--cor-primaria);
    margin: 0;
}

.btn-voltar {
    color: var(--cor-secundaria);
    font-weight: bold;
    text-decoration: none;
}

.alerta-limite {
    background: #fff3cd;
    color: #856404;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 5px solid #ffeeba;
    text-align: center;
    line-height: 1.5;
}

.upload-box {
    border: 2px dashed #ccc;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    background-color: #fafafa;
    margin-bottom: 30px;
}

.grid-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.foto-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: #000;
}

.foto-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.foto-card:hover img {
    opacity: 1;
}

.btn-excluir {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Regras Responsivas para Telemóvel (Galeria) */
@media (max-width: 768px) {
    .galeria-section {
        padding: 30px 10px;
    }
    .galeria-container {
        padding: 20px;
    }
    .galeria-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .grid-fotos {
        /* No celular, mostra 2 fotos por linha */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .foto-card img {
        height: 140px; /* Reduz um pouco a altura no mobile */
    }
}


/* =========================================
   HORÁRIOS NO FORMULÁRIO (Desktop e Mobile)
   ========================================= */
.horario-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.horario-linha {
    display: flex;
    align-items: center;
    gap: 15px;
}

.horario-label {
    font-weight: bold;
    width: 150px; /* Mantém os labels alinhados no Desktop */
}

.horario-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.horario-fechado {
    cursor: pointer;
    margin-left: auto; /* Empurra o checkbox "Fechado" para a direita */
}

/* Regras Responsivas para o Horário */
@media (max-width: 768px) {
    .horario-linha {
        flex-direction: column;
        align-items: flex-start;
        background: #f9f9f9;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #eaeaea;
        gap: 10px;
    }
    
    .horario-label {
        width: 100%;
        margin-bottom: 5px;
    }

    .horario-inputs {
        width: 100%;
        justify-content: space-between;
    }

    .horario-inputs input[type="time"] {
        flex-grow: 1; /* Faz os inputs de hora crescerem no celular */
    }

    .horario-fechado {
        margin-left: 0;
        margin-top: 5px;
    }
}


/* =========================================
   AJUSTES FINOS PARA MOBILE (Títulos e Botões)
   ========================================= */
@media (max-width: 768px) {
    /* Ajuste do título principal na Vitrine e Cadastro */
    h1, h2 {
        font-size: 1.6rem !important; /* Diminui um pouco o tamanho da fonte */
        line-height: 1.1 !important; /* Diminui o espaço entre as linhas do título */
        margin-bottom: 15px !important;
    }

    /* Ajuste de textos dentro dos botões */
    .btn-solid, 
    .btn-whatsapp,
    .btn-vitrine,
    a[href^="https://wa.me"], 
    a[href^="http://googleusercontent.com"] {
        font-size: 14px !important; /* Texto levemente menor para caber melhor */
        letter-spacing: 0.5px; /* Melhora a leitura em ecrãs pequenos */
        padding: 12px 15px !important; /* Ajusta o respiro interno do botão */
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100% !important; /* Garante que ocupem a largura total no mobile */
        box-sizing: border-box;
    }

    /* Reduz o espaçamento excessivo do container branco no mobile */
    .form-wrapper, 
    .painel-container,
    .galeria-container,
    div[style*="background: #fff; padding: 40px 30px;"] { /* Seleciona o card da vitrine */
        padding: 25px 15px !important;
    }
}


/* --- BOTÕES DA VITRINE (BASE DESKTOP) --- */
.btn-gps, .btn-wa-vitrine {
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-gps {
    background: #4285F4;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
}

.btn-wa-vitrine {
    background-color: #25d366;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    box-shadow: 0 8px 15px rgba(37, 211, 102, 0.2);
}

/* --- AJUSTES PARA MOBILE (768px) --- */
@media (max-width: 768px) {
    .btn-gps {
        padding: 15px !important;
        border-radius: 12px;
        font-size: 18px !important;
        flex-direction: row; /* Mantém ícone e texto na linha */
        width: 100% !important;
    }

    .btn-gps span { display: block; text-align: center; }
    
    .btn-gps small {
        display: block; 
        font-size: 13px; 
        font-weight: normal;
        opacity: 0.9;
        margin-top: 2px;
    }

    .btn-wa-vitrine {
        padding: 15px !important;
        font-size: 16px !important;
        width: 100% !important;
    }
}