/*!
	* Extra CSS - Resume v5.0.8 
	* Copyright 2013-2019 Start Bootstrap
*/
:root {
  /* Paleta de Colores */
  --color-primary: #b2d3c2;
  /* Menta */
  --color-accent: #1a3a5a;
  /* Azul Navy Medio */
  --color-bg: #0b2135;
  /* Azul Navy Oscuro (Fondo) */

  /* Fuentes */
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* Definimos la animación */
@keyframes girar-vinilo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* breadcrumb de woocommerce*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  .woocommerce-breadcrumb {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
  font-weight: 900;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  .woocommerce-breadcrumb
  a {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
  font-weight: 400;
}

/* La aplicamos a tu clase */
.ufo-vinyl {
  animation: girar-vinilo 4s linear infinite;
}

/* Estilo para el filtro de woocommerce */
.wp-block-buttons > .wp-block-button.has-custom-width .wp-block-button__link {
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: 900;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px !important;
  transition: all 0.3s;
  border-radius: 0;
  font-size: 10px;
  width: 100% !important;
}

.wp-block-buttons
  > .wp-block-button.has-custom-width
  .wp-block-button__link:hover {
  background-color: white;
  color: var(--color-bg);
  box-shadow: 0 0 15px rgba(178, 211, 194, 0.4);
}

/* Estilo para el procucto en la tienda */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  text-align: center;
}

.woocommerce ul.products li.product a img {
  border: 2px solid var(--color-primary);
}

h2.woocommerce-loop-product__title {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-align: center;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  ul.products
  li.product
  .price {
  --bs-text-opacity: 1;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-align: center;
}

.woocommerce ul.products li.product .button {
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: 900;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px !important;
  transition: all 0.3s;
  border-radius: 0;
  font-size: 10px;
}

.woocommerce a.added_to_cart {
  color: var(--color-primary);
}

/*estilo para la imagen de la categoria*/
.img-category {
  height: 150px !important;
  margin-right: 20px;
}

/* Estilo para el boton de carrito en la navbar*/
.disqueriavt-cart-contents {
  position: relative;
  display: inline-block;
}

.disqueriavt-cart-count {
  position: static !important;
}

.cart-contents-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: #e74c3c;
  /* Color rojo alerta */
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}

.single-page-categorias a {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
  font-weight: bold;
}

/* 1. El contenedor que flota */
.woocommerce-notices-wrapper {
  position: fixed;
  bottom: 30px;
  /* Distancia desde abajo */
  left: 50%;
  transform: translateX(-50%);
  /* Centrado perfecto */
  z-index: 99999;
  /* Por encima de todo */
  width: auto;
  max-width: 90%;
  /* Para que no toque los bordes en celular */
  pointer-events: none;
  /* Para que puedas hacer click "a través" de lo invisible */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. El diseño de la "Píldora" (Estilo MercadoLibre) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background-color: #333333 !important;
  /* Gris oscuro/Negro */
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 0 !important;
  /* Bordes redondos tipo píldora */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px !important;
  font-size: 14px;
  font-family: sans-serif;
  /* O tu font-mono si preferís */
  border: none !important;
  /* Sin bordes de colores */
  list-style: none !important;
  /* Sin bullets */
  pointer-events: auto;
  /* Para poder cerrar si tuviera X */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  /* Empiezan invisibles para la animación de entrada */
  animation: slideUpFade 0.5s forwards;
  /* Animación de entrada */
  position: relative !important;
  /* Necesario para posicionar la X */
  padding-right: 45px !important;
  /* Dejamos hueco a la derecha */
}

/* 3. Ocultar el botón "Ver Carrito" para que sea más sutil */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  display: none !important;
}

/* 4. Colores de iconos (Opcional: Si WooCommerce mete iconos SVG) */
.woocommerce-message::before,
.woocommerce-info::before {
  color: #2ecc71;
  /* Verde éxito */
  position: static;
}

.woocommerce-error::before {
  color: #e74c3c;
  /* Rojo error */
  position: static;
}

