/* =========================================================================
   EDUVAL — MAIN THEME CSS
   Uses CSS logical properties so layout flips automatically for RTL/LTR.
   No hardcoded hex values — all colors come from CSS variables in style.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--eduval-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--eduval-text);
    background: var(--eduval-bg);
    -webkit-font-smoothing: antialiased;
    transition: background var(--eduval-transition), color var(--eduval-transition);
}
/* Tutor 4.0 ships `[data-tutor-theme] body, body { font-family: inherit;
   line-height: inherit; background-color: var(--tutor-surface-base); color:
   var(--tutor-text-primary) }` in tutor-core.css, which loads after this file
   and out-specifies the `body` rule above — wiping the Eduval font and painting
   Tutor's own palette on the page. Re-assert ours with a higher-specificity
   selector (attribute + 2 elements beats attribute + 1). Dark mode still works:
   dark-mode.css uses `[data-theme="dark"] body { ... !important }`. */
html[data-tutor-theme] body,
html body {
    font-family: var(--eduval-font);
    line-height: 1.6;
    background-color: var(--eduval-bg);
    color: var(--eduval-text);
}

/* Main content grows to fill, pushing the footer to the bottom on short pages. */
#eduval-main { flex: 1 0 auto; }
.eduval-footer { flex-shrink: 0; }

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--eduval-link);
    text-decoration: none;
    transition: color var(--eduval-transition);
}
a:hover { color: var(--eduval-link-hover); }

h1, h2, h3, h4, h5, h6 {
    color: var(--eduval-heading);
    line-height: 1.25;
    margin: 0 0 .6em;
    font-weight: 800;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-inline-start: 1.4em; }

/* ---------- Layout helpers ---------- */
.eduval-container {
    width: 100%;
    max-width: var(--eduval-maxwidth);
    margin-inline: auto;
    padding-inline: var(--eduval-gutter);
}
.eduval-container--wide { max-width: 1560px; }
.eduval-full { width: 100%; }
.eduval-section { padding-block: clamp(48px, 7vw, 96px); }
.eduval-section-alt { background: var(--eduval-bg-alt); }

.eduval-section-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: .25em;
}
.eduval-section-sub {
    text-align: center;
    color: var(--eduval-text-muted);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

/* ---------- Buttons ---------- */
.eduval-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .75em 1.6em;
    border: 2px solid transparent;
    border-radius: var(--eduval-radius-pill);
    background: var(--eduval-primary);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    transition: transform var(--eduval-transition),
                background var(--eduval-transition),
                box-shadow var(--eduval-transition);
}
.eduval-btn:hover {
    color: #fff;
    background: var(--eduval-secondary);
    transform: scale(1.02);
    box-shadow: var(--eduval-shadow);
}
.eduval-btn--secondary { background: var(--eduval-secondary); }
.eduval-btn--secondary:hover { background: var(--eduval-primary); }
.eduval-btn--ghost {
    background: transparent;
    color: var(--eduval-primary);
    border-color: var(--eduval-primary);
}
.eduval-btn--ghost:hover { background: var(--eduval-primary); color: #fff; }
.eduval-btn--success { background: var(--eduval-success); }
.eduval-btn--success:hover { background: var(--eduval-success); filter: brightness(1.08); }
.eduval-btn--block { width: 100%; }
.eduval-btn.is-loading { color: transparent !important; pointer-events: none; }
.eduval-btn.is-loading::after {
    content: ""; position: absolute;
    width: 1.05em; height: 1.05em;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eduval-spin .6s linear infinite;
}
.eduval-btn--ghost.is-loading::after { border-color: rgba(var(--eduval-primary-rgb), .35); border-top-color: var(--eduval-primary); }
@keyframes eduval-spin { to { transform: rotate(360deg); } }

/* ---------- Lesson document previewer (gated, no-download) ---------- */
/* "View document" button in the lesson player bar. */
.eduval-player-bar__docs { display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }
.eduval-doc-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5em 1.05em; border-radius: 999px;
    background: var(--eduval-primary); color: #fff !important;
    font-weight: 700; font-size: .92rem; line-height: 1;
    text-decoration: none; border: 1px solid transparent;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.eduval-doc-btn svg { flex-shrink: 0; }
.eduval-doc-btn:hover { background: var(--eduval-accent); color: #fff !important; transform: translateY(-1px); box-shadow: var(--eduval-shadow); }

/* Kill Tutor's own "Exercise Files" download section — we replace downloads with
   the gated preview button above. Hidden both as a tab and its nav item. */
.eduval-player-stage #tutor-course-spotlight-files,
.eduval-player-stage .tutor-nav-item:has([data-tutor-nav-target="tutor-course-spotlight-files"]),
.eduval-player-stage [data-tutor-nav-target="tutor-course-spotlight-files"] { display: none !important; }

/* ---------- Global polish ---------- */
/* Branded text selection. */
::selection { background: rgba(var(--eduval-secondary-rgb), .28); color: var(--eduval-heading); }
/* Smooth in-page scrolling (motion-safe) + keyboard focus ring (mouse users
   never see it, so it won't add stray outlines on click). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.eduval-btn:focus-visible,
.eduval-nav__list a:focus-visible,
.eduval-account__btn:focus-visible {
    outline: 2px solid var(--eduval-secondary); outline-offset: 3px;
}

/* ---------- Header ---------- */
.eduval-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    background: var(--eduval-surface);
    border-block-end: 1px solid var(--eduval-border);
    transition: background var(--eduval-transition);
}
.eduval-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 72px;
}
.eduval-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.eduval-logo img, .eduval-logo__img { height: 52px; width: auto; max-width: 200px; object-fit: contain; display: block; }
/* Logo variant swap — light logo by default, dark logo only in dark mode.
   Scoped to .eduval-logo so specificity beats the generic rule above. */
.eduval-logo .eduval-logo__img--light { display: block; }
.eduval-logo .eduval-logo__img--dark  { display: none; }
[data-theme="dark"] .eduval-logo .eduval-logo__img--light { display: none; }
[data-theme="dark"] .eduval-logo .eduval-logo__img--dark  { display: block; }
.eduval-logo__text { font-size: 1.5rem; font-weight: 900; color: var(--eduval-primary); }

.eduval-nav { margin-inline-start: auto; }
.eduval-nav__list {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0; padding: 0;
}
.eduval-nav__list a {
    position: relative;
    display: block;
    padding: .6em .9em;
    color: var(--eduval-text);
    font-weight: 600;
    border-radius: var(--eduval-radius-sm);
}
.eduval-nav__list a::after {
    content: "";
    position: absolute;
    inset-block-end: 2px;
    inset-inline-start: 50%;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--eduval-secondary);
    transform: translateX(-50%);
    transition: width var(--eduval-transition);
}
.eduval-nav__list a:hover { color: var(--eduval-secondary); }
.eduval-nav__list .current-menu-item > a,
.eduval-nav__list a.is-active { color: var(--eduval-secondary); }
.eduval-nav__list .current-menu-item > a::after,
.eduval-nav__list a.is-active::after { width: 60%; }

.eduval-header__actions { display: flex; align-items: center; gap: .5rem; }

/* dark-mode toggle + account */
.eduval-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--eduval-border);
    border-radius: 50%;
    background: var(--eduval-surface);
    color: var(--eduval-text);
    cursor: pointer;
    transition: background var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-icon-btn:hover { background: var(--eduval-surface-2); transform: scale(1.05); }
.eduval-icon-btn svg { width: 20px; height: 20px; }
/* Theme toggle: show moon in light mode, sun in dark mode */
.eduval-theme-toggle .sun { display: none; }
[data-theme="dark"] .eduval-theme-toggle .sun { display: block; }
[data-theme="dark"] .eduval-theme-toggle .moon { display: none; }

/* account dropdown */
.eduval-account { position: relative; }
.eduval-account__btn {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .4em .4em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-pill);
    background: var(--eduval-surface);
    cursor: pointer;
    color: var(--eduval-text);
    font-family: inherit; font-weight: 600;
}
.eduval-account__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--eduval-secondary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; overflow: hidden;
}
.eduval-account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.eduval-account__menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 200px;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    box-shadow: var(--eduval-shadow-lift);
    padding: .4rem;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--eduval-transition), transform var(--eduval-transition), visibility var(--eduval-transition);
}
.eduval-account.is-open .eduval-account__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.eduval-account__menu a {
    display: block; padding: .6em .8em; border-radius: var(--eduval-radius-sm);
    color: var(--eduval-text); font-weight: 600;
}
.eduval-account__menu a:hover { background: var(--eduval-surface-2); color: var(--eduval-primary); }

/* hamburger */
.eduval-burger { display: none; }

/* ---------- Hero ---------- */
.eduval-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(60px, 9vw, 130px);
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(var(--eduval-secondary-rgb), .12), transparent 60%),
        linear-gradient(135deg, rgba(var(--eduval-primary-rgb), .06), rgba(var(--eduval-secondary-rgb), .04));
}
.eduval-hero__inner { max-width: 760px; }
.eduval-hero h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    margin-bottom: .35em;
}
.eduval-hero p { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--eduval-text-muted); }
.eduval-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.eduval-hero__float {
    position: absolute;
    inset-block-start: 12%;
    inset-inline-end: 6%;
    width: clamp(120px, 16vw, 220px);
    aspect-ratio: 1;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, var(--eduval-secondary), var(--eduval-accent));
    opacity: .18;
    filter: blur(2px);
    animation: eduval-float 7s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- Feature cards ---------- */
.eduval-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
}
.eduval-feature {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 2rem 1.6rem;
    text-align: center;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.eduval-feature:hover { transform: translateY(-4px); box-shadow: var(--eduval-shadow-lift); }
.eduval-feature__icon {
    font-size: 2.2rem;
    width: 72px; height: 72px;
    margin: 0 auto 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--eduval-secondary-rgb), .12);
}

/* ---------- Course card grid ---------- */
.eduval-grid {
    display: grid;
    gap: clamp(16px, 2vw, 28px);
}
.eduval-grid--4 { grid-template-columns: repeat(4, 1fr); }
.eduval-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Inside the All Content layout (with sidebar), let cards auto-fit so they
   stay a comfortable width and fill the wider container. */
.eduval-content-layout .eduval-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.eduval-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    overflow: hidden;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.eduval-card:hover { transform: scale(1.02); box-shadow: var(--eduval-shadow-lift); }
.eduval-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--eduval-surface-2);
    overflow: hidden;
}
.eduval-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--eduval-transition-slow); }
.eduval-card:hover .eduval-card__thumb img { transform: scale(1.05); }
.eduval-card__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--eduval-primary-rgb), .55);
    color: #fff; font-weight: 700;
    opacity: 0; transition: opacity var(--eduval-transition);
}
.eduval-card:hover .eduval-card__overlay { opacity: 1; }
.eduval-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.eduval-card__tag {
    align-self: flex-start;
    font-size: .75rem; font-weight: 700;
    padding: .25em .7em;
    border-radius: var(--eduval-radius-pill);
    background: rgba(var(--eduval-secondary-rgb), .14);
    color: var(--eduval-secondary);
}
.eduval-card__title { font-size: 1.05rem; margin: 0; }
.eduval-card__title a { color: var(--eduval-heading); }
.eduval-card__meta { display: flex; align-items: center; gap: .5em; color: var(--eduval-text-muted); font-size: .85rem; }
.eduval-card__meta img { width: 26px; height: 26px; border-radius: 50%; }
.eduval-card__footer { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block-start: .6rem; }
.eduval-card__price { font-weight: 800; color: var(--eduval-primary); }
.eduval-badge-free {
    font-weight: 800; color: var(--eduval-success);
    background: rgba(31, 157, 87, .12);
    padding: .2em .7em; border-radius: var(--eduval-radius-pill);
}
.eduval-card .eduval-btn { padding: .5em 1.1em; font-size: .9rem; }

/* Access-expiry note on owned/enrolled course cards (term expiry). */
.eduval-expiry {
    display: inline-flex; align-items: center; gap: .35em;
    margin-block-start: .1rem; font-size: .78rem; font-weight: 700;
    color: var(--eduval-text-muted);
}
.eduval-expiry::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--eduval-secondary);
}
.eduval-expiry--past { color: var(--eduval-danger); }
.eduval-expiry--past::before { background: var(--eduval-danger); }

