/* ============================================
   TEMA DINÂMICO - Bendita Mão Armarinho
   ============================================ */

:root {
    /* Cores Principais */
    --cor-primaria: #374151;
    --cor-primaria-hover: #1f2937;
    --cor-secundaria: #9ca3af;
    --cor-fundo: #f9fafb;
    
    /* Cores de Texto */
    --cor-texto: #111827;
    --cor-texto-claro: #4b5563;
    
    /* Cores de Status */
    --cor-sucesso: #28a745;
    --cor-alerta: #ffc107;
    --cor-perigo: #dc3545;
    --cor-info: #17a2b8;
    
    /* Cores do Admin */
    --cor-menu-lateral: #374151;
    --cor-menu-lateral-hover: #1f2937;
    
    /* Gradientes */
    --gradiente-primario: linear-gradient(135deg, #374151, #9ca3af);
    --gradiente-menu: linear-gradient(180deg, #374151, #1f2937);
}

/* ============================================
   RESET E BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-corpo, 'Roboto'), sans-serif;
    background-color: var(--cor-fundo, #f8f9fa);
    color: var(--cor-texto, #333);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo, 'Playfair Display'), serif;
    color: var(--cor-primaria, #9B2F6B);
    font-weight: 700;
}

a {
    color: var(--cor-primaria, #9B2F6B);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--cor-primaria-hover, #7a2555);
}

/* ============================================
   HEADER TOP (Barra superior)
   ============================================ */

.top-bar,
.header-top {
    background: var(--cor-primaria, #9B2F6B);
    color: white;
}

.top-bar a,
.header-top a {
    color: white;
}

/* ============================================
   HEADER PRINCIPAL (Logo e busca)
   ============================================ */

.main-header,
.header-principal {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo-text {
    color: var(--cor-primaria, #9B2F6B);
}

/* Botão de busca */
.search-bar button,
.btn-busca {
    background: var(--cor-primaria, #9B2F6B);
    color: white;
}

.search-bar button:hover,
.btn-busca:hover {
    background: var(--cor-primaria-hover, #7a2555);
}

/* ============================================
   MENU DE NAVEGAÇÃO
   ============================================ */

.main-nav,
.menu-principal {
    background: var(--cor-primaria, #9B2F6B);
}

.main-nav a,
.menu-principal a {
    color: white;
}

.main-nav a:hover,
.menu-principal a:hover {
    background: var(--cor-primaria-hover, #7a2555);
}

/* ============================================
   BANNER/SLIDER - TEXTO SEMPRE BRANCO
   ============================================ */

.banner h1,
.slider h1,
.hero h1,
.carousel h1,
.banner-title,
.slider-title,
.hero-title {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.banner h2,
.slider h2,
.hero h2,
.banner h3,
.slider h3,
.hero h3 {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.banner p,
.slider p,
.hero p {
    color: white !important;
}

/* Botão no banner */
.banner .btn,
.slider .btn,
.hero .btn,
.banner button,
.slider button,
.hero button {
    background: white;
    color: var(--cor-primaria, #9B2F6B);
    border: none;
}

.banner .btn:hover,
.slider .btn:hover,
.hero .btn:hover {
    background: var(--cor-fundo, #f8f9fa);
}

/* ============================================
   BOTÕES GERAIS
   ============================================ */

button:not(.banner button):not(.slider button):not(.hero button),
.btn:not(.banner .btn):not(.slider .btn):not(.hero .btn),
.btn-primary,
.btn-entrar,
.btn-salvar,
.btn-comprar {
    background: var(--cor-primaria, #9B2F6B);
    color: white;
    border: none;
}

button:not(.banner button):not(.slider button):not(.hero button):hover,
.btn:not(.banner .btn):not(.slider .btn):not(.hero .btn):hover,
.btn-primary:hover,
.btn-entrar:hover,
.btn-salvar:hover,
.btn-comprar:hover {
    background: var(--cor-primaria-hover, #7a2555);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: var(--cor-texto-claro, #666);
}

.btn-success {
    background: var(--cor-sucesso, #28a745);
}

.btn-danger {
    background: var(--cor-perigo, #dc3545);
}

/* ============================================
   CARDS E SEÇÕES
   ============================================ */

.card,
.content-box,
.info-box {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.card h2,
.content-box h2,
.info-box h3 {
    color: var(--cor-primaria, #9B2F6B);
    border-bottom: 2px solid var(--cor-secundaria, #D4A5C4);
}

/* ============================================
   CATEGORIAS (Ícones)
   ============================================ */

.categoria-item {
    border: 2px solid var(--cor-secundaria, #D4A5C4);
}

.categoria-item:hover {
    background: var(--cor-primaria, #9B2F6B);
    border-color: var(--cor-primaria, #9B2F6B);
}

.categoria-item:hover .categoria-nome {
    color: white;
}

/* ============================================
   BADGES E STATUS
   ============================================ */

.badge-pago, .status-pago {
    background: var(--cor-sucesso, #28a745);
    color: white;
}

.badge-pendente, .status-pendente {
    background: var(--cor-alerta, #ffc107);
    color: #333;
}

.badge-cancelado, .status-cancelado {
    background: var(--cor-perigo, #dc3545);
    color: white;
}

/* ============================================
   ADMIN - SIDEBAR
   ============================================ */

.sidebar {
    background: var(--gradiente-menu, linear-gradient(180deg, #374151, #1f2937));
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: var(--cor-menu-lateral-hover, #7a2555);
}

/* ============================================
   TABELAS
   ============================================ */

table {
    background: white;
}

th {
    background: var(--cor-fundo, #f8f9fa);
    color: var(--cor-texto-claro, #666);
}

td {
    color: var(--cor-texto, #333);
}

/* ============================================
   FORMULÁRIOS
   ============================================ */

input, textarea, select {
    font-family: var(--fonte-corpo, 'Roboto');
    border: 2px solid #e0e0e0;
    color: var(--cor-texto, #333);
    background: white;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--cor-primaria, #9B2F6B);
    box-shadow: 0 0 0 3px rgba(155, 47, 107, 0.1);
}

/* ============================================
   UTILITÁRIOS
   ============================================ */

.text-primary { color: var(--cor-primaria, #9B2F6B); }
.text-success { color: var(--cor-sucesso, #28a745); }
.text-danger { color: var(--cor-perigo, #dc3545); }
.text-white { color: white !important; }

.bg-primary { background: var(--cor-primaria, #9B2F6B); }
.bg-success { background: var(--cor-sucesso, #28a745); }
.bg-danger { background: var(--cor-perigo, #dc3545); }
.bg-white { background: white !important; }

/* ============================================
   ✅ BOTÃO COMEÇAR A COMPRAR (MINHA CONTA)
   Usa a cor do texto no estado normal e 
   a cor primária no hover - 100% dinâmico!
   ============================================ */

.btn-comecar-comprar {
    background: var(--cor-texto, #1a1a1a) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    line-height: 1 !important;
}

.btn-comecar-comprar:hover {
    background: var(--cor-primaria, #9B2F6B) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.btn-comecar-comprar i {
    font-size: 14px !important;
    margin: 0 !important;
}