/*
Theme Name: Olympic Institute v2
Theme URI: https://olympic-institute.com
Author: Olympic Institute
Author URI: https://olympic-institute.com
Description: قالب المعهد الأوليمبي الدولي لعلوم الرياضة — تصميم جديد بالكامل يعرض بيانات المعهد الحقيقية من Tutor LMS و WooCommerce. يدعم RTL والوضعين النهاري والليلي.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olympic-institute
Tags: education, e-learning, rtl-language-support, custom-logo, translation-ready
*/

/* -----------------------------------------------------------------------------
   The design system lives in assets/css/design.css, which is enqueued first.
   This file is loaded last and is the right place for site-specific overrides —
   keeping it separate means the design system can be updated wholesale without
   losing local tweaks.
   -------------------------------------------------------------------------- */

/* WordPress core alignment and caption classes, which the design system has no
   reason to know about. */
.alignleft   { float: inline-start; margin-inline-end: 1.5em; margin-block-end: 1em; }
.alignright  { float: inline-end;   margin-inline-start: 1.5em; margin-block-end: 1em; }
.aligncenter { display: block; margin-inline: auto; margin-block-end: 1em; }
.alignwide, .alignfull { margin-block: 2em; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.86rem;
  color: var(--muted);
  text-align: center;
  margin-block-start: 8px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Cart badge in the header. */
.nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: var(--text);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__cart:hover { background: var(--surf-a); color: var(--cyan-fg); }
.nav__cart svg { width: 21px; height: 21px; }
.nav__cart-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cyan);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Footer address is a span, not a link — keep it on the same rhythm. */
.footer__addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
}

/* The catalogue wraps each card so it can be hidden by the filter without
   disturbing the grid. */
#catalogGrid > [data-cat] { display: contents; }
#catalogGrid > [data-cat][hidden] { display: none; }

/* -----------------------------------------------------------------------------
   Forced-visible state, applied by the safety net in assets/js/theme.js.
   .reveal starts at opacity 0 and is animated in. If animations never run,
   adding .is-in alone changes nothing and the page reads as blank — this class
   sets the finished state outright. Also applied when printing.
   -------------------------------------------------------------------------- */
.reveal.reveal--shown {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media print {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .topbar, .nav__actions, .drawer, .lightbox { display: none !important; }
}

/* =============================================================================
   Components the redesign did not ship, added for the pages it was missing:
   services, the certificate portal, and the reviews page. Everything below is
   built from the design system's own tokens so it belongs to the same family.
   ========================================================================== */

/* --- service cards reuse .feature-card, with an optional photo ----------- */
.feature-card__img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--r-md, 14px);
  margin-block-end: 18px;
}
.feature-card .link-arrow { margin-block-start: 16px; }

/* --- certificate portal --------------------------------------------------- */
.verify-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.verify-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 20px);
  padding: clamp(24px, 4vw, 44px);
  text-align: center;
}
.verify-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-navy);
  color: #fff;
}
.verify-card__icon svg { width: 32px; height: 32px; }
.verify-card h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block-end: 10px; }
.verify-card > p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.verify-card__form { margin-block-start: 26px; }

/* The verification plugin renders its own markup. These rules re-dress it in
   the site's design without touching the plugin's PHP or its lookup logic. */
.verify-card__form .cv-container,
.verify-card__form .cv-verification-box { all: unset; display: block; }
.verify-card__form .cv-icon,
.verify-card__form .cv-title,
.verify-card__form .cv-subtitle { display: none; }

.verify-card__form .cv-input-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}
.verify-card__form .cv-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  font: inherit;
  font-size: 1.02rem;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  text-align: center;
  letter-spacing: 0.04em;
  direction: ltr;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.verify-card__form .cv-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.verify-card__form .cv-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font: inherit;
  font-weight: 700;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.verify-card__form .cv-submit:hover { transform: translateY(-1px); filter: brightness(1.08); }
.verify-card__form .cv-submit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.verify-card__form #verification-result:not(:empty) {
  margin-block-start: 22px;
  padding: 18px 20px;
  border-radius: var(--r-md, 14px);
  border: 1px solid var(--border);
  background: var(--surf-a);
  text-align: start;
  line-height: 1.9;
}

/* --- sidebar -------------------------------------------------------------- */
.verify-side { display: flex; flex-direction: column; gap: 18px; }

.verify-stat {
  background: var(--grad-navy);
  color: #fff;
  border-radius: var(--r-lg, 20px);
  padding: 26px 22px;
  text-align: center;
}
.verify-stat__n {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.verify-stat__l { display: block; margin-block-start: 6px; font-size: 0.93rem; opacity: 0.86; }

.verify-note {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 20px);
  padding: 24px 22px;
}
.verify-note h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.05rem; margin-block-end: 12px;
}
.verify-note h3 svg { width: 20px; height: 20px; color: var(--cyan-fg); flex: none; }
.verify-note ul { margin: 0 0 20px; padding-inline-start: 20px; }
.verify-note li { color: var(--muted); font-size: 0.94rem; line-height: 1.85; margin-block-end: 8px; }

/* --- review cards --------------------------------------------------------- */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 20px);
  padding: 26px 24px;
  height: 100%;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.review-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.review-card blockquote {
  margin: 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.95;
  flex: 1;
}
.review-card footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
}
.review-card__name { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.review-card__course { font-size: 0.87rem; color: var(--muted); }

@media (max-width: 900px) {
  .verify-wrap { grid-template-columns: 1fr; }
}

/* =============================================================================
   Dual pricing — pounds for Egypt, dollars for everyone else.
   Both prices are rendered server-side and one is hidden, so switching costs
   nothing and every page stays cacheable.
   ========================================================================== */

.cur[hidden] { display: none !important; }
.cur__sym { font-size: 0.62em; font-weight: 700; opacity: 0.8; }

/* The switch itself — a segmented control, sized to sit beside the theme
   button without crowding it. */

/* Buy card: price on one side, switch on the other. */
.buy-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.buy-card__save-amt { font-weight: 800; }



/* =============================================================================
   Course detail — rebuilt around the one question a visitor is asking:
   should I take this? The facts that answer it lead, and the enrolment card
   follows the reader down the page instead of making them scroll back.
   ========================================================================== */

.cd-hero {
  padding-block: clamp(24px, 4vw, 44px) clamp(28px, 5vw, 56px);
  background:
    radial-gradient(120% 100% at 100% 0, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 60%),
    var(--bg-elev-2);
  border-block-end: 1px solid var(--line);
}
.cd-hero .crumbs { margin-block-end: 20px; }

.cd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
/* A grid child will not shrink below its content's intrinsic width unless
   told to — without this, a long unbroken heading widens the whole row. */
.cd-hero__main { min-width: 0; }
.cd-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.cd-hero h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  line-height: 1.3;
  margin-block-end: 14px;
  text-wrap: balance;
}
.cd-hero__sub {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.9;
  max-width: 62ch;
  margin-block-end: 26px;
}
.cd-hero__media {
  margin: 0;
  border-radius: var(--r-lg, 20px);
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(0, 35, 85, .55);
}
.cd-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 8 / 5; }

.pill--sale { background: color-mix(in srgb, #c0392b 16%, transparent); color: #c0392b; }

/* the fact strip */
.cd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  overflow: hidden;
}
.cd-fact {
  background: var(--bg-elev);
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cd-fact svg { width: 19px; height: 19px; color: var(--cyan-fg); margin-block-end: 3px; }
.cd-fact__v { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.cd-fact__k { font-size: .76rem; color: var(--muted); }

/* layout */
.cd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.cd-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }

.cd-block h2 { font-size: clamp(1.3rem, 2.8vw, 1.75rem); margin-block-end: 18px; }
.cd-block h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.05rem; margin-block-end: 14px;
}
.cd-block h3 svg { width: 19px; height: 19px; color: var(--cyan-fg); flex: none; }
.cd-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cd-curr-sum { color: var(--muted); font-size: .93rem; margin-block-end: 18px; }

.cd-toggle-all {
  font: inherit; font-size: .87rem; font-weight: 700;
  color: var(--cyan-fg); background: none; border: 0; cursor: pointer; padding: 4px;
}
.cd-toggle-all:hover { text-decoration: underline; }

/* what you will learn */
.cd-learn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 22px;
  margin: 0; padding: 0; list-style: none;
}
.cd-learn li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); line-height: 1.8; }
.cd-learn svg { width: 19px; height: 19px; color: var(--turq-fg); flex: none; margin-block-start: 4px; }

/* lessons inside a module */
.cd-lessons { list-style: none; margin: 0; padding: 0; }
.cd-lessons li {
  border-block-end: 1px solid var(--line);
}
.cd-lessons li:last-child { border-block-end: 0; }

/* The row itself. It is an <a> for an enrolled student and a <span> for anyone
   else, so both need the same box — only the link gets the hover and the
   pointer. */
.cd-lesson {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 8px;
  border-radius: var(--r-sm, 10px);
  color: var(--text-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
a.cd-lesson { cursor: pointer; }
a.cd-lesson:hover { background: var(--surf-a); color: var(--text); }
a.cd-lesson:hover .cd-lesson__icon { background: var(--cyan); }
a.cd-lesson:hover .cd-lesson__icon svg { color: var(--on-accent); }
a.cd-lesson:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* how long the video runs, beside its name */
.cd-lesson__dur {
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  flex: none;
}
.cd-lesson__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surf-a); flex: none; }
.cd-lesson__icon svg { width: 13px; height: 13px; color: var(--cyan-fg); }
.cd-lesson__t { flex: 1; min-width: 0; }
.cd-lesson__tag {
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--turq) 18%, transparent); color: var(--turq-fg);
}
.module__meta {
  font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--surf-a); padding: 2px 9px; border-radius: 999px; flex: none;
}
.cd-empty { color: var(--muted); padding: 10px 4px; }

.cd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.cd-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* the enrolment card follows you down */
.cd-side { position: sticky; inset-block-start: 92px; }
.cd-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-includes li { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: .93rem; }
.cd-includes svg { width: 17px; height: 17px; color: var(--cyan-fg); flex: none; }

@media (max-width: 980px) {
  .cd-hero__grid { grid-template-columns: 1fr; }
  .cd-hero__media { order: -1; }
  .cd-layout { grid-template-columns: 1fr; }
  .cd-side { position: static; }
}

/* =============================================================================
   Sign in / create account
   ========================================================================== */

.auth {
  padding-block: clamp(30px, 6vw, 72px);
  background:
    radial-gradient(90% 70% at 0 0, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 60%),
    var(--bg);
}
.auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.auth__title { font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.25; margin-block: 10px 14px; }
.auth__lead { color: var(--text-soft); font-size: 1.04rem; line-height: 1.9; max-width: 46ch; }

.auth__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); line-height: 1.75; }
.auth__points svg { width: 21px; height: 21px; color: var(--cyan-fg); flex: none; margin-block-start: 2px; }

.auth__proof {
  display: flex; align-items: center; gap: 11px;
  margin-block-start: 28px; padding: 14px 18px;
  background: var(--surf-a); border: 1px solid var(--line);
  border-radius: 999px; color: var(--text-soft); font-size: .93rem;
}
.auth__proof svg { width: 19px; height: 19px; color: var(--turq-fg); flex: none; }

.auth__panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 20px);
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: 0 30px 70px -46px rgba(0, 35, 85, .5);
}

.auth__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surf-a); padding: 4px; border-radius: 999px; margin-block-end: 24px;
}
.auth__tab {
  font: inherit; font-weight: 700; font-size: .95rem;
  padding: 11px 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.auth__tab:hover { color: var(--text); }
.auth__tab.is-active { background: var(--bg-elev); color: var(--text); box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }
.auth__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.auth__pane { display: none; }
.auth__pane.is-active { display: block; }

.auth__error {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 16px; margin-block-end: 18px;
  background: color-mix(in srgb, #c0392b 12%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 40%, transparent);
  border-radius: var(--r-sm, 10px);
  color: #a5281b; font-size: .93rem; line-height: 1.7;
}
.auth__error svg { width: 19px; height: 19px; flex: none; margin-block-start: 2px; }

.auth__alt { margin-block-start: 16px; text-align: center; font-size: .92rem; }
.auth__alt a { color: var(--cyan-fg); }

.auth__terms {
  margin-block-start: 22px; padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  color: var(--muted); font-size: .84rem; line-height: 1.8; text-align: center;
}
.auth__terms a { color: var(--cyan-fg); }

.auth__admin-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-block-start: 20px; padding: 13px 16px;
  background: color-mix(in srgb, var(--turq) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--turq) 45%, transparent);
  border-radius: var(--r-sm, 10px);
  font-size: .86rem; line-height: 1.8; color: var(--text-soft);
}
.auth__admin-note svg { width: 18px; height: 18px; color: var(--turq-fg); flex: none; margin-block-start: 2px; }

/* Tutor renders the forms; give its markup the same shape as the rest of the
   site so the panel does not read as two designs stitched together. */
.auth__panel input[type="text"],
.auth__panel input[type="email"],
.auth__panel input[type="password"] {
  width: 100%; padding: 13px 16px; font: inherit;
  color: var(--text); background: var(--bg);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm, 10px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.auth__panel input[type="text"]:focus,
.auth__panel input[type="email"]:focus,
.auth__panel input[type="password"]:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent);
}
.auth__panel label { display: block; margin-block-end: 7px; font-weight: 600; font-size: .92rem; }
.auth__panel p { margin-block-end: 16px; }
.auth__panel button[type="submit"],
.auth__panel input[type="submit"] {
  width: 100%; padding: 14px 20px; font: inherit; font-weight: 700; font-size: 1rem;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 0; border-radius: var(--r-sm, 10px); cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.auth__panel button[type="submit"]:hover,
.auth__panel input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* the social buttons the Tutor Pro addon injects */
.auth__panel .tutor-social-login-wrapper,
.auth__panel .tutor-social-btn-wrapper { margin-block: 4px 20px; }
.auth__panel .tutor-social-login-wrapper > div { width: 100% !important; }

@media (max-width: 900px) {
  .auth__grid { grid-template-columns: 1fr; }
  .auth__aside { text-align: center; }
  .auth__lead { margin-inline: auto; }
  .auth__points { text-align: start; max-width: 380px; margin-inline: auto; }
  .auth__proof { justify-content: center; }
}


/* ==========================================================================
   Enrolling in a course
   ========================================================================== */

/* a short explanation placed inside a WooCommerce page */
.wc-note {
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  padding: 14px 18px;
  margin-block-end: 24px;
  color: var(--text-soft);
  line-height: 1.7;
}
.wc-note a { color: var(--cyan-fg); font-weight: 600; }

/* why an account is required, above the checkout form */
.wc-note--account { border-inline-start: 3px solid var(--cyan); }

/* a course is one seat: the quantity box is replaced by the number */
.cart-qty-fixed {
  display: inline-grid; place-items: center;
  min-width: 38px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 10px);
  background: var(--surf-a); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* the thank-you page, pointed at the course rather than at a receipt */
.enrol-done {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  padding: clamp(20px, 3vw, 32px);
  margin-block-end: 32px;
}
.enrol-done h2 { margin-block: 0 8px; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.enrol-done p { color: var(--muted); margin-block: 0 18px; }
.enrol-done__list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.enrol-done__list li { margin: 0; }

/* ==========================================================================
   The articles page — home.php
   The newest piece leads wide; the rest follow three-up. These are long
   institute articles, not a stream of notes, so the lead earns its width.
   ========================================================================== */
.blog { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }

.blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.post-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -18px rgba(0, 35, 85, .45);
}

.post-card__media { display: block; overflow: hidden; background: var(--surf-a); }
.post-card__media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--t-slow, .5s);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 2vw, 22px);
  flex: 1;
}

.post-card__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .84rem; color: var(--muted-dim);
}
.post-card__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .6;
}

.post-card__title { margin: 0; font-size: 1.12rem; line-height: 1.5; text-wrap: balance; }
.post-card__title a { color: var(--text); transition: color var(--t-fast); }
.post-card__title a:hover { color: var(--cyan-fg); }

.post-card__excerpt { margin: 0; color: var(--muted); line-height: 1.75; flex: 1; }
.post-card .link-arrow { margin-block-start: 4px; }

