/* ==========================================================================
   1. Variables & Global Styles
   ========================================================================== */

:root {
    --primary: #ff6f00; /* Naranja vibrante */
    --primary-dark: #e65100; /* Naranja oscuro */
    --secondary: #ffd700; /* Dorado */
    --secondary-dark: #ffc107; /* Dorado más oscuro */
    --dark: #333333; /* Gris oscuro (casi negro) */
    --light: #f5f5f5; /* Gris muy claro */
    --success: #2ecc71;

    --text-color: #424242; /* Color de texto principal (gris oscuro) */
    --container-bg: white; /* Fondo de contenedores */
    --footer-bg: #000; /* Fondo del pie de página */
    --modal-bg: white; /* Fondo de modales */
}

html {
    background-color: var(--light); /* Tono de gris muy suave y estándar */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    color: var(--text-color);
    position: relative;
    padding-bottom: 140px; /* Espacio para el footer flotante */
}

body::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('imagenes/imagen de fondo de minipizzas reyes.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1; /* Más sutil */
    z-index: -1;
    pointer-events: none;
    background-position: center center;
}

/* Estilo de foco visible para accesibilidad con teclado */
*:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
    box-shadow: 0 0 15px var(--secondary);
    border-radius: 4px; /* Asegura que el outline no sea cortado por otros estilos */
}


/* ==========================================================================
   2. Header
   ========================================================================== */

header {
    color: white;
    padding: 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    background: transparent;
    min-height: 92px;
}

.gradient-stripes {
  background: linear-gradient(
    to right, 
    #006847 0%, #006847 33.33%, 
    #ffffff 33.33%, #ffffff 66.66%, 
    #ce1126 66.66%, #ce1126 100%
  );
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 104, 71, 0.82) 0%,
        rgba(0, 104, 71, 0.82) 33.33%,
        rgba(255, 255, 255, 0.78) 33.33%,
        rgba(255, 255, 255, 0.78) 66.66%,
        rgba(206, 17, 38, 0.82) 66.66%,
        rgba(206, 17, 38, 0.82) 100%
    );
    opacity: 1;
    z-index: -1;
    backdrop-filter: blur(4px);
    animation: headerFlagGlow 12s ease-in-out infinite alternate, headerFlagWave 7s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform, filter, background-position;
}

@keyframes headerFlagGlow {
    0% {
        filter: saturate(0.9) brightness(0.9);
    }
    100% {
        filter: saturate(1.2) brightness(1.08);
    }
}

@keyframes headerFlagWave {
    0% {
        background-position: 0% 0%;
        transform: translateX(0%) skewX(-1deg) scaleY(1);
    }
    20% {
        background-position: 10% 0%;
        transform: translateX(2%) skewX(0.8deg) scaleY(1.01);
    }
    40% {
        background-position: 22% 0%;
        transform: translateX(-2%) skewX(-1.2deg) scaleY(1.03);
    }
    60% {
        background-position: 32% 0%;
        transform: translateX(1%) skewX(1deg) scaleY(1.02);
    }
    80% {
        background-position: 42% 0%;
        transform: translateX(-1%) skewX(-0.8deg) scaleY(1.03);
    }
    100% {
        background-position: 50% 0%;
        transform: translateX(0%) skewX(-1deg) scaleY(1.03);
    }
}

/* Pseudo-element para la 'tela' de la bandera que crea una ligera reflexión/ondulación */
header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.04) 100%);
    pointer-events: none;
    transform-origin: center;
    mix-blend-mode: overlay;
    animation: headerFlagSheen 6s linear infinite;
}

@keyframes headerFlagSheen {
    0% { transform: translateX(-120%) skewX(-2deg); opacity: 0.0; }
    50% { transform: translateX(120%) skewX(2deg); opacity: 0.6; }
    100% { transform: translateX(-120%) skewX(-2deg); opacity: 0.0; }
}

header > * {
    position: relative;
    z-index: 2; /* Contenido al frente */
    /* Transición suave para el efecto de inclinación */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Contenedor para la animación de pizzas */
.pizza-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.pizza-slice {
    position: absolute;
    top: -12%;
    left: 0;
    font-size: 2rem;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
    opacity: 0;
    animation: pizzaCascade var(--duration, 9s) linear infinite;
    animation-delay: var(--delay, 0s);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.85);
    will-change: transform, opacity;
}

