/* =================================================== */
/* Step2English - Master SPA Style (FINAL CLEAN PRO)   */
/* =================================================== */
summary::-webkit-details-marker{display:none;}
details>summary{list-style:none;}

/* =================================================== */
/* 🌐 نصوص واجهة النظام الأساسية                      */
/* =================================================== */
.s2-ui-title-main::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-close::after { content: "✕ إغلاق"; }
.s2-ui-close-passage::after { content: attr(data-dynamic-text) !important; }
.s2-ui-close-passage:not([data-dynamic-text])::after { content: "✕ إغلاق" !important; }
.s2-ui-zoom-in::after { content: "A+"; }
.s2-ui-zoom-out::after { content: "A-"; }
.s2-ui-ans-trans::after { content: "ترجمة الإجابة: "; }
.s2-ui-ans-exp::after { content: "شرح الإجابة: "; }

/* =================================================== */
/* 🆕 الإيموجي والأيقونات الخاصة بالتبويبات */
/* =================================================== */
.s2-ui-icon-video::after { content: "🎬"; font-style: normal; }
.s2-ui-icon-read::after { content: "📝"; font-style: normal; }
.s2-tabs-intro { display: none !important; }
.s2-ui-text-video::after { content: "فيديو الشرح"; }
.s2-ui-text-read::after { content: "الشرح النصي"; }
.s2-ui-text-trans::after { content: "الترجمة"; }
.s2-ui-text-sum::after { content: "ملخص النص"; }
.s2-ui-video-soon::after { content: "انتظروا الفيديو قريبًا ⏳"; }
.s2-glass-wrap { display: none !important; }

/* =================================================== */
/* 🚀 إجبار Moodle على فرد الخيارات بعرض الشاشة         */
/* =================================================== */
.que .formulation .qtext { display: inline-block !important; width: 100% !important; padding-top: 16px !important; }
.que.description .qtext { display: inline-block !important; width: 100% !important; padding-top: 16px !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: 8px; }
.s2-option-card { background-color:#ffffff !important; border-radius:16px !important; display:block !important; width:100% !important; box-sizing:border-box !important; box-shadow:0 4px 12px rgba(0,20,50,0.05) !important; border:1px solid #dbe7f5 !important; overflow:hidden !important; min-height:60px !important; }
.s2-option-card-inner { display:flex !important; align-items:stretch !important; width:100% !important; min-height:60px !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:10px 16px !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; }
.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; }

/* 🔴 لون التحديد (أثناء الاختبار فقط) */
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:focus + label .s2-option-card, 
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:active + label .s2-option-card, 
body#page-mod-quiz-attempt .que.multichoice input:focus ~ .s2-option-card { outline: none !important; box-shadow: 0 4px 12px rgba(11, 74, 166, 0.15) !important; }
body#page-mod-quiz-attempt .que.multichoice input:checked + label .s2-option-card, 
body#page-mod-quiz-attempt .que.multichoice input:checked ~ .s2-option-card { background: #eff6ff !important; border: 2px solid #0b4aa6 !important; box-shadow: 0 4px 12px rgba(11, 74, 166, 0.15) !important; }
body#page-mod-quiz-attempt .que.multichoice input:checked + label .s2-option-text, 
body#page-mod-quiz-attempt .que.multichoice input:checked ~ .s2-option-card .s2-option-text { color: #0b4aa6 !important; -webkit-text-fill-color: #0b4aa6 !important; text-shadow: none !important; }
body#page-mod-quiz-attempt .que.multichoice input:checked + label .s2-option-card-bar, 
body#page-mod-quiz-attempt .que.multichoice input:checked ~ .s2-option-card .s2-option-card-bar { background: #0b4aa6 !important; }
a.questionflag[aria-pressed="true"], a.questionflag[aria-pressed="true"]:hover, .que .info .questionflag.flagged, .que .info .questionflag.flagged a { background: linear-gradient(180deg, #d97706, #b45309) !important; border: 2px solid #fde68a !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(217, 119, 6, 0.25) !important; text-shadow: none !important; }
a.questionflag[aria-pressed="true"] *, .que .info .questionflag.flagged * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
a.questionflag:focus, a.questionflag:active { outline: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !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);}}
body.s2-any-panel-open .s2pulse { animation: none !important; }