/* the lead article: image beside the text on a wide screen */
.post-card--lead { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.post-card--lead .post-card__media img { aspect-ratio: 4 / 3; height: 100%; }
.post-card--lead .post-card__body { justify-content: center; padding: clamp(20px, 3vw, 38px); gap: 13px; }
.post-card--lead .post-card__title { font-size: clamp(1.35rem, 2.6vw, 1.95rem); }
.post-card--lead .post-card__excerpt { font-size: 1.02rem; }

@media (max-width: 780px) {
  .post-card--lead { grid-template-columns: 1fr; }
  .post-card--lead .post-card__media img { aspect-ratio: 16 / 9; }
}

/* the line shown to a visitor while social sign-in is still unconfigured */
.auth__alt--soft { color: var(--muted-dim); font-size: .9rem; text-align: center; }

/* progress on the enrolment card, for a student already inside the course */
.buy-card__progress { display: flex; flex-direction: column; gap: 7px; margin-block-start: 12px; }
.buy-card__bar {
  block-size: 6px; border-radius: 99px;
  background: var(--surf-a); border: 1px solid var(--border);
  overflow: hidden;
}
.buy-card__bar span {
  display: block; block-size: 100%;
  background: var(--grad-navy);
  transition: inline-size var(--t-slow, .5s);
}
.buy-card__pct { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* =============================================================================
   Header at small widths — repairs the breakpoint in design.css
   -----------------------------------------------------------------------------
   At <=980px design.css hid only .nav__links and the "انضم كمحاضر" button. The
   row still carried the brand at full size plus five controls: cart, "سجّل
   الآن", the market switcher, the theme toggle and the burger. Measured on a
   375px screen that needed 581px, so the browser shrank the whole page to 0.67
   to fit — every page of the site, not just one. Text came out small and the
   page scrolled sideways.

   What stays in the bar is what has nowhere else to be: the brand, the cart
   count, the theme toggle and the burger. Everything else already lives in the
   drawer, and the market switcher was moved there in header.php.
   ========================================================================== */
   The same row also overflowed on a desktop screen, for the opposite reason:
   the design budgeted six menu items and the institute's menu carries nine.
   At 1440px the row needed 1448px inside a 1240px container — the brand and
   the actions are both flex:none, so the links were the only thing that could
   give, and they had nothing left to give. So the ladder below tightens first,
   then collapses to the drawer, rather than breaking at one width.
   ========================================================================== */

/* No breakpoint on this one. The nav container is capped at 1240px whatever
   the screen is, so the row overflowed at 1440 exactly as it did at 1280 —
   a max-width media query would have missed every wide screen. */
.nav { gap: 14px; }
.nav__links { gap: 2px; min-width: 0; flex-wrap: nowrap; }
.nav__actions { gap: 8px; }

/* Every link on one line, at one size.
   Without nowrap the four longest items — آراء دارسينا, من نحن, مجلس الادارة,
   اتصل بنا — broke across two lines at 1366px. That made those four 70px tall
   against 44px for the rest, so the row read as two different type sizes, and
   the last of them pushed into the cart icon beside it. */
.nav__link {
  padding: 9px 9px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: nowrap;
  flex: none;
}

/* "انضم كمحاضر" is the secondary of two calls to action and the first thing
   that can go when the row is tight. It stays in the drawer either way. */
@media (max-width: 1440px) {
  .nav__actions > .btn--nav-login { display: none; }
}

/* The brand may give up its tagline before the menu gives up a link. */
@media (max-width: 1340px) {
  .brand__tag { display: none; }
}

/* Below this the nine links cannot be tightened further without becoming
   unreadable, so the menu goes to the drawer instead. */
@media (max-width: 1280px) {
  .nav__links { display: none; }
  .burger { display: flex; }
}

@media (max-width: 980px) {
  .nav__actions > .btn--primary { display: none; }
  .nav .nav__actions > .cur-switch { display: none; }
  .nav { gap: 12px; }
  .nav__actions { gap: 6px; }
}

/* The brand is the widest single item left. It carries a logo, the institute's
   full name and a tagline; below 560px the tagline is the first thing that can
   go without losing what the header is for. */
@media (max-width: 560px) {
  .brand__tag { display: none; }
  .brand__name { font-size: 0.92rem; line-height: 1.25; }
  .brand { gap: 9px; }
}

@media (max-width: 380px) {
  .nav__cart { display: none; }   /* the cart is in the drawer's account link */
  .brand__name { font-size: 0.85rem; }
}

/* the market switcher, once it sits inside the drawer */
.drawer__market {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-block: 14px;
  border-block: 1px solid var(--border);
}
.drawer__market-label { color: var(--muted); font-size: .88rem; }

/* =============================================================================
   Study screen — the heading Tutor's lesson template does not print
   ========================================================================== */
.study-head {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(16px, 2.4vw, 24px) clamp(16px, 3vw, 28px);
  border-block-end: 1px solid var(--border);
  background: var(--bg-elev);
}
.study-head__course {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  color: var(--muted); font-size: .9rem;
  transition: color var(--t-fast);
}
.study-head__course:hover { color: var(--cyan-fg); }
.study-head__course svg { width: 15px; height: 15px; flex: none; }
.study-head__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  line-height: 1.45;
  text-wrap: balance;
  color: var(--text);
}
.study-head__meta {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  color: var(--muted); font-size: .88rem;
}
.study-head__topic { display: inline-flex; align-items: center; gap: 7px; }
.study-head__topic svg { width: 15px; height: 15px; color: var(--cyan-fg); flex: none; }
.study-head__progress { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.study-head__bar {
  flex: 1 1 90px; min-width: 60px; max-width: 220px;
  block-size: 6px; border-radius: 99px;
  background: var(--surf-a); border: 1px solid var(--border);
  overflow: hidden;
}
.study-head__bar span { display: block; block-size: 100%; background: var(--grad-navy); }
.study-head__pct { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =============================================================================
   WOOCOMMERCE — cart, checkout, order received
   -----------------------------------------------------------------------------
   WooCommerce ships a stylesheet built for a generic shop: bare tables, grey
   buttons, a checkout that looks nothing like the rest of the site. These are
   the three screens a student passes through between deciding to enrol and
   getting in, so they carry the same surfaces, radii and type as everything
   else. Nothing here changes WooCommerce markup or behaviour — it re-dresses
   the classes its own templates already emit.
   ========================================================================== */

.woocommerce-frame { max-width: 100%; }

/* ---- notices ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--cyan);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  color: var(--text-soft);
  list-style: none;
  line-height: 1.7;
}
.woocommerce-error { border-inline-start-color: var(--danger-fg); }
.woocommerce-error li { list-style: none; }
.woocommerce-message a,
.woocommerce-info a { color: var(--cyan-fg); font-weight: 600; }
.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/* ---- shared table shell -------------------------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bg-elev);
  margin: 0 0 26px;
}
.woocommerce table.shop_table th {
  padding: 14px 16px;
  background: var(--surf-a);
  border-block-end: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: start;
}
.woocommerce table.shop_table td {
  padding: 16px;
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-soft);
}
.woocommerce table.shop_table tbody tr:last-child td { border-block-end: 0; }
.woocommerce table.shop_table .amount,
.woocommerce table.shop_table bdi {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 700;
}

/* ---- the cart ------------------------------------------------------------ */
.woocommerce table.cart .product-thumbnail img {
  width: 76px; height: 56px; object-fit: cover;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--border);
  display: block;
}
.woocommerce table.cart .product-name a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.5;
}
.woocommerce table.cart .product-name a:hover { color: var(--cyan-fg); }

.woocommerce table.cart .product-remove a.remove {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 1.1rem; line-height: 1;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.woocommerce table.cart .product-remove a.remove:hover {
  color: var(--danger-fg);
  border-color: var(--danger-fg);
  background: var(--surf-a);
}

.woocommerce table.cart td.actions { padding: 16px; background: var(--surf-lo); }
.woocommerce table.cart td.actions .coupon {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 190px; min-width: 0; }

/* ---- totals panel -------------------------------------------------------- */
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart-collaterals .cart_totals {
  width: min(430px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  padding: clamp(18px, 2.4vw, 26px);
}
.cart-collaterals .cart_totals h2 { margin: 0 0 14px; font-size: 1.15rem; }
.cart-collaterals .cart_totals table.shop_table {
  border: 0; margin: 0; background: none; border-radius: 0;
}
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
  padding: 11px 0;
  background: none;
  border-block-end: 1px dashed var(--border);
}
.cart-collaterals .cart_totals .order-total th,
.cart-collaterals .cart_totals .order-total td {
  border-block-end: 0;
  padding-block-start: 15px;
  font-size: 1.12rem;
}
.cart-collaterals .cart_totals .order-total .amount {
  color: var(--cyan-fg);
  font-size: 1.25rem;
}
.wc-proceed-to-checkout { margin-block-start: 18px; }

/* ---- WooCommerce buttons wear the theme button --------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  font: inherit;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  background: var(--surf-a);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), filter var(--t-fast), border-color var(--t-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { border-color: var(--cyan); color: var(--cyan-fg); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  width: 100%;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: transparent;
  font-size: 1.03rem;
  padding-block: 15px;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: var(--on-accent);
}
.woocommerce .button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---- form fields --------------------------------------------------------- */
.woocommerce form .form-row {
  display: flex; flex-direction: column; gap: 7px;
  margin: 0 0 16px; padding: 0;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 0.92rem; color: var(--text-soft); }
.woocommerce form .form-row .required { color: var(--danger-fg); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 12px 15px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent);
}
.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: 100%; float: none; }

/* ---- checkout ------------------------------------------------------------ */
.woocommerce-checkout h3 {
  margin: 0 0 16px;
  font-size: 1.2rem;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--border);
}
#customer_details { margin-block-end: 30px; }
#order_review_heading { margin-block: 6px 14px; font-size: 1.2rem; }

.woocommerce-checkout #order_review {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  padding: clamp(16px, 2.2vw, 24px);
}
.woocommerce-checkout-review-order-table {
  border: 0;
  background: none;
  margin-block-end: 18px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { background: none; }

.woocommerce-checkout #payment { background: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; margin: 0 0 18px; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box {
  background: none; padding: 10px 0 0; margin: 0;
  color: var(--muted); font-size: 0.92rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; }
.woocommerce-form__input-checkbox { margin-block-start: 0.35em; flex: none; }

/* ---- order received ------------------------------------------------------ */
.woocommerce-order .woocommerce-notice--success {
  display: block;
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--turq);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text);
}

ul.woocommerce-order-overview {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  overflow: hidden;
}
ul.woocommerce-order-overview li {
  margin: 0; padding: 16px 18px;
  background: var(--bg-elev);
  border: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.84rem; color: var(--muted);
  text-transform: none;
}
ul.woocommerce-order-overview li strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: 1.15rem;
  margin: 0 0 14px;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--border);
}
.woocommerce-customer-details { margin-block-start: 30px; }
.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.woocommerce-columns--addresses .woocommerce-column { width: auto; float: none; }
.woocommerce-columns--addresses address {
  font-style: normal;
  line-height: 1.9;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  padding: 14px 16px;
}

/* ---- tables become cards on a phone -------------------------------------- */
@media (max-width: 720px) {
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tbody tr {
    display: block;
    padding: 14px;
    border-block-end: 1px solid var(--border);
    position: relative;
  }
  .woocommerce table.shop_table_responsive tbody tr:last-child { border-block-end: 0; }
  .woocommerce table.shop_table_responsive tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 7px 0;
    border: 0;
    text-align: end;
  }
  .woocommerce table.shop_table_responsive tbody td::before {
    content: attr(data-title);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.86rem;
    text-align: start;
  }
  .woocommerce table.shop_table_responsive tbody td.product-remove {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    padding: 0;
  }
  .woocommerce table.shop_table_responsive tbody td.product-remove::before,
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail::before { display: none; }
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail { justify-content: flex-start; }
  .woocommerce table.cart td.actions { display: block; }
  .cart-collaterals .cart_totals { width: 100%; }
}

/* -----------------------------------------------------------------------------
   Buttons, at a specificity that actually wins.
   WooCommerce styles its primary button as
   `.woocommerce .wc-proceed-to-checkout a.checkout-button` (0,3,1), which beats
   a plain `.woocommerce a.checkout-button` (0,2,1). The result was WooCommerce
   keeping its own font-size, padding and — the part that mattered — its dark
   text colour sitting on this theme's dark navy gradient. The button was
   navy on navy and could not be read.

   `.woocommerce-page` is on <body> for every WooCommerce screen, so prefixing
   with it clears the bar without resorting to !important.
   -------------------------------------------------------------------------- */
.woocommerce-page .woocommerce a.button,
.woocommerce-page .woocommerce button.button,
.woocommerce-page .woocommerce input.button,
.woocommerce-page .woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .woocommerce #place_order,
.woocommerce-page .woocommerce input#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 13px 26px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  background: var(--surf-a);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), filter var(--t-fast), border-color var(--t-fast);
}

.woocommerce-page .woocommerce a.button:hover,
.woocommerce-page .woocommerce button.button:hover,
.woocommerce-page .woocommerce input.button:hover {
  border-color: var(--cyan);
  color: var(--cyan-fg);
  background: var(--surf-a);
}

/* the one primary action on each screen */
.woocommerce-page .woocommerce a.button.alt,
.woocommerce-page .woocommerce button.button.alt,
.woocommerce-page .woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .woocommerce #place_order,
.woocommerce-page .woocommerce input#place_order {
  width: 100%;
  padding-block: 15px;
  font-size: 1.03rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: transparent;
}

.woocommerce-page .woocommerce a.button.alt:hover,
.woocommerce-page .woocommerce button.button.alt:hover,
.woocommerce-page .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .woocommerce #place_order:hover,
.woocommerce-page .woocommerce input#place_order:hover {
  color: var(--btn-fg);
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
}

/* the coupon "apply" sits beside a field, so it should not stretch */
.woocommerce-page .woocommerce td.actions .coupon button.button,
.woocommerce-page .woocommerce td.actions button[name="update_cart"] {
  width: auto;
  flex: none;
}

/* =============================================================================
   THE STUDY SCREEN
   -----------------------------------------------------------------------------
   Tutor draws this page; the theme re-dresses it. The whole design rests on one
   decision: a lesson screen is a workspace, not a page that sells anything.

   So the marketing chrome steps back — no phone number, no cart, no market
   switcher above a video someone is trying to watch — and what is left is the
   brand, the way back to the course, and the theme toggle. The two header
   bands that used to stack (the theme heading and Tutor's own top bar) become
   one. The curriculum reads as a checklist with real state, marked by shape as
   well as colour so it survives a colour-blind reader and a printed page.
   ========================================================================== */

/* ---- chrome steps back --------------------------------------------------- */
.olympic-study .topbar { display: none; }
.olympic-study .nav__links,
.olympic-study .nav__cart,
.olympic-study .nav__actions > .btn,
.olympic-study .nav__actions > .cur-switch,
.olympic-study .burger { display: none; }
.olympic-study .site-footer,
.olympic-study footer.footer { display: none; }

.olympic-study .nav-wrap {
  border-block-end: 1px solid var(--border);
  background: var(--bg-elev);
}
.olympic-study .nav { min-height: 62px; }

/* one way out, always in the same place */
.study-exit {
  display: inline-flex; align-items: center; gap: 8px;
  margin-inline-start: auto;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
  color: var(--text-soft);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.study-exit:hover { border-color: var(--cyan); color: var(--cyan-fg); background: var(--surf-a); }
.study-exit svg { width: 15px; height: 15px; flex: none; }

/* ---- the two columns ----------------------------------------------------- */
.olympic-study #main { display: block; }

.olympic-study .tutor-course-single-content-wrapper {
  gap: 0;
  background: var(--bg);
  align-items: stretch;
}

/* ---- curriculum panel ---------------------------------------------------- */
.olympic-study .tutor-course-single-sidebar-wrapper {
  background: var(--bg-elev);
  border-inline-start: 1px solid var(--border);
  border-inline-end: 0;
}

.olympic-study .tutor-course-single-sidebar-title {
  padding: 18px 20px;
  border-block-end: 1px solid var(--border);
  background: var(--surf-a);
  font-family: var(--font-head);
}
.olympic-study .tutor-course-single-sidebar-title span { color: var(--text); font-weight: 700; }

/* a topic is a section header, not a card */
.olympic-study .tutor-course-topic { border: 0; border-block-end: 1px solid var(--border); }
.olympic-study .tutor-accordion-item-header {
  padding: 15px 20px;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text);
  transition: background var(--t-fast);
}
.olympic-study .tutor-accordion-item-header:hover { background: var(--surf-a); }
.olympic-study .tutor-accordion-item-header.is-active { background: var(--surf-a); color: var(--cyan-fg); }
.olympic-study .tutor-accordion-item-body { background: none; padding: 0 0 8px; }

/* every row says what state it is in, by shape first */
.olympic-study .tutor-course-topic-item {
  position: relative;
  padding: 10px 20px 10px 44px;
  padding-inline: 44px 20px;
  border: 0;
  border-inline-start: 3px solid transparent;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.olympic-study .tutor-course-topic-item:hover { background: var(--surf-a); color: var(--text); }

/* the lesson being read */
.olympic-study .tutor-course-topic-item.is-active {
  background: var(--surf-a);
  border-inline-start-color: var(--cyan);
  color: var(--text);
  font-weight: 700;
}
.olympic-study .tutor-course-topic-item a { color: inherit; }

/* ---- one header band ----------------------------------------------------- */
.olympic-study .study-head {
  border-block-end: 0;
  padding-block-end: 14px;
  background: var(--bg-elev);
}
.olympic-study .tutor-single-page-top-bar {
  border-block-start: 0;
  border-block-end: 1px solid var(--border);
  background: var(--bg-elev);
  padding-inline: clamp(16px, 3vw, 28px);
  min-height: 56px;
}
/* Tutor repeats the lesson name here; the heading above already carries it */
.olympic-study .tutor-course-topic-single-header-title { display: none; }

/* ---- the video sits on a stage ------------------------------------------- */
.olympic-study .tutor-course-topic-single-body { background: var(--bg); }
.olympic-study .tutor-video-player-wrapper {
  background: #05101d;
  padding: clamp(0px, 1.4vw, 18px);
}
.olympic-study .tutor-video-player {
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.75);
}

/* ---- the tabs Tutor collapsed to one pixel -------------------------------- */
/* .tutor-nav rendered 1029x1: the list had no height, so Overview, the lesson
   files and the discussion were all unreachable. */
.olympic-study .tutor-course-spotlight-wrapper { padding: clamp(16px, 3vw, 28px); }

/* Tutor renders no tabs when a lesson has only one section — the list element
   is still there, empty. Styling it unconditionally drew an empty pill bar
   above the content, which is worse than the 1px sliver it replaced. */
/* :empty alone misses it — the list holds whitespace text nodes, which is
   enough for :empty to fail. :has() asks the question that actually matters:
   are there any tabs in here? */
.olympic-study ul.tutor-nav.tutor-course-spotlight-nav:empty,
.olympic-study ul.tutor-nav.tutor-course-spotlight-nav:not(:has(.tutor-nav-item)) { display: none; }

