/* ==========================================================================
   RC-CUSTOMER v1 — Rasid Card unified customer-area design system
   STAGING ONLY · Mobile-first · RTL-native · Compact density
   Scope: My Account / Orders / Wallet / Thank-You / Auth (account pages)
   Loaded ONLY on account + order-received + order-completed + ds-preview pages.
   Legacy CSS sources are intentionally left untouched (Phase D consolidates).
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
.rc-scope {
  --rc-cyan: #00C8FF;
  --rc-cyan-dark: #00A9E7;
  --rc-cyan-ink: #0077A3;
  --rc-cyan-tint: #E8F9FF;
  --rc-navy: #0B1B2B;
  --rc-navy-soft: #12283D;
  --rc-ink: #16222E;
  --rc-muted: #5C6C7D;
  --rc-faint: #8B98A6;
  --rc-line: #E5EBF1;
  --rc-line-soft: #EFF3F7;
  --rc-bg: #F3F6F9;
  --rc-card: #FFFFFF;
  --rc-ok: #14936D;   --rc-ok-bg: #EAF9F3;
  --rc-warn: #A86A12; --rc-warn-bg: #FFF7E5;
  --rc-err: #C03535;  --rc-err-bg: #FDECEC;
  --rc-info: #0077A3; --rc-info-bg: #E8F9FF;
  --rc-s1: 4px; --rc-s2: 8px; --rc-s3: 12px; --rc-s4: 16px;
  --rc-s5: 20px; --rc-s6: 24px; --rc-s8: 32px;
  --rc-r-sm: 8px; --rc-r-md: 12px; --rc-r-lg: 16px; --rc-r-pill: 999px;
  --rc-sh-sm: 0 1px 2px rgba(11,27,43,.06);
  --rc-sh-md: 0 2px 10px rgba(11,27,43,.08);
  --rc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
             "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --rc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: rtl;
  font-family: var(--rc-font);
  color: var(--rc-ink);
  font-size: 14px;
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 2. LAYOUT ---------- */
.rc-wrap {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--rc-s4) var(--rc-s4) var(--rc-s8);
}
@media (min-width: 768px) {
  .rc-wrap { max-width: 720px; }
  .rc-scope { font-size: 15px; }
}
.rc-section { margin-block-end: var(--rc-s5); }
.rc-section-title {
  font-size: 15px; font-weight: 700; margin: 0 0 var(--rc-s3);
  display: flex; align-items: center; gap: var(--rc-s2);
}
.rc-section-title::before {
  content: ""; inline-size: 3px; block-size: 16px; border-radius: 2px;
  background: var(--rc-cyan);
}

/* ---------- 3. TYPOGRAPHY ---------- */
.rc-page-title { font-size: 20px; font-weight: 800; margin: 0 0 var(--rc-s1); letter-spacing: 0; }
.rc-page-sub { color: var(--rc-muted); font-size: 13px; margin: 0 0 var(--rc-s4); }
.rc-card-title { font-size: 14px; font-weight: 700; margin: 0; }
.rc-meta { font-size: 12px; color: var(--rc-muted); }
.rc-price { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
/* LTR isolation for codes / order numbers / emails / urls / latin prices */
.rc-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.rc-code-font { font-family: var(--rc-mono); letter-spacing: .5px; }

/* ---------- 4. CARDS ---------- */
.rc-card {
  background: var(--rc-card);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md);
  box-shadow: var(--rc-sh-sm);
  padding: var(--rc-s4);
}
.rc-card + .rc-card { margin-block-start: var(--rc-s3); }

/* ---------- 5. CUSTOMER SUMMARY HEADER (compact, not giant cards) ---------- */
.rc-summary {
  background: var(--rc-navy);
  color: #fff;
  border-radius: var(--rc-r-lg);
  padding: var(--rc-s4);
  box-shadow: var(--rc-sh-md);
  margin-block-end: var(--rc-s4);
}
.rc-summary-top { display: flex; align-items: center; gap: var(--rc-s3); }
.rc-avatar {
  inline-size: 48px; block-size: 48px; border-radius: 50%; flex: none;
  background: var(--rc-cyan-tint); color: var(--rc-cyan-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
  border: 2px solid rgba(255,255,255,.25);
}
.rc-summary-name { font-weight: 700; font-size: 15px; margin: 0; }
.rc-summary-mail { font-size: 12px; color: #B9C6D2; margin: 0; }
.rc-summary-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--rc-s2); margin-block-start: var(--rc-s3);
}
.rc-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rc-r-sm);
  padding: var(--rc-s2) var(--rc-s3);
  text-decoration: none; color: #fff; display: block;
  min-block-size: 44px;
}
.rc-stat-label { font-size: 11px; color: #B9C6D2; display: block; }
.rc-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- 6. ACCOUNT NAVIGATION (compact rows) ---------- */
.rc-nav { list-style: none; margin: 0; padding: 0; background: var(--rc-card);
  border: 1px solid var(--rc-line); border-radius: var(--rc-r-md); overflow: hidden; }
.rc-nav li + li { border-block-start: 1px solid var(--rc-line-soft); }
.rc-nav a {
  display: flex; align-items: center; gap: var(--rc-s3);
  padding: var(--rc-s3) var(--rc-s4); min-block-size: 52px;
  text-decoration: none; color: var(--rc-ink);
}
.rc-nav a:active { background: var(--rc-line-soft); }
.rc-nav-ico {
  inline-size: 36px; block-size: 36px; border-radius: var(--rc-r-sm); flex: none;
  background: var(--rc-cyan-tint); color: var(--rc-cyan-ink);
  display: grid; place-items: center; font-size: 17px;
}
.rc-nav-txt { flex: 1; min-inline-size: 0; }
.rc-nav-title { font-weight: 700; font-size: 14px; display: block; }
.rc-nav-sub { font-size: 12px; color: var(--rc-muted); display: block; }
.rc-nav-chev { color: var(--rc-faint); font-size: 18px; line-height: 1; }
/* RTL: forward chevron points LEFT */
.rc-nav-chev::before { content: "‹"; }

/* ---------- 7. ORDER CARD (compact scan-friendly) ---------- */
.rc-order {
  display: grid; gap: var(--rc-s2);
  padding: var(--rc-s3) var(--rc-s4);
}
.rc-order-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rc-s2); }
.rc-order-id { font-weight: 800; font-size: 14px; }
.rc-order-meta { display: flex; gap: var(--rc-s3); flex-wrap: wrap; }
.rc-order-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rc-s2); border-block-start: 1px dashed var(--rc-line);
  padding-block-start: var(--rc-s2);
}
.rc-order-products { font-size: 12px; color: var(--rc-muted); }

