/* ============================================================
   DECORACIÓN MUNDIAL ARGENTINA  -  capa puramente decorativa
   ------------------------------------------------------------
   - No toca ninguna clase ni id de la app (todo prefijado .mundial-)
   - Nada bloquea clics  ->  pointer-events: none en lo superpuesto
   - Funciona igual en modo claro y oscuro
   - Para apagar todo: poner  $mundial = false  en vertienda.blade.php
   ============================================================ */

/* ---------- BANDERINES (SVG repetible, escala a cualquier ancho) ----------
   Se ubican sobre el borde inferior del header (la "división" entre
   el header y el cuerpo) y pasan POR DETRÁS del logo (logo z-index:10). */
.mundial-banderines {
    position: absolute;
    left: 50%;
    top: 100%;                /* 100% = borde inferior del header (la "división") */
    transform: translate(-50%, -52%);  /* <- nudge fino vertical: subí/bajá el swag sobre la línea */
    width: 100%;              /* nunca más ancho que el header -> no genera scroll horizontal */
    max-width: 720px;         /* tope: en desktop queda un swag centrado y contenido (no gigante) */
    height: auto;             /* mantiene la curva y proporción del PNG */
    z-index: 6;               /* detrás del logo (10) y de las estrellas (11) */
    pointer-events: none;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.18));
}

/* ---------- 3 ESTRELLAS (encima del logo) ---------- */
.mundial-estrellas {
    position: absolute;       /* flota: no empuja el título */
    top: 8px;                 /* pegada al margen superior del header */
    left: 50%;
    transform: translateX(-50%);
    width: 150px;             /* <- más grandes (subí/bajá este ancho para el tamaño) */
    height: 44px;
    z-index: 11;
    pointer-events: none;
    line-height: 0;
}
.mundial-estrellas svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* ---------- LLUVIA DE PAPELITOS + TROFEOS (estallido al entrar) ----------
   Capa fija a pantalla completa. NO bloquea clics. Se autoelimina al terminar. */
#mundial-cae {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1035;            /* sobre el contenido pero por debajo de los modales (1040/1050) */
}
.mundial-pieza {
    position: absolute;
    top: 0;
    will-change: transform, opacity;
    animation-name: mundial-cae-fall;
    animation-timing-function: cubic-bezier(.45,.05,.55,.95);
    animation-iteration-count: 1;
    animation-fill-mode: both;   /* 'both' = durante el delay ya está fuera de pantalla arriba (no aparece quieto) */
}
.mundial-confeti {
    height: auto;   /* el ancho lo pone el JS; alto proporcional a la forma del PNG */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));  /* sigue la forma de la cinta y hace visible el papelito blanco sobre fondo claro */
}
.mundial-trofeo {
    height: auto;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}

@keyframes mundial-cae-fall {
    0%   { transform: translate3d(0, -14vh, 0) rotate(0deg);                       opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate3d(var(--mx, 30px), 114vh, 0) rotate(var(--mr, 540deg)); opacity: 0; }
}

/* ---------- BOTÓN "VER PEDIDO" con bandera Argentina ----------
   Franjas celeste/blanco/celeste + sol amarillo centrado.
   Usa !important para pisar el fondo inline (verde) sólo cuando la decoración está activa. */
.mundial-btn-arg {
    background:
        /* sol: chico y sutil pero un poco más marcado, con fade suave del amarillo al blanco */
        radial-gradient(circle 16px at 50% 50%, rgba(246,180,14,.68) 0%, rgba(246,180,14,.24) 55%, rgba(246,180,14,0) 100%),
        /* franjas con degradé suave celeste <-> blanco (sin cortes duros) */
        linear-gradient(to bottom,
            #75AADB 0%,
            #a9cae7 24%,
            #ffffff 46%,
            #ffffff 54%,
            #a9cae7 76%,
            #75AADB 100%) !important;
    color: #0b2e63 !important;              /* texto azul marino legible sobre blanco/celeste */
    border: 1px solid #5b95c9 !important;   /* contorno celeste fino: separa el botón del fondo claro */
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    text-shadow: 0 1px 1px rgba(255,255,255,.5);
    font-weight: bold;
}
.mundial-btn-arg b,
.mundial-btn-arg i {
    color: #0b2e63 !important;
}

/* ---------- Caricaturas (Messi y Dibu) a los lados de "Entrega estimada" ---------- */
.mundial-entrega-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;               /* separación entre las caricaturas y la hora estimada */
    width: 100%;
}
.mundial-entrega-centro {
    flex: 0 1 auto;
    min-width: 0;            /* permite que el centro se achique antes de desbordar */
    max-width: 100%;
}
/* La entrega puede ser un texto largo ("Lo antes posible") en vez de una hora.
   El badge es un <span>, y la regla global  span{white-space:nowrap;overflow:hidden}
   lo dejaba en una sola línea: quedaba ancho, se pisaba con las caricaturas y
   generaba scroll horizontal en mobile. Acá lo dejamos cortar de renglón y
   limitarse al ancho de la columna central, así nunca desborda ni se solapa. */
.mundial-entrega-centro .badge {
    white-space: normal;       /* pisa el nowrap global -> permite saltar de renglón */
    overflow: visible;
    text-overflow: clip;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}
.mundial-jugador {
    height: 92px;            /* <- tamaño de las caricaturas (subí/bajá acá) */
    width: auto;
    flex: 0 0 auto;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.22));
}
@media (max-width: 360px) {
    .mundial-jugador { height: 74px; }   /* en pantallas muy chicas, un poco más chicas */
}

/* Accesibilidad / rendimiento: si el usuario pide menos movimiento, no animamos. */
@media (prefers-reduced-motion: reduce) {
    #mundial-cae { display: none; }
    .mundial-banderines { filter: none; }
}