/* Estilo para el contenedor de búsqueda de productos */
#da-product-search-container {
  transition: all 1s ease-in-out;
  /* Aplica una transición suave en todas las propiedades con una duración de 1 segundo */
}

/* Estilo cuando el contenedor de búsqueda tiene la clase 'floating' */
#da-product-search-container.floating {
  position: fixed;
  /* Fija el contenedor en la pantalla */
  top: 54px;
  /* Alinea el contenedor 54px desde la parte superior */
  left: 0;
  /* Alinea el contenedor a la izquierda */
  width: 100%;
  /* El contenedor ocupa todo el ancho de la pantalla */
  z-index: 1000;
  /* Asegura que el contenedor se muestre por encima de otros elementos */
  background-color: #fff;
  /* Fondo blanco */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Sombra ligera debajo del contenedor */
  padding-left: 10px;
  /* Espaciado izquierdo de 10px */
  padding-right: 10px;
  /* Espaciado derecho de 10px */
  padding-bottom: 5px;
  /* Espaciado inferior de 5px */
}

/* Estilo del placeholder dentro del campo de búsqueda */
#da-product-search::placeholder {
  text-align: center;
  /* Centra el texto dentro del campo de búsqueda */
}

/* Estilo para el campo de búsqueda en sí */
#da-product-search {
  text-align: center;
  /* Centra el texto ingresado */
  border-radius: 5px;
  /* Bordes redondeados de 5px para un estilo más suave */
}

/* Contenedor del botón flotante */
.fab-container {
  display: inline-block;
  /* El contenedor se comporta como un elemento en línea */
  min-width: min-content;
  /* Ancho mínimo necesario para el contenido */
  min-height: min-content;
  /* Altura mínima necesaria para el contenido */
  position: fixed;
  /* Fija el contenedor en la pantalla */
  top: 50%;
  /* Centra el contenedor verticalmente */
  right: 30px;
  /* Alinea el contenedor a la izquierda */
  transform: translateY(-50%);
  /* Ajusta el contenedor para que quede perfectamente centrado verticalmente */
  z-index: 999;
  /* Asegura que el contenedor esté por encima de otros elementos */
  cursor: pointer;
  /* Cambia el cursor a una mano al pasar sobre el contenedor */
}


/* Contenedor flotante para desplazamiento */
.fab-container-scroll {
  display: inline-block;
  /* El contenedor se comporta como un elemento en línea */
  min-width: min-content;
  /* Ancho mínimo necesario para el contenido */
  min-height: min-content;
  /* Altura mínima necesaria para el contenido */
  position: fixed;
  /* Fija el contenedor en la pantalla */
  bottom: 10%;
  /* Coloca el contenedor a 10% desde la parte inferior */
  right: 0;
  /* Alinea el contenedor a la derecha */
  z-index: 999;
  /* Asegura que el contenedor esté por encima de otros elementos */
  cursor: pointer;
  /* Cambia el cursor a una mano al pasar sobre el contenedor */
}

/* Estilo del ícono dentro del botón flotante */
.fab-icon-holder {
  border-radius: 3%;
  /* Bordes redondeados de 3% */
  background: gray;
  /* Fondo gris */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  /* Sombra fuerte para darle profundidad */
  transform: rotate(90deg);
  /* Rota el ícono 270 grados */
  transform-origin: bottom right;
  /* El origen de la rotación está en la esquina inferior derecha */
  position: absolute;
  /* Posición absoluta respecto al contenedor */
  right: 3px;
  /* Alinea el ícono a la derecha */
  top: 100%;
  /* Coloca el ícono justo debajo del contenedor */
  width: auto;
  /* Ancho automático */
  height: auto;
  /* Altura automática */
}

/* Estilo para el ícono flotante cuando se hace scroll */
.fab-icon-holder-scroll {
  text-align: center;
  /* Centra el contenido dentro del ícono */
  border-radius: 8%;
  /* Bordes redondeados de 8% */
  background: rgb(255, 255, 255);
  /* Fondo blanco */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  /* Sombra para darle profundidad */
  position: absolute;
  /* Posición absoluta respecto al contenedor */
  right: 20px;
  /* Coloca el ícono a 20px desde el borde derecho */
  bottom: 40px;
  /* Coloca el ícono a 10% desde la parte inferior */
  width: 40px;
  /* Ancho de 40px */
  height: 40px;
  /* Altura de 40px */
  padding: 7px;
  /* Espaciado interno de 7px */
}

/* Estilo para el contenido dentro del ícono flotante */
.fab-icon-holder i {
  display: flex;
  /* Usa flexbox para alinear el contenido */
  align-items: center;
  /* Centra el contenido verticalmente */
  justify-content: center;
  /* Centra el contenido horizontalmente */
  height: 100%;
  /* Altura completa del contenedor */
  font-size: 25px;
  /* Tamaño de fuente de 25px */
  color: #ffffff;
  /* Color blanco para el ícono */
}