/* ---------- 8. STATUS BADGES (never color-only: glyph + text) ---------- */
.rc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 6px 10px; border-radius: var(--rc-r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.rc-badge::before { font-size: 11px; }
.rc-badge.is-completed { background: var(--rc-ok-bg); color: var(--rc-ok); border-color: #BFE8D6; }
.rc-badge.is-completed::before { content: "✓"; }
.rc-badge.is-processing { background: var(--rc-info-bg); color: var(--rc-info); border-color: #BFE6F5; }
.rc-badge.is-processing::before { content: "◐"; }
.rc-badge.is-pending { background: var(--rc-warn-bg); color: var(--rc-warn); border-color: #F0DFB5; }
.rc-badge.is-pending::before { content: "⏳"; }
.rc-badge.is-failed, .rc-badge.is-cancelled { background: var(--rc-err-bg); color: var(--rc-err); border-color: #F3C2C2; }
.rc-badge.is-failed::before { content: "✕"; }
.rc-badge.is-cancelled::before { content: "⊘"; }
.rc-badge.is-refunded { background: #F1F3F6; color: var(--rc-muted); border-color: var(--rc-line); }
.rc-badge.is-refunded::before { content: "↩"; }
.rc-badge.is-ondelivery { background: var(--rc-cyan-tint); color: var(--rc-cyan-ink); border-color: #BFEAFB; }
.rc-badge.is-ondelivery::before { content: "✦"; }

/* ---------- 9. DIGITAL CODE BOX ---------- */
.rc-codebox { border: 1.5px dashed var(--rc-cyan-dark); background: var(--rc-cyan-tint);
  border-radius: var(--rc-r-md); padding: var(--rc-s4); text-align: center; }
.rc-codebox-label { font-size: 12px; font-weight: 700; color: var(--rc-cyan-ink); margin: 0 0 var(--rc-s2); }
.rc-code {
  font-family: var(--rc-mono); font-size: 19px; font-weight: 700; letter-spacing: 2px;
  direction: ltr; unicode-bidi: isolate; display: block;
  background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm);
  padding: var(--rc-s3); margin-block-end: var(--rc-s3); user-select: all;
  overflow-x: auto; white-space: nowrap;
}
.rc-code-pending { padding: var(--rc-s4); text-align: center; color: var(--rc-muted); }
.rc-copy-ok { color: var(--rc-ok); font-weight: 700; font-size: 13px; min-block-size: 20px; }

/* ---------- 10. WALLET ---------- */
.rc-wallet-label { font-size: 12px; color: #B9C6D2; margin: 0; }
.rc-wallet-balance { font-size: 32px; font-weight: 800; margin: var(--rc-s1) 0 var(--rc-s3);
  font-variant-numeric: tabular-nums; }
.rc-wallet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rc-s2); }
.rc-wallet-act {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; border-radius: var(--rc-r-sm); padding: var(--rc-s2) var(--rc-s1);
  font-size: 11px; font-weight: 700; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-block-size: 60px;
  justify-content: center; font-family: inherit; cursor: pointer;
}
.rc-wallet-act span.ico { font-size: 18px; }
.rc-txn { display: flex; align-items: center; gap: var(--rc-s3); padding: var(--rc-s3) var(--rc-s4); }
.rc-txn + .rc-txn { border-block-start: 1px solid var(--rc-line-soft); }
.rc-txn-ico { inline-size: 38px; block-size: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 16px; background: var(--rc-line-soft); color: var(--rc-muted); }
.rc-txn-ico.in { background: var(--rc-ok-bg); color: var(--rc-ok); }
.rc-txn-ico.out { background: var(--rc-err-bg); color: var(--rc-err); }
.rc-txn-main { flex: 1; min-inline-size: 0; }
.rc-txn-type { font-weight: 700; font-size: 13px; margin: 0; }
.rc-txn-date { font-size: 11px; color: var(--rc-faint); margin: 0; }
.rc-txn-amt { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-txn-amt.in { color: var(--rc-ok); } .rc-txn-amt.out { color: var(--rc-ink); }

/* ---------- 11. BUTTONS ---------- */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rc-s2);
  min-block-size: 46px; padding: 0 var(--rc-s5);
  border-radius: var(--rc-r-md); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .15s, transform .05s;
}
.rc-btn:active { transform: scale(.98); }
.rc-btn-primary { background: var(--rc-cyan); color: #04222E; }
.rc-btn-primary:hover { background: var(--rc-cyan-dark); color: #fff; }
.rc-btn-navy { background: var(--rc-navy); color: #fff; }
.rc-btn-ghost { background: #fff; border-color: var(--rc-line); color: var(--rc-ink); }
.rc-btn-danger-ghost { background: #fff; border-color: #F3C2C2; color: var(--rc-err); }
.rc-btn-block { display: flex; inline-size: 100%; }
.rc-btn[disabled] { opacity: .55; cursor: not-allowed; }
.rc-btn:focus-visible, .rc-nav a:focus-visible, .rc-stat:focus-visible, .rc-wallet-act:focus-visible {
  outline: 2px solid var(--rc-cyan-dark); outline-offset: 2px;
}

/* ---------- 12. FORMS ---------- */
.rc-field { margin-block-end: var(--rc-s3); }
.rc-label { display: block; font-size: 13px; font-weight: 700; margin-block-end: 6px; }
.rc-input, .rc-select, .rc-textarea {
  inline-size: 100%; min-block-size: 46px; font-family: inherit; font-size: 16px; /* ≥16px: no iOS Safari auto-zoom on focus (DoD 24) */
  border: 1.5px solid var(--rc-line); border-radius: var(--rc-r-sm);
  padding: 0 var(--rc-s3); background: #fff; color: var(--rc-ink);
}
.rc-textarea { min-block-size: 96px; padding: var(--rc-s3); resize: vertical; }
.rc-input:focus, .rc-select:focus, .rc-textarea:focus {
  outline: none; border-color: var(--rc-cyan-dark); box-shadow: 0 0 0 3px var(--rc-cyan-tint);
}
.rc-input[aria-invalid="true"] { border-color: var(--rc-err); }
.rc-err-text { color: var(--rc-err); font-size: 12px; margin-block-start: 4px; }
.rc-hint { color: var(--rc-muted); font-size: 12px; margin-block-start: 4px; }

/* ---------- 13. ALERTS ---------- */
.rc-alert {
  display: flex; gap: var(--rc-s2); align-items: flex-start;
  border-radius: var(--rc-r-sm); padding: var(--rc-s3);
  font-size: 13px; border: 1px solid transparent; margin-block-end: var(--rc-s3);
}
.rc-alert::before { font-weight: 800; }
.rc-alert.is-ok { background: var(--rc-ok-bg); color: var(--rc-ok); border-color: #BFE8D6; }
.rc-alert.is-ok::before { content: "✓"; }
.rc-alert.is-err { background: var(--rc-err-bg); color: var(--rc-err); border-color: #F3C2C2; }
.rc-alert.is-err::before { content: "✕"; }
.rc-alert.is-info { background: var(--rc-info-bg); color: var(--rc-info); border-color: #BFE6F5; }
.rc-alert.is-info::before { content: "ℹ"; }
.rc-alert.is-warn { background: var(--rc-warn-bg); color: var(--rc-warn); border-color: #F0DFB5; }
.rc-alert.is-warn::before { content: "!"; }

/* ---------- 14. EMPTY STATES ---------- */
.rc-empty { text-align: center; padding: var(--rc-s8) var(--rc-s4); }
.rc-empty-ico { font-size: 40px; display: block; margin-block-end: var(--rc-s3); opacity: .7; }
.rc-empty-title { font-weight: 800; font-size: 15px; margin: 0 0 var(--rc-s1); }
.rc-empty-txt { color: var(--rc-muted); font-size: 13px; margin: 0 0 var(--rc-s4); }

/* ---------- 15. SKELETONS / LOADING ---------- */
.rc-skel {
  border-radius: var(--rc-r-sm);
  background: linear-gradient(90deg, var(--rc-line-soft) 25%, #E2E9F0 50%, var(--rc-line-soft) 75%);
  background-size: 200% 100%; animation: rc-shimmer 1.2s infinite;
  min-block-size: 14px;
}
@keyframes rc-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rc-skel { animation: none; }
  .rc-btn { transition: none; }
}
.rc-spinner {
  inline-size: 18px; block-size: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid rgba(255,255,255,.35); border-block-start-color: #fff;
  animation: rc-spin .7s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rc-spinner { animation: none; } }

/* ---------- 16. MISC ---------- */
.rc-divider { border: 0; border-block-start: 1px solid var(--rc-line); margin: var(--rc-s4) 0; }
.rc-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--rc-s2); }
.rc-kv { display: flex; justify-content: space-between; gap: var(--rc-s2);
  padding-block: var(--rc-s2); font-size: 13px; }
.rc-kv + .rc-kv { border-block-start: 1px solid var(--rc-line-soft); }
.rc-kv dt { color: var(--rc-muted); } .rc-kv dd { margin: 0; font-weight: 700; }
.rc-preview-note { background: var(--rc-warn-bg); border: 1px dashed var(--rc-warn);
  border-radius: var(--rc-r-sm); padding: var(--rc-s2) var(--rc-s3);
  font-size: 12px; color: var(--rc-warn); margin-block-end: var(--rc-s4); }

/* ==========================================================================
   PHASE D — dashboard (2026-09-29, staging) · design-system extension v1.1
   Additive ONLY: every selector below is NEW — no rule above this line was
   modified or reordered. Enqueue version bumped to 1.1.0 in functions.php
   (staging) so the new classes are served, not browser-cached.
   Consumed by:
     - rc-dashboard.php     → .rc-summary top row: .rc-summary-identity,
                              <img class="rc-avatar rc-avatar-lg">,
                              .rc-summary-edit
     - rc-account-forms.php → #rc-account: .rc-account-card,
                              .rc-account-card-title, .rc-form-grid,
                              .rc-avatar-upload (+ .rc-btn.rc-btn-ghost
                              for the upload trigger)
   Contracts kept: logical properties only, touch targets ≥44px,
   min-inline-size:0 (no horizontal overflow), tabular-nums for figures,
   prefers-reduced-motion safe (§17g).
   ========================================================================== */

/* ---------- 17a. SUMMARY TOP ROW (avatar + identity + edit link) ---------- */
/* .rc-summary-top / .rc-summary-name / .rc-summary-mail already exist (§5). */
.rc-summary-identity { flex: 1 1 auto; min-inline-size: 0; }
/* «تعديل» edit link pinned to the inline-end of the top row. */
.rc-summary-edit {
  margin-inline-start: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px;
  padding-inline: var(--rc-s2);
  color: #D9F4FF; font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  border-radius: var(--rc-r-sm);
}
.rc-summary-edit:hover { color: #fff; }
.rc-summary-edit:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }
/* Long names/emails must never shove the edit link off-screen. */
.rc-summary-name, .rc-summary-mail {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-inline-size: 100%;
}

/* ---------- 17b. AVATAR: 64px cyan-ring variant + <img> guard ---------- */
/* Base .rc-avatar stays 48px (§5 — compact preview header, unchanged).
   Dashboard profile avatar markup: <img class="rc-avatar rc-avatar-lg">. */
.rc-avatar { overflow: hidden; }            /* clip square <img> corners to the circle */
img.rc-avatar { object-fit: cover; }        /* photos fill the circle, never stretch */
.rc-avatar-lg {
  inline-size: 64px; block-size: 64px; font-size: 22px;
  border: 2px solid var(--rc-cyan);
  box-shadow: 0 0 0 3px rgba(0,200,255,.28); /* cyan ring */
}

/* ---------- 17c. SUMMARY STATS: one 3-col row at EVERY width ---------- */
/* .rc-summary-stats is already repeat(3,1fr) (§5) — it NEVER stacks,
   including at 320px. The guards below keep the row from overflowing. */
.rc-summary-stats > * { min-inline-size: 0; }
.rc-stat { min-inline-size: 0; }
.rc-stat-value {
  display: block; max-inline-size: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 17d. NAV: verified complete — no additions ---------- */
/* .rc-nav rows are 52px with .rc-nav-ico (36px tile) and .rc-nav-sub
   (§6) — the dashboard nav reuses them unchanged. Checked 2026-09-29. */

/* ---------- 17e. #rc-account SECTION ---------- */
#rc-account { scroll-margin-block-start: var(--rc-s4); }
/* Light card wrapping each account-form block. */
.rc-account-card {
  background: var(--rc-card);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-sh-sm);
  padding: var(--rc-s5) var(--rc-s4);
  margin-block-end: var(--rc-s4);
  min-inline-size: 0;
}
.rc-account-card-title {
  font-size: 15px; font-weight: 800; margin: 0 0 var(--rc-s3);
  display: flex; align-items: center; gap: var(--rc-s2);
  min-inline-size: 0;
}
.rc-account-card-title::before {
  content: ""; inline-size: 3px; block-size: 16px; border-radius: 2px;
  background: var(--rc-cyan); flex: none;
}
/* Form grid: single column on mobile; 2 columns ≥560px for the name
   fields. In RTL the first grid item lands at inline-start (right),
   so the first-name field goes before last-name in the markup. */
.rc-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--rc-s3); min-inline-size: 0; }
.rc-form-grid > * { min-inline-size: 0; }
.rc-form-grid .rc-field { margin-block-end: 0; } /* gap owns the rhythm */
@media (min-width: 560px) {
  .rc-form-grid { grid-template-columns: 1fr 1fr; }
  .rc-form-grid .is-full { grid-column: 1 / -1; }
}
/* Avatar upload row: preview (reuses .rc-avatar) + text + upload trigger
   (use .rc-btn.rc-btn-ghost for the trigger — 46px, already exists). */
.rc-avatar-upload {
  display: flex; align-items: center; gap: var(--rc-s4);
  padding: var(--rc-s3); margin-block-end: var(--rc-s3);
  border: 1.5px dashed var(--rc-line); border-radius: var(--rc-r-md);
  background: var(--rc-bg); min-inline-size: 0;
}
.rc-avatar-upload-txt { flex: 1 1 auto; min-inline-size: 0; }
.rc-avatar-upload-label { display: block; font-size: 13px; font-weight: 700; }
.rc-avatar-upload-hint { font-size: 12px; color: var(--rc-muted); margin: 2px 0 0; }

/* ---------- 17f. SKELETON DEFECT GUARD ---------- */
/* Defensive: text can NEVER visually render inside a shimmer
   placeholder. Documented usage is an EMPTY element
   (<div class="rc-skel"></div>, optionally with an inline-size) —
   verified 2026-09-29 on the staging preview page ID 321712
   (all 3 skeleton bars are empty divs). If markup ever leaks text
   into one, this keeps it invisible and clipped instead of breaking
   the shimmer. */
.rc-skel { color: transparent; overflow: hidden; }

/* ---------- 17g. REDUCED MOTION ---------- */
/* No new keyframes or animations were added in §17 — the
   prefers-reduced-motion rules in §15 keep covering .rc-skel and
   .rc-spinner, and the .rc-btn :active transform is already
   disabled under reduce. Nothing further needed. */


/* ==========================================================================
   §18. ORDERS — REVIEW MODAL (relocated verbatim from orders.php inline
   <style>, Phase E). Selectors unchanged to preserve existing JS bindings.
   Scoped to #review-modal so legacy --rc-* vars cannot leak into .rc-scope.
   ========================================================================== */

#review-modal {

    --rc-primary: #02c8f7;
    --rc-secondary: #00a9e7;
    --rc-brand-gradient: linear-gradient(135deg, #02c8f7, #00a9e7);
    --rc-navy: #14254a;
    --rc-text: #182745;
    --rc-muted: #7d8aa5;
    --rc-border: #e5edf6;
    --rc-soft: #f6fbff;
    --rc-shadow: 0 12px 32px rgba(37, 73, 112, .08);
    --rc-shadow-hover: 0 18px 44px rgba(24, 84, 128, .12);
    font-family: inherit;
}

/* =========================================================
   REVIEW MODAL
========================================================= */

body.rc-review-modal-open {

    overflow: hidden;
}

#review-modal {

    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    direction: rtl;
}

#review-modal.is-open {

    display: flex;
}

.modal-overlay {

    position: absolute;
    inset: 0;
    background: rgba(15, 32, 57, .44);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-box {

    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(82vh, 760px);
    overflow-y: auto;

    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(229, 237, 246, .95) !important;
    border-radius: 22px !important;
    padding: 26px !important;
    color: var(--rc-text) !important;

    box-shadow: 0 28px 80px rgba(20, 37, 74, .20) !important;
    animation: rcModalIn .22s ease both;
}

.modal-box::-webkit-scrollbar {

    width: 7px;
}

.modal-box::-webkit-scrollbar-thumb {

    background: #dce9f3;
    border-radius: 999px;
}

/* Modal heading */
.modal-heading {

    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf2f7;
}

.modal-heading-icon {

    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #00a9e7;
    background: #eefaff;
}

.modal-heading-icon svg {

    width: 20px;
    height: 20px;
}

.modal-title {

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--rc-navy) !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}

.modal-heading p {

    margin: 3px 0 0 !important;
    color: var(--rc-muted);
    font-size: 12px;
}

.modal-close {

    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 3;

    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;

    color: #61708b !important;
    background: #f4f8fb !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.modal-close:hover {

    color: #16345c !important;
    background: #eaf3f8 !important;
    transform: rotate(4deg);
}

.modal-close svg {

    width: 17px;
    height: 17px;
}

/* Loading */
#modal-loading {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    color: var(--rc-muted);
    font-size: 13px;
}

.rc-loader {

    width: 20px;
    height: 20px;
    border: 2px solid #dff6fd;
    border-top-color: #00a9e7;
    border-radius: 50%;
    animation: rcSpin .7s linear infinite;
}

/* Product review block */
.review-product-block {

    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, .72fr) minmax(220px, 1.28fr);
    column-gap: 24px;
    row-gap: 10px;

    background: #fff !important;
    border: 1px solid var(--rc-border) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 7px 20px rgba(27, 66, 104, .045);
}

.review-product-block:last-child {

    margin-bottom: 0 !important;
}

.rpb-name {

    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0 !important;
    color: var(--rc-navy) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.rpb-already {

    grid-column: 1 / -1;
    color: #14936d !important;
    background: #effbf6;
    border: 1px solid #d9f3e7;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px !important;
}

/* Stars */
.star-rating-input {

    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
}

.star-rating-input input {

    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none;
}

.star-rating-input label {

    margin: 0 !important;
    color: #c6d2df !important;
    font-size: 29px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.star-rating-input label:hover {

    transform: translateY(-1px);
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {

    color: #00b6ec !important;
}

/* Text area */
.review-textarea {

    grid-column: 1 / -1;
    width: 100% !important;
    min-height: 90px !important;
    resize: vertical !important;

    padding: 13px 14px !important;
    color: var(--rc-text) !important;
    background: #fbfdff !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 11px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    direction: rtl !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.review-textarea::placeholder {

    color: #a0adbf !important;
}

.review-textarea:focus {

    outline: none !important;
    border-color: #63d6f4 !important;
    box-shadow: 0 0 0 4px rgba(2, 200, 247, .08) !important;
}

/* Submit */
.rpb-submit {

    grid-column: 1 / -1;
    justify-self: start;

    min-width: 150px !important;
    min-height: 42px !important;
    margin: 2px 0 0 !important;
    padding: 9px 20px !important;

    color: #fff !important;
    background: linear-gradient(135deg, #02c8f7, #00a9e7) !important;
    border: 0 !important;
    border-radius: 10px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 169, 231, .20) !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.rpb-submit:hover {

    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 169, 231, .28) !important;
}

.rpb-submit:disabled {

    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.rpb-msg {

    grid-column: 1 / -1;
    margin-top: 0 !important;
    font-size: 12px !important;
}

.rpb-msg.success {

    color: #14936d !important;
}

.rpb-msg.error {

    color: #dc4c64 !important;
}

/* Ajax error */
.rc-review-error {

    padding: 13px 15px;
    color: #d3485d;
    background: #fff3f5;
    border: 1px solid #ffdce2;
    border-radius: 11px;
    font-size: 13px;
}

#review-modal {

        align-items: flex-end;
        padding: 0;
    }

.modal-box {

        width: 100%;
        max-height: 88vh;
        border-radius: 22px 22px 0 0 !important;
        padding: 20px 16px 18px !important;
    }

.modal-close {

        top: 14px;
        left: 14px;
    }

.modal-heading {

        padding-left: 36px;
    }

.modal-heading-icon {

        width: 38px;
        height: 38px;
    }

.modal-title {

        font-size: 16px !important;
    }

.review-product-block {

        display: block;
        padding: 15px !important;
        border-radius: 14px !important;
    }

.rpb-name {

        margin-bottom: 10px !important;
    }

.star-rating-input {

        margin-bottom: 11px !important;
        justify-content: flex-end !important;
    }

.star-rating-input label {

        font-size: 27px !important;
    }

.review-textarea {

        min-height: 84px !important;
    }

.rpb-submit {

        width: 100% !important;
        margin-top: 9px !important;
    }

.rpb-msg {

        margin-top: 7px !important;
    }

/* ==========================================================================
   §19. ORDERS LIST — additions (Phase E)
   ========================================================================== */

/* on-hold badge: real staging status wc-on-hold — glyph + text, never color-only */
.rc-badge.is-on-hold { background: #FFF7E5; color: #A86A12; border-color: #F0DFB5; }
.rc-badge.is-on-hold::before { content: "⏸"; }

/* small button variant for card footers */
.rc-btn-sm { min-height: 40px; padding: 0 var(--rc-s4); font-size: 13px; }

/* fulfillment hint line inside order cards */
.rc-order-fulfill { font-size: 12px; color: var(--rc-muted); margin: var(--rc-s2) 0 0;
  display: flex; align-items: center; gap: var(--rc-s1); }
.rc-order-fulfill.is-ready { color: var(--rc-ok); font-weight: 700; }
.rc-order-fulfill.is-wait { color: var(--rc-warn); }

/* orders pagination */
.rc-pager { display: flex; justify-content: space-between; gap: var(--rc-s3);
  margin-block-start: var(--rc-s5); }
.rc-pager .rc-btn { flex: 1; }

/* keep the legacy copy-confirm tiny label working inside new cards */
.rc-order .copy-confirm { display: none; font-size: 11px; color: var(--rc-ok); }
.rc-order .copy-order-id { background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--rc-faint); display: inline-flex; border-radius: 6px; min-width: 32px;
  min-height: 32px; align-items: center; justify-content: center; }
.rc-order .copy-order-id:hover { color: var(--rc-cyan-ink); background: var(--rc-cyan-tint); }
.rc-order .copy-order-id:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }
.rc-order .copy-order-id svg { width: 15px; height: 15px; }

/* ==========================================================================
   §20. ORDER DETAIL (view-order) — Phase E
   ========================================================================== */
.rc-vo-hero { background: var(--rc-card); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); padding: var(--rc-s4); margin-block-end: var(--rc-s4);
  box-shadow: var(--rc-sh-sm); }
.rc-vo-hero-top { display: flex; align-items: center; justify-content: space-between;
  gap: var(--rc-s2); margin-block-end: var(--rc-s2); }
.rc-vo-title { font-size: 17px; font-weight: 800; margin: 0; }
.rc-vo-date { font-size: 12px; color: var(--rc-muted); }

.rc-vo-fulfill { border-radius: var(--rc-r-md); padding: var(--rc-s3) var(--rc-s4);
  margin-block-end: var(--rc-s4); font-size: 13px; display: flex; gap: var(--rc-s2);
  align-items: flex-start; border: 1px solid var(--rc-line); background: var(--rc-card); }
.rc-vo-fulfill.is-ready { border-color: #BFE8D6; background: var(--rc-ok-bg); color: var(--rc-ok); }
.rc-vo-fulfill.is-wait { border-color: #F0DFB5; background: var(--rc-warn-bg); color: var(--rc-warn); }
.rc-vo-fulfill a { font-weight: 700; color: inherit; }

.rc-vo-section { background: var(--rc-card); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); padding: var(--rc-s4); margin-block-end: var(--rc-s4);
  box-shadow: var(--rc-sh-sm); }
.rc-vo-item { display: flex; justify-content: space-between; gap: var(--rc-s3);
  padding-block: var(--rc-s2); font-size: 13px; }
.rc-vo-item + .rc-vo-item { border-block-start: 1px dashed var(--rc-line); }
.rc-vo-item-name { font-weight: 700; }
.rc-vo-item-qty { color: var(--rc-muted); font-size: 12px; }
.rc-vo-item-total { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

.rc-vo-codes .fslm-license-keys-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rc-vo-codes .fslm-scroll { overflow-x: auto; margin: 0 calc(var(--rc-s4) * -1);
  padding-inline: var(--rc-s4); }
.rc-vo-codes .fslm-license-keys-table td { padding: var(--rc-s2); vertical-align: top;
  border-block-start: 1px solid var(--rc-line-soft); }
.rc-vo-codes .fslm-license-keys-table tr:first-child td { border-block-start: 0; }
.rc-code-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--rc-s2); }
.rc-code-val { font-family: var(--rc-mono); font-size: 13px; direction: ltr;
  unicode-bidi: isolate; word-break: break-all; user-select: all; }

.rc-vo-totals table { width: 100%; font-size: 13px; border-collapse: collapse; }
.rc-vo-totals th, .rc-vo-totals td { padding-block: var(--rc-s1); text-align: start; }
.rc-vo-totals td:last-child, .rc-vo-totals th:last-child { text-align: end;
  font-variant-numeric: tabular-nums; }
.rc-vo-totals .order-total th, .rc-vo-totals .order-total td { font-weight: 800;
  font-size: 15px; border-block-start: 1px solid var(--rc-line); padding-block-start: var(--rc-s2); }

.rc-vo-actions { display: flex; flex-direction: column; gap: var(--rc-s2);
  margin-block-end: var(--rc-s4); }

details.rc-tech { border: 1px solid var(--rc-line); border-radius: var(--rc-r-md);
  background: var(--rc-card); margin-block-end: var(--rc-s4); font-size: 12px; }
details.rc-tech summary { cursor: pointer; padding: var(--rc-s3) var(--rc-s4);
  font-weight: 700; color: var(--rc-muted); list-style: none; min-height: 44px;
  display: flex; align-items: center; }
details.rc-tech summary::-webkit-details-marker { display: none; }
details.rc-tech summary:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: -2px; }
details.rc-tech .rc-tech-body { padding: 0 var(--rc-s4) var(--rc-s4); color: var(--rc-muted); }

.rc-vo-notes { font-size: 13px; }
.rc-vo-notes li { margin-block-end: var(--rc-s2); }
.rc-vo-notes .meta { font-size: 12px; color: var(--rc-faint); }

@media (prefers-reduced-motion: reduce) {
  .rc-order .copy-order-id, details.rc-tech summary { transition: none; }
}

/* ---------- 21. DIGITAL CODE DELIVERY LAYER (Phase F) ---------- */
/* One coherent, secure code-presentation layer. Presentation only —
   codes are authorized server-side (FSLM); this CSS/JS never reads or
   invents codes. Copy is progressive enhancement on authorized output. */

.rc-codebox-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--rc-s2); margin-block-end: var(--rc-s2); }
.rc-codebox-head .rc-codebox-label { margin: 0; }

.rc-copy-btn {
  display: inline-flex; align-items: center; gap: var(--rc-s1);
  min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--rc-s3);
  border: 1px solid var(--rc-cyan-dark); border-radius: var(--rc-r-pill);
  background: #fff; color: var(--rc-cyan-ink);
  font-size: 13px; font-weight: 700; cursor: pointer;
  flex-shrink: 0; text-decoration: none;
}
.rc-copy-btn::before { content: "⧉"; font-size: 15px; line-height: 1; }
.rc-copy-btn:hover { background: var(--rc-cyan-tint); }
.rc-copy-btn:active { transform: scale(.96); }
.rc-copy-btn:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }
.rc-copy-btn.is-done { border-color: var(--rc-ok); color: var(--rc-ok); }
.rc-copy-btn.is-done::before { content: "✓"; }

.rc-code-sub { display: flex; flex-wrap: wrap; gap: var(--rc-s2); justify-content: center;
  margin-block-start: var(--rc-s2); }

.rc-code-pin {
  font-family: var(--rc-mono); font-size: 15px; font-weight: 700; letter-spacing: 6px;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm);
  padding: var(--rc-s2) var(--rc-s3); user-select: all; white-space: nowrap;
}
.rc-code-pin-label { font-size: 12px; color: var(--rc-muted); font-weight: 700;
  margin: 0 0 var(--rc-s1); }

.rc-code-expiry { font-size: 12px; color: var(--rc-muted); margin: var(--rc-s2) 0 0;
  display: flex; align-items: center; justify-content: center; gap: var(--rc-s1); }
.rc-code-expiry::before { content: "⏳"; }

/* Code state banners — glyph + text, never color-only */
.rc-code-state { display: flex; align-items: flex-start; gap: var(--rc-s2);
  border: 1px solid var(--rc-line); border-radius: var(--rc-r-md);
  background: var(--rc-card); padding: var(--rc-s3) var(--rc-s4);
  font-size: 14px; margin-block-end: var(--rc-s3); }