/* Expired course: muted "Unavailable" label replacing the buy button on cards. */
.eduval-card__unavailable {
    font-weight: 700; font-size: .82rem; color: var(--eduval-text-muted);
    background: var(--eduval-surface-2); border: 1px solid var(--eduval-border);
    padding: .4em 1em; border-radius: var(--eduval-radius-pill);
}
/* Single course price card: pre-purchase "Access until …" + expired notice. */
.eduval-price-card__expiry {
    margin: .6rem 0 0; font-size: .85rem; font-weight: 700; color: var(--eduval-text-muted);
    display: flex; align-items: center; gap: .4em;
}
.eduval-price-card__expiry::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eduval-secondary);
}
.eduval-price-card__expired {
    padding: .85rem 1rem; border-radius: var(--eduval-radius);
    background: rgba(var(--eduval-primary-rgb), .05);
    border: 1px solid var(--eduval-border); border-inline-start: 4px solid var(--eduval-danger);
    color: var(--eduval-danger); font-weight: 700; font-size: .92rem; line-height: 1.45;
}

/* ---------- University logo cards ---------- */
.eduval-unis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.eduval-uni {
    position: relative;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 2rem 1.2rem;
    text-align: center;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.eduval-uni:hover { transform: translateY(-4px); box-shadow: var(--eduval-shadow); }
.eduval-uni__logo {
    width: 80px; height: 80px; margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(var(--eduval-primary-rgb), .08);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 900; color: var(--eduval-primary);
    overflow: hidden;
}
.eduval-uni__logo img { width: 100%; height: 100%; object-fit: cover; }
.eduval-badge-soon {
    position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
    font-size: .7rem; font-weight: 700;
    padding: .25em .7em; border-radius: var(--eduval-radius-pill);
    background: var(--eduval-warning); color: #fff;
}
.eduval-uni.is-soon { opacity: .65; pointer-events: none; }

/* ---------- University tabs (Courses Hub) ---------- */
.eduval-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-block-end: 1px solid var(--eduval-border);
    padding-block-end: 2px;
    position: relative;
    z-index: 5;
}
.eduval-tab {
    position: relative;
    flex-shrink: 0;
    padding: .85em 1.3em;
    border: 0;
    background: transparent;
    color: var(--eduval-text-muted);
    font-family: inherit; font-weight: 700; font-size: .98rem;
    cursor: pointer;
    border-radius: var(--eduval-radius-sm) var(--eduval-radius-sm) 0 0;
    white-space: nowrap;
    transition: color var(--eduval-transition), background var(--eduval-transition);
}
.eduval-tab small { display: block; font-weight: 600; font-size: .72rem; opacity: .8; }
.eduval-tab::after {
    content: ""; position: absolute; inset-block-end: -2px; inset-inline: 0;
    height: 3px; background: var(--eduval-primary);
    transform: scaleX(0); transition: transform var(--eduval-transition);
}
.eduval-tab:hover { color: var(--eduval-primary); }
.eduval-tab.is-active { color: var(--eduval-primary); }
.eduval-tab.is-active::after { transform: scaleX(1); }
.eduval-tab.is-soon { color: var(--eduval-text-muted); opacity: .5; cursor: not-allowed; }

/* mega-menu dropdown */
.eduval-megamenu {
    position: relative;
}
.eduval-megamenu__panel {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 260px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    box-shadow: var(--eduval-shadow-lift);
    padding: .5rem;
    z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--eduval-transition), transform var(--eduval-transition), visibility var(--eduval-transition);
}
.eduval-megamenu.is-open > .eduval-megamenu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.eduval-megamenu__item {
    position: relative;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: .6em .85em; border: 0; border-radius: var(--eduval-radius-sm);
    background: transparent;
    color: var(--eduval-text); font-family: inherit; font-weight: 600; font-size: .95rem;
    text-align: start; cursor: pointer;
}
.eduval-megamenu__item:hover { background: var(--eduval-surface-2); color: var(--eduval-primary); }
.eduval-megamenu__item .arrow { font-size: .7em; opacity: .6; transition: transform var(--eduval-transition); }

/* Term group: parent term row + its subjects shown inline (indented). */
.eduval-megamenu__group { border-radius: var(--eduval-radius-sm); }
.eduval-megamenu__group + .eduval-megamenu__group { margin-block-start: .15rem; }
.eduval-megamenu__sub {
    display: grid;
    gap: 1px;
    padding-inline-start: .9rem;
    margin-inline-start: .35rem;
    border-inline-start: 2px solid var(--eduval-border);
}
.eduval-megamenu__sub .eduval-megamenu__item {
    font-weight: 500;
    font-size: .92rem;
    color: var(--eduval-text-muted);
    padding: .45em .7em;
}
.eduval-megamenu__sub .eduval-megamenu__item:hover { color: var(--eduval-secondary); background: var(--eduval-surface-2); }

.eduval-soon-msg {
    margin-block-start: 1.5rem;
    text-align: center;
    padding: 1rem 1.4rem;
    border-radius: var(--eduval-radius);
    background: rgba(var(--eduval-secondary-rgb), .08);
    color: var(--eduval-primary);
    font-weight: 700;
}

/* Active-subject filter heading on the Courses page */
.eduval-lectures-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: .9rem;
    scroll-margin-top: 100px;
}
.eduval-section-subtitle { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--eduval-heading); }
.eduval-clear-subject {
    display: inline-flex; align-items: center;
    margin-block-start: 2rem;
    padding: .35em .9em;
    border-radius: var(--eduval-radius-pill);
    background: var(--eduval-surface-2);
    color: var(--eduval-text-muted);
    font-weight: 700; font-size: .85rem;
    transition: background var(--eduval-transition), color var(--eduval-transition);
}
.eduval-clear-subject:hover { background: var(--eduval-danger); color: #fff; }
.eduval-empty-inline { grid-column: 1 / -1; color: var(--eduval-text-muted); padding: 1rem 0; }

/* ---------- All Content layout (sidebar + grid) ---------- */
.eduval-content-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.eduval-filters {
    position: sticky;
    inset-block-start: 90px;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.4rem;
}
.eduval-filters h3 { font-size: 1.05rem; }
.eduval-filters__search {
    width: 100%;
    padding: .7em 1em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-bg);
    color: var(--eduval-text);
    font-family: inherit;
    margin-bottom: 1.2rem;
}
.eduval-filters__group { max-height: 320px; overflow-y: auto; margin-bottom: 1rem; }

/* Collapsible category dropdown (button that opens the checkbox list) */
.eduval-catdrop { position: relative; margin-bottom: 1rem; }
.eduval-catdrop__toggle {
    width: 100%;
    display: flex; align-items: center; gap: .5rem;
    padding: .7em 1em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-surface);
    color: var(--eduval-text);
    font-family: inherit; font-weight: 700; font-size: .95rem;
    cursor: pointer;
    transition: border-color var(--eduval-transition), background var(--eduval-transition);
}
.eduval-catdrop__toggle:hover { border-color: var(--eduval-secondary); }
.eduval-catdrop__label { display: inline-flex; align-items: center; gap: .5rem; }
.eduval-catdrop__count {
    margin-inline-start: auto;
    min-width: 1.4em; height: 1.4em; padding: 0 .4em;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--eduval-primary); color: #fff;
    border-radius: var(--eduval-radius-pill); font-size: .78rem; font-weight: 700;
}
.eduval-catdrop__chevron { margin-inline-start: .35rem; transition: transform var(--eduval-transition); flex-shrink: 0; }
.eduval-catdrop.is-open .eduval-catdrop__chevron { transform: rotate(180deg); }
.eduval-catdrop.is-open .eduval-catdrop__toggle { border-color: var(--eduval-secondary); }

.eduval-catdrop__panel {
    margin-top: .5rem;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-surface);
    padding: .6rem;
    box-shadow: var(--eduval-shadow);
}
.eduval-catdrop__panel .eduval-filters__group { max-height: 300px; margin-bottom: 0; }
.eduval-check {
    display: flex; align-items: center; gap: .55em;
    padding: .35em 0; cursor: pointer; font-size: .92rem;
}
.eduval-check input { accent-color: var(--eduval-primary); width: 17px; height: 17px; }

.eduval-content-main__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.eduval-select {
    padding: .55em 1em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-surface);
    color: var(--eduval-text);
    font-family: inherit; font-weight: 600;
}
.eduval-loadmore { display: flex; justify-content: center; margin-top: 2.5rem; }
.eduval-no-results {
    text-align: center;
    padding: clamp(30px, 6vw, 70px) 1rem;
    color: var(--eduval-text-muted);
}
.eduval-no-results p { margin-block-end: 1rem; font-weight: 600; }
.eduval-content-layout--anchor { scroll-margin-top: 100px; }

/* ---------- Single lecture ---------- */
.eduval-lecture { /* outer container (full width) */ }

/* Two-column layout: main content + sticky sidebar */
.eduval-lecture__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    margin-block-start: 1rem;
}

.eduval-breadcrumb { font-size: .85rem; color: var(--eduval-text-muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35em; }
.eduval-breadcrumb a { color: var(--eduval-text-muted); }
.eduval-breadcrumb a:hover { color: var(--eduval-primary); }

/* Video */
.eduval-lecture__video {
    position: relative; aspect-ratio: 16 / 9;
    border-radius: var(--eduval-radius); overflow: hidden;
    background: var(--eduval-dark);
}
.eduval-lecture__player,
.eduval-lecture__video iframe,
.eduval-lecture__video video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background:#000; }
.eduval-lecture__video-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--eduval-text-muted);
}
.eduval-lecture__locked {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff;
    background:
        linear-gradient(rgba(var(--eduval-primary-rgb), .86), rgba(var(--eduval-primary-rgb), .92)),
        var(--lock-bg, none);
    background-size: cover; background-position: center;
    backdrop-filter: blur(4px);
}
.eduval-lecture__lock-inner { display: grid; gap: .7rem; justify-items: center; padding: 1.5rem; }
.eduval-lecture__lock-icon svg { width: 46px; height: 46px; }
.eduval-lecture__lock-text { font-weight: 700; font-size: 1.05rem; }

/* Intro (tags, title, description) */
.eduval-lecture__intro { margin-block-start: 1.4rem; }
.eduval-lecture__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.eduval-lecture__cat {
    font-size: .78rem; font-weight: 700; padding: .25em .8em;
    border-radius: var(--eduval-radius-pill);
    background: rgba(var(--eduval-secondary-rgb), .14); color: var(--eduval-secondary);
}
.eduval-lecture__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .2rem 0 .8rem; color: var(--eduval-heading); }
.eduval-lecture__desc { color: var(--eduval-text); line-height: 1.7; }

/* Course content section */
.eduval-lecture__content { margin-block-start: 2rem; }
.eduval-lecture__section-title { font-size: 1.25rem; margin-bottom: 1rem; color: var(--eduval-heading); }

/* Sidebar */
.eduval-lecture__sidebar { position: relative; }

.eduval-price-card {
    position: sticky; inset-block-start: 90px;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.6rem;
    box-shadow: var(--eduval-shadow);
}
.eduval-price-card__price { margin-bottom: 1.1rem; }
.eduval-price-card__amount { font-size: 2rem; font-weight: 900; color: var(--eduval-primary); }
.eduval-price-card__free { font-size: 2rem; font-weight: 900; color: var(--eduval-success); }
.eduval-price-card__owned { font-size: 1.15rem; font-weight: 800; color: var(--eduval-success); }
.eduval-price-card__action { display: grid; gap: .6rem; }
.eduval-price-card__action .eduval-btn { width: 100%; justify-content: center; }
.eduval-price-card__meta { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--eduval-border); font-size: .9rem; color: var(--eduval-text-muted); list-style: none; display: grid; gap: .6rem; }
.eduval-price-card__meta li { display: flex; align-items: center; gap: .5em; }
.eduval-price-card__by { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--eduval-border); }
.eduval-price-card__instructor { display: flex; align-items: center; gap: .6em; margin-top: .6rem; }
.eduval-price-card__instructor img { width: 40px; height: 40px; border-radius: 50%; }

/* Accordion (course content) — matches the template markup */
/* ---- Course-content accordion (course preview) — modern, animated ----
   Separated cards, smooth auto-height expand (grid-template-rows 0fr->1fr),
   animated chevron badge, open-state accent, and lesson hover effects. */
