/* DAD redesign — owner approved 2026-10-03.
   A layer loaded AFTER site.css. It only restyles: no markup it depends on
   carries data, and nothing here changes a form, a field, a handler or a
   rule. Remove the <link> in _Layout.cshtml and the app looks exactly as it
   did before.

   1. Type and brand tokens for the whole app.
   2. Scenes: the signed-in workspaces sit on a full-page photo under a dark
      veil, and every panel on them is frosted glass so the photo shows
      through. */

/* ---- 1. type and brand ------------------------------------------------- */
/* ⭐ Owner rule 2026-10-03: every colour comes from the DHAD logo — its navy
   ink and its rose gold — instead of the earlier blue and violet. Status
   colours (paid, overdue, cancelled) keep their meaning but are not brand
   colours. */
:root {
  --mv-primary: #2a3a6b;
  --mv-primary-strong: #16213f;
  --mv-primary-soft: #e8ecf6;
  --mv-accent: #4a5a8c;
  --mv-accent-soft: #eef1f8;
  --mv-focus: #4a5a8c;
  --bs-primary-rgb: 42, 58, 107;
  --mv-tone-dashboard: #2a3a6b;
  --mv-tone-students: #4a5a8c;
  --mv-tone-teachers: #3a4a7a;
  --mv-tone-packages: #2a3a6b;
  --mv-tone-payments: #4a5a8c;
  --mv-tone-promo: #3a4a7a;
  --mv-tone-schedules: #2a3a6b;
  --mv-tone-compensation: #4a5a8c;
  --mv-tone-reports: #3a4a7a;
  --mv-tone-certificates: #4a5a8c;
  --mv-tone-administration: #4a5576;
}

:root[data-theme="dark"] {
  --mv-primary: #c9d3ee;
  --mv-primary-strong: #e6ebf7;
  --mv-primary-soft: rgba(201, 211, 238, 0.12);
  --mv-accent: #e6ebf7;
  --mv-accent-soft: rgba(201, 211, 238, 0.12);
  --mv-focus: #c9d3ee;
  --mv-tone-dashboard: #e6ebf7;
  --mv-tone-students: #c9d3ee;
  --mv-tone-teachers: #b3bfdf;
  --mv-tone-packages: #e6ebf7;
  --mv-tone-payments: #c9d3ee;
  --mv-tone-promo: #b3bfdf;
  --mv-tone-schedules: #e6ebf7;
  --mv-tone-compensation: #c9d3ee;
  --mv-tone-reports: #b3bfdf;
  --mv-tone-certificates: #c9d3ee;
  --mv-tone-administration: #c9d0e3;
}

:root {
  --dad-ink: #0b1226;
  /* ⭐ 2026-10-03: the DHAD logo's own colours — navy ink and rose gold —
     replace the earlier sun yellow. The token keeps its name so every rule
     that uses it follows. Ink on this rose is 9:1. */
  /* Owner rule 2026-10-03: rose appears ONLY in the home page's emphasised
     headline (--dad-blend). The accent everywhere else is clean white on the
     photos and the logo's navy on panels and buttons. */
  --dad-sun: #ffffff;
  --dad-sun-strong: #e6eaf3;
  --dad-navy: #2a3a6b;
  --dad-navy-deep: #16213f;
  /* ⭐ Owner request 2026-10-03: the level that stands out (the top of the
     home staircase, "you are here" on the student's page) is gold. */
  --dad-gold: #e0b34a;
  --dad-gold-deep: #b8892a;
  --dad-rose-deep: #4a5a8c;
  /* ⭐ Owner choice 2026-10-04: the home headline's "Experience the
     Culture." is gold — the same gold as the top level and "you are here",
     so the one accent colour runs through the whole site (was rose). */
  --dad-blend: linear-gradient(100deg, #fff4d6 0%, #f0c75e 45%, #d9a53a 100%);
  --dad-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --bs-body-font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-6,
.app-brand-name,
.card-title,
.app-stat-value {
  font-family: var(--dad-display);
  letter-spacing: -0.005em;
}

.btn {
  border-radius: 0.8rem;
}

/* ⭐ Owner request 2026-10-20 (O16): the visitor count under the hero buttons -
   a large sun-coloured number and a short line, on a soft glass pill. */
.dad-visitors {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-block-start: 1.25rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(10, 18, 36, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}

.dad-visitors-number {
  font-family: var(--dad-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--dad-gold);
  font-variant-numeric: tabular-nums;
}

.dad-visitors-label {
  font-size: 1.05rem;
  font-weight: 600;
  opacity: 0.95;
}

/* The one action a screen is asking for. Dark ink on the sun, never white:
   white on the rose is too faint; ink on it is 9:1. */
.btn-sun {
  border-color: var(--dad-sun);
  background: var(--dad-sun);
  color: var(--dad-ink);
  box-shadow: 0 8px 20px -10px rgba(42, 58, 107, 0.6);
}

.btn-sun:hover,
.btn-sun:focus-visible {
  border-color: var(--dad-sun-strong);
  background: var(--dad-sun-strong);
  color: var(--dad-ink);
}

/* ---- 2. scenes ---------------------------------------------------------- */
/* Which photo is decided in _Layout.cshtml (data-scene on <body>); the files
   live in wwwroot/images/scenes. Paths are relative to this stylesheet, so a
   PathBase in front of the app changes nothing. */
body[data-scene="admin"] { --dad-scene: url("../images/scenes/petra-treasury.webp"); }
/* ⭐ Owner request 2026-10-03: the student's and the guardian's pages show
   the pictures of children learning at a computer, under a black veil; the
   teacher's pages have no photo at all (no scene). */
body[data-scene="guardian"] { --dad-scene: url("../images/scenes/students-4.webp"); --dad-veil: rgba(0, 0, 0, 0.66); }
body[data-scene="student"] { --dad-scene: url("../images/scenes/students-1.webp"); --dad-veil: rgba(0, 0, 0, 0.66); }
body[data-scene="family"] { --dad-scene: url("../images/scenes/students-1.webp"); --dad-veil: rgba(0, 0, 0, 0.66); }
body[data-scene="packages"] { --dad-scene: url("../images/scenes/jerash.webp"); }

body[data-scene] {
  background: var(--dad-ink);
}

/* A fixed layer rather than background-attachment: fixed, which phones
   ignore. It never scrolls, so the photo stays put while the work moves. */
body[data-scene]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--dad-veil, rgba(8, 14, 32, 0.62)), var(--dad-veil, rgba(8, 14, 32, 0.62))),
    var(--dad-scene) center / cover no-repeat;
  animation: dad-scene-in 900ms ease both;
}

@keyframes dad-scene-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}

/* The page itself always reads as "on a dark photo", in light mode too:
   anything not inside a panel (titles, section headings, their one-line
   explanations, tabs) takes light text. Every panel is glass — its
   background comes from --mv-surface, so making that translucent turns
   cards, tables, stats and fields into glass at once — and in light mode a
   panel puts the light-mode text colours back, so what is inside it reads
   exactly as it always did. */
body[data-scene] .app-main {
  --mv-text: #eef2fa;
  --mv-muted: #c9d2e8;
  --mv-primary: #e6ebf7;
  --mv-primary-strong: #ffffff;
  --mv-accent: #e6ebf7;
  --bs-body-color: #eef2fa;
  --bs-body-color-rgb: 238, 242, 250;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: inherit;
  --mv-surface: rgba(255, 255, 255, 0.78);
  --mv-surface-muted: rgba(243, 246, 252, 0.6);
  --mv-primary-soft: rgba(232, 236, 246, 0.8);
  /* Bootstrap paints cards, accordions, modals, list groups and the active
     tab from --bs-body-bg, re-declared on each of those elements — so the
     glass has to be IN that token, not only in a card-specific one. */
  --bs-body-bg: var(--mv-surface);
  --bs-body-bg-rgb: 255, 255, 255;
  color: var(--mv-text);
}

