/* =====================================================================
   Mr Zaveri brand layer for the LMS (CodeIgniter) pages.
   Loaded after the vendor theme + recolor.css. Monochrome liquid-glass,
   matching the React marketing site.
   ===================================================================== */
/* Fonts are linked (non-blocking) from the page head, not @import-ed here. */

:root {
  --mz-fg: #0a0a0a;
  --mz-muted: #6e6e73;
  --mz-line: rgba(0, 0, 0, 0.08);
  --mz-soft: #f5f5f7;
  --mz-radius: 20px;
  --mz-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mz-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
  --mz-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -28px rgba(0, 0, 0, 0.22);
}

html, body {
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
body { background: #fff !important; color: var(--mz-fg); }
::selection { background: var(--mz-fg); color: #fff; }
h1, h2, h3, h4, h5, h6, .title, [class*="title"] { letter-spacing: -0.03em; }
h1, h2 { font-weight: 700 !important; }
a { transition: color .3s var(--mz-ease); }

/* Soft monochrome backdrop so glass surfaces have depth */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at -10% -20%, rgba(212, 212, 216, .55), transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 20%, rgba(199, 199, 204, .45), transparent 60%);
}

/* ---------- Header: floating glass bar ---------- */
header, .header-area, .menubar, .sub-header {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--mz-line); }
.sub-header { border-bottom: 1px solid var(--mz-line); }
.main-nav-wrap .nav-link, .navbar-nav .nav-link { color: var(--mz-muted) !important; font-weight: 500; border-radius: 999px; }
.main-nav-wrap .nav-link:hover, .navbar-nav .nav-link:hover { color: var(--mz-fg) !important; }
.header-dropdown { border-radius: 999px !important; box-shadow: inset 0 0 0 1px var(--mz-line) !important; }
.dropdown-menu, .user-dropdown-menu, .popover, .webui-popover {
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .35) !important;
  overflow: hidden;
}
.dropdown-item:hover, .user-dropdown-menu-item:hover { background: rgba(0, 0, 0, .05) !important; color: var(--mz-fg) !important; }

/* ---------- Buttons: black pills ---------- */
.btn, .purchase-btn, .gift-btn, .review-btn, .view-more-btn, .search-btn, .menu_pro_btn, .btn-profile-menu, button[type="submit"] {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: transform .4s var(--mz-ease), box-shadow .4s var(--mz-ease), background .3s, color .3s !important;
}
.btn:active, .purchase-btn:active, button[type="submit"]:active { transform: scale(.97); }
.btn-primary, .purchase-btn, .lms1-btn-dark, .btn-dark, .btn-success, button[type="submit"].btn {
  background: var(--mz-fg) !important; border-color: var(--mz-fg) !important; color: #fff !important;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.btn-primary:hover, .purchase-btn:hover, .lms1-btn-dark:hover, .btn-dark:hover, .btn-success:hover {
  background: #2a2a2c !important; border-color: #2a2a2c !important; color: #fff !important;
}
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .gift-btn, .view-more-btn {
  background: rgba(255, 255, 255, .7) !important; color: var(--mz-fg) !important;
  border: 0 !important; box-shadow: inset 0 0 0 1px var(--mz-line), 0 10px 30px -18px rgba(0, 0, 0, .3) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .gift-btn:hover, .view-more-btn:hover {
  background: var(--mz-fg) !important; color: #fff !important;
}
.btn-danger { border-radius: 999px !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .nice-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select {
  border-radius: 14px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .75) !important;
  box-shadow: inset 0 0 0 1px var(--mz-line) !important;
  transition: box-shadow .3s var(--mz-ease), background .3s !important;
  font-family: inherit !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  background: #fff !important;
  box-shadow: inset 0 0 0 1.5px var(--mz-fg), 0 0 0 4px rgba(0, 0, 0, .06) !important;
  outline: 0 !important;
}
.form-check-input:checked { background-color: var(--mz-fg) !important; border-color: var(--mz-fg) !important; }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(0, 0, 0, .08) !important; }

