* { box-sizing: border-box; }
.alfayed-secure-player{background:#071b27;border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(5,24,34,.18)}.alfayed-player-stage{position:relative;aspect-ratio:16/9;background:#000;min-height:0}.alfayed-player-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.alfayed-watermark{position:absolute;z-index:3;top:7%;left:5%;pointer-events:none;color:rgba(255,255,255,.72);text-shadow:0 1px 5px rgba(0,0,0,.9);font-size:clamp(10px,1.2vw,15px);animation:alfayed-watermark 28s ease-in-out infinite alternate;max-width:45%;user-select:none}.alfayed-watermark strong,.alfayed-watermark span{display:block}.alfayed-player-controls{display:flex;align-items:center;gap:8px;padding:10px 12px;color:#eaf7fa;flex-wrap:wrap}.alfayed-player-controls button,.alfayed-player-controls select{min-width:44px;min-height:44px;border:1px solid #315563;background:#123443;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;touch-action:manipulation}.alfayed-player-controls button:focus-visible,.alfayed-player-controls select:focus-visible{outline:3px solid #f2c14e;outline-offset:2px}.alfayed-player-controls [data-player=status]{font-size:12px;margin-inline-start:auto;color:#b9dce3}.alfayed-secure-player:fullscreen,.alfayed-secure-player:-webkit-full-screen,.alfayed-secure-player.is-expanded{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;border-radius:0;background:#000;overflow:hidden}.alfayed-secure-player:fullscreen .alfayed-player-stage,.alfayed-secure-player:-webkit-full-screen .alfayed-player-stage,.alfayed-secure-player.is-expanded .alfayed-player-stage{width:100%;height:100%;aspect-ratio:auto}.alfayed-secure-player:fullscreen .alfayed-player-controls,.alfayed-secure-player:-webkit-full-screen .alfayed-player-controls,.alfayed-secure-player.is-expanded .alfayed-player-controls{position:relative;z-index:5;background:#071b27;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.alfayed-secure-player.is-expanded{position:fixed;inset:0;z-index:2147483000}.alfayed-player-open,.alfayed-player-open body{overflow:hidden!important;overscroll-behavior:none}.alfayed-secure-player.is-fullscreen .alfayed-watermark{font-size:clamp(12px,1.6vw,20px)}@keyframes alfayed-watermark{0%{top:7%;left:5%}35%{top:68%;left:8%}70%{top:15%;left:52%}100%{top:68%;left:48%}}
@media (max-width:520px){.alfayed-player-controls{gap:6px;padding:8px}.alfayed-player-controls button,.alfayed-player-controls select{min-width:46px;min-height:46px;padding:7px 9px}.alfayed-player-controls button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.alfayed-player-controls [data-player=status]{width:100%;margin-inline-start:0;text-align:center}.alfayed-secure-player.is-fullscreen .alfayed-watermark{max-width:55%;font-size:12px}}
body.alfayed-learning-page { margin: 0; color: #17324a; background: #f3f7fa; font-family: Arial,Tahoma,sans-serif; }
.alfayed-learning-container { width: min(1360px,94vw); margin: 0 auto; padding: clamp(1.2rem,3vw,2.5rem) 0 4rem; }
.alfayed-learning-page h1,.alfayed-learning-page h2,.alfayed-learning-page h3 { color: #17324a; margin-top: 0; }
.alfayed-learning-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,280px); align-items: center; gap: clamp(1.5rem,4vw,4rem); padding: clamp(1.5rem,4vw,3.5rem); color: #fff; background: radial-gradient(circle at 85% 10%,rgba(45,188,191,.25),transparent 34%),linear-gradient(125deg,#102f49,#125f70); border-radius: 26px; box-shadow: 0 22px 55px rgba(13,48,70,.18); }
.alfayed-learning-hero h1 { color: #fff; font-size: clamp(2rem,4vw,3.4rem); line-height: 1.12; margin-bottom: .8rem; }.alfayed-learning-hero .alfayed-rich-copy,.alfayed-learning-hero .alfayed-eyebrow { color: #dcecf1; }.alfayed-learning-hero p:last-child { margin-bottom: 0; }
.alfayed-progress-card { padding: 1.3rem; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }.alfayed-progress-card strong { display: block; color: #fff; font-size: 2.2rem; }.alfayed-progress-card span,.alfayed-progress-card small { color: #dcecf1; }.alfayed-progress-card .alfayed-progress-bar { margin: .8rem 0 .5rem; background: rgba(255,255,255,.18); }.alfayed-progress-card .alfayed-progress-bar span { background: #f2c14e; }
.alfayed-course-start { margin: 1rem 0; }
.alfayed-course-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(300px,.85fr); gap: 1rem; align-items: start; }
.alfayed-learning-panel { padding: clamp(1.15rem,2.5vw,1.7rem); background: #fff; border: 1px solid #dfe8ef; border-radius: 18px; }.alfayed-learning-panel>h2 { font-size: 1.2rem; }
.alfayed-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }.alfayed-section-heading h2 { margin-bottom: 0; }.alfayed-section-heading>span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e7f3f5; color: #126b78; font-weight: 800; }
.alfayed-curriculum { display: grid; gap: 1rem; margin-top: 1rem; }.alfayed-unit { border: 1px solid #e2eaf0; border-radius: 14px; overflow: hidden; }.alfayed-unit>header { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; background: #f7fafc; }.alfayed-unit>header>span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 10px; background: #173f5a; color: #fff; font-weight: 800; }.alfayed-unit h3 { font-size: 1rem; margin: 0; }.alfayed-unit small { color: #687f8f; }.alfayed-unit ol { list-style: none; padding: 0; margin: 0; }.alfayed-unit li+li { border-top: 1px solid #e7edf1; }.alfayed-unit li a { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0,1fr) 24px; gap: .7rem; align-items: center; padding: .65rem 1rem; color: #17324a; text-decoration: none; }.alfayed-unit li a:hover,.alfayed-unit li.is-current a { background: #eef8f8; }.alfayed-unit li.is-current a { box-shadow: inset 4px 0 #168795; }.alfayed-item-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #126b78; background: #e7f3f5; font-weight: 800; direction: ltr; }.alfayed-unit li a>span:nth-child(2) { min-width: 0; }.alfayed-unit li strong { display: block; overflow-wrap: anywhere; }.alfayed-unit li b { color: #168795; }
.alfayed-resource-list { display: grid; gap: .75rem; }.alfayed-resource-card { min-height: 76px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .8rem; color: #17324a; text-decoration: none; border: 1px solid #dfe8ef; border-radius: 13px; background: #f9fbfc; }.alfayed-resource-card>span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: #0d6875; background: #dff3f3; font-size: .75rem; font-weight: 900; direction: ltr; }.alfayed-resource-card small,.alfayed-resource-card strong { display: block; }.alfayed-resource-card small { color: #6b8292; }.alfayed-resource-card b { color: #0f648d; font-size: .82rem; }
.alfayed-lesson-toolbar { min-height: 54px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }.alfayed-lesson-toolbar>div { display: flex; gap: .55rem; align-items: center; }.alfayed-lesson-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,360px); gap: 1rem; align-items: start; }.alfayed-lesson-main { min-width: 0; }.alfayed-lesson-main>header { margin-bottom: 1rem; }.alfayed-lesson-main h1 { font-size: clamp(1.8rem,3vw,2.65rem); margin-bottom: 0; }.alfayed-video-section { overflow: hidden; background: #0a1b28; border-radius: 20px; box-shadow: 0 18px 45px rgba(13,48,70,.14); }.alfayed-video-frame { position: relative; width: 100%; aspect-ratio: 16/9; }.alfayed-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }.alfayed-lesson-copy { padding: clamp(1.1rem,2.5vw,1.7rem); margin: 1rem 0; background: #fff; border: 1px solid #dfe8ef; border-radius: 18px; line-height: 1.8; overflow-wrap: anywhere; }.alfayed-lesson-copy img,.alfayed-lesson-copy table { max-width: 100%; }.alfayed-lesson-resources { margin-top: 1rem; }.alfayed-curriculum-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }.alfayed-curriculum-drawer { display: none; }
.alfayed-lesson-navigation { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; margin-top: 1rem; }.alfayed-lesson-navigation a { min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; white-space: normal; }.alfayed-lesson-navigation small,.alfayed-lesson-navigation strong { display: block; }
.alfayed-complete-form,.alfayed-complete-state { margin: 1rem 0; }.alfayed-complete-state { padding: .9rem 1rem; color: #12633f; background: #eaf8f0; border: 1px solid #b9e3c9; border-radius: 12px; font-weight: 800; }
.alfayed-locked-card { min-height: 420px; display: grid; place-items: center; grid-template-columns: auto minmax(0,560px); gap: 1.2rem; padding: clamp(1.5rem,5vw,4rem); text-align: start; background: linear-gradient(145deg,#fff,#edf4f7); border: 1px solid #d9e5ec; border-radius: 20px; }.alfayed-lock-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; background: #e4eef3; font-size: 2rem; }.alfayed-locked-card h2 { font-size: clamp(1.3rem,2.4vw,1.9rem); }.alfayed-locked-card p { color: #5f7788; }
.alfayed-gate-facts { display: grid; gap: .45rem; padding-inline-start: 1.2rem; color: #4d687b; }.alfayed-gate-score strong { color: #b33a2b; font-size: 1.75rem; }.alfayed-unit li.is-gate-locked a { color: #6b7c88; background: #f5f7f8; }.alfayed-unit li.is-gate-locked .alfayed-item-icon { filter: grayscale(1); }
.alfayed-gate-result { width: min(900px,100%); margin: 3vh auto; }.alfayed-gate-result>header { margin-bottom: 1rem; }.alfayed-gate-result>header h1 { font-size: clamp(1.75rem,4vw,2.7rem); }.alfayed-gate-state { min-height: 440px; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: clamp(1rem,4vw,2.5rem); align-items: center; padding: clamp(1.5rem,5vw,4rem); background: #fff; border: 1px solid #dfe8ef; border-radius: 24px; box-shadow: 0 20px 55px rgba(18,55,78,.12); }.alfayed-gate-symbol { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; font-size: 2.5rem; font-weight: 900; }.alfayed-gate-result.is-success .alfayed-gate-symbol { color: #12633f; background: #dff5e8; }.alfayed-gate-result.is-failure .alfayed-gate-symbol { color: #a43b2d; background: #fff0ec; }.alfayed-gate-state h2 { font-size: clamp(1.45rem,3vw,2.1rem); }.alfayed-gate-state p { color: #526d80; }.alfayed-gate-result.is-success .alfayed-gate-score strong { color: #12633f; }
.alfayed-rich-copy { line-height: 1.8; }.alfayed-rich-copy>:first-child { margin-top: 0; }.alfayed-rich-copy>:last-child { margin-bottom: 0; }
@media (max-width: 899px) { .alfayed-course-layout,.alfayed-learning-hero { grid-template-columns: 1fr; }.alfayed-progress-card { max-width: 360px; }.alfayed-lesson-layout { grid-template-columns: 1fr; }.alfayed-curriculum-rail { display: none; }.alfayed-curriculum-drawer { display: block; margin-top: 1rem; background: #fff; border: 1px solid #dfe8ef; border-radius: 15px; }.alfayed-curriculum-drawer summary { min-height: 52px; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; cursor: pointer; font-weight: 800; }.alfayed-curriculum-drawer>div { padding: 0 1rem 1rem; } }
@media (max-width: 520px) { .alfayed-learning-container { width: min(94vw,430px); padding-top: 1rem; }.alfayed-learning-hero { border-radius: 20px; padding: 1.35rem; }.alfayed-learning-hero h1 { font-size: 1.8rem; }.alfayed-course-start { width: 100%; }.alfayed-resource-card { grid-template-columns: 44px minmax(0,1fr); }.alfayed-resource-card>b { grid-column: 2; }.alfayed-lesson-toolbar { align-items: flex-start; }.alfayed-lesson-toolbar>div { flex-direction: column; align-items: flex-end; }.alfayed-video-section { margin-inline: 0; border-radius: 14px; }.alfayed-lesson-navigation { grid-template-columns: 1fr; }.alfayed-lesson-navigation>span { display: none; }.alfayed-locked-card { min-height: 360px; grid-template-columns: 1fr; place-items: start; }.alfayed-lock-icon { width: 58px; height: 58px; }.alfayed-unit li a { padding-inline: .75rem; }.alfayed-gate-state { min-height: 440px; grid-template-columns: 1fr; align-content: start; }.alfayed-gate-symbol { width: 64px; height: 64px; font-size: 2rem; } }
@media (min-width: 900px) and (orientation: landscape) { .alfayed-lesson-layout { grid-template-columns: minmax(0,1fr) minmax(320px,360px); }.alfayed-video-frame { min-height: 360px; } }