:root[data-theme="dark"] body[data-scene] .app-main {
  --mv-surface: rgba(16, 24, 42, 0.72);
  --mv-surface-muted: rgba(26, 37, 60, 0.7);
  --mv-primary-soft: rgba(24, 38, 68, 0.75);
  --mv-primary: #c9d3ee;
}

body[data-scene] .app-main :is(
  .card, .table-responsive, .alert, .app-stat, .app-profile-hero, .app-empty,
  .app-kpi, .app-dash-panel, .app-guide, .app-summary, .status-panel,
  .app-tabs > .tab-content, .app-register, .app-callout, .app-package,
  .app-student-card, .app-poster, .app-step-panel, .app-chart, .app-outcome,
  .app-quick-action, .app-feed-item, .modal-content, .dropdown-menu,
  .list-group, .app-combo-panel, .app-steps > li, .app-next-list > li,
  .app-multiselect-panel, .app-row-details-body, .app-timeline > li,
  .app-draft, .register-option, .app-owed-breakdown, .app-slot-list li,
  .mv-course, .mv-plan, .app-reverse-code, .app-cards-sm tr, .popover,
  .accordion-item
) {
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

:root:not([data-theme="dark"]) body[data-scene] .app-main :is(
  .card, .table-responsive, .alert, .app-stat, .app-profile-hero, .app-empty,
  .app-kpi, .app-dash-panel, .app-guide, .app-summary, .status-panel,
  .app-tabs > .tab-content, .app-register, .app-callout, .app-package,
  .app-student-card, .app-poster, .app-step-panel, .app-chart, .app-outcome,
  .app-quick-action, .app-feed-item, .modal-content, .dropdown-menu,
  .list-group, .app-combo-panel, .app-steps > li, .app-next-list > li,
  .app-multiselect-panel, .app-row-details-body, .app-timeline > li,
  .app-draft, .register-option, .app-owed-breakdown, .app-slot-list li,
  .mv-course, .mv-plan, .app-reverse-code, .app-cards-sm tr, .popover,
  .accordion-item, .nav-tabs .nav-link.active, .input-group-text,
  .mv-country-note, .mv-btn.is-secondary, .dad-wizard-dots button, .dad-wizard-nav,
  .app-chip, .app-state-chip, .app-multiselect-toggle, .btn-outline-secondary,
  .form-control, .form-select, .app-ref, .app-tab-count
) {
  --mv-text: #0f172a;
  --mv-muted: #556070;
  --mv-primary: #2a3a6b;
  --mv-primary-strong: #16213f;
  --mv-accent: #4a5a8c;
  --bs-body-color: #0f172a;
  --bs-body-color-rgb: 15, 23, 42;
  --bs-emphasis-color: #000;
  color: var(--mv-text);
  border-color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] body[data-scene] .app-main :is(
  .card, .table-responsive, .alert, .app-stat, .app-profile-hero, .app-empty,
  .app-kpi, .app-dash-panel, .app-guide, .app-summary, .status-panel,
  .app-tabs > .tab-content, .app-register, .app-callout, .app-package,
  .app-student-card, .app-poster, .app-step-panel, .app-chart, .app-outcome
) {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Solid buttons keep the real brand blue wherever they sit: the light link
   blue above is for text on the photo, never for a filled button. */
body[data-scene] .app-main :is(.btn-primary, .btn-success, .btn-danger, .badge, .mv-btn.is-primary) {
  --mv-primary: #2a3a6b;
  --mv-primary-strong: #16213f;
}

/* Fields stay nearly solid: typing on a photo is not where glass belongs. */
body[data-scene] .app-main :is(.form-control, .form-select) {
  background-color: rgba(255, 255, 255, 0.95);
}

:root[data-theme="dark"] body[data-scene] .app-main :is(.form-control, .form-select) {
  background-color: rgba(14, 21, 38, 0.94);
}

body[data-scene] .app-main > :is(h1, h2, h3, .h1, .h2, .h3, .h4),
body[data-scene] .app-page-head h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* The open tab is a glass tab: dark words on it in light mode. */
:root:not([data-theme="dark"]) body[data-scene] .app-main .nav-tabs .nav-link.active {
  color: var(--dad-ink);
}

/* Tabs that sit on the photo. */
body[data-scene] .app-main > .nav-tabs {
  --bs-nav-tabs-border-color: rgba(255, 255, 255, 0.25);
  --bs-nav-tabs-link-active-bg: rgba(255, 255, 255, 0.9);
  --bs-nav-tabs-link-active-color: var(--dad-ink);
  --bs-nav-tabs-link-active-border-color: transparent;
}

body[data-scene] .app-main > .nav-tabs .nav-link:not(.active) {
  color: #e6ebf7;
}

/* The bar and the side menu are glass too, darker, so the photo runs
   behind them edge to edge. The tokens are swapped locally so every control
   inside them (language switch, theme toggle, sign-out) follows. */
body[data-scene] :is(.app-topbar, .app-sidebar) {
  --mv-text: #f3f6fc;
  --mv-muted: #c9d2e8;
  --mv-primary: #c9d3ee;
  --mv-primary-strong: #ffffff;
  --mv-primary-soft: rgba(255, 255, 255, 0.1);
  --mv-surface: rgba(255, 255, 255, 0.08);
  --mv-surface-muted: rgba(255, 255, 255, 0.06);
  --mv-border: rgba(255, 255, 255, 0.16);
  --mv-tone-dashboard: #e6ebf7;
  --mv-tone-students: #c9d3ee;
  --mv-tone-teachers: #b3bfdf;
  --mv-tone-packages: #e6ebf7;
  --mv-tone-payments: #c9d3ee;
  --mv-tone-promo: #b3bfdf;
  --mv-tone-schedules: #e6ebf7;
  --mv-tone-compensation: #c9d3ee;
  --mv-tone-reports: #b3bfdf;
  --mv-tone-certificates: #c9d3ee;
  --mv-tone-administration: #dfe3ee;
  color: var(--mv-text);
}

body[data-scene] .app-topbar,
:root[data-theme="dark"] body[data-scene] .app-topbar {
  background: rgba(11, 18, 38, 0.32);
  border-block-end-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
}

body[data-scene] .app-sidebar {
  background: rgba(11, 18, 38, 0.22);
  border-inline-end-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

body[data-scene] .app-nav-link.active,
body[data-scene] .app-nav-link.active:hover {
  border-inline-start-color: transparent;
  background: var(--dad-sun);
  color: var(--dad-ink);
}

body[data-scene] .app-nav-link.active .app-nav-icon {
  color: var(--dad-ink);
}

/* The one sign-in button in a dark bar is the sun, with ink words. */
:is(body[data-scene], body:has(.auth-hero.has-photo)) .app-topbar .btn-primary {
  border-color: var(--dad-sun);
  background: var(--dad-sun);
  color: var(--dad-ink);
  box-shadow: none;
}

body[data-scene] .app-language-switch button.active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dad-ink);
}

@media (prefers-reduced-motion: reduce) {
  body[data-scene]::before { animation: none; }
}

/* ---- 3. the public home page: one river of photos ----------------------- */
/* ⭐ Owner decision 2026-10-03. Each chapter is a full-screen photo that
   melts into the one above it over a long feathered edge (mask-image), so
   the page reads as one continuous picture with no seams. The photos are
   fixed while the words scroll over them; on phones (which ignore fixed
   backgrounds) they simply scroll. */
body:has(.dad-river) {
  background: var(--dad-ink);
}

body:has(.dad-river) .app-topbar {
  --mv-text: #f3f6fc;
  --mv-muted: #c9d2e8;
  --mv-primary: #c9d3ee;
  --mv-primary-strong: #ffffff;
  --mv-primary-soft: rgba(255, 255, 255, 0.1);
  --mv-surface: rgba(255, 255, 255, 0.08);
  --mv-surface-muted: rgba(255, 255, 255, 0.06);
  --mv-border: rgba(255, 255, 255, 0.2);
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  border: 0;
  background: linear-gradient(rgba(11, 18, 38, 0.6), rgba(11, 18, 38, 0));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--mv-text);
}

