[data-scope="moeen-learning-catalog"] {
  --mlc-bg: #05151b;
  --mlc-bg-soft: #071c23;
  --mlc-panel: #0a252d;
  --mlc-panel-strong: #0d3038;
  --mlc-text: #f4fbfa;
  --mlc-soft: #c7d8d9;
  --mlc-muted: #829da2;
  --mlc-teal: #42ded5;
  --mlc-teal-dark: #27c3bb;
  --mlc-gold: #e2bd60;
  --mlc-line: rgba(84, 220, 211, .16);
  min-height: 100vh;
  overflow: clip;
  color: var(--mlc-text);
  background: var(--mlc-bg);
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
[data-scope="moeen-learning-catalog"] *, [data-scope="moeen-learning-catalog"] *::before, [data-scope="moeen-learning-catalog"] *::after { box-sizing: border-box; }
[data-scope="moeen-learning-catalog"] a { color: inherit; text-decoration: none; }
[data-scope="moeen-learning-catalog"] button, [data-scope="moeen-learning-catalog"] input { font: inherit; }
[data-scope="moeen-learning-catalog"] .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
[data-scope="moeen-learning-catalog"] [hidden] { display: none !important; }
[data-scope="moeen-learning-catalog"] .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mlc-btn { min-height: 52px; padding: 12px 23px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mlc-btn:hover, .mlc-btn:focus-visible { transform: translateY(-2px); }
.mlc-btn--primary { color: #03191c !important; background: linear-gradient(135deg, #6eebe3, #2ac4bc); box-shadow: 0 16px 36px rgba(39, 196, 187, .18); }
.mlc-btn--primary:hover { box-shadow: 0 20px 42px rgba(39, 196, 187, .27); }
.mlc-btn--quiet { color: #e0efee !important; border-color: rgba(81, 218, 209, .26); background: rgba(10, 39, 47, .62); }
.mlc-btn--quiet:hover { border-color: rgba(81, 218, 209, .5); }
.mlc-hero { position: relative; min-height: 760px; padding: 145px 0 90px; overflow: hidden; border-bottom: 1px solid var(--mlc-line); background: radial-gradient(circle at 76% 18%, rgba(47, 197, 188, .13), transparent 30%), linear-gradient(145deg, #041116 0%, #071c23 62%, #06181e 100%); }
.mlc-hero::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(87, 216, 208, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(87, 216, 208, .09) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(100deg, transparent 5%, #000 65%, transparent 100%); }
.mlc-hero__glow { position: absolute; width: 520px; height: 520px; top: 60px; left: -180px; border-radius: 50%; background: rgba(224, 188, 95, .05); filter: blur(70px); }
.mlc-hero__layout > *, .mlc-heading > *, .mlc-path__layout > * { min-width: 0; }
.mlc-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: clamp(42px, 7vw, 88px); align-items: center; }
.mlc-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: #728e94; font-size: 12px; }
.mlc-breadcrumb a { color: var(--mlc-teal); }
.mlc-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #b8cfce; font-size: 13px; font-weight: 700; }
.mlc-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--mlc-gold); box-shadow: 0 0 16px rgba(226, 189, 96, .55); }
.mlc-hero h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(52px, 6vw, 78px); line-height: 1.14; letter-spacing: -.035em; font-weight: 900; }
.mlc-hero h1 em { color: var(--mlc-teal); font-style: normal; }
.mlc-hero__copy > p { max-width: 650px; margin: 23px 0 0; color: #acc1c4; font-size: 18px; line-height: 1.95; }
.mlc-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.mlc-hero__trust { margin: 43px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mlc-line); list-style: none; }
.mlc-hero__trust li { display: flex; align-items: center; gap: 11px; padding-inline: 17px; border-inline-start: 1px solid var(--mlc-line); }
.mlc-hero__trust li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.mlc-hero__trust b { color: var(--mlc-gold); font-size: 10px; }
.mlc-hero__trust strong, .mlc-hero__trust small { display: block; }
.mlc-hero__trust strong { color: #dcebea; font-size: 12px; }
.mlc-hero__trust small { margin-top: 3px; color: #68858b; font-size: 9px; }
.mlc-terminal { position: relative; isolation: isolate; direction: rtl; overflow: hidden; border: 1px solid rgba(72, 222, 213, .32); border-radius: 20px; background: linear-gradient(155deg, rgba(5,26,33,.98), rgba(3,17,23,.99)); box-shadow: 0 30px 76px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025); }
.mlc-terminal::before { content: ""; position: absolute; width: 180px; height: 180px; left: -80px; top: 20px; border-radius: 50%; background: rgba(66,222,213,.07); filter: blur(42px); pointer-events: none; }
.mlc-terminal__bar { position: relative; min-height: 46px; padding: 0 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid rgba(81,217,209,.12); background: rgba(12,44,52,.62); }
.mlc-terminal__bar strong { direction: ltr; color: #819da2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8.5px; letter-spacing: .08em; }
.mlc-terminal__bar small { display: flex; align-items: center; gap: 6px; color: #78dca0; font-size: 9px; }
.mlc-terminal__bar small i { width: 6px; height: 6px; border-radius: 50%; background: #71dc9d; box-shadow: 0 0 10px rgba(113,220,157,.6); }
.mlc-terminal__dots { display: flex; gap: 5px; }
.mlc-terminal__dots i { width: 7px; height: 7px; border-radius: 50%; background: #35545a; }
.mlc-terminal__dots i:nth-child(1) { background: #e2bd60; }.mlc-terminal__dots i:nth-child(2) { background: #42ded5; }.mlc-terminal__dots i:nth-child(3) { background: #507179; }
.mlc-terminal__body { position: relative; z-index: 1; padding: 21px; }
.mlc-terminal__command { margin: 0 0 11px; display: flex; gap: 8px; color: #78969b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.mlc-terminal__command span { color: var(--mlc-gold); }
.mlc-terminal__screen { min-height: 78px; padding: 16px; display: flex; align-items: flex-start; gap: 6px; border: 1px solid rgba(75,217,208,.15); border-radius: 13px; color: #edfafa; background: rgba(2,14,19,.94); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.8; box-shadow: inset 0 0 28px rgba(66,222,213,.025); }
.mlc-terminal__screen i { width: 7px; height: 20px; margin-top: 2px; flex: 0 0 auto; border-radius: 2px; background: var(--mlc-teal); box-shadow: 0 0 12px rgba(66,222,213,.34); animation: mlcCursor 1s steps(1) infinite; }
.mlc-terminal__prompt { margin-top: 13px; padding: 5px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(73,215,207,.18); border-radius: 13px; background: rgba(2,15,20,.86); transition: border-color .2s ease, box-shadow .2s ease; }
.mlc-terminal__prompt:focus-within { border-color: rgba(72,220,211,.52); box-shadow: 0 0 0 3px rgba(66,222,213,.05); }
.mlc-terminal__prompt input { min-width: 0; flex: 1; height: 40px; padding: 0 10px; border: 0; outline: 0; color: #eefafa; background: transparent; font-size: 11px; }
.mlc-terminal__prompt input::placeholder { color: #668187; opacity: .9; }
.mlc-terminal__prompt button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; color: #031719; background: linear-gradient(135deg,#72e9e1,#32c9c0); font-size: 10px; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.mlc-terminal__prompt button:hover, .mlc-terminal__prompt button:focus-visible { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(50,201,192,.18); }
.mlc-terminal__prompt button i { font-style: normal; }
.mlc-terminal__suggestions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.mlc-terminal__suggestions button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(73,215,207,.13); border-radius: 999px; color: #829da2; background: rgba(10,42,50,.42); font-size: 8.5px; cursor: pointer; transition: .18s ease; }
.mlc-terminal__suggestions button:hover, .mlc-terminal__suggestions button.is-active { color: #eefafa; border-color: rgba(72,220,211,.38); background: rgba(42,164,157,.12); }
.mlc-terminal__analysis { height: 21px; margin: 9px 2px 0; display: flex; align-items: center; gap: 5px; opacity: 0; transition: opacity .2s ease; }
.mlc-terminal.is-analyzing .mlc-terminal__analysis { opacity: 1; }
.mlc-terminal__analysis span { width: 4px; height: 4px; border-radius: 50%; background: var(--mlc-teal); animation: mlcDot .8s ease infinite; }.mlc-terminal__analysis span:nth-child(2) { animation-delay: .12s; }.mlc-terminal__analysis span:nth-child(3) { animation-delay: .24s; }
.mlc-terminal__analysis b { margin-inline-start: 4px; color: #69868b; font-size: 8px; font-weight: 650; }
.mlc-terminal__result { padding: 13px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: center; border: 1px solid rgba(226,189,96,.22); border-radius: 13px; background: linear-gradient(110deg,rgba(226,189,96,.085),rgba(65,220,211,.045)); transform: translateY(6px); opacity: 0; }
.mlc-terminal__result.is-visible { transform: none; opacity: 1; animation: mlcResultIn .5s cubic-bezier(.22,1,.36,1) both; }
.mlc-terminal__result > span { padding: 5px 8px; border-radius: 7px; color: #171408; background: var(--mlc-gold); font-size: 8px; font-weight: 900; white-space: nowrap; }
.mlc-terminal__result strong, .mlc-terminal__result small, .mlc-terminal__result em { display: block; }
.mlc-terminal__result strong { color: #effafa; font-size: 11px; line-height: 1.5; }
.mlc-terminal__result small { margin-top: 3px; color: #789398; font-size: 8px; line-height: 1.6; }
.mlc-terminal__result em { color: #9fc1c2; font-style: normal; }
.mlc-terminal__result a { min-height: 32px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(66,222,213,.24); border-radius: 8px; color: var(--mlc-teal); font-size: 8.5px; font-weight: 850; white-space: nowrap; }
.mlc-terminal__privacy { margin: 8px 2px 0; color: #536f75; font-size: 7.5px; text-align: center; }
.mlc-library { padding: 105px 0 120px; background: linear-gradient(180deg, #071a21, #06171d); }
.mlc-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); gap: 50px; align-items: end; }
.mlc-heading > div > span, .mlc-path__layout > div > span, .mlc-final__inner > div > span { color: var(--mlc-teal); font-size: 12px; font-weight: 800; }
.mlc-heading h2, .mlc-path h2, .mlc-final h2 { margin: 8px 0 0; font-size: clamp(31px, 3.7vw, 45px); line-height: 1.35; }
.mlc-heading > p { margin: 0; color: var(--mlc-muted); line-height: 1.85; }
/* Compact course discovery: available categories only */
.mlc-discovery { margin-top: 26px; padding: 13px 15px; border: 1px solid rgba(76,218,209,.13); border-radius: 17px; background: linear-gradient(135deg,rgba(12,43,51,.46),rgba(4,21,27,.7)); }
.mlc-discovery--compact .mlc-categories { margin: 0; padding: 0; border: 0; }
.mlc-categories__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.mlc-categories__head > span { color: #a9c0c2; font-size: 10px; font-weight: 850; }
.mlc-categories__head > small { color: #5f7b81; font-size: 8px; }
.mlc-filters { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.mlc-filters button { position: relative; min-width: 0; min-height: 34px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; border: 1px solid rgba(72,211,202,.12); border-radius: 10px; color: #8fa8ac; background: rgba(3,20,26,.54); text-align: right; cursor: pointer; transition: transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease; }
.mlc-filters button > i { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(69,218,209,.15); border-radius: 7px; color: #58dcd3; background: rgba(66,222,213,.05); font-size: 6.5px; font-style: normal; font-weight: 900; }
.mlc-filters button > b { font-size: 13px; font-weight: 850; white-space: nowrap; }
.mlc-filters button > span { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 6px; color: #718d92; background: rgba(255,255,255,.04); font-size: 6.5px; font-weight: 850; }
.mlc-filters button:hover, .mlc-filters button:focus-visible { color: #edf9f8; border-color: rgba(65,218,209,.3); background: rgba(12,45,53,.72); transform: translateY(-1px); }
.mlc-filters button:focus-visible { outline: 2px solid rgba(66,222,213,.4); outline-offset: 2px; }
.mlc-filters button.is-active { color: #f7fffe; border-color: rgba(73,222,213,.42); background: linear-gradient(120deg,rgba(226,189,96,.08),rgba(66,222,213,.1)); }
.mlc-filters button.is-active::after { content: ""; position: absolute; inset: auto 8px 0; height: 2px; border-radius: 99px; background: linear-gradient(90deg,var(--mlc-gold),var(--mlc-teal)); }
.mlc-filters button.is-active > i { color: #07191b; border-color: transparent; background: linear-gradient(135deg,var(--mlc-gold),var(--mlc-teal)); }
.mlc-filters button.is-active > span { color: #07191b; background: var(--mlc-gold); }
.mlc-filters button.is-coming { pointer-events: none; color: #e7cf8f; border-color: rgba(226,189,96,.24); background: linear-gradient(120deg,rgba(226,189,96,.1),rgba(66,222,213,.055)); opacity: 1; }
.mlc-filters button.is-coming::before { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 26%; transform: skewX(-18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation: mlcComingShine 3.4s ease-in-out infinite; }
.mlc-filters button.is-coming > i { color: #07191b; border-color: transparent; background: linear-gradient(135deg,#f1cf79,#61e5dc); }
.mlc-filters button.is-coming > span { color: var(--mlc-gold); background: rgba(226,189,96,.08); }
.mlc-results-meta { margin: 23px 2px; display: flex; align-items: center; gap: 13px; }
.mlc-results-meta strong { color: #d8e9e8; font-size: 12px; }.mlc-results-meta span { color: #607d83; font-size: 10px; }
.mlc-results-meta strong::after { content: ""; width: 4px; height: 4px; margin-inline-start: 13px; display: inline-block; border-radius: 50%; background: var(--mlc-gold); vertical-align: middle; }
.mlc-course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,340px)); justify-content: center; gap: 18px; align-items: stretch; }
.mlc-course-grid > .mlc-course-card:only-child { width: min(100%,340px); justify-self: center; }
.mlc-course-card { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(75,214,205,.17); border-radius: 16px; background: linear-gradient(155deg,rgba(11,41,49,.98),rgba(5,25,31,.99)); box-shadow: 0 20px 48px rgba(0,0,0,.14); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.mlc-course-card:hover, .mlc-course-card:focus-within { transform: translateY(-4px); border-color: rgba(66,222,213,.38); box-shadow: 0 28px 62px rgba(0,0,0,.22); }
.mlc-course-card.is-recommended { border-color: rgba(226,189,96,.55); box-shadow: 0 0 0 3px rgba(226,189,96,.07),0 26px 62px rgba(0,0,0,.22); }
.mlc-course-card__media { position: relative; aspect-ratio: 1.9 / 1; overflow: hidden; background: #0b2a32; }
.mlc-course-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 52%,rgba(4,20,25,.5)); }
.mlc-course-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease,filter .45s ease; }
.mlc-course-card:hover .mlc-course-card__media img { transform: scale(1.035); filter: saturate(1.05); }
.mlc-course-card__category { position: absolute; z-index: 2; top: 11px; right: 11px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; color: rgba(4,24,30,.76); background: #f0d27c; font-size: 9px; font-weight: 900; backdrop-filter: blur(9px); }
.mlc-course-card__tap { display: flex; flex: 1; flex-direction: column; color: inherit; outline: 0; }
.mlc-course-card__tap:focus-visible { box-shadow: inset 0 0 0 3px rgba(66,222,213,.4); }
.mlc-course-card__body { padding: 17px; display: flex; flex: 1; flex-direction: column; }
.mlc-course-card__meta { display: flex; flex-wrap: wrap; gap: 12px; color: #8da8ad; font-size: 9.5px; font-weight: 600; }
.mlc-course-card__meta span { position: relative; }
.mlc-course-card__meta span + span::before { content: ""; position: absolute; top: 50%; right: -7px; width: 3px; height: 3px; border-radius: 50%; background: var(--mlc-gold); }
.mlc-course-card h3 { min-height: 51px; margin: 10px 0 7px; display: -webkit-box; overflow: hidden; color: #fff; font-size: 20px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .18s ease; }
.mlc-course-card:hover h3 { color: var(--mlc-teal); }
.mlc-course-card__social { min-height: 29px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: #a5bdbf; font-size: 10px; }
.mlc-course-card__rating, .mlc-course-card__students { min-height: 27px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(72,214,205,.09); border-radius: 7px; background: rgba(66,222,213,.03); }
.mlc-course-card__rating b { color: #f0d27c; font-size: 12px; }.mlc-course-card__rating i { color: var(--mlc-gold); font-size: 13px; font-style: normal; }.mlc-course-card__rating small { color: #96adb1; font-size: 9px; }.mlc-course-card__students { font-size: 9.5px; }.mlc-course-card__students i { color: var(--mlc-teal); font-size: 10px; font-style: normal; }
.mlc-course-card__body > p { min-height: 48px; margin: 8px 0 0; display: -webkit-box; overflow: hidden; color: #a4b9bc; font-size: 13px; line-height: 1.8; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mlc-course-card__price { direction: rtl; margin-top: 12px; padding: 9px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid rgba(255,255,255,.075); }
.mlc-course-card__price > div { direction: rtl; min-width: 0; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.mlc-course-card__price ins, .mlc-course-card__price > div > .amount { display: inline-flex; align-items: baseline; padding: 0; color: var(--mlc-teal); background: transparent; font-size: 22px; font-weight: 950; line-height: 1.1; text-decoration: none; }
.mlc-course-card__price del { position: relative; display: inline-flex; align-items: baseline; padding: 3px 6px; border: 1px solid rgba(226,189,96,.18); border-radius: 999px; color: #aabbbd; background: rgba(226,189,96,.055); font-size: 11px; font-weight: 650; text-decoration: none; opacity: 1; }
.mlc-course-card__price del::after { content: ""; position: absolute; inset: 50% 4px auto; height: 1px; border-radius: 99px; background: var(--mlc-gold); transform: rotate(-4deg); }
.mlc-course-card__price .mlc-money bdi { direction: rtl; display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; unicode-bidi: isolate; }.mlc-course-card__price .mlc-money__value { order: 1; direction: ltr; }.mlc-course-card__price .mlc-money__currency { order: 2; direction: rtl; font-size: .68em; }
.mlc-course-card__price > strong { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(226,189,96,.26); border-radius: 7px; color: var(--mlc-gold); background: rgba(226,189,96,.07); font-size: 11px; font-weight: 900; line-height: 1; white-space: nowrap; }
.mlc-course-popover { --mlc-teal:#42ded5; --mlc-gold:#e2bd60; position: fixed; z-index:100000; width:min(330px,calc(100vw - 24px)); padding:17px; border:1px solid rgba(70,207,199,.25); border-radius:15px; color:#eaf8f7; background:#0a222a; box-shadow:0 24px 66px rgba(0,0,0,.42); }
.mlc-course-popover::before { content:""; position:absolute; top:var(--arrow-top,44px); width:11px; height:11px; border:inherit; background:#0a222a; transform:rotate(45deg); }.mlc-course-popover[data-side="left"]::before { right:-6px; border-bottom:0; border-left:0; }.mlc-course-popover[data-side="right"]::before { left:-6px; border-top:0; border-right:0; }
.mlc-course-popover__eyebrow { color:var(--mlc-teal); font-size:8px; font-weight:800; }.mlc-course-popover h4 { margin:7px 0; font-size:17px; line-height:1.45; }.mlc-course-popover__proof { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }.mlc-course-popover__proof span { padding:4px 6px; border-radius:6px; color:#94adb1; background:rgba(255,255,255,.04); font-size:7.5px; }.mlc-course-popover__proof b { color:#f0d27c; }
.mlc-course-popover p { margin:0; color:#94adb1; font-size:10px; line-height:1.7; }.mlc-course-popover ul { margin:11px 0; padding:0; display:grid; gap:6px; list-style:none; }.mlc-course-popover li { position:relative; padding-right:17px; color:#c6d7d8; font-size:9px; line-height:1.55; }.mlc-course-popover li::before { content:"✓"; position:absolute; right:0; color:var(--mlc-teal); font-weight:900; }
.mlc-course-popover__actions { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(80px,.8fr); gap:7px; }.mlc-course-popover__actions a { min-height:38px; padding:7px 9px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:9px; font-weight:900; transition:.18s ease; }.mlc-course-popover__actions a:hover { transform:translateY(-1px); }.mlc-course-popover__primary { color:#031719; background:linear-gradient(135deg,#66e8df,#29c4bb); }.mlc-course-popover__details { color:#d9e9e8; border:1px solid rgba(72,214,205,.22); background:rgba(3,22,28,.58); }.mlc-course-popover__primary.is-unavailable { pointer-events:none; color:#82999d; background:rgba(255,255,255,.06); }
.mlc-empty { min-height: 300px; place-content: center; text-align: center; border: 1px dashed rgba(73, 211, 202, .2); border-radius: 18px; }.mlc-empty:not([hidden]) { display: grid; }.mlc-empty > span { width: 58px; height: 58px; margin: auto; display: grid; place-items: center; border-radius: 16px; color: var(--mlc-teal); background: rgba(66, 222, 213, .07); }.mlc-empty svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }.mlc-empty h3 { margin: 16px 0 5px; }.mlc-empty p { margin: 0; color: var(--mlc-muted); }.mlc-empty button { margin-top: 16px; border: 0; color: var(--mlc-teal); background: transparent; cursor: pointer; }
.mlc-path { padding:90px 0; border-block:1px solid var(--mlc-line); background:#05161c; }
.mlc-path__layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; align-items:center; }
.mlc-path__layout > div > p { color:var(--mlc-muted); line-height:1.85; }
.mlc-path ol { --path-progress:0%; position:relative; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); list-style:none; }
.mlc-path ol::before, .mlc-path ol::after { content:""; position:absolute; top:24px; right:8%; height:1px; border-radius:99px; }
.mlc-path ol::before { left:8%; background:rgba(83,189,183,.24); }
.mlc-path ol::after { width:var(--path-progress); background:linear-gradient(90deg,var(--mlc-gold),var(--mlc-teal)); box-shadow:0 0 14px rgba(66,222,213,.22); transition:width .65s cubic-bezier(.22,1,.36,1); }
.mlc-path li { position:relative; text-align:center; cursor:default; }
.mlc-path li > b { position:relative; z-index:1; width:48px; height:48px; margin:auto; display:grid; place-items:center; border:1px solid rgba(70,217,208,.25); border-radius:15px; color:#6ba7a7; background:#08232a; font-size:10px; transition:transform .35s ease,color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease; }
.mlc-path li strong, .mlc-path li small { display:block; transition:color .3s ease,transform .3s ease; }.mlc-path li strong { margin-top:12px; color:#dbe9e8; }.mlc-path li small { margin-top:4px; color:#69858a; font-size:9px; }
.mlc-path li.is-active > b { color:#04191b; border-color:rgba(113,235,226,.8); background:linear-gradient(135deg,var(--mlc-gold),var(--mlc-teal)); box-shadow:0 0 0 5px rgba(66,222,213,.05),0 0 25px rgba(66,222,213,.22); transform:translateY(-2px) scale(1.05); animation:mlcStepGlow 1.8s ease-in-out infinite; }
.mlc-path li.is-active strong { color:var(--mlc-teal); transform:translateY(-1px); }.mlc-path li.is-active small { color:#9ab6b8; }
.mlc-final { padding: 85px 0; background: #071a21; }.mlc-final__inner { padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(77, 216, 207, .2); border-radius: 20px; background: linear-gradient(125deg, rgba(14, 50, 59, .8), rgba(7, 28, 35, .84)); }.mlc-final h2 { font-size: clamp(27px, 3vw, 36px); }.mlc-final p { margin: 8px 0 0; color: var(--mlc-muted); }
.mlc-motion-ready [data-course-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }.mlc-motion-ready [data-course-reveal].is-visible { opacity: 1; transform: none; }
@keyframes mlcCursor { 0%,48% { opacity:1; transform:scaleY(1); } 49%,100% { opacity:.12; transform:scaleY(.78); } }
@keyframes mlcDot { 0%,100% { transform:translateY(0); opacity:.35; } 50% { transform:translateY(-3px); opacity:1; } }
@keyframes mlcResultIn { from { opacity:0; transform:translateY(9px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes mlcComingShine { 0%,58% { left:-35%; opacity:0; } 68% { opacity:1; } 88%,100% { left:115%; opacity:0; } }
@keyframes mlcStepGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.1); } }

@media (max-width:1050px) {
  .mlc-hero__layout { grid-template-columns:1fr; }
  .mlc-terminal { width:min(100%,650px); }
  .mlc-course-grid { grid-template-columns:repeat(2,minmax(0,340px)); }
  .mlc-course-popover { display:none!important; }
}
@media (max-width:760px) {
  body[data-page="courses"] { min-width:0!important; overflow-x:hidden!important; }
  [data-scope="moeen-learning-catalog"] .container { max-width:calc(100vw - 28px)!important; width:min(100% - 28px,1180px); }
  .mlc-hero { min-height:0; padding:118px 0 72px; }
  .mlc-hero h1 { font-size:clamp(42px,12vw,58px); }
  .mlc-hero__trust { grid-template-columns:1fr; gap:12px; }
  .mlc-hero__trust li { padding:0; border:0; }
  .mlc-terminal__bar strong { display:none; }
  .mlc-terminal__bar { grid-template-columns:1fr auto; }
  .mlc-terminal__body { padding:15px; }
  .mlc-terminal__prompt { align-items:stretch; flex-direction:column; }
  .mlc-terminal__prompt button { justify-content:center; }
  .mlc-terminal__result { grid-template-columns:auto 1fr; }
  .mlc-terminal__result a { grid-column:1/-1; }
  .mlc-library { padding:75px 0 85px; }
  .mlc-heading { grid-template-columns:1fr; gap:15px; }
  .mlc-discovery { margin-top:24px; padding:12px; }
  .mlc-categories__head > small { display:none; }
  .mlc-filters { flex-wrap:nowrap; margin-inline:-12px; padding:1px 12px 5px; overflow-x:auto; scrollbar-width:none; }
  .mlc-filters::-webkit-scrollbar { display:none; }
  .mlc-filters button { flex:0 0 auto; min-width:max-content; scroll-snap-align:start; }
  .mlc-results-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .mlc-results-meta strong::after { display:none; }
  .mlc-course-grid { grid-template-columns:minmax(0,360px); }
  .mlc-course-grid > .mlc-course-card:only-child { width:100%; }
  .mlc-path__layout { grid-template-columns:1fr; gap:36px; }
  .mlc-path ol { grid-template-columns:repeat(2,1fr); gap:25px 0; }
  .mlc-path ol::before, .mlc-path ol::after { display:none; }
  .mlc-final__inner { padding:25px; align-items:stretch; flex-direction:column; }
  .mlc-final__inner .mlc-btn { width:100%; }
}
@media (max-width:440px) {
  .mlc-hero__actions { display:grid; }
  .mlc-terminal__screen { min-height:72px; font-size:12px; }
  .mlc-terminal__suggestions button { font-size:8px; }
  .mlc-course-card__body { padding:15px; }
  .mlc-course-card h3 { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .mlc-terminal__screen i,.mlc-terminal__analysis span,.mlc-filters button.is-coming::before,.mlc-path li.is-active > b { animation:none; }
  .mlc-motion-ready [data-course-reveal] { opacity:1; transform:none; transition:none; }
  .mlc-course-card,.mlc-course-card__media img,.mlc-btn,.mlc-path ol::after { transition:none; }
}
.mlc-course-card__joined {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: 9px;
  padding: 6px 10px;
  border: 1px solid rgba(66, 222, 213, .16);
  border-radius: 8px;
  color: #c1d8d9;
  background: rgba(66, 222, 213, .07);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

/* MOEEN MOBILE COURSE PRICE ROW 2026-07-26 */
@media (max-width: 440px) {
  .mlc-course-card__price {
    margin-top: 8px;
    padding: 5px 2px 0;
    gap: 10px;
    border-top: 0;
  }

  .mlc-course-card__price > div {
    gap: 5px;
  }

  .mlc-course-card__price ins,
  .mlc-course-card__price > div > .amount {
    font-size: 20px;
  }

  .mlc-course-card__price del {
    padding: 0;
    border: 0;
    color: rgba(190, 205, 207, .68);
    background: transparent;
    font-size: 10px;
  }

  .mlc-course-card__price del::after {
    inset-inline: 0;
  }

  .mlc-course-card__price > strong {
    padding: 4px 7px;
    border-color: rgba(226, 189, 96, .20);
    border-radius: 999px;
    background: rgba(226, 189, 96, .055);
    font-size: 10px;
  }
}
/* MOEEN MOBILE FLAT COURSE CARD 2026-07-26 */
@media (max-width: 760px) {
  .mlc-course-card,
  .mlc-course-card:hover,
  .mlc-course-card:focus-within {
    border: 0 !important;
    box-shadow: none !important;
    transform: none;
  }
}