/* ============================================================
   Training Courses Online Registration — modern theme layer
   AASTMT navy + gold, responsive. Loaded LAST so it overrides.
   ============================================================ */

:root {
    --navy: #14275a;
    --navy-dark: #0e1c42;
    --navy-light: #1e3a7a;
    --gold: #e8b656;
    --gold-dark: #d49f3c;
    --ink: #23293a;
    --muted: #6b7280;
    --bg: #f3f5fb;
    --surface: #ffffff;
    --line: #e6e9f2;
    --success: #2e9e6b;
    --radius: 14px;
    --shadow: 0 6px 24px rgba(20, 39, 90, .08);
    --shadow-hover: 0 12px 32px rgba(20, 39, 90, .16);
    color-scheme: light;
}

/* Declare the active scheme so the browser (and force-dark extensions like Dark Reader /
   Edge "force dark") know the site themes itself and must NOT re-process it - which otherwise
   paints stray light boxes behind text (price, session values) in dark mode. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body, #page-top {
    background: var(--bg) !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Reconnect overlay (custom Blazor reconnect UI, auto-recovers - see _Host.cshtml) */
.reconnect-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(14,28,66,.55); align-items: center; justify-content: center; }
.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected { display: flex; }
.reconnect-box { background: var(--surface); color: var(--ink); padding: 1rem 1.5rem; border-radius: 12px; box-shadow: var(--shadow-hover); display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.reconnect-spinner { width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: reconnect-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }

.container-fluid.home { padding-top: 1.5rem; padding-bottom: 2rem; }

/* ---------- Sticky footer ----------
   Modern flexbox sticky footer: the layout root is a full-height flex column, the content area
   (#wrapper -> #content) grows to fill leftover space, so the footer sits at the bottom of the
   viewport on short pages (e.g. an invoices list with one row) and is pushed down naturally on
   long pages. Result: the footer never changes position between pages. */
.ltr-layout, .rtl-layout { display: flex; flex-direction: column; min-height: 100vh; }
#wrapper { flex: 1 0 auto; }
#content { flex: 1 0 auto; }
.sticky-footer { flex-shrink: 0; margin-top: 0; }

/* ---------- Top navigation / brand ---------- */
.navbar.topbar {
    background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%) !important;
    min-height: 74px;
    padding: .4rem 1.25rem;
}
.sidebar-brand-text h3 { color: var(--gold); font-weight: 800; letter-spacing: .3px; margin: 0; font-size: 1.35rem; line-height: 1.1; }
.sidebar-brand-text h4 { color: #fff; font-weight: 500; margin: 0; font-size: .78rem; opacity: .85; }
.navbar.topbar .btn-outline-light { border-radius: 999px; }
.navbar.topbar .img-profile { border: 2px solid rgba(255,255,255,.5); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-body { padding: 1.5rem; }
.panel-heading h2 { color: var(--navy); font-weight: 800; font-size: 1.5rem; margin-bottom: .25rem; }
.panel-heading h2::after {
    content: ""; display: block; width: 54px; height: 4px; margin-top: .5rem;
    background: var(--gold); border-radius: 4px;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; transition: all .18s ease; }
.btn-lg { border-radius: 12px; padding: .6rem 1.4rem; }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); transform: translateY(-1px); }
.btn-secondary { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }
.btn-secondary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--navy-dark); transform: translateY(-1px); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn-outline-primary { color: var(--navy); border-color: var(--navy); }
.btn-outline-primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-outline-secondary { color: var(--navy); border-color: var(--line); }
.btn-outline-secondary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Dark mode: navy outline/text on a dark surface is barely visible - use a light-blue outline + light text */
:root[data-theme="dark"] .btn-outline-primary { color: #cdd6ee; border-color: #3a4a72; }
:root[data-theme="dark"] .btn-outline-primary:hover { background: #3a4a72; border-color: #3a4a72; color: #fff; }
:root[data-theme="dark"] .btn-outline-secondary { color: #cdd6ee; border-color: var(--line); }
:root[data-theme="dark"] .btn-outline-secondary:hover { background: #3a4a72; border-color: #3a4a72; color: #fff; }

/* ---------- Helpers reused across the app ---------- */
.text-gold { color: var(--gold) !important; }
.text-blue { color: var(--navy) !important; }
.badge-primary { background: var(--navy); }
.badge-info { background: #2b83c4; }
.pagelabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted) !important; }
.pagevalue { font-size: .95rem; color: var(--ink); font-weight: 600; }

/* ---------- Course catalogue list ---------- */
.courseList { display: flex; flex-direction: column; gap: 1rem; }
.courseItem {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--gold);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: 0 !important;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    align-items: center;
}
.courseItem:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-left-color: var(--navy); }
.courseItem .courseCode {
    background: var(--navy); color: #fff; border-radius: 10px;
    padding: .5rem; font-weight: 700; text-align: center; font-size: .85rem;
}
.courseItem h1, .courseItem h1 a { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 0 0 .25rem; }
.courseItem h1 a:hover { color: var(--gold-dark); text-decoration: none; }
.courseItem p { color: var(--muted); font-size: .9rem; margin: .35rem 0 0; }
.coursePrice { font-size: 1.35rem; font-weight: 800; color: var(--navy); text-align: center; }
.coursePrice span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.coursePrice ins { color: var(--success); text-decoration: none; }
.coursePrice del { color: var(--muted); font-size: .95rem; }

/* ---------- Course details cover ---------- */
.card-cover .bgCoverImage { min-height: 190px; background-size: cover; background-position: center; }
.card-cover .overlay { background: linear-gradient(180deg, rgba(14,28,66,.35), rgba(14,28,66,.78)); }
.courseContent h1 { color: #fff; font-weight: 800; }
.anchorList { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.anchorList li a {
    display: inline-block; padding: .35rem .9rem; border-radius: 999px;
    background: #eef1f8; color: var(--navy); font-weight: 600; font-size: .85rem;
}
.anchorList li a:hover { background: var(--navy); color: #fff; text-decoration: none; }

/* ---------- Session cards ---------- */
.courseSessions {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.courseSessions:hover { box-shadow: var(--shadow); border-color: #c9d2ea; }
.courseSessions.selectedSession {
    border-color: var(--gold);
    background: #fbf6ea;
    box-shadow: 0 0 0 2px rgba(232,182,86,.35) inset;
}
.courseSessions .table { margin-bottom: 0; }
.courseSessions .table thead th { border-top: none; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; }

/* Session-row field labels: small, proper-case (not uppercase), single line so the value below aligns */
.sess-label { font-size: .68rem; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: 0; white-space: nowrap; }
:root[data-theme="dark"] .sess-label { color: #dbe3f7; }
.courseSessions .pagevalue { font-size: .85rem; }
/* Date range stays a single left-to-right, non-wrapping unit even in RTL (dates are inherently LTR) */
.sess-date { direction: ltr; unicode-bidi: isolate; white-space: nowrap; display: inline-block; }
[dir="rtl"] .sess-date, .rtl-layout .sess-date { text-align: right; }

/* Full/complete session: still listed but closed for registration - dimmed, not selectable */
.courseSessions.sessionFull { opacity: .6; cursor: not-allowed; background: var(--bg); }
.courseSessions.sessionFull:hover { box-shadow: none; border-color: var(--line); }
.session-complete-badge {
    display: inline-block; margin-inline-start: .5rem; padding: .1rem .55rem; border-radius: 999px;
    background: var(--danger, #dc3545); color: #fff; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}

/* ---------- Forms ---------- */
.form-control { border-radius: 10px; border-color: var(--line); }
.form-control:focus { border-color: var(--navy-light); box-shadow: 0 0 0 .2rem rgba(30,58,122,.15); }
label.control-label, .form-group > label { font-weight: 600; color: var(--navy); }

/* ---------- Loading spinner container ---------- */
.aastLoading { min-height: 120px; }

/* ---------- Footer ---------- */
.sticky-footer { background: transparent; padding: 1.25rem 0; }
.sticky-footer .copyright { color: var(--muted); font-size: .82rem; }

/* ---------- Landing hero (Index) ---------- */
.card .sidebar-brand-icon .fa-graduation-cap { color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .card-body { padding: 1.1rem; }
    .courseItem { border-left-width: 4px; }
    .panel-heading h2 { font-size: 1.25rem; }
    .sidebar-brand-text h3 { font-size: 1.1rem; }
    .coursePrice { text-align: left; margin-top: .5rem; }
}

/* Scroll-to-top button on brand colour */
.scroll-to-top { background: var(--navy); border-radius: 12px; }
.scroll-to-top:hover { background: var(--navy-dark); }

/* ---------- Login card: wide enough for platform + university each on one line ---------- */
.loginBG .loginCard { max-width: 620px; width: 100%; float: none; }
.loginBG .card-body { padding: 2rem 2.25rem; }
.loginBG .sidebar-brand { flex-direction: column; text-align: center; }
.loginBG .sidebar-brand-icon img { width: 64px !important; height: 64px !important; margin-bottom: .5rem; }
.loginBG .sidebar-brand-text { margin: 0 !important; }
.loginBG .sidebar-brand-text h3 { font-size: 1.3rem; line-height: 1.2; white-space: nowrap; margin-bottom: .2rem; }
.loginBG .sidebar-brand-text h4 { font-size: .82rem; white-space: nowrap; }

/* ---------- Catalogue search + filter toolbar ---------- */
.catalog-toolbar { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.catalog-search { position:relative; flex:1 1 320px; min-width:220px; }
.catalog-search > i.fa-search { position:absolute; top:50%; inset-inline-start:.9rem; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.catalog-search .form-control { padding-inline-start:2.4rem; padding-inline-end:2.4rem; border-radius:999px; height:auto; padding-top:.6rem; padding-bottom:.6rem; }
.catalog-clear { position:absolute; top:50%; inset-inline-end:.6rem; transform:translateY(-50%); background:transparent; border:none; color:var(--muted); cursor:pointer; padding:.25rem .4rem; border-radius:50%; }
.catalog-clear:hover { background:var(--bg); color:var(--navy); }
.catalog-count { color:var(--muted); font-size:.9rem; font-weight:600; margin-bottom:.85rem; }

/* ---------- Custom category dropdown ----------
   The trigger keeps the previous compact <select> look (240px pill next to search);
   only the popup menu is styled, since a native <select> popup can't be styled/themed. */
.catalog-cat-dd { position:relative; flex:0 0 240px; max-width:240px; }
.catalog-cat-toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:var(--surface); color:var(--ink); border:1px solid var(--line);
    border-radius:999px; padding:.6rem 1rem; font-weight:400; font-size:.9rem; height:auto;
    cursor:pointer; transition:border-color .15s;
}
.catalog-cat-toggle:hover, .catalog-cat-dd.open .catalog-cat-toggle { border-color:var(--gold); }
.catalog-cat-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catalog-cat-toggle > i.fa-chevron-down { color:var(--muted); font-size:.72rem; transition:transform .18s; flex:0 0 auto; }
.catalog-cat-dd.open .catalog-cat-toggle > i.fa-chevron-down { transform:rotate(180deg); }

/* transparent full-screen layer to close the menu on any outside click/tap */
.catalog-cat-backdrop { position:fixed; inset:0; z-index:1040; background:transparent; }

.catalog-cat-menu {
    position:absolute; z-index:1050; top:calc(100% + .35rem); inset-inline-start:0;
    width:100%; min-width:240px; margin:0; padding:.3rem; list-style:none;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow-hover); max-height:300px; overflow-y:auto;
    animation:catalog-cat-in .13s ease-out;
}
@keyframes catalog-cat-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.catalog-cat-menu li {
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.5rem .75rem; border-radius:8px; cursor:pointer; color:var(--ink);
    font-size:.9rem; font-weight:400; line-height:1.3;
}
.catalog-cat-menu li:hover { background:var(--bg); }
.catalog-cat-menu li.selected { color:var(--gold); font-weight:600; }
.catalog-cat-menu li.selected i.fa-check { color:var(--gold); font-size:.8rem; flex:0 0 auto; }
/* Dark mode: thin light text on the dark menu reads as faint - make options bold + brighter
   (keep the selected row gold). Applies to both the category and campus dropdowns. */
:root[data-theme="dark"] .catalog-cat-toggle { color:#ffffff; font-weight:600; }
:root[data-theme="dark"] .catalog-cat-menu li { color:#ffffff; font-weight:600; }
:root[data-theme="dark"] .catalog-cat-menu li.selected { color:var(--gold); }
:root[data-theme="dark"] .catalog-cat-menu li:hover { background:#22304f; }

@media (max-width: 575px){ .catalog-cat-dd { flex:1 1 100%; max-width:none; } }

/* ---------- Course catalogue: modern card grid (Coursera/Udemy style) ---------- */
.course-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    cursor: pointer; height: 100%; display: flex; flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.course-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.course-card-cover {
    position: relative; height: 120px; overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    display: flex; align-items: center; justify-content: center;
}
/* graduation-cap sits under the photo; shows through when there is no photo OR the image 404s */
.course-card-cover i { font-size: 2.6rem; color: rgba(255,255,255,.85); }
.course-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.course-card-cover .course-card-code {
    position: absolute; top: 10px; inset-inline-start: 10px; background: var(--gold);
    color: var(--navy-dark); font-weight: 700; font-size: .72rem; padding: .2rem .5rem; border-radius: 6px; z-index: 2;
}
.course-card-body { padding: 1rem 1.15rem; flex: 1 1 auto; }
.course-card-cat { background: #eef1f8; color: var(--navy); font-weight: 600; }
.course-card-title {
    font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: .5rem 0 .4rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card-desc {
    color: var(--muted); font-size: .85rem; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card-footer {
    padding: .85rem 1.15rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.course-card-price { font-weight: 800; color: var(--navy); font-size: 1.1rem; white-space: nowrap; }
.course-card-price small { color: var(--muted); font-weight: 600; font-size: .7rem; }
.course-card-price del { color: var(--muted); font-weight: 500; font-size: .85rem; }
.course-card-price ins { color: var(--success); text-decoration: none; }
.course-card-cta { color: var(--gold-dark); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.course-card:hover .course-card-cta { color: var(--navy); }

/* ============================================================
   Dark / light theme
   ============================================================ */
.theme-toggle {
    background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff;
    border-radius: 999px; width: 40px; height: 40px; margin-left: 1rem; cursor: pointer;
    flex: 0 0 auto; transition: background .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.15); }

/* Standalone toggle on the Login page (no top nav there to host the usual button) */
.login-theme-toggle {
    position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 10;
    background: var(--surface); border-color: var(--line); color: var(--navy);
    box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
}
.login-theme-toggle:hover { background: var(--bg); }
:root[data-theme="dark"] .login-theme-toggle { color: #dbe3f7; }

/* Login logo: swap to the white crest in dark mode (the navy crest is invisible on a dark card) */
.login-logo-dark { display: none; }
:root[data-theme="dark"] .login-logo-light { display: none; }
:root[data-theme="dark"] .login-logo-dark { display: inline-block; }

:root[data-theme="dark"] {
    --ink: #e7ebf5;
    --muted: #9aa6c2;
    --bg: #0d1424;
    --surface: #16203a;
    --line: #26314f;
    --shadow: 0 6px 24px rgba(0,0,0,.45);
    --shadow-hover: 0 12px 32px rgba(0,0,0,.6);
}
/* Surfaces */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .course-card,
:root[data-theme="dark"] .courseSessions { background: var(--surface); }
:root[data-theme="dark"] .courseSessions.selectedSession { background: #2a2411; }
/* Navy text -> light on dark surfaces */
:root[data-theme="dark"] .text-blue,
:root[data-theme="dark"] .panel-heading h2,
:root[data-theme="dark"] .course-card-title,
:root[data-theme="dark"] .courseItem h1,
:root[data-theme="dark"] .courseItem h1 a,
:root[data-theme="dark"] .course-card-price,
:root[data-theme="dark"] .cd-price,
:root[data-theme="dark"] label.control-label,
:root[data-theme="dark"] .form-group > label,
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2,
:root[data-theme="dark"] h3, :root[data-theme="dark"] h4,
:root[data-theme="dark"] .pagevalue { color: #dbe3f7 !important; }
:root[data-theme="dark"] .pagelabel, :root[data-theme="dark"] .course-card-desc,
:root[data-theme="dark"] .courseItem p { color: var(--muted) !important; }

/* Enroll-card selection prompt: keep legible in both empty/filled states */
:root[data-theme="dark"] .cd-selected { color: #dbe3f7; }
:root[data-theme="dark"] .cd-selected.empty { color: #aeb9d6; }

/* Profile info tiles: force the dark surface (var(--bg) alone wasn't taking effect) */
:root[data-theme="dark"] .profile-item { background: #0f1830; border-color: var(--line); }

/* Empty-state message box (My Invoices / My Courses / Cart) - was always light, regardless of theme */
:root[data-theme="dark"] .PageMessage { background-color: #0f1830; border-color: var(--line); }
:root[data-theme="dark"] .PageMessage h1 { color: #dbe3f7; }
:root[data-theme="dark"] .PageMessage p { color: var(--muted); }

/* SweetAlert2 confirmation/message popups - match the dark theme instead of a jarring white flash */
:root[data-theme="dark"] .swal2-popup { background: var(--surface) !important; }
:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-content,
:root[data-theme="dark"] .swal2-html-container { color: var(--ink) !important; }
:root[data-theme="dark"] .swal2-close { color: var(--muted) !important; }
/* Chips / inputs / tables */
:root[data-theme="dark"] .course-card-cat,
:root[data-theme="dark"] .anchorList li a { background: #22304f; color: #cdd6ee; }
/* Legacy bootstrap/custom badges default to a light grey box - keep them dark-surface in dark mode */
:root[data-theme="dark"] .badge:not(.cd-hero-cat):not(.course-card-cat),
:root[data-theme="dark"] .badge-light { background: #22304f; color: #cdd6ee; }
:root[data-theme="dark"] .form-control { background: #0f1830; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .form-control::placeholder { color: #6f7b9a; }
:root[data-theme="dark"] .table { color: var(--ink); }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .sticky-footer .copyright { color: var(--muted); }
:root[data-theme="dark"] hr { border-color: var(--line); background-color: var(--line); }

/* Dark mode: also darken the SB-Admin wrapper backgrounds behind the cards */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #page-top,
:root[data-theme="dark"] #wrapper,
:root[data-theme="dark"] #content-wrapper,
:root[data-theme="dark"] #content,
:root[data-theme="dark"] .container-fluid.home,
:root[data-theme="dark"] .loginBG { background: var(--bg) !important; }

:root[data-theme="dark"] .widget { background: #0f1830; color: var(--ink); border-radius: 8px; padding: .5rem .75rem; }

/* ---------- Header user dropdown (Coursera-style) ---------- */
.navbar.topbar .dropdown-menu { border: none; border-radius: 12px; box-shadow: var(--shadow-hover); padding: .4rem; margin-top: .6rem; min-width: 220px; }
/* Keep the user menu a consistent width across mobile/tablet/desktop. SB Admin 2 (aast.css)
   forces the topbar dropdown to near-full width below 576px (width: calc(100% - 1.5rem)),
   which made the EN menu stretch full-width on phones while the RTL menu stayed compact.
   Override to shrink-to-content (min 220px, capped to the viewport) in both directions. */
.navbar.topbar .dropdown .dropdown-menu-right { width: auto; min-width: 220px; max-width: calc(100vw - 1.5rem); }
.navbar.topbar .dropdown-item { border-radius: 8px; padding: .55rem .8rem; font-weight: 500; color: var(--ink); }
.navbar.topbar .dropdown-item:hover { background: #eef1f8; }
.navbar.topbar .dropdown-toggle::after { color: rgba(255,255,255,.7); }
:root[data-theme="dark"] .navbar.topbar .dropdown-menu { background: var(--surface); }
:root[data-theme="dark"] .navbar.topbar .dropdown-item { color: var(--ink); }
:root[data-theme="dark"] .navbar.topbar .dropdown-item:hover { background: #22304f; }

/* Issue 3: in RTL the avatar sits on the LEFT, so the user menu must open toward the right
   (align its left edge to the toggle) instead of overflowing off the right edge. */
.rtl-layout .navbar.topbar .dropdown-menu-right { right: auto; left: 0; }

/* Issue 2: native <select> popup renders light on mobile in dark mode - mobile browsers don't
   always inherit the root color-scheme for the option list. Force it dark + style the options. */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control { color-scheme: dark; }
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup { background-color: #16203a; color: #e7ebf5; }

/* ---------- Header controls cluster (language, theme, cart, user) ---------- */
.navbar.topbar .nav-icon-btn {
    background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
    border-radius: 999px; padding: .38rem .7rem; margin: 0 .3rem; cursor: pointer;
    font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem;
    text-decoration: none; line-height: 1; transition: background .15s ease;
}
.navbar.topbar .nav-icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
/* Cart item-count badge */
.navbar.topbar .cart-icon-btn { position: relative; }
.navbar.topbar .cart-badge {
    position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--navy-dark);
    font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--navy);
}
/* Primary nav link (Course Catalog) */
.navbar.topbar .nav-primary-link {
    color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
    padding: .5rem .9rem; border-radius: 8px; display: inline-flex; align-items: center;
    transition: background .15s ease, color .15s ease;
}
.navbar.topbar .nav-primary-link:hover { background: rgba(255,255,255,.14); color: var(--gold); }
.navbar.topbar .nav-primary-link.active { color: var(--gold); background: rgba(255,255,255,.1); }
.navbar.topbar .user-toggle { display: inline-flex; align-items: center; }
.navbar.topbar .dropdown-header { font-weight: 700; color: var(--navy); padding: .5rem .8rem; }
:root[data-theme="dark"] .navbar.topbar .dropdown-header { color: var(--ink); }
.mstart-1 { margin-inline-start: .3rem; }

/* ============================================================
   Course details — Udemy/Coursera style (hero + tabs + sticky enroll)
   ============================================================ */
/* Full-width cover-photo banner hero (Course Details, option A) */
.cd-banner { position: relative; border-radius: 14px; overflow: hidden; margin: 0 0 1.25rem; min-height: 250px; display: flex; align-items: flex-end; background-size: cover; background-position: center; box-shadow: var(--shadow); }
.cd-banner-body { position: relative; z-index: 2; padding: 1.6rem 1.9rem; width: 100%; color: #fff; }
.cd-banner-body h1 { color: #fff; font-weight: 800; font-size: 1.95rem; margin: .5rem 0 0; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.cd-banner .cd-back { color: rgba(255,255,255,.9); }
.cd-banner .cd-back:hover { color: #fff; }
.cd-banner-meta { margin-top: .9rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.cd-banner-meta span { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.25); padding: .35rem .75rem; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 600; }
.cd-banner-meta i { color: var(--gold); margin-inline-end: .35rem; }
@media (max-width: 767.98px){ .cd-banner { min-height: 180px; } .cd-banner-body h1 { font-size: 1.4rem; } }

/* Light hero with a slim gold accent rail (replaces the heavy navy band) */
.cd-hero { position: relative; background: var(--surface); color: var(--ink); border:1px solid var(--line); border-inline-start:5px solid var(--gold); border-radius:14px; overflow:hidden; margin:0 0 1.25rem; display:flex; box-shadow: var(--shadow); }
.cd-hero-body { padding: 1.5rem 1.85rem; flex:1 1 auto; z-index:2; }
.cd-hero-body h1 { color:var(--navy); font-weight:800; font-size:1.8rem; margin:.5rem 0 0; }
.cd-back { color: var(--muted); font-weight:600; font-size:.85rem; text-decoration:none; }
.cd-back:hover { color: var(--navy); }
.cd-hero-cat { background: var(--gold); color: var(--navy-dark); font-weight:700; margin-top:.75rem; display:inline-block; }
.cd-hero-meta { margin-top:.9rem; display:flex; gap:.75rem; flex-wrap:wrap; color: var(--muted); font-size:.9rem; }
.cd-hero-meta i { color: var(--gold-dark); margin-inline-end:.35rem; }
.cd-hero-img { width:210px; flex:0 0 210px; background-size:cover; background-position:center; border-radius:12px; margin:1rem; }
@media (max-width: 767.98px){ .cd-hero-img{ display:none; } .cd-hero-body h1{ font-size:1.4rem; } }

.cd-tabs { display:flex; gap:.4rem; margin-bottom:-1px; flex-wrap:wrap; }
.cd-tab { background:#eef1f8; border:1px solid var(--line); border-bottom:none; color:var(--navy); font-weight:700; padding:.6rem 1.1rem; border-radius:12px 12px 0 0; cursor:pointer; }
.cd-tab.active { background: var(--surface); box-shadow: 0 -3px 0 var(--gold) inset; }
/* The base .card is overflow:hidden, which clips the campus dropdown popup inside the tab panel.
   Allow it to overflow so the branded dropdown menu isn't cut off. */
.card.cd-panel { border-radius:0 14px 14px 14px; overflow:visible; }
.cd-panel h3 { color: var(--navy); font-weight:700; font-size:1.2rem; }
.cd-list { list-style:none; padding:0; margin:0; }
.cd-list li { padding:.35rem 0; }
.cd-list li i { margin-inline-end:.5rem; }

.cd-enroll { position: sticky; top: 90px; margin-top: 2.75rem; } /* aligns enroll-card top with .cd-panel top (below the .cd-tabs row) */
.cd-price { font-size:2rem; font-weight:800; color:var(--navy); margin-bottom:.5rem; }
.cd-price span { font-size:.9rem; color:var(--muted); font-weight:600; }
.cd-price del { color:var(--muted); font-size:1.15rem; font-weight:500; }
.cd-price ins { color:var(--success); text-decoration:none; }
.cd-selected { background:#f3f5fb; border-radius:10px; padding:.6rem .75rem; font-size:.85rem; margin-bottom:.75rem; color:var(--ink); }
.cd-selected.empty { color:var(--muted); }
/* AAST-only notice, under the enroll button: informational for an AASTMT student (gold),
   a blocking reason for anyone else (red). Sits between the button and the facts list. */
.cd-aast-only { display:flex; align-items:flex-start; gap:.5rem; margin-top:.75rem; padding:.6rem .75rem;
                border-radius:10px; font-size:.82rem; font-weight:600; line-height:1.45;
                background:rgba(232,182,86,.14); border:1px solid rgba(232,182,86,.5); color:var(--navy); }
.cd-aast-only i { margin-top:.15rem; color:var(--gold-dark); }
.cd-aast-only.blocked { background:rgba(220,53,69,.10); border-color:rgba(220,53,69,.42); color:#a3222d; }
.cd-aast-only.blocked i { color:#dc3545; }
:root[data-theme="dark"] .cd-aast-only { background:rgba(232,182,86,.12); color:#e7ecfa; }
:root[data-theme="dark"] .cd-aast-only.blocked { background:rgba(220,53,69,.16); color:#ffc9ce; }

.cd-facts { list-style:none; padding:0; margin:1rem 0 0; }
.cd-facts li { padding:.45rem 0; border-top:1px solid var(--line); font-size:.88rem; }
.cd-facts li i { margin-inline-end:.5rem; width:18px; text-align:center; }
:root[data-theme="dark"] .cd-tab { background:#1a2540; color:#cdd6ee; }
:root[data-theme="dark"] .cd-tab.active { background: var(--surface); }
:root[data-theme="dark"] .cd-selected { background:#0f1830; }

.cd-hero-meta span { background: var(--bg); color: var(--ink); border:1px solid var(--line); padding:.35rem .75rem; border-radius:999px; display:inline-flex; align-items:center; font-weight:600; }

/* ============================================================
   Cart — item cards + sticky order summary
   ============================================================ */
.cart-item { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; margin-bottom:.85rem; box-shadow:var(--shadow); }
.cart-item-code { background:var(--navy); color:#fff; border-radius:8px; padding:.5rem .6rem; font-weight:700; font-size:.8rem; flex:0 0 auto; }
.cart-item-info { flex:1 1 auto; min-width:0; }
.cart-item-info h3 { font-size:1.05rem; font-weight:700; margin:0; }
.cart-item-info h3 a { color:var(--navy); text-decoration:none; }
.cart-item-info h3 a:hover { color:var(--gold-dark); }
.cart-item-meta { color:var(--muted); font-size:.85rem; margin-top:.25rem; }
.cart-item-price { font-weight:800; color:var(--navy); font-size:1.1rem; white-space:nowrap; }
.cart-item-price span { font-size:.7rem; color:var(--muted); }
.cart-item-remove { background:transparent; border:none; color:#c0392b; cursor:pointer; padding:.5rem .7rem; border-radius:8px; flex:0 0 auto; }
.cart-item-remove:hover { background:#fdecea; }
.cart-summary { position:sticky; top:90px; }
.cart-summary h3 { font-size:1.2rem; font-weight:700; color:var(--navy); }
.summary-row { display:flex; justify-content:space-between; padding:.55rem 0; border-top:1px solid var(--line); }
.summary-row.total { font-weight:800; color:var(--navy); font-size:1.15rem; }
:root[data-theme="dark"] .cart-item-info h3 a, :root[data-theme="dark"] .cart-item-price,
:root[data-theme="dark"] .cart-summary h3, :root[data-theme="dark"] .summary-row.total { color:#dbe3f7; }
:root[data-theme="dark"] .cart-item-remove:hover { background:#3a1e1e; }

/* ---------- Invoice / receipt (modern) ---------- */
.inv-no { color:var(--gold-dark); font-weight:800; }
.inv-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.inv-top {
    display:flex; align-items:center; justify-content:space-between;
    background: var(--bg); border-bottom:1px solid var(--line); border-top:4px solid var(--gold);
    padding:1rem 1.5rem;
}
.inv-top-label { font-weight:800; color:var(--navy); font-size:1.05rem; }
.inv-top-label i { margin-inline-end:.4rem; color: var(--gold-dark); }
.inv-status { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem; padding:.4rem .9rem; border-radius:999px; }
.inv-status.paid { background:rgba(46,158,107,.15); color:var(--success); }
.inv-status.unpaid { background:rgba(232,182,86,.22); color:var(--gold-dark); }
:root[data-theme="dark"] .inv-top-label { color:#dbe3f7; }
.inv-body { padding:1.75rem; }
.inv-greeting { font-size:1.15rem; color:var(--navy); font-weight:700; margin-bottom:.4rem; }
.inv-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:1.5rem 0; padding:1.1rem 1.25rem; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.inv-meta-block h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:.6rem; }
.inv-meta-block div { margin-bottom:.3rem; color:var(--ink); font-size:.92rem; }
.inv-meta-right { text-align:end; }
.inv-lbl { color:var(--muted); font-weight:600; margin-inline-end:.35rem; }
.inv-pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem; }
.inv-pill.paid { background:rgba(46,158,107,.15); color:var(--success); }
.inv-pill.unpaid { background:rgba(232,182,86,.2); color:var(--gold-dark); }
.inv-section-title { font-size:1.1rem; font-weight:700; color:var(--navy); margin:1.25rem 0 .75rem; }
.inv-items { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.inv-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.inv-item:last-child { border-bottom:none; }
.inv-item-info h3 { font-size:1.02rem; font-weight:700; color:var(--navy); margin:0; }
.inv-item-meta { color:var(--muted); font-size:.85rem; margin-inline-end:.9rem; display:inline-block; }
.inv-item-price { font-weight:800; color:var(--navy); font-size:1.1rem; white-space:nowrap; }
.inv-item-price small { font-size:.7rem; color:var(--muted); }
.inv-total { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding:1rem 1.15rem; background:var(--navy); color:#fff; border-radius:12px; font-size:1.15rem; font-weight:700; }
.inv-total-amt { color:var(--gold); font-size:1.4rem; font-weight:800; }
.inv-total-amt small { font-size:.75rem; color:rgba(255,255,255,.75); }
.inv-pay { margin-top:1.25rem; }
:root[data-theme="dark"] .inv-greeting, :root[data-theme="dark"] .inv-section-title,
:root[data-theme="dark"] .inv-item-info h3, :root[data-theme="dark"] .inv-item-price, :root[data-theme="dark"] .inv-no { color:#dbe3f7; }
:root[data-theme="dark"] .inv-meta-block div { color:var(--ink); }
@media (max-width: 575px) {
    .inv-meta-grid { grid-template-columns:1fr; }
    .inv-meta-right { text-align:start; }
    .inv-top { padding:.9rem 1rem; }
    .inv-body { padding:1.15rem; }
}

/* ---------- Session schedule component ---------- */
.schedule-block { padding-top:.35rem; }
.schedule-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.85rem; }
.schedule-chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; font-size:.85rem; color:var(--ink); }
.schedule-chip-label { color:var(--navy); font-weight:700; }
.schedule-title { color:var(--navy); font-weight:700; font-size:1rem; margin:.25rem 0 .6rem; }
.schedule-table-wrap { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.schedule-table { margin:0; font-size:.88rem; }
.schedule-table thead th { background:var(--bg); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; font-size:.72rem; border-bottom:1px solid var(--line); border-top:none; padding:.6rem .85rem; white-space:nowrap; }
.schedule-table tbody td { padding:.6rem .85rem; border-top:1px solid var(--line); vertical-align:middle; color:var(--ink); }
.schedule-table tbody tr:hover { background:rgba(20,39,90,.03); }
.schedule-date { font-weight:600; color:var(--navy); white-space:nowrap; }
.schedule-mode { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem; }
.schedule-mode.online { background:rgba(46,158,107,.15); color:var(--success); }
.schedule-mode.campus { background:rgba(20,39,90,.08); color:var(--navy); }
:root[data-theme="dark"] .schedule-chip-label, :root[data-theme="dark"] .schedule-title, :root[data-theme="dark"] .schedule-date { color:#dbe3f7; }
:root[data-theme="dark"] .schedule-table tbody tr:hover { background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .schedule-mode.campus { background:rgba(255,255,255,.08); color:#cdd6ee; }

/* ---------- Landing / hero ---------- */
.landing-hero { display:flex; justify-content:center; padding:3rem 1rem; }
.landing-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); max-width:760px; width:100%; text-align:center; padding:3rem 2.5rem; }
.landing-icon { width:88px; height:88px; margin:0 auto 1.25rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color:var(--gold); font-size:2.2rem; box-shadow:var(--shadow); }
.landing-title { color:var(--navy); font-weight:800; font-size:2rem; margin-bottom:.35rem; }
.landing-univ { color:var(--gold-dark); font-weight:600; margin-bottom:1rem; }
.landing-tagline { color:var(--muted); font-size:1.05rem; max-width:560px; margin:0 auto; line-height:1.7; }
.landing-tagline-headline { font-weight:700; color:var(--navy); margin-bottom:.35rem; padding-top:40px;}
.landing-tagline-sub { margin-bottom:1.75rem; }
.landing-actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.btn-gold { background:var(--gold); border-color:var(--gold); color:var(--navy-dark); font-weight:700; }
.btn-gold:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
:root[data-theme="dark"] .landing-title { color:#dbe3f7; }
:root[data-theme="dark"] .landing-tagline-headline { color:#dbe3f7; }

/* ---------- Auth / form card (Create Account) ---------- */
.auth-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.auth-head { text-align:center; padding:2rem 1.5rem 1.25rem; border-top:4px solid var(--gold); background:var(--bg); border-bottom:1px solid var(--line); }
.auth-icon { width:64px; height:64px; margin:0 auto .75rem; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.55rem; box-shadow:var(--shadow); }
.auth-head h2 { color:var(--navy); font-weight:800; margin:0; }
.auth-head p { color:var(--muted); margin:.35rem 0 0; }
:root[data-theme="dark"] .auth-head h2 { color:#dbe3f7; }

/* ---- Registration form: grouped name sections + label hierarchy ---- */
.reg-group { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:1rem 1rem .4rem; margin-bottom:1.1rem; }
.reg-group-title { font-size:1rem; font-weight:700; color:var(--navy); margin:0 0 .9rem; padding-bottom:.5rem; border-bottom:2px solid var(--gold); display:inline-flex; align-items:center; gap:.45rem; }
.reg-group-title i { color:var(--gold-dark); font-size:.9em; }
/* Sub-field labels (First/Second/Third/Fourth) smaller + muted, below the group title */
.reg-group .form-group > label { font-size:.74rem; font-weight:600; color:var(--muted); letter-spacing:.3px; margin-bottom:.3rem; text-transform:none; }
:root[data-theme="dark"] .reg-group-title { color:#dbe3f7; }

/* Profile card (shares .auth-card / .auth-head) */
.profile-avatar { width:82px; height:82px; border-radius:50%; object-fit:cover; margin:0 auto .75rem; display:block; border:3px solid var(--gold); box-shadow:var(--shadow); background:#fff; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.profile-item { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.3rem; }
.profile-label { color:var(--muted); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.profile-value { color:var(--navy); font-weight:700; font-size:1rem; word-break:break-word; }
:root[data-theme="dark"] .profile-value { color:#dbe3f7; }
@media (max-width: 575px) { .profile-grid { grid-template-columns:1fr; } }

/* ---------- Invoices list (modern rows) ---------- */
.inv-list { display:flex; flex-direction:column; gap:.85rem; }
.inv-row { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; box-shadow:var(--shadow); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none; }
.inv-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.inv-row-icon { width:44px; height:44px; border-radius:10px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:0 0 auto; }
.inv-row-main { flex:1 1 auto; min-width:0; }
.inv-row-no { font-weight:700; color:var(--navy); font-size:1.02rem; }
.inv-row-date { color:var(--muted); font-size:.85rem; }
.inv-row-arrow { color:var(--muted); flex:0 0 auto; }
:root[data-theme="dark"] .inv-row-no { color:#dbe3f7; }
.inv-row-wrap { display:flex; align-items:stretch; gap:.5rem; }
.inv-row-wrap .inv-row { flex:1 1 auto; }
.inv-hafza-btn { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--navy); text-decoration:none; transition:border-color .15s, color .15s, transform .12s; }
.inv-hafza-btn:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
:root[data-theme="dark"] .inv-hafza-btn { color:#cdd6ee; }

/* ---------- My Courses (enrolled) cards ---------- */
.mycourse-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.25rem; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease; }
.mycourse-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.mycourse-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }
.mycourse-code { background:var(--navy); color:#fff; border-radius:8px; padding:.35rem .55rem; font-weight:700; font-size:.78rem; }
.mycourse-title { font-size:1.05rem; font-weight:700; color:var(--navy); margin:0 0 .5rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mycourse-meta { color:var(--muted); font-size:.87rem; margin-bottom:1rem; }
.mycourse-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.75rem; border-top:1px solid var(--line); }
.mycourse-price { font-weight:800; color:var(--navy); font-size:1.05rem; }
.mycourse-price small { font-size:.7rem; color:var(--muted); }
.mycourse-actions { display:flex; align-items:center; gap:.4rem; }
:root[data-theme="dark"] .mycourse-title, :root[data-theme="dark"] .mycourse-price { color:#dbe3f7; }

/* ---------- Hafza voucher (official printable حافظة, 3 copies) ---------- */
.hafza-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem; }
.hafza-toolbar-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* The Hafza is an official Arabic document: always RTL, regardless of the portal UI language.
   !important + every structural container so no page/layout rule can flip the grid or table in EN. */
.hafza-print-area, .hafza-copy, .hafza-top, .hafza-head, .hafza-table, .hafza-table tr,
.hafza-foot, .hafza-foot-dates, .hafza-foot-amounts, .hafza-words { direction:rtl !important; }
.hafza-print-area { background:#fff; padding:2px; }
.hafza-copy {
    background:#fff; color:#000; border:1px solid #000;
    padding:10px 14px; margin:0 auto 10px; max-width:820px;
    font-family:"Tahoma","Segoe UI",Arial,sans-serif; font-size:12px; line-height:1.7;
}
.hafza-copy .lbl { font-weight:700; }
.hafza-copy .val { font-weight:400; }

.hafza-top { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:8px; }
.hafza-barcode { flex:0 0 auto; }
.hafza-barcode svg { height:42px; width:auto; display:block; }
.hafza-validity { flex:1 1 auto; text-align:center; font-size:11px; font-weight:600; }

.hafza-head { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 18px; margin-bottom:8px; }
/* Student name sits next to the registration number (row 2), spanning the remaining columns. */
.hafza-head-wide { grid-column:2 / -1; }

.hafza-table { width:100%; border-collapse:collapse; margin:6px 0; }
.hafza-table th, .hafza-table td { border:1px solid #000; padding:5px 6px; text-align:center; vertical-align:middle; }
.hafza-table thead th { font-weight:700; background:#f0f0f0; }
.hafza-period { white-space:nowrap; direction:rtl; }

.hafza-foot { display:flex; justify-content:space-between; gap:16px; margin-top:8px; flex-wrap:wrap; }
.hafza-foot-amounts { text-align:start; }

.hafza-words { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; font-weight:700; }
.hafza-cut { border-top:2px dashed #000; margin-top:12px; }

/* Keep the voucher light even in dark mode - it is an official printable document. */
:root[data-theme="dark"] .hafza-print-area,
:root[data-theme="dark"] .hafza-copy { background:#fff; color:#000; }
:root[data-theme="dark"] .hafza-table thead th { background:#f0f0f0; color:#000; }

@media print {
    body * { visibility:hidden !important; }
    .hafza-print-area, .hafza-print-area * { visibility:visible !important; }
    .hafza-print-area { position:absolute; top:0; left:0; right:0; margin:0; padding:0; background:#fff; }
    .no-print { display:none !important; }
    .hafza-copy { margin:0 0 8px; max-width:none; page-break-inside:avoid; }
    @page { size:A4; margin:10mm; }
}