/* ==================================================
   VALBOOSTING · ORDER / MEMBERS AREA  (F3 redesign)
   Active-order dashboard — layout 6 (vertical rank journey).
   Inherits tokens, header, footer, .btn base, section heads and
   the .rv reveal from home-page.css (enqueued first). Ported from
   the Claude Design exploration: recoloured to the valboosting red
   palette via inherited tokens, hardcoded EBL-blue/navy rgba()
   swapped below, and scaled x1.2 to match the redesign (+20%).
   ================================================== */
:root {
  --status: #22b358;          /* in-progress green */
  --status-soft: #e4f7ec;
  --progress: 52;             /* 0–100, driven by tweaks */
  --loss: #e64a3a;
  --loss-soft: #fdecea;
}

/* page chrome */
.order-page { background: var(--bg-soft); min-height: 100vh; }

/* Suppress the parent theme's legacy [banner] page-title hero (the dark-blue
   "ORDER" .banner.banner__page printed in the /order/ page content) so the F3
   .order-hero is the only hero — same pattern the boost + result pages use.
   Scoped to body.order-page (added under vb_f3_order_enabled), !important +
   double-class to beat the parent (child CSS loads before parent). */
body.order-page .banner.banner__page,
body.order-page .banner__page,
body.order-page .banner__page + .arrow-page-down,
body.order-page .arrow-page-down { display: none !important; }

/* ==================================================
   ORDER HERO BAND  (dark navy gradient, shared shell)
   ================================================== */
.order-hero {
  position: relative;
  background:
    radial-gradient(1188px 607.2px at 88% -40%, rgba(255, 70, 85, 0.14), transparent 58%),
    radial-gradient(950.4px 554.4px at 4% 130%, rgba(123, 92, 209, 0.30), transparent 60%),
    linear-gradient(120deg, var(--navy-deep) 0%, var(--royal-deep) 60%, var(--royal) 130%);
  color: #fff;
  overflow: hidden;
  border-bottom: 2.4px solid var(--gold);
}
.order-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.32px, transparent 1.32px);
  background-size: 31.68px 31.68px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 75%);
  pointer-events: none;
}
.order-hero-inner {
  position: relative; z-index: 1;
  max-width: 1557.6px; margin: 0 auto;
  padding: 52.8px 31.68px 52.8px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 42.24px; flex-wrap: wrap;
}
.order-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 15.84px;
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700;
  letter-spacing: calc(0.22em * var(--tracking));
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18.48px;
}
.order-hero-eyebrow::after { content: ''; width: 50.16px; height: 2.64px; background: var(--gold); opacity: 0.7; }
.order-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(39.6px, 4vw, 60.72px);
  letter-spacing: -0.02em; line-height: 1.1;
  text-transform: uppercase;
}
.order-title em { font-style: normal; color: var(--gold); }
.order-subtitle {
  margin-top: 23.76px;
  font-family: var(--font-ui);
  font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: inline-flex; align-items: center; gap: 11.88px;
}
.order-subtitle .dot { width: 5.28px; height: 5.28px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* hero meta pills (order id / status / server) */
.order-hero-meta { display: flex; gap: 39.6px; flex-wrap: wrap; }
.ohm {
  display: flex; flex-direction: column; gap: 6.6px;
}
.ohm-label {
  font-family: var(--font-ui);
  font-size: 11.88px; font-weight: 600;
  letter-spacing: calc(0.2em * var(--tracking));
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ohm-value {
  font-family: var(--font-display);
  font-weight: 700; font-size: 25.08px;
  letter-spacing: -0.01em; color: #fff;
  display: inline-flex; align-items: center; gap: 10.56px;
}
.ohm-value.is-status { color: var(--status); text-transform: uppercase; font-size: 22.44px; }
.live-dot {
  width: 10.56px; height: 10.56px; border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 1.8s ease-out infinite; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 65%, transparent); }
  70%  { box-shadow: 0 0 0 8.4px color-mix(in srgb, var(--status) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 0%, transparent); }
}

/* ==================================================
   SHARED ATOMS
   ================================================== */

