/*
 * Modern Mobile Cart CSS for MedicalNNabis
 * Implementa layout vertical moderno para carrito WooCommerce
 * Basado en patrones UX 2025 y mejores prácticas móviles
 */

/* ============================================
   MOBILE CART MODERN LAYOUT
============================================ */

@media screen and (max-width: 768px) {
    
    /* Reset tabla tradicional para mobile */
    .woocommerce-cart-form .shop_table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .woocommerce-cart-form .shop_table thead {
        display: none !important; /* Ocultar headers en mobile */
    }
    
    .woocommerce-cart-form .shop_table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    /* Cada fila se convierte en una card vertical */
    .woocommerce-cart-form .shop_table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: var(--spacing-md) !important;
        padding: var(--spacing-md) !important;
        background: rgba(0, 255, 136, 0.05)!important;
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
        border-radius: 12px !important;
        position: relative !important;
    }
    
    /* Reset de celdas para layout vertical */
    .woocommerce-cart-form .shop_table tbody td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0.5rem 0 !important;
        text-align: left !important;
        position: relative !important;
    }
    
    /* Botón de eliminar - posición absoluta arriba derecha */
    .woocommerce-cart-form .shop_table tbody .product-remove {
        position: absolute !important;
        top: var(--spacing-sm) !important;
        right: var(--spacing-sm) !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-remove a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        background: rgba(255, 0, 0, 0.2) !important;
        color: #ff4444 !important;
        border-radius: 50% !important;
        text-decoration: none !important;
        font-size: 18px !important;
        font-weight: bold !important;
        transition: var(--transition) !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-remove a:hover {
        background: rgba(255, 0, 0, 0.4) !important;
        color: #fff !important;
        transform: scale(1.1) !important;
    }
    
    /* Imagen del producto - layout horizontal con info */
    .woocommerce-cart-form .shop_table tbody .product-thumbnail {
         width: 80px !important;
         height: auto !important;
         float: left !important;
         margin: 0 var(--spacing-md) 0 0 !important;
         border-radius: 8px !important;
         overflow: hidden !important;
     }
    
    .woocommerce-cart-form .shop_table tbody .product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        aspect-ratio: 4 / 3;
    }
    
    /* Nombre del producto */
    .woocommerce-cart-form .shop_table tbody .product-name {
        margin-top: 0 !important;
        margin-bottom: var(--spacing-xs) !important;
        padding-right: 40px !important; /* Espacio para botón eliminar */
        line-height: 1em;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-name::before {
        display: none !important; /* Quitar label automático */
    }
    
    .woocommerce-cart-form .shop_table tbody .product-name a {
        color: var(--text-light) !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
        text-decoration: none !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-name a:hover {
        color: var(--neon-green) !important;
        text-shadow: var(--glow-effect) var(--neon-green) !important;
    }
    
    /* Precio con label */
    .woocommerce-cart-form .shop_table tbody .product-price {
        clear: left !important;
        margin-bottom: var(--spacing-xs) !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-price::before {
        content: "Precio: " !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        display: inline !important;
        margin-right: 0.5rem !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-price .amount {
        color: var(--neon-green) !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
    }
    
    /* Sección de cantidad - layout horizontal mejorado */
    .woocommerce-cart-form .shop_table tbody .product-quantity {
        margin-bottom: var(--spacing-sm) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-xs) !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-quantity::before {
        content: "Cantidad:" !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        min-width: 70px !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-quantity .quantity {
        display: flex !important;
        align-items: center !important;
        background: rgba(0, 255, 136, 0.05) !important;
        border: 1px solid rgba(0, 255, 136, 0.3) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-quantity .qty {
        background: transparent !important;
        border: none !important;
        color: var(--text-light) !important;
        text-align: center !important;
        width: 60px !important;
        height: 40px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-quantity .qty:focus {
        outline: none !important;
        background: rgba(0, 255, 136, 0.1) !important;
    }
    
    /* Subtotal destacado */
    .woocommerce-cart-form .shop_table tbody .product-subtotal {
        margin-top: var(--spacing-sm) !important;
        padding-top: var(--spacing-sm) !important;
        border-top: 1px solid rgba(0, 255, 136, 0.2) !important;
        text-align: right !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-subtotal::before {
        content: "Subtotal: " !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
    }
    
    .woocommerce-cart-form .shop_table tbody .product-subtotal .amount {
        color: var(--toxic-green) !important;
        font-weight: 700 !important;
        font-size: 1.3rem !important;
        text-shadow: var(--glow-effect) var(--toxic-green) !important;
    }
    
    /* Clearfix para layout */
    .woocommerce-cart-form .shop_table tbody tr::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
    
    /* ============================================
       SECCIÓN DE ACCIONES MÓVIL
    ============================================ */
    
    .cart-actions-wrapper {
            display: flex !important;
            flex-direction: column !important;
            gap: var(--spacing-sm) !important;
            margin: var(--spacing-md) 0 !important;
            padding: var(--spacing-md) !important;
            background: rgba(0, 255, 136, 0.05) !important;
            border: 1px solid rgba(0, 255, 136, 0.2) !important;
            border-radius: 12px !important;
        }
    
    .cart-actions-wrapper .coupon-section {
        width: 100% !important;
    }
    
    .cart-actions-wrapper .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-xs) !important;
    }
    
    .cart-actions-wrapper .coupon label {
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }
    
    .cart-actions-wrapper .coupon input[type="text"] {
        width: 100% !important;
        height: 50px !important;
        padding: 0 var(--spacing-sm) !important;
        background: rgba(0, 255, 136, 0.05) !important;
        border: 1px solid rgba(0, 255, 136, 0.3) !important;
        border-radius: 8px !important;
        color: var(--text-light) !important;
        font-size: 1rem !important;
        margin-bottom: var(--spacing-xs) !important;
    }
    
    .cart-actions-wrapper .coupon input[type="text"]:focus {
        outline: none !important;
        border-color: var(--neon-green) !important;
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3) !important;
    }
    
    /* Botones modernos móvil */
    .cart-actions-wrapper button,
    .cart-actions-wrapper input[type="submit"] {
        width: 100% !important;
        height: 50px !important;
      /*  background: linear-gradient(135deg, var(--neon-green) 0%, var(--toxic-green) 100%) !important;*/
        border: none !important;
        border-radius: 8px !important;
      /*  color: #000 !important;*/
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        margin-top: var(--spacing-xs) !important;
    }
    
    .cart-actions-wrapper button:hover,
    .cart-actions-wrapper input[type="submit"]:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0, 255, 136, 0.4) !important;
    }
    
    /* Botón actualizar carrito - estilo secundario */
    .cart-actions-wrapper button[name="update_cart"] {
      
    }
    
    .cart-actions-wrapper button[name="update_cart"]:hover {
        box-shadow: 0 8px 20px rgba(102, 0, 204, 0.4) !important;
    }
    
    /* ============================================
       TOTALES DEL CARRITO MÓVIL
    ============================================ */
    
    .cart-collaterals {
        margin-top: var(--spacing-md) !important;
        width: 100% !important;
    }
    
    .cart_totals {
         width: 100% !important;
         background: rgba(0, 0, 0, 0.9) !important;
         border: 2px solid rgba(0, 255, 136, 0.3) !important;
         border-radius: 12px !important;
         padding: var(--spacing-md) !important;
     }
    
    .cart_totals h2 {
        color: var(--neon-green) !important;
        text-align: center !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        text-shadow: var(--glow-effect) var(--neon-green) !important;
        margin-bottom: var(--spacing-sm) !important;
        line-height: 1em;
    }
    
    .cart_totals table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    .cart_totals th,
    .cart_totals td {
        padding: var(--spacing-sm) !important;
        border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
        text-align: left !important;
    }
    
    .cart_totals th {
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        width: 50% !important;
    }
    
    .cart_totals td {
        color: var(--text-light) !important;
        font-weight: 700 !important;
        text-align: right !important;
        width: 50% !important;
    }
    
    /* Total destacado */
    .cart_totals .order-total th,
    .cart_totals .order-total td {
        font-size: 1.3rem !important;
        border-bottom: none !important;
        border-top: 2px solid var(--neon-green) !important;
        padding-top: var(--spacing-sm) !important;
    }
    
    .cart_totals .order-total th {
        color: var(--neon-green) !important;
        text-shadow: var(--glow-effect) var(--neon-green) !important;
    }
    
    .cart_totals .order-total td {
        color: var(--toxic-green) !important;
        text-shadow: var(--glow-effect) var(--toxic-green) !important;
    }
    
    /* Botón proceder al checkout */
    .wc-proceed-to-checkout {
        margin-top: var(--spacing-sm) !important;
    }
    
    .wc-proceed-to-checkout .checkout-button {
        width: 100% !important;

        background: linear-gradient(135deg, var(--toxic-green) 0%, var(--cannabis-green) 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        color: #000 !important;

        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3) !important;
    }
    
    .wc-proceed-to-checkout .checkout-button:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(57, 255, 20, 0.5) !important;
        background: linear-gradient(135deg, var(--cannabis-green) 0%, var(--emerald) 100%) !important;
    }
    
    /* ============================================
       ANIMACIONES Y EFECTOS
    ============================================ */
    
    @keyframes cartItemSlideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .woocommerce-cart-form .shop_table tbody tr {
        animation: cartItemSlideIn 0.3s ease-out !important;
    }
    
    /* Estados hover para cards */
    .woocommerce-cart-form .shop_table tbody tr:hover {
        border-color: var(--neon-green) !important;
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.4) !important;
        transform: translateY(-2px) !important;
    }
    
    /* ============================================
       CARRITO VACÍO
    ============================================ */
    
    .cart-empty {
        text-align: center !important;
        padding: var(--spacing-xl) var(--spacing-sm) !important;
        background: var(--bg-card) !important;
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
        border-radius: 12px !important;
        margin: var(--spacing-md) 0 !important;
    }
    
    .return-to-shop {
        margin-top: var(--spacing-sm) !important;
    }
    
    .return-to-shop .button {
        background: linear-gradient(135deg, var(--neon-green) 0%, var(--toxic-green) 100%) !important;
        color: #000 !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        display: inline-block !important;
        transition: var(--transition) !important;
    }
    
    .return-to-shop .button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0, 255, 136, 0.4) !important;
    }
}

/* ============================================
   BREAKPOINT TABLETS (768px - 1024px)
============================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .woocommerce-cart-form .shop_table {
        font-size: 0.9rem !important;
    }
    
    .woocommerce-cart-form .shop_table tbody td {
        padding: 0.75rem !important;
    }
    
    .cart_totals {
        max-width: 400px !important;
        margin-left: auto !important;
    }
}