/* ============================================================
   Finsabat — site-wide polish.
   Applied on every page (not only the home). Extends the home
   redesign's design system to courses, blog, profile, auth and
   all other pages: brand-coloured buttons, unified cards, form
   focus rings, accessible focus, smooth interactions.
   ============================================================ */

:root {
    --brand: #24bb8c;
    --brand-strong: #1c9c75;
    --brand-bright: #4ac8ae;
    --brand-deep: #337b6c;
    --brand-tint: #f0faf7;
    --ink: #1f2a26;
    --body: #4b5563;
    --muted: #6b7280;
    --line: #e4efe9;
    --surface: #ffffff;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(20, 40, 32, .05), 0 10px 28px rgba(20, 40, 32, .07);
    --shadow-hover: 0 4px 10px rgba(20, 40, 32, .08), 0 18px 38px rgba(20, 40, 32, .12);
}

/* ---- Type smoothing ---- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .title {
    letter-spacing: -.015em;
    color: var(--ink);
}

a {
    color: var(--brand-strong);
}

a:hover {
    color: var(--brand);
}

/* ---- Accessible focus on every interactive element ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Smooth interactions ---- */
a, button, .btn, summary {
    transition: color .2s ease, background-color .2s ease,
        border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

/* ---- Images: never overflow, keep aspect ---- */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Buttons — Bootstrap btn-primary becomes a brand gradient
   ============================================================ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    --bs-btn-bg: var(--brand) !important;
    --bs-btn-border-color: var(--brand) !important;
    --bs-btn-hover-bg: var(--brand-strong) !important;
    --bs-btn-hover-border-color: var(--brand-strong) !important;
    --bs-btn-active-bg: var(--brand-strong) !important;
    --bs-btn-active-border-color: var(--brand-strong) !important;
    background-image: linear-gradient(135deg, var(--brand-bright), var(--brand)) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(36, 187, 140, .22);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    box-shadow: 0 8px 22px rgba(36, 187, 140, .32);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-strong) !important;
    --bs-btn-border-color: var(--brand) !important;
    --bs-btn-hover-bg: var(--brand-tint) !important;
    --bs-btn-hover-border-color: var(--brand-strong) !important;
    --bs-btn-hover-color: var(--brand-strong) !important;
}

/* ============================================================
   Cards — unify radius / border / shadow / hover across themes
   ============================================================ */
.card,
.Ecard,
.b-card,
.eBar-card,
.eCard2,
.ol-card,
.g-card,
.c-card,
.wish-card,
.bootcamp-grid-card,
.course-card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover,
.Ecard:hover,
.course-card:hover,
.g-card:hover,
.bootcamp-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--brand-bright) !important;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* ============================================================
   Forms — modern inputs with brand focus
   ============================================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(36, 187, 140, .14) !important;
}

.form-label,
label {
    color: var(--ink);
    font-weight: 500;
}

/* ============================================================
   Tables — softer borders, brand header
   ============================================================ */
.table {
    --bs-table-border-color: var(--line);
}

.table>thead {
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-weight: 600;
}

/* ============================================================
   Bootstrap alerts in brand tints
   ============================================================ */
.alert-success {
    background: var(--brand-tint);
    border-color: var(--brand-bright);
    color: var(--brand-deep);
}

/* ============================================================
   Badges and pills
   ============================================================ */
.badge.bg-primary,
.badge-primary {
    background-color: var(--brand) !important;
}

/* ============================================================
   Pagination — brand accent on the active page
   ============================================================ */
.page-link {
    color: var(--brand-strong);
    border-color: var(--line);
}

.page-link:hover {
    color: var(--brand);
    background: var(--brand-tint);
}

.page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
}

/* ============================================================
   Dark theme — opt-in via [data-theme="dark"] on <html>.
   The brand stays the same; only surfaces, text and lines invert.
   ============================================================ */
