/* ===============================
   Tasi3a Maths – Cassiopeia Style
   =============================== */

:root{
  --gold:#ffd369;
  --navy:#0b1c2d;
  --blue:#163a52;
  --bg:#f1f5f9;
  --text:#1a202c;
  --muted:#718096;
  --danger:#e53e3e;
}

/* ===== Global ===== */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Tajawal', system-ui, sans-serif;
}

a{
  color:var(--blue);
  text-decoration:none;
}

a:hover{
  color:var(--gold);
}

/* ===== Headings ===== */
h1,h2,h3,h4{
  font-weight:900;
  color:var(--navy);
}

h1{
  font-size:clamp(26px,4vw,42px);
}

/* ===== Header ===== */
header{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  border-bottom:4px solid var(--gold);
}

header a,
header .navbar-brand{
  color:#fff !important;
  font-weight:800;
}

/* ===== Buttons ===== */
.btn,
.button,
button{
  border-radius:14px;
  font-weight:900;
  padding:10px 18px;
  transition:.25s;
}

.btn-primary{
  background:var(--navy);
  border:none;
  color:var(--gold);
}

.btn-primary:hover{
  background:var(--gold);
  color:var(--navy);
}

/* ===== Sections ===== */
.section,
.container,
.wrapper{
  margin-bottom:40px;
}

/* ===== Cards (Gamified) ===== */
.card,
.mod-custom{
  background:#fff;
  border-radius:24px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
  padding:28px;
  transition:.3s;
}

.card:hover,
.mod-custom:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.18);
}

/* Card states */
.card.unlocked{
  border-top:6px solid var(--gold);
}

.card.locked{
  opacity:.55;
  filter:grayscale(1);
  position:relative;
}

.card.locked::after{
  content:"🔒 مغلق";
  position:absolute;
  top:16px;
  left:16px;
  background:var(--danger);
  color:#fff;
  padding:6px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
}

/* ===== Icons ===== */
.icon{
  font-size:48px;
  margin-bottom:10px;
}

/* ===== Text helpers ===== */
.muted{
  color:var(--muted);
}

/* ===== Footer ===== */
footer{
  background:#0b1c2d;
  color:#cbd5e1;
  padding:30px 0;
}

footer a{
  color:var(--gold);
  font-weight:700;
}

/* ===== Mobile tweaks ===== */
@media (max-width:768px){
  .card{
    padding:22px;
  }
}

.navbar-brand {
    display: none !important;
}


/* تنسيق فضاء التلميذ الملكي */
.dashboard-box { direction: rtl !important; text-align: center; background: #000 !important; color: #facc15 !important; padding: 30px; border-radius: 20px; border: 2px solid #facc15; margin: 20px 0; }
.dashboard-grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.dashboard-item { flex: 1; min-width: 250px; background: #1a1a1a; padding: 20px; border-radius: 15px; border: 1px solid #333; }
.gold-btn { display: block; background: #facc15; color: #000 !important; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: bold; margin-top: 10px; }

/* 1. تحسين شكل الكارت الخارجي */
.blog-item {
    background: #ffffff;
    border-radius: 20px; /* زوايا مدورة احترافية */
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* حركة ناعمة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ظل خفيف */
    border: 1px solid #f1f5f9;
}

/* 2. تأثير عند مرور الماوس على التمرين */
.blog-item:hover {
    transform: translateY(-8px); /* الكارت يرتفع قليلاً */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); /* الظل يقوى */
    border-color: #22c55e; /* تغيير لون الإطار للأخضر عند الاختيار */
}

/* 3. تحسين صورة الـ Intro */
.blog-item .item-image {
    margin: 0 !important;
    overflow: hidden;
}

.blog-item .item-image img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease; /* زووم ناعم للصورة */
}

.blog-item:hover .item-image img {
    transform: scale(1.05); /* تكبير الصورة قليلاً عند التحويم */
}

/* 4. تنسيق العنوان فوق أو تحت الصورة */
.blog-item .page-header h2 {
    padding: 15px 20px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
}

.blog-item .page-header h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-item:hover .page-header h2 a {
    color: #22c55e; /* تغيير لون العنوان عند التحويم */
}

/* 5. إخفاء أي هوامش زائدة من جوملة */
.blog-item .article-info {
    display: none; /* إخفاء معلومات الكاتب والتاريخ لزيادة النظافة البصرية */
}

.blog-item:active {
    transform: translateY(-2px) scale(0.98); /* هبطة خفيفة كأنه نزل على زر */
    transition: 0.1s;
}

.blog-item .item-image img {
    aspect-ratio: 4 / 3; /* يفرض قياس موحد لكل التصاور */
    object-fit: cover; /* يمنع التصويرة باش ما تتجبدش (stretch) */
}

/* تنسيق أزرار التنقل بين الصفحات */
.pagination {
    margin-top: 40px;
    justify-content: center;
    gap: 10px;
}

.pagination li a, .pagination li span {
    border-radius: 10px !important;
    padding: 10px 18px !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: bold;
    transition: 0.3s;
}

.pagination li.active span {
    background-color: #22c55e !important; /* لون أخضر مثل زر التفاعل */
    border-color: #22c55e !important;
    color: white !important;
}

.pagination li a:hover {
    background-color: #f1f5f9 !important;
    transform: translateY(-2px);
}
@keyframes pulse-green {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.download-btn-pulse {
    animation: pulse-green 2s infinite;
}


/* --- Tasi3a Maths Responsive Fix --- */

@media (max-width: 768px) {
    /* تصغير الحاوية الكبيرة */
    .weekly-container, .student-dashboard {
        max-width: 95% !important;
        margin: 15px auto !important;
        border-radius: 20px !important;
    }

    /* تعديل الهيدر */
    .weekly-container div[style*="linear-gradient"], 
    .student-dashboard div[style*="linear-gradient"] {
        padding: 20px 15px !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .weekly-container h2, .student-dashboard h2 {
        font-size: 1.2rem !important;
    }

    /* تحسين قراءة النصوص والتمارين */
    .weekly-container div[style*="background: #f8fafc"],
    .weekly-container div[style*="background: white"] {
        padding: 15px !important;
    }

    .weekly-container p, .weekly-container div {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* تعديل صناديق الرياضيات (Math Boxes) */
    .weekly-container div[style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
        padding: 10px !important;
        overflow-x: auto; /* باش المعادلات الطويلة ما تخرجش من الشاشة */
    }

    /* تعديل أزرار التحميل والإرسال */
    .download-btn-pulse, 
    .student-dashboard button[type="submit"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 15px 10px !important;
        justify-content: center !important;
    }

    /* تعديل خاص بالداشبورد (الأسئلة) */
    .student-dashboard div[style*="display: flex; align-items: center; justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
    }
}






<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>