/*
 * Small overrides kept apart from style.css (production serves a minified
 * style.css that differs from the repository copy).
 */

/* Mobile: AdSense auto ads inject elements wider than the screen on this RTL
   layout, which widened the layout viewport to ~2x and pushed the content
   off-screen. Clip horizontal overflow at the root and keep ads in bounds. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* "hidden" turns body into a scroll container, which breaks position:sticky
   (lesson playlist). "clip" cuts the overflow the same way without that. */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
        overflow-y: visible;
    }
}

ins.adsbygoogle,
.google-auto-placed,
.google-ads {
    max-width: 100% !important;
    overflow: hidden;
}

/* Never let the sticky navbar and search box exceed the screen width. */
.navbar-header,
#search-input {
    max-width: 100%;
}

/* ---- Certificate page ---- */
.certificate-page {
    padding-top: 10px;
    padding-bottom: 40px;
}

.certificate-head {
    text-align: center;
    margin: 10px auto 26px;
    max-width: 820px;
}

.certificate-head h1 {
    font-family: 'NotoKufiArabic-Bold', "Open Sans", Tahoma, Arial, sans-serif;
    font-size: 26px;
    line-height: 1.6;
    color: #2b2b2b;
    margin: 14px 0 6px;
}

.certificate-head p {
    color: #777;
    font-size: 15px;
    margin: 0;
}

.certificate-head p strong {
    color: #333;
}

.certificate-verified {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: #e8f6ee;
    color: #1e7d46;
    font-size: 13px;
}

.certificate-verified .fa {
    margin-left: 6px;
}

.certificate-frame {
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, .08);
    margin-bottom: 20px;
}

.certificate-frame .certificate-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.certificate-side {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, .08);
    padding: 18px 18px 14px;
}