.rc-code-state::before { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.rc-code-state .rc-code-state-t { font-weight: 800; display: block; margin-block-end: var(--rc-s1); }
.rc-code-state .rc-code-state-d { color: var(--rc-muted); font-size: 13px; }
.rc-code-state .rc-code-state-actions { display: flex; flex-wrap: wrap; gap: var(--rc-s2);
  margin-block-start: var(--rc-s2); }

.rc-code-state.is-ready { background: var(--rc-ok-bg); border-color: #BFE8D6; }
.rc-code-state.is-ready::before { content: "✓"; color: var(--rc-ok); }
.rc-code-state.is-pending { background: var(--rc-warn-bg); border-color: #F0DFB5; }
.rc-code-state.is-pending::before { content: "⏳"; color: var(--rc-warn); }
.rc-code-state.is-failed-payment { background: var(--rc-err-bg); border-color: #F3C2C2; }
.rc-code-state.is-failed-payment::before { content: "✕"; color: var(--rc-err); }
.rc-code-state.is-refunded { background: #F1F3F6; border-color: var(--rc-line); }
.rc-code-state.is-refunded::before { content: "↩"; color: var(--rc-muted); }

/* Pending placeholder — explanatory, never a fake blank code box */
.rc-code-pending .rc-code-pending-t { font-weight: 800; font-size: 15px;
  color: var(--rc-ink); margin-block: var(--rc-s2) var(--rc-s1); }
.rc-code-pending .rc-code-pending-d { font-size: 13px; max-inline-size: 40ch;
  margin-inline: auto; }
.rc-code-pending .rc-spinner { margin-inline: auto; }
.rc-code-pending .rc-code-state-actions { display: flex; flex-wrap: wrap; gap: var(--rc-s2);
  justify-content: center; margin-block-start: var(--rc-s3); }

/* Progressive-enhancement copy buttons injected beside FSLM code cells */
.rc-vo-codes .rc-fslm-copy { display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 40px; min-inline-size: 40px; padding-inline: var(--rc-s2);
  border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm);
  background: #fff; color: var(--rc-cyan-ink); font-size: 12px; font-weight: 700;
  cursor: pointer; margin-block-start: var(--rc-s1); }
.rc-vo-codes .rc-fslm-copy::before { content: "⧉"; margin-inline-end: var(--rc-s1); }
.rc-vo-codes .rc-fslm-copy:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }
.rc-vo-codes .rc-fslm-copy.is-done { color: var(--rc-ok); border-color: var(--rc-ok); }
.rc-vo-codes .rc-fslm-copy.is-done::before { content: "✓"; }

@media (prefers-reduced-motion: reduce) {
  .rc-copy-btn:active { transform: none; }
}

/* ============================================================
 * §22 — Wallet UI rebuild (Phase G, STAGING ONLY)
 * Presentation for /my-account/wps-wallet/. Markup comes from
 * rc-wallet.php plus the wallet plugin's own partials and the
 * gift-card-system plugin's injected tools. Rules below are
 * additive: plugin ids/classes/JS hooks are never renamed,
 * nothing structural is restyled, no display:none on plugin
 * output. All spacing via logical properties (RTL-safe).
 * ============================================================ */

/* 22.1 Wallet container */
.rc-wallet { max-inline-size: 560px; margin-inline: auto; padding-block: var(--rc-s4); }
.rc-wallet > * + * { margin-block-start: var(--rc-s4); }

/* 22.2 Strip plugin chrome that clashes with the design system (keep layout) */
.rc-wallet .wps_wcb_wallet_display_wrapper { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* 22.3 Hero card — .wps_wcb_wallet_balance_container class is KEPT
   (gift-card-system wp_footer jQuery anchors on it); rc-wallet-hero added */
.rc-wallet .rc-wallet-hero { background: var(--rc-card); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg); box-shadow: var(--rc-sh-sm); padding: var(--rc-s5); }
.rc-wallet-kicker { margin: 0 0 var(--rc-s1); font-size: 12px; font-weight: 700; color: var(--rc-muted); }
.rc-wallet-amount { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--rc-ink); }
.rc-wallet-id-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rc-s2);
  margin-block-start: var(--rc-s4); padding-block-start: var(--rc-s3);
  border-block-start: 1px dashed var(--rc-line); }
.rc-wallet-id-label { font-size: 12px; font-weight: 700; color: var(--rc-muted); }
.rc-wallet-id-value { font-family: var(--rc-mono); font-size: 13px; color: var(--rc-ink);
  background: var(--rc-bg); border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm);
  padding: var(--rc-s1) var(--rc-s2); max-inline-size: 100%; overflow-x: auto; }
.rc-wallet-id-copy { display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: var(--rc-s3); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-sm); background: #fff; color: var(--rc-cyan-ink);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rc-wallet-id-copy:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }
.rc-wallet-id-copy.is-done { color: var(--rc-ok); border-color: var(--rc-ok); }
.rc-wallet-id-generate { margin-block-start: var(--rc-s4); }
.rc-wallet-id-submit.rc-btn { inline-size: 100%; }
.rc-wallet-view-txns { margin: var(--rc-s3) 0 0; font-size: 13px; }
.rc-wallet-view-txns a { color: var(--rc-cyan-ink); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 44px; }
.rc-wallet-view-txns a::after { content: "‹"; margin-inline-start: var(--rc-s1); }

/* 22.4 Quick actions — auto-fit grid, 60px touch rows */
.rc-wallet-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--rc-s2); }
.rc-wallet-action { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--rc-s1); min-block-size: 60px; padding: var(--rc-s2); background: var(--rc-card);
  border: 1px solid var(--rc-line); border-radius: var(--rc-r-md); color: var(--rc-ink);
  font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; }
.rc-wallet-action-ic { display: inline-flex; color: var(--rc-cyan-ink); }
.rc-wallet-action:active { transform: scale(.98); }
.rc-wallet-action:focus-visible { outline: 2px solid var(--rc-cyan-dark); outline-offset: 2px; }

/* 22.5 Recent transactions head + txn-list extensions
   (base .rc-txn component already defined in the design system) */
.rc-wallet-recent-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--rc-s2); margin-block-end: var(--rc-s3); }
.rc-wallet-recent-head .rc-section-title { margin: 0; }
.rc-wallet-view-all { display: inline-flex; align-items: center; min-block-size: 44px;
  font-size: 13px; font-weight: 700; color: var(--rc-cyan-ink); text-decoration: none; }
.rc-wallet-view-all::after { content: "‹"; margin-inline-start: var(--rc-s1); }
.rc-txn-list { background: var(--rc-card); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); overflow: hidden; }
.rc-txn-sign { font-size: 18px; font-weight: 800; line-height: 1; }
.rc-txn-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rc-s1);
  margin: var(--rc-s1) 0 0; font-size: 11px; color: var(--rc-faint); }
.rc-txn-sep { color: var(--rc-line); }
.rc-txn-method { color: var(--rc-muted); }

/* 22.6 Tabs → horizontal scroll chip bar (46px chips, scroll-snap) */
.rc-wallet .wallet-tabs { margin-block: var(--rc-s4); }
.rc-wallet .wallet-tabs ul.tabs { display: flex; gap: var(--rc-s2); overflow-x: auto;
  margin: 0; padding: var(--rc-s1); list-style: none; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rc-wallet .wallet-tabs ul.tabs li { flex: none; scroll-snap-align: start; }
.rc-wallet .wallet-tabs ul.tabs li a { display: inline-flex; align-items: center; gap: var(--rc-s2);
  min-block-size: 46px; padding-inline: var(--rc-s4); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-pill); background: var(--rc-card); color: var(--rc-ink);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rc-wallet .wallet-tabs ul.tabs li a svg { inline-size: 22px; block-size: 22px; flex: none; }
.rc-wallet .wallet-tabs ul.tabs li a h3 { margin: 0; font-size: 13px; font-weight: 700; }
.rc-wallet .wallet-tabs ul.tabs li.active a { background: var(--rc-cyan-tint);
  border-color: var(--rc-cyan); color: var(--rc-cyan-ink); }
.rc-wallet .wallet-tabs ul.tabs li a:focus-visible { outline: 2px solid var(--rc-cyan-dark); outline-offset: 2px; }

/* 22.7 Form fields — rc-input treatment (46px, block labels, focus ring, aria-invalid) */
.rc-wallet .wps-wallet-field-container { margin: 0 0 var(--rc-s3); }
.rc-wallet .wps-wallet-field-container > label { display: block; font-size: 13px; font-weight: 700;
  color: var(--rc-ink); margin-block-end: var(--rc-s1); }
.rc-wallet .wps-wallet-field-container input[type="text"],
.rc-wallet .wps-wallet-field-container input[type="email"],
.rc-wallet .wps-wallet-field-container input[type="number"],
.rc-wallet .wps-wallet-field-container input[type="tel"],
.rc-wallet .wps-wallet-field-container select,
.rc-wallet .wps-wallet-field-container textarea { display: block; inline-size: 100%;
  min-block-size: 46px; padding: var(--rc-s2) var(--rc-s3); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); background: #fff; font-family: inherit; font-size: 16px; /* ≥16px: no iOS Safari auto-zoom on focus (DoD 24) */
  color: var(--rc-ink); }
.rc-wallet .wps-wallet-field-container textarea { min-block-size: 96px; resize: vertical; }
.rc-wallet .wps-wallet-field-container input:focus-visible,
.rc-wallet .wps-wallet-field-container select:focus-visible,
.rc-wallet .wps-wallet-field-container textarea:focus-visible { outline: 2px solid var(--rc-cyan);
  outline-offset: 1px; border-color: var(--rc-cyan); }
.rc-wallet .wps-wallet-field-container input[aria-invalid="true"],
.rc-wallet .wps-wallet-field-container select[aria-invalid="true"],
.rc-wallet .wps-wallet-field-container textarea[aria-invalid="true"] { border-color: var(--rc-err); }

/* 22.8 Submit buttons — rc-btn primary 46px */
.rc-wallet .wps-btn__filled.button,
.rc-wallet #wps_recharge_wallet,
.rc-wallet #wps_proceed_transfer,
.rc-wallet #wps_withdrawal_request { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--rc-s2); inline-size: 100%; min-block-size: 46px; padding: 0 var(--rc-s5);
  border-radius: var(--rc-r-md); border: 1px solid transparent; background: var(--rc-cyan);
  color: #04222E; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; }
.rc-wallet .wps-btn__filled.button:hover,
.rc-wallet #wps_recharge_wallet:hover,
.rc-wallet #wps_proceed_transfer:hover,
.rc-wallet #wps_withdrawal_request:hover { background: var(--rc-cyan-dark); color: #fff; }
.rc-wallet .wps-btn__filled.button:active,
.rc-wallet #wps_recharge_wallet:active,
.rc-wallet #wps_proceed_transfer:active,
.rc-wallet #wps_withdrawal_request:active { transform: scale(.98); }
.rc-wallet .wps-btn__filled.button:focus-visible,
.rc-wallet #wps_recharge_wallet:focus-visible,
.rc-wallet #wps_proceed_transfer:focus-visible,
.rc-wallet #wps_withdrawal_request:focus-visible { outline: 2px solid var(--rc-cyan-dark); outline-offset: 2px; }
.rc-wallet .wps-btn__filled.button[disabled],
.rc-wallet #wps_recharge_wallet[disabled],
.rc-wallet #wps_proceed_transfer[disabled],
.rc-wallet #wps_withdrawal_request[disabled] { opacity: .55; cursor: not-allowed; }

/* 22.9 Inline form errors (plugin JS fills p.error / .transfer-error) */
.rc-wallet p.error, .rc-wallet .transfer-error { display: flex; align-items: flex-start;
  gap: var(--rc-s1); margin: var(--rc-s2) 0; font-size: 12px; font-weight: 600; color: var(--rc-err); }
.rc-wallet p.error:not(:empty)::before,
.rc-wallet .transfer-error:not(:empty)::before { content: "⚠"; flex: none; }

/* 22.10 Notices printed by the plugin's show_message_on_form_submit() → rc-alert variants */
.rc-wallet .woocommerce > p.woocommerce-error,
.rc-wallet .woocommerce > p.woocommerce-message { display: flex; gap: var(--rc-s2); align-items: flex-start;
  border-radius: var(--rc-r-sm); padding: var(--rc-s3); font-size: 13px;
  border: 1px solid transparent; margin-block-end: var(--rc-s3); }
.rc-wallet .woocommerce > p.woocommerce-error { background: var(--rc-err-bg); color: var(--rc-err);
  border-color: #F3C2C2; }
.rc-wallet .woocommerce > p.woocommerce-error::before { content: "✕"; font-weight: 800; flex: none; }
.rc-wallet .woocommerce > p.woocommerce-message { background: var(--rc-ok-bg); color: var(--rc-ok);
  border-color: #BFE8D6; }
.rc-wallet .woocommerce > p.woocommerce-message::before { content: "✓"; font-weight: 800; flex: none; }

/* 22.11 Withdrawal pending list (#transactions_table) → stacked cards on mobile.
   thead is visually hidden (clip, NOT display:none); per-cell labels are injected
   as data-th by rc-customer-v1.js (progressive enhancement). */
.rc-wallet #transactions_table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.rc-wallet #transactions_table th, .rc-wallet #transactions_table td { text-align: start;
  padding: var(--rc-s2) var(--rc-s3); border-block-end: 1px solid var(--rc-line-soft); }
.rc-wallet #transactions_table thead th { font-size: 11px; font-weight: 700; color: var(--rc-muted); }
@media (max-width: 767px) {
  .rc-wallet #transactions_table thead { position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rc-wallet #transactions_table, .rc-wallet #transactions_table tbody,
  .rc-wallet #transactions_table tr, .rc-wallet #transactions_table td { display: block; inline-size: 100%; }
  .rc-wallet #transactions_table tr { background: var(--rc-card); border: 1px solid var(--rc-line);
    border-radius: var(--rc-r-md); margin-block-end: var(--rc-s2); padding: var(--rc-s2) var(--rc-s3); }
  .rc-wallet #transactions_table td { display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--rc-s2); border: 0; padding: var(--rc-s1) 0; }
  .rc-wallet #transactions_table td::before { content: attr(data-th); font-size: 11px; font-weight: 700;
    color: var(--rc-muted); flex: none; }
}

/* 22.12 Gift-card plugin (.rca-*) — LIGHT token alignment only.
   The plugin's own stylesheet reads --rca-* override hooks; we map them to
   design-system tokens. No structural restyle; all plugin ids/classes/JS hooks stay. */
.rc-wallet .rca-wallet-tools { --rca-cyan: var(--rc-cyan); --rca-blue-ink: var(--rc-ink);
  --rca-text: var(--rc-ink); --rca-text-soft: var(--rc-muted); --rca-line: var(--rc-line);
  --rca-card: var(--rc-card); --rca-card-solid: var(--rc-card);
  font-family: var(--rc-font); }
.rc-wallet .rca-wallet-tool-card { border-radius: var(--rc-r-md); }
.rc-wallet .rca-wallet-primary-btn, .rc-wallet .rca-wallet-secondary-btn { border-radius: var(--rc-r-sm);
  font-family: var(--rc-font); min-block-size: 46px; }
.rc-wallet .rca-wallet-tool-form label { font-family: var(--rc-font); }

/* 22.13 Calculator result card → rc-kv style rows */
.rc-wallet .rca-calculator-result-card { font-family: var(--rc-font); }
.rc-wallet .rca-calculator-result-title { font-size: 13px; font-weight: 700; color: var(--rc-ink);
  margin-block-end: var(--rc-s2); }
.rc-wallet .rca-calc-row, .rc-wallet .rca-calc-total { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--rc-s2); padding-block: var(--rc-s1);
  font-size: 13px; color: var(--rc-muted); }
.rc-wallet .rca-calc-row + .rca-calc-row, .rc-wallet .rca-calc-total { border-block-start: 1px dashed var(--rc-line); }
.rc-wallet .rca-calc-row strong, .rc-wallet .rca-calc-total strong { color: var(--rc-ink);
  font-variant-numeric: tabular-nums; }
.rc-wallet .rca-calc-total strong { color: var(--rc-cyan-ink); font-size: 15px; }

/* 22.14 rc-modal — transfer/withdrawal confirmation summary (pure UX; same POST) */
.rc-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: var(--rc-s4); background: rgba(11, 27, 43, .55); }
.rc-modal { background: var(--rc-card); border-radius: var(--rc-r-lg); box-shadow: var(--rc-sh-md);
  inline-size: 100%; max-inline-size: 420px; max-block-size: calc(100dvh - var(--rc-s8));
  overflow-y: auto; padding: var(--rc-s5); }
.rc-modal-title { margin: 0 0 var(--rc-s1); font-size: 16px; font-weight: 800; color: var(--rc-ink); }
.rc-modal-sub { margin: 0 0 var(--rc-s3); font-size: 13px; color: var(--rc-muted); }
.rc-modal-kv { margin: 0; border-block-start: 1px solid var(--rc-line-soft); }
.rc-modal-kv > div { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--rc-s2); padding-block: var(--rc-s2); border-block-end: 1px solid var(--rc-line-soft);
  font-size: 13px; }
.rc-modal-kv dt { color: var(--rc-muted); }
.rc-modal-kv dd { margin: 0; font-weight: 700; color: var(--rc-ink); text-align: end;
  overflow-wrap: anywhere; }
.rc-modal-kv dd.rc-ltr { font-variant-numeric: tabular-nums; }
.rc-modal-note { margin: var(--rc-s3) 0 0; font-size: 11px; color: var(--rc-faint); }
.rc-modal-actions { display: flex; gap: var(--rc-s2); margin-block-start: var(--rc-s4); }
.rc-modal-actions .rc-btn { flex: 1; }

/* 22.15 Transactions tab shell */
.rc-wallet-txns-head { margin-block-end: var(--rc-s3); }
.rc-wallet-txns-head .rc-section-title { margin: 0; }

/* 22.16 Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rc-wallet-action:active,
  .rc-wallet .wps-btn__filled.button:active,
  .rc-wallet #wps_recharge_wallet:active,
  .rc-wallet #wps_proceed_transfer:active,
  .rc-wallet #wps_withdrawal_request:active { transform: none; }
  .rc-wallet .wallet-tabs ul.tabs { scroll-snap-type: none; }
}

/* 22.15 Phase G addendum — styles for rc-wallet-transactions.php emitted
   classes (running balance + order link in the txn meta line). Additive only. */
.rc-txn-bal { font-variant-numeric: tabular-nums; color: var(--rc-muted); }
.rc-txn-order { font-weight: 700; color: var(--rc-cyan-ink); font-size: 11px;
  text-decoration: none; display: inline-flex; align-items: center; min-block-size: 24px; }
.rc-txn-order:focus-visible { outline: 2px solid var(--rc-cyan); outline-offset: 2px; }

