/* ==========================================================
   استایل‌های سایدبار، دکمه همبرگری و مودال‌های تیره
   نکته: این فایل باید بعد از style.css لود شود (به var(--accent) نیاز دارد).
   دو متغیر اختصاصیِ سایدبار هم پایین اضافه شد چون رنگشان
   با --primary فرق دارد (بنفشِ تیره‌ترِ مخصوصِ سایدبار).
========================================================== */
:root {
    --sidebar-bg: #2a1548;
    --sidebar-hover-bg: #3d2263;
    --dark-modal-bg: #1a1a2e;
    --dark-modal-border: #303055;
}

/* ------------------ سایدبار / منوی اصلی ------------------ */
/* اصلاح شده برای حرکت از راست */
.sidebar {
    position: fixed;
    top: 0;
    left: -250px; /* شروع از سمت راست (مخفی) */
    width: 250px;
    height: 100%;
    background-color: var(--sidebar-bg);
    z-index: 99999;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* انیمیشن نرم‌تر */
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); /* سایه جذاب */
}

/* وقتی منو باز می‌شود */
.sidebar.active {
    left: 0;
}

/* لایه تیره پس‌زمینه */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
    backdrop-filter: blur(3px); /* افکت مات‌کنندگی برای جذابیت بیشتر */
    transition: opacity 0.4s ease;
}

/* سربرگ منو */
.sidebar-header {
    padding: 30px 10px;
    text-align: center;
    border-bottom: 1px solid var(--sidebar-hover-bg);
    margin-bottom: 10px;
}

.sidebar-header span {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--accent); /* همان رنگ زرد طلایی سایت */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* کمی سایه برای خوانایی بیشتر روی پس‌زمینه بنفش */
    letter-spacing: 0.5px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 10px;
    border: 3px solid var(--accent); /* حاشیه طلایی برای آواتار */
}

/* لیست لینک‌ها */
.sidebar-links {
    list-style: none;
    padding: 0;
}

.sidebar-links li a {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #e0e0e0;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
}

.sidebar-links li a i {
    margin-left: 15px; /* فاصله آیکون */
    width: 20px;
}

.sidebar-links li a:hover {
    background: var(--sidebar-hover-bg);
    color: var(--accent); /* رنگ زرد هنگام هاور */
}

/* دکمه همبرگری - برای جابجایی در هدر */
.header-right {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* این باعث می‌شود همبرگر به سمت راست بیاید */
    justify-content: flex-start;
}

.hamburger-menu {
    margin-left: 15px; /* فاصله از سمت راست */
    cursor: pointer;
    display: flex; /* فعال کردن فلکس باکس */
    align-items: center; /* تراز عمودی در مرکز */
    justify-content: center; /* تراز افقی در مرکز */
    height: 100%; /* ارتفاع را به اندازه والد بگیرد */
    transition: transform 0.3s;
}

.hamburger-menu:hover {
    transform: scale(1.1);
}

/* تنظیم رنگ زرد برای SVG */
.hamburger-menu svg {
    stroke: var(--accent);
    transition: stroke 0.3s;
}

/* افکت جمع شدن محتوا وقتی سایدبار باز است */
.main-container {
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* امتیاز کاربر داخل سایدبار */
#score-text {
    direction: rtl; /* راست‌چین کردن */
    font-family: "Tahoma", "Vazir", sans-serif; /* فونت‌های فارسی اعداد را بهتر نمایش می‌دهند */
    color: #aaa;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 5px;
}


/* ------------------ مودال «مشاهدات اخیر» ------------------ */
.last-watched-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.last-watched-content {
    background: var(--dark-modal-bg);
    width: 90%;
    max-width: 400px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--dark-modal-border);
    color: white;
}

.list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #16213e;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
}

.list-item:hover {
    background: #0f3460;
    border-color: #3498db;
}


/* ------------------ مودال عمومیِ تیره (تأیید/اطلاع‌رسانی) ------------------ */
/* بک‌گراند تار برای کل صفحه */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* تاریک و شفاف */
    backdrop-filter: blur(8px); /* افکت مات جذاب */
    z-index: 9999; /* بالاتر از همه */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* کارت داخلی مودال */
