/*
 * MCI Academy — approved identity layer.
 * Colour values are the exact tokens from the brand handoff
 * (06-new-identity-tokens/mci-academy.css). Fonts are the supplied files in
 * /brand/academy/fonts (Montserrat for English, IBM Plex Sans Arabic for Arabic).
 * Loaded after the page's own stylesheet, it remaps the site's colour variables
 * to the identity so every public page picks it up without rewriting each page.
 */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/brand/academy/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/brand/academy/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/academy/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/academy/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("/brand/academy/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/brand/academy/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/brand/academy/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/academy/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/academy/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); }

:root {
  /* Handoff tokens — exact values */
  --mci-navy: #0B2A50;
  --mci-blue: #1256A2;
  --mci-deep: #143256;
  --mci-slate: #5B6676;
  --mci-divider: #C0C5CD;
  --mci-line: #DCE3EC;
  --mci-mist: #F3F6FA;
  --mci-q-academy: #22A4D2;
  --mci-q-medical: #723DBD;
  --mci-q-career: #74AC2C;
  --mci-q-research: #F89A1C;
  --brand: #22A4D2;
  --brand-text: #19799B;
  --brand-on-dark: #4EB6DB;
  --brand-tint: #E9F6FA;
  --on-brand: #0B2A50;
  --btn-primary: #1256A2;
  --font-en: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  /* Functional answer colours (kept from the current exam styles) */
  --mci-ok-bg: #D1FAE5; --mci-ok: #059669; --mci-ok-text: #047857;
  --mci-bad-bg: #FECACA; --mci-bad: #DC2626; --mci-bad-text: #B91C1C;
  --mci-flag: #FBBF24;
}

/* ---- Atlas public pages: remap the site palette to the identity ---- */
.mciq {
  --bg: #ffffff;
  --bg-soft: var(--mci-mist);
  --card: #ffffff;
  --card-2: var(--mci-mist);
  --ink: var(--mci-navy);
  --ink-2: var(--mci-deep);
  --muted: var(--mci-slate);
  --blue: var(--mci-blue);
  --blue-strong: var(--mci-blue);
  --blue-soft: var(--brand-tint);
  --line: var(--mci-line);
  --line-strong: var(--mci-divider);
  --gold: var(--brand-text);
  font-family: var(--font-en);
}
html[data-theme="dark"] .mciq,
.mciq.dark {
  --bg: #0B1626;
  --bg-soft: #0F1E33;
  --card: #12233B;
  --card-2: #0F1E33;
  --ink: #EAF1F8;
  --ink-2: #C9D7E8;
  --muted: #9FB0C6;
  --blue: var(--brand-on-dark);
  --blue-strong: var(--mci-blue);
  --blue-soft: #16304F;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --gold: var(--brand-on-dark);
}
.mciq h1, .mciq h2, .mciq h3, .mciq .h1, .mciq .h2 { font-family: var(--font-en); letter-spacing: -0.015em; }
[dir="rtl"] .mciq, [dir="rtl"] .mciq h1, [dir="rtl"] .mciq h2, [dir="rtl"] .mciq h3 { font-family: var(--font-ar); letter-spacing: 0; }
[dir="rtl"] .mciq { font-size: 1.0625em; }

/* Header — 76px, white, 1px line border, 3px Academy-cyan active underline */
.mciq .hdr { background: #fff; border-bottom: 1px solid var(--mci-line); }
html[data-theme="dark"] .mciq .hdr { background: #0B1626; border-bottom-color: rgba(255, 255, 255, 0.08); }
.mciq .hdr-in { height: 76px; }
.mciq .nav a { font-weight: 600; color: var(--mci-navy); border-bottom-width: 3px; padding: 6px 0 5px; }
html[data-theme="dark"] .mciq .nav a { color: #C9D7E8; }
.mciq .nav a:hover, .mciq .nav a.on { color: var(--mci-navy); border-bottom-color: var(--brand); }
html[data-theme="dark"] .mciq .nav a:hover, html[data-theme="dark"] .mciq .nav a.on { color: #fff; border-bottom-color: var(--brand-on-dark); }
.mciq .lang b { color: var(--brand-text); }
html[data-theme="dark"] .mciq .lang b { color: var(--brand-on-dark); }
@media (max-width: 1023px) { .mciq .hdr-in { height: 64px; } }

/* Logo lockup (supplied SVG masters; never recoloured) */
.mci-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.mci-logo img { display: block; height: 48px; width: auto; }
.mci-logo .mci-logo--dark { display: none; }
html[data-theme="dark"] .mci-logo .mci-logo--light { display: none; }
html[data-theme="dark"] .mci-logo .mci-logo--dark { display: block; }
.mci-logo--always-dark .mci-logo--light { display: none !important; }
.mci-logo--always-dark .mci-logo--dark { display: block !important; }
@media (max-width: 1023px) { .mciq .hdr .mci-logo img { height: 36px; } }

/* Buttons — 44px, radius 10, Montserrat 700, MCI Blue */
.mciq .btn { min-height: 44px; border-radius: 10px; font-weight: 700; }
.mciq .btn-sm { min-height: 36px; border-radius: 8px; }
.mciq .btn-primary { background: var(--btn-primary); color: #fff; box-shadow: none; }
.mciq .btn-primary:hover { background: var(--mci-navy); transform: none; }
html[data-theme="dark"] .mciq .btn-primary:hover { background: #1B6BC2; }
.mciq .btn-ghost { border: 1.5px solid var(--mci-divider); color: var(--mci-navy); background: #fff; }
.mciq .btn-ghost:hover { background: var(--brand-tint); border-color: var(--mci-blue); }
html[data-theme="dark"] .mciq .btn-ghost { background: transparent; color: #EAF1F8; border-color: rgba(255,255,255,.22); }
.mciq .eyebrow, .mciq .dot { color: var(--brand-text); }
.mciq .dot { background: var(--brand); }
html[data-theme="dark"] .mciq .eyebrow { color: var(--brand-on-dark); }
.mciq a:focus-visible, .mciq button:focus-visible { outline: 3px solid rgba(34, 164, 210, 0.45); outline-offset: 2px; }

/* ---- Site footer (Atlas + Tailwind layouts): Deep Navy with reversed logos ---- */
.mf { --mf-bg: var(--mci-deep); --mf-bg-soft: #0F2948; --mf-accent: var(--brand-on-dark); --mf-accent-soft: var(--brand-on-dark); --mf-ink-300: #C9D7E8; --mf-ink-500: #9FB0C6; font-family: var(--font-en); }
[dir="rtl"] .mf { font-family: var(--font-ar); }
html[data-theme="dark"] .mf { --mf-bg: #0A1A2E; --mf-bg-soft: #0C2038; }
.mf-logo img.mf-logo__lockup { width: auto; height: 44px; }
.mf-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf-group img { height: 40px; width: auto; display: block; }
.mf-group span { font-size: 12px; color: #C9D7E8; }

/* ---- Tailwind (older) public layout ---- */
body.mci-brand { font-family: var(--font-en); }
html[dir="rtl"] body.mci-brand { font-family: var(--font-ar); }

/* =====================================================================
 * MCI Academy home v2 (October 2026): built on the existing Atlas design.
 * Academy cyan made more visible: hero tint, headline accent, eyebrows,
 * icons, numbers, tabs, status pills and the "Find my exam" button.
 * Primary buttons stay MCI Blue. Other platform colours only in the
 * MCI Group block and the footer.
 * ===================================================================== */
.mciq { --cyan: #22A4D2; --cyan-text: #19799B; --cyan-dark: #4EB6DB; --cyan-tint: #E9F6FA; }
.mciq .wrap { max-width: 1240px; padding: 0 24px; }

/* Header: dropdowns + cyan main button */
.mciq .nav { gap: 28px; }
.mciq .nav a, .mciq .nav-dd > button { font-size: 14px; }
.mciq .nav-dd { position: relative; }
.mciq .nav-dd > button { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--mci-navy); padding: 6px 0 5px; border-bottom: 3px solid transparent; }
.mciq .nav-dd > button svg { width: 13px; height: 13px; }
.mciq .nav-dd:hover > button, .mciq .nav-dd:focus-within > button { border-bottom-color: var(--cyan); }
.mciq .nav-dd__panel { display: none; position: absolute; top: calc(100% + 14px); inset-inline-start: -16px; min-width: 260px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--mci-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(11,42,80,.12); padding: 8px; z-index: 60; }
.mciq .nav-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.mciq .nav-dd:hover .nav-dd__panel, .mciq .nav-dd:focus-within .nav-dd__panel { display: grid; gap: 2px; }
.mciq .nav-dd__panel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 0 !important; font-weight: 600; }
.mciq .nav-dd__panel a:hover { background: var(--cyan-tint); }
.mciq .nav-dd__panel small { font-size: 11px; font-weight: 600; color: var(--mci-slate); }
.mciq .btn-brand { background: var(--cyan); color: var(--mci-navy); }
.mciq .btn-brand:hover { background: var(--cyan-dark); }

/* Hero */
.mciq .hero { background: linear-gradient(180deg, #fff 0%, var(--cyan-tint) 100%); padding: 64px 0 140px; }
.mciq .hero .eyebrow { color: var(--cyan-text); font-size: 12px; letter-spacing: .14em; }
.mciq .hero .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cyan); }
.mciq .h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.mciq .h1 .accent { color: var(--cyan); }
.mciq .lede { font-size: 17px; max-width: 36em; }
.mciq .trust { gap: 28px; margin-top: 30px; }
.mciq .trust > div { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 150px; max-width: 200px; }
.mciq .trust > div > span { display: block; font-size: inherit; color: inherit; }
.mciq .trust svg { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.mciq .trust b { display: block; font-size: 13.5px; color: var(--mci-navy); }
.mciq .trust small { font-size: 12.5px; color: var(--mci-slate); line-height: 1.45; display: block; }
.mciq .media { background: linear-gradient(150deg, #CFEFFA 0%, #E9F6FA 55%, #BFE6F5 100%); border: 0; box-shadow: 0 24px 50px rgba(11,42,80,.14); aspect-ratio: 5 / 4; }
.mciq .media-photo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--cyan-text); font-weight: 600; font-size: 13px; }
.mciq .media-photo img { width: 46%; opacity: .9; margin-bottom: 16px; }
.mciq .media-badge { position: absolute; bottom: 22px; inset-inline-end: 22px; background: rgba(255,255,255,.94); border-radius: 14px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(11,42,80,.15); display: flex; align-items: center; gap: 12px; }
.mciq .media-badge b { font-size: 26px; font-weight: 800; color: var(--cyan); line-height: 1; }
.mciq .media-badge span { font-size: 12.5px; font-weight: 600; color: var(--mci-navy); line-height: 1.3; }
.mciq .routebar { border-top: 4px solid var(--cyan); }
.mciq .routebar-lead svg { color: var(--cyan); }
.mciq .routebar input { appearance: none; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 6px 0 8px; font: 500 15px var(--font-en); color: var(--mci-navy); background: transparent; }
.mciq .routebar input:focus { outline: none; border-bottom-color: var(--cyan); }
.mciq .routebar .field { flex: 2; min-width: 240px; }

/* Numbers band */
.mciq .stats { background: var(--mci-navy); color: #fff; padding: 44px 0; margin-top: 24px; }
.mciq .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.mciq .stat { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 16px; border-inline-start: 1px solid rgba(255,255,255,.14); }
.mciq .stat:first-child { border-inline-start: 0; }
.mciq .stat svg { width: 34px; height: 34px; color: var(--cyan-dark); flex-shrink: 0; }
.mciq .stat b { display: block; font-size: 38px; font-weight: 800; line-height: 1; color: #fff; }
.mciq .stat span { font-size: 14px; color: #C9D7E8; }

/* Sections */
.mciq section.block { padding: 88px 0; } /* section only: Tailwind ".block" utilities (auth forms) must not get section padding */
.mciq .block--tint { background: var(--mci-mist); }
.mciq .sec-head .eyebrow { justify-content: center; color: var(--cyan-text); margin-bottom: 14px; }
.mciq .sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.mciq .sec-head h2 .accent { color: var(--cyan); }
.mciq .sec-head p { font-size: 16px; }
.mciq .sec-head { max-width: 780px; }
.mciq .card .card-foot { margin-top: auto; padding-top: 16px; }

/* Tabs: by profession / by country */
.mciq .ex-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--mci-line); border-radius: 12px; margin: 0 auto 32px; }
.mciq .ex-tabs-wrap { text-align: center; }
.mciq .ex-tab { min-height: 42px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--mci-navy); }
.mciq .ex-tab[aria-selected="true"] { background: var(--cyan); color: var(--mci-navy); }
.mciq [data-pane][hidden] { display: none !important; }

/* Cards (existing .card, now with cyan) */
.mciq .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mciq .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mciq a.card { cursor: pointer; }
.mciq .card { border-radius: 16px; box-shadow: 0 2px 10px rgba(11,42,80,.05); }
.mciq .card:hover { border-color: var(--cyan); box-shadow: 0 14px 34px rgba(11,42,80,.10); transform: translateY(-2px); }
.mciq .card-ico { background: var(--cyan-tint); color: var(--cyan-text); border-radius: 12px; width: 46px; height: 46px; }
.mciq .card-ico svg { width: 22px; height: 22px; }
.mciq .card-ico.code { font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.mciq .card h3 { font-size: 18px; }
.mciq .card .body { font-size: 13.5px; }
.mciq .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mciq .card-go { font-size: 13px; font-weight: 700; color: var(--mci-blue); }
.mciq .card--tint { background: linear-gradient(180deg, var(--cyan-tint) 0%, #fff 70%); }
.mciq .card--country { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.mciq .card--country .card-ico { margin: 0; }
.mciq .card--country h3 { font-size: 15.5px; }
.mciq .card--country small { display: block; font-size: 12px; color: var(--mci-slate); }
.mciq .status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.mciq .status::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.mciq .status--live { background: var(--cyan-tint); color: var(--cyan-text); }
.mciq .status--wait { background: #FEF3C7; color: #92400E; }
.mciq .status--soon { background: var(--mci-mist); color: var(--mci-slate); }
.mciq .ticks-static { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.mciq .ticks-static li { display: flex; gap: 8px; font-size: 13px; color: var(--mci-deep); }
.mciq .ticks-static li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--cyan-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319799B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3 3 7-7'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* How it works + sample question */
.mciq .how { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mciq .how-steps { display: grid; gap: 14px; counter-reset: s; }
.mciq .how-step { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--mci-line); border-radius: 14px; padding: 18px; counter-increment: s; }
.mciq .how-step::before { content: counter(s); flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--cyan); color: var(--mci-navy); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.mciq .how-step b { display: block; font-size: 15.5px; color: var(--mci-navy); }
.mciq .how-step span { font-size: 13.5px; color: var(--mci-slate); }
.mciq .qcard { background: #fff; border: 1px solid var(--mci-line); border-radius: 18px; padding: 26px; box-shadow: 0 24px 50px rgba(11,42,80,.12); position: relative; }
.mciq .qcard::before { content: ""; position: absolute; top: -12px; inset-inline-start: 26px; width: 26px; height: 26px; border-radius: 7px; background: var(--cyan); }
.mciq .qcard-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--mci-slate); }
.mciq .qcard-top span:last-child { color: var(--cyan-text); background: var(--cyan-tint); padding: 3px 10px; border-radius: 6px; font-weight: 700; }
.mciq .qcard p.stem { margin: 14px 0; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--mci-navy); }
.mciq .qopt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-top: 8px; border: 1.5px solid var(--mci-line); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--mci-navy); text-align: start; background: #fff; }
.mciq .qopt b { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: var(--mci-mist); font-size: 12.5px; }
.mciq .qopt:hover { border-color: var(--cyan); }
.mciq .qopt.is-right { border-color: #059669; background: #ECFDF5; }
.mciq .qopt.is-right b { background: #059669; color: #fff; }
.mciq .qopt.is-wrong { border-color: #DC2626; background: #FEF2F2; }
.mciq .qopt.is-wrong b { background: #DC2626; color: #fff; }
.mciq .qwhy { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mci-line); font-size: 13.5px; color: var(--mci-slate); }
.mciq .qwhy[hidden] { display: none; }

/* OSCE band */
.mciq .osce-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; background: linear-gradient(120deg, var(--mci-navy) 0%, var(--mci-deep) 100%); border-radius: 22px; padding: 44px; color: #C9D7E8; position: relative; overflow: hidden; }
.mciq .osce-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; }
.mciq .osce-band h2 .accent { color: var(--cyan-dark); }
.mciq .osce-band p { line-height: 1.65; margin-top: 10px; font-size: 15.5px; max-width: 34em; }
.mciq .osce-band .btn { margin-top: 22px; }
.mciq .osce-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mciq .osce-chips span { border: 1px solid rgba(78,182,219,.5); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }

/* MCI Group row */
.mciq .group-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mciq .gtile { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--mci-line); border-radius: 14px; }
.mciq .gtile i { width: 14px; height: 40px; border-radius: 4px; background: var(--q); flex-shrink: 0; }
.mciq .gtile b { display: block; font-size: 15px; color: var(--mci-navy); }
.mciq .gtile span { font-size: 12.5px; color: var(--mci-slate); }
.mciq .gtile--here { border-color: var(--cyan); background: var(--cyan-tint); }
.mciq a.gtile:hover { border-color: var(--q); }

/* Footer additions */
.mf-group__row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); }
.mf-platforms { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mf-platforms a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.mf-platforms a::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--q); }

@media (max-width: 1100px) {
  .mciq .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mciq .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mciq .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .mciq .stat:nth-child(3) { border-inline-start: 0; }
  .mciq .how, .mciq .osce-band { grid-template-columns: 1fr; }
  .mciq .osce-chips { justify-content: flex-start; }
  .mciq .group-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mciq .grid-4, .mciq .grid-3, .mciq .group-row { grid-template-columns: 1fr; }
  .mciq .stats-grid { grid-template-columns: 1fr 1fr; }
  .mciq .stat { flex-direction: column; text-align: center; gap: 8px; border: 0; }
  .mciq section.block { padding: 60px 0; }
  .mciq .osce-band { padding: 28px; }
  .mciq .hero { padding: 36px 0 120px; }
}

/* =====================================================================
 * Inner pages (redesign v2): page hero, profession / country / exam /
 * product pages, Find my exam, services, FAQ, legal, 404. Same tokens.
 * ===================================================================== */
.skip-link { position: absolute; top: -60px; inset-inline-start: 16px; z-index: 200; background: var(--mci-blue); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.mciq .nav-dd > button.on { border-bottom-color: var(--cyan); }
.mciq .nav-dd__panel--cols { grid-template-columns: 1fr 1fr; min-width: 380px; }
.mciq .nav-dd:hover .nav-dd__panel--cols, .mciq .nav-dd:focus-within .nav-dd__panel--cols { display: grid; }
.mciq .nav-dd__all { grid-column: 1 / -1; color: var(--mci-blue) !important; border-top: 1px solid var(--mci-line) !important; border-radius: 0 0 8px 8px !important; margin-top: 4px; }
.mciq .media-img { object-fit: cover; }
[dir="rtl"] .mciq .flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .mciq .hero, [dir="rtl"] .mciq .h1 { letter-spacing: 0; }
[dir="rtl"] .mciq .h1 { line-height: 1.25; }
[dir="rtl"] .mciq .eyebrow, [dir="rtl"] .mciq .sec-head .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }

/* Page hero for inner pages */
.mciq .ph-hero { background: linear-gradient(180deg, #fff 0%, var(--cyan-tint) 100%); padding: 40px 0 56px; border-bottom: 1px solid var(--mci-line); }
.mciq .ph-hero--center { text-align: center; padding: 96px 0; }
.mciq .crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--mci-slate); margin-bottom: 18px; }
.mciq .crumbs a { color: var(--mci-blue); font-weight: 600; }
.mciq .crumbs a:hover { text-decoration: underline; }
.mciq .ph-hero .eyebrow { color: var(--cyan-text); font-size: 12px; letter-spacing: .14em; margin-bottom: 14px; }
.mciq .ph-hero .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cyan); }
.mciq .ph-title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.12; color: var(--mci-navy); max-width: 26ch; }
.mciq .ph-title .accent { color: var(--cyan); }
.mciq .ph-lead { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--mci-slate); max-width: 46em; }
.mciq .ph-hero--center .ph-title, .mciq .ph-hero--center .ph-lead { margin-left: auto; margin-right: auto; }
.mciq .nf-code { font-size: 88px; font-weight: 800; color: var(--cyan); line-height: 1; margin-bottom: 8px; }
.mciq section.block--top { padding-top: 56px; }
.mciq section.block--flush { padding-top: 0; }
.mciq .sec-head--start { text-align: start; margin: 0 0 28px; max-width: none; }
.mciq .sec-head--start .eyebrow { justify-content: flex-start; }
.mciq .sec-foot { margin-top: 32px; }
.mciq .h2-sm { font-size: 22px; font-weight: 800; color: var(--mci-navy); margin: 0 0 18px; }
.mciq .stats--slim { margin-top: 0; padding: 30px 0; }
.mciq .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mciq .stat b.stat-word { font-size: 22px; }
.mciq .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mciq .card--tall { align-items: flex-start; }
.mciq .card--mini { padding: 18px; }
.mciq .card--mini h3 { font-size: 15.5px; }
.mciq .card--exam h3 { font-size: 15.5px; line-height: 1.35; }
.mciq .card--contact h3 { font-size: 17px; }
.mciq .card h3 a:hover { color: var(--mci-blue); }
.mciq .muted-line { display: block; margin-top: 6px; font-size: 12px; color: var(--cyan-text) !important; font-weight: 600; }
.mciq .exam-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.mciq .exam-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mci-line); font-size: 13.5px; color: var(--mci-deep); }
.mciq .exam-list li:last-child { border-bottom: 0; }
.mciq .exam-list a { color: var(--mci-blue); font-weight: 600; }
.mciq .exam-list a:hover { text-decoration: underline; }
.mciq .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mciq .chips span, .mciq .chips a { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--mci-line); background: #fff; font-size: 13px; font-weight: 600; color: var(--mci-navy); }
.mciq .chips--links a:hover, .mciq .chips a[aria-current="page"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--cyan-text); }
.mciq .tag { font-size: 12px; font-weight: 600; color: var(--mci-navy); background: var(--mci-mist); border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.mciq .tag--soft { background: #fff; border: 1px solid var(--mci-line); color: var(--mci-slate); }
.mciq .ex-tabs-wrap--start { text-align: start; }
.mciq .status--unknown { background: var(--mci-mist); color: var(--mci-slate); }

/* Pathway: numbered rounded squares in a row (a real sequence) */
.mciq .pathway { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: p; }
.mciq .pathway li { counter-increment: p; position: relative; background: #fff; border: 1px solid var(--mci-line); border-radius: 14px; padding: 18px; font-weight: 700; color: var(--mci-navy); font-size: 14.5px; }
.mciq .pathway li::before { content: counter(p); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--cyan); color: var(--mci-navy); font-weight: 800; margin-bottom: 12px; }
.mciq .pathway--col { grid-template-columns: 1fr; margin-bottom: 0; }
.mciq .pathway--col li { display: flex; align-items: center; gap: 14px; }
.mciq .pathway--col li::before { margin: 0; flex-shrink: 0; }

/* Services list (country page) */
.mciq .svc-list { display: grid; gap: 10px; }
.mciq .svc-list a { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--mci-line); border-radius: 12px; padding: 14px 16px; font-weight: 700; color: var(--mci-navy); }
.mciq .svc-list a:hover { border-color: var(--cyan); }
.mciq .svc-list svg { width: 22px; height: 22px; color: var(--cyan-text); flex-shrink: 0; }
.mciq .svc-list span:not(.status) { flex: 1; }

/* Exam page and product page: content + sticky product box */
.mciq .exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.mciq .exam-layout--solo { grid-template-columns: minmax(0, 1fr); } /* follow-up 55a: guide page without a product box */
.mciq .exam-sec { background: #fff; border: 1px solid var(--mci-line); border-radius: 16px; padding: 24px; margin-bottom: 18px; }
.mciq .md-main--wide { max-width: 900px; }
.mciq .pbox { position: sticky; top: 96px; background: #fff; border: 1px solid var(--mci-line); border-top: 4px solid var(--cyan); border-radius: 16px; padding: 22px; box-shadow: 0 18px 40px rgba(11,42,80,.10); display: grid; gap: 12px; }
.mciq .pbox__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-text); }
[dir="rtl"] .mciq .pbox__label { letter-spacing: 0; text-transform: none; }
.mciq .pbox h3 { font-size: 17px; font-weight: 800; color: var(--mci-navy); line-height: 1.35; }
.mciq .pbox .status { justify-self: start; }
.mciq .pbox__dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 4px 0; font-size: 14px; }
.mciq .pbox__dl dt { color: var(--mci-slate); }
.mciq .pbox__dl dd { margin: 0; font-weight: 700; color: var(--mci-navy); text-align: end; }
.mciq .pbox__note { font-size: 13px; color: var(--mci-slate); }
.mciq .pbox__more { font-size: 13px; font-weight: 700; color: var(--mci-navy); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--mci-line); }
.mciq .pbox__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mci-blue); }
.mciq .btn-block { width: 100%; }
.mciq .pbar { display: none; }
.mciq .ticks-static--lg li { font-size: 15px; padding: 4px 0; }

/* Find my exam */
.mciq .finder { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; background: #fff; border: 1px solid var(--mci-line); border-top: 4px solid var(--cyan); border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(11,42,80,.06); }
.mciq .finder__search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--mci-line); border-radius: 10px; padding: 0 12px; }
.mciq .finder__search svg { width: 18px; height: 18px; color: var(--mci-slate); flex-shrink: 0; }
.mciq .finder input, .mciq .finder select { width: 100%; min-height: 44px; border: 0; background: transparent; font: 500 14px var(--font-en); color: var(--mci-navy); }
[dir="rtl"] .mciq .finder input, [dir="rtl"] .mciq .finder select { font-family: var(--font-ar); }
.mciq .finder select { border: 1px solid var(--mci-line); border-radius: 10px; padding: 0 10px; cursor: pointer; }
.mciq .finder input:focus, .mciq .finder select:focus { outline: 2px solid rgba(34,164,210,.45); border-radius: 8px; }
.mciq .finder__count { margin: 18px 0 10px; font-size: 14px; color: var(--mci-slate); }
.mciq .finder__count b { color: var(--mci-navy); }
.mciq .rows { display: grid; gap: 8px; }
.mciq .row-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--mci-line); border-radius: 12px; padding: 12px 16px; }
.mciq .row-item[hidden] { display: none; }
.mciq .row-item:hover { border-color: var(--cyan); }
.mciq .row-item__main { flex: 1; min-width: 0; }
.mciq .row-item__main b { display: block; font-size: 14.5px; color: var(--mci-navy); }
.mciq .row-item__main span { font-size: 12.5px; color: var(--mci-slate); }
.mciq .empty { text-align: center; padding: 40px; background: #fff; border: 1px dashed var(--mci-divider); border-radius: 14px; }
.mciq .empty[hidden] { display: none; }
.mciq .empty p { margin-bottom: 14px; color: var(--mci-slate); }

/* Call-to-action band */
.mciq .cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(120deg, var(--mci-navy) 0%, var(--mci-deep) 100%); color: #C9D7E8; border-radius: 20px; padding: 32px 36px; }
.mciq .cta-band h2 { color: #fff; font-size: 24px; font-weight: 800; }
.mciq .cta-band p { margin-top: 6px; max-width: 40em; }
.mciq .cta-band--light { background: #fff; border: 1px solid var(--mci-line); color: var(--mci-slate); }
.mciq .cta-band--light h2 { color: var(--mci-navy); font-size: 21px; }

/* FAQ */
.mciq .faq-list details { background: #fff; border: 1px solid var(--mci-line); border-radius: 14px; margin-bottom: 10px; }
.mciq .faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; color: var(--mci-navy); font-size: 16px; }
.mciq .faq-list summary::-webkit-details-marker { display: none; }
.mciq .faq-list summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--cyan-tint); color: var(--cyan-text); font-size: 18px; }
.mciq .faq-list details[open] summary::after { content: "−"; background: var(--cyan); color: var(--mci-navy); }
.mciq .faq-list details p { padding: 0 20px 18px; color: var(--mci-slate); font-size: 15px; line-height: 1.7; }
.mciq .legal { max-width: 820px; font-size: 15.5px; line-height: 1.8; color: var(--mci-deep); }
.mciq .group-mini { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.mciq .group-mini span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--mci-navy); }
.mciq .group-mini span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--q); }
.mf-about { margin-top: 12px; font-size: 13.5px; color: #C9D7E8; max-width: 26ch; }
.mf-contact__item svg { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .mciq .exam-layout, .mciq .two-col { grid-template-columns: 1fr; }
  .mciq .pbox { position: static; }
  .mciq .pathway { grid-template-columns: 1fr 1fr; }
  .mciq .finder { grid-template-columns: 1fr 1fr; }
  .mciq .finder__search { grid-column: 1 / -1; }
  .mciq .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mciq .pathway { grid-template-columns: 1fr; }
  .mciq .finder { grid-template-columns: 1fr; }
  .mciq .row-item { flex-wrap: wrap; }
  .mciq .row-item__main { flex-basis: 100%; }
  .mciq .row-item .btn { margin-inline-start: auto; }
  .mciq .nav-dd__panel--cols { min-width: 0; }
  .mciq .stats-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .mciq .pbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--mci-line); box-shadow: 0 -8px 24px rgba(11,42,80,.08); font-size: 13px; font-weight: 700; color: var(--mci-navy); }
  .mciq .cta-band { padding: 24px; }
}

