/* Education360 — referrals & partners. Mobile first (390px), RTL-safe (logical properties), dark mode through the theme variables. */

/* ---------- the share card (families and partners) */
.ref-hero{position:relative;overflow:hidden;border-radius:18px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,var(--brand),color-mix(in oklab,var(--brand) 62%,var(--accent)));box-shadow:0 18px 40px -24px var(--brand)}
.ref-hero::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.ref-hero h2{margin:0 0 4px;font-size:20px;line-height:1.3;color:#fff}
.ref-hero p{margin:0;opacity:.92;font-size:14px;line-height:1.55}
.ref-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px;position:relative;z-index:1}
.ref-code-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 12px}
.ref-code-box .lbl{font-size:12px;opacity:.85;width:100%}
.ref-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px;font-weight:800;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
.ref-link{flex:1 1 180px;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;direction:ltr;unicode-bidi:isolate;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-hero .btn{min-height:44px}
.ref-hero .btn-light{background:#fff;color:var(--brand);border-color:#fff}
.ref-hero .btn-light:hover{background:rgba(255,255,255,.9)}
.ref-hero .btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.ref-hero .btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.ref-wa{background:#25d366!important;border-color:#25d366!important;color:#06341a!important;font-weight:700}
.ref-actions{display:flex;gap:10px;flex-wrap:wrap}
.ref-actions .btn{flex:1 1 150px;justify-content:center}
.ref-qr{background:#fff;border-radius:14px;padding:12px;display:inline-block;margin-top:10px}
.ref-qr canvas,.ref-qr img,.ref-qr svg{display:block;width:160px;height:160px}
@media (min-width:900px){
  .ref-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .ref-hero-grid>.field,.ref-hero-grid>.ref-actions,.ref-hero-grid>details{grid-column:1/-1}
  .ref-actions .btn{flex:0 1 auto;min-width:220px}
}
ul.ref-small{padding-inline-start:18px}
.ref-hero details summary{cursor:pointer;font-size:13.5px;font-weight:600;opacity:.95;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ref-hero details summary::-webkit-details-marker{display:none}

/* ---------- how it works */
.ref-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ref-steps li{display:flex;gap:12px;align-items:flex-start}
.ref-steps b.n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand);font-size:14px;font-weight:800}
.ref-steps span{font-size:14px;line-height:1.5;color:var(--text-2)}
.ref-small{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.ref-small li{margin-bottom:4px}

/* ---------- mini stats (partner widget and dashboard) */
.ref-minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ref-mini{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);min-width:0}
.ref-mini .stat-icon{width:36px;height:36px;flex:none}
.ref-mini b{font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-mini .stat-label{font-size:12px}
@media (min-width:700px){.ref-minis{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- progress of one referral */
.ref-track{display:flex;gap:4px;align-items:center;margin-top:6px}
.ref-track i{height:6px;flex:1;border-radius:999px;background:var(--surface-3)}
.ref-track i.on{background:var(--brand)}
.ref-track i.bad{background:var(--red)}
.ref-note{font-size:12px;color:var(--muted);margin-top:3px}
.ref-flag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--amber)}
.ref-flag .icon{width:14px;height:14px}

/* ---------- the story of one referral (office) */
.ref-timeline{list-style:none;margin:0;padding:0;position:relative}
.ref-timeline li{position:relative;padding-inline-start:34px;padding-bottom:16px}
.ref-timeline li::before{content:"";position:absolute;inset-inline-start:11px;top:24px;bottom:0;width:2px;background:var(--border)}
.ref-timeline li:last-child::before{display:none}
.ref-timeline .dot{position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--muted)}
.ref-timeline .dot .icon{width:14px;height:14px}
.ref-timeline li.done .dot{background:var(--brand);color:#fff}
.ref-timeline li.bad .dot{background:var(--red);color:#fff}
.ref-timeline b{display:block;font-size:14px}
.ref-timeline span{font-size:12.5px;color:var(--muted)}

/* ---------- invoice: the referral discount line */
.ref-disc-line td{border-top:0!important;padding-top:0!important}

/* ---------- public partner page */
.ref-terms{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:18px 0 6px}
.ref-term{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface)}
.ref-term .icon{width:22px;height:22px;color:var(--brand)}
.ref-term b{display:block;margin:8px 0 4px;font-size:15px}
.ref-term p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- lists on small screens */
.ref-list .list-item{align-items:flex-start}
.ref-amount{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-amount.neg{color:var(--red)}
.ref-amount.pos{color:var(--green)}
@media (max-width:600px){
  .ref-hero{padding:18px 16px;border-radius:16px}
  .ref-code{font-size:21px}
  .ref-actions .btn{flex:1 1 100%}
}
@media print{.ref-hero{box-shadow:none}}
.ref-list .meta{display:block}