.s2-explain-box { clear:both !important; background-color: transparent !important; margin-bottom: 12px !important; width:100% !important; display:block !important; box-sizing:border-box !important; }
.s2-explain-trigger { cursor: pointer; display:block !important; width:100% !important; }
.s2-explain-trigger-topbar { display: none !important; }
.s2-explain-trigger-body { padding: 0 !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: 8px 30px !important; border-radius: 50px !important; font-family:'Almarai',Tahoma,sans-serif !important; font-weight:900 !important; font-size:18px !important; background:#0b4aa6 !important; color:#ffffff !important; border:2px solid #ffffff !important; box-shadow:0 8px 16px rgba(11,74,166,0.2) !important; transition: transform 0.3s ease !important; pointer-events: none !important; }

.s2-explain-panel { display: none; position: relative !important; width: 100% !important; z-index: 10 !important; overflow: visible !important; box-sizing: border-box !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 20px !important; padding: 20px 16px 16px 16px !important; margin-top: 10px !important; font-family: 'Almarai', Tahoma, sans-serif !important; box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important; }
.s2-explain-panel-inner { max-width:100%; margin:0 auto; padding-top:0; padding-bottom:10px; }
.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; position: relative !important; display: flex !important; flex-direction: column !important; }
.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-zoom-btn-modern { background: #0b4aa6 !important; border: 2px solid #ffffff !important; color: #ffffff !important; border-radius: 10px !important; width: 44px !important; height: 44px !important; padding: 0 !important; font-weight: 900 !important; cursor: pointer !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; font-size: 18px !important; transition: all 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(11,74,166,0.25) !important; }
.s2-zoom-btn-modern:hover { background: #002b5e !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(11, 74, 166, 0.35) !important; }
.s2-floating-zoom-widget { position: fixed; top: 110px !important; right: 40px !important; display: flex; flex-direction: row !important; gap: 10px; z-index: 2147483600; pointer-events: auto; }

.s2-close-inline-btn { background: #0b4aa6 !important; color: #ffffff !important; border: 3px solid #ffffff !important; border-radius: 50px !important; padding: 12px 32px !important; font-weight: 900 !important; font-family: 'Almarai', Tahoma, sans-serif !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 6px 16px rgba(11,74,166,0.3) !important; font-size: 16px !important; transition: all 0.2s !important; margin: 0 !important; }
.s2-close-inline-btn:hover { background: #002b5e !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(11,74,166,0.4) !important; border-color: #f8fafc !important; }

.s2-toolbar-panel-box .s2-modal-sticky-header, #passage-content-box .s2-modal-sticky-header { display: none !important; }
.s2-explain-box:not(.s2-toolbar-panel-box):not(#passage-trigger-box) .s2-modal-sticky-header { display: flex !important; margin-bottom: 20px !important; justify-content: flex-start !important; width: 100% !important; }

/* =================================================== */
/* 🌟 إصلاح شريط أدوات القراءة (دائماً في صف واحد) 🌟   */
/* =================================================== */
body .s2-reading-top-toolbar { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important; /* الإجبار على صف واحد */
    justify-content: space-between !important; 
    align-items: stretch !important; 
    gap: 8px !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 auto 16px auto !important; 
    padding: 8px !important; 
    direction: rtl !important; 
    box-sizing: border-box !important; 
    background: #f1f5f9 !important;
    border-radius: 16px !important;
    border: 1px solid #cbd5e1 !important;
}
body .s2-reading-top-toolbar > * { 
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important; 
    padding: 0 !important; 
    display: flex !important;
}
body .s2-reading-top-toolbar .s2-explain-trigger,
body .s2-reading-top-toolbar .s2-explain-trigger-body {
    width: 100% !important; padding: 0 !important; margin: 0 !important;
}
body .s2-reading-top-toolbar .s2-explain-trigger-btn { 
    width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 4px !important; border-radius: 12px !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #0b4aa6 !important; border: 2px solid #ffffff !important; font-size: 15px !important; color: #ffffff !important;
}

body .s2-explain-trigger-btn.active-trigger { background: #ffffff !important; background-color: #ffffff !important; color: #0b4aa6 !important; border-color: #0b4aa6 !important; box-shadow: 0 4px 12px rgba(11,74,166,0.18) !important; }
body .s2-explain-trigger-btn.active-trigger * { color: #0b4aa6 !important; }
body .s2-reading-top-toolbar .s2-explain-trigger-btn .s2-ui-read-orig::after, body .s2-reading-top-toolbar .s2-explain-trigger-btn .s2-ui-read-trans::after, body .s2-reading-top-toolbar .s2-explain-trigger-btn .s2-ui-read-sum::after { display: inline-block !important; white-space: nowrap !important; }
.s2-toolbar-panel-box { margin-top: 0 !important; }

/* =================================================== */
/* ✅ حالات النص وزر الإغلاق                           */
/* =================================================== */
body.s2-passage-closed #passage-content-box,
#passage-content-box.s2-force-closed { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.s2-passage-open #passage-content-box:not(.s2-force-closed) { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; }

.s2-passage-fixed-controls { display: none !important; }
body.s2-reading-panel-open .s2-passage-fixed-controls { display: flex !important; }
.s2-explain-panel, .s2-tab-content, .s2-answer-panel, #passage-content-box { scroll-margin-top: 130px !important; scroll-margin-bottom: 130px !important; }

/* 🌟 الأكورديون (التبويبات الداخلية) */
.s2-tabs-container { display: flex; gap: 20px; justify-content: center; direction: rtl; flex-wrap: wrap; margin-bottom: 30px; }
.s2-tab-btn { background: #ffffff; border: 2px solid #0b4aa6; color: #0b4aa6; padding: 20px 32px; border-radius: 20px; font-family: 'Almarai', Tahoma, sans-serif; font-size: 22px; font-weight: 900; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 240px; box-shadow: 0 8px 16px rgba(11,74,166,0.08); }
.s2-tab-btn i { font-size: 48px; font-style: normal; line-height: 1; display: block; margin-bottom: 8px; }
.s2-tab-btn:hover { background: #eff6ff; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(11,74,166,0.15); }
.s2-tabs-container.s2-tabs-compact { margin-top: 0; margin-bottom: 24px; gap: 12px; }
.s2-tabs-container.s2-tabs-compact .s2-tab-btn { flex-direction: row; padding: 12px 30px; font-size: 18px; width: auto; border-radius: 50px; gap: 10px; box-shadow: 0 4px 12px rgba(11,74,166,0.08); }
.s2-tabs-container.s2-tabs-compact .s2-tab-btn i { font-size: 24px; margin-bottom: 0; margin-left: 8px; }
.s2-tabs-container.s2-tabs-compact .s2-tab-btn.active { background: #0b4aa6 !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(11,74,166,0.3) !important; border-color: #0b4aa6 !important; transform: translateY(-2px); }
.s2-tab-content { display: none; animation: fadeIn 0.4s ease; width: 100%; margin-bottom: 20px; }
.s2-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =================================================== */
/* 🚀 SPA Layout System (Virtual Layouts V716)         */
/* =================================================== */
body#page-mod-quiz-attempt.s2-fast-section-mode #page, body#page-mod-quiz-attempt.s2-fast-section-mode #page-content, body#page-mod-quiz-attempt.s2-fast-section-mode #region-main-box, body#page-mod-quiz-attempt.s2-fast-section-mode #region-main, body#page-mod-quiz-attempt.s2-fast-section-mode .container, body#page-mod-quiz-attempt.s2-fast-section-mode .container-fluid { max-width: 98% !important; width: 100% !important; padding: 0 !important; margin: 0 auto !important; background: transparent !important; overflow: visible !important; }

.s2-section-container { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.s2-section-container.s2-fast-hidden-section { display: none !important; }
.s2-section-container.s2-active-section { display: block !important; animation: s2FastFade .25s ease-out; }
@keyframes s2FastFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 🌟 التقسيم الاحترافي للابتوب */
@media (min-width: 992px) {
    body#page-mod-quiz-attempt .s2-virtual-layout { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 24px !important; width: 100% !important; direction: ltr !important; margin-top: 10px !important; }
    
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="reading"] .s2-virtual-left { width: calc(50% - 12px) !important; flex: 0 0 calc(50% - 12px) !important; position: sticky !important; top: 80px !important; max-height: calc(100vh - 90px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 12px !important; padding-bottom: 20px !important; display: flex !important; flex-direction: column !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="reading"] .s2-virtual-right { width: calc(50% - 12px) !important; flex: 0 0 calc(50% - 12px) !important; display: flex !important; flex-direction: column !important; min-height: 100vh !important; }

    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left { width: calc(50% - 12px) !important; flex: 0 0 calc(50% - 12px) !important; position: sticky !important; top: 80px !important; max-height: calc(100vh - 90px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: 12px !important; padding-bottom: 20px !important; display: flex !important; flex-direction: column !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-right { width: calc(50% - 12px) !important; flex: 0 0 calc(50% - 12px) !important; display: flex !important; flex-direction: column !important; min-height: 100vh !important; }    
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-explain-box[data-box-type="question"] { display: none !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left .s2-tabs-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 16px !important; background: #f8fafc !important; padding: 20px !important; border-radius: 24px !important; border: 2px solid #e2e8f0 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.04) !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left .s2-tabs-container::before { content: "📝 شرح السؤال" !important; display: block !important; width: 100% !important; text-align: center !important; font-family: 'Almarai', Tahoma, sans-serif !important; font-size: 22px !important; font-weight: 900 !important; color: #0b4aa6 !important; margin-bottom: 10px !important; padding-bottom: 16px !important; border-bottom: 2px dashed #cbd5e1 !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left .s2-tabs-container .s2-tab-btn { flex: 1 !important; min-width: 40% !important; border-radius: 16px !important; padding: 16px !important; }
    
    body.s2-reading-panel-open .s2-passage-fixed-controls { position: fixed !important; top: 110px !important; left: 40px !important; z-index: 2147483500 !important; }
}

/* 🌟 إعدادات الموبايل */
@media (max-width: 991px) {
    body#page-mod-quiz-attempt .s2-virtual-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; }
    
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="reading"] .s2-virtual-left { display: flex !important; flex-direction: column !important; width: 100% !important; position: relative !important; top: 0 !important; max-height: none !important; overflow: visible !important; padding-right: 0 !important; margin-bottom: 16px !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="reading"] .s2-virtual-right { display: flex !important; flex-direction: column !important; width: 100% !important; }

    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left { display: none !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-right { width: 100% !important; display: flex !important; flex-direction: column !important; }
    body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-explain-box[data-box-type="question"] { display: block !important; }
    
    body.s2-reading-panel-open .s2-passage-fixed-controls { position: fixed !important; top: 5px !important; left: 8px !important; z-index: 2147483500 !important; display: flex !important; }
    body.s2-reading-panel-open .s2-passage-fixed-controls .s2-close-inline-btn { padding: 7px 13px !important; font-size: 13px !important; border-radius: 10px !important; height: 38px !important; }
    
    .s2-floating-zoom-widget { top: 5px !important; right: 12px !important; left: auto !important; bottom: auto !important; }
    .s2-zoom-btn-modern { width: 38px !important; min-width: 38px !important; height: 38px !important; font-size: 15px !important; border-radius: 9px !important; }

    .s2-jump-btn { display: flex !important; margin: 10px auto 20px auto !important; width: fit-content !important; }
}

@media (max-width: 480px) {
    .s2-floating-zoom-widget { top: 5px !important; right: 8px !important; gap: 6px !important; }
    .s2-zoom-btn-modern { width: 36px !important; min-width: 36px !important; height: 36px !important; font-size: 14px !important; }
    body.s2-reading-panel-open .s2-passage-fixed-controls { top: 5px !important; left: 6px !important; }
}

body#page-mod-quiz-attempt .s2-virtual-left::-webkit-scrollbar { width: 6px; }
body#page-mod-quiz-attempt .s2-virtual-left::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
body#page-mod-quiz-attempt .s2-virtual-left::-webkit-scrollbar-thumb { background: #0b4aa6; border-radius: 10px; }

/* =================================================== */
/* 🧹 تنظيف خلفيات Moodle والأسئلة (أثناء الاختبار فقط)*/
/* =================================================== */
body#page-mod-quiz-attempt .path-mod-quiz #region-main, 
body#page-mod-quiz-attempt .que, 
body#page-mod-quiz-attempt .que .content, 
body#page-mod-quiz-attempt .que .formulation { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/* =================================================== */
/* استرجاع أيقونة (تذكير لاحقاً - Flag) وضبط مكانها بدقة */
/* =================================================== */
body#page-mod-quiz-attempt .que:not(.description) { position: relative !important; padding-top: 45px !important; margin-bottom: 16px !important; padding-bottom: 16px !important; border-bottom: 2px dashed #94a3b8 !important; width: 100% !important; }
body#page-mod-quiz-attempt .que.description .info { display: none !important; }
body#page-mod-quiz-attempt .que.description { position: relative !important; padding-top: 0 !important; border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 16px !important; width: 100% !important; }
body#page-mod-quiz-attempt .que:not(.description) .info { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 5px !important; left: 20px !important; width: auto !important; height: auto !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; z-index: 20 !important; }
body#page-mod-quiz-attempt .que .info > *:not(.questionflag) { display: none !important; }
body#page-mod-quiz-attempt .que .info .questionflag { display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; }
body#page-mod-quiz-attempt .que .info .questionflag .questionflagtext { display: none !important; }
body#page-mod-quiz-attempt .que:last-of-type, body#page-mod-quiz-attempt .que:last-child { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
body#page-mod-quiz-attempt .s2-virtual-left .que { border-bottom: none !important; }

/* =========================================================
   🚀 شريط التنقل العائم (شريط التقدم والأزرار) بروح موقعك 🚀
========================================================= */
body#page-mod-quiz-attempt .submitbtns, body#page-mod-quiz-attempt .mod_quiz-next-nav, body#page-mod-quiz-attempt .mod_quiz-prev-nav, body#page-mod-quiz-attempt input[name="next"], body#page-mod-quiz-attempt input[name="previous"] { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; z-index: -999 !important; pointer-events: none !important; }
body#page-mod-quiz-attempt { padding-bottom: 120px !important; }

body#page-mod-quiz-attempt .s2-fast-nav {
    position: fixed !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: #ffffff !important; border: 2px solid #0b4aa6 !important; border-radius: 50px !important;
    padding: 8px 12px !important; display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: space-between !important; gap: 15px !important; width: 95% !important; max-width: 600px !important;
    z-index: 2147483640 !important; box-shadow: 0 10px 30px rgba(11, 74, 166, 0.2) !important; direction: ltr !important; 
}

body#page-mod-quiz-attempt .s2-fast-btn {
    background: #0b4aa6 !important; color: #ffffff !important; border: 2px solid #ffffff !important;
    border-radius: 30px !important; padding: 10px 20px !important; font-family: 'Almarai', Tahoma, Arial, sans-serif !important;
    font-weight: 900 !important; font-size: 18px !important; cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(11, 74, 166, 0.2) !important; transition: all .2s ease !important;
    white-space: nowrap !important; min-width: 110px !important; text-align: center !important;
    display: flex !important; flex-direction: column !important; line-height: 1.2 !important;
}
body#page-mod-quiz-attempt .s2-fast-btn:hover { transform: translateY(-2px) !important; background: #083c87 !important; }
body#page-mod-quiz-attempt .s2-fast-btn.s2e-finish-btn { background: #16a34a !important; }
body#page-mod-quiz-attempt .s2-fast-btn.s2e-finish-btn:hover { background: #15803d !important; }

body#page-mod-quiz-attempt .s2-fast-btn .s2e-ar { font-size: 18px !important; display: block !important; margin-bottom: 2px !important;}
body#page-mod-quiz-attempt .s2-fast-btn .s2e-en { font-size: 12px !important; font-weight: 700 !important; opacity: 0.9 !important; display: block !important;}

body#page-mod-quiz-attempt .s2-fast-progress-wrap { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; }
body#page-mod-quiz-attempt .s2-fast-progress-bar { width: 100% !important; height: 24px !important; background: #eff6ff !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important; border: 1px solid #d0e1f9 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body#page-mod-quiz-attempt .s2-fast-progress-text { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; line-height: 24px !important; text-align: center !important; font-family: 'Almarai', Tahoma, sans-serif !important; font-weight: 900 !important; font-size: 14px !important; margin: 0 !important; direction: ltr !important; }
#s2-progress-text-blue { color: #0b4aa6 !important; z-index: 1 !important; text-shadow: none !important; }
#s2-progress-text-white { color: #ffffff !important; z-index: 3 !important; text-shadow: 0 1px 4px rgba(11,74,166,0.8), 0 0 2px rgba(11,74,166,0.6) !important; }
body#page-mod-quiz-attempt .s2-fast-progress-fill { height: 100% !important; background: linear-gradient(90deg, #0b4aa6, #3b82f6) !important; border-radius: 20px !important; transition: width 0.4s ease !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 2 !important; }

@media (max-width: 768px) {
    body#page-mod-quiz-attempt .s2-fast-nav { bottom: 85px !important; padding: 6px 8px !important; gap: 8px !important; border-radius: 20px !important; }
    body#page-mod-quiz-attempt .s2-fast-btn { padding: 6px 12px !important; min-width: 80px !important; }
    body#page-mod-quiz-attempt .s2-fast-btn .s2e-ar { font-size: 15px !important; }
    body#page-mod-quiz-attempt .s2-fast-btn .s2e-en { font-size: 10px !important; }
}

/* =================================================== */
/* 🌟 الألوان الأساسية الخاصة بموقعك                   */
/* =================================================== */
.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-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#ffffff !important; border:2px solid #0b4aa6 !important; border-radius:50px !important; padding:8px 24px !important; font-family:Tahoma,Arial,sans-serif; font-weight:900; font-size:16px; color:#0b4aa6 !important; cursor:pointer; box-shadow:0 6px 12px rgba(11,74,166,0.15) !important; transition: transform 0.3s ease; }
.s2-jump-btn:hover { transform: translateY(-2px); background: #eff6ff !important; }
.s2-jump-btn * { color: #0b4aa6 !important; }

.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-question-en { font-size: 24px !important; color: #0f172a !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; text-align: left !important; direction: ltr !important; margin-bottom: 12px !important; font-weight: 900 !important; display: block !important; }
.s2-question-ar { font-size: 24px !important; color: #0b4aa6 !important; font-weight: 900 !important; text-align: right !important; direction: rtl !important; }
.s2-point-text { font-size: 20px !important; line-height: 1.7 !important; color: #1a202c !important; font-family: 'Almarai', Tahoma, sans-serif !important; font-weight: 600 !important; text-align: right !important; }
.s2-point-dot { font-size: 24px !important; color: #3b82f6 !important; font-weight: 900 !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: #0b4aa6 !important; color: #ffffff !important; padding: 12px 42px !important; border-radius: 50px !important; font-family: Tahoma, Arial, sans-serif; font-weight: 900; font-size: 18px; border: 2px solid #ffffff !important; box-shadow: 0 8px 16px rgba(11,74,166,0.25) !important; cursor: pointer; transition: transform 0.3s ease; }
.s2-answer-toggle:hover { transform: translateY(-2px); }

.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:12px;}
.s2-main-q .bar{height:6px;background:linear-gradient(90deg,#002b5e,#00a8e8);}
.s2-main-q .inner{padding:12px 16px;}
.s2-main-q .row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center !important;gap:14px;}
.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:0 !important; padding-top:0 !important;}

/* =================================================== */
/* ⏱️ تصميم عداد الوقت المدمج                           */
/* =================================================== */
body#page-mod-quiz-attempt .s2-custom-timer {
    position: absolute !important; top: -36px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: #ffffff !important; color: #0b4aa6 !important; padding: 6px 24px !important;
    border-radius: 16px 16px 0 0 !important; font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-weight: 900 !important; font-size: 16px !important; letter-spacing: 1px !important;
    box-shadow: 0 -6px 15px rgba(11, 74, 166, 0.1) !important; z-index: -1 !important;
    border: 2px solid #0b4aa6 !important; border-bottom: none !important;
}

body#page-mod-quiz-attempt .s2-custom-timer .timer-text { display: none !important; }
body#page-mod-quiz-attempt .s2-custom-timer * { color: #0b4aa6 !important; margin: 0 !important; padding: 0 !important; font-weight: 900 !important; }

@media (min-width: 992px) { .s2-jump-btn { display: none !important; } }
body#page-mod-quiz-review .que.description { display: none !important; }

/* ========================================================================= */
/* 🟢 دمج وتصغير زر "شرح السؤال" لتوفير المساحة الرأسية بشكل تام 🟢 */
/* ========================================================================= */
.s2-explain-box[data-box-type="question"] { margin-top: -26px !important; margin-bottom: 12px !important; position: relative; z-index: 10; pointer-events: none; }
.s2-explain-box[data-box-type="question"] * { pointer-events: auto; }
.s2-explain-box[data-box-type="question"] .s2-explain-trigger { display: flex !important; justify-content: flex-end !important; padding: 0 40px !important; }
.s2-explain-box[data-box-type="question"] .s2-explain-trigger-body { width: auto !important; }
.s2-explain-box[data-box-type="question"] .s2-explain-trigger-btn { padding: 4px 18px !important; font-size: 14px !important; box-shadow: 0 4px 8px rgba(11, 74, 166, 0.15) !important; }
.s2-explain-box[data-box-type="question"] .s2-explain-panel { margin-top: 16px !important; }
@media (max-width: 991px) { .s2-explain-box[data-box-type="question"] .s2-explain-trigger { justify-content: center !important; padding: 0 !important; } }
body#page-mod-quiz-attempt .que { scroll-margin-top: 140px !important; }

/* =================================================== */
/* 📱 لمسات نهائية: المسافات (الموبايل ورقم السؤال)    */
/* =================================================== */
body#page-mod-quiz-attempt .s2-main-q .qnum { margin-left: 12px !important; }
body#page-mod-quiz-attempt .s2-option-number { margin-left: 8px !important; }

@media (max-width: 991px) {
    body#page-mod-quiz-attempt .s2-fast-nav { bottom: 72px !important; }
    body#page-mod-quiz-attempt { padding-bottom: 160px !important; }
    body#page-mod-quiz-attempt .que:last-of-type, body#page-mod-quiz-attempt .que:last-child { padding-bottom: 16px !important; margin-bottom: 16px !important; }
}

body[data-s2-page="grammar"] .s2-passage-fixed-controls { display: none !important; }

/* =================================================== */
/* 🚀 نظام النوافذ المنبثقة (Popups) المعتمد والنهائي  */
/* =================================================== */

.s2-custom-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2147483647; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; direction: rtl;
}
.s2-custom-overlay.show { opacity: 1; visibility: visible; }
.s2-custom-popup {
    background: #ffffff; border-radius: 20px; padding: 30px 24px 24px 24px; width: 90%; max-width: 420px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Almarai', Tahoma, sans-serif; text-align: center;
}
.s2-custom-overlay.show .s2-custom-popup { transform: scale(1); }

/* زر الإغلاق الجديد للبوب أب (في اليسار) */
.s2-popup-close {
    position: absolute; top: 16px; left: 16px; background: #f1f5f9; border: none;
    color: #64748b; font-size: 18px; font-weight: 900; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-family: Tahoma, sans-serif; padding: 0;
}
.s2-popup-close:hover { background: #e2e8f0; color: #dc2626; transform: scale(1.1); }

/* نافذة الخطأ والتصميم المزدوج للأزرار */
.s2-wrong-icon { font-size: 50px; margin-bottom: 10px; line-height: 1; }
.s2-wrong-title { font-size: 24px; font-weight: 900; color: #dc2626; margin-bottom: 10px; }
.s2-wrong-msg { font-size: 16px; font-weight: 700; color: #475569; margin-bottom: 20px; }
.s2-action-btns { display: flex; gap: 12px; justify-content: center; }
.s2-action-btn { 
    flex: 1; padding: 10px 14px; border-radius: 50px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; gap: 12px; 
    border: 2px solid transparent; transition: all 0.2s ease; 
}
.s2-action-btn i { font-size: 28px; font-style: normal; }
.s2-btn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.s2-btn-txt .s2-ar { font-size: 16px; font-weight: 900; font-family: 'Almarai', Tahoma, sans-serif; }
.s2-btn-txt .s2-en { font-size: 12px; font-weight: 700; font-family: Tahoma, sans-serif; opacity: 0.9; }

.s2-btn-video { background: #0b4aa6; color: #fff; border-color: #ffffff; box-shadow: 0 4px 10px rgba(11,74,166,0.2); }
.s2-btn-video:hover { background: #083c87; transform: translateY(-2px); }
.s2-btn-text { background: #ffffff; color: #0b4aa6; border-color: #0b4aa6; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.s2-btn-text:hover { background: #eff6ff; transform: translateY(-2px); }

/* نافذة الصح */
.s2-popup-correct .s2-wrong-icon { font-size: 50px; margin-bottom: 10px; }
.s2-popup-correct .s2-wrong-title { color: #16a34a; font-size: 24px; margin-bottom: 4px; }
.s2-popup-correct .s2-correct-en { color: #15803d; font-size: 14px; font-weight: 700; font-family: Tahoma, sans-serif; opacity: 0.9; }
.s2-popup-correct.s2-custom-popup { border: 4px solid #16a34a; }

/* قفل الخيارات بشكل "وهمي" يحفظ إجابة مودل */
.s2-locked-q .answer { pointer-events: none !important; opacity: 0.6; filter: grayscale(0.3); transition: all 0.3s ease; }
.s2-option-card.s2-is-wrong { border-color: #dc2626 !important; background-color: #fef2f2 !important; }
.s2-option-card.s2-is-wrong .s2-option-number { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }
.s2-option-card.s2-is-correct { border-color: #16a34a !important; background-color: #f0fdf4 !important; }
.s2-option-card.s2-is-correct .s2-option-number { background: #16a34a !important; color: #ffffff !important; border-color: #16a34a !important; }













/* =================================================== */
/* 💡 زر الإغلاق الداخلي للتبويبات (فيديو / نص)        */
/* =================================================== */
.s2-inner-close-btn {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    background: #f1f5f9 !important;
    color: #ef4444 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-family: Tahoma, sans-serif !important;
}
.s2-inner-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}
.s2-content-card {
    position: relative !important;
    padding-top: 45px !important; /* مساحة لزر الإغلاق */
}







/* =================================================== */
/* 🚀 إظهار خط فاصل أسفل السؤال (مخصص لنظام التالي والسابق) */
/* =================================================== */
body#page-mod-quiz-attempt .que:not(.description) {
    border-bottom: 3px solid #d0e1f9 !important; /* خط متصل بلون أزرق فاتح متناسق مع الموقع */
    padding-bottom: 30px !important; 
    margin-bottom: 24px !important;
}

/* إجبار إظهار الخط حتى لو كان السؤال هو الوحيد أو الأخير في الشاشة */
body#page-mod-quiz-attempt .que:last-of-type, 
body#page-mod-quiz-attempt .que:last-child,
body#page-mod-quiz-attempt .s2-virtual-left .que { 
    border-bottom: 3px solid #d0e1f9 !important; 
    padding-bottom: 30px !important; 
    margin-bottom: 24px !important; 
}









/* =================================================== */
/* 💡 إخفاء أزرار مودل الافتراضية (في صفحة الاختبار فقط) */
/* =================================================== */
body#page-mod-quiz-attempt .submitbtns,
body#page-mod-quiz-attempt .mod_quiz-next-nav,
body#page-mod-quiz-attempt #mod_quiz-next-nav,
body#page-mod-quiz-attempt .mod_quiz-prev-nav,
body#page-mod-quiz-attempt #mod_quiz-prev-nav,
body#page-mod-quiz-attempt .activity-navigation {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}

/* 🟢 إجبار إظهار الأزرار في صفحة المراجعة (Review) وصفحة الملخص (Summary) */
body#page-mod-quiz-review .submitbtns,
body#page-mod-quiz-review .activity-navigation,
body#page-mod-quiz-summary .submitbtns,
body#page-mod-quiz-summary .activity-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* =================================================== */
/* S2 FINAL PACKAGE v748                               */
/* =================================================== */
/* حذف أي شارة أو عبارة فوق السؤال نهائيًا */
html body#page-mod-quiz-attempt .s2-virtual-right .que.multichoice::before,
html body#page-mod-quiz-attempt .s2-section-container .s2-virtual-right .que.multichoice::before,
html body#page-mod-quiz-attempt .que.multichoice::before {
    content: "" !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
html body#page-mod-quiz-attempt .s2-virtual-right .que.multichoice,
html body#page-mod-quiz-attempt .que.multichoice { padding-top: 64px !important; }
html body#page-mod-quiz-attempt .s2-main-q { margin-top: 18px !important; }
/* تكبير كارت الشاشة الشمال */
html body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left.s2-shared-left-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    padding-top: 64px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}
html body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left.s2-shared-left-panel .s2-left-brand-card {
    width: 100% !important;
    min-height: 280px !important;
    box-sizing: border-box !important;
    padding: 38px 30px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
    text-align: center !important;
    direction: ltr !important;
    font-family: 'Almarai', Tahoma, Arial, sans-serif !important;
}
html body#page-mod-quiz-attempt .s2-left-brand-logo { font-size: 34px !important; line-height: 1.35 !important; font-weight: 950 !important; color: #0b4aa6 !important; margin-bottom: 22px !important; }
html body#page-mod-quiz-attempt .s2-left-brand-title { font-size: 30px !important; line-height: 1.45 !important; font-weight: 950 !important; color: #0f172a !important; margin-bottom: 20px !important; }
html body#page-mod-quiz-attempt .s2-left-brand-subtitle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 180px !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    background: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #1e40af !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    margin: 0 auto 24px auto !important;
}
html body#page-mod-quiz-attempt .s2-left-brand-note { color: #334155 !important; font-size: 24px !important; line-height: 1.6 !important; font-weight: 950 !important; margin: 0 !important; }
html body#page-mod-quiz-attempt .s2-main-q .inner { padding-left: 52px !important; padding-right: 26px !important; }
html body#page-mod-quiz-attempt .s2-main-q .qtext { padding-left: 10px !important; }
/* END S2 FINAL PACKAGE v748 */


/* =================================================== */
/* S2 FINAL PACKAGE v751                               */
/* =================================================== */
/* إخفاء كارت الشاشة الشمال بالكامل على الموبايل */
@media (max-width: 991px) {
    html body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-left.s2-shared-left-panel,
    html body#page-mod-quiz-attempt .s2-shared-left-panel,
    html body#page-mod-quiz-attempt .s2-left-brand-card {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body#page-mod-quiz-attempt .s2-section-container[data-s2-page="grammar"] .s2-virtual-right {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* حذف عبارة عدد الأسئلة من كارت الشاشة الشمال */
html body#page-mod-quiz-attempt .s2-left-brand-subtitle {
    display: none !important;
}

/* ضبط الكارت على اللاب بعد حذف عدد الأسئلة */
@media (min-width: 992px) {
    html body#page-mod-quiz-attempt .s2-left-brand-card {
        min-height: 230px !important;
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }
    html body#page-mod-quiz-attempt .s2-left-brand-title {
        margin-bottom: 28px !important;
    }
}
/* =================================================== */
/* 📱 تصغير حجم خط الأسئلة وضبط المسافات والمستطيلات على الموبايل */
/* =================================================== */
@media (max-width: 768px) {
    /* 1. تصغير خط السؤال الأساسي */
    html body#page-mod-quiz-attempt .s2-main-q .qtext {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
    
    /* 2. تصغير خط الخيارات */
    html body#page-mod-quiz-attempt .s2-option-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* 3. تصغير مربع رقم السؤال */
    html body#page-mod-quiz-attempt .s2-main-q .qnum {
        font-size: 16px !important;
        width: 36px !important;
        height: 32px !important;
        min-width: 36px !important;
        margin-left: 0 !important; 
    }
    
    /* 4. تصغير مربع أحرف/أرقام الخيارات */
    html body#page-mod-quiz-attempt .s2-option-number {
        font-size: 16px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin-left: 0 !important;
    }
    
    /* 5. تصغير نصوص الأسئلة داخل صناديق الشرح */
    html body#page-mod-quiz-attempt .s2-question-en,
    html body#page-mod-quiz-attempt .s2-question-ar {
        font-size: 18px !important;
    }
    
    /* 6. إبعاد رقم السؤال قليلاً عن الحافة ليدخل يميناً */
    html body#page-mod-quiz-attempt .s2-main-q .inner {
        padding-left: 20px !important; /* تمت زيادة المسافة هنا */
        padding-right: 12px !important;
    }

    /* 7. تصغير المستطيل المحدد للكلام ليتناسب مع الخط الصغير */
    html body#page-mod-quiz-attempt .hl-keyword, 
    html body#page-mod-quiz-attempt .hl-en-do, 
    html body#page-mod-quiz-attempt .hl-verb, 
    html body#page-mod-quiz-attempt .hl-en, 
    html body#page-mod-quiz-attempt .hl-target-answer,
    html body#page-mod-quiz-attempt .s2-focus-warm {
        padding: 2px 10px !important; /* تقليل الهوامش الداخلية للمستطيل */
        line-height: 1.2 !important; /* تقليل ارتفاع السطر لتضييق المستطيل */
        border-radius: 30px !important; 
    }
}
/* =================================================== */

/* =========================================================
   STEP2ENGLISH QUIZ UI v760
========================================================= */
/* Selected answer uses the same full-card gradient as Next. */
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-card,
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card {
    background:linear-gradient(180deg,#0d1f5c 0%,#002e94 55%,#1e90ff 100%) !important;
    border:2px solid #38bdf8 !important;
    box-shadow:0 0 0 4px rgba(56,189,248,.16),0 12px 25px rgba(11,74,166,.26) !important;
    overflow:hidden !important;
}
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-card-bar,
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-card-bar {
    background:transparent !important;
}
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-text,
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-text {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-number,
body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-number {
    background:#fff !important;
    border-color:#dbeafe !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.12) !important;
}
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .answer label,
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-wrap,
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-card,
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-card * {
    cursor:pointer !important;
}
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-card {
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-card:hover {
    transform:translateY(-2px) !important;
    border-color:#60a5fa !important;
    box-shadow:0 10px 22px rgba(11,74,166,.14) !important;
}

/* Compact toolbar: question toggle and Back to course are separate actions. */
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    width:100% !important;
    margin:10px 0 12px !important;
}
body#page-mod-quiz-attempt .s2-question-list-toggle-v760 {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    min-height:48px !important;
    padding:10px 20px !important;
    border:2px solid #0b4aa6 !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,#0d1f5c 0%,#002e94 55%,#1e90ff 100%) !important;
    color:#fff !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:900 !important;
    cursor:pointer !important;
    box-shadow:0 8px 18px rgba(11,74,166,.20) !important;
}
body#page-mod-quiz-attempt .s2-question-toggle-arrow {
    display:inline-block !important;
    transition:transform .2s ease !important;
}
body#page-mod-quiz-attempt .s2-question-list-toggle-v760.is-open .s2-question-toggle-arrow {
    transform:rotate(180deg) !important;
}
body#page-mod-quiz-attempt .s2-back-course-in-toolbar {
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
}
body#page-mod-quiz-attempt .s2-back-course-in-toolbar a,
body#page-mod-quiz-attempt .s2-back-course-in-toolbar button,
body#page-mod-quiz-attempt .s2-back-course-in-toolbar input,
body#page-mod-quiz-attempt a.s2-back-course-in-toolbar,
body#page-mod-quiz-attempt button.s2-back-course-in-toolbar {
    min-height:48px !important;
    margin:0 !important;
    padding:10px 18px !important;
    border:2px solid #bfdbfe !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#0b4aa6 !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    box-shadow:0 7px 16px rgba(11,74,166,.10) !important;
}

/* Collapse only the number grid, never the quiz questions or action buttons. */
body#page-mod-quiz-attempt .s2-question-number-grid-v760 {
    max-height:700px !important;
    opacity:1 !important;
    overflow:visible !important;
    transition:max-height .24s ease,opacity .18s ease,margin .2s ease !important;
}
body#page-mod-quiz-attempt .s2-question-number-grid-v760.s2-question-grid-collapsed {
    display:none !important;
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}
body#page-mod-quiz-attempt .s2-question-number-grid-v760 .s2-nav-repeated-info {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}
body#page-mod-quiz-attempt .s2-question-number-nav-v760 {
    cursor:pointer !important;
}
body#page-mod-quiz-attempt .s2-question-number-nav-v760.s2-nav-current-question {
    background:#f59e0b !important;
    border-color:#fbbf24 !important;
    color:#fff !important;
    box-shadow:0 0 0 3px rgba(245,158,11,.18),0 6px 14px rgba(180,83,9,.20) !important;
}
@media(max-width:700px){
    body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }
    body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    body#page-mod-quiz-attempt .s2-back-course-in-toolbar,
    body#page-mod-quiz-attempt .s2-back-course-in-toolbar a,
    body#page-mod-quiz-attempt .s2-back-course-in-toolbar button,
    body#page-mod-quiz-attempt a.s2-back-course-in-toolbar {
        width:100% !important;
        min-width:0 !important;
        font-size:14px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v762 FINAL
========================================================= */
body#page-mod-quiz-attempt .s2-old-question-list-title-hidden-v762,
body#page-mod-quiz-attempt .s2-original-back-course-hidden-v762{
    display:none !important;
}
/* Solid blue like the Next button. */
body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    border:2px solid #fff !important;
    border-radius:30px !important;
    box-shadow:0 4px 10px rgba(11,74,166,.20) !important;
}
body#page-mod-quiz-attempt .s2-question-list-toggle-v760:hover{
    background:#083c87 !important;
    background-color:#083c87 !important;
}
/* Real save-and-return button. */
body#page-mod-quiz-attempt .s2-back-course-button-v762{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-height:48px !important;
    padding:9px 18px !important;
    border:2px solid #bfdbfe !important;
    border-radius:30px !important;
    background:#fff !important;
    color:#0b4aa6 !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:900 !important;
    cursor:pointer !important;
    box-shadow:0 7px 16px rgba(11,74,166,.10) !important;
}
body#page-mod-quiz-attempt .s2-back-course-button-v762 small{
    color:#55779e !important;
    font-family:Tahoma,Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:800 !important;
}
body#page-mod-quiz-attempt .s2-back-course-button-v762:hover{
    background:#eef6ff !important;
    border-color:#60a5fa !important;
}
/* Web header remains visible. No header or logo hiding is included in this package. */
@media(max-width:700px){
    body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }
    body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    body#page-mod-quiz-attempt .s2-back-course-button-v762{
        width:100% !important;
        min-width:0 !important;
        padding:8px 7px !important;
        font-size:13px !important;
    }
    body#page-mod-quiz-attempt .s2-back-course-button-v762 small{
        display:none !important;
    }
}

