/*
 * Conecta Local — folha de estilo base.
 * --primary e --secondary NÃO são definidas aqui: vêm por referência do
 * banco (site_settings), injetadas inline em resources/views/layouts.
 * Ver docs/tecnico/... e docs/mockups/style-guide.html (origem deste sistema).
 *
 * Responsivo (decidido no planejamento): o SITE cobre 4 tamanhos —
 * Smartphone (<768px), Tablet (768–1023px), Notebook (1024–1439px) e
 * Desktop (≥1440px). Abordagem mobile-first: estilo base = smartphone,
 * cada breakpoint abaixo adiciona/ajusta para a faixa maior.
 * O ADMIN cobre só Notebook/Desktop (decidido) — sem breakpoints para
 * tablet/smartphone nessa parte, ver seção "admin shell" mais abaixo.
 */
:root {
  --primary-hover: color-mix(in srgb, var(--primary) 82%, black);
  --primary-tint: color-mix(in srgb, var(--primary) 14%, white);
  --secondary-hover: color-mix(in srgb, var(--secondary) 82%, black);
  --secondary-tint: color-mix(in srgb, var(--secondary) 14%, white);

  --bg: #f3f4f5; --panel: #ffffff; --panel-alpha: rgba(255,255,255,0.72);
  --border: #e2e5e8; --text: #1b1f22; --text-dim: #626b73;
  --ok: #1f8a55; --ok-tint: #e6f5ec;
  --warn: #b3651a; --warn-tint: #fbeee0;
  --danger: #c23b32; --danger-tint: #fbeae8;
  --info: #2563a8; --info-tint: #e8f1fb;
  --star: #e0a021;
  --contact-text: rgba(0,0,0,0.8);
  --radius-sm: 4px; --radius-md: 10px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(20,20,30,0.05), 0 4px 14px rgba(20,20,30,0.06);
  --shadow-strong: 0 4px 18px rgba(20,20,30,0.12), 0 1px 3px rgba(20,20,30,0.08);
}
/* O site tem um único tema (claro): não segue o modo escuro do aparelho.
   "color-scheme: light" também mantém campos, barras de rolagem e menus
   nativos do navegador claros, mesmo com o celular no modo escuro. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
/* Reserva o espaço da barra de rolagem sempre — sem isso, páginas curtas
   (sem barra) ficam alguns pixels mais largas que páginas compridas (com
   barra), fazendo o header/footer parecerem "encolher" ao trocar de
   página, mesmo usando o mesmo layout em todas elas. */
html { scrollbar-gutter: stable; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55; }
a { color: var(--primary); text-decoration:none; }
img { max-width: 100%; display: block; }
/* Preview de imagem enviada (logo, banner, favicon) dentro de um .field:
   como .field é flex-column, o comportamento padrão (align-items:stretch)
   estica os filhos na largura toda — sem isso a imagem ficava achatada,
   sem manter a proporção original. width/height:auto + max-height (via
   inline style) deixam o navegador encolher proporcionalmente até caber
   no espaço, sem nunca distorcer. */
.field .img-preview { align-self:flex-start; width:auto; height:auto; max-width:100%; margin-bottom:6px; border-radius:8px; }

/* =====================================================================
   HEADER DO SITE — mobile-first
   ===================================================================== */
/* .zone-utility é a barra de fundo (sempre 100% da tela); o conteúdo
   fica centralizado dentro de .zone-utility-inner, senão em telas
   largas a barra encolhe mas fica à esquerda em vez de centralizar. */
