/*
 * Estilos básicos para el plugin WooCommerce Descuentos.
 * Puedes personalizarlos mediante tu tema o añadiendo CSS adicional.
 */

.woo-discounts-wrapper {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.woo-discounts-logo img,
.woo-discounts-image img {
  max-height: 40px;
}

/*
 * Estilos específicos para la visualización en la ficha de producto,
 * el checkout y el carrito.
 */
.woo-discounts-single {
  padding: 1rem;
  border: 1px solid #f9d6c2;
  background-color: #fffaf4;
  border-radius: 8px;
}

/*
 * Contenedor flexible que agrupa el logo y los descuentos en la ficha,
 * checkout y carrito. De esta forma los elementos se alinean en fila
 * en pantallas grandes y se apilan en columna en móviles.
 */
.woo-discounts-single .woo-discounts-group {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* En dispositivos con pantallas pequeñas, los elementos se disponen en columna */
@media (max-width: 768px) {
  .woo-discounts-single .woo-discounts-group {
    flex-direction: column;
  }
}

.woo-discounts-single .woo-discounts-logo {
  display: block;
  margin-bottom: 0.75rem;
}

.woo-discounts-single .woo-discounts-item {
  background-color: #fff6f0;
  border: 1px solid #fbe0d0;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  position: relative;
}

.woo-discounts-single .woo-discounts-percent,
.woo-discounts-single .woo-discounts-price {
  font-size: 1rem;
  font-weight: bold;
  color: #c75a2c;
}

.woo-discounts-single .woo-discounts-savings {
  color: #519e72;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.woo-discounts-single .woo-discounts-text {
  display: block;
  margin-top: 0.25rem;
  color: #646464;
  font-size: 0.8rem;
}

.woo-discounts-single .woo-discounts-disclaimer {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: #fff9f5;
  border: 1px solid #f9d6c2;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #666;
}

/*
 * Estilos para la visualización en los listados de productos (loop).
 * Se utilizan selectores más específicos para no afectar a las vistas single.
 */
.woo-discounts-loop {
  padding: 0.25rem 0;
}

.woo-discounts-loop .woo-discounts-item {
  margin-bottom: 0.25rem;
}

.woo-discounts-loop .woo-discounts-percent,
.woo-discounts-loop .woo-discounts-price {
  font-weight: bold;
  color: #c00000;
}

.woo-discounts-loop .woo-discounts-savings {
  color: #008000;
  font-size: 0.85em;
}

.woo-discounts-loop .woo-discounts-text {
  color: #666;
  font-size: 0.85em;
}

.woo-discounts-loop .woo-discounts-disclaimer {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #f9f9f9;
  border: 1px solid #f0f0f0;
  font-size: 0.75em;
  color: #666;
}