.eduval-accordion { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
.eduval-accordion__item {
    border: 1px solid var(--eduval-border); border-radius: var(--eduval-radius);
    background: var(--eduval-surface); overflow: hidden;
    transition: border-color var(--eduval-transition), box-shadow var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-accordion__item:hover { border-color: rgba(var(--eduval-secondary-rgb), .45); }
.eduval-accordion__item.is-open { border-color: var(--eduval-secondary); box-shadow: var(--eduval-shadow); }

.eduval-accordion__head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.05em 1.35em; cursor: pointer; text-align: start;
    font-weight: 800; color: var(--eduval-heading); letter-spacing: -.01em;
    background: transparent; border: 0; font-family: inherit; font-size: 1.02rem;
    transition: color var(--eduval-transition), background var(--eduval-transition);
}
.eduval-accordion__head:hover { background: var(--eduval-surface-2); }
.eduval-accordion__item.is-open > .eduval-accordion__head { color: var(--eduval-secondary); }

.eduval-accordion__chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--eduval-surface-2); color: var(--eduval-text-muted);
    transition: transform var(--eduval-transition-slow), background var(--eduval-transition), color var(--eduval-transition);
}
.eduval-accordion__head:hover .eduval-accordion__chevron { color: var(--eduval-secondary); }
.eduval-accordion__head[aria-expanded="true"] .eduval-accordion__chevron {
    transform: rotate(180deg); background: var(--eduval-secondary); color: #fff;
}

/* Smooth auto-height expand/collapse (animatable, unlike display:none). */
.eduval-accordion__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--eduval-transition-slow);
}
.eduval-accordion__head[aria-expanded="true"] + .eduval-accordion__panel { grid-template-rows: 1fr; }
.eduval-accordion__panel > * { min-height: 0; overflow: hidden; }

.eduval-lesson-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--eduval-border); }
.eduval-lesson {
    display: flex; align-items: center; gap: .75rem;
    padding: .82em 1.35em; border-block-start: 1px solid var(--eduval-border);
    color: var(--eduval-text); font-size: .93rem;
    transition: background var(--eduval-transition), padding-inline-start var(--eduval-transition);
}
.eduval-lesson:first-child { border-block-start: 0; }
.eduval-lesson:hover { background: var(--eduval-surface-2); padding-inline-start: 1.7em; }
/* Leading marker dot that lights up on hover */
.eduval-lesson::before {
    content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--eduval-secondary); opacity: .5;
    transition: opacity var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-lesson:hover::before { opacity: 1; transform: scale(1.2); }
.eduval-lesson__name { flex: 1; }
.eduval-lesson__lock { color: var(--eduval-text-muted); display: inline-flex; }
.eduval-lesson__duration { color: var(--eduval-text-muted); font-size: .85rem; }
.eduval-lesson--empty { color: var(--eduval-text-muted); font-style: italic; }
.eduval-lesson--empty::before { display: none; }
.eduval-instructor { display: flex; align-items: center; gap: .7em; margin-top: 1rem; }
.eduval-instructor img { width: 44px; height: 44px; border-radius: 50%; }
.eduval-instructor--link { text-decoration: none; color: inherit; transition: color var(--eduval-transition); }
.eduval-instructor--link:hover { color: var(--eduval-secondary); }
.eduval-instructor--link:hover img { box-shadow: 0 0 0 2px var(--eduval-secondary); }

/* ---------- Auth cards (login / register) ---------- */
.eduval-auth { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding-block: 3rem; }
.eduval-auth__card {
    width: 100%; max-width: 480px;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    box-shadow: var(--eduval-shadow);
    padding: clamp(1.6rem, 4vw, 2.6rem);
}
.eduval-auth__logo { text-align: center; margin-bottom: 1.2rem; }
.eduval-auth__logo img { max-height: 48px; margin-inline: auto; }
.eduval-auth h1 { text-align: center; font-size: 1.5rem; }
.eduval-field { margin-bottom: 1rem; }
.eduval-field label { display: block; font-weight: 600; margin-bottom: .35em; font-size: .9rem; }
.eduval-field input, .eduval-field select {
    width: 100%; padding: .8em 1em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-bg); color: var(--eduval-text);
    font-family: inherit; font-size: 1rem;
    transition: border-color var(--eduval-transition);
}
.eduval-field input:focus, .eduval-field select:focus {
    outline: none; border-color: var(--eduval-secondary);
    box-shadow: 0 0 0 3px rgba(var(--eduval-secondary-rgb), .18);
}
.eduval-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; font-size: .9rem; }
.eduval-auth__divider { text-align: center; color: var(--eduval-text-muted); margin: 1.2rem 0; position: relative; }
.eduval-auth__divider::before, .eduval-auth__divider::after {
    content: ""; position: absolute; inset-block-start: 50%; width: 38%; height: 1px; background: var(--eduval-border);
}
.eduval-auth__divider::before { inset-inline-start: 0; }
.eduval-auth__divider::after { inset-inline-end: 0; }
.eduval-auth__alt { text-align: center; margin-top: 1rem; font-size: .92rem; }

/* ---------- About ---------- */
.eduval-about p { max-width: 760px; }
.eduval-about__contact {
    display: inline-flex; flex-direction: column; gap: .6rem;
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); padding: 1.4rem 1.8rem; margin-top: 1rem;
}

/* ---------- Legal / default page ---------- */
.eduval-prose { max-width: 800px; margin-inline: auto; }
.eduval-prose h2 { margin-top: 1.8em; }
.eduval-prose h3 { margin-top: 1.4em; }
.eduval-prose ul { padding-inline-start: 1.4em; }

/* ---------- Dashboard wrapper ---------- */
.eduval-dashboard { padding-block: clamp(28px, 4vw, 56px); }
.eduval-dashboard .tutor-dashboard { gap: 2rem; }

/* Dashboard banner + stat cards (injected into Tutor's dashboard) */
.eduval-dash-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 1rem;
    background: linear-gradient(120deg, var(--eduval-primary), var(--eduval-secondary));
    color: #fff;
    border-radius: var(--eduval-radius);
    padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 2rem);
    margin-block-end: 1.25rem;
    box-shadow: var(--eduval-shadow);
}
.eduval-dash-banner__user { display: flex; align-items: center; gap: 1rem; }
.eduval-dash-banner__avatar {
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.55); object-fit: cover;
}
.eduval-dash-banner__welcome { margin: 0; font-size: .9rem; opacity: .9; }
.eduval-dash-banner__name { margin: .1rem 0 0; color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.eduval-dash-banner .eduval-btn--ghost {
    background: rgba(255,255,255,.16); border-color: transparent; color: #fff;
    backdrop-filter: blur(2px);
}
.eduval-dash-banner .eduval-btn--ghost:hover { background: #fff; color: var(--eduval-primary); border-color: transparent; }

.eduval-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 20px);
    margin-block-end: 1.75rem;
}
.eduval-dash-stat {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.2rem 1.3rem;
    text-align: center;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.eduval-dash-stat:hover { transform: translateY(-3px); box-shadow: var(--eduval-shadow); }
.eduval-dash-stat__num {
    display: block; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800;
    color: var(--eduval-primary); line-height: 1;
}
.eduval-dash-stat__label {
    display: block; margin-block-start: .4rem;
    font-size: .85rem; font-weight: 600; color: var(--eduval-text-muted);
}
@media (max-width: 600px) {
    .eduval-dash-stats { grid-template-columns: 1fr; }
    .eduval-dash-banner { text-align: center; justify-content: center; }
}

/* ---------- Custom dashboard layout ---------- */
.eduval-dash-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
    margin-block-start: 1.5rem;
}
.eduval-dash-nav {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: .8rem;
    position: sticky;
    inset-block-start: 90px;
}
.eduval-dash-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.eduval-dash-nav__link {
    display: flex; align-items: center; gap: .7rem;
    padding: .7em .9em;
    border-radius: var(--eduval-radius-sm);
    color: var(--eduval-text); font-weight: 600;
    transition: background var(--eduval-transition), color var(--eduval-transition);
}
.eduval-dash-nav__link:hover { background: var(--eduval-surface-2); color: var(--eduval-primary); }
.eduval-dash-nav__link.is-active {
    background: var(--eduval-primary); color: #fff;
}
.eduval-dash-nav__link.is-active:hover { color: #fff; }
.eduval-dash-nav__icon { display: inline-flex; }
.eduval-dash-nav__icon svg { width: 19px; height: 19px; }
.eduval-dash-nav__logout { color: var(--eduval-danger); }
.eduval-dash-nav__logout:hover { background: rgba(210,60,60,.12); color: var(--eduval-danger); }
.eduval-dash-nav__sep {
    margin: .5rem 0 .2rem; padding: .3rem .9em 0;
    border-block-start: 1px solid var(--eduval-border);
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--eduval-text-muted);
}
.eduval-dash-nav__sep:empty { padding: 0; }

.eduval-dash-main {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: clamp(1.2rem, 3vw, 2rem);
    min-height: 320px;
}
.eduval-dash-h { font-size: 1.3rem; margin: 0 0 1.3rem; color: var(--eduval-heading); }
.eduval-dash-main .eduval-dash-stats { margin-block-end: 2rem; }

/* Empty state */
.eduval-dash-empty {
    text-align: center; padding: clamp(28px, 6vw, 60px) 1rem;
    color: var(--eduval-text-muted);
}
.eduval-dash-empty svg { width: 54px; height: 54px; opacity: .5; margin-bottom: .8rem; }
.eduval-dash-empty p { margin-block-end: 1.2rem; font-weight: 600; }

/* Orders table */
.eduval-dash-table-wrap { overflow-x: auto; }
.eduval-dash-table { width: 100%; border-collapse: collapse; }
.eduval-dash-table th, .eduval-dash-table td {
    text-align: start; padding: .85em 1em;
    border-block-end: 1px solid var(--eduval-border);
}
.eduval-dash-table th {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--eduval-text-muted);
}
.eduval-dash-table td { color: var(--eduval-text); }
.eduval-order-status {
    display: inline-block; padding: .2em .7em; border-radius: var(--eduval-radius-pill);
    font-size: .8rem; font-weight: 700;
    background: rgba(var(--eduval-secondary-rgb), .14); color: var(--eduval-secondary);
}
.eduval-order-status--completed { background: rgba(31,157,87,.14); color: var(--eduval-success); }
.eduval-order-status--processing, .eduval-order-status--on-hold { background: rgba(224,168,0,.16); color: var(--eduval-warning); }
.eduval-order-status--cancelled, .eduval-order-status--failed { background: rgba(210,60,60,.14); color: var(--eduval-danger); }

/* Profile */
.eduval-dash-profile { display: grid; gap: 1.2rem; max-width: 520px; }
.eduval-dash-profile__form { display: grid; gap: .2rem; }
.eduval-dash-profile__form .eduval-btn { justify-self: start; margin-top: .5rem; }
.eduval-field__hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--eduval-text-muted); }
.eduval-field input:disabled { opacity: .65; cursor: not-allowed; }
.eduval-dash-alert {
    padding: .8em 1.1em; border-radius: var(--eduval-radius-sm);
    margin-block-end: 1.2rem; font-weight: 600;
}
.eduval-dash-alert--ok  { background: rgba(31,157,87,.14); color: var(--eduval-success); }
.eduval-dash-alert--err { background: rgba(210,60,60,.14); color: var(--eduval-danger); }
.eduval-dash-profile__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.eduval-dash-profile__fields { display: grid; gap: .9rem; margin: 0; }
.eduval-dash-profile__fields > div {
    display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
    padding-block-end: .9rem; border-block-end: 1px solid var(--eduval-border);
}
.eduval-dash-profile__fields dt { font-weight: 700; color: var(--eduval-text-muted); margin: 0; }
.eduval-dash-profile__fields dd { margin: 0; color: var(--eduval-text); }

@media (max-width: 900px) {
    .eduval-dash-layout { grid-template-columns: 1fr; }
    .eduval-dash-nav { position: static; }
    .eduval-dash-nav ul { grid-auto-flow: row; }
}

/* ---------- 404 / search ---------- */
.eduval-center { text-align: center; padding-block: clamp(48px, 9vw, 120px); }
.eduval-center h1 { font-size: clamp(3rem, 9vw, 6rem); }
.eduval-searchform { display: flex; gap: .5rem; max-width: 480px; margin: 1.5rem auto 0; }
.eduval-searchform input {
    flex: 1; padding: .8em 1em; border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm); background: var(--eduval-bg); color: var(--eduval-text); font-family: inherit;
}