@keyframes pizzaCascade {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
    }
    12% {
        opacity: 0.95;
    }
    22% {
        transform: translate3d(calc(var(--drift-x, 30px) * 0.25), 18vh, 0) rotate(90deg) scale(1);
    }
    45% {
        transform: translate3d(calc(var(--drift-x, 30px) * 0.75), 46vh, 0) rotate(220deg) scale(1.15);
    }
    68% {
        transform: translate3d(calc(var(--drift-x, 30px) * -0.35), 82vh, 0) rotate(360deg) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift-x, 30px), 118vh, 0) rotate(540deg) scale(0.72);
    }
}

@keyframes footerPizzaFall {
    0% {
        opacity: 0;
        transform: translateY(-40vh) rotate(0deg) scale(var(--scale, 1));
    }
    15% {
        opacity: 0.9;
        transform: translateY(-10vh) rotate(60deg) scale(calc(var(--scale, 1) * 1.02));
    }
    50% {
        opacity: 0.95;
        transform: translateY(10vh) rotate(240deg) scale(var(--scale, 1));
    }
    85% {
        opacity: 0.6;
        transform: translateY(30vh) rotate(360deg) scale(calc(var(--scale, 1) * 0.95));
    }
    100% {
        opacity: 0;
        transform: translateY(48vh) rotate(540deg) scale(var(--scale, 1));
    }
}

header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--secondary);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    object-fit: cover;
    background-color: white;
    z-index: 3;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
}

header a:hover .logo {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.05);
    box-shadow: 0 0 25px var(--secondary);
}

.title-container {
    position: absolute;
    left: 0;
    top: 14%;
    width: 33.33%;
    z-index: 2;
    text-align: center;
    padding: 0 8px;
    box-sizing: border-box;
}

header h1 {
    color: #fffef2;
    display: inline-block;
    max-width: 100%;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1rem, 2vw, 2.1rem);
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.05;
    white-space: normal;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.45),
        1px 1px 0 rgba(0,0,0,0.45),
        2px 2px 0 rgba(0,0,0,0.55),
        0 0 10px rgba(255, 215, 0, 0.7),
        0 0 18px rgba(20, 90, 40, 0.55);
    transform-origin: center center;
    animation: rotateTitle 8s ease-in-out infinite;
}

@keyframes rotateTitle {
    0%, 100% {
        transform: rotateY(0deg) scale(1);
    }
    25% {
        transform: rotateY(90deg) scale(1.02);
    }
    50% {
        transform: rotateY(180deg) scale(1.04);
    }
    75% {
        transform: rotateY(270deg) scale(1.02);
    }
    100% {
        transform: rotateY(360deg) scale(1);
    }
}

header p {
    position: absolute;
    right: 0;
    top: 14%;
    width: 33.33%;
    z-index: 2;
    font-family: 'Gloria Hallelujah', cursive;
    color: #fffef7;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: bold;
    min-height: 1.5em;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.7),
        0 0 10px rgba(0,0,0,0.25),
        0 0 12px rgba(255, 204, 0, 0.65);
}

/* --- Header Promo Box --- */

.header-promo {
    margin: 20px auto;
    border-radius: 15px;
    max-width: 800px;
    width: 90%;
    backdrop-filter: blur(5px);
    position: relative; /* Necesario para posicionar los pseudo-elementos */
    overflow: hidden; /* Recorta el borde animado a la forma del contenedor */
    z-index: 1; /* Asegura que esté por encima de otros elementos del header si es necesario */
    min-height: 100px; /* Altura mínima para que el efecto sea visible */
    display: flex; /* Para centrar el contenido interno */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px; /* Este padding será el espacio para el borde animado */
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho/alto */
}

/* Pseudo-elemento para el borde animado dorado */
.header-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Detrás del contenido y del fondo oscuro */
    border-radius: inherit; /* Hereda el border-radius del padre */
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #FFA500, #FFD700); /* Gradiente dorado */
    background-size: 400% 400%; /* Hace que el gradiente sea mucho más grande para el efecto de movimiento */
    animation: animateGoldenBorder 8s ease infinite; /* Animación del gradiente */
}

/* Pseudo-elemento para el fondo oscuro interno */
.header-promo::after {
    content: '';
    position: absolute;
    top: 2px; /* Posicionado ligeramente hacia adentro para revelar el borde ::before */
    left: 2px;
    right: 2px;
    bottom: 2px;
    z-index: 0; /* Encima de ::before, debajo del contenido de texto */
    background: rgba(0, 0, 0, 0.45); /* Fondo oscuro */
    border-radius: 13px; /* Radio ligeramente menor para que el borde se vea */
}

