/* ================================================================
   LOVE / ABEN — Mobile UX Overhaul
   Aplica-se apenas em telas <= 768px via media query no <link>

   Principio: remover todos os admin-card boxes, conteudo direto
   no fundo, navegacao por tabs sticky, tudo compacto e app-like
   ================================================================ */

/* ----------------------------------------------------------------
   0. GLOBAL: Remover TODOS os admin-card em paginas love
   ---------------------------------------------------------------- */
/* Wrapper geral */
.love-page .space-y-6 {
    gap: 0 !important;
}
.love-page .space-y-6 > * + * {
    margin-top: 0 !important;
}

/* Zerar admin-card: sem fundo, sem borda, sem sombra, sem radius */
.love-page .admin-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Lateral vem do padding 1rem do .main-content (mobile-menu.css) — aqui so o vertical,
   senao o conteudo fica 2rem da borda */
.love-page .admin-card-header {
    padding: 1rem 0 0 !important;
}
.love-page .admin-card-content {
    padding: 0.75rem 0 !important;
}

/* Separadores visuais entre secoes (borda sutil no lugar dos cards) */
.love-page .space-y-6 > .admin-card + .admin-card,
.love-page .space-y-6 > .grid + .admin-card,
.love-page .space-y-6 > .admin-card + .grid,
.love-page .space-y-6 > .grid + .grid,
.love-page .space-y-6 > div + div {
    border-top: 1px solid var(--border) !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
}

/* Primeiro filho nao tem borda top */
.love-page .space-y-6 > :first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------
   1. TABS DE NAVEGACAO (sticky entre sub-paginas)
   ---------------------------------------------------------------- */
.love-nav-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 0 0.25rem;
    margin: 0 -1rem;
    width: calc(100% + 2rem);
}
.love-nav-tabs::-webkit-scrollbar {
    display: none;
}
.love-nav-tabs a {
    flex: 0 0 auto;
    padding: 0.7rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}
.love-nav-tabs a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.love-nav-tabs a:active {
    background: var(--surface-2);
}

/* ----------------------------------------------------------------
   2. HERO BANNER — compacto, sem radius
   ---------------------------------------------------------------- */
.love-page .admin-card[style*="linear-gradient"] {
    margin: 0 -1rem !important;
    width: calc(100% + 2rem) !important;
    border-radius: 0 !important;
}
.love-page .admin-card[style*="linear-gradient"] .admin-card-content {
    padding: 1.25rem 1rem !important;
}
.love-page .admin-card[style*="linear-gradient"] h1 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
}
.love-page .admin-card[style*="linear-gradient"] p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}
/* Esconder elementos decorativos (circulos abstratos) */
.love-page .admin-card[style*="linear-gradient"] > div[style*="position: absolute"] {
    display: none !important;
}
/* Heart emoji menor */
.love-page .admin-card[style*="linear-gradient"] span[style*="font-size: 2.5rem"] {
    font-size: 1.5rem !important;
}
/* Botoes do hero: compactos */
.love-page .admin-card[style*="linear-gradient"] .admin-btn-outline {
    padding: 0.45rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 999px !important;
}
/* Hero layout: inline no mobile */
.love-page .admin-card[style*="linear-gradient"] > .admin-card-content > div[style*="display: flex"][style*="align-items: center"] {
    flex-direction: column !important;
    gap: 0.25rem !important;
}
.love-page .admin-card[style*="linear-gradient"] > .admin-card-content > div[style*="display: flex"][style*="align-items: center"] > div {
    text-align: center !important;
}

/* ----------------------------------------------------------------
   3. ESTATISTICAS — grid 2x2 mais compacto
   ---------------------------------------------------------------- */