/* ---------- Footer ---------- */
.eduval-footer {
    background: var(--eduval-primary);
    color: #e8edf7;
    padding-block: clamp(28px, 3.5vw, 40px) 1rem;
    margin-block-start: auto;
}
.eduval-footer a { color: #cdd7ee; }
.eduval-footer a:hover { color: #fff; }
.eduval-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr .8fr 1.1fr;
    gap: 1.5rem 2.5rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid rgba(255,255,255,.14);
}
.eduval-footer__brand img { max-height: 40px; width: auto; margin-bottom: .65rem; display: block; }
.eduval-footer__logo {
    display: inline-block;
    margin-bottom: .85rem;
}
.eduval-footer__logo img { margin-bottom: 0; max-height: 46px; }
.eduval-footer__brand p { font-size: .9rem; line-height: 1.5; margin: 0; max-width: 38ch; color: #c2cce6; }
.eduval-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .65rem; }
.eduval-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.eduval-footer__social { display: flex; gap: .5rem; margin-top: .75rem; }
.eduval-footer__social a {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); transition: background var(--eduval-transition);
}
.eduval-footer__social a:hover { background: var(--eduval-secondary); }
.eduval-footer__social svg { width: 16px; height: 16px; fill: currentColor; }
.eduval-footer__bottom { text-align: center; padding-block-start: 1rem; font-size: .82rem; color: #aebadd; display: flex; flex-direction: column; gap: .25rem; align-items: center; }
.eduval-footer__credit { opacity: .8; font-weight: 600; }

/* ---------- Mobile drawer ---------- */
.eduval-drawer-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(var(--eduval-primary-rgb), .45);
    opacity: 0; visibility: hidden; transition: opacity var(--eduval-transition), visibility var(--eduval-transition);
}
.eduval-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.eduval-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0;
    width: min(82vw, 340px);
    background: var(--eduval-surface);
    z-index: 1200;
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform var(--eduval-transition-slow);
    overflow-y: auto;
}
[dir="rtl"] .eduval-drawer { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); }
.eduval-drawer.is-open { transform: translateX(0); }
.eduval-drawer__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.eduval-drawer__list a {
    display: block; padding: .8em 1em; border-radius: var(--eduval-radius-sm);
    color: var(--eduval-text); font-weight: 700;
}
.eduval-drawer__list a:hover { background: var(--eduval-surface-2); color: var(--eduval-primary); }

/* ---------- WooCommerce tweaks ---------- */
.eduval-qty-lock {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; padding: .3em .6em;
    border: 1px solid var(--eduval-border); border-radius: var(--eduval-radius-sm);
    font-weight: 700; background: var(--eduval-surface-2);
}
.woocommerce-cart .quantity .qty { pointer-events: none; }
.eduval-cart-empty { text-align: center; padding-block: clamp(40px, 8vw, 100px); }

/* ===========================================================================
   CART & CHECKOUT — polished layout + effects
   ======================================================================== */

/* ---- Cart ---- */
.eduval-cart { animation: eduval-fade-up .5s ease both; }
.eduval-cart__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    overflow: hidden;
}
.eduval-cart__table thead th {
    text-align: start;
    font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--eduval-text-muted);
    background: var(--eduval-surface-2);
    padding: 1rem 1.1rem;
    border-block-end: 1px solid var(--eduval-border);
}
.eduval-cart__table td {
    padding: 1rem 1.1rem;
    border-block-end: 1px solid var(--eduval-border);
    vertical-align: middle;
}
.eduval-cart__table tbody tr {
    transition: background var(--eduval-transition);
    animation: eduval-fade-up .45s ease both;
}
.eduval-cart__table tbody tr:hover { background: var(--eduval-surface-2); }
.eduval-cart__table .product-thumbnail img {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: var(--eduval-radius-sm);
    border: 1px solid var(--eduval-border);
    transition: transform var(--eduval-transition);
}
.eduval-cart__table tr:hover .product-thumbnail img { transform: scale(1.06); }
.eduval-cart__table .product-name a { color: var(--eduval-heading); font-weight: 700; }
.eduval-cart__table .product-name a:hover { color: var(--eduval-secondary); }
.eduval-cart__table .product-remove a.remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    color: var(--eduval-danger); font-size: 1.2rem; line-height: 1;
    text-decoration: none; transition: transform var(--eduval-transition), background var(--eduval-transition);
}
.eduval-cart__table .product-remove a.remove:hover { background: rgba(210, 60, 60, .12); transform: rotate(90deg); }
.eduval-cart__table td.actions {
    padding: 1.1rem;
    background: var(--eduval-surface-2);
}
.eduval-cart__table td.actions .coupon { display: inline-flex; gap: .5rem; margin-inline-end: 1rem; }
.eduval-cart__table td.actions input#coupon_code {
    padding: .55em .8em; border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm); background: var(--eduval-bg);
    color: var(--eduval-text);
}
.eduval-cart__collaterals {
    margin-block-start: 1.75rem;
    display: flex; justify-content: flex-end;
    animation: eduval-fade-up .55s ease .1s both;
}
.eduval-cart__collaterals .cart_totals {
    width: min(420px, 100%);
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.5rem;
    box-shadow: var(--eduval-shadow);
}
.eduval-cart__collaterals h2 { margin-block-start: 0; font-size: 1.15rem; }
.eduval-cart__collaterals table { width: 100%; }
.eduval-cart__collaterals th, .eduval-cart__collaterals td { padding: .6rem 0; border-block-end: 1px solid var(--eduval-border); text-align: start; }
.eduval-cart__collaterals .order-total td, .eduval-cart__collaterals .order-total th { font-weight: 800; color: var(--eduval-primary); border-block-end: 0; }
.eduval-cart__collaterals .wc-proceed-to-checkout { margin-block-start: 1rem; }
.eduval-cart__collaterals .checkout-button {
    display: block; text-align: center;
    background: var(--eduval-primary); color: #fff;
    padding: .9em 1.2em; border-radius: var(--eduval-radius-pill);
    font-weight: 700; text-decoration: none;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition), background var(--eduval-transition);
}
.eduval-cart__collaterals .checkout-button:hover {
    background: var(--eduval-secondary); transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--eduval-secondary-rgb), .35); color: #fff;
}

/* ---- Cart empty (effects) ---- */
.eduval-cart-empty { animation: eduval-fade-up .5s ease both; }
.eduval-cart-empty__icon { color: var(--eduval-secondary); margin-block-end: 1rem; animation: eduval-float 3s ease-in-out infinite; }
.eduval-cart-empty__title { margin: 0 0 .5rem; }
.eduval-cart-empty__text { color: var(--eduval-text-muted); max-width: 46ch; margin-inline: auto; margin-block-end: 1.5rem; }

/* ---- Checkout ---- */
/* ---- WooCommerce notices — themed to match the site (light + dark) ----
   Replaces WooCommerce's default green-bordered grey bar (the "…added to your
   cart" / error / info messages) with a clean themed card. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .9rem 1.15rem; margin: 0 0 1.25rem;
    background: var(--eduval-surface) !important;
    color: var(--eduval-text) !important;
    border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important;
    list-style: none; box-shadow: none !important;
    font-size: .92rem;
}
.woocommerce-message { border-inline-start: 4px solid var(--eduval-success) !important; }
.woocommerce-error   { border-inline-start: 4px solid var(--eduval-danger) !important; }
.woocommerce-info    { border-inline-start: 4px solid var(--eduval-secondary) !important; }
/* Drop WC's default ::before icons/quote glyphs. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before { content: none !important; }
.woocommerce-error li, .woocommerce-message li { list-style: none; }

/* The "View cart" button inside the add-to-cart message is redundant on the
   cart page itself — hide it there. */
.woocommerce-cart .woocommerce-message .button.wc-forward { display: none !important; }

/* Theme the notice's action button elsewhere (e.g. on a course page). */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-inline-start: auto;
    background: var(--eduval-primary) !important; color: #fff !important;
    border: 1px solid var(--eduval-primary) !important;
    border-radius: var(--eduval-radius-pill) !important;
    padding: .5em 1.2em !important; font-weight: 700; text-decoration: none;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--eduval-secondary) !important; border-color: var(--eduval-secondary) !important; }

.eduval-checkout { animation: eduval-fade-up .5s ease both; }
/* Term-expiry reminder banner at the top of checkout. */
.eduval-checkout__notice {
    display: flex; align-items: flex-start; gap: .6rem;
    margin-block-end: 1.5rem; padding: .9rem 1.15rem;
    background: var(--eduval-surface-2); border: 1px solid var(--eduval-border);
    border-inline-start: 4px solid var(--eduval-secondary); border-radius: var(--eduval-radius);
    color: var(--eduval-text); font-size: .9rem; line-height: 1.5;
}
.eduval-checkout__notice svg { color: var(--eduval-secondary); flex-shrink: 0; margin-block-start: .1rem; }
.eduval-checkout__notice a { color: var(--eduval-link); font-weight: 700; text-decoration: underline; }
.eduval-checkout__form { display: grid; grid-template-columns: 1.3fr .9fr; gap: 2rem; align-items: start; }
.eduval-checkout__details {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.6rem;
    animation: eduval-fade-up .5s ease .05s both;
}
.eduval-checkout__order {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.6rem;
    position: sticky; inset-block-start: 90px;
    box-shadow: var(--eduval-shadow);
    animation: eduval-fade-up .5s ease .12s both;
}
.eduval-checkout__order h3 { margin-block-start: 0; }
.eduval-checkout h3 { font-size: 1.15rem; margin-block-end: 1rem; }
.eduval-checkout .form-row { margin-block-end: 1rem; display: flex; flex-direction: column; }
.eduval-checkout label { font-weight: 600; font-size: .9rem; margin-block-end: .35rem; color: var(--eduval-text); }
.eduval-checkout input.input-text,
.eduval-checkout textarea,
.eduval-checkout .select2-container .select2-selection,
.eduval-checkout select {
    width: 100%;
    padding: .7em .9em;
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius-sm);
    background: var(--eduval-bg);
    color: var(--eduval-text);
    transition: border-color var(--eduval-transition), box-shadow var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-checkout input.input-text:focus,
.eduval-checkout textarea:focus,
.eduval-checkout select:focus {
    outline: 0;
    border-color: var(--eduval-secondary);
    box-shadow: 0 0 0 3px rgba(var(--eduval-secondary-rgb), .18);
}
.eduval-checkout__review table { width: 100%; }
.eduval-checkout__review th, .eduval-checkout__review td { padding: .55rem 0; border-block-end: 1px solid var(--eduval-border); text-align: start; }
.eduval-checkout__review .order-total td, .eduval-checkout__review .order-total th { font-weight: 800; color: var(--eduval-primary); border-block-end: 0; }
.eduval-checkout #place_order,
.eduval-checkout button.button.alt {
    width: 100%;
    margin-block-start: 1rem;
    background: var(--eduval-primary); color: #fff; border: 0;
    padding: .95em 1.2em; border-radius: var(--eduval-radius-pill);
    font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition), background var(--eduval-transition);
}
.eduval-checkout #place_order:hover,
.eduval-checkout button.button.alt:hover {
    background: var(--eduval-secondary);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--eduval-secondary-rgb), .35);
}
.eduval-checkout #place_order:active { transform: translateY(0) scale(.99); }

@media (max-width: 860px) {
    .eduval-checkout__form { grid-template-columns: 1fr; }
    .eduval-checkout__order { position: static; }
    .eduval-cart__table thead { display: none; }
    .eduval-cart__table td { display: flex; justify-content: space-between; align-items: center; border: 0; border-block-end: 1px solid var(--eduval-border); }
    .eduval-cart__table td::before { content: attr(data-title); font-weight: 700; color: var(--eduval-text-muted); }
    .eduval-cart__table .product-remove, .eduval-cart__table .product-thumbnail { justify-content: flex-end; }
    .eduval-cart__table .product-remove::before, .eduval-cart__table .product-thumbnail::before { content: ""; }
}

/* ===========================================================================
   TUTOR LMS — theme the dashboard, archive, and single-course markup so they
   match Eduval regardless of Tutor's own wrapper.
   ======================================================================== */