.zone-utility { font-size:0.72rem; color:var(--text-dim); border-bottom:1px solid var(--border); background:var(--panel); }
.zone-utility-inner { max-width:1200px; margin:0 auto; padding:6px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.zone-utility .social { display:flex; gap:15px; }
.zone-utility .social a, .zone-utility .auth a { color:var(--text-dim); }
.zone-utility .social a { display:flex; align-items:center; }
.zone-utility .social a:hover { color:var(--primary); }
.zone-utility .social .contact-icon svg { width:20px; height:20px; margin-top:0; display:block; }
.zone-utility .auth { display:flex; align-items:center; gap:12px; }
.zone-utility .auth .auth-guest-link { font-size:calc(0.72rem + 3px); font-weight:700; }
.zone-utility .auth-divider { width:1px; height:14px; background:var(--border); }

header.site { position: sticky; top:0; z-index:50; background:var(--panel); border-bottom:1px solid var(--border); }
.zone-main {
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 16px;
}
.logo { font-weight:800; font-size:0.98rem; display:flex; align-items:center; gap:8px; }
.logo .dot-logo { width:9px; height:9px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.logo .logo-img { height:50px; max-width:180px; width:auto; object-fit:contain; display:block; }
/* No celular, o ícone de menu (abre a gaveta lateral) fica na mesma
   linha da busca, à esquerda dela — ver .mobile-drawer* mais abaixo e
   o breakpoint de tablet, que esconde o ícone e devolve a busca pro
   grid normal (.search-wrap volta a valer sozinha ali). */
.mobile-search-row { grid-column: 1 / -1; order: 3; display:flex; align-items:center; gap:10px; }
.mobile-menu-toggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; padding:0; }
.mobile-menu-toggle svg { width:20px; height:20px; }
.search-wrap { flex:1; display:flex; justify-content:center; }
.search-box { width:100%; display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 14px; color:var(--text-dim); font-size:0.85rem; }
.search-box .search-icon { display:flex; flex-shrink:0; }
.search-box .search-icon svg { width:16px; height:16px; display:block; }
.search-box input { border:none; background:transparent; outline:none; color:var(--text); font-size:0.85rem; width:100%; font-family:inherit; }
.zone-main .btn { justify-self:end; white-space:nowrap; }

.zone-menu { border-top:1px solid var(--border); display:flex; justify-content:center; }
.zone-menu nav { display:flex; gap:18px; padding:8px 16px; overflow-x:auto; max-width:1200px; -webkit-overflow-scrolling:touch; }
.zone-menu a { position:relative; font-size:0.78rem; font-weight:600; color:var(--text-dim); white-space:nowrap; padding-bottom:4px; }
.zone-menu a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.zone-menu a:hover, .zone-menu a.active { color:var(--primary); }
.zone-menu a:hover::after, .zone-menu a.active::after { transform:scaleX(1); }

/* Gaveta lateral do menu (só usada no celular — o botão que abre fica
   escondido em telas maiores, então ela nunca é acionada lá). */
/* visibility:hidden precisa de um delay igual à duração da animação pra
   só "sumir de vez" depois que o fundo/gaveta terminam de animar pra
   fora — sem isso, ao fechar, a visibilidade troca instantaneamente e
   corta a transição do meio, parecendo que a gaveta só "some" em vez de
   voltar deslizando pro lado de onde veio. */
.mobile-drawer-backdrop { position:fixed; inset:0; background:rgba(15,17,20,0.5); z-index:200; opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.mobile-drawer-backdrop.open { opacity:1; visibility:visible; transition:opacity .25s, visibility 0s; }
.mobile-drawer { position:fixed; top:0; left:0; bottom:0; width:78%; max-width:300px; background:var(--panel); z-index:201; padding:18px; display:flex; flex-direction:column; gap:2px; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; box-shadow:0 4px 24px rgba(0,0,0,.25); }
.mobile-drawer-backdrop.open .mobile-drawer { transform:translateX(0); }
.mobile-drawer-close { align-self:flex-end; background:none; border:none; font-size:1.7rem; line-height:1; color:var(--text-dim); cursor:pointer; padding:4px 8px; margin-bottom:10px; }
.mobile-drawer a { padding:12px 6px; font-size:0.95rem; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
.mobile-drawer a.active { color:var(--primary); }

/* Celular (<768px): a barra horizontal de menu vira a gaveta lateral. */
@media (max-width: 767px) {
  .zone-menu { display:none; }
}

/* Mesma lógica do zone-utility: cada faixa (.footer-main cinza, .footer-
   bottom branca) ocupa 100% da tela; .footer-inner centraliza o conteúdo
   dentro dela — reaproveitado nas duas faixas. */
footer.site { margin-top:48px; font-size:0.85rem; }
.footer-inner { max-width:1200px; margin:0 auto; padding:20px 16px; }

/* Fundo branco fixo (decidido) — não segue o tema claro/escuro, então os
   textos aqui dentro também são cores fixas (as mesmas do tema claro),
   pra nunca virar "texto claro em cima de fundo branco". */
.footer-main { background:#ffffff; border-top:1px solid #e2e5e8; color:#1b1f22; }
.footer-columns { display:grid; grid-template-columns:1fr; gap:28px; padding:36px 0 24px; }
.footer-col { min-width:0; }
.footer-col h4 { margin:0 0 14px; font-size:1rem; }
/* A borda vai no wrapper da logo (que encolhe pro tamanho da imagem via
   width:fit-content), não no container inteiro da coluna — assim a linha
   sai da mesma largura da logo, não da faixa toda. */
.footer-brand .logo { display:inline-flex; width:fit-content; padding-bottom:20px; border-bottom:1px solid #e2e5e8; }
.footer-brand .logo .logo-img { height:106px; width:auto; max-width:280px; object-fit:contain; display:block; }
.footer-social { display:flex; gap:15px; margin-top:24px; }
/* Ícone de rede social solto, sem quadrado/contorno em volta — 68px (o
   dobro do quadrado de 34px que tinha antes). O seletor precisa de mais
   especificidade que ".contact-icon svg" (regra geral lá embaixo, que
   senão vence por vir depois no arquivo e deixa o ícone pequeno de novo). */
.footer-social-icon { width:25px; height:25px; display:flex; align-items:center; justify-content:center; color:#1b1f22; flex-shrink:0; transition:color .15s; }
.footer-social-icon:hover { color:var(--primary); }
.footer-social-icon .contact-icon { display:flex; color:inherit; }
.footer-social-icon .contact-icon svg { width:25px; height:25px; margin-top:0; }
/* Ícone de contato (telefone/WhatsApp/e-mail) solto, sem quadrado/
   contorno em volta — mesmo tratamento dado aos ícones de rede social. */
.footer-icon-box { width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:#1b1f22; flex-shrink:0; }
.footer-icon-box .contact-icon { display:flex; color:inherit; }
.footer-icon-box .contact-icon svg { width:18px; height:18px; margin-top:0; }
.footer-contacts, .footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.footer-contacts li { display:flex; align-items:center; gap:10px; }
.footer-contacts a, .footer-links a { color:#1b1f22; text-decoration:none; }
.footer-contacts a:hover, .footer-links a:hover { color:var(--primary); }
.footer-address { text-align:center; padding-top:20px; margin-top:4px; border-top:1px solid #e2e5e8; color:#626b73; }
/* margin-left:auto empurra o selo pra ponta direita da coluna (que agora
   ocupa todo o espaço sobrando — ver .footer-columns no breakpoint
   desktop), pra usar todo o espaço disponível em vez de sobrar vazio. */
.footer-security-badge { height:272px; width:auto; max-width:100%; display:block; }

/* Fundo na cor primária escolhida em Configurações — pode ser clara ou
   escura, então o texto usa --primary-contrast (preto/branco calculado
   automaticamente a partir dessa cor) em vez de uma cor fixa. */
.footer-bottom { background:var(--primary); }
.footer-bottom-inner { display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; font-weight:600; padding-top:16px; padding-bottom:16px; color:var(--primary-contrast); }
.footer-bottom-right { display:flex; align-items:center; gap:10px; }
.footer-credit-link { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-credit-link:hover { opacity:0.8; }

/* Celular: mesma ideia do ajuste feito no tablet (ver breakpoint 768px)
   — centraliza logo e redes sociais e aumenta o padding lateral, que
   senão ficava tudo colado à esquerda com espaço vazio sobrando. Precisa
   vir depois das regras base do rodapé acima (mesma especificidade). */
@media (max-width: 767px) {
  .footer-inner { padding-left:31px; padding-right:31px; } /* 16px + 15px pedido */
  .footer-brand { text-align:center; }
  .footer-social { justify-content:center; }
}

/* 45px de distância do header até o conteúdo — padrão em todas as
   páginas do site (decidido), fixo nos 3 breakpoints abaixo. */
main.container { max-width:1200px; margin:0 auto; padding:45px 16px 60px; }

/* Banners rotativos (home e Comércio e Serviços, ver banner-carousel.blade.php
   e banner-carousel-scripts.blade.php) — largura padrão do container (não
   sai dele). Altura proporcional (aspect-ratio, o mesmo corte usado no
   upload — ver HomeBannerController/BusinessBannerController) em vez de
   altura fixa: com altura fixa, telas mais estreitas (tablet/celular)
   forçavam um recorte agressivo da imagem pelo object-fit:cover, cortando
   texto/conteúdo que fica perto da borda do banner. Ficam antes de
   qualquer título — a distância do header já vem do padding-top de
   main.container acima (padrão do site), por isso sem margin-top próprio
   aqui. Motor Swiper.js — mesmo sistema do carrossel de cards (ver
   card-carousel-scripts.blade.php): loop de verdade gerenciado pela lib
   (sem clonagem manual), arrasta no touch e no mouse nativamente. As
   setas (.card-carousel-arrow, compartilhadas com os cards) ficam fora
   do .swiper de propósito — ele aplica overflow:hidden, que cortaria as
   setas flutuantes. */
.banner-carousel { position:relative; }
.banner-carousel .card-carousel-arrow { top:50%; }
.banner-carousel-slide a { display:block; }
.banner-carousel-slide img { width:100%; object-fit:cover; display:block; border-radius:var(--radius-lg); }
.home-banners .banner-carousel-slide img { aspect-ratio:1200/550; }
.business-banners .banner-carousel-slide img { aspect-ratio:1200/400; }
.highlight-banners .banner-carousel-slide img { aspect-ratio:1200/400; }
/* Banner→título igual à distância da home (.home-hero padding-top: 44px
   base, 24px no celular — ver bloco mobile abaixo). Lá vem do padding do
   wrapper do título; aqui não tem esse wrapper, então é margin-bottom
   direto no banner mesmo. */
.business-banners, .highlight-banners { margin-bottom:44px; }

.home-hero { text-align:center; padding:44px 0 34px; }
.home-hero-title { font-size:50px; }
.home-hero-subtitle { font-size:20px; margin:0 0 22px; }
/* No tablet a largura do container não deixa "Tudo do seu bairro em um
   só lugar" caber inteiro em 50px numa linha só — reduz só nessa faixa
   (no notebook/desktop, com mais largura, o tamanho original já cabe). */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-hero-title { font-size:32px; }
  .home-hero { padding-bottom:9px; } /* subtítulo→"Destaques do mês": 90px (34 hero + 22 subtítulo + 34 título) -25 = 65px */
}
/* Celular: título em 2 linhas e subtítulo numa linha só; espaçamentos
   do topo da home reduzidos (decidido, ver ajustes de responsividade). */
@media (max-width: 767px) {
  main.container { padding-top:30px; } /* header→banner: 45px -10 -5 */
  .home-hero { padding:24px 0 0; } /* banner→título: 44px -15 -5; padding do subtítulo→"Destaques do mês" zerado, resto vem do margin do subtítulo abaixo */
  .business-banners, .highlight-banners { margin-bottom:24px; } /* banner→título igual à home nesse breakpoint (24px) */
  .home-hero-title { font-size:36px; line-height:45.8px; } /* entrelinha do título: 55.8px (1.55 padrão) -5 -5 */
  .home-hero-subtitle { font-size:14px; margin:0 0 11px; } /* subtítulo→"Destaques do mês": era 22px, -11px (parte dos -15px pedidos; os outros -4px vieram do padding do .home-hero acima) */
}

/* Tablet (≥768px): busca volta pra linha principal, header ganha mais respiro. */
@media (min-width: 768px) {
  .zone-utility { font-size:0.76rem; }
  .zone-utility-inner { padding:6px 24px; }
  .zone-main {
    padding:12px 24px; gap:16px;
    grid-template-columns: minmax(130px,1fr) minmax(220px,2.4fr) minmax(130px,1fr);
  }
  .mobile-search-row { display:contents; }
  .mobile-menu-toggle { display:none; }
  .search-wrap { grid-column:auto; order:0; }
  .search-box { max-width:420px; }
  .logo { font-size:1.02rem; }
  .zone-menu nav { padding:9px 24px; gap:22px; }
  .footer-inner { padding:24px; }
  main.container { padding:45px 24px 70px; }
}

/* Tablet (768–1023px): rodapé empilhado (igual celular) deixava logo e
   redes sociais coladas à esquerda, com muito vazio sobrando à direita
   da coluna larga — centraliza esse bloco e aumenta o padding lateral
   pra puxar o conteúdo mais pro centro (decidido, ver ajustes de
   responsividade). */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-inner { padding-left:74px; padding-right:74px; } /* 24px + 50px pedido */
  .footer-brand { text-align:center; }
  .footer-social { justify-content:center; }
}

/* Notebook (≥1024px): busca ganha mais espaço central. Rodapé só vira
   4 colunas a partir daqui — no tablet fica empilhado, igual celular
   (decidido), porque 4 colunas não cabem com folga antes disso. */
@media (min-width: 1024px) {
  .zone-main { grid-template-columns: minmax(150px,1fr) minmax(300px,3fr) minmax(150px,1fr); }
  .search-box { max-width:520px; }
  main.container { padding:45px 24px 80px; }
  .logo .logo-img { height:65px; }
  /* Logo 40%, Links 16%, Contatos 24% (decidido); a 4ª coluna é fixa em
     212px — a mesma largura da imagem do selo — pra título e imagem
     ficarem alinhados à esquerda da coluna, sem precisar empurrar nada
     pra direita. */
  .footer-columns { grid-template-columns:40% 16% 24% 212px; gap:0; align-items:start; }
  .footer-bottom-inner { flex-direction:row; justify-content:space-between; text-align:left; }
}

/* Desktop (≥1440px): teto de largura maior, tipografia um pouco maior. */
@media (min-width: 1440px) {
  .zone-utility-inner, .zone-main, .zone-menu nav, .footer-inner, main.container { max-width:1320px; }
  .search-box { max-width:620px; }
  .logo { font-size:1.1rem; }
}

/* =====================================================================
   BOTÕES / BADGES / CARDS / FORMS / ALERTS (independem de breakpoint)
   ===================================================================== */
.btn { display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:var(--radius-sm); font-family:inherit; font-weight:600; cursor:pointer; }
.btn-md { padding:10px 18px; font-size:0.85rem; } .btn-sm { padding:6px 12px; font-size:0.76rem; } .btn-lg { padding:13px 24px; font-size:0.95rem; }
.btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--secondary); color:#fff; } .btn-secondary:hover { background:var(--secondary-hover); }
.btn-outline-primary { background:transparent; border-color:var(--primary); color:var(--primary); } .btn-outline-primary:hover { background:var(--primary-tint); }
.btn-ghost { background:transparent; color:var(--text-dim); border-color:var(--border); } .btn-ghost:hover { background:var(--bg); }
.btn-danger-outline { background:transparent; border-color:var(--danger); color:var(--danger); }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:var(--radius-sm); }
.badge-primary { background:var(--primary-tint); color:var(--primary); }
.badge-secondary { background:var(--secondary-tint); color:var(--secondary); }
.badge-ok { background:var(--ok-tint); color:var(--ok); }
.badge-warn { background:var(--warn-tint); color:var(--warn); }
.badge-danger { background:var(--danger-tint); color:var(--danger); }
.badge-neutral { background:var(--bg); color:var(--text-dim); border:1px solid var(--border); }

.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow); }
.stars { color:var(--star); font-size:0.9rem; }
.stars .off { color:var(--border); }

/* Seletor de nota clicável (formulário de avaliação) — estrela vazia até
   ser preenchida por clique/hover, da 1ª até a que foi escolhida. */
.star-rating { display:flex; gap:4px; }
.star-rating .star { background:none; border:none; padding:0; margin:0; font-size:1.7rem; line-height:1; color:var(--border); cursor:pointer; transition:color .1s; }
.star-rating .star.filled { color:var(--star); }

.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:0.76rem; font-weight:600; color:var(--text-dim); }
.field input, .field textarea, .field select { border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:0.85rem; background:var(--bg); color:var(--text); font-family:inherit; outline:none; width:100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }

/* Escolha de categorias do negócio (até 3, ver partials/category-checkboxes.blade.php) */
.category-checkboxes { display:flex; flex-wrap:wrap; gap:8px; }
.category-checkbox { display:flex; align-items:center; justify-content:flex-start; gap:5px; padding:7px 12px; border:1px solid var(--border); border-radius:2px; font-size:0.82rem; color:var(--text-dim); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.category-checkbox:has(input:checked) { background:var(--primary-tint); border-color:var(--primary); color:var(--primary); }
.category-checkbox:has(input:disabled:not(:checked)) { opacity:0.4; cursor:not-allowed; }
.category-checkbox input { margin:0; }

.alert { display:flex; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); font-size:0.83rem; border:1px solid; margin-bottom:16px; }
.alert-ok { background:var(--ok-tint); border-color:var(--ok); color:var(--ok); }
.alert-warn { background:var(--warn-tint); border-color:var(--warn); color:var(--warn); }
.alert-danger { background:var(--danger-tint); border-color:var(--danger); color:var(--danger); }
.alert-info { background:var(--info-tint); border-color:var(--info); color:var(--info); }

table.admin { width:100%; border-collapse:collapse; font-size:0.85rem; }
table.admin th { text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); padding:8px 10px; border-bottom:1px solid var(--border); }
table.admin td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.admin tr:last-child td { border-bottom:none; }
table.admin tbody tr { transition:background-color .12s; }
table.admin tbody tr:hover { background:var(--bg); }

/* =====================================================================
   ADMIN SHELL — só Notebook/Desktop (decidido). Sem breakpoints de
   tablet/smartphone aqui de propósito; largura mínima de conforto
   assumida em ~1024px, com scroll horizontal como rede de segurança
   em vez de investir num layout mobile que não foi pedido.
   ===================================================================== */
/* Altura travada na tela (não min-height): quem rola é só o .admin-main
   (barra de cima + conteúdo), por dentro do seu próprio overflow — a
   sidebar, por ficar fora dessa área de scroll, nunca se move. Isso
   também assumiu o papel do overflow-x:auto que antes ficava aqui (rede
   de segurança pra telas abaixo de min-width), agora só no .admin-main. */
.admin-shell { display:flex; height:100vh; min-width: 960px; }
.admin-sidebar { width:246px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100%; }

/* Marca no topo da sidebar — logo do cliente (Configurações) ou o
   ponto padrão, igual ao header do site público. */
.admin-sidebar .brand { padding:18px; font-weight:800; font-size:0.92rem; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:3px; color:var(--text); }
.admin-sidebar .brand-mark { display:flex; align-items:center; gap:8px; min-width:0; }
.admin-sidebar .brand .dot-logo { width:10px; height:10px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.admin-sidebar .brand-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-sidebar .brand-tag { font-size:0.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }

/* Com logomarca: ocupa o espaço sozinha, centralizada e grande (70% da
   largura do bloco) — sem o texto "admin" junto, só a marca do cliente. */
.admin-sidebar .brand.has-logo { align-items:center; justify-content:center; padding:26px 18px; }
.admin-sidebar .brand-logo { width:70%; height:auto; max-height:84px; display:block; object-fit:contain; }

/* Menu em grupos (Visão geral / Assinantes / Comunidade / Sistema) —
   só reorganiza visualmente os mesmos links de sempre, sem mudar rotas. */
.admin-sidebar nav { padding:14px 10px; flex:1; overflow-y:auto; }
.admin-nav-group { margin-bottom:16px; }
.admin-nav-group:last-child { margin-bottom:0; }
.admin-nav-group-label { display:block; padding:0 12px 6px; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); opacity:.8; }
.admin-sidebar nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:0.85rem; font-weight:500; color:var(--text-dim); margin-bottom:2px; transition:background-color .12s, color .12s; }
.admin-sidebar nav a .admin-icon { color:var(--text-dim); opacity:.8; transition:color .12s, opacity .12s; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background:var(--primary-tint); color:var(--primary); }
.admin-sidebar nav a.active .admin-icon, .admin-sidebar nav a:hover .admin-icon { color:var(--primary); opacity:1; }
.admin-sidebar nav a.active { font-weight:700; }

/* Bloco do usuário logado, fixo no rodapé da sidebar — avatar com a
   inicial do nome (sem depender de foto de perfil, que o admin não tem). */
.admin-user { display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--border); }
.admin-user-avatar { width:34px; height:34px; border-radius:50%; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; flex-shrink:0; }
.admin-user-info { display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.admin-user-info strong { font-size:0.8rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-user-info span { font-size:0.72rem; color:var(--text-dim); }
.admin-user-logout { background:none; border:none; padding:6px; margin:0; border-radius:7px; color:var(--text-dim); cursor:pointer; display:flex; flex-shrink:0; }
.admin-user-logout:hover { background:var(--danger-tint); color:var(--danger); }
.admin-user-logout .admin-icon svg { width:17px; height:17px; }

.admin-main { flex:1; min-width:0; background:var(--bg); height:100%; overflow-y:auto; overflow-x:auto; }
.admin-topbar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); background:var(--panel); }
.admin-content { padding:24px; width:100%; box-sizing:border-box; }

