/* =========================================================
   Finowin – Sign Up · Shared styles (fonts, tokens, components)
   Fully offline: no CDN, all fonts/images are local.
   Values come 1:1 from the Figma variables of the design file.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "IRANSansXFaNum";
  src: url("../fonts/IRANSansXFaNum-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansXFaNum";
  src: url("../fonts/IRANSansXFaNum-Medium.ttf") format("truetype");
  font-weight: 500 700;              /* DemiBold/Bold files are not available → Medium is used */
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-secondary-subtle: #fdfdfd;
  --bg-tertiary: #f5f5f5;
  --bg-disabled: #f5f5f5;
  --bg-disabled-subtle: #fafafa;
  --bg-brand-primary: #f5fbff;
  --bg-overlay: #0a0d12;

  /* foreground / text */
  --fg-disabled: #a4a7ae;
  --fg-disabled-subtle: #d5d7da;
  --text-primary: #181d27;
  --text-secondary: #414651;
  --text-secondary-hover: #252b37;
  --text-tertiary: #535862;
  --text-quaternary: #717680;
  --text-placeholder: #717680;
  --text-placeholder-subtle: #d5d7da;
  --text-disabled: #717680;
  --text-brand: #008ee6;
  --text-error: #d92d20;
  --text-sub: #5c5c5c;

  /* borders */
  --border-primary: #d5d7da;
  --border-secondary: #e9eaeb;
  --border-disabled: #d5d7da;
  --border-disabled-subtle: #e9eaeb;
  --border-brand: #009dff;
  --border-error: #f04438;
  --border-error-subtle: #fda29b;

  /* brand / buttons */
  --brand-fg: #007ecc;               /* tertiary-color fg */
  --btn-primary-bg: #008ee6;
  --btn-primary-bg-hover: #007ecc;
  --btn-primary-fg: #ffffff;
  --btn-secondary-border: #d5d7da;
  --btn-secondary-fg: #414651;
  --btn-secondary-color-border: #8fd4ff;
  --btn-secondary-color-fg: #007ecc;

  /* status */
  --fg-brand: #008ee6;
  --fg-error: #d92d20;
  --fg-success: #079455;
  --fg-warning: #dc6803;
  --fg-success-secondary: #17b26a;
  --warning-50: #fffaeb;
  --warning-200: #fedf89;
  --warning-700: #b54708;
  --success-50: #ecfdf3;
  --success-200: #abefc6;

  /* effects */
  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  --shadow-skeuo-inner: inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
  --shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 3px 3px -1.5px rgba(10, 13, 18, 0.04);

  /* radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* spacing */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-11xl: 160px;

  --container-padding-desktop: 32px;
  --container-padding-mobile: 16px;

  --font: "IRANSansXFaNum", Tahoma, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

img { display: block; }

.ltr { direction: ltr; unicode-bidi: isolate; }
[hidden] { display: none !important; }

/* =========================================================
   Layout A – split screen (steps 1-3)
   ========================================================= */
.auth {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
}

.auth__form-side {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 480px;
  max-width: 640px;
}

.auth__container {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 var(--container-padding-desktop);
}

.auth__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* = right edge in RTL */
  gap: var(--spacing-8xl);
  width: 100%;
  max-width: 360px;
}

.auth__visual {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  overflow: hidden;
}

.auth__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  width: 100%;
}

.auth__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  text-align: right;
}

.auth__title {
  font-weight: 500;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: var(--text-primary);
}

.auth__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}

.auth__subtitle b { font-weight: 700; }

.auth__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl);
  width: 100%;
}

.auth__footer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* =========================================================
   Layout B – wizard with progress side panel (steps 4-6)
   ========================================================= */
.wizard {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
}

/* main column (right in RTL) */
.wizard__main {
  position: relative;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 480px;
  padding: var(--spacing-11xl) 0 var(--spacing-9xl);
  overflow: hidden;
}

.wizard__pattern {
  position: absolute;
  top: -196px;
  left: 50%;
  width: 768px;
  height: 768px;
  transform: translateX(-50%);
  pointer-events: none;
}

