/*
 * Arquivo: /home/u608467917/domains/vemcomvitorturismo.com.br/public_html/painel/assets/css/publico/mapa.css
 * Versão: 1.5.0
 * Estilos do mapa dos parceiros (cartão, chips de categoria, carrossel).
 */

    :root { --laranja:#ff9400; --laranja-escuro:#e28300; --escuro:#1a1a1a;
            --texto:#222; --suave:#616161; --borda:#e6e6e6; --whats:#008815; }
    * { box-sizing:border-box; margin:0; padding:0; }
    [hidden] { display:none !important; }
    html, body { height:100%; }
    body { font-family:'Roboto',sans-serif; color:var(--texto); overflow:hidden;
           display:flex; flex-direction:column; }

    /* ---- Header do site (3 camadas, mesmo padrão do WordPress) ---- */
    .site-topo { flex-shrink:0; background:#fff; z-index:20; position:relative;
                 box-shadow:0 2px 10px rgba(15,47,91,.08); }
    .st-util { background:#0f2f5b; color:#c9d6ea; font-size:11.5px; display:flex; align-items:center;
               justify-content:space-between; gap:12px; padding:6px 16px; }
    .st-atende { white-space:nowrap; }
    .st-cadastur { display:flex; align-items:center; gap:6px; white-space:nowrap; }
    .st-chip { background:#fff; border-radius:6px; padding:2.5px 8px; display:inline-flex; align-items:center; }
    .st-chip img { height:14px; width:auto; display:block; }
    .st-links { display:flex; gap:14px; }
    .st-links a { color:#fff; text-decoration:none; font-weight:500; white-space:nowrap; }
    .st-links a:hover { color:var(--laranja); }
    .st-principal { display:flex; align-items:center; gap:12px; padding:10px 16px; }
    .st-logo img { height:44px; width:auto; display:block; }
    .st-busca { flex:1; display:flex; border:1.5px solid #e6e6e6; border-radius:999px; overflow:hidden;
                max-width:520px; margin:0 auto; }
    .st-busca input[type=search] { flex:1; border:0; padding:9px 16px; font-size:13.5px; font-family:'Roboto',sans-serif; min-width:0; }
    .st-busca input[type=search]:focus { outline:none; }
    .st-busca button { border:0; background:#0f2f5b; color:#fff; font-family:'Poppins',sans-serif;
                       font-weight:600; font-size:13px; padding:0 18px; cursor:pointer; }
    .st-whats { background:var(--laranja); color:#fff; text-decoration:none; font-family:'Poppins',sans-serif;
                font-weight:600; font-size:13px; padding:10px 16px; border-radius:999px; white-space:nowrap; }
    .st-whats:hover { background:var(--laranja-escuro); }
    .st-principal #btn-compartilhar { background:#fff; color:#0f2f5b; border:1.5px solid #0f2f5b;
                   font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; padding:9px 14px;
                   border-radius:999px; cursor:pointer; white-space:nowrap; }
    .st-principal #btn-compartilhar:hover { background:#0f2f5b; color:#fff; }
    .st-menu { display:flex; gap:4px; justify-content:center; border-top:1px solid #f0ebe2;
               overflow-x:auto; padding:4px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .st-menu::-webkit-scrollbar { display:none; }
    .st-menu a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 14px;
                 color:#0f2f5b; text-decoration:none; font-family:'Poppins',sans-serif; font-weight:600;
                 font-size:11.5px; white-space:nowrap; border-bottom:2.5px solid transparent; }
    .st-menu a:hover { color:var(--laranja); border-bottom-color:var(--laranja); }
    .st-menu svg { display:block; }

    @media (max-width:760px) {
        .st-cadastur { display:none; }
        .st-util { font-size:10.5px; }
        .st-principal { flex-wrap:wrap; padding:8px 12px; gap:8px; }
        .st-logo img { height:36px; }
        .st-busca { order:3; flex-basis:100%; max-width:none; }
        .st-whats { padding:8px 12px; font-size:12px; margin-left:auto; }
        .st-principal #btn-compartilhar { padding:8px 12px; font-size:12px; }
    }

    /* ---- Área do mapa: preenche o resto da tela ---- */
    .mapa-area { flex:1; position:relative; min-height:0; }
    /* 1.5.0 · z-index:1 isola o empilhamento do Leaflet: os controles
       dele vão até z-1000 DENTRO do mapa e, sem esta linha, passariam
       por cima dos filtros (19), do botão (20) e do cartão (30). */
    #mapa { position:absolute; inset:0; width:100%; height:100%; z-index:1; }

    .filtros { position:absolute; top:0; left:0; right:0; z-index:19; display:flex; gap:8px;
               overflow-x:auto; padding:10px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .filtros::-webkit-scrollbar { display:none; }
    .chip { flex-shrink:0; background:#fff; border:1px solid var(--borda); color:var(--suave);
            font-size:13px; font-weight:500; padding:7px 14px 7px 10px; border-radius:999px; cursor:pointer;
            box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; align-items:center; gap:6px; }
    .chip svg { display:block; }
    .chip.ativo { background:var(--laranja); border-color:var(--laranja); color:var(--escuro); font-weight:600; }


    /* Cartão do parceiro (folha inferior no celular) */
    .cartao { position:fixed; left:0; right:0; bottom:-100%; z-index:30; background:#fff;
              border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,0.22);
              padding:20px 18px calc(18px + env(safe-area-inset-bottom)); transition:bottom 0.28s ease;
              max-height:70vh; overflow-y:auto; }
    .cartao.aberto { bottom:0; }
    .cartao .puxador { width:44px; height:4px; background:var(--borda); border-radius:99px; margin:0 auto 14px; position:relative; z-index:2; }
    .cartao .foto-wrap { position:relative; width:calc(100% + 36px); margin:-20px -18px 9px; }
    .cartao .foto { width:100%; height:172px; object-fit:cover; border-radius:0; display:block; /* 1.4.0: dobro */
                    transition:opacity 0.35s ease; }
    .cartao .pontos { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
    .cartao .pontos span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.55);
                           box-shadow:0 1px 3px rgba(0,0,0,0.4); }
    .cartao .pontos span.ativo { background:#fff; }
    .cartao .fechar { position:absolute; top:10px; right:12px; z-index:2; width:32px; height:32px;
                      background:rgba(255,255,255,0.92); border-radius:50%; border:none;
                      box-shadow:0 2px 8px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center;
                      font-size:22px; color:var(--suave); cursor:pointer; line-height:1; }
    .cartao .selo-destaque { display:inline-block; background:rgba(255,148,0,0.15); color:var(--laranja-escuro);
                             font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; margin-bottom:6px; }
    .cartao h2 { font-family:'Poppins',sans-serif; font-size:16px; font-weight:600; margin-bottom:1px; }
    .cartao .meta { font-size:12px; color:var(--suave); margin-bottom:6px; }
    .cartao p.desc { font-size:12.5px; line-height:1.45; margin-bottom:8px; }
    .cartao .atrativos { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px; }
    .cartao .atrativos span { background:#f2f5f8; border:1px solid #e3e9ef; color:#33475b;
                              font-size:10.5px; font-weight:500; padding:2px 7px 2px 5px;
                              border-radius:999px; display:flex; align-items:center; gap:3px; }
    .cartao .acoes { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .cartao .acoes a.largo { grid-column:1 / -1; }
    .cartao .acoes a { text-align:center; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px;
                       padding:10px 8px; border-radius:10px; text-decoration:none;
                       transition:transform 0.15s ease, box-shadow 0.15s ease; }
    .cartao .acoes a:active { transform:scale(0.97); }
    .b-whats { background:var(--whats); color:#fff; grid-column:1 / -1;
               box-shadow:0 6px 18px rgba(0,136,21,0.35); }
    .b-insta { background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366);
               color:#fff; box-shadow:0 6px 18px rgba(220,39,67,0.3); }
    .b-rota  { background:#fff; border:1.5px solid var(--borda); color:var(--texto);
               box-shadow:0 5px 14px rgba(0,0,0,0.12); }
    /* Passeio: Ver de perto (navy) e Reservar (verde) dividem a linha 1;
       Como chegar ocupa a linha 2 inteira — cartão curto, sem rolagem */
    .acoes.modo-passeio .b-local { grid-row:1; grid-column:1; }
    .acoes.modo-passeio .b-whats { grid-row:1; grid-column:2; }
    .acoes.modo-passeio .b-rota  { grid-row:2; grid-column:1 / -1; }
    .b-local { background:#12355b; color:#fff; grid-column:1 / -1;
               box-shadow:0 6px 18px rgba(18,53,91,0.35); }

    @media (min-width: 720px) {
        .cartao .foto-wrap { margin-top:-20px; }
        .cartao .foto { border-radius:16px 16px 0 0; height:192px; } /* 1.4.0: dobro */
        .cartao { left:auto; right:20px; bottom:auto; top:130px; width:360px; border-radius:16px;
                  transform:translateX(420px); transition:transform 0.28s ease; }
        .cartao.aberto { transform:translateX(0); bottom:auto; } /* 1.3.0 · o bottom:0 do slide-up
           mobile vazava pra cá por especificidade e, com top:130px, esticava o cartão até 70vh
           mesmo com pouco conteúdo — no desktop a altura é do conteúdo */
        .cartao .puxador { display:none; }
    }

    /* Preço "a partir de" no cartão do passeio */
    /* Nome e preço lado a lado, no mesmo tamanho; rótulo minúsculo em cima */
    .titulo-linha { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
    .titulo-linha h2 { flex:1; min-width:0; }
    .preco-passeio { font-family:'Poppins',sans-serif; text-align:right; flex-shrink:0; }
    .preco-passeio small { display:block; font-size:9px; color:var(--suave);
        text-transform:uppercase; letter-spacing:.03em; line-height:1.2; }
    .preco-passeio b { font-size:16px; font-weight:600; color:var(--laranja); line-height:1.2; }