/* ─── Shared styles for all vendor auth screens ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { font-family: 'Manrope', sans-serif; height: 100%; overflow: hidden; }

.page {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image:
    linear-gradient(128.429deg, rgba(255,255,255,0) 2.0464%, rgb(244,246,250) 59.199%),
    linear-gradient(90deg, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  overflow: hidden;
}

/* ─── Glow circles ─── */
.glow-circle { position: absolute; width: 337px; height: 337px; pointer-events: none; }
.glow-bl { left: -80px; top: 756px; }
.glow-tr { left: 152px; top: -27px; }
.glow-circle img {
  position: absolute;
  top: -650px; left: -650px;
  width: 1637px; height: 1637px;
  pointer-events: none;
}

/* ─── Logo ─── */
.logo {
  position: absolute;
  left: calc(50% - 610px);
  top: 68px;
  width: 178px; height: 65px;
  overflow: hidden; pointer-events: none;
}
.logo img {
  position: absolute;
  height: 153.85%; left: 0.06%; top: -26.15%; width: 99.88%;
  max-width: none;
}

/* ─── Left content ─── */
.left-content {
  position: absolute;
  left: 110px; top: 158px;
  width: 489px;
  display: flex; flex-direction: column; gap: 32px;
}
.heading-wrap { display: flex; flex-direction: column; height: 112.7px; padding-top: 8.7px; }
.hero-heading {
  font-size: 38px; font-weight: 800; color: #2c2f31;
  letter-spacing: -1.2px; line-height: normal; width: 489px;
}
.hero-heading .accent { color: #ec8402; }
.hero-desc p { font-size: 18px; font-weight: 400; color: #595c5e; line-height: 29.25px; margin: 0; }

/* ─── Illustration layers ─── */
.ill { position: absolute; pointer-events: none; }
.ill img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

/* ─── Single-image illustration ─── */
.page-illustration { position: absolute; pointer-events: none; display: block; }

/* ─── Form panel ─── */
.form-panel {
  position: absolute;
  left: calc(50% + 355px);
  top: calc(50% + 15px);
  transform: translate(-50%, -50%);
  width: 526px;
  display: flex; flex-direction: column; gap: 30px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.form-panel::-webkit-scrollbar { display: none; }

/* ─── Panel title ─── */
.panel-title { display: flex; flex-direction: column; gap: 4px; }
.panel-title h1 { font-size: 30px; font-weight: 600; color: #191c1d; line-height: 40px; white-space: nowrap; }
.panel-title p  { font-size: 16px; font-weight: 500; color: rgba(72,95,132,0.8); line-height: 26px; width: 307px; }

/* ─── Stepper (shared across multi-step forms) ─── */
.stepper { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.stepper-row { display: flex; align-items: center; }
.stepper-back { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 9999px; text-decoration: none; }
.stepper-back img { width: 8px; height: 15px; display: block; }
.stepper-label { font-size: 14px; font-weight: 700; color: #ec8402; letter-spacing: 0.7px; text-transform: uppercase; line-height: 20px; }
.progress-bar { display: flex; gap: 8px; height: 6px; width: 100%; }
.progress-seg { flex: 1; min-width: 1px; border-radius: 9999px; }
.progress-seg.filled { background-image: linear-gradient(122.752deg, rgb(236,132,2) 0%, rgb(252,161,81) 100%); }
.progress-seg.empty  { background: rgb(223,227,230); }

/* ─── Alert ─── */
.alert { padding: 11px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.alert-error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.alert-success { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.alert-info    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* ─── Shared field styles ─── */
.field-label { font-size: 18px; font-weight: 500; color: rgba(25,28,29,0.8); line-height: 28px; }
.field-input {
  width: 100%; height: 52px;
  background: #fff; border: 1px solid #c6b8b8; border-radius: 10px;
  padding: 6px 18px; overflow: hidden;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 400;
  color: #191c1d; letter-spacing: 0.35px; outline: none;
  transition: border-color 0.2s;
}
.field-input::placeholder { color: rgba(72,95,132,0.7); }
.field-input:focus { border-color: #ec8402; }

/* ─── Field-level validation errors ─── */
.field-input.has-error,
.phone-wrap.has-error,
.select-wrap.has-error select,
.field-textarea.has-error,
.store-textarea.has-error { border-color: #DC2626; }
.field-error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #DC2626;
}

/* ─── Password visibility toggle ─── */
.pwd-wrap { position: relative; width: 100%; }
.pwd-wrap .field-input { padding-right: 44px; }
.pwd-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(72,95,132,0.6);
}
.pwd-toggle:hover { color: rgba(72,95,132,1); }
.pwd-toggle svg { display: block; pointer-events: none; }
.pwd-toggle .eye-off { display: none; }
.pwd-toggle.visible .eye-on { display: none; }
.pwd-toggle.visible .eye-off { display: block; }

/* ─── Submit / continue button ─── */
.btn-submit, .btn-continue {
  position: relative;
  width: 100%; height: 52px;
  border: none; border-radius: 10px; cursor: pointer; overflow: hidden;
  background-image: linear-gradient(108.075deg, rgb(244,228,55) 7.8784%, rgb(236,132,2) 54.112%);
  transition: opacity 0.2s;
}
.btn-submit:hover, .btn-continue:hover  { opacity: 0.93; }
.btn-submit:active, .btn-continue:active { opacity: 0.85; }
.btn-label {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; line-height: 40px;
}
.btn-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
}
.btn-arr img { width: 30px; height: 30px; display: block; transform: rotate(90deg); }
.btn-arr-1 { right: 18px; }
.btn-arr-2 { right: 29px; }
.btn-arr-3 { right: 40px; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  html, body { height: auto; overflow: auto; }
  .page { height: auto; min-height: 100vh; overflow: visible; }
  .logo, .left-content, .ill, .glow-circle, .page-illustration { display: none; }
  .form-panel {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; max-width: 526px; margin: 0 auto; padding: 40px 24px 60px;
    max-height: none; overflow-y: visible;
  }
}