/* ---------- Cards / panels: liquid glass ---------- */
.card, .courses-card, .course-card, .single-popular-course, .courses-list-view-card, .user-dashboard-box, .my-course-item,
.checkout-sidebar, .cart-items, .shopping-cart, .profile-sidebar, .sign-up-form, .login-form, .login-area .card, .course-sidebar, .course-details-card,
.modal-content {
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: var(--mz-radius) !important;
  background: var(--mz-glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--mz-shadow) !important;
  overflow: hidden;
}
.card img, .courses-card img, .course-card img { transition: transform 1.2s var(--mz-ease); }
.card:hover img, .courses-card:hover img, .course-card:hover img { transform: scale(1.04); }
.badge { border-radius: 999px !important; font-weight: 600; }
.badge.bg-primary, .bg-primary { background-color: var(--mz-fg) !important; }
.text-primary { color: var(--mz-fg) !important; }
.border-primary { border-color: var(--mz-fg) !important; }
.progress { border-radius: 999px !important; background: rgba(0, 0, 0, .06) !important; height: 8px; }
.progress-bar { background: var(--mz-fg) !important; border-radius: 999px; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--mz-fg) !important; color: #fff !important; border-radius: 999px !important; }
.page-link { border-radius: 12px !important; margin: 0 3px; color: var(--mz-fg) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--mz-line); }
.page-item.active .page-link { background: var(--mz-fg) !important; color: #fff !important; }
.accordion-button:not(.collapsed) { background: var(--mz-soft) !important; color: var(--mz-fg) !important; box-shadow: none !important; }
.accordion-item { border-radius: 16px !important; overflow: hidden; border: 1px solid var(--mz-line) !important; margin-bottom: 8px; }
.alert { border-radius: 16px !important; border: 0 !important; }

/* Star ratings stay monochrome */
.fa-star, .fas.fa-star, .rating i, .checked { color: var(--mz-fg) !important; }

/* ---------- Footer ---------- */
.lms2-footer-section { background: #050505 !important; color: #e5e5ea !important; border-radius: 40px 40px 0 0; margin-top: 80px; }
.lms2-footer-section a, .ft2-nav-link, .ft2-copyright-nav-link { color: #a1a1a6 !important; }
.lms2-footer-section a:hover { color: #fff !important; }
.ft2-title, .lms2-footer-section h4, .lms2-footer-section h5 { color: #fff !important; }
.ft2-socila-link { border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ft2-border-bottom { border-color: rgba(255, 255, 255, .1) !important; }

/* ---------- Motion: gentle entrance for main content ---------- */
@media (prefers-reduced-motion: no-preference) {
  main, .main-content, section:first-of-type { animation: mz-in .9s var(--mz-ease) both; }
}
@keyframes mz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Auth pages: brand panel instead of vendor illustrations ---------- */
.sign-up { position: relative; }
.mz-auth-visual { position: relative; text-align: left; padding: 40px 8px 24px; }
.mz-auth-visual h2 { font-size: clamp(44px, 7vw, 88px); line-height: .95; letter-spacing: -0.055em; margin: 0; font-weight: 700; }
.mz-auth-visual h2 em { display: block; font-family: "Instrument Serif", serif !important; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.mz-auth-visual p { color: var(--mz-muted); font-size: 18px; margin: 18px 0 0; max-width: 380px; }
@media (max-width: 767px) {
  .sign-up { margin-top: 1rem !important; padding-top: 1rem !important; }
  .mz-auth-visual { padding: 8px 0 4px; }
  .mz-auth-visual h2 { font-size: 40px; }
  .mz-auth-visual p { display: none; }
}
@media (min-width: 768px) { .mz-auth-visual { padding-top: 90px; } }
.sing-up-right { padding: 28px !important; border-radius: 28px; background: linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--mz-shadow); }
.sing-up-right h3 span { color: var(--mz-fg) !important; }

/* Vendor sub-header (language/phone strip) is not used */
.sub-header { display: none !important; }

/* Cookie banner: monochrome glass */
.cookieConsentContainer {
  background: rgba(10, 10, 10, .86) !important; color: #e5e5ea !important; opacity: 1 !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px !important;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6) !important;
  left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: 440px;
}
.cookieConsentContainer a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.cookieButton a, .cookieConsentContainer .cookieButton a {
  background: #fff !important; color: #0a0a0a !important; border-radius: 999px !important; text-decoration: none !important; font-weight: 600 !important;
}

/* Logo sizing for the new wordmark (PNG, 5:1) */
header img[alt="Logo"], .menubar .logo img, .navbar-brand img, .logo img { height: 30px !important; width: auto !important; max-width: none !important; }
@media (max-width: 767px) { header img[alt="Logo"], .menubar .logo img, .navbar-brand img, .logo img { height: 26px !important; } }

/* ---------- Theme variables: purple accent -> brand ink (affects menus, icons, links) ---------- */
:root, body, .home_1st, .home_2nd, .home_3rd, .home_4th, .home_5th {
  --color-4: #0a0a0a !important;
  --color-12: rgba(10,10,10,.23) !important;
  --color-15: rgba(10,10,10,.35) !important;
  --color-7: #1c1c1e !important;
  --bg-white-2: #f5f5f7 !important;
}
.btn-profile-menu.active, .btn-profile-menu:hover { background: #0a0a0a !important; color: #fff !important; }
.btn-profile-menu.active *, .btn-profile-menu:hover * { color: #fff !important; }

/* Page banner (My courses, Wishlist, etc.): soft monochrome glass instead of lavender + clip-art */
.bread-crumb, .breadcrumb-area, section.bread-crumb {
  background: linear-gradient(180deg, #f5f5f7, #ffffff) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.bread-crumb img[src*="bread"], .bread-crumb .breadcrumb-img, .bread-crumb .bread-crumb-img, .bread-crumb .col-auto img { filter: grayscale(1); opacity: .9; }
.bread-crumb h1, .bread-crumb .title { letter-spacing: -0.045em !important; font-weight: 700 !important; }

/* Student sidebar / dashboard cards */
.profile-sidebar, .my-course-sidebar, .user-dashboard-sidebar { border-radius: 24px !important; }

/* Bootstrap 5 tokens -> brand ink (links, primary utilities) */
:root, body {
  --bs-primary: #0a0a0a !important; --bs-primary-rgb: 10, 10, 10 !important;
  --bs-link-color: #0a0a0a !important; --bs-link-color-rgb: 10, 10, 10 !important;
  --bs-link-hover-color: #2a2a2c !important; --bs-link-hover-color-rgb: 42, 42, 44 !important;
}
/* Share / social icons follow the monochrome look */
.eSocialShare a, .eSocialShare a svg, .course-details-sidebar a.ms-auto, .course-details-sidebar a.ms-auto svg { color: #0a0a0a !important; }
.eSocialShare a { border-radius: 50%; transition: background .25s, color .25s; }
.eSocialShare a:hover { background: #0a0a0a; color: #fff !important; }
.eSocialShare a:hover svg { color: #fff !important; }

/* Footer social icons: neutral on the dark footer */
.ft2-socila-link svg path, .ft2-socila-link svg g { fill: #e5e5ea !important; }
.ft2-socila-link:hover svg path { fill: #ffffff !important; }

/* Orbs live only in the home page hero; hide the vendor banner clip-art if a page still renders it */
.bread-crumb img[src*="brd-book"] { display: none !important; }

/* Course page tabs keep their underline style (not pills) */
.course-left-side #myTab.nav-tabs .nav-link, .course-left-side #myTab.nav-tabs .nav-link.active {
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
}
.course-left-side #myTab.nav-tabs .nav-link { color: #6e6e73 !important; }
.course-left-side #myTab.nav-tabs .nav-link.active, .course-left-side #myTab.nav-tabs .nav-link:hover { color: #0a0a0a !important; }
.course-left-side #myTab.nav-tabs .nav-link.active::after { background: #0a0a0a !important; }


/* ---------- One typeface everywhere (vendor CSS set Roboto / Inter / OpenSans per element,
   which also downloaded ~180KB of extra fonts). Icons, SVG and code keep their own fonts. ---------- */
body :where(:not(i):not(svg):not(svg *):not(code):not(pre):not(kbd):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class*="note-icon"]):not(.mz-auth-visual em)) {
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Black buttons keep white text on every child element */
.purchase-btn *, .btn-dark *, .btn-primary * { color: #fff !important; }

/* Perf: footer shape as lossless WebP (pixel-identical, 51 KB -> 31 KB) */
.lms2-footer-section::after { background-image: url(/assets/frontend/default-new/image/ft2-bg-shape.webp) !important; }

/* "Continue with Google" on login / sign up */
.mz-google { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px auto 14px; max-width: 380px; }
.mz-google-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: #0a0a0a; font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); transition: background .2s, box-shadow .2s, transform .2s;
}
.mz-google-btn:hover { background: #f5f5f7; box-shadow: 0 14px 34px -18px rgba(0,0,0,.45); transform: translateY(-1px); }
.mz-google-btn:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; }
.mz-google-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.mz-google-msg { margin: 0; font-size: 14px; color: #b42318; text-align: center; }

/* Blog hero: same language as the website's page heroes (replaces the vendor's purple banner) */
.mz-blog-hero { background: linear-gradient(180deg, #f5f5f7, #ffffff); border-bottom: 1px solid rgba(0,0,0,.06); padding: 72px 0 56px; }
@media (min-width: 768px) { .mz-blog-hero { padding: 112px 0 80px; } }
.mz-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #6e6e73; margin-bottom: 18px; }
.mz-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #0a0a0a; display: inline-block; }
.mz-blog-hero h1 { font-size: clamp(46px, 9vw, 104px) !important; line-height: .94; letter-spacing: -0.055em !important; font-weight: 700 !important; color: #0a0a0a; margin: 0; }
.mz-blog-hero h1 em { font-family: "Instrument Serif", serif !important; font-style: italic; font-weight: 400; letter-spacing: -0.03em; }
.mz-blog-hero p { color: #6e6e73; font-size: clamp(17px, 2.3vw, 21px); line-height: 1.5; max-width: 640px; margin: 24px 0 0; }

/* Toast notifications (toastr: "Welcome ...", "Added to cart", errors): solid black, white text,
   a single icon; they open below the header so they never cover the cart / wishlist icons. */
#toast-container.toast-top-right { top: 92px; right: 24px; }
@media (max-width: 767px) { #toast-container.toast-top-right { top: 76px; right: 12px; left: 12px; } #toast-container.toast-top-right > div { width: auto !important; } }
#toast-container > div.toast {
  background-color: #0a0a0a !important; background-repeat: no-repeat !important; background-position: 18px center !important; background-size: 20px 20px !important;
  color: #fff !important; border: 0 !important; border-radius: 18px !important; padding: 15px 22px 15px 52px !important;
  width: 340px; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .55) !important; opacity: 1 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#toast-container > div.toast:hover { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .65) !important; }
#toast-container .toast-title, #toast-container .toast-message, #toast-container .toast-message a { color: #fff !important; font-weight: 600; letter-spacing: -0.01em; font-size: 15px; line-height: 1.4; }
#toast-container .toast-close-button { color: #fff !important; opacity: .7; text-shadow: none; }
#toast-container .toast-progress { background-color: #fff !important; opacity: .3; }

/* ---------- Student dashboard ---------- */
/* Empty states (wishlist, cart, badges) */
.mz-empty { text-align: center; padding: 56px 24px; border: 1px dashed rgba(0,0,0,.14); border-radius: 24px; background: #fafafa; margin: 8px 0 24px; }
.mz-empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #0a0a0a; color: #fff; font-size: 24px; box-shadow: 0 16px 34px -18px rgba(0,0,0,.5); }
.mz-empty-icon i { color: #fff !important; }
.mz-empty h3 { font-size: 24px !important; letter-spacing: -0.03em; font-weight: 700 !important; margin: 0 0 8px; color: #0a0a0a; }
.mz-empty p { color: #6e6e73; font-size: 16px; margin: 0 auto 22px; max-width: 360px; }
.mz-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 999px; background: #0a0a0a; color: #fff !important; font-weight: 600; transition: transform .2s, background .2s; }
.mz-empty-cta:hover { background: #2a2a2c; transform: translateY(-1px); }
.mz-empty-cta i { color: #fff !important; }
/* Info alerts (e.g. "no surveys") in the brand palette instead of bootstrap cyan */
.alert-info { background: #f5f5f7 !important; color: #0a0a0a !important; }
/* Phones: compact profile header + the menu as one scrollable row of pills, so content is on screen */
@media (max-width: 991.98px) {
  .wish-list-search { margin-bottom: 20px !important; padding: 14px !important; }
  .wish-list-search .student-profile-info { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; text-align: left !important; padding: 0 !important; margin: 0 0 12px !important; }
  .wish-list-search .student-profile-info .profile-image { grid-row: span 2; width: 44px !important; height: 44px !important; margin: 0 !important; }
  .wish-list-search .student-profile-info h4 { font-size: 16px !important; margin: 0 !important; }
  .wish-list-search .student-profile-info span { font-size: 12px !important; }
  .wish-list-course { display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 !important; }
  .wish-list-course::-webkit-scrollbar { display: none; }
  .wish-list-course .btn-profile-menu { flex: 0 0 auto; width: auto !important; white-space: nowrap; margin: 0 !important; padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid rgba(0,0,0,.1); font-size: 14px !important; }
  /* Purchase history: let the table scroll sideways instead of squeezing the course name */
  .purchase-body { overflow-x: auto; }
  .purchase-body .table { min-width: 640px; }
  .purchase-body .table tbody th { min-width: 250px; }
  .purchase-body .table tbody th * { white-space: normal; width: auto; max-width: none; }
}
/* Invoice header on phones: smaller logo so it never covers "INVOICE" */
@media (max-width: 575.98px) {
  .invoice .invioce-logo img { height: 30px !important; }
  .invoice .invoice-heading h3 { font-size: 22px !important; }
}

/* 404: typographic, like the website footer wordmark (replaces the vendor's purple illustration) */
.error-body .mz-404 { font-size: clamp(120px, 22vw, 260px); font-weight: 800; letter-spacing: -0.07em; line-height: .85; color: transparent; background: linear-gradient(180deg, #0a0a0a 20%, rgba(10,10,10,.08)); -webkit-background-clip: text; background-clip: text; padding: 24px 0; }