.lor-fs-box {
  width: 100%;
  max-width: var(--lor-fs-max-width, 100%);
  background: var(--lor-fs-box-bg, #fff);
  color: var(--lor-fs-text-color, #222);
  border: var(--lor-fs-box-border-width, 1px) solid var(--lor-fs-box-border-color, #ececec);
  border-radius: var(--lor-fs-box-radius, 8px);
  padding: var(--lor-fs-box-padding, 18px);
  display: flex;
  flex-direction: column;
  gap: var(--lor-fs-gap, 10px);
  margin-top: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.lor-fs-shadow {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.lor-fs-align-left {
  margin-left: 0;
  margin-right: auto;
}

.lor-fs-align-center {
  margin-left: auto;
  margin-right: auto;
}

.lor-fs-align-right {
  margin-left: auto;
  margin-right: 0;
}

.lor-fs-text-center {
  text-align: center;
}

.lor-fs-title {
  font-size: var(--lor-fs-title-size, 18px);
  font-weight: var(--lor-fs-title-weight, 700);
  line-height: 1.3;
}

.lor-fs-description {
  font-size: var(--lor-fs-desc-size, 15px);
  line-height: 1.45;
}

.lor-fs-progress {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: var(--lor-fs-bar-height, 16px);
  background: var(--lor-fs-track-color, #f7d6d6);
  border: 1px solid var(--lor-fs-bar-border-color, #3f3f46);
  border-radius: var(--lor-fs-bar-radius, 999px);
  box-sizing: border-box;
}

.lor-fs-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lor-fs-fill-color, #f68d8d);
}

.lor-fs-animate .lor-fs-progress__fill {
  transition: width 0.35s ease;
}

.lor-fs-stripes .lor-fs-progress__fill {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.18) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.18) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
}

.lor-fs-animate.lor-fs-stripes .lor-fs-progress__fill {
  animation: lor-fs-stripes-move 1.1s linear infinite;
}

@keyframes lor-fs-stripes-move {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}

@media (max-width: 767px) {
  .lor-fs-box {
    max-width: 100%;
  }
}


.lor-fs-coupon-active .lor-fs-title,
.lor-fs-coupon-active .lor-fs-description {
  text-align: center;
}

.lor-fs-coupon-pending .lor-fs-title,
.lor-fs-coupon-pending .lor-fs-description {
  text-align: center;
}

/* Estados especiales de cupón: evitan que los montos se partan y mejoran la lectura
   dentro del side cart, carrito y checkout. */
.lor-fs-price-nowrap,
.lor-fs-price-nowrap .woocommerce-Price-amount,
.lor-fs-price-nowrap .woocommerce-Price-currencySymbol {
  display: inline-block !important;
  white-space: nowrap !important;
}

.lor-fs-coupon-active,
.lor-fs-coupon-pending {
  gap: 7px !important;
}

.lor-fs-coupon-active .lor-fs-title,
.lor-fs-coupon-pending .lor-fs-title {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lor-fs-coupon-active .lor-fs-title .lor-fs-price-nowrap,
.lor-fs-coupon-pending .lor-fs-title .lor-fs-price-nowrap {
  margin-left: 2px !important;
  margin-right: 2px !important;
  font-weight: 800 !important;
}

.lor-fs-coupon-active .lor-fs-description,
.lor-fs-coupon-pending .lor-fs-description {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .lor-fs-coupon-active .lor-fs-title,
  .lor-fs-coupon-pending .lor-fs-title {
    font-size: 13.5px !important;
    line-height: 1.28 !important;
  }

  .lor-fs-coupon-active .lor-fs-description,
  .lor-fs-coupon-pending .lor-fs-description {
    font-size: 12.3px !important;
    line-height: 1.35 !important;
  }
}

/* Estado transitorio: cuando hay un cupón pendiente de ruleta, ocultamos
   brevemente la barra normal hasta que WooCommerce confirme el estado real. */
.lor-fs-box.lor-fs-is-resolving {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Preflight: si WP Optin Wheel ya dejó un cupón en sessionStorage,
   ocultamos la barra normal desde el primer pintado posible. Luego el JS
   consulta a WooCommerce y muestra cupón pendiente/activo o vuelve a normal. */
html.lor-fs-has-pending-wheel-coupon .lor-fs-box:not(.lor-fs-coupon-active):not(.lor-fs-coupon-pending) {
  opacity: 0 !important;
  pointer-events: none !important;
}