:root[data-theme="dark"] body:has(.dad-river) .app-topbar {
  background: linear-gradient(rgba(11, 18, 38, 0.6), rgba(11, 18, 38, 0));
}

body:has(.dad-river) .app-language-switch button.active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dad-ink);
}

body:has(.dad-river) .app-topbar .btn-primary {
  border-color: var(--dad-sun);
  background: var(--dad-sun);
  color: var(--dad-ink);
  box-shadow: none;
}

.dad-river {
  margin-block-start: calc(-1 * var(--public-pad));
  margin-inline: calc(-1 * var(--public-pad));
  color: #fff;
}

.dad-ch {
  --dad-melt: 18rem;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--dad-ink);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.dad-ch + .dad-ch {
  margin-block-start: calc(-1 * var(--dad-melt));
  padding-block-start: var(--dad-melt);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dad-melt));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dad-melt));
}

.dad-c1 {
  background-image: radial-gradient(120% 90% at 50% 40%, rgba(11, 18, 38, 0.32), rgba(11, 18, 38, 0.82)), var(--dad-photo, url("../images/scenes/petra-treasury.webp"));
  background-position: center;
  animation: dad-fade 1.4s ease both;
}

.dad-c2 { background-image: radial-gradient(120% 90% at 50% 50%, rgba(11, 18, 38, 0.45), rgba(11, 18, 38, 0.84)), var(--dad-photo, url("../images/scenes/wadi-rum.webp")); }
.dad-c3 { background-image: radial-gradient(120% 90% at 50% 50%, rgba(11, 18, 38, 0.6), rgba(11, 18, 38, 0.9)), var(--dad-photo, url("../images/scenes/amman-citadel.webp")); }
.dad-c4 { background-image: radial-gradient(120% 90% at 50% 50%, rgba(11, 18, 38, 0.5), rgba(11, 18, 38, 0.86)), var(--dad-photo, url("../images/scenes/jerash.webp")); }
.dad-c5 { background-image: radial-gradient(120% 90% at 50% 50%, rgba(11, 18, 38, 0.38), rgba(11, 18, 38, 0.82)), var(--dad-photo, url("../images/scenes/dead-sea.webp")); }

/* The last chapter also melts away at the bottom, into the page's ink. */
.dad-ch.dad-c5 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dad-melt), #000 calc(100% - var(--dad-melt)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dad-melt), #000 calc(100% - var(--dad-melt)), transparent 100%);
}

.dad-wrap {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 8rem clamp(1rem, 3vw, 1.5rem);
}

.dad-hero {
  padding-block-start: 10rem;
}

.dad-river h1,
.dad-river h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.dad-river h1 {
  font-size: clamp(2.75rem, 7vw, 6rem);
}

.dad-river h1 .home-hero-line {
  display: block;
}

.dad-river h2 {
  font-size: clamp(2.1rem, 4.5vw, 4rem);
}

.dad-sun-text {
  color: var(--dad-sun);
  background: var(--dad-blend);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dad-kicker {
  margin: 0 0 1rem;
  color: var(--dad-sun);
  font-weight: 600;
}

.dad-lead {
  max-width: 36rem;
  margin: 0;
  color: #e6ebf7;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.75;
}

.dad-river .btn {
  min-height: 3.6rem;
  padding-inline: 2rem;
  border-radius: 999px;
}

.dad-btn-line {
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
}

.dad-btn-line:hover,
.dad-btn-line:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--dad-ink);
}

.dad-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dad-center .dad-lead {
  margin-block-end: 2rem;
}

.dad-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3rem 4rem;
}

.dad-split > :first-child {
  flex: 1 1 20rem;
}

.dad-split > :last-child {
  flex: 2 1 30rem;
  min-width: 0;
}

/* Courses: a list in large type, like a model range, not a grid of cards. */
.dad-rows {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.22);
  list-style: none;
}

.dad-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-block-end: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  transition: padding 250ms ease;
}