.olympic-study ul.tutor-nav.tutor-course-spotlight-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  height: auto;
  margin: 0 0 20px;
  padding: 5px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
  background: var(--surf-a);
  justify-content: flex-start;
  overflow: visible;
}
.olympic-study .tutor-course-spotlight-nav .tutor-nav-item { margin: 0; border: 0; }
.olympic-study .tutor-course-spotlight-nav .tutor-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  background: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.olympic-study .tutor-course-spotlight-nav .tutor-nav-link:hover { color: var(--text); background: var(--bg-elev); }
.olympic-study .tutor-course-spotlight-nav .tutor-nav-link.is-active {
  color: var(--btn-fg);
  background: var(--btn-bg);
}

.olympic-study .tutor-course-spotlight-tab { line-height: 1.9; color: var(--text-soft); }
.olympic-study .tutor-course-spotlight-tab h1,
.olympic-study .tutor-course-spotlight-tab h2,
.olympic-study .tutor-course-spotlight-tab h3 { font-family: var(--font-head); color: var(--text); }

/* ---- Tutor buttons wear the theme button --------------------------------- */
.olympic-study .tutor-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-sm, 10px);
  font-family: var(--font-head);
  font-weight: 700;
  border: 1px solid var(--border-strong);
  background: var(--surf-a);
  color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast), filter var(--t-fast);
}
.olympic-study .tutor-btn:hover { border-color: var(--cyan); color: var(--cyan-fg); }
.olympic-study .tutor-btn-primary,
.olympic-study .tutor-topbar-complete-btn .tutor-btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: transparent;
}
.olympic-study .tutor-btn-primary:hover,
.olympic-study .tutor-topbar-complete-btn .tutor-btn:hover {
  color: var(--btn-fg);
  filter: brightness(1.08);
}

.olympic-study .tutor-iconic-btn {
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  color: var(--muted);
  background: var(--bg-elev);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.olympic-study .tutor-iconic-btn:hover { color: var(--cyan-fg); border-color: var(--cyan); }

/* ---- prev / next --------------------------------------------------------- */
.olympic-study .tutor-course-topic-single-footer {
  border-block-start: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 14px clamp(16px, 3vw, 28px);
}

/* ---- progress in Tutor's own bar ----------------------------------------- */
.olympic-study .tutor-progress-content,
.olympic-study .tutor-color-primary-60 { color: var(--muted); }

/* ---- phones and tablets --------------------------------------------------- */
@media (max-width: 1200px) {
  /* Tutor already turns the curriculum into a drawer below its xl breakpoint;
     this just makes the drawer look like the rest of the theme. */
  .olympic-study .tutor-course-single-sidebar-wrapper {
    box-shadow: var(--shadow-lg, 0 20px 50px -24px rgba(0, 0, 0, 0.5));
  }
}

@media (max-width: 780px) {
  .olympic-study .study-head { padding-inline: 16px; }
  .olympic-study .study-head__meta { gap: 8px 14px; }
  .olympic-study .study-head__bar { max-width: 140px; }
  .olympic-study .tutor-video-player-wrapper { padding: 0; }
  .olympic-study .tutor-video-player { border-radius: 0; }
  .olympic-study ul.tutor-nav.tutor-course-spotlight-nav {
    border-radius: var(--r-md, 14px);
    justify-content: stretch;
  }
  .olympic-study .tutor-course-spotlight-nav .tutor-nav-item { flex: 1 1 auto; }
  .olympic-study .tutor-course-spotlight-nav .tutor-nav-link {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.85rem;
  }
  .study-exit { padding: 8px 12px; font-size: 0.84rem; }
  .study-exit span { display: none; }
}

/* =============================================================================
   THE STUDENT DASHBOARD
   -----------------------------------------------------------------------------
   Tutor paints this screen with fixed colours: .tutor-color-black is
   rgb(33,35,39) and appears 25 times on the page. On the light paper that
   reads at 14.6:1 and is fine. On this theme's dark ground — rgb(4,24,47) —
   the same ink measures **1.13:1**, which is not low contrast so much as
   invisible ink. The greeting, the menu, the course names and every figure on
   the page disappeared for anyone who had pressed the theme toggle.

   The fix is to stop Tutor's colour utilities being literal colours and make
   them read from the theme's tokens, so they follow the light and dark
   palettes the rest of the site already switches between. Everything else here
   is the same panel-and-card language used across the theme.
   ========================================================================== */

/* ---- Tutor's colour utilities become theme tokens ------------------------ */
.tutor-dashboard .tutor-color-black,
.tutor-dashboard .tutor-color-black a,
.tutor-dashboard a.tutor-color-black { color: var(--text); }
.tutor-dashboard .tutor-color-secondary { color: var(--text-soft); }
.tutor-dashboard .tutor-color-muted,
.tutor-dashboard .tutor-color-hints { color: var(--muted); }
.tutor-dashboard .tutor-color-primary,
.tutor-dashboard .tutor-color-primary-60 { color: var(--cyan-fg); }

.tutor-dashboard,
.tutor-dashboard .tutor-dashboard-content { color: var(--text-soft); }

/* ---- greeting ------------------------------------------------------------ */
.tutor-dashboard .tutor-dashboard-header-avatar img,
.tutor-dashboard .tutor-dashboard-header-avatar .tutor-avatar {
  border: 2px solid var(--border);
  border-radius: 50%;
}
.tutor-dashboard .tutor-user-info { color: var(--text); }

/* ---- the menu ------------------------------------------------------------ */
.tutor-dashboard ul.tutor-dashboard-permalinks {
  list-style: none;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  overflow: hidden;
}

.tutor-dashboard .tutor-dashboard-menu-item { border: 0; margin: 0; }

.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item-text { color: inherit; }

.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-sm, 10px);
  color: var(--text-soft);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.5;
  transition: background var(--t-fast), color var(--t-fast);
}
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover {
  background: var(--surf-a);
  color: var(--cyan-fg);
}
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item-icon {
  color: var(--muted);
  flex: none;
  transition: color var(--t-fast);
}
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon { color: var(--cyan-fg); }

/* the page you are on — the institute's own navy, not Tutor's generic blue */
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active > .tutor-dashboard-menu-item-link,
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active > a {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
.tutor-dashboard ul.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-text { color: var(--btn-fg); }

/* ---- content panel ------------------------------------------------------- */
.tutor-dashboard .tutor-dashboard-content { min-width: 0; }
.tutor-dashboard .tutor-dashboard-content-inner > h3,
.tutor-dashboard .tutor-dashboard-content > h3 {
  font-family: var(--font-head);
  color: var(--text);
  font-size: 1.25rem;
  margin: 0 0 18px;
  padding-block-end: 12px;
  border-block-end: 2px solid var(--border);
}

/* ---- cards --------------------------------------------------------------- */
.tutor-dashboard .tutor-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.tutor-dashboard .tutor-card:hover { border-color: var(--border-strong); }
.tutor-dashboard .tutor-card-body { padding: 16px 18px; color: var(--text-soft); }

/* the three figures at the top of the dashboard */
.tutor-dashboard .tutor-round-box {
  background: var(--surf-a);
  border: 1px solid var(--border);
  color: var(--cyan-fg);
}

/* ---- progress ------------------------------------------------------------ */
.tutor-dashboard .tutor-progress-bar {
  background: var(--surf-a);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.tutor-dashboard .tutor-progress-value { background: var(--btn-bg); }
.tutor-dashboard .tutor-course-progress-item-title,
.tutor-dashboard .tutor-course-progress-item-title a { color: var(--text); font-family: var(--font-head); }

/* ---- ratings ------------------------------------------------------------- */
.tutor-dashboard .tutor-ratings-stars { color: #f0a500; }
.tutor-dashboard .tutor-ratings-count { color: var(--muted); }

/* ---- tables -------------------------------------------------------------- */
.tutor-dashboard table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bg-elev);
}
.tutor-dashboard table th {
  background: var(--surf-a);
  color: var(--muted);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 13px 15px;
  text-align: start;
  border-block-end: 1px solid var(--border);
}
.tutor-dashboard table td {
  padding: 14px 15px;
  border-block-end: 1px solid var(--border);
  color: var(--text-soft);
}
.tutor-dashboard table tr:last-child td { border-block-end: 0; }

/* ---- empty states and notices ------------------------------------------- */
.tutor-dashboard .tutor-empty-state,
.tutor-dashboard .tutor-alert {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--surf-a);
  color: var(--text-soft);
  padding: 20px;
}

/* ---- buttons ------------------------------------------------------------- */
.tutor-dashboard .tutor-btn {
  border-radius: var(--r-sm, 10px);
  font-family: var(--font-head);
  font-weight: 700;
}
.tutor-dashboard .tutor-btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: transparent;
}
.tutor-dashboard .tutor-btn-primary:hover { color: var(--btn-fg); filter: brightness(1.08); }
.tutor-dashboard .tutor-btn-secondary,
.tutor-dashboard .tutor-btn-outline-primary {
  background: var(--surf-a);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.tutor-dashboard .tutor-btn-secondary:hover,
.tutor-dashboard .tutor-btn-outline-primary:hover { color: var(--cyan-fg); border-color: var(--cyan); }

/* ---- form fields inside the dashboard ------------------------------------ */
.tutor-dashboard input[type="text"],
.tutor-dashboard input[type="email"],
.tutor-dashboard input[type="password"],
.tutor-dashboard input[type="tel"],
.tutor-dashboard input[type="url"],
.tutor-dashboard select,
.tutor-dashboard textarea {
  width: 100%;
  padding: 11px 14px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
}
.tutor-dashboard input:focus,
.tutor-dashboard select:focus,
.tutor-dashboard textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent);
}

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 860px) {
  .tutor-dashboard ul.tutor-dashboard-permalinks { margin-block-end: 22px; }
}

/* =============================================================================
   CHECKOUT — the form the money goes through
   -----------------------------------------------------------------------------
   Measured before this block: every field 1,192px wide on a 1440px screen, each
   input 57px tall, each row 107px, twelve of them in a single column. A phone
   number box a metre across, and a form the buyer scrolled rather than read.

   Three changes: the page splits into details and summary side by side, the
   fields sit on a two-column grid (WooCommerce's own form-row-first / -last
   classes carry the spans), and the inputs come back to a normal size.
   ========================================================================== */

/* the whole checkout gets a comfortable measure rather than the full screen */
.woocommerce-checkout .woocommerce { max-width: 1080px; margin-inline: auto; }

/* details on one side, order summary on the other */
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }
  /* customer_details must span both rows, or row 1 grows to its full height
     and pushes the order summary a thousand pixels down the page. */
  .woocommerce-checkout form.checkout { grid-template-rows: auto 1fr; }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; margin-block-end: 0; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-block-start: 0; }
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: 90px; }
  /* anything else the plugins inject spans the full width underneath */
  .woocommerce-checkout form.checkout > .wc-note,
  .woocommerce-checkout form.checkout > .woocommerce-form-login,
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
}

/* ---- the field grid ------------------------------------------------------ */
.woocommerce-page .woocommerce-billing-fields__field-wrapper,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper,
.woocommerce-page .woocommerce-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.woocommerce-page .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: span 1;
  float: none;
  width: auto;
  margin: 0 0 15px;
}
.woocommerce-page .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-page .woocommerce-billing-fields__field-wrapper > .notes,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper > .form-row-wide {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .woocommerce-page .woocommerce-billing-fields__field-wrapper,
  .woocommerce-page .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-page .woocommerce-account-fields { grid-template-columns: 1fr; }
  .woocommerce-page .woocommerce-billing-fields__field-wrapper > .form-row { grid-column: 1 / -1; }
}

/* ---- inputs back to a normal size ---------------------------------------- */
/* WooCommerce's own rules reach .woocommerce form .form-row input.input-text,
   so these need the body class to land. */
.woocommerce-page .woocommerce form .form-row input.input-text,
.woocommerce-page .woocommerce form .form-row textarea,
.woocommerce-page .woocommerce form .form-row select,
.woocommerce-page .woocommerce form .form-row .select2-selection--single {
  height: auto;
  min-height: 0;
  padding: 11px 14px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.woocommerce-page .woocommerce form .form-row textarea { min-height: 84px; }

.woocommerce-page .woocommerce form .form-row label {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---- the country and state dropdowns, which rendered 1px tall ------------- */
/* select2 replaces the <select> with its own markup and inherits none of the
   sizing above; without this the two most important address fields collapsed
   to a hairline. */
.woocommerce-page .select2-container { width: 100% !important; }
.woocommerce-page .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 45px;
  padding: 0 14px;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
}
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: var(--text);
}
.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  inset-inline-end: 10px;
  inset-inline-start: auto;
}
.woocommerce-page .select2-container--open .select2-dropdown {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  color: var(--text);
  overflow: hidden;
}
.woocommerce-page .select2-container .select2-results__option {
  padding: 9px 14px;
  color: var(--text-soft);
  background: var(--bg-elev);
}
.woocommerce-page .select2-container .select2-results__option--highlighted {
  background: var(--surf-a);
  color: var(--cyan-fg);
}
.woocommerce-page .select2-container .select2-search--dropdown .select2-search__field {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  background: var(--bg);
  color: var(--text);
}

/* ---- optional fields read as optional ------------------------------------ */
.woocommerce-page .woocommerce form .form-row label .optional { color: var(--muted-dim); font-weight: 400; }

/* ---- order summary panel ------------------------------------------------- */
.woocommerce-checkout #order_review { min-width: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 11px 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
  font-size: 1.1rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total .amount { color: var(--cyan-fg); }

/* =============================================================================
   Tutor's own sign-in form
   -----------------------------------------------------------------------------
   Shown on the student dashboard to anyone not signed in. Measured in the dark
   theme before this block:

     "Hi, Welcome back!"   1.13
     "Keep me signed in"   1.13
     the email field       1.13   ← you could not read what you typed
     "Register Now"        3.47

   Same cause as the dashboard itself: Tutor writes rgb(33,35,39) and knows
   nothing about the theme's dark ground. The input one is the worst of them —
   a sign-in form where the text you enter is invisible.
   ========================================================================== */

.tutor-login-wrap,
.tutor-login-form-wrapper {
  max-width: 460px;
  margin-inline: auto;
}

.tutor-login-form-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
  padding: clamp(22px, 3vw, 34px);
  color: var(--text-soft);
}

.tutor-login-form-wrapper .tutor-color-black,
.tutor-login-form-wrapper .tutor-fs-5 {
  color: var(--text);
  font-family: var(--font-head);
}
.tutor-login-form-wrapper .tutor-color-secondary,
.tutor-login-form-wrapper .tutor-color-muted { color: var(--muted); }

.tutor-login-form-wrapper label { color: var(--text-soft); font-weight: 600; }

.tutor-login-form-wrapper input[type="text"],
.tutor-login-form-wrapper input[type="email"],
.tutor-login-form-wrapper input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm, 10px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tutor-login-form-wrapper input::placeholder { color: var(--muted-dim); }
.tutor-login-form-wrapper input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent);
}

.tutor-login-form-wrapper a { color: var(--cyan-fg); font-weight: 600; }
.tutor-login-form-wrapper a:hover { text-decoration: underline; }

/* The one button that is a button.
   This used to match `.tutor-btn` outright, which is the class every button in
   Tutor's form shares — including the two that are links. */
.tutor-login-form-wrapper button[type="submit"],
.tutor-login-form-wrapper .tutor-btn-primary {
  width: 100%;
  padding: 13px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.tutor-login-form-wrapper button[type="submit"]:hover,
.tutor-login-form-wrapper .tutor-btn-primary:hover {
  color: var(--btn-fg);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* «نسيت؟» and «سجّل الآن». Tutor already marks them ghost and link; the theme
   only has to stop overruling that. Width auto matters as much as the missing
   fill: at 100% the first of them pushed the "keep me signed in" checkbox out
   of the row they share. */
.tutor-login-form-wrapper .tutor-btn-ghost,
.tutor-login-form-wrapper .tutor-btn-link {
  width: auto;
  padding: 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cyan-fg);
  transition: color var(--t-fast);
}

.tutor-login-form-wrapper .tutor-btn-ghost:hover,
.tutor-login-form-wrapper .tutor-btn-link:hover {
  color: var(--cyan-fg);
  filter: none;
  transform: none;
  text-decoration: underline;
}

.tutor-login-form-wrapper .tutor-login-error:not(:empty) {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--danger-fg);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-a);
  padding: 12px 15px;
  margin-block-end: 14px;
  color: var(--text-soft);
}

/* =============================================================================
   FRONT PAGE — headline, emblem, tracks, archive
   ========================================================================== */

/* ---- the headline was being cut off ------------------------------------- */
/* Measured at 1366px: font 60.1px on a 69.7px line — a ratio of 1.16. Arabic
   needs more than Latin does at the best of times, and this headline ends on
   "فعلاً", whose tanween sits below the baseline. scrollHeight came out 229px
   against a clientHeight of 209, so the last line lost 20px from underneath.
   1.34 clears the descenders and the tashkeel with room to spare. */
.hero__title,
.hero h1 {
  line-height: 1.34;
  padding-block-end: 0.12em;
  text-wrap: balance;
}

/* ---- the emblem is the institute's own logo ------------------------------ */
/* One blue, so it sits with the ring turning around it rather than against it.
   A duotone built from luminance, not a mask: the badge is a set of flat
   colours over a transparent ground, so a mask would collapse the eagle, the
   shield and the rings into one silhouette and lose every internal line.

   The numbers were measured, not guessed. The first attempt brightened before
   tinting, which pushed the eagle's body, its wing lines and the shield all to
   rgb(221,255,255) — three different parts of the mark arriving at the same
   near-white. This logo is light to begin with, so it has to be taken DOWN to
   reach a blue. At brightness .55 the mark spans rgb(0,16,35) in its outlines
   to rgb(0,202,255) in its highlights, against a hero ground of rgb(4,24,47),
   and rgb(0,202,255) sits beside the --cyan the ring is drawn in.

   One filter, not two: the hero band is this same dark navy in both themes. */
