/* C4 visual corrections — loaded last. Al-Saeed identity: navy + orange, IBM Plex Sans Arabic. */

/* Arabic must never be set in a monospace face (breaks letter joining). */
html[dir="rtl"] .v23-hero-note span:first-child,
:lang(ar) .v23-hero-note span:first-child{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:0!important}
[dir="rtl"] .v25-steps b,[dir="rtl"] .iv-li .d{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}

/* "Not sure which path?" call-to-action lost its navy background to a generic .card rule. */
.card.v21-bound[style*="var(--navy)"]{background:linear-gradient(150deg,var(--navy,#102a4c),var(--navy3,#1d4470))!important;color:#fff!important}
.card.v21-bound[style*="var(--navy)"] h2{color:#fff!important}

/* Floating widgets must not stack on top of each other or of page content. Invoices are
   reachable from "My dashboard"; the floating duplicate overlapped the WhatsApp button. */
#v16Invoices,.v16-invoices{display:none!important}
@media (max-width:720px){
  .wa{padding:0!important;width:48px!important;height:48px!important;border-radius:50%!important;justify-content:center!important;font-size:0!important;inset-inline-start:14px!important;bottom:14px!important}
  .wa>*{font-size:20px!important}
  #chatLauncher{width:48px!important;height:48px!important;bottom:14px!important;inset-inline-end:14px!important}
  body{padding-bottom:72px}
}
/* While an exam is open no floating widget may cover questions or navigation. */
body.ux-open .wa,body.ux-open #chatLauncher,body.ux-open .chat-l,body:has(#ux:not([hidden])) .wa,body:has(#ux:not([hidden])) #chatLauncher{display:none!important}

/* Skip link stays hidden until keyboard focus (it was visible in some layouts). */
.v21-skip:not(:focus){transform:translateY(-200%)!important;opacity:0!important}

/* Learner package header: one logo (site header already shows it), readable language picker. */
.package-heading .official-learning-logo{display:none}
.package-language-card select{min-width:190px;max-width:100%}
.package-language-card{flex-wrap:wrap}

/* Primary learner sections: six tabs fit on one row on desktop, scroll horizontally on phones
   instead of wrapping into a tall block. */
.package-primary-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
.package-primary-nav>button{flex:1 0 auto;min-width:118px}
@media (max-width:720px){
  .package-primary-nav{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;padding:6px!important;scroll-snap-type:x mandatory}
  .package-primary-nav>button{min-width:96px;scroll-snap-align:start;flex-direction:column}
}

/* Learning-choice cards: 5 sections when activities are included. */
.learning-choice-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
#packageLearningLanguage{min-width:210px!important;width:auto!important}
@media (max-width:720px){
  #packageLearningLanguage{min-width:0!important;width:100%!important}
  .learning-choice-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .learning-choice img{height:92px!important;object-fit:cover}
  .learning-choice-copy small{display:none}
}
/* Curriculum axis numbering */
.ch-h .ch-num{display:inline-block;min-width:2.1em;margin-inline-end:6px;padding:1px 7px;border-radius:8px;background:#fff3e8;color:#b4500f;font:700 .82em/1.6 'IBM Plex Sans Arabic',system-ui,sans-serif;text-align:center}

/* ── Exam workspace ─────────────────────────────────────────────── */
/* Tool bar stays visible under the header while the question scrolls. It must never shrink:
   #ux is a flex column and an overflow:auto row would otherwise collapse to a sliver (C4 mobile bug). */
#ux .ux-tools{position:sticky;top:0;z-index:30;flex-shrink:0}
#ux .ux-head,#ux .ux-exam-dock{flex-shrink:0}
/* Docked tool panel (whiteboard / calculator / notes) beside the question — never over it. */
.exam-tools-portal.exam-tools-docked{position:fixed;inset:auto;left:12px;top:150px;bottom:82px;width:min(420px,34vw);z-index:18000;display:block;padding:0;background:none;place-items:initial}
.exam-tools-docked .exam-tools-dialog{width:100%;height:100%;max-height:none;border-radius:16px;box-shadow:0 12px 40px #0f172a33;padding:18px;overflow:auto}
.exam-tools-docked .exam-tools-canvas{height:min(320px,38vh)}
@media (min-width:901px){body.exam-tools-open #ux .ux-main{padding-left:calc(min(420px,34vw) + 28px)!important}}
@media (max-width:900px){
  /* Phone/tablet: a bottom sheet that ends exactly above the exam navigation (measured by
     exam-tools.js), with the question area padded by the same height so every answer can be
     scrolled into the free space above the sheet. Side padding of the question is unchanged. */
  .exam-tools-portal.exam-tools-docked{left:0;right:0;width:auto;top:auto;bottom:var(--ux-dock-h,96px);height:var(--ux-sheet-h,38vh);max-height:none}
  .exam-tools-docked .exam-tools-dialog{border-radius:16px 16px 0 0;padding:10px 14px}
  .exam-tools-docked .exam-tools-dialog .exam-tools-hint{display:none}
  .exam-tools-docked .exam-tools-canvas{height:18vh}
  body.exam-tools-open #ux .ux-main{padding-bottom:calc(var(--ux-sheet-h,38vh) + 16px)!important}
}
/* Shared case: a case page (stable title + full scenario) and a question page, on every screen size. */
#ux .ux-main.ux-case-layout{display:block!important;max-width:1100px;margin-inline:auto}
#ux .ux-case-pages{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px;max-width:520px}
#ux .ux-case-pages button{min-height:44px;border:1px solid #cbdde6;background:#fff;border-radius:10px;font:inherit;font-weight:700;color:#23495e;cursor:pointer}
#ux .ux-case-pages button[aria-pressed=true]{background:var(--al-navy,#153b4e);color:#fff;border-color:#153b4e}
#ux[data-case-page=case] .ux-case-layout>.ux-card{display:none!important}
#ux[data-case-page=question] .ux-case-pane{display:none!important}
#ux .ux-case-pane{max-height:none!important;overflow:visible!important}
#ux .ux-case-text{font-size:calc(1.06rem * var(--ux-font-scale,1));line-height:2}
#ux .ux-case-caption{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#f1f5fa;border-inline-start:4px solid var(--al-orange,#e87527);font-weight:700;color:#153b4e}
/* Bottom navigation always sits at the bottom of the screen. */
#ux{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#ux>.ux-main{flex:1 0 auto;width:100%}
#ux>.ux-exam-dock{position:sticky;bottom:0;margin-top:auto}
@media (max-width:760px){
  #ux .ux-tools{top:0}
  #ux .ux-tools.ux-tools-visible{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;padding:6px 8px!important;scrollbar-width:none;grid-template-columns:none!important}
  #ux .ux-tools.ux-tools-visible::-webkit-scrollbar{display:none}
  #ux .ux-tools.ux-tools-visible>*{flex:0 0 auto;min-width:76px;min-height:52px!important;padding:4px 8px!important;font-size:.72rem!important}
}

/* Package tiers: same subject artwork, clearly different look per package type. */
.tier-art{position:relative;margin:0;overflow:hidden;border-radius:14px}
.tier-art img{display:block;width:100%;height:210px;object-fit:cover}
.tier-art::after,.v38-package-art::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
.tier-art figcaption{position:absolute;inset-inline-start:12px;bottom:12px;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.82rem;color:#fff;background:rgba(16,42,76,.86);box-shadow:0 6px 18px #0003}
.tier-full::after,.v42-package-full .v38-package-art::after{background:linear-gradient(160deg,rgba(16,42,76,.0),rgba(16,42,76,.35))}
.tier-sim::after,.v42-package-sim .v38-package-art::after{background:linear-gradient(160deg,rgba(232,117,39,.15),rgba(232,117,39,.55))}
.tier-sim figcaption{background:#c2581a}
.tier-review::after,.v42-package-review .v38-package-art::after{background:linear-gradient(160deg,rgba(14,124,123,.1),rgba(14,124,123,.55))}
.tier-review figcaption{background:#0e6f6e}
.tier-self::after,.v42-package-self .v38-package-art::after{background:linear-gradient(160deg,rgba(91,72,160,.1),rgba(91,72,160,.55))}
.tier-self figcaption{background:#5b48a0}
.v38-package-art{position:relative}
.v38-package-art>*{position:relative;z-index:1}
.learner-course-tile{max-width:640px}
select[aria-label*="لغة"],select[id*="Language"]{min-width:210px;max-width:100%}
@media (max-width:720px){select[aria-label*="لغة"],select[id*="Language"]{min-width:0;width:100%}}
.email-code-login{display:grid;gap:8px;margin-top:10px}.email-code-entry{margin-top:10px}
/* Chat attachments */
.cc-attach,.cc-voice{border:1px solid #d6deea;background:#fff;border-radius:10px;padding:6px 10px;font:inherit;font-size:.85rem;cursor:pointer;color:#153b4e}
.cc-voice[aria-pressed=true]{background:#fde8e8;border-color:#e2a0a0;color:#9b1c1c}
.cc-attachment{margin-top:6px;display:grid;gap:4px;justify-items:start}
.cc-attachment img{max-width:min(280px,100%);max-height:260px;border-radius:10px;border:1px solid #d6deea}
.cc-attachment audio{max-width:260px}
.cc-attachment-open{border:1px dashed #9fb3c8;background:#f6f9fc;border-radius:10px;padding:6px 10px;font:inherit;cursor:pointer}
/* Social sign-in */
.social-login{display:grid;gap:10px;justify-items:center;margin:6px 0 4px}
.social-apple{width:min(360px,100%);min-height:44px;border-radius:999px;border:0;background:#000;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.social-apple{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.social-or{margin:0;color:#64748b;font-size:.85rem;display:flex;gap:10px;align-items:center;width:100%}
.social-or::before,.social-or::after{content:"";flex:1;border-top:1px solid #e2e8f0}
.social-login-status{margin:0;min-height:1em;font-size:.85rem;color:#9b1c1c}

/* ── Visual refresh: learner workspace ──────────────────────────────── */
:root{--c4-navy:#0f2a4a;--c4-orange:#e8752a;--c4-teal:#0e7c7b;--c4-line:#e3eaf3;--c4-soft:#f5f8fc;--c4-radius:18px;--c4-shadow:0 10px 30px rgba(15,42,74,.08)}
.ui-art-card{display:block;width:calc(100% + 2*var(--card-pad,20px));max-width:none;height:150px;object-fit:cover;margin:calc(-1*var(--card-pad,20px)) calc(-1*var(--card-pad,20px)) 12px;border-radius:var(--c4-radius) var(--c4-radius) 0 0}
.assessment-card{--card-pad:20px;overflow:hidden;border-radius:var(--c4-radius)!important;border:1px solid var(--c4-line)!important;box-shadow:var(--c4-shadow)!important;transition:transform .18s ease,box-shadow .18s ease}
.assessment-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,42,74,.13)!important}
.assessment-card.pad{padding:var(--card-pad)!important}
.learning-section-strip{position:relative;overflow:hidden;border-radius:var(--c4-radius);background:linear-gradient(120deg,#0f2a4a,#1f4f78)!important;color:#fff;min-height:118px;padding:18px 22px!important;display:flex;align-items:center;gap:14px;box-shadow:var(--c4-shadow)}
.learning-section-strip h2{color:#fff!important;font-size:1.5rem;margin:0;position:relative;z-index:1}
.learning-section-strip .learning-home-button{position:relative;z-index:1;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}
.ui-art-strip{position:absolute;inset-block:0;inset-inline-end:0;height:100%;width:min(320px,45%);object-fit:cover;opacity:.95;-webkit-mask-image:linear-gradient(to left,#000 55%,transparent);mask-image:linear-gradient(to left,#000 55%,transparent)}
[dir=rtl] .ui-art-strip{-webkit-mask-image:linear-gradient(to right,#000 55%,transparent);mask-image:linear-gradient(to right,#000 55%,transparent)}
.cc-heading{position:relative;overflow:hidden;border-radius:var(--c4-radius);background:linear-gradient(120deg,#0f2a4a,#1f5466);color:#fff;padding:20px 22px!important}
.cc-heading h3,.cc-heading p,.cc-heading .cc-eyebrow{color:#fff!important;position:relative;z-index:1}
.cc-heading>button{position:relative;z-index:1}
.lesson-action-watch{background-image:linear-gradient(180deg,rgba(15,42,74,.15),rgba(15,42,74,.78)),var(--lesson-art,linear-gradient(135deg,#0f2a4a,#245478))!important;background-size:cover!important;background-position:center!important;color:#fff!important;border-radius:14px!important}
.learning-lesson{border-radius:var(--c4-radius)!important;box-shadow:var(--c4-shadow);border:1px solid var(--c4-line);background:#fff;transition:transform .18s ease}
.learning-lesson:hover{transform:translateY(-2px)}
.learning-lesson .ls.done{background:#ecfdf3}
.ch-blk.learning-chapter{border-radius:var(--c4-radius)!important;border:1px solid var(--c4-line)!important;box-shadow:0 4px 14px rgba(15,42,74,.05);overflow:hidden}
.ch-blk.learning-chapter>.ch-h{background:linear-gradient(90deg,#f6f9fd,#fff)}
.ch-blk[open]>.ch-h{border-bottom:1px solid var(--c4-line)}
[data-practice-kind]{border-radius:14px!important;padding:12px 16px!important;font-weight:700}
[data-practice-kind][aria-pressed=true]{background:var(--c4-navy)!important;color:#fff!important}
.package-primary-nav{border-radius:var(--c4-radius)!important;box-shadow:var(--c4-shadow)}
.package-primary-nav>button.on,.package-primary-nav>button[aria-current=page]{background:linear-gradient(135deg,#0f2a4a,#1f4f78)!important;color:#fff!important}
.learning-choice{border-radius:var(--c4-radius)!important;overflow:hidden;box-shadow:var(--c4-shadow);transition:transform .18s ease}
.learning-choice:hover{transform:translateY(-3px)}
.learner-library-part{border-radius:var(--c4-radius)!important;border:1px solid var(--c4-line);background:#fff;box-shadow:0 4px 14px rgba(15,42,74,.05);padding:6px 14px}
.learner-library-part>summary{font-weight:800;color:var(--c4-navy);padding:10px 0;cursor:pointer}
@media (max-width:720px){.ui-art-card{height:110px}.learning-section-strip{min-height:92px}.learning-section-strip h2{font-size:1.2rem}.ui-art-strip{width:52%}}
@media (prefers-reduced-motion:reduce){.assessment-card,.learning-lesson,.learning-choice{transition:none}}
/* Never let a programmatic scrollIntoView shift the whole page sideways (horizontal tab rows). */
html,body{overflow-x:clip!important}
.package-shell,.package-shell>.wrap{overflow-x:clip}
.package-primary-nav{overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch}
/* Mobile header keeps its account row inside the bar when the page is scrolled. */
@media (max-width:900px){#hdr.hdr,#hdr.hdr.scrolled{height:auto!important;max-height:none!important;overflow:visible}#hdr.hdr.scrolled{background:#0f2a4a!important}}
/* Wide screens: a long top menu (admins see 13 links) must never push the account buttons
   (لوحتي / خروج) off the screen edge — the menu scrolls inside its own space instead. */
@media (min-width:1025px){
  .hdr-in{min-width:0}
  .hdr-in #nav{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .hdr-in #nav>*{padding-inline:6px!important;font-size:12px!important;white-space:nowrap}
  .hdr-in #nav::-webkit-scrollbar{display:none}
  .hdr-in #hdrAct,.hdr-in #logoLink{flex-shrink:0}
}
@media (min-width:1025px) and (max-width:1366px){.hdr-in #nav>*{padding-inline:4px!important;font-size:11.5px!important}}