/* =========================================================
   Metasys Mexemy Child — Header & Footer styles
   ========================================================= */

:root{
	--mx-grad-a:#2b1361;
	--mx-grad-b:#4f3aa3;
	--mx-accent:#6c4cf1;
	--mx-fg:#ffffff;
	--mx-fg-dim:rgba(255,255,255,.78);
	--mx-foot-bg:#1f1146;
	--mx-radius:999px;
	--mx-font:'Hind Siliguri','Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
}

body.mtsmx-body{margin:0;font-family:var(--mx-font);}
body.mtsmx-body.admin-bar .mx-header{top:32px;}
/* Reserve space for fixed header so content does not slide underneath. JS sets exact value. */
body.mtsmx-body{padding-top:var(--mx-header-h,72px);}

/* ---------- HEADER (sticky + fixed fallback so ancestor overflow can't break it) ---------- */
.mx-header{
	position:fixed;top:0;left:0;right:0;z-index:9999;
	background:linear-gradient(135deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%);
	color:var(--mx-fg);
	box-shadow:0 4px 24px rgba(20,8,60,.25);
	backdrop-filter:saturate(140%);
	transition:padding .25s ease, box-shadow .25s ease, background .25s ease;
}
.mx-header.is-scrolled{
	box-shadow:0 6px 28px rgba(10,4,40,.45);
	background:linear-gradient(135deg,rgba(20,8,60,.96) 0%,rgba(50,30,120,.96) 100%);
}
.mx-header.is-scrolled .mx-header-inner{padding-top:8px;padding-bottom:8px;}
.mx-header-inner{
	max-width:1320px;margin:0 auto;padding:14px 28px;
	display:flex;align-items:center;gap:24px;
}
.mx-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--mx-fg);flex-shrink:0;}
.mx-logo img{display:block;max-height:44px;width:auto;}
.mx-logo-text{font-weight:800;font-size:26px;letter-spacing:-.5px;font-family:'Inter',var(--mx-font);}
.mx-logo-text::after{content:".";color:var(--mx-accent);}

.mx-nav{flex:1;display:flex;justify-content:center;}
.mx-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;}
.mx-menu>li{position:relative;}
.mx-menu>li>a{
	display:inline-flex;align-items:center;gap:6px;
	padding:10px 14px;border-radius:10px;
	color:var(--mx-fg);text-decoration:none;font-weight:500;font-size:15px;
	transition:background .2s,color .2s;
}
.mx-menu>li>a:hover,.mx-menu>li.current-menu-item>a{background:rgba(255,255,255,.08);}
.mx-menu>li.menu-item-has-children>a::after{
	content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:rotate(45deg);margin-left:4px;margin-top:-3px;opacity:.7;
}

/* Submenu dropdown */
.mx-menu .sub-menu{
	list-style:none;margin:0;padding:8px;
	position:absolute;top:calc(100% + 8px);left:0;min-width:240px;
	background:#ffffff;color:#1a1033;border-radius:12px;
	box-shadow:0 20px 50px -10px rgba(20,8,60,.45),0 6px 16px rgba(20,8,60,.2);
	opacity:0;visibility:hidden;transform:translateY(8px);
	transition:opacity .18s,transform .18s,visibility .18s;
	z-index:50;
}
.mx-menu .sub-menu li a{
	display:block;padding:10px 14px;border-radius:8px;
	color:#2a1a55;text-decoration:none;font-size:14px;font-weight:500;
}
.mx-menu .sub-menu li a:hover{background:rgba(108,76,241,.1);color:var(--mx-accent);}
.mx-menu>li:hover>.sub-menu,
.mx-menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}

