/* Referral (Features/Referrals): the share link (.share-*), the invite on /me and on the home page (.ref-*), and the
   admin list. Tokens only (base.css); motion: transform and opacity. */

/* ---------- Share link: the link, WhatsApp and copy ---------- */
.share { display: grid; gap: 10px; }
.share-url {
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
    border: 2px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-code);
    font-size: .85rem;
    text-align: left;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-actions .btn { flex: 1 1 150px; }
.share-actions .btn.is-done { border-color: var(--success); color: var(--success); }
.share-status { min-height: 1.4em; color: var(--success); font-size: var(--fs-sm); font-weight: 500; }
.share-status:empty { min-height: 0; }

/* ---------- The gold medal (the parent card on /me) ---------- */
.ref-medal {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold-light), var(--accent-edge));
    box-shadow: 0 3px 0 var(--accent-edge);
    animation: ref-wiggle 3s var(--ease-out) 1s infinite both;
}
.ref-medal > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(170deg, var(--gold-light), var(--amber) 55%, var(--gold-deep));
    color: var(--navy);
}
@keyframes ref-wiggle {
    0%, 80%, 100% { transform: rotate(0); }
    85% { transform: rotate(-10deg) scale(1.06); }
    90% { transform: rotate(8deg) scale(1.06); }
    95% { transform: rotate(-4deg); }
}

/* ---------- The offer: /me, home and /partner ---------- */
.ref-card { display: grid; gap: var(--space-3); }
.ref-steps {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    margin: 0;
    padding: 6px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    font-size: clamp(.75rem, 3.3vw, var(--fs-sm));
    font-weight: 500;
    line-height: 1.3;
}
.ref-steps li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ref-step-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 2px 0 var(--primary-edge);
    color: var(--on-primary);
    font-family: var(--font-title);
    font-size: .85rem;
    line-height: 1;
}
.ref-steps li:last-child .ref-step-num { background: var(--accent); box-shadow: 0 2px 0 var(--accent-edge); color: var(--on-accent); }
.ref-box { padding: 10px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.ref-box-title { margin: 0 0 8px; font-family: var(--font-title); font-size: var(--fs-md); line-height: 1.3; }
.ref-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ref-tile {
    display: grid;
    align-content: start;
    gap: 2px;
    margin: 0;
    padding: 10px 8px;
    border: 2px solid var(--accent);
    border-radius: 14px;
    background: var(--accent-soft);
    box-shadow: 0 3px 0 var(--accent-edge);
    text-align: center;
    animation: ref-in .4s var(--ease-spring) both;
}
.ref-tile.is-friend { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 3px 0 var(--primary-edge); animation-delay: .06s; }
.ref-tile-who { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.ref-tile-gift { font-family: var(--font-title); font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.ref-strip {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--console);
    box-shadow: 0 3px 0 var(--console-edge);
    color: var(--on-console);
    font-weight: 500;
    line-height: 1.5;
}
.ref-strip .num { color: var(--amber); }
.ref-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ref-terms summary, .ref-code summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--link); font-family: var(--font-title); cursor: pointer; }
.ref-terms summary::-webkit-details-marker, .ref-code summary::-webkit-details-marker { display: none; }
.ref-terms summary::after, .ref-code summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--ease-out);
}
.ref-terms[open] summary::after, .ref-code[open] summary::after { transform: translateY(2px) rotate(225deg); }
.ref-terms ul { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.2em; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- /me: «غيّر كود الدعوة» (js/refcode.js says if the code is free) ---------- */
.ref-code-form { display: grid; gap: 10px; }
.ref-code-form input { font-family: var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.ref-code-status { min-height: 1.4em; font-size: var(--fs-sm); }
.ref-code-status:empty { min-height: 0; }
.ref-code-status.is-ok { color: var(--success); font-weight: 500; }
.ref-code-status.is-ok::before { content: "✓ "; }
.ref-code-text { margin: 0; }

/* ---------- /me: rewards and credits ---------- */
.ref-empty { margin-top: var(--space-3); }
.ref-list-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-md); }
.ref-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.ref-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 3px 0 var(--edge);
    animation: ref-in .4s var(--ease-spring) both;
}
.ref-item-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--surface-3);
    color: var(--text-soft);
}
.ref-item.is-granted { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.ref-item.is-granted .ref-item-icon { background: var(--success-soft); color: var(--success); }
.ref-item.is-pending .ref-item-icon { background: var(--primary-soft); color: var(--link); }
.ref-item.is-capped .ref-item-icon { background: var(--accent-soft); color: var(--accent-text); }
.ref-item.is-cancelled { box-shadow: none; opacity: .75; }
.ref-item-main { display: grid; gap: 2px; min-width: 0; }
.ref-item-title { font-family: var(--font-title); font-size: 1.05rem; line-height: 1.3; }
.ref-item-why { color: var(--text-muted); font-size: var(--fs-sm); }
.ref-item-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-xs); }
@keyframes ref-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- Home: the short invite card ---------- */
.ref-invite { display: grid; gap: var(--space-3); animation: rise .5s var(--ease-out) .24s both; }
.ref-invite-title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.ref-invite-text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.ref-invite-text .num { color: var(--accent-text); }
.ref-invite-more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; font-weight: 500; }

/* ---------- Admin list ---------- */
.ref-admin-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; }