.hero__emblem--logo {
  filter: grayscale(1) brightness(.55) sepia(1) hue-rotate(170deg) saturate(8);
}

/* ---- the emblem was being stretched, and the ring was an ellipse --------- */
/* Measured: the image rendered 380x600. It carries width="600" height="600"
   as attributes and max-width:380px in CSS, with nothing holding the height —
   so the browser took the width from CSS and the height from the attribute and
   drew the badge 58% taller than it is. That is the whole of "طويل": a stretched
   eagle, not a large one.

   The dashed ring had the same fault from the other direction. It is positioned
   inset:7% inside .hero__visual, and that box is 456x600 rather than square, so
   a border-radius:50% produced a 392x516 ellipse turning inside another ellipse. */
.hero__visual {
  aspect-ratio: auto;
  position: relative;
  display: grid;
  place-items: center;
}

.hero__emblem {
  inline-size: min(300px, 68%);
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: none;
}

.hero__ring {
  inset: auto;
  inline-size: min(370px, 84%);
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .hero__emblem { inline-size: min(240px, 60%); }
  .hero__ring   { inline-size: min(300px, 74%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__emblem, .hero__ring { animation: none; }
}

/* ---- the two prices ------------------------------------------------------ */
.price-intl {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-inline-start: 10px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
  background: var(--surf-a);
  line-height: 1.5;
}
.price-intl__amt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--turq-fg);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.price-intl__note {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* on the course page the card has room to stack them */
.buy-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.buy-card__price .price-intl { margin-inline-start: 0; }

@media (max-width: 520px) {
  .price-intl { margin-inline-start: 0; margin-block-start: 8px; }
}

/* ---- track cards: the text was sitting on the picture -------------------- */
/* The blurb ran to 171px — six lines — so title, blurb and link together
   filled 313px of a 317px card. justify-content:flex-end had nothing left to
   push with, the text started at the top, and the veil is by design weakest
   there. Clamping the blurb returns the block to the bottom third, where the
   veil is nearly opaque. */
.cat-card { min-height: 340px; }

.cat-card__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* and a floor under the text, so the words never rely on the photograph
   underneath them being dark in that particular spot */
.cat-card__veil {
  background:
    linear-gradient(to top, var(--veil-1) 0%, var(--veil-1) 22%, var(--veil-2) 58%, var(--veil-3) 100%);
}

.cat-card__body { gap: 9px; padding: 22px; }
.cat-card__title { font-size: 1.3rem; line-height: 1.45; }

@media (max-width: 620px) {
  .cat-card { min-height: 290px; }
  .cat-card__blurb { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ---- the archive photographs --------------------------------------------- */
/* Smaller, and on one even rhythm. The mosaic spans made one picture four
   times the area of its neighbours, which read as an accident rather than as
   emphasis when the photographs are all of the same kind of thing. */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin-inline: auto;
}
.gallery .shot--feature,
.gallery .shot--wide {
  grid-column: auto;
  grid-row: auto;
}
.gallery .shot img,
.gallery .shot--feature img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gallery .shot--feature .shot__cap { font-size: 0.85rem; padding: 26px 14px 12px; }
.shot__cap { font-size: 0.85rem; }

@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shot__cap { font-size: 0.78rem; }
}

/* the dollar figure beside a struck-through old price: quieter, and without
   the "لغير المصريين" label, which the live price above it already carries */
.price-intl--old {
  padding: 2px 8px;
  background: none;
  border-color: transparent;
  opacity: 0.75;
}
.price-intl--old .price-intl__amt {
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: line-through;
}

/* the line explaining how a dollar price is settled */
.usd-note {
  margin-block: 10px 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

/* =============================================================================
   WHAT STUDENTS SAY — sized to the sentence, not to a panel
   -----------------------------------------------------------------------------
   Measured before: the block ran 1192x759 to show one opinion. The quote alone
   was 990x444 at 24px on a 1.85 line, inside a bordered, gradient-filled box
   with 56px of padding on every side. A carousel of single slides also takes
   the height of its tallest member, so one long review set the height for all
   of them.

   The box is gone. What is left is the sentence, the quotation mark, and who
   said it — at reading size, on the page's own ground.
   ========================================================================== */
.tst {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  max-width: 760px;
  margin-inline: auto;
}

.tst__slide { padding-inline: 0; }

.tst__quote {
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--text-soft);
  margin-block-end: 18px;
  padding-inline-start: 38px;

  /* Every review is held to the same few lines, so no single long one decides
     how tall the whole carousel has to be. The full text is on the reviews
     page; this is the excerpt. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tst__quote::before {
  font-size: 3rem;
  inset-block-start: -6px;
  opacity: 0.5;
}

.tst__who { gap: 11px; }
.tst__av { width: 38px; height: 38px; }
.tst__av svg { width: 17px; height: 17px; }
.tst__name { font-size: 0.96rem; }
.tst__role { font-size: 0.82rem; }

.tst__ctrls { margin-block-start: 22px; }

@media (max-width: 760px) {
  .tst__quote {
    font-size: 1rem;
    padding-inline-start: 30px;
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
  .tst__quote::before { font-size: 2.4rem; }
}

/* =============================================================================
   THE STUDY SCREEN — second pass
   -----------------------------------------------------------------------------
   The first pass did almost nothing, and the reason is worth writing down:
   Tutor styles this screen through `#tutor-single-entry-content`, an ID. Every
   rule I had written was classes only, so all of it lost the cascade and the
   page kept Tutor's own look — including a 61px slab of rgb(62,100,222) across
   the middle of it. Selectors below carry the same ID so they can win.

   THE DESIGN

   A lesson screen has one job: play the lesson. So the video is the only loud
   thing on it. Everything else — the title, the progress, the controls, the
   curriculum — is quiet furniture arranged around it, on the theme's own
   surfaces, at reading size.

   Three things are merged or removed rather than restyled:
     · Tutor's blue bar repeated the progress the heading already showed. Its
       text goes; its controls stay and join the heading row.
     · The heading and the control strip become one band.
     · The completion button was a large filled slab; it becomes a normal
       button, because it is pressed once per lesson.
   ========================================================================== */

/* ---- the two columns ----------------------------------------------------- */
body.olympic-study .tutor-course-single-content-wrapper {
  background: var(--bg);
  gap: 0;
}

body.olympic-study #tutor-single-entry-content {
  background: var(--bg);
}

/* ---- one band: heading + controls ---------------------------------------- */
body.olympic-study .study-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px clamp(16px, 2.4vw, 26px) 13px;
  background: var(--bg-elev);
  border-block-end: 0;
}
body.olympic-study .study-head__title { font-size: clamp(1.1rem, 2vw, 1.45rem); }

/* Tutor's own strip slides into the actions cell of that grid */
/* An action row under the heading, in the normal flow.
   It was pinned to the top corner of the heading band at first. That works
   until the heading's own text fills the width — which it does, because the
   course link and the title are block-level — and then the buttons sit on top
   of the words. Its own row cannot collide with anything. */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0 clamp(16px, 2.4vw, 26px) 14px;
  background: var(--bg-elev);
  border: 0;
  border-block-end: 1px solid var(--border);
  box-shadow: none;
}

/* Tutor repeats the lesson name and the progress the heading already carries */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header .tutor-course-topic-single-header-title,
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header .tutor-progress-content {
  display: none;
}
/* .tutor-progress-content is only the label; the count sits beside it in the
   same div, so hiding the label left "0 of 22 (0%)" under a heading that
   already says أنجزت 0% من الدورة. Tutor gives that div no class of its own.
   Where :has() is missing the label still hides and the count still reads —
   the counter is then redundant, not broken. */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header div:has(> .tutor-progress-content) {
  display: none;
}

/* ---- controls ------------------------------------------------------------ */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn,
body.olympic-study #tutor-single-entry-content .tutor-iconic-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--muted);
  box-shadow: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}
body.olympic-study #tutor-single-entry-content .tutor-iconic-btn:hover {
  color: var(--cyan-fg);
  border-color: var(--cyan);
  background: var(--surf-a);
}
body.olympic-study #tutor-single-entry-content .tutor-iconic-btn .tutor-icon-times::before,
body.olympic-study #tutor-single-entry-content .tutor-iconic-btn [class^="tutor-icon"] { color: inherit; }

/* the one button pressed once per lesson */
body.olympic-study #tutor-single-entry-content .tutor-topbar-complete-btn .tutor-btn,
body.olympic-study #tutor-single-entry-content .tutor-btn.tutor-btn-primary {
  min-height: 0;
  padding: 9px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--r-sm, 10px);
  border: 0;
  color: var(--btn-fg);
  background: var(--btn-bg);
  box-shadow: none;
}
body.olympic-study #tutor-single-entry-content .tutor-topbar-complete-btn .tutor-btn:hover {
  color: var(--btn-fg);
  filter: brightness(1.08);
}

/* ---- the video is the loud thing ----------------------------------------- */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-body {
  background: var(--bg);
  padding: 0;
}
body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper {
  background: #04101d;
  padding: clamp(0px, 1.2vw, 16px);
}
body.olympic-study #tutor-single-entry-content .tutor-video-player {
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, .8);
}

/* ---- tabs ---------------------------------------------------------------- */
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-wrapper {
  padding: clamp(16px, 2.4vw, 26px);
}
body.olympic-study #tutor-single-entry-content ul.tutor-nav.tutor-course-spotlight-nav:empty,
body.olympic-study #tutor-single-entry-content ul.tutor-nav.tutor-course-spotlight-nav:not(:has(.tutor-nav-item)) {
  display: none;
}
body.olympic-study #tutor-single-entry-content ul.tutor-nav.tutor-course-spotlight-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  height: auto;
  min-height: 0;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
  background: var(--surf-a);
  justify-content: flex-start;
  overflow: visible;
}
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-nav .tutor-nav-item {
  margin: 0;
  border: 0;
}
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-nav .tutor-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  background: none;
}
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-nav .tutor-nav-link:hover {
  color: var(--text);
  background: var(--bg-elev);
}
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-nav .tutor-nav-link.is-active {
  color: var(--btn-fg);
  background: var(--btn-bg);
}
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-tab {
  line-height: 1.9;
  color: var(--text-soft);
}

/* ---- prev / next --------------------------------------------------------- */
body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-footer {
  background: var(--bg-elev);
  border-block-start: 1px solid var(--border);
  padding: 12px clamp(16px, 2.4vw, 26px);
}
body.olympic-study #tutor-single-entry-content .tutor-btn.tutor-btn-secondary {
  padding: 8px 16px;
  font-size: 0.88rem;
  font-family: var(--font-head);
  font-weight: 700;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--border-strong);
  background: var(--surf-a);
  color: var(--text);
}
body.olympic-study #tutor-single-entry-content .tutor-btn.tutor-btn-secondary:hover {
  color: var(--cyan-fg);
  border-color: var(--cyan);
}

/* ---- the curriculum panel ------------------------------------------------ */
body.olympic-study .tutor-course-single-sidebar-wrapper {
  background: var(--bg-elev);
  border-inline-start: 1px solid var(--border);
  border-inline-end: 0;
}
body.olympic-study .tutor-course-single-sidebar-title {
  padding: 17px 20px;
  background: var(--surf-a);
  border-block-end: 1px solid var(--border);
  font-family: var(--font-head);
}
body.olympic-study .tutor-course-single-sidebar-title span { color: var(--text); font-weight: 700; }

body.olympic-study .tutor-course-topic {
  border: 0;
  border-block-end: 1px solid var(--border);
  background: none;
}
body.olympic-study .tutor-accordion-item-header {
  padding: 14px 20px;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
body.olympic-study .tutor-accordion-item-header:hover { background: var(--surf-a); }
body.olympic-study .tutor-accordion-item-header.is-active { background: var(--surf-a); color: var(--cyan-fg); }
body.olympic-study .tutor-accordion-item-body { background: none; padding-block-end: 6px; }

/* a row says its state by shape, so it survives a colour-blind reader */
body.olympic-study .tutor-course-topic-item {
  border: 0;
  border-inline-start: 3px solid transparent;
  padding-block: 9px;
  padding-inline: 20px 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  background: none;
}
body.olympic-study .tutor-course-topic-item:hover { background: var(--surf-a); color: var(--text); }
body.olympic-study .tutor-course-topic-item.is-active {
  background: var(--surf-a);
  border-inline-start-color: var(--cyan);
  color: var(--text);
  font-weight: 700;
}
body.olympic-study .tutor-course-topic-item a { color: inherit; }

/* Tutor's own completion tick, in the theme's green rather than its blue */
body.olympic-study .tutor-course-topic-item .tutor-icon-circle-mark,
body.olympic-study .tutor-course-topic-item .tutor-icon-circle-mark-line { color: var(--turq-fg); }

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 1200px) {
  body.olympic-study .tutor-course-single-sidebar-wrapper {
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .55);
  }
}

@media (max-width: 780px) {
  body.olympic-study .study-head { gap: 8px; padding-inline: 16px; }

  body.olympic-study #tutor-single-entry-content .tutor-course-topic-single-header {
    flex-wrap: wrap;
    padding-inline: 16px;
  }
  body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper { padding: 0; }
  body.olympic-study #tutor-single-entry-content .tutor-video-player { border-radius: 0; }
  body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-nav .tutor-nav-link {
    padding-inline: 12px;
    font-size: 0.84rem;
  }
}

/* =============================================================================
   The study screen, brought down in scale
   -----------------------------------------------------------------------------
   The video was filling the column edge to edge and the page had nothing else
   on screen with it. A lecture is watched, not projected: it gets a comfortable
   reading measure and the rest of the page comes back into view around it.
   ========================================================================== */

/* the player stops at a size a person watches, and centres in its stage */
body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper {
  display: flex;
  justify-content: center;
  padding: clamp(10px, 1.6vw, 22px);
}
body.olympic-study #tutor-single-entry-content .tutor-video-player {
  width: 100%;
  max-width: 780px;
}

/* the tabs and the text under it share that measure, so the column reads as
   one object rather than a wide video with narrow text beneath it */
body.olympic-study #tutor-single-entry-content .tutor-course-spotlight-wrapper > * {
  max-width: 780px;
  margin-inline: auto;
}

/* ---- the curriculum panel, tightened -------------------------------------- */
/* Rows were 51px tall with the topic counter in a pill of its own. At a dozen
   topics that is a column of pills; the count is secondary information and
   reads better as plain figures. */
/* The fixed column only exists where there are two columns to fix. Applying it
   at every width made the panel a 320px flex item on a 375px phone, which left
   the content column 55px wide and collapsed the video inside it to nothing.
   Below this, Tutor's own layout takes the screen back. */
@media (min-width: 1201px) {
  body.olympic-study .tutor-course-single-sidebar-wrapper { width: 340px; flex: 0 0 340px; }
}

body.olympic-study .tutor-accordion-item-header {
  padding: 11px 18px;
  font-size: 0.88rem;
  line-height: 1.5;
}
body.olympic-study .tutor-course-single-sidebar-title { padding: 14px 18px; font-size: 0.92rem; }

body.olympic-study .tutor-course-topic-item {
  padding-block: 8px;
  padding-inline: 18px 14px;
  font-size: 0.86rem;
}

/* Tutor prints the topic progress as "2/3" in a bubble. Keep the number, drop
   the bubble. */
body.olympic-study .tutor-accordion-item-header .tutor-round-box,
body.olympic-study .tutor-accordion-item-header [class*="tutor-badge"] {
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* the play icon and the runtime on a row in the panel */
body.olympic-study .tutor-course-topic-item [class^="tutor-icon"] { font-size: 14px; }
body.olympic-study .tutor-course-topic-item .tutor-fs-7,
body.olympic-study .tutor-course-topic-item .tutor-color-muted {
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}



@media (max-width: 780px) {
  body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper { padding: 0; }
  body.olympic-study #tutor-single-entry-content .tutor-video-player { max-width: none; }
  /* Tutor turns the curriculum into its own drawer below its xl breakpoint.
     Forcing width:100% on it here made it a full-width flex item in the same
     row as the content, which then computed to 0 and took the video with it. */
}

/* =============================================================================
   The lesson video as a card, and the curriculum as its own panel
   -----------------------------------------------------------------------------
   Measured: the video stage ran the full 1015px of the column in near-black,
   with the 780px player floating in the middle of it — 118px of dead black down
   each side. And the curriculum panel sat at gap 0 against that black, so the
   two read as one slab rather than as two things.

   The stage goes. The player becomes a card on the page's own ground, and the
   panel is separated from it by real space and its own edge.
   ========================================================================== */

/* ---- the player is a card, not a slab ------------------------------------ */
body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper {
  display: flex;
  justify-content: center;
  background: var(--bg);
  padding: clamp(14px, 2vw, 26px) clamp(14px, 2.4vw, 30px);
}

body.olympic-study #tutor-single-entry-content .tutor-video-player {
  width: 100%;
  max-width: 760px;
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  background: #04101d;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px -20px rgba(0, 35, 85, .45);
}

/* ---- the curriculum stands apart ----------------------------------------- */
@media (min-width: 1201px) {
  body.olympic-study .tutor-course-single-content-wrapper {
    gap: clamp(14px, 1.6vw, 22px);
    padding-inline: clamp(0px, 1.2vw, 18px);
    padding-block-end: clamp(0px, 1.2vw, 18px);
    align-items: start;
  }
}