.promo-title {
    color: var(--secondary);
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    animation: subtleBlink 3s infinite alternate ease-in-out; /* Animación de parpadeo sutil */
}

.promo-description {
    color: white !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-size: 1.1rem !important;
    font-family: 'Segoe UI', sans-serif !important;
    text-shadow: 1px 1px 2px black !important;
    min-height: auto !important;
    animation: none !important;
    filter: none !important;
    line-height: 1.4;
}

/* Aseguramos que el contenido de texto esté por encima del fondo oscuro */
.header-promo .promo-title,
.header-promo .promo-description {
    position: relative;
    z-index: 1; /* Por encima de ::after */
    padding: 15px; /* Aplicar el padding al contenido directamente */
    box-sizing: border-box;
    width: 100%; /* Asegurar que el contenido ocupe todo el ancho */
}

@keyframes subtleBlink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.85; /* Ligeramente menos opaco */
    }
    100% {
        opacity: 1;
    }
}

@keyframes animateGoldenBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes animatedHeaderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shineGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Animación para el carrusel del título */
@keyframes marquee {
    0%   { transform: translateX(50%); }
    100% { transform: translateX(-50%); }
}

.container {
    max-width: 1300px; /* Expandido para dar mayor amplitud al catálogo y secciones */
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    background: #1a1a1a;
    color: white;
    border-radius: 12px;
    border: 3px solid var(--secondary);
    position: relative; /* Necesario para el pseudo-elemento del glow */
}

.container::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 12px;
    box-shadow: 0 0 15px var(--secondary), 0 0 25px var(--secondary);
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    animation: containerBorderGlow 3s infinite alternate ease-in-out;
    z-index: -1;
}

.announcement-banner {
    width: 100%;
    margin-bottom: 25px;
    border: 3px solid var(--secondary);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.banner-carousel-wrapper {
    position: relative;
}

.banner-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.banner-item {
    min-width: 100%;
    position: relative;
}

.banner-item img {
    width: 100%;
    display: block;
    height: auto;
}

.banner-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
}

.banner-control.prev { left: 15px; }
.banner-control.next { right: 15px; }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes containerBorderGlow {
    from { opacity: 0.3; }
    to { opacity: 0.8; }
}

.hidden { display: none !important; }

/* Estilos para los campos de factura */
#factura-fields {
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    max-height: 500px; /* Suficiente para contener los campos */
    opacity: 1;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 15px;
    padding-top: 15px;
}

/* ==========================================================================
   4. Menu & Pizza Grid
   ========================================================================== */

.pizza-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

/* Estilo específico para la lista de otros productos en negocio.html */
#other-products-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center; /* Centra los items en la celda del grid */
}

.pizza-card {
    border: 2px solid var(--secondary);
    padding: 0;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura uniformidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #2b2b2b !important;
    color: white;
}

.pizza-img-container {
    width: 100%;
    height: 200px;
    position: relative;
}

.pizza-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease; /* Transición para zoom y filtros */
    filter: saturate(1.1) contrast(1.05) brightness(1.02); /* Mejora base de color y luz */
}

/* Efecto de elevación y zoom al pasar el mouse por la tarjeta */
.pizza-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.pizza-card:hover .pizza-img-container img {
    transform: scale(1.1); /* Agranda la imagen un 10% */
    filter: saturate(1.3) contrast(1.15) brightness(1.05); /* Colores más vivos al interactuar */
}

.img-disclaimer {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
}

.pizza-card h3 {
    margin: 15px 0 10px;
    color: white;
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.pizza-options {
    padding: 0 10px 15px;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   5. Buttons & Interactive Elements
   ========================================================================== */

button {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover:not(:disabled) {
    background-color: var(--primary-dark);
    transform: translateY(-2px); /* Efecto de elevación sutil */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#btn-pedir:not(:disabled) {
    position: relative;
    background: linear-gradient(45deg, var(--primary), var(--secondary-dark));
    border: 2px solid rgba(255, 255, 255, 0.5);
    transform: scale(1); /* Inicia en tamaño normal */
    box-shadow: 0 0 15px var(--primary);
    animation: pulseGlow 2s infinite ease-in-out;
}

#btn-pedir:not(:disabled)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: btnShine 3s infinite ease-in-out;
}

@keyframes btnShine {
    0% { left: -150%; }
    20%, 100% { left: 150%; }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px var(--primary);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px var(--primary), 0 0 40px var(--secondary);
        transform: scale(1.03);
    }
    100% {
        box-shadow: 0 0 10px var(--primary);
        transform: scale(1);
    }
}

button:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
}