/* ==========================================================================
   §23 — OTP INLINE LOGIN WRAPPER (Phase H1, STAGING ONLY)
   Presentation wrapper for the guest login on /my-account/. The plugin's own
   CSS (otp-style.css / rc-login-v2.css) stays the base; this layer only
   harmonizes the inline shell, method cards, fields and CTA with the
   rc-customer design system at 390px. Additive only: no markup/JS/nonce/
   hook changes, no display:none on plugin output.
   (Spec said new §22 — §22 is already the Wallet UI rebuild (Phase G),
   so this ships as §23 to avoid a duplicate section number.)
   ========================================================================== */

/* 23.1 Inline container shell. the_content renders an empty
   <div id=otp-inline-container> for guests; if it ever carries the login
   markup, it sits centered in the account column with rc rhythm. */
#otp-inline-container {
  max-width: 480px;
  margin-inline: auto;
  padding-block: 8px 24px;
  direction: rtl;
}
#otp-inline-container:empty { padding-block: 0; }

/* 23.2 Method cards — harmonize radius with rc tokens (rc-r-lg = 16px).
   Plugin sets 20px !important (v1) / 16px (v2); single !important needed
   only to match the plugin's own !important on the same property. */
body.woocommerce-account #otp-login-popup-container .rc-method-card { border-radius: 16px !important; }

/* 23.3 Copy column guard at account scope: title over description, never
   concatenated. The plugin source (Phase H1) carries the authoritative
   rules; this re-asserts the stack for the v1 + v2 copy variants. */
body.woocommerce-account #otp-inline-container .rc-method-card-copy,
body.woocommerce-account #otp-login-popup-container .rc-method-card-copy,
body.woocommerce-account #otp-inline-container .rc-login-v2-method-copy,
body.woocommerce-account #otp-login-popup-container.rc-login-v2 .rc-login-v2-method-copy {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
body.woocommerce-account #otp-inline-container .rc-method-card-copy strong,
body.woocommerce-account #otp-login-popup-container .rc-method-card-copy strong,
body.woocommerce-account #otp-inline-container .rc-login-v2-method-copy strong,
body.woocommerce-account #otp-login-popup-container.rc-login-v2 .rc-login-v2-method-copy strong { display: block; }
body.woocommerce-account #otp-inline-container .rc-method-card-copy small,
body.woocommerce-account #otp-login-popup-container .rc-method-card-copy small,
body.woocommerce-account #otp-inline-container .rc-login-v2-method-copy small,
body.woocommerce-account #otp-login-popup-container.rc-login-v2 .rc-login-v2-method-copy small { display: block; }

/* 23.4 Fields — rc focus ring on the plugin's email/password inputs
   (47px / 12px radius already match rc conventions; additive only). */
body.woocommerce-account #otp-login-popup-container .rc-input-shell #otp-email:focus,
body.woocommerce-account #otp-login-popup-container #pw-email:focus,
body.woocommerce-account #otp-login-popup-container #pw-password:focus {
  outline: none; border-color: #00A9E7; box-shadow: 0 0 0 3px #E8F9FF;
}

/* 23.5 CTA — rc focus ring on the primary OTP/password actions.
   Plugin keeps its gradient, 48px height and 14px radius as the base. */
body.woocommerce-account #otp-login-popup-container .otp-box button.rc-primary-action:focus-visible {
  outline: 2px solid #00A9E7; outline-offset: 2px;
}

/* 23.6 390px guard: keep the v2 sheet inside the viewport with safe-area
   padding on small phones. Plugin sets 92% / max 400px; this only clamps
   the inline fallback if it ever renders in-flow. */
@media (max-width: 480px) {
  #otp-inline-container { padding-inline: 4px; }
}

/* ==========================================================================
   §26. LOYALTY — ROULETTE POINTS (Phase H2, STAGING ONLY)
   (Numbered §26: §23 is the OTP inline wrapper (Phase H1).)
   Canonical widget: WCR_Points::display_points_in_account()
   (wp-content/plugins/wc-roulette-game/includes/class-wcr-points.php),
   pinned to woocommerce_account_dashboard @30. Read-only — untouched.
   This section is a CSS re-scope of its markup only:
     .wcr-account-points > h3 + p.wcr-points-display
     (.wcr-points-value / .wcr-points-label) + a.button (wheel-page CTA).
   Label «نقاط اللعب (ليست رصيداً نقدياً)» is supplied via a scoped
   gettext filter in functions.php (presentation i18n only).
   B4: points are wheel-spin credit, NEVER currency — no SAR / ر.س here.
   Widget renders outside .rc-scope, so token values are re-declared locally.
   ========================================================================== */
.woocommerce-account .wcr-account-points {
  --rc-cyan: #00C8FF; --rc-cyan-dark: #00A9E7; --rc-cyan-ink: #0077A3;
  --rc-cyan-tint: #E8F9FF;
  --rc-ink: #16222E; --rc-muted: #5C6C7D;
  --rc-line: #E5EBF1; --rc-card: #FFFFFF;
  --rc-r-md: 12px; --rc-r-pill: 999px;
  --rc-sh-sm: 0 1px 2px rgba(11,27,43,.06);
  --rc-s2: 8px; --rc-s3: 12px; --rc-s4: 16px;
  --rc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
             "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  background: var(--rc-card);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md);
  box-shadow: var(--rc-sh-sm);
  padding: var(--rc-s4);
  margin-block: var(--rc-s4);
  font-family: var(--rc-font);
  color: var(--rc-ink);
  direction: rtl;
}
.woocommerce-account .wcr-account-points h3 {
  margin: 0 0 var(--rc-s2);
  font-size: 15px;
  font-weight: 800;
  color: var(--rc-ink);
}
.woocommerce-account .wcr-points-display {
  display: flex;
  align-items: baseline;
  gap: var(--rc-s2);
  margin: 0 0 var(--rc-s3);
}
.woocommerce-account .wcr-points-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--rc-cyan-ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.woocommerce-account .wcr-points-label {
  font-size: 12px;
  color: var(--rc-muted);
}
.woocommerce-account .wcr-account-points .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--rc-r-pill);
  background: var(--rc-cyan);
  color: #fff;
  font-family: var(--rc-font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease;
}
.woocommerce-account .wcr-account-points .button:hover {
  background: var(--rc-cyan-dark);
  color: #fff;
}
.woocommerce-account .wcr-account-points .button:focus-visible {
  outline: 2px solid var(--rc-cyan-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-account .wcr-account-points .button { transition: none; }
}

/* ==========================================================================
   §24. WISHLIST (Phase H3, STAGING ONLY)
   Woodmart built-in module — there is NO standalone wishlist plugin and NO
   my-account endpoint. Surface = the wishlist PAGE (/wishlist/, page ID 25):
     wp-content/themes/woodmart/inc/integrations/woocommerce/modules/wishlist/
   Menu item "wishlist" links there via account_navigation_url(); the page
   renders .wd-wishlist-content (class-ui.php:253) with the theme product
   grid (is_wishlist loop prop). Storage/toggle logic untouched.
   Compact product rows: thumb | name+price | actions. Remove + add-to-cart
   (move-to-cart) are preserved — no JS changed, selectors only re-layout.
   rc-customer-v1 is enqueued on the wishlist page (functions.php, §24 note).
   Tokens re-declared locally: the wishlist page has no .rc-scope wrapper.
   ========================================================================== */
.wd-wishlist-content {
  --rcw-ink: #16222E; --rcw-muted: #5C6C7D;
  --rcw-line: #E5EBF1; --rcw-card: #FFFFFF;
  --rcw-cyan: #00C8FF; --rcw-cyan-dark: #00A9E7; --rcw-cyan-ink: #0077A3;
  --rcw-err: #C03535;
  --rcw-r: 12px;
  --rcw-sh: 0 1px 2px rgba(11,27,43,.06);
  --rcw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
              "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  font-family: var(--rcw-font);
  color: var(--rcw-ink);
  direction: rtl;
}
/* List header: title + bulk actions */
.wd-wishlist-content .wd-wishlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px;
}
.wd-wishlist-content .wd-wishlist-head .title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--rcw-ink);
}
.wd-wishlist-content .wd-wishlist-bulk-action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wd-wishlist-content .wd-wishlist-bulk-action a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rcw-muted);
  text-decoration: none;
}
/* Compact rows: the theme grid becomes a single-column row stack */
.wd-wishlist-content .products,
.wd-wishlist-content ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wd-wishlist-content .products .product-grid-item {
  background: var(--rcw-card);
  border: 1px solid var(--rcw-line);
  border-radius: var(--rcw-r);
  box-shadow: var(--rcw-sh);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: start;
}
/* Remove action sits top-inline-end of the row; wrapper spans full width */
.wd-wishlist-content .wd-wishlist-product-actions {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.wd-wishlist-content .wd-product-wrapper {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.wd-wishlist-content .wd-product-thumb {
  inline-size: 72px;
}
.wd-wishlist-content .wd-product-thumb img {
  border-radius: 8px;
}
/* Hide hover-only clutter inside compact rows (quick view / compare /
   swatch galleries stay available on the product page itself) */
.wd-wishlist-content .wd-product-thumb .wd-buttons,
.wd-wishlist-content .wrapp-swatches {
  display: none;
}
.wd-wishlist-content .product-element-bottom {
  min-inline-size: 0;
}
.wd-wishlist-content .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--rcw-ink);
  margin-block: 0 4px;
}
.wd-wishlist-content .product-element-bottom .price {
  font-size: 14px;
  font-weight: 800;
  color: var(--rcw-ink);
  margin-block-end: 8px;
}
/* Actions: remove (preserved) + add-to-cart = move-to-cart (preserved) */
.wd-wishlist-content a.wd-wishlist-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding-block: 6px;
  color: var(--rcw-err);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.wd-wishlist-content a.wd-wishlist-remove:focus-visible {
  outline: 2px solid var(--rcw-err);
  outline-offset: 2px;
}
.wd-wishlist-content .wd-add-btn .button,
.wd-wishlist-content .wd-add-btn .add_to_cart_button {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding-inline: 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
/* Empty state */
.wd-wishlist-content .wd-empty-block.wd-empty-wishlist {
  text-align: center;
  padding: 40px 16px;
}
.wd-wishlist-content .wd-empty-block-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--rcw-ink);
  margin: 0 0 8px;
}
.wd-wishlist-content .wd-empty-block-text {
  font-size: 13px;
  color: var(--rcw-muted);
  margin: 0 0 16px;
}
.wd-wishlist-content .wd-empty-block-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding-inline: 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .wd-wishlist-content *,
  .wd-wishlist-content *::before,
  .wd-wishlist-content *::after {
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   §25. REVIEWS LIST (Phase H4, STAGING ONLY)
   Endpoint /my-account/my-reviews/ → my_reviews_page_content()
   (functions.php): .rc-reviews > .my-reviews-list > .review-item cards.
   (The .rc-reviews wrapper is presentation plumbing added in Phase H2-H4;
   the echo content it wraps is unchanged.)
   Modal markup + JS + review_ajax handler are BYTE-IDENTICAL (verified
   against orders.php.pre-e.bak / functions.php.pre-g2.bak) and untouched.
   SCOPE NOTE: the list renderer prints heavy inline styles
   (border/padding/margin on .review-item, inline colors on .star-rating and
   the date line, a physical margin-right on the thumbnail). Those can only
   be overridden with !important, which this project forbids as a hack, so
   §25 restyles everything the cascade can reach cleanly: list layout,
   heading hierarchy, typography, links, thumbnails, date line, empty state.
   Full visual parity needs the inline styles moved to classes (PHP edit —
   flagged as a remaining issue, not done here).
   ========================================================================== */
.woocommerce-account .rc-reviews .my-reviews-list {
  --rcr-ink: #16222E; --rcr-muted: #5C6C7D;
  --rcr-line: #E5EBF1; --rcr-card: #FFFFFF;
  --rcr-cyan-ink: #0077A3;
  --rcr-r: 12px;
  --rcr-sh: 0 1px 2px rgba(11,27,43,.06);
  --rcr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
              "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  font-family: var(--rcr-font);
  color: var(--rcr-ink);
  direction: rtl;
  display: grid;
  gap: 12px;
  margin-block: 16px 0;
  padding: 0;
}
/* Endpoint title (echoed as bare h2 in my_reviews_page_content) */
.woocommerce-account .rc-reviews > h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--rcr-ink);
  margin: 0 0 16px;
}
/* Review cards: inline border/padding stay (see scope note); additive only */
.woocommerce-account .rc-reviews .my-reviews-list .review-item {
  font-family: var(--rcr-font);
  box-shadow: var(--rcr-sh);
}
.woocommerce-account .rc-reviews .my-reviews-list .review-item h3 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}
.woocommerce-account .rc-reviews .my-reviews-list .review-item h3 a {
  color: var(--rcr-ink);
  text-decoration: none;
}
.woocommerce-account .rc-reviews .my-reviews-list .review-item h3 a:hover {
  color: var(--rcr-cyan-ink);
}
.woocommerce-account .rc-reviews .my-reviews-list .review-item .star-rating {
  letter-spacing: 1px;
}
.woocommerce-account .rc-reviews .my-reviews-list .review-item img {
  border-radius: 8px;
}
/* Empty state ("You haven't written any reviews yet.") */
.woocommerce-account .rc-reviews > p {
  color: var(--rcr-muted);
  font-size: 14px;
  text-align: center;
  padding-block: 24px;
  margin: 0;
}

/* ==========================================================================
   PHASE I — thank-you (2026-09-29)
   Staging-only rebuild of the /order-completed/ landing ([rasid_order_completed]).
   Rendered by woodmart-child/woocommerce/rc-thankyou.php inside .rc-scope.
   Additive ONLY: no rule above this line was modified or reordered.
   Logical properties only · touch targets ≥44px · reduced-motion safe.
   ========================================================================== */

/* Hero: success medallion + title (uses rc-scope tokens; animation guarded). */
.rc-i-hero { text-align: center; padding-block: var(--rc-s6) var(--rc-s5); }
.rc-i-check {
  inline-size: 76px; block-size: 76px; border-radius: 22px;
  margin-inline: auto; margin-block-end: var(--rc-s4);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rc-cyan), var(--rc-cyan-dark));
  box-shadow: 0 14px 30px rgba(0,200,255,.22);
  animation: rc-i-pop .45s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes rc-i-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.rc-i-check svg { inline-size: 36px; block-size: 36px; }
.rc-i-title { font-size: 20px; font-weight: 800; margin: 0 0 var(--rc-s2); color: var(--rc-ink); }
.rc-i-sub { color: var(--rc-muted); font-size: 14px; line-height: 1.9; margin: 0 auto; max-inline-size: 34em; }

/* Cards: thin wrapper around design-system components. */
.rc-i-card {
  background: var(--rc-card); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg); box-shadow: var(--rc-sh-sm);
  padding: var(--rc-s4);
}
.rc-i-card > .rc-section-title { margin-block-end: var(--rc-s3); }

/* Product lines in the summary card. */
.rc-i-items { list-style: none; margin: var(--rc-s3) 0 0; padding: 0; }
.rc-i-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--rc-s3); min-inline-size: 0; padding-block: var(--rc-s2);
}
.rc-i-item + .rc-i-item { border-block-start: 1px solid var(--rc-line-soft); }
.rc-i-item-name { font-weight: 700; min-inline-size: 0; }
.rc-i-item-meta { color: var(--rc-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Multi-line FSLM payloads: let the code box wrap instead of forcing a
   single nowrap line. Copy copies the full payload verbatim. */
.rc-i-pre .rc-code { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }

/* «إتمام الدفع» action under the failed-payment state. */
.rc-i-pay-action { margin-block-start: var(--rc-s3); }

/* Next-steps numbered list. */
.rc-i-steps { display: grid; gap: var(--rc-s3); list-style: none; margin: 0; padding: 0; }
.rc-i-step {
  display: flex; gap: var(--rc-s3); align-items: flex-start;
  background: var(--rc-cyan-tint); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-md); padding: var(--rc-s3);
}
.rc-i-step-no {
  inline-size: 34px; block-size: 34px; min-inline-size: 34px; flex-shrink: 0;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--rc-cyan-ink);
  background: rgba(0,200,255,.12);
}
.rc-i-step h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--rc-ink); }
.rc-i-step p { margin: 0; color: var(--rc-muted); font-size: 13px; line-height: 1.8; }

/* Support card: stacked 46px buttons + login hint. */
.rc-i-support-note { color: var(--rc-muted); font-size: 14px; line-height: 1.8; margin: 0 0 var(--rc-s3); }
.rc-i-support-btns { display: grid; gap: var(--rc-s3); }
.rc-i-foot { color: var(--rc-muted); font-size: 14px; line-height: 1.8; margin: var(--rc-s3) 0 0; }
.rc-i-foot a { color: var(--rc-cyan-ink); font-weight: 800; text-decoration: none; }

/* Bottom action stack. */
.rc-i-actions { display: grid; gap: var(--rc-s3); }

@media (prefers-reduced-motion: reduce) {
  .rc-i-check { animation: none; }
}

/* ==========================================================================
   §28 — RESPONSIVE + ACCESSIBILITY POLISH (Phase J, STAGING ONLY)
   Logical audit of §§1–27 + Phase I at 320–430px. True device widths still
   need the owner's iPhone (see handoff) — nothing here claims device proof.
   Additive ONLY: no rule above this line was modified or reordered.
   (§27 was never issued; numbering continues at §28.)
   ========================================================================== */

/* 28.1 Recovered keyframes lost in the Phase E relocation.
   The original inline <style> defined @keyframes rcModalIn
   (orders.php.pre-e.bak:563) and @keyframes rcSpin (:679); the two
   `animation:` declarations survived in §18 but the keyframes did not —
   the modal entrance and the review-loading spinner were dead no-ops.
   Restored verbatim from the backup. */
@keyframes rcModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes rcSpin {
    to { transform: rotate(360deg); }
}

/* 28.2 Reduced-motion guards for the recovered animations.
   (§15 already covers .rc-skel/.rc-spinner/.rc-btn.) */
@media (prefers-reduced-motion: reduce) {
  #review-modal .modal-box { animation: none; }
  #review-modal .rc-loader { animation: none; }
}

