/* ============================================
   INVITME LOJA — DESIGN SYSTEM
   Light = padrao (:root)
   Dark  = opcional ([data-loja-theme="dark"])
   Tipografia: Bebas Neue (display) + DM Sans (body)
   ============================================ */

/* ── LIGHT (padrao) ──────────────────────────── */
:root, [data-loja-theme="light"] {
    --lj-bg:            #f0f4ff;
    --lj-bg-pure:       #ffffff;
    --lj-surface:       #ffffff;
    --lj-surface-2:     #eff6ff;
    --lj-surface-3:     #f8faff;
    --lj-border:        #dbeafe;
    --lj-border-2:      #bfdbfe;
    --lj-border-accent: rgba(15,103,247,0.22);
    --lj-text:          #1e3a5f;
    --lj-text-2:        #374151;
    --lj-muted:         #6b7280;
    --lj-card:          #ffffff;
    --lj-card-hover:    #f8faff;
    --lj-header-bg:     #ffffff;
    --lj-header-border: #dbeafe;
    --lj-header-shadow: 0 1px 8px rgba(15,103,247,0.06);
    --lj-footer-bg:     #0f67f7;
    --lj-footer-text:   #ffffff;
    --lj-footer-dim:    rgba(255,255,255,0.75);
    --lj-footer-heading:#ffffff;
    --lj-accent:        #0f67f7;
    --lj-accent-2:      #2563EB;
    --lj-accent-dim:    rgba(15,103,247,0.08);
    --lj-accent-glow:   rgba(15,103,247,0.20);
    --lj-shadow:        0 1px 3px rgba(15,103,247,0.06), 0 4px 16px rgba(15,103,247,0.05);
    --lj-shadow-md:     0 4px 12px rgba(15,103,247,0.10), 0 8px 32px rgba(15,103,247,0.07);
    --lj-shadow-lg:     0 8px 30px rgba(15,103,247,0.12);
    --lj-overlay:       rgba(0,0,0,0.45);
    --lj-input-bg:      #ffffff;
    --lj-search-bg:     #eff6ff;
    --lj-search-border: #dbeafe;
    --lj-chip-bg:       #ffffff;
    --lj-chip-active-bg:#0f67f7;
    --lj-chip-active-tx:#ffffff;
    --lj-price-color:   #0f67f7;
    --lj-btn-primary-bg:#0f67f7;
    --lj-btn-primary-tx:#ffffff;
    --lj-btn-primary-shadow: 0 4px 16px rgba(15,103,247,0.25);
    --lj-menu-bg:       #ffffff;
    --lj-menu-hover:    #eff6ff;
    --lj-menu-text:     #374151;
    --lj-menu-divider:  #dbeafe;
    --lj-scrollbar:     rgba(15,103,247,0.20);
    --lj-hero-gradient: linear-gradient(135deg, #0f67f7 0%, #2563EB 100%);
    --lj-fab-gradient:  linear-gradient(135deg, #2563EB, #1D4ED8);
    --lj-fab-icon-color:#ffffff;
    --lj-badge-destaque-bg: rgba(15,103,247,0.12);
    --lj-badge-destaque-tx: #0f67f7;
}

/* ── DARK (ativado pelo usuario) ─────────────── */
[data-loja-theme="dark"] {
    --lj-bg:            #0a0a0a;
    --lj-bg-pure:       #111111;
    --lj-surface:       #1a1a1a;
    --lj-surface-2:     #222222;
    --lj-surface-3:     #0d0d0d;
    --lj-border:        #2a2a2a;
    --lj-border-2:      #3a3a3a;
    --lj-border-accent: rgba(255,215,0,0.25);
    --lj-text:          #f2f2f2;
    --lj-text-2:        #aaaaaa;
    --lj-muted:         #666666;
    --lj-card:          #1a1a1a;
    --lj-card-hover:    #222222;
    --lj-header-bg:     #0f0f0f;
    --lj-header-border: #2a2a2a;
    --lj-header-shadow: 0 1px 8px rgba(0,0,0,0.4);
    --lj-footer-bg:     #0a0a0a;
    --lj-footer-text:   #888888;
    --lj-footer-dim:    #555555;
    --lj-footer-heading:#f2f2f2;
    --lj-accent:        #FFD700;
    --lj-accent-2:      #FFA500;
    --lj-accent-dim:    rgba(255,215,0,0.10);
    --lj-accent-glow:   rgba(255,215,0,0.20);
    --lj-shadow:        0 2px 8px rgba(0,0,0,0.45);
    --lj-shadow-md:     0 4px 20px rgba(0,0,0,0.55);
    --lj-shadow-lg:     0 8px 30px rgba(0,0,0,0.65);
    --lj-overlay:       rgba(0,0,0,0.7);
    --lj-input-bg:      #1a1a1a;
    --lj-search-bg:     #1a1a1a;
    --lj-search-border: #2a2a2a;
    --lj-chip-bg:       #1a1a1a;
    --lj-chip-active-bg:#FFD700;
    --lj-chip-active-tx:#000000;
    --lj-price-color:   #FFD700;
    --lj-btn-primary-bg:#FFD700;
    --lj-btn-primary-tx:#000000;
    --lj-btn-primary-shadow: 0 4px 16px rgba(255,215,0,0.25);
    --lj-menu-bg:       #141414;
    --lj-menu-hover:    rgba(255,215,0,0.08);
    --lj-menu-text:     #cccccc;
    --lj-menu-divider:  #2a2a2a;
    --lj-scrollbar:     rgba(255,215,0,0.25);
    --lj-hero-gradient: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    --lj-fab-gradient:  linear-gradient(135deg, #FFD700, #FFA500);
    --lj-fab-icon-color:#000000;
    --lj-badge-destaque-bg: rgba(255,215,0,0.12);
    --lj-badge-destaque-tx: #FFD700;
}

/* ── Cores fixas (nao mudam por tema) ────────── */
:root {
    --lj-ok:            #059669;
    --lj-ok-bg:         #d1fae5;
    --lj-ok-border:     #6ee7b7;
    --lj-warn:          #d97706;
    --lj-warn-bg:       #fef3c7;
    --lj-warn-border:   #fde68a;
    --lj-error:         #dc2626;
    --lj-error-bg:      #fee2e2;
    --lj-error-border:  #fca5a5;
    --lj-whatsapp:      #25D366;
    --lj-r:             16px;
    --lj-r-sm:          10px;
    --lj-r-md:          14px;
    --lj-r-lg:          20px;
    --lj-r-xl:          24px;
    --lj-ff-d:          'Montserrat', 'Bebas Neue', sans-serif;
    --lj-ff-b:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Transicao suave ao trocar tema ──────────── */
body, .loja-header, .loja-footer, .loja-main,
.card-evento, .categoria-chip, .evento-compra-card,
.mobile-menu, .search-input, .payment-method,
.footer-container, .cookie-banner {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Toggle FAB (tema) ───────────────────────── */
.loja-theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--lj-fab-gradient);
    color: var(--lj-fab-icon-color);
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.loja-theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

/* Light: mostra lua, esconde sol */
:root .loja-theme-toggle .fa-sun,
[data-loja-theme="light"] .loja-theme-toggle .fa-sun { display: none; }
:root .loja-theme-toggle .fa-moon,
[data-loja-theme="light"] .loja-theme-toggle .fa-moon { display: inline; }

/* Dark: mostra sol, esconde lua */
[data-loja-theme="dark"] .loja-theme-toggle .fa-sun { display: inline; }
[data-loja-theme="dark"] .loja-theme-toggle .fa-moon { display: none; }

@media (max-width: 767px) {
    .loja-theme-toggle {
        bottom: 80px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}