/*
 * search-box.css — أفكار القدرات
 * منقول من القالب للإضافة
 */

/****************************** محرر الأسئلة — لوحة الإدارة فقط ******************************/

.dflex{background:#f7f7f7;padding:8px;border:1px solid #eee;border-radius:5px}
.dflex input{width:100%;padding:5px;border-radius:5px}
.loader{width:20px;aspect-ratio:1;border-radius:50%;border:3px solid;border-color:#1D9E75 #0000;animation:ld-spin 1s infinite;margin:20px auto}
@keyframes ld-spin{to{transform:rotate(.5turn)}}
ul.question-lists li{background:#fff;padding:10px;position:relative;border-bottom:1px solid #ddd}
ul.question-lists li:last-child{border:0}
ul.question-lists li span{position:absolute;background:#007cba;padding:2px 10px;left:10px;top:8px;border-radius:5px;color:#fff;transition:.35s ease;opacity:0;cursor:pointer}
ul.question-lists li:hover span{opacity:1}
ul.question-lists li span:hover{background:#1f1f1f}
.search-results{position:relative;box-sizing:border-box}
.question-lists{position:absolute;top:100%;right:0;width:100%;max-width:500px;background:#fefefe;box-shadow:0 0 20px #0000001f;z-index:999}
.quest{padding:10px;background:#fff;margin-bottom:6px;border-radius:5px;border:1px solid #eee;cursor:all-scroll;position:relative}
.remove{background:#f003;color:#f00;padding:1px 8px;position:absolute;left:8px;top:8px;border-radius:5px;opacity:0;transition:.35s ease;cursor:pointer}
.quest:hover .remove{opacity:1}
.remove:hover{background:#f00;color:#fff}
.list-chosen-questions{margin-top:15px}

/****************************** متغيرات التصميم ******************************/

:root{
  --ff:'IBM Plex Sans Arabic',sans-serif;
  --green:#1D9E75;--green-l:#E8F8F2;--green-b:#A8DFC8;--green-d:#0A5C42;
  --orange:#E07B39;--orange-l:#FEF3EB;--orange-b:#F5BC91;--orange-d:#8C3D10;
  --gold:#D4A017;--gold-l:#FFFBEB;--gold-b:#F0D060;--gold-d:#7A5A00;
  --gray:#F7F8FA;--border:#E8EAED;--text:#1A1A2E;--muted:#7A7F8E;
  --rad:14px;--rad-sm:10px;--rad-xs:7px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
  --shadow-h:0 2px 8px rgba(0,0,0,.08),0 8px 28px rgba(0,0,0,.08);
}

/****************************** الحاوية الرئيسية ******************************/

.aq-hub{direction:rtl;font-family:var(--ff);display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}

/****************************** البطاقات الأربع ******************************/

.aq-card{background:#fff;border-radius:var(--rad);padding:16px 18px;box-shadow:var(--shadow);border:1px solid var(--border);transition:box-shadow .22s,transform .22s;position:relative;overflow:hidden}
.aq-card::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;border-radius:0 var(--rad) var(--rad) 0}
.aq-card:hover{box-shadow:var(--shadow-h);transform:translateY(-1px)}
.aq-b1::before{background:var(--green)}
.aq-b3::before{background:var(--green)}
.aq-b1-ico,.aq-b3-ico{width:34px;height:34px;border-radius:var(--rad-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.aq-b1-ico{background:var(--green-l);color:var(--green-d)}
.aq-b3-ico{background:var(--green-l);color:var(--green-d)}
.aq-b1:hover .aq-b1-ico,.aq-b3:hover .aq-b3-ico{transform:rotate(-10deg) scale(1.1)}
.aq-b1-title,.aq-b3-title{font-size:13px;font-weight:700;color:var(--text)}
.aq-b1-row,.aq-b3-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/****************************** بلوك ١ — البحث ******************************/

.aq-tog-wrap{display:flex;background:var(--gray);border:1px solid var(--border);border-radius:50px;padding:2px;position:relative;cursor:pointer;user-select:none;flex-shrink:0}
.aq-tog-thumb{position:absolute;height:calc(100% - 4px);top:2px;border-radius:50px;background:#fff;border:1px solid var(--green-b);box-shadow:0 1px 4px rgba(0,0,0,.1);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.aq-tog-thumb.km{right:2px;width:calc(50% - 2px)}
.aq-tog-thumb.lf{left:2px;width:calc(50% - 2px)}
.aq-tog-lbl{font-size:11px;font-weight:600;padding:6px 14px;z-index:1;transition:color .25s;white-space:nowrap}
.aq-tog-lbl.on{color:var(--green-d)}
.aq-tog-lbl.off{color:#bbb}
.aq-s-box{flex:1;min-width:160px;display:flex;align-items:center;gap:8px;background:var(--gray);border:1px solid var(--border);border-radius:var(--rad-sm);padding:0 12px;transition:border-color .2s,box-shadow .2s}
.aq-s-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,.1)}
.aq-s-box i{font-size:15px;color:#ccc}
.aq-s-box input{flex:1;border:none;outline:none;font-size:13px;padding:10px 0;background:transparent;font-family:var(--ff);color:var(--text)}
.aq-s-box input::placeholder{color:#ccc}
.aq-s-res{margin-top:10px;display:none}
.aq-s-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.aq-s-cnt{font-size:11px;color:var(--muted)}
.aq-add-all{background:var(--green);color:#fff;border:none;border-radius:var(--rad-xs);padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--ff);display:flex;align-items:center;gap:4px;transition:filter .15s}
.aq-add-all:hover{filter:brightness(.9)}
.aq-q-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.aq-q-list::-webkit-scrollbar{width:3px}
.aq-q-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
/* بنية القالب الموحّد: عمود رأسي حقيقي — Header ثم صف المحتوى (Rail+Body)
   ثم Footer. align-items:stretch يجبر كل عنصر (الهيدر، صف المحتوى، الفوتر)
   على ملء عرض البطاقة الكامل بدل الانكماش لحجم محتواه — هذا بالضبط ما كان
   ناقصًا ويسبب ظهور Action Rail خارج تنظيم البطاقة. justify-content:flex-start
   يمنع أي تباعد اصطناعي بين العناصر (بدل space-between المتبقية من تصميم
   أفقي قديم لم يعد مستخدمًا في أي مكان). */
.aq-q-card{background:#fff;border:1px solid var(--border);border-radius:var(--rad-sm);padding:10px 12px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;direction:rtl;gap:0;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.aq-q-card:hover{border-color:var(--green);box-shadow:0 3px 10px rgba(29,158,117,.1)}
.aq-q-card.sel{border-color:var(--green);background:var(--green-l)}
/* .aq-q-content و.aq-q-text حُذفتا — ميتتان تمامًا، لا يوجد أي كود PHP/JS
   يُخرج هذين الصنفين بعد توحيد Body عبر aq_render_question_body(). */
/* .aq-q-meta / .aq-q-num / .aq-q-path / .aq-path-sep / .aq-q-diff-badge وبادج القسم
   انتقلت بالكامل إلى assets/css/aq-question-header.css — مكوّن الهيدر الموحد.
   لا تُعِد تعريف أي منها هنا. (.aq-q-sec و .aq-q-diff كانا صنفين ميتين
   غير مستخدمين في أي مكان — حُذفا بدل نقلهما.) */
/* .aq-q-add انتقلت إلى assets/css/aq-question-actions.css — Action Rail الموحد */
.aq-start-strip{background:var(--gray);border:1px solid var(--border);border-radius:var(--rad-sm);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.aq-sel-info{font-size:12px;color:var(--green);font-weight:600}
.aq-go-search{background:#ccc;color:#888;border:none;border-radius:var(--rad-sm);padding:8px 18px;font-size:13px;font-weight:600;cursor:not-allowed;font-family:var(--ff);display:flex;align-items:center;gap:5px;transition:background .2s,color .2s;opacity:1}
.aq-tb-start:not(:disabled),.aq-go-search:not(:disabled){background:var(--green)!important;color:#fff!important;cursor:pointer}
.aq-go-search:not(:disabled):hover{filter:brightness(.92)}

/****************************** بلوك ٢ — كسب النقاط (v6.0) ******************************/

/* ══ BADGE CONTEXT MODIFIERS ═══════════════════════════════════════════════════
   يعمل فوق aq-member-badge.css بدون تعديله.
   aq_badge_html_build( $data, 'pts-card' | 'pts-user' | 'pts-journey' )
   HTML: .aq-level-badge.aq-level-badge--{context}
   CSS الأساسي (.aq-level-badge): في aq-member-badge.css — لا يُمس
══════════════════════════════════════════════════════════════════════════════ */

/* pts-card — في بلوك مستواك الحالي (قريب من الحجم الأصلي) */
.aq-level-badge--pts-card { margin-top: 0; padding: 2px 0 2px 2px !important; }
.aq-level-badge--pts-card .aq-badge-name { font-size: 12px !important; min-width: 42px !important; padding: 3px 10px 3px 4px !important; letter-spacing: 0 !important; }
.aq-level-badge--pts-card .aq-badge-shapes { width: 48px !important; gap: 3px !important; padding: 0 5px !important; }
.aq-level-badge--pts-card .aq-shape { width: 11px !important; height: 11px !important; }
.aq-level-badge--pts-card .aq-shape::before { width: 9px !important; height: 9px !important; }

/* pts-user — بطاقة العضو (مطابق للحجم الأصلي) */
.aq-level-badge--pts-user { margin-top: 0; padding: 3px 0 3px 3px !important; }
.aq-level-badge--pts-user .aq-badge-name { font-size: 12px !important; min-width: 40px !important; padding: 3px 10px 3px 4px !important; }
.aq-level-badge--pts-user .aq-badge-shapes { width: 48px !important; gap: 3px !important; padding: 0 5px !important; }
.aq-level-badge--pts-user .aq-shape { width: 11px !important; height: 11px !important; }
.aq-level-badge--pts-user .aq-shape::before { width: 9px !important; height: 9px !important; }

/* pts-journey — رحلة المستويات (أكبر بـ 15% من base) */
.aq-level-badge--pts-journey { margin-top: 0; padding: 2px 0 2px 2px !important; }
.aq-level-badge--pts-journey .aq-badge-name { font-size: 11px !important; min-width: 40px !important; padding: 3px 9px 3px 4px !important; letter-spacing: 0 !important; }
.aq-level-badge--pts-journey .aq-badge-shapes { width: 44px !important; gap: 3px !important; padding: 0 4px !important; }
.aq-level-badge--pts-journey .aq-shape { width: 11px !important; height: 11px !important; }
.aq-level-badge--pts-journey .aq-shape::before { width: 9px !important; height: 9px !important; }

/* Badge مقفل في الرحلة */
.aq-pts-jbadge-lck .aq-level-badge { opacity: .38; filter: grayscale(.12); }

/* ── Block ──────────────────────────────────────────────────────────────────── */
.aq-pts-block { direction: rtl; background: #FAFAFA !important; }
.aq-pts-block::before { background: linear-gradient(180deg, #F97316, #EA580C); }
.aq-pts-deco { color: var(--gold); font-size: 12px; }
.aq-pts-title-line { flex: 1; height: 1px; background: var(--gold-b); }

/* ── TOP GRID: cta(right) · progress(mid) · user(left) ──────────────────────
   DOM order: cta-card أولاً (RTL=right) · progress · user-card آخراً (RTL=left) */
.aq-pts-top { display: grid; grid-template-columns: 180px 1fr 175px; gap: 10px; margin-bottom: 10px; align-items: stretch; }
.aq-pts-user-card, .aq-pts-progress-card, .aq-pts-cta-card {
  background: #fff; border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--rad-sm); box-shadow: 0 2px 10px rgba(0,0,0,.05); padding: 16px;
}

/* ① User Card */
.aq-pts-user-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: 100%; }
.aq-pts-avatar-simple img.avatar, .aq-pts-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.12); display: block; }
.aq-pts-avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 32px; }
.aq-pts-user-name { font-size: 14px; font-weight: 700; color: var(--text); }
.aq-pts-user-lvl { font-size: 11px; color: var(--muted); background: #F3F4F6; border-radius: 20px; padding: 3px 12px; }

/* ② Progress Card */
.aq-pts-prog-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
/* TOP: info يمين · دائرة يسار (RTL) */
.aq-pts-prog-top { display: flex; align-items: center; gap: 0; direction: rtl; justify-content: center; }
.aq-pts-prog-info { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.aq-pts-circle-svg { width: 140px; height: 140px; flex-shrink: 0; margin-right: -12px; }
/* Points */
.aq-pts-pts-inline { display: flex; align-items: center; gap: 5px; direction: rtl; }
.aq-pts-pts-num { font-size: 28px; font-weight: 800; color: var(--gold); line-height: 1; }
.aq-pts-pts-star { font-size: 22px; color: var(--gold); }
.aq-pts-pts-label { font-size: 12px; color: var(--muted); }
.aq-pts-info-next { font-size: 12px; color: #4B5563; line-height: 1.5; }
.aq-pts-info-next strong { color: var(--text); }
/* Slider section */
.aq-pts-prog-bottom { border-top: 1px solid #F0F0F0; padding-top: 6px; margin-top: 6px; }
.aq-pts-guest-msg { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 16px; text-align: center; }

/* ── SLIDER ──────────────────────────────────────────────────────────────────── */
.aq-pts-slider { width: 90%; margin: 0 auto; direction: rtl; padding-top: 30px; }
.aq-pts-slider-rail { position: relative; height: 10px; background: #E9ECEF; border-radius: 10px; overflow: visible; direction: ltr; }
.aq-pts-slider-fill { position: absolute; top: 0; right: 0; height: 100%; border-radius: 10px; }
.aq-pts-avatar-thumb { position: absolute; bottom: calc(100% + 5px); display: flex; flex-direction: column; align-items: center; z-index: 3; }
.aq-pts-thumb-img, .aq-pts-avatar-thumb img.avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.22); display: block; }
.aq-pts-thumb-arrow { display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top-width: 7px; border-top-style: solid; margin-top: 2px; }
.aq-pts-slider-ticks { position: relative; height: 36px; direction: rtl; overflow: visible; margin-top: 4px; }
.aq-pts-sl-item { position: absolute; top: 0; text-align: center; }
.aq-pts-sl-s { right: 0; transform: translateX(50%); }
.aq-pts-sl-m { transform: translateX(50%); }
.aq-pts-sl-e { left: 0; transform: translateX(-50%); }
.aq-pts-sl-val { font-size: 12px; font-weight: 700; line-height: 1.2; }
.aq-pts-sl-desc { font-size: 10px; color: var(--muted); line-height: 1.2; }
.aq-pts-sl-m .aq-pts-sl-desc { color: inherit; }

/* ③ CTA Card */
.aq-pts-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; height: 100%; justify-content: center; direction: rtl; }
.aq-pts-cta-ico { font-size: 38px; color: #F97316; }
.aq-pts-cta-head { font-size: 16px; font-weight: 800; color: var(--text); }
.aq-pts-cta-desc { font-size: 11px; color: var(--muted); margin-top: -4px; }
.aq-pts-cta-types { display: flex; gap: 8px; justify-content: center; }
.aq-pts-type-km, .aq-pts-type-lf { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.aq-pts-type-km { background: #DCFCE7; color: #16A34A; }
.aq-pts-type-lf { background: #EDE9FE; color: #7C3AED; }
.aq-pts-cta-btn { background: linear-gradient(to bottom,#F97316,#EA580C); color: #fff; border: none; border-radius: 50px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; width: 85%; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--ff); box-shadow: 0 4px 18px rgba(234,88,12,.35); transition: transform .15s,box-shadow .15s; }
.aq-pts-cta-btn:hover { transform: scale(1.02) translateY(-1px); box-shadow: 0 6px 22px rgba(234,88,12,.45); }
.aq-pts-cta-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.aq-pts-cta-renew { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }

/* ── JOURNEY (6 levels RTL grid) ──────────────────────────────────────────── */
.aq-pts-journey-section { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--rad-sm); box-shadow: 0 2px 10px rgba(0,0,0,.05); padding: 14px; margin-bottom: 10px; }
.aq-pts-journey-title { text-align: center; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.aq-pts-journey-outer { overflow-x: auto; scrollbar-width: none; }
.aq-pts-journey-outer::-webkit-scrollbar { display: none; }
.aq-pts-journey-section { overflow: visible; }
.aq-pts-journey-row { display: grid; grid-template-columns: repeat(6, 1fr); direction: rtl; position: relative; }
/* Track: خلف الشعارات. top = spacer(40) + نصف Badge الأصلي (~20px) = 60px */
/* Track: رسم كـ background-image على journey-row مباشرة — راجع inline style في PHP */
/* صورة العضو المؤشر */
.aq-pts-journey-avatar { position: absolute; top: 2px; display: flex; flex-direction: column; align-items: center; z-index: 5; transform: translateX(50%); }
.aq-pts-jnd-img, .aq-pts-journey-avatar img.avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.16); display: block; }
/* Nodes z-index:2 فوق track */
.aq-pts-jnode { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.aq-pts-jnode-spacer { height: 40px; }
.aq-pts-jnode-badge {
  background: #fff; /* يغطي الخط خلف الكبسولات حتى المقفولة منها (opacity:.36) */
  padding: 0 5px;
  border-radius: 50px;
  position: relative;
}
.aq-pts-jnode-badge .aq-level-badge { margin-top: 0 !important; }
.aq-pts-jnode-arrow { display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top-width: 7px; border-top-style: solid; margin-top: 2px; }
.aq-pts-jnode-pts { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 5px; text-align: center; }
.aq-pts-jpts-cur { font-weight: 800; }

/* ── STATS ──────────────────────────────────────────────────────────────────── */
.aq-pts-stats-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.aq-pts-stat-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--rad-sm); padding: 12px 16px; direction: rtl; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.aq-pts-stat-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.aq-pts-stat-body { display: flex; align-items: center; justify-content: space-around; }
.aq-pts-si { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; }
.aq-pts-si-n { font-size: 24px; font-weight: 800; line-height: 1; }
.aq-pts-si-l { font-size: 9px; color: var(--muted); }
.aq-pts-si-wrong .aq-pts-si-n { color: #DC2626; }
.aq-pts-si-ok .aq-pts-si-n { color: #16A34A; }
.aq-pts-si-pts .aq-pts-si-n { color: var(--gold-d); }
.aq-pts-vsep { width: 1px; height: 36px; background: #E9ECEF; flex-shrink: 0; }

/* ── FORMULA ─────────────────────────────────────────────────────────────────── */
.aq-pts-formula { background: var(--gold-l); border: 0.5px solid var(--gold-b); border-radius: var(--rad-sm); padding: 8px 14px; display: flex; align-items: center; gap: 10px; direction: rtl; }
.aq-pts-formula-main { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.aq-pts-formula-ico { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.aq-pts-formula-txt { font-size: 11px; font-weight: 600; color: #5A3A00; }
.aq-pts-formula-sep { width: 1px; height: 28px; background: var(--gold-b); flex-shrink: 0; }
.aq-pts-formula-ex { flex: 1; font-size: 10px; color: var(--gold-d); min-width: 0; line-height: 1.4; }
.aq-pts-formula-res { font-size: 12px; font-weight: 800; color: var(--gold); }

/* Responsive */
@media (max-width: 700px) {
  .aq-pts-top { grid-template-columns: 1fr; }
  .aq-pts-prog-top { flex-direction: column; align-items: center; }
  .aq-pts-prog-info { align-items: center; text-align: center; }
  .aq-pts-slider { width: 100%; }
  .aq-pts-stats-2col { grid-template-columns: 1fr; }
  .aq-pts-formula { flex-wrap: wrap; }
  .aq-pts-formula-sep { display: none; }
  .aq-pts-journey-row { min-width: 480px; }
}

/****************************** بلوك ٣ — الأقسام ******************************/

.aq-sec-tog{display:flex;background:var(--gray);border:1px solid var(--border);border-radius:50px;padding:2px;position:relative;cursor:pointer;user-select:none;flex-shrink:0}
.aq-sec-th{position:absolute;height:calc(100% - 4px);top:2px;border-radius:50px;background:#fff;border:1px solid var(--green-b);box-shadow:0 1px 4px rgba(0,0,0,.1);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.aq-sec-th.km{right:2px;width:calc(50% - 2px)}
.aq-sec-th.lf{left:2px;width:calc(50% - 2px)}
.aq-sec-tl{font-size:11px;font-weight:600;padding:6px 14px;z-index:1;white-space:nowrap;transition:color .25s}
.aq-sec-tl.on{color:var(--green-d)}
.aq-sec-tl.off{color:#bbb}
.aq-sec-sw{flex:1;background:var(--gray);border:1px solid var(--border);border-radius:var(--rad-sm);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:5px;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}
.aq-sec-sw:hover{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,.08)}
.aq-sec-sv{font-size:12px;font-weight:500;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aq-sec-arr{font-size:12px;color:#bbb;transition:transform .25s}
.aq-sec-sw:hover .aq-sec-arr{transform:translateY(2px);color:#888}
.aq-sec-se{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;font-size:16px;-webkit-appearance:menulist-button}
.aq-go-blue{background:var(--green);color:#fff;border:none;border-radius:var(--rad-sm);padding:8px 18px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;transition:filter .15s,transform .12s,box-shadow .15s;box-shadow:0 3px 10px rgba(29,158,117,.25)}
.aq-go-blue:hover{filter:brightness(.92);transform:translateY(-1px);box-shadow:0 5px 16px rgba(29,158,117,.35)}

/****************************** بلوك ٤ — الأفكار ******************************/

/***** أفكار v3 *****/
.aq-ideas{overflow:hidden;padding:0}
/* Header */
.aq-ideas-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #F3F4F6}
.aq-ideas-hdr-r{display:flex;align-items:center;gap:10px}
.aq-ideas-bulb{width:40px;height:40px;border-radius:10px;border:1.5px solid #E5E7EB;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aq-ideas-bulb i{font-size:19px;color:#F59E0B}
.aq-ideas-title{font-size:20px;font-weight:700;color:#111827;line-height:1.2}
.aq-ideas-sub{font-size:12px;color:#9CA3AF;margin-top:1px}
.aq-ideas-cnt-badge{display:flex;align-items:center;gap:6px;border:1.5px solid #E5E7EB;border-radius:10px;padding:7px 12px;background:#fff}
.aq-ideas-cnt-badge i{font-size:16px;color:#14B8A6}
.aq-ideas-cnt-badge span{font-size:17px;font-weight:700;color:#14B8A6;white-space:nowrap}
/* Switch */
.aq-ideas-sw-wrap{display:flex;justify-content:center;padding:6px 18px 14px}
.aq-ideas-sw{display:inline-flex;border-radius:10px;overflow:hidden;border:1.5px solid #14B8A6}
.aq-ideas-sw-btn{padding:9px 32px;font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:var(--ff);transition:all .15s;color:#14B8A6;background:#fff;line-height:1}
.aq-ideas-sw-btn.on{background:#14B8A6;color:#fff}
.aq-ideas-sw-btn:not(.on):hover{background:#F0FDFC}
/* transitions per-element below */
/* Dropdown cascade */
.aq-ideas-dds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 18px 14px}
.aq-ideas-dd-box{position:relative}
.aq-ideas-dd-lbl{font-size:11px;font-weight:600;color:#6B7280;margin-bottom:5px;padding-right:2px}
.aq-ideas-dd-btn{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1.5px solid #E5E7EB;border-radius:9px;cursor:pointer;background:#fff;transition:all .14s;min-height:42px;gap:6px}
.aq-ideas-dd-btn:hover:not(.lk){border-color:#D1D5DB;background:#F8FAFB}
.aq-ideas-dd-btn:hover:not(.lk) .aq-dd-arr{transform:translateY(2px)}
.aq-ideas-dd-btn.has{border-color:#0D9488}
.aq-ideas-dd-btn.lk{opacity:.38;pointer-events:none;background:#F9FAFB}
.aq-ideas-dd-btn span:first-child{font-size:13.5px;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aq-ideas-dd-btn.lk span:first-child{color:#9CA3AF;font-weight:400}
.aq-dd-arr{font-size:10px;color:#9CA3AF;flex-shrink:0;transition:transform .15s}

/* Dropdown menu */
.aq-ideas-dd-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;left:0;background:#fff;border:1.5px solid #E5E7EB;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:200;overflow:hidden;max-height:220px;overflow-y:auto}
.aq-dd-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;cursor:pointer;border-bottom:1px solid #F3F4F6;transition:background .1s;gap:8px}
.aq-dd-opt:last-child{border-bottom:none}
.aq-dd-opt:hover{background:#F0FDFC}
.aq-dd-opt.on{background:#ECFDFC}
.aq-dd-opt-name{font-size:14px;font-weight:500;color:#111827;flex:1}
.aq-dd-opt.on .aq-dd-opt-name{color:#0D9488;font-weight:600}
.aq-dd-opt-cnt{font-size:12px;color:#9CA3AF;white-space:nowrap;flex-shrink:0}
.aq-dd-opt.on .aq-dd-opt-cnt{color:#14B8A6}
/* Settings */
.aq-ideas-settings{display:flex;gap:10px;padding:0 18px 12px}
.aq-ideas-scard{border:1px solid #E8EDEC;border-radius:12px;background:#fff;overflow:hidden}
.aq-ideas-diff-card{flex:1.1}
.aq-ideas-cnt-card{flex:1}
.aq-ideas-mastery-card{flex:.85; display:flex; flex-direction:column;}
.aq-ideas-scard-hdr{padding:11px 13px 9px;font-size:13.5px;font-weight:600;color:#374151;display:flex;align-items:center;gap:5px;border-bottom:1px solid #F3F4F6}
.aq-ideas-scard-hdr i{font-size:13px;color:#6B7280}

/* ── Checkbox "إظهار المتقن" — مشترك بين شريط البحث ونافذة أفكار ── */
.aq-mastery-filter-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.aq-mastery-filter-chk input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--green, #2ABFAB);
  cursor: pointer;
  margin: 0;
}
.aq-mastery-filter-chk-block {
  flex: 1;
  padding: 13px;
  justify-content: center;
  font-size: 13px;
}
.aq-ideas-diff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:9px 11px 11px}
.aq-ideas-dr{border-radius:8px;padding:8px 5px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .12s;font-family:var(--ff);line-height:1.2}
.aq-ideas-dr:hover:not(.on){opacity:.82;transition:opacity .2s}
/* الكل = أزرق مائل مميز — ليس رصاصياً */
.aq-dr-all{color:#1E3A5F;background:#DBEAFE}
/* سهل جداً = أخضر غامق #2E7D32 */
.aq-dr-ev{color:#2E7D32;background:#E8F5E9}
/* سهل = أزرق #1565C0 */
.aq-dr-e{color:#1565C0;background:#E3F2FD}
/* متوسط = رصاصي #9E9E9E */
.aq-dr-m{color:#616161;background:#F5F5F5}
/* صعب = عنبري #F59E0B */
.aq-dr-h{color:#B45309;background:#FFF8E1}
/* صعب جداً = أحمر #B71C1C */
.aq-dr-hv{color:#B71C1C;background:#FFEBEE}
/* حالة الاختيار: border موف + shadow خفيف فقط — لا تغيير للخلفية */
.aq-ideas-dr.on{border-color:#7C3AED!important;box-shadow:0 0 0 2.5px rgba(124,58,237,.13)!important;background:inherit}
/* نص كل مستوى يبقى ثابتاً بغض النظر عن :active/:focus/:hover */
.aq-ideas-dr:focus{outline:none}
.aq-dr-all,.aq-dr-all:hover,.aq-dr-all:active,.aq-dr-all:focus,.aq-dr-all.on{color:#1E3A5F!important}
.aq-dr-ev,.aq-dr-ev:hover,.aq-dr-ev:active,.aq-dr-ev:focus,.aq-dr-ev.on{color:#2E7D32!important}
.aq-dr-e,.aq-dr-e:hover,.aq-dr-e:active,.aq-dr-e:focus,.aq-dr-e.on{color:#1565C0!important}
.aq-dr-m,.aq-dr-m:hover,.aq-dr-m:active,.aq-dr-m:focus,.aq-dr-m.on{color:#616161!important}
.aq-dr-h,.aq-dr-h:hover,.aq-dr-h:active,.aq-dr-h:focus,.aq-dr-h.on{color:#B45309!important}
.aq-dr-hv,.aq-dr-hv:hover,.aq-dr-hv:active,.aq-dr-hv:focus,.aq-dr-hv.on{color:#B71C1C!important}
.aq-ideas-cnt-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:9px 11px 11px}
.aq-ideas-co{height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;cursor:pointer;border:1.5px solid #E5E7EB;background:#fff;color:#4B5563;transition:all .12s;font-family:var(--ff)}
.aq-ideas-co:hover:not(.on){border-color:#CBD5E1;color:#374151}
.aq-ideas-co:active:not(.on){opacity:.8}
.aq-ideas-co.on{background:#14B8A6;color:#fff;border-color:#14B8A6}
/* إلغاء focus ring للمتصفح (يظهر برتقالي أو أزرق) */
.aq-ideas-sw-btn:focus,.aq-ideas-co:focus,.aq-ideas-dr:focus,
.aq-ideas-start-btn:focus,.aq-ideas-reset-btn:focus,.aq-ideas-dd-btn:focus,
.aq-ideas-tog:focus{outline:none}
/* Bottom row */
.aq-ideas-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid #F3F4F6}
.aq-ideas-bottom-btns{display:flex;align-items:center;gap:8px}
.aq-ideas-reset-btn{display:flex;align-items:center;gap:5px;padding:9px 14px;border-radius:10px;border:1.5px solid #E5E7EB;background:#fff;color:#6B7280;font-size:13px;font-weight:500;font-family:var(--ff);cursor:pointer;transition:all .14s}
.aq-ideas-reset-btn:hover{border-color:#9CA3AF;color:#374151;background:#F3F4F6}
.aq-ideas-reset-btn:hover i{transform:rotate(180deg)}
.aq-ideas-reset-btn i{font-size:14px;transition:transform .4s ease}
.aq-ideas-start-btn{display:flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;border:2px solid #14B8A6;background:linear-gradient(160deg,#fff 0%,#F0FDFC 100%);color:#0D9488;font-size:15px;font-weight:700;font-family:var(--ff);cursor:pointer;box-shadow:0 4px 8px rgba(14,184,166,.14),0 1px 3px rgba(14,184,166,.08),inset 0 1px 0 rgba(255,255,255,.9);transition:all .15s}
.aq-ideas-start-btn i{font-size:15px}
.aq-ideas-start-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(13,148,136,.15)}
.aq-ideas-start-btn:active{transform:translateY(0);box-shadow:0 1px 3px rgba(13,148,136,.08)}
.aq-ideas-start-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.aq-ideas-time-ctrl{display:flex;align-items:center;gap:8px}
.aq-ideas-tog{width:38px;height:20px;border-radius:10px;background:#D1D5DB;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.aq-ideas-tog::after{content:'';width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;right:2px;transition:right .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.aq-ideas-tog.on{background:#14B8A6}
.aq-ideas-tog.on::after{right:20px}
.aq-ideas-time-main{font-size:14px;font-weight:500;color:#374151;white-space:nowrap}
.aq-ideas-time-sub{font-size:12px;color:#9CA3AF;white-space:nowrap}
@media(max-width:580px){
  .aq-ideas-settings{flex-direction:column}
  .aq-ideas-sw-btn{padding:8px 18px}
  .aq-ideas-bottom{flex-direction:column-reverse;gap:10px;align-items:stretch}
  .aq-ideas-start-btn{justify-content:center}
  .aq-ideas-time-ctrl{justify-content:center}
}
  .aq-id-sec{grid-template-columns:1fr 1fr}
}

/****************************** الإحصائيات الكاملة ******************************/

.aq-stats-wrap{background:var(--gray);border-radius:var(--rad);padding:14px 16px;border:1px solid var(--border)}
.aq-stats-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-align:center;margin-bottom:10px;text-transform:uppercase}
.aq-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.aq-sc{background:#fff;border-radius:var(--rad-sm);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--border);transition:transform .15s,box-shadow .15s;cursor:default}
.aq-sc:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.aq-sc-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:2px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.aq-sc:hover .aq-sc-ico{transform:scale(1.15) rotate(-5deg)}
.aq-sc-n{font-size:20px;font-weight:700;line-height:1}
.aq-sc-l{font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.aq-sc-seen .aq-sc-ico{background:#EEF7FF;color:#0C447C}.aq-sc-seen .aq-sc-n{color:#0C447C}
.aq-sc-ok .aq-sc-ico{background:#F0FDF4;color:#16a34a}.aq-sc-ok .aq-sc-n{color:#16a34a}
.aq-sc-err .aq-sc-ico{background:#FEF2F2;color:#dc2626}.aq-sc-err .aq-sc-n{color:#dc2626}
.aq-sc-pts .aq-sc-ico{background:var(--gold-l);color:var(--gold-d)}.aq-sc-pts .aq-sc-n{color:var(--gold-d)}

/****************************** Watermark ******************************/

.aq-video-wm{position:absolute;color:rgba(255,255,255,.18);font-size:13px;font-weight:600;pointer-events:none;user-select:none;z-index:99;white-space:nowrap;transition:left 1.5s ease,top 1.5s ease;text-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:1px}

/****************************** ريسبونسف ******************************/

@media(max-width:480px){
  .aq-b1-row,.aq-b3-row{flex-wrap:wrap}
  .aq-s-box{min-width:100%}
  .aq-stats-grid{grid-template-columns:repeat(2,1fr)}
  .aq-chip{flex:1 1 calc(50% - 4px)}
  .aq-id-settings{grid-template-columns:1fr}
  .aq-id-sec{grid-template-columns:1fr 1fr}
  .aq-pts-top{grid-template-columns:1fr}
  .aq-pts-prog-body{flex-direction:column-reverse;align-items:flex-start}
  .aq-pts-stats-2col{grid-template-columns:1fr}
  .aq-pts-formula{flex-wrap:wrap}
  .aq-pts-formula-sep{display:none}
}
@media(min-width:481px) and (max-width:680px){
  .aq-chip{flex:1 1 calc(33% - 4px)}
  .aq-stats-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════
   aq-b1 — التخطيط الجديد: عدسة + toggle + بحث + أقسام
   ═══════════════════════════════════════════════ */

/* أيقونة العدسة — تحل محل .aq-b1-ico */
.aq-b1-lens {
  width: 34px;
  height: 34px;
  border-radius: var(--rad-sm);
  background: var(--green-l);
  color: var(--green-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.aq-b1:hover .aq-b1-lens { transform: rotate(-10deg) scale(1.1); }

/* إزالة أيقونة البحث الداخلية من aq-s-box (كانت قبل حقل النص) */
.aq-b1 .aq-s-box i { display: none; }

/* زر الأقسام */
.aq-sec-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  padding: 8px 12px 8px 60px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  font-family: var(--ff);
  white-space: nowrap;
}
.aq-sec-btn:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(29,158,117,.08);
}
.aq-sec-btn i { font-size: 12px; color: #bbb; transition: transform .2s; }

/* قائمة الأقسام المنسدلة */
.aq-sec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  margin-top: 6px;
  box-shadow: var(--shadow);
}
.aq-sec-item {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gray);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.aq-sec-item:hover {
  background: var(--green-l);
  border-color: var(--green-b);
  color: var(--green-d);
}
.aq-sec-empty {
  font-size: 12px;
  color: #aaa;
  padding: 4px 8px;
}

/* .aq-q-stat و.aq-stat-badges و.aq-sb* حُذفت بالكامل — كانت الإحصائيات
   القديمة (عمود عائم position:absolute يتعارض مع Action Rail). استُبدلت
   نهائيًا بالفوتر الموحّد (.aq-card-footer) أسفل هذا الملف — راجع
   aq_render_question_footer() في aq-question-card.php. */

/* .aq-qs-label / .aq-qs-ok / .aq-qs-err حُذفت — ميتة تمامًا، بقايا من نفس
   نظام الإحصائيات القديم. لا يوجد أي كود يُخرجها. */

/* ─── خيارات السؤال اللفظي — عرض فقط، لا تفاعل ─── */
.aq-q-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 7px;
  pointer-events: none;   /* يمنع أي تفاعل */
  user-select: none;
}
.aq-q-choice {
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  color: #555;
  direction: rtl;
  line-height: 1.4;
}
.aq-ch-lbl {
  font-weight: 700;
  color: var(--green-d);
  margin-left: 3px;
}

/* ─── 1. بطاقة الكمي — هيكل جديد ───
   flex-direction:column وgap:0 أصبحا في القاعدة الأساسية .aq-q-card
   (موحّدة لكل الأنواع الآن) — لا تكرارهما هنا. الباقي (padding:0 لجعل
   الهيدر ملاصقًا لحافة البطاقة، position/margin) خصوصية تخطيطية فعلية
   للكمي فقط. */
.aq-q-card-km {
  padding: 0;
  overflow: visible;
  position: relative;
  margin-bottom: 32px;
}
.aq-km-img {
  width: 100%;
  background: #f8f9fa;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  direction: rtl;
  text-align: center;
  max-height: 260px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 6px 12px 6px 4px;
  text-align: right; /* إزاحة يمين */
  direction: rtl;
}
.aq-km-img img {
  width: auto !important;
  max-width: 100% !important;
  max-width: 92% !important;
  max-height: 240px !important;
  height: auto !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 4px;
}
.aq-km-img p, .aq-km-img figcaption, .aq-km-img span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
/* .aq-card-header (وaq-q-num / aq-q-path داخله) انتقل بالكامل إلى
   assets/css/aq-question-header.css — مكوّن الهيدر الموحد. لا تُعِد تعريفه هنا. */
/* ── Content row: محتوى + stats عمود يسار ─────────── */
.aq-card-content {
  display: flex;
  align-items: stretch;
  direction: rtl;
}

/* الحد الأدنى الموحّد لمنطقة السؤال — هذا هو الإصلاح الجذري لمشكلة
   "الفوتر يتحرك حسب طول السؤال": الكمي كان يعتمد فقط على max-height
   (سقف أعلى للصورة، بلا أي أرضية دنيا)، واللفظي كان له min-height
   مختلف (200px) لكن على مستوى البطاقة كلها وليس منطقة السؤال تحديدًا،
   فكانا يتصرفان بمنطقين مختلفين تمامًا. القيمة هنا موحّدة، وعلى الصنف
   المشترك الفعلي بين الكمي واللفظي (.aq-card-body تحمله كلتا البطاقتين
   دائمًا) — سؤال قصير (لفظي أو كمي بلا صورة) يترك مساحة بيضاء طبيعية
   حتى هذا الحد قبل الفوتر؛ سؤال أطول (صورة كبيرة، نص طويل) يتمدد فوقه
   بلا أي قيد. --aq-body-min-h متغيّر واحد قابل للتعديل مستقبليًا من
   مكان واحد فقط، بدل رقم متكرر أو مبعثر في أكثر من قاعدة. */
:root { --aq-body-min-h: 200px; }
.aq-card-body {
  flex: 1;
  direction: rtl;
  min-width: 0;
  min-height: var(--aq-body-min-h);
  box-sizing: border-box;
}

/* تصحيح تخطيطي موحّد (ليس خاصًا بالكمي): أي محتوى داخل aq-card-content
   يجب أن يشارك في flex بشكل صحيح — width:100% أو flex-shrink:0 الموروثة
   من تنسيقات محتوى قديمة (مثل .aq-km-img) تجبره على المطالبة بعرض الصف
   بالكامل، فلا تُترك مساحة محسوبة لـ Action Rail فيظهر بموضع خاطئ. هذه
   القاعدة تنطبق على أي عنصر body مستقبلي بنفس الحاوية المشتركة، لا حلًا
   خاصًا بالكمي وحده. */
.aq-card-content > .aq-card-body {
  width: auto;
  flex-shrink: 1;
}

/* ── Footer — عنصر حقيقي في نهاية عمود البطاقة (Header → صف المحتوى →
   Footer)، وليس عائمًا. المصدر الوحيد: aq_render_question_footer().
   3 بطاقات متجاورة بنفس القياس والارتفاع: إحصائيات عامة / إحصائياتك /
   إتقان السؤال.

   استجابة حقيقية عبر Container Query على عرض البطاقة نفسها (.aq-q-card)
   — وليس عرض الشاشة الكاملة عبر Media Query: هذا المكوّن يُستخدم داخل
   حاويات مختلفة العرض (نافذة بحث عريضة، عمود جانبي ضيق، شاشة جوال)،
   فالعامل الحقيقي هو المساحة المتاحة للبطاقة لا حجم الشاشة. مع احتياط
   Media Query للمتصفحات القديمة التي لا تدعم Container Queries بعد.
   افتراضيًا (مساحة كافية): سطر واحد لكل بطاقة. عند الضيق: عمودان. ── */
.aq-q-card { container-type: inline-size; }

/* ── Footer الموحّد — بطاقة واحدة بعرض كامل، ثلاثة أقسام واضحة (عامة/
   شخصية/إتقان)، أيقونات دائرية كبيرة، فواصل رأسية، بادج علوي — مطابقة
   للتصميم المرجعي المعتمد. ترتيب RTL: عامة (يمين) ← إحصائياتك (وسط) ←
   إتقان (يسار). ── */
/* ── Footer الموحّد — بطاقة واحدة بعرض كامل، ثلاثة أقسام متساوية
   العرض (عامة/شخصية/إتقان)، أيقونات دائرية كبيرة، فواصل رأسية، وبادج
   علوي في صفّ حقيقي منفصل (لا position:absolute — كان هذا سبب التداخل
   مع الأيقونات). Responsive حقيقي عبر Grid: صف واحد على سطح المكتب،
   يتقلّص العمود تلقائيًا csm عند الحاجة، ثم يتكدّس بالكامل كبطاقات
   صغيرة منفصلة على الجوال — بلا أي تصغير خط أو تراكب في كل الحالات. ── */
/* ═══════════════════════════════════════════════════════════════
 * Footer الموحّد — إعادة صقل بصري شاملة (Visual Polish)
 * الأقسام الثلاثة تُعامَل كوحدة واحدة متناسقة: نفس منطق الألوان
 * (تدرّج + هالة خافتة خلف كل أيقونة)، نفس الإيقاع الطباعي، نفس سلوك
 * الحركة (transition) على كل عنصر تفاعلي. لا تعبئة كاملة بلون صلب في
 * أي حالة hover — فقط ظل خفيف وارتفاع طفيف، بلا أي تأثير برتقالي أو
 * لون دخيل من القالب.
 * ═══════════════════════════════════════════════════════════════ */

.aq-card-footer {
  position: relative;
  background: linear-gradient(180deg, #FCFDFD, #F4F6F7);
  border: 1px solid #E8EAED;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  padding: 14px 16px 12px;
  margin: 0;
  direction: rtl;
  box-sizing: border-box;
  overflow: hidden;
}
/* شريط لوني علوي رفيع — توقيع بصري هادئ يميّز القسم فورًا دون أي نص أو
   عنصر إضافي، ويربط ألوان الأقسام الثلاثة معًا بصريًا من أول لحظة. */
.aq-card-footer::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #2ABFAB, #8B7CF6, #F5A623);
}

/* عنوان حقيقي بارز — وليس بادجًا صغيرًا. صفّ كامل العرض بحدّ سفلي فاصل،
   يُفهَم فورًا أنه عنوان لقسم مستقل بأكمله. */
.aq-footer-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid #E8EAED;
  font-size: 13.5px;
  font-weight: 800;
  color: #2A3540;
}
.aq-footer-header i { font-size: 14px; color: var(--green-d, #0A5C42); }

.aq-footer-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* كل قسم: عنصر واحد متناسق — أيقونة بهالة خافتة + نص. transition موحّد
   يطبَّق على كل قسم لإحساس حركي متّسق كوحدة واحدة. */
.aq-footer-section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 14px;
  margin: 0;
  background: none;
  border: none;
  border-left: 1px solid #E4E7EB;
  border-radius: 10px;
  font-family: inherit;
  cursor: default;
  text-align: right;
  box-sizing: border-box;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.aq-footer-sections > .aq-footer-section:first-child { padding-right: 0; }
.aq-footer-sections > .aq-footer-section:last-child  { border-left: none; padding-left: 0; }

/* هالة خافتة بلون القسم خلف الأيقونة — لمسة عمق بسيطة بدل أيقونة عائمة
   بلا سياق، دون أي زخرفة زائدة. */
.aq-footer-section-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 0 0 5px var(--aq-icon-halo, transparent);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  animation: aq-icon-idle 5s ease-in-out infinite;
}
.aq-footer-icon-general  { background: linear-gradient(135deg, #2ABFAB, #0F9E86); --aq-icon-halo: rgba(42,191,171,.12); animation-delay: 0s;   }
.aq-footer-icon-personal { background: linear-gradient(135deg, #8B7CF6, #6D5BD0); --aq-icon-halo: rgba(139,124,246,.12); animation-delay: .6s; }
.aq-footer-icon-mastery  { background: linear-gradient(135deg, #F5A623, #E8842A); --aq-icon-halo: rgba(232,132,42,.12); animation-delay: 1.2s; }

/* اهتزاز خفيف جدًا وبطيء في حالة السكون — دورة ٥ ثوانٍ، سعة درجتين
   فقط، على transform حصرًا (GPU، لا تكلفة على الأداء إطلاقًا). تأخير
   مختلف لكل أيقونة (أعلاه) حتى لا تتحرك الثلاث معًا كأنها كتلة واحدة. */
@keyframes aq-icon-idle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(2deg); }
}

/* تأثير ثلاثي الأبعاد عند التمرير/التركيز — perspective + rotateX/Y
   حقيقي (وليس مجرد scale)، بحركة ناعمة ترتد قليلًا (cubic-bezier مرن).
   يوقف الاهتزاز التلقائي مؤقتًا أثناء التفاعل حتى لا يتعارض الحركتان. */
.aq-footer-section:hover .aq-footer-section-icon,
.aq-mastery-toggle:focus-visible .aq-footer-section-icon {
  animation-play-state: paused;
  transform: perspective(300px) rotateY(-14deg) rotateX(8deg) scale(1.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.22), 0 0 0 6px var(--aq-icon-halo, transparent);
}
/* عند الضغط الفعلي (لمفتاح الإتقان تحديدًا، العنصر الوحيد القابل للنقر):
   ارتداد بسيط للداخل — إحساس "زر حقيقي" لا مجرد صورة. */
.aq-mastery-toggle:active .aq-footer-section-icon {
  transform: perspective(300px) rotateY(-6deg) rotateX(3deg) scale(1.04);
  transition-duration: .1s;
}

/* من يفضّل تقليل الحركة (إعدادات النظام) — نُلغي كل حركة تلقائية
   ونُبقي فقط تحوّلًا بسيطًا عند التمرير، احترامًا لتفضيله. */
@media (prefers-reduced-motion: reduce) {
  .aq-footer-section-icon { animation: none; }
  .aq-footer-section:hover .aq-footer-section-icon,
  .aq-mastery-toggle:focus-visible .aq-footer-section-icon,
  .aq-mastery-toggle:active .aq-footer-section-icon {
    transform: none;
  }
}

.aq-footer-section-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aq-footer-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #55606B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aq-footer-values {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.aq-footer-value {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--ff);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aq-footer-value-lbl {
  font-size: 10.5px;
  font-weight: 600;
  opacity: .8;
}
.aq-footer-value-ok  { color: var(--green-d, #0A5C42); }
.aq-footer-value-err { color: #C0392B; }

/* ── "الأسئلة المتقنة" — عنصر أساسي في البطاقة، لا تفصيل صغير. مفتاح
   اختيار حقيقي (26px) بعلامة صح واضحة + كلمة "متقن" بنفس وزن الأرقام،
   في طرف القسم — منطقة الضغط تبقى القسم كاملاً (زر واحد كبير). ── */
.aq-mastery-progress {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #E8842A;
  line-height: 1;
  white-space: nowrap;
}

.aq-mastery-toggle { cursor: pointer; }

.aq-mastery-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.aq-mastery-check {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid #D8DCE1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.aq-mastery-check i {
  font-size: 15px;
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .18s, transform .18s;
}
.aq-mastery-status-label {
  font-size: 13px;
  font-weight: 800;
  color: #9AA3AC;
  white-space: nowrap;
  transition: color .18s;
}
.aq-mastery-toggle.is-mastered .aq-mastery-check {
  background: var(--green-d, #0A5C42);
  border-color: var(--green-d, #0A5C42);
}
.aq-mastery-toggle.is-mastered .aq-mastery-check i {
  opacity: 1;
  transform: scale(1);
}
.aq-mastery-toggle.is-mastered .aq-mastery-status-label { color: var(--green-d, #0A5C42); }
.aq-mastery-toggle.is-mastered .aq-mastery-progress { color: var(--green-d, #0A5C42); }

/* Hover هادئ — خلفية شفافة خفيفة جدًا + ظل + ارتفاع طفيف. لا لون صلب
   مطلقًا. background مضبوطة صراحةً (لا فقط box-shadow) — بلا هذا
   التحديد الصريح يسقط الزر على تنسيق القالب الافتراضي (البرتقالي
   المُبلَّغ عنه سابقًا). كما نُبرز مفتاح الاختيار قليلاً عند التمرير. */
.aq-mastery-toggle:hover,
.aq-mastery-toggle:focus-visible {
  background: rgba(0,0,0,.025);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(-1px);
  outline: none;
}
.aq-mastery-toggle:hover .aq-mastery-check:not([class*="is-mastered"]) { border-color: #B7BEC6; }
.aq-mastery-toggle:active { transform: translateY(0); }
.aq-mastery-toggle:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── تجاوب حقيقي بثلاث مراحل — بلا أي تصغير خط أو تراكب في أي منها ──
   ١) سطح المكتب: صف واحد، ثلاثة أعمدة متساوية.
   ٢) آيباد/شاشات متوسطة (٦٠٠–٨٦٠px): نفس الصف، أيقونة وحشو أصغر.
   ٣) الجوال (أقل من ٦٠٠px): بطاقات صغيرة منفصلة، عمود واحد. ── */
@container (max-width: 860px) {
  .aq-footer-section-icon { width: 32px; height: 32px; font-size: 15px; }
  .aq-footer-section { padding: 4px 10px; gap: 8px; }
  .aq-mastery-check { width: 24px; height: 24px; }
}
@container (max-width: 600px) {
  .aq-card-footer { padding: 12px 10px 10px; }
  .aq-footer-header { justify-content: center; }
  .aq-footer-sections { grid-template-columns: 1fr; gap: 8px; }
  .aq-footer-section {
    border-left: none !important;
    background: #fff;
    border: 1px solid #E8EAED;
    border-radius: 10px;
    padding: 10px 14px !important;
  }
  .aq-footer-section-icon { width: 36px; height: 36px; font-size: 16px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 860px) {
    .aq-footer-section-icon { width: 32px; height: 32px; font-size: 15px; }
    .aq-footer-section { padding: 4px 10px; gap: 8px; }
    .aq-mastery-check { width: 24px; height: 24px; }
  }
  @media (max-width: 600px) {
    .aq-card-footer { padding: 12px 10px 10px; }
    .aq-footer-header { justify-content: center; }
    .aq-footer-sections { grid-template-columns: 1fr; gap: 8px; }
    .aq-footer-section {
      border-left: none !important;
      background: #fff;
      border: 1px solid #E8EAED;
      border-radius: 10px;
      padding: 10px 14px !important;
    }
    .aq-footer-section-icon { width: 36px; height: 36px; font-size: 16px; }
  }
}




/* ══ بطاقة اللفظي — نفس توزيع الكمي ══════════════════ */
/* بطاقة اللفظي: padding:0 على مستوى البطاقة (نفس الكمي) — الهيدر ملاصق
   لحافة البطاقة، والمسافة الداخلية الفعلية تُضبط داخل .aq-lf-right نفسها. */
.aq-q-card:not(.aq-q-card-km) {
  padding: 0;
  margin-bottom: 36px;
  overflow: visible;
}

.aq-lf-right {
  direction: rtl;
  padding: 10px 14px;
}
/* .aq-lf-right .aq-q-meta حُذفت — بعد التوحيد لم يعد .aq-q-meta ابنًا مباشرًا
   لـ .aq-lf-right (أصبح داخل .aq-card-header)، فلا يوجد ما يطابق هذا الـselector. */
.aq-lf-right .aq-q-lf-text { width: 100%; direction: rtl; }
.aq-lf-right .aq-q-lf-text p,
.aq-lf-right .aq-q-lf-text h1,
.aq-lf-right .aq-q-lf-text h2,
.aq-lf-right .aq-q-lf-text h3,
.aq-lf-right .aq-q-lf-text h4,
.aq-lf-right .aq-q-lf-text h5,
.aq-lf-right .aq-q-lf-text h6 {
  text-align: right !important;
  direction: rtl !important;
  margin: 0 0 4px !important;
}
.aq-lf-right .aq-q-choices { width: 100%; }

/* التعطيل البصري المؤقت للإحصائيات القديمة (.aq-stat-badges) لم يعد
   مطلوبًا — الأصناف نفسها حُذفت نهائيًا أعلى هذا الملف، واستُبدلت بالفوتر
   الموحّد الحقيقي (.aq-card-footer). كما كان مخططًا له بالضبط. */
/* .aq-km-foot / .aq-km-actions / .aq-lf-actions حُذفت — ميتة تمامًا، لا
   يوجد أي كود يُخرجها. */
/* بادج القسم .aq-q-sect انتقل إلى assets/css/aq-question-header.css */
/* محتوى اللفظي */
.aq-q-lf-text {
  font-size: 13px; line-height: 1.6;
  direction: rtl; color: var(--text);
  margin: 4px 0;
}
.aq-q-lf-text p { margin: 0 0 4px; }
.aq-q-lf-text img { display: none; }

/* ─── 3. خيارات اللفظي — تحسين الوضوح ─── */
.aq-q-choices { gap: 6px; margin-top: 9px; }
.aq-q-choice {
  background: #f4f6f8;
  border: 1.5px solid #d0d7de;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #333;
  line-height: 1.5;
}
.aq-ch-lbl { color: #2ABFAB; font-size: 11px; }

/* ─── 4+5. الشريط العلوي للنتائج (شريط واحد) ─── */
.aq-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  margin-bottom: 8px;
  direction: rtl;
}
/* يمين: اختبر + ابدأ + X مختار */
.aq-tb-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* يسار: عدد النتائج + pagination */
.aq-tb-nav { display: flex; align-items: center; gap: 6px; }
.aq-tb-cnt { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.aq-tb-page { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.aq-tb-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 11px; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); cursor: pointer;
  font-family: var(--ff); transition: border-color .15s, background .15s;
  white-space: nowrap; overflow: visible;
}
#aq-test-page { min-width: 120px; justify-content: center; }
.aq-tb-btn:hover:not(:disabled) { border-color: var(--green); background: var(--green-l); color: var(--text); }
.aq-tb-btn:disabled { opacity: .45; cursor: default; }
.aq-tb-start { background: var(--green); color: #fff; border-color: var(--green); }
.aq-tb-start:hover:not(:disabled) { background: var(--green-d); border-color: var(--green-d); }
.aq-tb-start:disabled { background: #ccc; border-color: #ccc; }

/* ─── Modal الاختبار ─── */
#aq-quiz-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
}
.aq-qm-wrap {
  position: relative; width: 96vw; height: 92vh;
  max-width: 1100px; background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.aq-qm-close {
  position: absolute; top: 10px; left: 36px; z-index: 2;
  width: 34px; height: 34px; border-radius: 6px;
  background: var(--green); color: #fff; border: none;
  cursor: pointer; font-size: 15px; display: flex;
  align-items: center; justify-content: center;
  transition: background .15s; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.aq-qm-close:hover { background: var(--green-d); }
.aq-qm-frame { width: 100%; height: 100%; border: none; }

/* ── Responsive: الجوال ──────────────────────────────── */
@media (max-width: 640px) {
  .aq-qm-wrap {
    width: 100vw !important;
    height: 100dvh !important; /* dynamic viewport height للجوال */
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #aq-quiz-modal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .aq-qm-close {
    top: 6px !important;
    left: 8px !important;
    width: 30px !important;
    height: 30px !important;
  }
}

/* ── Responsive: التابلت ─────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .aq-qm-wrap {
    width: 98vw !important;
    height: 95vh !important;
    max-width: 100% !important;
  }
}

/* ── جاني badge — تصميم ختم رسمي ───────────────────── */
.aq-jani-badge {
  position: absolute;
  bottom: -14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 30px;
  border-radius: 50px;
  border: 2px solid #C4B5FD;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  box-shadow: 0 3px 10px rgba(124,58,237,.35);
  cursor: pointer;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 12px;
  z-index: 10;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  direction: ltr;
  pointer-events: all;
}
.aq-jani-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124,58,237,.45);
}
.aq-jani-icon {
  width: 30px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15);
  border-left: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.aq-jani-lbl {
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}
.aq-jani-cnt {
  background: rgba(255,255,255,.22);
  color: #fff;
  padding: 0 14px;
  height: 100%;
  display: flex; align-items: center;
  font-size: 12px; font-weight: 800;
  min-width: 26px; justify-content: center;
  border-right: 1px solid rgba(255,255,255,.2);
}

/* ── مودال تأكيد جاني ───────────────────────────────── */
#aq-jani-modal {
  position: fixed; inset: 0; z-index: 999999999;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.aq-jm-box {
  background: #fff; border-radius: 14px;
  padding: 28px 24px; max-width: 360px; width: 90%;
  text-align: center; direction: rtl;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.aq-jm-box p {
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  margin: 0 0 20px; line-height: 1.6;
}
.aq-jm-btns { display: flex; gap: 10px; justify-content: center; }
.aq-jm-yes {
  background: #9C27B0; color: #fff;
  border: none; border-radius: 50px;
  padding: 9px 22px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--ff);
  transition: background .15s;
}
.aq-jm-yes:hover { background: #7B1FA2; }
.aq-jm-no {
  background: #f5f5f5; color: #555;
  border: none; border-radius: 50px;
  padding: 9px 22px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--ff);
}
.aq-jm-no:hover { background: #e0e0e0; }

/* .aq-q-card — position relative للجاني */
.aq-q-card { position: relative; margin-bottom: 32px; overflow: visible; }
.aq-jani-voted {
  background: linear-gradient(135deg, #6D28D9, #5B21B6);
  opacity: .75;
  cursor: default;
}
.aq-jani-voted:hover { transform: none; box-shadow: 0 3px 10px rgba(124,58,237,.35); }

/* ── رسالة جاني المؤقتة (سبق التصويت) ─── */
.aq-jani-msg {
  position: absolute; bottom: 28px; left: 0;
  background: #4C1D95; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap; z-index: 20;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}