/**
 * Quantity Controls Fix
 * v1.0.0
 * 
 * Arregla:
 * 1. Bordes redondeados → completamente cuadrados
 * 2. SideCart quantity controls que se cortan
 */

/* ========================================================================
   GLOBAL: Todos los quantity controls 100% cuadrados
   ======================================================================== */

/* ProductCard - Shop pages */
.productCard-qtyControl,
.productCard-qtyControl *,
.productCard-qtyDecrease,
.productCard-qtyIncrease,
.productCard-qtyInput,
.productCard-qtyBtn {
    border-radius: 0 !important;
}

/* SideCart - Carrito lateral */
.side-cart .quantity-control,
.side-cart .quantity-control *,
.side-cart .qty-btn,
.side-cart .qty-input {
    border-radius: 0 !important;
}

/* Single Product Page - Página de producto */
.qty-control,
.qty-control *,
.qty-btn,
.qty-input,
.quantity-btn,
.quantity .qty-btn,
.quantity .qty-input,
.quick-qty-btn {
    border-radius: 0 !important;
}

/* WooCommerce default quantity inputs */
.woocommerce .quantity,
.woocommerce .quantity *,
.woocommerce .quantity .qty,
.woocommerce .quantity input.qty,
.woocommerce .quantity button,
.woocommerce-cart .quantity,
.woocommerce-cart .quantity *,
.woocommerce-cart .quantity .qty,
.woocommerce-cart .quantity button,
.woocommerce-cart .quantity-controls,
.woocommerce-cart .quantity-controls *,
.qty-btn,
.qty-btn-decrease,
.qty-btn-increase,
input.qty,
.qty-input {
    border-radius: 0 !important;
}

/* Cart page - MÁS ESPECÍFICO para sobrescribir el !important del tema */
.cart-page .quantity-control,
.cart-page .quantity-control *,
.cart-page .quantity-controls,
.cart-page .quantity-controls *,
.woocommerce-cart-form .quantity,
.woocommerce-cart-form .quantity-controls,
.woocommerce-cart-form .quantity-controls *,
.cart-table .quantity-controls,
.cart-table .quantity-controls *,
.cart-item .quantity-controls,
.cart-item .quantity-controls *,
.woocommerce-cart .quantity-controls,
.woocommerce-cart .quantity-controls * {
    border-radius: 0 !important;
}

/* Checkout page */
.woocommerce-checkout .quantity,
.woocommerce-checkout .quantity * {
    border-radius: 0 !important;
}

/* ========================================================================
   SIDECART: Arreglar quantity controls que se cortan
   ======================================================================== */

/* Reducir width del quantity control para que no se corte */
.side-cart .quantity-control {
    border-radius: 0 !important;
    max-width: 90px !important; /* Reducido para que quepa */
    overflow: hidden !important;
}

/* Ajustar tamaño de botones +/- */
.side-cart .qty-btn {
    width: 26px !important; /* Reducido de 28px */
    height: 26px !important; /* Reducido de 28px */
    min-width: 26px !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    padding: 0 !important;
}

/* Ajustar input del medio */
.side-cart .qty-input {
    width: 36px !important; /* Reducido de 40px */
    min-width: 36px !important;
    max-width: 36px !important;
    height: 26px !important; /* Igual que botones */
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 0 2px !important;
}

/* Asegurar que el contenedor del item no se desborde */
.side-cart .item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

/* Ajustar el precio para que tenga espacio */
.side-cart .item-price {
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ========================================================================
   PRODUCTCARD: Asegurar que quantity controls sean cuadrados
   ======================================================================== */

.productCard-qtyControl {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.productCard-qtyDecrease,
.productCard-qtyIncrease {
    border-radius: 0 !important;
}

.productCard-qtyInput {
    border-radius: 0 !important;
}

/* Quick quantity buttons también cuadrados */
.productCard-qtyBtn {
    border-radius: 0 !important;
}

/* ========================================================================
   SINGLE PRODUCT: Asegurar que quantity controls sean cuadrados
   ======================================================================== */

.single-product .qty-control,
.single-product .qty-control * {
    border-radius: 0 !important;
}

.single-product .quick-quantity-btns,
.single-product .quick-quantity-btns * {
    border-radius: 0 !important;
}

/* Pack/Carton buttons también cuadrados */
.pack-carton-btn {
    border-radius: 0 !important;
}

/* ========================================================================
   RESPONSIVE: Ajustes para mobile
   ======================================================================== */

@media (max-width: 768px) {
    /* En mobile el SideCart es más estrecho, ajustar aún más */
    .side-cart .quantity-control {
        max-width: 85px !important;
    }
    
    .side-cart .qty-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 13px !important;
    }
    
    .side-cart .qty-input {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    
    .side-cart .item-price {
        font-size: 12px !important;
    }
}

/* ========================================================================
   RESULTADO ESPERADO:
   ✅ Todos los quantity controls 100% cuadrados (border-radius: 0)
   ✅ SideCart: controls compactos que no se cortan
   ✅ ProductCard: botones +/- cuadrados
   ✅ Single Product: todos los controles cuadrados
   ✅ Responsive: ajustes para mobile
   ======================================================================== */