/* STEP2ENGLISH QUIZ UI v763: hide duplicate title and information pages in navigator only. */
body#page-mod-quiz-attempt .s2-old-question-list-title-hidden-v763,
body#page-mod-quiz-attempt .s2-question-number-grid-v760 .s2-nav-information-page-hidden-v763 {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v764
   Compact control area, unified actions and polished flag.
========================================================= */
/* Reduce the large blank area above and inside the quiz control card. */
body#page-mod-quiz-attempt #page-content,
body#page-mod-quiz-attempt #region-main-box,
body#page-mod-quiz-attempt #region-main {
    padding-top:8px !important;
    margin-top:0 !important;
}
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 {
    margin:4px 0 8px !important;
    gap:8px !important;
}
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 + .s2-question-number-grid-v760 {
    margin-top:4px !important;
}
/* Compact only the navigation card that owns our toolbar. */
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760:has(~ .s2-question-number-grid-v760) {
    padding-top:0 !important;
}
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760,
body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
body#page-mod-quiz-attempt .s2-back-course-button-v762 {
    min-height:46px !important;
}
/* Finish and Continue Later use the same compact geometry as the first row. */
body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 ~ .submitbtns,
body#page-mod-quiz-attempt .s2-question-number-grid-v760 ~ .submitbtns {
    margin:8px 0 0 !important;
    padding:0 !important;
    gap:8px !important;
}
body#page-mod-quiz-attempt .submitbtns input[type="submit"],
body#page-mod-quiz-attempt .submitbtns button,
body#page-mod-quiz-attempt .submitbtns a,
body#page-mod-quiz-attempt input[value*="Finish" i],
body#page-mod-quiz-attempt input[value*="Continue Later" i] {
    min-height:48px !important;
    height:48px !important;
    padding:8px 18px !important;
    border-radius:30px !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    box-shadow:0 6px 15px rgba(11,74,166,.12) !important;
}
body#page-mod-quiz-attempt input[value*="Finish" i],
body#page-mod-quiz-attempt button[name="finishattempt"] {
    background:#159947 !important;
    background-color:#159947 !important;
    border:2px solid #fff !important;
    color:#fff !important;
}
body#page-mod-quiz-attempt input[value*="Continue Later" i],
body#page-mod-quiz-attempt button[data-action*="continue" i] {
    background:#fff !important;
    background-color:#fff !important;
    border:2px solid #bfdbfe !important;
    color:#0b4aa6 !important;
}
/* Flag before selection: clean white and blue. */
body#page-mod-quiz-attempt .que .info .questionflag,
body#page-mod-quiz-attempt .que .info a.questionflag,
body#page-mod-quiz-attempt a.questionflag[aria-pressed="false"] {
    min-height:46px !important;
    padding:8px 18px !important;
    border-radius:30px !important;
    background:#fff !important;
    background-color:#fff !important;
    border:2px solid #0b4aa6 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 6px 15px rgba(11,74,166,.12) !important;
    text-shadow:none !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:900 !important;
}
body#page-mod-quiz-attempt .que .info .questionflag *,
body#page-mod-quiz-attempt a.questionflag[aria-pressed="false"] * {
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
}
/* Flag after selection: warm reminder color, not error pink. */
body#page-mod-quiz-attempt a.questionflag[aria-pressed="true"],
body#page-mod-quiz-attempt a.questionflag[aria-pressed="true"]:hover,
body#page-mod-quiz-attempt .que .info .questionflag.flagged,
body#page-mod-quiz-attempt .que .info .questionflag.flagged a {
    min-height:46px !important;
    padding:8px 18px !important;
    border-radius:30px !important;
    background:#d97706 !important;
    background-color:#d97706 !important;
    border:2px solid #fbbf24 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 7px 16px rgba(217,119,6,.22) !important;
    text-shadow:none !important;
}
body#page-mod-quiz-attempt a.questionflag[aria-pressed="true"] *,
body#page-mod-quiz-attempt .que .info .questionflag.flagged * {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}
/* Scrolling targets start cleanly at the reminder control. */
body#page-mod-quiz-attempt .que .info .questionflag,
body#page-mod-quiz-attempt a.questionflag {
    scroll-margin-top:96px !important;
}
@media(max-width:700px){
    body#page-mod-quiz-attempt #page-content,
    body#page-mod-quiz-attempt #region-main-box,
    body#page-mod-quiz-attempt #region-main {
        padding-top:4px !important;
    }
    body#page-mod-quiz-attempt .submitbtns input[type="submit"],
    body#page-mod-quiz-attempt .submitbtns button,
    body#page-mod-quiz-attempt .submitbtns a {
        min-height:46px !important;
        height:46px !important;
        font-size:14px !important;
        padding:7px 10px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v765 FINAL COMPACT PATCH