.eduval-tutor-dash-wrap, .tutor-dashboard, .tutor-course-archive-wrap, .tutor-wrap { color: var(--eduval-text); }
.eduval-dashboard__body .tutor-dashboard, .eduval-tutor-dash-wrap .tutor-dashboard { background: transparent; }
.tutor-dashboard .tutor-dashboard-content, .eduval-tutor-dash-wrap .tutor-dashboard-content {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); padding: clamp(1rem, 2vw, 1.75rem);
}
.tutor-dashboard .tutor-dashboard-permalinks, .eduval-tutor-dash-wrap .tutor-dashboard-permalinks {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); overflow: hidden; padding: .4rem;
}
.tutor-dashboard .tutor-dashboard-permalinks ul li a, .eduval-tutor-dash-wrap .tutor-dashboard-permalinks ul li a {
    color: var(--eduval-text); border-radius: var(--eduval-radius-sm); padding: .7em .9em;
    font-weight: 600; transition: background var(--eduval-transition), color var(--eduval-transition);
}
.tutor-dashboard .tutor-dashboard-permalinks ul li a:hover,
.tutor-dashboard .tutor-dashboard-permalinks ul li.active a,
.eduval-tutor-dash-wrap .tutor-dashboard-permalinks ul li.active a {
    background: var(--eduval-surface-2); color: var(--eduval-primary);
}
.tutor-dashboard .tutor-dashboard-permalinks ul li.active a { box-shadow: inset 3px 0 0 var(--eduval-secondary); }
.tutor-dashboard-info-card, .tutor-dashboard .tutor-card, .eduval-tutor-dash-wrap .tutor-card {
    background: var(--eduval-surface) !important; border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important; color: var(--eduval-text) !important;
    box-shadow: none !important; transition: transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.tutor-dashboard-info-card:hover, .tutor-dashboard .tutor-card:hover { transform: translateY(-3px); box-shadow: var(--eduval-shadow) !important; }
.tutor-wrap .tutor-btn, .tutor-dashboard .tutor-btn, .eduval-tutor-dash-wrap .tutor-btn, .tutor-course-archive-wrap .tutor-btn {
    border-radius: var(--eduval-radius-pill) !important; font-weight: 700 !important;
}
.tutor-btn.tutor-btn-primary, .tutor-wrap .tutor-btn-primary {
    background: var(--eduval-primary) !important; border-color: var(--eduval-primary) !important; color: #fff !important;
    transition: background var(--eduval-transition), transform var(--eduval-transition) !important;
}
.tutor-btn.tutor-btn-primary:hover, .tutor-wrap .tutor-btn-primary:hover {
    background: var(--eduval-secondary) !important; border-color: var(--eduval-secondary) !important; transform: translateY(-1px);
}
.tutor-wrap input[type="text"], .tutor-wrap input[type="email"], .tutor-wrap input[type="password"],
.tutor-wrap input[type="search"], .tutor-wrap textarea, .tutor-wrap select,
.eduval-tutor-dash-wrap input, .eduval-tutor-dash-wrap select, .eduval-tutor-dash-wrap textarea {
    border: 1px solid var(--eduval-border) !important; border-radius: var(--eduval-radius-sm) !important;
    background: var(--eduval-bg) !important; color: var(--eduval-text) !important;
}
.tutor-courses, .tutor-course-listing {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(16px, 2vw, 28px) !important;
}
.tutor-course, .tutor-course-loop {
    background: var(--eduval-surface) !important; border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important; overflow: hidden !important; box-shadow: none !important;
    transition: transform var(--eduval-transition), box-shadow var(--eduval-transition) !important;
}
.tutor-course:hover, .tutor-course-loop:hover { transform: scale(1.02) !important; box-shadow: var(--eduval-shadow-lift) !important; }
.tutor-course .tutor-course-name a, .tutor-course-loop .tutor-course-name a { color: var(--eduval-heading) !important; }
.tutor-course-filter, .tutor-course-archive-filters {
    background: var(--eduval-surface) !important; border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important; color: var(--eduval-text) !important;
}
@media (max-width: 1024px) { .tutor-courses, .tutor-course-listing { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 680px) { .tutor-courses, .tutor-course-listing { grid-template-columns: 1fr !important; } }


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .eduval-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .eduval-features { grid-template-columns: repeat(3, 1fr); }
    .eduval-unis { grid-template-columns: repeat(2, 1fr); }
    .eduval-content-layout { grid-template-columns: 240px 1fr; }
    .eduval-lecture__layout { grid-template-columns: 1fr; }
    .eduval-price-card { position: static; }
    .eduval-pricecard { position: static; }
    .eduval-footer__grid { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 768px) {
    .eduval-nav, .eduval-account { display: none; }
    .eduval-burger { display: inline-flex; }
    .eduval-grid--4, .eduval-grid--3 { grid-template-columns: 1fr; }
    .eduval-features { grid-template-columns: 1fr; }
    .eduval-unis { grid-template-columns: repeat(2, 1fr); }
    .eduval-content-layout { grid-template-columns: 1fr; }
    .eduval-filters { position: static; }
    .eduval-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .eduval-unis { grid-template-columns: 1fr; }
    .eduval-hero__cta { flex-direction: column; }
    .eduval-hero__cta .eduval-btn { width: 100%; }
}
.eduval-auth__row--end { justify-content: flex-end; }

/* ==========================================================================
   Tutor instructor / student PUBLIC PROFILE page — themed to match Eduval.
   Scoped to body.eduval-tutor-profile so nothing else is affected. Uses the
   theme variables so light + dark mode both work automatically.
   ========================================================================== */
.eduval-tutor-profile .tutor-wrap,
.eduval-tutor-profile .tutor-user-public-profile { color: var(--eduval-text); }

/* Cover / banner: replace Tutor's purple with the Eduval brand gradient. */
.eduval-tutor-profile .tutor-instructor-cover-photo,
.eduval-tutor-profile .tutor-user-profile-cover,
.eduval-tutor-profile [class*="cover-photo"] {
    background: linear-gradient(120deg, var(--eduval-primary), var(--eduval-secondary)) !important;
    border-radius: var(--eduval-radius) !important;
}

/* Profile card / avatar frame */
.eduval-tutor-profile .tutor-user-profile-pic img,
.eduval-tutor-profile [class*="profile-pic"] img,
.eduval-tutor-profile .photo-area img {
    border-radius: var(--eduval-radius) !important;
    border: 4px solid var(--eduval-surface) !important;
    box-shadow: var(--eduval-shadow) !important;
    object-fit: cover;
}

/* Headings + name + meta */
.eduval-tutor-profile .tutor-user-name,
.eduval-tutor-profile h1, .eduval-tutor-profile h2, .eduval-tutor-profile h3 {
    color: var(--eduval-heading) !important;
}
.eduval-tutor-profile .tutor-dark-secondary-color,
.eduval-tutor-profile .tutor-color-secondary,
.eduval-tutor-profile [class*="text-muted"] { color: var(--eduval-text-muted) !important; }

/* Section blocks (Biography, Courses) as cards */
.eduval-tutor-profile .tutor-user-profile-bio,
.eduval-tutor-profile [class*="profile-bio"],
.eduval-tutor-profile .tutor-course-listing-wrap {
    background: var(--eduval-surface) !important;
    border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important;
    padding: clamp(1rem, 2.5vw, 1.6rem) !important;
    color: var(--eduval-text) !important;
}

/* Rating stars keep their gold; ensure the number text is readable */
.eduval-tutor-profile .tutor-ratings-count,
.eduval-tutor-profile [class*="ratings"] { color: var(--eduval-text-muted) !important; }

/* The course cards on the profile reuse the themed Tutor course-card styles
   already defined above (.tutor-course), so they inherit the Eduval look. */

/* ==========================================================================
   Tutor LESSON / COURSE-CONTENT player page ("Start Learning" spotlight view).
   Scoped to body.eduval-tutor-lesson. Recolours Tutor's player chrome to the
   Eduval palette via theme variables so light + dark mode both read well.
   ========================================================================== */
.eduval-tutor-lesson .tutor-wrap,
.eduval-tutor-lesson [class*="tutor-course-single"],
.eduval-tutor-lesson [class*="tutor-lesson"],
.eduval-tutor-lesson [class*="spotlight"] { color: var(--eduval-text); }

/* Right-hand info cards (Course Progress, "A course by", enrolled date) */
.eduval-tutor-lesson .tutor-card,
.eduval-tutor-lesson [class*="tutor-course-single-sidebar"] > *,
.eduval-tutor-lesson [class*="course-progress"],
.eduval-tutor-lesson [class*="tutor-single-course-segment"] {
    background: var(--eduval-surface) !important;
    border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius) !important;
    color: var(--eduval-text) !important;
}

/* Card headings + any faint labels -> readable */
.eduval-tutor-lesson h1, .eduval-tutor-lesson h2, .eduval-tutor-lesson h3,
.eduval-tutor-lesson h4, .eduval-tutor-lesson h5, .eduval-tutor-lesson .tutor-card-title {
    color: var(--eduval-heading) !important;
}
.eduval-tutor-lesson [class*="tutor-color-muted"],
.eduval-tutor-lesson [class*="text-muted"],
.eduval-tutor-lesson [class*="tutor-fs-7"] { color: var(--eduval-text-muted) !important; }

/* Progress bar */
.eduval-tutor-lesson [class*="progress-bar"],
.eduval-tutor-lesson .tutor-progress-bar {
    background: var(--eduval-surface-2) !important; border-radius: var(--eduval-radius-pill) !important;
}
.eduval-tutor-lesson [class*="progress-value"],
.eduval-tutor-lesson .tutor-progress-value {
    background: linear-gradient(90deg, var(--eduval-primary), var(--eduval-secondary)) !important;
}

/* Tabs bar (Course Info / Announcements) */
.eduval-tutor-lesson .tutor-nav,
.eduval-tutor-lesson [class*="tutor-course-topic"] .tutor-nav {
    background: var(--eduval-surface-2) !important; border-radius: var(--eduval-radius-sm) !important;
}
.eduval-tutor-lesson .tutor-nav-link,
.eduval-tutor-lesson .tutor-nav-item a { color: var(--eduval-text-muted) !important; }
.eduval-tutor-lesson .tutor-nav-link.is-active,
.eduval-tutor-lesson .tutor-nav-item a.active {
    color: var(--eduval-primary) !important; border-bottom-color: var(--eduval-secondary) !important;
}

/* Course Content accordion (topics + lesson rows) */
.eduval-tutor-lesson [class*="tutor-accordion"],
.eduval-tutor-lesson [class*="tutor-course-topic"],
.eduval-tutor-lesson [class*="topic-title"] {
    background: var(--eduval-surface) !important;
    border-color: var(--eduval-border) !important;
    color: var(--eduval-text) !important;
}
.eduval-tutor-lesson [class*="tutor-course-content-list"] a,
.eduval-tutor-lesson [class*="lesson-title"],
.eduval-tutor-lesson [class*="topic"] a { color: var(--eduval-text) !important; }
.eduval-tutor-lesson [class*="tutor-course-content-list"] a:hover { color: var(--eduval-secondary) !important; }

/* Buttons on the player (Retake This Course, etc.) inherit the themed
   .tutor-btn styles already defined earlier in this stylesheet. */

/* Instructor avatars list ("A course by") */
.eduval-tutor-lesson [class*="tutor-single-course-meta"] img,
.eduval-tutor-lesson [class*="course-by"] img { border-radius: 50% !important; }

/* ==========================================================================
   Eduval themed lesson-player SIDEBAR (our /tutor/ override markup) + the
   player video/tabs area. Scoped to the lesson page. Uses theme variables so
   light + dark both read well. Tutor's own JS handles topic toggle + tracking.
   ========================================================================== */

/* Sidebar container — flush panel that fills the aside (no inner card) */
.eduval-player-sidebar { background: transparent; border: 0; border-radius: 0; }
.eduval-player-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.35rem; position: sticky; top: 0; z-index: 2;
    background: var(--eduval-surface);
    border-block-end: 1px solid var(--eduval-border);
}
.eduval-player-sidebar__title { font-weight: 800; font-size: 1rem; color: var(--eduval-heading); letter-spacing: -.01em; }
.eduval-player-sidebar__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--eduval-text-muted); transition: color var(--eduval-transition), background var(--eduval-transition);
}
.eduval-player-sidebar__close:hover { color: var(--eduval-primary); background: var(--eduval-surface-2); }

