@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; }

body { background: radial-gradient(circle at top, #1e0b36, #090514); color: #fff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; overflow-x: hidden; }

/* Navbar & Global */
.navbar { width: 100%; background: rgba(15, 16, 21, 0.8); backdrop-filter: blur(15px); display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; border-bottom: 1px solid rgba(176, 38, 255, 0.2); position: sticky; top: 0; z-index: 100; }
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1.5rem; font-weight: bold; color: #b026ff; }
.logo-img { width: 40px; height: 40px; border-radius: 50%; }
.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; }
.nav-links a { text-decoration: none; color: #a0a5b5; font-size: 1.1rem; transition: 0.3s; display: flex; align-items: center; gap: 5px; }
.nav-links a:hover, .nav-links a.active { color: #b026ff; }

.lang-btn { background: rgba(176, 38, 255, 0.2); padding: 5px 12px; border-radius: 15px; border: 1px solid rgba(176, 38, 255, 0.5); }
.lang-btn:hover { background: rgba(176, 38, 255, 0.5); color: #fff !important; }

/* Stats & Controls */
.stats-section { display: flex; gap: 20px; margin: 30px 0; flex-wrap: wrap; justify-content: center; width: 90%; max-width: 1200px; }
.stat-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(176, 38, 255, 0.2); padding: 20px; border-radius: 15px; display: flex; align-items: center; gap: 15px; min-width: 250px; flex: 1; }
.stat-box i { font-size: 2.5rem; }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 1.8rem; font-weight: bold; }
.stat-label { color: #a0a5b5; font-size: 0.9rem; }

.controls-section { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1200px; margin-bottom: 20px; gap: 15px; flex-wrap: wrap; }
.search-box, .filters select { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(176, 38, 255, 0.3); border-radius: 10px; padding: 10px 15px; color: #fff; outline: none; }
.search-box { display: flex; align-items: center; gap: 10px; flex-grow: 1; max-width: 400px; }
.search-box input { background: transparent; border: none; color: #fff; width: 100%; outline: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters select option { background: #090514; color: #fff; }

/* Streamers Container */
.streamers-container { display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; width: 90%; max-width: 1200px; min-height: 400px; }
.streamer-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); border: 1px solid rgba(176, 38, 255, 0.1); border-radius: 20px; width: 300px; max-width: 100%; overflow: hidden; position: relative; transition: 0.3s ease; cursor: pointer; height: fit-content; }
.streamer-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(176, 38, 255, 0.2); }
.card-banner { width: 100%; height: 110px; background-size: cover; background-position: center; }
.card-content { padding: 15px; background: linear-gradient(to top, #15171e 80%, transparent); margin-top: -30px; }
.profile-wrapper { position: relative; width: 65px; height: 65px; margin-top: -35px; margin-bottom: 10px; border-radius: 50%; padding: 3px; background: #15171e; }
.profile-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.live-badge { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background-color: #53fc18; border-radius: 50%; border: 2px solid #15171e; box-shadow: 0 0 10px #53fc18; animation: pulse 1.5s infinite; }
.offline-badge { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background-color: #ff4747; border-radius: 50%; border: 2px solid #15171e; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(83, 252, 24, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(83, 252, 24, 0); } 100% { box-shadow: 0 0 0 0 rgba(83, 252, 24, 0); } }

.bell-icon { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 50%; color: #fff; font-size: 1.1rem; z-index: 10; transition: 0.3s; }
.bell-icon:hover { transform: scale(1.1); }
.bell-icon.active { color: #f1c40f; text-shadow: 0 0 10px #f1c40f; }

.streamer-info h3 { font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; }
.viewers { font-size: 0.8rem; color: #ff4747; background: rgba(255, 71, 71, 0.1); padding: 3px 8px; border-radius: 12px; }
.viewers.live { color: #53fc18; background: rgba(83, 252, 24, 0.1); }
.stream-title { font-size: 0.85rem; color: #a0a5b5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer */
.site-footer { margin-top: 50px; padding: 20px; text-align: center; color: #a0a5b5; cursor: pointer; border-top: 1px solid rgba(176, 38, 255, 0.2); width: 100%; }
.site-footer span { color: #b026ff; font-weight: bold; }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 999; }
.modal-content { background: #15171e; border: 1px solid #b026ff; border-radius: 20px; padding: 30px; text-align: center; width: 90%; max-width: 400px; animation: popIn 0.3s ease; position: relative; overflow: hidden; }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-icon { font-size: 3rem; margin-bottom: 15px; }
.modal-btn { background: #b026ff; color: #fff; border: none; padding: 10px 20px; border-radius: 10px; margin-top: 20px; cursor: pointer; font-size: 1rem; width: 100%; font-weight: bold; }
.modal-btn:hover { background: #8a1ecc; }

.profile-modal { padding: 0; padding-bottom: 20px; }
.modal-banner { height: 120px; background-size: cover; background-position: center; }
.modal-profile-img { width: 90px; height: 90px; border-radius: 50%; margin-top: -45px; border: 4px solid #15171e; }
.modal-stats { margin: 10px 0; }
.modal-title { padding: 0 20px; color: #a0a5b5; font-size: 0.9rem; margin-bottom: 15px; }
.watch-btn { display: block; width: 80%; margin: 0 auto; text-decoration: none; background: #53fc18; color: #000; }
.watch-btn:hover { background: #45d812; }
.twitter-btn { background: #fff; color: #000; text-decoration: none; display: inline-block; }

/* ==========================================================
   تعديلات اتجاه الموقع للغة الإنجليزية (LTR)
========================================================== */
html[dir="ltr"] .streamer-info h3 { flex-direction: row; }
html[dir="ltr"] .bell-icon { right: 10px; left: auto; }
html[dir="ltr"] .live-badge, html[dir="ltr"] .offline-badge { right: 2px; left: auto; }

/* ==========================================================
   التصميم المتجاوب (الجوال)
========================================================== */
@media screen and (max-width: 768px) {
    .navbar { flex-direction: column; padding: 15px 20px; gap: 15px; }
    .nav-links { width: 100%; justify-content: space-around; gap: 10px; flex-wrap: wrap; }
    .nav-links a { font-size: 0.95rem; }
    .stats-section { flex-direction: column; gap: 15px; }
    .stat-box { width: 100%; }
    .controls-section { flex-direction: column; gap: 15px; }
    .search-box { width: 100%; max-width: 100%; }
    .filters { width: 100%; }
    .filters select { flex: 1; font-size: 0.9rem; }
    .modal-content { width: 95%; padding: 20px; }
}