/* Ícone genérico do admin (menu, topbar, cards) — ver partials/admin-icon.blade.php. */
.admin-icon { display:inline-flex; flex-shrink:0; }
.admin-icon svg { width:18px; height:18px; display:block; }
.btn .admin-icon svg { width:15px; height:15px; }

/* Abas da tela de Configurações (Dados principais/Pagamentos/E-mail) —
   navegação por query string (?tab=...), sem JS. */
.settings-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.settings-tabs a { padding:10px 16px; font-size:0.85rem; font-weight:600; color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; }
.settings-tabs a.active { color:var(--primary); border-bottom-color:var(--primary); }
.settings-tabs a:hover { color:var(--primary); }

/* Configurações — antes tudo travado em max-width:640px (sobrava muito
   vazio nas telas largas do admin); agora ocupa a largura toda, igual às
   outras páginas. Duas colunas quando faz sentido (form principal + itens
   de apoio, ex.: banners ou "testar envio"), e os campos de cada card se
   distribuem sozinhos conforme o espaço disponível. */
.settings-intro { color:var(--text-dim); font-size:0.85rem; margin:0 0 18px; max-width:760px; }
.settings-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
.settings-grid.settings-grid-even { grid-template-columns:1fr 1fr; }
.settings-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.settings-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.settings-card { padding:20px; }
.settings-card h3 { margin:0 0 14px; font-size:0.9rem; }
.settings-card p.hint { color:var(--text-dim); font-size:0.8rem; margin:0 0 14px; }
.settings-field-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.settings-field-grid + .settings-field-grid { margin-top:14px; }
.settings-field-wide { grid-column:1/-1; }
.settings-field-grid.settings-field-grid-4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width: 900px) { .settings-field-grid.settings-field-grid-4 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) { .settings-field-grid.settings-field-grid-4 { grid-template-columns:1fr; } }
.settings-field-grid .field p.field-help { color:var(--text-dim); font-size:0.76rem; margin:4px 0 0; }
.settings-banner-row { display:flex; align-items:center; gap:10px; }
.settings-banner-row + .settings-banner-row { margin-top:10px; }
.settings-banner-row img { width:220px; height:104px; object-fit:cover; border-radius:6px; border:1px solid var(--border); flex-shrink:0; }
.settings-banner-row form.link-form { flex:1; display:flex; gap:6px; align-items:center; min-width:0; }
.settings-banner-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.settings-banner-add input[type="url"] { flex:1; min-width:160px; }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card { padding:16px; display:flex; align-items:flex-start; gap:12px; transition:box-shadow .15s, transform .15s; }
a.stat-card:hover { box-shadow:var(--shadow-strong); transform:translateY(-1px); }
.stat-card-body { min-width:0; flex:1; }
.stat-card .n { font-size:1.55rem; font-weight:800; color:var(--text); line-height:1.15; }
.stat-card .l { font-size:0.76rem; color:var(--text-dim); margin-top:2px; }
.stat-card-icon { width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--primary-tint); color:var(--primary); }
.stat-card-icon .admin-icon svg { width:20px; height:20px; }
.stat-card-icon.warn { background:var(--warn-tint); color:var(--warn); }
.stat-card-icon.danger { background:var(--danger-tint); color:var(--danger); }
.stat-card-icon.ok { background:var(--ok-tint); color:var(--ok); }
.stat-card-icon.info { background:var(--info-tint); color:var(--info); }

