/*
 * Halloween Event Styles
 * Evento activo: 29 Oct - 2 Nov
 *
 * Usa la capa base de decoraciones (base.css): aqui solo se definen las
 * variables y los estilos propios de Halloween. Las decoraciones activas
 * se eligen en 'styling.body_class' de config/promotional_events.php.
 */

/* ========================================
   VARIABLES CSS
   ======================================== */

body.event-halloween {
    --event-primary: #ff6600;
    --event-secondary: #ff8800;
    --event-bg: #1a1a1a;
    --event-bg-dark: #0d0d0d;
    --event-glow: rgba(255, 102, 0, 0.3);
    --event-glow-strong: rgba(255, 102, 0, 0.6);
    --event-glow-subtle: rgba(255, 102, 0, 0.05);
    --event-text-shadow: 0 0 10px rgba(255, 102, 0, 0.8), 0 0 20px rgba(255, 102, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.8);

    /* Decoraciones de base.css */
    --event-bg-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='rgb(60,30,90)' fill-opacity='.07'><path transform='translate(24 36) scale(.55)' d='M32 8C33 6 34 5 35 4L36 9C40 6 50 4 62 8C57 10 55 13 56 17C52 14 47 15 45 19C42 16 38 17 36 21C35 23 33 25 32 26C31 25 29 23 28 21C26 17 22 16 19 19C17 15 12 14 8 17C9 13 7 10 2 8C14 4 24 6 28 9L29 4C30 5 31 6 32 8Z'/><path transform='translate(140 150) scale(.42) rotate(-14)' d='M32 8C33 6 34 5 35 4L36 9C40 6 50 4 62 8C57 10 55 13 56 17C52 14 47 15 45 19C42 16 38 17 36 21C35 23 33 25 32 26C31 25 29 23 28 21C26 17 22 16 19 19C17 15 12 14 8 17C9 13 7 10 2 8C14 4 24 6 28 9L29 4C30 5 31 6 32 8Z'/></g><g fill='rgb(255,102,0)' fill-opacity='.12'><circle cx='130' cy='58' r='1.6'/><circle cx='206' cy='96' r='1.2'/><circle cx='58' cy='176' r='1.4'/><circle cx='190' cy='214' r='1'/></g></svg>");

    --event-title-color: #c2410c;
    --event-subtitle-color: #5b2a86;

    --event-card-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g transform='translate(100 0) scale(-1 1)'><path d='M0 0L95.1 30.9M0 0L80.9 58.8M0 0L58.8 80.9M0 0L30.9 95.1M22 0Q19.6 3.1 20.9 6.8Q17.6 9 17.8 12.9Q14 14 12.9 17.8Q9 17.6 6.8 20.9Q3.1 19.6 0 22M42 0Q37.3 5.9 39.9 13Q33.7 17.2 34 24.7Q26.7 26.7 24.7 34Q17.2 33.7 13 39.9Q5.9 37.3 0 42M62 0Q55.1 8.7 59 19.2Q49.7 25.3 50.2 36.4Q39.5 39.5 36.4 50.2Q25.3 49.7 19.2 59Q8.7 55.1 0 62M82 0Q72.9 11.5 78 25.3Q65.8 33.5 66.3 48.2Q52.2 52.2 48.2 66.3Q33.5 65.8 25.3 78Q11.5 72.9 0 82' fill='none' stroke='rgb(60,60,60)' stroke-opacity='.4' stroke-width='.9' stroke-linecap='round'/></g></svg>");
    --event-card-ornament-size: 56px;
    --event-card-ornament-wide: var(--event-menu-corner-left);
    --event-card-hover-border: #ff6600;

    --event-tile-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'><path d='M12 0V62' stroke='rgb(70,70,70)' stroke-width='.8'/><path d='M8.5 66Q4 62 2 65M8 68.5Q3 67 1 70M8 71Q3 72 1.5 76M8.5 73.5Q5 77 3.5 79.5M15.5 66Q20 62 22 65M16 68.5Q21 67 23 70M16 71Q21 72 22.5 76M15.5 73.5Q19 77 20.5 79.5' fill='none' stroke='rgb(30,30,30)' stroke-width='1.1' stroke-linecap='round'/><g fill='rgb(30,30,30)'><ellipse cx='12' cy='70' rx='4.5' ry='5.5'/><circle cx='12' cy='63.5' r='2.6'/></g><g fill='rgb(255,136,0)'><circle cx='11' cy='63.2' r='.6'/><circle cx='13' cy='63.2' r='.6'/></g></svg>");
    --event-tile-ornament-width: 22px;
    --event-tile-ornament-height: 74px;

    --event-menu-corner-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M0 0L95.1 30.9M0 0L80.9 58.8M0 0L58.8 80.9M0 0L30.9 95.1M22 0Q19.6 3.1 20.9 6.8Q17.6 9 17.8 12.9Q14 14 12.9 17.8Q9 17.6 6.8 20.9Q3.1 19.6 0 22M42 0Q37.3 5.9 39.9 13Q33.7 17.2 34 24.7Q26.7 26.7 24.7 34Q17.2 33.7 13 39.9Q5.9 37.3 0 42M62 0Q55.1 8.7 59 19.2Q49.7 25.3 50.2 36.4Q39.5 39.5 36.4 50.2Q25.3 49.7 19.2 59Q8.7 55.1 0 62M82 0Q72.9 11.5 78 25.3Q65.8 33.5 66.3 48.2Q52.2 52.2 48.2 66.3Q33.5 65.8 25.3 78Q11.5 72.9 0 82' fill='none' stroke='rgb(60,60,60)' stroke-opacity='.4' stroke-width='.9' stroke-linecap='round'/></svg>");
    --event-menu-corner-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g transform='translate(100 0) scale(-1 1)'><path d='M0 0L95.1 30.9M0 0L80.9 58.8M0 0L58.8 80.9M0 0L30.9 95.1M22 0Q19.6 3.1 20.9 6.8Q17.6 9 17.8 12.9Q14 14 12.9 17.8Q9 17.6 6.8 20.9Q3.1 19.6 0 22M42 0Q37.3 5.9 39.9 13Q33.7 17.2 34 24.7Q26.7 26.7 24.7 34Q17.2 33.7 13 39.9Q5.9 37.3 0 42M62 0Q55.1 8.7 59 19.2Q49.7 25.3 50.2 36.4Q39.5 39.5 36.4 50.2Q25.3 49.7 19.2 59Q8.7 55.1 0 62M82 0Q72.9 11.5 78 25.3Q65.8 33.5 66.3 48.2Q52.2 52.2 48.2 66.3Q33.5 65.8 25.3 78Q11.5 72.9 0 82' fill='none' stroke='rgb(60,60,60)' stroke-opacity='.4' stroke-width='.9' stroke-linecap='round'/></g></svg>");
    --event-menu-corner-size: 54px;

    --event-logo-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'><path d='M12 0V62' stroke='rgb(70,70,70)' stroke-width='.8'/><path d='M8.5 66Q4 62 2 65M8 68.5Q3 67 1 70M8 71Q3 72 1.5 76M8.5 73.5Q5 77 3.5 79.5M15.5 66Q20 62 22 65M16 68.5Q21 67 23 70M16 71Q21 72 22.5 76M15.5 73.5Q19 77 20.5 79.5' fill='none' stroke='rgb(30,30,30)' stroke-width='1.1' stroke-linecap='round'/><g fill='rgb(30,30,30)'><ellipse cx='12' cy='70' rx='4.5' ry='5.5'/><circle cx='12' cy='63.5' r='2.6'/></g><g fill='rgb(255,136,0)'><circle cx='11' cy='63.2' r='.6'/><circle cx='13' cy='63.2' r='.6'/></g></svg>");
    --event-logo-ornament-width: 12px;
    --event-logo-ornament-height: 40px;

    /* Sprites de ambiente: 1 = murcielago, 2 = fantasma */
    --event-ambient-sprite-1: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'><path d='M32 8C33 6 34 5 35 4L36 9C40 6 50 4 62 8C57 10 55 13 56 17C52 14 47 15 45 19C42 16 38 17 36 21C35 23 33 25 32 26C31 25 29 23 28 21C26 17 22 16 19 19C17 15 12 14 8 17C9 13 7 10 2 8C14 4 24 6 28 9L29 4C30 5 31 6 32 8Z' fill='rgb(40,28,52)'/></svg>");
    --event-ambient-sprite-2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 40 48'><path d='M20 2C9 2 4 11 4 22V44L9 40L14 45L20 40L26 45L31 40L36 44V22C36 11 31 2 20 2Z' fill='rgb(255,255,255)' fill-opacity='.95' stroke='rgb(110,110,130)' stroke-opacity='.6'/><g fill='rgb(40,40,50)'><ellipse cx='15' cy='19' rx='2.2' ry='3'/><ellipse cx='25' cy='19' rx='2.2' ry='3'/><ellipse cx='20' cy='28' rx='2.4' ry='3.2' fill-opacity='.8'/></g></svg>");

    /* Al anadir al carrito: fantasmas y murcielagos que suben */
    --event-burst-sprite-1: var(--event-ambient-sprite-2);
    --event-burst-sprite-2: var(--event-ambient-sprite-1);
    --event-burst-count: 4;
}

