/* =============================================================================
   DYNAMIC THEMES FOR SPECIAL MENUS
   ============================================================================= */

/* Base container for special menus */
.fixed-menu-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Decor generic */
.theme-decor {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    pointer-events: none;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* --- THEME: ROMANTIC (San Valentín) --- */
.menu-theme-romantic {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d0505 100%) !important;
    border-left: 4px solid #ff4d6d !important;
}

.decor-romantic {
    color: #ff4d6d;
    animation: heartBeat 1.5s infinite;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.3);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(1);
    }
}

/* --- THEME: TERROR (Halloween) --- */
.menu-theme-terror {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a0f00 100%) !important;
    border-left: 4px solid #ff7b00 !important;
}

.decor-terror {
    color: #ff7b00;
    animation: ghostFloat 3s ease-in-out infinite;
}

@keyframes ghostFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
    }
}

/* --- THEME: CHRISTMAS (Navidad) --- */
.menu-theme-christmas {
    background: linear-gradient(135deg, #0a1a0a 0%, #052405 100%) !important;
    border-left: 4px solid #28a745 !important;
}

.decor-christmas {
    color: #fff;
    animation: snowSpin 5s linear infinite;
}

@keyframes snowSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- THEME: LUXURY (Premium Gold) --- */
.menu-theme-luxury {
    background: linear-gradient(135deg, #000000 0%, #111111 100%) !important;
    border: 1px solid #d4af37 !important;
}

.decor-luxury {
    color: #d4af37;
    animation: goldShine 2s infinite;
}

@keyframes goldShine {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Modal adjustments for themes */
.fixed-menu-modal.romantic-theme .modal-header {
    background: #4a0404;
}

.fixed-menu-modal.terror-theme .modal-header {
    background: #4a2704;
}

.fixed-menu-modal.christmas-theme .modal-header {
    background: #044a04;
}

.fixed-menu-modal.luxury-theme .modal-header {
    background: #1a1a1a;
    border-bottom: 2px solid #d4af37;
}