.modal-box {
    background: var(--dark-modal-bg);
    width: 90%;
    max-width: 450px;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--dark-modal-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#videoModal {
    z-index: 9999999 !important; /* این عدد باید از z-index سایدبار بیشتر باشد */
    display: none; /* یا هر حالتی که داری */
}


/* ------------------ افکت دکمه ذخیره ------------------ */
/* افکت لرزش هنگام هاور */
.save-btn:hover {
    animation: shake 0.5s;
    background: rgba(255, 255, 255, 0.2) !important;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* برای حالتِ ذخیره‌شده (توپر) */
.saved-icon {
    color: #f1c40f !important; /* رنگ طلایی برای نشان دادن وضعیت ذخیره شده */
}

/* برای مودال اصلی - عریض‌تر برای نمایش کارت‌های کنار هم */


/* دکمه بستن مدرن */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: #333;
    transition: 0.3s;
}
.close-btn:hover { color: #f44336; }

/* --- استایلِ کارت‌هایِ کلاس (مودال) --- */
.class-card-modern {
    display: flex;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 550px;
    height: 160px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}
.class-card-modern:hover { transform: scale(1.02); }

.class-cover { width: 40%; height: 100%; object-fit: cover; }

.class-info {
    width: 60%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.class-info h3 { margin: 0 0 5px 0; color: #311b5e; font-size: 1.2rem; }
.class-info p { margin: 0; color: #555; font-size: 0.95rem; }

/* --- استایلِ دکمه مشاهده --- */
.btn-sessions {
    background: linear-gradient(135deg, #311b5e, #5e35b1);
    color: white;
    border: none;
    padding: 10px 0;
    border-radius: 12px;
    cursor: pointer;
    width: 80%;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
}
.btn-sessions:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(94, 53, 177, 0.3); }

/* --- استایلِ لیستِ جلسات --- */
.sessions-container { max-width: 600px; margin: 30px auto; }

.session-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    padding: 0; /* عکس کلِ لبه رو می‌پوشونه */
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
    transition: 0.3s;
    height: 140px; /* ارتفاعِ ثابت برای هماهنگی */
    overflow: hidden;
    width: 100%;
}

.session-card:hover { transform: scale(1.02); }
.session-cover {
    width: 35%; /* عکس یک‌سوم کارت رو بگیره */
    height: 100%;
    object-fit: cover;
}

.session-info {
    width: 65%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.session-info h3 { margin: 0 0 5px 0; color: #311b5e; font-size: 1.1rem; }
.session-info p { margin: 0; color: #666; font-size: 0.85rem; }

.next-session-highlight {
    border: 2px solid #5e35b1;
    background: #fdfcff;
}

.badge {
    background: #5e35b1;
    color: #fff;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.actions { margin-top: 15px; display: flex; justify-content: center; gap: 10px; }

.btn {
    background: #5e35b1;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}
.btn:hover { background: #311b5e; }

.session-icons {
    display: flex;
    justify-content: center;
    gap: 18px; /* فاصله بیشتر */
    margin-top: 15px;
}

.session-icons a {
    color: #5e35b1;
    font-size: 1.6rem; /* آیکون بزرگتر */
    transition: 0.3s;
}

.session-icons a.active-icon {
    color: #5e35b1 !important; /* رنگ اصلی فیزیک‌لند وقتی فعاله */
    pointer-events: auto;
}
.session-icons a.disabled {
    color: #ccc !important;
    cursor: not-allowed;
}

#sidebar-container { display: flex; flex-direction: column; height: 100%; position: relative; }
.sidebar-blur { 
        filter: blur(2px); /* اینجا را از 5 به 2 تغییر دادم تا نوشته‌ها پیدا باشند */
        pointer-events: none; 
        opacity: 0.7; /* اپاسیتی را هم کمی زیاد کردم که پررنگ‌تر دیده شود */
        transition: 0.3s; 
    }


@keyframes notifBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.15);
  }
}

#hamburgerNotifDot.blinking {
  animation: notifBlink 1s ease-in-out infinite;
}



@keyframes guestPulse {
    0%, 100% {
      box-shadow: 0 0 6px rgba(255, 183, 3, 0.4);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 18px rgba(255, 183, 3, 0.85);
      transform: scale(1.02);
    }
  }

  @keyframes lockGlow {
    0%, 100% {
      transform: scale(1);
      opacity: 0.85;
    }
    50% {
      transform: scale(1.08);
      opacity: 1;
    }
  }