/* ============================================================
   Echando Raíces — modal "Producto añadido correctamente a su
   carrito de compra" (#blockcart-modal). Añadido 2026-10-18.
   Aparece en ficha de producto y en listados de categoría al
   añadir algo al carrito — es un componente nativo de PrestaShop
   compartido entre páginas, por eso va en su propio archivo (no en
   custom-product-page.css ni custom-category-page.css), cargado en
   todas las páginas con su propio <link> en head.tpl.

   Victoria pidió colores y tipografía corporativos: la tipografía
   (Manrope) ya era la correcta en todo el modal — el problema era
   solo de color, el tema nativo lo pinta con su blanco/cian/negro
   de fábrica en vez del marrón oscuro/violeta/crema de marca, igual
   que el resto de componentes nativos ya corregidos en el checkout
   y el carrito. Mismas variables que el resto del sitio.
   ============================================================ */
:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}

#blockcart-modal .modal-content {
  background: var(--hr-color-fondo-oscuro) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-card) !important;
  color: var(--hr-color-texto-claro) !important;
}
#blockcart-modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hr-color-borde-oscuro) !important;
}
/* ".modal-body" traía su propio fondo blanco de fábrica, aparte del
   de ".modal-content" — sin esto, tapaba visualmente el fondo
   oscuro de arriba aunque el color ya estuviera bien puesto. */
#blockcart-modal .modal-body {
  background: transparent !important;
}
#blockcart-modal .modal-title {
  color: var(--hr-color-texto-claro) !important;
}
/* El icono de confirmación (✓) ya venía en verde de forma explícita
   en el tema, no en el cian/negro de fábrica — se deja tal cual:
   es el color universal de "éxito", no choca con la marca. Si
   Victoria prefiere el violeta de acento en vez de verde, es un
   cambio de una línea aquí. */
#blockcart-modal .close {
  color: var(--hr-color-texto-claro) !important;
  text-shadow: none !important;
  opacity: 0.6;
}
#blockcart-modal .close:hover {
  opacity: 1;
}
#blockcart-modal .divide-right {
  border-right: 1px solid var(--hr-color-borde-oscuro);
}
#blockcart-modal .product-name {
  color: var(--hr-color-acento-claro) !important;
}
#blockcart-modal .product-price,
#blockcart-modal .product-quantity,
#blockcart-modal .product-quantity strong {
  color: var(--hr-color-texto-claro) !important;
}
#blockcart-modal .cart-content .cart-products-count {
  color: rgba(230, 218, 204, 0.65) !important;
}
#blockcart-modal .cart-content .label,
#blockcart-modal .cart-content p span:not(.value) {
  color: rgba(230, 218, 204, 0.75) !important;
}
#blockcart-modal .cart-content .value {
  color: var(--hr-color-texto-claro) !important;
}
#blockcart-modal .product-total {
  /* Fondo gris claro de fábrica (resalta la fila del total), igual
     que el de ".modal-body" — fondo oscuro a juego con el resto. */
  background: rgba(230, 218, 204, 0.05) !important;
  border-radius: var(--hr-radius-accion);
  padding: 8px !important;
}
#blockcart-modal .product-total .value {
  color: var(--hr-color-texto-claro) !important;
  font-size: 16px;
}

/* Botones: mismo par violeta-claro/texto-oscuro ya usado en el
   "Finalizar pedido" del carrito (custom-cart-page.css) para el
   primario. El secundario ("Continuar comprando") no tenía todavía
   ningún tratamiento de color en ningún sitio del site — se le da
   un estilo discreto de borde, a juego con el resto de tarjetas
   oscuras del sitio (mismo --hr-color-borde-oscuro). */
#blockcart-modal .btn-primary {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  border-radius: var(--hr-radius-accion) !important;
  font-weight: 600 !important;
}
#blockcart-modal .btn-primary:hover {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}
#blockcart-modal .btn-secondary {
  background: rgba(230, 218, 204, 0.08) !important;
  color: var(--hr-color-texto-claro) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
  font-weight: 600 !important;
}
#blockcart-modal .btn-secondary:hover {
  background: rgba(230, 218, 204, 0.15) !important;
  border-color: var(--hr-color-acento-claro) !important;
}

/* El fondo oscuro detrás del modal (Bootstrap ".modal-backdrop") ya
   es negro semitransparente de fábrica — no hace falta tocarlo. */