/* ================================================================
   LOWKEY — FIX FINAL
   ✦ Mobile: neon OFF en reposo, encendido sutil al tocar
   ✦ Aura verde más sutil (igual a desktop hover)
   ✦ Badge descuento: debajo del botón ♥, separado con margen
   ✦ Modal desktop: layout side-by-side premium, no desproporcionado
   ================================================================ */


/* ================================================================
   1. MOBILE CARDS — RESTING STATE DEFINITIVO: neon APAGADO
   ================================================================ */

/*
   Aplica a TODOS los estados excepto :active:
   - resting (sin interacción)
   - :hover (sticky en iOS después de tocar — lo neutralizamos)
   Se usan selectores combinados para ganar especificidad sin pelea
   de !important en cascada.
*/
@media (max-width: 768px) {

    /* Card base: sin neon */
    .product-card-premium,
    .product-card-premium:hover,
    .product-card-premium:focus {
        border-color: rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55) !important;
        transform: none !important;
    }

    /* Overlay ::before — completamente apagado en reposo y hover */
    .product-card-premium::before,
    .product-card-premium:hover::before {
        display: none !important;
        opacity: 0 !important;
        background: transparent !important;
    }

    /* Aura detrás de imagen — apagada */
    .product-image-container::before,
    .product-card-premium:hover .product-image-container::before {
        display: none !important;
        background: transparent !important;
        opacity: 0 !important;
    }

    /* Imagen: sombra neutra, sin verde */
    .product-img,
    .product-card-premium:hover .product-img {
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.50)) !important;
        transform: none !important;
    }

    /* Precio: sin glow verde en reposo */
    .product-price-premium,
    .product-card-premium:hover .product-price-premium {
        text-shadow: none !important;
    }

    /* Botones: sombra neutra */
    .btn-cart-premium {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40) !important;
    }
    .btn-view-premium {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.30) !important;
    }

    /* Stock badge: sin neon */
    .stock-badge.stock-available {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    }
}


/* ================================================================
   2. MOBILE CARDS — :ACTIVE: neon SUTIL al tocar
   Inspirado en el hover de desktop: borde verde + glow suave
   NO el explosion neon anterior
   ================================================================ */
@media (max-width: 768px) {

    .product-card-premium:active {
        transform: scale(0.977) !important;
        border-color: rgba(0, 255, 156, 0.38) !important;
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.70),
            0 0 28px rgba(0, 255, 156, 0.16),
            inset 0 0 16px rgba(0, 255, 156, 0.04) !important;
    }

    /* Imagen: drop-shadow verde suave (como desktop hover) */
    .product-card-premium:active .product-img {
        filter: drop-shadow(0 8px 20px rgba(0, 255, 156, 0.30)) !important;
        transform: scale(1.005) !important;
    }

    /* Precio: glow sutil al tocar */
    .product-card-premium:active .product-price-premium {
        text-shadow: 0 0 14px rgba(0, 255, 156, 0.35) !important;
    }

    /* Botón Ver al tocar */
    .btn-view-premium:active {
        transform: scale(0.96) !important;
        background: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 0 14px rgba(0, 255, 156, 0.14) !important;
    }

    /* Botón Carrito al tocar */
    .btn-cart-premium:active {
        transform: scale(0.94) !important;
        box-shadow: 0 0 22px rgba(0, 255, 156, 0.38) !important;
    }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {
    .product-card-premium:active {
        box-shadow:
            0 3px 16px rgba(0, 0, 0, 0.75),
            0 0 22px rgba(0, 255, 156, 0.13) !important;
    }
}


/* ================================================================
   3. BADGE DESCUENTO — debajo del botón ♥ con margen
   
   Layout de la card (esquina top-right):
   ┌────────────────────────┐
   │              [♥ 40px]  ← top: 12px
   │              [  12px gap  ]
   │              [-XX%]    ← top: 64px  (12+40+12)
   └────────────────────────┘
   
   La fix-cards-mobile-premium.css lo movía a top-left (bug).
   Aquí lo restauramos a top-right, debajo del corazón.
   ================================================================ */

/* Desktop y base */
.product-badge-discount {
    position: absolute !important;
    top: 62px !important;     /* 12px (top btn-fav) + 40px (altura) + 10px margin */
    right: 12px !important;
    left: auto !important;    /* Cancela el left: 10px del fix anterior */
    z-index: 5 !important;

    /* Estilo visual: glassmorphism rojo sutil */
    background: rgba(220, 30, 50, 0.18) !important;
    color: #ff7070 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 60, 80, 0.28) !important;
    letter-spacing: 0.4px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.40),
        0 0 16px rgba(255, 50, 60, 0.22),
        inset 0 1px 0 rgba(255, 100, 100, 0.15) !important;
    animation: discountGlowFinal 2.5s ease-in-out infinite !important;
    font-family: 'Poppins', sans-serif !important;
}