.certificate-facts {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.certificate-facts li {
    display: grid;
    grid-template-columns: 22px auto 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.certificate-facts li:last-child {
    border-bottom: 0;
}

.certificate-facts .fa {
    color: #f5b800;
    text-align: center;
}

.certificate-facts span {
    color: #888;
    white-space: nowrap;
}

.certificate-facts strong {
    color: #333;
    text-align: left;
    word-break: break-word;
}

.certificate-facts strong[dir="ltr"] {
    font-family: Arial, sans-serif;
}

.certificate-actions .btn {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.certificate-actions .fa {
    margin-left: 6px;
}

.certificate-btn-primary {
    background: #2d2d2d;
    border-color: #2d2d2d;
    color: #fff;
}

.certificate-btn-primary:hover,
.certificate-btn-primary:focus {
    background: #f5b800;
    border-color: #f5b800;
    color: #222;
}

.certificate-linkedin {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}

.certificate-linkedin:hover,
.certificate-linkedin:focus {
    background: #084f97;
    color: #fff;
}

.certificate-share {
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
    padding-top: 12px;
    text-align: center;
}

.certificate-share > span {
    display: block;
    color: #888;
    font-size: 13px;
    margin-bottom: 8px;
}

.certificate-share > div {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.certificate-share a,
.certificate-share button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    background: #888;
    transition: transform .15s;
}

.certificate-share a:hover,
.certificate-share button:hover {
    transform: translateY(-2px);
    color: #fff;
}

.certificate-share .share-whatsapp { background: #25d366; }
.certificate-share .share-facebook { background: #1877f2; }
.certificate-share .share-x { background: #111; }
.certificate-share .share-linkedin { background: #0a66c2; }
.certificate-share button { background: #6c757d; }

.certificate-share small {
    display: block;
    margin-top: 8px;
    color: #1e7d46;
}

.certificate-next {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 13px;
    color: #555;
}

@media (max-width: 991px) {
    .certificate-head h1 {
        font-size: 20px;
    }
}

.certificate-share small[hidden] {
    display: none;
}

.certificate-actions-row {
    display: flex;
    gap: 8px;
}

.certificate-actions-row .btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Printing the certificate page prints only the certificate, on a landscape A4 page. */
@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    body {
        padding: 0 !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden;
    }

    .certificate-frame,
    .certificate-frame * {
        visibility: visible;
    }

    .certificate-frame {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .certificate-frame .certificate-image {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* ===================== Home page (2026 refresh) ===================== */
.home{--hm-navy:#222831;--hm-yellow:#F7CA18;--hm-yellow-d:#e0b40c;--hm-muted:#6b7280;--hm-line:#e7e9ee;--hm-bg:#f5f6f8;
    font-family:'NotoKufiArabic-Regular',Tahoma,sans-serif;color:var(--hm-navy);font-size:15px;line-height:1.8}
.home *{box-sizing:border-box}
.home a{text-decoration:none}
.home h1,.home h2,.home h3{font-family:'NotoKufiArabic-Bold',Tahoma,sans-serif;margin:0}
.home .hm-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.home a:focus-visible,.home button:focus-visible,.home input:focus-visible{outline:3px solid var(--hm-yellow);outline-offset:2px}

/* hero */
.hm-hero{background:url(../../images/intro-bg.jpg) center/cover no-repeat;border-bottom:4px solid var(--hm-yellow)}
.hm-shade{background:linear-gradient(180deg,rgba(34,40,49,.80),rgba(34,40,49,.92));padding:72px 0 0;text-align:center;color:#fff}
.hm-hero h1{font-size:40px;line-height:1.5;color:#fff}
.hm-lead{color:#d3d6dc;font-size:17px;margin:10px 0 30px}
.hm-search{display:flex;max-width:640px;margin:0 auto;background:#fff;border-radius:14px;padding:7px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.hm-search input{flex:1;min-width:0;border:0;background:none;font:15px 'NotoKufiArabic-Regular',Tahoma,sans-serif;padding:0 14px;color:var(--hm-navy)}
.hm-search input:focus{outline:none}
.hm-search button{border:0;background:var(--hm-yellow);color:var(--hm-navy);border-radius:10px;padding:10px 26px;font:15px 'NotoKufiArabic-Bold',Tahoma,sans-serif;cursor:pointer}
.hm-search button:hover{background:var(--hm-yellow-d)}
.hm-tags{margin-top:18px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:13px;color:#b9bec7}
.hm-tags a{color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px 14px}
.hm-tags a:hover,.hm-tags a:focus{border-color:var(--hm-yellow);color:var(--hm-yellow)}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.08)}
.hm-stats div{padding:20px 10px;border-left:1px solid rgba(255,255,255,.08)}
.hm-stats div:last-child{border-left:0}
.hm-stats strong{display:block;font:24px 'NotoKufiArabic-Bold',Tahoma,sans-serif;color:var(--hm-yellow);line-height:1.4}
.hm-stats span{color:#d3d6dc;font-size:14px}

/* sections */
.hm-sec{padding:64px 0}
.hm-alt{background:var(--hm-bg)}
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.hm-head.hm-center{justify-content:center;text-align:center}
.hm-head h2{font-size:28px;line-height:1.5}
.hm-head h2:after{content:"";display:block;width:48px;height:4px;border-radius:2px;background:var(--hm-yellow);margin-top:8px}
.hm-center h2:after{margin:8px auto 0}
.hm-head p{margin:6px 0 0;color:var(--hm-muted)}
.hm-more{color:var(--hm-navy);font-family:'NotoKufiArabic-Bold',Tahoma,sans-serif;font-size:14px;border-bottom:2px solid var(--hm-yellow)}
.hm-more:hover,.hm-more:focus{color:var(--hm-navy)}

/* ad slots: same places as before, clearly separated from the content */
.hm-ad{margin:0 0 28px}
.hm-ad:empty{display:none}
.hm-ad .google-ads{margin:0!important;padding:14px 12px 12px;border:1px dashed #d5d8de;border-radius:12px;background:#fff;min-height:110px;position:relative}
.hm-ad .google-ads:before{content:"\0625\0639\0644\0627\0646";position:absolute;top:-10px;right:14px;background:#fff;padding:0 8px;font-size:11px;color:#9aa0a8}

/* tabs */
.hm-tabs{display:flex;gap:6px;background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:5px;flex-wrap:wrap}
.hm-tabs button{border:0;background:none;border-radius:8px;padding:8px 16px;font:14px 'NotoKufiArabic-Bold',Tahoma,sans-serif;color:var(--hm-muted);cursor:pointer}
.hm-tabs button .fa{margin-left:5px}
.hm-tabs button:hover{color:var(--hm-navy)}
.hm-tabs button[aria-selected=true]{background:var(--hm-navy);color:#fff}
.hm-tabs button[aria-selected=true] .fa{color:var(--hm-yellow)}
.hm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hm-panel[hidden]{display:none}

/* course card */
.hm-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hm-line);border-radius:14px;overflow:hidden;color:var(--hm-navy);transition:transform .2s,box-shadow .2s}
.hm-card:hover,.hm-card:focus{transform:translateY(-4px);box-shadow:0 16px 34px rgba(34,40,49,.12);color:var(--hm-navy)}
.hm-thumb{position:relative;display:block;aspect-ratio:16/10;background:#e9ebef}
.hm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hm-lang{position:absolute;bottom:10px;right:10px;background:rgba(34,40,49,.85);color:#fff;font-size:11px;border-radius:6px;padding:1px 8px}
.hm-body{display:block;padding:14px 16px 10px;flex:1}
.hm-title{font:15px/1.7 'NotoKufiArabic-Bold',Tahoma,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:51px}
.hm-by{display:block;color:var(--hm-muted);font-size:13px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-by .fa{color:var(--hm-yellow-d)}
.hm-meta{display:flex;gap:14px;color:var(--hm-muted);font-size:13px;margin-top:8px}
.hm-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hm-line);padding:9px 16px;font-size:13px}
.hm-rate{font-family:'NotoKufiArabic-Bold',Tahoma,sans-serif}
.hm-rate .fa{color:var(--hm-yellow-d)}
.hm-rate small,.hm-students{color:var(--hm-muted);font-family:'NotoKufiArabic-Regular',Tahoma,sans-serif}

/* categories */
.hm-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hm-cat{position:relative;display:flex;align-items:flex-end;height:150px;border-radius:14px;overflow:hidden;background:var(--hm-navy) center/cover no-repeat;color:#fff}
.hm-cat:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,rgba(34,40,49,.92) 10%,rgba(34,40,49,.35));transition:background .2s}
.hm-cat:hover:before,.hm-cat:focus:before{background:linear-gradient(0deg,rgba(34,40,49,.95) 10%,rgba(34,40,49,.6))}
.hm-cat:hover,.hm-cat:focus{color:#fff}
.hm-cat-in{position:relative;display:flex;align-items:center;gap:12px;padding:16px;width:100%}
.hm-ico{width:42px;height:42px;border-radius:10px;background:var(--hm-yellow);color:var(--hm-navy);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.hm-cat b{display:block;font:17px/1.5 'NotoKufiArabic-Bold',Tahoma,sans-serif}
.hm-cat small{color:#c9cdd4;font-size:13px}

/* how it works */
.hm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.hm-steps:before{content:"";position:absolute;top:44px;right:16%;left:16%;border-top:2px dashed #d5d8de}
.hm-step{text-align:center;padding:10px 18px;position:relative}
.hm-num{width:68px;height:68px;margin:0 auto 16px;border-radius:50%;background:#fff;border:3px solid var(--hm-yellow);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--hm-navy);position:relative;z-index:1}
.hm-num em{position:absolute;top:-6px;left:-6px;width:26px;height:26px;border-radius:50%;background:var(--hm-navy);color:var(--hm-yellow);font:13px/26px 'NotoKufiArabic-Bold',Tahoma,sans-serif;font-style:normal}
.hm-step h3{font-size:18px;margin-bottom:6px}
.hm-step p{color:var(--hm-muted);margin:0;font-size:14px}

/* certificate */
.hm-cert{background:var(--hm-navy);color:#fff;padding:72px 0;overflow:hidden}
.hm-cert .hm-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.hm-cert h2{font-size:30px;line-height:1.55;color:#fff}
.hm-cert p{color:#c9cdd4;margin:14px 0 22px}
.hm-cert ul{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.hm-cert li{color:#e6e8ec;font-size:14px}
.hm-cert li .fa{color:var(--hm-yellow);margin-left:8px;width:16px}
.hm-btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:10px 22px;font:15px 'NotoKufiArabic-Bold',Tahoma,sans-serif;border:2px solid var(--hm-yellow);margin-bottom:8px}
.hm-btn-y{background:var(--hm-yellow);color:var(--hm-navy)}
.hm-btn-y:hover,.hm-btn-y:focus{background:var(--hm-yellow-d);border-color:var(--hm-yellow-d);color:var(--hm-navy)}
.hm-btn-o{color:#fff;border-color:rgba(255,255,255,.35);margin-right:10px}
.hm-btn-o:hover,.hm-btn-o:focus{border-color:var(--hm-yellow);color:var(--hm-yellow)}
.hm-cert-img{position:relative}
.hm-cert-img img{width:100%;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-2deg);border:6px solid #fff}
.hm-badge{position:absolute;bottom:-18px;right:24px;background:var(--hm-yellow);color:var(--hm-navy);border-radius:12px;padding:10px 18px;font:15px 'NotoKufiArabic-Bold',Tahoma,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.3)}

/* register CTA, flush with the footer */
.hm-cta{background:var(--hm-yellow);padding:44px 0}
.hm-cta .hm-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hm-cta h2{font-size:26px;line-height:1.6;color:var(--hm-navy)}
.hm-cta .hm-btn{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff;padding:12px 34px;margin:0}
.hm-cta .hm-btn:hover,.hm-cta .hm-btn:focus{background:#11151b;color:#fff}
.home ~ .footer{margin-top:0}

@media (max-width:991px){
    .hm-grid,.hm-cats{grid-template-columns:repeat(2,1fr)}
    .hm-cert .hm-wrap{grid-template-columns:1fr}
}
@media (max-width:600px){
    .hm-shade{padding-top:44px}
    .hm-hero h1{font-size:28px}
    .hm-lead{font-size:15px}
    .hm-search button{padding:10px 16px}
    .hm-stats{grid-template-columns:repeat(2,1fr)}
    .hm-stats div:nth-child(2){border-left:0}
    .hm-stats div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
    .hm-sec{padding:44px 0}
    .hm-head h2{font-size:23px}
    .hm-tabs{flex-wrap:nowrap;overflow-x:auto;width:100%}
    .hm-tabs button{white-space:nowrap}
    .hm-grid{gap:12px}
    .hm-body{padding:10px 10px 8px}
    .hm-title{font-size:13px;min-height:44px}
    .hm-meta{flex-direction:column;gap:0;font-size:12px}
    .hm-foot{padding:7px 10px;font-size:12px}
    .hm-cats{gap:12px}
    .hm-cat{height:120px}
    .hm-cat-in{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}
    .hm-ico{width:34px;height:34px;font-size:15px}
    .hm-cat b{font-size:14px}
    .hm-steps{grid-template-columns:1fr;gap:12px}
    .hm-steps:before{display:none}
    .hm-cert{padding:52px 0}
    .hm-cert h2{font-size:24px}
    .hm-cert ul{grid-template-columns:1fr}
    .hm-cta{text-align:center}
    .hm-cta .hm-wrap{justify-content:center}
    .hm-cta h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.home *{transition:none!important}}

/* Self-hosted fonts (from Google Fonts, OFL licence) */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/web/ibm-plex-sans-arabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/web/noto-kufi-arabic-400-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/web/noto-kufi-arabic-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===================== Fonts: hybrid (2026 refresh) =====================
   IBM Plex Sans Arabic for text and UI, Noto Kufi Arabic (variable 400-700)
   only for page and section headings. Self-hosted woff2, arabic + latin subsets. */

/* 1. Everything except icon fonts -> Plex, regular. :where() keeps this rule's
      specificity low so the heading rules below can win. */
html body,
html body :where(*:not(.fa):not(.glyphicon):not([class^="mdi"]):not([class*=" mdi"]):not([class^="devicon"])) {
    font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif !important;
    font-weight: 400;
}
/* style.css rules that force a font with !important at higher specificity */
html body .form-group .form-control,
html body .btn-labeled,
html body ul.pagination,
html body ul.pagination a {
    font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif !important;
}

/* 2. Medium (500): interactive and label-like UI */
html body .navbar-nav > li > a,
html body .dropdown-menu > li > a,
html body .btn,
html body button,
html body label,
html body b,
html body strong,
html body .hm-tabs button,
html body .hm-btn,
html body .hm-search button,
html body .hm-more,
html body .hm-cat b,
html body .hm-rate,
html body .lessons-list .lesson-title,
html body .comment-username,
html body .rating-username { font-weight: 500 !important; }

/* 3. Semi-bold (600) Plex: card titles and small section labels */
html body .hm-title,
html body .course-heading,
html body .widget h3,
html body .lessons-list h3,
html body .share-course h3,
html body .reviews-list h3,
html body .notifications h3,
html body .footer h3,
html body .terms-box h4,
html body .about h4,
html body .form-page h3 { font-weight: 600 !important; }
html body .hm-title { font-size: 16px; line-height: 1.65; }

/* 4. Noto Kufi only for page and section headings, balanced weight */
html body h1,
html body .hm-head h2,
html body .hm-cert h2,
html body .hm-cta h2,
html body .big-title h2,
html body .page-heading h3,
html body .form-page .page-title,
html body .profile-header h3,
html body .errorPage h3,
html body .certificate-head h1,
html body .hm-step h3 {
    font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif !important;
    font-weight: 600 !important;
}
html body .hm-step h3 { font-weight: 500 !important; }

/* 5. The one emphasis kept fully bold: headline numbers */
html body .hm-stats strong {
    font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif !important;
    font-weight: 700 !important;
}
html body .hm-lead { font-size: 18px; }

/* ===================== Navbar (2026 refresh): search in the bar + explore menu ===================== */
.cv-nav{background:#222831;border:0;box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 20px rgba(0,0,0,.18);min-height:70px;max-height:none!important}
.cv-nav .cv-brand{padding:15px 0 15px 26px;height:70px}
.cv-nav .cv-brand img{height:38px}
.cv-nav .navbar-nav > li > a{color:#d7dae0!important;font-size:14px!important;padding:25px 14px 22px!important;border-bottom:3px solid transparent!important;background:none!important;line-height:20px;transition:color .2s,border-color .2s!important}
.cv-nav .navbar-nav > li > a:hover,.cv-nav .navbar-nav > li > a:focus,.cv-nav .navbar-nav > .open > a{color:#fff!important;border-bottom-color:#F7CA18!important;background:none!important}
.cv-caret{font-size:12px;margin-right:3px;opacity:.7}
.cv-nav .navbar-toggle{width:42px;height:42px;padding:0;margin:13px 0 0 0;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px;background:rgba(255,255,255,.08)!important;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.cv-nav .navbar-toggle:hover,.cv-nav .navbar-toggle:focus-visible{background:rgba(255,255,255,.16)!important;border-color:rgba(247,202,24,.6)!important}
.cv-nav .navbar-toggle:focus{outline:0}
.cv-nav .navbar-toggle:focus-visible{box-shadow:0 0 0 2px #F7CA18}
.cv-burger{display:flex;flex-direction:column;gap:4px;width:20px}
.cv-burger i{display:block;height:2.5px;border-radius:2px;background:#fff}
.cv-burger i:nth-child(2){width:70%;margin-right:auto;background:#F7CA18}
@media (min-width:768px){.cv-nav .navbar-toggle{display:none}}

/* icon buttons (notifications) */
.cv-nav .navbar-nav > li > a.cv-icon-btn{padding:17px 8px!important;border:0!important;position:relative}
.cv-nav .cv-icon-btn > .fa{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);font-size:15px}
.cv-nav .cv-icon-btn:hover > .fa{background:rgba(247,202,24,.18);color:#F7CA18}
.cv-badge{position:absolute;top:13px;left:4px;min-width:18px;height:18px;border-radius:9px;background:#F7CA18;color:#222831;font-size:11px;font-weight:600;line-height:18px;text-align:center;padding:0 4px}

/* guest buttons */
.cv-nav .navbar-nav > li > a.cv-login{padding:17px 12px!important;border:0!important;line-height:36px}
.cv-nav .navbar-nav > li > a.cv-register{margin:16px 6px 0 0;padding:0 18px!important;line-height:38px;border:0!important;border-radius:10px;background:#F7CA18!important;color:#222831!important;font-weight:600!important}
.cv-nav .navbar-nav > li > a.cv-register:hover,.cv-nav .navbar-nav > li > a.cv-register:focus{background:#e0b40c!important}

/* signed-in user */
.cv-nav .cv-user .userAvatar{width:30px;height:30px;border-radius:50%;object-fit:cover;margin:-5px 0 -5px 6px}

/* dropdown panels */
.cv-nav .cv-menu{border:0;border-radius:14px;box-shadow:0 18px 40px rgba(17,21,27,.25);padding:8px;min-width:220px;margin-top:0}
.cv-nav .cv-menu > li > a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#222831;font-size:14px;white-space:nowrap}
.cv-nav .cv-menu > li > a:hover,.cv-nav .cv-menu > li > a:focus{background:#f5f6f8;color:#222831}
.cv-nav .cv-user-menu > li > a .fa{width:18px;text-align:center;color:#8a9099}
.cv-nav .cv-menu .divider{margin:6px 0;background:#eceef1}
.cv-ci{width:30px;height:30px;border-radius:8px;background:#fff6d1;color:#a07c00;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.cv-menu .cv-menu-all{border-top:1px solid #eceef1;margin-top:6px;padding-top:6px}
.cv-menu .cv-menu-all a{justify-content:space-between;font-weight:600!important;color:#222831}
.cv-mega .cv-mega-head{font-size:12px;color:#9aa0a8;padding:2px 10px 8px}
.cv-mega small{display:block;color:#8a9099;font-size:12px;line-height:1.3}

/* search field */
.cv-search{position:relative}
.cv-search input{width:100%;color:#fff;font-size:14px}
.cv-search input::placeholder{color:#9aa0a8}

@media (min-width:769px){
  .cv-nav .navbar-collapse{display:flex!important;align-items:center}
  .cv-nav .navbar-collapse:before,.cv-nav .navbar-collapse:after{display:none}
  .cv-nav .cv-links{order:1}
  .cv-nav .cv-search{order:2;flex:1;max-width:460px;margin:0 18px}
  .cv-nav .cv-actions{order:3;margin-right:auto!important}
  .cv-search > .fa{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#9aa0a8}
  .cv-search input{height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);padding:0 40px 0 14px;transition:background .2s,border-color .2s}
  .cv-search input:focus{outline:none;background:#fff;color:#222831;border-color:#F7CA18}

  /* explore mega menu, opened under its own button */
  .cv-nav .cv-mega{display:none;grid-template-columns:repeat(3,1fr);gap:2px;min-width:680px;padding:14px;right:0!important;left:auto!important;transform:none!important}
  .cv-nav .open > .cv-mega{display:grid}
  .cv-mega .cv-mega-head,.cv-mega .cv-menu-all{grid-column:1/-1}
  .cv-mega > li > a{white-space:normal;line-height:1.4}

  /* the small pointer sits under the button that opened the panel */
  .cv-nav .cv-menu::before{top:-8px;border-left-width:8px;border-right-width:8px;border-bottom-width:8px}
  .cv-nav .cv-mega::before{right:46px;left:auto}
  .cv-nav .cv-user-menu::before{left:24px;right:auto}
}

@media (max-width:768px){
  /* logo and burger share one row with equal side gutters, both centred vertically */
  .cv-nav .navbar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:70px;margin:0!important}
  .cv-nav .navbar-header:before,.cv-nav .navbar-header:after{display:none}
  .cv-nav .cv-brand{float:none;padding:0;height:auto;display:flex;align-items:center}
  .cv-nav .navbar-toggle{float:none;margin:0;order:2}
  .cv-nav .navbar-collapse{border:0;box-shadow:none;max-height:none}
  .cv-search{padding:10px 0}
  .cv-search > .fa{display:none}
  .cv-search input{height:42px;border-radius:10px;border:0;padding:0 12px;background:#fff;color:#222831}
  .cv-nav .navbar-nav{margin:0 -15px}
  .cv-nav .navbar-nav > li > a{padding:10px 15px!important;border-bottom:0!important}
  .cv-nav .navbar-nav > li > a.cv-register{margin:6px 15px 12px;text-align:center}
  .cv-nav .navbar-nav > li > a.cv-icon-btn{padding:6px 15px!important}
  .cv-nav .open .cv-menu{background:#fff;margin:0 15px 8px}
  .cv-nav .open .cv-menu > li > a{color:#222831!important}
}

/* ===================== Footer (2026 refresh) ===================== */
.cv-footer{background:#161B26;margin-top:60px;padding:0;color:#aeb3bb;border-top:3px solid #F7CA18}
.cv-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:52px 0 40px}
.cv-flogo{height:40px;margin-bottom:16px}
.cv-about{font-size:14px;line-height:1.9;color:#aeb3bb;max-width:34em;margin:0 0 18px}
.cv-footer h3{color:#fff;font-size:16px!important;margin:6px 0 16px;padding-bottom:10px;position:relative}
.cv-footer h3:after{content:"";position:absolute;bottom:0;right:0;width:28px;height:3px;border-radius:2px;background:#F7CA18}
.cv-flinks{list-style:none;padding:0;margin:0}
.cv-flinks li{padding:5px 0}
.cv-flinks a{color:#aeb3bb;font-size:14px;transition:color .2s,padding .2s}
.cv-flinks a:hover,.cv-flinks a:focus{color:#F7CA18;text-decoration:none;padding-right:4px}
.cv-social{display:flex;gap:10px}
.cv-social a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;color:#d7dae0;font-size:16px;transition:all .2s}
.cv-social a:hover,.cv-social a:focus{background:#F7CA18;border-color:#F7CA18;color:#161B26;text-decoration:none}
.cv-bottom{border-top:1px solid rgba(255,255,255,.07);background:#11151d;padding:16px 0;font-size:13px}
.cv-bottom .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cv-bottom .container:before,.cv-bottom .container:after{display:none}
.cv-bottom a{color:#d7dae0}
.cv-bottom-links a{color:#8a9099;margin-right:16px}
.cv-bottom a:hover,.cv-bottom a:focus{color:#F7CA18;text-decoration:none}
@media (max-width:768px){
  .cv-fgrid{grid-template-columns:1fr 1fr;gap:28px 20px;padding:36px 0 28px}
  .cv-fbrand{grid-column:1/-1}
  .cv-bottom .container{justify-content:center;text-align:center}
}

/* small texts one step larger */
.hm-lang{font-size:12px}
.hm-meta,.hm-by,.hm-foot{font-size:14px}
@media (max-width:600px){.hm-meta,.hm-by,.hm-foot{font-size:12px}}
@media (max-width:768px){
  .cv-nav .open > .cv-mega{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .cv-nav .cv-mega .cv-mega-head,.cv-nav .cv-mega .cv-menu-all{grid-column:1/-1}
  .cv-nav .cv-mega > li > a{white-space:normal;line-height:1.4;padding:7px 6px;gap:8px}
}

/* ===================== Course page (2026 refresh): learning path + syllabus ===================== */
.cs{background:var(--hm-bg);padding-bottom:56px}
.cs h1{font-size:32px;line-height:1.5;margin:6px 0 12px;color:#fff}
.cs-h{font-size:19px!important;margin:0 0 16px!important;position:relative;padding-bottom:8px;color:var(--hm-navy)}
.cs-h:after{content:"";position:absolute;bottom:0;right:0;width:36px;height:3px;border-radius:2px;background:var(--hm-yellow)}
.cs-stars{color:var(--hm-yellow);letter-spacing:1px;font-size:14px}
.cs button{font-family:inherit}

/* hero */
.cs-hero{background:var(--hm-navy);color:#fff;padding:26px 0 40px}
.cs-crumbs{font-size:13px;color:#9aa0a8;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cs-crumbs a{color:inherit}
.cs-crumbs a:hover,.cs-crumbs a:focus{color:var(--hm-yellow)}
.cs-hero-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center;margin-top:12px}
.cs-lead{color:#c9cdd4;font-size:16px;margin:0 0 14px}
.cs-meta{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;color:#d7dae0;font-size:14px}
.cs-meta .fa{color:var(--hm-yellow);margin-left:4px}
.cs-meta a{color:#fff}
.cs-meta a:hover,.cs-meta a:focus{color:var(--hm-yellow)}
.cs-rate b{color:var(--hm-yellow);font-size:16px}
.cs-rate small{color:#9aa0a8}
.cs-path{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.cs-path-step{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:7px 0}
.cs-path-step .fa{grid-row:span 2;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#c9cdd4}
.cs-path-step.on .fa{background:var(--hm-yellow);border-color:var(--hm-yellow);color:var(--hm-navy)}
.cs-path-step.done .fa{background:#62AC15;border-color:#62AC15;color:#fff}
.cs-path-step small{color:#9aa0a8;font-size:13px}
.cs .cs-cta{display:flex;justify-content:center;width:100%;margin:12px 0 0;cursor:pointer}
.cs .cs-cta[disabled]{opacity:.7;cursor:wait}
.cs-login{margin:10px 0 0;text-align:center;font-size:14px;color:#c9cdd4}
.cs-login a{color:var(--hm-yellow)}
.cs-progress{margin-top:10px}
.cs-progress-txt{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#d7dae0;margin-bottom:6px}
.cs-progress-txt a{color:#9aa0a8;text-decoration:underline}
.cs-progress-txt a:hover,.cs-progress-txt a:focus{color:#ff8a80}
.cs-progress-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.cs-progress-bar i{display:block;height:100%;background:var(--hm-yellow)}

/* body */
.cs-body{display:grid;grid-template-columns:1fr 340px;gap:26px;margin-top:28px;align-items:start}
.cs-body:before,.cs-body:after{display:none}
.cs-main{min-width:0}
.cs-sec,.cs-box{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:22px;margin-bottom:20px}
.cs-box{padding:20px}
.cs-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cs-sec-head span{color:var(--hm-muted);font-size:14px}

/* syllabus: a dashed path that ends at the certificate */
.cs-lessons{list-style:none;padding:0;margin:0;position:relative}
.cs-lessons:before{content:"";position:absolute;top:20px;bottom:20px;right:31px;border-right:2px dashed #dfe2e7}
.cs-lessons a,.cs-goal{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:10px;color:var(--hm-navy);position:relative}
.cs-lessons a:hover,.cs-lessons a:focus{background:#fffbea;color:var(--hm-navy)}
.cs-ln{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #dfe2e7;color:var(--hm-muted);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;position:relative}
.cs-lessons li:first-child .cs-ln,.cs-lessons a:hover .cs-ln{background:var(--hm-yellow);border-color:var(--hm-yellow);color:var(--hm-navy)}
.cs-lessons li.done .cs-ln{background:#62AC15;border-color:#62AC15;color:#fff}
.cs-lessons li.done .cs-lt{color:var(--hm-muted)}
.cs-lt{flex:1;font-size:15px;min-width:0}
.cs-ld{color:var(--hm-muted);font-size:13px;white-space:nowrap;direction:ltr}
.cs-free{background:#e8f6dc;color:#3d7a0e;border-radius:6px;font-size:12px;padding:1px 8px;white-space:nowrap}
.cs-goal{background:#fff6d1;margin-top:6px;padding:14px 16px}
.cs-goal .cs-ln{background:var(--hm-navy)!important;border-color:var(--hm-navy)!important;color:var(--hm-yellow)!important}

/* sidebar */
.cs-thumb{width:100%;border-radius:10px;margin-bottom:14px;aspect-ratio:16/10;object-fit:cover;display:block}
.cs-inc{list-style:none;padding:0;margin:0 0 14px}
.cs-inc li{padding:5px 0;font-size:14px;color:#3d4450}
.cs-inc .fa{width:20px;color:var(--hm-yellow-d)}
.cs-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid var(--hm-line);border-radius:10px;padding:9px;background:#fff;color:var(--hm-navy);font-size:14px;cursor:pointer}
.cs-ghost:hover,.cs-ghost:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.cs-ghost.on{background:#fff6d1;border-color:#fff6d1}
.cs-ghost.on .fa{color:var(--hm-yellow-d)}
.cs-share{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hm-muted);margin-top:14px;flex-wrap:wrap}
.cs-share a,.cs-share button{height:34px;min-width:34px;border-radius:9px;border:1px solid var(--hm-line);background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--hm-navy);font-size:13px;cursor:pointer}
.cs-share button{padding:0 10px}
.cs-share a:hover,.cs-share a:focus,.cs-share button:hover,.cs-share button:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.cs-desc{color:#3d4450;line-height:2;font-size:14px;overflow-wrap:anywhere}
.cs-desc img{max-width:100%;height:auto}
.cs-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cs-tags a{background:#fff6d1;color:#7a5e00;border-radius:20px;padding:2px 12px;font-size:13px}
.cs-tags a:hover,.cs-tags a:focus{background:var(--hm-yellow);color:var(--hm-navy)}
.cs-inst{display:flex;gap:14px;align-items:flex-start}
.cs-inst img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff6d1}
.cs-inst small{display:block;color:var(--hm-muted);font-size:12px}
.cs-inst a{font:16px 'NotoKufiArabic-Bold',Tahoma,sans-serif;color:var(--hm-navy)}
.cs-inst a:hover,.cs-inst a:focus{color:var(--hm-yellow-d)}
.cs-inst p{color:var(--hm-muted);font-size:13px;margin:6px 0 0;line-height:1.8}
.cs-rbig{text-align:center}
.cs-rbig strong{display:block;font:44px/1.2 'NotoKufiArabic-Bold',Tahoma,sans-serif}
.cs-rbig small{display:block;color:var(--hm-muted);font-size:13px}
.cs-bars{margin:12px 0 14px}
.cs-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--hm-muted);margin:3px 0}
.cs-bar span{width:34px;white-space:nowrap}
.cs-bar .fa{color:var(--hm-yellow)}
.cs-bar b{flex:1;height:8px;border-radius:4px;background:#eef0f3;overflow:hidden}
.cs-bar b i{display:block;height:100%;background:var(--hm-yellow)}
.cs-bar em{width:36px;font-style:normal}
.cs-empty{color:var(--hm-muted);font-size:14px}
.cs-reviews{margin-top:14px}
.cs-review{border-top:1px solid var(--hm-line);padding:12px 0}
.cs-rhead{display:flex;align-items:center;gap:10px}
.cs-rhead img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.cs-rhead .cs-stars{margin-right:auto;font-size:12px}
.cs-review p{margin:6px 0 0;color:#3d4450;font-size:14px;overflow-wrap:anywhere}
.cs-more{display:inline-block;margin-top:8px;color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow);font-size:14px}
.cs-more:hover,.cs-more:focus{color:var(--hm-navy)}
/* Course page: student reviews under the syllabus (summary strip + review cards) */
.rv .cs-sec-head{align-items:center}
.rv .cs-sec-head .cs-more{margin:0 0 16px}
.rv-sum{display:flex;align-items:center;gap:28px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--hm-line)}
.rv-sum .cs-rbig{flex:none;min-width:130px}
.rv-sum .cs-bars{flex:1;max-width:420px;margin:0}
.rv-sum .add-rating-btn{margin:0}
.rv-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rv-list .cs-review{border:1px solid var(--hm-line);border-radius:12px;padding:14px;background:#fafbfc}
.rv-list .cs-review:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:767px){
  .rv-sum{flex-direction:column;align-items:stretch;gap:12px}
  .rv-sum .cs-bars{max-width:none}
  .rv-list{grid-template-columns:1fr}
}
/* All reviews page (reviews.php): dark hero with the summary, filter chips, review cards */
.rp{background:var(--hm-bg);padding-bottom:56px}
.rp-hero{background:var(--hm-navy);color:#fff;padding:24px 0 34px}
.rp-grid{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;margin-top:12px}
.rp-course{display:flex;gap:16px;align-items:center}
.rp-course img{width:150px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;flex:none}
.rp-course h1{color:#fff;font-size:24px;margin:0 0 6px;line-height:1.5;overflow-wrap:anywhere}
.rp-course p{color:#c9cdd4;margin:0 0 12px;font-size:14px}
.rp .rp-course .hm-btn{margin:0}
.rp-sum{display:flex;align-items:center;gap:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px}
.rp-sum .cs-rbig strong{color:#fff}
.rp-sum .cs-rbig small,.rp-sum .cs-bar{color:#c9cdd4}
.rp-sum .cs-bars{flex:1;margin:0}
.rp-sum .cs-bar{border-radius:6px;padding:2px 4px;margin:2px -4px}
.rp-sum .cs-bar b{background:rgba(255,255,255,.14)}
.rp-sum .cs-bar:hover,.rp-sum .cs-bar:focus,.rp-sum .cs-bar.on{background:rgba(247,202,24,.14);color:#fff}
.rp-body{padding-top:26px}
.rp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rp-chips a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hm-line);background:#fff;border-radius:20px;padding:6px 14px;color:var(--hm-navy);font-size:14px}
.rp-chips a .fa-star{color:var(--hm-yellow)}
.rp-chips a small{color:var(--hm-muted);font-size:12px}
.rp-chips a:hover,.rp-chips a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.rp-chips a.on{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff}
.rp-chips a.on small{color:#c9cdd4}
.rp-list{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px}
.rp-list .cs-review{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:16px;min-height:120px}
.rp-list .cs-review p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:12px 0;line-height:1.8}
.rp-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--hm-line)}
.rp-foot .cs-stars{font-size:13px}
.rp-foot b{font-size:13px;color:var(--hm-navy)}
.rp-who{display:flex;flex-direction:column;line-height:1.4}
.rp-who time{font-size:12px;color:var(--hm-muted)}
.rp-none{background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:24px;text-align:center;color:var(--hm-muted)}
.rp-none a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.rp .pagination{margin-top:24px}
@media (max-width:991px){
  .rp-grid{grid-template-columns:1fr;gap:20px}
  .rp-list{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .rp-list{grid-template-columns:1fr;grid-auto-rows:auto}
  .rp-list .cs-review{min-height:0}
  .rp-list .cs-rhead + .rp-foot{margin-top:12px}
  .rp-course{align-items:flex-start;gap:12px}
  .rp-course img{width:84px}
  .rp-course h1{font-size:19px}
  .rp-sum{flex-direction:column;align-items:stretch;gap:12px}
}
.cs-related{margin-top:16px}

@media (max-width:991px){
  .cs-hero-grid,.cs-body{grid-template-columns:1fr}
  .cs-hero-grid{gap:22px}
}
@media (max-width:600px){
  .cs h1{font-size:24px}
  .cs-lead{font-size:15px}
  .cs-sec{padding:16px 12px}
  .cs-lessons:before{right:27px}
  .cs-lessons a,.cs-goal{padding:10px 12px;gap:10px}
  .cs-lt{font-size:14px}
}

/* ===================== Lesson page (2026 refresh): player card + sticky playlist ===================== */
.ls{background:var(--hm-bg);padding:18px 0 56px}
.ls h1{font-size:26px;line-height:1.5;margin:0 0 8px;color:var(--hm-navy)}
.ls button{font-family:inherit}
.ls-crumbs{font-size:13px;color:#9aa0a8;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ls-crumbs a{color:inherit}
.ls-crumbs a:hover,.ls-crumbs a:focus{color:var(--hm-navy)}
.ls .hm-ad{margin-bottom:20px}
.ls-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"top side" "rest side";column-gap:24px;align-items:start}
.ls-grid:before,.ls-grid:after{display:none}
.ls-top{grid-area:top;min-width:0}
.ls-rest{grid-area:rest;min-width:0}
.ls-card{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:20px;margin-bottom:20px}
.ls-h{font-size:18px!important;margin:0 0 14px!important;color:var(--hm-navy)}
.ls-h small{background:var(--hm-bg);border-radius:10px;padding:0 8px;font-size:12px;color:var(--hm-muted);margin-right:6px}
.ls-meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--hm-muted);font-size:14px}
.ls-meta .fa{color:var(--hm-yellow-d);margin-left:4px}
.ls-meta a{color:var(--hm-navy)}
.ls-meta a:hover,.ls-meta a:focus{color:var(--hm-yellow-d)}

/* player */
.ls-pcard{border-radius:12px;box-shadow:0 14px 30px rgba(34,40,49,.15);margin-bottom:16px;background:#1b2027}
.ls-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px 12px 0 0;overflow:hidden}
.ls-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ls-bar{height:5px;background:#3a414c}
.ls-bar #YouTube-player-progress{height:100%;width:0;background:var(--hm-yellow);transition:width .3s linear}
.ls-ctrls{display:flex;align-items:center;gap:14px;color:#c9cdd4;padding:8px 12px;border-radius:0 0 12px 12px;flex-wrap:wrap}
.ls-btns{display:flex;gap:6px}
.ls-btns button{width:38px;height:36px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.ls-btns button:hover,.ls-btns button:focus{background:var(--hm-yellow);color:var(--hm-navy)}
.ls-time{font-size:13px;direction:ltr}
.ls-report-wrap{margin-right:auto;font-size:13px}
.ls-report{border:0;background:none;color:#9aa0a8;font-size:13px;cursor:pointer;padding:6px 0}
.ls-report:hover,.ls-report:focus{color:#ff8a80}
.ls .report{display:none;color:#d7dae0;font-size:13px;margin:0;padding:0;background:none;border:0}
.ls .report a{color:#ff8a80;text-decoration:underline}

/* prev / next */
.ls-nav{display:flex;justify-content:space-between;gap:14px;margin-top:16px}
.ls-nav a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:10px 14px;color:var(--hm-navy);max-width:48%;font-size:14px;min-width:0}
.ls-nav a:hover,.ls-nav a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.ls-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-nav small{display:block;color:var(--hm-muted);font-size:12px}
.ls-nav .fa{font-size:22px;color:var(--hm-yellow-d)}
.ls-next{text-align:left}

/* playlist card */
.ls-pl{grid-area:side;background:#fff;border:1px solid var(--hm-line);border-radius:14px;overflow:hidden;position:sticky;top:86px;max-height:calc(100vh - 110px);display:flex;flex-direction:column}
.ls-pl-head{display:flex;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--hm-line);color:var(--hm-navy)}
.ls-pl-head:hover,.ls-pl-head:focus{color:var(--hm-navy);background:#fffbea}
.ls-pl-head img{width:64px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.ls-pl-head small{display:block;color:var(--hm-muted);font-size:12px}
.ls-pl-head b{font-size:14px}
.ls-prog{padding:12px 14px;border-bottom:1px solid var(--hm-line)}
.ls-prog-t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.ls-prog-b{height:6px;border-radius:3px;background:#e7e9ee;overflow:hidden}
.ls-prog-b i{display:block;height:100%;background:var(--hm-yellow)}
.ls-prog-g{font-size:13px;color:var(--hm-muted);background:#fff6d1;border-radius:8px;padding:8px 10px;line-height:1.8}
.ls-prog-g a,.ls-prog-g button{color:var(--hm-navy);border:0;border-bottom:2px solid var(--hm-yellow);background:none;padding:0;font-size:13px;cursor:pointer}
.ls-list{list-style:none;margin:0;padding:6px 0;overflow:auto;position:relative}
.ls-list a{display:flex;align-items:center;gap:12px;padding:9px 14px;color:var(--hm-navy);font-size:14px}
.ls-list a:hover,.ls-list a:focus{background:#fffbea;color:var(--hm-navy)}
.ls-n{width:28px;height:28px;border-radius:50%;border:2px solid #cfd3da;color:var(--hm-muted);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.ls-t{flex:1;min-width:0}
.ls-d{font-size:12px;color:var(--hm-muted);direction:ltr}
.ls-list li.cur a{background:rgba(247,202,24,.16);font-weight:600}
.ls-list li.cur .ls-n{background:var(--hm-yellow);border-color:var(--hm-yellow);color:var(--hm-navy);font-size:10px}
.ls-list li.done .ls-n{background:#62AC15;border-color:#62AC15;color:#fff}

/* comments */
.ls-cform textarea{width:100%;min-height:90px;border:1px solid var(--hm-line);border-radius:10px;padding:10px 12px;font:inherit;resize:vertical;display:block}
.ls-cform textarea:focus{border-color:var(--hm-yellow);outline:0;box-shadow:0 0 0 3px rgba(247,202,24,.2)}
.ls .ls-cform .hm-btn{margin:10px 0 0;border:0;cursor:pointer}
.ls-guest{background:var(--hm-bg);border-radius:10px;padding:12px 14px;color:var(--hm-muted);font-size:14px}
.ls-guest a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.ls-empty{color:var(--hm-muted);font-size:14px;margin:14px 0 0}
.ls-comment{display:flex;gap:12px;border-top:1px solid var(--hm-line);padding:14px 0 4px;margin-top:10px}
.ls-comment img{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover}
.ls-comment > div{min-width:0}
.ls-comment small{color:var(--hm-muted);font-size:12px;margin-right:6px}
.ls-comment p{margin:4px 0 0;font-size:14px;color:#3d4450;overflow-wrap:anywhere;line-height:1.9}

@media (max-width:991px){
  .ls-grid{grid-template-columns:1fr;grid-template-areas:"top" "side" "rest"}
  .ls-pl{position:static;max-height:420px;margin-bottom:20px}
}
@media (max-width:600px){
  .ls{padding-top:12px}
  .ls h1{font-size:21px}
  .ls-card{padding:16px 14px}
  .ls-nav a{max-width:none;flex:1}
  .ls-ctrls{gap:10px;padding:8px}
  .ls-btns button{width:36px}
}

/* AdSense: hide slots Google could not fill, frame included (Google's recommended selector) */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.hm-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}

/* ===================== Browse pages (2026 refresh): categories, category, subject, search ===================== */
.br{background:var(--hm-bg);padding-bottom:56px}
.br button{font-family:inherit}
.br-hero{background:var(--hm-navy);color:#fff;padding:22px 0 30px}
.br-crumbs{font-size:13px;color:#9aa0a8;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.br-crumbs a{color:inherit}
.br-crumbs a:hover,.br-crumbs a:focus{color:var(--hm-yellow)}
.br-hero-in{display:flex;gap:18px;align-items:center}
.br h1{color:#fff;font-size:32px;line-height:1.5;margin:0 0 6px;overflow-wrap:anywhere}
.br-lead{color:#c9cdd4;font-size:15px;margin:0 0 6px;max-width:760px;line-height:1.9}
.br-count{color:#d7dae0;font-size:14px;margin:0}
.br-count b{color:var(--hm-yellow);font-weight:600}
.br-hicon{width:76px;height:76px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:46px;flex:none;line-height:1}
.br-body{padding-top:24px}
.br-body:before,.br-body:after{display:none}
.br-h{font-size:19px!important;margin:6px 0 16px!important;color:var(--hm-navy)}

/* toolbar: count + sort */
.br-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.br-found{color:var(--hm-muted);font-size:14px}
.br-found b{color:var(--hm-navy)}
.br-sort{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--hm-muted);flex-wrap:wrap}
.br-sort a{border:1px solid var(--hm-line);background:#fff;border-radius:20px;padding:5px 14px;font-size:13px;color:var(--hm-navy)}
.br-sort a:hover,.br-sort a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.br-sort a.on{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff}
.br-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.br-pager a{min-width:40px;height:40px;padding:0 6px;border-radius:10px;border:1px solid var(--hm-line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--hm-navy)}
.br-pager a:hover,.br-pager a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.br-pager a.on{background:var(--hm-yellow);border-color:var(--hm-yellow);font-weight:700}
.br-pager span{color:var(--hm-muted)}
.br-empty{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:40px 20px;text-align:center;color:var(--hm-muted)}
.br-empty > .fa{font-size:34px;color:var(--hm-yellow-d);display:block;margin-bottom:10px}
.br-empty b{display:block;color:var(--hm-navy);font-size:18px;margin-bottom:6px;overflow-wrap:anywhere}
.br-empty p{margin:0 0 14px}
.br-empty .hm-btn{margin:0}

/* categories page */
.br-cats{margin-top:0}

/* category: subject tiles */
.br-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:34px}
.br-tile{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:18px 10px;text-align:center;color:var(--hm-navy);display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s,box-shadow .2s}
.br-tile:hover,.br-tile:focus{transform:translateY(-3px);box-shadow:0 12px 26px rgba(34,40,49,.1);color:var(--hm-navy);border-color:var(--hm-yellow)}
.br-ti{font-size:40px;line-height:1;height:46px;display:flex;align-items:center}
.br-tile b{font-size:15px}
.br-tile small{color:var(--hm-muted);font-size:12px}

/* search: centered hero, search box and chips */
.br-search-page .br-hero{text-align:center;padding:30px 0 34px}
.br-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:6px;margin:16px auto 0;max-width:640px}
.br-search .fa{color:var(--hm-muted);margin-right:8px}
.br-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16px;color:var(--hm-navy);background:none}
.br .br-search .hm-btn{margin:0;border:0;cursor:pointer}
.br-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.br-chips a{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--hm-line);border-radius:22px;padding:6px 16px;color:var(--hm-navy);font-size:14px}
.br-chips a small{color:var(--hm-muted);font-size:12px}
.br-chips a:hover,.br-chips a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.br-chips a.on{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff}
.br-chips a.on small{color:var(--hm-yellow)}
.br-chips .fa{color:var(--hm-yellow-d)}
.br-suggest{margin-top:16px}

/* subject: filter sidebar + course rows */
.br-cat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.br-cat:before,.br-cat:after{display:none}
.br-filters{min-width:0}
.br-fwrap > summary{display:none}
.br-fbox{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:14px;margin-bottom:14px}
.br-fbox > b{display:block;margin-bottom:8px;color:var(--hm-navy)}
.br-fbox a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;color:#3d4450;font-size:14px}
.br-fbox a:hover,.br-fbox a:focus{background:#fffbea;color:var(--hm-navy)}
.br-fbox a i{font-size:16px;margin-left:4px}
.br-fbox a small{color:var(--hm-muted)}
.br-fbox a.on{background:#fff6d1;font-weight:600;color:var(--hm-navy)}
.br-flist .br-extra{display:none}
.br-flist.all .br-extra{display:flex}
.br-more{border:0;background:none;color:var(--hm-navy);font-size:13px;border-bottom:2px solid var(--hm-yellow);padding:0;margin:8px 8px 0;cursor:pointer}
.br-radio{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid #c3c7ce;vertical-align:-2px;margin-left:6px!important}
.br-opt.on .br-radio{border:5px solid var(--hm-navy)}
.br-reset{display:inline-flex;align-items:center;gap:6px;color:#c0392b;font-size:14px;margin:0 8px 14px}
.br-reset:hover,.br-reset:focus{color:#962d22}
.br-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hm-yellow-d);margin-right:4px}
.br-main{min-width:0}
.br-rows{display:flex;flex-direction:column;gap:14px}
.br-row{display:flex;gap:16px;background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:12px;color:var(--hm-navy);align-items:center;transition:border-color .2s,box-shadow .2s}
.br-row:hover,.br-row:focus{border-color:var(--hm-yellow);box-shadow:0 10px 24px rgba(34,40,49,.08);color:var(--hm-navy)}
.br-row-img{position:relative;flex:none;width:220px}
.br-row-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block}
.br-row-img .hm-lang{bottom:8px;left:8px;right:auto;top:auto}
.br-row-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.br-row-t{font:17px/1.6 'NotoKufiArabic-Bold',Tahoma,sans-serif}
.br-row-d{color:var(--hm-muted);font-size:13px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.br-row-s{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;min-width:90px}
.br-row-s small{color:var(--hm-muted);font-size:12px}

@media (max-width:991px){
  .br-cat{grid-template-columns:1fr}

  .br-fwrap > summary{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:10px 14px;font-weight:600;color:var(--hm-navy);cursor:pointer;list-style:none}
  .br-fwrap > summary::-webkit-details-marker{display:none}
  .br-fwrap[open] > summary{margin-bottom:12px}
}
@media (max-width:600px){
  .br h1{font-size:24px}
  .br-hicon{width:56px;height:56px;font-size:32px;border-radius:14px}
  .br-hero-in{align-items:flex-start}
  .br-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .br-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  .br-chips a{white-space:nowrap}
  .br-row{flex-direction:column;align-items:stretch}
  .br-row-img{width:100%}
  .br-row-s{flex-direction:row;justify-content:space-between;align-items:center}
  .br-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){.br-chips.br-suggest{flex-wrap:wrap;justify-content:center}}

/* Instructor page (instructor.php): dark hero with the profile and totals, then the course grid */
.in{background:var(--hm-bg);padding-bottom:56px}
.in .hm-by{display:none}
.in-hero{background:var(--hm-navy);color:#fff;padding:22px 0 30px}
.in-top{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:14px}
.in-ava{width:116px;height:116px;border-radius:50%;border:4px solid var(--hm-yellow);object-fit:cover;background:#fff;flex:none}
.in-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--hm-yellow);color:var(--hm-navy);font:44px/1 'NotoKufiArabic-Bold',Tahoma,sans-serif}
.in-info{min-width:0}
.in-role{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--hm-yellow);margin-bottom:4px}
.in-info h1{color:#fff;font-size:28px;margin:0 0 6px;line-height:1.4;overflow-wrap:anywhere}
.in-about{color:#c9cdd4;font-size:15px;max-width:640px}
.in-about p{margin:0;line-height:1.9}
.in-about.long:not(.open) p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.in-about button{background:none;border:0;padding:0;margin-top:4px;color:var(--hm-yellow);font-size:14px;cursor:pointer}
.in-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.in-topics a{font-size:13px;padding:3px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.25);color:#fff}
.in-topics a:hover,.in-topics a:focus{border-color:var(--hm-yellow);color:var(--hm-yellow)}
.in-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.in-stats li{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.in-stats b{font:20px/1.4 'NotoKufiArabic-Bold',Tahoma,sans-serif;color:#fff}
.in-stats b .fa{color:var(--hm-yellow);font-size:16px}
.in-stats span{font-size:12px;color:#c9cdd4}
.in-body{padding-top:28px}
.in-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.in .in-bar .br-h{margin:0!important}
.in-bar .br-h small{color:var(--hm-muted);font-size:14px;margin-right:4px}
@media (max-width:991px){
  .in-top{grid-template-columns:auto 1fr}
  .in-stats{grid-column:1/-1}
}
@media (max-width:767px){
  .in-top{grid-template-columns:1fr;text-align:center;justify-items:center}
  .in-info h1{font-size:22px}
  .in-ava{width:92px;height:92px}
  .in-letter{font-size:36px}
  .in-topics,.in-stats{justify-content:center}
  .in-stats{width:100%}
  .in-stats{gap:6px}
  .in-stats li{min-width:0;flex:1;padding:8px 4px}
  .in-stats b{font-size:16px;white-space:nowrap}
  .in-stats b .fa{font-size:13px}
}
/* Instructor dashboard (instructor-account.php, includes/instructor-head.php) */
.ia-hero{background:var(--hm-navy);color:#fff;padding:22px 0 0}
.ia-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ia-top .ia-ava{width:84px;height:84px;border-radius:50%;border:3px solid var(--hm-yellow);object-fit:cover;flex:none;font-size:34px}
.ia-kicker{color:var(--hm-yellow);font-size:13px}
.ia-top h1{color:#fff;font-size:24px;margin:2px 0 0;line-height:1.5;overflow-wrap:anywhere}
.ia-go{margin-right:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 14px;color:#fff;font-size:14px}
.ia-go:hover,.ia-go:focus{border-color:var(--hm-yellow);color:var(--hm-yellow)}
.ia-stats{display:flex;gap:22px;margin-top:14px;color:#c9cdd4;font-size:14px;flex-wrap:wrap}
.ia-stats b{color:var(--hm-yellow)}
.ia-body{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start;padding-top:26px}
.ia-body:before,.ia-body:after{display:none}
.ia-body .ac-panel{margin:0;min-width:0}
.ac-avatar .ia-ava-sm{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;font-size:28px}
.ia-area{align-items:stretch}
.ia-area textarea{border:0;outline:0;background:transparent;width:100%;padding:10px 14px;resize:vertical;min-height:90px;line-height:1.8;font:inherit;color:inherit}
.ia-count{display:block;color:var(--hm-muted);font-size:12px;margin-top:6px}
.ia-prev{position:sticky;top:90px}
.ia-prev h3{font-size:14px;color:var(--hm-muted);margin:0 0 10px}
.ia-card{background:var(--hm-navy);color:#fff;border-radius:14px;padding:20px;text-align:center}
.ia-card .ia-ava{width:76px;height:76px;border-radius:50%;border:3px solid var(--hm-yellow);object-fit:cover;font-size:30px}
.ia-role{display:block;color:var(--hm-yellow);font-size:12px;margin:10px 0 2px}
.ia-card h4{color:#fff;font-size:19px;margin:0 0 6px;overflow-wrap:anywhere}
.ia-card p{color:#c9cdd4;font-size:13px;line-height:1.8;margin:0;overflow-wrap:anywhere}
.ia-card p.empty{font-style:italic;opacity:.7}
.ia-note{font-size:12px;color:var(--hm-muted);margin-top:10px;line-height:1.8}
@media (max-width:991px){
  .ia-body{grid-template-columns:1fr}
  .ia-prev{position:static}
}
@media (max-width:767px){
  .ia-top .ia-ava{width:64px;height:64px;font-size:26px}
  .ia-top h1{font-size:20px}
  .ia-go{margin-right:0;width:100%;justify-content:center}
  .ia-stats{gap:14px;font-size:13px}
}
/* Add a course (new-course.php): three-step wizard inside the instructor dashboard */
.nc-body{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;padding-top:26px}
.nc-body:before,.nc-body:after{display:none}
.nc-main{min-width:0}
.nc .ac-panel{margin:0}
.nc .au-in textarea{display:block;width:100%;border:0;outline:0;background:transparent;padding:10px 14px;min-height:110px;font:inherit;color:inherit;resize:vertical;line-height:1.8}
.nc .au-captcha{margin:6px 0 16px}
.nc-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.nc-box{background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:18px 20px}
.nc-box h3{font-size:15px;color:var(--hm-navy);margin:0 0 12px}
.nc-rules{list-style:none;margin:0;padding:0}
.nc-rules li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14px;color:#3d4450}
.nc-rules .fa{color:#3d7a0e;margin-top:5px}
.nc-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.nc-steps li{position:relative;padding:0 38px 14px 0;font-size:14px;color:#3d4450;line-height:1.7}
.nc-steps li:before{counter-increment:s;content:counter(s);position:absolute;right:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--hm-navy);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.nc-steps li:not(:last-child):after{content:"";position:absolute;right:12px;top:28px;bottom:2px;width:2px;background:var(--hm-line)}
.nc-steps b{display:block;color:var(--hm-navy)}
.nc-instr{display:flex;align-items:center;gap:10px;background:var(--hm-bg);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:14px;color:var(--hm-muted)}
.nc-instr b{color:var(--hm-navy)}
.nc-instr .in-letter,.nc-instr img{width:34px;height:34px;border-radius:50%;object-fit:cover;font-size:15px;flex:none}
.nc-check{font-size:13px;margin:-6px 0 12px;line-height:1.7}
.nc-check.ok{color:#3d7a0e}
.nc-check.bad{color:#a93226}
.nc-track{display:flex;margin:0 0 22px;list-style:none;padding:0}
.nc-track li{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--hm-muted)}
.nc-track li em{font-style:normal;white-space:nowrap}
.nc-track li span{width:28px;height:28px;border-radius:50%;border:2px solid var(--hm-line);display:flex;align-items:center;justify-content:center;font-size:13px;background:#fff;flex:none}
.nc-track li:not(:last-child):after{content:"";flex:1;height:2px;background:var(--hm-line);margin:0 8px}
.nc-track li.on{color:var(--hm-navy);font-weight:600}
.nc-track li.on span{border-color:var(--hm-yellow);background:var(--hm-yellow);color:var(--hm-navy)}
.nc-track li.done span{border-color:var(--hm-navy);background:var(--hm-navy);color:#fff}
.nc-js .nc-pane{display:none}
.nc-js .nc-pane.on{display:block}
.nc-nav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.nc .nc-nav .hm-btn,.nc .nc-nav .ac-ghost{margin:0}
.nc-sum{background:var(--hm-bg);border-radius:12px;padding:6px 16px;margin:0 0 14px}
.nc-sum div{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--hm-line);font-size:14px}
.nc-sum div:first-child{border-top:0}
.nc-sum dt{width:120px;color:var(--hm-muted);flex:none;font-weight:400}
.nc-sum dd{margin:0;color:var(--hm-navy);overflow-wrap:anywhere;min-width:0}
.nc-sent{margin-top:20px!important}
.nc-sent ul{list-style:none;margin:0;padding:0}
.nc-sent li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hm-line)}
.nc-sent li:first-child{border-top:0;padding-top:0}
.nc-ico{width:40px;height:40px;border-radius:10px;background:#fdecea;color:#c4302b;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.nc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.nc-t b{color:var(--hm-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-t small{color:var(--hm-muted);font-size:12px}
.nc-st{font-size:12px;border-radius:20px;padding:4px 10px;white-space:nowrap}
.nc-st.wait{background:#fff6d1;color:#7a5c00}
.nc-st.done{background:#e8f6dc;color:#3d7a0e}
.nc-st.no{background:#fdecea;color:#b03a2e}
.nc-st.seen{background:#eef0f3;color:#4b5563}
@media (max-width:991px){
  .nc-body{grid-template-columns:1fr}
  .nc-side{position:static}
}
@media (max-width:767px){
  .nc-track li em{display:none}
  .nc-track li.on em{display:inline}
  .nc-track li:not(:last-child):after{min-width:18px}
  .nc-sum div{flex-direction:column;gap:2px}
  .nc .au-captcha{transform:scale(.92);transform-origin:right top}
}
/* ===================== Account pages (2026 refresh): login, register, forgot / reset password ===================== */
.au{background:var(--hm-bg);padding:40px 0 60px}
.au button{font-family:inherit}
.au-wrap:before,.au-wrap:after{display:none}
.au-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--hm-line);border-radius:18px;padding:30px 32px;box-shadow:0 16px 40px rgba(34,40,49,.08)}
.au-logo-link{display:block;width:56px;margin:0 auto 16px}
.au-logo{width:56px;height:auto;aspect-ratio:512/463;display:block}
.au h1{font-size:21px;color:var(--hm-navy);margin:0 0 6px;line-height:1.5}
.au-sub{color:var(--hm-muted);margin:0 0 20px;font-size:15px;line-height:1.8}
.au-tabs{display:flex;background:var(--hm-bg);border-radius:12px;padding:4px;margin-bottom:22px}
.au-tabs a{flex:1;text-align:center;padding:9px;border-radius:9px;color:var(--hm-muted);font-weight:600}
.au-tabs a:hover,.au-tabs a:focus{color:var(--hm-navy)}
.au-tabs a.on{background:#fff;color:var(--hm-navy);box-shadow:0 2px 8px rgba(34,40,49,.1)}
.au-f{margin-bottom:14px}
.au-f label{display:block;font-size:14px;color:var(--hm-navy);margin-bottom:6px;font-weight:600}
.au-in{display:flex;align-items:center;border:1px solid #d5d9df;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}
.au-in:focus-within{border-color:var(--hm-yellow);box-shadow:0 0 0 3px rgba(247,202,24,.22)}
.au-in input{flex:1;min-width:0;border:0;outline:0;background:none;padding:11px 14px;font:inherit;font-size:15px;color:var(--hm-navy);box-shadow:none}
.au-in input[dir=ltr]{text-align:left}
.au-eye{order:-1;border:0;background:none;color:var(--hm-muted);padding:0 12px;height:44px;cursor:pointer}
.au-eye:hover,.au-eye:focus{color:var(--hm-navy)}
.au-f small{display:block;color:var(--hm-muted);font-size:12px;margin-top:4px}
.au-forgot{display:inline-block;font-size:13px;color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow);margin:-4px 0 16px}
.au-forgot:hover,.au-forgot:focus{color:var(--hm-navy)}
.au-captcha{margin:4px 0 16px;min-height:78px;overflow:hidden}
.au .au-submit{display:flex;justify-content:center;width:100%;margin:0;border:0;padding:12px;font-size:16px;cursor:pointer}
.au-terms{font-size:12px;color:var(--hm-muted);margin:12px 0 0;text-align:center}
.au-terms a,.au-switch a,.au-alert a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.au-switch{text-align:center;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hm-line);color:var(--hm-muted);font-size:14px}
.au-alert{border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px;line-height:1.8}
.au-error{background:#fdecea;color:#a93226}
.au-success{background:#e8f6dc;color:#3d7a0e}
.au-mini{list-style:none;padding:0;margin:22px auto 0;display:flex;justify-content:center;gap:10px 24px;flex-wrap:wrap;color:var(--hm-muted);font-size:14px}
.au-mini .fa{color:var(--hm-yellow-d);margin-left:4px}

@media (max-width:600px){
  .au{padding:20px 0 40px}
  .au-card{padding:22px 18px;border-radius:14px}
  .au h1{font-size:19px}
  .au-captcha{transform:scale(.92);transform-origin:right top}
}
.au .au-in input:focus,.au .au-in input:focus-visible{outline:0!important;box-shadow:none!important}

/* ===================== Account pages (2026 refresh): my courses, certificates, favorites, notifications, settings ===================== */
.ac{background:var(--hm-bg);padding-bottom:56px}
.ac button{font-family:inherit}
.ac-body{padding-top:26px}
.ac-body:before,.ac-body:after{display:none}
.ac-narrow{max-width:none}
.ac-hero{background:var(--hm-navy);color:#fff;padding:28px 0 0}
.ac-me{display:flex;align-items:center;gap:16px}
.ac-me img{width:72px;height:72px;border-radius:50%;border:3px solid var(--hm-yellow);object-fit:cover;flex:none;background:#fff}
.ac-me h1{color:#fff;font-size:26px;margin:0 0 4px;line-height:1.5;overflow-wrap:anywhere}
.ac-stats{display:flex;gap:6px 18px;flex-wrap:wrap;color:#c9cdd4;font-size:14px}
.ac-stats b{color:var(--hm-yellow);font-size:16px}
.ac-htabs{display:flex;gap:4px;margin-top:20px;overflow-x:auto;scrollbar-width:none}
.ac-htabs::-webkit-scrollbar{display:none}
.ac-htabs a{color:#c9cdd4;padding:12px 16px;border-bottom:3px solid transparent;white-space:nowrap}
.ac-htabs a .fa{margin-left:5px}
.ac-htabs a small{color:#9aa0a8;margin-right:4px}
.ac-htabs a small.ac-new{background:#e74c3c;color:#fff;border-radius:10px;padding:0 7px}
.ac-htabs a:hover,.ac-htabs a:focus{color:#fff}
.ac-htabs a.on{color:#fff;border-bottom-color:var(--hm-yellow)}
.ac-htabs a.on .fa{color:var(--hm-yellow)}

.ac-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.ac-tabs a{border:1px solid var(--hm-line);background:#fff;border-radius:20px;padding:6px 16px;color:var(--hm-navy);font-size:14px}
.ac-tabs a small{color:var(--hm-muted);margin-right:4px}
.ac-tabs a:hover,.ac-tabs a:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.ac-tabs a.on{background:var(--hm-navy);border-color:var(--hm-navy);color:#fff}
.ac-tabs a.on small{color:var(--hm-yellow)}

/* continue where you left off */
.ac-continue{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--hm-line);border-radius:16px;padding:14px;margin-bottom:24px;box-shadow:0 10px 28px rgba(34,40,49,.06)}
.ac-continue img{width:180px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;flex:none}
.ac-continue > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ac-continue small{color:var(--hm-yellow-d);font-weight:600}
.ac-continue b{font-size:18px;color:var(--hm-navy)}
.ac-next{color:var(--hm-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .ac-continue .hm-btn{margin:0;white-space:nowrap}
.ac-bar{display:block;height:7px;border-radius:4px;background:#e7e9ee;overflow:hidden}
.ac-bar i{display:block;height:100%;background:var(--hm-yellow)}

/* course card with progress */
.ac-card .hm-title{color:var(--hm-navy)}
.ac-card .hm-title:hover,.ac-card .hm-title:focus{color:var(--hm-yellow-d)}
.ac-card .ac-prog{padding:0 16px 12px;display:block;margin-top:auto}
.ac-prog-t{display:flex;justify-content:space-between;font-size:12px;color:var(--hm-muted);margin-bottom:5px}
.ac-prog-t b{color:var(--hm-navy)}
.ac-cta{display:block;border-top:1px solid var(--hm-line);padding:10px 16px;font-size:14px;font-weight:600;color:var(--hm-navy)}
.ac-cta:hover,.ac-cta:focus{background:#fffbea;color:var(--hm-navy)}
.ac-cta .fa{color:var(--hm-yellow-d);margin-left:4px}
.ac-badge{position:absolute;top:10px;right:10px;background:#62AC15;color:#fff;border-radius:6px;font-size:12px;padding:2px 8px}
.ac-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--hm-line);background:#fff;border-radius:10px;padding:8px 14px;color:var(--hm-navy);font-size:14px;white-space:nowrap;cursor:pointer;font-weight:400;margin:0}
.ac-ghost:hover,.ac-ghost:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.ac-empty{margin-top:4px}

/* certificates */
.ac-certs{display:flex;flex-direction:column;gap:12px}
.ac-cert{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:14px 16px}
.ac-cert-ico{width:48px;height:48px;border-radius:12px;background:#fff6d1;color:var(--hm-yellow-d);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.ac-cert-b{flex:1;min-width:0}
.ac-cert-b b{display:block;color:var(--hm-navy)}
.ac-cert-b small{color:var(--hm-muted)}
.ac-cert-a{display:flex;gap:8px;flex:none}
.ac .ac-cert-a .hm-btn{margin:0}

/* favorites */
.ac-fav{position:relative;display:flex}
.ac-fav .hm-card{flex:1}
.ac-remove{position:absolute;top:10px;left:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(34,40,49,.8);color:#fff;cursor:pointer}
.ac-remove:hover,.ac-remove:focus{background:#c0392b}

/* notifications */
.ac-notes{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--hm-line);border-radius:14px;overflow:hidden}
.ac-note{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--hm-line)}
.ac-note:last-child{border-bottom:0}
.ac-note.unread{background:#fffbea}
.ac-note img,.ac-note-ico{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover}
.ac-note-ico{background:#fff6d1;color:var(--hm-yellow-d);display:flex;align-items:center;justify-content:center}
.ac-note p{margin:0 0 4px;color:#3d4450;line-height:1.8;overflow-wrap:anywhere}
.ac-note p a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.ac-note small{color:var(--hm-muted);font-size:12px}

/* settings */
.ac-panel{background:#fff;border:1px solid var(--hm-line);border-radius:16px;padding:22px;margin-bottom:20px;scroll-margin-top:90px}
.ac-h{font-size:18px!important;margin:0 0 16px!important;color:var(--hm-navy)}
.ac-avatar{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--hm-line)}
.ac-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.ac-avatar b{display:block;color:var(--hm-navy)}
.ac-avatar small{display:block;color:var(--hm-muted);margin-bottom:8px}
.ac-avatar-btns{display:flex;gap:8px;flex-wrap:wrap}
.ac .ac-avatar-btns .hm-btn{margin:0;border:0;padding:8px 16px}
.ac-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.ac-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.ac .au-f{margin-bottom:14px}
.ac .au-f label{display:block;font-size:14px;color:var(--hm-navy);margin-bottom:6px;font-weight:600}
.ac .au-f label em{color:var(--hm-muted);font-style:normal;font-weight:400}
.ac .au-in{display:flex;align-items:center;border:1px solid #d5d9df;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}
.ac .au-in:focus-within{border-color:var(--hm-yellow);box-shadow:0 0 0 3px rgba(247,202,24,.22)}
.ac .au-in input,.ac .au-in select{flex:1;min-width:0;border:0;outline:0!important;box-shadow:none!important;background:none;padding:10px 12px;font:inherit;font-size:15px;color:var(--hm-navy);height:44px}
.ac .au-in input[readonly]{color:var(--hm-muted);background:#f4f5f7;border-radius:10px}
.ac .au-in input[dir=ltr]{text-align:right}
.ac .au-in input[dir=ltr]:not(:placeholder-shown){text-align:left}
.ac .au-eye{border:0;background:none;color:var(--hm-muted);padding:0 12px;height:44px;cursor:pointer}
.ac .au-f small{display:block;color:var(--hm-muted);font-size:12px;margin-top:4px}
.ac .ac-save{margin:4px 0 0;border:0}
.ac .ac-ghost.ac-save{border:1px solid var(--hm-line);padding:10px 18px}
.ac-note-txt{color:var(--hm-muted);font-size:13px;margin:10px 0 0}
.ac .au-alert{border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}

@media (max-width:991px){
  .ac-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .ac-hero{padding-top:20px}
  .ac-me img{width:56px;height:56px}
  .ac-me h1{font-size:21px}
  .ac-continue{flex-direction:column;align-items:stretch}
  .ac-continue img{width:100%}
  .ac-grid2,.ac-grid3{grid-template-columns:1fr}
  .ac-cert{flex-wrap:wrap}
  .ac-cert-a{width:100%}
  .ac-cert-a .hm-btn,.ac-cert-a .ac-ghost{flex:1}
  .ac-panel{padding:18px 14px}
}
.ac [hidden]{display:none!important}
.ac-grid2 > *,.ac-grid3 > *{min-width:0}
.ac .ac-body{min-height:360px}
@media (max-width:600px){.ac-continue img{aspect-ratio:16/7}}

/* ===================== Certificate page (2026 refresh) ===================== */
.ce{background:var(--hm-bg);padding-bottom:56px}
.ce button{font-family:inherit}
.ce-hero{background:var(--hm-navy);color:#fff;text-align:center;padding:34px 0 130px}
.ce-hero h1{color:#fff;font-size:30px;line-height:1.5;margin:10px 0 6px;overflow-wrap:anywhere}
.ce-hero p{color:#c9cdd4;margin:0}
.ce-hero p b{color:var(--hm-yellow)}
.ce-badge{display:inline-flex;gap:6px;align-items:center;background:rgba(98,172,21,.18);color:#9be15d;border-radius:20px;padding:4px 14px;font-size:14px}
.ce-congrats{display:inline-block;background:var(--hm-yellow);color:var(--hm-navy);border-radius:20px;padding:4px 16px;font-weight:700}
.ce-over{max-width:960px;margin-top:-100px}
.ce-over:before,.ce-over:after{display:none}
.ce-frame{background:#fff;border-radius:16px;padding:14px;box-shadow:0 20px 50px rgba(34,40,49,.15)}
.ce-frame img{width:100%;height:auto;display:block;border-radius:8px}
.ce-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.ce .ce-actions .hm-btn{margin:0}
.ce-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--hm-line);background:#fff;border-radius:10px;padding:9px 14px;color:var(--hm-navy);font-size:14px;cursor:pointer}
.ce-ghost:hover,.ce-ghost:focus{border-color:var(--hm-yellow);color:var(--hm-navy)}
.ce-li{display:inline-flex;align-items:center;gap:8px;background:#0a66c2;color:#fff;border-radius:10px;padding:10px 16px;font-size:14px}
.ce-li:hover,.ce-li:focus{background:#084e96;color:#fff}
.ce-share{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--hm-muted)}
.ce-share a,.ce-share button{height:36px;min-width:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;color:#fff;font-size:15px;cursor:pointer}
.ce-share a.wa{background:#25d366}
.ce-share a.fb{background:#1877f2}
.ce-share a.x{background:#111}
.ce-share a.li{background:#0a66c2}
.ce-share a:hover,.ce-share a:focus{opacity:.85;color:#fff}
.ce-share button{border:1px solid var(--hm-line);background:#fff;color:var(--hm-navy);border-radius:18px;padding:0 12px;font-size:14px}
.ce-card{background:#fff;border:1px solid var(--hm-line);border-radius:16px;padding:8px 20px;margin-top:20px}
.ce-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.ce-facts li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;padding:12px 0;border-bottom:1px solid var(--hm-line);font-size:14px}
.ce-facts .fa{color:var(--hm-yellow-d);margin-top:4px;grid-row:span 2}
.ce-facts span{color:var(--hm-muted);font-size:13px}
.ce-facts b{color:var(--hm-navy);font-weight:600;overflow-wrap:anywhere}
.ce-facts b[dir=ltr]{text-align:right}
.ce-facts a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.ce-next{text-align:center;color:var(--hm-muted);margin:22px 0 0}
.ce-next a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.ce-cta{margin-top:30px}
.ce-cta-in{background:var(--hm-navy);border-radius:18px;padding:28px;color:#fff;text-align:center;margin-bottom:26px}
.ce-cta-in h2{color:#fff;font-size:22px!important;margin:0 0 8px!important}
.ce-cta-in p{color:#c9cdd4;margin:0 0 16px}
.ce .ce-cta-in .hm-btn{margin:0}
.ce-h{font-size:18px!important;margin:0 0 14px!important;color:var(--hm-navy)}

@media (max-width:767px){
  .ce-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .ce-hero{padding:24px 0 80px}
  .ce-hero h1{font-size:23px}
  .ce-over{margin-top:-60px}
  .ce-frame{padding:6px;border-radius:12px}
  .ce-facts{grid-template-columns:1fr}
  .ce-actions .hm-btn{flex:1 1 100%;justify-content:center}
}

/* Printing the page prints the certificate only. */
@media print{
  body *{visibility:hidden!important}
  .ce-frame,.ce-frame *{visibility:visible!important}
  .ce-frame{position:absolute;left:0;top:0;width:100%;box-shadow:none!important;padding:0!important}
  @page{size:landscape;margin:8mm}
}

/* ===================== Info pages (2026 refresh): about, FAQ, terms, privacy, certificate guide ===================== */
.st{background:var(--hm-bg);padding-bottom:56px}
.st-hero{background:var(--hm-navy);color:#fff;padding:24px 0 32px}
.st-crumbs{font-size:13px;color:#9aa0a8;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-crumbs a{color:inherit}
.st-crumbs a:hover,.st-crumbs a:focus{color:var(--hm-yellow)}
.st-hero h1{color:#fff;font-size:30px;line-height:1.5;margin:10px 0 4px}
.st-hero p{color:#c9cdd4;margin:0}
.st-narrow{max-width:820px;padding-top:26px}
.st-narrow:before,.st-narrow:after{display:none}
.st-card{background:#fff;border:1px solid var(--hm-line);border-radius:16px;padding:28px 32px}
.st-meta{color:var(--hm-muted);font-size:13px;margin-bottom:14px}
.st-prose{color:#3d4450;font-size:16px;line-height:2;overflow-wrap:anywhere}
.st-prose > :first-child{margin-top:0!important}
.st-prose h1,.st-prose h2,.st-prose h3,.st-prose h4,.st-prose h5{color:var(--hm-navy);font-size:19px!important;line-height:1.6;margin:26px 0 8px!important;padding-right:12px;border-right:4px solid var(--hm-yellow)}
.st-prose p{margin:0 0 12px}
.st-prose ul,.st-prose ol{padding-right:22px;margin:0 0 12px}
.st-prose li{margin:4px 0}
.st-prose li::marker{color:var(--hm-yellow-d)}
.st-prose a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}
.st-prose img{max-width:100%;height:auto;border-radius:10px}
.st-prose table{width:100%;border-collapse:collapse;margin:0 0 12px}
.st-prose td,.st-prose th{border:1px solid var(--hm-line);padding:8px}
.st-faq details{border:1px solid var(--hm-line);border-radius:12px;margin-bottom:10px;background:#fff;scroll-margin-top:90px}
.st-faq summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;color:var(--hm-navy);display:flex;justify-content:space-between;align-items:center;gap:10px}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary:after{content:"+";color:var(--hm-yellow-d);font-size:22px;line-height:1;flex:none}
.st-faq summary:hover,.st-faq summary:focus{color:var(--hm-yellow-d)}
.st-faq details[open]{border-color:var(--hm-yellow)}
.st-faq details[open] summary:after{content:"−"}
.st-ans{padding:0 18px 16px;color:#3d4450;line-height:1.9}
.st-ans a{color:var(--hm-navy);border-bottom:2px solid var(--hm-yellow)}

/* request / suggest / join forms inside the account card */
.au-rules{list-style:none;margin:-6px 0 18px;padding:12px 14px;background:var(--hm-bg);border-radius:10px;font-size:14px;color:#3d4450}
.au-rules li{padding:3px 0}
.au-rules .fa{color:#62AC15;margin-left:6px}
.au .au-hint-top{margin:-2px 0 6px!important}
.au .au-in textarea,.au .au-in select{flex:1;min-width:0;border:0;outline:0!important;box-shadow:none!important;background:none;padding:11px 14px;font:inherit;font-size:15px;color:var(--hm-navy)}
.au .au-in textarea{resize:vertical;min-height:110px}
.au .au-in select{height:46px}
.au .au-in input:disabled{color:var(--hm-muted);background:#f4f5f7;border-radius:10px}

@media (max-width:600px){
  .st-hero h1{font-size:24px}
  .st-card{padding:20px 16px}
  .st-prose{font-size:15px}

}
.cs-desc p{margin:0 0 10px}
.cs-desc h4{font-size:15px!important;color:var(--hm-navy);margin:14px 0 6px!important}
.cs-desc ul{list-style:none;padding:0;margin:0 0 10px}
.cs-desc li{position:relative;padding-right:22px;margin:4px 0;line-height:1.8}
.cs-desc li:before{content:"\f00c";font-family:FontAwesome;position:absolute;right:0;top:1px;color:#62AC15;font-size:12px}
.cs-preview-bar{background:#F7CA18;color:#222831;text-align:center;font-weight:600;padding:8px 12px;font-size:14px}
.hm-mine{padding-bottom:0}

/* Error (404) page */
.er-hero{background:var(--hm-navy);color:#fff;text-align:center;padding:60px 0 70px}
.er-code{font-family:'NotoKufiArabic-Bold',Tahoma,sans-serif;font-size:120px;line-height:1;color:#fff;letter-spacing:4px;display:flex;align-items:center;justify-content:center;gap:6px;direction:ltr}
.er-code img{width:96px;height:auto;margin:0 6px}
.er-hero h1{font-size:26px;margin:18px 0 8px;color:#fff}
.er-lead{color:#aab1bd;font-size:16px;margin:0 auto 22px;max-width:560px}
.er-search{max-width:560px;margin:0 auto}
.er-tags{justify-content:center;margin-top:16px}
.er-tags a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff}
.er-tags span{color:#aab1bd}
@media (max-width:600px){.er-hero{padding:40px 0 48px}.er-code{font-size:76px}.er-code img{width:62px}.er-hero h1{font-size:21px}}

/* Lesson player: fullscreen button and fullscreen layout */
.ls-fs{width:38px;height:36px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;margin-right:auto}
.ls-report-wrap + .ls-fs{margin-right:0}
.ls-fs:hover,.ls-fs:focus{background:var(--hm-yellow);color:var(--hm-navy)}
.ls-pcard:fullscreen,.ls-pcard.ls-full{display:flex;flex-direction:column;width:100%;height:100%;margin:0;border-radius:0;background:#000}
.ls-pcard:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%;margin:0;border-radius:0;background:#000}
.ls-pcard.ls-full{position:fixed;inset:0;z-index:3000;height:100dvh}
.ls-pcard:fullscreen .ls-player,.ls-pcard.ls-full .ls-player{flex:1;aspect-ratio:auto;border-radius:0}
.ls-pcard:-webkit-full-screen .ls-player{flex:1;aspect-ratio:auto;border-radius:0}
.ls-pcard:fullscreen .ls-ctrls,.ls-pcard.ls-full .ls-ctrls{background:#1b2027;border-radius:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.ls-pcard:-webkit-full-screen .ls-ctrls{background:#1b2027;border-radius:0}
html.ls-locked,html.ls-locked body{overflow:hidden}
.ls-pcard:fullscreen .ls-player,.ls-pcard.ls-full .ls-player{display:flex;align-items:center;justify-content:center;min-height:0}
.ls-pcard:-webkit-full-screen .ls-player{display:flex;align-items:center;justify-content:center;min-height:0}
.ls-pcard:fullscreen .ls-player iframe,.ls-pcard.ls-full .ls-player iframe{position:static;width:100%;height:auto;aspect-ratio:16/9;max-width:calc((100dvh - 64px) * 16 / 9);max-height:100%}
.ls-pcard:-webkit-full-screen .ls-player iframe{position:static;width:100%;height:auto;aspect-ratio:16/9;max-width:calc((100vh - 64px) * 16 / 9);max-height:100%}

/* Mobile menu: side drawer (includes/mobile-drawer.php) */
.cv-dr,.cv-dr-ov{--hm-navy:#222831;--hm-yellow:#F7CA18;--hm-yellow-d:#e0b40c;--hm-muted:#6b7280;--hm-line:#e7e9ee}
.cv-dr-ov{position:fixed;inset:0;z-index:2000;background:rgba(18,22,28,.55);opacity:0;transition:opacity .25s}
.cv-dr{position:fixed;top:0;bottom:0;right:0;z-index:2010;width:86%;max-width:340px;background:#fff;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .25s ease,visibility .25s;visibility:hidden;box-shadow:-10px 0 40px rgba(0,0,0,.2);color:var(--hm-navy);font-size:15px}
html.cv-dr-open .cv-dr{transform:none;visibility:visible}
html.cv-dr-open .cv-dr-ov{opacity:1}
html.cv-dr-open,html.cv-dr-open body{overflow:hidden}
.cv-dr a{color:var(--hm-navy)}
.cv-dr a:hover,.cv-dr a:focus{color:var(--hm-navy);text-decoration:none}
.cv-dr-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--hm-navy);flex:none}
.cv-dr-top img{height:30px;width:auto}
.cv-dr-x{width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.cv-dr-x:hover,.cv-dr-x:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(247,202,24,.6)}
.cv-dr-x:focus{outline:0}
.cv-dr-x:focus-visible{box-shadow:0 0 0 2px var(--hm-yellow)}
/* thin X drawn with two 2px lines, matching the burger icon weight */
.cv-x{position:relative;width:18px;height:18px}
.cv-x:before,.cv-x:after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;margin-top:-1px;border-radius:2px;background:#fff}
.cv-x:before{transform:rotate(45deg)}
.cv-x:after{transform:rotate(-45deg)}
.cv-dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.cv-dr-user{display:flex;align-items:center;gap:10px;padding:12px;background:#fff8dc;border-radius:14px}
.cv-dr-user img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.cv-dr-user span{flex:1;min-width:0}
.cv-dr-user b{display:block;font-size:15px}
.cv-dr-user small{color:var(--hm-muted);font-size:12px}
.cv-dr-user .fa{color:var(--hm-muted)}
.cv-dr-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cv-dr-auth a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;font-weight:600}
.cv-dr-auth .l{border:1px solid var(--hm-line)}
.cv-dr-auth .r{background:var(--hm-yellow)}
.cv-dr-search{display:flex;align-items:center;gap:8px;background:#f2f3f5;border-radius:12px;padding:0 12px;height:44px;margin:0}
.cv-dr-search:focus-within{box-shadow:0 0 0 2px var(--hm-yellow)}
.cv-dr-search .fa{color:var(--hm-muted)}
.cv-dr-search input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:15px;color:var(--hm-navy)}
.cv-dr-links{display:flex;flex-direction:column}
.cv-dr-links a,.cv-dr-out{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid #f0f1f3}
.cv-dr-links .fa,.cv-dr-out .fa{width:32px;height:32px;border-radius:9px;background:#f4f5f7;display:grid;place-items:center;flex:none}
.cv-dr-badge{margin-right:auto;background:#e74c3c;color:#fff;border-radius:10px;font-size:11px;padding:1px 8px}
.cv-dr-h{font-size:12px;color:var(--hm-muted);font-weight:600;margin-top:4px}
.cv-dr-cats{display:flex;flex-direction:column;margin-top:-6px}
.cv-dr-cats a{display:flex;align-items:center;gap:10px;padding:7px 2px}
.cv-dr-cats .ci{width:30px;height:30px;border-radius:8px;background:#fff6d1;color:var(--hm-yellow-d);display:grid;place-items:center;font-size:13px;flex:none}
.cv-dr-cats small{margin-right:auto;color:var(--hm-muted);font-size:12px}
.cv-dr-all{display:block;text-align:center;padding:10px;border:1px dashed #d5d9df;border-radius:10px;font-weight:600}
.cv-dr-out{border:0;color:#c0392b!important;margin-top:4px}
.cv-dr-out .fa{background:#fdecea}
@media (min-width:768px){.cv-dr,.cv-dr-ov{display:none!important}}
.cv-dr-body > *{flex:none}

/* Certificate page (2026 refresh): toolbar under the certificate, facts + verification cards */
.ce-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:12px 14px;margin-top:16px}
.ce-bar .ce-actions{margin:0;justify-content:flex-start}
.ce-bar .ce-share{margin:0}
.ce-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
.ce-cards .ce-card{margin:0;padding:16px 18px}
.ce-card-h{font-size:15px!important;margin:0 0 4px!important;color:var(--hm-navy)}
.ce-cards .ce-facts{grid-template-columns:1fr}
.ce-cards .ce-facts li{display:flex;align-items:center;gap:8px;padding:10px 0}
.ce-cards .ce-facts li:last-child{border-bottom:0}
.ce-cards .ce-facts .fa{margin:0;width:16px;text-align:center}
.ce-cards .ce-facts span{white-space:nowrap}
.ce-cards .ce-facts b{margin-right:auto;text-align:left}
.ce-verify{display:flex;flex-direction:column;gap:12px}
.ce-verify p{margin:0;color:var(--hm-muted);font-size:14px}
.ce-verify .ce-ghost{align-self:flex-start}
.ce-ok{display:flex;align-items:center;gap:12px;background:#ecf8e3;border:1px solid #cfeab8;border-radius:12px;padding:12px 14px;color:#2f6b0b}
.ce-ok .fa{font-size:26px}
.ce-ok b{display:block;font-size:15px}
.ce-ok small{color:#4f7d2c;font-size:13px}
.ce-next{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:24px 0 0}
.ce .ce-next .hm-btn{margin:0}
.ce-next a{border-bottom:0}
.ce-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;text-align:right;padding:24px 28px}
.ce-cta-in p{margin:0}
@media (max-width:767px){
  .ce-cards{grid-template-columns:1fr}
  .ce-bar{flex-direction:column;align-items:stretch}
  .ce-bar .ce-actions{display:grid;grid-template-columns:1fr 1fr}
  .ce-bar .ce-actions > *{justify-content:center}
  .ce-bar .ce-li{grid-column:1/-1}
  .ce-bar .ce-share{justify-content:center}
  .ce-cta-in{flex-direction:column;align-items:stretch;text-align:center}
}

/* ===================== Generated course covers (Nov 2026) =====================
   Covers are 1280x720 (16:9) with the title and logo near the edges, so every course picture
   is shown at 16:9 and the language tag sits in the top-left corner, clear of the logo. */
.hm-thumb,.cs-thumb,.rp-course img,.br-row-img img,.ac-continue img{aspect-ratio:16/9}
.hm-lang,.br-row-img .hm-lang{top:8px;left:8px;right:auto;bottom:auto}
@media (max-width:600px){.ac-continue img{aspect-ratio:16/9}}
.ls-pl-head img{width:72px;height:auto;aspect-ratio:16/9}