/* El botón de Cerrar (X) */
.dvt-close-toast {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  /* Centrado vertical exacto */
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.dvt-close-toast:hover {
  color: #fff;
}

/* Animación de entrada */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*PLUGIN YITH WHISLIST*/
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button:is(
    button
  ) {
  padding: 6px;
  margin-left: 0;
  margin-top: 11px;
}

.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--icon-button:is(
    button
  )
  svg.yith-wcwl-add-to-wishlist-button-icon {
  color: var(--color-primary) !important;
}

.yith-wcwl-add-to-wishlist__feedback.yith-wcwl-add-to-wishlist__feedback-on-product-image {
  background-color: #333333 !important;
  /* Gris oscuro/Negro */
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 0 !important;
  /* Bordes redondos tipo píldora */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px !important;
  font-size: 14px;
  font-family: sans-serif;
  /* O tu font-mono si preferís */
  border: none !important;
  /* Sin bordes de colores */
  list-style: none !important;
  /* Sin bullets */
  pointer-events: auto;
  /* Para poder cerrar si tuviera X */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  /* Empiezan invisibles para la animación de entrada */
  animation: slideUpFade 0.5s forwards;
  /* Animación de entrada */
  position: relative !important;
  /* Necesario para posicionar la X */
  padding-right: 45px !important;
  /* Dejamos hueco a la derecha */
}

.yith-wcwl-add-to-wishlist__feedback {
  background-color: #333333 !important;
  /* Gris oscuro/Negro */
  color: #fff !important;
  border-radius: 0 !important;
  /* Bordes redondos tipo píldora */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  font-family: sans-serif;
  /* O tu font-mono si preferís */
  border: none !important;
  /* Sin bordes de colores */
  list-style: none !important;
  /* Sin bullets */
  pointer-events: auto;
  /* Para poder cerrar si tuviera X */
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.card-slider {
  width: 350px;
}

@media (max-width: 576px) {
  .card-slider {
    width: 100% !important;
  }
}

/* Animación CSS pura */
@keyframes spin-record {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#svg-vinilo .spinning {
  transform-origin: 150px 150px;
  animation: spin-record 1.5s linear infinite;
}

#svg-vinilo .grooves {
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 60 20;
  stroke-linecap: round;
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
#svg-vinilo-usado .spinning {
	/* El origen de la rotación es el centro de tu viewBox (150, 150) */
	transform-origin: 150px 150px;
	animation: spin 4s linear infinite;
}
/* Estilos para tus surcos (para asegurar que se vean correctamente) */
#svg-vinilo-usado .grooves {
	fill: none;
	stroke: rgba(0, 0, 0, 0.4);
	stroke-width: 1.5px;
}	


#svg-cd .spinning {
  transform-origin: 150px 150px;
  /* Un CD suele girar más rápido que un vinilo, bajamos a 1.2s */
  animation: spin-record 1.2s linear infinite;
}
/* Estilo Grooves adaptado a "Pistas de datos" */
#svg-cd .data-tracks {
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.5;
  /* Más finos que los del vinilo */
  stroke-dasharray: 40 40;
  /* Patrón más tecnológico/digital */
  stroke-linecap: round;
  opacity: 0.5;
}

@keyframes spin-record-dvd {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#svg-dvd .spinning {
  transform-origin: 150px 150px;
  animation: spin-record-dvd 1.2s linear infinite;
}

/* Pistas del DVD: Más densas y finas que el CD */
#svg-dvd .dvd-tracks {
  stroke: var(--color-bg);
  fill: none;
  stroke-width: 0.8;
  /* Muy finas para simular mayor densidad de datos */
  stroke-dasharray: 20 10;
  opacity: 0.3;
}

/* Animación de giro estándar */
@keyframes spin-reel {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#svg-cassette .reel-left {
  transform-origin: 95px 100px;
  /* Centro del carrete izquierdo */
  animation: spin-reel 2s linear infinite;
}

#svg-cassette .reel-right {
  transform-origin: 205px 100px;
  /* Centro del carrete derecho */
  animation: spin-reel 2s linear infinite;
}

/* Coordenadas ajustadas a la posición de la ventana del Walkman */
#svg-walkman .reel-left {
  transform-origin: 110px 110px;
  animation: spin-reel 2.5s linear infinite;
}

#svg-walkman .reel-right {
  transform-origin: 190px 110px;
  animation: spin-reel 2.5s linear infinite;
}

/* 1. Animación del Spray (Partículas saliendo) */
@keyframes spray-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  20% {
    opacity: 1;
    /* Aparecen de golpe al salir */
  }

  100% {
    opacity: 0;
    /* Se desvanecen en el aire */
    transform: translate(60px, 15px) scale(1.5);
    /* Se alejan y dispersan */
  }
}

/* 2. Animación del Gatillo (Apretándose) */
@keyframes trigger-pull {
  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-15deg);
  }

  /* Se aprieta rápido */
  40% {
    transform: rotate(0deg);
  }

  /* Vuelve lento */
}

/* 3. Animación de "Sacudida" de la botella (Opcional, sutil recoil) */
@keyframes recoil {
  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-2deg);
  }

  30% {
    transform: rotate(0deg);
  }
}

/* Clases para aplicar las animaciones */
#svg-spray .mist-particle {
  opacity: 0;
  /* Invisibles por defecto */
  /* Animación de 2s, infinita */
}

/* Variamos un poco los tiempos para que parezca un spray natural */
#svg-spray .p1 {
  animation: spray-burst 2s ease-out infinite;
  animation-delay: 0.1s;
}