========================================================= */
/* Theme spacing shown in DevTools: remove the 60px / 30px gap. */
body#page-mod-quiz-attempt #ccn-main-region{
    padding-top:10px !important;
    padding-bottom:8px !important;
}
body#page-mod-quiz-attempt #ccn-main-region > .container,
body#page-mod-quiz-attempt #ccn-main-region > div > .container{
    padding-top:0 !important;
    padding-bottom:0 !important;
}
/* Compress the control block and the gap before the first question. */
body#page-mod-quiz-attempt #mod_quiz_navblock,
body#page-mod-quiz-attempt .block_quiz_navblock{
    margin-top:0 !important;
    margin-bottom:8px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
}
body#page-mod-quiz-attempt #mod_quiz_navblock .content,
body#page-mod-quiz-attempt #mod_quiz_navblock .ccnBlockContent,
body#page-mod-quiz-attempt .block_quiz_navblock .content{
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}
body#page-mod-quiz-attempt #mod_quiz_navblock + *,
body#page-mod-quiz-attempt .block_quiz_navblock + *{
    margin-top:8px !important;
}
/* Actual Moodle controls discovered in .othernav. */
body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    align-items:stretch !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    width:100% !important;
}
body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a,
body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a{
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    height:46px !important;
    margin:0 !important;
    padding:8px 14px !important;
    border-radius:30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    box-shadow:0 6px 15px rgba(11,74,166,.12) !important;
}
body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
    background:#159947 !important;
    background-color:#159947 !important;
    border:2px solid #fff !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}
