/**
 * Carrito + login/checkout auth — colores GINO (negro CTA / precios PDP).
 * Solo colores y hover; no cambia anchos ni layout Bootstrap.
 *
 * Hummingbird PS9 sirve su CSS dentro de @layer (vendors … utilities). Una
 * declaración sin capa gana a cualquier capa mientras no lleve !important,
 * pero un !important de @layer utilities (p.ej. .bg-primary) no se puede
 * vencer desde fuera de las capas: por eso el descuento del carrito usa la
 * clase np-cart-discount en lugar de la utilidad .bg-primary.
 */

/* ========== Carrito (/carrito) ========== */

/* Precio duplicado al lado de cantidad (ya está a la izquierda) */
body#cart .product-line__price {
  display: none;
}

/* Precios / descuento como PDP. Se usa clase propia: CCC puede romper los
   selectores que contienen `--` (ver ccc-bem-doble-guion.md). */
body#cart .np-cart-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

body#cart .np-cart-price {
  color: #ad1f00;
  font-weight: 700;
  font-size: 1.125rem;
}

body#cart .np-cart-regular-price {
  color: #8a8a8a;
  font-weight: 400;
  text-decoration: line-through;
}

body#cart .np-cart-discount {
  background-color: #eba53d;
  color: #fff;
  border: 0;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.2rem 0.55rem;
}

/* Eliminar: rojo + basurero */
body#cart .product-line__actions .js-remove-from-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #c62828;
  text-decoration: none;
  font-weight: 500;
}

/* El subrayado del enlace atravesaría el icono, así que se aplica al texto. */
body#cart .product-line__actions .js-remove-from-cart:hover,
body#cart .product-line__actions .js-remove-from-cart:focus {
  color: #8e0000;
  text-decoration: none;
}

body#cart .js-remove-from-cart:hover .np-cart-remove__label,
body#cart .js-remove-from-cart:focus .np-cart-remove__label {
  text-decoration: underline;
}

body#cart .np-cart-remove__icon {
  font-size: 1.125rem;
  line-height: 1;
}

/* Finalizar compra: CTA negro — mismo hover ATC PDP */
body#cart .cart-summary__actions .btn-primary,
body#cart .cart-summary__actions .btn-primary.btn-lg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

body#cart .cart-summary__actions .btn-primary:hover:not(:disabled),
body#cart .cart-summary__actions .btn-primary:focus:not(:disabled) {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
  filter: brightness(1.18);
}

body#cart .cart-summary__actions .btn-primary:disabled,
body#cart .cart-summary__actions .btn-primary.disabled {
  opacity: 0.5;
  filter: none;
}

body#cart .cart-summary__actions .btn-primary .material-icons {
  color: inherit !important;
  font-size: 1.25rem;
  line-height: 1;
}

/* Continuar comprando: outline (volver) */
body#cart .cart__continue-shopping,
body#cart a.cart__continue-shopping.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: #fff !important;
  border: 2px solid #111 !important;
  color: #111 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

body#cart .cart__continue-shopping:hover,
body#cart .cart__continue-shopping:focus,
body#cart a.cart__continue-shopping.btn:hover,
body#cart a.cart__continue-shopping.btn:focus {
  background-color: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  filter: none;
}

/* Tokens BS 5.3: body#cart también (antes solo checkout/auth → cupón azul) */
body#cart,
body#checkout {
  --bs-primary: #111;
  --bs-primary-rgb: 17, 17, 17;
  --bs-link-color: #111;
  --bs-link-hover-color: #2a2a2a;
  --bs-accordion-active-color: #111;
  --bs-accordion-btn-color: #111;
  --bs-accordion-active-bg: transparent;
}

/* Código promocional: título negrita oscuro + Aplicar negro (carrito Y checkout) */
body#cart .cart-voucher,
body#checkout .cart-voucher {
  --bs-primary: #111;
  --bs-link-color: #111;
  --bs-accordion-btn-color: #111;
  --bs-accordion-active-color: #111;
}

body#cart .np-cart-voucher-title,
body#cart .cart-voucher__accordion-button.np-cart-voucher-title,
body#cart .cart-voucher__accordion-button,
body#cart .cart-voucher .accordion-button,
body#checkout .np-cart-voucher-title,
body#checkout .cart-voucher__accordion-button.np-cart-voucher-title,
body#checkout .cart-voucher__accordion-button,
body#checkout .cart-voucher .accordion-button {
  font-weight: 700 !important;
  color: #111 !important;
  text-decoration: none !important;
  --bs-accordion-btn-color: #111 !important;
  --bs-accordion-active-color: #111 !important;
  box-shadow: none !important;
}