/* Shared radius and text tokens used by the student portal and quiz sections */
:root { --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --mci-deep-text: #C9D7E8; }

/* ===================== 8. Student portal (student/layouts/app.blade.php) ===================== */
/* Navy sidebar, white top bar, mist page, MCI Blue buttons, cyan only for "where am I" marks.
   Sidebar class names come from student/inc/sidebar.blade.php; if a name differs, rename it here. */
body.student-portal { font-family: var(--font-en); color: var(--mci-navy); background: var(--mci-mist); }
html[dir="rtl"] body.student-portal { font-family: var(--font-ar); }
html[data-theme="dark"] body.student-portal { background: var(--mci-mist); color: var(--mci-navy); }
.student-content { background: var(--mci-mist); }

/* Top bar */
.student-topbar { background: #fff; border-bottom: 1px solid var(--mci-line); min-height: 72px; }
.student-topbar__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
html[dir="rtl"] .student-topbar__eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.student-topbar__title { font-size: 20px; font-weight: 800; color: var(--mci-navy); }
.student-topbar__link { font-weight: 700; color: var(--mci-blue); }
.student-topbar__link:hover { color: var(--mci-navy); }
.student-topbar__avatar { background: var(--brand-tint); color: var(--brand-text); font-weight: 800; }
.student-topbar__name { color: var(--mci-navy); font-weight: 700; }
.student-topbar__role { color: var(--mci-slate); }
.student-topbar__logout { min-height: 40px; border: 1.5px solid var(--mci-divider); border-radius: var(--r-sm); background: #fff; color: var(--mci-navy); font-weight: 700; padding: 0 14px; }
.student-topbar__logout:hover { background: var(--brand-tint); border-color: var(--mci-blue); }
.site-lang-switch__btn { font-weight: 700; color: var(--mci-slate); }
.site-lang-switch__btn.is-active { background: var(--mci-navy); color: #fff; }

/* Sidebar (Navy). Active item: cyan bar at the start + light cyan wash. */
/* Learner sidebar: lighter, logo-matched navy (between Deep Navy #143256 and MCI Blue #1256A2), not the darkest Navy.
   White text 9.8:1, secondary text #D5E2F0 7.6:1 on the lightest point; Academy cyan marks the active item. */
.student-sidebar {
  --sb-bg: #1A4474;
  --sb-bg-end: #163B66;
  --sb-text: #D5E2F0;
  --sb-line: rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-end) 100%);
  color: var(--sb-text);
  border-inline-end-color: var(--sb-line);
}
.student-sidebar a, .student-sidebar button { color: var(--sb-text); font-weight: 600; }
.student-sidebar a:hover, .student-sidebar button:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.student-sidebar [aria-expanded="true"] { color: #fff; }
.student-sidebar .is-active, .student-sidebar [aria-current="page"] { background: rgba(78, 182, 219, .24); color: #fff; box-shadow: inset 4px 0 0 var(--brand); border-radius: 8px; }
.student-sidebar hr, .student-sidebar [class*="__header"], .student-sidebar [class*="__footer"] { border-color: var(--sb-line); }
html[dir="rtl"] .student-sidebar .is-active, html[dir="rtl"] .student-sidebar [aria-current="page"] { box-shadow: inset -4px 0 0 var(--brand); }
.student-sidebar__brand img { height: 40px; width: auto; display: block; }

/* Cards, buttons, pills, tables used across the portal pages */
.student-portal .card, .student-portal .student-card { background: #fff; border: 1px solid var(--mci-line); border-radius: var(--r-lg); box-shadow: none; }
.student-portal .btn-primary, .student-portal button.bg-brand-600, .student-portal a.bg-brand-600 { background: var(--btn-primary); color: #fff; border-radius: var(--r-md); min-height: 44px; font-weight: 700; }
.student-portal .btn-primary:hover, .student-portal .bg-brand-600:hover { background: var(--mci-navy); }
.student-portal table thead, .student-portal .table-head { background: var(--mci-navy); color: #fff; }
.student-portal .pill-tutor, .student-portal .pill-in-progress { background: var(--brand-tint); color: var(--brand-text); }
.student-portal .pill-exam { background: #EEF4FB; color: var(--mci-blue); }
.student-portal .pill-completed { background: var(--mci-ok-bg); color: var(--mci-ok-text); }
.student-portal .pill-suspended { background: #FEF3C7; color: #92400E; }
.student-portal .score-bar > span, .student-portal progress::-webkit-progress-value { background: var(--brand); }

/* ===================== 9. Quiz screen (student/quiz/take.blade.php) ===================== */
/* Loaded LAST on the quiz screen (change list item 9). Light reading theme only;
   the student's own "colour theme" / reverse mode inside the quiz keeps working. */
body.student-exam { font-family: var(--font-en); }
html[dir="rtl"] body.student-exam { font-family: var(--font-ar); }
body.student-exam:not(.is-reversed) {
  --exam-surface: #fff;
  --exam-text: var(--mci-navy);
  --exam-heading: var(--mci-navy);
  --exam-border: var(--mci-line);
}
body.student-exam:not(.is-reversed) .exam-topbar,
body.student-exam:not(.is-reversed) .exam-bottombar { background: var(--mci-navy); color: #fff; border-color: transparent; }
body.student-exam:not(.is-reversed) .exam-topbar button,
body.student-exam:not(.is-reversed) .exam-bottombar button,
body.student-exam:not(.is-reversed) .exam-topbar__qid,
body.student-exam:not(.is-reversed) .exam-bottombar__timer { color: #fff; }
body.student-exam:not(.is-reversed) .exam-tool-btn:hover,
body.student-exam:not(.is-reversed) .exam-topbar__nav-btn:hover { background: rgba(255, 255, 255, .10); }
body.student-exam:not(.is-reversed) .exam-topbar__mark[aria-pressed="true"] .exam-topbar__mark-check { background: var(--mci-flag); border-color: var(--mci-flag); }
body.student-exam:not(.is-reversed) .exam-content { background: #fff; color: var(--mci-navy); }
body.student-exam:not(.is-reversed) .exam-qnav { background: var(--mci-mist); border-color: var(--mci-line); }
body.student-exam:not(.is-reversed) .exam-mode-switch.is-on .exam-mode-switch__track { background: var(--brand); }
body.student-exam:not(.is-reversed) .exam-mode-pair__btn.is-active { background: var(--brand); color: var(--on-brand); }
body.student-exam:not(.is-reversed) .exam-tutor-submit button,
body.student-exam:not(.is-reversed) .exam-notebook__btn--primary { background: var(--btn-primary); color: #fff; border-radius: var(--r-md); font-weight: 700; }

/* Auth and notify pages (apply these classes in the existing auth / notify-me views) */
.mciq .auth-wrap { display: grid; place-items: center; padding: 56px 0 88px; background: linear-gradient(180deg, #fff 0%, var(--cyan-tint) 100%); }
.mciq .auth-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--mci-line); border-top: 4px solid var(--cyan); border-radius: 18px; padding: 32px; box-shadow: 0 24px 50px rgba(11,42,80,.10); }
.mciq .auth-card h1 { font-size: 26px; font-weight: 800; color: var(--mci-navy); }
.mciq .auth-card > p { margin-top: 6px; color: var(--mci-slate); font-size: 15px; }
.mciq .form { display: grid; gap: 14px; margin-top: 22px; }
.mciq .form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mci-navy); }
.mciq .form input, .mciq .form select { min-height: 46px; border: 1px solid var(--mci-divider); border-radius: 10px; padding: 0 14px; font: 500 15px var(--font-en); color: var(--mci-navy); background: #fff; }
[dir="rtl"] .mciq .form input, [dir="rtl"] .mciq .form select { font-family: var(--font-ar); }
.mciq .form input:focus, .mciq .form select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,164,210,.18); }
.mciq .form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--mci-slate); }
.mciq .form .check input { min-height: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mci-blue); }
.mciq .auth-alt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mci-line); font-size: 14px; color: var(--mci-slate); text-align: center; }
.mciq .auth-alt a, .mciq .form .link { color: var(--mci-blue); font-weight: 700; }
.mciq .auth-note { display: flex; gap: 10px; align-items: center; background: var(--cyan-tint); color: var(--cyan-text); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin-top: 16px; }

/* ===================== 10. Local merge (exact Medicine buttons, profession links, logo) ===================== */
/* Product box: the Section 4 buttons of the page with their status and source note */
.mciq .pbtns { display: grid; gap: 12px; }
.mciq .pbtn { display: grid; gap: 6px; }
.mciq .pbtn__a { white-space: normal; text-align: center; line-height: 1.35; padding-block: 10px; height: auto; }
.mciq .pbtn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mci-slate); }
.mciq .pbtn__note { color: var(--mci-slate); }
.mciq .hub-start { background: #fff; border: 1px solid var(--mci-line); border-top: 4px solid var(--cyan); border-radius: 16px; padding: 22px; margin-bottom: 28px; max-width: 560px; }
.mciq .hub-start .h2-sm { margin-top: 0; }
.mciq .prof-page-link { margin: 0 0 18px; }
.mciq .product-meta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mci-slate); }
.mciq .product-dl dd { text-align: start; font-weight: 600; }
/* Logo lockup with "Part of MCI Group": a little taller so the grey line stays legible */
.mciq .hdr .mci-logo img { height: 52px; }
@media (max-width: 1023px) { .mciq .hdr .mci-logo img { height: 42px; } }
.mciq .notify-product { align-items: flex-start; }
.mciq .notify-product strong { display: block; color: var(--mci-navy); font-size: 15px; margin: 2px 0 6px; }
.mciq .notify-product__about { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.mciq .notify-product__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 500; color: var(--mci-slate); }
.mciq .notify-done { background: #E7F6EC; color: #116B33; }
.mciq .notify-error { background: #FDECEC; color: #B91C1C; }
.mciq .notify-cta { font-weight: 700; color: var(--mci-navy); }
.mciq .form-err { margin-top: -8px; color: #B91C1C; font-size: 13px; font-weight: 600; }
/* Breeze auth pages (register, forgot / reset password, verify, confirm) inside the auth card */
.mciq .auth-card--breeze { font-family: var(--font-en); }
[dir="rtl"] .mciq .auth-card--breeze { font-family: var(--font-ar); }
.mciq .auth-card--breeze label { font-size: 13px; font-weight: 700; color: var(--mci-navy); }
.mciq .auth-card--breeze input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; border: 1px solid var(--mci-divider); border-radius: 10px; padding: 0 14px; color: var(--mci-navy); background: #fff; box-shadow: none; }
.mciq .auth-card--breeze input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,164,210,.18); }
.mciq .auth-card--breeze button[type="submit"] { min-height: 44px; border-radius: 10px; background: var(--btn-primary); color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 20px; }
.mciq .auth-card--breeze button[type="submit"]:hover { background: var(--mci-navy); }
.mciq .auth-card--breeze a { color: var(--mci-blue); font-weight: 600; }
/* Header / footer wrappers on the older layouts: not a full-height page */
.mciq.mciq--chrome { min-height: 0; }
/* MCI Group logo in the footer: fixed height even where Tailwind's img reset applies */
.mf .mf-group__logo { height: 44px !important; width: auto !important; max-width: none; }
/* Profession tabs on country pages scroll sideways on phones instead of widening the page */
.mciq .ex-tabs-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mciq .ex-tabs { flex-wrap: nowrap; }
.mciq .ex-tab { white-space: nowrap; }
/* Student sign-in (student/auth/login.blade.php): brand fonts and colours */
body:has(.student-auth-hero) { font-family: var(--font-en); }
html[dir="rtl"] body:has(.student-auth-hero) { font-family: var(--font-ar); }
.student-auth-hero { background: linear-gradient(150deg, var(--mci-navy) 0%, var(--mci-deep) 55%, var(--mci-blue) 100%) !important; }
.student-auth-submit { background: var(--btn-primary) !important; box-shadow: none !important; border-radius: 10px !important; }
.student-auth-submit:hover { background: var(--mci-navy) !important; }
.student-auth-panel a { color: var(--mci-blue); }

/* ===================== 11. Dark mode (sun / moon toggle, html[data-theme="dark"]) for the redesign v2 components ===================== */
/* Brand text / line tokens become their on-dark values inside the site; navy bands stay navy. */
html[data-theme="dark"] .mciq {
  --mci-navy: #EAF1F8;
  --mci-deep: #C9D7E8;
  --mci-slate: #A9B9CD;
  --mci-line: rgba(255, 255, 255, .10);
  --mci-divider: rgba(255, 255, 255, .20);
  --mci-mist: #0F1E33;
  --cyan-tint: #10283F;
  --cyan-text: #4EB6DB;
  --brand-text: #4EB6DB;
  --brand-tint: #16304F;
  --dk-card: #12233B;
  background: #0B1626;
  color: #EAF1F8;
}
html[data-theme="dark"] body:has(.mciq) { background: #0B1626; }
html[data-theme="dark"] .mciq .hdr { background: #0B1626; }
html[data-theme="dark"] .mciq .btn-ghost,
html[data-theme="dark"] .mciq .nav-dd__panel,
html[data-theme="dark"] .mciq .ex-tabs,
html[data-theme="dark"] .mciq .how-step,
html[data-theme="dark"] .mciq .qcard,
html[data-theme="dark"] .mciq .qopt,
html[data-theme="dark"] .mciq .gtile,
html[data-theme="dark"] .mciq .chips span,
html[data-theme="dark"] .mciq .chips a,
html[data-theme="dark"] .mciq .tag--soft,
html[data-theme="dark"] .mciq .pathway li,
html[data-theme="dark"] .mciq .svc-list a,
html[data-theme="dark"] .mciq .exam-sec,
html[data-theme="dark"] .mciq .pbox,
html[data-theme="dark"] .mciq .finder,
html[data-theme="dark"] .mciq .row-item,
html[data-theme="dark"] .mciq .empty,
html[data-theme="dark"] .mciq .cta-band--light,
html[data-theme="dark"] .mciq .faq-list details,
html[data-theme="dark"] .mciq .pbar,
html[data-theme="dark"] .mciq .auth-card,
html[data-theme="dark"] .mciq .hub-start,
html[data-theme="dark"] .mciq .card { background: var(--dk-card); color: #EAF1F8; }
html[data-theme="dark"] .mciq .form input,
html[data-theme="dark"] .mciq .form select,
html[data-theme="dark"] .mciq .finder input,
html[data-theme="dark"] .mciq .finder select,
html[data-theme="dark"] .mciq .auth-card--breeze input:not([type="checkbox"]):not([type="radio"]) { background: #0F1E33; color: #EAF1F8; border-color: rgba(255, 255, 255, .20); }
html[data-theme="dark"] .mciq .hero,
html[data-theme="dark"] .mciq .ph-hero,
html[data-theme="dark"] .mciq .auth-wrap { background: linear-gradient(180deg, #0B1626 0%, #10283F 100%); }
html[data-theme="dark"] .mciq .card--tint { background: linear-gradient(180deg, #10283F 0%, var(--dk-card) 70%); }
html[data-theme="dark"] .mciq section.block--tint { background: #0F1E33; }
html[data-theme="dark"] .mciq .stats { background: #0A1F3B; }
html[data-theme="dark"] .mciq .btn-primary:hover,
html[data-theme="dark"] .mciq .auth-card--breeze button[type="submit"]:hover { background: #1B6BC2; }
html[data-theme="dark"] .mciq .md-sec, html[data-theme="dark"] .mciq .md-main { color: #DCE6F2; }
html[data-theme="dark"] .mciq .md-sec table th { background: #16304F; color: #EAF1F8; }
html[data-theme="dark"] .mciq .md-sec table td { border-color: rgba(255, 255, 255, .12); }
/* The light logo is swapped for the reversed one by the existing .mci-logo rules. */
html[data-theme="dark"] .mciq .media-badge { background: var(--dk-card); color: #EAF1F8; }
/* Student portal in dark mode (overrides the light page / top bar / cards set in section 8) */
html[data-theme="dark"] body.student-portal,
html[data-theme="dark"] .student-content { background: #0B1626; color: #EAF1F8; }
html[data-theme="dark"] .student-topbar { background: #0F1E33; border-bottom-color: rgba(255, 255, 255, .10); }
html[data-theme="dark"] .student-topbar__title,
html[data-theme="dark"] .student-topbar__name { color: #EAF1F8; }
html[data-theme="dark"] .student-topbar__role { color: #A9B9CD; }
html[data-theme="dark"] .student-topbar__link { color: #4EB6DB; }
html[data-theme="dark"] .student-topbar__logout { background: transparent; color: #EAF1F8; border-color: rgba(255, 255, 255, .22); }
html[data-theme="dark"] .site-lang-switch__btn { color: #A9B9CD; }
html[data-theme="dark"] .site-lang-switch__btn.is-active { background: #1256A2; color: #fff; }
html[data-theme="dark"] .student-portal .card,
html[data-theme="dark"] .student-portal .student-card { background: #12233B; border-color: rgba(255, 255, 255, .10); color: #EAF1F8; }
html[data-theme="dark"] .student-portal .btn-primary:hover,
html[data-theme="dark"] .student-portal .bg-brand-600:hover { background: #1B6BC2; }
html[data-theme="dark"] .student-portal table thead,
html[data-theme="dark"] .student-portal .table-head { background: #16304F; }