/* panel shell */
.panel {
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: calc(var(--r) + 2.64px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 15.84px; padding: 21.12px 26.4px;
  border-bottom: 1.2px solid var(--line-soft);
  background: var(--bg-soft);
}
.panel-title {
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 11.88px;
}
.panel-title svg { width: 18.48px; height: 18.48px; color: var(--accent); }
.panel-tag {
  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);
  display: inline-flex; align-items: center; gap: 9.24px;
}
.panel-tag .live-dot { width: 9.24px; height: 9.24px; }

/* progress ring */
.prog-ring { position: relative; width: 221.76px; height: 221.76px; flex-shrink: 0; }
.prog-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prog-ring .ring-track { fill: none; stroke: var(--bg-deep); stroke-width: 9; }
.prog-ring .ring-fill {
  fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  filter: drop-shadow(0 0 7.92px color-mix(in srgb, var(--gold) 55%, transparent));
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.prog-ring .ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.64px;
}
.prog-ring .ring-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 60.72px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.prog-ring .ring-sub {
  font-family: var(--font-ui);
  font-size: 11.88px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}

/* result chip */
.result-chip {
  font-family: var(--font-ui);
  font-size: 13.2px; font-weight: 700;
  letter-spacing: calc(0.12em * var(--tracking));
  text-transform: uppercase;
  padding: 5.28px 13.2px; border-radius: 3.96px;
  display: inline-flex; align-items: center; justify-content: center;
}
.result-chip.win { color: var(--status); background: var(--status-soft); }
.result-chip.loss { color: var(--loss); background: var(--loss-soft); }

/* champion mini-badge */
.champ-badge {
  width: 39.6px; height: 39.6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; flex-shrink: 0;
  background: linear-gradient(140deg, var(--royal) 0%, var(--royal-deep) 100%);
}

/* win/loss streak dots */
.streak { display: inline-flex; gap: 6.6px; }
.streak span {
  width: 29.04px; height: 29.04px; border-radius: 3.96px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; color: #fff;
}
.streak span.w { background: var(--status); }
.streak span.l { background: var(--loss); }