/* 28.3 WCAG AA contrast fixes (4.5:1 for normal text).
   --rc-faint #8B98A6 → #697684  (2.94 → 4.64 on white)
   --rc-ok    #14936D → #12805F  (3.57 → 4.52 on --rc-ok-bg; also fixes 14px
                                  amounts/badges on white)
   --rc-warn  #A86A12 → #96650F  (4.16 → 4.73 on --rc-warn-bg)
   Tokens are scoped to .rc-scope (§1); re-declared at the same scope so
   source order wins. No other token values change. */
.rc-scope {
  --rc-faint: #697684;
  --rc-ok: #12805F;
  --rc-warn: #96650F;
}
/* Primary-button hover kept readable (white on --rc-cyan-dark was 2.68:1). */
.rc-scope .rc-btn-primary:hover { color: #04222E; }

/* 28.4 Touch targets: 44px minimum on all rebuilt interactive controls. */
.rc-scope .rc-btn-sm { min-block-size: 44px; } /* was 40px: order actions, copy, pagination */
.rc-scope .rc-order .copy-order-id { min-width: 44px; min-height: 44px; } /* was 32px */
.rc-scope .rc-vo-codes .rc-fslm-copy { min-block-size: 44px; min-inline-size: 44px; } /* was 40px */
.rc-scope .rpb-submit { min-height: 44px !important; } /* was 42px */
/* Review-modal close: 36px glyph, 44px hit area, logical inline-end
   placement (replaces the physical `left` kept verbatim from §18). */
#review-modal .modal-box .modal-close {
  min-width: 44px; min-height: 44px;
  left: auto; inset-inline-end: 19px;
}
#review-modal .modal-box .modal-close:focus-visible {
  outline: 2px solid var(--rc-cyan-dark); outline-offset: 2px;
}
/* Keep the ≤640px close-button offset, expressed logically. */
@media (max-width: 640px) {
  #review-modal .modal-box .modal-close { top: 14px; inset-inline-end: 14px; }
}
/* Heading clearance for the close button, expressed logically. */
#review-modal .modal-heading { padding-left: 0; padding-inline-start: 36px; }

/* 28.5 Restore the desktop review-modal layout.
   REGRESSION FOUND IN AUDIT: the `@media (max-width: 640px)` wrapper from the
   original inline <style> (orders.php.pre-e.bak:887) was dropped in the Phase E
   relocation, so the bottom-sheet rules leaked to ALL widths — on desktop the
   modal rendered as a bottom sheet (align-items:flex-end, full-bleed width,
   square top corners, stacked product block). The ≤640px behavior below is
   unchanged; ≥641px re-asserts the original desktop values. */
@media (min-width: 641px) {
  #review-modal { align-items: center; justify-content: center; padding: 24px; }
  #review-modal .modal-box {
    width: min(720px, 100%); max-height: min(82vh, 760px);
    border-radius: 22px !important; padding: 26px !important;
  }
  #review-modal .modal-close { top: 19px; }
  #review-modal .modal-heading { padding-inline-start: 0; }
  #review-modal .modal-heading-icon { width: 42px; height: 42px; }
  #review-modal .modal-title { font-size: 19px !important; }
  #review-modal .review-product-block {
    display: grid;
    grid-template-columns: minmax(140px, .72fr) minmax(220px, 1.28fr);
    padding: 18px !important; border-radius: 16px !important;
  }
  #review-modal .rpb-name { margin: 0 !important; }
  #review-modal .star-rating-input { margin-bottom: 0 !important; justify-content: flex-start !important; }
  #review-modal .star-rating-input label { font-size: 29px !important; }
  #review-modal .review-textarea { min-height: 90px !important; }
  #review-modal .rpb-submit { width: auto !important; margin-top: 2px !important; }
  #review-modal .rpb-msg { margin-top: 0 !important; }
}

/* 28.6 kv rows: no horizontal overflow at 320px (long emails/addresses). */
.rc-scope .rc-kv > * { min-inline-size: 0; }
.rc-scope .rc-kv dd { overflow-wrap: anywhere; }
.rc-scope .rc-modal-kv > div > * { min-inline-size: 0; }

/* 28.7 Order-list head: the id + copy affordance never squeeze each other. */
.rc-scope .rc-order-head { flex-wrap: wrap; }
.rc-scope .rc-order-head > * { min-inline-size: 0; }

/* ============================================================
   §RCX-W2 — Orders + Order details + Digital codes (GATE 2 / W2, 2026-09-29)
   RCX token-system components for the W2 surfaces. Appended at EOF per
   worker rules; earlier sections are untouched. New classes are rcx-* only;
   .rc-copy-btn is kept as the existing JS copy hook (rc-customer-v1.js
   binds it — JS untouched) alongside rcx-copy-btn visuals.
   No rules here override legacy dark sources (functions.php dark block,
   rch-account.css): components are fully self-styled with token colors at
   source. If legacy dark paint persists after W1's removal, report to lead
   instead of layering overrides.
   ============================================================ */

/* §RCX-W2.1 — RCX token variables (canonical values, RCX-TOKENS.md).
   Scoped to .rc-scope, the wrapper every W2 template renders inside. */
.rc-scope {
  --rcx-surface-page: #F4F6F9;
  --rcx-surface-card: #FFFFFF;
  --rcx-surface-subtle: #EEF2F6;
  --rcx-surface-brand: #0B1B2B;
  --rcx-surface-success: #E9F7F0;
  --rcx-surface-warning: #FFF6E6;
  --rcx-surface-error: #FDECEC;
  --rcx-surface-info: #E8F9FF;
  --rcx-accent: #00C8FF;
  --rcx-accent-deep: #009BD6;
  --rcx-on-accent: #06283A;
  --rcx-ink: #15222E;
  --rcx-ink-2: #3D4E5F;
  --rcx-ink-3: #68798B;
  --rcx-on-dark: #FFFFFF;
  --rcx-border: #E2E8F0;
  --rcx-border-subtle: #EEF2F6;
  --rcx-r-sm: 8px;
  --rcx-r-md: 12px;
  --rcx-r-lg: 16px;
  --rcx-r-pill: 999px;
  --rcx-shadow-sm: 0 1px 2px rgba(11,27,43,.06);
}

/* §RCX-W2.2 — Page head + LTR isolation */
.rcx-page-head { margin-block-end: 16px; }
.rcx-page-title { font-size: 20px; font-weight: 800; line-height: 1.5; color: var(--rcx-ink); margin: 0; }
.rcx-page-sub { font-size: 13px; line-height: 1.8; color: var(--rcx-ink-2); margin: 4px 0 0; }
.rcx-ltr { direction: ltr; unicode-bidi: isolate; }

/* §RCX-W2.3 — RCX status badges: icon + Arabic label, AA contrast (tokens §9).
   Never color-alone. Unknown statuses fall back to the neutral base. */
.rcx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
  border-radius: var(--rcx-r-pill); border: 1px solid var(--rcx-border);
  background: var(--rcx-surface-subtle); color: var(--rcx-ink-2);
  font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.rcx-badge::before { font-size: 12px; line-height: 1; }