#checkout-section {
    background-color: #000; /* Fondo negro solicitado */
    color: white; /* Texto blanco solicitado */
    padding: 30px;
    border: 2px solid var(--secondary); /* Borde para mantener consistencia */
}

/* ==========================================================================
   6. Forms & Checkout
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    text-align: left;
}

.form-group.full-width {
    grid-column: span 2;
}

/* Estilo específico para anuncios dentro de la cuadrícula */
.ad-in-feed {
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.ad-label {
    font-size: 10px;
    color: #999;
    margin-bottom: 10px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    border: 2px solid #ddd;
    padding: 12px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    background: #222;
    color: white;
    border-color: #444;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: var(--secondary-dark);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    outline: none;
    background-color: #333;
}

.btn-primary-action {
    width: 100%;
    margin-top: 25px;
    padding: 16px;
    font-size: 1.2rem;
    background: linear-gradient(45deg, var(--primary), #ff5e5e);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

#checkout-section .summary-total {
    margin-top: 20px;
    padding: 15px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 10px;
    border: 2px dashed var(--secondary);
    text-align: center;
    color: var(--secondary);
}

.promo-code-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid var(--secondary-dark);
}

.promo-code-section h4 {
    margin-top: 0;
    color: var(--secondary);
}

.promo-input-group {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.promo-input-group input {
    flex-grow: 1;
    text-align: center;
    text-transform: uppercase;
}

#promo-status-msg {
    margin-top: 10px;
    font-weight: bold;
    min-height: 1.2em;
}

.btn-qty {
    width: 32px; /* Ligeramente más grande */
    height: 32px;
    padding: 0;
    border-radius: 8px; /* Bordes suavizados en lugar de círculo completo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Sombra sutil */
    transition: all 0.2s ease-out; /* Transición para todos los cambios */
}

.btn-qty:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px) scale(1.05); /* Efecto de elevación */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-qty:active {
    transform: translateY(0) scale(0.95); /* Efecto de presión */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-qty:disabled {
    background-color: #bdc3c7;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.control-group div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group span[id^="qty-"] {
    font-weight: bold;
    font-size: 1.1rem;
    min-width: 22px;
    text-align: center;
    user-select: none; /* Evita que se seleccione el número al hacer clic rápido */
}

.form-group {
    margin-bottom: 15px;
}

label { display: block; margin-bottom: 5px; font-weight: bold; }

input, select, textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 10px;    
}

.error-text {
    color: var(--primary);
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
    font-weight: bold;
    background-color: rgba(0,0,0,0.8);
    background-size: cover;
    background-position: center;
    padding: 20px;
    border-radius: 15px;
    text-shadow: 1px 1px 2px white;
}