body#cart .cart-voucher__form .btn-primary,
body#cart .np-cart-voucher-apply,
body#checkout .cart-voucher__form .btn-primary,
body#checkout .np-cart-voucher-apply,
body#checkout .cart-summary .cart-voucher__form .btn {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #111 !important;
  --bs-btn-border-color: #111 !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: #2a2a2a !important;
  --bs-btn-hover-border-color: #2a2a2a !important;
  --bs-btn-active-bg: #2a2a2a !important;
  --bs-btn-active-border-color: #2a2a2a !important;
  background-color: #111 !important;
  background-image: none !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

body#cart .cart-voucher__form .btn-primary:hover:not(:disabled),
body#cart .cart-voucher__form .btn-primary:focus:not(:disabled),
body#cart .np-cart-voucher-apply:hover:not(:disabled),
body#cart .np-cart-voucher-apply:focus:not(:disabled),
body#checkout .cart-voucher__form .btn-primary:hover:not(:disabled),
body#checkout .cart-voucher__form .btn-primary:focus:not(:disabled),
body#checkout .np-cart-voucher-apply:hover:not(:disabled),
body#checkout .np-cart-voucher-apply:focus:not(:disabled) {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
  filter: brightness(1.18);
}

body#cart .cart__continue-shopping .material-icons {
  color: inherit !important;
}

/* Nuclear: Bootstrap 5 pinta accordion/btn con --bs-primary azul (theme.css) */
.cart-voucher .accordion-button,
.cart-voucher .accordion-button:not(.collapsed),
.cart-voucher .accordion-button:focus,
.cart-voucher .accordion-button:hover,
.cart-voucher .cart-voucher__accordion-button,
.cart-voucher .np-cart-voucher-title,
.js-cart-voucher .accordion-button,
.js-cart-voucher .np-cart-voucher-title {
  color: #111 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.cart-voucher .btn,
.cart-voucher .btn-primary,
.cart-voucher button[type="submit"],
.cart-voucher .np-cart-voucher-apply,
.js-cart-voucher .btn-primary,
.js-cart-voucher .np-cart-voucher-apply {
  --bs-btn-bg: #111 !important;
  --bs-btn-border-color: #111 !important;
  --bs-btn-color: #fff !important;
  --bs-btn-hover-bg: #2a2a2a !important;
  --bs-btn-hover-border-color: #2a2a2a !important;
  --bs-btn-hover-color: #fff !important;
  background: #111 !important;
  background-color: #111 !important;
  background-image: none !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

@media (min-width: 992px) {
  .checkout-grid__aside-wrapper {
    margin-top: 14px;
  }
}

/* ========== Auth: my-account + checkout paso 1 ========== */

body#authentication,
body#checkout,
#checkout-personal-information-step,
.login,
#login-form {
  --bs-primary: #111;
  --bs-primary-rgb: 17, 17, 17;
  --bs-link-color: #111;
  --bs-link-hover-color: #2a2a2a;
}

/* Ojo contraseña + Continuar / Sign in */
body#authentication .password-field .btn.btn-primary,
body#authentication #login-form .btn.btn-primary,
body#authentication .login .btn.btn-primary,
body#checkout .password-field .btn.btn-primary,
body#checkout #login-form .btn.btn-primary,
body#checkout .np-checkout-login-actions__submit,
#checkout-login-form .password-field .btn.btn-primary,
#checkout-login-form .btn.btn-primary {
  background-color: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

body#authentication .password-field .btn.btn-primary:hover,
body#authentication .password-field .btn.btn-primary:focus,
body#authentication #login-form .btn.btn-primary:hover,
body#authentication #login-form .btn.btn-primary:focus,
body#authentication .login .btn.btn-primary:hover,
body#authentication .login .btn.btn-primary:focus,
body#checkout .password-field .btn.btn-primary:hover,
body#checkout .password-field .btn.btn-primary:focus,
body#checkout #login-form .btn.btn-primary:hover,
body#checkout #login-form .btn.btn-primary:focus,
body#checkout .np-checkout-login-actions__submit:hover,
body#checkout .np-checkout-login-actions__submit:focus,
#checkout-login-form .password-field .btn.btn-primary:hover,
#checkout-login-form .password-field .btn.btn-primary:focus,
#checkout-login-form .btn.btn-primary:hover,
#checkout-login-form .btn.btn-primary:focus {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
  filter: brightness(1.18);
}

/* Cree su cuenta (outline) */
body#authentication .login .btn-outline-primary,
body#authentication .np-login-register-prompt .btn-outline-primary,
body#checkout .np-checkout-go-register,
body#checkout .btn-outline-primary.np-checkout-go-register,
#checkout-login-form .np-checkout-go-register {
  color: #111 !important;
  border-color: #111 !important;
  background-color: #fff !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