.rcx-badge.is-completed { background: var(--rcx-surface-success); color: #0F7A52; border-color: #BFE8D6; }
.rcx-badge.is-completed::before { content: "✓"; }
.rcx-badge.is-processing { background: var(--rcx-surface-info); color: #0B6E99; border-color: #BFE6F5; }
.rcx-badge.is-processing::before { content: "◐"; }
.rcx-badge.is-pending { background: var(--rcx-surface-warning); color: #8A5A00; border-color: #F0DFB5; }
.rcx-badge.is-pending::before { content: "⏳"; }
.rcx-badge.is-on-hold { background: #EDEFF3; color: #3D4E5F; border-color: #D8DEE6; }
.rcx-badge.is-on-hold::before { content: "⏸"; }
.rcx-badge.is-cancelled { background: #EDEFF3; color: #5A6B7D; border-color: #D8DEE6; }
.rcx-badge.is-cancelled::before { content: "⊘"; }
.rcx-badge.is-failed { background: var(--rcx-surface-error); color: #B3261E; border-color: #F3C2C2; }
.rcx-badge.is-failed::before { content: "✕"; }
.rcx-badge.is-refunded { background: #EDEFF3; color: #3D4E5F; border-color: #D8DEE6; }
.rcx-badge.is-refunded::before { content: "↩"; }

/* §RCX-W2.4 — RCX buttons (tokens §8). Min touch target 44px everywhere. */
.rcx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 48px; padding-inline: 20px; border-radius: var(--rcx-r-md);
  border: 1px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.5;
  text-decoration: none; cursor: pointer; }
.rcx-btn:hover { filter: brightness(.96); }
.rcx-btn:active { transform: scale(.98); }
.rcx-btn:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-btn-primary { background: var(--rcx-accent); color: var(--rcx-on-accent); }
.rcx-btn-secondary { background: #FFFFFF; color: var(--rcx-ink); border-color: var(--rcx-border); }
.rcx-btn-secondary:hover { background: var(--rcx-surface-subtle); filter: none; }
.rcx-btn-tertiary { background: transparent; color: var(--rcx-accent-deep);
  min-block-size: 44px; padding-inline: 12px; }
.rcx-btn-tertiary:hover { text-decoration: underline; filter: none; }
.rcx-btn-ghost { background: transparent; color: var(--rcx-ink-2); border-color: var(--rcx-border); }
.rcx-btn-ghost:hover { background: var(--rcx-surface-subtle); filter: none; }
.rcx-btn-sm { min-block-size: 44px; padding-inline: 16px; font-size: 14px; }
.rcx-btn-block { display: flex; inline-size: 100%; }
.rcx-btn[disabled] { background: var(--rcx-surface-subtle); color: var(--rcx-ink-3);
  cursor: not-allowed; filter: none; }

/* §RCX-W2.5 — Cards, section titles, key-value rows */
.rcx-card { background: var(--rcx-surface-card); border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md); padding: 16px; margin-block-end: 16px; color: var(--rcx-ink); }
.rcx-section-title { font-size: 16px; font-weight: 700; line-height: 1.6;
  color: var(--rcx-ink); margin: 0 0 12px; }
.rcx-kv { margin: 0; }
.rcx-kv-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding-block: 8px; }
.rcx-kv-row + .rcx-kv-row { border-block-start: 1px solid var(--rcx-border-subtle); }
.rcx-kv-row > dt { font-size: 13px; color: var(--rcx-ink-2); margin: 0; flex-shrink: 0; }
.rcx-kv-row > dd { font-size: 14px; font-weight: 700; color: var(--rcx-ink); margin: 0;
  text-align: end; min-inline-size: 0; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; }
.rcx-kv-row.is-total > dt, .rcx-kv-row.is-total > dd { font-size: 16px; font-weight: 800; }

/* §RCX-W2.6 — Order cards (orders list) */
.rcx-order-list { display: flex; flex-direction: column; gap: 12px; margin-block-end: 16px; }
.rcx-order-card { background: var(--rcx-surface-card); border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md); padding: 16px; color: var(--rcx-ink);
  display: flex; flex-direction: column; gap: 8px; }
.rcx-order-card-top { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; }
.rcx-order-id { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.rcx-order-num { font-size: 15px; font-weight: 800; color: var(--rcx-ink);
  font-variant-numeric: tabular-nums; }
.rcx-copy-order { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border-radius: var(--rcx-r-sm);
  border: 1px solid var(--rcx-border); background: var(--rcx-surface-subtle);
  color: var(--rcx-ink-2); cursor: pointer; flex-shrink: 0; padding: 0; }
.rcx-copy-order { inline-size: auto; padding-inline: 12px; gap: 6px; }
.rcx-copy-order svg { inline-size: 16px; block-size: 16px; flex-shrink: 0; }
.rcx-copy-label { font-size: 13px; font-weight: 700; color: var(--rcx-ink-2); line-height: 1; }
.rcx-copy-order:hover { color: var(--rcx-ink); border-color: var(--rcx-ink-3); }
.rcx-copy-order:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-copy-confirm { display: none; font-size: 12px; font-weight: 700; color: #0F7A52; }
.rcx-order-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rcx-order-date { font-size: 13px; color: var(--rcx-ink-2); }
.rcx-order-total { font-size: 18px; font-weight: 800; color: var(--rcx-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcx-order-products { margin: 0; font-size: 13px; line-height: 1.8; color: var(--rcx-ink-2); }
.rcx-order-fulfill { margin: 0; display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; font-weight: 700; line-height: 1.7;
  padding: 8px 12px; border-radius: var(--rcx-r-sm); border: 1px solid transparent; }
.rcx-order-fulfill.is-ready { background: var(--rcx-surface-success); color: #0F7A52; border-color: #BFE8D6; }
.rcx-order-fulfill.is-wait { background: var(--rcx-surface-warning); color: #8A5A00; border-color: #F0DFB5; }
.rcx-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 4px; }

/* §RCX-W2.7 — Pagination: obvious + usable */
.rcx-pager { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.rcx-pager-num, .rcx-pager-nav { display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 44px; min-block-size: 44px; padding-inline: 12px; border-radius: var(--rcx-r-sm);
  border: 1px solid var(--rcx-border); background: #FFFFFF; color: var(--rcx-ink);
  font-size: 14px; font-weight: 700; text-decoration: none; }
a.rcx-pager-num:hover, a.rcx-pager-nav:hover { background: var(--rcx-surface-subtle); }
a.rcx-pager-num:focus-visible, a.rcx-pager-nav:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-pager-num.is-current { background: var(--rcx-accent); border-color: var(--rcx-accent);
  color: var(--rcx-on-accent); }
.rcx-pager-nav { padding-inline: 16px; }
.rcx-pager-gap { color: var(--rcx-ink-3); padding-inline: 4px; }

/* §RCX-W2.8 — Empty state (tokens §11) */
.rcx-empty { text-align: center; padding: 32px 16px; background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-lg); color: var(--rcx-ink); }
.rcx-empty-ico { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border-radius: var(--rcx-r-md);
  background: var(--rcx-surface-subtle); font-size: 22px; margin-block-end: 12px; }
.rcx-empty-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--rcx-ink); }
.rcx-empty-txt { font-size: 13px; line-height: 1.8; color: var(--rcx-ink-2);
  margin: 0 auto 16px; max-inline-size: 40ch; }

/* §RCX-W2.9 — Order details: summary, items, fulfillment strip */
.rcx-vo-summary-top { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-block-end: 12px; }
.rcx-vo-title { font-size: 20px; font-weight: 800; line-height: 1.5;
  color: var(--rcx-ink); margin: 0; }
.rcx-fulfill { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--rcx-r-md);
  padding: 12px 16px; margin-block-end: 16px; font-size: 14px; line-height: 1.8;
  border: 1px solid var(--rcx-border); background: var(--rcx-surface-card); color: var(--rcx-ink); }
.rcx-fulfill.is-ready { background: var(--rcx-surface-success); border-color: #BFE8D6; }
.rcx-fulfill.is-wait { background: var(--rcx-surface-warning); border-color: #F0DFB5; }
.rcx-fulfill a { font-weight: 700; color: inherit; }
.rcx-vo-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding-block: 8px; }
.rcx-vo-item + .rcx-vo-item { border-block-start: 1px solid var(--rcx-border-subtle); }
.rcx-vo-item-main { min-inline-size: 0; }
.rcx-vo-item-name { font-size: 14px; font-weight: 700; line-height: 1.7;
  color: var(--rcx-ink); overflow-wrap: anywhere; }
.rcx-vo-item-qty { font-size: 12px; color: var(--rcx-ink-3); margin-block-start: 4px; }
.rcx-vo-item-total { font-size: 14px; font-weight: 700; color: var(--rcx-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.rcx-vo-address { font-style: normal; font-size: 14px; line-height: 1.9; color: var(--rcx-ink-2);
  margin: 12px 0 0; padding-block-start: 12px; border-block-start: 1px solid var(--rcx-border-subtle); }

/* §RCX-W2.10 — Order details: notes, actions, technical details */
.rcx-vo-notes ol { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px; }
.rcx-vo-notes li { font-size: 14px; line-height: 1.9; color: var(--rcx-ink); }
.rcx-vo-note-meta { font-size: 12px; color: var(--rcx-ink-3); margin-block-end: 4px; }
.rcx-vo-actions { display: flex; flex-direction: column; gap: 8px; margin-block: 16px; }
.rcx-tech { border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-md);
  background: var(--rcx-surface-card); margin-block-end: 16px; color: var(--rcx-ink); }
.rcx-tech summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px;
  color: var(--rcx-ink-2); list-style: none; min-block-size: 44px;
  display: flex; align-items: center; }
.rcx-tech summary::-webkit-details-marker { display: none; }
.rcx-tech summary:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: -2px; }
.rcx-tech-body { padding: 0 16px 16px; }

/* §RCX-W2.11 — rcx-codebox: product / status / code / PIN / copy / instructions */
.rcx-codebox { border: 1.5px dashed var(--rcx-accent-deep); background: var(--rcx-surface-info);
  border-radius: var(--rcx-r-md); padding: 16px; text-align: center; color: var(--rcx-ink); }
.rcx-codebox-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-block-end: 12px; text-align: start; }
.rcx-codebox-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--rcx-ink-2);
  min-inline-size: 0; overflow-wrap: anywhere; }
.rcx-copy-btn { display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 16px;
  border: 1px solid var(--rcx-accent-deep); border-radius: var(--rcx-r-pill);
  background: #FFFFFF; color: #0B6E99; font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; text-decoration: none; }
.rcx-copy-btn::before { content: "⧉"; font-size: 15px; line-height: 1; }
.rcx-copy-btn:hover { background: var(--rcx-surface-info); }
.rcx-copy-btn:active { transform: scale(.96); }
.rcx-copy-btn:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-copy-btn.is-done { border-color: #0F7A52; color: #0F7A52; }
.rcx-copy-btn.is-done::before { content: "✓"; }
.rcx-code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--rcx-ink);
  direction: ltr; unicode-bidi: isolate; word-break: break-all; user-select: all;
  margin-block-end: 4px; }
.rcx-code-sub { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-block-start: 8px; }
.rcx-code-pin-label { font-size: 12px; color: var(--rcx-ink-3); font-weight: 700; margin: 0 0 4px; }
.rcx-code-pin { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 4px; color: var(--rcx-ink);
  direction: ltr; unicode-bidi: isolate; display: inline-block; background: #FFFFFF;
  border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-sm);
  padding: 8px 12px; user-select: all; white-space: nowrap; }
.rcx-code-expiry { font-size: 12px; color: var(--rcx-ink-3); margin: 8px 0 0; line-height: 1.7; }
.rcx-codebox-hint { font-size: 12px; color: var(--rcx-ink-3); margin: 12px 0 0; line-height: 1.7; }

/* §RCX-W2.12 — Code states: ready / processing / failed-payment / refunded */
.rcx-code-state { display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-md);
  background: var(--rcx-surface-card); padding: 12px 16px;
  font-size: 14px; margin-block-end: 12px; color: var(--rcx-ink); }
.rcx-code-state::before { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.rcx-code-state-t { font-weight: 800; display: block; margin-block-end: 4px; }
.rcx-code-state-d { color: var(--rcx-ink-2); font-size: 13px; line-height: 1.8; }
.rcx-code-state-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.rcx-code-state.is-ready { background: var(--rcx-surface-success); border-color: #BFE8D6; }
.rcx-code-state.is-ready::before { content: "✓"; color: #0F7A52; }
.rcx-code-state.is-processing { background: var(--rcx-surface-warning); border-color: #F0DFB5; }
.rcx-code-state.is-processing::before { content: "⏳"; color: #8A5A00; }
.rcx-code-state.is-failed-payment { background: var(--rcx-surface-error); border-color: #F3C2C2; }
.rcx-code-state.is-failed-payment::before { content: "✕"; color: #B3261E; }
.rcx-code-state.is-refunded { background: #F1F3F6; border-color: var(--rcx-border); }
.rcx-code-state.is-refunded::before { content: "↩"; color: var(--rcx-ink-2); }

/* §RCX-W2.13 — Code pending placeholder (explanatory, never a fake code box) */
.rcx-code-pending { padding: 24px 16px; text-align: center; color: var(--rcx-ink); }
.rcx-spinner { inline-size: 24px; block-size: 24px; border-radius: 50%;
  border: 3px solid var(--rcx-border); border-block-start-color: var(--rcx-accent-deep);
  margin-inline: auto; animation: rcx-spin 1s linear infinite; }
@keyframes rcx-spin { to { transform: rotate(360deg); } }
.rcx-code-pending-t { font-weight: 800; font-size: 15px; color: var(--rcx-ink); margin: 8px 0 4px; }
.rcx-code-pending-d { font-size: 13px; line-height: 1.8; color: var(--rcx-ink-2);
  max-inline-size: 40ch; margin: 0 auto; }
.rcx-code-pending .rcx-code-state-actions { justify-content: center; }

/* §RCX-W2.14 — FSLM table: wrap-and-style (protected markup, CSS only).
   Desktop: light table skin. Mobile: stacked key-value rows. */
.rcx-fslm-wrap h4 { font-size: 15px; font-weight: 700; color: var(--rcx-ink); margin: 0 0 8px; }
.rcx-fslm-wrap .fslm-download-keys { margin-block-end: 12px; }
.rcx-vo-codes .fslm-license-keys-table { inline-size: 100%; border-collapse: collapse;
  font-size: 14px; color: var(--rcx-ink); }
.rcx-vo-codes .fslm-license-keys-table th { text-align: start; font-size: 12px; font-weight: 700;
  color: var(--rcx-ink-3); padding: 8px; border-block-end: 1px solid var(--rcx-border); }
.rcx-vo-codes .fslm-license-keys-table td { padding: 12px 8px; vertical-align: top;
  border-block-start: 1px solid var(--rcx-border-subtle); color: var(--rcx-ink); }
.rcx-vo-codes .fslm-license-keys-table tbody tr:first-child td { border-block-start: 0; }
@media (max-width: 640px) {
  /* Responsive table → stacked rows (sr-only thead keeps AT access). */
  .rcx-vo-codes .fslm-license-keys-table thead { position: absolute; inline-size: 1px;
    block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; }
  .rcx-vo-codes .fslm-license-keys-table,
  .rcx-vo-codes .fslm-license-keys-table tbody,
  .rcx-vo-codes .fslm-license-keys-table tr,
  .rcx-vo-codes .fslm-license-keys-table td { display: block; inline-size: 100%; }
  /* FIX5: FSLM plugin emits inline width:20%/80% on th/td which beats inline-size:100%. Neutralize so mobile stacked cards use full width. */
  .rcx-vo-codes .fslm-license-keys-table th,
  .rcx-vo-codes .fslm-license-keys-table td { width: 100% !important; }
  .rcx-vo-codes .fslm-license-keys-table tr { border: 1px solid var(--rcx-border-subtle);
    border-radius: var(--rcx-r-md); padding: 4px 12px; margin-block-end: 12px; }
  .rcx-vo-codes .fslm-license-keys-table tbody tr:first-child td { border-block-start: 0; }
  .rcx-vo-codes .fslm-license-keys-table td { border: 0; padding: 8px 0; }
  /* FIX5: stack code+copy button vertically on mobile so the code uses full width. */
  .rcx-vo-codes .rcx-code-row { flex-direction: column; align-items: stretch; }
  .rcx-vo-codes .rcx-code-val { inline-size: 100%; }
  .rcx-vo-codes .rcx-copy-code { inline-size: 100%; justify-content: center; }
  .rcx-vo-codes .fslm-license-keys-table td + td { border-block-start: 1px dashed var(--rcx-border-subtle); }
}

/* §RCX-W2.15 — Progressive-enhancement copy rows injected beside FSLM code cells
   (view-order.php inline JS; authorized output only). Copy ≥44px. */
.rcx-code-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-block-start: 8px; }
.rcx-code-val { flex: 1; min-inline-size: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; direction: ltr; unicode-bidi: isolate; word-break: break-all;
  user-select: all; background: var(--rcx-surface-subtle); border-radius: var(--rcx-r-sm);
  padding: 8px 12px; color: var(--rcx-ink); }
.rcx-copy-code { min-block-size: 44px; min-inline-size: 44px; flex-shrink: 0; }

/* §RCX-W2.16 — Motion */
@media (prefers-reduced-motion: reduce) {
  .rcx-btn:active, .rcx-copy-btn:active { transform: none; }
  .rcx-spinner { animation: none; }
}

/* ==========================================================================
   §RCX-W1 — GATE 2 · W1 (2026-09-29, STAGING ONLY)
   RCX token layer + legacy dark-block removal coverage + dashboard / account
   forms / avatar / addresses rebuild.
   Canonical: reconstruction/tokens/RCX-TOKENS.md v2. New classes use rcx-*
   only; no new rc-* classes. Do not edit other sections of this file.
   ========================================================================== */

/* ---- RCX-W1.1 — RCX design tokens (first writer; later §RCX sections reuse) ---- */
:root {
  --rcx-surface-page: #F4F6F9;
  --rcx-surface-card: #FFFFFF;
  --rcx-surface-subtle: #EEF2F6;
  --rcx-surface-brand: #0B1B2B;
  --rcx-surface-success: #E9F7F0;
  --rcx-surface-warning: #FFF6E6;
  --rcx-surface-error: #FDECEC;
  --rcx-surface-info: #E8F9FF;
  --rcx-accent: #00C8FF;
  --rcx-accent-deep: #009BD6;
  --rcx-on-accent: #06283A;
  --rcx-ink: #15222E;
  --rcx-ink-2: #3D4E5F;
  --rcx-ink-3: #68798B;
  --rcx-on-dark: #FFFFFF;
  --rcx-border: #E2E8F0;
  --rcx-border-subtle: #EEF2F6;
  --rcx-r-sm: 8px;
  --rcx-r-md: 12px;
  --rcx-r-lg: 16px;
  --rcx-r-pill: 999px;
  --rcx-shadow-sm: 0 1px 2px rgba(11, 27, 43, .06);
  --rcx-shadow-md: 0 8px 24px rgba(11, 27, 43, .10);
  --rcx-success-text: #0F7A52;
  --rcx-info-text: #0B6E99;
  --rcx-warning-text: #8A5A00;
  --rcx-error-text: #B3261E;
  --rcx-muted-text: #5A6B7D;
}

/* ---- RCX-W1.2 — Legacy dark-block removal coverage ----
   The functions.php wp_add_inline_style('woocommerce-inline') block was
   removed at source (RCX-W1). Per-selector coverage map:
   .woocommerce-MyAccount-content #1c1c1c  -> page-surface token + ink (below)
   h2 #fff + #444 border                  -> ink; decorative border dropped
   .woocommerce-OrderUpdate #2c2c2c       -> rcx info-surface tokens (below)
   table.shop_table #2b2b2b/#333/#222     -> light card tokens (below)
   .woocommerce-Price-amount #0f0         -> ink 800 (below)
   .order-actions-button #0066cc          -> rcx-btn-secondary tokens (below)
   .woocommerce-customer-details address  -> rcx-card tokens (below)
   em #ffffff94 (invisible-text bug)      -> --rcx-ink-3 (below)
   .copy-order-id / .copy-confirm        -> DEAD: RCX-W2 renamed markup to .rcx-copy-order/
     .rcx-copy-confirm, styled canonically by W2's §RCX-W2 block; W1 copy rules removed at source
   shop_table :first-child 13px !important / :last-child text-align:start !important
     -> INTENTIONALLY DROPPED: WoodMart's own logical defaults
        (padding-inline-start:0 / text-align:end) are already RTL-correct.
   direction:rtl / text-align:right on wrapper
     -> INTENTIONALLY DROPPED: document-level RTL + RCX logical properties.
   768px media-query overrides (padding/font-size)
     -> covered by base rules; decorative parts dropped.
   The rch-account.css §1 light-text rules assumed the dark bg this block
   provided; the h1-h4/p/address/label/a neutralizers below are the direct
   consequence fix (specificity beats rch §1, rc-customer-v1 prints later).
*/
body.woocommerce-account div.woocommerce-MyAccount-content {
  background: var(--rcx-surface-page);
  color: var(--rcx-ink);
  padding: 16px;
  border-radius: 0;
}
body.woocommerce-account div.woocommerce-MyAccount-content h1,
body.woocommerce-account div.woocommerce-MyAccount-content h2,
body.woocommerce-account div.woocommerce-MyAccount-content h3,
body.woocommerce-account div.woocommerce-MyAccount-content h4 {
  color: var(--rcx-ink);
}
body.woocommerce-account div.woocommerce-MyAccount-content p,
body.woocommerce-account div.woocommerce-MyAccount-content address,
body.woocommerce-account div.woocommerce-MyAccount-content label {
  color: var(--rcx-ink-2);
}
body.woocommerce-account div.woocommerce-MyAccount-content a:not(.button):not([class*="rcx-btn"]):not(.rcx-nav-row) {
  color: var(--rcx-accent-deep);
}
body.woocommerce-account div.woocommerce-MyAccount-content em {
  font-style: normal;
  font-weight: 700;
  color: var(--rcx-ink-3);
}
/* Order updates -> rcx info surface */
body.woocommerce-account .woocommerce-OrderUpdate {
  background: var(--rcx-surface-info);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 12px;
  margin-bottom: 12px;
}
body.woocommerce-account .woocommerce-OrderUpdate-meta {
  color: var(--rcx-ink-3);
  font-size: 13px;
}
body.woocommerce-account .woocommerce-OrderUpdate-description p {
  color: var(--rcx-ink);
  margin: 4px 0 0;
}
/* Order tables -> light card tokens (view-order surface; W2 rebuilds markup) */
body.woocommerce-account .woocommerce-order-details table.shop_table {
  width: 100%;
  background: var(--rcx-surface-card);
  color: var(--rcx-ink);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
body.woocommerce-account .woocommerce-order-details table.shop_table th,
body.woocommerce-account .woocommerce-order-details table.shop_table td {
  border-bottom: 1px solid var(--rcx-border-subtle);
  padding: 12px;
  text-align: start;
  vertical-align: middle;
}
body.woocommerce-account .woocommerce-order-details table.shop_table th {
  background: var(--rcx-surface-subtle);
  color: var(--rcx-ink);
  font-weight: 700;
}
body.woocommerce-account .woocommerce-order-details table.shop_table tfoot th,
body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td {
  background: var(--rcx-surface-subtle);
}
/* Prices: neon #0f0 was a defect -> ink */
body.woocommerce-account .woocommerce-Price-amount {
  color: var(--rcx-ink);
  font-weight: 800;
}
/* Order action buttons (WC core order-details.php) -> rcx-btn-secondary */
body.woocommerce-account .order-actions-button {
  background: var(--rcx-surface-card);
  color: var(--rcx-ink);
  border: 1px solid var(--rcx-border);
  padding: 8px 16px;
  border-radius: var(--rcx-r-md);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
}
body.woocommerce-account .order-actions-button:hover {
  border-color: var(--rcx-accent);
  color: var(--rcx-accent-deep);
}
/* Customer-details address -> rcx-card */
body.woocommerce-account .woocommerce-customer-details address {
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 16px;
  line-height: 1.9;
  color: var(--rcx-ink);
  font-style: normal;
}
body.woocommerce-account .woocommerce-customer-details p {
  margin: 4px 0;
  color: var(--rcx-ink-2);
}
/* Copy affordances: DEAD after RCX-W2 rename. W2's markup is .rcx-copy-order/.rcx-copy-confirm
   and its canonical rules live in the §RCX-W2 block. Retargeting these rules would duplicate
   W2's styling and risk cascade conflicts, so this block is removed at source, not renamed. */

/* ---- RCX-W1.3 — page / section / type ---- */
.rcx-page {
  display: grid;
  gap: 16px;
  padding-block: 4px 16px;
  color: var(--rcx-ink);
}
.rcx-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rcx-t-page {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  margin: 0;
  color: var(--rcx-ink);
}
.rcx-t-section {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--rcx-ink);
}
.rcx-t-card {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--rcx-ink);
}
.rcx-t-body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--rcx-ink);
  margin: 0;
}
.rcx-t-secondary {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rcx-ink-2);
  margin: 0;
}
.rcx-t-caption {
  font-size: 12px;
  line-height: 1.7;
  color: var(--rcx-ink-3);
  margin: 0;
}
.rcx-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- RCX-W1.4 — cards ---- */
.rcx-card {
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 16px;
  box-shadow: var(--rcx-shadow-sm);
}
.rcx-section {
  display: grid;
  gap: 12px;
}

/* ---- RCX-W1.5 — buttons ---- */
.rcx-btn-primary,
.rcx-btn-secondary,
.rcx-btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--rcx-r-md);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.rcx-btn-primary {
  min-height: 48px;
  padding: 0 24px;
  background: var(--rcx-accent);
  color: var(--rcx-on-accent);
}
/* FIX5: WoodMart :is(.btn,.button,button,...) (0,1,0) ties .rcx-btn-primary and wins on source order. Double-class restores RCX primary. */
.rcx-btn-primary.rcx-btn-primary { background: var(--rcx-accent); color: var(--rcx-on-accent); }
.rcx-btn-primary.rcx-btn-primary:hover { background: var(--rcx-accent-deep); }
/* FIX5: WoodMart account sidebar is dark (26,26,26) but H3 uses dark --wd-title-color. Force light title. */
.wd-my-account-sidebar .woocommerce-MyAccount-title { color: #fff; }
.rcx-btn-primary:hover { background: var(--rcx-accent-deep); }
.rcx-btn-primary:active { transform: scale(.98); }
.rcx-btn-secondary {
  min-height: 48px;
  padding: 0 20px;
  background: var(--rcx-surface-card);
  color: var(--rcx-ink);
  border-color: var(--rcx-border);
}
.rcx-btn-secondary:hover { border-color: var(--rcx-accent); }
.rcx-btn-secondary:active { transform: scale(.98); }
/* FIX5: WoodMart :is() button reset beats .rcx-btn-secondary/.rcx-btn-ghost on order. Double-class restores RCX. */
.rcx-btn-secondary.rcx-btn-secondary { background: #FFFFFF; color: var(--rcx-ink); border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-md); }
.rcx-btn-ghost.rcx-btn-ghost { background: transparent; color: var(--rcx-ink-2); border: 1px solid var(--rcx-border); border-radius: var(--rcx-r-md); }
.rcx-btn-tertiary {
  min-height: 44px;
  padding: 0 12px;
  background: none;
  color: var(--rcx-accent-deep);
  font-size: 14px;
}
.rcx-btn-tertiary:hover { text-decoration: underline; }
.rcx-btn-primary:focus-visible,
.rcx-btn-secondary:focus-visible,
.rcx-btn-tertiary:focus-visible {
  outline: 2px solid var(--rcx-accent);
  outline-offset: 2px;
}
.rcx-btn-primary:disabled,
.rcx-btn-secondary:disabled {
  background: var(--rcx-surface-subtle);
  color: var(--rcx-ink-3);
  border-color: var(--rcx-border-subtle);
  cursor: not-allowed;
  transform: none;
}

/* ---- RCX-W1.6 — dashboard: compact identity row ---- */
.rcx-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rcx-identity-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--rcx-r-pill);
  object-fit: cover;
  border: 2px solid var(--rcx-surface-brand); /* selective dark-navy accent: avatar ring */
  flex: none;
}
.rcx-identity-meta { min-width: 0; flex: 1; }
.rcx-identity-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  margin: 0;
  color: var(--rcx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcx-identity-mail {
  font-size: 13px;
  color: var(--rcx-ink-2);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- RCX-W1.7 — dashboard: 3 compact stats ---- */
.rcx-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.rcx-stat {
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-shadow: var(--rcx-shadow-sm);
}
.rcx-stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rcx-ink-3);
  line-height: 1.7;
}
.rcx-stat-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--rcx-ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcx-stat-note {
  font-size: 12px;
  color: var(--rcx-ink-3);
  line-height: 1.7;
}
.rcx-stat-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--rcx-accent-deep);
  text-decoration: none;
}
.rcx-stat-link:hover { text-decoration: underline; }

/* ---- RCX-W1.8 — dashboard: ONE unified nav ---- */
.rcx-nav-card { padding: 8px; }
ul.rcx-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.rcx-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--rcx-r-md);
  text-decoration: none;
  color: var(--rcx-ink);
  min-height: 64px;
}
.rcx-nav-row:hover { background: var(--rcx-surface-subtle); }
.rcx-nav-row:focus-visible {
  outline: 2px solid var(--rcx-accent);
  outline-offset: 2px;
}
.rcx-nav-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rcx-surface-subtle);
  border-radius: var(--rcx-r-md);
  color: var(--rcx-ink-2);
}
.rcx-nav-ico svg { width: 20px; height: 20px; }
.rcx-nav-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rcx-nav-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--rcx-ink);
}
.rcx-nav-sub {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rcx-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcx-nav-chev { flex: none; color: var(--rcx-ink-3); font-size: 20px; line-height: 1; }
.rcx-nav-chev::after { content: "‹"; } /* RTL: ‹ points left = forward */
[dir="ltr"] .rcx-nav-chev::after { content: "›"; }

/* ---- RCX-W1.9 — status badges (icon + Arabic label, never color-alone) ---- */
.rcx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  padding: 2px 10px;
  border-radius: var(--rcx-r-pill);
  white-space: nowrap;
}
.rcx-badge.is-completed { background: var(--rcx-surface-success); color: var(--rcx-success-text); }
.rcx-badge.is-processing { background: var(--rcx-surface-info); color: var(--rcx-info-text); }
.rcx-badge.is-pending { background: var(--rcx-surface-warning); color: var(--rcx-warning-text); }
.rcx-badge.is-on-hold,
.rcx-badge.is-cancelled,
.rcx-badge.is-refunded { background: var(--rcx-surface-subtle); color: var(--rcx-muted-text); }
.rcx-badge.is-failed { background: var(--rcx-surface-error); color: var(--rcx-error-text); }

