/* ===================================================================
   Motrjim Brand palette — override theme colors (light + dark)
   Loaded AFTER app.min.css so these :root values win.
   Identity: deep navy (action) + gold (accent).
   =================================================================== */

:root {
    /* primary = brand navy (buttons, links, active states) */
    --primary: #17324F;
    --primary-saturated: #6B8BAD;
    --primary-hover: #0F2338;
    --primary-border: #17324F;
    --primary-hover-border: #0F2338;
    --primary-btn-color: #ffffff;
    --primary-btn-hover-color: #ffffff;

    /* secondary = near-black navy */
    --secondary: #0E1526;
    --secondary-hover: #05080F;
    --secondary-border: #0E1526;
    --secondary-hover-border: #05080F;
    --secondary-btn-color: #ffffff;
    --secondary-btn-hover-color: #ffffff;

    /* accent = Motrjim gold */
    --accent: #C9A961;
}

/* =====================================================================
   Dark mode — Gen-Z palette: electric violet + neon mint + cyan, glow.
   (Light mode keeps the professional navy/gold identity above.)
   ===================================================================== */
body.dark-mode,
.dark-mode {
    /* primary = electric violet */
    --primary: #7C5CFF;
    --primary-saturated: #A78BFA;
    --primary-hover: #6A45F2;
    --primary-border: #7C5CFF;
    --primary-hover-border: #6A45F2;
    --primary-btn-color: #ffffff;
    --primary-btn-hover-color: #ffffff;

    /* secondary = vivid cyan */
    --secondary: #22D3EE;
    --secondary-hover: #0FBBD6;
    --secondary-border: #22D3EE;
    --secondary-btn-color: #04121a;
    --secondary-btn-hover-color: #04121a;

    /* accent = neon mint */
    --accent: #2DE1B6;
}

/* Gold accent touches (light) — accent var flips to mint in dark automatically */
.badge-warning, .bg-accent { background-color: var(--accent) !important; }
a.text-accent, .text-accent { color: var(--accent) !important; }

/* --- Gen-Z glow & gradients (dark mode only) --- */
.dark-mode .btn-primary,
.dark-mode .primary-btn,
.dark-mode button.btn-primary,
.dark-mode .js-add-to-cart-button.btn-primary {
    background-image: linear-gradient(135deg, #7C5CFF 0%, #22D3EE 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 26px rgba(124,92,255,.42) !important;
    transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}
.dark-mode .btn-primary:hover,
.dark-mode .primary-btn:hover,
.dark-mode button.btn-primary:hover,
.dark-mode .js-add-to-cart-button.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(34,211,238,.5) !important;
    filter: saturate(1.12);
}
/* Content links glow violet — but NEVER override utility-colored links
   (.text-white / .text-dark), buttons, nav or header links. */
