.sv-sequence-root {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.sv-step-shell,
.sv-client-history,
.sv-step-footer {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.sv-step-shell {
  padding: 14px;
}

.sv-step-footer {
  padding: 12px 14px;
}

.sv-step-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.sv-step-meta {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sv-step-current {
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.sv-step-back-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.sv-step-back-list:active {
  transform: scale(.98);
}

.sv-step-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sv-step-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.sv-step-control:disabled {
  color: #94a3b8;
  background: #f8fafc;
}

.sv-step-control:not(:disabled):active {
  transform: scale(.98);
}

.sv-step-next {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.sv-step-next:not(:disabled) {
  color: #fff;
}

.sv-step-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sv-step-tab {
  min-height: 62px;
  padding: 8px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  text-align: center;
  text-transform: uppercase;
}

.sv-step-tab span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}

.sv-step-tab strong {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.sv-step-tab.is-active {
  border: 2px solid #2563eb;
  color: #1d4ed8;
  background: #eff6ff;
}

.sv-step-tab.is-muted {
  background: #f8fafc;
}

.sv-client-history {
  padding: 16px;
}

.sv-client-history h3 {
  margin: 0 0 10px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sv-client-history p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sv-step-hidden {
  display: none !important;
}

.sv-payment-back-hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .sv-step-shell {
    padding: 14px;
    border-radius: 0;
  }

  .sv-step-footer {
    padding: 10px 14px;
    border-radius: 0;
  }

  .sv-step-top {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .sv-step-back-list {
    justify-content: flex-start;
    min-height: 32px;
    padding: 0;
  }

  .sv-step-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sv-step-control {
    min-height: 45px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  .sv-step-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-color: #8b8b8b transparent !important;
    scrollbar-width: auto !important;
  }

  .sv-step-tabs::-webkit-scrollbar {
    height: 12px;
  }

  .sv-step-tabs::-webkit-scrollbar-track {
    background: transparent;
  }

  .sv-step-tabs::-webkit-scrollbar-thumb {
    background: #8b8b8b;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }

  .sv-step-tab {
    flex: 0 0 172px !important;
    min-height: 70px !important;
    scroll-snap-align: start !important;
  }
}