html[data-theme="dark"] {
    --ink: #e8efea;
    --body: #b0bab3;
    --muted: #8a948d;
    --line: #1f2d26;
    --surface: #0f1a15;
    --brand-tint: #122119;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, .4), 0 18px 38px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #0a1410 !important;
    color: var(--body);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .Ecard,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .container.bg-white,
html[data-theme="dark"] .sub-header,
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .menu-block {
    background-color: var(--surface) !important;
    color: var(--body);
    border-color: var(--line) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #14201a;
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .title,
html[data-theme="dark"] .menu-parent-a {
    color: var(--ink) !important;
}

html[data-theme="dark"] .lang-switcher>.lang-current {
    color: var(--ink);
}

html[data-theme="dark"] .lang-switcher .lang-menu {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .lang-switcher .lang-option {
    color: var(--body);
}

html[data-theme="dark"] .lang-switcher .lang-option:hover,
html[data-theme="dark"] .lang-switcher .lang-option.is-active {
    background: var(--brand-tint);
    color: var(--brand-bright);
}

html[data-theme="dark"] .table>thead {
    background: var(--brand-tint);
    color: var(--brand-bright);
}

/* Theme-toggle pill (sun/moon) — same shape as the language switcher */
.theme-toggle {
    appearance: none;
    background: rgba(36, 187, 140, .08);
    border: 1px solid rgba(36, 187, 140, .22);
    color: var(--ink, #1f2a26);
    border-radius: 999px;
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.theme-toggle:hover {
    background: rgba(36, 187, 140, .15);
    border-color: rgba(36, 187, 140, .38);
    box-shadow: 0 2px 8px rgba(36, 187, 140, .12);
}

.theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline-block;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* ============================================================
   Respect user motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   v2 unification layer — applied on top of legacy theme.
   - Spacing & typography scale (tokens)
   - Form input padding/sizing consistency
   - Placeholder color + behaviour
   - Modal / offcanvas / dropdown / tabs / tooltips
   - Scrollbar treatment
   - Checkbox / radio polish
   - Disabled states
   ============================================================ */

:root {
    /* Spacing scale (4px base) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Typography scale (rem; mobile-first) */
    --text-xs: .75rem;       /* labels, eyebrows */
    --text-sm: .875rem;      /* meta */
    --text-base: 1rem;       /* body */
    --text-lg: 1.125rem;     /* sub-headings */
    --text-xl: 1.25rem;      /* card titles */
    --text-2xl: clamp(1.4rem, 1.1rem + .8vw, 1.65rem);
    --text-3xl: clamp(1.75rem, 1.2rem + 1.5vw, 2.15rem);

    /* Component radii — only TWO sizes for the whole app */
    --radius-pill: 999px;

    /* Focus ring (a11y consistent) */
    --ring: 0 0 0 3px rgba(36, 187, 140, .18);
}

/* ===== Placeholder normalisation ===== */
::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: var(--muted) !important;
    opacity: .85 !important;
    font-weight: 400 !important;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: var(--line);
    transition: color .15s ease;
}

/* ===== Form inputs — consistent sizing across legacy themes ===== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-base);
    line-height: 1.4;
    min-height: 44px; /* a11y touch target */
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    padding: var(--space-2) var(--space-3) !important;
    min-height: 36px;
    font-size: var(--text-sm);
}

/* Textarea reasonable default */
textarea.form-control {
    min-height: 96px;
    padding-block: var(--space-3) !important;
}

/* Disabled state — muted, no focus */
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.btn:disabled,
button:disabled {
    background-color: #f4f6f5 !important;
    color: var(--muted) !important;
    cursor: not-allowed;
    opacity: .85;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] input:disabled {
    background-color: #1a2620 !important;
    color: #6b7570 !important;
}

/* ===== Checkbox / radio — branded ===== */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.form-check-input:focus {
    box-shadow: var(--ring) !important;
    border-color: var(--brand) !important;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* ===== Buttons — size + height consistency ===== */
.btn {
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    min-height: 52px;
    font-size: var(--text-lg);
}

/* ===== Modals — unified header / body padding + branded close ===== */
.modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-hover);
}

.modal-header {
    border-bottom: 1px solid var(--line);
    padding: var(--space-5) var(--space-6);
}

.modal-title {
    color: var(--ink);
    font-weight: 700;
    font-size: var(--text-lg);
}

.modal-body { padding: var(--space-6); }

.modal-footer {
    border-top: 1px solid var(--line);
    padding: var(--space-4) var(--space-6);
}

.btn-close:focus {
    box-shadow: var(--ring) !important;
}

html[data-theme="dark"] .modal-content {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--line);
}

html[data-theme="dark"] .btn-close {
    filter: invert(.9);
}

/* ===== Offcanvas (mobile slide-outs) ===== */
.offcanvas {
    border-color: var(--line);
}

.offcanvas-header,
.offcanvas-body {
    padding: var(--space-5) var(--space-6);
}

html[data-theme="dark"] .offcanvas {
    background: var(--surface);
    color: var(--body);
}

/* ===== Dropdowns ===== */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: var(--space-2);
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink);
    transition: background-color .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--brand) !important;
    color: #fff !important;
}

.dropdown-divider {
    border-color: var(--line);
    margin: var(--space-2) calc(var(--space-2) * -1);
}

html[data-theme="dark"] .dropdown-menu {
    background: var(--surface);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--body);
}

html[data-theme="dark"] .dropdown-item:hover {
    background: var(--brand-tint);
    color: var(--brand-bright);
}

/* ===== Tabs ===== */
.nav-tabs {
    border-bottom: 1px solid var(--line);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--body);
    font-weight: 600;
    padding: var(--space-3) var(--space-5);
    transition: color .15s ease, border-color .15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--brand-strong);
    border-bottom-color: var(--brand-bright);
}

.nav-tabs .nav-link.active {
    color: var(--brand-strong);
    background: transparent;
    border-bottom-color: var(--brand);
}

.nav-pills .nav-link {
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    color: var(--body);
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background: var(--brand) !important;
    color: #fff !important;
}

/* ===== Tooltips & Popovers =====
   Tooltips must stay legible in BOTH themes. The old rule used var(--ink),
   which inverts to a light colour in dark mode -> white-on-near-white (the
   "faint, unreadable tooltip" bug). Use a fixed dark surface + white text,
   full opacity, and colour the arrow for every placement (these triggers use
   placement="bottom"). */
