/* ═══════════════════════════════════════════════════════════════════════════
   HALLOWEEN 2026 — guirnalda, fantasmas y calabaza "Pide desde USA"
   ═══════════════════════════════════════════════════════════════════════════

   Todo cuelga de html.crazy-halloween. Esa clase la pone halloween.js y deja
   de ponerla el 1 de noviembre: a partir de ahí este archivo no hace nada
   aunque siga cargado. Para quitarlo del todo, sacarlo de $custom_css_files
   y el enqueue de halloween.js en functions.php.

   Nada de esto recibe clics (pointer-events: none), salvo la calabaza, que
   es el mismo botón de Bolivia Import Manager (#bim-fab-btn) disfrazado.
   El botón es del plugin: se viste desde aquí, igual que checkout_1-1-7.css
   lo esconde en el checkout, para no tocar los archivos del plugin.
*/

@keyframes crazy-hw-sway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

@keyframes crazy-hw-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-16px) rotate(3deg); }
}

@keyframes crazy-hw-fade {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.6; }
}

@keyframes crazy-hw-glow {
    0%, 100% { opacity: 1; }
    40%      { opacity: 0.65; }
    45%      { opacity: 0.95; }
    60%      { opacity: 0.75; }
}

@keyframes crazy-hw-hop {
    0%, 70%, 100% { transform: translateY(0) scale(1, 1); }
    76%           { transform: translateY(0) scale(1.12, 0.86); }
    84%           { transform: translateY(-22px) scale(0.94, 1.08); }
    92%           { transform: translateY(0) scale(1.08, 0.92); }
}

/* Rutas de los fantasmas, de lado a lado de la pantalla.
   Con transform y vw/vh: no recalcula el layout en cada fotograma. */
@keyframes crazy-hw-roam-a {
    0%   { transform: translate(-10vw, 32vh); }
    25%  { transform: translate(28vw, 58vh); }
    50%  { transform: translate(58vw, 24vh); }
    75%  { transform: translate(84vw, 62vh); }
    100% { transform: translate(108vw, 36vh); }
}

@keyframes crazy-hw-roam-b {
    0%   { transform: translate(108vw, 72vh); }
    33%  { transform: translate(70vw, 38vh); }
    66%  { transform: translate(34vw, 76vh); }
    100% { transform: translate(-12vw, 44vh); }
}

@keyframes crazy-hw-roam-c {
    0%   { transform: translate(18vw, -12vh); }
    35%  { transform: translate(44vw, 42vh); }
    70%  { transform: translate(72vw, 28vh); }
    100% { transform: translate(88vw, 112vh); }
}

/* ── Guirnalda ──────────────────────────────────────────────────────────────
   .crazy-hw-anchor es un bloque de alto 0 al final de la barra: no cambia el
   tamaño ni el posicionamiento de la barra, sólo da un punto donde colgar. */
.crazy-halloween .crazy-hw-anchor {
    position: relative;
    height: 0;
    z-index: 60;           /* sobre el contenido, bajo el autocompletado (9999) */
}

.crazy-halloween .crazy-hw-garland {
    position: absolute;
    left: -20px;           /* .crazy-v2-navbar-inner tiene 20px de padding lateral */
    right: -20px;
    height: 64px;
    pointer-events: none;
}

.crazy-halloween .crazy-v2-mobile-mainbar .crazy-hw-garland {
    left: 0;
    right: 0;
}

.crazy-halloween .crazy-hw-string {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    overflow: visible;
}

.crazy-halloween .crazy-hw-string path {
    fill: none;
    stroke: #5a5a5a;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.crazy-halloween .crazy-hw-pennant {
    position: absolute;
    width: 26px;
    height: 34px;
    margin-left: -13px;
    transform-origin: 50% 0;
    animation: crazy-hw-sway 3.4s ease-in-out infinite;
}

.crazy-halloween .crazy-hw-pennant svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Fantasmas ─────────────────────────────────────────────────────────────── */
.crazy-halloween .crazy-hw-ghosts {
    position: fixed;
    inset: 0;
    z-index: 9000;         /* bajo el header fijo (9998) y el botón USA (9990) */
    overflow: hidden;
    pointer-events: none;
}