#svg-spray .p2 {
  animation: spray-burst 2s ease-out infinite;
  animation-delay: 0.15s;
}

#svg-spray .p3 {
  animation: spray-burst 2s ease-out infinite;
  animation-delay: 0.05s;
}

#svg-spray .p4 {
  animation: spray-burst 2s ease-out infinite;
  animation-delay: 0.2s;
}

#svg-spray .trigger-arm {
  transform-origin: 160px 95px;
  /* Punto de pivote del gatillo */
  animation: trigger-pull 2s ease-in-out infinite;
}

#svg-spray .bottle-group {
  transform-origin: 150px 300px;
  /* Pivote en la base */
  animation: recoil 2s ease-in-out infinite;
}

#order_sucursal_mainca select#listas,
#order_sucursal_mainca select#pv_centro_ca_estandar {
  width: 100%;
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary) !important;
  padding: 0.5em;
  padding-left: 15px !important;
  color: #fff;
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
  padding: 0;
}

.woocommerce-checkout
  #payment
  ul.payment_methods
  li
  .payment_box.payment_method_bacs,
.woocommerce-checkout
  #payment
  ul.payment_methods
  li
  .payment_box.payment_method_cod {
  padding: 15px;
  border: 2px solid var(--color-primary) !important;
}

#billing_state_field .select2.select2-container.select2-container--default,
#billing_country_field .select2.select2-container.select2-container--default,
#shipping_country_field .select2.select2-container.select2-container--default,
#shipping_state_field .select2.select2-container.select2-container--default {
  z-index: 1 !important;
}

/*********** PAGINACION WOOCOMMERCE **********/
.woocommerce-pagination {
  padding-bottom: 1rem;
}

.woocommerce nav.woocommerce-pagination ul {
  background-color: transparent;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a {
  background: transparent;
  color: var(--color-primary) !important;
  width: 32px;
  height: 32px;
  font-weight: 900;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-bg) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--color-primary) !important;
  color: var(--color-bg);
  width: 32px;
  height: 32px;
  font-weight: 900;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  background: transparent;
  color: var(--color-primary);
  width: 32px;
  border: none !important;
}

/* =========================================
   FIX FIBOSEARCH DARK MODE
   Evita la pantalla blanca en móviles
   ========================================= */

/* 1. Fondo negro para el overlay móvil y la caja de resultados */
.dgwt-wcas-overlay-mobile,
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
  background-color: #050505 !important;
  /* Tu color de fondo oscuro */
  color: #fff !important;
}

/* 2. Asegurar que el input de búsqueda en el overlay sea visible */
.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
  background-color: #050505 !important;
}

/* 3. Color de los textos (títulos de productos) */
.dgwt-wcas-st-title,
.dgwt-wcas-st {
  color: #fff !important;
}

/* 4. Precios */
.dgwt-wcas-st-price {
  color: var(--bs-primary-custom, #00ff9d) !important;
  /* Tu color verde */
  font-weight: bold;
}

/* 5. Títulos de secciones (ej: "Productos", "Categorías") */
.dgwt-wcas-suggestion-headline {
  color: #888 !important;
  /* Gris para diferenciar */
  border-bottom: 1px solid #333 !important;
}

/* 6. Botón de cerrar (la X en móviles) */
.dgwt-wcas-close-btn-mobile {
  filter: invert(1);
  /* Invierte el color negro a blanco */
}

/* 7. Hover en los resultados */
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
  background-color: #1a1a1a !important;
}

.product-container .precio_transferencia {
  color: #2e7d32 !important;
  font-size: 1.5rem !important;
  display: flex;
  align-items: center !important;
}

.product-container .precio_transferencia .amount {
  color: #2e7d32 !important;
  font-size: 1.8rem !important;
}

.product-container .porcentaje_transferencia {
  color: #2e7d32 !important;
  font-size: 1.3rem !important;
  display: flex;
  align-items: center !important;
}

/*estilo para formulaio*/

.wpforms-container input.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium {
  max-width: 100% !important;
}

#wpforms-1486 {
  margin: 0 !important;
}

.wpforms-field-label {
  color: var(--color-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem !important;
  margin-bottom: 5px;
  display: block;
}

input[type="email"],
textarea[name="wpforms[fields][3]"],
.wpforms-field-name-first,
.wpforms-field-name-last {
  background-color: rgba(11, 33, 53, 0.9) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
  color: white !important;
  font-family: var(--font-mono) !important;
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
}

button.wpforms-submit {
  background-color: var(--color-primary) !important;
  color: #0b2135 !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important;
  padding: 1.5rem !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
  margin-top: 2rem !important;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
  height: auto !important;
}

button.wpforms-submit:hover {
  background-color: white !important;
  color: #0b2135 !important;
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px white;
}