/* * 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-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; } .aq-pts-journey-hint { display: none; } /* ── 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-pts-journey-hint { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; animation: aq-pts-hint-nudge 1.6s ease-in-out infinite; } } @keyframes aq-pts-hint-nudge { 0%, 100% { opacity: .6; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-4px); } } /****************************** بلوك ٣ — الأقسام ******************************/ .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 — بلوك البحث (الهيدر الآن مركز التحكم الموحّد؛ .aq-s-res/.aq-q-list ما زالا مستخدَمين لعرض النتائج) ═══════════════════════════════════════════════ */ /* .aq-b1-lens وزر/قائمة الأقسام (.aq-sec-btn/.aq-sec-list/.aq-sec-item/ .aq-sec-empty) حُذفت بالكامل — كانت جزءًا من هيدر البحث القديم الذي استُبدل بمركز التحكم الموحّد، ولم تعد مستخدَمة في أي مكان آخر. */ /* .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 عند الحاجة، ثم يتكدّس بالكامل كبطاقات صغيرة منفصلة على الجوال — بلا أي تصغير خط أو تراكب في كل الحالات. ── */ /* ═══════════════════════════════════════════════════════════════ * صندوق إحصائيات السؤال — إعادة تصميم المرحلة الثالثة (v3.12.61) * * فلسفة التصميم: «شريط معلومات مساعد» لا ينافس السؤال بصريًا. * 1) الارتفاع أدنى ما يمكن: حشوات صغيرة، صفوف أفقية مضغوطة، لا فراغات. * 2) اللون للحواف والخطوط فقط: أيقونات outline بحدّ دائري ملوّن رفيع * وداخل أبيض — لا تعبئات ولا تدرجات ولا خط علوي ملوّن. * 3) إشارة لونية واحدة في الصعوبة: كل الوجوه رمادية، والمتصدّر وحده * يحمل لونه — العين تلتقط إجماع الطلاب بلمحة (نمط single-accent * المعتمد في أنظمة Linear/Stripe/Duolingo). * 4) حياة بلا ضجيج: نبضة رقم عند التحديث، اهتزازة وجه عند التمرير، * قفزة فرح عند التصويت — كلها على transform (GPU) وتُعطَّل تلقائيًا * لمن يفضّل تقليل الحركة. * 5) الأخضر للصح والأحمر للخطأ فقط — بقية النصوص رمادي داكن. * ═══════════════════════════════════════════════════════════════ */ .aq-card-footer { position: relative; background: #FCFDFD; border: 1px solid #E8EAED; border-radius: 12px; padding: 8px 12px 7px; margin: 0; direction: rtl; box-sizing: border-box; overflow: hidden; } /* العنوان — همسة: رمادي صغير وأيقونة outline بلا تعبئة، RTL أيقونة ثم نص */ .aq-footer-header { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: #8A97A3; } .aq-footer-header i { font-size: 12.5px; color: #8A97A3; } /* ── صفّ الأقسام الثلاثة — سطر واحد مضغوط ── */ .aq-footer-sections { display: flex; align-items: stretch; } .aq-footer-section { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 10px; margin: 0; background: none; border: none; border-left: 1px solid #EDF0F2; font-family: inherit; cursor: default; text-align: right; box-sizing: border-box; } .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; } /* الأيقونة: دائرة outline — حدّ رفيع بلون القسم، داخل أبيض، رمز بنفس اللون. اللون على الحواف والخطوط حصرًا. */ .aq-footer-section-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: #fff; border: 1.5px solid currentColor; color: var(--aq-sec-c, #8A97A3); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; } .aq-footer-icon-general { --aq-sec-c: #2ABFAB; } .aq-footer-icon-personal { --aq-sec-c: #8B7CF6; } .aq-footer-icon-mastery { --aq-sec-c: #F5A623; } /* حياة عند التمرير فقط — ميلان وارتفاع خفيف وهالة بلون القسم ٪12 */ .aq-footer-section:hover .aq-footer-section-icon, .aq-mastery-toggle:focus-visible .aq-footer-section-icon { transform: rotate(-6deg) scale(1.1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aq-sec-c, #8A97A3) 12%, transparent); } .aq-mastery-toggle:active .aq-footer-section-icon { transform: rotate(-3deg) scale(1.02); transition-duration: .1s; } /* بديل آمن للمتصفحات دون color-mix: هالة رمادية شفافة */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .aq-footer-section:hover .aq-footer-section-icon, .aq-mastery-toggle:focus-visible .aq-footer-section-icon { box-shadow: 0 0 0 4px rgba(0,0,0,.06); } } /* الجسم: العنوان والأرقام في سطر واحد — نصف الارتفاع السابق */ .aq-footer-section-body { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .aq-footer-section-title { font-size: 11px; font-weight: 700; color: #55606B; white-space: nowrap; } .aq-footer-values { display: flex; align-items: baseline; gap: 8px; } .aq-footer-value { font-size: 13px; font-weight: 800; line-height: 1; font-family: var(--ff); font-variant-numeric: tabular-nums; white-space: nowrap; animation: aq-value-pop .4s cubic-bezier(.34,1.56,.64,1) both; } .aq-footer-value-lbl { font-size: 10px; font-weight: 600; opacity: .75; } /* الأخضر للصح والأحمر للخطأ — الاستثناءان اللونيان الوحيدان في النصوص */ .aq-footer-value-ok { color: var(--green-d, #0A5C42); } .aq-footer-value-err { color: #C0392B; } /* نبضة الرقم — تعمل تلقائيًا عند كل إدراج للفوتر، أي مع كل تحديث فوري بعد «تحقق» في الاختبار الحيّ: الرقم الجديد "يقفز" فتلتقطه العين. */ @keyframes aq-value-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } /* ── قسم الإتقان: مفتاح الاختيار — مضغوط ── */ .aq-mastery-progress { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #55606B; line-height: 1; white-space: nowrap; } .aq-mastery-toggle { cursor: pointer; } .aq-mastery-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .aq-mastery-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px 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: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .18s, transform .18s; } .aq-mastery-status-label { font-size: 12px; font-weight: 700; 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 صريحة كي لا يسقط على برتقالي القالب */ .aq-mastery-toggle:hover, .aq-mastery-toggle:focus-visible { background: rgba(0,0,0,.02); outline: none; } .aq-mastery-toggle:hover .aq-mastery-check { border-color: #B7BEC6; } .aq-mastery-toggle:disabled { opacity: .6; cursor: not-allowed; } /* ═══ شريط «مستوى الصعوبة» ═══════════════════════════════════════ صفّ أفقي واحد: تسمية صغيرة يمينًا ثم خمس حبّات pills — أقرب لشريط معلومات منه لخمس بطاقات. الوجوه كلها رمادية؛ المتصدّر وحده ملوّن. */ .aq-diff-block { margin-top: 7px; padding-top: 7px; border-top: 1px solid #F0F2F4; } .aq-diff-row { display: flex; align-items: center; gap: 10px; } .aq-diff-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #8A97A3; white-space: nowrap; flex-shrink: 0; } .aq-diff-label i { font-size: 13px; } .aq-diff-levels { display: flex; flex: 1; gap: 6px; min-width: 0; } /* الحبّة: وجه + اسم + عدد في سطر واحد — حدود رمادية خفيفة، داخل أبيض */ .aq-diff-level { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 4px 6px; background: #fff; border: 1px solid #E4E8EB; border-radius: 999px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .12s; } .aq-diff-level:hover { transform: translateY(-1px); } .aq-diff-level:active { transform: translateY(0); } /* ألوان المستويات — عبر متغير محصّن لا تطاله قواعد button في القالب */ .aq-diff-l1 { --aq-diff-c: #16A34A; } /* سهل جدًا — أخضر */ .aq-diff-l2 { --aq-diff-c: #16A34A; } /* سهل — أخضر */ .aq-diff-l3 { --aq-diff-c: #F59E0B; } /* متوسط — برتقالي */ .aq-diff-l4 { --aq-diff-c: #C0392B; } /* صعب — أحمر هادئ */ .aq-diff-l5 { --aq-diff-c: #8F1D1D; } /* صعب جدًا — أحمر أغمق */ /* الوجه: رمادي افتراضيًا — outline خالص (خط Tabler)، داخله أبيض */ .aq-diff-face { font-size: 16px; line-height: 1; color: #A6B0B9 !important; transition: color .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1); } /* المتصدّر وحده يلبس لونه — مع تكبير همس يعزز الإشارة */ .aq-diff-level.is-top .aq-diff-face { color: var(--aq-diff-c) !important; transform: scale(1.12); } /* حياة: اهتزازة وجه مرحة عند تمرير الماوس على أي حبّة */ .aq-diff-level:hover .aq-diff-face { transform: rotate(-12deg) scale(1.25); } .aq-diff-level.is-top:hover .aq-diff-face { transform: rotate(-12deg) scale(1.3); } /* قفزة فرح عند نجاح التصويت — تُضاف الفئة من JS وتُزال بعد انتهائها */ .aq-diff-level.aq-diff-cheer .aq-diff-face { animation: aq-diff-cheer .55s cubic-bezier(.34,1.56,.64,1); } @keyframes aq-diff-cheer { 0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(-14deg); } 65% { transform: scale(.9) rotate(6deg); } 100% { transform: scale(1); } } .aq-diff-name { font-size: 10.5px; font-weight: 700; color: #55606B !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aq-diff-count { font-size: 12px; font-weight: 800; color: #2A3540 !important; font-variant-numeric: tabular-nums; } /* تحييد أنماط القالب (BuddyBoss) على أزرار