/* ============================================================
   V9 checkout review modal. Obsidian card, fade-scale in, the total as the
   hero. Renders into #modal-root via the legacy .modal-backdrop (kept for
   fixed/centered positioning); everything inside is V9. Scoped under .v9-review.
   ============================================================ */

.v9-review-backdrop {
  background: rgba(4, 4, 6, 0.72);
  z-index: 40;
}

.v9-review {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-md);
  background: var(--v9-bg);
  color: var(--v9-text);
  font-family: var(--v9-font-ui);
  overflow: hidden;
}

/* ---- header ---- */
.v9-review-head {
  flex: 0 0 auto;
  display: grid;
  gap: var(--v9-space-1);
  padding: var(--v9-space-4) var(--v9-space-4) var(--v9-space-3);
  border-bottom: 1px solid var(--v9-line);
}
.v9-review-title {
  margin: 0;
  font: var(--v9-weight-display) var(--v9-text-xl)/1.05 var(--v9-font-ui);
  letter-spacing: var(--v9-track-display);
}

/* ---- scrollable body ---- */
.v9-review-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: var(--v9-space-4);
  padding: var(--v9-space-4);
}

/* ---- notice (test mode / addendum) ---- */
.v9-review .payment-capability-note,
.v9-review .stripe-test-mode-warning {
  margin: 0;
  padding: var(--v9-space-2) var(--v9-space-3);
  border: 1px solid color-mix(in srgb, var(--v9-warn) 45%, var(--v9-line));
  border-left: 3px solid var(--v9-warn);
  border-radius: var(--v9-r-sm);
  background: color-mix(in srgb, var(--v9-warn) 6%, var(--v9-surface));
  color: var(--v9-text-mute);
  font-size: var(--v9-text-sm);
}

/* ---- total hero ---- */
.v9-review-hero {
  display: grid;
  gap: var(--v9-space-1);
  justify-items: center;
  padding: var(--v9-space-4) var(--v9-space-3);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-md);
  background: var(--v9-surface);
  text-align: center;
}
.v9-review-hero-label { color: var(--v9-text-faint); }
.v9-review-hero-amount {
  font: 300 var(--v9-text-display) var(--v9-font-mono);
  letter-spacing: var(--v9-track-display);
  color: var(--v9-accent);
  font-variant-numeric: tabular-nums;
}
/* $0 / "No money changes hands" reads quieter — it's not a charge. */
.v9-review-hero.tone-neutral .v9-review-hero-amount { color: var(--v9-accent); }

/* ---- item sections ---- */
.v9-review-section { display: grid; gap: var(--v9-space-1); }
.v9-review-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v9-space-3);
  padding-bottom: var(--v9-space-1);
  border-bottom: 1px solid var(--v9-line);
}
.v9-review-section-sub { color: var(--v9-text-mute); font-size: var(--v9-text-sm); }
.v9-review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v9-space-3);
  padding: var(--v9-space-2) 0;
  border-bottom: 1px solid var(--v9-line);
}
.v9-review-row:last-child { border-bottom: 0; }
.v9-review-row-main { min-width: 0; display: grid; gap: 1px; }
.v9-review-row-main > strong {
  font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v9-review-row-meta { font-size: var(--v9-text-xs); color: var(--v9-text-faint); }
.v9-review-row-value { flex: 0 0 auto; font-size: var(--v9-text-sm); color: var(--v9-text); }

/* ---- totals ---- */
.v9-review-totals {
  display: grid;
  gap: var(--v9-space-1);
  padding-top: var(--v9-space-2);
  border-top: 1px solid var(--v9-line);
}
.v9-review-totals-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--v9-text-sm); color: var(--v9-text-mute);
}
.v9-review-totals-row > strong { color: var(--v9-text); }
.v9-review-totals-row.is-final {
  margin-top: var(--v9-space-1);
  padding-top: var(--v9-space-2);
  border-top: 1px solid var(--v9-line);
  font-size: var(--v9-text-md);
}
.v9-review-totals-row.is-final > span { color: var(--v9-text); font-weight: 600; }
.v9-review-totals-row.is-final > strong { font-size: var(--v9-text-md); }

/* ---- method override + payment-detail note ---- */
.v9-review-method, .v9-review-note { display: grid; gap: var(--v9-space-1); }
.v9-review-note > p { margin: 0; font-size: var(--v9-text-xs); color: var(--v9-text-faint); }

/* ---- footer ---- */
.v9-review-foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--v9-space-2);
  padding: var(--v9-space-3) var(--v9-space-4);
  border-top: 1px solid var(--v9-line);
  background: var(--v9-surface);
}
.v9-review-foot .v9-btn-line { flex: 0 0 auto; }
.v9-review-foot .v9-btn-primary { flex: 1 1 auto; min-height: 2.4rem; font-weight: 600; }

/* ---- phone: full-screen ---- */
@media (max-width: 700px) {
  .v9-review {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}