.wizard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 var(--container-padding-desktop);
}

.wizard__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl);
  width: 100%;
  max-width: 360px;
}

.wizard__content--440 { max-width: 440px; }
.wizard__content--512 { max-width: 512px; }

.wizard__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  text-align: center;
}

.page-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-tertiary);
}

.page-subtitle b { font-weight: 700; }

/* side panel (left in RTL) */
.wizard__aside {
  flex: 1 1 0;
  max-width: 440px;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.wizard__aside-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* logo on the right edge */
  gap: var(--spacing-8xl);
  width: 100%;
  padding: var(--spacing-6xl) var(--spacing-4xl) 0;
}

.progress {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-right: var(--spacing-4xl);
}

.progress__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
  opacity: 0.6;
}

.progress__step.is-current { opacity: 1; }

.progress__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  align-self: stretch;
  padding-bottom: var(--spacing-xs);
}

.progress__line {
  flex: 1 0 0;
  width: 2px;
  min-height: 1px;
  border-radius: var(--spacing-xxs);
  background: var(--border-secondary);
}

.progress__step:last-child .progress__line { display: none; }

.progress__text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding-bottom: var(--spacing-4xl);
  text-align: right;
}

.progress__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.progress__desc {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-tertiary);
}

/* =========================================================
   Components
   ========================================================= */

/* ---------- Logo placeholder ---------- */
.logotype {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 32px;
  padding: 8px 16px;
  background: var(--fg-disabled-subtle);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ---------- Featured icon (modern) ---------- */
.featured-icon {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs), var(--shadow-skeuo-inner);
  overflow: hidden;
}

.featured-icon > img {
  position: absolute;
  top: 12px;                        /* 13px from the outer edge, as in Figma */
  left: 12px;
  width: 28px;
  height: 28px;
}

.featured-icon--md { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.featured-icon--md > img { top: 10px; left: 10px; width: 24px; height: 24px; }

.featured-icon--sm { width: 40px; height: 40px; border-radius: var(--radius-md); }
.featured-icon--sm > img { top: 8px; left: 8px; width: 20px; height: 20px; }

/* ---------- Form fields ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  width: 100%;
}

.form--24 { gap: var(--spacing-3xl); }

.form-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
}

.form-row--end { align-items: flex-end; }
.form-row > .field { flex: 1 0 0; min-width: 1px; }

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.field__label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.field__hint {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
  text-align: right;
}

.input {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: 9px 13px;                /* 10px 14px in Figma (border drawn inside) → 44px */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);
  transition: border-color .15s, box-shadow .15s;
}

.input--sm { padding: 7px 11px; } /* 8px 12px in Figma → 40px */

.input:focus-within {
  border-color: var(--border-brand);
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05), 0 0 0 4px rgba(0, 157, 255, 0.14);
}

.input__control {
  flex: 1 0 0;
  min-width: 1px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  text-align: right;
  direction: rtl;
  text-overflow: ellipsis;
}

.input__control::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

/* always left-to-right (passwords) */
.input__control--force-ltr { direction: ltr; text-align: left; }

/* filled numeric / latin values sit on the left, like Figma */
.input__control--ltr:not(:placeholder-shown) {
  direction: ltr;
  text-align: left;
}

.input__icon { flex-shrink: 0; width: 16px; height: 16px; }

.input.is-disabled {
  background: var(--bg-disabled-subtle);
  border-color: var(--border-disabled);
}
.input.is-disabled .input__control {
  color: var(--text-disabled);
  direction: ltr;
  text-align: left;
}

/* error state */
.field.has-error .input,
.field.has-error .input-group__text { border-color: var(--border-error-subtle); }
.field.has-error .input:focus-within,
.field.has-error .input-group__text:focus-within { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.14); }
.field.has-error .field__hint { color: var(--text-error); }
.field .input__icon--error { display: none; }
.field.has-error .input__icon--error { display: block; }

