/* =================================================== */
/* Step2English - Original Strong Blue Design (Server) */
/* =================================================== */
summary::-webkit-details-marker{display:none;}
details>summary{list-style:none;}

/* =================================================== */
/* 🌐 نصوص واجهة النظام (تسحب من السيرفر)            */
/* =================================================== */
.s2-ui-title-main::after { content: "▶ شرح السؤال"; }
.s2-ui-title-video::after { content: "🎬 فيديو الشرح"; }
.s2-ui-title-steps::after { content: "💡 خطوات الحل"; }
.s2-ui-btn-answer::after { content: "👀 شاهد الإجابة"; }
.s2-ui-title-correct::after { content: "✅ الإجابة الصحيحة"; }
.s2-ui-title-hint::after { content: "💡 توضيح سريع"; }
.s2-ui-read-orig::after { content: "📖 النص الكامل"; }
.s2-ui-read-trans::after { content: "🌐 شرح وترجمة النص"; }
.s2-ui-read-sum::after { content: "📋 ملخص النص"; }
.s2-ui-btn-down::after { content: "👇 الذهاب للأسئلة بالأسفل"; }
.s2-ui-btn-up::after { content: "👆 العودة لقراءة النص"; }
.s2-ui-title-q::after { content: "📝 السؤال"; }
.s2-ui-title-proof::after { content: "📖 الدليل من النص"; }
.s2-ui-title-understand::after { content: "🧠 افهم السؤال"; }
.s2-ui-btn-close::after { content: "✕ إغلاق"; }

/* إخفاء زر "اضغط لعرض المحتوى" تماماً */
.s2-glass-wrap { display: none !important; }

/* =================================================== */
/* 🚀 إجبار Moodle على فرد الخيارات بعرض الشاشة         */
/* =================================================== */
.que .formulation .qtext { display: inline-block !important; width: 100% !important; padding-top: 24px !important; }
.que.description .qtext { display: inline-block !important; width: 100% !important; padding-top: 24px !important; }
.que.multichoice .answer { display: block !important; width: 100% !important; }
.que.multichoice .answer div[class^="r"] { display: flex !important; width: 100% !important; max-width: 100% !important; align-items: center !important; flex-wrap: nowrap !important; }
.que.multichoice .answer div[class^="r"] > input { flex-shrink: 0 !important; margin: 0 10px 0 0 !important; }
.que.multichoice .answer div[class^="r"] > label, .que.multichoice .answer div[class^="r"] > div.d-flex, .que.multichoice .answer div[class^="r"] > div.flex-fill { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; }