/* The whole panel treatment belongs to the two-column layout only.
   Below it, Tutor turns the curriculum into its own drawer and positions it
   itself. Overriding `position` there — with sticky, or with static — pulled
   the drawer back into the flex row at full width, and the content column next
   to it computed to 0. The video inside it then had nothing to be a percentage
   of and collapsed to 0x115. */
@media (min-width: 1201px) {
  body.olympic-study .tutor-course-single-sidebar-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--r-md, 14px);
    background: var(--bg-elev);
    align-self: start;
    position: sticky;
    inset-block-start: 14px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
  }
}

body.olympic-study #tutor-single-entry-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-elev);
}
@media (min-width: 1201px) {
  body.olympic-study #tutor-single-entry-content {
    border: 1px solid var(--border);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
  }
}

/* ---- the topic row: the arrow had the counter underneath it --------------- */
/* Tutor pins the accordion arrow with `inset-inline-end: 309px` on a 339px
   header — about 30px in from the edge — and the "0/1" counter occupies 14 to
   49 in the same place. Both were drawn on the same 35 pixels. The arrow is
   given the corner, and the row's padding keeps everything else out of it. */
body.olympic-study .tutor-accordion-item-header {
  position: relative;
  padding-inline: 18px 42px;
}
body.olympic-study .tutor-accordion-item-header::after {
  inset-inline-end: 16px;
  inset-inline-start: auto;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
body.olympic-study .tutor-accordion-item-header.is-active::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--cyan-fg);
}

/* the counter reads as a figure beside the name, not a badge under an arrow */
body.olympic-study .tutor-course-topic-summary {
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the tooltip icon after a topic name */
body.olympic-study .tutor-course-topic-title-info-icon { color: var(--muted-dim); font-size: 13px; }

/* ---- lesson rows keep clear of the panel edge ---------------------------- */
body.olympic-study .tutor-course-topic-item {
  padding-inline: 18px 42px;
}



@media (max-width: 780px) {
  body.olympic-study .tutor-course-single-content-wrapper {
    gap: 0;
    padding-inline: 0;
    padding-block-end: 0;
  }
  body.olympic-study #tutor-single-entry-content {
    border-radius: 0;
    border-inline: 0;
    border-block-start: 0;
  }
  body.olympic-study #tutor-single-entry-content .tutor-video-player-wrapper { padding: 0; }
  body.olympic-study #tutor-single-entry-content .tutor-video-player {
    max-width: none;
    border-radius: 0;
    border-inline: 0;
  }
}

/* =============================================================================
   The curriculum panel, finished
   -----------------------------------------------------------------------------
   Three things carried Tutor's own rhythm rather than the theme's: the active
   lesson row stood 75px tall against 43px for a topic header, the runtime sat
   at body weight beside the lesson name, and the completion circle was drawn as
   a form control. A panel is read down its left edge in one pass, so the rows
   need one rhythm and one place for each kind of information.
   ========================================================================== */

/* ---- the panel head ------------------------------------------------------ */
body.olympic-study .tutor-course-single-sidebar-title {
  padding: 15px 18px;
  background: var(--surf-a);
  border-block-end: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* ---- a topic is a section rule, not a card ------------------------------- */
body.olympic-study .tutor-course-topic + .tutor-course-topic {
  border-block-start: 1px solid var(--border);
}
body.olympic-study .tutor-course-topic { border-block-end: 0; }

body.olympic-study .tutor-accordion-item-header {
  padding: 12px 18px 12px 42px;
  font-size: 0.88rem;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ---- every lesson row on one rhythm -------------------------------------- */
body.olympic-study .tutor-course-topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  /* 18px both sides. The 42px on the inline-end was reserved for the accordion
     arrow, and only topic headers have one — on a lesson row it was 42px taken
     from a 340px panel, which squeezed the title to 124px and broke every
     Arabic lesson name onto a second line. */
  padding: 9px 18px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: 0;
}

/* the name takes whatever the runtime and the tick do not */
body.olympic-study .tutor-course-topic-item > .tutor-mr-32,
body.olympic-study .tutor-course-topic-item > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
body.olympic-study .tutor-course-topic-item > .tutor-ml-auto { flex: 0 0 auto; }

/* Tutor spaces the name off the runtime with a 32px margin, which on a 340px
   panel pushes long Arabic titles into a second line for no reason. */
body.olympic-study .tutor-course-topic-item .tutor-mr-32 {
  margin-inline-end: 0;
  min-width: 0;
  flex: 1;
  gap: 9px;
}

body.olympic-study .tutor-course-topic-item-title {
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

body.olympic-study .tutor-course-topic-item-icon {
  color: var(--muted);
  font-size: 13px;
  flex: none;
}
body.olympic-study .tutor-course-topic-item.is-active .tutor-course-topic-item-icon { color: var(--cyan-fg); }

/* the runtime is reference, not headline */
body.olympic-study .tutor-course-topic-item-duration {
  font-size: 0.74rem;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  flex: none;
}

/* the completion mark: a dot, not a form control */
body.olympic-study .tutor-course-topic-item .tutor-form-check-input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  border: 1.5px solid var(--border-strong);
  background-color: var(--bg);
  box-shadow: none;
}
body.olympic-study .tutor-course-topic-item .tutor-form-check-input:checked {
  border-color: var(--turq-fg);
  background-color: var(--turq-fg);
}

/* the lesson being read */
body.olympic-study .tutor-course-topic-item.is-active {
  background: var(--surf-a);
  border-inline-start: 3px solid var(--cyan);
  padding-inline-start: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ---- the panel scrolls quietly ------------------------------------------- */
@media (min-width: 1201px) {
  body.olympic-study .tutor-course-single-sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  body.olympic-study .tutor-course-single-sidebar-wrapper::-webkit-scrollbar { width: 8px; }
  body.olympic-study .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 2px solid var(--bg-elev);
  }
  body.olympic-study .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
}


/* ==========================================================================
   THE CURRICULUM ROW, RESOLVED
   -----------------------------------------------------------------------------
   Three faults met on the same row, and each one hid the next.

   Tutor paints a row on its <a>, with `background-color:#fff` written into the
   rule. On the night palette that is a white slab on a navy panel — and the
   lesson name on it, which this file had set to --muted, measured 2.4:1. The
   theme never spoke to that <a>, so the slab was never in anyone's way.

   The theme then put its padding on the wrapping <div>, which Tutor does not
   lay the row out with. Both paddings applied: a 57px row around a 39px slab.

   And the state was drawn twice. This file used to own a ::before dot, written
   before it was known that Tutor emits a real <input type=checkbox>. The dot
   hung on `.is-completed`, a class Tutor never sets, so it was frozen in the
   empty state — a filled circle on every row, beside the real marker, in the
   colour of the page background. It is gone. The checkbox carries the state,
   so the checkbox is the only mark.

   The row is the <a>. Everything below says so once.
   ========================================================================== */

/* the wrapper carries nothing; the row Tutor draws is inside it */
body.olympic-study .tutor-course-topic-item {
  padding: 0;
  border-inline-start: 0;
  background: none;
}

body.olympic-study .tutor-course-topic-item a {
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: none;
  border-inline-start: 3px solid transparent;
  color: var(--text-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
body.olympic-study .tutor-course-topic-item:hover a {
  background: var(--surf-a);
  color: var(--text);
}
body.olympic-study .tutor-course-topic-item.is-active a {
  background: var(--surf-a);
  border-inline-start-color: var(--cyan);
  color: var(--text);
  font-weight: 700;
}

/* the name and the runtime read on the panel now, not on white */
body.olympic-study .tutor-course-topic-item .tutor-course-topic-item-title { color: inherit; }
body.olympic-study .tutor-course-topic-item .tutor-course-topic-item-duration { color: var(--muted); }
body.olympic-study .tutor-course-topic-item.is-active .tutor-course-topic-item-duration { color: var(--text-soft); }

/* the mark: an empty ring until it is earned. Filling it with --bg made it a
   solid dark disc — the shape that means finished — on every unfinished row.
   The ring was drawn in --border-strong, which is rgba(255,255,255,.18): 1.75:1
   once composited onto the panel. A control has to be seen to be read, and
   1.4.11 asks 3:1 for one. --muted-dim measures 6.0:1 there and 5.1:1 on the
   day palette, and a 1.5px hairline at that strength still reads as quiet. */
body.olympic-study .tutor-course-topic-item .tutor-form-check-input {
  background-color: transparent;
  border: 1.5px solid var(--muted-dim);
}
body.olympic-study .tutor-course-topic-item .tutor-form-check-input:checked,
body.olympic-study .tutor-course-topic-item .tutor-form-check-input[checked] {
  border-color: var(--turq-fg);
  background-color: var(--turq-fg);
}


/* Tutor repaints the open row's name in its own blue, #3e64de. On the night
   panel that is 2.71:1 — the same failure the study screen had before, in the
   one row a student is looking at. The row owns its colour now. */
body.olympic-study .tutor-course-topic-item.is-active .tutor-course-topic-item-title { color: inherit; }

/* the topic counter, "2/3", is Tutor's #757c8e: 3.34:1 at 12px on the night
   panel. --muted is 5.7:1 there and 5.5:1 on the day palette. */
body.olympic-study .tutor-accordion-item-header .tutor-course-topic-summary { color: var(--muted); }


/* ==========================================================================
   THE QUIZ SCREEN
   -----------------------------------------------------------------------------
   The same invisible ink the dashboard had, in a place it matters more: the
   quiz title and all four figures beside it are `.tutor-color-black`, which is
   rgb(33,35,39) written into Tutor's stylesheet. On the night ground that is
   1.13:1 — the student sees "‎:الأسئلة" with nothing after it. The dashboard's
   fix is the right one; it simply never reached this screen.

   Then the layout. Tutor gives `.tutor-quiz-wrap` a width in fixed steps —
   980px, then 720 below its large breakpoint, then 600, then 360 — and the
   step is chosen from the **viewport**, not from the column the wrap sits in.
   At 1366px the wrap took 720px inside a 980px column, and the attempts table
   needs 817px. So the table scrolled sideways inside a box while 260px of the
   column stood empty either side of it. The table is given the column instead;
   the question body keeps its reading measure, because a line of Arabic set
   across 980px is not easier to read, only wider.

   And the table itself was Tutor's raw one — white, hairline-ruled, on a navy
   page. It gets the same treatment as the cart and the order tables.
   ========================================================================== */

/* ---- Tutor's colour utilities become theme tokens ------------------------ */
body.olympic-study .tutor-color-black,
body.olympic-study .tutor-color-black a,
body.olympic-study a.tutor-color-black { color: var(--text); }
body.olympic-study .tutor-color-subdued { color: var(--text-soft); }
body.olympic-study .tutor-color-muted,
body.olympic-study .tutor-color-hints { color: var(--muted); }

/* ---- the head: name, then the four figures ------------------------------- */
body.olympic-study .tutor-quiz-wrap .header-title {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--text);
}

body.olympic-study .tutor-quiz-wrap .tutor-border-top,
body.olympic-study .tutor-quiz-wrap .tutor-border-bottom {
  border-color: var(--border);
}

/* Four labels and four figures in one row is a table of contents for the
   attempt; on a phone that row wraps into an unreadable ladder, so it becomes
   a grid that keeps each label with its own figure. */
body.olympic-study .tutor-quiz-wrap .tutor-border-top.tutor-border-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  color: var(--muted);
  font-size: 0.86rem;
}
body.olympic-study .tutor-quiz-wrap .tutor-border-top.tutor-border-bottom > div {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}
body.olympic-study .tutor-quiz-wrap .tutor-border-top.tutor-border-bottom span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---- the attempts table gets the column ---------------------------------- */
/* Tutor's width rule is
   `.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper .tutor-quiz-wrap`
   — one id and three classes. An id outranks any number of classes, so the
   first version of this rule, written with classes alone, lost silently and
   the table went on scrolling. It carries the id now. */
@media (min-width: 1201px) {
  body.olympic-study #tutor-single-entry-content .tutor-quiz-wrapper .tutor-quiz-wrap:has(.tutor-table) {
    width: 100%;
  }
}

/* Where :has() is missing the wrap keeps Tutor's width and the table scrolls
   inside it, as it did before — no worse, just not better. */
body.olympic-study .tutor-table-responsive { overflow-x: auto; }

/* ---- the table itself ---------------------------------------------------- */
body.olympic-study .tutor-table {
  width: 100%;
  border-collapse: collapse;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  overflow: hidden;
  font-size: 0.86rem;
}
body.olympic-study .tutor-table th {
  padding: 11px 14px;
  background: var(--surf-a);
  border: 0;
  border-block-end: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-soft);
  white-space: nowrap;
  text-align: start;
}
body.olympic-study .tutor-table td {
  padding: 12px 14px;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--border);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
body.olympic-study .tutor-table tr:last-child td { border-block-end: 0; }
body.olympic-study .tutor-table tbody tr:hover td { background: var(--surf-a); }

/* the date column was the only one that needed three lines to itself */
body.olympic-study .tutor-table td:first-child { white-space: nowrap; color: var(--muted); }

/* ---- pass and fail ------------------------------------------------------- */
body.olympic-study .tutor-table .tutor-badge-label,
body.olympic-study .tutor-table [class*="label-"] {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}
body.olympic-study .tutor-table .label-success,
body.olympic-study .tutor-table .tutor-badge-label.label-success {
  color: var(--turq-fg);
  background: rgba(0, 180, 172, 0.14);
}
body.olympic-study .tutor-table .label-danger,
body.olympic-study .tutor-table .tutor-badge-label.label-danger {
  color: var(--danger-fg, #ff8a80);
  background: rgba(244, 67, 55, 0.14);
}

/* the details link reads as a link */
body.olympic-study .tutor-table a { color: var(--cyan-fg); text-decoration: none; }
body.olympic-study .tutor-table a:hover { text-decoration: underline; }

/* ---- the quiz body ------------------------------------------------------- */
/* An answer choice is `.tutor-card`, and Tutor writes `background-color:#fff`
   into that class. The label inherits the page's light ink, so «صحيح» and
   «خطأ» were rendered at 1.15:1 — the student could not read the options they
   were being asked to choose between. */
body.olympic-study .tutor-card {
  background: var(--bg-elev);
  color: var(--text-soft);
  box-shadow: none;
}
body.olympic-study .tutor-card:not(.tutor-no-border) { border-color: var(--border); }

body.olympic-study .tutor-quiz-question-item .tutor-card {
  border-radius: var(--r-sm, 10px);
  transition: border-color var(--t-fast), background var(--t-fast);
}
body.olympic-study .tutor-quiz-question-item:hover .tutor-card { border-color: var(--cyan); }
body.olympic-study .tutor-quiz-question-item input:checked ~ .tutor-card,
body.olympic-study .tutor-quiz-question-item .tutor-card:has(input:checked) {
  border-color: var(--cyan);
  background: var(--surf-a);
  color: var(--text);
}

/* Tutor marks each question type with a 32px badge in one of nine saturated
   colours — #9034a9, #fe3129, #ffbf00, #8a4a1b — none of them from this
   palette, and all of them empty: the glyph class is `tutor-icon-double-mark`,
   which 2.7.6's icon font does not define, so what reaches the page is a loud
   coloured square with nothing inside it. Measured, not assumed: the font
   loads, and the ::before content computes to "".

   The badge is kept rather than removed, because a later Tutor may well ship
   the glyph — but in the theme's own quiet surface, so a report of a student's
   answers stops looking like a paint chart. */
body.olympic-study [class*="tutor-quiz-type-"] {
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 6px;
  font-size: 13px;
  background-color: var(--surf-b);
  color: var(--muted);
}

/* the radio beside each option was white on white */
body.olympic-study .tutor-quiz-wrap .tutor-form-check-input {
  background-color: transparent;
  border: 1.5px solid var(--muted-dim);
}
body.olympic-study .tutor-quiz-wrap .tutor-form-check-input:checked {
  border-color: var(--cyan);
  background-color: var(--cyan);
}


/* ==========================================================================
   TUTOR'S MODALS
   -----------------------------------------------------------------------------
   The confirm that appears when a student walks away mid-quiz is Tutor's
   `.tutor-modal-content`, painted `#eff1f7`, with a `.tutor-modal-title` in
   `--tutor-body-color` — rgb(33,35,39) again. On the night palette that is a
   white card in the middle of a dark page with a title nobody can read, at the
   one moment the student is being asked to confirm something they cannot undo.

   Scoped to the theme rather than the study screen, because the same modal is
   used for deleting an account, resetting progress and confirming a purchase.
   ========================================================================== */

body.olympic-v2 .tutor-modal-content,
body.olympic-v2 .tutor-modal-content-white {
  background-color: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
}

body.olympic-v2 .tutor-modal-header,
body.olympic-v2 .tutor-modal-footer {
  background-color: transparent;
  border-color: var(--border);
}

body.olympic-v2 .tutor-modal-title,
body.olympic-v2 .tutor-modal-content .tutor-color-black {
  color: var(--text);
  font-family: var(--font-head);
}

body.olympic-v2 .tutor-modal-content p,
body.olympic-v2 .tutor-modal-content .tutor-color-secondary,
body.olympic-v2 .tutor-modal-content .tutor-color-subdued { color: var(--text-soft); }

body.olympic-v2 .tutor-modal-content .tutor-color-muted { color: var(--muted); }

/* the close control sat as a dark glyph on a dark card */
body.olympic-v2 .tutor-modal [data-tutor-modal-close],
body.olympic-v2 .tutor-modal .tutor-iconic-btn { color: var(--muted); }
body.olympic-v2 .tutor-modal [data-tutor-modal-close]:hover { color: var(--text); }

/* the overlay is already dark; on the night palette it needs to be darker than
   the card, not merely dark. */
body.olympic-v2 .tutor-modal-overlay { background-color: rgba(2, 12, 24, .72); }


/* ==========================================================================
   THE HERO, SAID PLAINLY
   -----------------------------------------------------------------------------
   The copy is now two lines and a phrase, so the type that carried a three-line
   claim and a paragraph is wrong for it twice over: the headline was sized to
   fill a column it no longer fills, and the sub was set at line-height 1.95 on
   a 560px measure — spacing built for four lines of prose, under a phrase four
   words long.

   The name is the longest line the page will ever set: «المعهد الأوليمبي
   الدولي» is 23 characters, and at the old 3.9rem ceiling it needed 713px in a
   column that offers about 700. It wrapped, and the deliberate break after
   «الدولي» collapsed. 3.15rem fits it with room, and keeps the name clearly
   ahead of everything under it.
   ========================================================================== */

.hero__content--plain h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  margin-bottom: 18px;
}