.info-box {
    background-color: var(--dark); /* Gris rata */
    color: #ffffff; /* Blanco puro para máximo contraste */
    border: 2px solid var(--secondary); /* Borde naranja para combinar */
    padding: 15px;
    margin: 15px 0;
    border-radius: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.btn-info {
    background-color: transparent;
    color: var(--secondary-dark);
    border: 2px solid var(--secondary);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-info:hover {
    background-color: var(--secondary);
    color: var(--dark);
    box-shadow: 0 0 15px var(--secondary);
    transform: translateY(-2px);
}

.shipping-list dt {
    font-weight: bold;
    color: var(--primary);
    margin-top: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.shipping-list dd {
    margin-left: 0;
    padding-left: 15px;
    font-size: 0.9rem;
    color: #ccc;
}

.info-box strong {
    font-size: 1.1rem; /* Hace el texto un poco más grande */
    font-weight: bold; /* Asegura que esté en negrita */
}

.mexipizzas-section {
    margin: 25px 0 20px;
    padding: 20px 18px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 140, 0, 0.08));
    border: 2px solid rgba(255, 215, 0, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.section-title-wrap {
    text-align: center;
    margin-bottom: 18px;
}

.section-title-wrap h3 {
    display: inline-block;
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #006847, #ce1126);
    color: #fff;
    letter-spacing: 0.08em;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.mexipizzas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mexipizza-card {
    position: relative;
    background: linear-gradient(180deg, #fffaf0, #fff);
    border: 2px solid #f4c542;
    border-radius: 18px;
    padding: 18px 16px 16px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.mexipizza-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    z-index: 0;
}

.mexipizza-card > * {
    position: relative;
    z-index: 1;
}

.mexipizza-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
}

.mexipizza-card.chorizo-card {
    background: linear-gradient(180deg, rgba(255, 247, 220, 0.78), rgba(255, 255, 255, 0.86)), url('imagenes/chorizo con serrano.png') center/cover no-repeat;
}

.mexipizza-card.bistec-card {
    background: linear-gradient(180deg, rgba(255, 244, 224, 0.8), rgba(255, 255, 255, 0.88)), url('imagenes/bistec encebollado.png') center/cover no-repeat;
}

.mexipizza-card.alpastor-card {
    background: linear-gradient(180deg, rgba(255, 247, 228, 0.74), rgba(255, 255, 255, 0.9)), url('imagenes/al pastor con piña.png') center/cover no-repeat;
}

.mexipizza-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #006847;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mexipizza-card h4 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: #1b1b1b;
}

.mexipizza-card p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
}

.mexipizza-price {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb703, #fbbf24);
    color: #1b1b1b;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.mexipizza-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.mexipizza-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #006847, #ce1126);
    color: #fff;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.mexipizza-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18);
}

.summary-total {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    border-top: 2px solid var(--primary);
    padding-top: 10px;
    transition: color 0.3s ease;
}

.summary-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--primary);
    padding-top: 10px;
    margin-top: 20px;
}

.btn-clear {
    background: #e74c3c;
    color: white;
    font-size: 0.8rem;
    padding: 8px 15px;
    border-radius: 8px;
}

.btn-clear:hover {
    background: #c0392b;
}

.summary-total {
    border-top: none; /* Se quita el borde porque ahora está en el contenedor */
}

.summary-total.total-reached {
    color: var(--success);
}

.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--secondary), transparent);
    margin: 30px 0;
}

.admin-section {
    background: #222;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.table-responsive {
    overflow-x: auto;
}

.promo-usage-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9rem;
}

.promo-usage-table th,
.promo-usage-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #444;
}

.promo-usage-table th {
    background-color: #333;
    color: var(--secondary);
    font-weight: bold;
}

.promo-usage-table tr:nth-child(even) {
    background-color: #2c2c2c;
}

