/* =========================================
   PARCEIROS MOBILE - FINAL (DESIGN CLEAN & TOUCH)
   Arquivo: /assets/css/mobile/parceiros.css
   ========================================= */

/* Variáveis Locais Mobile */
:root {
    --cor-verde-whats: #25D366;
}

@media (max-width: 1024px) {

    /* --- 1. HERO SEARCH (BUSCA) --- */
    .parceiro-hero {
        padding: 40px 20px;
        text-align: center;
        background-color: var(--cor-preto, #1C1C1C);
        border-bottom: 4px solid var(--cor-principal, #0067ab);
    }

    .parceiro-hero h2 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 30px;
        font-weight: 800;
        color: var(--cor-branco, #fff);
    }

    .search-box-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .select-group {
        width: 100%;
        background: var(--cor-branco, #fff);
        border-radius: 8px;
        height: 60px; /* Altura boa para toque */
        position: relative;
    }

    .select-group .input-icon-img {
        position: absolute;
        left: 20px; top: 50%; transform: translateY(-50%);
        width: 20px; opacity: 0.5; pointer-events: none;
    }

    .select-group select {
        width: 100%; height: 100%; border: none; background: transparent;
        padding-left: 55px; /* Espaço ícone */
        font-size: 15px; font-weight: 700; color: #333;
        appearance: none; outline: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230067ab%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat; background-position: right 20px center; background-size: 10px;
    }

    .btn-encontrar {
        width: 100%; height: 60px;
        margin-top: 5px;
        display: flex; align-items: center; justify-content: center;
        background: var(--cor-principal, #0067ab);
        color: var(--cor-branco, #fff);
        border: none; border-radius: 8px;
        font-weight: 800; font-size: 16px; text-transform: uppercase;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }


    /* --- 2. FILTROS (SCROLL HORIZONTAL) --- */
    .filter-services-bar {
        padding: 20px 0;
        background: var(--cor-branco, #fff);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .filter-flex {
        display: flex; flex-wrap: nowrap; gap: 10px;
        padding: 0 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-flex::-webkit-scrollbar { display: none; }

    .filter-label, .filter-line { display: none; }

    /* Estilo "Pílula" para os filtros */
    .radio-filter {
        flex: 0 0 auto;
        background: #f5f5f5;
        padding: 10px 20px;
        border-radius: 50px; 
        font-size: 14px; font-weight: 600;
        color: var(--cor-texto-medio, #555);
        display: flex; align-items: center; justify-content: center;
        border: 1px solid transparent;
    }
    
    .radio-custom { display: none; }

    /* Estado Selecionado */
    .radio-filter input:checked + .radio-custom,
    .radio-filter:has(input:checked) { /* Suporte moderno */
        background: var(--cor-principal, #0067ab);
        color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    /* Fallback para cor do texto se :has não funcionar */
    .radio-filter input:checked ~ span { color: inherit; } 


    /* --- 3. RESULTADOS (CARDS) --- */
    .parceiro-results-section {
        padding: 40px 0 80px;
        background: var(--cor-fundo-site, #f8f9fa);
    }

    .lista-lojas-grid {
        display: flex; flex-direction: column; gap: 20px; padding: 0 20px;
    }

    /* CARD MOBILE */
    .dist-card {
        background: var(--cor-branco, #fff);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.05);
        display: flex; flex-direction: column;
    }

    .dist-card-body { padding: 25px 20px 20px; }

    .dist-card h4 {
        font-size: 22px; font-weight: 800;
        color: var(--cor-texto-forte, #222);
        margin-bottom: 15px; line-height: 1.2;
    }

    /* Tag de Serviço */
    .dist-card span[style*="color:#009FE3"] {
        font-size: 11px !important; margin-bottom: 8px !important;
        color: var(--cor-principal, #0067ab) !important;
    }

    .dist-atuacao { font-size: 14px; line-height: 1.5; color: #666; }

    /* Footer do Card (Contatos) */
    .dist-card-footer {
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 20px;
        display: flex; flex-direction: column; gap: 10px;
    }

    /* --- BOTÃO LOCK (PRINCIPAL NO MOBILE) --- */
    .area-bloqueada button {
        width: 100%; height: 50px;
        background: var(--cor-principal, #0067ab) !important;
        color: #fff !important;
        border: none !important; border-radius: 8px;
        font-size: 14px; font-weight: 800; text-transform: uppercase;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* --- BOTÕES LIBERADOS --- */
    .area-dados-reais { display: flex; flex-direction: column; gap: 10px; }

    .btn-outline, .btn-whatsapp-outline {
        height: 45px; width: 100%;
        font-size: 14px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        border-radius: 8px; text-decoration: none;
        background: var(--cor-branco, #fff);
    }
    
    .btn-outline { border: 1px solid #ddd; color: #555; }
    .btn-whatsapp-outline { border: 2px solid var(--cor-verde-whats); color: var(--cor-verde-whats); }


    /* --- 4. MODAL (EMAIL / LEAD GATE) --- */
    .modal-overlay {
        z-index: 10000;
        padding: 15px;  
        align-items: center;
        background: rgba(0,0,0,0.9);
        backdrop-filter: blur(4px);
    }
    
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px;
        padding: 40px 20px 30px; /* Padding top maior para o X */
        max-height: 85vh;
        overflow-y: auto;
        background: var(--cor-branco, #fff);
        position: relative;
    }

    /* Títulos dentro do Modal */
    .modal-content h3 {
        font-size: 22px; font-weight: 800;
        color: var(--cor-principal, #0067ab);
        margin-top: 0; margin-bottom: 10px;
        padding-right: 30px; 
    }
    .modal-content p { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.5; }

    /* Inputs */
    .form-group { margin-bottom: 15px; }
    .input-full {
        padding: 14px; font-size: 16px; /* 16px evita zoom no iOS */
        border: 1px solid #ddd; border-radius: 8px; width: 100%;
        background: #f9f9f9; box-sizing: border-box;
    }
    .input-full:focus { background: #fff; border-color: var(--cor-principal, #0067ab); }

    /* Checkbox LGPD Mobile */
    .form-group-lgpd {
        background: #f5f5f5; padding: 15px; border-radius: 8px;
        display: flex; gap: 12px; align-items: flex-start;
        margin-bottom: 20px;
    }
    .form-group-lgpd input[type="checkbox"] {
        width: 24px; height: 24px; /* Maior para o dedo */
        margin-top: 0; flex-shrink: 0;
    }
    .form-group-lgpd label { font-size: 13px; line-height: 1.4; color: #555; }

    /* BOTÃO FECHAR (X) */
    .modal-close {
        position: absolute; top: 15px; right: 15px;
        width: 40px; height: 40px;
        background: #f0f0f0; color: #333;
        border-radius: 50%; border: none;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px; cursor: pointer; z-index: 10;
    }

    /* Botão Enviar Lead */
    #btn-lead-submit, #btn-enviar-form {
        width: 100%; padding: 16px;
        font-size: 15px; font-weight: 800;
        background-color: var(--cor-principal, #0067ab); 
        color: #fff;
        border: none; border-radius: 8px;
        margin-top: 5px; text-transform: uppercase;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* Botão Cancelar (Inferior) */
    .btn-fechar-inferior {
        display: block; width: 100%;
        padding: 15px; margin-top: 10px;
        background-color: transparent; color: #999;
        border: none; font-weight: 600; font-size: 14px;
    }

    #lead-feedback-msg, #feedback-msg {
        font-size: 14px; padding: 10px;
        background: #f0fdf4; border: 1px solid #dcfce7; color: #166534;
        border-radius: 6px; margin-top: 15px; text-align: center;
    }
}