/* Actions */
.mx-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mx-icon-btn{
	background:transparent;border:0;color:var(--mx-fg);cursor:pointer;
	width:40px;height:40px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	transition:background .2s;
}
.mx-icon-btn:hover{background:rgba(255,255,255,.1);}
.mx-login{
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--mx-accent);color:#fff !important;text-decoration:none;
	padding:10px 22px;border-radius:var(--mx-radius);
	font-weight:600;font-size:15px;letter-spacing:.2px;
	box-shadow:0 6px 18px -4px rgba(108,76,241,.55);
	transition:transform .15s,box-shadow .2s,background .2s;
}
.mx-login:hover{transform:translateY(-1px);background:#7c5dff;box-shadow:0 10px 24px -6px rgba(108,76,241,.7);}

/* Burger */
.mx-burger{display:none;background:transparent;border:0;cursor:pointer;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;}
.mx-burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s;}
.mx-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mx-burger.is-open span:nth-child(2){opacity:0;}
.mx-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Search panel */
.mx-search-panel{background:rgba(0,0,0,.25);padding:18px 28px;}
.mx-search-panel form{max-width:1320px;margin:0 auto;display:flex;gap:10px;}
.mx-search-panel input{flex:1;padding:12px 18px;border:0;border-radius:var(--mx-radius);font-size:15px;background:#fff;color:#1a1033;}
.mx-search-panel button{padding:12px 24px;border:0;border-radius:var(--mx-radius);background:var(--mx-accent);color:#fff;font-weight:600;cursor:pointer;}

/* ---------- DRAWER (mobile) ---------- */
.mx-drawer{
	position:fixed;top:0;right:-340px;bottom:0;width:320px;max-width:90vw;
	background:linear-gradient(180deg,var(--mx-grad-a),var(--mx-grad-b));
	color:#fff;z-index:10001;transition:right .3s ease;overflow-y:auto;
	box-shadow:-10px 0 40px rgba(0,0,0,.4);
}
.mx-drawer.is-open{right:0;}
.mx-drawer-inner{padding:24px;}
.mx-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.mx-drawer-title{font-weight:700;font-size:20px;}
.mx-drawer-close{background:transparent;border:0;color:#fff;font-size:32px;cursor:pointer;line-height:1;width:36px;height:36px;}
.mx-drawer-menu{list-style:none;margin:0;padding:0;}
.mx-drawer-menu li{border-bottom:1px solid rgba(255,255,255,.08);}
.mx-drawer-menu li a{display:block;padding:14px 4px;color:#fff;text-decoration:none;font-size:16px;font-weight:500;}
.mx-drawer-menu .sub-menu{list-style:none;padding:0 0 8px 16px;margin:0;}
.mx-drawer-menu .sub-menu li{border-bottom:0;}
.mx-drawer-menu .sub-menu li a{padding:8px 4px;font-size:14px;color:var(--mx-fg-dim);}
.mx-login-drawer{display:block;text-align:center;margin-top:20px;}

.mx-drawer-backdrop{position:fixed;inset:0;background:rgba(10,4,30,.55);opacity:0;visibility:hidden;transition:opacity .25s;z-index:10000;}
.mx-drawer-backdrop.is-open{opacity:1;visibility:visible;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.mx-nav{display:none;}
	.mx-burger{display:flex;}
	.mx-header-inner{padding:12px 18px;}
}
@media (max-width:560px){
	.mx-login{padding:8px 16px;font-size:14px;}
	.mx-icon-btn{width:36px;height:36px;}
	.mx-logo-text{font-size:22px;}
	.mx-logo img{max-height:36px;}
}

/* ---------- FOOTER ---------- */
.mx-footer{
	background:linear-gradient(135deg,var(--mx-foot-bg) 0%,#3b2380 100%);
	color:var(--mx-fg);font-family:var(--mx-font);
	padding:64px 0 24px;margin-top:60px;
}
.mx-footer-inner{max-width:1320px;margin:0 auto;padding:0 28px;}
.mx-footer-grid{
	display:grid;gap:40px;
	grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
}
.mx-foot-col h3,.mx-foot-col h4{
	font-family:'Inter',var(--mx-font);
	font-size:18px;font-weight:700;margin:0 0 18px;color:#fff;
}
.mx-foot-logo{font-size:28px !important;}
.mx-foot-logo::after{content:".";color:var(--mx-accent);}
.mx-foot-tagline{color:var(--mx-fg-dim);font-size:14px;line-height:1.7;margin:0 0 18px;}
.mx-socials{display:flex;gap:10px;}
.mx-socials a{
	width:38px;height:38px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.08);color:#fff;text-decoration:none;
	transition:background .2s,transform .2s;
}
.mx-socials a:hover{background:var(--mx-accent);transform:translateY(-2px);}
.mx-foot-menu,.mx-foot-meta{list-style:none;margin:0;padding:0;}
.mx-foot-menu li{margin:0 0 10px;}
.mx-foot-menu li a{color:var(--mx-fg-dim);text-decoration:none;font-size:14px;transition:color .2s,padding .2s;}
.mx-foot-menu li a:hover{color:#fff;padding-left:4px;}
.mx-foot-meta li{color:var(--mx-fg-dim);font-size:13px;margin:0 0 10px;line-height:1.5;}
.mx-foot-meta strong{color:#fff;font-weight:600;}

.mx-foot-bottom{
	margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
	display:flex;align-items:center;justify-content:center;
	color:var(--mx-fg-dim);font-size:13px;
}

@media (max-width:1024px){
	.mx-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
	.mx-footer{padding:40px 0 20px;}
	.mx-footer-grid{grid-template-columns:1fr;gap:28px;}
}
/* v1.8.1 — footer payment methods strip */
.mx-foot-payments{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:center;align-items:center;
}
.mx-foot-payments img{
  max-width:100%;height:auto;max-height:42px;width:auto;
  display:block;opacity:.95;filter:saturate(1.05);
}
@media (max-width:640px){
  .mx-foot-payments{margin-top:14px;padding-top:14px}
  .mx-foot-payments img{max-height:32px}
}

/* Mobile header fix — keep burger inside viewport on narrow phones */
@media (max-width:480px){
	.mx-header-inner{padding:10px 12px;gap:8px;}
	.mx-logo{min-width:0;flex-shrink:1;overflow:hidden;}
	.mx-logo-text{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
	.mx-logo img{max-height:32px;}
	.mx-actions{gap:6px;flex-shrink:0;}
	.mx-login{padding:7px 12px;font-size:13px;}
	.mx-icon-btn{width:34px;height:34px;}
	.mx-burger{width:34px;height:34px;}
}
@media (max-width:380px){
	.mx-logo-text{max-width:110px;font-size:17px;}
	.mx-login{padding:6px 10px;font-size:12px;}
}

/* ===== Popular Courses — empty state (v1.9.22) ===== */
.mxm-pc__empty{
  max-width:640px;margin:32px auto 8px;padding:48px 28px;
  background:linear-gradient(135deg,#faf7ff 0%,#f0f7ff 100%);
  border:1px dashed #c7b8f0;border-radius:20px;text-align:center;
  box-shadow:0 4px 24px rgba(124,58,237,.06);
}
.mxm-pc__empty-ico{font-size:54px;line-height:1;margin-bottom:14px}
.mxm-pc__empty-title{font-size:22px;font-weight:700;color:#1f1147;margin:0 0 10px}
.mxm-pc__empty-sub{font-size:15px;line-height:1.7;color:#5b4b7a;margin:0 auto 22px;max-width:480px}
.mxm-pc__empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.mxm-btn--ghost{
  display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px;
  background:#fff;color:#5b21b6;border:1px solid #d8c8f5;font-weight:600;
  text-decoration:none;transition:all .2s ease;
}
.mxm-btn--ghost:hover{background:#f5efff;border-color:#a78bfa;color:#4c1d95}
.mxm-pc__empty-admin{
  margin:18px 0 0;padding-top:14px;border-top:1px dashed #d8c8f5;
  font-size:13px;color:#7a6a99;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.mxm-pc__empty-admin a{color:#6d28d9;text-decoration:none;font-weight:600}
.mxm-pc__empty-admin a:hover{text-decoration:underline}
@media (max-width:520px){
  .mxm-pc__empty{padding:36px 18px;border-radius:16px}
  .mxm-pc__empty-title{font-size:19px}
  .mxm-pc__empty-sub{font-size:14px}
}

/* ===== Popular Courses — loading skeleton (v1.9.23) ===== */
@keyframes mxmShimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }

.mxm-pc-card.is-loading { pointer-events: none; }
.mxm-pc-card.is-loading .mxm-pc-card__media,
.mxm-pc-card.is-loading .mxm-pc-card__by,
.mxm-pc-card.is-loading .mxm-pc-card__title,
.mxm-pc-card.is-loading .mxm-pc-card__meta,
.mxm-pc-card.is-loading .mxm-pc-card__rate,
.mxm-pc-card.is-loading .mxm-pc-card__price,
.mxm-pc-card.is-loading .mxm-pc-card__cta {
  position: relative;
  color: transparent !important;
  background-color: #ece9f4;
  background-image: linear-gradient(90deg, #ece9f4 0%, #f7f5fc 50%, #ece9f4 100%);
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: mxmShimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
  overflow: hidden;
}
.mxm-pc-card.is-loading .mxm-pc-card__media { min-height: 180px; border-radius: 14px; }
.mxm-pc-card.is-loading .mxm-pc-card__media img,
.mxm-pc-card.is-loading .mxm-pc-card__tag,
.mxm-pc-card.is-loading .mxm-pc-card__level,
.mxm-pc-card.is-loading .mxm-pc-card__brand,
.mxm-pc-card.is-loading .mxm-pc-card__stars { visibility: hidden; }
.mxm-pc-card.is-loading .mxm-pc-card__title { min-height: 22px; margin-bottom: 10px; }
.mxm-pc-card.is-loading .mxm-pc-card__by    { width: 55%; min-height: 14px; margin-bottom: 10px; }
.mxm-pc-card.is-loading .mxm-pc-card__meta  { min-height: 16px; margin-bottom: 10px; }
.mxm-pc-card.is-loading .mxm-pc-card__rate  { min-height: 18px; margin-bottom: 10px; }
.mxm-pc-card.is-loading .mxm-pc-card__price { min-height: 22px; width: 60%; margin-bottom: 12px; }
.mxm-pc-card.is-loading .mxm-pc-card__cta   { min-height: 38px; }

/* Smooth reveal once loaded */
.mxm-pc-card { transition: opacity .35s ease; }
.mxm-pc-card.is-loading { opacity: .92; }
.mxm-pc-card.is-loaded  { opacity: 1; }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mxm-pc-card.is-loading .mxm-pc-card__media,
  .mxm-pc-card.is-loading .mxm-pc-card__title,
  .mxm-pc-card.is-loading .mxm-pc-card__by,
  .mxm-pc-card.is-loading .mxm-pc-card__meta,
  .mxm-pc-card.is-loading .mxm-pc-card__rate,
  .mxm-pc-card.is-loading .mxm-pc-card__price,
  .mxm-pc-card.is-loading .mxm-pc-card__cta { animation: none; }
}