/* =============================================================
   Sneak Peek – embedded form (v1.6)
   All rules scoped to .sp-signup--embedded to avoid conflicts
   ============================================================= */

/* ---- Wrapper ---- */
.sp-signup--embedded,
.sp-signup--embedded .container,
.sp-signup--embedded .sp-signup__content {
  background: none !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.sp-signup--embedded {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Step layout: side-by-side indicator + body ---- */
.sp-signup--embedded .sp-signup__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.sp-signup--embedded .sp-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- Step indicator column (badge + connector line) ---- */
.sp-signup--embedded .sp-step__indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 36px !important;
}

/* Numbered circle badge */
.sp-signup--embedded .sp-step__badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  /* Default/inactive: grey outline */
  background-color: #F2F4F7 !important;
  color: #98A2B3 !important;
  border: 2px solid #D0D5DD !important;
}

/* Active step badge: orange fill */
.sp-signup--embedded .sp-step--active .sp-step__badge {
  background-color: #E94F38 !important;
  color: #ffffff !important;
  border-color: #E94F38 !important;
}

/* Completed step badge: white fill with grey border */
.sp-signup--embedded .sp-step--complete .sp-step__badge {
  background-color: #ffffff !important;
  color: #98A2B3 !important;
  border-color: #D0D5DD !important;
}

/* Vertical connector line between step 1 and step 2 */
.sp-signup--embedded .sp-step__connector {
  width: 2px !important;
  flex: 1 !important;
  min-height: 24px !important;
  background-color: #E4E7EC !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  border-radius: 1px !important;
}

/* ---- Step body column ---- */
.sp-signup--embedded .sp-step__body {
  flex: 1 !important;
  padding-top: 6px !important;
  padding-bottom: 24px !important;
  min-width: 0 !important;
}

.sp-signup--embedded .sp-step--2 .sp-step__body {
  padding-bottom: 0 !important;
}

/* Step heading */
.sp-signup--embedded .sp-step__heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1D2939 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.3 !important;
  transition: opacity 0.15s ease !important;
}

/* ---- Remove ALL background/border/shadow from the form section ---- */
.sp-signup--embedded .sp-signup__form,
.sp-signup--embedded .sp-signup__form > * {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sp-signup--embedded .sp-signup__form {
  padding: 0 !important;
}

/* ---- Toggle button container ---- */
.sp-signup--embedded .sp-signup__toggle {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Base toggle button ---- */
.sp-signup--embedded .sp-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 26px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 2px solid #E94F38 !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
  box-shadow: none !important;
  outline: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 0 !important;
  white-space: nowrap !important;
}

/* NEUTRAL: both unselected */
.sp-signup--embedded .sp-toggle-btn--neutral {
  background-color: #ffffff !important;
  color: #475467 !important;
  border-color: #D0D5DD !important;
}
.sp-signup--embedded .sp-toggle-btn--neutral:hover,
.sp-signup--embedded .sp-toggle-btn--neutral:focus {
  background-color: #F9FAFB !important;
  border-color: #E94F38 !important;
  color: #E94F38 !important;
  text-decoration: none !important;
}

/* ACTIVE: solid orange */
.sp-signup--embedded .sp-toggle-btn--active {
  background-color: #E94F38 !important;
  color: #ffffff !important;
}
.sp-signup--embedded .sp-toggle-btn--active:hover,
.sp-signup--embedded .sp-toggle-btn--active:focus,
.sp-signup--embedded .sp-toggle-btn--active:visited {
  background-color: #d94030 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* INACTIVE: white with orange border/text */
.sp-signup--embedded .sp-toggle-btn--inactive {
  background-color: #ffffff !important;
  color: #E94F38 !important;
}
.sp-signup--embedded .sp-toggle-btn--inactive:hover,
.sp-signup--embedded .sp-toggle-btn--inactive:focus,
.sp-signup--embedded .sp-toggle-btn--inactive:visited {
  background-color: #fff4f3 !important;
  color: #E94F38 !important;
  text-decoration: none !important;
}

/* ---- Form inputs ---- */
.sp-signup--embedded .sp-signup-form .field-group {
  background: none !important;
}

/* ---- Submit button ---- */
.sp-signup--embedded .sp-submit-btn {
  display: block !important;
  width: 100% !important;
  background-color: #E94F38 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background-color 0.18s ease !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 0 !important;
}
.sp-signup--embedded .sp-submit-btn:hover {
  background-color: #d94030 !important;
  color: #ffffff !important;
}

/* ---- Help text ---- */
.sp-signup--embedded .sp-help-text {
  font-size: 13px !important;
  color: #667085 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  background: none !important;
}
.sp-signup--embedded .sp-help-text a {
  font-weight: 700 !important;
  color: #1D2939 !important;
  text-decoration: none !important;
}
.sp-signup--embedded .sp-help-text a:hover {
  text-decoration: underline !important;
}

/* ---- LOCKED Step 2: greyed out until visitor picks brand/retailer ---- */
.sp-signup--embedded .sp-signup__form--locked {
  opacity: 0.4 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: opacity 0.25s ease !important;
}
.sp-signup--embedded .sp-signup__form:not(.sp-signup__form--locked) {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.25s ease !important;
}

/* ---- DROPDOWN: fixed positioning to escape Elementor overflow:hidden ---- */
.sp-signup--embedded .field-group__results.sp-dropdown--fixed {
  position: fixed !important;
  z-index: 99999 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #D0D5DD !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* ---- ERROR STATE: loading overlay when API data fetch fails ---- */
.loading-error .sp-loading-overlay__rocket--crashed,
.sp-loading-overlay__rocket--crashed {
  transform: rotate(45deg) translateY(20px) !important;
  opacity: 0.35 !important;
  filter: grayscale(60%) !important;
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease !important;
}
.sp-loading-overlay__header--error {
  color: #F9FAFB !important;
  font-size: 22px !important;
  margin-top: 12px !important;
}
.sp-loading-overlay__text--error {
  color: rgba(249,250,251,0.8) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 420px !important;
  text-align: center !important;
}
.sp-loading-overlay__retry-btn {
  display: inline-block !important;
  margin-top: 24px !important;
  padding: 13px 36px !important;
  background-color: #E94F38 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.sp-loading-overlay__retry-btn:hover {
  background-color: #d94030 !important;
  color: #ffffff !important;
}