/* ============================================================
   Vita 365 — account detail screens, v2 skin (PR-5)

   Covers /mypage/profile, /billing, /bookings and /messages — the four
   screens the 마이 hub links into. They are ~4,100 lines of working
   flows (cancellation windows, Stripe setup intents, a message thread),
   so this is a palette and shape pass only, the same shape the --vh-*
   and --vdw-* bridges took in PR-2 and PR-4. Every rule needs `.v2`.
   ============================================================ */

.v2 .mp-main { background: var(--v2-bg); }
/* The blanket font rule that stood here is gone: mypage.css already
   forces the one family on every non-icon descendant, and this was a
   second copy of it — the copy that, before #581, forgot to exclude
   .ti and drew every icon on these four screens as a striped block. */

/* Page headings — the serif is gone in v2. */
.v2 .mp-main h1 { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -0.03em; }
.v2 .mp-main h2 { font-size: var(--v2-fs-section); font-weight: 700; letter-spacing: -0.02em; }

/* ─── Cards ─────────────────────────────────────────────────── */
.v2 .mp-card {
  background: var(--v2-surface);
  border: none;
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card);
  color: var(--v2-ink);
}
.v2 .mp-prog-card {
  background: var(--v2-surface);
  border: none;
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card);
}
.v2 .mp-prog-name { color: var(--v2-ink); font-weight: 700; }
.v2 .mp-prog-meta { color: var(--v2-ink-3); }
.v2 .mp-row { border-color: var(--v2-line); }

/* ─── Fields ────────────────────────────────────────────────── */
.v2 .mp-field label, .v2 .mp-toggle-label { color: var(--v2-ink-2); font-weight: 600; }
.v2 .mp-field-hint { color: var(--v2-ink-3); }
.v2 .mp-input {
  background: var(--v2-surface);
  border: 1.5px solid var(--v2-line-2);
  border-radius: var(--v2-r-md);
  color: var(--v2-ink);
  /* Under 16px iOS zooms the page when the field takes focus. */
  font-size: var(--v2-fs-control);
  padding: 12px 14px;
}
.v2 .mp-input:focus { border-color: var(--v2-brand-strong); outline: none; }
.v2 .mp-error { color: var(--v2-bad); }
.v2 .mp-skel { background: var(--v2-surface-2); border-radius: var(--v2-r-md); }

/* ─── Buttons ───────────────────────────────────────────────── */
.v2 .mp-btn, .v2 .mp-prog-cta {
  background: var(--v2-brand-btn); color: #fff; border: none;
  border-radius: var(--v2-r-md);
  font-family: var(--v2-font); font-size: var(--v2-fs-body); font-weight: 700;
  padding: 13px 18px;
}
.v2 .mp-btn.secondary {
  background: var(--v2-surface-2); color: var(--v2-ink);
}
.v2 .mp-btn[disabled] { opacity: .5; }

/* ─── Toggle switches (notification prefs) ──────────────────── */
.v2 .mp-switch .mp-slider { background: var(--v2-line-2); }
.v2 .mp-switch input:checked + .mp-slider { background: var(--v2-brand-btn); }

/* ─── Footer links ──────────────────────────────────────────── */
.v2 .mp-foot-link { color: var(--v2-ink-2); font-family: var(--v2-font); }
.v2 .mp-foot-legal a { color: var(--v2-ink-3); }

/* The delete control is the target of /mypage/profile#delete from the
   hub. It gets a visible ring when focused that way, so the member can
   see what they were sent to — it is the one irreversible control on
   the page and should not be something you arrive at ambiguously. */
.v2 #mp-delete-btn { color: var(--v2-bad); font-weight: 700; }
.v2 #mp-delete-btn:focus { outline: 2.5px solid var(--v2-bad) !important; outline-offset: 3px !important; }

/* ─── Message thread ────────────────────────────────────────── */
.v2 .mp-msg-bubble, .v2 .mp-thread-bubble {
  border-radius: var(--v2-r-lg);
  font-size: var(--v2-fs-sm);
  line-height: var(--v2-lh-loose);
}