.dad-row.is-more .dad-row-name {
  color: var(--dad-sun);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.dad-row:hover,
.dad-row:focus-visible {
  padding-inline-start: 0.75rem;
  color: #fff;
}

.dad-row-name {
  flex: 1;
  font-family: var(--dad-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
}

.dad-row-go {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

.dad-row-go svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .dad-row-go svg {
  transform: scaleX(-1);
}

.dad-row:hover .dad-row-go,
.dad-row:focus-visible .dad-row-go {
  border-color: var(--dad-sun);
  background: var(--dad-sun);
  color: var(--dad-ink);
}

/* ⭐ Owner request 2026-10-21: the two languages, as the institute's own
   poster shows them - light cards with a teacher's photo, the British flag
   or the letter ض, the programs as icon tiles and one rose-gold button, over
   the opening photo (Big Ben on the left, Petra on the right). English stays
   on the Big Ben side and Arabic on the Petra side in both directions. The
   cards keep their poster colours in dark mode too: they are the advert. */
.dad-c-tracks {
  --tr-cream: #fdf8f3;
  --tr-ink: #16213f;
  --tr-muted: #545e75;
  --tr-line: #eee2d8;
  --tr-rose: #a9505e;
  --tr-rose-blend: linear-gradient(100deg, #9c4656 0%, #c46f72 55%, #dc9a86 100%);
  --tr-tile: #f6ece4;
  background-image: radial-gradient(120% 90% at 50% 45%, rgba(11, 18, 38, 0.5), rgba(11, 18, 38, 0.88)), var(--dad-photo, url("../images/scenes/petra-treasury.webp"));
}

/* The next chapter melts in over this one's last --dad-melt; the cards end
   above that, so nothing of them is washed out. */
.dad-c-tracks > .dad-wrap { padding-block-start: 2rem; }

/* ⭐ 2026-10-21: the same for every chapter that another follows, on a
   phone - the level steps were being washed out by the next photo. On a
   wide screen the content sits mid-chapter and is already clear of it. */
.dad-c-tracks > .dad-wrap { padding-block-end: calc(var(--dad-melt) + 2rem); }

@media (max-width: 767.98px) {
  .dad-ch:has(+ .dad-ch) > .dad-wrap { padding-block-end: calc(var(--dad-melt) + 2rem); }
}

.dad-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 1.75rem;
  max-width: 68rem;
  margin: 3rem auto 0;
}

[dir="rtl"] .dad-track.is-english { order: 2; }

.dad-track {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--tr-cream);
  color: var(--tr-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* The card's head: a rose-to-navy band with the teacher's portrait in a
   ring. The portrait is shown well under its real size, so it stays sharp. */
.dad-track-head {
  position: relative;
  height: 6.5rem;
  background: linear-gradient(120deg, var(--tr-ink) 0%, #2a3a6b 55%, #9c4656 100%);
}

.dad-track.is-arabic .dad-track-head {
  background: linear-gradient(240deg, var(--tr-ink) 0%, #2a3a6b 55%, #9c4656 100%);
}

.dad-track-face {
  position: absolute;
  inset-inline-start: clamp(1.25rem, 3vw, 2rem);
  bottom: -3.25rem;
  width: 8.5rem;
  height: 8.5rem;
  border: 5px solid var(--tr-cream);
  border-radius: 50%;
  background: var(--tr-cream);
  box-shadow: 0 12px 28px rgba(22, 33, 63, 0.3);
}

.dad-track-face img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.dad-track-badge {
  position: absolute;
  inset-inline-end: -0.4rem;
  bottom: 0.1rem;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  overflow: hidden;
  border: 3px solid var(--tr-cream);
  border-radius: 50%;
  background: var(--tr-rose-blend);
  box-shadow: 0 6px 14px rgba(22, 33, 63, 0.25);
}

.dad-track-badge > svg {
  width: 100%;
  height: 100%;
}

.dad-track-letter {
  color: #fff;
  font-family: var(--dad-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

.dad-track-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 4.25rem clamp(1.25rem, 3vw, 2rem) 2rem;
}

.dad-river .dad-track h3 {
  margin: 0;
  color: var(--tr-ink);
  text-shadow: none;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 700;
}

.dad-track-for {
  margin: 0.4rem 0 1.4rem;
  color: var(--tr-rose);
  font-weight: 600;
}

.dad-track-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.dad-track-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
  border-radius: 0.9rem;
  background: var(--tr-tile);
  color: var(--tr-ink);
  font-weight: 600;
  line-height: 1.35;
}

.dad-track-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--tr-ink);
  color: #f3d7c9;
}

.dad-track-icon svg,
.dad-track-teachers svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dad-track-teachers {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin: 0 0 1.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--tr-ink);
  color: #fff;
  font-weight: 600;
}

.dad-river .btn.dad-track-go {
  align-self: stretch;
  min-height: 3.25rem;
  margin-block-start: auto;
  border: 0;
  background: var(--tr-rose-blend);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 0 #7d3542;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.dad-river .btn.dad-track-go:hover,
.dad-river .btn.dad-track-go:focus-visible {
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 4px 0 #7d3542;
}

@media (max-width: 575.98px) {
  .dad-track-list { grid-template-columns: 1fr; }
}

/* The poster: never wider than its own 1312 px, so it is never blurred. */
.dad-poster figcaption {
  display: none;
  margin-block-start: 0.75rem;
  color: #e6ebf7;
  font-size: 0.95rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .dad-poster figcaption { display: block; }
}

.dad-poster {
  max-width: min(100%, 1100px);
  margin: 2.5rem auto 0;
}

.dad-poster a {
  display: block;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.dad-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.dad-poster a:focus-visible {
  outline: 3px solid var(--dad-gold);
  outline-offset: 4px;
}

/* The courses list starts level with its heading, not below it. */
.dad-c2 .dad-split { align-items: flex-start; }

/* The four steps, joined by a line that draws itself as you arrive. */
.dad-steps {
  position: relative;
  margin-block-start: 3.5rem;
}

.dad-steps ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dad-steps li {
  text-align: center;
}

.dad-steps strong {
  display: block;
  margin-block-end: 0.4rem;
  font-family: var(--dad-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.dad-steps p {
  margin: 0;
  color: #e6ebf7;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  line-height: 1.7;
}

.dad-step-no {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--dad-sun);
  color: var(--dad-ink);
  font-family: var(--dad-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.dad-steps-line {
  position: absolute;
  inset-block-start: 1.75rem;
  inset-inline: 12.5%;
  height: 2px;
  background: var(--dad-sun);
  transform-origin: right;
}

[dir="ltr"] .dad-steps-line {
  transform-origin: left;
}

/* The levels as a staircase, built from the admin's own levels. */
.dad-levels {
  display: grid;
  grid-template-columns: repeat(var(--dad-level-count), minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
  height: 22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dad-level {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100% * var(--dad-level-step) / var(--dad-level-count));
  min-height: 4.5rem;
  padding: 0.9rem;
  border-block-start: 3px solid var(--dad-sun);
  background: rgba(255, 255, 255, 0.16);
  transform-origin: bottom;
}

.dad-level b {
  font-family: var(--dad-display);
  font-size: 1.9rem;
  line-height: 1.1;
}

.dad-level span {
  color: #dce3f2;
  font-size: 0.85rem;
}

.dad-level.is-top {
  border-block-start-color: var(--dad-gold);
  background: linear-gradient(180deg, var(--dad-gold), var(--dad-gold-deep));
  color: var(--dad-ink);
}

.dad-level.is-top span {
  color: var(--dad-ink);
}

.dad-badge {
  display: inline-block;
  margin-block-end: 1.25rem;
  padding: 0.35rem 1.1rem;
  border: 1.5px solid var(--dad-sun);
  border-radius: 999px;
  color: var(--dad-sun);
  font-weight: 600;
}

.dad-river h2.dad-offer-title {
  max-width: 56rem;
  font-size: clamp(2.4rem, 6vw, 5rem);
}

.dad-scroll {
  position: absolute;
  inset-block-end: 7rem;
  inset-inline-start: 50%;
  width: 2px;
  height: 4rem;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  animation: dad-drift 2.2s ease-in-out infinite;
}

/* The About section sits on the same ink, its cards as dark glass. */
.home-about.dad-about {
  --mv-text: #eef2fa;
  --mv-muted: #c9d2e8;
  --mv-primary: #e6ebf7;
  --mv-primary-strong: #ffffff;
  --mv-primary-soft: rgba(255, 255, 255, 0.08);
  --mv-surface: rgba(255, 255, 255, 0.06);
  --mv-surface-muted: rgba(255, 255, 255, 0.04);
  --mv-border: rgba(255, 255, 255, 0.12);
  color: var(--mv-text);
}

.home-about.dad-about .home-about-closing {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Motion: the photo first, then the words, one after another. */
@keyframes dad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dad-rise-short { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dad-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes dad-grow { from { transform: scaleY(0.08); } to { transform: none; } }
@keyframes dad-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dad-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.dad-in-1 { animation: dad-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.dad-in-2 { animation: dad-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both; }
.dad-in-3 { animation: dad-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both; }
.dad-in-4 { animation: dad-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both; }

/* As the page scrolls, each chapter's words wait for its photo. Browsers
   without scroll timelines simply show everything. */
@supports (animation-timeline: view()) {
  .dad-level {
    animation: dad-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }

  .dad-steps-line {
    animation: dad-draw linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 45%;
  }
}

@media (max-width: 767.98px) {
  .dad-ch {
    --dad-melt: 10rem;
    background-attachment: scroll;
  }

  .dad-steps-line {
    display: none;
  }

  .dad-levels {
    height: 16rem;
    gap: 0.4rem;
  }

  .dad-level {
    padding: 0.5rem;
  }

  .dad-level b {
    font-size: 1.2rem;
  }

  .dad-level span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* ⭐ Owner decision 2026-10-03: "reduce motion" (Windows turns it on
     whenever its animation effects are off) still sees the words rise, only
     a shorter way; nothing large, endless or zooming plays. */
  .dad-in-1, .dad-in-2, .dad-in-3, .dad-in-4 {
    animation-name: dad-rise-short;
  }

  .dad-level, .dad-steps-line, .dad-scroll {
    animation: none;
  }

  .dad-ch {
    background-attachment: scroll;
  }
}

/* ---- 4. family pages: children and packages ----------------------------- */
/* ⭐ Owner feedback 2026-10-03: the children's cards and the package cards
   read as scattered boxes. A child card: who, then three tidy fact tiles.
   A package card: a price card — the level and the kind on top, the price
   large, the facts as aligned rows, the button at the foot. Same markup ids
   and the same values; only the shape changes. */
.dad-kid .card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dad-kid-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dad-kid-avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--dad-sun);
  color: var(--dad-ink);
  font-family: var(--dad-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.dad-kid-who {
  min-width: 0;
}

.dad-kid-who .card-title {
  margin: 0 0 0.15rem;
}

.dad-kid-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--mv-muted);
  font-size: 0.85rem;
}

/* ⭐ 2026-10-23 (owner): a long status ("waiting for a level") ran over the
   tile beside it. The tiles sit two to a row only while the status fits on
   one line; otherwise each takes its own row. */
.dad-kid-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.dad-fact {
  flex: 1 1 8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mv-border);
  border-radius: 0.9rem;
  background: var(--mv-surface-muted);
}

.dad-fact.is-wide {
  flex-basis: 100%;
}

.dad-fact dt {
  margin-block-end: 0.35rem;
  color: var(--mv-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.dad-fact dd {
  margin: 0;
}

.dad-fact-value {
  font-family: var(--dad-display);
  font-size: 1.5rem;
  line-height: 1;
}

.dad-kid-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.2rem;
}

.dad-kid .card-body > p {
  margin: 0 !important;
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  background: var(--mv-primary-soft);
  font-size: 0.85rem;
}

/* The price card. Offer posters (with their own image) keep their look. */
.app-poster:not(.app-poster-offer) {
  border-radius: 1.4rem;
}

.app-poster:not(.app-poster-offer) .app-poster-face {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  padding: 1.15rem 1.25rem 0;
  background: none;
  color: var(--mv-text);
  filter: none;
}

.app-poster:not(.app-poster-offer) .app-poster-level {
  padding: 0.25rem 0.85rem;
  border-radius: 0.65rem;
  background: var(--dad-sun);
  color: var(--dad-ink);
  font-family: var(--dad-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
}

.app-poster:not(.app-poster-offer) .app-poster-kind {
  color: var(--mv-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

.app-poster:not(.app-poster-offer) .app-poster-body {
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1.25rem;
}

.app-poster:not(.app-poster-offer) .app-poster-body :is(h3, h4) {
  color: var(--mv-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.app-poster:not(.app-poster-offer) .app-poster-price > strong {
  color: var(--mv-text);
  font-family: var(--dad-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
}

.app-poster:not(.app-poster-offer) .app-poster-facts {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-block-end: 0;
}

.app-poster:not(.app-poster-offer) .app-poster-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--mv-border);
}

.app-poster:not(.app-poster-offer) .app-poster-facts dt {
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}

.app-poster:not(.app-poster-offer) .app-poster-body > :is(form, .btn) {
  margin-block-start: auto;
}

.app-poster:not(.app-poster-offer).is-selected {
  border: 2px solid var(--dad-sun);
  box-shadow: 0 20px 40px -24px rgba(42, 58, 107, 0.6);
}

.app-poster.is-unavailable:not(.app-poster-offer) {
  opacity: 0.88;
}

.app-poster.is-unavailable:not(.app-poster-offer) .app-poster-level {
  background: var(--mv-surface-muted);
  color: var(--mv-text);
}

/* One course, one band: its name as a real heading over its cards. */
[data-all-packages] > section {
  margin-block: 2rem 0.5rem;
}

[data-all-packages] > section > h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem !important;
  font-family: var(--dad-display);
  font-size: 1.35rem;
  font-weight: 600;
}

[data-all-packages] > section > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mv-border);
}

body[data-scene] [data-all-packages] > section > h3::after {
  background: rgba(255, 255, 255, 0.25);
}

/* ---- 5. sign-in and registration ---------------------------------------- */
/* ⭐ Owner decision 2026-10-03: the Petra photo on the reading-start side,
   melting into the ink toward the form, so there is no line between them.
   The form itself is untouched. */
body:has(.auth-hero.has-photo) {
  background: var(--dad-ink);
}

body:has(.auth-hero.has-photo) .app-topbar {
  --mv-text: #f3f6fc;
  --mv-muted: #c9d2e8;
  --mv-primary: #c9d3ee;
  --mv-primary-strong: #ffffff;
  --mv-primary-soft: rgba(255, 255, 255, 0.1);
  --mv-surface: rgba(255, 255, 255, 0.08);
  --mv-surface-muted: rgba(255, 255, 255, 0.06);
  --mv-border: rgba(255, 255, 255, 0.16);
  border-block-end-color: rgba(255, 255, 255, 0.08);
  background: rgba(11, 18, 38, 0.9);
  box-shadow: none;
  color: var(--mv-text);
}

body:has(.auth-hero.has-photo) .app-language-switch button.active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dad-ink);
}

.auth-hero.has-photo {
  background: var(--dad-ink);
}

.auth-hero.has-photo .auth-hero-backdrop {
  display: none;
}

.auth-hero.has-photo .auth-hero-photo,
.auth-hero.has-photo .auth-hero-scrim {
  inset: 0 auto 0 auto;
  inset-inline-start: 0;
  inline-size: 60%;
  block-size: 100%;
}

.auth-hero.has-photo .auth-hero-photo {
  object-fit: cover;
  object-position: center 62%;
  animation: dad-fade 1.2s ease both;
}

.auth-hero.has-photo .auth-hero-scrim {
  background: linear-gradient(180deg, rgba(11, 18, 38, 0.72), rgba(11, 18, 38, 0.25) 55%, rgba(11, 18, 38, 0.45));
  box-shadow: none;
}

[dir="rtl"] .auth-hero.has-photo :is(.auth-hero-photo, .auth-hero-scrim) {
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
  mask-image: linear-gradient(to left, #000 55%, transparent);
}

[dir="ltr"] .auth-hero.has-photo :is(.auth-hero-photo, .auth-hero-scrim) {
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
  mask-image: linear-gradient(to right, #000 55%, transparent);
}

.auth-hero.has-photo .auth-hero-copy {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.auth-hero.has-photo .auth-card {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1.5rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

@media (max-width: 991.98px) {
  .auth-hero.has-photo :is(.auth-hero-photo, .auth-hero-scrim) {
    inline-size: 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 85%) !important;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 85%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-hero.has-photo .auth-hero-photo { animation: none; }
}

/* ---- 6. packages as a carousel ------------------------------------------ */
/* ⭐ Owner request 2026-10-03: packages are not stacked boxes but a row the
   visitor moves through — swipe, drag or the arrows (js/dad.js adds the
   class and the arrows). The card in the middle stands upright; the ones
   either side turn away and shrink a little, like a cover flow. Without
   JavaScript the original grid stays exactly as it was. */
.dad-carousel-wrap {
  position: relative;
  margin-block-end: 1.5rem;
}

.dad-carousel.mv-plan-grid,
.dad-carousel.app-poster-rail {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 1.75rem max(1rem, calc(50% - 10.5rem));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.dad-carousel::-webkit-scrollbar {
  display: none;
}

.dad-carousel.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.dad-carousel > * {
  flex: 0 0 min(21rem, 82vw);
  scroll-snap-align: center;
}

.dad-carousel > .mv-plan {
  grid-template-columns: 1fr;
}

/* The wheel itself — size, turn and fade by distance from the middle — is
   set card by card from js/dad.js as the row moves. */
.dad-carousel > * {
  position: relative;
  transform-origin: center;
  will-change: transform, opacity;
}

.dad-carousel > :not(.is-centre) {
  cursor: pointer;
}

.dad-carousel-btn {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block-start: -1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--dad-ink);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.dad-carousel-btn:hover {
  background: var(--dad-sun);
  transform: scale(1.06);
}

.dad-carousel-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dad-carousel-btn.is-prev {
  inset-inline-start: 0.25rem;
}

.dad-carousel-btn.is-next {
  inset-inline-end: 0.25rem;
}

/* The chevron points the way the button moves: toward the reading end for
   "next", back toward the start for "previous", in either language. */
[dir="ltr"] .dad-carousel-btn.is-prev svg,
[dir="rtl"] .dad-carousel-btn.is-next svg {
  transform: scaleX(-1);
}

:root[data-theme="dark"] .dad-carousel-btn {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(16, 24, 42, 0.92);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .dad-carousel > * {
    animation: none;
  }
}

/* ---- 7. home page: clicks and motion everywhere ------------------------- */
/* Each chapter overlaps the one above it by its feathered edge; that
   invisible overlap must never swallow a click meant for the chapter
   underneath. Only the content takes the pointer. */
.dad-ch {
  pointer-events: none;
}

.dad-ch :is(.dad-wrap, a, button, .dad-scroll) {
  pointer-events: auto;
}

/* ⭐ Owner request 2026-10-03: as the visitor scrolls, each block of words
   rises gently from a little lower into place, on its own clock (not tied
   to the scroll position), one after another. js/dad.js marks each block as
   it comes into view; without the script everything simply shows. */
.dad-io .dad-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 1s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--dad-delay, 0ms);
}

.dad-io .dad-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dad-io .dad-reveal:not(.is-in) {
    transform: translateY(18px);
  }
}

/* ---- 8. the student's own page ------------------------------------------ */
/* ⭐ Owner request 2026-10-03 ("like the design: good evening, Heba"): the
   next lesson as one bold panel, the package as a ring, and the level
   ladder with "you are here". */
.dad-student-head h1 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
}

.dad-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin-block: 1.25rem 1.5rem;
}

.dad-next {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.75rem;
  border-radius: 1.6rem;
  background: rgba(26, 36, 72, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
}

.dad-next-tag {
  flex-basis: 100%;
  align-self: flex-start;
  width: max-content;
  max-width: max-content;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--dad-sun);
  color: var(--dad-ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.dad-next-title {
  flex: 1 1 16rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.dad-next-when {
  flex: 1 1 14rem;
  margin: 0;
  color: #dce6ff;
  font-size: 1.05rem;
}

.dad-next-wait {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
}

.dad-ring-card .card-body,
.dad-journey .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.dad-ring {
  width: 8rem;
  height: 8rem;
  flex: none;
  transform: rotate(-90deg);
}

.dad-ring circle {
  fill: none;
  stroke-width: 14;
}

.dad-ring-track {
  stroke: var(--mv-primary-soft);
}

.dad-ring-fill {
  stroke: var(--mv-primary);
  stroke-linecap: round;
  animation: dad-ring-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

@keyframes dad-ring-in {
  from { stroke-dasharray: 0 100; }
}

.dad-ring-label,
.dad-ring-note {
  display: block;
  color: var(--mv-muted);
  font-size: 0.9rem;
}

.dad-ring-value {
  display: block;
  font-family: var(--dad-display);
  font-size: 2rem;
  line-height: 1.2;
}

.dad-journey .card-body {
  flex-direction: column;
  align-items: stretch;
}

.dad-journey-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dad-journey-course {
  color: var(--mv-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.dad-ladder {
  display: grid;
  grid-template-columns: repeat(var(--dad-steps), minmax(0, 1fr));
  gap: 0.4rem;
  align-items: end;
  height: 7.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dad-ladder li {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(100% * var(--dad-step) / var(--dad-steps));
  min-height: 2rem;
  padding-block-end: 0.35rem;
  border-radius: 0.6rem 0.6rem 0.3rem 0.3rem;
  border: 1px dashed var(--mv-border);
  background: var(--mv-surface-muted);
  color: var(--mv-muted);
  font-weight: 700;
  transform-origin: bottom;
  animation: dad-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--dad-step) * 80ms);
}

.dad-ladder li.is-done {
  background: #dfe4f0;
  color: var(--dad-ink);
}

.dad-ladder li.is-here {
  background: linear-gradient(180deg, var(--dad-gold), var(--dad-gold-deep));
  color: var(--dad-ink);
  outline: 2px solid var(--dad-gold);
  outline-offset: 3px;
  box-shadow: 0 10px 24px -10px rgba(224, 179, 74, 0.7);
}

.dad-journey-note {
  margin: 0;
  color: var(--mv-muted);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .dad-ring-fill,
  .dad-ladder li {
    animation: none;
  }
}

.dad-river .dad-sun-text {
  text-shadow: none;
}

/* ---- 9. motion on every page -------------------------------------------- */
/* ⭐ Owner request 2026-10-03: every page opens with its content rising
   into place, one block after another, and panels further down glide up as
   they scroll into view. Two separate properties so the two never fight:
   the opening uses opacity + transform, the scroll uses translate + scale.
   Both end on "none", so nothing is left transformed afterwards (a leftover
   transform would trap a modal's fixed position). */
@keyframes dad-page-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes dad-scroll-in {
  from { translate: 0 44px; scale: 0.97; }
  to { translate: none; scale: none; }
}

.app-main > :not(.dad-river, .auth-hero, .modal, script, style) {
  animation: dad-page-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 360ms;
}

.app-main > :nth-child(1) { animation-delay: 40ms; }
.app-main > :nth-child(2) { animation-delay: 100ms; }
.app-main > :nth-child(3) { animation-delay: 160ms; }
.app-main > :nth-child(4) { animation-delay: 220ms; }
.app-main > :nth-child(5) { animation-delay: 270ms; }
.app-main > :nth-child(6) { animation-delay: 320ms; }

@supports (animation-timeline: view()) {
  .app-main :is(
    .card, .app-stat, .table-responsive, .app-dash-panel, .app-kpi, .app-poster,
    .mv-plan, .app-register, .app-callout, .app-step-panel, .app-empty,
    .dad-journey, .dad-ring-card, .app-guide
  ):not(.app-main > *, .dad-carousel > *) {
    animation: dad-scroll-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-main > :not(.dad-river, .auth-hero, .modal, script, style) {
    animation-name: dad-rise-short;
  }

  .app-main :is(
    .card, .app-stat, .table-responsive, .app-dash-panel, .app-kpi, .app-poster,
    .mv-plan, .app-register, .app-callout, .app-step-panel, .app-empty,
    .dad-journey, .dad-ring-card, .app-guide
  ) {
    animation: none;
  }
}

/* ---- 10. assisted registration as a wizard ------------------------------ */
/* ⭐ Owner request 2026-10-03: an admin who is not at home on a computer
   sees one step, one form, and one big Next button. The numbered row on top
   says where they are and lets them jump back. */
body:has(.dad-wizard.is-active) .app-steps {
  display: none;
}

.dad-wizard-dots {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.dad-wizard-dots li {
  flex: 1 1 0;
  min-width: 7.5rem;
}

.dad-wizard-dots button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mv-border);
  border-radius: 1rem;
  background: var(--mv-surface);
  color: var(--mv-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.dad-wizard-no {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--mv-surface-muted);
  font-family: var(--dad-display);
  font-weight: 700;
}

.dad-wizard-dots li.is-current button {
  border-color: var(--dad-sun);
  box-shadow: 0 0 0 3px rgba(42, 58, 107, 0.25);
}

.dad-wizard-dots li.is-current .dad-wizard-no {
  background: var(--dad-sun);
  color: var(--dad-ink);
}

.dad-wizard-dots li.is-done .dad-wizard-no {
  background: var(--dad-ink);
  color: #fff;
}

.dad-wizard.is-active > .app-step-panel {
  font-size: 1.05rem;
}

.dad-wizard.is-active > .app-step-panel > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.dad-wizard-nav {
  position: sticky;
  inset-block-end: 0.75rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--mv-border);
  border-radius: 1.25rem;
  background: var(--mv-surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.dad-wizard-nav .btn {
  min-width: 9rem;
}

.dad-wizard-status {
  color: var(--mv-muted);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .dad-wizard-dots .dad-wizard-name {
    display: none;
  }

  .dad-wizard-dots li {
    min-width: 3.25rem;
  }

  .dad-wizard-nav .btn {
    min-width: 0;
    flex: 1 1 0;
  }

  .dad-wizard-status {
    order: -1;
    flex-basis: 100%;
    text-align: center;
  }
}

/* ---- 11. navy buttons and selections (owner rule 2026-10-03) ------------- */
.btn-sun,
.dad-river .btn-sun {
  border-color: rgba(255, 255, 255, 0.35);
  background: var(--dad-navy);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(11, 18, 38, 0.8);
}

.btn-sun:hover,
.btn-sun:focus-visible {
  border-color: rgba(255, 255, 255, 0.55);
  background: var(--dad-navy-deep);
  color: #fff;
}

:is(body[data-scene], body:has(.auth-hero.has-photo), body:has(.dad-river)) .app-topbar .btn-primary {
  border-color: rgba(255, 255, 255, 0.4);
  background: var(--dad-navy);
  color: #fff;
}

body[data-scene] .app-nav-link.active,
body[data-scene] .app-nav-link.active:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dad-navy-deep);
}

body[data-scene] .app-nav-link.active .app-nav-icon {
  color: var(--dad-navy-deep);
}

.dad-wizard-dots li.is-current button {
  border-color: var(--dad-navy);
  box-shadow: 0 0 0 3px rgba(42, 58, 107, 0.25);
}

.dad-wizard-dots li.is-current .dad-wizard-no,
.dad-kid-avatar,
.app-poster:not(.app-poster-offer) .app-poster-level,
.dad-row:hover .dad-row-go,
.dad-row:focus-visible .dad-row-go,
.dad-carousel-btn:hover {
  border-color: var(--dad-navy);
  background: var(--dad-navy);
  color: #fff;
}

.app-poster:not(.app-poster-offer).is-selected {
  border-color: var(--dad-navy);
  box-shadow: 0 20px 40px -24px rgba(42, 58, 107, 0.8);
}

.dad-ladder li.is-done {
  background: #dfe4f0;
}

/* ---- 12. sign-in: the photo across the screen, the form in the middle ---- */
/* ⭐ Owner request 2026-10-03: Big Ben on one side, Petra on the other, and
   the sign-in box centred between them so it covers neither. */
.auth-hero.is-centered.has-photo :is(.auth-hero-photo, .auth-hero-scrim) {
  inset: 0;
  inline-size: 100%;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.auth-hero.is-centered.has-photo .auth-hero-scrim {
  background: radial-gradient(60% 70% at 50% 50%, rgba(11, 18, 38, 0.55), rgba(11, 18, 38, 0.2) 70%, rgba(11, 18, 38, 0.35));
}

.auth-hero.is-centered .auth-hero-copy {
  display: none;
}

.auth-hero.is-centered .auth-content-split {
  justify-content: center;
}

.auth-hero.is-centered .auth-card-wrap {
  flex: 0 1 28rem;
  margin-inline: auto;
}

.auth-hero.is-centered.has-photo .auth-card {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

:root[data-theme="dark"] .auth-hero.is-centered.has-photo .auth-card {
  background: rgba(16, 24, 42, 0.78);
}

/* ---- 13. phones: the top bar stays one line ------------------------------ */
/* On a phone the bar's buttons wrapped into three rows and pushed the page
   down. They now sit in one row that scrolls sideways if it must, every
   control still reachable. */
@media (max-width: 767.98px) {
  .app-topbar {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .app-topbar-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    /* Pushed to the end by an auto margin, not justify-content: flex-end —
       a flex-end row that is too wide spills off the start edge where it
       cannot be scrolled to, which is how the dark/light switch vanished. */
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 0.15rem;
  }

  .app-topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .app-topbar-actions > * {
    flex: none;
  }

  .app-topbar-actions > :first-child {
    margin-inline-start: auto;
  }

  /* One language button on a phone: the one that switches to the other
     language ("English" on an Arabic page, "العربية" on an English one). */
  .app-topbar .app-language-switch button.active {
    display: none;
  }

  .app-user-name,
  .app-brand-subtitle,
  .app-topbar-wide {
    display: none;
  }

  /* ⭐ 2026-10-04: smaller controls, so logo, menu, dark/light, language
     and sign-in all fit a 360px phone without sliding off the edge. */
  .app-topbar .app-brand-logo img {
    height: 2.4rem;
  }

  .app-topbar .app-menu-button,
  .app-topbar .app-theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }

  .app-topbar .app-language-switch button {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
  }

  .app-topbar-actions > .btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
  }
}

.app-offcanvas-account {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--mv-border);
}

.app-offcanvas-account .btn {
  width: 100%;
}

/* Every sign-in and registration card reads like any panel: dark words on
   light glass in light mode (the hero around it sets light text for words
   on the photo). ⭐ 2026-10-04: was the centred sign-in card only, so the
   registration form came out white on white on a phone in light mode. */
:root:not([data-theme="dark"]) .auth-hero.has-photo .auth-card {
  --mv-text: #0f172a;
  --mv-muted: #4a5568;
  --mv-primary: #2a3a6b;
  --mv-primary-strong: #16213f;
  --bs-body-color: #0f172a;
  --bs-body-color-rgb: 15, 23, 42;
  color: var(--mv-text);
}

:root:not([data-theme="dark"]) .auth-hero.has-photo .auth-card :is(h1, h2, h3, p, legend, label, .form-text, .auth-card-foot, .form-check-label) {
  color: var(--mv-text);
}

/* ---- 14. my payments as a table ------------------------------------------ */
/* ⭐ Owner request 2026-10-03: one row per payment request; whatever a
   payment still needs sits on a full-width line right under its row. */
.dad-pay-table {
  border: 1px solid var(--mv-border);
  border-radius: 1rem;
  background: var(--mv-surface);
}

.dad-pay-table thead th {
  white-space: nowrap;
}

.dad-pay-row.has-more > td {
  border-block-end: 0;
}

.dad-pay-more > td {
  padding-block-start: 0;
}

.dad-pay-more .alert:last-child,
.dad-pay-more details:last-child {
  margin-block-end: 0;
}

/* ---- 15. a session picker's chosen line, in full ------------------------- */
.dad-choice-note {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--dad-gold);
  border-radius: 0.5rem;
  background: var(--mv-surface-muted);
  color: var(--mv-text);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- 16. a course's ages next to its name ------------------------------- */
/* ⭐ Owner request 2026-10-05: "5–12 years" beside a course written for an
   age group (Display/CourseAges.cs). */
.dad-ages {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--dad-gold);
  border-radius: 999px;
  color: inherit;
  font-family: var(--bs-body-font-family);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

/* --- Offer showcase -------------------------------------------------------
   ⭐ Owner request 2026-10-06: the offer posters as an advert — one poster at
   a time, the next sliding in after it (js/dad.js adds .is-live), on the home
   page and on /PurchasePackage. Its own dark billboard in light and dark mode
   alike, so it reads as an advert wherever it sits. Without JavaScript the
   posters simply stand one under the other. */
.dad-ads {
  position: relative;
  margin: 0 0 2rem;
  border-radius: 1.5rem;
  overflow: hidden;
  color: #fff;
  text-align: start;
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(224, 179, 74, 0.2), transparent 55%),
    linear-gradient(135deg, rgba(22, 33, 63, 0.94), rgba(11, 18, 38, 0.96) 70%);
  box-shadow: 0 28px 60px -28px rgba(5, 10, 25, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dad-ads::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dad-blend);
  z-index: 2;
}

.dad-ads-stage {
  display: grid;
}

.dad-ad {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.dad-ad.is-text {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(2rem, 5vw, 3.5rem);
}

.dad-ads:not(.is-live) .dad-ad + .dad-ad {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.dad-ads.is-live .dad-ad {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.dad-ads.is-live .dad-ad.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

/* The picture sits whole on a blurred copy of itself, so a tall poster, a
   wide one and a square one all fill the frame without being cut. */
.dad-ad-media {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 5;
  max-height: 27rem;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: #0b1226;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}

.dad-ad-media::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: var(--dad-ad-backdrop) center / cover no-repeat;
  filter: blur(24px) saturate(1.2) brightness(0.65);
}

.dad-ad-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dad-ads .dad-ad-tag {
  display: inline-block;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  background: var(--dad-blend);
  color: var(--dad-ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.dad-ads .dad-ad-title {
  margin: 0.9rem 0 0.6rem;
  color: #fff;
  font-family: var(--dad-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.dad-ads .dad-ad-details {
  max-width: 36rem;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
  white-space: pre-line;
}

.dad-ad.is-text .dad-ad-copy {
  max-width: 44rem;
}

/* Each poster arrives the same way: the picture settles from a slight zoom,
   the words rise into place one after another. */
.dad-ads.is-live .dad-ad.is-active .dad-ad-media img {
  animation: dad-ad-settle 7s ease-out both;
}

.dad-ads.is-live .dad-ad.is-active .dad-ad-copy > * {
  animation: dad-ad-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.dad-ads.is-live .dad-ad.is-active .dad-ad-copy > :nth-child(2) { animation-delay: 0.08s; }
.dad-ads.is-live .dad-ad.is-active .dad-ad-copy > :nth-child(3) { animation-delay: 0.16s; }
.dad-ads.is-live .dad-ad.is-active .dad-ad-copy > :nth-child(4) { animation-delay: 0.24s; }

@keyframes dad-ad-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

@keyframes dad-ad-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.dad-ads-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.4rem);
}

.dad-ads-bars {
  display: flex;
  flex: 1;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dad-ads-bars li {
  flex: 1;
}

.dad-ads-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dad-ads-bar span {
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  margin-block-start: -2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.dad-ads-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dad-gold);
  transform: scaleX(0);
  transform-origin: right;
}

[dir="ltr"] .dad-ads-bar span::after {
  transform-origin: left;
}

.dad-ads-bar.is-done span::after {
  transform: scaleX(1);
}

.dad-ads-bar.is-active span::after {
  animation: dad-ad-progress var(--dad-ads-ms, 6500ms) linear forwards;
}

.dad-ads.is-paused .dad-ads-bar.is-active span::after {
  animation-play-state: paused;
}

@keyframes dad-ad-progress {
  to { transform: scaleX(1); }
}

.dad-ads-arrow,
.dad-ads-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dad-ads-arrow:hover,
.dad-ads-pause:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

.dad-ads :is(.dad-ads-arrow, .dad-ads-pause, .dad-ads-bar, .dad-ad-media):focus-visible {
  outline: 2px solid var(--dad-gold);
  outline-offset: 2px;
}

.dad-ads-arrow svg,
.dad-ads-pause svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="ltr"] .dad-ads-arrow svg {
  transform: scaleX(-1);
}

.dad-ads-pause .is-play {
  display: none;
  fill: currentColor;
  stroke: none;
}

.dad-ads.is-paused .dad-ads-pause .is-pause { display: none; }
.dad-ads.is-paused .dad-ads-pause .is-play { display: block; }

/* On the home page's last chapter the advert sits under the heading. */
.dad-c5 .dad-ads {
  max-width: 64rem;
  margin: 2rem auto 0;
}

.dad-river h2.dad-offer-title.dad-offer-title-sm {
  margin-inline: auto;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

@media (max-width: 720px) {
  .dad-ad {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .dad-ad-media {
    aspect-ratio: 1 / 1;
    max-height: 62vh;
  }

  .dad-ads-arrow {
    display: none;
  }
}

/* "Reduce motion": the posters still change (the owner wants them seen), but
   by a plain fade — no zoom, no rising words. */
@media (prefers-reduced-motion: reduce) {
  .dad-ads.is-live .dad-ad.is-active .dad-ad-media img,
  .dad-ads.is-live .dad-ad.is-active .dad-ad-copy > * {
    animation: none;
  }
}

/* --- Levels recorded for a student ---------------------------------------
   ⭐ Owner request 2026-10-06: one card per language and level — the level
   large in gold, the courses it opens as tags underneath. */
.dad-levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.9rem;
  margin: 0.5rem 0 0.6rem;
}

.dad-level-card {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 1.1rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, rgba(42, 58, 107, 0.94), rgba(22, 33, 63, 0.96));
  box-shadow: 0 14px 34px -18px rgba(5, 10, 25, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dad-level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dad-blend);
}

.dad-level-card .dad-level-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-weight: inherit;
}

.dad-level-card-code {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.9rem;
  background: var(--dad-blend);
  color: var(--dad-ink);
  font-family: var(--dad-display);
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(224, 179, 74, 0.6);
}

.dad-level-card-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dad-level-card-name b {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
}

.dad-level-card-name small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
}

.dad-level-card .dad-level-card-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

/* ⭐ 2026-10-16: the courses a level covers, folded under one line. */
.dad-level-card-more {
  margin-block-start: 0.9rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.dad-level-card-more > summary {
  width: fit-content;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  cursor: pointer;
}

.dad-level-card-more .dad-level-card-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
}

.dad-level-card-courses span {
  padding: 0.22rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  unicode-bidi: isolate;
}

.dad-ads.is-live .dad-ads-stage {
  touch-action: pan-y;
}

/* --- Teacher: today and tomorrow -----------------------------------------
   ⭐ Owner request 2026-10-06: the teacher's lessons for today and tomorrow,
   on their own clock, at the top of My Sessions. Two dark cards side by
   side (stacked on a phone); today's carries the gold edge. */
.dad-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.dad-day {
  position: relative;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 1.1rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, rgba(42, 58, 107, 0.96), rgba(22, 33, 63, 0.98));
  box-shadow: 0 14px 34px -18px rgba(5, 10, 25, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dad-day.is-today::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dad-blend);
}

.dad-day-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-block-end: 0.85rem;
}

.dad-day .dad-day-head h2 {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.dad-day-head > span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.dad-day-count {
  margin-inline-start: auto;
  min-width: 2rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}

.dad-day.is-today .dad-day-count {
  background: var(--dad-blend);
  color: var(--dad-ink);
}

.dad-day-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.dad-day-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dad-day-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dad-day-time {
  flex: none;
  min-width: 5.5rem;
  color: var(--dad-gold);
  font-family: var(--dad-display);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dad-day-what {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.dad-day-what strong {
  color: #fff;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dad-day-what small {
  color: rgba(255, 255, 255, 0.7);
}

.dad-day-start {
  flex: none;
  margin: 0;
}

.dad-days-zone {
  grid-column: 1 / -1;
  margin: -0.25rem 0 0;
  color: var(--mv-muted, #6b7280);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .dad-days {
    grid-template-columns: minmax(0, 1fr);
  }
}