body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.s2e-attempt-continue-later,
body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.s2e-attempt-continue-later{
    background:#fff !important;
    background-color:#fff !important;
    border:2px solid #bfdbfe !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
}
/* Remove the oversized wrapper around the real flag link. */
body#page-mod-quiz-attempt .que:not(.description) .info{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
body#page-mod-quiz-attempt .que .info .questionflag{
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}
body#page-mod-quiz-attempt .que .info .questionflag a,
body#page-mod-quiz-attempt a.questionflag{
    width:auto !important;
    min-width:190px !important;
    min-height:42px !important;
    height:42px !important;
    padding:7px 16px !important;
    margin:0 !important;
    border-radius:24px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    font-size:0 !important;
    line-height:1 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}
body#page-mod-quiz-attempt .que .info .questionflag a::after,
body#page-mod-quiz-attempt a.questionflag::after{
    content:attr(data-s2-flag-label) !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
}
body#page-mod-quiz-attempt a.questionflag[aria-pressed="false"],
body#page-mod-quiz-attempt .que .info .questionflag:not(.flagged) a{
    background:#fff !important;
    background-color:#fff !important;
    border:2px solid #0b4aa6 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 5px 12px rgba(11,74,166,.11) !important;
}
body#page-mod-quiz-attempt a.questionflag[aria-pressed="true"],
body#page-mod-quiz-attempt .que .info .questionflag.flagged a{
    background:#d97706 !important;
    background-color:#d97706 !important;
    border:2px solid #fbbf24 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 6px 14px rgba(217,119,6,.20) !important;
}
body#page-mod-quiz-attempt .que .info .questionflag a > *,
body#page-mod-quiz-attempt a.questionflag > *{
    display:none !important;
}
/* Tighten the vertical area before the question card. */
body#page-mod-quiz-attempt .s2-section-container.s2-active-section,
body#page-mod-quiz-attempt .s2-virtual-layout{
    margin-top:0 !important;
    padding-top:0 !important;
}
body#page-mod-quiz-attempt .s2-virtual-right .que:not(.description){
    padding-top:50px !important;
    margin-top:0 !important;
}
body#page-mod-quiz-attempt .s2-virtual-right .que:not(.description) .info{
    top:2px !important;
}
@media(max-width:700px){
    body#page-mod-quiz-attempt #ccn-main-region{
        padding-top:4px !important;
        padding-bottom:4px !important;
    }
    body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
    body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
        grid-template-columns:1fr 1fr !important;
        gap:6px !important;
    }
    body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a,
    body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a{
        min-height:44px !important;
        height:44px !important;
        padding:7px 8px !important;
        font-size:13px !important;
    }
    body#page-mod-quiz-attempt .que .info .questionflag a,
    body#page-mod-quiz-attempt a.questionflag{
        min-width:170px !important;
        min-height:40px !important;
        height:40px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v766 FINAL OVERRIDES
