/* ==================================================
   CUSTOMER · Payment result  (F3 redesign)
   Standalone post-payment page covering the payment_result.php states:
   complete (success), awaiting (pending), failed/cancelled. A preview
   state-switcher flips between the three cards. Success carries the
   order recap + "what happens next" + CTAs to the order page & chat.
   Reuses tokens from f3-home.css + f3-order.css. Scaled x1.2 (+20%).
   ================================================== */

.result-page { background: var(--bg-soft); }
.result-wrap { max-width: 844.8px; margin: 0 auto; padding: 52.8px 31.68px 84.48px; display: flex; flex-direction: column; gap: 26.4px; align-items: center; }

/* preview state switcher */
.state-switch { display: inline-flex; align-items: center; gap: 14.52px; padding: 10.56px 10.56px 10.56px 18.48px; background: #fff; border: 1.2px solid var(--line); border-radius: 1318.68px; box-shadow: var(--shadow-soft); flex-wrap: wrap; justify-content: center; }
.ss-label { font-family: var(--font-ui); font-size: 11.22px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.ss-tabs { display: inline-flex; gap: 3.96px; padding: 3.96px; background: var(--bg-deep); border-radius: 1318.68px; }
.ss-tabs button { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.04em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); padding: 8.58px 18.48px; border: none; background: transparent; border-radius: 1318.68px; cursor: pointer; transition: color 160ms ease, background 160ms ease, box-shadow 180ms ease; }
.ss-tabs button:hover { color: var(--ink); }
.ss-tabs button.is-active { background: #fff; color: var(--royal); box-shadow: var(--shadow-soft); }
.ss-tabs button.is-active[data-state="success"] { color: var(--status); }
.ss-tabs button.is-active[data-state="failed"] { color: var(--loss); }

/* result card */
.result-card { width: 100%; background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 6.6px); box-shadow: 0 26px 64px -28px rgba(0,0,0,0.22); overflow: hidden; display: none; }
.result-card.is-active { display: block; }

.rc-top { padding: 46.2px 39.6px 33px; text-align: center; position: relative; overflow: hidden; }
.rc-top::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.rc-top.success::before { background: radial-gradient(594px 264px at 50% -30%, var(--status-soft), transparent 70%); }
.rc-top.pending::before { background: radial-gradient(594px 264px at 50% -30%, #fdf0db, transparent 70%); }
.rc-top.failed::before  { background: radial-gradient(594px 264px at 50% -30%, var(--loss-soft), transparent 70%); }
.rc-top > * { position: relative; z-index: 1; }
.rc-badge { width: 92.4px; height: 92.4px; border-radius: 50%; margin: 0 auto 21.12px; display: inline-flex; align-items: center; justify-content: center; }
.rc-badge svg { width: 46.2px; height: 46.2px; }
.rc-badge.success { background: var(--status-soft); color: var(--status); box-shadow: 0 0 0 8.4px color-mix(in srgb, var(--status) 12%, transparent); }
.rc-badge.pending { background: #fdf0db; color: #c9851a; box-shadow: 0 0 0 8.4px rgba(201,133,26,0.1); }
.rc-badge.failed  { background: var(--loss-soft); color: var(--loss); box-shadow: 0 0 0 8.4px color-mix(in srgb, var(--loss) 12%, transparent); }
.rc-eyebrow { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.rc-title { font-family: var(--font-display); font-weight: 700; font-size: 38.28px; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; margin: 10.56px 0 13.2px; }
.rc-msg { font-size: 17.82px; line-height: 1.5; color: var(--ink-soft); max-width: 528px; margin: 0 auto; }

.rc-body { padding: 9.24px 39.6px 39.6px; }

/* recap (success) */
.rc-recap { background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); padding: 23.76px 26.4px; margin-bottom: 26.4px; }
.rc-journey { display: flex; align-items: center; justify-content: center; gap: 18.48px; padding-bottom: 19.8px; margin-bottom: 13.2px; border-bottom: 1.2px solid var(--line-soft); }
.rcj-rank { display: flex; flex-direction: column; align-items: center; gap: 5.28px; }
.rcj-rank img { width: 58.08px; height: 58.08px; object-fit: contain; }
.rcj-t { font-family: var(--font-ui); font-size: 10.56px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.rcj-n { font-family: var(--font-display); font-weight: 700; font-size: 18.48px; color: var(--ink); }
.rcj-rank.target .rcj-n { color: var(--royal); }
.rcj-arrow { color: var(--ink-muted); }
.rcj-arrow svg { width: 23.76px; height: 23.76px; }
.rc-li { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; padding: 7.92px 0; }
.rc-li .k { font-size: 15.18px; color: var(--ink-soft); }
.rc-li .v { font-size: 15.18px; font-weight: 600; color: var(--ink); }
.rc-li.total { border-top: 1.2px solid var(--line-soft); margin-top: 6.6px; padding-top: 14.52px; }
.rc-li.total .k { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); }
.rc-li.total .v { font-family: var(--font-display); font-size: 26.4px; font-weight: 700; color: var(--ink); }

/* what happens next (success) */
.rc-steps-cap { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 15.84px; }
.rc-steps { display: flex; flex-direction: column; gap: 17.16px; margin-bottom: 29.04px; }
.rc-step { display: flex; gap: 17.16px; align-items: flex-start; }
.rc-step-num { width: 38.28px; height: 38.28px; border-radius: 50%; flex-shrink: 0; background: var(--royal-tint); color: var(--royal); font-family: var(--font-display); font-weight: 700; font-size: 17.16px; display: inline-flex; align-items: center; justify-content: center; }
.rc-step-text b { font-size: 17.16px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 1.32px; }
.rc-step-text span { font-size: 15.18px; line-height: 1.45; color: var(--ink-soft); }

/* pending / failed extras */
.rc-note { display: flex; align-items: center; gap: 14.52px; padding: 18.48px 21.12px; border-radius: calc(var(--r) + 2.64px); margin-bottom: 26.4px; }
.rc-note.pending { background: #fdf0db; border: 1.2px solid #f4d9a8; }
.rc-note.failed { background: var(--loss-soft); border: 1.2px solid color-mix(in srgb, var(--loss) 28%, var(--line)); }
.rc-note svg { width: 23.76px; height: 23.76px; flex-shrink: 0; }
.rc-note.pending svg { color: #c9851a; }
.rc-note.failed svg { color: var(--loss); }
.rc-note p { font-size: 15.84px; color: var(--ink-soft); }
.rc-note b { color: var(--ink); }

/* CTAs */
.rc-ctas { display: flex; gap: 14.52px; }
.rc-btn { flex: 1; height: 60.72px; border-radius: var(--r); cursor: pointer; text-decoration: none; border: 1.2px solid transparent; font-family: var(--font-ui); font-size: 14.52px; font-weight: 700; letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10.56px; transition: transform 160ms var(--ease-out), box-shadow 180ms ease, background 160ms ease; }
.rc-btn svg { width: 18.7px; height: 18.7px; }
.rc-btn.primary { background: linear-gradient(135deg, var(--royal), var(--royal-deep)); color: #fff; }
.rc-btn.primary:hover { transform: translateY(-1.65px); box-shadow: 0 14.4px 30px -12px color-mix(in srgb, var(--royal) 60%, transparent); }
.rc-btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.rc-btn.ghost:hover { border-color: var(--royal-soft); background: var(--bg-soft); color: var(--royal); }

.rc-support { text-align: center; margin-top: 21.12px; font-size: 14.52px; color: var(--ink-muted); }
.rc-support a { color: var(--royal); font-weight: 600; text-decoration: none; }
.rc-support a:hover { text-decoration: underline; }

/* success: the preserved order/account sub-templates render full-width below the card */
.rc-account { width: 100%; }

@media (max-width: 600px) {
  .result-wrap { padding: 35.2px 18.48px 63.36px; }
  .rc-top { padding: 36.96px 26.4px 26.4px; }
  .rc-title { font-size: 31.68px; }
  .rc-body { padding: 9.24px 23.76px 31.68px; }
  .rc-ctas { flex-direction: column; }
  .state-switch { padding: 13.2px; }
}

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.rcj-n { font-family: var(--font-body); }