@keyframes discountGlowFinal {
    0%, 100% {
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.40),
            0 0 14px rgba(255, 50, 60, 0.18),
            inset 0 1px 0 rgba(255, 100, 100, 0.15);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.45),
            0 0 24px rgba(255, 50, 60, 0.36),
            inset 0 1px 0 rgba(255, 100, 100, 0.20);
        transform: scale(1.05);
    }
}

/* Mobile: btn-favorite sube a top: 10px y mide 44px → ajuste */
@media (max-width: 768px) {
    .product-badge-discount {
        top: 66px !important;  /* 10px (top btn-fav) + 44px (altura) + 12px margin */
        right: 10px !important;
        left: auto !important;
        font-size: 0.68rem !important;
        padding: 4px 9px !important;
    }
}


/* ================================================================
   4. MODAL DESKTOP — layout side-by-side premium
   ================================================================ */

@media (min-width: 769px) {

    /* Overlay del modal: centrado correctamente */
    .product-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        box-sizing: border-box !important;
    }

    /* Contenedor: flex horizontal, tamaño controlado, SIN overflow:hidden en el wrapper */
    .product-modal-content {
        display: flex !important;
        flex-direction: row !important;
        width: 780px !important;
        max-width: calc(100vw - 48px) !important;
        height: auto !important;
        max-height: calc(100vh - 48px) !important;
        overflow: visible !important;   /* ← sin clip, cada panel maneja su propio scroll */
        border-radius: 22px !important;
        align-items: stretch !important;
        position: relative !important;
        flex-shrink: 0 !important;

        background: linear-gradient(145deg, #111 0%, #0d0d0d 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.80),
            0 0 60px rgba(0, 255, 156, 0.06) !important;
    }

    /* Panel izquierdo — imagen */
    .modal-image {
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        min-height: 420px !important;
        flex-shrink: 0 !important;
        padding: 44px 32px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(145deg, #0d0d0d 0%, #111 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 22px 0 0 22px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Aura verde muy sutil detrás de la imagen */
    .modal-image::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 50% 60%,
            rgba(0, 255, 156, 0.07) 0%,
            transparent 65%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .modal-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: contain !important;
        position: relative !important;
        z-index: 1 !important;
        filter: drop-shadow(0 10px 24px rgba(0, 255, 156, 0.16)) !important;
    }

    /* Panel derecho — info del producto */
    .modal-info {
        flex: 1 !important;
        min-width: 0 !important;          /* ← evita que flex item desborde */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 36px 32px 28px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 22px 22px 0 !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0,255,156,0.18) transparent !important;
    }

    .modal-info::-webkit-scrollbar { width: 4px; }
    .modal-info::-webkit-scrollbar-thumb {
        background: rgba(0, 255, 156, 0.18);
        border-radius: 4px;
    }

    /* Tipografía del panel info */
    .modal-info h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin: 0 0 12px !important;
        color: #fff !important;
        word-break: break-word !important;
    }

    .modal-price {
        font-size: 1.7rem !important;
        margin: 10px 0 16px !important;
    }

    .modal-description {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
        color: #aaa !important;
        flex: 1 !important;
        margin-bottom: 0 !important;
    }

    /* Botón AGREGAR AL CARRITO — dentro del panel info */
    .modal-add-cart {
        width: 100% !important;
        margin: 20px 0 0 !important;
        padding: 15px !important;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        align-self: auto !important;
    }

    /* Botón cerrar — esquina del modal */
    .close-product-modal {
        top: 14px !important;
        right: 14px !important;
        z-index: 100 !important;
    }
}

/* ================================================================
   5. DESKTOP CARDS — :hover sutil (mantener como está, confirmar)
   ================================================================ */
@media (min-width: 769px) {
    .product-card-premium:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(0, 255, 156, 0.30) !important;
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(0, 255, 156, 0.06) !important;
    }

    .product-card-premium::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg, rgba(0,255,156,0.07) 0%, transparent 100%) !important;
        opacity: 0 !important;
        transition: opacity 0.35s ease !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .product-card-premium:hover::before {
        opacity: 1 !important;
    }
}