.crazy-halloween .crazy-hw-ghost {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
    transform: translate(-20vw, 30vh);   /* fuera de pantalla hasta que arranca */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.crazy-halloween .crazy-hw-ghost--a { animation-name: crazy-hw-roam-a; animation-duration: 26s; animation-delay: -4s; }
.crazy-halloween .crazy-hw-ghost--b { animation-name: crazy-hw-roam-b; animation-duration: 31s; animation-delay: -14s; }
.crazy-halloween .crazy-hw-ghost--c { animation-name: crazy-hw-roam-c; animation-duration: 36s; animation-delay: -22s; }

.crazy-halloween .crazy-hw-ghost-bob {
    animation: crazy-hw-bob 3.6s ease-in-out infinite;
}

.crazy-halloween .crazy-hw-ghost svg {
    display: block;
    width: 48px;
    height: 56px;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
    animation: crazy-hw-fade 6s ease-in-out infinite;
}

.crazy-halloween .crazy-hw-ghost--b svg { width: 40px; height: 47px; }
.crazy-halloween .crazy-hw-ghost--c svg { width: 34px; height: 40px; }

/* ── Calabaza "Pide desde USA" ─────────────────────────────────────────────
   Se le quita al botón del plugin la píldora roja: la burbuja roja con la
   bandera y el texto queda a la izquierda, la calabaza a la derecha.
   #bim-fab-container + !important para ganarle a floating-fab.css. */
.crazy-halloween #bim-fab-container .bim-fab,
.crazy-halloween #bim-fab-container .bim-fab:hover,
.crazy-halloween #bim-fab-container .bim-fab--active {
    height: auto !important;
    padding: 0 !important;
    gap: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.crazy-halloween #bim-fab-container .crazy-hw-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: var(--bim-bolivia-red, #E31E24);
    color: #ffffff;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(227, 30, 36, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background 0.25s ease;
}

/* Piquito de la burbuja, apuntando a la calabaza */
.crazy-halloween #bim-fab-container .crazy-hw-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -7px;
    margin-top: -7px;
    border-style: solid;
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent var(--bim-bolivia-red, #E31E24);
    transition: border-color 0.25s ease;
}

.crazy-halloween #bim-fab-container .bim-fab:hover .crazy-hw-bubble {
    background: var(--bim-bolivia-red-hover, #c41a1f);
}

.crazy-halloween #bim-fab-container .bim-fab:hover .crazy-hw-bubble::after {
    border-left-color: var(--bim-bolivia-red-hover, #c41a1f);
}

/* Con el desplegable de pedidos abierto, la burbuja se pone negra como
   el botón original (.bim-fab--active). */
.crazy-halloween #bim-fab-container .bim-fab--active .crazy-hw-bubble {
    background: #1A1A1A;
}

.crazy-halloween #bim-fab-container .bim-fab--active .crazy-hw-bubble::after {
    border-left-color: #1A1A1A;
}

.crazy-halloween #bim-fab-container .crazy-hw-pumpkin {
    display: block;
    width: 76px;
    height: 64px;
    transform-origin: 50% 100%;
    animation: crazy-hw-hop 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(255, 122, 26, 0.6));
    transition: filter 0.25s ease;
}

.crazy-halloween #bim-fab-container .bim-fab:hover .crazy-hw-pumpkin {
    filter: drop-shadow(0 6px 20px rgba(255, 122, 26, 0.95));
}

.crazy-halloween #bim-fab-container .crazy-hw-pumpkin svg {
    display: block;
    width: 100%;
    height: 100%;
}

.crazy-halloween #bim-fab-container .crazy-hw-face {
    animation: crazy-hw-glow 2.6s ease-in-out infinite;
}

/* El contador de pedidos, sobre la calabaza */
.crazy-halloween #bim-fab-container .bim-fab-badge {
    top: -2px;
    right: 2px;
}

/* ── Móvil ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .crazy-halloween .crazy-hw-pennant {
        width: 20px;
        height: 26px;
        margin-left: -10px;
    }

    /* Dos fantasmas, más pequeños: la pantalla es chica */
    .crazy-halloween .crazy-hw-ghost--c { display: none; }
    .crazy-halloween .crazy-hw-ghost svg { width: 38px; height: 44px; }
    .crazy-halloween .crazy-hw-ghost--b svg { width: 32px; height: 37px; }

    .crazy-halloween #bim-fab-container .crazy-hw-bubble {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .crazy-halloween #bim-fab-container .crazy-hw-pumpkin {
        width: 58px;
        height: 49px;
    }
}

/* Pantallas muy chicas: el plugin ya esconde el texto; aquí se va la burbuja
   entera y queda sólo la calabaza. */
@media (max-width: 380px) {
    .crazy-halloween #bim-fab-container .crazy-hw-bubble { display: none; }
    .crazy-halloween #bim-fab-container .bim-fab { width: auto !important; }
}

/* ── Sin animaciones si el cliente las desactivó en su equipo ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .crazy-halloween .crazy-hw-pennant,
    .crazy-halloween #bim-fab-container .crazy-hw-pumpkin,
    .crazy-halloween #bim-fab-container .crazy-hw-face {
        animation: none;
    }
    .crazy-halloween .crazy-hw-ghosts { display: none; }
}