/* ══════════════════════════════════════════════════════════════
   REFERRAL MODAL — invitări + tier roadmap
   ══════════════════════════════════════════════════════════════
   Extras din index.html (era inline). Conține:
   - Show/hide pentru topup, referral, early-access modals
   - Custom scrollbar
   - Floating orbs (background atmospheric)
   - Icon ring spinner
   - Reward cards cu hover glow
   - Link container cu animated border
   - Copy/share buttons cu shine effect
   - Tier roadmap (timeline cu dots reached/current/locked)
*/

#topup-modal.show { opacity: 1 !important; pointer-events: auto !important; }
#topup-modal.show > div { transform: translateY(0) !important; }
#referral-modal.show { opacity: 1 !important; pointer-events: auto !important; }
#referral-modal.show > div { transform: translateY(0) !important; }
#early-access-modal.show { opacity: 1 !important; pointer-events: auto !important; }
#early-access-modal.show > div { transform: scale(1) !important; }

/* ── REFERRAL MODAL STYLES ── */
.ref-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.ref-scroll::-webkit-scrollbar { width: 4px; }
.ref-scroll::-webkit-scrollbar-track { background: transparent; }
.ref-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }

.ref-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.ref-orb-1 { width: 200px; height: 200px; background: rgba(16,185,129,0.12); top: -60px; right: -40px; animation: refFloat 8s ease-in-out infinite; }
.ref-orb-2 { width: 180px; height: 180px; background: rgba(99,102,241,0.10); bottom: -50px; left: -40px; animation: refFloat 10s ease-in-out infinite reverse; }
@keyframes refFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.05); } }

.ref-icon-wrap { position: relative; }
.ref-icon-ring {
    position: absolute; inset: -4px; border-radius: 1.1rem;
    background: conic-gradient(from 0deg, rgba(16,185,129,0.4), rgba(99,102,241,0.4), rgba(16,185,129,0.4));
    animation: refRingSpin 3s linear infinite; opacity: 0.6;
}
@keyframes refRingSpin { to { transform: rotate(360deg); } }

.ref-reward-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1.2rem; padding: 1rem 0.8rem; transition: all 0.3s ease;
}
.ref-reward-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.ref-reward-glow { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; filter: blur(40px); opacity: 0; transition: opacity 0.3s; }
.ref-reward-card:hover .ref-reward-glow { opacity: 1; }
.ref-reward-divider { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ref-link-container { position: relative; border-radius: 1rem; overflow: hidden; background: rgba(255,255,255,0.03); }
.ref-link-border {
    position: absolute; inset: 0; border-radius: 1rem; padding: 1px;
    background: linear-gradient(135deg, rgba(16,185,129,0.3), rgba(99,102,241,0.1), rgba(16,185,129,0.3));
    background-size: 200% 200%; animation: refBorderShift 4s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
@keyframes refBorderShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.ref-copy-btn { position: relative; overflow: hidden; }
.ref-copy-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.5s;
}
.ref-copy-btn:hover::after { left: 100%; }

.ref-share-btn { position: relative; overflow: hidden; }
.ref-share-btn::before {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(circle at center, currentColor, transparent 70%); transition: opacity 0.3s;
}
.ref-share-btn:hover::before { opacity: 0.05; }

/* Tier roadmap */
.ref-roadmap-item {
    display: flex; align-items: flex-start; gap: 12px; position: relative; padding: 0 0 0 0;
}
.ref-roadmap-line {
    position: absolute; left: 15px; top: 32px; bottom: -2px; width: 2px;
    background: rgba(255,255,255,0.06);
}
.ref-roadmap-line.active { background: linear-gradient(to bottom, #10b981, rgba(16,185,129,0.2)); }
.ref-roadmap-dot {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; z-index: 2; position: relative;
    background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.08);
    transition: all 0.3s;
}
.ref-roadmap-dot.reached { background: rgba(16,185,129,0.15); border-color: #10b981; }
.ref-roadmap-dot.current { background: rgba(16,185,129,0.25); border-color: #10b981; box-shadow: 0 0 12px rgba(16,185,129,0.4); animation: refPulse 2s ease infinite; }
.ref-roadmap-dot.locked { opacity: 0.4; }
@keyframes refPulse { 0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.3); } 50% { box-shadow: 0 0 16px rgba(16,185,129,0.5); } }
.ref-roadmap-content { flex: 1; min-width: 0; padding: 4px 0 16px 0; }
.ref-roadmap-rewards {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.ref-roadmap-reward-tag {
    font-size: 0.55rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
}
.ref-roadmap-reward-tag.reached { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #10b981; }
.ref-roadmap-reward-tag.current { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); color: #10b981; }