/* one phrase, set as a phrase */
.hero__content--plain .hero__sub {
  max-width: none;
  margin-bottom: 34px;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-soft);
}

/* The band was built around a headline and a paragraph; with those gone it kept
   the height and the text sat in a lot of air. Trimming the padding closes it
   up — the first attempt set `align-items: start` on the grid instead, which
   released the emblem's `aspect-ratio: 1/1` cell: it measured 456x300 with a
   400px emblem inside, so the mark hung 50px out of its own box top and bottom.
   The row stays centred. */
.hero:has(.hero__content--plain) {
  padding-block: clamp(32px, 4vw, 56px) clamp(28px, 3.4vw, 44px);
}


/* ==========================================================================
   THE HERO PHOTOGRAPH
   -----------------------------------------------------------------------------
   A photograph behind the name, at an opacity that makes it texture rather than
   a picture — the institute on a pitch, not a stock idea of sport.

   The two opacities are not a matter of taste. The band takes the page ground
   in each theme, so the photograph moves the background the wrong way in both:
   on the night palette its bright pixels raise the ground under light text, and
   on the day palette its dark pixels lower the ground under dark text. Both
   were worked out against the worst pixel in the file before being written
   here, and both were then measured on the rendered page.

   The scrim is a second, separate defence: strongest at the inline-start edge,
   which in Arabic is the side the words sit on, fading out under the emblem.
   ========================================================================== */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* How dark the photograph sits behind the words. The crossfade animates
   opacity, so the value the images rest at has to be a token the keyframes can
   read rather than a number on the rule itself. */
.hero__bg { --hero-photo: 0.4; }
:root[data-theme="dark"] .hero__bg { --hero-photo: 0.5; }

.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the line of players, not the sky above them */
  object-position: center 42%;
  opacity: 0;
}

/* Four photographs over twenty-four seconds: each holds for five, then hands
   over across one. The negative delay starts the first already at full, so the
   band is never blank on arrival — the whole point of an image with
   fetchpriority high. */
.hero__shot {
  animation: hero-cycle 24s linear infinite;
  animation-delay: calc(var(--i) * 6s - 1s);
}

@keyframes hero-cycle {
  0%,
  100% { opacity: 0; }
  4%,
  25%  { opacity: var(--hero-photo); }
  29%  { opacity: 0; }
}

/* The global reduced-motion rule cuts every animation to 0.01ms, which here
   would land all four on their closing frame — opacity 0 — and leave the band
   with no photograph at all. So the cycle is switched off properly instead:
   the first photograph stays, the other three step aside. */
@media (prefers-reduced-motion: reduce) {
  .hero__shot { animation: none !important; opacity: 0 !important; }
  .hero__shot:first-child { opacity: var(--hero-photo) !important; }
}

/* Two scrims, not one.
   The first attempt darkened only the inline-start edge, and left the far side
   at full strength: the coach and the line of players read as a photograph
   there, and the emblem — which is the brand mark and belongs on top —
   landed among them and had to compete. The horizontal scrim still does the
   heavy work behind the words; a second, even one lifts the rest so the whole
   band reads as one surface with a photograph inside it. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* The words sit on this side, and the picture is now at half strength, so
       the scrim has to do real work: measured against the brightest pixel in
       the file, a bare 0.5 image under the headline gives 3.25:1 — a fail. At
       78% of the ground painted back over it the same pixel reads 11.6:1, and
       the picture is untouched where the emblem is. */
    linear-gradient(
      to left,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 78%, transparent) 42%,
      color-mix(in srgb, var(--bg) 22%, transparent) 72%,
      color-mix(in srgb, var(--bg) 0%, transparent) 92%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 34%, transparent) 0%,
      color-mix(in srgb, var(--bg) 0%, transparent) 42%,
      color-mix(in srgb, var(--bg) 58%, transparent) 100%
    );
}

/* Below the breakpoint where the grid stacks, the words no longer sit on one
   side of the band — they sit on all of it, and `cover` on a tall narrow box
   crops into the picture so it fills more of the frame than it does on a desk.
   The horizontal scrim has nothing left to protect, so it becomes a straight
   wash and the picture steps back another notch. */
@media (max-width: 980px) {
  /* Stacked, the words run the full width, so the horizontal scrim has no side
     to protect and the picture has to come down instead. */
  .hero__bg img { opacity: 0.14; }
  :root[data-theme="dark"] .hero__bg img { opacity: 0.2; }

  .hero__bg::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 45%, transparent) 0%,
      color-mix(in srgb, var(--bg) 30%, transparent) 45%,
      color-mix(in srgb, var(--bg) 70%, transparent) 100%
    );
  }
}

/* the band's own content sits over both layers */
.hero .container { position: relative; z-index: 1; }


/* ==========================================================================
   THE ALBUM BAND
   -----------------------------------------------------------------------------
   One photograph used to run full-bleed straight under the name — a cohort
   holding their certificates. It is a good photograph, and it was also the only
   one anybody arriving at the site ever saw; the rest were in a boxed grid two
   thirds of the way down, past the courses, the tracks and the instructors.

   The band is the album now: full width, six photographs instead of one, each
   opening the lightbox that was already built for them, and a way through to
   the rest. The cohort photograph did not go anywhere — it is the first frame
   in the album, where it always was.

   It sat under the hero at first and was moved down to face the teaching staff
   instead, by request. That is a better neighbour than the statistics were:
   photographs of the place, then the people who teach in it.

   The pictures come from the gallery block on the album's own page, so this
   strip grows when the institute adds to it in wp-admin.
   ========================================================================== */

.album-band {
  padding-block: clamp(30px, 4vw, 52px) 0;
}

.album-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-end: clamp(14px, 2vw, 20px);
}

.album-band__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--text);
}

.album-band__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--cyan-fg);
  text-decoration: none;
}
.album-band__more:hover { text-decoration: underline; }
.album-band__more svg { width: 16px; height: 16px; }

/* Edge to edge, and square-ish frames rather than the 3:2 the grid uses: six
   across a wide screen at 3:2 would be a letterbox strip 150px tall, which is
   too little of any photograph to be worth showing. */
.album-band__strip {
  display: grid;
  /* auto-fit, not a fixed six: the album holds whatever the institute has put
     in it. Five photographs make five equal frames, seven make seven; a hard
     `repeat(6, 1fr)` left an empty column standing at five. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px;
}

.album-band__strip .shot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.album-band__strip .shot img { aspect-ratio: 4 / 3.4; }

/* the caption only on hover here — six captions at once is a wall of text */
.album-band__strip .shot__cap {
  opacity: 0;
  transition: opacity var(--t-fast);
}
.album-band__strip .shot:hover .shot__cap,
.album-band__strip .shot:focus-within .shot__cap { opacity: 1; }

@media (max-width: 1100px) {
  .album-band__strip { grid-template-columns: repeat(3, 1fr); }
}

/* On a phone six frames stacked is six screens of scrolling before the page
   starts. It becomes one row the reader swipes instead. */
@media (max-width: 700px) {
  .album-band__strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 16px;
    scrollbar-width: none;
  }
  .album-band__strip::-webkit-scrollbar { display: none; }
  .album-band__strip .shot {
    flex: 0 0 76%;
    scroll-snap-align: center;
    border-radius: var(--r-md);
  }
  .album-band__strip .shot img { aspect-ratio: 3 / 2; }
  .album-band__strip .shot__cap { opacity: 1; }
}

/* ---- the album page ------------------------------------------------------ */
.gallery--album { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px)  { .gallery--album { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gallery--album { grid-template-columns: 1fr; } }


/* ==========================================================================
   THE CONTACT DOCK
   -----------------------------------------------------------------------------
   Two round buttons in the corner: WhatsApp and Messenger, each naming itself
   on hover. The brand colours are the brands' own — a green that is not this
   theme's green and a blue that is not its blue — because these two marks are
   recognised by colour before they are read, and repainting them in the site
   palette would cost the recognition that makes them useful.

   Both sit above everything except the lightbox, and below the header drawer,
   so nothing they overlap is ever something the reader opened.
   ========================================================================== */

.dock {
  position: fixed;
  inset-block-end: clamp(16px, 3vw, 26px);
  inset-inline-end: clamp(14px, 2.4vw, 24px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.dock__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.dock__btn svg { width: 27px; height: 27px; }

.dock__btn--wa { background: #25d366; }
.dock__btn--fb { background: #0084ff; }

.dock__btn:hover,
.dock__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* The label is the button's accessible name, so it is moved out of sight
   rather than hidden — `display:none` would take it from the screen reader
   too, and the button would be an unlabelled circle. */
.dock__label {
  position: absolute;
  /* Same edge as the dock, and that is right: the dock is pinned at
     `inset-inline-end`, so its own inline-end is the side facing the middle of
     the page. In Arabic that resolves to `left: calc(100% + 12px)`, which was
     measured putting the label at x=90 against a button ending at x=78 —
     beside it, on screen. Pinning it at inline-start instead sends it to
     x=-125, off the edge. Both flip together if the document ever turns. */
  inset-inline-end: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-elev-2, #0c2c4e);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.dock__btn:hover .dock__label,
.dock__btn:focus-visible .dock__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* On a touch screen there is no hover to reveal a label, and a tooltip that
   only appears on tap would sit under the thumb. The buttons stand alone; the
   icons are the label there. */
@media (hover: none) {
  .dock__label { display: none; }
}

@media (max-width: 700px) {
  .dock__btn { width: 48px; height: 48px; }
  .dock__btn svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock__btn,
  .dock__label { transition: none; }
  .dock__btn:hover { transform: none; }
}


/* ==========================================================================
   THE CATALOGUE HEAD AND ITS FILTERS
   -----------------------------------------------------------------------------
   `.page-hero__inner` was capped at 780px with nothing centring it, so in
   Arabic it sat against the right edge of a 1240px container while the section
   below it ran the full width — the page opened off-balance. Four of the page
   templates had already been passing `justify-content:center` on their eyebrow
   by hand, which says the head was meant to be centred all along and only the
   box around it was never told.

   The filter row is a segmented control, so it is built like one: a single
   track rather than pills scattered on a bar, the count set as a figure beside
   its label instead of a badge with its own background, and the whole thing on
   the centre line under the head it belongs to. On a narrow screen it slides
   instead of wrapping — a wrapped row of seven tracks becomes three ragged
   lines and stops reading as one control.
   ========================================================================== */

.page-hero__inner {
  margin-inline: auto;
  text-align: center;
}
.page-hero__inner .eyebrow { justify-content: center; }
.page-hero .crumbs { justify-content: center; }

/* ---- the filters --------------------------------------------------------- */
.filters {
  margin-inline: auto;
  gap: 4px;
  padding: 5px;
  justify-content: center;
}

.filter {
  padding: 10px 20px;
  gap: 7px;
  font-size: 0.9rem;
}

/* The count is a figure, not a chip: at seven tracks the badges were seven
   more filled shapes on a row that already had seven. */
.filter__n {
  background: none;
  padding: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.filter.is-active .filter__n { background: none; color: inherit; opacity: 0.8; }
.filter.is-active { box-shadow: 0 6px 18px -8px rgba(48, 190, 240, 0.55); }

/* ---- the count line ------------------------------------------------------ */
.results-count {
  text-align: center;
  margin-block: 0 26px;
}

@media (max-width: 860px) {
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: var(--r-md);
    width: 100%;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; }
}


/* ==========================================================================
   THE ENGLISH SIDE
   -----------------------------------------------------------------------------
   Five pages for the audience the dollar price is aimed at. They share the
   design system with the Arabic site — same palette, same cards, same buttons —
   and differ in the two things that have to differ: the direction, and a
   navigation built for five destinations rather than nine.

   Almost nothing here is a new colour or a new shape. The document is turned
   round by `dir="ltr"` on <html>, the logical properties the theme already uses
   follow it on their own, and what is left is the handful of places that were
   written physically, plus the pieces these pages have that the Arabic ones do
   not: a table of courses, a notice, and a language link.

   Arabic inside these pages — a course title, an address — keeps its own
   direction with `.ar`, because a diploma's name is not translated and reading
   it left to right would break it.
   ========================================================================== */

.olympic-en {
  direction: ltr;
  text-align: left;
  font-family: var(--font-body-en, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
}

.olympic-en h1,
.olympic-en h2,
.olympic-en h3,
.olympic-en h4,
.olympic-en .brand__text b {
  font-family: var(--font-head-en, "Segoe UI Semibold", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
  letter-spacing: -0.01em;
}

/* an Arabic phrase inside an English page keeps its own direction */
.olympic-en .ar {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--font-body);
}

/* ---- the language link --------------------------------------------------- */
.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.lang-link svg { width: 15px; height: 15px; }

/* ---- the notice that says what language the teaching is in --------------- */
.en-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  margin-block-end: 28px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--cyan);
  border-radius: var(--r-md);
  background: var(--surf-a);
  color: var(--text-soft);
}
.en-notice svg { width: 20px; height: 20px; flex: none; color: var(--cyan-fg); margin-block-start: 2px; }
.en-notice p { margin: 0; font-size: 0.94rem; line-height: 1.75; }
.en-notice b { color: var(--text); }

.en-note {
  margin-block-start: 20px;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---- the course table ---------------------------------------------------- */
.en-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 0.92rem;
}
.en-table th {
  padding: 13px 16px;
  background: var(--surf-a);
  border-block-end: 1px solid var(--border);
  font-family: var(--font-head-en, system-ui);
  font-weight: 700;
  color: var(--text-soft);
  text-align: left;
  white-space: nowrap;
}
.en-table td {
  padding: 14px 16px;
  border-block-end: 1px solid var(--border);
  color: var(--text-soft);
  vertical-align: middle;
}
.en-table tr:last-child td { border-block-end: 0; }
.en-table tbody tr:hover td { background: var(--surf-a); }
.en-table .price__new { font-weight: 800; color: var(--text); }

/* the whole table scrolls rather than the page, on a narrow screen */
@media (max-width: 860px) {
  .en-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- the short course list on the home page ------------------------------ */
.en-course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.en-course-list li + li { border-block-start: 1px solid var(--border); }
.en-course-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  color: var(--text-soft);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.en-course-list a:hover { background: var(--surf-a); color: var(--text); }
.en-course-list__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex: none;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ---- prose --------------------------------------------------------------- */
.prose--en { max-width: 68ch; margin-inline: auto; }
.prose--en h2 { margin-block: 34px 12px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.prose--en h2:first-child { margin-block-start: 0; }
.prose--en p { line-height: 1.9; color: var(--text-soft); }

/* ---- the five-item navigation has room the nine-item one did not --------- */
.en-header .nav__links { gap: 4px; }
.en-header .nav__link { padding-inline: 14px; }

/* The arrow glyph is drawn pointing left, because in Arabic that is forward.
   In English it is backwards, so it is turned — the icon set stays one file
   and the direction is a property of the page, not of the drawing. */
.olympic-en .btn svg,
.olympic-en .section-head__link svg,
.olympic-en .cat-card svg.icon-arrow,
.olympic-en .drawer__links a::after,
.olympic-en .footer__list svg { transform: scaleX(-1); }

/* the chevron the drawer draws after each link is a pseudo-element, not an svg */
.olympic-en .drawer__links a::after { display: inline-block; }

/* except the ones that are not arrows */
.olympic-en .btn--wa svg,
.olympic-en .lang-link svg,
.olympic-en .contact-card__icon svg,
.olympic-en .verify-card__icon svg,
.olympic-en .pill svg,
.olympic-en .en-notice svg,
.olympic-en .theme-btn svg,
.olympic-en .topbar svg { transform: none; }


/* ==========================================================================
   THE DRAWER COULD NEVER RISE
   -----------------------------------------------------------------------------
   The mobile menu opened over the page and the page showed straight through it,
   on every template. Not a background that failed to paint: the panel is drawn
   in --bg-elev-2 and always was.

   `design.css` carries `body > * { position: relative; z-index: 1 }`. That gives
   the header, the main element and the footer a stacking context each and the
   same level, so they paint in document order and `main` — which comes after —
   wins. The drawer sits inside the header with `z-index: 300`, but 300 only
   ranks it against its siblings inside the header's own context; against the
   page it is worth whatever the header is worth, and the header was worth 1.

   So the fix is on the header, not the drawer. 300 puts it where the file's own
   ladder already says an overlay belongs: under the lightbox at 400 and the
   skip link at 999, over the contact dock at 60 and everything on the page.
   ========================================================================== */

#site-header { z-index: 300; }


/* ===========================================================================
   THE FORM BESIDE THE MAP

   The old contact page's enquiry form was a MetForm block that ran taller than
   everything above it put together, and left nearly six hundred pixels of dead
   padding under the map. This is the same form at a size that sits level with
   the map instead of pushing past it.

   It reuses .field, .form-row and .form-status from the design system, so it
   inherits the focus states and the dark theme without restating them. Only
   what is specific to being small and beside a map is here.
   =========================================================================== */

.contact-form { align-self: stretch; }

.contact-form__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.24rem;
  margin: 0 0 6px;
}

.contact-form__lead {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
}

/* Four rows have to clear 380px of map without overshooting it, so the text
   area gives up the design system's roomier default. */
.contact-form .field { margin-bottom: 14px; }
.contact-form .field textarea { min-height: 92px; }
.contact-form .form-row { gap: 14px; }

/* The design system starts .form-layout's columns at the top, which is right
   where one column is a picture and the other is text. Here both are panels,
   and a 382px map beside a 662px form left 280px of empty ground under the
   map — the very thing this section was rebuilt to remove. Stretching lets the
   map take the form's height instead. */
#contact-form .form-layout { align-items: stretch; }
#contact-form .map-wrap    { min-height: 380px; }

.contact-form__foot {
  color: var(--muted-dim);
  font-size: 0.82rem;
  text-align: center;
  margin: 12px 0 0;
}

/* Below the breakpoint where .form-layout stacks, the form no longer has a map
   to match and can breathe again. */
@media (max-width: 900px) {
  .contact-form .field textarea { min-height: 124px; }
}


/* ===========================================================================
   THE ABOUT PAGE'S CREDENTIALS ROW

   The registration facts — commercial register, investment authority, the two
   laws — are the institute's own claim to being what it says it is. They read
   as a wall of legal Arabic in a paragraph and as four facts in a row, so they
   are a row. The pills already exist for the home page's hero; this only gives
   them somewhere to sit outside it.
   =========================================================================== */

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 22px;
}

.about-legal {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 2.05;
}

/* .value-card styles its title as h4. Under an h2 section heading that skips a
   level, so the markup uses h3 and borrows the same look. */
.value-card .value-card__h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 8px;
}


/* ===========================================================================
   THE VIDEO WALL

   Nine students on camera. The old page loaded nine YouTube players to show
   them; this shows nine thumbnails and builds a player only where one is
   asked for.

   The thumbnail is 16:9 through object-fit rather than a fixed height, because
   YouTube's hqdefault.jpg is 4:3 with black bars top and bottom — cropping to
   the centre removes them and leaves the face where it should be.
   =========================================================================== */

.vids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* The card owns the box, not the button.
   The button used to carry `aspect-ratio`, which worked until it was hidden to
   make room for the player: the card then had no height of its own and the
   absolutely-positioned iframe had nothing to fill. */
.vid {
  min-width: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.vid__btn {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev-2);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.vid__btn:hover,
.vid__btn:focus-visible {
  border-color: rgba(48, 190, 240, 0.55);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vid__thumb {
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with letterbox bars; cover crops them away. */
  object-fit: cover;
  display: block;
  transition: transform var(--t-med), filter var(--t-fast);
}

.vid__btn:hover .vid__thumb { transform: scale(1.04); }

.vid__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark enough that a white triangle reads on any frame, light enough that
     the face behind it still does. */
  background: linear-gradient(180deg, rgba(0, 22, 51, 0.18), rgba(0, 22, 51, 0.52));
  transition: background var(--t-fast);
}

.vid__btn:hover .vid__play { background: linear-gradient(180deg, rgba(0, 22, 51, 0.10), rgba(0, 22, 51, 0.40)); }

.vid__play svg {
  position: relative;   /* above the ::before disc */
  z-index: 1;
  width: 24px;
  height: 24px;
  color: #fff;
  /* No RTL flip. A play triangle points right in every language — it is a
     media convention, not reading direction, and a left-pointing one reads as
     rewind. */
}

.vid__play::before {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(0, 54, 124, 0.82);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  transition: transform var(--t-fast), background var(--t-fast);
}

.vid__btn:hover .vid__play::before {
  transform: scale(1.08);
  background: rgba(48, 190, 240, 0.92);
}

/* Once playing, the card is the player: no border lift, no hover games. */
.vid.is-playing .vid__btn {
  transform: none;
  cursor: default;
  border-color: rgba(48, 190, 240, 0.55);
}

.vid iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  position: absolute;
  inset: 0;
}

@media (max-width: 980px) {
  .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 620px) {
  .vids { grid-template-columns: 1fr; }
  .vid__play::before { width: 54px; height: 54px; }
}


/* ===========================================================================
   THE LIBRARY

   A book cover is 3:4 and nothing else, so the frame is fixed at 3:4 and the
   image covers it. Letting each cover set its own height gives a shelf where
   no two cards line up — which is what a shelf must never look like.
   =========================================================================== */

.book-lead {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
}

.book-lead__cover,
.book__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-md);
}

.book-lead__cover img,
.book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No cover uploaded yet: an icon on the brand ground, not a broken frame. */
.book-lead__blank,
.book__blank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-navy);
  color: #fff;
}