========================================================= */
/* Force Finish and Continue Later side by side on desktop and mobile. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-flow:column !important;
    gap:8px !important;
    width:100% !important;
}
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:46px !important;
    height:46px !important;
    margin:0 !important;
    padding:7px 10px !important;
    border-radius:30px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
    font-size:15px !important;
}
/* Flag state uses the data label set by JS, avoiding theme-specific flagged classes. */
html body#page-mod-quiz-attempt a.questionflag[data-s2-flag-label^="✓"],
html body#page-mod-quiz-attempt .que .info .questionflag a[data-s2-flag-label^="✓"]{
    background:#d97706 !important;
    background-color:#d97706 !important;
    border:2px solid #fbbf24 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 6px 14px rgba(217,119,6,.20) !important;
}
html body#page-mod-quiz-attempt a.questionflag[data-s2-flag-label^="⚑"],
html body#page-mod-quiz-attempt .que .info .questionflag a[data-s2-flag-label^="⚑"]{
    background:#fff !important;
    background-color:#fff !important;
    border:2px solid #0b4aa6 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
}
/* Keep only the real button, with no oversized wrapper. */
html body#page-mod-quiz-attempt .que:not(.description) .info,
html body#page-mod-quiz-attempt .que .info .questionflag{
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
html body#page-mod-quiz-attempt .que .info .questionflag a,
html body#page-mod-quiz-attempt a.questionflag{
    min-width:178px !important;
    width:auto !important;
    height:40px !important;
    min-height:40px !important;
    padding:6px 14px !important;
}
/* Additional safe space so the floating Previous/Next bar never covers the final option. */
html body#page-mod-quiz-attempt .s2-section-container.s2-active-section{
    padding-bottom:150px !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:6px !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:44px !important;
        min-height:44px !important;
        padding:6px 5px !important;
        font-size:12px !important;
        letter-spacing:-.1px !important;
    }
    html body#page-mod-quiz-attempt .que .info .questionflag a,
    html body#page-mod-quiz-attempt a.questionflag{
        min-width:164px !important;
        height:38px !important;
        min-height:38px !important;
        padding:5px 11px !important;
    }
    html body#page-mod-quiz-attempt .s2-section-container.s2-active-section{
        padding-bottom:180px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v768
   Reuse Moodle Continue Later, align all controls, center Finish.
========================================================= */
/* The original Continue Later link has moved to the toolbar. */
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
    padding:7px 12px !important;
    margin:0 !important;
    border:2px solid #bfdbfe !important;
    border-radius:30px !important;
    background:#fff !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 7px 16px rgba(11,74,166,.10) !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
    color:#55779e !important;
    -webkit-text-fill-color:#55779e !important;
    font-size:11px !important;
    font-weight:800 !important;
}
/* Both first-row controls are exactly equal. */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    width:min(100%,620px) !important;
    margin:4px auto 8px !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