.min-msg {
    text-align: center;
    font-size: 0.95rem;
    margin-top: 5px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.bank-details {
    background: #fff8e1; /* Amarillo muy claro */
    padding: 20px;
    border-radius: 15px;
    color: var(--dark); /* Texto oscuro para contraste */
    border-left: 5px solid var(--secondary);
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mercado-pago-box {
    background: #fff3e0; /* Naranja muy claro */
    padding: 20px;
    border-radius: 15px;
    color: var(--dark); /* Texto oscuro para contraste */
    border-left: 5px solid #009ee3;
}

.final-total-simple p {
    margin: 5px 0;
    font-size: 1.4rem;
}
.final-total-simple .anticipo-text {
    color: var(--primary);
    font-size: 1.6rem;
}

.final-total-simple {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--secondary-dark);
}

.confirmation-box {
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    color: var(--dark);
}

.confirmation-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.confirmation-header i {
    font-size: 2rem;
}

.confirmation-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.confirmation-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.step-number {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
}

.confirmation-step p {
    margin: 5px 0 0 0;
    line-height: 1.5;
}

.account-info {
    background: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
}
.account-info div { margin-bottom: 5px; }
.account-info span { color: #555; }

.confirmation-note { font-size: 0.9rem; color: #555; margin-top: 20px; }

.btn-mercadopago {
    background-color: #009ee3 !important;
    width: 100%;
    margin-top: 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-mercadopago:hover {
    background-color: #007bbd !important;
}

.btn-download-ticket {
    background: linear-gradient(45deg, #3498db, #8e44ad); /* Gradiente de azul a morado */
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    animation: downloadPulse 2.5s infinite ease-in-out;
}

@keyframes downloadPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(142, 68, 173, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
    }
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

footer {
    padding: 10px 20px; 
    min-height: 80px; 
    text-align: center;
    background: #000;
    border: 2px solid var(--secondary);
    color: var(--light);
    border-radius: 40px;
    position: fixed;
    bottom: 5px;
    left: 6%;
    width: 88%;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    isolation: isolate;
}

#universeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none; /* Asegura que no interfiera con los clics en los links */
}

.footer-pizza-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

.footer-pizza-slice {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
    opacity: 0.42;
    transform: rotate(var(--rot, 0deg)) scale(var(--scale, 1));
    will-change: transform, opacity;
    color: rgba(255, 214, 102, 0.9);
    text-shadow: 0 0 10px rgba(255, 214, 102, 0.35);
    user-select: none;
    pointer-events: none;
    /* Animación de caída en cascada */
    animation: footerPizzaFall var(--duration, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
}

.footer-content {
    position: relative;
    z-index: 2;
    padding: 0 clamp(100px, 9vw, 150px);
    will-change: transform, filter;
}

@media (max-width: 700px) {
    .footer-content {
        padding: 0 clamp(60px, 10vw, 90px);
    }

    .footer-pizza-slice {
        opacity: 0.35;
    }
}

.footer-content p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.footer-hidden {
    transform: translateY(100%);
}

.footer-links a {
    color: var(--secondary);
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    color: var(--secondary);
    transition: 0.3s;
}

.footer-links a:hover {
    color: white;
    text-shadow: 0 0 10px var(--secondary);
}

.footer-links a.admin-link {
    color: silver;
    opacity: 0.4; /* Opacidad reducida para discreción */
}

.footer-links a.admin-link:hover {
    opacity: 1;
    text-shadow: 0 0 10px silver;
}

.social-icons {
    margin-top: 5px;
    text-align: center;
}

.social-icons a {
    font-size: 1.8rem;
    margin: 0 10px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    animation: socialEntrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.social-icons a.email-link {
    color: var(--light);
    font-size: 1rem;
    vertical-align: middle;
    text-shadow: 0 0 8px rgba(236, 240, 241, 0.4);
    animation-delay: 1s;
    margin-left: 10px;
    display: inline-block;
}

.social-icons a:hover {
    transform: scale(1.2);
}

.social-icons a.email-link:hover { 
    color: white; 
    text-shadow: 0 0 10px #fff, 0 0 20px var(--secondary); 
}

@keyframes socialEntrance {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* ==========================================================================
   8. Gallery Carousel
   ========================================================================== */

.gallery-section {
    margin-top: 40px;
}

.gallery-divider {
    border: none;
    border-top: 2px solid var(--secondary);
    opacity: 0.3;
    margin-bottom: 20px;
}

.gallery-title {
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black;
    margin-bottom: 20px;
}

.gallery-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.gallery-carousel-container {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid var(--secondary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.gallery-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.gallery-item {
    min-width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-control {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 2px solid var(--secondary);
    padding: 15px;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 1.2rem;
}

.carousel-control:hover { background: var(--primary); transform: scale(1.1); }
.carousel-control.prev { left: -60px; }
.carousel-control.next { right: -60px; }

.pizza-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    color: white;
    padding: 10px 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px black;
    border-top: 1px solid var(--secondary);
    transform: translateY(100%); /* Oculto por defecto */
    transition: transform 0.3s ease;
}

.gallery-item:hover .pizza-name-overlay {
    transform: translateY(0); /* Visible al pasar el ratón */
}

/* Estilo para el contenedor del enlace en la galería */
.gallery-item-link {
    text-decoration: none;
    display: block;
}

/* ==========================================================================
   9. Modals & Notifications
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    text-align: left;
    color: var(--dark);
    border: 4px solid var(--secondary);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.modal-body-text {
    overflow-y: auto;
    text-align: inherit;
    margin: 15px 0;
    padding-right: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Estilos para la Notificación de Administrador */
.admin-notification {
    position: fixed;
    top: 18px; /* Posición superior */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste fino para centrar perfectamente */
    background: linear-gradient(90deg, rgba(255,215,0,1), rgba(255,160,0,1));
    color: #121212;
    padding: 12px 18px;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 6px 30px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.98rem;
    animation: slideInDown 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes slideInDown {
    from { transform: translate(-50%, -120%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Mensaje de estado/pago en la parte superior central (usado para mensajes que el cliente debe ver durante checkout) */
#payment-method-message {
    position: fixed;
    top: 72px; /* Bajo el header para visibilidad inmediata */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    max-width: 940px;
    width: calc(100% - 40px);
    display: none; /* Se muestra cuando se coloca contenido por JS */
}

#payment-method-message .message-inner {
    background: rgba(255, 255, 255, 0.98);
    color: #111;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    border-left: 4px solid var(--primary);
    font-weight: 600;
    text-align: center;
}

/* Botón de cierre para toasts */
.toast-close {
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.7);
    font-size: 1.2rem;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 8px;
    align-self: center;
}

.toast-close:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9); }

/* Ajustes del Pizzabot en móvil para evitar superposición con CTA fijo */
@media (max-width: 600px) {
    #pizzabot-container {
        right: auto;
        left: 12px; /* Mover a la esquina inferior izquierda para no tapar botones centrados */
        bottom: 120px; /* Subir para evitar footer fijo */
    }

    #pizzabot-bubble {
        max-width: 320px; /* Más ancho para mensajes legibles en móvil */
    }

    .admin-notification {
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-width: 640px;
        font-size: 0.95rem;
    }

    #payment-method-message {
        top: 64px;
        width: calc(100% - 24px);
    }
}

/* ==========================================================================
   10. Responsive Design
   ========================================================================== */

/* --- Laptops y Desktops Grandes (1300px+) --- */
@media (min-width: 1300px) {
    .pizza-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Laptops y Tablets (1000px - 1299px) --- */
@media (min-width: 1000px) and (max-width: 1299px) {
    .pizza-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Tablets y Móviles Grandes (601px - 999px) --- */
@media (min-width: 601px) and (max-width: 999px) {
    .pizza-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.mexipizzas-grid {
    grid-template-columns: 1fr;
}
.gallery-carousel-wrapper { margin: 0 50px; }
.carousel-control.prev { left: -45px; }
.carousel-control.next { right: -45px; }
.gallery-item { height: 300px; }
}

/* --- Móviles (hasta 600px) --- */
@media (max-width: 600px) {
    body {
        padding-bottom: 180px; /* Más espacio para footer en móvil */
    }
    header h1 { font-size: 3rem; }
    header p { font-size: 1.2rem; min-height: auto; margin-bottom: 10px; }

    .promo-title { font-size: 1.1rem; }
    .promo-description { font-size: 0.9rem !important; }

    .container { 
        padding: 15px; 
        width: 95%; 
        margin: 10px auto; 
    }
    .mexipizzas-grid {
        grid-template-columns: 1fr;
    }
    .pizza-grid { 
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; 
    }
    .pizza-img-container { height: 130px; }
    .pizza-card h3 { font-size: 0.9rem; margin: 10px 0 5px; }

    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    #checkout-section { padding: 20px 15px; }

    footer { width: 95%; left: 2.5%; border-radius: 25px; }
    .footer-links a { margin: 0 8px; font-size: 0.8rem; }
    .social-icons a.email-link { display: block; margin-top: 10px; margin-left: 0; }

    .gallery-carousel-wrapper { margin: 0; }
    .carousel-control { width: 40px; height: 40px; font-size: 1rem; padding: 0; display: flex; align-items: center; justify-content: center; }
    .carousel-control.prev { left: 5px; }
    .carousel-control.next { right: 5px; }
    .gallery-item { height: 220px; }
}
/* --- Móviles Pequeños (hasta 480px) --- */
@media (max-width: 600px) {
    body::before {
        background-size: 16.66%; /* Ajustado para mantener 3 iconos por línea en móviles */
    }
}

@media (max-width: 480px) {
    .pizza-grid { grid-template-columns: 1fr; }
    .pizza-card { max-width: 300px; margin: 0 auto; }
    .promo-input-group {
        flex-direction: column;
    }
    .promo-input-group button {
        width: 100%;
    }
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================================
   11. Premium Business Theme
   ========================================================================== */
.premium-theme {
    /* Paleta de Colores Patrios de México */
    --premium-bg: #424242;         /* Gris Rata (Fondo) */
    --premium-bg: #C0C0C0;         /* Gris Tenue (rgb(192, 192, 192)) */
    --premium-container: #FFFFFF;  /* Blanco puro para máximo contraste */
    --premium-accent1: #CE1126;    /* Rojo (Acción) */
    --premium-accent2: #006847;    /* Verde (Detalles) */
    --premium-text: #FFFFFF;       /* Blanco (Texto principal sobre fondo oscuro) */
    --premium-text: #212529;       /* Texto oscuro para contraste con fondo claro */
    --premium-light-text: #6C757D;

    /* Sobrescribir variables globales para el tema premium */
    --primary: var(--premium-accent1);
    --primary-dark: #A40E1D;
    --secondary: var(--premium-accent2);
    --secondary-dark: #004F35;
    --dark: var(--premium-text);
    --light: var(--premium-bg);
    background-color: var(--premium-bg);
    color: var(--premium-text);
}

.premium-theme header::before {
    background: linear-gradient(-45deg, var(--premium-accent2), var(--premium-text), var(--premium-accent1), #424242);
}

.premium-theme header h1,
.premium-theme header p {
    color: #FFFFFF;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.premium-theme .container {
    background: var(--premium-container);
    color: #212529; /* Texto oscuro para contenedores claros */
    border-color: var(--premium-accent2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Sombra más pronunciada */
}

.premium-theme .container::before {
    /* Se desactiva el glow para un look más limpio */
    box-shadow: 0 0 15px var(--premium-accent2), 0 0 25px var(--premium-accent2);
}

.premium-theme .pizza-card {
    background-color: #FFFFFF !important;
    border-color: #E9ECEF;
    color: #212529; /* Texto oscuro para tarjetas claras */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* Sombra más pronunciada */
}

.premium-theme .pizza-card:hover {
    border-color: var(--premium-accent2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.premium-theme .pizza-card h3 {
    color: #212529;
    text-shadow: none;
}

.premium-theme .option-row {
    border-top-color: #F1F3F5;
}

.premium-theme .btn-qty {
    background-color: var(--premium-accent1);
    color: white;
}
.premium-theme .btn-qty:hover {
    background-color: var(--primary-dark);
}

.premium-theme #btn-pedir:not(:disabled) {
    background: linear-gradient(45deg, var(--premium-accent1), #E53935);
    box-shadow: 0 4px 20px rgba(206, 17, 38, 0.4);
}

.premium-theme #checkout-section {
    background-color: #E8F5E9; /* Verde Tenue */
    border-color: var(--premium-accent2);
    color: var(--premium-accent1); /* Texto rojo para contraste */
}

.premium-theme .form-group input,
.premium-theme .form-group select,
.premium-theme .form-group textarea {
    background: #FFFFFF; /* Cambiado a blanco puro para máximo contraste */
    border-color: #DEE2E6;
    color: #212529;
}

.premium-theme .form-group input:focus,
.premium-theme .form-group select:focus,
.premium-theme .form-group textarea:focus {
    border-color: var(--premium-accent1);
    box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.15);
    background-color: white;
}

.premium-theme .benefits-list {
    background: rgba(0, 104, 71, 0.05); /* Verde muy claro */
    padding: 20px 20px 20px 40px;
    border-radius: 8px;
}

.premium-theme .benefits-list li {
    margin-bottom: 8px;
    color: var(--premium-light-text);
}

.premium-theme .confirmation-box.bank-details {
    background-color: rgba(206, 17, 38, 0.05); /* Rojo muy claro */
    border-left-color: var(--premium-accent1);
}

.premium-theme .confirmation-box.mercado-pago-box {
    background-color: rgba(0, 104, 71, 0.05); /* Verde muy claro */
    border-left-color: var(--premium-accent2);
}

/* ==========================================================================
   12. Pizzabot Chatbot
   ========================================================================== */

#pizzabot-container {
    position: fixed;
    left: 20px;
    top: 110px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
}

#pizzabot-container.pizzabot-hidden {
    opacity: 0;
    transform: translateY(50px);
    pointer-events: none;
}

#pizzabot-icon {
    font-size: 4rem;
    cursor: pointer;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: pizzabot-bounce 2s infinite ease-in-out;
    transition: transform 0.3s ease;
}

#pizzabot-icon:hover {
    transform: scale(1.1) rotate(15deg);
}

@keyframes pizzabot-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

#pizzabot-bubble {
    background: white;
    color: var(--dark);
    padding: 18px 22px;
    border-radius: 20px 20px 20px 0;
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
    max-width: 330px;
    border: 2px solid var(--primary);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#pizzabot-bubble.show {
    opacity: 1;
    transform: scale(1);
}

#pizzabot-bubble p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes barPulse { from { height: 5px; } to { height: 20px; } }