/* =========================================================
   🚪 REFERRAL JOIN — Hunter Style
   صفحه ورود با لینک دعوت + VPN/Closed Notices
   ========================================================= */

/* ═══════════════════════════════════════════════════════════
   REFERRAL CONTAINER
   ═══════════════════════════════════════════════════════════ */

body:has(.rj-box),
.app:has(.rj-box) {
    background: #0f1117 !important;
    min-height: 100vh;
    position: relative;
}

body:has(.rj-box)::before,
.app:has(.rj-box)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 15% 15%, rgba(245,196,83,.08), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(52,211,153,.06), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(96,165,250,.04), transparent 60%) !important;
}

.rj-container {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 18px !important;
    position: relative !important;
    z-index: 1 !important;
}

.rj-box {
    width: 100% !important;
    max-width: 420px !important;
    border-radius: 20px !important;
    padding: 30px 22px 24px !important;
    text-align: center !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(245,196,83,.08), transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(52,211,153,.06), transparent 55%),
        linear-gradient(155deg, #1a1d24, #181b22) !important;
    border: 1.5px solid rgba(245,196,83,.25) !important;
    box-shadow:
        0 0 0 1px rgba(245,196,83,.06) inset,
        0 0 60px -20px rgba(245,196,83,.25),
        0 24px 60px -20px rgba(0,0,0,.6) !important;
    position: relative !important;
    overflow: hidden !important;
    animation: rjFadeUp .55s cubic-bezier(.3, 1.2, .4, 1) both !important;
}

.rj-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #f5c453, transparent) !important;
    opacity: .9 !important;
}

.rj-box::after {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    width: 180px !important;
    height: 180px !important;
    background: radial-gradient(circle, rgba(245,196,83,.15), transparent 70%) !important;
    pointer-events: none !important;
}

.rj-box > * {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes rjFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   RJ ICON
   ═══════════════════════════════════════════════════════════ */

.rj-icon {
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 20px !important;
    border-radius: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.4), rgba(245,196,83,.1)) !important;
    border: 1.5px solid rgba(245,196,83,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(245,196,83,.5),
        inset 0 0 24px rgba(245,196,83,.15) !important;
    animation: rjIconFloat 3s ease-in-out infinite !important;
    position: relative !important;
    overflow: hidden !important;
}

.rj-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(from 0deg, transparent, rgba(255,215,106,.5), transparent 30%) !important;
    animation: rjSpin 5s linear infinite !important;
    pointer-events: none !important;
    opacity: .6 !important;
}

.rj-icon > * {
    position: relative !important;
    z-index: 2 !important;
}