/* commendations */
.commend-box { display: flex; flex-direction: column; gap: 14.52px; }
.commend-box-cap {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
}
.commends { display: flex; gap: 13.2px; flex-wrap: wrap; }
.commend {
  display: inline-flex; align-items: center; gap: 11.88px;
  padding: 10.56px 18.48px 10.56px 11.88px;
  background: #fff; border: 1.2px solid var(--line); border-radius: 1318.68px;
  box-shadow: var(--shadow-soft); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.commend:hover { transform: translateY(-2.64px); border-color: var(--royal-soft); box-shadow: var(--shadow-pop); }
.commend.is-given { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--royal-tint); }
.commend-ico {
  width: 36.96px; height: 36.96px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 220ms var(--ease-out);
}
.commend-ico svg { width: 19.8px; height: 19.8px; }
.commend.is-given .commend-ico { animation: commend-pop 360ms var(--ease-out); }
@keyframes commend-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28) rotate(-8deg); } 100% { transform: scale(1); } }
.commend-ico.tone-orange { background: color-mix(in srgb, var(--orange) 16%, #fff); color: var(--orange-deep); }
.commend-ico.tone-gold   { background: color-mix(in srgb, var(--gold) 30%, #fff); color: var(--gold-deep); }
.commend-ico.tone-royal  { background: var(--royal-tint); color: var(--royal); }
.commend-count {
  font-family: var(--font-display); font-weight: 700; font-size: 19.8px;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.commend-label {
  font-family: var(--font-ui); font-size: 13.86px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft);
}

/* ==================================================
   ORDER DETAILS & TIP MODULE  (shared)
   ================================================== */
.detail-panel-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36.96px; padding: 26.4px 29.04px 29.04px;
}
@media (max-width: 768px) { .detail-panel-body { grid-template-columns: 1fr; gap: 29.04px; } }
/* min-width:0 lets the 1fr grid track shrink below its content's min-content
   on narrow viewports — without it the column blows out and the panel
   (overflow:hidden) clips the extras/tip content on mobile. */
.extras-box, .tip-box { display: flex; flex-direction: column; gap: 15.84px; min-width: 0; }
.extras-list { display: flex; flex-direction: column; gap: 13.2px; }
.extras-item { display: flex; align-items: center; gap: 14.52px; }
.extras-item .ei-ico {
  width: 42.24px; height: 42.24px; border-radius: 10.56px; flex-shrink: 0;
  background: var(--royal-tint); color: var(--royal);
  display: inline-flex; align-items: center; justify-content: center;
}
.extras-item .ei-ico svg { width: 19.8px; height: 19.8px; }
.extras-item .ei-text b { font-size: 17.82px; font-weight: 600; color: var(--ink); }
.extras-item .ei-text small {
  display: block; font-family: var(--font-ui); font-size: 12.54px; font-weight: 500;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-top: 1.32px;
}

.tip-row { display: flex; gap: 10.56px; }
.tip-ccy {
  width: 102.96px; height: 55.44px; flex-shrink: 0;
  border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600; color: var(--ink); padding: 0 13.2px; cursor: pointer;
}
.tip-amt {
  flex: 1; min-width: 0; height: 55.44px;
  border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  padding: 0 18.48px; font-family: var(--font-body); font-size: 18.48px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.tip-amt:focus { border-color: var(--royal-soft); background: #fff; }
.tip-amt::placeholder { color: var(--ink-muted); }
.tip-btn {
  height: 55.44px; padding: 0 26.4px; border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--navy);
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; border-radius: var(--r);
  display: inline-flex; align-items: center; gap: 10.56px;
  transition: transform 160ms var(--ease-out), box-shadow 180ms ease;
}
.tip-btn svg { width: 18.48px; height: 18.48px; }
.tip-btn:hover { transform: translateY(-1.32px); box-shadow: 0 9.6px 28.8px -12px rgba(230,180,0,0.6); }
.tip-presets { display: flex; gap: 10.56px; flex-wrap: wrap; }
.tip-preset {
  padding: 9.24px 19.8px; border: 1.2px solid var(--line); background: #fff; border-radius: 1318.68px;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 160ms ease;
}
.tip-preset:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); transform: translateY(-1.32px); }
.tip-preset.is-active { border-color: var(--accent); background: var(--royal-tint); color: var(--royal); }
.tip-thanks {
  display: flex; align-items: center; gap: 10.56px;
  font-size: 17.82px; font-weight: 600; color: var(--status);
}
.tip-thanks svg { width: 21.12px; height: 21.12px; flex-shrink: 0; }

/* ==================================================
   CHAT (shared)
   ================================================== */
.chat-stream { display: flex; flex-direction: column; gap: 18.48px; padding: 26.4px; }
.chat-msg { display: flex; gap: 14.52px; align-items: flex-end; max-width: 78%; }
.chat-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-av {
  width: 44.88px; height: 44.88px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--orange), var(--orange-deep));
  color: #fff; box-shadow: 0 4.8px 12px -4.8px rgba(255,122,42,0.5);
}
.chat-av svg { width: 22.44px; height: 22.44px; }
.chat-msg.me .chat-av { background: linear-gradient(140deg, var(--royal), var(--royal-deep)); box-shadow: 0 4.8px 12px -4.8px rgba(255, 70, 85,0.5); }
.chat-bubble-wrap { display: flex; flex-direction: column; gap: 7.92px; min-width: 0; }
.chat-msg.me .chat-bubble-wrap { align-items: flex-end; }
.chat-bubble {
  background: var(--bg-soft);
  border: 1.2px solid var(--line);
  border-radius: 15.84px; border-bottom-left-radius: 3.96px;
  padding: 11.88px 17.16px; font-size: 17.82px; line-height: 1.45; color: var(--ink);
}
.chat-msg.me .chat-bubble {
  background: var(--royal); color: #fff; border-color: transparent;
  border-radius: 15.84px; border-bottom-right-radius: 3.96px;
}
.chat-time {
  font-family: var(--font-ui);
  font-size: 11.88px; letter-spacing: calc(0.06em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}
.chat-input-row {
  display: flex; gap: 13.2px; padding: 18.48px 21.12px;
  border-top: 1.2px solid var(--line-soft); background: #fff;
}
.chat-input {
  flex: 1; min-width: 0; height: 58.08px; padding: 0 21.12px;
  border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); font-family: var(--font-body); font-size: 18.48px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.chat-input:focus { border-color: var(--royal-soft); background: #fff; }
.chat-input::placeholder { color: var(--ink-muted); }
.chat-send {
  height: 58.08px; padding: 0 29.04px; border: none; cursor: pointer;
  background: var(--royal); color: #fff;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 600;
  letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase;
  border-radius: var(--r);
  display: inline-flex; align-items: center; gap: 11.88px;
  transition: background 180ms ease, transform 160ms ease;
}
.chat-send:hover { background: var(--navy); transform: translateY(-1.32px); }
.chat-send svg { width: 18.48px; height: 18.48px; }

/* ==================================================
   MATCH HISTORY TABLE (shared)
   ================================================== */
.match-table { width: 100%; }
.match-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr 0.6fr 0.8fr 1fr;
  align-items: center; gap: 15.84px;
  padding: 17.16px 26.4px;
}
.match-row + .match-row { border-top: 1.2px solid var(--line-soft); }
.match-row.head {
  background: var(--bg-soft);
  border-bottom: 1.2px solid var(--line);
  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);
  padding: 15.84px 26.4px;
}
.match-row.body { transition: background 160ms ease; }
.match-row.body:hover { background: var(--royal-tint); }
.match-champ { display: inline-flex; align-items: center; gap: 14.52px; min-width: 0; }
.match-champ .mc-name { font-weight: 600; font-size: 18.48px; color: var(--ink); white-space: nowrap; }
.match-kda { font-family: var(--font-ui); font-size: 17.16px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.match-kda em { font-style: normal; color: var(--ink-muted); margin: 0 2.64px; }
.match-cs, .match-dur, .match-date {
  font-family: var(--font-ui); font-size: 15.84px; color: var(--ink-soft); letter-spacing: 0.01em;
}
.match-date { text-align: right; color: var(--ink-muted); }
.col-r { text-align: right; justify-content: flex-end; }

@media (max-width: 864px) {
  .match-row { grid-template-columns: 1.4fr 0.7fr 1fr 0.9fr; }
  .match-row .match-cs, .match-row .match-dur,
  .match-row.head .col-cs, .match-row.head .col-dur { display: none; }
}

/* action buttons row */
.order-actions { display: flex; gap: 18.48px; flex-wrap: wrap; }
.order-actions .btn { flex: 1; justify-content: center; min-width: 264px; padding: 21.12px 29.04px; }
.btn-pause {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff; box-shadow: 0 9.6px 33.6px -12px rgba(255,122,42,0.55);
}
.btn-pause:hover { transform: translateY(-1.32px); box-shadow: 0 14.4px 40.8px -12px rgba(255,122,42,0.65); }
.btn-dark {
  background: var(--navy); color: #fff; border: 1.2px solid var(--navy);
}
.btn-dark:hover { background: var(--navy-deep); transform: translateY(-1.32px); }
/* .vb-rd-scoped (0,2,0) so the border survives f3-tokens' `.vb-rd .btn{border:none}`
   (same 0,2,0, but this loads later via the vb-f3-tokens dep chain). The live climb
   button is `<button class="btn btn-climb">`, so a bare `.btn-climb` (0,1,0) loses. */
.vb-rd .btn-climb {
  background: #fff; color: var(--accent); border: 1.2px solid var(--royal-soft);
}
.vb-rd .btn-climb:hover { background: var(--royal-tint); transform: translateY(-1.32px); }

/* ==================================================
   LIVE CLIMB MODAL
   ================================================== */
.climb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 31.68px;
  background: rgba(10, 17, 25, 0.62);
  -webkit-backdrop-filter: blur(7.92px); backdrop-filter: blur(7.92px);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 260ms;
}
.climb-overlay.is-open { opacity: 1; visibility: visible; }
.climb-modal {
  position: relative;
  width: min(580.8px, 100%);
  background:
    radial-gradient(792px 396px at 80% -30%, rgba(255,70,85,0.16), transparent 60%),
    linear-gradient(165deg, var(--navy-deep) 0%, var(--royal-deep) 75%);
  border: 1.2px solid rgba(255,255,255,0.14);
  border-radius: 21.12px;
  box-shadow: 0 48px 108px -36px rgba(0,0,0,0.7);
  color: #fff; overflow: hidden;
  transform: translateY(21.12px) scale(0.97);
  transition: transform 320ms var(--ease-out);
}
.climb-overlay.is-open .climb-modal { transform: none; }
.climb-modal::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.32px, transparent 1.32px);
  background-size: 29.04px 29.04px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 70%);
}
.climb-modal > * { position: relative; z-index: 1; }
.climb-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 23.76px 26.4px; border-bottom: 1.2px solid rgba(255,255,255,0.1);
}
.climb-modal-title {
  font-family: var(--font-ui);
  font-size: 14.52px; font-weight: 700;
  letter-spacing: calc(0.18em * var(--tracking)); text-transform: uppercase;
  color: #fff; display: inline-flex; align-items: center; gap: 13.2px;
}
.climb-modal-title .live-dot { background: var(--gold); box-shadow: 0 0 0 0 rgba(255,234,61,0.6); }
@media (prefers-reduced-motion: no-preference) {
  .climb-modal-title .live-dot { animation: live-pulse-gold 1.8s ease-out infinite; }
}
@keyframes live-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(255,234,61,0.55); }
  70% { box-shadow: 0 0 0 8.4px rgba(255,234,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,234,61,0); }
}
.climb-x {
  width: 39.6px; height: 39.6px; border-radius: 9.24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1.2px solid rgba(255,255,255,0.16); color: #fff;
  transition: background 180ms ease;
}
.climb-x:hover { background: rgba(255,255,255,0.18); }
.climb-x svg { width: 18.48px; height: 18.48px; }
.climb-modal-body { padding: 34.32px 31.68px 10.56px; display: flex; flex-direction: column; align-items: center; gap: 23.76px; }
.climb-modal .prog-ring { width: 248.16px; height: 248.16px; }
.climb-modal .prog-ring .ring-track { stroke: rgba(255,255,255,0.12); }
.climb-modal .prog-ring .ring-num { color: #fff; }
.climb-modal .prog-ring .ring-sub { color: rgba(255,255,255,0.6); }
.climb-ring-crest {
  position: absolute; inset: 0; margin: auto; width: 84.48px; height: 84.48px;
  top: -84.48px; /* placeholder, overridden below */
}
.climb-modal .ring-center .climb-crest-img { width: 73.92px; height: 73.92px; object-fit: contain; filter: drop-shadow(0 5.28px 13.2px rgba(0,0,0,0.4)); }
.climb-modal .ring-center .ring-num { font-size: 50.16px; }
.climb-lp-line { text-align: center; }
.climb-lp-big {
  font-family: var(--font-display); font-weight: 700; font-size: 39.6px; letter-spacing: -0.02em; color: var(--gold);
}
.climb-lp-rank {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 3.96px;
}
.climb-modal .streak span { width: 34.32px; height: 34.32px; border-radius: 5.28px; font-size: 14.52px; }
.climb-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 21.12px 31.68px 29.04px;
  margin-top: 7.92px;
  font-family: var(--font-ui); font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.06em * var(--tracking)); text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.climb-modal-foot b { color: #fff; }
.climb-modal-foot .cm-eta b { color: var(--gold); }
.climb-modal-stats {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13.2px;
}
.climb-stat-box {
  background: rgba(255,255,255,0.06); border: 1.2px solid rgba(255,255,255,0.12);
  border-radius: var(--r); padding: 15.84px 18.48px;
  display: flex; flex-direction: column; gap: 5.28px;
}
.climb-stat-box .csb-label {
  font-family: var(--font-ui); font-size: 11.22px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.climb-stat-box .csb-value { font-family: var(--font-display); font-weight: 700; font-size: 23.76px; color: #fff; }
.climb-stat-box .csb-value.up { color: var(--status); }

.jv-stage { max-width: 1478.4px; margin: 0 auto; padding: 39.6px 31.68px 84.48px; display: grid; grid-template-columns: 517.44px 1fr; gap: 26.4px; align-items: start; }
.jv-rail { position: sticky; top: 102.96px; }
.jv-rail-top { padding: 31.68px 31.68px 26.4px; display: flex; flex-direction: column; align-items: center; gap: 21.12px; border-bottom: 1.2px solid var(--line-soft); }
.jv-rail-top .prog-ring { width: 182.16px; height: 182.16px; }
.jv-rail-top .btn { width: 100%; justify-content: center; }
.jv-track-wrap { padding: 29.04px 34.32px 31.68px; }
.jv-track-cap {
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 10.56px;
}
.jv-track { position: relative; display: flex; flex-direction: column; }
.jv-vtrack { position: absolute; left: 35.64px; width: 5.28px; border-radius: 2.64px; background: var(--bg-deep); }
.jv-vfill {
  position: absolute; left: 35.64px; width: 5.28px; border-radius: 2.64px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 0 9.6px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: height 1.3s var(--ease-out);
}
.jv-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 21.12px; padding: 14.52px 0; }
.jv-step .jv-crest { width: 58.08px; height: 58.08px; object-fit: contain; flex-shrink: 0; opacity: 0.45; filter: drop-shadow(0 5.28px 10.56px rgba(62, 24, 32,0.2)); transition: opacity 300ms ease; margin-left: 7.92px; }
.jv-step.done .jv-crest { opacity: 1; }
.jv-step.current .jv-crest { width: 73.92px; height: 73.92px; opacity: 1; margin-left: 0; }
body:not(.no-glow) .jv-step.current .jv-crest { filter: drop-shadow(0 7.92px 15.84px rgba(62, 24, 32,0.25)) drop-shadow(0 0 18.48px color-mix(in srgb, var(--gold) 50%, transparent)); }
.jv-step-text { display: flex; flex-direction: column; gap: 2.64px; }
.jv-step-name { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; letter-spacing: -0.01em; color: var(--ink-soft); }
.jv-step.done .jv-step-name, .jv-step.current .jv-step-name { color: var(--ink); }
.jv-step-flag {
  font-family: var(--font-ui); font-size: 11.22px; font-weight: 700;
  letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
}
.jv-step.current .jv-step-flag { color: var(--gold-deep); }
.jv-main { display: flex; flex-direction: column; gap: 26.4px; min-width: 0; }
.jv-chat { display: flex; flex-direction: column; height: 580.8px; }
.jv-chat .chat-stream { flex: 1; overflow-y: auto; }
@media (max-width: 1152px) {
  .jv-stage { grid-template-columns: 1fr; }
  .jv-rail { position: static; }
}

/* ==================================================
   LIVE CHAT WIDGET — F3 skin (common/order_chat.php)
   The plugin chat (do_action('bt_client_chat')) emits .chat-container /
   .chat-cnt-section / .chat-right / .chat-left / .chat-content / .chat-text /
   .chat-snd-section / .chat-msg-field / .chat-snd-btn — NOT the
   .chat-stream/.chat-bubble family above (that styles preview markup). These
   rules re-skin the REAL widget to F3 inside BOTH live hosts: the customer
   order page (.jv-chat-live) and the booster console (.bp-chat). CSS-only —
   markup + the boostingChat JS are the plugin's, untouched. Scoped to
   .vb-rd .chat-container so it only hits this widget (never the 3rd-party
   support chat), with the panel wrappers handling fill-height layout.
   ================================================== */
.vb-rd .jv-chat-live,
.vb-rd .bp-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vb-rd .chat-container { display: flex !important; flex-direction: column; flex: 1; min-height: 0; background: #fff; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.vb-rd .chat-cnt-section { flex: 1; min-height: 0; overflow-y: auto; padding: 26.4px; background: var(--bg-soft); }
.vb-rd #no_chat_history { padding: 52.8px 26.4px; text-align: center; color: var(--ink-muted); font-size: 15.84px; line-height: 1.6; }
/* the live plugin chat emits the empty-state copy as a bare <p>; with main.css
   stripped (and home-page.css not loaded on the order/console pages) it has no
   margin reset, so zero it explicitly. */
.vb-rd #no_chat_history p { margin: 0; }
.vb-rd .chat-right,
.vb-rd .chat-left { display: flex; gap: 13.2px; align-items: flex-end; max-width: 80%; margin-bottom: 18.48px; }
.vb-rd .chat-right { margin-left: auto; flex-direction: row-reverse; }
.vb-rd .chat-left { margin-right: auto; }
.vb-rd .chat-img { width: 42.24px; height: 42.24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.2px solid var(--line); }
.vb-rd .chat-content { display: flex; flex-direction: column; gap: 6.6px; min-width: 0; }
.vb-rd .chat-right .chat-content { align-items: flex-end; }
.vb-rd .chat-text {
  background: #fff; border: 1.2px solid var(--line);
  border-radius: 15.84px; border-bottom-left-radius: 3.96px;
  padding: 11.88px 17.16px; font-size: 17.16px; line-height: 1.45; color: var(--ink); word-break: break-word;
}
.vb-rd .chat-right .chat-text {
  background: var(--royal); color: #fff; border-color: transparent;
  border-radius: 15.84px; border-bottom-right-radius: 3.96px;
}
.vb-rd .chat-text .download_file { color: inherit; margin-left: 6.6px; }
/* file-message font-awesome icon (fa-file-o / fa-download) — main.css gave inline
   <i> a 5px right gap; re-home it so the glyph isn't flush against 'File:' text. */
.vb-rd .chat-text i.fa { margin-right: 5.5px; }
.vb-rd .chat-time {
  font-family: var(--font-ui); font-size: 11.22px; letter-spacing: calc(0.06em * var(--tracking));
  text-transform: uppercase; color: var(--ink-muted);
}
.vb-rd .chat-snd-section {
  display: flex; gap: 13.2px; align-items: center; padding: 18.48px 21.12px;
  border-top: 1.2px solid var(--line-soft); background: #fff;
}
.vb-rd .chat-inpu-sec { flex: 1; min-width: 0; }
.vb-rd .chat-inpu-sec .type-msg { width: 100%; }
.vb-rd .chat-msg-field {
  width: 100%; height: 55.44px; padding: 0 19.8px;
  border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); font-family: var(--font-body); font-size: 17.82px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.vb-rd .chat-msg-field:focus { border-color: var(--royal-soft); background: #fff; }
.vb-rd .chat-msg-field::placeholder { color: var(--ink-muted); }
.vb-rd .chat-snd-sec { display: flex; align-items: center; gap: 10.56px; flex-shrink: 0; }
.vb-rd .chat-snd-btn {
  height: 55.44px; padding: 0 26.4px; border: none; cursor: pointer;
  background: var(--royal); color: #fff;
  font-family: var(--font-ui); font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase; border-radius: var(--r);
  transition: background 180ms ease, transform 160ms ease;
}
.vb-rd .chat-snd-btn:hover:not(:disabled) { background: var(--navy); transform: translateY(-1.32px); }
.vb-rd .chat-snd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vb-rd .chat-mute-btn {
  width: 48.4px; height: 55.44px; flex-shrink: 0; border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); cursor: pointer; font-size: 19.8px; line-height: 1;
  transition: background 180ms ease, border-color 180ms ease;
}
.vb-rd .chat-mute-btn:hover { background: var(--royal-tint); border-color: var(--royal-soft); }

/* ==================================================
   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.
   ================================================== */
.jv-step-name { font-family: var(--font-body); }