/* =================================================== */
/* تصميم بطاقات الخيارات الأصلي (القوي)                  */
/* =================================================== */
.s2-option-wrap { display:block !important; width:100% !important; flex: 1 1 100% !important; box-sizing:border-box !important; margin-bottom: 12px; }
.s2-option-card { background-color:#ffffff !important; border-radius:18px !important; display:block !important; width:100% !important; box-sizing:border-box !important; box-shadow:0 5px 16px rgba(0,20,50,0.06) !important; border:1px solid #dbe7f5 !important; overflow:hidden !important; min-height:84px !important; }
.s2-option-card-inner { display:flex !important; align-items:stretch !important; width:100% !important; min-height:84px !important; }
.s2-option-card-bar { width:6px !important; min-width:6px !important; align-self:stretch !important; display:block !important; background:linear-gradient(180deg,#002b5e,#00a8e8) !important; }
.s2-option-card-body { padding:16px 18px !important; font-family:Segoe UI, Tahoma, Arial, sans-serif !important; width:100% !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; }
.s2-option-row { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; width:100% !important; }

/* 🌟 تدمير هوامش Moodle المخفية وإجبار التوسيط بنظام Grid 🌟 */
.s2-option-number { min-width:40px !important; width:40px !important; height:36px !important; border-radius:12px !important; background:#eff6ff !important; border:1px solid #d0e1f9 !important; display:grid !important; place-items:center !important; font-size:18px !important; font-weight:950 !important; color:#0b4aa6 !important; line-height:0 !important; font-family:'Segoe UI',Tahoma,sans-serif !important; padding:4px 0 0 0 !important; margin:0 !important; box-sizing:border-box !important; text-align:center !important; }
.s2-main-q .qnum { min-width:44px !important; width:44px !important; height:40px !important; border-radius:12px !important; background:#eff6ff !important; border:1px solid #d0e1f9 !important; color:#0b4aa6 !important; display:grid !important; place-items:center !important; font-size:20px !important; font-weight:950 !important; font-family:Tahoma,sans-serif !important; line-height:0 !important; padding:4px 0 0 0 !important; margin:0 !important; box-sizing:border-box !important; text-align:center !important; }
.s2-option-number *, .s2-main-q .qnum * { margin:0 !important; padding:0 !important; line-height:0 !important; }

.s2-option-text { font-size:20px !important; font-weight:800 !important; color:#0b2f5b !important; line-height:1.55 !important; flex:1 1 auto !important; width:100% !important; min-width:0 !important; font-family:'Segoe UI',Tahoma,sans-serif !important; }

/* =================================================== */
/* الأزرار ونظام البطاقات (اللون الأزرق الموحد)         */
/* =================================================== */
.s2pulse{animation:s2pulse 2s infinite;transform-origin:center;}
@keyframes s2pulse{0%{transform:scale(1);box-shadow:0 4px 12px rgba(0,0,0,0.1);}50%{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.15);}100%{transform:scale(1);box-shadow:0 4px 12px rgba(0,0,0,0.1);}}

.s2-explain-box { background-color:#ffffff !important; border:1px solid #dbe7f5 !important; border-radius:18px !important; margin-top:24px !important; margin-bottom:24px !important; width:100% !important; box-shadow:0 5px 16px rgba(0,20,50,0.06) !important; overflow:hidden !important; display:block !important; box-sizing:border-box !important; -webkit-tap-highlight-color: transparent; }
.s2-explain-trigger { cursor: pointer; display:block !important; width:100% !important; }
.s2-explain-trigger-topbar { display: none !important; }
.s2-explain-trigger-body { padding:22px 16px !important; text-align:center !important; width:100% !important; box-sizing:border-box !important; }

.s2-explain-trigger-btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; padding:10px 36px !important; border-radius:50px !important; font-family:'Almarai',Tahoma,sans-serif !important; font-weight:800 !important; font-size:18px !important; pointer-events:none !important; background:#0b4aa6 !important; color:#ffffff !important; border:2px solid #ffffff !important; box-shadow:0 8px 16px rgba(11,74,166,0.25) !important; }

/* نافذة الشرح الكبيرة وزر الإغلاق */
.s2-explain-panel{ display:none; position:fixed!important; left:12px!important; right:12px!important; top:12px!important; bottom:12px!important; z-index:2147483000!important; overflow:auto!important; box-sizing:border-box!important; background:#f8fafc!important; border:1px solid #cbd5e1!important; border-radius:24px!important; box-shadow:0 20px 48px rgba(0,0,0,0.2)!important; padding:16px!important; font-family: 'Almarai', Tahoma, sans-serif !important; }
.s2-explain-panel-inner { max-width:800px; margin:0 auto; padding-top:65px; padding-bottom:40px; }
.s2-close-modal-btn { position:fixed; top:24px; left:24px; background:#0b4aa6; color:#ffffff; border:none; border-radius:12px; padding:10px 18px; font-weight:900; font-family:'Almarai', Tahoma, sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; z-index:2147483647; box-shadow: 0 6px 16px rgba(11,74,166,0.35); font-size:16px; transition:all 0.2s; }

/* نظام البطاقات الداخلية (الفيديو والخطوات) */
.s2-content-card { background: #ffffff; border-radius: 20px; border: 2px solid #bfdbfe; box-shadow: 0 12px 30px rgba(11, 74, 166, 0.08); overflow: hidden; margin-bottom: 24px; }
.s2-card-header { background: linear-gradient(90deg, #0b4aa6, #3b82f6); color: #ffffff; padding: 14px 20px; font-family: 'Almarai', Tahoma, sans-serif; font-weight: 900; font-size: 22px; display: flex; align-items: center; gap: 10px; direction: rtl; }
.s2-card-body { padding: 24px; direction: rtl; text-align: right; }
.s2-video-container { background: #000; padding: 56.25% 0 0 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.s2-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.s2-divider-modern { border-bottom: 2px dashed #cbd5e1; margin: 30px 0; }

/* =================================================== */
/* تنسيقات قطع القراءة (الخطوط الكبيرة الأصلية)        */
/* =================================================== */
.s2-passage-box { background:#ffffff; border:1px solid #d7e6f6; border-radius:18px; padding:24px; direction:ltr; text-align:left; font-family:Verdana,Arial,sans-serif; color:#0f172a; font-size:24px; line-height:1.85; font-weight:850; margin-bottom:16px; box-shadow:0 8px 24px rgba(0,20,50,0.06); }
.s2-trans-line { background:#ffffff; border:1px solid #d0e1f9; border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 4px 12px rgba(0,20,50,0.03); }
.s2-trans-en { direction:ltr; text-align:left; color:#0f172a; font-size:24px; font-weight:900; line-height:1.8; font-family:Verdana,Arial,sans-serif; margin-bottom:8px; }
.s2-trans-ar { direction:rtl; text-align:right; color:#0b2f5b; font-size:24px; font-weight:900; line-height:1.95; font-family:Tahoma,Arial,sans-serif; }
.s2-reading-step { background:#f8fbff; border:1px dashed #c7dff6; border-radius:14px; padding:14px 12px; margin-bottom:12px; text-align:right; color:#0b2f5b; font-size:24px; font-weight:900; line-height:1.9; font-family:Tahoma,Arial,sans-serif; direction:rtl; }
.s2-question-focus-box { background: #f8fafc; border-right: 5px solid #0b4aa6; border-radius: 14px; padding: 20px 24px; margin-bottom: 28px; border: 1px solid #e2e8f0; }

/* أزرار القفز للأسفل وللأعلى */
.s2-jump-wrap { text-align:center; margin: 20px 0; }
.s2-jump-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#ffffff; border:1px solid #d0e1f9; border-radius:16px; padding:12px 24px; font-family:Tahoma,Arial,sans-serif; font-weight:900; font-size:17px; color:#104070; cursor:pointer; box-shadow:0 6px 14px rgba(0,20,50,0.08); }

/* الكلمات المظللة (Pills) */
.hl-keyword, .hl-en-do, .hl-verb, .hl-en, .hl-ar-answer, .hl-clue-ar, .s2-focus-warm { display:inline-block; padding:4px 14px; border-radius:999px; border:2px solid #f0b06d; background:linear-gradient(180deg,#fffaf5 0%,#ffe8d2 100%); color:#b45a00; font-weight:950; line-height:1.45; unicode-bidi:isolate; box-shadow:0 4px 12px rgba(180,90,0,0.12); }
.hl-target-answer { display:inline-block; padding:4px 14px; border-radius:999px; border:2px solid #8fb4ee; background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%); color:#154b96; font-weight:950; }
.hl-final-answer { display:inline-block; padding:4px 14px; border-radius:999px; border:2px solid #22c55e; background:#ecfdf5; color:#15803d; font-weight:950; }

/* نصوص الشرح الداخلي */
.s2-explain-panel .s2-question-en { font-size: 24px!important; color: #0f172a!important; font-family:'Segoe UI', Tahoma, sans-serif!important; text-align: left; margin-bottom: 12px; font-weight: 900; }
.s2-explain-panel .s2-question-ar { font-size: 24px!important; color: #0b4aa6!important; font-weight: 900; }
.s2-explain-panel .s2-point-text { font-size: 20px!important; line-height: 1.7!important; color: #1a202c!important; font-family:'Almarai', Tahoma, sans-serif; }
.s2-explain-panel .s2-point-dot { font-size: 24px!important; color: #3b82f6!important; }

/* صندوق الإجابة والفيدباك */
.s2-answer-box { margin-top: 24px; padding-top: 24px; border-top: 1px dashed #cbd5e1; text-align: center; }
.s2-answer-toggle { display: inline-flex; align-items: center; justify-content: center; background: #002b5e; color: #ffffff; padding: 12px 42px; border-radius: 50px; font-family: Tahoma, Arial, sans-serif; font-weight: 900; font-size: 18px; border: 2px solid #fff; box-shadow: 0 10px 22px rgba(0,43,94,0.30); cursor: pointer; }
.s2-answer-panel-inner { background-color: #f8fafc; border: 2px solid #0b4aa6; border-radius: 16px; padding: 24px; direction: rtl; text-align: center; animation: fadeIn 0.4s ease-out; box-shadow:0 8px 24px rgba(0,20,50,0.07); }
.s2-feedback-box { background-color:#ffffff; border:1px solid #d0e1f9; border-radius:10px; margin-top:8px; width:100%; font-family:Tahoma,Arial,sans-serif; direction:rtl; text-align:right; padding:8px 10px;}

/* صندوق السؤال الأساسي بره */
.s2-main-q{background-color:#ffffff;border-radius:16px;box-shadow:0 8px 30px rgba(0,20,50,0.08);max-width:100%;font-family:Verdana,Arial,sans-serif;direction:ltr;border:1px solid #d0e1f9;overflow:hidden;margin-bottom:20px;}
.s2-main-q .bar{height:6px;background:linear-gradient(90deg,#002b5e,#00a8e8);}
.s2-main-q .inner{padding:20px;}
.s2-main-q .row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:14px;}
.s2-main-q .qnum{min-width:44px;width:44px;height:40px;border-radius:12px;background:#eff6ff;border:1px solid #d0e1f9;color:#0b4aa6;display:grid !important;place-items:center !important;font-size:20px;font-weight:950;font-family:Tahoma,sans-serif;line-height:0 !important;padding:4px 0 0 0 !important;margin:0 !important;box-sizing:border-box !important;}
.s2-main-q .qtext{font-size:24px;color:#104070;font-weight:900;line-height:1.65;flex:1 1 auto;min-width:0; margin-top:2px;}

@media (max-width:600px){
 .s2-main-q .qnum{font-size:18px!important; width:40px!important; height:36px!important; min-width:40px!important;}
 .s2-card-header {font-size: 18px!important; padding: 12px 16px!important;}
 .s2-card-body { padding: 20px 16px; }
 .s2-passage-box { font-size:18px; padding:16px; }
 .s2-trans-en { font-size:20px; }
 .s2-trans-ar { font-size:18px; }
}

/* =================================================== */
/* 🛠️ التصميم الجديد لأزرار التكبير والتصغير المودرن   */
/* =================================================== */
.s2-zoom-controls-modern { 
    display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 12px; 
}
.s2-zoom-btn-modern { 
    background: #ffffff !important; 
    border: 2px solid #cbd5e1 !important; 
    color: #0f172a !important; 
    border-radius: 10px !important; 
    padding: 6px 16px !important; 
    font-weight: 900 !important; 
    cursor: pointer !important; 
    font-family: 'Segoe UI', Tahoma, sans-serif !important; 
    font-size: 18px !important; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    min-width: 48px !important; 
    box-shadow: 0 2px 4px rgba(15,23,42,0.05) !important; 
}
.s2-zoom-btn-modern:hover { 
    background: #eff6ff !important; 
    border-color: #3b82f6 !important; 
    color: #1d4ed8 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15) !important; 
}
.s2-zoom-btn-modern:active { 
    transform: translateY(0) !important; 
}

/* =================================================== */
/* 🛠️ التصميم الجديد لزر إغلاق النص (الأزرق في اليسار) */
/* =================================================== */
.s2-close-inline-btn {
    background: #0b4aa6 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 900 !important;
    font-family: 'Almarai', Tahoma, sans-serif !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(11,74,166,0.25) !important;
    margin: 0 !important;
}
.s2-close-inline-btn:hover {
    background: #002b5e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(11,74,166,0.35) !important;
}

/* =================================================== */
/* 🔥 الهيدر العائم (اللاصق) لأزرار التحكم في النص     */
/* =================================================== */
.s2-passage-sticky-header {
    position: sticky !important;
    top: 12px !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 12px 18px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(0, 20, 50, 0.12) !important;
    margin-bottom: 20px !important;
    border: 1px solid #d0e1f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    transition: all 0.3s ease !important;
}

/* إصلاح مشكلة محاذاة رقم السؤال وجعله في المنتصف تماماً */
.s2-main-q .row { align-items: center !important; } 
.s2-main-q .qtext { padding-top: 0 !important; margin-top: 0 !important; }