body#authentication .login .btn-outline-primary:hover,
body#authentication .login .btn-outline-primary:focus,
body#authentication .np-login-register-prompt .btn-outline-primary:hover,
body#authentication .np-login-register-prompt .btn-outline-primary:focus,
body#checkout .np-checkout-go-register:hover,
body#checkout .np-checkout-go-register:focus,
body#checkout .btn-outline-primary.np-checkout-go-register:hover,
body#checkout .btn-outline-primary.np-checkout-go-register:focus,
#checkout-login-form .np-checkout-go-register:hover,
#checkout-login-form .np-checkout-go-register:focus {
  color: #fff !important;
  background-color: #111 !important;
  border-color: #111 !important;
  filter: brightness(1.05);
}

/* Links “¿Olvidó…?” y tabs underline */
body#authentication .btn-link,
body#authentication a.btn-basic,
body#checkout .np-checkout-login-actions__forgot,
body#checkout #personal-information-tabs .nav-link {
  color: #111 !important;
}

body#authentication .btn-link:hover,
body#checkout .np-checkout-login-actions__forgot:hover {
  color: #2a2a2a !important;
}

body#checkout #personal-information-tabs .nav-link.active {
  color: #000 !important;
  border-bottom-color: #000 !important;
  font-weight: 600;
}

/* ========== Checkout: CTAs y acciones de direcciones/envío/pago ========== */

/*
 * Cada paso es <section class="step" id="checkout-…-step"> y sus acciones
 * viven en .buttons-wrapper. Se sobrescriben las variables del componente
 * .btn para conservar los estados de Bootstrap (hover, active, disabled).
 */

/* Primarios: Continuar, Guardar, Continuar al pago y Realizar pedido. */
body#checkout .step .buttons-wrapper .btn-primary,
body#checkout .js-address-form .btn-primary {
  --bs-btn-bg: #111;
  --bs-btn-border-color: #111;
  --bs-btn-hover-bg: #2a2a2a;
  --bs-btn-hover-border-color: #2a2a2a;
  --bs-btn-active-bg: #2a2a2a;
  --bs-btn-active-border-color: #2a2a2a;
  --bs-btn-disabled-bg: #111;
  --bs-btn-disabled-border-color: #111;
  --bs-btn-focus-shadow-rgb: 17, 17, 17;
}

/* Secundarios: volver, añadir dirección y cancelar. */
body#checkout .step .buttons-wrapper .btn-outline-primary,
body#checkout .js-address-form .btn-outline-primary,
body#checkout #checkout-addresses-step .btn-outline-primary,
body#checkout .js-cancel-address {
  --bs-btn-color: #111;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #111;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #111;
  --bs-btn-hover-border-color: #111;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #111;
  --bs-btn-active-border-color: #111;
  --bs-btn-disabled-color: #111;
  --bs-btn-disabled-border-color: #111;
  --bs-btn-focus-shadow-rgb: 17, 17, 17;
}

/* Cancelar llega como .btn-basic (sin borde ni padding): se alinea con
   "Volver" y se marca con la X de cancelación. */
body#checkout .js-cancel-address {
  --bs-btn-padding-x: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

body#checkout .js-cancel-address::before {
  font-family: "Material Icons", sans-serif;
  content: "\e5cd";
  font-size: 1.125rem;
  line-height: 1;
}

/* El aviso pickup no debe estirar el botón "Volver a Direcciones". */
body#checkout #checkout-delivery-step .buttons-wrapper .js-back {
  align-self: center;
  height: auto !important;
  min-height: 2.5rem;
}

/* Aplicar cupón: clase sin BEM __/-- para sobrevivir al CCC de PS */
button.np-cart-voucher-apply {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #111 !important;
  --bs-btn-border-color: #111 !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: #2a2a2a !important;
  --bs-btn-hover-border-color: #2a2a2a !important;
  background: #111 !important;
  background-color: #111 !important;
  background-image: none !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
button.np-cart-voucher-apply:hover,
button.np-cart-voucher-apply:focus {
  background: #2a2a2a !important;
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #fff !important;
}
/* Webpay voucher: módulo fija width:400px — override en themes para mobile */
.tbk_voucher {
  width: 100% !important;
  max-width: 400px;
  box-sizing: border-box;
}

/* Continuar debajo de Finalizar: SOLO mobile (desktop = solo el de la izquierda) */
body#cart a.cart__continue-shopping.np-cart-continue--after-checkout,
body#cart .cart__continue-shopping.np-cart-continue--after-checkout {
  display: none !important;
}

@media (max-width: 991.98px) {
  body#cart .cart-grid__products-details > .cart__continue-shopping,
  body#cart .cart-grid__products-details > a.cart__continue-shopping.btn {
    display: none !important;
  }
  body#cart a.cart__continue-shopping.np-cart-continue--after-checkout,
  body#cart .cart__continue-shopping.np-cart-continue--after-checkout {
    display: inline-flex !important;
    width: 100%;
    margin-top: 0.75rem;
  }
}