/* input with a leading add-on button (left side in RTL) */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);
}

.input-group__text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 7px 11px 7px 12px;          /* 8px 12px in Figma → 40px */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: border-color .15s, box-shadow .15s;
}

.input-group__text:focus-within {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 4px rgba(0, 157, 255, 0.14);
}

.field.has-error .input-group__text { border-left: 1px solid var(--border-error-subtle); padding-left: 11px; }

.input-group__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 9px;
  background: var(--bg-primary);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--btn-secondary-fg);
  white-space: nowrap;
}

.input-group__btn img { width: 20px; height: 20px; }
.input-group__btn--text { padding: 9px 13px; box-shadow: var(--shadow-xs); }

.input-group__btn:disabled {
  border-color: var(--border-disabled-subtle);
  color: var(--fg-disabled);
  cursor: not-allowed;
}


/* ---------- Verification code (OTP) ---------- */
.otp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.otp__boxes {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
  direction: ltr;
}

.otp__box {
  flex: 1 0 0;
  min-width: 1px;
  min-height: 64px;
  padding: 1px 7px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  outline: 0;
  font-weight: 500;
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  color: var(--text-brand);
  caret-color: var(--text-brand);
}

.otp__box::placeholder { color: var(--text-placeholder-subtle); opacity: 1; }

.otp__box:focus,
.otp__box:not(:placeholder-shown) {
  padding: 0 6px;
  border: 2px solid var(--border-brand);
}

.otp.has-error .otp__box {
  padding: 0 6px;
  border: 2px solid var(--border-error);
  color: var(--text-error);
}

.otp__error {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-error);
  text-align: right;
}

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}

.actions--row { flex-direction: row; }
.actions--row > .btn { flex: 1 0 0; min-width: 1px; }

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 9px 15px;                /* md: 10px 16px → 44px */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  transition: background-color .15s;
}

.btn__text { padding: 0 var(--spacing-xxs); }
.btn__icon { width: 20px; height: 20px; flex-shrink: 0; }

.btn--auto { width: auto; }

.btn--lg { padding: 11px 17px; font-weight: 500; } /* 12px 18px → 48px */

.btn--sm {
  gap: var(--spacing-xs);
  padding: 7px 11px;                /* 8px 12px → 36px */
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

/* primary: 2px translucent border over the fill + skeuomorphic inner shadow */
.btn--primary {
  background: var(--btn-primary-bg);
  border: 2px solid rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-xs), var(--shadow-skeuo-inner);
}
.btn--primary.btn--lg { padding: 10px 16px; }
.btn--primary.btn--sm { padding: 6px 10px; }
.btn--primary:not(:disabled):hover { background-color: var(--btn-primary-bg-hover); }

.btn--secondary {
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
  box-shadow: var(--shadow-xs), var(--shadow-skeuo-inner);
}
.btn--secondary:not(:disabled):hover { background-color: var(--bg-secondary); }

.btn--secondary-color {
  border-color: var(--btn-secondary-color-border);
  color: var(--btn-secondary-color-fg);
  box-shadow: var(--shadow-xs), var(--shadow-skeuo-inner);
}
.btn--secondary-color:not(:disabled):hover { background-color: var(--bg-brand-primary); }

.btn:disabled {
  padding: 9px 15px;
  background: var(--bg-disabled);
  border: 1px solid var(--border-disabled-subtle);
  color: var(--fg-disabled);
  box-shadow: var(--shadow-xs);
  cursor: not-allowed;
}
.btn--lg:disabled { padding: 11px 17px; }
.btn--sm:disabled { padding: 7px 11px; }
.btn.btn--done:disabled { background: var(--bg-primary); }

.btn:disabled .btn__icon { opacity: .45; }

.link {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* ---------- Alert / Toast ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 360px;
  max-width: 100%;
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);
}

.alert__content {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: right;
}

.alert__title {
  padding-left: var(--spacing-4xl);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.alert__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}

.alert__desc--xs { font-size: 12px; line-height: 18px; }