.tooltip { opacity: 1 !important; }
.tooltip.show { opacity: 1 !important; }
.tooltip-inner {
    background-color: #1f2a26 !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 240px;
    box-shadow: 0 6px 18px rgba(15, 26, 21, .22);
}
html[data-theme="dark"] .tooltip-inner {
    background-color: #10301f !important;
    color: #eafaf3 !important;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #1f2a26 !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #1f2a26 !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #1f2a26 !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #1f2a26 !important; }
html[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
html[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #10301f !important; }
html[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
html[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #10301f !important; }

.popover {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.popover-header {
    background: var(--brand-tint);
    color: var(--brand-deep);
    border-bottom-color: var(--line);
}

/* ===== Toasts (success/error notifications) ===== */
.toast {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
}

.toast-header {
    background: var(--brand-tint);
    border-bottom-color: var(--line);
}

/* ===== Scrollbar — subtle branded ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-bright) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: rgba(36, 187, 140, .35);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(36, 187, 140, .55);
    background-clip: padding-box;
}

/* ===== Badges — consistent shape ===== */
.badge {
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    letter-spacing: .02em;
}

.badge.rounded-pill { border-radius: var(--radius-pill); }

/* ===== Selection highlight (text selection) ===== */
::selection {
    background: rgba(36, 187, 140, .22);
    color: var(--ink);
}

html[data-theme="dark"] ::selection {
    background: rgba(74, 200, 174, .35);
    color: #fff;
}

/* ===== Empty state / placeholder regions ===== */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--muted);
}

.empty-state svg,
.empty-state .icon {
    width: 64px;
    height: 64px;
    color: var(--brand-bright);
    margin-bottom: var(--space-4);
}

/* ===== HR — softer brand-tinted ===== */
hr {
    border-color: var(--line);
    opacity: 1;
}

/* ===== Sticky table header (admin lists) ===== */
.table thead th {
    position: sticky;
    top: 0;
    background: var(--brand-tint);
    z-index: 1;
}

.table-hover tbody tr:hover {
    background: var(--brand-tint);
}

html[data-theme="dark"] .table {
    color: var(--body);
}

html[data-theme="dark"] .table thead th {
    background: var(--brand-tint);
    color: var(--brand-bright);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background: rgba(36, 187, 140, .07);
}

/* ===== File input (admin upload) — consistent ===== */
input[type="file"] {
    padding: var(--space-3) var(--space-4);
    background: var(--brand-tint);
    border: 1.5px dashed var(--brand-bright);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

input[type="file"]:hover {
    background: rgba(36, 187, 140, .08);
    border-color: var(--brand);
}

input[type="file"]::file-selector-button {
    background: var(--brand);
    color: #fff;
    border: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-right: var(--space-3);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--brand-strong);
}

/* ===== Section spacing — consistent breathing room ===== */
.section-padding,
section.py-5,
section.py-4 {
    padding-block: var(--space-12);
}

/* ===== Container max-width consistency ===== */
.container,
.container-fluid {
    padding-inline: var(--space-5);
}

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

/* --- Admin page-header cards: ~62% shorter (50% then a further 25%) ---------------------------------
   The title block on every admin section (Dashboard, "Feedback / Remarks",
   "All categories (8)", ...) is the .ol-card.radius-8px header. Halve its
   vertical margin and padding so it takes ~50% less height. Covers both
   header variants (py-4 and py-12px). */
.ol-card.radius-8px > .ol-card-body.my-3 {
    margin-top: .375rem !important;
    margin-bottom: .375rem !important;
}
.ol-card.radius-8px > .ol-card-body.py-4 {
    padding-top: .5625rem !important;
    padding-bottom: .5625rem !important;
}
.ol-card.radius-8px > .ol-card-body.py-12px {
    padding-top: 4.5px !important;
    padding-bottom: 4.5px !important;
}

/* --- Tutors search button: keep it vertically centered ---------------------
   The in-input search button (.sm-search-btn) was pinned at top:4px; the larger
   typography made the input taller, so the button drifted off-centre. Anchor it
   to the vertical middle so it stays aligned at any input height. */
.sm-search-btn {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* --- Header: prevent horizontal scroll on small laptops / landscape tablets ---
   The header row (.row.flex-md-nowrap) is forced onto one line at md+. Between
   ~992px and ~1399px the logo + nav + search + right cluster were wider than
   the container, pushing content past the viewport (horizontal scroll, most
   visible at 1024px). Tighten the nav padding, cap the search width, and
   shrink the right-cluster gaps in that range only — xl/xxl and mobile are
   untouched. Verified 0 horizontal overflow from 992px to 1920px. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-area .primary-menu li.ps-5 { padding-left: .4rem !important; }
    .header-area .primary-menu > li > a { padding-left: .3rem !important; padding-right: .3rem !important; }
    .header-area .col-sm-5.col-md-3.col-xl-4 { flex: 0 0 auto !important; width: auto !important; max-width: 200px !important; }
    .header-area .Esearch_entry { margin-left: .4rem !important; max-width: 170px !important; }
    .header-area .primary-end { gap: .2rem !important; }
    .header-area .primary-end .me-2 { margin-right: .25rem !important; }
    .header-area .primary-end .me-md-4 { margin-right: .4rem !important; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
    .header-area .Esearch_entry { max-width: 120px !important; }
    .header-area .primary-menu li.ps-5 { padding-left: .25rem !important; }
    .header-area .primary-end { gap: .15rem !important; }
    .header-area .primary-end .eBtn.gradient { padding-left: .6rem !important; padding-right: .6rem !important; }
}

/* --- Rich-text (Summernote) editor + rendered lesson text: keep pasted Word
   content inside the box (fixed widths/tables/images from Word overflow). --- */
.note-editable,
.text_show {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.note-editable img,
.text_show img { max-width: 100% !important; height: auto; }
.note-editable table,
.text_show table {
    max-width: 100% !important;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}
.note-editable td, .note-editable th,
.text_show td, .text_show th { word-break: break-word; }
/* Tame Word's fixed-width spans/divs/paragraphs */
.note-editable [style*="width"],
.text_show [style*="width"] { max-width: 100% !important; }

/* ===== UI/UX audit pass: footer contrast + on-brand buttons =====
   The footer sits on the brand green (#337B6C). Default link/blurb colours
   render dark-on-green and fail WCAG (<4.5:1). Force high-contrast near-white
   for all footer text/links so the footer is legible on every page. */
.footer-area,
.footer-area p,
.footer-area span,
.footer-area .small,
.footer-bottom,
.footer-bottom p {
    color: rgba(255, 255, 255, .92) !important;
}
.footer-area .bottom-links .item,
.footer-area a:not(.btn) {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, .55);
    transition: opacity .2s ease;
}
.footer-area .bottom-links .item:hover,
.footer-area a:not(.btn):hover {
    color: #ffffff !important;
    opacity: .8;
    text-decoration-color: #ffffff;
}
/* Newsletter subtitle was opacity .9 white — keep it but guarantee legibility. */
.newsletter-wrapper p { opacity: 1 !important; color: rgba(255, 255, 255, .95) !important; }
/* Footer social icon chips: visible border + hover on green. */
.footer-media-links .item { opacity: .85; transition: opacity .2s ease; }
.footer-media-links .item:hover { opacity: 1; }

/* On-brand primary gradient: the auth/login buttons used a blue→teal gradient
   (#2f57ef) that clashes with the green brand. Retune to brand green. */
.eBtn.gradient,
.eBtn.gradient:focus {
    background-image: linear-gradient(to right, #24bb8c 0%, #1c9c75 51%, #1c9c75 100%) !important;
    background-color: #24bb8c !important;
    border-color: #24bb8c !important;
    color: #fff !important;
}
.eBtn.gradient:hover {
    background-position: right center !important;
    background-color: #1c9c75 !important;
    color: #fff !important;
}

/* ===== UI/UX unification: re-skin admin accent from blue to brand green =====
   The admin theme is driven by --skinColor (#1B84FF, blue) + a few hardcoded
   blue hovers. Override to the platform green so the active sidebar item, tabs,
   primary buttons, badges and links match the brand across the whole panel. */
:root {
    --skinColor: #24bb8c;
}
/* Hardcoded blue hover states in the admin theme. */
.ol-btn-primary:active,
.ol-btn-primary:hover,
.ol-btn-light-primary:active,
.ol-btn-light-primary:hover {
    background-color: #1c9c75 !important;
    border-color: #1c9c75 !important;
}
/* "Editing" badge + misc primary text that used the off-brand blue. */
.edit-badge,
.text-primary,
.sidebar-first-li .first-li-have-sub.active > a,
.first-li-have-sub.active > a {
    color: #1c9c75 !important;
}
/* Active sub-menu link + bullet in the sidebar. */
.sub-menu .active > a,
.sidebar-nav-area .active > a { color: #1c9c75 !important; }
/* Bootstrap primary (used by some admin widgets) -> brand green. */
.btn-primary {
    background-color: #24bb8c !important;
    border-color: #24bb8c !important;
}
.btn-primary:hover, .btn-primary:focus { background-color: #1c9c75 !important; border-color: #1c9c75 !important; }
.badge.bg-primary { background-color: #24bb8c !important; }

/* ===== Course catalog cards: designed hover / active states ===== */
.Ecard {
    display: block;
    border: 1px solid var(--line, #e4efe9);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    will-change: transform;
}
.Ecard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -18px rgba(20, 40, 32, .28);
    border-color: #bfe7d8;
}
.Ecard:active { transform: translateY(-1px); }
.Ecard .courses-img img { transition: transform .4s ease; }
.Ecard:hover .courses-img img { transform: scale(1.06); }
.Ecard:hover .entry-title h3 { color: #1c9c75; }
.Ecard .entry-title h3 { transition: color .2s ease; width: auto !important; max-width: 100%; }
/* Wishlist heart: clearer affordance + brand hover */
.courses-img .heart {
    transition: transform .15s ease, color .2s ease, background-color .2s ease;
}
.courses-img .heart:hover { transform: scale(1.1); color: #1c9c75; }
.courses-img .heart.inList { color: #dc2626; }

/* ===== Final unification: frontend accent (--color-1) blue -> brand green =====
   The frontend theme accent --color-1 was #2f57ef (blue), used ~74x for nav
   active links, focus borders, tab indicators and inline links. The brand is
   green, so flip it for one consistent accent across the public site. */
:root {
    --color-1: #24bb8c;
}

/* ===== Form states — unified focus / invalid / valid (brand) ===== */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #24bb8c !important;
    box-shadow: 0 0 0 3px rgba(36, 187, 140, .18) !important;
    outline: none;
}
/* Error states: Laravel @error adds .is-invalid; legacy uses .border-danger */
.form-control.is-invalid,
.form-select.is-invalid,
.is-invalid,
.form-control.border-danger,
.border.border-danger {
    border-color: #dc2626 !important;
}
.form-control.is-invalid:focus,
.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18) !important;
}
.invalid-feedback, .text-danger.small, .error-text {
    color: #dc2626 !important;
    font-size: .85rem;
}
.form-control.is-valid,
.form-select.is-valid {
    border-color: #1c9c75 !important;
}
.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(28, 156, 117, .16) !important;
}
/* Required-field asterisk: consistent brand-red, never wraps alone */
label .text-danger, label span.text-danger { color: #dc2626 !important; }

/* ===== Typography safety (no aggressive resizing of the theme) ===== */
body { font-size: clamp(15px, 14px + .2vw, 16px); }
@media (max-width: 575.98px) {
    body { font-size: 16px; } /* readable body on mobile */
}
/* Headings & titles never overflow on long unbroken words. Use break-word
   (not anywhere) so normal multi-word text never breaks character-by-character
   in narrow cells — only genuinely long unbroken tokens wrap. */
h1, h2, h3, h4, h5, h6,
.g-title, .title, .summary-heading, .entry-title h3 {
    overflow-wrap: break-word;
}
/* Comfortable reading rhythm for rich-text content blocks */
.text_show, .description, .details-page-content p, .overview-content p {
    line-height: 1.7;
}

/* ===== Unified status badges + empty states ===== */
/* Consistent semantic chips across admin lists (course/user/payment status). */
.badge.bg-success, .badge.badge-success { background-color: #16a34a !important; color: #fff !important; }
.badge.bg-warning, .badge.badge-warning { background-color: #f59e0b !important; color: #1a1305 !important; }
.badge.bg-danger,  .badge.badge-danger  { background-color: #dc2626 !important; color: #fff !important; }
.badge.bg-info,    .badge.badge-info    { background-color: #4ac8ae !important; color: #06281f !important; }
.badge.bg-secondary, .badge.badge-secondary { background-color: #64748b !important; color: #fff !important; }
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

/* Empty-state regions: consistent muted, centered presentation. */
.no-data, .empty-state, .no-result, .add-section-block {
    color: var(--muted, #6b7280);
}
.add-section-block {
    border: 1.5px dashed var(--line, #e4efe9) !important;
    border-radius: 14px;
    transition: border-color .2s ease, background-color .2s ease;
}
.add-section-block:hover {
    border-color: #24bb8c !important;
    background: #f7faf9;
}

/* ============================================================
   Header logo: never crop. The markup adds `rounded` + object-fit-cover
   which clipped the logo corners/edges. Show it whole.
   ============================================================ */
.logo-image img,
.header-light-logo,
.header-dark-logo {
    object-fit: contain !important;
    border-radius: 0 !important;
    width: auto;
    max-width: 190px;
}

/* ============================================================
   Dark theme — completeness pass. Earlier rules covered cards/forms/
   headings; these darken the remaining light surfaces and lift ALL text,
   utilities, links and icons to readable contrast site-wide.
   ============================================================ */
/* Light banner / section backgrounds -> dark surface */
html[data-theme="dark"] .breadcum-area {
    background: linear-gradient(200deg, #12211a 3%, #0f1a15 60%) !important;
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ps-box,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .gray-bg,
html[data-theme="dark"] .section-bg,
html[data-theme="dark"] .radius-10.bg-white,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    background-color: var(--surface) !important;
    color: var(--body) !important;
    border-color: var(--line) !important;
}
/* Body text + common text classes */
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not(.badge):not([class*="eBtn"]),
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .g-text,
html[data-theme="dark"] .sub-title,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .filter-item,
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--body) !important;
}
/* Titles / section headings */
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .g-title,
html[data-theme="dark"] .sec-title,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .card-title {
    color: var(--ink) !important;
}
/* Bootstrap text utilities that hardcode dark */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--muted) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body { color: var(--body) !important; }
/* Links (not buttons) */
html[data-theme="dark"] a:not(.btn):not(.eBtn):not(.club-card):not(.video-wrap),
html[data-theme="dark"] .breadcrumb-item a,
html[data-theme="dark"] .breadcrumb-item a:visited {
    color: var(--ink) !important;
}
html[data-theme="dark"] a:not(.btn):not(.eBtn):hover { color: #34d39b !important; }
/* Icons: font-icons inherit text colour; dark inline-SVG fills -> light */
html[data-theme="dark"] i[class*="fi-"],
html[data-theme="dark"] i[class*="fa-"],
html[data-theme="dark"] [class^="fi-"],
html[data-theme="dark"] [class*=" fi-"] {
    color: inherit;
}
html[data-theme="dark"] svg path[fill="#192335"],
html[data-theme="dark"] svg path[fill="#192635"],
html[data-theme="dark"] svg path[fill="#1F2A26"],
html[data-theme="dark"] svg path[fill="#1f2a26"],
html[data-theme="dark"] svg path[fill="#000"],
html[data-theme="dark"] svg path[fill="#000000"],
html[data-theme="dark"] svg [fill="#192335"] {
    fill: #d7e0da !important;
}
/* Accordion chevrons / misc dark borders */
html[data-theme="dark"] hr { border-color: var(--line); }

/* ============================================================
   Mobile header alignment fixes
   ============================================================ */
/* Search magnifier toggle: the markup adds mt-1 py-3, knocking it off the
   baseline of the cart/burger. Center it in a consistent 44px tap target. */
.floating-searchbar > button {
    margin-top: 0 !important;
    padding: 0 !important;
    height: 44px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.floating-searchbar > button > i { line-height: 1; display: inline-flex; }
/* The mobile header row: keep logo / search / cart / burger on one baseline. */
@media (max-width: 575.98px) {
    .floating-searchbar { display: inline-flex !important; align-items: center; }
}

/* Language switcher: center the flag glyph so it doesn't ride high/low next
   to the code. Emoji flags have an inconsistent baseline across platforms. */
.lang-switcher > .lang-current { line-height: 1; }
.lang-switcher .lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    line-height: 1;
    position: relative;
    top: 0;
}
.lang-switcher .lang-code,
.lang-switcher .lang-caret { display: inline-flex; align-items: center; line-height: 1; }

/* ============================================================
   Admin list tables -> card layout on mobile (≤767px).
   A small script (admin/instructor layouts) copies each column header into
   td[data-label]; here each row becomes a card with label/value pairs.
   ============================================================ */
@media (max-width: 767.98px) {
    .eTable.as-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .eTable.as-cards,
    .eTable.as-cards tbody,
    .eTable.as-cards tr,
    .eTable.as-cards td { display: block; width: 100%; }
    .eTable.as-cards tr {
        border: 1px solid var(--line, #e6efe9);
        border-radius: 14px;
        background: #fff;
        padding: 6px 14px;
        margin-bottom: 14px;
        box-shadow: 0 1px 2px rgba(20, 40, 32, .04);
    }
    /* Redundant row-number cell: hide in card mode */
    .eTable.as-cards tbody th[scope="row"],
    .eTable.as-cards td.row-number-cell { display: none; }
    .eTable.as-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        text-align: right;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid #f0f4f2;
        min-height: 0;
    }
    .eTable.as-cards td:last-child { border-bottom: 0; }
    .eTable.as-cards td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-weight: 600;
        font-size: .82rem;
        color: var(--muted, #64748b);
        text-transform: none;
    }
    /* Cells with no label (or empty) don't reserve the label column */
    .eTable.as-cards td:not([data-label])::before,
    .eTable.as-cards td[data-label=""]::before { content: ""; flex: 0; }
    /* Action/control cells: let the buttons take the full width on the right */
    .eTable.as-cards td .dropdown,
    .eTable.as-cards td .d-flex { margin-left: auto; }
    /* Keep print/export table untouched */
    .eTable.print-table.as-cards { }
}
/* Dark theme cards */
html[data-theme="dark"] .eTable.as-cards tr { background: var(--surface) !important; border-color: var(--line) !important; }
@media (max-width: 767.98px) {
    html[data-theme="dark"] .eTable.as-cards td { border-bottom-color: var(--line); }
}

/* ============================================================
   Mobile search: open the field as a fixed full-width bar under the
   magnifier (the original absolute 250px dropdown ran off-screen left
   because its anchor button sits mid-header). JS sets `top` per click.
   ============================================================ */
@media (max-width: 575.98px) {
    .floating-searchbar > form.show {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 1050;
    }
    .floating-searchbar > form.show .form-control {
        width: 100% !important;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(20, 40, 32, .18);
    }
    /* submit magnifier inside the field stays pinned to the right edge */
    .floating-searchbar > form.show > button {
        margin-left: -48px !important;
    }
    .floating-searchbar > form.show .search-dropdown {
        left: 0; right: 0; width: 100%;
    }
}
html[data-theme="dark"] .floating-searchbar > form.show .form-control {
    background: #14201a; color: var(--ink); border-color: var(--line);
}

/* ============================================================
   Mobile offcanvas menu: left-align items, working Courses submenu
   ============================================================ */
#offcanvasWithBothOptions .off-menu .btn-toggle-list,
#offcanvasWithBothOptions .off-menu .btn-toggle {
    justify-content: flex-start !important;
    text-align: left !important;
}
/* Self-contained Courses submenu (replaces Bootstrap collapse) */
#offcanvasWithBothOptions .mobile-submenu { display: none; }
#offcanvasWithBothOptions .mobile-submenu.open { display: block; }
#offcanvasWithBothOptions .btn-toggle .icons {
    transition: transform .2s ease;
}
#offcanvasWithBothOptions .btn-toggle.is-open .icons {
    transform: rotate(180deg);
}
#offcanvasWithBothOptions .mobile-submenu a {
    color: var(--ink, #1f2a26);
    border-radius: 8px;
}
#offcanvasWithBothOptions .mobile-submenu a:hover {
    background: var(--brand-tint, #f0faf7);
    color: var(--brand-strong, #1c9c75);
}
html[data-theme="dark"] #offcanvasWithBothOptions .mobile-submenu a { color: var(--body); }

/* ============================================================
   Fix a harmful global rule (theme style.css: `input{max-width:200px}`)
   that capped every form field at 200px. Form controls fill their container.
   ============================================================ */
.form-control,
.ol-form-control,
input.form-control,
textarea.form-control,
select.form-control,
.login-area input,
.login-area .form-control,
.register-area input,
.register-area .form-control,
form .form-control {
    max-width: 100% !important;
    width: 100%;
    margin-right: 0;
}

/* ============================================================
   Dark theme: desktop "Courses" mega-dropdown was hardcoded white.
   ============================================================ */
html[data-theme="dark"] .main-mega-menu,
html[data-theme="dark"] .mega-dropdown-menu,
html[data-theme="dark"] .child_category_menu {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
}
html[data-theme="dark"] .mega_list li a,
html[data-theme="dark"] .child_category_menu li a {
    color: var(--body) !important;
}
html[data-theme="dark"] .mega_list li a i,
html[data-theme="dark"] .child_category_menu li a i {
    color: var(--body) !important;
}
html[data-theme="dark"] .mega_list li a:hover,
html[data-theme="dark"] .child_category_menu li a:hover {
    background-color: var(--brand-tint) !important;
    color: var(--brand-bright) !important;
}
html[data-theme="dark"] .mega-menu-items h4 {
    color: var(--ink) !important;
    border-bottom-color: var(--line) !important;
}

/* ============================================================
   Mobile menu items: unify text colour (Home/Courses/Game zone/Calculators).
   They are <a class="btn btn-toggle-list"> / <button class="btn btn-toggle">,
   so the global link colour didn't apply and dark-mode left them near-invisible.
   var(--ink) is dark in light theme and light in dark theme -> one rule, both.
   ============================================================ */
#offcanvasWithBothOptions .off-menu .btn-toggle-list,
#offcanvasWithBothOptions .off-menu .btn-toggle {
    color: var(--ink) !important;
}
#offcanvasWithBothOptions .off-menu .btn-toggle-list:hover,
#offcanvasWithBothOptions .off-menu .btn-toggle:hover {
    color: var(--brand-strong) !important;
}

/* ============================================================
   Breadcrumbs: keep every item + separator on one baseline with even
   spacing (mixed list-item/flow-root + a margin-top:1px separator made
   items sit at slightly different heights/offsets).
   ============================================================ */
.eNtry-breadcum .breadcrumb,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
}
.eNtry-breadcum .breadcrumb-item,
.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}
.eNtry-breadcum .breadcrumb-item.active.ellipsis-line-1 {
    display: inline-flex;            /* was flow-root -> sat differently */
}
.breadcrumb-item + .breadcrumb-item::before {
    margin-top: 0 !important;        /* drop the 1px vertical nudge */
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   Dark theme: kill remaining white artifacts. The theme's --bg-white (#fff)
   was never inverted, so any surface using var(--bg-white) (view switcher
   tabs, panels, etc.) stayed white. Invert it + a few explicit spots.
   ============================================================ */
html[data-theme="dark"] {
    --bg-white: #0f1a15;
}
html[data-theme="dark"] .tab-list li.active {
    background: var(--brand-tint) !important;
}
html[data-theme="dark"] .tab-list li.active a,
html[data-theme="dark"] .tab-list li a { color: var(--body); }
html[data-theme="dark"] .tab-list li.active a { color: var(--brand-bright); }

/* ============================================================
   News block header: title + "All news" button overlapped on mobile
   (two col-6 in a d-flex + a float-right button). Stack them.
   ============================================================ */
@media (max-width: 575.98px) {
    .news .header-section { flex-wrap: wrap; row-gap: 12px; }
    .news .header-section > .col-6 { flex: 0 0 100%; max-width: 100%; }
    .news .header-section .news-btn { float: none !important; }
    .news .header-section .news-btn .btn { white-space: nowrap; }
    .news .header-section .title { line-height: 1.15; }
}
/* News + About sections follow the dark body (they are transparent) — ensure
   their text/links are readable in dark mode. */
html[data-theme="dark"] .news .news-title,
html[data-theme="dark"] .about h1,
html[data-theme="dark"] .about h2 { color: var(--ink) !important; }
html[data-theme="dark"] .news .news-detail,
html[data-theme="dark"] .news .news-detail *,
html[data-theme="dark"] .news .news-date,
html[data-theme="dark"] .about p { color: var(--body) !important; }

/* ============================================================
   Instructor (author) banner: the decorative striped circle (::before) spanned
   the whole column while the 330px avatar was left-aligned, so background and
   avatar looked "slid apart". Constrain the avatar wrapper to the avatar size,
   centre it, and align the striped bg behind it.
   ============================================================ */
.left-profile .instruct-img {
    width: 330px;
    max-width: 100%;
    margin-inline: auto;
}
.left-profile .instruct-img::before {
    top: 0 !important;
}
.left-profile .instructor-photo {
    width: 100%;
    max-width: 330px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}
@media (max-width: 575.98px) {
    .left-profile .instruct-img,
    .left-profile .instructor-photo { width: min(330px, 78vw); }
}

/* ============================================================
   Thematic collections (home) — add vertical gap between the stacked
   cards on mobile (the carousel slide's col-md-4 cards touched).
   ============================================================ */
@media (max-width: 767.98px) {
    .courses-section .carousel-item .row > [class*="col-"] { margin-bottom: 16px; }
    .courses-section .carousel-item .row > [class*="col-"]:last-child { margin-bottom: 0; }
}

/* Dark theme: recolor dark SVG strokes too (the cart icon uses stroke="#192335"
   while wishlist uses fill="#192335" — only fills were handled, so the cart
   blended into the dark header). Now both match. */
html[data-theme="dark"] svg path[stroke="#192335"],
html[data-theme="dark"] svg [stroke="#192335"],
html[data-theme="dark"] svg path[stroke="#192635"] {
    stroke: #d7e0da !important;
}

/* ============================================================
   Lighthouse a11y: contrast + tap-target tweaks (home).
   ============================================================ */
/* Carousel indicator dots: enlarge tap target (was < 24px). */
#carouselExample2 .carousel-indicators [data-bs-target],
#carouselExample .carousel-indicators [data-bs-target] {
    width: 14px; height: 14px; border-radius: 50%;
    margin-left: 8px; margin-right: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}
#carouselExample2 .carousel-indicators [data-bs-target]::after,
#carouselExample .carousel-indicators [data-bs-target]::after {
    content: ""; position: absolute; inset: -10px; /* 34px hit area */
}
#carouselExample2 .carousel-indicators,
#carouselExample .carousel-indicators { gap: 4px; }

/* Contrast: darken small green/grey texts to meet 4.5:1 (kept on-brand). */
.courses-section .small-title.text-primary,
.about .title.text-primary,
.courses-section .course-item:not([class*="featured"]) .course-detail-link,
.media-club .club-text,
.hc-tabs .hc-tab .hc-tab-num,
.hc-tabs .hc-tab .hc-tab-name {
    color: #137a5a !important;
}
.text-orange { color: #c2410c !important; }

/* Dark theme: the breadcrumb banner has a white gradient ::after overlay
   (rgba(255,255,255,.94)->.35) that showed as a light-grey band on dark pages.
   Remove it in dark mode (the dark base gradient remains). */
html[data-theme="dark"] .breadcum-area:after,
html[data-theme="dark"] .breadcum-area.bg-white:after,
html[data-theme="dark"] .breadcum-area.bg-default:after {
    background: none !important;
}

/* ============================================================
   Courses view switcher (Grid/List): the pill used a 35%-white
   background (#fefdff59) that glowed like a selection highlight,
   especially in dark theme. Make it an intentional segmented
   control and stop the labels being text-selectable on click.
   ============================================================ */
.tab-list ul {
    background-color: #eef3f1 !important;
}
.tab-list, .tab-list a { -webkit-user-select: none; user-select: none; }
.tab-list a:focus { outline: none; }
html[data-theme="dark"] .tab-list ul {
    background-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .tab-list li.active {
    background: rgba(36, 187, 140, .18) !important;
}

/* The active Grid link carries the global .gradient class whose
   box-shadow: 0 0 20px #eee created a white glow that read as a highlight/
   selection on the courses view switcher. Remove the glow there only. */
.tab-list a.gradient,
.tab-list li.active a,
.tab-list a {
    box-shadow: none !important;
}

/* ============================================================
   "Courses" mega-menu caret: the theme rendered it as a white
   rounded box (background:#fff + border-radius + border-triangle),
   so it looked like a broken/half icon. Redefine as a clean
   downward chevron that follows the link colour (both themes).
   ============================================================ */
.primary-menu .have-mega-menu .menu-parent-a::after {
    content: "";
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid currentColor !important;
    border-radius: 0 !important;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s ease;
}
.primary-menu .have-mega-menu .menu-parent-a.active::after,
.primary-menu .have-mega-menu .menu-parent-a:hover::after {
    border-top-color: currentColor !important;
    background: none !important;
}
.primary-menu .have-mega-menu:hover .menu-parent-a::after {
    transform: translateY(-50%) rotate(180deg);
}

/* ============================================================
   Newsletter ("Subscribe") — input + button on ONE row as a
   single unified pill (white container, brand-green button).
   ============================================================ */
.newsletter-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: 540px;
    width: 100%;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .35);
}
.newsletter-form .nl-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    border: none !important;
    outline: none;
    background: transparent;
    color: #1f2a26;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: none !important;
}
.newsletter-form .nl-input::placeholder { color: #8a948d; }
.newsletter-form .nl-input:focus { border: none !important; box-shadow: none !important; outline: none; }
.newsletter-form .nl-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border: none;
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #24bb8c, #1c9c75);
    transition: filter .2s ease, transform .12s ease, box-shadow .2s ease;
}
.newsletter-form .nl-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(36, 187, 140, .35); }
.newsletter-form .nl-btn:active { transform: translateY(0); }
@media (max-width: 480px) {
    .newsletter-form .nl-btn { padding: 10px 16px; }
    .newsletter-form .nl-input { padding: 10px 12px; font-size: 14px; }
}

/* Defeat any global mobile rule that stretches form inputs/buttons to 100%
   (which broke the newsletter pill onto two rows on phones). */
.newsletter-form .nl-input { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
.newsletter-form .nl-btn   { width: auto !important; flex: 0 0 auto !important; }

/* A mobile rule flips flex-direction to column, stacking the newsletter pill.
   Force the pill to stay a horizontal row. */
.newsletter-form { flex-direction: row !important; flex-wrap: nowrap !important; }

/* "Show more / Show less" control for collapsible lists (course categories).
   Previously a hardcoded white fade gradient that (a) was a white block on the
   dark sidebar and (b) overlapped the last categories so the link merged with
   them. Make it a clean, separated button bar: dedicated space below the list,
   solid theme-aware surface, top divider, brand-coloured link. */
.overlay-content.show-more { padding-bottom: 46px !important; }
.overlay-content.show-more p:last-child,
.overlay-content.show-less p:last-child {
    background: var(--surface, #fff) !important;
    border-top: 1px solid var(--line, #e4efe9);
    padding: 11px 0 7px !important;
    margin: 0 !important;
}
.overlay-content .overlay-action {
    color: var(--brand-strong, #1c9c75) !important;
    font-weight: 600; text-decoration: none;
}
html[data-theme="dark"] .overlay-content .overlay-action { color: var(--brand-bright, #4ac8ae) !important; }