/**
 * Estilos para el plugin WooCommerce Santander Discounts.
 *
 * Estas reglas CSS proporcionan una base estética similar a la que se observa
 * en la captura de referencia. Puedes ajustarlas a tus necesidades desde tu
 * tema o mediante un fichero de estilos adicional. Cada elemento cuenta
 * con clases específicas para permitir una personalización granular.
 */

/* Contenedor general tanto para el producto individual como para el listado. */
.santander-discount-wrapper {
    margin-top: 0.5rem;
}

/* Estilos en la página de producto individual */
.santander-discount-wrapper.santander-single {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Logotipo en la página de producto */
.santander-discount-wrapper.santander-single .santander-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 0.25rem;
}

/* Elementos de descuento en la página de producto */
.santander-discount-wrapper.santander-single .santander-discount-item {
    font-size: 0.875rem; /* 14px aproximadamente */
    font-weight: 600;
    color: #e2001a; /* Rojo Santander */
}

/* Contenedor de los descuentos en la vista de listado */
.santander-discount-wrapper.santander-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Imagen que acompaña a los descuentos en el listado */
.santander-discount-wrapper.santander-loop .santander-discount-image {
    display: inline-flex;
    align-items: center;
}

/* Elementos individuales en la vista de listado */
.santander-discount-wrapper.santander-loop .santander-discount-item {
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: #e2001a;
    background-color: rgba(226, 0, 26, 0.05);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    line-height: 1.2;
}

/* Texto descriptivo debajo de cada descuento */
.santander-discount-item .santander-text {
    font-size: 0.625rem; /* 10px */
    color: #6b7280; /* gris suave */
    font-weight: 400;
}

/* Párrafo de descargo de responsabilidad en la ficha de producto */
.santander-disclaimer {
    font-size: 0.625rem; /* 10px */
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Ahorro mostrado en cada descuento */
.santander-savings {
    font-size: 0.625rem; /* 10px */
    color: #16a34a; /* verde para destacar el ahorro */
    font-weight: 400;
}

/* Ahorro en línea, al lado del precio */
.santander-savings-inline {
    font-size: 0.75rem; /* ligeramente mayor para alinearse con el precio */
    color: #16a34a;
    font-weight: 500;
    margin-left: 0.25rem;
}

/* Clases específicas para diferenciar los descuentos */
.santander-discount-item.santander-15 {
    /* Si necesitas un estilo distinto para el 15%, ajusta aquí */
}

.santander-discount-item.santander-25 {
    /* Si necesitas un estilo distinto para el 25%, ajusta aquí */
}