.admin-table-card { padding:18px; overflow-x:auto; }
.admin-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
.admin-card-header h3 { margin:0; font-size:0.9rem; }
.admin-card-header p { margin:2px 0 0; font-size:0.76rem; color:var(--text-dim); }

/* Duas colunas no dashboard (pendentes + pagamentos/atrasadas) — em telas
   estreitas (mas o admin já assume ~1024px+, ver nota no topo) empilha. */
.dashboard-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; margin-top:16px; }
@media (max-width: 1150px) { .dashboard-grid, .settings-grid, .settings-grid.settings-grid-even, .settings-pair { grid-template-columns:1fr; } }

.admin-empty { padding:24px 4px; text-align:center; color:var(--text-dim); font-size:0.85rem; }

.mini-list { display:flex; flex-direction:column; gap:2px; }
.mini-list-item { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border); font-size:0.82rem; }
.mini-list-item:last-child { border-bottom:none; }
.mini-list-avatar { width:30px; height:30px; border-radius:50%; background:var(--bg); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.74rem; flex-shrink:0; }
.mini-list-main { min-width:0; flex:1; }
.mini-list-main strong { display:block; font-size:0.83rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-list-main span { display:block; font-size:0.74rem; color:var(--text-dim); }
.mini-list-value { font-size:0.83rem; font-weight:700; color:var(--text); white-space:nowrap; }
.mini-list-value.ok { color:var(--ok); }
.mini-list-value.danger { color:var(--danger); }

.admin-tabs { display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.admin-tabs a { padding:9px 16px; font-size:0.85rem; font-weight:600; color:var(--text-dim); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.admin-tabs a:hover { color:var(--text); }
.admin-tabs a.active { color:var(--primary); border-bottom-color:var(--primary); }

/* Abas do cadastro público (morador/assinante) — fundo preenchido na
   ativa, pra ficar bem claro qual tipo de cadastro está selecionado. */
.register-tabs { display:flex; gap:8px; }
.register-tabs a { padding:9px 18px; font-size:0.85rem; font-weight:600; color:var(--text); text-decoration:none; border-radius:var(--radius-sm); background:var(--bg); }
.register-tabs a:hover:not(.active) { background:var(--border); }
.register-tabs a.active { background:var(--primary); color:#fff; }

.admin-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; }
.admin-login-card { width:100%; max-width:340px; padding:30px 26px; text-align:center; }
.admin-login-mark { width:44px; height:44px; margin:0 auto; border-radius:50%; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.muted-note { font-size:0.72rem; color:var(--text-dim); margin-top:18px; line-height:1.5; }

/* =====================================================================
   VITRINE (grid de negócios) — mobile-first
   ===================================================================== */
.grid3 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 768px)  { .grid3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1024px) { .grid3 { grid-template-columns:repeat(3,1fr); gap:18px; } }
/* Destaques e Comércio e Serviços: 2 cards por linha já no celular, igual
   à fileira "Destaques do mês" da home (mesmo card, mesmos tamanhos de
   fonte no mobile — ver .biz-card-v2-name/.biz-card-v2-meta .badge/
   .biz-card-v2-desc acima, que já valem em qualquer lugar que use
   .biz-card-v2, sem precisar repetir aqui). */
@media (max-width: 767px) {
  .highlights-grid, .vitrine-grid { grid-template-columns:repeat(2,1fr); }
  /* CTA "Seu negócio aqui" fica baixinho quando sobra sozinho na última
     linha (filtro por categoria com nº ímpar de resultados): o grid só
     estica a altura dos itens de uma linha pelo maior VIZINHO da mesma
     linha, e sem vizinho não tem com o quê esticar. Altura mínima fixa
     (medida de um .biz-card-v2 normal nesse layout) resolve sem depender
     de ter par do lado. */
  .vitrine-grid .biz-card { min-height:264px; }
}
/* Mesmo problema do bloco mobile acima, só que no tablet (768-1023px):
   .grid3 também vira 2 colunas nessa faixa, então o CTA sozinho na
   última linha (nº ímpar de resultados) sofre da mesma falta de vizinho
   pra esticar a altura. */
@media (min-width: 768px) and (max-width: 1023px) {
  .vitrine-grid .biz-card { min-height:425px; }
}

/* Grid de 4 colunas (avisos/eventos/pets) — cards mais estreitos para caber 4 por linha. */
.grid4 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 640px)  { .grid4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 900px)  { .grid4 { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width: 1200px) { .grid4 { grid-template-columns:repeat(4,1fr); gap:16px; } }
/* Pets/Avisos/Eventos: 2 cards por linha já no celular, igual às outras
   páginas (Destaques, Comércio e Serviços). */
@media (max-width: 767px) { .pets-grid, .notices-grid, .events-grid, .search-grid { grid-template-columns:repeat(2,1fr); } }

/* Carrossel de cards da home (Destaques, Pets, Avisos, Eventos) — via
   Swiper.js (ver card-carousel-scripts.blade.php): 3 cards por vez (2 em
   tablet, 1 em mobile), loop infinito de verdade, auto-rotação. Largura/
   espaçamento dos slides ficam a cargo do Swiper (slidesPerView/
   spaceBetween por breakpoint), não de flex-basis daqui. */
.card-carousel { position:relative; }
.card-carousel .swiper-wrapper { align-items:stretch; }
.card-carousel .swiper-slide { min-width:0; height:auto; }
.card-carousel-arrow { position:absolute; top:40%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:#ffffff; border:1px solid var(--border); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; font-size:1.3rem; line-height:1; color:var(--text); padding:0; }
.card-carousel-prev { left:-14px; }
.card-carousel-next { right:-14px; }
@media (max-width: 640px) { .card-carousel-arrow { display:none; } }
.btn.card-carousel-cta-btn { width:100px; justify-content:center; white-space:nowrap; font-size:calc(0.76rem + 3px); }
.btn.card-carousel-cta-btn:hover { background:var(--primary); color:var(--primary-contrast); }
.row-divider { border:none; border-top:1px solid var(--border); margin:28px 0 0; }

.biz-card { padding:16px; display:flex; flex-direction:column; gap:6px; }
.biz-card .cat-icon { width:36px; height:36px; border-radius:9px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }

.biz-card-v2 { display:block; color:inherit; }
.biz-card-v2-image-wrap { position:relative; }
.biz-card-v2-image { width:100%; aspect-ratio:5/4; background:var(--bg); overflow:hidden; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.biz-card-v2-image img { width:100%; height:100%; object-fit:cover; display:block; }
.biz-card-v2-image-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.highlight-badge.biz-card-v2-badge { top:10px; left:10px; width:42px; height:42px; }
.highlight-badge.biz-card-v2-badge .highlight-lottie-target { width:42px; height:42px; }
/* Aberto/Fechado dentro da imagem (canto inferior direito) — liberou a
   linha de categorias pra caber as até 3 categorias que um negócio pode
   ter agora, sem disputar espaço com esse badge. */
.biz-card-v2-status { position:absolute; bottom:10px; right:10px; }
.biz-card-v2-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.biz-card-v2-name { text-align:center; font-size:1rem; }
.biz-card-v2-categories { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.biz-card-v2-desc { margin:0; color:var(--text-dim); font-size:0.8rem; line-height:1.4; min-height:calc(0.8rem * 1.4 * 3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* No carrossel, .swiper-wrapper (align-items:stretch, ver regra acima) já
   deixa cada .swiper-slide do tamanho do maior da linha — mas o card em
   si (bloco comum) não preenchia essa altura sozinho, sobrando espaço
   vazio embaixo dos cards mais curtos. Esticando o card e deixando o
   corpo crescer (flex:1), todos ficam com a mesma altura visível. */
.card-carousel .swiper-slide > .biz-card-v2 { height:100%; display:flex; flex-direction:column; }
.card-carousel .swiper-slide > .biz-card-v2 .biz-card-v2-body { flex:1; }
/* Celular: nome com fonte menor e entrelinha mais justa (o padrão de
   1.55 do body deixava a quebra de linha do nome muito espaçada); tags
   de categoria/aberto-fechado e descrição reduzidas pra 10px pra caber
   tudo certinho no card estreito (decidido, ver ajustes de responsividade). */
@media (max-width: 767px) {
  .biz-card-v2-name { font-size:13px; line-height:1.2; }
  .biz-card-v2-categories .badge { font-size:6px; padding:2px 6px; } /* era 8px, -2px pedido */
  .biz-card-v2-status { font-size:8px; padding:2px 6px; }
  .biz-card-v2-desc { font-size:10px; line-height:1.35; min-height:calc(10px * 1.35 * 3); }
  /* Selo de destaque (lottie) 30% menor no celular — mesmo pedido pro
     selo da página individual do assinante, ver #highlightBadge abaixo. */
  .highlight-badge.biz-card-v2-badge, .highlight-badge.biz-card-v2-badge .highlight-lottie-target { width:29.4px; height:29.4px; }
}

/* Card com foto principal em cima e título embaixo (avisos/eventos/pets)
   — clicável, abre o modal de detalhes. */
.photo-card { padding:0; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; text-decoration:none; color:inherit; text-align:left; background:var(--panel); border:none; font-family:inherit; }
.photo-card .photo-card-img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--bg); }
.photo-card .photo-card-img-placeholder { width:100%; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; font-size:2.6rem; background:var(--primary-tint); color:var(--primary); }
.photo-card .photo-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.photo-card .photo-card-body strong { font-size:0.9rem; }
.photo-card-meta { font-size:0.76rem; }
/* Mesmo ajuste de altura feito no .biz-card-v2 (ver acima): o .swiper-slide
   já fica esticado pro tamanho do maior da linha (align-items:stretch no
   .swiper-wrapper), mas o card em si só preenche isso com height:100%
   explícito — senão sobra espaço vazio embaixo dos cards mais curtos. */
.card-carousel .swiper-slide > .photo-card { height:100%; }
/* Celular: mesmos tamanhos usados no card dos assinantes (.biz-card-v2,
   ver bloco acima), pra ficar tudo consistente nos cards de pets/avisos/
   eventos (.photo-card). Precisa vir depois das regras base do .photo-card
   acima — mesma especificidade, então a ordem no arquivo decide. */
@media (max-width: 767px) {
  .photo-card .photo-card-body strong { font-size:13px; line-height:1.2; }
  .photo-card .badge { font-size:8px; padding:2px 6px; }
  .photo-card-meta { font-size:10px; }
}

/* Filtro de categoria + grid — vira sidebar fixa a partir do notebook
   (ver bloco 1024px abaixo). Antes disso (tablet/celular), a lista de
   categorias era uma faixa horizontal com scroll que cortava opções sem
   deixar claro que dava pra rolar — agora é uma gaveta lateral (mesmo
   padrão do menu do header, ver .mobile-drawer-backdrop em
   layouts/site.blade.php), aberta pelo botão "Categorias". */
/* Título de página (Comércio e Serviços / Destaques do mês) — centralizado,
   mesmo tamanho do título da home em cada faixa (ver .home-hero-title
   acima). */
.vitrine-title { text-align:center; font-size:50px; margin:0 0 2px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .vitrine-title { font-size:32px; margin-bottom:12px; } /* título→linha de baixo: 2px +10px pedido */
}
@media (max-width: 767px) {
  .vitrine-title { font-size:31px; line-height:45.8px; margin-bottom:12px; } /* fonte: 36px -5px; título→linha de baixo: 2px +10px pedido */
}
/* Título "Resultados da busca" — só o notebook/desktop diferem do resto
   das páginas .vitrine-title (40px em vez de 50px); tablet/celular
   seguem o mesmo valor das outras (32px/31px, herdado acima). */
@media (min-width: 1024px) {
  .vitrine-title.search-title { font-size:40px; }
}

/* Títulos de cada seção da busca (Comércio e Serviços/Avisos/Eventos/Pets). */
.search-section-title { font-size:22px; margin:0 0 12px; }
@media (max-width: 1023px) {
  .search-section-title { font-size:20px; }
}

/* Botão de categorias + texto de resultados na mesma linha (tablet/
   celular) — o botão some a partir do notebook (ver .categories-toggle
   no bloco 1024px abaixo), sobrando só o texto sozinho na linha. */
.vitrine-meta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }

.vitrine-layout { display:flex; flex-direction:column; gap:20px; }
.filters {
  position:fixed; top:0; left:0; bottom:0; z-index:201;
  width:78%; max-width:300px;
  padding:18px; background:var(--panel); border:none; border-radius:0; box-shadow:0 4px 24px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:2px; overflow-y:auto;
  transform:translateX(-100%); transition:transform .25s ease;
}
.mobile-drawer-backdrop.open .filters { transform:translateX(0); }
.filters h4 { margin:0 0 10px; font-size:0.82rem; }
.filters .catlist { display:flex; flex-direction:column; gap:4px; overflow-x:visible; }
.filters .catlist a { display:flex; gap:6px; justify-content:space-between; padding:10px 8px; border-radius:6px; font-size:0.85rem; color:var(--text-dim); background:none; white-space:normal; }
.filters .catlist a.active, .filters .catlist a:hover { background:var(--primary-tint); color:var(--primary); }

/* Menu de categorias em círculos (avisos/pets) — ícone em cima (SVG
   cadastrado no admin, ou fixo no código pro Pets), nome como legenda
   embaixo. Borda de 2px na cor do sistema em todos; a categoria ativa
   ganha um fundo levemente tingido pra se destacar sem precisar recolorir
   o ícone (que é uma imagem, não herda currentColor). */
.category-circles { display:flex; justify-content:center; gap:28px; overflow-x:auto; padding:16px 14px; margin-bottom:18px; background:#ffffff; border-radius:5px; box-shadow:0 4px 10px rgba(20,20,30,0.08); }
.category-circle { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; width:140px; text-decoration:none; }
.category-circle .circle { width:80px; height:80px; border-radius:50%; background:#ffffff; border:2px solid var(--primary); display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0; font-size:2rem; font-weight:700; transition:background .15s; }
.category-circle .circle img, .category-circle .circle svg { width:45px; height:45px; object-fit:contain; display:block; }
.category-circle .circle .contact-icon { color:inherit; }
/* Ícone enviado pelo admin (arquivo SVG solto, cor não controlável por
   CSS via <img>) — usamos a técnica de "máscara": o arquivo vira só um
   recorte/silhueta, e quem dá a cor de verdade é o background, na cor do
   sistema. Assim o ícone acompanha a cor automaticamente, não importa a
   cor original do arquivo enviado. */
.category-circle .circle .icon-mask { width:45px; height:45px; background-color:var(--primary); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; display:block; }
.category-circle span:last-child { font-size:0.85rem; text-align:center; color:var(--text-dim); line-height:1.2; }
.category-circle.active .circle { background:var(--primary-tint); }
.category-circle.active span:last-child { color:var(--primary); font-weight:600; }
/* Celular: círculos bem menores pra caber todos numa linha só, sem
   precisar rolar de lado — cada categoria divide igualmente a largura
   disponível (flex:1) em vez do tamanho fixo de 140px usado no
   desktop/tablet. */
@media (max-width: 767px) {
  .category-circles { gap:4px; padding:10px 6px; overflow-x:visible; }
  .category-circle { flex:1; width:auto; min-width:0; gap:4px; }
  .category-circle .circle { width:40px; height:40px; font-size:0.9rem; }
  .category-circle .circle img, .category-circle .circle svg, .category-circle .circle .icon-mask { width:20px; height:20px; }
  .category-circle span:last-child { font-size:0.6rem; }
}
/* Tablet: mesma ideia do celular acima — 140px fixo por item vezes 5
   categorias (com "Todos") estourava a largura disponível e criava
   scroll horizontal (visto em Avisos). Círculos e espaço entre eles
   menores, mas ainda maiores que no celular, já que tem mais espaço. */
@media (min-width: 768px) and (max-width: 1023px) {
  .category-circles { gap:10px; padding:14px 10px; overflow-x:visible; }
  .category-circle { flex:1; width:auto; min-width:0; gap:6px; }
  .category-circle .circle { width:56px; height:56px; font-size:1.2rem; }
  .category-circle .circle img, .category-circle .circle svg, .category-circle .circle .icon-mask { width:28px; height:28px; }
  .category-circle span:last-child { font-size:0.72rem; }
}

@media (min-width: 1024px) {
  .vitrine-layout { flex-direction:row; align-items:flex-start; gap:24px; }
  .categories-toggle { display:none; } /* a partir daqui a .filters já aparece fixa do lado esquerdo, não precisa do botão/gaveta */
  /* Desliga o wrapper de overlay nessa faixa — sem isso, a .filters (que
     vira position:sticky logo abaixo) ficaria presa dentro de um
     ancestral position:fixed e sairia do fluxo do flex .vitrine-layout,
     quebrando o layout lado a lado com .vitrine-results. */
  .categories-backdrop { position:static; inset:auto; background:none; opacity:1; visibility:visible; transition:none; z-index:auto; }
  .filters .mobile-drawer-close { display:none; } /* só faz sentido fechar uma gaveta — aqui a .filters já fica sempre visível */
  .filters {
    position:sticky; top:146px; z-index:auto; /* 96px + 50px pedido, pra não ficar colado no header ao rolar */
    width:220px; max-width:none; flex-shrink:0;
    padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow);
    transform:none; transition:none;
  }
  .filters .catlist a { padding:6px 8px; }
  .vitrine-results { flex:1; min-width:0; }
}

.pagination { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.pagination button, .pagination a { width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--panel); color:var(--text-dim); cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center; }
.pagination .active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* =====================================================================
   PÁGINA INDIVIDUAL DO NEGÓCIO — mobile-first
   ===================================================================== */
/* Banner: proporção fixa de 1440x450 (recomendado no upload em Minha
   Conta) — usa aspect-ratio pra manter essa forma em qualquer largura
   de tela, em vez de uma altura fixa que distorceria a imagem. */
.biz-hero { aspect-ratio: 1440 / 450; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--primary-tint), var(--secondary-tint)); display:flex; align-items:flex-end; padding:14px; background-size:cover; background-position:center; }
/* Grid em vez de flex: cada bloco (ver grid-area no HTML) pode ser
   reordenado só trocando grid-template-areas por breakpoint, sem duplicar
   conteúdo. Celular (base) e notebook/desktop mantêm a ordem "natural";
   só o tablet troca (Contato antes de Sobre — decidido). */
.biz-detail-layout {
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:-30px;
  grid-template-areas: "idcard" "sobre" "fotos" "avaliar" "avaliacoes" "contato";
}
.biz-area-idcard { grid-area:idcard; }
.biz-area-sobre { grid-area:sobre; }
.biz-area-fotos { grid-area:fotos; }
.biz-area-avaliar { grid-area:avaliar; }
.biz-area-avaliacoes { grid-area:avaliacoes; }
.biz-area-contato { grid-area:contato; }
.biz-id-card { padding:16px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.biz-name-row { display:flex; align-items:center; gap:8px; }

/* Botão "Compartilhar" da página individual — abre um menu com os
   destinos padrão (WhatsApp, Facebook, Telegram, e-mail, copiar link);
   em navegadores com Web Share API nativa (celular), abre a folha de
   compartilhamento do sistema em vez desse menu. */
.share-widget { position:relative; }
/* Ícone padrão de compartilhar (fornecido pelo cliente) — fundo branco e
   borda preta fixos, não seguem o tema claro/escuro (decidido). */
.share-btn { width:25px; height:25px; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; background:#ffffff; border:2px solid #000000; border-radius:var(--radius-sm); color:#000000; cursor:pointer; }
.share-btn .contact-icon { color:#000000; }
.share-btn .contact-icon svg { width:15px; height:15px; display:block; margin-top:0; }
.share-menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--panel); border-radius:var(--radius-md); box-shadow:var(--shadow-strong); padding:6px; min-width:190px; z-index:50; display:none; flex-direction:column; }
.share-menu.open { display:flex; }
.share-menu a, .share-menu button { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:0.85rem; color:var(--text); background:none; border:none; text-align:left; cursor:pointer; width:100%; text-decoration:none; font-family:inherit; }
.share-menu a:hover, .share-menu button:hover { background:var(--bg); }
.share-menu svg { flex-shrink:0; width:16px; height:16px; }

/* Logo: formato escolhido pelo assinante em Minha Conta — quadrado
   (180x180) ou retangular 3x1 (540x180). aspect-ratio mantém a
   proporção certa mesmo encolhendo em telas pequenas. */
/* Fundo branco fixo + contorno cinza claro (não segue o tema claro/escuro
   nem a marca do cliente): logos costumam ser desenhadas pra fundo branco,
   então mantém contraste e leitura consistentes em qualquer instalação. */
.biz-id-card .logo-ph { border-radius:var(--radius-md); background:#ffffff; border:1px solid #e2e5e8; padding:15px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; box-shadow:var(--shadow); overflow:hidden; }
.biz-id-card .logo-ph.shape-quadrado { width:180px; max-width:100%; aspect-ratio: 1 / 1; }
.biz-id-card .logo-ph.shape-retangular { width:540px; max-width:100%; aspect-ratio: 3 / 1; }
/* Wrapper só pra poder pendurar o selo de Destaque no canto da logo sem
   ele ser cortado pelo overflow:hidden do próprio .logo-ph. */
.logo-ph-wrap { position:relative; display:inline-block; flex-shrink:0; }
.highlight-badge { position:absolute; top:-12px; left:-12px; width:55px; height:55px; border-radius:50%; background:#ffffff; box-shadow:0 4px 10px rgba(20,20,30,0.25); display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; }
.highlight-badge #highlightLottie { width:55px; height:55px; }
/* Celular: selo 30% menor — mesmo pedido do selo dos cards (.biz-card-v2-badge,
   ver bloco mobile acima). */
@media (max-width: 767px) {
  #highlightBadge, #highlightBadge #highlightLottie { width:38.5px; height:38.5px; }
}
/* Tooltip "Destaque do mês" — aparece no hover (desktop) e no toque
   (mobile, via classe .show-tooltip alternada em JS, já que touch não
   tem estado de hover persistente). */
.highlight-tooltip { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; background:#1b1f22; color:#fff; font-size:0.72rem; font-weight:600; padding:5px 10px; border-radius:6px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; z-index:5; }
.highlight-tooltip::after { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:#1b1f22; }
.highlight-badge:hover .highlight-tooltip, .highlight-badge.show-tooltip .highlight-tooltip { opacity:1; visibility:visible; }
.infoblock { padding:16px 18px; margin-top:14px; }
.infoblock h3 { margin:0 0 8px; font-size:0.95rem; }
.contact-list { list-style:none; padding:0; margin:0; font-size:0.85rem; color:var(--contact-text); }
.contact-list li { padding:10px 0; border-bottom:1px solid var(--border); }
.contact-list li:last-child { border-bottom:none; }
.contact-list a { display:flex; align-items:flex-start; gap:10px; color:inherit; text-decoration:none; }
.contact-list a:hover span { text-decoration:underline; }
.contact-icon { display:block; flex-shrink:0; color:var(--contact-text); }
.contact-icon svg { width:16px; height:16px; display:block; margin-top:2px; }

/* Redes sociais do negócio — só as preenchidas aparecem, numa linha
   acima dos dados de contato. Alinhadas à esquerda com espaçamento fixo
   entre elas, em vez de espalhadas: com poucas preenchidas, ficam
   agrupadas à esquerda; conforme mais são cadastradas, a linha vai
   completando até o final (decidido). */
.social-icons { display:flex; justify-content:flex-start; gap:15px; margin-bottom:14px; }
.social-icons a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--bg); color:var(--contact-text); transition:background .15s, color .15s; }
.social-icons a:hover { background:var(--primary); color:#fff; }
.social-icons .contact-icon svg { width:17px; height:17px; margin-top:0; }
/* Mapa real (embed do Google Maps via endereço cadastrado, sem chave de API). */
.map-ph { height:180px; border-radius:var(--radius-sm); margin-top:10px; display:block; }
.review { padding:14px 0; border-top:1px solid var(--border); }
.review:first-child { border-top:none; }
.review .rhead { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.review .rname { font-weight:600; font-size:0.85rem; }
.review p { margin:4px 0; font-size:0.84rem; color:var(--text-dim); }
.review .rreply { margin-left:12px; margin-top:6px; padding:8px 12px; background:var(--bg); border-radius:8px; font-size:0.8rem; }

/* Fotos anexadas a uma avaliação (até 3, 800x800). */
.review-photos, .comment-photos { display:flex; gap:8px; flex-wrap:wrap; }
.review-photos img, .comment-photos img { width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:pointer; transition:opacity .15s; }
.review-photos img:hover, .comment-photos img:hover { opacity:0.85; }

/* Galeria de fotos do negócio — já salvas em 4x5 (retrato), object-fit:cover
   só como garantia extra de exibição caso alguma imagem antiga não bata
   exatamente a proporção. Clicável (abre o visualizador/lightbox). */
.photo-gallery { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.photo-gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:pointer; transition:opacity .15s; }
.photo-gallery img:hover { opacity:0.88; }
@media (min-width: 600px) { .photo-gallery { grid-template-columns:repeat(3, 1fr); } }
@media (min-width: 1024px) { .photo-gallery { grid-template-columns:repeat(5, 1fr); } }

/* Visualizador de fotos (lightbox) — clicar numa foto da galeria abre
   em tamanho grande, com navegação entre todas as fotos do negócio. */
.lightbox-backdrop { position:fixed; inset:0; background:rgba(10,10,12,0.9); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:300; }
.lightbox-backdrop.open { display:flex; }
.lightbox-backdrop img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:8px; }
.lightbox-backdrop button { position:fixed; background:rgba(255,255,255,0.12); color:#fff; border:none; cursor:pointer; border-radius:50%; width:44px; height:44px; font-size:1.3rem; display:flex; align-items:center; justify-content:center; line-height:1; }
.lightbox-backdrop button:hover { background:rgba(255,255,255,0.22); }
.lightbox-close { top:18px; right:18px; }
.lightbox-prev { left:14px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:14px; top:50%; transform:translateY(-50%); }
.lightbox-counter { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:0.82rem; background:rgba(255,255,255,0.12); padding:4px 12px; border-radius:999px; }
@media (max-width: 600px) { .lightbox-prev { left:6px; } .lightbox-next { right:6px; } .lightbox-backdrop button { width:38px; height:38px; font-size:1.1rem; } }

/* Galeria em Minha Conta: arrastar pra reordenar. */
.gallery-item { cursor:grab; }
.gallery-item.dragging { opacity:0.4; }

/* Editor rich text da descrição (Minha Conta). */
.richtext-toolbar { display:flex; gap:4px; margin-bottom:6px; }
.richtext-toolbar button { border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:6px; padding:5px 10px; font-size:0.8rem; cursor:pointer; line-height:1; }
.richtext-toolbar button:hover { background:var(--primary-tint); border-color:var(--primary); }
.richtext-editor { min-height:500px; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:0.9rem; background:var(--input-bg, var(--panel)); overflow-y:auto; white-space:pre-wrap; }
.richtext-editor:focus { outline:none; border-color:var(--primary); }
.richtext-editor p { margin:0 0 8px; }
.richtext-editor p:last-child { margin-bottom:0; }
.richtext-editor ul, .richtext-editor ol { margin:0 0 8px 20px; padding:0; }

/* Horário de funcionamento (Minha Conta). */
.hours-row { display:grid; grid-template-columns:120px 90px 1fr; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.hours-row:last-child { border-bottom:none; }
/* Editar negócio (Minha Conta): 1 campo por linha no celular (3 por linha
   quebrava os campos), logomarca e banner em linhas separadas, e no
   horário de funcionamento os campos de hora descem pra linha de baixo
   do dia + "Aberto". Tablet+ mantém o layout de antes (3 e 2 colunas). */
.biz-edit-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.biz-edit-media-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.biz-edit-card { padding:22px; }
@media (max-width: 767px) {
  .hours-row { grid-template-columns:1fr auto; }
  .hours-row .hours-time { grid-column:1 / -1; }
  .biz-edit-card { padding:17px; } /* 22px -5px */
  /* Linha divisória separando Logomarca | Banner | Horário */
  .biz-edit-banner, .biz-edit-hours, .biz-edit-short { border-top:1px solid var(--border); padding-top:14px; }
  .biz-edit-cat { border-bottom:1px solid var(--border); padding-bottom:14px; }
  .biz-edit-media-grid { border-top:1px solid var(--border); padding-top:14px; }
}
/* Tablet: divisórias após Categorias, Imagem de divulgação, Logomarca+Banner
   e Horário de funcionamento. */
@media (min-width: 768px) and (max-width: 1023px) {
  .biz-edit-cat { border-bottom:1px solid var(--border); padding-bottom:14px; }
  .biz-edit-short { border-top:1px solid var(--border); padding-top:14px; }
  .biz-edit-media-grid { border-top:1px solid var(--border); padding-top:14px; }
  .biz-edit-hours { border-top:1px solid var(--border); padding-top:14px; border-bottom:1px solid var(--border); padding-bottom:14px; }
}
@media (min-width: 768px) {
  .biz-edit-grid { grid-template-columns:repeat(3, 1fr); }
  .biz-edit-media-grid { grid-template-columns:1fr 1fr; }
}
.hours-row input[type="checkbox"] { width:auto; }
.hours-row input[type="time"] { width:auto; padding:6px 8px; }
.hours-time { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-dim); }

/* Horário de funcionamento (página individual). */
.business-hours { border-top:1px solid var(--border); margin-top:18px; padding-top:18px; }
.hours-list { list-style:none; padding:0; margin:0; font-size:0.82rem; }
.hours-list li { display:flex; justify-content:space-between; gap:10px; padding:6px 8px; margin:0 -8px; border-bottom:1px solid var(--border); border-radius:6px; color:var(--text-dim); }
.hours-list li:last-child { border-bottom:none; }
.hours-list .hours-day { font-weight:600; color:var(--text); }
.hours-list li.today { background:var(--bg); color:var(--text); font-weight:700; }
.hours-list li.today .hours-day { color:var(--primary); font-weight:700; }

/* Descrição formatada na página individual. */
.biz-description { color:var(--text-dim); font-size:0.85rem; line-height:1.55; white-space:pre-line; }
.biz-description p { margin:0 0 10px; }
.biz-description p:last-child { margin-bottom:0; }
.biz-description ul, .biz-description ol { margin:0 0 10px 20px; padding:0; }

/* Texto de página estática (política de privacidade etc.) — HTML já bem
   estruturado, então sem white-space:pre-line (isso é só pra texto solto
   digitado pelo admin, aqui viraria espaço em branco extra por causa da
   indentação do próprio arquivo). Espaçamento enxuto entre título e
   texto, e entre texto e o próximo título. */
.policy-content { font-size:0.92rem; line-height:1.65; color:var(--text-dim); }
.policy-content h2 { font-size:1.05rem; color:var(--text); margin:22px 0 6px; }
.policy-content h2:first-child { margin-top:0; }
.policy-content p { margin:0 0 10px; }
.policy-content p:last-child { margin-bottom:0; }
.policy-content ul, .policy-content ol { margin:0 0 10px 20px; padding:0; }
.policy-content ul:last-child, .policy-content ol:last-child { margin-bottom:0; }
.policy-container { padding:28px 30px; }
.policy-title { font-size:1.4rem; }
.policy-updated { font-size:0.82rem; }
/* Sem isso, a regra genérica ".infoblock { padding:18px 20px }" do
   tablet+ (ver breakpoint 768px acima) prevaleceria aqui a partir do
   tablet — antes isso não acontecia só porque o padding estava inline
   (inline sempre vence classe), então o valor "real" sempre foi 28px
   30px em qualquer largura; mantendo isso explícito agora que virou
   classe, pra não mudar tablet/desktop sem querer. */
@media (min-width: 768px) { .infoblock.policy-container { padding:28px 30px; } }
/* Celular: todas as fontes da página (título, data, corpo do texto e
   subtítulos) 3px menores, e o padding interno do container cai pra
   10px (era 28px 30px) — decidido, ver ajustes de responsividade. */
@media (max-width: 767px) {
  .policy-container { padding:10px; }
  .policy-title { font-size:19.4px; } /* 1.4rem (22.4px) -3px */
  .policy-updated { font-size:10.12px; } /* 0.82rem (13.12px) -3px */
  .policy-content { font-size:11.72px; } /* 0.92rem (14.72px) -3px */
  .policy-content h2 { font-size:13.8px; } /* 1.05rem (16.8px) -3px */
}

/* Celular e tablet: logo descolado do banner (sem sobrepor) e
   centralizado na página — nome, categorias e avaliação centralizados
   embaixo dele, tipo cabeçalho de perfil. Contato sobe pra logo depois
   do cabeçalho, antes de Sobre (decidido, mesma ordem nos dois). Cada
   faixa só muda a largura do logo (ver blocos separados abaixo). */
@media (max-width: 1023px) {
  .biz-detail-layout {
    margin-top:0;
    grid-template-areas: "idcard" "contato" "sobre" "fotos" "avaliar" "avaliacoes";
  }
  .biz-id-card { flex-direction:column; }
  .biz-id-card .logo-ph-wrap { margin:0 auto; }
  /* Categorias (badges soltos, sem wrapper) e a linha de avaliação
     continuam fluindo normalmente (uma do lado da outra, com wrap) —
     só centralizadas via text-align, sem virar coluna. */
  .biz-id-info { text-align:center; }
  .biz-name-row { justify-content:center; }
}
/* Celular: logo em 300px fixo (era 180px quadrado/540px retangular) — o
   retangular sozinho já estourava a largura da tela e criava scroll
   horizontal na página inteira (o grid de 1 coluna de .biz-detail-layout
   fica largo igual ao maior item, então isso "puxava" Contato/Sobre/
   Fotos/etc. pra fora também, mesmo eles cabendo certinho). */
@media (max-width: 767px) {
  .biz-id-card .logo-ph.shape-quadrado,
  .biz-id-card .logo-ph.shape-retangular { width:300px; max-width:100%; }
}

@media (min-width: 768px) {
  .biz-hero { padding:18px; }
  .biz-id-card { padding:18px 20px; }
  .infoblock { padding:18px 20px; }
}

/* Tablet: logo em 400px fixo (era 180px quadrado/540px retangular). */
@media (min-width: 768px) and (max-width: 1023px) {
  .biz-id-card .logo-ph.shape-quadrado,
  .biz-id-card .logo-ph.shape-retangular { width:400px; max-width:100%; }
}

@media (min-width: 1024px) {
  .biz-detail-layout {
    grid-template-columns:1fr 320px; column-gap:24px; row-gap:16px; align-items:start;
    grid-template-areas:
      "idcard     contato"
      "sobre      contato"
      "fotos      contato"
      "avaliar    contato"
      "avaliacoes contato";
  }
  /* align-items:start (acima) já alinha .biz-id-card com o card de
     Contato por padrão. Ajuste fino pedido: subir só a logo mais 10px
     em relação a esse alinhamento natural. */
  .biz-id-card { margin-top:-15px; }
}

/* =====================================================================
   MINHA CONTA — menu lateral presente em todas as telas (dados, editar
   negócio, avaliações, plano), não só no dashboard.
   ===================================================================== */
.account-title { font-size:1.2rem; margin:0 0 16px; }
.account-layout { display:flex; flex-direction:column; gap:20px; min-height:60vh; }
.account-nav { padding:10px; flex-shrink:0; }
.account-nav a { display:block; padding:9px 12px; border-radius:8px; font-size:0.85rem; color:var(--text-dim); margin-bottom:2px; }
.account-nav a.active, .account-nav a:hover { background:var(--primary-tint); color:var(--primary); }
.account-main { min-width:0; flex:1; }

/* Menu lateral só a partir do notebook (1024px) — no tablet fica igual
   ao celular: uma coluna só, menu em cima e conteúdo embaixo (decidido). */
@media (min-width: 1024px) {
  .account-layout { flex-direction:row; align-items:flex-start; }
  .account-nav { width:200px; position:sticky; top:146px; /* mesmo offset do menu de categorias de Comércio e Serviços (.filters) */ }
}

/* =====================================================================
   AVISO DE COOKIES / LGPD — fixo no rodapé da tela, some ao clicar em
   "Entendi" (lembrado por localStorage). Abaixo do z-index dos modais,
   pra não competir com eles se ambos aparecerem juntos.
   ===================================================================== */
.lgpd-banner { position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--panel); border-top:1px solid var(--border); box-shadow:0 -4px 18px rgba(20,20,30,0.12); }
.lgpd-banner-inner { max-width:1200px; margin:0 auto; padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; text-align:center; }
.lgpd-banner-inner p { margin:0; font-size:0.82rem; color:var(--text-dim); }
.lgpd-banner-inner a { color:var(--primary); }

/* =====================================================================
   MODAL (popup) — usado nos Eventos: "lista de cards, popup com
   detalhes ao clicar" (decidido no documento original do cliente).
   ===================================================================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,14,12,0.45); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--panel); border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: 24px; box-shadow: var(--shadow-strong); max-height: 88vh; overflow-y: auto; }
.modal.modal-lg { max-width: 600px; }
.modal.modal-xl { max-width: 900px; }
.modal.modal-2xl { max-width: 1400px; height: 700px; overflow: hidden; display: flex; flex-direction: column; }

/* Lançamento de destaque (admin) — assinante escolhido via modal de
   busca, mostrando o mesmo card da vitrine (site.partials.business-card
   com asPicker=true) como botão de seleção em vez de link. */
.highlight-subscriber-preview { border:1px dashed var(--border); border-radius:var(--radius-sm); padding:12px 14px; font-size:0.85rem; display:flex; align-items:center; gap:12px; min-height:20px; }
.highlight-subscriber-preview-photo { width:104px; height:104px; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:2.6rem; flex-shrink:0; }
.highlight-subscriber-preview-photo img { width:100%; height:100%; object-fit:cover; }
.highlight-subscriber-preview-info { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }

.subscriber-picker-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; flex:1; min-height:0; overflow-y:auto; padding:4px 4px 4px 0; align-content:start; }
@media (min-width: 700px)  { .subscriber-picker-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width: 1000px) { .subscriber-picker-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width: 1300px) { .subscriber-picker-grid { grid-template-columns:repeat(6,1fr); } }
.biz-card-v2.subscriber-picker-card { padding:0; border:1px solid var(--border); font:inherit; text-align:left; cursor:pointer; width:100%; }
.biz-card-v2.subscriber-picker-card:hover { border-color:var(--primary); }
/* Modal de evento (site) — o dobro da largura do modal-lg (600px), pra
   caber a imagem de divulgação bem maior ao lado das informações. */
.modal.modal-event { max-width: 1200px; }
.modal dl.detail-grid { display:grid; grid-template-columns:140px 1fr; gap:0 12px; font-size:0.85rem; margin:0; }
.modal dl.detail-grid dt,
.modal dl.detail-grid dd { padding:10px 0; border-bottom:1px solid var(--border); }
.modal dl.detail-grid dt { color:var(--text-dim); }
.modal dl.detail-grid dd { margin:0; }
.modal dl.detail-grid dt:last-of-type,
.modal dl.detail-grid dd:last-of-type { border-bottom:none; }
.modal h3 { margin: 0 0 6px; }
.modal p { color: var(--text-dim); font-size: 0.88rem; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
body.modal-open { overflow: hidden; }

/* Layout 2 colunas do modal de detalhes (avisos/eventos/pets) — imagem
   (ou slide de fotos) à esquerda, informações à direita. */
.event-modal-body { display:flex; gap:54px; margin-top:10px; }
.modal-photo-col { flex-shrink:0; width:360px; }
.modal-info-col { flex:1; min-width:0; }
@media (max-width: 680px) {
  .event-modal-body { flex-direction:column; }
  .modal-photo-col { width:100%; }
}
/* Página individual do pet: no tablet (768-1023px) essa faixa ainda cai
   no layout lado a lado (só empilha abaixo de 680px) — foto e descrição
   ficam espremidas. Empilha também no tablet, foto em cima (decidido). */
@media (min-width: 768px) and (max-width: 1023px) {
  .pet-detail-body { flex-direction:column; }
  .pet-detail-body .modal-photo-col { width:100%; }
}
/* Página individual do aviso e do evento: mesma ideia acima, só que aqui
   empilha em todo o celular E tablet (680-1023px também ficava lado a
   lado e espremido) — foto em cima, descrição embaixo (decidido). */
@media (max-width: 1023px) {
  .notice-detail-body, .event-detail-body { flex-direction:column; }
  .notice-detail-body .modal-photo-col, .event-detail-body .modal-photo-col { width:100%; }
}

/* Slide de fotos dentro do modal — uma foto por vez com setas/pontos,
   clicar na foto abre o lightbox ampliado. */
.photo-slider { position:relative; width:100%; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--bg); }
.photo-slider img { width:100%; height:100%; object-fit:cover; display:none; cursor:pointer; }
.photo-slider img.active { display:block; }
.photo-slider .slider-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(10,14,12,0.55); color:#fff; border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.95rem; line-height:1; }
.photo-slider .slider-prev { left:8px; }
.photo-slider .slider-next { right:8px; }
.photo-slider .slider-dots { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.photo-slider .slider-dots span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); }
.photo-slider .slider-dots span.active { background:#fff; }

.event-card { padding:14px; display:flex; gap:12px; align-items:center; cursor:pointer; text-align:left; width:100%; border:1px solid var(--border); background:var(--panel); }
.event-card .datebox { width:48px; height:48px; border-radius:8px; background:var(--primary-tint); color:var(--primary); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; flex-shrink:0; line-height:1.1; }

/* Checkout (Minha Conta → Plano → Assinar): formulário de cartão + resumo.
   Celular/tablet: uma coluna (resumo acima); notebook+: 2 colunas. */
.field-error { font-size:0.74rem; color:var(--danger); }
.checkout-layout { display:flex; flex-direction:column-reverse; gap:18px; }
.checkout-form { padding:22px; }
.checkout-summary { padding:22px; align-self:stretch; }
.checkout-section-title { margin:0 0 12px; font-size:0.95rem; }
.checkout-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.checkout-submit { width:100%; justify-content:center; margin-top:22px; }
.checkout-secure { margin:12px 0 0; font-size:0.76rem; color:var(--text-dim); text-align:center; }
.checkout-plan-name { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); }
.checkout-plan-price { font-size:1.9rem; font-weight:800; margin:6px 0 12px; }
.checkout-plan-price span { font-size:0.85rem; font-weight:400; color:var(--text-dim); }
.checkout-bullets { list-style:none; padding:0; margin:0 0 14px; font-size:0.82rem; color:var(--text-dim); }
.checkout-bullets li { padding:7px 0; border-top:1px solid var(--border); }
.checkout-back { font-size:0.82rem; }
@media (max-width: 767px) { .checkout-form, .checkout-summary { padding:17px; } }
@media (min-width: 768px) {
  .checkout-grid { grid-template-columns:1fr 1fr; }
  .checkout-full { grid-column:1 / -1; }
}
@media (min-width: 1024px) {
  .checkout-layout { flex-direction:row; align-items:flex-start; }
  .checkout-form { flex:1 1 auto; }
  .checkout-summary { flex:0 0 300px; }
}