/* ---- RCX-W1.10 — form system ---- */
.rcx-field { display: grid; gap: 4px; margin: 0 0 12px; }
.rcx-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--rcx-ink);
}
.rcx-input {
  min-height: 48px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rcx-ink);
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.rcx-input::placeholder { color: var(--rcx-ink-3); }
.rcx-input:focus {
  outline: none;
  border-color: var(--rcx-accent);
  box-shadow: 0 0 0 2px var(--rcx-accent);
}
.rcx-input[aria-invalid="true"] { border-color: var(--rcx-error-text); }
.rcx-hint {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rcx-ink-2);
  margin: 0;
}
.rcx-field-error {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rcx-error-text);
  margin: 0;
  font-weight: 700;
}
/* WC core address-edit fields wrapped in rcx cards -> rcx field language.
   Beats rch-account.css §5 (0,3,2) without !important. */
body.woocommerce-account div.woocommerce-MyAccount-content .rcx-card .form-row label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--rcx-ink);
}
body.woocommerce-account div.woocommerce-MyAccount-content .rcx-card .form-row .input-text,
body.woocommerce-account div.woocommerce-MyAccount-content .rcx-card .form-row select {
  min-height: 48px;
  font-size: 16px;
  color: var(--rcx-ink);
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
body.woocommerce-account div.woocommerce-MyAccount-content .rcx-card .form-row .input-text:focus,
body.woocommerce-account div.woocommerce-MyAccount-content .rcx-card .form-row select:focus {
  outline: none;
  border-color: var(--rcx-accent);
  box-shadow: 0 0 0 2px var(--rcx-accent);
}

/* ---- RCX-W1.11 — avatar upload ---- */
.rcx-avatar-upload { display: grid; gap: 12px; }
.rcx-avatar-row { display: flex; align-items: center; gap: 16px; }
.rcx-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: var(--rcx-r-pill);
  object-fit: cover;
  border: 2px solid var(--rcx-surface-brand); /* selective dark-navy accent: avatar ring */
  flex: none;
  background: var(--rcx-surface-subtle);
}
.rcx-avatar-actions { display: grid; gap: 8px; justify-items: start; }
/* Accessible file-pick: the native input REMAINS the functional control
   (absolutely positioned over the visible button, full hit-area). This is the
   standard accessible pattern, explicitly allowed for this input — it is not
   camouflage of a structural defect. */
.rcx-file-pick { position: relative; display: inline-block; }
.rcx-file-pick input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.rcx-file-pick:focus-within .rcx-btn-secondary {
  outline: 2px solid var(--rcx-accent);
  outline-offset: 2px;
  border-color: var(--rcx-accent);
}
.rcx-avatar-progress {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rcx-ink-2);
}
.rcx-avatar-upload.is-busy .rcx-avatar-progress { display: inline-flex; }
.rcx-spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--rcx-r-pill);
  border: 2px solid var(--rcx-border);
  border-top-color: var(--rcx-accent-deep);
  animation: rcx-spin 800ms linear infinite;
}
@keyframes rcx-spin { to { transform: rotate(360deg); } }

/* ---- RCX-W1.12 — alerts / notices ---- */
.rcx-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.9;
  border-radius: var(--rcx-r-md);
  padding: 12px 16px;
  border: 1px solid var(--rcx-border);
  margin: 0;
}
.rcx-alert.is-ok { background: var(--rcx-surface-success); color: var(--rcx-success-text); border-color: var(--rcx-surface-success); font-weight: 700; }
.rcx-alert.is-err { background: var(--rcx-surface-error); color: var(--rcx-error-text); border-color: var(--rcx-surface-error); font-weight: 700; }

/* ---- RCX-W1.13 — empty state ---- */
.rcx-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 16px;
  background: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md);
}
.rcx-empty-ico {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rcx-surface-subtle);
  border-radius: var(--rcx-r-md);
  color: var(--rcx-ink-3);
}
.rcx-empty-ico svg { width: 24px; height: 24px; }
.rcx-empty-title { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--rcx-ink); margin: 0; }
.rcx-empty-text { font-size: 13px; line-height: 1.8; color: var(--rcx-ink-2); margin: 0; max-width: 36ch; }

/* ---- RCX-W1.14 — addresses ---- */
.rcx-address-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .rcx-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rcx-address-card { display: grid; gap: 8px; }
.rcx-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rcx-address-head .rcx-t-card { margin: 0; }
.rcx-address-card address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.9;
  color: var(--rcx-ink-2);
  margin: 0;
}

/* ---- RCX-W1.15 — reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rcx-btn-primary,
  .rcx-btn-secondary,
  .rcx-btn-tertiary,
  .rcx-nav-row,
  .rcx-spinner {
    transition: none;
    animation: none;
  }
}


/* ==========================================================================
   §RCX-W3 — WALLET FAMILY UI (GATE 2 · W3, STAGING ONLY)
   Compact wallet home + transactions ledger + sub-endpoint field system.
   - New classes use the rcx- prefix; --rcx-* tokens per RCX-TOKENS.md.
   - The ONLY §1–§28 edit in this changeset: deletion of the dead dark
     .rc-wallet-hero rule (Section 10). §22.7/§22.8 plugin-form rules are
     SUPERSEDED below by the rcx-field mapping (identical selectors, later
     source order wins) — documented here, not deleted, per W3 scope.
   ========================================================================== */

/* W3.0 — rcx tokens, scoped to the wallet surface (.rc-wallet). Values are
   the RCX-TOKENS.md canonicals; the existing --rc-* tokens stay untouched. */
.rc-wallet {
  --rcx-surface-page: #F4F6F9;
  --rcx-surface-card: #FFFFFF;
  --rcx-surface-subtle: #EEF2F6;
  --rcx-surface-brand: #0B1B2B;
  --rcx-surface-success: #E9F7F0;
  --rcx-surface-warning: #FFF6E6;
  --rcx-surface-error: #FDECEC;
  --rcx-surface-info: #E8F9FF;
  --rcx-accent: #00C8FF;
  --rcx-accent-deep: #009BD6;
  --rcx-on-accent: #06283A;
  --rcx-ink: #15222E;
  --rcx-ink-2: #3D4E5F;
  --rcx-ink-3: #68798B;
  --rcx-on-dark: #FFFFFF;
  --rcx-border: #E2E8F0;
  --rcx-border-subtle: #EEF2F6;
  --rcx-r-sm: 8px;
  --rcx-r-md: 12px;
  --rcx-r-lg: 16px;
  --rcx-r-pill: 999px;
  --rcx-shadow-sm: 0 1px 2px rgba(11,27,43,.06);
  --rcx-shadow-md: 0 8px 24px rgba(11,27,43,.10);
}

/* W3.1 — compact hero stat + --wallet-pc re-arm defusal.
   CHOICE (documented): --wallet-pc is defined to the card token on the hero
   container scope. The plugin's `.wps_wcb_wallet_balance_container
   { background-color: var(--wallet-pc) }` (wps-public.css:148) then resolves
   to a safe token value even if a future plugin settings change sets
   --wallet-pc globally (e.g. the dead purple #483de0). The theme rule
   `.rc-wallet .rc-wallet-hero` (§22.3) still wins the normal path by
   specificity; this definition covers the fail-soft path (transform returns
   plugin HTML unchanged, no rc-wallet-hero class). --wallet-pc is NOT defined
   globally: the plugin uses it for buttons/borders elsewhere and those keep
   their current (empty → unset) rendering. */
.rc-wallet .wps_wcb_wallet_balance_container { --wallet-pc: var(--rcx-surface-card); }

/* Compact the §22.3 hero shell (identical selector, later source order wins). */
.rc-wallet .rc-wallet-hero { padding: 16px; }

/* rcx-stat elements (emitted by rc_wallet_hero_inner_html()). */
.rcx-stat-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--rcx-ink-3); }
.rcx-stat-value { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--rcx-ink); }
.rcx-stat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-block-start: 12px; padding-block-start: 12px;
  border-block-start: 1px dashed var(--rcx-border); }
.rcx-stat-label { font-size: 12px; font-weight: 700; color: var(--rcx-ink-3); }
.rcx-stat-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--rcx-ink); background: var(--rcx-surface-subtle);
  border: 1px solid var(--rcx-border); border-radius: 8px; padding: 4px 8px;
  max-inline-size: 100%; overflow-x: auto; }
.rcx-stat-copy { display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--rcx-border);
  border-radius: 8px; background: #fff; color: var(--rcx-ink-2);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rcx-stat-copy:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-stat-copy:active { transform: scale(.98); }
.rcx-stat-link { margin: 12px 0 0; font-size: 13px; }
.rcx-stat-link a { color: var(--rc-cyan-ink); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 44px; }
.rcx-stat-link a::after { content: "‹"; margin-inline-start: 4px; }
.rcx-stat-link a:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }

/* W3.2 — wallet HOME sequencing. The gift-card tools are injected client-side
   (gift-card-system wp_footer jQuery .after() on the hero), landing between
   the hero and our quick-actions nav in DOM order. Flex `order` restores the
   product sequence — compact stat → primary actions → gift-card → calculator
   (both inside .rca-wallet-tools) — without touching plugin markup or JS.
   Scoped to .rc-wallet-home (main endpoint only); sub-endpoints keep DOM order. */
.rc-wallet.rc-wallet-home .wps_wcb_wallet_display_wrapper_with_qr {
  display: flex; flex-direction: column; gap: 16px; }
.rc-wallet.rc-wallet-home .wps_wcb_wallet_display_wrapper_with_qr > .rc-wallet-hero { order: 1; }
.rc-wallet.rc-wallet-home .wps_wcb_wallet_display_wrapper_with_qr > .rc-wallet-actions { order: 2; }
.rc-wallet.rc-wallet-home .wps_wcb_wallet_display_wrapper_with_qr > .rca-wallet-tools { order: 3; margin: 0; }
.rc-wallet.rc-wallet-home .rc-wallet-recent { margin-block-start: 16px; }

/* W3.3 — rcx-txn-row: mobile-usable ledger rows (canonical component per
   RCX-TOKENS.md §17). Emitted by rc_wallet_txn_row_html(); inner pieces reuse
   the .rc-txn-* component styles (§10 + §22.5), which are not scoped to the
   old .rc-txn root. 15/page, running balance and LTR amounts unchanged. */
.rcx-txn-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.rcx-txn-row + .rcx-txn-row { border-block-start: 1px solid var(--rcx-border-subtle); }
@media (max-width: 380px) {
  .rcx-txn-row { gap: 8px; padding: 12px; }
  .rcx-txn-row .rc-txn-ico { inline-size: 34px; block-size: 34px; }
  .rcx-txn-row .rc-txn-amt { font-size: 13px; }
}

/* W3.4 — rcx-field system (canonical) + plugin sub-endpoint mapping.
   Recharge / transfer / withdrawal partials are PROTECTED (byte-identical);
   their `p.wps-wallet-field-container` markup is styled to the rcx-field
   system via the identical selectors §22.7 used — later source order wins, so
   the rules below supersede §22.7 (46px/14px) with token values (48px/16px).
   No plugin markup, ids, names, or JS hooks change. */
.rcx-field { margin: 0 0 12px; }
.rcx-label { display: block; font-size: 13px; font-weight: 700; color: var(--rcx-ink);
  margin-block-end: 8px; }
/* FIX5: WoodMart input[type=...] (0,1,1) beats .rcx-input (0,1,0) for background-color. Double-class restores RCX white. */
.rcx-input.rcx-input, .rcx-select.rcx-select, .rcx-textarea.rcx-textarea { background-color: var(--rcx-surface-card); }
.rcx-input, .rcx-select, .rcx-textarea {
  display: block; inline-size: 100%; min-block-size: 48px; padding: 8px 12px;
  border: 1px solid var(--rcx-border); border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 16px; color: var(--rcx-ink); }
.rcx-textarea { min-block-size: 96px; resize: vertical; }
.rcx-input:focus-visible, .rcx-select:focus-visible, .rcx-textarea:focus-visible {
  outline: 2px solid var(--rcx-accent); outline-offset: 1px; border-color: var(--rcx-accent); }
.rcx-input[aria-invalid="true"], .rcx-select[aria-invalid="true"],
.rcx-textarea[aria-invalid="true"] { border-color: #B3261E; }
.rcx-field-error { display: flex; align-items: flex-start; gap: 4px; margin: 8px 0 0;
  font-size: 13px; font-weight: 600; color: #B3261E; }
/* FIX5: restore hidden-attribute semantics — author display:flex must not force-show JS-hidden errors. */
.rcx-field-error[hidden] { display: none !important; }
.rc-wallet .wps-wallet-field-container { margin: 0 0 12px; }
.rc-wallet .wps-wallet-field-container > label { display: block; font-size: 13px; font-weight: 700;
  color: var(--rcx-ink); margin-block-end: 8px; }
.rc-wallet .wps-wallet-field-container input[type="text"],
.rc-wallet .wps-wallet-field-container input[type="email"],
.rc-wallet .wps-wallet-field-container input[type="number"],
.rc-wallet .wps-wallet-field-container input[type="tel"],
.rc-wallet .wps-wallet-field-container select,
.rc-wallet .wps-wallet-field-container textarea { display: block; inline-size: 100%;
  min-block-size: 48px; padding: 8px 12px; border: 1px solid var(--rcx-border);
  border-radius: 12px; background: #fff; font-family: inherit; font-size: 16px;
  color: var(--rcx-ink); }
.rc-wallet .wps-wallet-field-container textarea { min-block-size: 96px; resize: vertical; }
.rc-wallet .wps-wallet-field-container input:focus-visible,
.rc-wallet .wps-wallet-field-container select:focus-visible,
.rc-wallet .wps-wallet-field-container textarea:focus-visible { outline: 2px solid var(--rcx-accent);
  outline-offset: 1px; border-color: var(--rcx-accent); }
.rc-wallet .wps-wallet-field-container input[aria-invalid="true"],
.rc-wallet .wps-wallet-field-container select[aria-invalid="true"],
.rc-wallet .wps-wallet-field-container textarea[aria-invalid="true"] { border-color: #B3261E; }
/* Submit buttons: token 48px height (supersedes §22.8's 46px; colors unchanged). */
.rc-wallet .wps-btn__filled.button,
.rc-wallet #wps_recharge_wallet,
.rc-wallet #wps_proceed_transfer,
.rc-wallet #wps_withdrawal_request { min-block-size: 48px; }

/* W3.5 — gift-card redemption (clean form section) + SUBDUED calculator.
   The plugin's own inline stylesheet (gift-card-system.php
   #rca-gift-card-premium-light) uses !important on card padding/border/
   background/input metrics; the overrides below carry !important ONLY against
   those third-party rules (documented RCX §16 exception — plugin markup is
   protected and cannot be edited). */
/* 16px inputs (RCX §10: no iOS Safari zoom) on the plugin's gift-code + calculator fields. */
.rc-wallet .rca-wallet-tools #gift_card_code,
.rc-wallet .rca-wallet-tools #product_price { font-size: 16px !important; }
/* Calculator subdued: plain card, tighter padding, smaller head, quiet shadow. */
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc { padding: 16px !important;
  border-radius: 12px !important; background: var(--rcx-surface-card) !important;
  box-shadow: var(--rcx-shadow-sm) !important; }
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc .rca-wallet-tool-head { margin-bottom: 12px; }
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc .rca-wallet-tool-icon {
  flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; }
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc .rca-wallet-tool-icon svg { width: 18px; height: 18px; }
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc h3 { font-size: 14px !important; }
.rc-wallet .rca-wallet-tools .rca-wallet-tool-card--calc .rca-wallet-tool-head p { font-size: 12px !important; }

/* W3.6 — reduced motion (extends §22.16). */
@media (prefers-reduced-motion: reduce) {
  .rcx-stat-copy:active { transform: none; }
}

/* ==========================================================================
   §RCX-W4-THANKYOU — Thank-you landing RCX conversion (GATE 2 / W4, STAGING ONLY)
   Styles for woodmart-child/woocommerce/rc-thankyou.php (rcx markup).
   Additive ONLY: no rule above this line was modified or reordered.
   Tokens re-declared here (canonical RCX-TOKENS.md values) because the W2
   token block is scoped to .rc-scope and this surface renders .rcx-page.
   Light page (no dark). Logical properties only. Touch targets ≥44px.
   Reduced-motion safe.
   ========================================================================== */

/* W4.1 — RCX tokens for the thank-you surface (canonical values). */
.rcx-page {
  --rcx-surface-page: #F4F6F9;
  --rcx-surface-card: #FFFFFF;
  --rcx-surface-subtle: #EEF2F6;
  --rcx-surface-success: #E9F7F0;
  --rcx-surface-warning: #FFF6E6;
  --rcx-surface-error: #FDECEC;
  --rcx-surface-info: #E8F9FF;
  --rcx-accent: #00C8FF;
  --rcx-accent-deep: #009BD6;
  --rcx-on-accent: #06283A;
  --rcx-ink: #15222E;
  --rcx-ink-2: #3D4E5F;
  --rcx-ink-3: #68798B;
  --rcx-border: #E2E8F0;
  --rcx-border-subtle: #EEF2F6;
  --rcx-r-sm: 8px;
  --rcx-r-md: 12px;
  --rcx-r-lg: 16px;
  --rcx-r-pill: 999px;
  --rcx-shadow-sm: 0 1px 2px rgba(11,27,43,.06);
  --rcx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
              "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  font-family: var(--rcx-font);
  color: var(--rcx-ink);
  direction: rtl;
  background: var(--rcx-surface-page);
}
.rcx-page-inner {
  max-inline-size: 640px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 8px 32px;
}
.rcx-section { margin-block-end: 16px; }
.rcx-section:last-child { margin-block-end: 0; }

/* W4.2 — Compact hero: success medallion + supporting line.
   (The theme already renders the <h1>تم استلام طلبك</h1>; no duplicate h2.) */
.rcx-hero { text-align: center; padding-block: 20px 8px; }
.rcx-hero-check {
  inline-size: 64px; block-size: 64px; border-radius: 20px;
  margin-inline: auto; margin-block-end: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rcx-accent), var(--rcx-accent-deep));
  box-shadow: 0 12px 26px rgba(0,200,255,.22);
  animation: rcx-pop .45s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes rcx-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.rcx-hero-check svg { inline-size: 30px; block-size: 30px; }
.rcx-hero-sub {
  color: var(--rcx-ink-2); font-size: 14px; line-height: 1.9;
  margin: 0 auto; max-inline-size: 36em;
}

/* W4.3 — Cards + card titles. */
.rcx-thankyou .rcx-card {
  background: var(--rcx-surface-card); border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-lg); box-shadow: var(--rcx-shadow-sm);
  padding: 20px; color: var(--rcx-ink);
}
.rcx-card-title {
  font-size: 16px; font-weight: 800; line-height: 1.6;
  color: var(--rcx-ink); margin: 0 0 12px;
}

/* W4.4 — Key-value rows (order number / amount / payment / delivery status). */
.rcx-thankyou .rcx-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding-block: 8px; margin: 0;
}
.rcx-thankyou .rcx-kv + .rcx-kv { border-block-start: 1px solid var(--rcx-border-subtle); }
.rcx-thankyou .rcx-kv > dt {
  font-size: 13px; color: var(--rcx-ink-2); margin: 0; flex-shrink: 0;
}
.rcx-thankyou .rcx-kv > dd {
  font-size: 14px; font-weight: 700; color: var(--rcx-ink); margin: 0;
  text-align: end; min-inline-size: 0; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.rcx-thankyou .rcx-ltr { direction: ltr; unicode-bidi: isolate; }

/* W4.5 — Status badge (uses the W2 .rcx-badge component + is-* modifiers). */
.rcx-thankyou .rcx-badge { display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--rcx-r-pill); border: 1px solid var(--rcx-border);
  background: var(--rcx-surface-subtle); color: var(--rcx-ink-2);
  font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap; }

