@font-face {
    font-family: 'RobloxFont';
    src: local('Arial Black');
}
:root { 
    --primary: #00b06f; 
    --primary-glow: #00ff87; 
    --bg: #0c0d0f; 
    --box-bg: rgba(30, 32, 35, 0.85); 
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: #fff;
    overflow-x: hidden;
    background-image: radial-gradient(circle at 15% 20%, rgba(0, 176, 111, 0.1), transparent 40%), linear-gradient(180deg, #16181b 0%, #0c0d0f 100%);
    background-attachment: fixed;
}

/* نافذة العمر */
.age-gate-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
    z-index: 999999; display: flex; justify-content: center; align-items: center;
}
.age-gate-box {
    background: #111; border: 1px solid var(--primary); padding: 30px; 
    border-radius: 12px; text-align: center; max-width: 400px; width: 90%;
    box-shadow: 0 0 30px rgba(0, 176, 111, 0.3);
}
.age-gate-box h2 { color: var(--primary-glow); margin-bottom: 15px; font-size: 22px; }
.age-gate-box p { color: #ccc; font-size: 14px; margin-bottom: 25px; }
.age-btn {
    padding: 12px 20px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; 
    margin: 5px; font-size: 14px; transition: 0.3s;
}
.age-btn.confirm { background: var(--primary); color: #fff; }
.age-btn.deny { background: #333; color: #fff; }
.age-btn:hover { transform: scale(1.05); }

/* الشريط العلوي */
.analytics-banner {
    display: flex; justify-content: center; gap: 20px;
    background: rgba(10, 10, 10, 0.85);
    padding: 10px; font-size: 11px; font-weight: bold; text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 176, 111, 0.3);
}
.pulse-dot {
    width: 8px; height: 8px; background: var(--primary); border-radius: 50%; display: inline-block;
    box-shadow: 0 0 10px var(--primary); animation: pulse 1.5s infinite;
}

/* تنسيق الهيدر الخاص (اللوغو واسم SpiderRBX وعلامة التوثيق) */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; background: rgba(26, 27, 29, 0.5); backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile { display: flex; align-items: center; gap: 12px; }
.profileimg { flex-shrink: 0; }
.text { display: flex; flex-direction: column; justify-content: center; }
.partner-name { 
    font-family: 'RobloxFont', sans-serif; 
    color: var(--primary-glow); 
    font-size: 18px; 
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.badge-row { margin-bottom: 2px; }
.text p { font-size: 11px; color: #888; margin-top: 2px;}
#how-it-works-btn { background: var(--primary); border: none; color: #fff; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 12px;}

/* الصناديق الأساسية */
.boxholder { padding: 40px 15px; display: flex; flex-direction: column; align-items: center; min-height: 70vh; }
.box1 {
    width: 100%; max-width: 500px;
    background: var(--box-bg); border: 1px solid #393B3D; border-radius: 12px;
    padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px);
    animation: fadeIn 0.4s ease;
}

#box-user, #box-anim1, #box-ownership, #box-amount, #box-anim2, #box-verify { display: none; }

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

.logo { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; }
.title { font-size: 22px; margin-bottom: 10px; }
.maintxt { color: #bbb; font-size: 14px; margin-bottom: 20px; line-height: 1.5; }

input[type="text"] {
    width: 90%; padding: 15px; background: #111214; border: 1px solid #393B3D;
    border-radius: 8px; color: #fff; font-size: 16px; text-align: center; outline: none; margin-bottom: 10px;
}
input[type="text"]:focus { border-color: #fff; }

.device-btn {
    background: #232527; border: 1px solid #393B3D; border-radius: 8px;
    color: #fff; padding: 15px; width: 100%; margin: 5px 0; cursor: pointer;
    font-size: 15px; font-weight: bold; display: flex; gap: 10px; transition: 0.3s;
}
.device-btn:hover { border-color: var(--primary); background: rgba(0,176,111,0.1); }

.getrbx, #verify-btn, #ownership-btn {
    background: linear-gradient(45deg, var(--primary), var(--primary-glow));
    border: none; color: #000; padding: 15px; width: 90%; border-radius: 8px;
    font-size: 16px; font-weight: 900; cursor: pointer; text-transform: uppercase;
    box-shadow: 0 5px 20px rgba(0, 176, 111, 0.4); transition: 0.2s;
}
.getrbx:hover, #verify-btn:hover { transform: scale(1.02); box-shadow: 0 5px 25px rgba(0, 176, 111, 0.6); }

/* الكميات */
.amts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.amt-card {
    background: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 15px; cursor: pointer; transition: 0.3s; position: relative; text-align: center;
}
.amt-card:hover { border-color: var(--primary); transform: scale(1.03); background: rgba(0,176,111,0.1); }
.amt-badge { position: absolute; top: -10px; right: 10px; background: #ffb800; color: #000; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 10px; }
.price span { text-decoration: line-through; color: #777; font-size: 12px; margin-right: 5px; }
.robux_total { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 20px; color: var(--primary-glow); margin-top: 5px; font-weight: bold; }
.robux_total img { width: 20px; }

/* قوائم التحميل */
.step-list { width: 90%; text-align: left; margin-top: 20px; }
.step-item { font-size: 14px; color: #aaa; margin: 8px 0; display: flex; gap: 10px; }
.step-item.active { color: #fff; font-weight: bold; }
.step-item.done { color: var(--primary-glow); }
.fade-image { width: 100px; animation: pulse 2s infinite; }

/* العداد التنازلي والمراحل */
.premium-urgency-box { background: rgba(255,71,71,0.1); border: 1px solid rgba(255,71,71,0.4); padding: 15px; border-radius: 10px; width: 90%; text-align: center; margin-bottom: 15px; }
.countdown-clock { font-size: 30px; font-weight: 900; color: #ff4747; font-family: monospace; letter-spacing: 2px; }
.rewards-badge { background: rgba(255,184,0,0.15); color: #ffb800; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; display: inline-block; margin-top: 5px; }

.live-balance-anim { display: flex; align-items: center; justify-content: center; background: #111; border: 2px solid var(--primary); border-radius: 10px; padding: 15px; margin-bottom: 20px; width: 90%; box-shadow: 0 0 15px rgba(0,176,111,0.3); }
.rbx-number { font-size: 28px; font-weight: bold; color: #fff; margin: 0 10px; }
.rbx-currency { color: var(--primary); font-weight: bold; font-size: 20px; }

.momentum-steps { width: 90%; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 176, 111, 0.15); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; margin-bottom:15px; }
.ms-step { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.ms-step.done { color: #00c97e; }
.ms-step.pending { color: #ffb800; }

/* =========================================
   تنسيق العروض الفخمة (Premium Offers) وإصلاح الصور
   ========================================= */
.offers-wrap { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-bottom: 20px; animation: fadeIn 0.5s ease-out; }
.premium-offer { display: flex; align-items: center; gap: 15px; background: rgba(20, 26, 31, 0.9); border: 1px solid rgba(0, 176, 111, 0.3); border-radius: 14px; padding: 16px; text-decoration: none; color: #fff; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; }
.premium-offer:hover { background: rgba(0, 176, 111, 0.08); border-color: #00ff87; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 176, 111, 0.25); }
.premium-offer::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #00b06f, #00ff87); border-radius: 4px 0 0 4px; }

/* إصلاح الصور نهائياً */
.offer-icon-wrapper { background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.premium-offer img { width: 45px !important; height: 45px !important; min-width: 45px !important; max-width: 45px !important; min-height: 45px !important; max-height: 45px !important; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.3)); display: block; }

.offer-details { flex: 1; text-align: left; overflow: hidden; }
.offer-title { font-size: 15px; font-weight: 900; color: #fff; margin-bottom: 5px; }
.offer-desc { font-size: 11.5px; color: #b7b1b1; line-height: 1.6; margin-bottom: 8px; }

.offer-badges { display: flex; gap: 8px; flex-wrap: wrap;}
.easy-fast-badge { background: rgba(0, 176, 111, 0.15); color: #00ff87; font-size: 9px; padding: 4px 8px; border-radius: 20px; font-weight: bold; border: 1px solid rgba(0, 176, 111, 0.3); text-transform: uppercase; }
.easy-fast-badge.alt { background: rgba(255, 184, 0, 0.1); color: #ffb800; border-color: rgba(255, 184, 0, 0.3); }

.offer-btn-pulse { background: linear-gradient(135deg, #00b06f, #00ff87); color: #000; font-weight: 900; font-size: 12px; padding: 12px 18px; border-radius: 8px; border: none; cursor: pointer; text-transform: uppercase; flex-shrink: 0; box-shadow: 0 0 15px rgba(0, 176, 111, 0.4); animation: btnPulse 2s infinite; transition: 0.2s; }
.premium-offer:hover .offer-btn-pulse { transform: scale(1.05); box-shadow: 0 0 25px rgba(0, 176, 111, 0.6); }

@keyframes btnPulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.task-instruction-box { background: linear-gradient(90deg, rgba(0,176,111,0.15), rgba(0,255,135,0.05)); border-left: 4px solid #00ff87; padding: 15px; border-radius: 4px 8px 8px 4px; color: #fff; font-size: 14px; line-height: 1.6; text-align: left; margin-bottom: 15px; border-top: 1px solid rgba(0, 255, 135, 0.1); border-right: 1px solid rgba(0, 255, 135, 0.1); border-bottom: 1px solid rgba(0, 255, 135, 0.1); }
.task-instruction-box strong { color: #00ff87; font-size: 16px; display: block; margin-bottom: 5px; text-transform: uppercase; }

/* شريط التقدم السفلي */
.sticky-progress { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; background: rgba(10, 16, 12, 0.97); border-top: 1px solid rgba(0, 176, 111, 0.3); padding: 10px 20px 14px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); }
.sticky-progress.show { display: block; }
.sp-label { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; margin-bottom: 6px; }
.sp-label strong { color: #fff; }
.sp-bar-bg { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; }
.sp-bar-fill { height: 100%; width: 66%; background: linear-gradient(90deg, #00b06f, #00ff87); border-radius: 20px; animation: loadBar 2s ease forwards;}
@keyframes loadBar { from { width: 0%; } to { width: 66%; } }

/* قسم التعليقات الحي والردود */
.comments-section { width: 95%; max-width: 600px; margin: 30px auto 80px; background: rgba(22, 24, 28, 0.85); padding: 25px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); }
.comments-header-premium { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.verify-shield { width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); margin-right: 5px; }
.cp-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; width: 100%;}
.cp-title-wrap { display: flex; align-items: center; }
.cp-title { color: #ffb800; font-weight: bold; font-size: 16px; }
.cp-count { background: rgba(255,184,0,0.1); color: #ffb800; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.cp-glow-line { height: 1px; background: rgba(255,255,255,0.1); width: 100%; position: relative; }
.cp-glow-line::after { content: ''; position: absolute; top: 0; left: 0; width: 50px; height: 2px; background: #FFD700; box-shadow: 0 0 10px #FFD700; }

.comment-list { display: flex; flex-direction: column; gap: 20px; margin-top: 15px;}
.comment { display: flex; gap: 15px; animation: fadeIn 0.5s; position: relative; }
.comment.reply { margin-left: 50px; margin-top: -10px; }
.comment.reply::before { content: ''; position: absolute; left: -28px; top: -15px; width: 20px; height: 35px; border-left: 2px solid rgba(255,255,255,0.1); border-bottom: 2px solid rgba(255,255,255,0.1); border-bottom-left-radius: 10px; }
.comment-avatar { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #2a2d32; }
.comment.reply .comment-avatar { width: 35px; height: 35px; }
.comment-container { flex: 1; }
.comment-bubble { padding-bottom: 5px; }
.comment-author { font-weight: bold; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 5px; }
.verified-badge { background: var(--primary); color: #000; border-radius: 50%; width: 14px; height: 14px; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.comment-time { font-size: 11px; color: #888; }
.comment-text { font-size: 13.5px; color: #ddd; line-height: 1.5; }

.comment-actions { margin-top: 8px; display: flex; gap: 15px; align-items: center; font-size: 12px; font-weight: bold; color: #888; position: relative; }
.action-btn { cursor: pointer; transition: 0.2s; position: relative; display: inline-block;}
.action-btn:hover { color: #fff; }
.action-btn.liked { color: #ff3b5c; animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.floating-heart { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); font-size: 20px; pointer-events: none; z-index: 100; animation: floatUp 1s ease-out forwards; }
@keyframes floatUp { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1.5); } }
.action-likes { color: #ff3b5c; background: rgba(255, 59, 92, 0.1); padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* الإشعار الاحترافي (Toast Alert) */
.custom-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #ff4747; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 13px; font-weight: bold; box-shadow: 0 5px 20px rgba(255, 71, 71, 0.5); z-index: 999999; animation: toastSlideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes toastSlideDown { from { top: -50px; opacity: 0; } to { top: 20px; opacity: 1; } }
.toast-fade-out { animation: toastFadeOut 0.4s ease forwards; }
@keyframes toastFadeOut { to { top: -50px; opacity: 0; } }

/* النوافذ المنبثقة */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; }
.modal-content { background: #1a1b1d; border: 1px solid #333; margin: 15% auto; padding: 25px; border-radius: 12px; width: 85%; max-width: 400px; text-align: left; }
.close-btn { float: right; font-size: 24px; cursor: pointer; color: #aaa; }
.close-btn:hover { color: #fff; }

/* الإشعارات */
.live-notifications { position: fixed; bottom: 80px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.notification-item { background: rgba(26,27,29,0.95); border-left: 4px solid var(--primary); padding: 12px; border-radius: 6px; display: flex; gap: 10px; font-size: 12px; width: 280px; animation: slideIn 0.5s, fadeOut 0.5s 4.5s forwards; }
@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* الزر الثابت السفلي */
.sticky-claim { display: none; position: fixed; bottom: 70px; left: 10px; right: 10px; z-index: 9998; max-width: 500px; margin: 0 auto; }
.sticky-claim-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #000; font-weight: 900; border: none; border-radius: 10px; font-size: 16px; box-shadow: 0 0 20px rgba(0,176,111,0.5); animation: pulse 2s infinite; cursor: pointer; text-transform: uppercase;}

/* تذييل الموقع */
.footer { text-align: center; padding: 20px; color: #666; font-size: 11px; background: rgba(0,0,0,0.5); margin-top: 40px; margin-bottom: 50px;}

/* للهواتف المحمولة */
@media (max-width: 480px) {
    .amts-grid { grid-template-columns: 1fr; }
    .box1 { padding: 20px 15px; border-radius: 8px; }
    input[type="text"] { font-size: 16px; }
    .notification-item { left: 10px; width: calc(100% - 20px); }
    .premium-offer { flex-direction: column; text-align: center; }
    .offer-details { text-align: center; }
    .offer-badges { justify-content: center; }
    .offer-btn-pulse { width: 100%; }
}