/* Continue Later was moved out, so othernav contains only Finish and centers it. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    grid-template-columns:none !important;
    grid-auto-flow:initial !important;
}
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%,306px) !important;
    min-width:0 !important;
    max-width:306px !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 auto !important;
    padding:7px 14px !important;
    border-radius:30px !important;
    font-size:15px !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        width:100% !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:7px !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        height:46px !important;
        min-height:46px !important;
        padding:6px 5px !important;
        font-size:11.5px !important;
        letter-spacing:-.15px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
        display:none !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
        width:calc(50% - 4px) !important;
        max-width:none !important;
        height:46px !important;
        min-height:46px !important;
        font-size:13px !important;
    }
}
@media(max-width:390px){
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        font-size:10.5px !important;
        padding-inline:3px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v769
   Question numbers below Finish + selected option matches list button.
========================================================= */
/* Navigation order: toolbar, Finish, then question numbers when opened. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    order:2 !important;
}
html body#page-mod-quiz-attempt .s2-question-number-grid-v760{
    order:3 !important;
    margin-top:10px !important;
}
/* Selected answer only: exactly the solid blue used by the question-list button. */
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card,
html body#page-mod-quiz-attempt .que.multichoice .s2-option-card.s2-selected-option-card,
html body#page-mod-quiz-attempt .que.multichoice .s2-option-card:has(input[type="radio"]:checked){
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
    border:2px solid #38bdf8 !important;
    outline:0 !important;
    box-shadow:0 0 0 3px rgba(56,189,248,.16),0 9px 20px rgba(11,74,166,.20) !important;
}
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-card-bar,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-card-bar,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card .s2-option-card-bar{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-row,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-row,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card .s2-option-row{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-text,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-text,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card .s2-option-text{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
    text-shadow:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked + label .s2-option-number,
html body#page-mod-quiz-attempt .que.multichoice input[type="radio"]:checked ~ .s2-option-card .s2-option-number,
html body#page-mod-quiz-attempt .que.multichoice .s2-selected-option-card .s2-option-number{
    background:#fff !important;
    background-color:#fff !important;
    border-color:#dbeafe !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    opacity:1 !important;
}
/* Remove any temporary red selection outline. Evaluation colors can still apply later. */
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card{
    border-color:#38bdf8 !important;
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v770 FINAL OVERRIDES
========================================================= */
/* Selected option during the attempt: exactly the solid list-button blue. */
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card.s2-is-wrong,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card.s2-is-wrong,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card.s2-is-wrong{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
    border:2px solid #38bdf8 !important;
    outline:none !important;
    box-shadow:0 0 0 3px rgba(56,189,248,.16),0 9px 20px rgba(11,74,166,.20) !important;
    filter:none !important;
    opacity:1 !important;
}
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card *,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card *,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card *{
    opacity:1 !important;
    filter:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card-bar,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card .s2-option-card-bar,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card .s2-option-card-bar,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card .s2-option-card-body,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-row,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card .s2-option-row,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card .s2-option-row{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-text,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card .s2-option-text,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card .s2-option-text{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:none !important;
}
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-number,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card .s2-option-number,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-selected-option-card .s2-option-number{
    background:#fff !important;
    background-color:#fff !important;
    border:1px solid #dbeafe !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 3px 9px rgba(0,0,0,.10) !important;
}
/* Explicitly neutralize the instant-wrong red while the attempt is still editable. */
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) .s2-option-card.s2-is-wrong{
    border-color:#dbe7f5 !important;
}
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked + label .s2-option-card.s2-is-wrong,
html body#page-mod-quiz-attempt .que.multichoice:not(.s2-locked-q) input[type="radio"]:checked ~ .s2-option-card.s2-is-wrong{
    border-color:#38bdf8 !important;
}
/* Finish remains before the optional number grid. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav + .s2-question-number-grid-v760,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav + .s2-question-number-grid-v760{
    margin-top:10px !important;
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v771
   Prevent the original Continue Later button from flashing on refresh.
========================================================= */
/* Hide Moodle's original link before JavaScript moves and renames it. */
html body#page-mod-quiz-attempt a.s2e-attempt-continue-later:not(.s2-save-return-course-v768){
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
/* Reveal the same original Moodle link only after it is moved into the toolbar. */
html body#page-mod-quiz-attempt a.s2e-attempt-continue-later.s2-save-return-course-v768{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v773
   Balanced responsive layout: equal top buttons, full-row Finish.
========================================================= */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:10px !important;
    width:min(100%,780px) !important;
    max-width:780px !important;
    margin:4px auto 10px !important;
    padding:0 !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:0 !important;
    padding:5px 12px !important;
    border-radius:28px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    font-size:clamp(13px,1.05vw,16px) !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760 .s2-question-toggle-label{
    min-width:0 !important;
    font-size:inherit !important;
    white-space:nowrap !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    grid-template-rows:1fr 1fr !important;
    column-gap:5px !important;
    row-gap:0 !important;
    align-items:center !important;
    justify-items:center !important;
    line-height:1 !important;
    white-space:normal !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 > span[aria-hidden="true"]{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    font-size:18px !important;
    line-height:1 !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    display:block !important;
    width:100% !important;
    font-size:clamp(12px,1vw,15px) !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:nowrap !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    display:block !important;
    width:100% !important;
    font-size:clamp(9px,.72vw,11px) !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:nowrap !important;
}
/* Finish occupies the full visual row, centered below the two equal buttons. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%,780px) !important;
    max-width:780px !important;
    margin:0 auto 8px !important;
    padding:0 !important;
}
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:0 !important;
    padding:6px 16px !important;
    border-radius:28px !important;
    box-sizing:border-box !important;
    font-size:clamp(14px,1.05vw,17px) !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        width:100% !important;
        max-width:100% !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:7px !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        padding-inline:5px !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
        gap:4px !important;
        font-size:clamp(10px,2.65vw,13px) !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        grid-template-columns:17px minmax(0,1fr) !important;
        column-gap:3px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 > span[aria-hidden="true"]{
        font-size:14px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar{
        font-size:clamp(9.5px,2.55vw,12.5px) !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
        display:block !important;
        font-size:clamp(7.5px,2vw,9.5px) !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
        width:100% !important;
        max-width:100% !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        font-size:clamp(12px,3vw,15px) !important;
    }
}
@media(max-width:390px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        gap:5px !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
        font-size:9.5px !important;
        gap:2px !important;
        padding-inline:3px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        grid-template-columns:14px minmax(0,1fr) !important;
        padding-inline:2px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar{
        font-size:9px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
        font-size:7.5px !important;
    }
}


/* =========================================================
   STEP2ENGLISH QUIZ UI v774
   Hide duplicate summary Back, align Save text, equal button sizes.
========================================================= */
/* Hide only Moodle's duplicate gray Back button on Attempt summary. */
html body#page-mod-quiz-summary .tertiary-navigation .navitem > a.btn.btn-secondary[href*="/mod/quiz/view.php"],
html body#page-mod-quiz-summary .tertiary-navigation a.btn.btn-secondary[href*="/mod/quiz/view.php"] {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}
html body#page-mod-quiz-summary .tertiary-navigation,
html body#page-mod-quiz-summary .tertiary-navigation .row,
html body#page-mod-quiz-summary .tertiary-navigation .navitem {
    min-height:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* A shared control width: both top buttons and centered Finish are identical. */
html body#page-mod-quiz-attempt {
    --s2-v774-control-width:min(100%,380px);
    --s2-v774-control-height:54px;
}
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 {
    display:grid !important;
    grid-template-columns:minmax(0,380px) minmax(0,380px) !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    margin:4px auto 10px !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
html body#page-mod-quiz-attempt .s2-save-return-course-v768 {
    width:100% !important;
    min-width:0 !important;
    max-width:380px !important;
    height:var(--s2-v774-control-height) !important;
    min-height:var(--s2-v774-control-height) !important;
    max-height:var(--s2-v774-control-height) !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* Center Arabic and English as a compact two-line group. */
html body#page-mod-quiz-attempt .s2-save-return-course-v768 {
    display:grid !important;
    grid-template-columns:20px minmax(0,1fr) !important;
    grid-template-rows:22px 14px !important;
    align-content:center !important;
    align-items:center !important;
    justify-items:center !important;
    column-gap:5px !important;
    row-gap:0 !important;
    padding:5px 12px !important;
    line-height:1 !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 > span[aria-hidden="true"] {
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    font-size:17px !important;
    line-height:1 !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar {
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 small {
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:center !important;
    display:block !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    color:#55779e !important;
    -webkit-text-fill-color:#55779e !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
}

/* Finish is centered and exactly the same width and height as each top button. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto 8px !important;
}
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 380px !important;
    width:380px !important;
    min-width:0 !important;
    max-width:380px !important;
    height:var(--s2-v774-control-height) !important;
    min-height:var(--s2-v774-control-height) !important;
    max-height:var(--s2-v774-control-height) !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

@media(max-width:820px) {
    html body#page-mod-quiz-attempt {
        --s2-v774-control-height:52px;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760 {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        width:100% !important;
        gap:7px !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760,
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 {
        width:100% !important;
        max-width:none !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 {
        grid-template-columns:15px minmax(0,1fr) !important;
        grid-template-rows:19px 12px !important;
        column-gap:3px !important;
        padding:5px 4px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 > span[aria-hidden="true"] {
        font-size:14px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar {
        font-size:clamp(9px,2.45vw,12px) !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 small {
        display:block !important;
        font-size:clamp(7px,1.9vw,9px) !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760 {
        font-size:clamp(9px,2.45vw,12px) !important;
        gap:3px !important;
        padding-inline:4px !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink {
        flex:0 0 calc((100% - 7px)/2) !important;
        width:calc((100% - 7px)/2) !important;
        max-width:calc((100% - 7px)/2) !important;
        font-size:clamp(11px,2.8vw,14px) !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v775
   Race-safe controls, unified course return, clean quiz pages.
========================================================= */
/* Avoid showing an incomplete navigation layout while Moodle is still creating Continue Later. */
html body#page-mod-quiz-attempt:not(.s2-quiz-controls-ready-v775) #mod_quiz_navblock .qn_buttons,
html body#page-mod-quiz-attempt:not(.s2-quiz-controls-ready-v775) #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt:not(.s2-quiz-controls-ready-v775) .block_quiz_navblock .qn_buttons,
html body#page-mod-quiz-attempt:not(.s2-quiz-controls-ready-v775) .block_quiz_navblock .othernav {
    visibility:hidden !important;
    opacity:0 !important;
}
html body#page-mod-quiz-attempt.s2-quiz-controls-ready-v775 #mod_quiz_navblock .qn_buttons,
html body#page-mod-quiz-attempt.s2-quiz-controls-ready-v775 #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt.s2-quiz-controls-ready-v775 .block_quiz_navblock .qn_buttons,
html body#page-mod-quiz-attempt.s2-quiz-controls-ready-v775 .block_quiz_navblock .othernav {
    visibility:visible !important;
    opacity:1 !important;
}
/* English subtitle is clearer on laptop while staying inside the same button. */
@media(min-width:821px){
    html body#page-mod-quiz-attempt .s2-save-return-course-v768 small {
        display:block !important;
        font-size:13px !important;
        line-height:1 !important;
        font-weight:800 !important;
    }
}
/* One consistent Back to course design across summary, view and review pages. */
html body#page-mod-quiz-summary .course-content-header > a[href*="/course/view.php"],
html body#page-mod-quiz-view .course-content-header > a[href*="/course/view.php"],
html body#page-mod-quiz-review .course-content-header > a[href*="/course/view.php"],
html body.path-mod-quiz .course-content-header > a[href*="/course/view.php"] {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:190px !important;
    min-height:46px !important;
    padding:8px 18px !important;
    margin:0 0 10px !important;
    border:2px solid #fff !important;
    border-radius:24px !important;
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 7px 16px rgba(11,74,166,.22) !important;
    font-family:Almarai,Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-decoration:none !important;
}
html body.path-mod-quiz .course-content-header > a[href*="/course/view.php"] *,
html body.path-mod-quiz .course-content-header > a[href*="/course/view.php"]::before {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}
/* Remove Moodle previous / jump-to / next activity navigation from quiz pages only. */
html body#page-mod-quiz-attempt .activity-navigation,
html body#page-mod-quiz-summary .activity-navigation,
html body#page-mod-quiz-review .activity-navigation,
html body#page-mod-quiz-view .activity-navigation,
html body.path-mod-quiz .activity-navigation,
html body.path-mod-quiz .course-content-footer .activity-navigation {
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    pointer-events:none !important;
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v776
   Final action hierarchy and consistent colors.
========================================================= */
/* Desktop and mobile order: Save & return on the left, Question list on the right. */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    direction:ltr !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    grid-column:1 !important;
    direction:rtl !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    grid-column:2 !important;
    direction:rtl !important;
}
/* Save & return remains a secondary action: white with the approved blue. */
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    border:2px solid #0b4aa6 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 7px 16px rgba(11,74,166,.12) !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768:hover{
    background:#eef6ff !important;
    background-color:#eef6ff !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 .s2-save-return-ar{
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768 small{
    color:#315f98 !important;
    -webkit-text-fill-color:#315f98 !important;
}
/* Back to course after submission: approved dark blue. */
html body.path-mod-quiz .course-content-header > a[href*="/course/view.php"]{
    background:#0b4aa6 !important;
    background-color:#0b4aa6 !important;
    background-image:none !important;
    border:2px solid #ffffff !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    box-shadow:0 7px 16px rgba(11,74,166,.22) !important;
}
html body.path-mod-quiz .course-content-header > a[href*="/course/view.php"]:hover{
    background:#083c87 !important;
    background-color:#083c87 !important;
}
/* Retry quiz is intentionally secondary and distinct from Back to course. */
html body#page-mod-quiz-view .quizstartbuttondiv button[type="submit"],
html body#page-mod-quiz-view .quizstartbuttondiv input[type="submit"]{
    background:#eef6ff !important;
    background-color:#eef6ff !important;
    background-image:none !important;
    border:2px solid #0b4aa6 !important;
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
    box-shadow:0 8px 18px rgba(11,74,166,.12) !important;
}
html body#page-mod-quiz-view .quizstartbuttondiv button[type="submit"]:hover,
html body#page-mod-quiz-view .quizstartbuttondiv input[type="submit"]:hover{
    background:#dbeafe !important;
    background-color:#dbeafe !important;
}
/* Keep all content inside Retry visibly dark blue. */
html body#page-mod-quiz-view .quizstartbuttondiv button[type="submit"] *,
html body#page-mod-quiz-view .quizstartbuttondiv button[type="submit"]::before{
    color:#0b4aa6 !important;
    -webkit-text-fill-color:#0b4aa6 !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        grid-column:1 !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
        grid-column:2 !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v777
   Final fixed two-column toolbar using explicit grid areas.
========================================================= */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:54px !important;
    grid-template-areas:"save list" !important;
    direction:ltr !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    column-gap:10px !important;
    row-gap:0 !important;
    width:min(100%,780px) !important;
    max-width:780px !important;
    min-height:54px !important;
    height:54px !important;
    margin:4px auto 10px !important;
    padding:0 !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    grid-area:save !important;
    grid-column:auto !important;
    grid-row:auto !important;
    direction:rtl !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    grid-area:list !important;
    grid-column:auto !important;
    grid-row:auto !important;
    direction:rtl !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768,
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    position:relative !important;
    inset:auto !important;
    float:none !important;
    clear:none !important;
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
/* Preserve the two-line Save layout while keeping the element in one grid cell. */
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    display:grid !important;
    grid-template-columns:20px minmax(0,1fr) !important;
    grid-template-rows:22px 14px !important;
    align-content:center !important;
    align-items:center !important;
    justify-items:center !important;
    column-gap:5px !important;
    row-gap:0 !important;
}
/* Finish is exactly one top-button width, centered below. */
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%,780px) !important;
    max-width:780px !important;
    margin:0 auto 8px !important;
    padding:0 !important;
}
html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
    flex:0 0 calc((100% - 10px)/2) !important;
    width:calc((100% - 10px)/2) !important;
    min-width:0 !important;
    max-width:calc((100% - 10px)/2) !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:0 auto !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        grid-template-rows:52px !important;
        grid-template-areas:"save list" !important;
        column-gap:7px !important;
        width:100% !important;
        max-width:100% !important;
        min-height:52px !important;
        height:52px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768,
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        grid-template-columns:15px minmax(0,1fr) !important;
        grid-template-rows:19px 12px !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav{
        width:100% !important;
        max-width:100% !important;
    }
    html body#page-mod-quiz-attempt #mod_quiz_navblock .othernav > a.endtestlink,
    html body#page-mod-quiz-attempt .block_quiz_navblock .othernav > a.endtestlink{
        flex-basis:calc((100% - 7px)/2) !important;
        width:calc((100% - 7px)/2) !important;
        max-width:calc((100% - 7px)/2) !important;
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v778
   Correct visual order: Question list right, Save & return left.
