/* public/css/frontend.css */

.sistema-cuotas-si-container .scs-title,
.sistema-cuotas-si-container .scs-variable-prompt {
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.8em !important;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.sistema-cuotas-si-container .scs-variable-prompt {
    font-style: italic;
    color: #666;
}

.scs-single-installment {
  font-size: 0.9em;
  color: #555;
  padding: 3px 8px;
  margin-top: 5px;
  display: inline-block;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.scs-single-installment .woocommerce-Price-amount.amount,
.scs-single-installment .woocommerce-Price-currencySymbol {
  color: #005a87;
  font-weight: bold;
}

/* ================================================================
 ESTILOS REFORZADOS PARA LA LISTA DE CUOTAS CON LOGOS
================================================================
*/

/* Ocultamos las viñetas por defecto de la lista */
.sistema-cuotas-si-container ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.sistema-cuotas-si-container li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Usamos Flexbox para forzar la alineación y eliminar la viñeta */
.sistema-cuotas-si-container li.scs-item-with-logo,
.sistema-cuotas-si-container li.scs-item-has-fallback-icon { /* También para items con fallback */
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  list-style: none !important;
  list-style-type: none !important;
  background-image: none !important;
}

/* Regla extra para eliminar viñetas generadas por pseudo-elementos en temas avanzados */
.sistema-cuotas-si-container li.scs-item-with-logo::before,
.sistema-cuotas-si-container li.scs-item-has-fallback-icon::before {
    content: none !important;
    display: none !important;
}

.sistema-cuotas-si-container li:last-child {
  border-bottom: none;
}

/* --- ESTILOS CORREGIDOS PARA EL LOGO DE IMAGEN --- */
.scs-logo-wrapper img {
  max-height: 30px !important; 
  width: auto !important;       
  object-fit: contain;          
  display: block;
}

/* --- ESTILOS PARA DASHICONS DE FALLBACK --- */
.scs-logo-wrapper .scs-fallback-icon {
    font-size: 28px !important; /* Tamaño del icono para que sea similar a la altura de 30px */
    line-height: 1 !important;  /* Asegura que no haya espacio extra */
    color: #555 !important;     /* Color del icono */
    width: 30px !important;     /* Ancho fijo para alinear */
    height: 30px !important;    /* Altura fija para alinear */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.scs-text-wrapper {
  flex: 1;
}

.scs-text-wrapper strong {
    margin-right: 1px;
}