/* Estilo para el botón flotante */
.fab {
  border-radius: 0 0 5px 5px;
  /* Bordes redondeados solo en la parte inferior */
}

/* Estilo para las opciones dentro del botón flotante */
.fab-options {
  text-align: left;
  /* Alinea el texto a la izquierda */
  list-style-type: none;
  /* Elimina los puntos de lista */
  margin: 0;
  /* Elimina el margen */
  position: absolute;
  /* Posición absoluta dentro del contenedor */
  bottom: -30px;
  /* Coloca las opciones 30px debajo del contenedor */
  left: 55px;
  /* Desplaza las opciones 55px desde la izquierda */
  background-color: white;
  /* Fondo blanco */
  padding: 10px;
  /* Espaciado interno de 10px */
  border-radius: 5px;
  /* Bordes redondeados de 5px */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  /* Sombra para darle profundidad */
}

/* Estilo de cada ítem dentro de las opciones del botón flotante */
.fab-options li {
  display: flex;
  /* Usa flexbox para alinear el contenido */
  justify-content: flex-end;
  /* Alinea el contenido a la derecha */
  padding: 0px;
  /* Elimina el padding */
}

/* Estilo para la etiqueta de categorías */
.category-label {
  padding: 10px;
  /* Espaciado interno de 10px */
  padding-bottom: 0px;
  /* Elimina el espaciado inferior */
}

/* Estilo para el contenedor general */
.container {
  padding: 20px;
  /* Espaciado interno de 20px */
}

/* Estilo para el campo de formulario */
.form-control {
  width: 120px;
  /* Ancho fijo de 120px */
}

/* Estilo para elementos con flexbox */
.da-flex-inside {
  display: flex;
  /* Usa flexbox */
  justify-content: space-between;
  /* Distribuye los elementos con espacio entre ellos */
  align-items: center;
  /* Centra los elementos verticalmente */
}

.da-add-cart-btn {
  width: 40px;
  height: 38px;
  line-height: 38px;
  font-size: 20px !important;
  margin-top: 1px;
  transform: scale(0.85);
  transform-origin: 100% 50%;
}

/* Estilo para el botón de agregar al carrito cuando ya ha sido agregado */
.da-add-cart-btn.added::after {
  content: "+";
  /* Agrega un "+" después del contenido */
}

/* Estilo para truncar texto a dos líneas */
.truncate {
  display: -webkit-box;
  /* Usa un contenedor flexible para el texto */
  -webkit-line-clamp: 2;
  /* Limita el texto a dos líneas */
  line-clamp: 2;
  /* Limita el texto a dos líneas */
  -webkit-box-orient: vertical;
  /* Aplica en orientación vertical */
  overflow: hidden;
  /* Oculta el contenido que exceda las dos líneas */
}

/* Estilo para el pop-up */
.woosq-popup {
  border-radius: 5px;
  /* Bordes redondeados de 5px */
}

/* Estilo para el contenedor de categorías */
.dal-cat-container {
  display: flex;
  /* Usa flexbox para organizar los elementos */
  flex-wrap: wrap;
  /* Permite que los elementos se ajusten en varias líneas */
  align-items: center;
  /* Alinea los elementos verticalmente */
  margin-bottom: 2px !important;
  /* Elimina cualquier margen inferior anterior */
  /*border: 1px solid #BFB5B5; /* Comentado para eliminar borde adicional */
  padding: 0 10px;
}

/* Estilo para cada columna dentro del contenedor de categorías */
.dal-cat-column {
  flex: 1;
  /* Cada columna ocupa el mismo espacio */
  box-sizing: border-box;
  /* Asegura que el padding y border se incluyan en el tamaño total */
}

/* Estilo para la columna izquierda */
.dal-cat-left {
  flex: 0 0 auto;
  /* No permite que la columna se expanda */
  text-align: left;
  /* Alinea el texto a la izquierda */
}

/* Estilo para la columna central */
.dal-cat-middle {
  flex: 1 1 auto;
  /* La columna central se adapta al espacio disponible */
  text-align: left;
  /* Alinea el texto a la izquierda */
  font-family: "Poppins";
}

/* Estilo para la columna derecha */
.dal-cat-right {
  flex: 0 0 auto;
  /* No permite que la columna se expanda */
  text-align: right;
  /* Alinea el texto a la derecha */
}

/* Estilo para los enlaces de agregar al carrito cuando están en estado de carga */
a.da-add-to-cart.loading:after {
  font-family: rhicons;
  /* Usa una fuente específica para los íconos */
  display: inline-block;
  /* Muestra el ícono como un bloque en línea */
  content: "\f3f4" !important;
  /* Muestra el ícono de carga */
  animation: fa-spin 1s linear infinite;
  /* Hace que el ícono gire infinitamente */
  margin: 0 3px;
  /* Añade margen de 3px a los lados */
}