/* Topics (sections) */
.eduval-player-topic { border-block-end: 1px solid var(--eduval-border); }
.eduval-player-topic:last-child { border-block-end: 0; }
.eduval-player-topic__head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1rem 1.35rem; text-align: start; cursor: pointer;
    background: transparent; border: 0; font-family: inherit;
    font-weight: 700; color: var(--eduval-heading); font-size: .92rem; line-height: 1.35;
    transition: background var(--eduval-transition), color var(--eduval-transition);
}
.eduval-player-topic__head:hover { background: var(--eduval-surface-2); }
.eduval-player-topic__head.is-active { color: var(--eduval-primary); }
.eduval-player-topic__right { display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.eduval-player-topic__count {
    font-size: .72rem; font-weight: 800; color: var(--eduval-text-muted);
    background: var(--eduval-surface-2); padding: .2em .65em; border-radius: var(--eduval-radius-pill);
    letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.eduval-player-topic__chevron {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    color: var(--eduval-text-muted);
    transition: transform var(--eduval-transition), color var(--eduval-transition);
}
.eduval-player-topic__head:hover .eduval-player-topic__chevron { color: var(--eduval-secondary); }
.eduval-player-topic__head.is-active .eduval-player-topic__chevron { transform: rotate(180deg); color: var(--eduval-primary); }
/* Tutor injects its own toggle arrow (icon element / ::before/::after) into the
   accordion header — hide it so only our single chevron shows. */
.eduval-player-topic__head [class*="tutor-icon-angle"],
.eduval-player-topic__head [class*="tutor-icon-chevron"],
.eduval-player-topic__head .tutor-accordion-item-header-icon,
.eduval-player-topic__head > i:not(.eduval-player-topic__chevron i) { display: none !important; }
.eduval-player-topic__head::before,
.eduval-player-topic__head::after { content: none !important; }

/* Lesson/quiz/assignment items */
.eduval-player-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .72rem 1.35rem .72rem 1.5rem; position: relative;
    color: var(--eduval-text); font-size: .875rem;
    transition: background var(--eduval-transition), color var(--eduval-transition);
}
.eduval-player-item + .eduval-player-item { border-block-start: 1px solid var(--eduval-border); }
.eduval-player-item:hover { background: var(--eduval-surface-2); }
.eduval-player-item.is-active {
    background: rgba(var(--eduval-primary-rgb), .10);
    color: var(--eduval-primary); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--eduval-primary);
}
.eduval-player-item__icon { flex-shrink: 0; color: var(--eduval-text-muted); font-size: 1.05rem; }
.eduval-player-item.is-active .eduval-player-item__icon { color: var(--eduval-primary); }
.eduval-player-item__name { flex: 1; line-height: 1.4; }
.eduval-player-item__meta { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; color: var(--eduval-text-muted); font-size: .78rem; }
.eduval-player-item__time { font-size: .76rem; font-variant-numeric: tabular-nums; }
/* Completion tick as a filled green circle (like a modern LMS) */
.eduval-player-item__done {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--eduval-success); color: #fff; flex-shrink: 0;
}
.eduval-player-item__done svg { width: 12px; height: 12px; }
/* Locked items: subtle muted lock */
.eduval-player-item__lock, .eduval-player-item .tutor-icon-lock-line { color: var(--eduval-text-muted); opacity: .8; }

/* ---- Sidebar: bigger, more professional, animated ---- */
.eduval-player-aside { width: 100%; }
.eduval-player-item { padding-block: .85rem; font-size: .9rem; }
.eduval-player-topic__head { font-size: .98rem; padding-block: 1.1rem; }
.eduval-player-topic__title { line-height: 1.4; }

/* Icon chip: give lesson/quiz icons a soft rounded badge (pro LMS look) */
.eduval-player-item__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--eduval-surface-2); color: var(--eduval-text-muted);
    transition: background var(--eduval-transition), color var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-player-item:hover .eduval-player-item__icon { color: var(--eduval-primary); transform: scale(1.06); }
.eduval-player-item.is-active .eduval-player-item__icon {
    background: var(--eduval-primary); color: #fff;
}

/* Smooth slide of the label on hover/active (subtle, professional) */
.eduval-player-item__name { transition: transform var(--eduval-transition); }
.eduval-player-item:hover .eduval-player-item__name { transform: translateX(3px); }
.eduval-player-item.is-active .eduval-player-item__name { transform: translateX(2px); }

/* Section body expand animation */
.eduval-player-topic__body:not(.tutor-display-none) { animation: eduvalPanelDown .3s ease both; }
@keyframes eduvalPanelDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- The player content area (Tutor's markup, recoloured) ---- */
.eduval-tutor-lesson .tutor-video-player-wrapper,
.eduval-tutor-lesson [class*="tutor-video-player"] {
    border-radius: var(--eduval-radius); overflow: hidden; background: #000;
}
.eduval-tutor-lesson .tutor-course-spotlight-wrapper {
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    margin-top: 1.2rem;
    color: var(--eduval-text);
}
/* Spotlight nav tabs (Overview / Comments / etc.) */
.eduval-tutor-lesson .tutor-course-spotlight-nav.tutor-nav {
    border-block-end: 1px solid var(--eduval-border);
    padding: 0 .5rem;
}
.eduval-tutor-lesson .tutor-course-spotlight-nav .tutor-nav-link {
    color: var(--eduval-text-muted) !important; font-weight: 600;
    padding: 1em 1.1em;
}
.eduval-tutor-lesson .tutor-course-spotlight-nav .tutor-nav-link.is-active {
    color: var(--eduval-primary) !important;
    box-shadow: inset 0 -2px 0 var(--eduval-secondary);
}
.eduval-tutor-lesson .tutor-course-spotlight-tab { padding: clamp(1rem, 3vw, 1.8rem); }

/* Mark-complete / nav buttons in the lesson header/footer inherit themed
   .tutor-btn styles defined earlier; ensure text stays readable. */
.eduval-tutor-lesson .tutor-course-topic-single-header,
.eduval-tutor-lesson [class*="single-lesson-header"] {
    background: var(--eduval-surface) !important;
    border-color: var(--eduval-border) !important;
    color: var(--eduval-text) !important;
}

/* ==========================================================================
   Eduval LESSON PLAYER PAGE (single-lesson.php) — full themed shell.
   Sidebar + main column; Tutor's video/tracking core lives inside the stage.
   ========================================================================== */
.eduval-player-page { width: 100%; }
.eduval-player-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    min-height: calc(100vh - var(--eduval-header-h, 72px));
    align-items: start;
}
.eduval-player-aside {
    position: sticky; top: var(--eduval-header-h, 72px);
    height: calc(100vh - var(--eduval-header-h, 72px));
    overflow-y: auto;
    background: var(--eduval-surface);
    border-inline-end: 1px solid var(--eduval-border);
}
.eduval-player-main { min-width: 0; padding: clamp(1rem, 2.5vw, 2rem); }

/* Top bar */
.eduval-player-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1rem; margin-bottom: 1.2rem;
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
}
.eduval-player-bar__left { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.eduval-player-bar__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--eduval-surface-2); color: var(--eduval-primary); flex-shrink: 0;
    transition: background var(--eduval-transition);
}
.eduval-player-bar__back:hover { background: rgba(var(--eduval-secondary-rgb), .16); }
.eduval-player-bar__title { font-size: 1.05rem; font-weight: 800; color: var(--eduval-heading); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eduval-player-bar__progress {
    font-size: .82rem; font-weight: 700; color: var(--eduval-text-muted);
    background: var(--eduval-surface-2); padding: .4em .9em; border-radius: var(--eduval-radius-pill); white-space: nowrap;
}

/* Stage that holds Tutor's video + tabs + mark-complete */
.eduval-player-stage { min-width: 0; }
.eduval-player-stage .tutor-video-player-wrapper,
.eduval-player-stage [class*="tutor-video-player"] {
    border-radius: var(--eduval-radius); overflow: hidden; background: #000;
}
.eduval-player-stage .tutor-course-spotlight-wrapper {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); margin-top: 1.2rem; color: var(--eduval-text);
}
.eduval-player-stage .tutor-course-spotlight-nav.tutor-nav { border-block-end: 1px solid var(--eduval-border); padding: 0 .5rem; }
.eduval-player-stage .tutor-nav-link { color: var(--eduval-text-muted) !important; font-weight: 600; padding: 1em 1.1em; }
.eduval-player-stage .tutor-nav-link.is-active { color: var(--eduval-primary) !important; box-shadow: inset 0 -2px 0 var(--eduval-secondary); }
.eduval-player-stage .tutor-course-spotlight-tab { padding: clamp(1rem, 3vw, 1.8rem); }

/* Quiz player (single-quiz.php): give the delegated Tutor quiz body a themed
   card + comfortable padding, since — unlike the edge-to-edge lesson video — it
   is text/form content. Tutor's own quiz markup keeps its internal styling. */
.eduval-quiz-stage { padding: clamp(1rem, 2.5vw, 1.6rem) 0; }
.eduval-quiz-stage .tutor-quiz-wrapper {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); color: var(--eduval-text);
    padding: clamp(1.1rem, 3vw, 2rem);
}
.eduval-quiz-stage .tutor-quiz-wrapper:empty { display: none; }
.eduval-quiz-stage h1, .eduval-quiz-stage h2, .eduval-quiz-stage h3,
.eduval-quiz-stage h4, .eduval-quiz-stage strong { color: var(--eduval-heading); }

/* ---- Quiz start screen: modern + readable in BOTH light and dark ----
   Tutor's markup uses .tutor-color-black (→ dark text) which was invisible on
   our dark surface. We restyle the specific quiz elements with theme variables
   so they adapt to whichever mode is active. Scoped to .eduval-quiz-stage so no
   other Tutor UI (modals on white, etc.) is affected. */
.eduval-quiz-stage .tutor-start-quiz-wrapper { padding: 0 !important; }
.eduval-quiz-stage .tutor-start-quiz-title { padding-bottom: 0 !important; }
.eduval-quiz-stage .tutor-start-quiz-title .tutor-fs-6 {
    color: var(--eduval-text-muted) !important;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .78rem;
}
.eduval-quiz-stage .tutor-start-quiz-title .tutor-fs-4 {
    color: var(--eduval-heading) !important; font-size: 1.5rem; font-weight: 800; margin-top: .15rem;
}

/* Info shown as a clean responsive card grid */
.eduval-quiz-stage .tutor-quiz-info-area {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem; margin: 1.4rem 0 !important; padding: 0 !important;
}
.eduval-quiz-stage .tutor-quiz-info {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .9rem 1.1rem; background: var(--eduval-surface-2);
    border: 1px solid var(--eduval-border); border-radius: var(--eduval-radius);
}
.eduval-quiz-stage .tutor-quiz-info .tutor-color-muted {
    color: var(--eduval-text-muted) !important; font-size: .76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.eduval-quiz-stage .tutor-quiz-info .tutor-color-black {
    color: var(--eduval-heading) !important; font-size: 1.15rem; font-weight: 800;
}

/* Buttons: brand primary + subtle ghost, correct in dark mode */
.eduval-quiz-stage .tutor-quiz-btn-group,
.eduval-quiz-stage .tutor-quiz-btn-grp { display: flex; align-items: center; gap: .5rem; margin-top: 1.4rem; flex-wrap: wrap; }
.eduval-quiz-stage .tutor-btn-primary,
.eduval-quiz-stage .start-quiz-btn {
    background: var(--eduval-primary) !important; border: 1px solid var(--eduval-primary) !important; color: #fff !important;
    border-radius: var(--eduval-radius); padding: .72em 1.7em; font-weight: 700; font-size: .95rem;
    transition: background var(--eduval-transition), transform var(--eduval-transition);
}
.eduval-quiz-stage .tutor-btn-primary:hover,
.eduval-quiz-stage .start-quiz-btn:hover {
    background: var(--eduval-secondary) !important; border-color: var(--eduval-secondary) !important; transform: translateY(-1px);
}
.eduval-quiz-stage .tutor-btn-ghost,
.eduval-quiz-stage .skip-quiz-btn {
    color: var(--eduval-text-muted) !important; padding: .72em 1.1em !important; font-weight: 700;
    background: transparent !important; border: 0 !important;
}
.eduval-quiz-stage .tutor-btn-ghost:hover,
.eduval-quiz-stage .skip-quiz-btn:hover { color: var(--eduval-primary) !important; }

/* Previous-attempts table: themed + readable in both modes (was a white card
   in dark mode). */
.eduval-quiz-stage .tutor-table {
    width: 100%; border-collapse: collapse; background: var(--eduval-surface);
    color: var(--eduval-text); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); overflow: hidden; margin-top: 1.25rem;
}
.eduval-quiz-stage .tutor-table th {
    background: var(--eduval-surface-2); color: var(--eduval-heading) !important;
    font-weight: 700; text-align: start; padding: .85rem 1rem; border-bottom: 1px solid var(--eduval-border);
}
.eduval-quiz-stage .tutor-table td {
    padding: .85rem 1rem; border-bottom: 1px solid var(--eduval-border); color: var(--eduval-text);
}
.eduval-quiz-stage .tutor-table tr:last-child td { border-bottom: 0; }