========================================================= */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    grid-template-areas:"list save" !important;
    direction:ltr !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    grid-area:list !important;
    grid-column:auto !important;
    grid-row:auto !important;
    direction:rtl !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    grid-area:save !important;
    grid-column:auto !important;
    grid-row:auto !important;
    direction:rtl !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        grid-template-areas:"list save" !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v779
   Correct screen positions:
   Save & return = left, Question list = right.
========================================================= */
html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
    direction:ltr !important;
    grid-template-areas:"save list" !important;
}
html body#page-mod-quiz-attempt .s2-save-return-course-v768{
    grid-area:save !important;
    grid-column:1 !important;
    grid-row:1 !important;
    direction:rtl !important;
}
html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
    grid-area:list !important;
    grid-column:2 !important;
    grid-row:1 !important;
    direction:rtl !important;
}
@media(max-width:700px){
    html body#page-mod-quiz-attempt .s2-question-list-toolbar-v760{
        direction:ltr !important;
        grid-template-areas:"save list" !important;
    }
    html body#page-mod-quiz-attempt .s2-save-return-course-v768{
        grid-column:1 !important;
    }
    html body#page-mod-quiz-attempt .s2-question-list-toggle-v760{
        grid-column:2 !important;
    }
}


/* =========================================================
   STEP2ENGLISH QUIZ UI v780
   Direct-question navigation support + safe Flag/zoom position.
   This patch does not change Moodle question structure.
========================================================= */

/* Keep the active question and Flag area fully visible after every SPA jump. */
html body#page-mod-quiz-attempt .s2-section-container,
html body#page-mod-quiz-attempt .s2-section-container.s2-active-section,
html body#page-mod-quiz-attempt .s2-virtual-layout,
html body#page-mod-quiz-attempt .s2-virtual-right,
html body#page-mod-quiz-attempt .que:not(.description),
html body#page-mod-quiz-attempt .que:not(.description) .info,
html body#page-mod-quiz-attempt .que:not(.description) .info .questionflag{
    overflow:visible !important;
}
html body#page-mod-quiz-attempt .que:not(.description){
    scroll-margin-top:116px !important;
    padding-top:50px !important;
}
html body#page-mod-quiz-attempt .que .info .questionflag,
html body#page-mod-quiz-attempt .que .info .questionflag a,
html body#page-mod-quiz-attempt a.questionflag{
    white-space:nowrap !important;
    text-overflow:clip !important;
}

/* A+ / A- sit close to the upper-right edge on laptop, with one small label. */
html body#page-mod-quiz-attempt .s2-floating-zoom-widget{
    top:104px !important;
    right:38px !important;
    left:auto !important;
    bottom:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
}
html body#page-mod-quiz-attempt .s2-zoom-buttons{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
}
html body#page-mod-quiz-attempt .s2-zoom-caption{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#64748b !important;
    -webkit-text-fill-color:#64748b !important;
    font-family:Tahoma,Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    text-align:center !important;
}

/* Current question highlight also works for the custom Quiz menu buttons. */
html body#page-mod-quiz-attempt .s2e-v6-qbtn.s2e-v10-current,
html body#page-mod-quiz-attempt .s2e-v6-qbtn.s2-nav-current-question{
    outline:2px solid #f59e0b !important;
    outline-offset:1px !important;
}

@media (max-width:991px){
    html body#page-mod-quiz-attempt .que:not(.description){
        scroll-margin-top:112px !important;
    }
    html body#page-mod-quiz-attempt .s2-floating-zoom-widget{
        top:5px !important;
        right:12px !important;
        gap:0 !important;
    }
    html body#page-mod-quiz-attempt .s2-zoom-buttons{
        gap:6px !important;
    }
    html body#page-mod-quiz-attempt .s2-zoom-caption{
        display:none !important;
    }
}
@media (max-width:480px){
    html body#page-mod-quiz-attempt .s2-floating-zoom-widget{
        right:8px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v783
   Keep theme header intact; viewport starts at active Flag.
   No header deletion. Safe bottom space remains for fixed quiz nav.
========================================================= */

/* The browser scroll is now driven by the active Flag in engine.js.
   Do not use large scroll-margin offsets that vary by question height. */
html body#page-mod-quiz-attempt .que:not(.description){
    scroll-margin-top:8px !important;
}

/* Text-size controls occupy the same top tool row after the page scrolls to Flag. */
@media (min-width:992px){
    html body#page-mod-quiz-attempt .s2-floating-zoom-widget{
        position:fixed !important;
        top:8px !important;
        right:38px !important;
        left:auto !important;
        bottom:auto !important;
        transform:none !important;
        z-index:2147483600 !important;
    }
    /* Real document space so D/last option can always scroll above fixed Prev/Next. */
    html body#page-mod-quiz-attempt .s2-section-container.s2-active-section .s2-virtual-right{
        padding-bottom:190px !important;
        box-sizing:border-box !important;
    }
}
@media (max-width:991px){
    html body#page-mod-quiz-attempt .s2-floating-zoom-widget{
        top:5px !important;
    }
    html body#page-mod-quiz-attempt .s2-section-container.s2-active-section .s2-virtual-right{
        padding-bottom:180px !important;
        box-sizing:border-box !important;
    }
}


/* =========================================================
   STEP2ENGLISH QUIZ UI v784
   One-paint Flag alignment: no CSS transition or smooth scroll
   is applied to the viewport alignment.
========================================================= */
html body#page-mod-quiz-attempt { scroll-behavior:auto !important; }


/* =========================================================
   STEP2ENGLISH QUIZ UI v785
   Stable question top + far-left Quiz menu.
   - No translate/fade motion while switching questions.
   - Extra real document scroll range prevents browser clamping.
   - Desktop Quiz menu uses the unused far-left edge.
========================================================= */

/* Critical: the old s2FastFade moved the new section by 12px while JS was
   measuring it. That made one question land higher/lower than another. */
html body#page-mod-quiz-attempt .s2-section-container.s2-active-section{
    animation:none !important;
    transform:none !important;
}

/* Give every question enough scroll range to reach exactly the same viewport top,
   even when the question itself is very short. */
html body#page-mod-quiz-attempt.s2-fast-section-mode{
    padding-bottom:300px !important;
}

/* Put the custom Quiz menu in the unused far-left desktop space. */
@media (min-width:992px){
    html body#page-mod-quiz-attempt.s2-fast-section-mode #s2e-v6-quiz-options{
        left:18px !important;
        right:auto !important;
        transform:none !important;
        align-items:flex-start !important;
    }
    html body#page-mod-quiz-attempt.s2-fast-section-mode #s2e-v6-quiz-options .s2e-v6-options-menu,
    html body#page-mod-quiz-attempt.s2-fast-section-mode #s2e-v6-quiz-options .s2e-v6-question-panel{
        align-self:flex-start !important;
    }
}

@media (max-width:991px){
    html body#page-mod-quiz-attempt.s2-fast-section-mode{
        padding-bottom:220px !important;
    }
}

/* =========================================================
   STEP2ENGLISH QUIZ UI v787
   Menu positioning is owned by site-custom/quiz-recovery.css.
   Initial viewport alignment is owned by quiz_style/engine.js.
========================================================= */


/* ===================================================
   V35.42 — Grammar explanation layout + mobile video audio guard
   - Grammar desktop: authored explanation stays in the left column.
   - Grammar mobile/tablet: left explanation page is never painted above the question.
     Only the per-question "شرح السؤال" trigger remains; its panel opens on demand.
   - data-open is the single source of truth for the mobile explanation panel.
=================================================== */
@media (max-width: 991px) {
    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-section-container > .s2-virtual-layout > .s2-virtual-left,
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-section-container > .s2-virtual-layout > .s2-virtual-left {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-section-container > .s2-virtual-layout > .s2-virtual-right,
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-section-container > .s2-virtual-layout > .s2-virtual-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-explain-box[data-box-type="question"] .s2-explain-panel,
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-explain-box[data-box-type="question"] .s2-explain-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-explain-box[data-box-type="question"][data-open="1"] .s2-explain-panel,
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-explain-box[data-box-type="question"][data-open="1"] .s2-explain-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (min-width: 992px) {
    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-section-container > .s2-virtual-layout > .s2-virtual-left,
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-section-container > .s2-virtual-layout > .s2-virtual-left {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    html body#page-mod-quiz-attempt.s2-grammar-quiz .s2-explain-box[data-box-type="question"],
    html body#page-mod-quiz-attempt[data-s2-page="grammar"] .s2-explain-box[data-box-type="question"] {
        display: none !important;
    }
}

/* V34.72 — only: fullscreen Training feedback video + keep finalized answer visual */
html.s2-training-video-open,body.s2-training-video-open{overflow:hidden!important;}
.s2-training-video-overlay{
  position:fixed!important;inset:0!important;z-index:2147483647!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:12px!important;background:rgba(4,15,35,.82)!important;backdrop-filter:blur(5px)!important;
}
.s2-training-video-popup{
  position:relative!important;width:min(1100px,96vw)!important;max-height:94vh!important;
  background:#071426!important;border-radius:18px!important;padding:48px 12px 12px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
}
.s2-training-video-stage{position:relative!important;width:100%!important;aspect-ratio:16/9!important;max-height:calc(94vh - 64px)!important;background:#000!important;border-radius:12px!important;overflow:hidden!important;}
.s2-training-video-stage iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;display:block!important;}
.s2-training-video-close{
  position:absolute!important;top:8px!important;left:10px!important;z-index:5!important;
  width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;
  border:0!important;border-radius:50%!important;background:#fff!important;color:#dc2626!important;
  font:700 27px/36px Arial,sans-serif!important;cursor:pointer!important;
}
/* Do not fade the finalized choices; only stop them being changed. */
body#page-mod-quiz-attempt .que[data-s2-training-finalized="1"] .answer{opacity:1!important;filter:none!important;pointer-events:none!important;}
@media(max-width:600px){
  .s2-training-video-overlay{padding:6px!important;}
  .s2-training-video-popup{width:100%!important;padding:44px 6px 6px!important;border-radius:14px!important;}
  .s2-training-video-stage{max-height:calc(100vh - 58px)!important;}
  .s2-training-video-close{top:6px!important;left:8px!important;}
}