/* Delete-account flow — restrained and harmonious.
 *
 * Palette is intentionally narrow:
 *   - cyan brand (--brand) as the only primary accent,
 *   - warm amber (--warn) for the warning card so the page
 *     doesn't compete red-vs-cyan,
 *   - red (--danger) reserved EXCLUSIVELY for the final
 *     destructive button, where it belongs.
 *
 * Component sizes are "medium": neither cramped nor bloated.
 * Inputs ~46 px tall, OTP boxes 48×58, buttons standard `btn`
 * size. Everything reads with clear breathing room.
 */

:root {
  --warn:       #e6a658;
  --warn-soft:  rgba(230, 166, 88, 0.09);
  --warn-edge:  rgba(230, 166, 88, 0.32);
}

.delete-page {
  padding-block: clamp(110px, 13vw, 140px) clamp(40px, 6vw, 64px);
}

/* ─── Head ─────────────────────────────────────────── */
.delete-page__head {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
  margin-block-end: clamp(28px, 4vw, 40px);
}
.delete-page__head h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin-block: var(--sp-3) var(--sp-3);
  color: var(--text-1);
}
.delete-page__head p {
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 52ch;
  margin-inline: auto;
}

/* ─── Card ─────────────────────────────────────────── */
.delete-flow {
  max-width: 560px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}
.delete-flow::before {
  /* a single thin cyan rule along the top of the card — the
   * only colour cue on the card chrome itself. */
  content: "";
  position: absolute;
  inset-inline: clamp(20px, 4vw, 36px);
  inset-block-start: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 50%, transparent);
  opacity: 0.65;
}

/* ─── Step indicator ───────────────────────────────── */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: var(--sp-5);
  justify-content: center;
}
.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text-3);
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 0.76rem;
  font-weight: 800;
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.step-dot.is-active {
  background: var(--brand);
  border-color: transparent;
  color: #061018;
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.step-dot.is-done {
  background: var(--brand-soft);
  border-color: rgba(19, 181, 243, 0.42);
  color: var(--brand);
}
.step-bar { width: 26px; height: 1px; background: var(--line-2); }

/* ─── Warning card ─────────────────────────────────── */
.warning-card {
  margin-block-end: var(--sp-5);
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--warn-soft);
  border: 1px solid var(--warn-edge);
}
.warning-card__title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--warn);
  margin-block-end: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.warning-card__title svg { width: 14px; height: 14px; }
.warning-card__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.warning-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}
.warning-card__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--warn);
  margin-block-start: 9px;
  flex-shrink: 0;
}

/* ─── Step heading inside the card ─────────────────── */
.step-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-1);
  margin-block-end: var(--sp-4);
  letter-spacing: -0.005em;
}

/* ─── Fields ───────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 0.82rem; font-weight: 700; color: var(--text-2); }
.field-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 4px;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.field-row:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-2);
  direction: ltr;
}
.field-input {
  flex: 1;
  padding: 12px 14px;
  font-size: 0.98rem;
  color: var(--text-1);
  background: transparent;
  border: 0; outline: 0;
  font-weight: 600;
  direction: ltr;
}
.field-hint { color: var(--text-3); font-size: 0.82rem; }
.field-error {
  color: var(--danger);
  font-size: 0.84rem;
  min-height: 1.1em;
  font-weight: 600;
}

/* ─── OTP ──────────────────────────────────────────── */
.otp-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block: var(--sp-4) var(--sp-3);
  direction: ltr;
}
.otp-box {
  width: 48px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text-1);
  font-family: var(--font-en);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.otp-box:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: 0;
}

/* ─── Actions ──────────────────────────────────────── */
.step-actions { display: flex; gap: 10px; margin-block-start: var(--sp-5); }
.step-actions .btn { flex: 1; height: 44px; padding: 0 18px; font-size: 0.94rem; }

/* Final destructive button — red is reserved for THIS step only. */
.btn--delete {
  background: linear-gradient(180deg, #f04763 0%, #d93550 100%);
  color: #fffafa;
  border: 0;
  box-shadow: 0 12px 26px -12px rgba(232, 56, 87, 0.45);
}
.btn--delete:hover { filter: brightness(1.04); }

.subtle-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-block-start: var(--sp-4);
  color: var(--text-3);
  font-size: 0.86rem;
}
.subtle-row button {
  font-weight: 700;
  color: var(--brand);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.subtle-row button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-3);
}

.phone-display {
  font-weight: 800;
  color: var(--text-1);
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline-start: 6px;
}

/* ─── Success state ────────────────────────────────── */
.delete-success { text-align: center; padding-block: var(--sp-5); }
.delete-success__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(46, 211, 145, 0.12);
  border: 1px solid rgba(46, 211, 145, 0.35);
  color: var(--success);
  display: inline-grid; place-items: center;
  margin-block-end: var(--sp-3);
}
.delete-success h2 { font-size: 1.25rem; margin-block-end: var(--sp-2); color: var(--text-1); }
.delete-success p { color: var(--text-2); font-size: 0.94rem; margin-block-end: var(--sp-5); max-width: 38ch; margin-inline: auto; }

@media (max-width: 640px) {
  .warning-card__list { grid-template-columns: 1fr; }
  .otp-box { width: 44px; height: 54px; font-size: 1.25rem; }
  .step-actions { flex-direction: column; }
  .step-actions .btn { width: 100%; }
}