/* ---- Quiz RESULTS view (previous attempts) ----
   This is the view shown once a quiz has attempts. Different markup than the
   Start screen: header-context summary (.tutor-quiz-result-summary) + the
   .tutor-table-quiz-attempts table. Tutor's .tutor-color-black values were
   invisible on our dark surface — theme them so both modes read cleanly. */
.eduval-quiz-stage .tutor-color-secondary { color: var(--eduval-text-muted) !important; }
.eduval-quiz-stage .header-title { color: var(--eduval-heading) !important; font-size: 1.4rem; font-weight: 800; }
.eduval-quiz-stage .tutor-quiz-result-summary {
    display: flex; flex-wrap: wrap; gap: .55rem 2.2rem;
    margin: 1.2rem 0; padding: 1.1rem 1.3rem;
    background: var(--eduval-surface-2); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); color: var(--eduval-text-muted); font-weight: 600;
}
.eduval-quiz-stage .tutor-quiz-result-summary > div { color: var(--eduval-text-muted); }
.eduval-quiz-stage .tutor-quiz-result-summary .tutor-color-black {
    color: var(--eduval-heading) !important; font-weight: 800; margin-inline-start: .35rem;
}

/* Attempts table (.tutor-table-quiz-attempts): themed surface, readable in dark. */
.eduval-quiz-stage .tutor-table-quiz-attempts {
    width: 100%; border-collapse: collapse; background: var(--eduval-surface) !important;
    border: 1px solid var(--eduval-border); border-radius: var(--eduval-radius); overflow: hidden;
}
.eduval-quiz-stage .tutor-table-quiz-attempts th,
.eduval-quiz-stage .tutor-table-quiz-attempts td {
    padding: .85rem 1rem; border-bottom: 1px solid var(--eduval-border);
    background: transparent !important; color: var(--eduval-text) !important; text-align: start;
    vertical-align: middle;
}
.eduval-quiz-stage .tutor-table-quiz-attempts th {
    background: var(--eduval-surface-2) !important; color: var(--eduval-heading) !important; font-weight: 700;
}
.eduval-quiz-stage .tutor-table-quiz-attempts tr:last-child td { border-bottom: 0; }
.eduval-quiz-stage .tutor-table-quiz-attempts .tutor-color-secondary,
.eduval-quiz-stage .tutor-table-quiz-attempts .tutor-color-muted,
.eduval-quiz-stage .tutor-table-quiz-attempts .tutor-color-black { color: var(--eduval-text) !important; }
/* "Details" button in each row */
.eduval-quiz-stage .tutor-table-quiz-attempts .tutor-btn-tertiary {
    border: 1px solid var(--eduval-border) !important; color: var(--eduval-text) !important;
    background: var(--eduval-surface) !important; border-radius: var(--eduval-radius); font-weight: 600;
}
.eduval-quiz-stage .tutor-table-quiz-attempts .tutor-btn-tertiary:hover {
    border-color: var(--eduval-primary) !important; color: var(--eduval-primary) !important;
}

/* ---- Active quiz attempt: styling + hide the stray "Reattempt" box ----
   Tutor's #tutor-quiz-time-expire-wrapper / .quiz-flash-message renders a
   warning icon + "Reattempt" button while answering (its alert text is JS-filled
   and usually empty), which looks broken. The top countdown timer + auto-submit
   are unaffected, so we hide this box during the attempt. */
.eduval-quiz-stage .quiz-flash-message { display: none !important; }

/* Attempt meta (Questions No / Attempts / Time remaining) — readable both modes */
.eduval-quiz-stage .quiz-meta-info {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem 1.5rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    background: var(--eduval-surface-2); border: 1px solid var(--eduval-border); border-radius: var(--eduval-radius);
}
.eduval-quiz-stage .quiz-meta-info-left { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.eduval-quiz-stage .quiz-meta-info .tutor-color-secondary { color: var(--eduval-heading) !important; }

/* Question + answer choices */
.eduval-quiz-stage .tutor-quiz-question-title,
.eduval-quiz-stage [class*="question"] > .tutor-fs-5 { color: var(--eduval-heading) !important; }
.eduval-quiz-stage .tutor-quiz-answer-single,
.eduval-quiz-stage [class*="quiz-answer"] label {
    background: var(--eduval-surface-2) !important; border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius); color: var(--eduval-text) !important;
}
.eduval-quiz-stage .tutor-form-check-input:checked ~ *,
.eduval-quiz-stage input[type="radio"]:checked + label { color: var(--eduval-heading) !important; }

/* ---- Lesson player: collapse Tutor's DUPLICATE header ----
   single.lesson.content loads Tutor's own single.common.header (back + title +
   progress + Mark-Complete + close), which duplicated our .eduval-player-bar.
   We keep only the live progress + Mark-as-Complete action and hide the rest,
   then theme the container so it reads as one clean action bar. */
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header {
    background: var(--eduval-surface) !important;
    border: 1px solid var(--eduval-border) !important;
    border-radius: var(--eduval-radius); box-shadow: none !important;
    padding: .55rem .85rem !important; margin: 0 0 1.1rem !important;
    justify-content: flex-end !important; gap: .75rem;
}
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topics-sidebar-toggler,
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header-title,
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header > a.tutor-iconic-btn,
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header a:has(.tutor-icon-times),
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header a:has(.tutor-icon-hamburger-menu) {
    display: none !important;
}
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header .tutor-progress-content,
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header .tutor-fs-7 {
    color: var(--eduval-text-muted) !important;
}

/* ---- Lesson player layout polish ----
   Center the content in a readable column, constrain the video (it was filling
   the whole viewport), and lay the body out as a clean vertical stack. */
.eduval-tutor-lesson .eduval-player-main { max-width: 1120px; margin-inline: auto; }
.eduval-player-stage .tutor-course-topic-single-body {
    display: flex; flex-direction: column; gap: 1.25rem;
}
.eduval-player-stage .tutor-video-player-wrapper {
    box-shadow: var(--eduval-shadow); margin: 0 auto; width: 100%;
}
/* Cap the video height for normal viewing — but ONLY when nothing in the player
   is fullscreen. When the WRAPPER is the fullscreen element, the <video>/iframe
   inside it is not itself :fullscreen, so a plain :not(:fullscreen) on the media
   would STILL cap it and letterbox fullscreen. Gating on the stage with :has()
   removes the cap whenever any descendant is fullscreen. */
.eduval-player-stage:not(:has(:fullscreen)) .tutor-video-player-wrapper video {
    max-height: 74vh; width: 100%; background: #000;
}
/* In fullscreen: the fullscreen element AND its media child must fully fill the
   screen — reset every constraint we (or Tutor) apply. Covers the wrapper, the
   FluidMath iframe, or a natively-fullscreened <video>, and both spellings. */
.eduval-player-stage :fullscreen,
.eduval-player-stage :-webkit-full-screen {
    max-height: none !important; width: 100% !important; height: 100% !important;
    border-radius: 0 !important; overflow: visible !important; margin: 0 !important; background: #000 !important;
}
.eduval-player-stage :fullscreen video,
.eduval-player-stage :fullscreen iframe,
.eduval-player-stage :-webkit-full-screen video,
.eduval-player-stage :-webkit-full-screen iframe {
    max-height: none !important; width: 100% !important; height: 100% !important; object-fit: contain;
}
/* iPhone: Safari has no element Fullscreen API there, so Plyr FAKES fullscreen
   with a position:fixed layer (.plyr--fullscreen-fallback). :fullscreen never
   matches it, so the 74vh cap above stayed on and the "fullscreen" video did not
   fill the screen (worst in landscape). Kept as separate rules: on older iOS an
   unsupported :fullscreen inside one combined selector would drop the whole rule. */
.eduval-player-stage .plyr--fullscreen-fallback,
.eduval-player-stage .plyr--fullscreen-fallback video {
    max-height: none !important; width: 100% !important; height: 100% !important;
    border-radius: 0 !important; object-fit: contain;
}
.eduval-player-stage .tutor-video-player-wrapper:has(.plyr--fullscreen-fallback) {
    overflow: visible !important; border-radius: 0 !important; box-shadow: none !important;
}
/* The stage's fade-in (fill-mode both) leaves it a stacking context, which traps
   the fixed fallback layer under the sticky site header. Drop it while active. */
.eduval-player-stage:has(.plyr--fullscreen-fallback) { animation: none !important; }
html:has(.plyr--fullscreen-fallback), body:has(.plyr--fullscreen-fallback) { overflow: hidden !important; }
/* The ±10s buttons (tutor/single/video/html5.php) add two controls; on a phone
   the bar would crowd the progress bar down to an undraggable sliver. Drop the
   volume group (mute + slider) there — phones set volume with hardware keys,
   and iOS already hides the slider itself. */
@media (max-width: 600px) {
    .eduval-player-stage .plyr__volume { display: none !important; }
}
/* Content tabs (Overview / Comments / …) as a themed card */
.eduval-player-stage .tutor-course-spotlight-wrapper {
    margin-top: 0 !important; box-shadow: var(--eduval-shadow-sm, none);
}
.eduval-player-stage .tutor-course-spotlight-tab .tutor-fs-5,
.eduval-player-stage .tutor-course-spotlight-tab h1,
.eduval-player-stage .tutor-course-spotlight-tab h2,
.eduval-player-stage .tutor-course-spotlight-tab h3 { color: var(--eduval-heading); }
.eduval-player-stage .tutor-course-spotlight-tab,
.eduval-player-stage .tutor-course-spotlight-tab p,
.eduval-player-stage .tutor-course-spotlight-tab li { color: var(--eduval-text); }

/* ---- Prev / Next footer bar (Tutor single.common.footer) ----
   A soft themed bar with pill buttons. Fixes the core dark-mode bug: Tutor's
   .tutor-btn-secondary is a dark grey (#41454f) that vanished on our dark
   navy background — we give Previous an outlined surface (readable) and Next a
   solid brand fill. */
.eduval-player-stage .tutor-course-topic-single-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1.6rem; padding: 1rem 1.25rem;
    background: var(--eduval-surface-2); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
}
.eduval-player-stage .tutor-course-topic-single-footer .tutor-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .68em 1.5em; border-radius: var(--eduval-radius-pill);
    font-weight: 700; font-size: .9rem; line-height: 1.2; text-decoration: none;
    border: 1px solid var(--eduval-border) !important;
    background: var(--eduval-surface) !important; color: var(--eduval-heading) !important;
    transition: background var(--eduval-transition), border-color var(--eduval-transition),
                color var(--eduval-transition), transform var(--eduval-transition), box-shadow var(--eduval-transition);
}
.eduval-player-stage .tutor-course-topic-single-footer .tutor-btn:hover {
    transform: translateY(-1px); box-shadow: var(--eduval-shadow);
    border-color: var(--eduval-primary) !important; color: var(--eduval-primary) !important;
}
.eduval-player-stage .tutor-single-course-content-next .tutor-btn {
    background: var(--eduval-primary) !important; border-color: var(--eduval-primary) !important; color: #fff !important;
}
.eduval-player-stage .tutor-single-course-content-next .tutor-btn:hover {
    background: var(--eduval-secondary) !important; border-color: var(--eduval-secondary) !important; color: #fff !important;
}
.eduval-player-stage .tutor-course-topic-single-footer .tutor-btn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }

/* ---- Fix ALL Tutor buttons that were invisible in dark mode ----
   Tutor's .tutor-btn-secondary / .tutor-btn-outline-* use dark greys or
   transparent-on-dark that blended into our dark background. Re-map any Tutor
   button inside the player to readable, on-brand colours. */