.love-page .grid.grid-cols-2.md\:grid-cols-4 {
    gap: 0.5rem !important;
    padding: 0.75rem 0 !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-4 > .admin-card {
    background: var(--surface-2) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-4 > .admin-card .text-3xl {
    font-size: 1.35rem !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-4 > .admin-card .text-sm {
    font-size: 0.65rem !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-4 > .admin-card.p-5 {
    padding: 0.6rem 0.5rem !important;
}

/* ----------------------------------------------------------------
   4. COMO FUNCIONA (resumo) — compacto
   ---------------------------------------------------------------- */
.love-page .admin-card-title {
    font-size: 0.95rem !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-4 {
    gap: 0.5rem !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-4 > div {
    padding: 0.6rem 0.75rem !important;
}
/* Step numbers menores */
.love-page .grid.grid-cols-1.md\:grid-cols-4 span[style*="width: 32px"] {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.75rem !important;
}

/* ----------------------------------------------------------------
   5. DIFERENCIAIS (IA + Financeiro) — empilhados e compactos
   ---------------------------------------------------------------- */
.love-page .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 0 !important;
}
.love-page .space-y-3 > div[style*="display: flex"][style*="gap: 0.75rem"] {
    padding: 0.35rem 0 !important;
}
.love-page .space-y-3 > div[style*="display: flex"][style*="gap: 0.75rem"] .text-sm {
    font-size: 0.8rem !important;
}
.love-page .space-y-3 > div[style*="display: flex"][style*="gap: 0.75rem"] .text-xs {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
}

/* ----------------------------------------------------------------
   6. LINKS RAPIDOS (bottom) — horizontal scroll
   ---------------------------------------------------------------- */
.love-page .grid.grid-cols-1.md\:grid-cols-3 > a.admin-card {
    background: var(--surface-2) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-3 > a.admin-card span[style*="width: 48px"] {
    width: 36px !important;
    height: 36px !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 0.5rem !important;
}

/* ----------------------------------------------------------------
   7. COMO FUNCIONA PAGE — Timeline compacta
   ---------------------------------------------------------------- */
.love-page .space-y-4 > div.p-5 {
    padding: 0.75rem !important;
    border: none !important;
    border-left: 3px solid var(--primary) !important;
    border-radius: 0 !important;
    background: none !important;
}
.love-page .space-y-4 > div.p-5 span[style*="width: 48px"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
}
.love-page .space-y-4 > div.p-5 .text-lg {
    font-size: 0.95rem !important;
}
.love-page .space-y-4 > div.p-5 .text-sm {
    font-size: 0.8rem !important;
}

/* ----------------------------------------------------------------
   8. FAQ — sem bordas, compacto
   ---------------------------------------------------------------- */
.love-page details.p-4 {
    padding: 0.6rem 0.5rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.love-page details summary {
    font-size: 0.85rem !important;
    gap: 0.5rem !important;
}
.love-page details .text-sm.mt-3.ml-8 {
    margin-left: 1.75rem !important;
    font-size: 0.8rem !important;
    margin-top: 0.5rem !important;
}

/* ----------------------------------------------------------------
   9. TRANSPARENCIA — Dashboard compact
   ---------------------------------------------------------------- */
/* Header com titulo */
.love-page .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    padding: 0.75rem 0 !important;
}
.love-page .flex.items-center.justify-between .text-2xl {
    font-size: 1.25rem !important;
}

/* Stats grid 3x2 compacto */
.love-page .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
    padding: 0.5rem 0 !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > .admin-card {
    background: var(--surface-2) !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > .admin-card .text-xl {
    font-size: 1rem !important;
}
.love-page .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > .admin-card.p-4 {
    padding: 0.5rem 0.35rem !important;
}

/* Demonstrativo financeiro — empilhado */
.love-page .grid.grid-cols-1.md\:grid-cols-2 > .admin-card .admin-card-title {
    font-size: 0.85rem !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-2 > .admin-card .p-3 {
    padding: 0.4rem 0 !important;
}

/* Patrimonio grid 2x2 */
.love-page .grid.grid-cols-2.gap-4 > .p-3 {
    padding: 0.4rem !important;
    border-radius: 6px !important;
}
.love-page .grid.grid-cols-2.gap-4 {
    gap: 0.35rem !important;
}
.love-page .grid.grid-cols-2.gap-4 > .p-3 .font-bold {
    font-size: 0.85rem !important;
}

/* Tabela FIIs — scroll horizontal */
.love-page .admin-card-content[style*="overflow-x"] {
    padding: 0 !important;
    margin: 0 -0.5rem !important;
}
.love-page .admin-table th,
.love-page .admin-table td {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}
/* Esconder coluna "Fundo" (nome longo) em mobile */
.love-page .admin-table th:nth-child(2),
.love-page .admin-table td:nth-child(2) {
    display: none !important;
}

/* ----------------------------------------------------------------
   10. DOACAO — Formulario compacto, sem cards
   ---------------------------------------------------------------- */
/* Header centered */
.love-page .text-center .text-2xl {
    font-size: 1.25rem !important;
}

/* Step badge e label */
.love-page .doacao-step-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.65rem !important;
}

/* Toggle buttons */
.love-page .doacao-toggle-container {
    gap: 0.4rem !important;
    margin-bottom: 0.75rem !important;
}
.love-page .doacao-toggle-btn {
    padding: 0.6rem 0.4rem !important;
    border-width: 1.5px !important;
}
.love-page .doacao-toggle-label {
    font-size: 0.8rem !important;
}

/* Beneficios mais compactos */
.love-page .doacao-beneficios {
    gap: 0.3rem 0.75rem !important;
    padding-top: 0.25rem !important;
}
.love-page .doacao-beneficio-item {
    font-size: 0.7rem !important;
}

/* Campo grande do valor: o base.css força input{16px!important} no mobile (anti-zoom)
   e esmagava o numerao de 2rem — classe aqui ganha do seletor de elemento */
.love-page .doacao-valor-input {
    font-size: 2rem !important;
}

/* Impacto inline */
.love-page .doacao-impacto-inline {
    border-radius: 8px !important;
}

/* Por que doar — grid compacto */
.love-page .grid.grid-cols-1.md\:grid-cols-3 > div.p-4 {
    padding: 0.6rem 0.25rem !important;
    background: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-3 > div.p-4:last-child {
    border-bottom: none !important;
}

/* Recibo info box */
.love-page .admin-card[style*="border-left: 4px"] {
    border-left-width: 3px !important;
    border-radius: 0 !important;
    padding: 0.75rem !important;
    background: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.love-page .admin-card[style*="border-left: 4px"] .admin-card-content {
    padding: 0 !important;
}

/* CTA final no doacao */
.love-page .admin-card.p-6[style*="linear-gradient"] {
    padding: 1.25rem 1rem !important;
    margin: 1rem -1rem 0 !important;
    width: calc(100% + 2rem) !important;
    border-radius: 0 !important;
}
.love-page .admin-card.p-6[style*="linear-gradient"] .text-lg {
    font-size: 1rem !important;
}

/* ----------------------------------------------------------------
   11. MINHAS SEMENTES — tabela responsiva
   ---------------------------------------------------------------- */
/* Esconder coluna "Tipo" no mobile para dar espaco */
.love-page table th:nth-child(2),
.love-page table td:nth-child(2) {
    display: none !important;
}
.love-page table th,
.love-page table td {
    padding: 0.5rem 0.4rem !important;
    font-size: 0.75rem !important;
}
.love-page table th {
    font-size: 0.6rem !important;
}

/* ----------------------------------------------------------------
   12. SOLICITAR — formulario compacto
   ---------------------------------------------------------------- */
.love-page .admin-card-content .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 0.5rem !important;
}
/* 16px = iOS nao da zoom automatico ao focar (abaixo disso a pagina "pula") */
.love-page .admin-input,
.love-page .sol-input {
    padding: 0.5rem 0.6rem !important;
    font-size: 16px !important;
}

/* ----------------------------------------------------------------
   13. FLASH MESSAGES — compactas
   ---------------------------------------------------------------- */
.love-page .admin-card[style*="border-left: 4px solid #"] {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0 !important;
    margin: 0 -1rem !important;
    width: calc(100% + 2rem) !important;
}
.love-page .admin-card[style*="border-left: 4px solid #"] .text-sm {
    font-size: 0.8rem !important;
}

/* ----------------------------------------------------------------
   14. GENERICOS — espacamento, tipografia
   ---------------------------------------------------------------- */
/* Reduzir gap padrao dos grids */
.love-page .gap-4 {
    gap: 0.5rem !important;
}

/* Container principal: manter o padding 1rem do mobile-menu.css — os full-bleed
   (hero, tabs, CTA) escapam dele com margin -1rem + width calc(100% + 2rem).
   Zerar o padding aqui (como era antes) cortava 16px de cada lado desses blocos
   e colava texto/grids na borda da tela. */

/* Textos genéricos menores */
.love-page .text-sm {
    font-size: 0.8rem !important;
}
.love-page .text-xs {
    font-size: 0.7rem !important;
}

/* Scroll suave no body */
.love-page {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Icone solto em bloco centrado (ex.: escudo do validar-recibo) — svg e block e ficava
   colado na esquerda dentro de .text-center */
.love-page .admin-card-content.text-center > span > svg {
    margin-inline: auto;
}

/* Surface-2 boxes internas (os mini-cards de stats dentro de secoes) */
.love-page .p-3.rounded-lg[style*="background: var(--surface-2)"],
.love-page .p-4.rounded-lg[style*="background: var(--surface-2)"] {
    border-radius: 6px !important;
    padding: 0.5rem !important;
}

/* ----------------------------------------------------------------
   15. TRANSPARENCIA — Historico e Casos
   ---------------------------------------------------------------- */
.love-page .grid.grid-cols-1.md\:grid-cols-2 > div.p-4[style*="border: 1px"] {
    padding: 0.6rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-2 > div.p-4[style*="border: 1px"]:last-child {
    border-bottom: none !important;
}

/* Historico de acoes */
.love-page .space-y-3 > div.p-3[style*="display: flex"][style*="gap: 1rem"] {
    padding: 0.4rem 0 !important;
    border-bottom: 1px solid var(--border);
}
.love-page .space-y-3 > div.p-3[style*="display: flex"][style*="gap: 1rem"] span[style*="min-width: 80px"] {
    min-width: 65px !important;
    font-size: 0.65rem !important;
}

/* ----------------------------------------------------------------
   16. TECNOLOGIA / IA features grid — 2 colunas
   ---------------------------------------------------------------- */
.love-page .grid.grid-cols-1.md\:grid-cols-4.gap-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-4.gap-4 > div.p-4 {
    padding: 0.5rem !important;
    border: none !important;
    background: none !important;
}
.love-page .grid.grid-cols-1.md\:grid-cols-4.gap-4 > div.p-4 .w-8 {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* ----------------------------------------------------------------
   17. PROGRESS BARS — financeiro
   ---------------------------------------------------------------- */
.love-page div[style*="width: 100%; height: 6px"] {
    height: 4px !important;
}

/* ----------------------------------------------------------------
   18. CTA SECTIONS (gradient bottom)
   ---------------------------------------------------------------- */
.love-page .admin-card[style*="linear-gradient"]:last-child {
    margin: 1rem -1rem 0 !important;
    width: calc(100% + 2rem) !important;
}
.love-page .admin-card[style*="linear-gradient"]:last-child .admin-card-content {
    padding: 1.25rem 1rem !important;
}
.love-page .admin-card[style*="linear-gradient"]:last-child .text-lg {
    font-size: 1rem !important;
}
.love-page .admin-card[style*="linear-gradient"]:last-child .text-sm,
.love-page .admin-card[style*="linear-gradient"]:last-child p[style*="font-size: 0.875rem"] {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
}