/* ========================================
   BOTÓN AÑADIR AL CARRITO - NARANJA HALLOWEEN
   ======================================== */

/* Botón principal con fondo naranja */
body.event-halloween .cart-button,
body.event-halloween .button_.accent {
    background: linear-gradient(135deg, #ff6600 0%, #ff8800 100%) !important;
    border-color: #ff6600 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* Hover del botón */
body.event-halloween .cart-button:hover,
body.event-halloween .button_.accent:hover {
    background: linear-gradient(135deg, #ff8800 0%, #ffaa00 100%) !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6) !important;
    transform: translateY(-2px);
}

/* Iconos de calabaza en el botón */
body.event-halloween .cart-button .icon1,
body.event-halloween .cart-button .icon2,
body.event-halloween .cart-button .icon3,
body.event-halloween .cart-button .iconSpinner {
    color: #000000 !important;
}

/* Animación de la calabaza spinner */
body.event-halloween .cart-button .iconSpinner.fa-jack-o-lantern {
    animation: halloween-spin 1s linear infinite;
}

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

/* ========================================
   DECORACIONES - LÍNEA DE TELARAÑAS Y ELEMENTOS HALLOWEEN
   Similar a navidad-lightrope
   ======================================== */

.halloween-spiderwebs-decoration {   
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.halloween-spiderwebs-decoration .spiderwebs-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
}

.halloween-spiderwebs-decoration .spiderwebs-line i {
    font-size: 30px;
    color: #ff6600;
    opacity: 0.7;
    animation: halloween-float 3s ease-in-out infinite;
}

/* Diferentes delays de animación para cada icono */
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(1) { animation-delay: 0s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(2) { animation-delay: 0.2s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(3) { animation-delay: 0.4s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(4) { animation-delay: 0.6s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(5) { animation-delay: 0.8s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(6) { animation-delay: 1s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(7) { animation-delay: 1.2s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(8) { animation-delay: 1.4s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(9) { animation-delay: 1.6s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(10) { animation-delay: 1.8s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(11) { animation-delay: 2s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(12) { animation-delay: 2.2s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(13) { animation-delay: 2.4s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(14) { animation-delay: 2.6s; }
.halloween-spiderwebs-decoration .spiderwebs-line i:nth-child(15) { animation-delay: 2.8s; }

/* Calabazas y fantasmas un poco más grandes */
.halloween-spiderwebs-decoration .spiderwebs-line .fa-jack-o-lantern,
.halloween-spiderwebs-decoration .spiderwebs-line .fa-ghost {
    font-size: 35px;
    color: #ff8800;
}

/* Animación de flotación suave */
@keyframes halloween-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Responsive - iconos más pequeños en móvil */
@media (max-width: 768px) {
    .halloween-spiderwebs-decoration .spiderwebs-line i {
        font-size: 20px;
    }

    .halloween-spiderwebs-decoration .spiderwebs-line .fa-jack-o-lantern,
    .halloween-spiderwebs-decoration .spiderwebs-line .fa-ghost {
        font-size: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-spiderwebs-decoration .spiderwebs-line i,
    body.event-halloween .cart-button .iconSpinner.fa-jack-o-lantern {
        animation: none;
    }
}