.eduval-player-stage .tutor-btn-secondary,
.eduval-player-stage .tutor-btn-outline-primary,
.eduval-player-stage .tutor-btn-tertiary {
    background: var(--eduval-surface) !important; color: var(--eduval-heading) !important;
    border: 1px solid var(--eduval-border) !important;
}
.eduval-player-stage .tutor-btn-secondary:hover,
.eduval-player-stage .tutor-btn-outline-primary:hover,
.eduval-player-stage .tutor-btn-tertiary:hover {
    color: var(--eduval-primary) !important; border-color: var(--eduval-primary) !important;
    background: var(--eduval-surface-2) !important;
}

/* Mark-as-Complete — make it a clear success CTA (was easy to miss) */
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header .tutor-btn {
    background: var(--eduval-success, #22a35a) !important; border: 1px solid var(--eduval-success, #22a35a) !important;
    color: #fff !important; border-radius: var(--eduval-radius-pill); font-weight: 700; padding: .55em 1.3em;
}
.eduval-tutor-lesson .eduval-player-stage .tutor-course-topic-single-header .tutor-btn:hover { filter: brightness(1.05); }


/* Mobile: sidebar collapses above the player */
@media (max-width: 1024px) {
    .eduval-player-layout { grid-template-columns: 1fr; }
    .eduval-player-aside {
        position: static; height: auto; max-height: 340px;
        border-inline-end: 0; border-block-end: 1px solid var(--eduval-border);
    }
}

/* ==========================================================================
   Eduval — preview + player polish: Tutor nav buttons,
   and light entrance animations. (Fixes unstyled buttons in both pages.)
   ========================================================================== */

/* Tutor lesson nav (Next / Previous) buttons inside our player stage.
   Tutor renders its own player + nav; we leave it at Tutor's default (it reads
   fine on our dark background) and only lightly tint genuine .tutor-btn CTAs so
   they pick up brand colour — WITHOUT touching the video player controls. */
.eduval-player-stage a.tutor-btn-primary,
.eduval-player-stage button.tutor-btn-primary {
    background: var(--eduval-primary); border-color: var(--eduval-primary); color: #fff;
}
.eduval-player-stage a.tutor-btn-primary:hover,
.eduval-player-stage button.tutor-btn-primary:hover {
    background: var(--eduval-secondary); border-color: var(--eduval-secondary);
}

/* Next / Previous lesson-nav buttons are styled by the precise
   .tutor-course-topic-single-footer rules earlier in this file (Previous =
   outline, Next = filled). The old broad [class*="topic-single-footer"] a
   catch-alls were removed — they forced color:#fff on the Previous button,
   turning its white label invisible on its white surface in light mode. */


/* ---- Light entrance animations (respect reduced motion) ---- */
@keyframes eduvalFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes eduvalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.eduval-lecture__main { animation: eduvalFadeUp .5s ease both; }
.eduval-lecture__sidebar { animation: eduvalFadeUp .5s ease .08s both; }
.eduval-lecture__content .eduval-accordion__item { animation: eduvalFadeUp .45s ease both; }
/* Staggered entrance so the section cards cascade in. */
.eduval-lecture__content .eduval-accordion__item:nth-child(1) { animation-delay: .04s; }
.eduval-lecture__content .eduval-accordion__item:nth-child(2) { animation-delay: .10s; }
.eduval-lecture__content .eduval-accordion__item:nth-child(3) { animation-delay: .16s; }
.eduval-lecture__content .eduval-accordion__item:nth-child(4) { animation-delay: .22s; }
.eduval-lecture__content .eduval-accordion__item:nth-child(n+5) { animation-delay: .28s; }
.eduval-player-bar { animation: eduvalFadeUp .45s ease both; }
.eduval-player-stage { animation: eduvalFadeIn .6s ease .1s both; }
.eduval-player-topic { animation: eduvalFadeUp .4s ease both; }

/* Accordion panel expand feels smoother */
.eduval-accordion__panel, .eduval-player-topic__body {
    animation: eduvalFadeIn .25s ease both;
}

/* Hover lift on lesson items + price card action buttons */
.eduval-price-card__action .eduval-btn { transition: transform var(--eduval-transition), box-shadow var(--eduval-transition), background var(--eduval-transition); }
.eduval-price-card__action .eduval-btn:hover { transform: translateY(-2px); box-shadow: var(--eduval-shadow); }

@media (prefers-reduced-motion: reduce) {
    .eduval-lecture__main, .eduval-lecture__sidebar, .eduval-lecture__content .eduval-accordion__item,
    .eduval-player-bar, .eduval-player-stage, .eduval-player-topic,
    .eduval-accordion__panel, .eduval-player-topic__body {
        animation: none !important;
    }
    /* Instant (no height/slide animation) for reduced motion. */
    .eduval-accordion__panel,
    .eduval-accordion__chevron,
    .eduval-lesson { transition: none !important; }
}

/* ==========================================================================
   Eduval INSTRUCTOR / STUDENT PUBLIC PROFILE (tutor-profile.php)
   ========================================================================== */
.eduval-profile-page { width: 100%; }

.eduval-profile-cover {
    background: linear-gradient(135deg, var(--eduval-primary), var(--eduval-secondary));
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
    color: #fff;
}
.eduval-profile-cover__inner {
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
}
.eduval-profile-avatar {
    width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
    border: 4px solid rgba(255,255,255,.85); box-shadow: var(--eduval-shadow);
    flex-shrink: 0; background: var(--eduval-surface);
}
.eduval-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eduval-profile-name { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .5rem; color: #fff; }
.eduval-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.eduval-profile-role {
    font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    background: rgba(255,255,255,.2); padding: .3em .9em; border-radius: var(--eduval-radius-pill);
}
.eduval-profile-rating {
    display: inline-flex; align-items: center; gap: .3em; font-weight: 800;
    background: rgba(255,255,255,.16); padding: .3em .8em; border-radius: var(--eduval-radius-pill);
    color: #ffd76a;
}
.eduval-profile-count {
    font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9);
}

.eduval-profile-body { padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.eduval-profile-section { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.eduval-profile-section__title {
    font-size: 1.3rem; color: var(--eduval-heading); margin-bottom: 1rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--eduval-border);
}

@media (max-width: 640px) {
    .eduval-profile-cover__inner { flex-direction: column; text-align: center; }
    .eduval-profile-meta { justify-content: center; }
}

/* Hide Tutor's collapsed-sidebar reopen toggle (the ">" tab on the content's
   left edge). Our player keeps the sidebar visible via our own layout, so this
   toggle is redundant and visually stray. Also hide the sidebar close "X" since
   our sidebar is a fixed column, not a dismissible drawer, on desktop. */
.eduval-tutor-lesson [tutor-show-course-single-sidebar],
.eduval-tutor-lesson .tutor-course-single-sidebar-open-bar,
.eduval-tutor-lesson [class*="sidebar-open-bar"],
.eduval-tutor-lesson [class*="show-course-single-sidebar"] {
    display: none !important;
}

/* ==========================================================================
   Eduval ADMIN USER DETAILS (author.php) — admin-only view of a user.
   ========================================================================== */
.eduval-admin-user { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.eduval-admin-user__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.2rem;
}
.eduval-admin-user__badge {
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--eduval-accent); padding: .35em .9em; border-radius: var(--eduval-radius-pill);
}
.eduval-btn--sm { padding: .45em 1em; font-size: .85rem; }
.eduval-admin-user .eduval-btn--ghost { background: transparent; border: 1px solid var(--eduval-border); color: var(--eduval-text); }
.eduval-admin-user .eduval-btn--ghost:hover { border-color: var(--eduval-secondary); color: var(--eduval-secondary); }

.eduval-admin-card {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); padding: 1.4rem; box-shadow: var(--eduval-shadow);
}
.eduval-admin-card__title {
    font-size: 1.05rem; color: var(--eduval-heading); margin: 0 0 1rem;
    padding-bottom: .6rem; border-bottom: 1px solid var(--eduval-border);
}

.eduval-admin-user__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.eduval-admin-user__avatar { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--eduval-secondary); }
.eduval-admin-user__name { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--eduval-heading); }
.eduval-admin-user__roles { display: flex; flex-wrap: wrap; gap: .4rem; }

.eduval-chip {
    font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: var(--eduval-radius-pill);
    background: var(--eduval-surface-2); color: var(--eduval-text-muted);
}
.eduval-chip--ok { background: rgba(46,196,110,.16); color: var(--eduval-success); }
.eduval-chip--warn { background: rgba(220,53,69,.16); color: #e5484d; }

.eduval-admin-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem; margin-bottom: 1.4rem;
}
.eduval-admin-stat {
    background: var(--eduval-surface); border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius); padding: 1.1rem; text-align: center;
}
.eduval-admin-stat__num { display: block; font-size: 1.8rem; font-weight: 900; color: var(--eduval-primary); }
.eduval-admin-stat__label { font-size: .8rem; color: var(--eduval-text-muted); }

.eduval-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }

.eduval-admin-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.eduval-admin-dl dt { font-weight: 700; color: var(--eduval-text-muted); font-size: .88rem; }
.eduval-admin-dl dd { margin: 0; color: var(--eduval-text); font-size: .9rem; word-break: break-word; }

.eduval-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.eduval-admin-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.eduval-admin-list a { color: var(--eduval-primary); font-weight: 600; }
.eduval-admin-list a:hover { color: var(--eduval-secondary); }

.eduval-admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.eduval-admin-table th, .eduval-admin-table td { text-align: start; padding: .5em .6em; border-bottom: 1px solid var(--eduval-border); }
.eduval-admin-table th { color: var(--eduval-text-muted); font-weight: 700; }

.eduval-admin-empty { color: var(--eduval-text-muted); font-size: .9rem; margin: 0; }

@media (max-width: 600px) {
    .eduval-admin-user__head { flex-direction: column; text-align: center; }
    .eduval-admin-user__roles { justify-content: center; }
}

/* ==========================================================================
   Eduval — Forgot Password page helpers (matches .eduval-auth card).
   ========================================================================== */
.eduval-auth__lead {
    text-align: center; color: var(--eduval-text-muted); font-size: .95rem;
    line-height: 1.6; margin: 0 0 1.4rem;
}
.eduval-auth__error {
    text-align: center; color: var(--eduval-danger, #dc3545);
    background: rgba(220,53,69,.1); border: 1px solid rgba(220,53,69,.3);
    border-radius: var(--eduval-radius); padding: .7em 1em; margin: 0 0 1.2rem; font-size: .9rem;
}
.eduval-auth__notice {
    display: grid; justify-items: center; gap: .8rem; text-align: center;
    padding: 1.4rem; border-radius: var(--eduval-radius); margin-bottom: 1.4rem;
}
.eduval-auth__notice--ok {
    color: var(--eduval-success, #2ec46e);
    background: rgba(46,196,110,.1); border: 1px solid rgba(46,196,110,.3);
}
.eduval-auth__notice p { margin: 0; color: var(--eduval-text); font-size: .95rem; line-height: 1.6; }
.eduval-auth__row--end { display: flex; justify-content: flex-end; }

/* Free-course enroll form wrapper — keep the button flush like a plain button. */
.eduval-enroll-form { margin: 0; }
.eduval-enroll-form .eduval-btn { width: 100%; }

/* ---------- Contact details (inc/contact.php) ---------- */
/* Footer gains a fourth column; the two middle link lists stay narrow so the
   contact details, which are longer strings, get the room they need. */
.eduval-footer__contact { word-break: break-word; }
.eduval-footer__address { color: #c2cce6; line-height: 1.5; }

/* Appended to the bottom of the Terms / Privacy / Refund pages. Same card as
   the About page's box, but full width so it reads as part of the document. */
.eduval-contact-block {
    display: block;
    background: var(--eduval-surface);
    border: 1px solid var(--eduval-border);
    border-radius: var(--eduval-radius);
    padding: 1.25rem 1.5rem;
    margin-block: 1rem 2rem;
}
.eduval-contact-block p { margin: 0 0 .5rem; }
.eduval-contact-block p:last-child { margin-bottom: 0; }
.eduval-contact-block a { text-decoration: underline; text-underline-offset: 2px; }
.eduval-contact-block__title { margin-top: 2em; }