.sfsp-wrapper {
  border: var(--sfsp-border-width, 1px) solid var(--sfsp-border-color, #e8e8e8);
  border-radius: var(--sfsp-radius, 10px);
  padding: var(--sfsp-padding-y, 12px) var(--sfsp-padding-x, 14px);
  margin: var(--sfsp-margin-y, 10px) 0;
  background: var(--sfsp-bg, #fff);
  box-shadow: var(--sfsp-shadow, 0 2px 6px rgba(0, 0, 0, 0.04));
  max-width: var(--sfsp-max-width, none);
  z-index: 9998;
  text-align: var(--sfsp-align, left);
  position: relative;
}

.sfsp-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

.sfsp-message {
  margin: 0 0 8px;
  font-size: var(--sfsp-message-size, 14px);
  font-weight: var(--sfsp-message-weight, 500);
  color: var(--sfsp-message-color, #1f2a37);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sfsp-icon {
  display: inline-block;
  width: var(--sfsp-icon-size, 16px);
  height: var(--sfsp-icon-size, 16px);
  margin-right: 6px;
}

.sfsp-icon-truck::before { content: "🚚"; }
.sfsp-icon-gift::before { content: "🎁"; }
.sfsp-icon-star::before { content: "⭐"; }

.sfsp-bar {
  width: 100%;
  height: var(--sfsp-bar-height, 10px);
  border-radius: var(--sfsp-track-radius, 999px);
  background: var(--sfsp-track-color, #f1f3f6);
  overflow: hidden;
  position: relative;
}

.sfsp-progress {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sfsp-progress-bg, #ff8c42);
  position: relative;
}

.sfsp-wrapper[style*="--sfsp-show-stripes:1"] .sfsp-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.25) 75%,
    transparent 75%,
    transparent
  );
  background-size: 18px 18px;
}

.sfsp-wrapper[data-animation="smooth"] .sfsp-progress {
  transition: width .35s ease;
}

.sfsp-wrapper[data-animation="pulse"] .sfsp-progress {
  transition: width .35s ease;
  animation: sfsp-pulse 1.2s infinite;
}

.sfsp-wrapper.sfsp-updated {
  animation: sfsp-wiggle var(--sfsp-update-wiggle-dur, .45s) ease-out;
}

.sfsp-wrapper.sfsp-updated::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(
    --sfsp-update-flash-bg,
    linear-gradient(
      110deg,
      rgba(var(--sfsp-update-flash-rgb, 37, 185, 215), 0) var(--sfsp-update-flash-low, 28%),
      rgba(var(--sfsp-update-flash-rgb, 37, 185, 215), var(--sfsp-update-flash-opacity, .28)) 50%,
      rgba(var(--sfsp-update-flash-rgb, 37, 185, 215), 0) var(--sfsp-update-flash-high, 72%)
    )
  );
  animation: sfsp-flash var(--sfsp-update-flash-dur, .7s) ease-out;
}

.sfsp-wrapper.sfsp-updated .sfsp-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sfsp-update-glint-width, 48px);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
  animation: sfsp-bar-glint var(--sfsp-update-glint-dur, .65s) ease-out;
}

@keyframes sfsp-pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

@keyframes sfsp-wiggle {
  0% { transform: translateX(0); }
  25% { transform: translateX(calc(-1 * var(--sfsp-update-wiggle-px, 2px))); }
  50% { transform: translateX(var(--sfsp-update-wiggle-px, 2px)); }
  75% { transform: translateX(calc(-0.5 * var(--sfsp-update-wiggle-px, 2px))); }
  100% { transform: translateX(0); }
}

@keyframes sfsp-flash {
  0% { opacity: 0; transform: translateX(-20%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20%); }
}

@keyframes sfsp-bar-glint {
  0% { transform: translateX(-120%); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

.sfsp-upsell {
  margin-top: 8px;
  font-size: var(--sfsp-upsell-size, 13px);
  color: var(--sfsp-upsell-color, #334155);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sfsp-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sfsp-badge-color, #3d4b63);
  background: var(--sfsp-badge-bg, #e9efff);
  border-radius: var(--sfsp-badge-radius, 999px);
}