/**
 * Estilos para Temas de Promoções Especiais
 * Complementa o promo-manager.js
 */

/* ===================================
   BLACK FRIDAY THEME
   =================================== */
.promo-theme-dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-top: 3px solid #ff6b00;
}

.promo-theme-dark .promo-bar-icon {
    background: #ff6b00;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
    animation: pulse-dark 2s infinite;
}

.promo-theme-dark .promo-bar-title {
    color: #fff;
    font-weight: 700;
}

.promo-theme-dark .promo-bar-subtitle {
    color: #ffcc00;
    font-weight: 600;
}

.promo-theme-dark .btn-black-friday {
    background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}

.promo-theme-dark .btn-black-friday:hover {
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
}

@keyframes pulse-dark {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===================================
   CYBER MONDAY THEME
   =================================== */
.promo-theme-cyber {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    border-top: 3px solid #00d9ff;
}

.promo-theme-cyber .promo-bar-icon {
    background: #00d9ff;
    color: #0a0e27;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
    animation: cyber-glow 2s infinite;
}

.promo-theme-cyber .promo-bar-title {
    color: #fff;
    font-weight: 700;
}

.promo-theme-cyber .promo-bar-subtitle {
    color: #00d9ff;
    font-weight: 600;
}

.promo-theme-cyber .btn-cyber-monday {
    background: linear-gradient(135deg, #00d9ff 0%, #00a8cc 100%);
    color: #0a0e27;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.4);
}

.promo-theme-cyber .btn-cyber-monday:hover {
    background: linear-gradient(135deg, #00ffff 0%, #00d9ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 217, 255, 0.6);
}

@keyframes cyber-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.5); }
    50% { box-shadow: 0 0 30px rgba(0, 217, 255, 0.8); }
}

/* ===================================
   CHRISTMAS THEME
   =================================== */
.promo-theme-christmas {
    background: linear-gradient(135deg, #165B33 0%, #c41e3a 100%);
    border-top: 3px solid #ffd700;
}

.promo-theme-christmas .promo-bar-icon {
    background: #ffd700;
    color: #165B33;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    animation: christmas-sparkle 2s infinite;
}

.promo-theme-christmas .promo-bar-title {
    color: #fff;
    font-weight: 700;
}

.promo-theme-christmas .promo-bar-subtitle {
    color: #ffd700;
    font-weight: 600;
}

.promo-theme-christmas .btn-christmas {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #165B33;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.promo-theme-christmas .btn-christmas:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #fff44f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

@keyframes christmas-sparkle {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
        transform: rotate(0deg);
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
        transform: rotate(5deg);
    }
}

/* ===================================
   NEW YEAR THEME
   =================================== */
.promo-theme-new-year {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
    border-top: 3px solid #fbbf24;
}

.promo-theme-new-year .promo-bar-icon {
    background: #fbbf24;
    color: #1e3a8a;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    animation: new-year-shine 3s infinite;
}

.promo-theme-new-year .promo-bar-title {
    color: #fff;
    font-weight: 700;
}

.promo-theme-new-year .promo-bar-subtitle {
    color: #fbbf24;
    font-weight: 600;
}

.promo-theme-new-year .btn-new-year {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1e3a8a;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.promo-theme-new-year .btn-new-year:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.6);
}

@keyframes new-year-shine {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    }
    25% { 
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.7);
    }
    50% { 
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.5);
    }
    75% { 
        box-shadow: 0 0 35px rgba(251, 191, 36, 0.8);
    }
}

/* ===================================
   CARNIVAL THEME
   =================================== */
.promo-theme-carnival {
    background: linear-gradient(135deg, #ff1493 0%, #ffd700 50%, #00ff00 100%);
    border-top: 3px solid #fff;
}

.promo-theme-carnival .promo-bar-icon {
    color: #ff1493;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    animation: carnival-dance 1.5s infinite;
}

.promo-theme-carnival .promo-bar-title {
    color: #fff;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.promo-theme-carnival .promo-bar-subtitle {
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.promo-theme-carnival .btn-carnival {
    background: #fff;
    color: #ff1493;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
}

.promo-theme-carnival .btn-carnival:hover {
    background: #fff;
    color: #ff1493;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.6);
}

@keyframes carnival-dance {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* ===================================
   DEFAULT THEME (já existente)
   =================================== */
/* Os estilos padrão já estão definidos no CSS principal */

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
    .promo-theme-dark .promo-bar-subtitle,
    .promo-theme-cyber .promo-bar-subtitle,
    .promo-theme-christmas .promo-bar-subtitle,
    .promo-theme-new-year .promo-bar-subtitle,
    .promo-theme-carnival .promo-bar-subtitle {
        font-size: 0.85rem;
    }
}