/* ArabCMS — lesson page ([acms_lesson]). Desktop 72/28, mobile: pill tabs, sticky video, bottom bar. */

.acms-lesson { font-family: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif; direction: rtl; color: #EAF0F8; }
.acms-lesson *, .acms-lesson *::before, .acms-lesson *::after { box-sizing: border-box; }
.acms-lesson code, .acms-lesson pre, .acms-lesson .acms-term-en { direction: ltr; unicode-bidi: isolate; }

/* ---------- Header ---------- */
.acms-lesson-head { margin: 0 0 22px; }
.acms-lesson-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 14px; color: #AAB0C0; margin-bottom: 10px; }
.acms-lesson-track { color: #38B6FF; font-weight: 700; }
.acms-lesson-level { margin: 0; color: #7ED44E; background: rgba(126,212,78,.12); }
.acms-lesson-title { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.35; color: #EAF0F8; text-wrap: balance; }

/* ---------- Grid ---------- */
.acms-lesson-grid { display: grid; grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr); gap: 32px; align-items: start; }
.acms-lesson-main { min-width: 0; }
.acms-lesson-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Video ---------- */
.acms-lesson-video-wrap { margin: 0 0 18px; }
.acms-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; background: #0C1018; border: 1px solid #263042; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.acms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.acms-lesson-thumb img { width: 100%; height: auto; border-radius: 16px; border: 1px solid #263042; }

/* ---------- Tabs ---------- */
.acms-tabs { display: flex; gap: 6px; padding: 5px; background: #141924; border: 1px solid #263042; border-radius: 14px; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.acms-tabs::-webkit-scrollbar { display: none; }
.acms-tab { flex: 1 0 auto; appearance: none; border: 0; background: transparent; color: #AAB0C0; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.acms-tab:hover { color: #EAF0F8; }
.acms-tab.is-active { background: #38B6FF; color: #0C1018; box-shadow: 0 6px 18px rgba(56,182,255,.3); }
.acms-tab:focus-visible { outline: 2px solid #38B6FF; outline-offset: 2px; }
.acms-tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(240,69,117,.18); color: #F04575; font-size: 12px; display: inline-grid; place-items: center; }
.acms-tab.is-active .acms-tab-count { background: rgba(12,16,24,.18); color: #0C1018; }
.acms-panel[hidden] { display: none; }
.acms-panel { animation: acms-panel-in .3s ease both; }
@keyframes acms-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Lesson body ---------- */
.acms-lesson-body { background: #141924; border: 1px solid #263042; border-radius: 16px; padding: 26px 28px; }
.acms-lesson-body > :first-child { margin-top: 0; }
.acms-lesson-body h2 { font-size: 24px; }
.acms-lesson-body h3 { font-size: 19px; }
.acms-lesson-body ol { counter-reset: acms-step; list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-direction: column; gap: 10px; }
.acms-lesson-body ol > li { counter-increment: acms-step; position: relative; padding: 12px 52px 12px 16px; background: #0C1018; border: 1px solid #263042; border-radius: 12px; }
.acms-lesson-body ol > li::before { content: counter(acms-step); position: absolute; right: 12px; top: 10px; width: 28px; height: 28px; border-radius: 8px; background: #38B6FF; color: #0C1018; font-weight: 900; display: grid; place-items: center; font-size: 14px; }

/* ---------- Quiz tab ---------- */
.acms-quiz-intro { background: #141924; border: 1px solid #263042; border-radius: 16px; padding: 24px 26px; margin-bottom: 20px; }
.acms-quiz-intro h2 { margin: 0 0 6px; font-size: 24px; font-weight: 900; }
.acms-quiz-intro > p { margin: 0 0 18px; color: #AAB0C0; }
.acms-quiz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.acms-quiz-stats > div { background: #0C1018; border: 1px solid #263042; border-radius: 12px; padding: 14px; text-align: center; }
.acms-quiz-stats b { display: block; font-size: 24px; font-weight: 900; color: #38B6FF; }
.acms-quiz-stats span { font-size: 13px; color: #AAB0C0; }
.acms-quiz-tiers h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.acms-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.acms-tier { background: #0C1018; border: 1px solid #263042; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: #AAB0C0; }
.acms-tier.is-on { border-color: #7ED44E; color: #7ED44E; }
.acms-tier-pieces { display: flex; gap: 4px; }
.acms-tier-pieces i { width: 16px; height: 16px; border-radius: 4px; background: #263042; display: block; }
.acms-tier.is-on .acms-tier-pieces i { background: #7ED44E; box-shadow: 0 0 10px rgba(126,212,78,.5); }
.acms-quiz-tiers p { margin: 0; color: #AAB0C0; font-size: 14px; }
.acms-quiz-embed .arabcms-quiz { margin: 0; max-width: none; }

/* ---------- Terms tab ---------- */
#panel-terms .acms-glossary-inline { margin: 0; }
.acms-terms-more { margin: 18px 0 0; }

/* ---------- Q&A tab ---------- */
.acms-qa-form { margin-bottom: 20px; }
.acms-qa-form textarea { width: 100%; }
.acms-qa-login { margin: 0 0 20px; }
.acms-qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acms-qa-item { background: #141924; border: 1px solid #263042; border-radius: 14px; padding: 16px 18px; }
.acms-qa-q, .acms-qa-a { display: flex; gap: 12px; align-items: flex-start; }
.acms-qa-q img, .acms-qa-a img { border-radius: 50%; flex: none; }
.acms-qa-q > div, .acms-qa-a > div { min-width: 0; flex: 1; }
.acms-qa-name { font-weight: 800; font-size: 14px; color: #EAF0F8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acms-qa-name time { color: #AAB0C0; font-weight: 400; font-size: 12px; }
.acms-qa-q p, .acms-qa-a p { margin: 4px 0 0; color: #AAB0C0; line-height: 1.7; }
.acms-qa-a { margin: 12px 0 0 0; padding: 12px 14px; border-radius: 12px; background: #0C1018; border: 1px solid #263042; }
.acms-qa-a.is-staff { border-color: rgba(126,212,78,.45); background: rgba(126,212,78,.06); }
.acms-qa-badge { font-size: 11px; font-weight: 700; color: #7ED44E; background: rgba(126,212,78,.12); padding: 2px 8px; border-radius: 999px; }
.acms-qa-reply { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #38B6FF; text-decoration: none !important; }

/* ---------- Sidebar ---------- */
.acms-lesson-card { background: #141924; border: 1px solid #263042; border-radius: 14px; padding: 18px 20px; }
.acms-lesson-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: #EAF0F8; }
.acms-lesson-card p { margin: 10px 0 0; font-size: 13px; color: #AAB0C0; line-height: 1.7; }
.acms-lesson-card a { color: #38B6FF; }
.acms-complete { display: block; width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid #7ED44E; background: rgba(126,212,78,.1); color: #7ED44E; font: inherit; font-weight: 800; font-size: 15px; text-align: center; cursor: pointer; text-decoration: none !important; transition: background .2s ease, color .2s ease, transform .15s ease; }
.acms-complete:hover { background: rgba(126,212,78,.18); }
.acms-complete.is-done { background: #7ED44E; color: #0C1018; }
.acms-complete.is-login { border-color: #38B6FF; color: #38B6FF; background: rgba(56,182,255,.08); }
.acms-complete:active { transform: translateY(1px); }
/* Interlocking puzzle strip — Asset 2 / 3 / 4 as symbols; tabs overlap the next socket */
.acms-pieces-count { float: left; font-size: 13px; font-weight: 700; color: #7ED44E; direction: ltr; }
.acms-puzzle { display: flex; flex-direction: column; gap: 6px; direction: ltr; }
.acms-puzzle-row { display: flex; align-items: center; justify-content: flex-end; --h: 34px; --gap: 4px; height: var(--h); }
.acms-pz { display: block; height: var(--h); flex: none; color: #2B3548; fill: currentColor; stroke: #4A5772; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; overflow: visible; transition: color .3s ease, stroke .3s ease; }
.acms-pz-start { width: calc(var(--h) * 172.6 / 132.1); }
.acms-pz-mid   { width: calc(var(--h) * 172.8 / 132.3); margin-left: calc(var(--h) * -47.6 / 132.1 + var(--gap)); }
.acms-pz-end   { width: calc(var(--h) * 127.1 / 134.3); margin-left: calc(var(--h) * -47.6 / 132.1 + var(--gap)); }
.acms-pz.is-on { position: relative; z-index: 1; }
.acms-pz-start.is-on { color: #38B6FF; stroke: #1E9AE6; filter: drop-shadow(0 0 6px rgba(56,182,255,.45)); }
.acms-pz-mid.is-on   { color: #7ED44E; stroke: #5FBF34; filter: drop-shadow(0 0 6px rgba(126,212,78,.4)); }
.acms-pz-end.is-on   { color: #F04575; stroke: #D42D5F; filter: drop-shadow(0 0 6px rgba(240,69,117,.45)); }
.acms-puzzle-row { padding: 2px 0; }
.acms-pieces-mine { color: #EAF0F8; }
.acms-track-name { display: block; font-size: 13px; color: #38B6FF; margin: -6px 0 10px; }
.acms-track ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acms-track a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #AAB0C0; text-decoration: none !important; font-size: 14px; transition: background .2s ease, color .2s ease; }
.acms-track a:hover { background: #0C1018; color: #EAF0F8; }
.acms-track .is-current a { background: rgba(56,182,255,.12); color: #EAF0F8; font-weight: 700; }
.acms-track-n { width: 24px; height: 24px; border-radius: 7px; background: #0C1018; border: 1px solid #263042; display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.acms-track .is-current .acms-track-n { background: #38B6FF; color: #0C1018; border-color: #38B6FF; }
.acms-track .is-done .acms-track-n { background: #7ED44E; color: #0C1018; border-color: #7ED44E; }
.acms-track .is-done .acms-track-n::before { content: '✓'; }
.acms-track .is-done .acms-track-n { font-size: 0; }
.acms-track .is-done .acms-track-n::before { font-size: 12px; }
.acms-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acms-files a { display: block; padding: 9px 12px; border-radius: 10px; background: #0C1018; border: 1px solid #263042; color: #EAF0F8; text-decoration: none !important; font-size: 14px; }
.acms-files a:hover { border-color: #38B6FF; }
.acms-lesson-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.acms-lesson-nav .btn-ghost, .acms-lesson-nav .btn-solid { flex: 1; text-align: center; padding: 12px 16px; }

/* ---------- Bottom bar (mobile) ---------- */
.acms-lesson-bottombar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.acms-lesson-grid { grid-template-columns: 1fr; }
	.acms-lesson-side { position: static; }
	.acms-lesson-title { font-size: 26px; }
}
@media (max-width: 640px) {
	.acms-lesson-video-wrap { position: sticky; top: 0; z-index: 30; margin: 0 -16px 14px; padding: 0; }
	.acms-video { border-radius: 0; border-inline: 0; }
	.acms-tabs { position: sticky; top: calc(56.25vw + 2px); z-index: 29; border-radius: 12px; }
	.acms-tab { flex: 0 0 auto; font-size: 14px; padding: 9px 14px; }
	.acms-lesson-body { padding: 18px 16px; }
	.acms-quiz-stats { gap: 8px; }
	.acms-quiz-stats b { font-size: 20px; }
	.acms-tiers { gap: 6px; }
	.acms-lesson-nav { display: none; }
	.acms-lesson-bottombar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(20,25,36,.96); backdrop-filter: blur(10px); border-top: 1px solid #263042; font-size: 13px; color: #AAB0C0; }
	.acms-lesson-bottombar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.acms-lesson-bottombar .btn-solid { flex: none; padding: 10px 18px; }
	.acms-lesson { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { .acms-panel { animation: none; } }