.book-lead__blank svg { width: 64px; height: 64px; opacity: 0.9; }
.book__blank svg { width: 44px; height: 44px; opacity: 0.9; }

.book-lead__body h2 { margin: 10px 0 14px; }

.book-lead__blurb {
  color: var(--text-soft);
  font-size: 1.04rem;
  line-height: 2;
  max-width: 56ch;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------- the shelf */

.book {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.book:hover { border-color: rgba(48, 190, 240, 0.35); transform: translateY(-5px); }

.book .book__cover { border: 0; border-radius: 0; box-shadow: none; }

.book__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.book__body h3 { font-size: 1.05rem; margin-bottom: 8px; }

.book__body p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

/* Pushes the download button to the bottom, so buttons line up across a row
   whatever length the descriptions are. */
.book__body .btn { margin-block-start: auto; }

.book__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-dim);
  font-size: 0.83rem;
  margin-bottom: 16px;
}

.book__meta svg { width: 16px; height: 16px; flex: none; }
.book__dot { opacity: 0.6; }

@media (max-width: 760px) {
  .book-lead { grid-template-columns: 1fr; }
  .book-lead__cover { max-width: 230px; }
}

/* ===========================================================================
   THE LIBRARY'S DOOR ON THE HOME PAGE

   One card, not a section of them: the library is one destination and a row of
   three cards around it would imply two more that do not exist.
   =========================================================================== */

.library-door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(24px, 3.4vw, 38px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surf-b), var(--surf-lo));
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.library-door:hover { border-color: rgba(48, 190, 240, 0.4); transform: translateY(-3px); }

.library-door__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: var(--r-lg);
  background: var(--grad-navy);
  color: #fff;
  flex: none;
}

.library-door__mark svg { width: 34px; height: 34px; }

.library-door h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 6px; }
.library-door p { color: var(--muted); margin: 0; max-width: 54ch; }

@media (max-width: 820px) {
  .library-door { grid-template-columns: auto minmax(0, 1fr); text-align: start; }
  .library-door .btn { grid-column: 1 / -1; justify-content: center; }
}


/* ===========================================================================
   TEN ITEMS IN THE NAV

   The header already sheds things as it narrows — the join button at 1440, the
   brand's tagline at 1340, the whole row at 980. Adding «المكتبة» made it ten
   links and broke that budget at two widths:

     1366px — everything already shed, and the row still needed 745px in 713.
     above 1440 — the join button is back, so the actions grow from 201 to 335
                  and the row has even less: 671 for the same 745.

   The first is two pixels of padding a side across ten links. The second is not
   a padding problem: at 1600px the header is a 1240px bar in a 1600px window,
   so the fix is to stop constraining it. The content column keeps 1240 because
   a line of text has a readable length; a header bar does not.
   =========================================================================== */

/* The tighter padding runs across every width where the row is shown, not only
   the narrow end: at 1600px the row still wanted 745px of the 740 it was given,
   and capping this rule at 1440 left those five pixels spilling. */
@media (min-width: 981px) {
  .nav__links .nav__link { padding-inline: 7px; }
  .nav__links { gap: 2px; }
}

@media (min-width: 1441px) {
  .nav.container { max-width: 1400px; }
}


/* ===========================================================================
   THE STUDENT'S NAME ON THE LESSON VIDEO

   The first version was white text at 46% with a dark outline, and it was
   invisible — because the lectures are slides, and slides are white. White on
   white with a hairline outline is a smudge, and a watermark nobody can read in
   the recording protects nothing.

   So the mark carries its own ground: a dark pill dense enough that the text's
   contrast no longer depends on the frame behind it. Over a white slide the
   pill was set by measuring, not by eye: over a white slide — the worst and
   the commonest ground — the name reads at 4.74:1 and the account number at
   3.91:1, and over a lecture hall, a pitch or a night shot both climb past
   7:1. The first attempt sat at 2.42:1 for the number, which is the half that
   identifies anybody, so it was the half that had to be legible.

   pointer-events stay off. The player underneath behaves as if this were not
   here.
   =========================================================================== */

.olympic-wm {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(8, 24, 45, 0.64);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font-head), system-ui, sans-serif;
  line-height: 1.25;
  white-space: nowrap;
  /* Slow enough to read as drift rather than a jump. */
  transition: top 1.2s ease, inset-inline-start 1.2s ease, inset-inline-end 1.2s ease;
}

.olympic-wm__name {
  font-weight: 700;
  font-size: clamp(0.78rem, 1.6vw, 1rem);
  color: rgba(255, 255, 255, 0.90);
}

.olympic-wm__code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.66rem, 1.25vw, 0.84rem);
  color: rgba(255, 255, 255, 0.76);
  direction: ltr;
}

/* Fullscreen is where the mark matters most, so it grows with the picture. */
.plyr--fullscreen-active .olympic-wm { padding: 7px 15px; }
.plyr--fullscreen-active .olympic-wm__name { font-size: clamp(1rem, 1.7vw, 1.4rem); }
.plyr--fullscreen-active .olympic-wm__code { font-size: clamp(0.84rem, 1.35vw, 1.1rem); }

@media (prefers-reduced-motion: reduce) {
  .olympic-wm { transition: none; }
}


/* ===========================================================================
   THE HEADLINE, AND THE SEAL UNDER IT

   The name came down from 3.9rem so there is room for a claim beneath it
   without the two of them filling the band between the header and the buttons.
   Set here rather than in design.css because this is one page's hero, and the
   design system is not edited for one page.
   =========================================================================== */

.hero h1 { font-size: clamp(1.85rem, 3.5vw, 3.05rem); margin-bottom: 16px; }

/* The claim.

   Shaped like a button and deliberately not one. The weight comes from a
   gradient edge over a glass ground rather than a fill, so it reads as a seal
   pressed onto the page instead of a control waiting to be pressed — and
   nobody clicks it and finds nothing there. */
.hero__seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 9px 18px 9px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.35vw, 0.98rem);
  line-height: 1.5;
  color: var(--text);
  background: var(--surf-b);
  /* One border, drawn as a gradient: a flat line at this weight looks like a
     disabled button, and a full fill would compete with the two real buttons
     two rows below it. */
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--surf-b), var(--surf-b)),
    linear-gradient(120deg, var(--cyan) 0%, var(--turq, var(--cyan)) 45%, rgba(0, 54, 124, 0.35) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 2px 18px -8px rgba(48, 190, 240, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__seal__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-navy);
  color: #fff;
}

.hero__seal__mark svg { width: 14px; height: 14px; }

@media (max-width: 620px) {
  .hero__seal { font-size: 0.8rem; padding: 8px 14px 8px 11px; gap: 8px; }
  .hero__seal__mark { width: 21px; height: 21px; }
  .hero__seal__mark svg { width: 12px; height: 12px; }
}

/* ===========================================================================
   THE ACCOUNT PAGE

   /my-account/ had no styling of any kind. WooCommerce's navigation is a bare
   <ul>, and inside the theme's .prose wrapper it came out as a bulleted list of
   six links stacked above two paragraphs — the page ended a third of the way
   down a 1080px screen with nothing else on it.

   Here it is a sidebar beside the content, which is what the markup has always
   described and what nothing was drawing. Every colour is a token, so the page
   follows the site's light and dark themes without a second set of rules.
   =========================================================================== */

.account-frame { max-width: 100%; }

/* The grid describes a sidebar beside a content column, and there is no
   sidebar until someone is signed in — at this same URL a signed-out visitor
   gets the login form on its own. Gating on the body class WordPress already
   sets is what stops that form from landing in a 268px column. */
body.logged-in .account-frame .woocommerce {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

/* Signed out: one form, at a width a form can be read at.
   WooCommerce's own rule for this box is .woocommerce form.login — a class and
   an element, which outweighs a plain two-class selector, so margin-inline:auto
   was set and then ignored and the form sat flush against the page's right
   edge. Matching its shape is what makes the centring hold. */
.account-frame .woocommerce form.login,
.account-frame .woocommerce form.register {
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surf-a);
  box-shadow: var(--shadow-sm);
}

/* WooCommerce puts its own «تسجيل الدخول» heading above the form, which under
   a banner already reading تسجيل الدخول said it twice — the same duplication
   page.php drops its title banner to avoid. This only matches the single-form
   case: with registration switched on, WooCommerce nests the two headings
   inside .col2-set, where they are telling the two forms apart and are kept. */
.account-frame .woocommerce > h2 { display: none; }

/* The submit buttons on this page are the page's whole purpose — signing in,
   saving an address, changing a password — but WooCommerce marks the primary
   ones with .alt only in the cart, so here they fell to the theme's quiet
   outline style and read as something you could ignore. Scoped to the account
   frame so the cart and checkout buttons are left exactly as they are. */
.account-frame .woocommerce form.login button.button,
.account-frame .woocommerce form.register button.button,
.account-frame .woocommerce-MyAccount-content button.button {
  width: 100%;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: transparent;
  font-size: 1.03rem;
  padding-block: 15px;
}

.account-frame .woocommerce form.login button.button:hover,
.account-frame .woocommerce form.register button.button:hover,
.account-frame .woocommerce-MyAccount-content button.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: var(--on-accent);
}

.account-frame .woocommerce-LostPassword a,
.account-frame .woocommerce form.login a { color: var(--cyan-fg); font-weight: 600; }

.account-frame .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

/* WooCommerce lays this page out with floats — a 30% navigation floated one
   way and a 68% content column floated the other, with a clearfix pair on the
   wrapper. Floats do nothing to a grid item, so it looked safe to leave them.
   It was not: ::before and ::after are grid items of their own, and they took
   the first two cells, which pushed the content into a second row where 68% of
   a 268px column left it 182 pixels wide. Measured, not guessed — the content
   column came back 182.234px, which is 68% of 30% of the container to the
   third decimal. All four declarations are switched off here.

   The extra .woocommerce in each selector is deliberate: WooCommerce's own
   rules carry two classes, and matching that weight without exceeding it would
   leave the outcome to which stylesheet the browser loaded last. */
.account-frame .woocommerce::before,
.account-frame .woocommerce::after { display: none; }

.account-frame .woocommerce .woocommerce-MyAccount-navigation,
.account-frame .woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

/* Below this the sidebar has no room to be a sidebar, so it becomes a header
   for the content under it rather than a column squeezed beside it. */
@media (max-width: 900px) {
  body.logged-in .account-frame .woocommerce { grid-template-columns: 1fr; }
}

/* ---- the sidebar -------------------------------------------------------- */

.acct-nav {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surf-a);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .acct-nav { position: static; }
}

.acct-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acct-nav__item { margin: 0; }

.acct-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.93rem;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.acct-nav a svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}

.acct-nav a:hover { background: var(--surf-b); color: var(--text); }
.acct-nav a:hover svg { color: var(--cyan-fg); }

/* The current page. WooCommerce marks it with is-active and marked it with
   nothing visible; a navigation that cannot tell you where you are is a list. */
.acct-nav .is-active > a {
  background: var(--grad-navy);
  color: #fff;
  box-shadow: var(--sh-1);
}

.acct-nav .is-active > a svg { color: #fff; }

/* The links that leave the account, and the one that ends the session, are set
   apart by a rule rather than by colour alone. */
.acct-nav__item--out + :not(.acct-nav__item--out) { margin-top: 6px; }

.acct-nav__item--exit {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.acct-nav__item--exit a { color: var(--muted); }
.acct-nav__item--exit a:hover { color: var(--danger-fg); background: rgba(239, 68, 68, 0.07); }
.acct-nav__item--exit a:hover svg { color: var(--danger-fg); }

/* ---- who you are -------------------------------------------------------- */

.acct-hi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surf-a);
  box-shadow: var(--shadow-sm);
}

.acct-hi__avatar {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-navy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.acct-hi__who { flex: 1 1 220px; min-width: 0; }

.acct-hi__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.acct-hi__name {
  margin: 3px 0 5px;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.acct-hi__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.acct-hi__dot { opacity: 0.6; }
.acct-hi__cta { flex: none; }

/* ---- what you have ------------------------------------------------------ */

.acct-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.acct-stat {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surf-a);
  text-align: center;
}

.acct-stat__icon svg { width: 19px; height: 19px; color: var(--cyan-fg); }

.acct-stat__n {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.acct-stat__label { font-size: 0.8rem; color: var(--muted); }

/* ---- where to go -------------------------------------------------------- */

.acct-h {
  margin: clamp(26px, 3vw, 36px) 0 14px;
  font-family: var(--font-head);
  font-size: 1.08rem;
}

.acct-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
}

.acct-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surf-a);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.acct-tile:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: var(--shadow-md);
}

.acct-tile__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--chip-bg);
  color: var(--cyan-fg);
}

.acct-tile__icon svg { width: 20px; height: 20px; }

.acct-tile__h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
}