.dark-mode a:not(.text-white):not(.text-dark):not(.btn):not([class*="btn-"]):not(.navbar-item):not(.theme-header-1__logo) {
    color: var(--primary-saturated);
}
.dark-mode a:not(.text-white):not(.text-dark):not(.btn):not([class*="btn-"]):not(.navbar-item):hover {
    color: var(--accent);
}
/* selection + focus rings in the Gen-Z accent */
.dark-mode ::selection { background: rgba(45,225,182,.28); color: #eafffb; }
.dark-mode .form-control:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #7C5CFF !important;
    box-shadow: 0 0 0 3px rgba(124,92,255,.28) !important;
}
/* active nav / badges pick up the neon accent */
.dark-mode .badge-warning, .dark-mode .bg-accent { color: #04121a !important; }

/* ===================================================================
   Fix 1 — Top header (dark): keep ALL top-navbar text/icons legible
   on the violet (--primary) bar.
   =================================================================== */
.dark-mode .theme-header-1__top-navbar a,
.dark-mode .theme-header-1__top-navbar span,
.dark-mode .theme-header-1__top-navbar p,
.dark-mode .theme-header-1__top-navbar .icons,
.dark-mode .theme-header-1__top-navbar .text-dark,
.dark-mode .theme-header-1__top-navbar .text-gray-500,
.dark-mode .theme-header-2__top-navbar a,
.dark-mode .theme-header-2__top-navbar span,
.dark-mode .theme-header-2__top-navbar .icons { color: #ffffff !important; }
.dark-mode .theme-header-1__top-navbar a:hover,
.dark-mode .theme-header-2__top-navbar a:hover { color: #ffffff !important; opacity: 1; }
/* search placeholder inside the top bar */
.dark-mode .theme-header-1__top-navbar input::placeholder { color: rgba(255,255,255,.7) !important; }

/* ===================================================================
   Fix 2 — Course page description readability (light + dark).
   Theme default var(--gray-500)=#97A7BF is too faint on both themes.
   =================================================================== */
.course-show-description,
.course-show-description p,
.course-show-description li,
.course-show-description span,
.course-show-description div { color: #3f4a5a !important; }
.dark-mode .course-show-description,
.dark-mode .course-show-description p,
.dark-mode .course-show-description li,
.dark-mode .course-show-description span,
.dark-mode .course-show-description div { color: #d3dbe6 !important; }
/* the "peek" veil over the tabs card was washing text out — soften it */
.course-tabs-card__mask { opacity: .28 !important; }

/* ===================================================================
   Modern language switcher + light/dark toggle (desktop + mobile)
   =================================================================== */

/* --- Theme (light/dark) toggle : DESKTOP header (navy background) --- */
.theme-header-1__top-navbar .theme-color-toggle,
.theme-header-2__top-navbar .theme-color-toggle {
    width: 42px !important; height: 42px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    opacity: 1 !important; cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-header-1__top-navbar .theme-color-toggle:hover,
.theme-header-2__top-navbar .theme-color-toggle:hover {
    background: rgba(201,169,97,.28);
    border-color: rgba(201,169,97,.55);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(201,169,97,.25);
}
.theme-color-toggle .icons { width: 20px !important; height: 20px !important; transition: transform .35s ease, opacity .2s ease; }
.theme-color-toggle:hover .icons { transform: rotate(-18deg) scale(1.08); }

/* --- Theme toggle : MOBILE / boxed variant (light background) --- */
.theme-color-toggle.size-48 {
    background: linear-gradient(135deg, #ffffff, #f4f7fb);
    border: 2px solid #e6ebf1 !important;
    box-shadow: 0 6px 16px rgba(14,21,38,.06);
    transition: all .2s ease;
}
.theme-color-toggle.size-48:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 10px 22px rgba(201,169,97,.22);
    transform: translateY(-2px);
}
.theme-color-toggle.size-48 .icons { width: 22px !important; height: 22px !important; }
.dark-mode .theme-color-toggle.size-48 { background: linear-gradient(135deg,#16223f,#0e1526); border-color:#2a3a5f !important; }

/* --- Language switcher : DESKTOP trigger becomes a clean pill --- */
.theme-header-1__top-navbar .js-language-select > form,
.theme-header-2__top-navbar .js-language-select > form {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px; padding: 5px 12px 5px 8px; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-header-1__top-navbar .js-language-select > form:hover,
.theme-header-2__top-navbar .js-language-select > form:hover {
    background: rgba(201,169,97,.24); border-color: rgba(201,169,97,.5); transform: translateY(-1px);
}
.js-language-select img { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* --- Language dropdown menu : modern card --- */
.header-1-dropdown-menu, .header-2-dropdown-menu {
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(8,12,28,.22) !important;
    border: 1px solid #eef2f6 !important;
    overflow: hidden; padding: 8px !important; margin-top: 10px !important;
    animation: mtj-drop .2s ease;
}
@keyframes mtj-drop { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.header-1-dropdown-menu__item, .header-2-dropdown-menu__item {
    border-radius: 12px; transition: background .15s ease; margin-bottom: 2px;
}
.header-1-dropdown-menu__item:hover, .header-2-dropdown-menu__item:hover { background: rgba(201,169,97,.14); }
.header-1-dropdown-menu__item.active, .header-2-dropdown-menu__item.active {
    background: rgba(23,50,79,.08); position: relative;
}
.header-1-dropdown-menu__item.active:after, .header-2-dropdown-menu__item.active:after {
    content: "✓"; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-weight: 900;
}
.header-1-dropdown-menu__flag img, .header-2-dropdown-menu__flag img { border-radius: 4px; }

/* --- Mobile: language flag chip + drawer items --- */
.js-mobile-header-show-specific-drawer.size-32 {
    width: 44px !important; height: 40px !important; border-radius: 12px !important;
    background: linear-gradient(135deg,#ffffff,#f4f7fb) !important; border: 2px solid #e6ebf1;
    box-shadow: 0 6px 16px rgba(14,21,38,.06); transition: all .2s ease;
}
.js-mobile-header-show-specific-drawer.size-32:hover { border-color: var(--accent); transform: translateY(-2px); }
.dark-mode .js-mobile-header-show-specific-drawer.size-32 { background: linear-gradient(135deg,#16223f,#0e1526) !important; border-color:#2a3a5f; }