/* =====================================================
   GENERIC STEP FLOW (GLOBAL, SAFE)
===================================================== */

/* Header */
.step-header {
  position: sticky;
  top: 0;
  background: rgba(246, 248, 248, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10;
}

/* Back button */
.step-back {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: #0f172a;
}
.step-back:hover {
  background: #e2e8f0;
}

/* Center text */
.step-text {
  color: #64748b;
}

/* Spacer */
.step-spacer {
  width: 40px;
  height: 40px;
}

/* Progress */
.step-bar {
  height: 6px;
  border-radius: 9999px;
  background: #e2e8f0;
}

/* Active bars (FIXED) */
.step-progress--1 .step-bar:nth-child(-n + 1),
.step-progress--2 .step-bar:nth-child(-n + 2),
.step-progress--3 .step-bar:nth-child(-n + 3),
.step-progress--4 .step-bar:nth-child(-n + 4),
.step-progress--5 .step-bar:nth-child(-n + 5),
.step-progress--6 .step-bar:nth-child(-n + 6) {
  background: #13b6ec;
}

/* Footer gradient */
.step-footer {
  position: sticky;
  bottom: 0;
  z-index: 999;
  background: linear-gradient(
    to top,
    #f6f8f8 0%,
    #f6f8f8 55%,
    rgba(246, 248, 248, 0) 100%
  );
}

/* CTA button */
.step-cta {
  height: 56px;
  border-radius: 16px;
  border: 0;
  background: #13b6ec;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(19, 182, 236, 0.25);
}
.step-cta:hover {
  background: rgba(19, 182, 236, 0.9);
}
.step-cta:active {
  transform: scale(0.98);
}

.step-skip {
  height: 40px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: #13b6ec;
  font-weight: 700;
  font-size: 14px;
}

.step-skip:hover {
  background: #e2e8f0;
}

.step-skip:active {
  transform: scale(0.98);
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  border-radius: 12px 0px 0px 12px;
  height: 55px;
}