/* Estilo para ocultar el mensaje de validación de addons */
#required_addons_validation_message {
  display: none;
  /* Oculta el mensaje de validación */
}

/* Estilo para los addons dentro del wrap */
.wc-pao-addon-wrap [class^="wc-pao-addon-"] {
  display: flex;
  /* Usa flexbox */
  flex-direction: row;
  /* Los elementos dentro del addon se distribuyen en fila */
  margin-bottom: 1px;
  /* Espaciado inferior de 1px */
  column-gap: 5px;
  /* Espaciado entre las columnas */
}

/* Estilo para las etiquetas dentro de los addons */
.wc-pao-addon-wrap label {
  display: flex !important;
  /* Usa flexbox y aplica !important para sobreescribir cualquier estilo anterior */
  column-gap: 5px !important;
  /* Añade espaciado entre las columnas */
}


.rh-flex-columns {
  justify-content: flex-end;
}

/* Estilo para el contenedor de las tarjetas con contenido */
.rh-flex-columns.rh-flex-grow1.rh-flex-nowrap {
  display: flex;
  /* Usa flexbox */
  align-items: center;
  /* Centra todos los elementos horizontalmente */
  justify-content: center;
  /* Centra todos los elementos verticalmente */
  padding: 10px;
  /* Espaciado interno de 10px */
}

.da-card-style {
  background-color: #ffffff;
  /* Fondo blanco */
  border: 1px solid #ddd;
  /* Borde de color gris claro */
  border-radius: 10px;
  /* Bordes redondeados de 10px */
  margin-bottom: 3px;
  /* Espaciado entre tarjetas */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  /* Sombra suave para dar un efecto flotante */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Transición suave en transformaciones y sombras */
}

.da-product-list {
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(243, 243, 243);
}


/*
*  Composite products
*/
.wooco_component_product[data-multiple="yes"] .wooco_component_product_selection_list_item_choose {
  display: none !important;
  /* Escondemos los checkboxes en seleccion multiple */
}

.wooco_component_product_selection_list_item_image {
  display: none !important;
  /* Escondemos las imagenes de productos */
}

/* Estilizamos los quantity inputs */
.wooco_component_product_qty_input {
  margin: 0 !important;
  height: 40px !important;
  background-color: white !important;
}

.wooco-qty-input {
  border: 0.5px solid #ddd;
}

.wooco_alert.wooco-alert {
  background-color: Coral;
}

/* Al ocultar los checkboxes del composite product, 
  tenemos que evitar que los mismos sean desmarcados al clickear sobre el producto en si  */
.wooco_component_product[data-multiple="yes"] .wooco_component_product_selection_list_item.wooco_component_product_selection_item {
  pointer-events: none;
  /* Disable clicking for the main element and all its children */
}

.wooco_component_product_selection_list_item.wooco_component_product_selection_item .wooco-qty-input {
  pointer-events: auto;
  /* Re-enable clicking for the specific child element */
}


/* 
 * Estilo de los componentes en el minicarrito, checkcout, etc 
 */

/* Esto hace que el primer componente se muestre en una nueva linea */
.variation .variation-Components {
  display: inline-block;
  /* Keep the element inline */
}

.variation .variation-Components::after {
  content: "";
  /* Creates a blank content */
  display: block;
  /* Forces a new line */
  height: 0;
  /* Ensures no extra space */
}

/* Reducimos el espacio vertical entre componentes */
.variation-Components li {
  margin: 5px !important;
  /* Remove default margin around the list */
  padding-bottom: 5px !important;
  /* Remove default padding around the list */
}

/* Ocultamos la lupita del tema */
.icon-search-onclick {
  visibility: hidden !important;
  pointer-events: none !important;
}

#dal-store-info-modal .modal-body {
  background-color: rgb(243, 243, 243);
  padding-top: 0;
  padding-bottom: 0;
}

.dal-store-info {
  background-color: white;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.dal-container {
  margin-top: -15px;
}

.single_add_to_cart_button {
  font-size: 14px !important
}

.da-single-add-to-cart .quantity {
  display: inline;
}

.da-single-add-to-cart .input-text.qty.text {
  background-color: blanchedalmond !important;
  margin: 5px;
}

.da-single-add-to-cart .input-text.qty:not(.wooco-qty-input *) {
  height: 37px !important;
  border-radius: 4px !important;
  border: gray 1px solid !important;
  margin-left: 0 !important;
  margin-top: 15px !important;
}

.da-single-add-to-cart .single_add_to_cart_button {
  margin-top: 15px;
  height: 37px !important;
}

.noselect {
  user-select: none;
  /* Safari */
  -webkit-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
}

.thumbnail-radius {
  border-radius: 8px !important;
}

/** We extend this, so we don't get a white space right before the footer */
.rh-outer-wrap .rh-content-wrap {
  min-height: 100vh;
}

.floating-loader {
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  z-index: 10000;
}

.blocked {
  pointer-events: none;
  opacity: 0.6;
}