/* 🎨 Cores Personalizadas - Calderia Gourmet */

/* Variáveis CSS para facilitar manutenção */
:root {
    --primary-bg: #B95642;      /* Background vermelho do cardápio */
    --primary-btn: #7F3623;     /* Background dos botões */
    --primary-hover: #5D2819;   /* Hover dos botões */
    --primary-light: #F5ADA2;   /* Versão clara */
    --primary-lighter: #FCE4E0; /* Versão muito clara */
    --cart-floating: #ff8979;   /* Cor mais clara para o botão flutuante do carrinho */
    --cart-floating-hover: #e77f71; /* Hover do botão flutuante do carrinho */
}

/* 🛒 Botões de Adicionar ao Carrinho */
.add-to-cart-btn,
.bg-primary-600:not(.cart-floating-btn) {
    background-color: var(--primary-bg) !important;
}

.add-to-cart-btn:hover,
.hover\:bg-primary-700:hover:not(.cart-floating-btn) {
    background-color: var(--primary-btn) !important;
}

/* 🎯 Carrinho Flutuante */
.cart-floating button,
.cart-floating-btn,
.cart-floating-btn.bg-primary-600 {
    background-color: var(--cart-floating) !important;
}

.cart-floating button:hover,
.cart-floating-btn:hover,
.cart-floating-btn.bg-primary-600:hover {
    background-color: var(--cart-floating-hover) !important;
    transform: scale(1.1);
}

/* 📱 Cards dos Produtos */
.product-card .bg-primary-600 {
    background-color: var(--primary-bg) !important;
}

/* 💰 Preços em Destaque */
.text-primary-600 {
    color: var(--primary-bg) !important;
}

/* 🔘 Botões Principais */
.btn-primary {
    background-color: var(--primary-bg);
    border-color: var(--primary-bg);
}

.btn-primary:hover {
    background-color: var(--primary-btn);
    border-color: var(--primary-btn);
}

/* 🎨 Gradientes do Hero */
.bg-gradient-to-br.from-primary-600 {
    background: linear-gradient(to bottom right, var(--primary-bg), var(--primary-btn)) !important;
}

.bg-gradient-to-r.from-primary-600 {
    background: linear-gradient(to right, var(--primary-bg), var(--primary-btn)) !important;
}

/* 🔴 Badge de Destaque */
.badge-destaque {
    background-color: var(--primary-bg);
    color: white;
}

/* 🎯 Elementos de Foco */
.focus\:ring-primary-500:focus {
    box-shadow: 0 0 0 3px rgba(185, 86, 66, 0.3);
}

/* 📈 Barras de Progresso */
.bg-primary-600:not(.cart-floating-btn) {
    background-color: var(--primary-bg) !important;
}

/* 🔗 Links Primários */
.hover\:text-primary-600:hover {
    color: var(--primary-bg) !important;
}

/* 🎪 Efeitos Especiais */
.product-card:hover {
    box-shadow: 0 10px 25px rgba(185, 86, 66, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.add-to-cart-btn {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(127, 54, 35, 0.3);
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(127, 54, 35, 0.4);
}

/* 🌟 Animações dos Botões */
@keyframes pulse-primary {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(185, 86, 66, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(185, 86, 66, 0);
    }
}

.animate-pulse-primary {
    animation: pulse-primary 2s infinite;
}

/* 🎨 Cores de Status */
.status-available {
    background-color: var(--primary-bg);
    color: white;
}

.status-unavailable {
    background-color: #E5E7EB;
    color: #6B7280;
}

/* 📱 Responsividade */
@media (max-width: 768px) {
    .add-to-cart-btn {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .cart-floating {
        bottom: 15px;
        right: 15px;
    }
}

/* 🎯 Classes Utilitárias */
.bg-primary-custom {
    background-color: var(--primary-bg);
}

.bg-primary-dark {
    background-color: var(--primary-btn);
}

.text-primary-custom {
    color: var(--primary-bg);
}

.border-primary-custom {
    border-color: var(--primary-bg);
}

/* 🔥 Efeito de Hover nos Cards */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .add-to-cart-btn {
    background-color: var(--primary-btn) !important;
    transform: scale(1.05);
}

/* 🎪 Loading com cores personalizadas */
.loading-primary {
    border: 3px solid var(--primary-lighter);
    border-top: 3px solid var(--primary-bg);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 🎯 FORÇA A COR DO CARRINHO FLUTUANTE - REGRA PRIORITÁRIA */
#cart-btn.cart-floating-btn,
.cart-floating #cart-btn,
button#cart-btn {
    background-color: var(--cart-floating) !important;
}

#cart-btn.cart-floating-btn:hover,
.cart-floating #cart-btn:hover,
button#cart-btn:hover {
    background-color: var(--cart-floating-hover) !important;
    transform: scale(1.1) !important;
}