/* SaloCart V5.2.21 — Referral Rewards & Wallet
   Final presentation layer. Uses existing brand variables and adds only local UI.
*/
.referral-wallet-card,
.referral-hero,
.referral-link-panel,
.referral-program-guide,
.referral-section,
.referral-withdrawal-form,
.referral-admin-summary,
.referral-admin-rule,
.referral-admin-queue,
.referral-admin-review-form {
  border: 1px solid rgba(18, 74, 47, .10);
  box-shadow: 0 12px 30px rgba(18, 55, 37, .07);
}

.referral-wallet-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  overflow: hidden;
  border-radius: 25px;
  margin: 1.15rem 0 1.6rem;
  background: #fff;
}

.referral-wallet-card__main {
  padding: clamp(1.15rem, 2.8vw, 2rem);
  background: linear-gradient(125deg, rgba(15, 131, 24, .12), rgba(39, 104, 201, .06));
}

.referral-wallet-card .section-kicker,
.referral-hero .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.referral-wallet-card h2 {
  max-width: 30rem;
  margin: .5rem 0 .55rem;
  font-size: clamp(1.22rem, 2.7vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.referral-wallet-card p {
  max-width: 52rem;
  color: var(--sc-muted, #617468);
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

.referral-wallet-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}

.referral-wallet-card__metrics > div {
  min-width: 0;
  border: 1px solid rgba(18, 74, 47, .09);
  border-radius: 16px;
  padding: .78rem .9rem;
  background: rgba(255, 255, 255, .86);
}

.referral-wallet-card__metrics small,
.referral-wallet-card__metrics em {
  display: block;
  color: var(--sc-muted, #617468);
  font-size: .7rem;
  font-style: normal;
  line-height: 1.38;
}

.referral-wallet-card__metrics strong {
  display: block;
  margin: .18rem 0;
  overflow-wrap: anywhere;
  font-size: 1.42rem;
  font-weight: 950;
  letter-spacing: -.055em;
  color: var(--sc-green-deep, #07543a);
}

.referral-wallet-card__actions,
.referral-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.referral-wallet-card__formula {
  padding: clamp(1.15rem, 2.6vw, 2rem);
  color: #f8fffb;
  background: linear-gradient(155deg, #0b6f49, #0c4d38 64%, #093526);
}

.referral-wallet-card__formula span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 800;
  color: rgba(242, 255, 246, .75);
}

.referral-wallet-card__formula strong {
  display: block;
  margin: .66rem 0 .55rem;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.referral-wallet-card__formula p,
.referral-wallet-card__formula small {
  display: block;
  color: rgba(242, 255, 246, .78);
  font-size: .78rem;
  line-height: 1.55;
  margin: 0;
}

.referral-wallet-card__formula small {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.18);
}

.referral-wallet-card.is-setup { display:block; padding:1.35rem; }
.referral-wallet-card.is-setup h2 { margin:.45rem 0 .3rem; }

.referral-page { padding-bottom: 4rem; }

.referral-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
  gap: clamp(1rem, 3vw, 2rem);
  border-radius: 28px;
  padding: clamp(1.1rem, 3vw, 2.1rem);
  overflow: hidden;
  color: #f7fffb;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,199,62,.30), transparent 24%),
    radial-gradient(circle at 58% 120%, rgba(33,122,226,.40), transparent 34%),
    linear-gradient(130deg, #065239, #0b8b4a 59%, #087353);
}

.referral-hero h1 {
  max-width: 17ch;
  margin: .5rem 0 .68rem;
  font-size: clamp(1.55rem, 4vw, 2.6rem);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -.065em;
}

.referral-hero h1 em { color: #ffe28b; font-style: normal; }
.referral-hero p { max-width: 58ch; color: rgba(247,255,251,.82); font-size: .92rem; line-height: 1.65; margin: 0; }
.referral-hero .btn-sc-light { background: rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22); }
.referral-hero .btn-sc-light:hover { background: rgba(255,255,255,.2); color:#fff; }

.referral-hero > aside {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  align-self:stretch;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 1.05rem;
  background: rgba(0, 45, 29, .26);
  backdrop-filter: blur(10px);
}

.referral-hero > aside span,
.referral-hero > aside small { color: rgba(247,255,251,.78); font-size: .72rem; line-height:1.4; }
.referral-hero > aside strong { display:block; margin:.28rem 0 .36rem; font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight:950; letter-spacing:-.065em; overflow-wrap:anywhere; }
.referral-hero > aside .btn-sc-alt { width:100%; margin-top:1rem; background:#fff; color:#0a5c41; }

.referral-link-panel {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(270px, .8fr);
  gap:1rem;
  align-items:center;
  margin:1rem 0;
  padding:1rem;
  border-radius:22px;
  background:#fff;
}
.referral-link-panel h2 { margin:.32rem 0 .28rem; font-size:1.08rem; letter-spacing:-.03em; }
.referral-link-panel p { margin:0; color:var(--sc-muted,#617468); font-size:.78rem; line-height:1.5; }
.referral-link-field { display:flex; align-items:center; min-width:0; gap:.52rem; border:1px solid rgba(18,74,47,.13); border-radius:15px; padding:.4rem .45rem .4rem .7rem; background:#fbfdfb; }
.referral-link-field > i { color:var(--sc-blue,#2878cd); font-size:1.05rem; }
.referral-link-field input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--sc-ink,#1a2e22); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.referral-link-field .community-copy-button { flex:0 0 auto; min-height:38px; border-radius:11px; }

.referral-wallet-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.75rem;
  margin:1rem 0;
}
.referral-wallet-grid article { padding:1rem; border:1px solid rgba(18,74,47,.10); border-radius:18px; background:#fff; box-shadow:0 8px 20px rgba(14,42,28,.045); }
.referral-wallet-grid article span { display:flex; align-items:center; gap:.4rem; color:var(--sc-muted,#617468); font-size:.72rem; }
.referral-wallet-grid article span i { color:var(--sc-green,#0f8318); font-size:1rem; }
.referral-wallet-grid article strong { display:block; margin:.4rem 0 .16rem; font-size:1.35rem; letter-spacing:-.055em; font-weight:950; overflow-wrap:anywhere; }
.referral-wallet-grid article small { color:var(--sc-muted,#617468); font-size:.68rem; line-height:1.4; }

.referral-program-guide { display:flex; gap:1rem; padding:1.1rem; margin:1rem 0; border-radius:22px; background:linear-gradient(125deg, rgba(255,203,72,.20), rgba(14,125,79,.07)); }
.referral-guide-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border-radius:16px; background:#ffcc47; color:#724d00; font-size:1.35rem; }
.referral-program-guide h2 { margin:.26rem 0 .35rem; font-size:1.1rem; letter-spacing:-.035em; }
.referral-program-guide p,.referral-program-guide small { margin:0; color:var(--sc-muted,#617468); font-size:.8rem; line-height:1.55; }
.referral-program-guide small { display:block; margin-top:.5rem; }

.referral-main-grid { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr); gap:1rem; align-items:start; }
.referral-side-stack { display:grid; gap:1rem; }
.referral-section { padding:1rem; border-radius:22px; background:#fff; }
.referral-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.85rem; }
.referral-section-head h2 { margin:.22rem 0 .25rem; font-size:1.15rem; letter-spacing:-.035em; }
.referral-section-head p { margin:0; color:var(--sc-muted,#617468); font-size:.78rem; line-height:1.45; }
.referral-downline-total { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:80px; padding:.5rem .65rem; border-radius:14px; color:#0b6845; background:rgba(15,131,24,.08); font-size:.63rem; font-weight:700; text-align:center; }
.referral-downline-total b { font-size:1.15rem; letter-spacing:-.04em; }

.referral-tree-levels { display:grid; gap:.6rem; }
.referral-level { border:1px solid rgba(18,74,47,.10); border-radius:16px; overflow:hidden; background:#fcfefc; }
.referral-level summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.7rem; align-items:center; min-height:58px; padding:.7rem .8rem; cursor:pointer; list-style:none; }
.referral-level summary::-webkit-details-marker { display:none; }
.referral-level summary > i { transition:transform .18s ease; color:var(--sc-muted,#617468); }
.referral-level[open] summary > i { transform:rotate(180deg); }
.referral-level-badge { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:#0c6346; background:rgba(15,131,24,.11); font-size:.72rem; font-weight:950; }
.referral-level summary strong,.referral-level summary small { display:block; }
.referral-level summary strong { font-size:.85rem; }
.referral-level summary small { margin-top:.1rem; color:var(--sc-muted,#617468); font-size:.68rem; }
.referral-level-members { display:grid; gap:.45rem; padding:.15rem .65rem .72rem; }
.referral-level-members article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem; align-items:center; padding:.58rem .55rem; border-radius:12px; background:#fff; }
.referral-member-avatar { width:34px; height:34px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#fff; background:linear-gradient(135deg,#0f8318,#2589d6); font-size:.76rem; font-weight:900; }
.referral-member-avatar img { width:100%; height:100%; object-fit:cover; }
.referral-level-members strong,.referral-level-members small { display:block; overflow-wrap:anywhere; }
.referral-level-members strong { font-size:.78rem; }
.referral-level-members small { margin-top:.12rem; color:var(--sc-muted,#617468); font-size:.64rem; line-height:1.35; }
.referral-member-state { padding:.18rem .42rem; border-radius:999px; font-size:.58rem; font-weight:850; text-transform:capitalize; background:#f1f4f2; color:#65736b; }
.referral-member-state.active { color:#08704b; background:#dff4e8; }
.referral-level-empty { padding:.68rem; border-radius:12px; color:var(--sc-muted,#617468); background:rgba(18,74,47,.04); font-size:.72rem; line-height:1.45; }

.referral-ledger-list,.referral-withdrawal-list,.referral-admin-queue { display:grid; gap:.65rem; }
.referral-ledger-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem; align-items:center; padding:.68rem 0; border-bottom:1px solid rgba(18,74,47,.08); }
.referral-ledger-list article:last-child { border-bottom:0; }
.referral-ledger-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#08734e; background:#e4f7ea; }
.referral-ledger-list strong,.referral-ledger-list small { display:block; }
.referral-ledger-list strong { font-size:.78rem; }
.referral-ledger-list small { margin-top:.14rem; color:var(--sc-muted,#617468); font-size:.64rem; line-height:1.35; }
.referral-ledger-list b { color:#08734e; font-size:.85rem; white-space:nowrap; }

.referral-withdrawal-list article,
.referral-admin-request { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.76rem; border:1px solid rgba(18,74,47,.09); border-radius:14px; background:#fcfefc; }
.referral-withdrawal-list article > div,
.referral-admin-request > div { min-width:0; }
.referral-withdrawal-list strong,.referral-withdrawal-list small,.referral-withdrawal-list em,
.referral-admin-request strong,.referral-admin-request small { display:block; overflow-wrap:anywhere; }
.referral-withdrawal-list strong,.referral-admin-request strong { margin:.25rem 0 .12rem; font-size:.78rem; }
.referral-withdrawal-list small,.referral-admin-request small { color:var(--sc-muted,#617468); font-size:.64rem; line-height:1.4; }
.referral-withdrawal-list em { margin-top:.28rem; color:#536c5c; font-size:.64rem; font-style:normal; line-height:1.4; }
.referral-status { display:inline-flex; align-items:center; gap:.25rem; padding:.22rem .45rem; border-radius:999px; font-size:.58rem; font-weight:850; }
.referral-status.is-pending { color:#8b6200; background:#fff2c4; }
.referral-status.is-approved { color:#14549f; background:#deedff; }
.referral-status.is-paid { color:#087048; background:#dff4e7; }
.referral-status.is-returned { color:#88411f; background:#ffebe1; }
.referral-empty-state { display:flex; gap:.7rem; align-items:flex-start; padding:.8rem; border-radius:15px; color:var(--sc-muted,#617468); background:rgba(18,74,47,.045); }
.referral-empty-state > i { font-size:1.3rem; color:var(--sc-green,#0f8318); }
.referral-empty-state strong,.referral-empty-state p { display:block; }
.referral-empty-state strong { color:var(--sc-ink,#1a2e22); font-size:.78rem; }
.referral-empty-state p { margin:.16rem 0 0; font-size:.68rem; line-height:1.45; }
.referral-empty-state.compact { padding:.65rem; }

.referral-withdrawal-balance { display:flex; gap:.7rem; align-items:center; margin-bottom:1rem; padding:.8rem; border-radius:15px; background:linear-gradient(120deg, rgba(15,131,24,.11), rgba(39,104,201,.06)); }
.referral-withdrawal-balance > span { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:#fff; background:var(--sc-green,#0f8318); }
.referral-withdrawal-balance small,.referral-withdrawal-balance strong,.referral-withdrawal-balance p { display:block; }
.referral-withdrawal-balance small { color:var(--sc-muted,#617468); font-size:.68rem; }
.referral-withdrawal-balance strong { margin:.13rem 0; font-size:1.2rem; letter-spacing:-.05em; }
.referral-withdrawal-balance p { margin:0; color:var(--sc-muted,#617468); font-size:.66rem; line-height:1.35; }
.referral-withdrawal-security { display:flex; gap:.55rem; align-items:flex-start; margin-top:.8rem; padding:.7rem; border-radius:13px; color:#36614d; background:#eef8f1; font-size:.69rem; line-height:1.45; }
.referral-withdrawal-security i { color:#08734e; }

.referral-admin-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin-bottom:.85rem; }
.referral-admin-summary article { padding:.7rem; border-radius:13px; background:rgba(15,131,24,.07); }
.referral-admin-summary small,.referral-admin-summary strong { display:block; }
.referral-admin-summary small { color:var(--sc-muted,#617468); font-size:.62rem; line-height:1.35; }
.referral-admin-summary strong { margin-top:.25rem; font-size:1.02rem; letter-spacing:-.045em; overflow-wrap:anywhere; }
.referral-admin-rule { display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.85rem; padding:.8rem; border-radius:15px; background:linear-gradient(125deg,rgba(39,104,201,.09),rgba(15,131,24,.08)); }
.referral-admin-rule > i { font-size:1.25rem; color:var(--sc-blue,#2878cd); }
.referral-admin-rule strong,.referral-admin-rule p { display:block; }
.referral-admin-rule strong { font-size:.8rem; }
.referral-admin-rule p { margin:.15rem 0 0; color:var(--sc-muted,#617468); font-size:.68rem; line-height:1.45; }
.referral-payout-recipient { display:flex; gap:.7rem; align-items:center; padding:.75rem; border-radius:15px; background:#f6faf7; }
.referral-payout-recipient > span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#e3f6e9; color:#08734e; }
.referral-payout-recipient small,.referral-payout-recipient strong,.referral-payout-recipient p { display:block; }
.referral-payout-recipient small { font-size:.63rem; color:var(--sc-muted,#617468); }
.referral-payout-recipient strong { font-size:.86rem; }
.referral-payout-recipient p { margin:.12rem 0 0; color:var(--sc-muted,#617468); font-size:.66rem; overflow-wrap:anywhere; }
.referral-payout-account { display:grid; gap:.2rem; margin:.8rem 0; padding:.8rem; border-radius:14px; border:1px dashed rgba(18,74,47,.18); }
.referral-payout-account span,.referral-payout-account small { color:var(--sc-muted,#617468); font-size:.65rem; }
.referral-payout-account strong { font-size:.82rem; }
.referral-payout-account b { font-size:.88rem; overflow-wrap:anywhere; }
.referral-withdrawal-event-list { margin-top:1rem; }
.referral-withdrawal-event-list h3 { font-size:.82rem; margin:0 0 .55rem; }
.referral-withdrawal-event-list ul { display:grid; gap:.55rem; padding:0; margin:0; list-style:none; }
.referral-withdrawal-event-list li { display:flex; justify-content:space-between; gap:.65rem; padding:.65rem; border-radius:12px; background:#f8fbf9; }
.referral-withdrawal-event-list span strong,.referral-withdrawal-event-list span small { display:block; }
.referral-withdrawal-event-list span strong { font-size:.72rem; }
.referral-withdrawal-event-list span small,.referral-withdrawal-event-list em { color:var(--sc-muted,#617468); font-size:.62rem; font-style:normal; line-height:1.4; }

.admin-referral-callout { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin:1rem 0; padding:1rem; border:1px solid rgba(18,74,47,.10); border-radius:20px; background:linear-gradient(125deg,rgba(255,203,72,.18),rgba(15,131,24,.07)); }
.admin-referral-callout h2 { margin:.25rem 0; font-size:1rem; letter-spacing:-.03em; }
.admin-referral-callout p { margin:0; max-width:60ch; color:var(--sc-muted,#617468); font-size:.76rem; line-height:1.45; }

@media (max-width: 991.98px) {
  .referral-wallet-card,.referral-hero,.referral-link-panel,.referral-main-grid { grid-template-columns:1fr; }
  .referral-wallet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .referral-hero > aside { align-items:stretch; }
}

@media (max-width: 575.98px) {
  .referral-wallet-card { border-radius:20px; }
  .referral-wallet-card__main,.referral-wallet-card__formula { padding:1rem; }
  .referral-wallet-card__metrics { gap:.5rem; }
  .referral-wallet-card__metrics > div { padding:.7rem; }
  .referral-wallet-card__actions,.referral-hero-actions { display:grid; grid-template-columns:1fr; }
  .referral-wallet-card__actions .btn-sc,.referral-wallet-card__actions .btn-sc-light,.referral-hero-actions .btn-sc,.referral-hero-actions .btn-sc-light { width:100%; }
  .referral-hero { border-radius:22px; padding:1rem; }
  .referral-hero h1 { font-size:1.72rem; }
  .referral-link-panel { padding:.82rem; border-radius:18px; }
  .referral-link-field { padding:.36rem .4rem .36rem .58rem; }
  .referral-link-field .community-copy-button span { display:none; }
  .referral-link-field .community-copy-button { min-width:38px; padding:0; display:grid; place-items:center; }
  .referral-wallet-grid { gap:.55rem; }
  .referral-wallet-grid article { padding:.78rem; border-radius:15px; }
  .referral-wallet-grid article strong { font-size:1.1rem; }
  .referral-program-guide { padding:.85rem; border-radius:18px; }
  .referral-guide-icon { width:40px; height:40px; flex-basis:40px; border-radius:13px; font-size:1.1rem; }
  .referral-section { padding:.8rem; border-radius:18px; }
  .referral-section-head { gap:.5rem; }
  .referral-downline-total { min-width:66px; padding:.45rem; }
  .referral-level summary { gap:.55rem; padding:.62rem; }
  .referral-level-members { padding:.1rem .4rem .5rem; }
  .referral-level-members article { grid-template-columns:auto minmax(0,1fr); }
  .referral-member-state { grid-column:2; justify-self:start; }
  .referral-withdrawal-list article,.referral-admin-request { align-items:flex-start; flex-direction:column; }
  .referral-withdrawal-list article .btn-sc-light,.referral-admin-request .btn-sc { width:100%; }
  .referral-admin-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .referral-withdrawal-event-list li { flex-direction:column; }
  .admin-referral-callout { align-items:stretch; flex-direction:column; }
  .admin-referral-callout .btn-sc-light { width:100%; }
}

@media (max-width: 360px) {
  .referral-wallet-card__metrics,.referral-wallet-grid,.referral-admin-summary { grid-template-columns:1fr; }
}

html[data-theme="dark"] .referral-wallet-card,
html[data-theme="dark"] .referral-link-panel,
html[data-theme="dark"] .referral-section,
html[data-theme="dark"] .referral-wallet-grid article,
html[data-theme="dark"] .referral-withdrawal-list article,
html[data-theme="dark"] .referral-admin-request,
html[data-theme="dark"] .referral-level-members article,
html[data-theme="dark"] .referral-payout-recipient {
  background:rgba(21,28,32,.96);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
html[data-theme="dark"] .referral-wallet-card__main { background:linear-gradient(130deg,rgba(17,75,48,.46),rgba(18,60,104,.22)); }
html[data-theme="dark"] .referral-wallet-card h2,
html[data-theme="dark"] .referral-link-panel h2,
html[data-theme="dark"] .referral-program-guide h2,
html[data-theme="dark"] .referral-section h2,
html[data-theme="dark"] .referral-level summary strong,
html[data-theme="dark"] .referral-level-members strong,
html[data-theme="dark"] .referral-ledger-list strong,
html[data-theme="dark"] .referral-withdrawal-list strong,
html[data-theme="dark"] .referral-admin-request strong,
html[data-theme="dark"] .referral-empty-state strong,
html[data-theme="dark"] .referral-payout-recipient strong,
html[data-theme="dark"] .referral-payout-account b { color:#f4f8f5; }
html[data-theme="dark"] .referral-level,
html[data-theme="dark"] .referral-level-empty,
html[data-theme="dark"] .referral-empty-state,
html[data-theme="dark"] .referral-withdrawal-balance,
html[data-theme="dark"] .referral-payout-account,
html[data-theme="dark"] .referral-withdrawal-event-list li { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09); }
html[data-theme="dark"] .referral-link-field { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .referral-link-field input { color:#f4f8f5; }
html[data-theme="dark"] .referral-program-guide { background:linear-gradient(125deg,rgba(179,129,8,.18),rgba(15,131,24,.18)); }
html[data-theme="dark"] .admin-referral-callout { background:linear-gradient(125deg,rgba(179,129,8,.17),rgba(15,131,24,.16)); border-color:rgba(255,255,255,.09); }