/* 20px icon with two concentric outline rings */
.ring-icon {
  --ring: var(--fg-brand);
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
}

.ring-icon::before,
.ring-icon::after {
  content: "";
  position: absolute;
  border: 2px solid var(--ring);
  border-radius: 24px;
}
.ring-icon::before { inset: -20%; opacity: .15; }
.ring-icon::after  { inset: -45%; opacity: .05; }

.ring-icon > img { position: absolute; inset: 0; width: 100%; height: 100%; }

.ring-icon--error { --ring: var(--fg-error); }
.ring-icon--error::before { opacity: .3; }
.ring-icon--error::after  { opacity: .1; }

.ring-icon--success,
.ring-icon--warning,
.ring-icon--error-thin { --ring: var(--fg-success); }
.ring-icon--warning { --ring: var(--fg-warning); }
.ring-icon--error-thin { --ring: var(--fg-error); }
.ring-icon--success::before,
.ring-icon--warning::before,
.ring-icon--error-thin::before { inset: -16.67%; border-width: 1.667px; border-radius: 16.667px; opacity: .3; }
.ring-icon--success::after,
.ring-icon--warning::after,
.ring-icon--error-thin::after  { inset: -37.5%; border-width: 1.667px; border-radius: 16.667px; opacity: .1; }

.toasts {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  width: 360px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}

.toasts .alert {
  width: 100%;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in .2s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  opacity: .7;
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.modal__pattern {
  position: absolute;
  top: -120px;
  width: 336px;
  height: 336px;
  pointer-events: none;
}

.modal__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* icon on the right */
  gap: var(--spacing-xl);
  padding: var(--spacing-3xl) var(--spacing-3xl) 0;
  text-align: right;
}

.modal__title {
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-primary);
}

.modal__desc {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}

.modal__close {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
}
.modal__close:hover { background: var(--bg-secondary); }
.modal__close img { width: 24px; height: 24px; }

.modal__footer {
  display: flex;
  gap: var(--spacing-3xl);
  padding: var(--spacing-xl) var(--spacing-3xl);
  border-top: 1px solid var(--border-primary);
}
.modal__footer .btn { flex: 1 0 0; min-width: 1px; }

body.has-modal { overflow: hidden; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1023px) {
  .auth__visual { display: none; }
  .auth__form-side { min-width: 0; max-width: none; }

  /* wizard: side panel turns into a top bar with horizontal steps */
  .wizard { flex-direction: column; }
  .wizard__main { order: 2; min-width: 0; padding-top: var(--spacing-6xl); }
  .wizard__aside { order: 1; flex: none; max-width: none; }
  .wizard__aside-inner {
    gap: var(--spacing-3xl);
    padding: var(--spacing-3xl) var(--container-padding-desktop);
  }
  .progress { flex-direction: row; padding-right: 0; gap: var(--spacing-lg); }
  .progress__step { flex: 1 0 0; flex-direction: column; align-items: center; gap: var(--spacing-md); }
  .progress__rail { flex-direction: row; align-self: auto; padding: 0; }
  .progress__line { display: none; }
  .progress__text { padding: 0; text-align: center; }
  .progress__title { font-size: 14px; line-height: 20px; }
  .progress__desc { display: none; }
}

@media (max-width: 767px) {
  .auth__container {
    justify-content: flex-start;
    padding: 48px var(--container-padding-mobile);
  }
  .auth__content { gap: 48px; }
  .auth__title { font-size: 30px; line-height: 38px; letter-spacing: 0; }

  .wizard__aside-inner { padding: var(--spacing-xl) var(--container-padding-mobile); }
  .wizard__container { padding: 0 var(--container-padding-mobile); }
  .wizard__main { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-6xl); }
  .page-title { font-size: 24px; line-height: 32px; }
  .progress__title { font-size: 12px; line-height: 18px; }

  .modal__footer { gap: var(--spacing-lg); }
}

@media (max-width: 400px) {
  .form-row { gap: var(--spacing-md); }
  .otp__box { min-height: 56px; font-size: 26px; }
}