/* W4.6 — Product lines. */
.rcx-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.rcx-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; min-inline-size: 0; padding-block: 8px;
}
.rcx-line + .rcx-line { border-block-start: 1px solid var(--rcx-border-subtle); }
.rcx-line-name { font-weight: 700; font-size: 14px; min-inline-size: 0; }
.rcx-line-meta {
  color: var(--rcx-ink-2); font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* W4.7 — Code wrappers (Phase F codeboxes render inside; their own §21
   styles are untouched). Spacing only. */
.rcx-codewrap { margin-block-start: 12px; }
.rcx-codewrap:first-of-type { margin-block-start: 4px; }
.rcx-codewrap .rc-code { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }

/* W4.8 — Buttons (W2 .rcx-btn components) + pay action spacing. */
.rcx-thankyou .rcx-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-block-size: 48px; padding-inline: 20px; border-radius: var(--rcx-r-md);
  border: 1px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.5;
  text-decoration: none; cursor: pointer; }
.rcx-thankyou .rcx-btn-primary { background: var(--rcx-accent); color: var(--rcx-on-accent); }
.rcx-thankyou .rcx-btn-secondary { background: #FFFFFF; color: var(--rcx-ink); border-color: var(--rcx-border); }
.rcx-thankyou .rcx-btn-block { display: flex; inline-size: 100%; }
.rcx-thankyou .rcx-btn:focus-visible { outline: 2px solid var(--rcx-accent); outline-offset: 2px; }
.rcx-pay-action { margin-block-start: 12px; }

/* W4.9 — Next-steps. */
.rcx-steps { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.rcx-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--rcx-surface-info); border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md); padding: 12px;
}
.rcx-step-no {
  inline-size: 34px; block-size: 34px; min-inline-size: 34px; flex-shrink: 0;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--rcx-accent-deep);
  background: rgba(0,200,255,.12);
}
.rcx-step h3 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--rcx-ink); }
.rcx-step p { margin: 0; color: var(--rcx-ink-2); font-size: 13px; line-height: 1.8; }

/* W4.10 — Support card. */
.rcx-support-note { color: var(--rcx-ink-2); font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.rcx-support-btns { display: grid; gap: 12px; }
.rcx-foot { color: var(--rcx-ink-2); font-size: 14px; line-height: 1.8; margin: 12px 0 0; }
.rcx-foot a { color: var(--rcx-accent-deep); font-weight: 800; text-decoration: none; }

/* W4.11 — Bottom action stack. */
.rcx-actions { display: grid; gap: 12px; }

/* W4.12 — Generic-state alert (wrong key / guest). */
.rcx-alert.is-info {
  background: var(--rcx-surface-info); border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-md); padding: 16px; color: var(--rcx-ink);
  font-size: 14px; line-height: 1.9; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .rcx-hero-check { animation: none; }
}

/* ==========================================================================
   §RCX-W4-WISHLIST — Wishlist H1 (GATE 2 / W4, STAGING ONLY)
   Page 25 (/wishlist/) renders no theme page-title block, so the W4
   functions.php patch prepends a real <h1 class="rcx-wishlist-h1">.
   Styled here in RCX language. Additive ONLY.
   ========================================================================== */
.rcx-wishlist-h1 {
  font-size: 20px; font-weight: 800; line-height: 1.5;
  color: #15222E; margin: 0 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
              "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
}

/* ==========================================================================
   §RCX-W4-REVIEWS — My-reviews RCX hooks (GATE 2 / W4, STAGING ONLY)
   The W4 functions.php patch moves the my-reviews inline styles to these
   semantic classes (no !important needed once the inline styles are gone).
   Until W1 applies the patch, §25 keeps styling the list; these rules are
   dormant until the new classes exist. Additive ONLY.
   ========================================================================== */
.woocommerce-account .rc-reviews .rcx-rev-item {
  background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11,27,43,.06);
  padding: 20px; margin-block-end: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
              "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  color: #15222E; direction: rtl;
}
.woocommerce-account .rc-reviews .rcx-rev-head {
  display: flex; align-items: center; gap: 12px; margin-block-end: 12px;
}
.woocommerce-account .rc-reviews .rcx-rev-thumb { flex-shrink: 0; }
.woocommerce-account .rc-reviews .rcx-rev-thumb img { border-radius: 8px; }
.woocommerce-account .rc-reviews .rcx-rev-title {
  font-size: 15px; font-weight: 800; line-height: 1.5; margin: 0 0 4px;
}
.woocommerce-account .rc-reviews .rcx-rev-title a { color: #15222E; text-decoration: none; }
.woocommerce-account .rc-reviews .rcx-rev-title a:hover { color: #009BD6; }
.woocommerce-account .rc-reviews .rcx-rev-stars {
  color: #F59E0B; font-size: 16px; letter-spacing: 1px;
}
.woocommerce-account .rc-reviews .rcx-rev-body {
  background: #F8FAFC; padding: 12px; border-radius: 8px; margin-block-end: 8px;
}
.woocommerce-account .rc-reviews .rcx-rev-body p { margin: 0; font-size: 14px; line-height: 1.8; }
.woocommerce-account .rc-reviews .rcx-rev-date { color: #68798B; font-size: 13px; }
.woocommerce-account .rc-reviews .rcx-rev-empty {
  color: #68798B; font-size: 14px; text-align: center;
  padding-block: 24px; margin: 0;
}

/* §RCX-W5 — Contrast remediation (lead, 2026-09-29).
   W5 QA (RC-QA-W5.md) computed --rcx-accent-deep (#009BD6) as TEXT on white =
   3.15:1 — fails WCAG AA (4.5:1). Canonical fix: new TEXT token
   --rcx-accent-text (#0077A6) = 5.01:1 on white, declared on all four RCX
   scopes. Graphic/border uses of --rcx-accent-deep (spinner, codebox border,
   gradients) are intentionally untouched. --rcx-ink-3 raised #68798B (4.47)
   to #6B7280 (4.83). Token spec updated: RCX-TOKENS.md §2/§3/§8. */
.rc-scope,
:root,
.rc-wallet,
.rcx-page {
  --rcx-accent-text: #0077A6;
  --rcx-ink-3: #6B7280;
}
.rcx-btn-tertiary { color: var(--rcx-accent-text); }
body.woocommerce-account div.woocommerce-MyAccount-content a:not(.button):not([class*="rcx-btn"]):not(.rcx-nav-row) { color: var(--rcx-accent-text); }
body.woocommerce-account .order-actions-button:hover { color: var(--rcx-accent-text); }
.rcx-stat-link { color: var(--rcx-accent-text); }
.rcx-step-no { color: var(--rcx-accent-text); }
.rcx-foot a { color: var(--rcx-accent-text); }
.woocommerce-account .rc-reviews .rcx-rev-title a:hover { color: var(--rcx-accent-text); }

/* ==========================================================================
   §RCX-FIX2 — Final focused correction pass (2026-09-30, STAGING ONLY).
   RENDER → INSPECT → FIX → VERIFY. Presentation only: no PHP money logic,
   no wallet/plugin PHP, no auth, no nonces/capabilities touched here.
   ========================================================================== */

/* FIX2.1 — Wallet: neutralize the plugin's hardcoded #483de0 purple
   (wps-public-min.css serves background-color:#483de0 directly — the earlier
   --wallet-pc re-arm could not override it) and bring the surface into the
   RCX design system. All selectors outrank the plugin's by specificity. */

/* Balance container → white RCX card (beats plugin .wps_wcb_wallet_balance_container). */
.rc-wallet .wps_wcb_wallet_balance_container {
  background-color: var(--rcx-surface-card);
  border: 1px solid var(--rcx-border);
  border-radius: var(--rcx-r-lg);
  box-shadow: var(--rcx-shadow-sm);
  padding: 16px;
}
/* Balance amount → dark ink (beats plugin color:#fff). */
.rc-wallet .wps_wcb_wallet_balance_container .woocommerce-Price-amount {
  color: var(--rcx-ink);
  font-weight: 800;
}
/* Fail-soft plugin heading inside the container. */
.rc-wallet .wps_wcb_wallet_display_wrapper_with_qr .wps_wcb_wallet_balance_container h4 {
  color: var(--rcx-ink-3);
}

/* Wallet tabs: keep the plugin's 3-col grid (functionality), re-tint chrome. */
.rc-wallet .wps_wcb_content_template ul.tabs li.active {
  background-color: var(--rcx-surface-info);
}
.rc-wallet .wps_wcb_content_template ul.tabs li h3 {
  color: var(--rcx-ink);
}
.rc-wallet .wps_wcb_content_template ul.tabs li svg path {
  fill: var(--rcx-accent-deep);
}

/* Plugin info notices → RCX info surface. */
.rc-wallet .wps_wcb_wallet_display_wrapper .woocommerce-info {
  border-color: var(--rcx-accent-deep);
  background-color: var(--rcx-surface-info);
  color: var(--rcx-ink-2);
}
.rc-wallet .wps_wcb_wallet_display_wrapper .woocommerce-info::before {
  color: var(--rcx-accent-deep);
}

/* Plugin filled submit buttons → RCX primary treatment (clear states). */
.rc-wallet input[type=submit].wps-btn__filled {
  background-color: var(--rcx-accent);
  border: 1px solid var(--rcx-accent);
  color: var(--rcx-on-accent);
  border-radius: var(--rcx-r-md);
  font-weight: 800;
  font-size: 15px;
  min-height: 48px;
  padding: 0 24px;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.rc-wallet input[type=submit].wps-btn__filled:hover {
  background-color: var(--rcx-accent-deep);
  border-color: var(--rcx-accent-deep);
  color: var(--rcx-on-accent);
}
.rc-wallet input[type=submit].wps-btn__filled:active {
  transform: scale(.98);
}
.rc-wallet input[type=submit].wps-btn__filled:focus-visible {
  outline: 2px solid var(--rcx-accent-deep);
  outline-offset: 2px;
}

/* Transfer/withdrawal field focus ring → accent (was #483de0). */
.rc-wallet #wps_wallet_transfer_form input[type=email]:focus,
.rc-wallet #wps_wallet_transfer_form input[type=number]:focus,
.rc-wallet #wps_wallet_transfer_form input[type=text]:focus,
.rc-wallet #wps_wallet_transfer_form textarea:focus {
  border-color: var(--rcx-accent-deep);
}

/* FIX2.2 — Edit-account security card (form-edit-account.php). */
.rcx-security-note {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rcx-ink-2);
}
.rcx-security-value {
  margin: 0;
  padding: 12px 14px;
  background: var(--rcx-surface-subtle);
  border: 1px solid var(--rcx-border-subtle);
  border-radius: var(--rcx-r-md);
  font-size: 16px;
  font-weight: 700;
  color: var(--rcx-ink);
  font-variant-numeric: tabular-nums;
}

/* FIX2.3 — Dashboard/mobile polish: safe-area-aware bottom breathing so the
   last card/logout never sits under the iPhone home indicator; in-page
   anchors (if any) clear the sticky mobile header. No horizontal changes. */
.rcx-page {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.rcx-page [id] {
  scroll-margin-top: 84px;
}

/* FIX2.4 — Rewards/roulette: page-level horizontal-overflow guard.
   The plugin's own ≤520px rules already collapse the wheel (verified);
   this only ensures a stray halo ring can never scroll the page. */
.woocommerce-account .wcr-container {
  max-width: 100%;
  overflow-x: clip;
}

/* ============================================================
   RCX-FIX4 (2026-09-30, staging): raw WooCommerce leaks inside
   My Account — normalize to the RCX design system.
   Root causes found 2026-09-30 via served-DOM audit:
   1) view-order / downloads / digital-codes render raw WC
      `a.button` links (download file, reorder, view-order,
      browse-products) in unstyled WC default treatment.
   2) edit-address renders raw WC `input.input-text` fields,
      not the RCX input system.
   Presentation only; no markup/logic changes.
   ============================================================ */
/* 1) Raw WC buttons inside the account content -> RCX secondary. */
.woocommerce-MyAccount-content a.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary),
.woocommerce-MyAccount-content button.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--rcx-ink, #15222E);
  border: 1.5px solid var(--rcx-border, #D9E2EA);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.woocommerce-MyAccount-content a.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary):hover,
.woocommerce-MyAccount-content button.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary):hover {
  border-color: var(--rcx-accent, #00C8FF);
  background: #F2FAFE;
}
.woocommerce-MyAccount-content a.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary):active,
.woocommerce-MyAccount-content button.button:not(.rcx-btn):not(.rcx-btn-primary):not(.rcx-btn-secondary):not(.rcx-btn-tertiary):active {
  transform: translateY(1px);
}
/* 2) Raw WC address-form inputs -> RCX input treatment. */
.woocommerce-MyAccount-content .woocommerce-address-fields input.input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields select.input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields textarea.input-text {
  min-height: 48px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rcx-ink, #15222E);
  background: #FFFFFF;
  border: 1px solid var(--rcx-border, #D9E2EA);
  border-radius: 12px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-MyAccount-content .woocommerce-address-fields textarea.input-text {
  padding: 12px 16px;
  min-height: 96px;
  resize: vertical;
}
.woocommerce-MyAccount-content .woocommerce-address-fields input.input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields select.input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields textarea.input-text:focus {
  outline: none;
  border-color: var(--rcx-accent, #00C8FF);
  box-shadow: 0 0 0 3px rgba(0, 200, 255, .18);
}

/* ============ FIX5 1.5.8 (2026-09-30) ============ */
/* 1) Points history empty state — wc-roulette-game forces min-width:620px on the
      table (assets/css/frontend.css). When the ONLY row is the empty-state cell,
      let the table shrink to the card width on mobile so the message centers in
      view instead of clipping off-canvas. Populated tables keep inner scroll. */
@media (max-width: 640px) {
  .wcr-history-table table:has(> tbody > tr > td.wcr-no-data) { min-width: 0; }
}
/* 2) Select2 country widget — WoodMart sets
      body .select2-container--default .select2-selection { background-color:
      var(--wd-form-bg); } and the Customizer-generated theme CSS sets
      --wd-form-bg: rgba(36,36,36,.51) (medium gray) on body. The native country
      select carries no .input-text class and is replaced by Select2, so it kept
      the gray box + white text while sibling RCX inputs render white. Give the
      My Account Select2 the RCX input treatment.
      Beats WoodMart body .select2-container--default .select2-selection (0,2,1). */
body .woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  background: #FFFFFF;
  border: 1px solid var(--rcx-border, #D9E2EA);
  border-radius: 12px;
  min-height: 48px;
  height: auto;
  display: flex;
  align-items: center;
}
body .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rcx-ink, #15222E);
  font-size: 16px;
  line-height: 1.6;
  padding-inline: 16px;
}
body .woocommerce-MyAccount-content .select2-container--default.select2-container--focus .select2-selection--single,
body .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rcx-accent, #00C8FF);
  box-shadow: 0 0 0 3px rgba(0, 200, 255, .18);
  outline: none;
}