/* SYM Referrals — Jood Light UI (spacious, modern) */

/* ---------- Tokens (scoped) ---------- */
.sym-wrap,
.sym-portal{
  --sym-bg: #FFFFFF;
  --sym-surface: #FFFFFF;
  --sym-text: #0F172A;
  --sym-muted: #667085;
  --sym-border: #E5E7EB;
  --sym-accent: #2D6A4F; /* set to Jood's exact green if needed */

  --sym-radius: 16px;
  --sym-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 30px rgba(16,24,40,.05);

  --sym-s1: 8px;  --sym-s2: 12px; --sym-s3: 16px;
  --sym-s4: 20px; --sym-s5: 24px; --sym-s6: 28px; --sym-s7: 32px;

  color-scheme: light; /* force light mode */
}

/* ---------- Canvases ---------- */
.sym-wrap, .sym-portal{
  background-color: var(--sym-bg);
  color: var(--sym-text);
  padding: var(--sym-s7) var(--sym-s6);
  line-height: 1.6;
  font: inherit;
}
.sym-portal{ max-width: 1120px; margin: 0 auto; }

/* ---------- Header ---------- */
.sym-header h1{ margin: 0 0 var(--sym-s2); font-weight: 700; letter-spacing: -.2px; }
.sym-made{
  display:inline-block; font-size:12px; color:var(--sym-muted);
  border:1px dashed var(--sym-border); border-radius:999px; padding:4px 10px; background:#fff;
}

/* ---------- Cards ---------- */
.sym-card{
  background: var(--sym-surface);
  border: 1px solid var(--sym-border);
  border-radius: var(--sym-radius);
  padding: var(--sym-s6);
  box-shadow: var(--sym-shadow);
  margin-bottom: var(--sym-s6);

  /* equal height inside grid */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sym-card h3{ margin: 0 0 var(--sym-s3); font-size: 18px; font-weight: 600; }
.sym-card p, .sym-card li, .sym-card label{ color: var(--sym-muted); }

/* ---------- Dashboard grid with areas ---------- */
.sym-grid{ display: grid; gap: var(--sym-s6); }
.sym-grid-dash{
  grid-template-columns: 1.05fr 1fr 0.95fr;
  grid-template-areas:
    "link stats coupons"
    "how  how  how";
  align-items: stretch;
}
.sym-card-link{ grid-area: link; }
.sym-card-stats{ grid-area: stats; }
.sym-card-coupons{ grid-area: coupons; }
.sym-card-how{ grid-area: how; }

.sym-card > * + *{ margin-top: var(--sym-s2); }
.sym-stats > *{ margin-top: 0; }  /* ensure all four stat cells sit flush */

/* ---------- Hero ---------- */
.sym-hero{
  background: var(--sym-surface);
  border: 1px solid var(--sym-border);
  border-radius: var(--sym-radius);
  padding: var(--sym-s6);
  text-align: center;
  box-shadow: var(--sym-shadow);
  margin-bottom: var(--sym-s6);
}
.sym-hero h2{ margin:0 0 var(--sym-s2); font-size:28px; font-weight:700; letter-spacing:-.2px; }
.sym-badge{
  display:inline-block; margin-top:var(--sym-s2); font-size:11px; color:var(--sym-muted);
  border:1px solid var(--sym-border); border-radius:999px; padding:3px 10px; background:#fff;
}

/* ---------- Inputs ---------- */
.sym-linkbox{ display:flex; gap: var(--sym-s3); align-items:center; }

.sym-linkbox input,
.sym-card input[type="text"],
.sym-card input[type="number"],
.sym-card select{
  width:100%; background:#fff; color:var(--sym-text);
  border:1px solid var(--sym-border); border-radius:12px;
  height:46px; padding:10px 14px; outline:none; font-size:14px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}
.sym-card select{ height:46px; }
.sym-linkbox input:focus,
.sym-card input[type="text"]:focus,
.sym-card input[type="number"]:focus,
.sym-card select:focus{
  border-color: rgba(45,106,79,.6);
  box-shadow: 0 0 0 3px rgba(45,106,79,.14);
}

/* ---------- Buttons ---------- */
.sym-copy,
.sym-share-btn,
.sym-card .button,
.sym-wrap .button{
  appearance:none; text-decoration:none; background:var(--sym-accent);
  color:#fff !important; border:1px solid #245842; border-radius:12px;
  padding:12px 18px; height:46px; font-weight:700; letter-spacing:.1px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition: transform .05s, box-shadow .15s, opacity .15s, background-color .15s;
}
.sym-wrap .button{ min-width:170px; }
.sym-copy:active, .sym-share-btn:active, .sym-wrap .button:active{ transform:translateY(1px); }
.sym-share{ display:flex; gap:var(--sym-s3); flex-wrap:wrap; margin-top:var(--sym-s3); }
.sym-share-btn{ background:#fff; color:var(--sym-text) !important; border:1px solid var(--sym-border); }
.sym-share-btn:hover{ border-color:#c9d1d9; }

/* ---------- Stats ---------- */
.sym-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sym-s4); text-align:center; }
.sym-stat-num{ display:block; font-size:26px; font-weight:700; color:var(--sym-text); }
.sym-stat-label{ font-size:12px; color:var(--sym-muted); }

/* ---------- Coupons list ---------- */
.sym-coupons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sym-coupon{
  width:100%; background:#fff; color:var(--sym-text);
  border:1px solid var(--sym-border); border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.sym-coupon:hover{ border-color:#c9d1d9; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sym-coupon:active{ transform: translateY(1px); }
.sym-coupon code{ font-size:13px; }
.sym-coupon .sym-cta{ font-size:12px; font-weight:700; color:var(--sym-accent); }

/* ---------- Tables (admin leaderboard) ---------- */
.sym-wrap table.widefat{ border-radius: var(--sym-radius); overflow:hidden; background:var(--sym-surface); }
.sym-wrap table.widefat td, .sym-wrap table.widefat th{ font-size:13px; padding:12px 14px; }
.sym-wrap .notice.updated{ background:#eff6ff; border-color:#bfdbfe; }

/* ---------- Confetti canvas ---------- */
#sym-confetti{ position:fixed; inset:0; z-index:99999; pointer-events:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .sym-grid-dash{
    grid-template-columns: 1fr;
    grid-template-areas:
      "link"
      "stats"
      "coupons"
      "how";
  }
}
@media (max-width: 720px){
  .sym-stats{ grid-template-columns: repeat(2,1fr); }
}