.rj-icon.success {
    background:
        radial-gradient(circle at 30% 25%, rgba(52,211,153,.4), rgba(52,211,153,.1)) !important;
    border-color: rgba(52,211,153,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(52,211,153,.5),
        inset 0 0 24px rgba(52,211,153,.15) !important;
    animation: rjIconPulse 2s ease-in-out infinite !important;
}

.rj-icon.success::before {
    background: conic-gradient(from 0deg, transparent, rgba(126,230,168,.5), transparent 30%) !important;
}

.rj-icon.error {
    background:
        radial-gradient(circle at 30% 25%, rgba(248,113,113,.4), rgba(248,113,113,.1)) !important;
    border-color: rgba(248,113,113,.5) !important;
    box-shadow:
        0 12px 32px -10px rgba(248,113,113,.5),
        inset 0 0 24px rgba(248,113,113,.15) !important;
}

.rj-icon.error::before {
    background: conic-gradient(from 0deg, transparent, rgba(255,154,174,.5), transparent 30%) !important;
}

@keyframes rjIconFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes rjIconPulse {
    0%, 100% {
        box-shadow:
            0 12px 32px -10px rgba(52,211,153,.5),
            inset 0 0 24px rgba(52,211,153,.15);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 16px 40px -10px rgba(52,211,153,.7),
            inset 0 0 30px rgba(52,211,153,.25);
        transform: scale(1.05);
    }
}

@keyframes rjSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RJ TITLE + SUBTITLE
   ═══════════════════════════════════════════════════════════ */

.rj-title {
    margin: 0 0 10px !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #f0f2f7 !important;
    letter-spacing: -.01em !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

.rj-subtitle {
    margin: 0 0 22px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #8b95a8 !important;
    line-height: 2 !important;
    letter-spacing: 0 !important;
}

.rj-subtitle b {
    display: inline-block !important;
    color: #f5c453 !important;
    font-weight: 900 !important;
    direction: ltr !important;
    padding: 0 4px !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ WELCOME BADGE
   ═══════════════════════════════════════════════════════════ */

.rj-welcome-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 16px !important;
    border-radius: 11px !important;
    background: rgba(52,211,153,.14) !important;
    border: 1.5px solid rgba(52,211,153,.4) !important;
    color: #7ee6a8 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 24px -8px rgba(52,211,153,.5) !important;
}


/* ═══════════════════════════════════════════════════════════
   RJ BUTTONS
   ═══════════════════════════════════════════════════════════ */

.rj-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    border-radius: 13px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    transition: all .18s !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.rj-btn:last-child {
    margin-bottom: 0 !important;
}

.rj-btn:active {
    transform: scale(.98) !important;
}

.rj-btn:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
}

/* دکمه اصلی - طلایی */
.rj-btn-primary {
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    box-shadow:
        0 12px 30px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.rj-btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.rj-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(245,196,83,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* دکمه موفقیت - سبز */
.rj-btn-success {
    background: linear-gradient(135deg, #34d399, #22c55e) !important;
    color: #052a1a !important;
    box-shadow:
        0 12px 30px -10px rgba(52,211,153,.5),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.rj-btn-success::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.rj-btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(52,211,153,.7),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

@keyframes rjShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* دکمه outline - تیره */
.rj-btn-outline {
    background: #252932 !important;
    color: #e4e7ee !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.rj-btn-outline:hover {
    background: #2a2e38 !important;
    border-color: rgba(245,196,83,.3) !important;
    color: #f5c453 !important;
}

/* دکمه کانال */
.rj-btn-channel {
    background: linear-gradient(135deg, #229ED9, #19c7d9) !important;
    color: #fff !important;
    box-shadow:
        0 12px 30px -10px rgba(34,158,217,.5),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.rj-btn-channel:hover {
    background: linear-gradient(135deg, #19c7d9, #0ea5e9) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(34,158,217,.7),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ CHANNEL CHIP
   ═══════════════════════════════════════════════════════════ */

.rj-channel-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(155deg, rgba(34,158,217,.15), rgba(25,199,217,.06)) !important;
    border: 1.5px solid rgba(34,158,217,.4) !important;
    color: #6fd0ea !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 0 20px !important;
    direction: ltr !important;
    letter-spacing: 0 !important;
    box-shadow: 0 0 30px -10px rgba(34,158,217,.4) !important;
    transition: all .18s !important;
}

.rj-channel-chip:hover {
    background:
        linear-gradient(155deg, rgba(34,158,217,.25), rgba(25,199,217,.1)) !important;
    border-color: rgba(34,158,217,.6) !important;
    color: #8adfff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 40px -10px rgba(34,158,217,.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   RJ SPINNER
   ═══════════════════════════════════════════════════════════ */

.rj-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(26,29,36,.3) !important;
    border-top-color: #1a1d24 !important;
    border-radius: 50% !important;
    animation: rjSpin360 .8s linear infinite !important;
}

@keyframes rjSpin360 {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RJ ERROR TEXT
   ═══════════════════════════════════════════════════════════ */

.rj-error-text {
    color: #f87171 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 2 !important;
    margin: 10px 0 20px !important;
    letter-spacing: 0 !important;
}

.rj-success-text {
    color: #7ee6a8 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.9 !important;
    margin: 12px 0 8px !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   VPN / CLOSED NOTICE SCREEN
   ═══════════════════════════════════════════════════════════ */

.vpn-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 80px 28px !important;
    text-align: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #0f1117 !important;
    position: relative !important;
}

.vpn-screen::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(245,196,83,.08), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(96,165,250,.06), transparent 50%) !important;
}

.vpn-screen > * {
    position: relative !important;
    z-index: 1 !important;
}

.vpn-icon {
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 42px !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(245,196,83,.35), rgba(245,196,83,.08)) !important;
    border: 1.5px solid rgba(245,196,83,.4) !important;
    box-shadow:
        0 16px 40px -12px rgba(245,196,83,.5),
        inset 0 0 24px rgba(245,196,83,.15) !important;
    animation: vpnFloat 3s ease-in-out infinite !important;
    color: #f5c453 !important;
    filter: none !important;
}

@keyframes vpnFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.vpn-screen h2 {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #f0f2f7 !important;
    letter-spacing: -.01em !important;
    line-height: 1.35 !important;
}

.vpn-screen p {
    color: #8b95a8 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 2 !important;
    margin: 0 !important;
    max-width: 340px !important;
}

.vpn-screen p strong {
    color: #f5c453 !important;
    font-weight: 800 !important;
}

.vpn-screen .primary-btn {
    max-width: 240px !important;
    margin-top: 12px !important;
    padding: 14px 20px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #f5c453, #e0b13e) !important;
    color: #1a1d24 !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow:
        0 12px 30px -10px rgba(245,196,83,.5),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: all .18s !important;
    letter-spacing: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.vpn-screen .primary-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
    animation: rjShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

.vpn-screen .primary-btn:hover {
    background: linear-gradient(135deg, #ffd76a, #f5c453) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 36px -10px rgba(245,196,83,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.vpn-spinner {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(255,255,255,.1) !important;
    border-top-color: #f5c453 !important;
    border-right-color: #f5c453 !important;
    animation: rjSpin360 .8s linear infinite !important;
    box-shadow: 0 0 20px -4px rgba(245,196,83,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

body:has(.rj-box) ::-webkit-scrollbar,
.app:has(.rj-box) ::-webkit-scrollbar {
    width: 6px !important;
}

body:has(.rj-box) ::-webkit-scrollbar-thumb,
.app:has(.rj-box) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}