/*Resumen de lo que hace este código:

    Diseña un control de cantidad + botón de carrito moderno y responsivo.

    Oculta el botón predeterminado de WooCommerce.

    Mejora la experiencia móvil con tamaños, márgenes y espaciado ajustados por media queries.

    Usa pointer-events: none en el input para evitar que el usuario lo modifique directamente (sólo con los botones + y -).

    Está listo para usarse en plantillas personalizadas de productos o loops en WooCommerce.*/

/* ====================================
   [05] SELECTOR DE CANTIDAD + BOTÓN
   ------------------------------------
   Diseño de la fila que contiene el selector
   de cantidad y el botón del carrito.
==================================== */

/* Contenedor principal que alinea el input y el botón en una fila */
.custom-cart-row {
  display: flex;                  /* Muestra en línea */
  align-items: center;           /* Centra verticalmente */
  margin-top: 10px;              /* Separación superior */
}

/* Caja que encierra el input y los botones +/- */
.quantity-box {
  display: flex;
  align-items: center;
  height: 30px !important;       /* Altura fija */
  border: 1px solid #ccc;        /* Borde gris claro */
  border-radius: 6px;            /* Bordes redondeados */
  padding: 4px 6px;              /* Espacio interno */
  background-color: #fff;        /* Fondo blanco */
}

/* Botones + y - de cantidad */
.qty-btn {
  background-color: transparent !important;  /* Sin fondo */
  border: none;                              /* Sin borde */
  font-size: 16px;                           /* Tamaño grande */
  font-weight: bold;                         /* Negrita */
  align-items: center;
  width: 20px;                               /* Ancho pequeño */
  min-height: 28px !important;
  cursor: pointer;                           /* Cursor tipo puntero */
  color: #000 !important;
  border-radius: 6px !important;
  padding-left: 18px !important;
  text-indent: -5px !important;              /* Ajuste para centrar símbolo */
  line-height: 0 !important;
}

/* Ajuste visual del botón "+" */
.qty-btn.qty-plus {
  transform: translateX(2px);    /* Ligeramente a la derecha */
}
/* Ajuste visual del botón "-" */
.qty-btn.qty-minus {
  transform: translateX(-2px);   /* Ligeramente a la izquierda */
}

/* Campo de entrada de cantidad */
.qty-input {
  width: 40px;
  height: 28px !important;
  font-size: 14px;
  text-align: center;
  border: none !important;
  pointer-events: none;          /* Impide que el usuario escriba manualmente */
  background-color: #f5f5f5;     /* Gris claro */
  color: #000;
  box-shadow: none !important;
}

/* Botón personalizado para agregar al carrito */
.custom-cart-btn {
  background-color: transparent !important;
  color: #BE1823 !important;     /* Rojo personalizado */
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Ícono dentro del botón (por ejemplo, carrito de FontAwesome) */
.custom-cart-btn i {
  font-size: 25px !important;
  align-self: right !important;
}

/* Hover sobre el botón de carrito */
.custom-cart-btn:hover {
  background-color: #a00000;     /* Rojo oscuro al pasar el cursor */
  border-radius: 6px !important;
}

/* ====================================
   [06] UTILIDADES Y LIMPIEZA
==================================== */

/* Elimina márgenes y padding del wrapper del botón */
.product .custom-add-to-cart-wrapper {
  margin: 0;
  padding: 0;
}

/* Oculta el botón de añadir al carrito por defecto de WooCommerce */
.wc-product__add_to_cart,
.add_to_cart_button,
.product .button,
.woocommerce ul.products li.product .button {
  display: none !important;
}

/* Oculta las flechas de los campos tipo number en Chrome y Firefox */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-input[type=number] {
  -moz-appearance: textfield;  /* Para Firefox */
}

/* ====================================
   RESPONSIVE CUSTOM CART
==================================== */

/* Móviles pequeños (hasta 599px) */
@media (max-width: 599px) {
  .custom-cart-row {
    gap: 5px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 6px;
    justify-content: flex-start !important;
    max-width: 100px;
  }

  .quantity-box {
    margin-left: 0 !important;
    height: 28px !important;
    padding: 2px 4px;
  }

  .qty-btn {
    width: 10px !important;
    min-height: 24px !important;
    font-size: 14px;
    padding-left: 12px !important;
    text-indent: -4px !important;
  }

  .qty-btn.qty-plus { transform: translateX(1px); }
  .qty-btn.qty-minus { transform: translateX(-1px); }

  .qty-input {
    width: 30px !important;
    height: 24px !important;
    font-size: 13px;
    padding: 0 !important;
    text-indent: 0 !important;
  }

  .custom-cart-btn {
    min-width: 30px !important;
    min-height: 5px !important;
    padding-left: 5px !important;
    border-radius: 50%;
    align-self: right !important;
  }

  .custom-cart-btn i {
    font-size: 18px !important;
  }
}

/* Pantallas medianas (600px a 999px) */
@media (min-width: 600px) and (max-width: 999px) {
  .custom-cart-row {
    gap: 5px !important;
    padding-left: 5px !important;
    margin-left: 5px !important;
    margin-top: 6px;
    justify-content: flex-start !important;
    max-width: 100px;
  }

  .quantity-box {
    height: 28px !important;
    padding: 2px 4px;
  }

  .qty-btn {
    width: 10px !important;
    min-height: 24px !important;
    font-size: 14px;
    padding-left: 12px !important;
    text-indent: -4px !important;
  }

  .qty-btn.qty-plus { transform: translateX(1px); }
  .qty-btn.qty-minus { transform: translateX(-1px); }

  .qty-input {
    width: 30px !important;
    height: 24px !important;
    font-size: 13px;
  }

  .custom-cart-btn {
    min-width: 40px !important;
    max-height: 5px !important;
    padding-left: 9px !important;
    border-radius: 50%;
  }

  .custom-cart-btn i {
    font-size: 20px !important;
  }
}

/* Pantallas grandes (1000px en adelante) */
@media (min-width: 1000px) {
  .custom-cart-row {
    gap: 20px !important;
    padding-left: 5px !important;
    margin-left: 5px !important;
    margin-top: 6px;
    justify-content: flex-start !important;
    max-width: 100px;
  }

  .quantity-box {
    height: 28px !important;
    padding: 2px 4px;
  }

  .qty-btn {
    width: 10px !important;
    min-height: 24px !important;
    font-size: 14px;
    padding-left: 12px !important;
    text-indent: -4px !important;
  }

  .qty-btn.qty-plus { transform: translateX(1px); }
  .qty-btn.qty-minus { transform: translateX(-1px); }

  .qty-input {
    width: 30px !important;
    height: 24px !important;
    font-size: 13px;
  }

  .custom-cart-btn {
    min-width: 40px !important;
    max-height: 5px !important;
    padding-left: 9px !important;
    border-radius: 50%;
  }

  .custom-cart-btn i {
    font-size: 20px !important;
  }
}