/* =====================================================================
 *  Todo se pinta con variables CSS.
 *  Si un color NO está configurado en los ajustes, la variable no existe
 *  y se usa el valor de reserva -> hereda del tema. Así el aviso funciona
 *  igual de bien en un tema claro que en uno oscuro.
 * ===================================================================== */

.wc-free-shipping-notice{
  margin:8px 0;
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
  color:var(--wcfst-texto, inherit);
  background:var(--wcfst-fondo, transparent);
  border:1px solid var(--wcfst-borde, rgba(128,128,128,.28));
  border-radius:8px;
}

.wc-fst-bar{
  position:relative;
  height:var(--wcfst-barra-alto, 8px);
  border-radius:var(--wcfst-barra-radio, 8px);
  background:var(--wcfst-barra-fondo, rgba(128,128,128,.22));
  overflow:hidden;
  margin-top:8px;
}

.wc-fst-bar .wc-fst-bar-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:var(--wcfst-barra-relleno, #16a34a);
  transition:width .35s ease;
}

/* Estado conseguido: solo cambia lo que se haya configurado.
   Por defecto se limita a teñir la barra y el borde, NUNCA el fondo,
   para no dejar el texto ilegible sobre un tema oscuro. */
.wc-free-shipping-notice.wc-fst-logrado{
  color:var(--wcfst-ok-texto, var(--wcfst-texto, inherit));
  background:var(--wcfst-ok-fondo, var(--wcfst-fondo, transparent));
  border-color:var(--wcfst-ok-borde, #16a34a);
}
.wc-free-shipping-notice.wc-fst-logrado .wc-fst-bar-fill{
  background:var(--wcfst-ok-barra-relleno, var(--wcfst-barra-relleno, #16a34a));
}

/* Barra fija en móvil (opcional desde los ajustes) */
.wc-fst-sticky{ display:none; }
@media (max-width:768px){
  .wc-fst-sticky{
    display:block;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9990;
    background:var(--wcfst-fondo, #fff);
    box-shadow:0 -2px 14px rgba(0,0,0,.18);
    /* Hueco a la derecha para que no la tape el botón flotante de chat */
    padding:8px var(--wcfst-hueco-chat, 76px) calc(8px + env(safe-area-inset-bottom)) 12px;
  }
  .wc-fst-sticky .wc-free-shipping-notice{
    margin:0;
    border:0;
    padding:2px 0;
    background:transparent;
  }
}

@media (prefers-reduced-motion:reduce){
  .wc-fst-bar .wc-fst-bar-fill{ transition:none; }
}