.acct-tile__p {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* The arrow is drawn pointing left, which in Arabic is forward — so it leans
   forward on hover, not backwards. */
.acct-tile__go {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 18px;
  color: var(--muted);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.acct-tile__go svg { width: 16px; height: 16px; }

.acct-tile:hover .acct-tile__go { color: var(--cyan-fg); transform: translateX(-3px); }

.acct-signout {
  margin: clamp(22px, 3vw, 30px) 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.acct-signout a { color: var(--cyan-fg); font-weight: 600; }

/* ---- the other account screens ------------------------------------------
   Orders, downloads and the two forms come from WooCommerce and are already
   styled by the shop_table and form-row rules above. What they lacked was a
   heading that belonged to the page, and any room around them. */

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 1.15rem;
}

.woocommerce-MyAccount-content > p { color: var(--text-soft); }

.woocommerce-MyAccount-content legend {
  padding: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.woocommerce-MyAccount-content fieldset {
  margin-top: 22px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.woocommerce-MyAccount-content .woocommerce-info { margin-bottom: 0; }

/* The way out of an empty cart.

   WooCommerce leaves this paragraph unstyled and normally never shows it here
   at all — it draws the button only when a shop page exists, and the institute
   had that page deleted. The theme's own cart-empty template brings the button
   back; this gives it somewhere to stand instead of sitting flush against the
   reading edge under the notice. */
.return-to-shop {
  margin: 18px 0 0;
  text-align: center;
}

/* ===========================================================================
   TUTOR'S DASHBOARD IN THE DARK

   Measured on the enrolled-courses screen in dark mode: nineteen pieces of text
   below AA, and the worst of them were not merely dim. Tutor writes the course
   titles and the rating figures in #212327 — near-black on the theme's
   near-black ground, a contrast ratio of **1.00**. Not hard to read: invisible.
   The tab row was 1.86, the active tab 3.47, and the pending-application notice
   4.16.

   None of that is a bug in Tutor. It ships one palette, written for a white
   page, as literal hex values — so every rule below does the same job: replaces
   a literal with the token the rest of the site already switches.
   =========================================================================== */

/* ---- the course cards ---------------------------------------------------- */

.tutor-dashboard .tutor-course-name,
.tutor-dashboard .tutor-course-name a { color: var(--text); }
.tutor-dashboard .tutor-course-name a:hover { color: var(--cyan-fg); }

.tutor-dashboard .tutor-ratings-average,
.tutor-dashboard .tutor-ratings-count { color: var(--text-soft); }

/* ---- the tab row --------------------------------------------------------- */

.tutor-dashboard .tutor-nav .tutor-nav-link,
.tutor-dashboard .tutor-nav-more-list .tutor-dropdown-item {
  color: var(--text-soft);
}

.tutor-dashboard .tutor-nav .tutor-nav-link:hover,
.tutor-dashboard .tutor-nav-more-list .tutor-dropdown-item:hover {
  color: var(--text);
}

.tutor-dashboard .tutor-nav .tutor-nav-link.is-active,
.tutor-dashboard .tutor-nav-more-list .tutor-dropdown-item.is-active {
  color: var(--cyan-fg);
  border-bottom-color: var(--cyan);
}

/* ---- the fixed bar at the foot of a phone screen -------------------------

   Tutor paints #tutor-dashboard-footer-mobile a hard-coded white, whatever the
   page around it is doing. Giving its three links the theme's text colour
   without touching the bar made this worse, not better: light text on white
   measured 1.59, where Tutor's own grey had at least managed 4.17. The bar has
   to move with the theme before anything standing on it can. */

/* Tutor writes this as `.tutor-dashboard #tutor-dashboard-footer-mobile` — an
   id AND a class. `body #id` looks stronger and is not: one id plus one element
   loses to one id plus one class, which is why the bar stayed white through two
   attempts. The selector below is the same shape, so it wins on order. */
.tutor-dashboard #tutor-dashboard-footer-mobile {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
}

/* The three links are styled by Tutor at the same depth, so they are matched at
   that depth too rather than by reaching past it to the span inside. */
.tutor-dashboard #tutor-dashboard-footer-mobile > div > div > a { color: var(--text-soft); }
.tutor-dashboard #tutor-dashboard-footer-mobile > div > div > a:hover,
.tutor-dashboard #tutor-dashboard-footer-mobile > div > div > a.active { color: var(--cyan-fg); }

/* ---- «طلب انضمامك كمحاضر قيد المراجعة» ------------------------------------

   Tutor prints this as a bare span with its colour written into a style
   attribute — #7A7A7A, which no stylesheet can outrank without !important —
   and an icon from the dashicons font. That font is only enqueued when the
   admin bar is present, so for the 346 students who actually see this notice
   the icon was an empty box. Here the span becomes a pill that says what state
   the application is in, and the icon is drawn from a mask so it needs no font
   at all. */

.tutor-dashboard .tutor-header-right-side > .tutor-d-flex > span[style] {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surf-a);
  color: var(--text-soft) !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
  text-align: start;
}

.tutor-dashboard .tutor-header-right-side > .tutor-d-flex > span[style] b {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.tutor-dashboard .tutor-header-right-side > .tutor-d-flex > span[style]::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: var(--blue-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The dashicon it replaces. Hidden rather than left to render as whatever the
   browser does with a font that was never loaded. */
.tutor-dashboard .tutor-header-right-side .dashicons { display: none !important; }

/* On a narrow screen the notice and the greeting share one column, and a pill
   pushed hard to the end of the row reads as though it belongs to nothing. */
@media (max-width: 767px) {
  .tutor-dashboard .tutor-header-right-side { justify-content: flex-start !important; }
}

/* ===========================================================================
   APPLYING TO TEACH

   The old page was the Tutor shortcode on the default template: six inputs in
   one column under the site header, no heading, no reason to apply and no word
   about what happens after Send. The form is still Tutor's, untouched — what is
   added here is the page around it and the site's own fields and buttons.
   =========================================================================== */

.apply-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 108px);
  background: var(--navy-deep);
}

/* A real photograph from the institute's hall, not a gradient pretending to be
   one. It is decorative — the alt is empty and it is hidden from the tree — so
   the heading beside it carries the meaning on its own. */
.apply-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The audience in this frame sits centre-left, which is the strip the veil
     lets through. */
  object-position: 30% 35%;
}

/* Text on a photograph is readable only if something is put between them — but
   the first attempt stacked two washes that multiplied to 97% at the reading
   edge and erased the hall the photograph was chosen for.
   
   So the veil is one gradient, gathered where the words are and let go where
   they are not. Where the words are was measured, not assumed: the first set of
   stops was written for a text column reaching 94% of the frame, and the column
   actually reaches 75.9% — it is centred in the site's container, not pushed to
   the edge. The veil there had fallen to 0.53, which over a bright photograph
   would have left the eyebrow at 2.45:1.
   
   These stops hold 0.84 or heavier out to 80%, and fall away over the last
   fifth, which is the strip where the photograph is left to be a photograph.
   
   0.84 is not a guess either. Against the worst case a photograph can present —
   a pure white frame — it composites to rgb(41,53,68), and the lightest text on
   it is the eyebrow at #57dcee: 6.5:1. Every other line here is lighter still.
   Verified against a real frame further down. */
.apply-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to left,
    rgba(2, 16, 33, 0.90) 0%,
    rgba(2, 16, 33, 0.87) 60%,
    rgba(2, 16, 33, 0.84) 80%,
    rgba(2, 16, 33, 0.42) 92%,
    rgba(2, 16, 33, 0.20) 100%
  );
}

/* On a phone the text spans the whole width, so there is no far side to spare.
   The veil is flat at 0.80 — still light enough to read the hall through, and
   by the same arithmetic 6.8:1 for the eyebrow over a white frame. */
@media (max-width: 900px) {
  .apply-hero::after {
    background: linear-gradient(to top, rgba(2, 16, 33, 0.88) 0%, rgba(2, 16, 33, 0.80) 55%, rgba(2, 16, 33, 0.72) 100%);
  }
}

.apply-hero__inner { max-width: 720px; }

.apply-hero h1 {
  margin: 6px 0 14px;
  font-size: clamp(1.7rem, 4vw, 2.85rem);
  line-height: 1.25;
  color: #fff;
}

.apply-hero p {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  line-height: 1.9;
  color: rgba(233, 242, 250, 0.92);
}

/* The band sits on a dark photograph in both themes, so its text does not
   follow the palette — it is pinned. Left as tokens, `.accent` turned into the
   day palette's deep teal and measured 2.41 against the scrim, which is a
   heading nobody can read on a page inviting them to apply. */
.apply-hero .eyebrow { color: #57dcee; }

.apply-hero h1 .accent {
  color: #7fe3f5;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.apply-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 34px);
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.apply-hero__facts li { display: grid; gap: 2px; }

.apply-hero__facts strong {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.apply-hero__facts span {
  font-size: 0.82rem;
  color: rgba(233, 242, 250, 0.78);
}

/* ---- the two columns ----------------------------------------------------- */

.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}

/* One column below this: the form is the point of the page, so on a phone it
   comes first and the argument for applying follows it. */
@media (max-width: 900px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-form { order: -1; }
}

/* ---- why teach here ------------------------------------------------------ */

/* A grid child will not shrink below its content unless told to, and the
   points column holds long Arabic lines. */
.apply-why { min-width: 0; }

.apply-why__h {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
}

.apply-points {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.apply-points li {
  display: flex;
  gap: 14px;
  margin: 0;
}

.apply-points__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--chip-bg);
  color: var(--cyan-fg);
}

.apply-points__icon svg { width: 20px; height: 20px; }

.apply-points h3 {
  margin: 2px 0 4px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.apply-points p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-soft);
}

/* ---- the people already teaching here ------------------------------------ */

.apply-faces {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surf-a);
}

.apply-faces__row {
  display: flex;
  align-items: center;
  /* Overlapped, as a group photograph would be. The negative margin is undone
     on the first circle so the row still starts flush with the card. */
  margin-bottom: 12px;
}

.apply-faces__row img,
.apply-faces__more {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--bg-elev);
  margin-inline-start: -12px;
  object-fit: cover;
  object-position: center 20%;
  background: var(--surf-b);
}

.apply-faces__row > :first-child { margin-inline-start: 0; }

.apply-faces__more {
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surf-b);
}

.apply-faces__note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.apply-faces__note strong { color: var(--text); }

.apply-shot {
  margin: 22px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surf-a);
}

.apply-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.apply-shot figcaption {
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- the form card ------------------------------------------------------- */

.apply-form {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 22px);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}

.apply-form__head { margin-bottom: 20px; }

.apply-form__head h2 {
  margin: 0 0 5px;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.apply-form__head p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* The Tutor form that used to live in this card is gone: the instructor page
   now collects a request through the theme's own fields (.apply-field above),
   because applying to teach is a request to the institute and not a platform
   signup. Its .tutor-form-* rules went with it rather than being left behind to
   describe markup this page no longer renders. */


.apply-form button[type="submit"],
.apply-form input[type="submit"],
.apply-form .tutor-btn-primary {
  width: 100%;
  padding: 14px 24px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--r-sm, 10px);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.apply-form button[type="submit"]:hover,
.apply-form input[type="submit"]:hover,
.apply-form .tutor-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: var(--btn-fg);
}

/* ---- what happens after Send --------------------------------------------- */

.apply-next {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 18px 18px 18px;
  list-style: none;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: var(--surf-a);
  counter-reset: none;
}

.apply-next li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.apply-next li span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--cyan-fg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.76rem;
}

.apply-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.apply-help svg { width: 17px; height: 17px; flex: none; color: var(--ok-fg); }
.apply-help a { color: var(--cyan-fg); font-weight: 600; }

/* ---- the application form ------------------------------------------------
   The form that replaced Tutor's signup. Tutor's asked for a username and a
   password because it was creating an account; this one asks how to reach
   somebody, because it is a request addressed to the institute. The field
   styles below are its own — the .tutor-form-* rules above are kept for any
   other Tutor form that lands inside this card. */

/* The form element itself: a browser gives it a margin that would push the
   first row away from the heading above it. */
.apply-fields { margin: 0; }

.apply-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

@media (max-width: 560px) {
  .apply-row { grid-template-columns: 1fr; }
}

.apply-field { margin: 0 0 16px; }

.apply-field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.apply-field .req { color: var(--danger-fg); }

.apply-field input,
.apply-field select,
.apply-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  background: var(--surf-lo, var(--surf-a));
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.apply-field textarea { min-height: 120px; resize: vertical; line-height: 1.8; }

.apply-field input::placeholder,
.apply-field textarea::placeholder { color: var(--muted-dim, var(--muted)); }

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(48, 190, 240, 0.18);
}

/* A select on a dark ground draws its own arrow in the system colour, which on
   the night palette is a black glyph on a dark field. Drawn here instead. */
.apply-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 16px 16px;
}

.apply-submit {
  width: 100%;
  padding: 14px 24px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--r-sm, 10px);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.apply-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.apply-submit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.apply-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
}

.apply-privacy svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* ---- what the form says back --------------------------------------------- */

.apply-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  line-height: 1.75;
}

.apply-note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

.apply-note--ok {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.09);
  color: var(--ok-fg);
}

.apply-note--error {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger-fg);
}

/* ---- the line that tells the two flows apart ------------------------------
   A student looking for the course they paid for does not want this page, and
   until now the site offered them the same form. */

.apply-switch {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.apply-switch svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--cyan-fg); }
.apply-switch a { color: var(--cyan-fg); font-weight: 600; }

/* ---- the registration panel's own rows ------------------------------------

   Tutor marks these fields as half-width — .tutor-form-col-6, two to a row —
   and then never makes the row a row, so eight fields came down the panel one
   under the other. The same omission was fixed on the instructor page; this is
   the login panel's copy of it, scoped so neither reaches into the other.

   Below 520px the panel is the whole screen and two columns would leave each
   field too narrow to read its own placeholder, so they stack. */

.auth__panel .tutor-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

@media (max-width: 520px) {
  .auth__panel .tutor-form-row { grid-template-columns: 1fr; }
}

.auth__panel .tutor-form-col-6 { min-width: 0; }
.auth__panel .tutor-form-group { margin-block-end: 14px; }

/* Tutor's own paragraph spacing inside the form fights the group spacing and
   leaves an uneven ladder down the panel. */
.auth__panel .tutor-form-group p { margin: 0; }

/* Tutor's own toggle stays hidden — it is replaced, not merely switched off.
   
   Measured, not assumed: the span it renders is empty — no text, no ::before,
   no background image, and its icon font reports `unloaded` — and clicking it
   left the input's type at `password`. It was an invisible span lying across
   the field, swallowing clicks meant for the box. The working one the theme
   builds in its place is below. */
.auth__panel .tutor-password-field { position: relative; }
.auth__panel .tutor-password-field .show-hide-btn { display: none; }

/* The strength meter: three bars and a line of text, both of which Tutor
   leaves unstyled. */
.auth__panel .tutor-password-strength-hint {
  margin-block-start: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.auth__panel .tutor-password-strength-hint .indicator {
  display: flex;
  gap: 5px;
  margin-block-end: 6px;
}

.auth__panel .tutor-password-strength-hint .indicator > * {
  height: 4px;
  flex: 1 1 0;
  border-radius: 99px;
  background: var(--track, var(--line-2));
}

.auth__panel .tutor-password-strength-hint .indicator > .weak { background: var(--danger-fg); }
.auth__panel .tutor-password-strength-hint .indicator > .medium { background: #d9a441; }
.auth__panel .tutor-password-strength-hint .indicator > .strong { background: var(--ok-fg); }

/* Tutor's «required fields» line and its notices, given the panel's voice. */
.auth__panel .tutor-required-fields { color: var(--danger-fg); font-size: 0.82rem; }

.auth__panel .tutor-alert {
  margin-block-end: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surf-a);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* The registration form's own wrapper adds a border and padding on Tutor's
   pages, where it stands alone. Inside this panel it is a box in a box. */
.auth__panel #tutor-registration-wrap {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ---- showing the password ------------------------------------------------

   The toggle the theme builds in place of Tutor's dead one. The wrapper is the
   input's own box, so the button centres on it by geometry rather than by a
   measured constant — at any field height, in either direction.

   The eye is drawn with a mask rather than an icon font. Tutor's font reports
   `unloaded` on this install, which is why its own toggle rendered as nothing
   at all; a mask needs no font and takes its colour from the element. */

.olympic-pw {
  position: relative;
  display: block;
}

.olympic-pw > input { width: 100%; }

/* Room for the button, so it never sits on the last characters typed. */
.auth__panel .olympic-pw > input { padding-inline-end: 42px; }

.olympic-pw__toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Physical, not logical: a plugin setting `left` or `right` directly would
     otherwise sit beside a logical property and win on cascade order. Both
     sides are released and one is set per direction below. */
  left: auto;
  right: auto;
  display: block;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background-color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  -webkit-mask: var(--olympic-eye) center / 20px 20px no-repeat;
          mask: var(--olympic-eye) center / 20px 20px no-repeat;
  transition: background-color var(--t-fast) var(--ease);
}

.rtl .olympic-pw__toggle { left: 10px; }
html[dir="ltr"] .olympic-pw__toggle { right: 10px; }

.olympic-pw__toggle:hover { background-color: var(--cyan-fg); }

.olympic-pw__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Shown: the eye is struck through, so the icon says what pressing it will do
   next rather than what it did last. */
.olympic-pw__toggle.is-shown {
  background-color: var(--cyan-fg);
  -webkit-mask-image: var(--olympic-eye-off);
          mask-image: var(--olympic-eye-off);
}

:root {
  --olympic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --olympic-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.1 10.1 0 0 1 12 20c-7 0-10-8-10-8a18.5 18.5 0 0 1 5.1-5.9'/%3E%3Cpath d='M9.9 4.2A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.2 3.2'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}