/* CMP Platform — Glass & 2026 SaaS polish v1.0.0 */

/* ── Primary button glass shimmer ─────────────────────────────────────────── */
.cmp-btn--primary {
  position: relative;
  overflow: hidden;
}
.cmp-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  border-radius: inherit;
  transition: opacity .2s;
}
.cmp-btn--primary:hover::before { opacity: .7; }

/* Subtle shimmer sweep on hover */
.cmp-btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .5s ease;
}
.cmp-btn--primary:hover::after { left: 160%; }

/* ── Ghost button glass ────────────────────────────────────────────────────── */
.cmp-btn--ghost {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid rgba(14,14,26,.12) !important;
}
.cmp-btn--ghost:hover {
  background: rgba(255,77,28,.06) !important;
  border-color: rgba(255,77,28,.3) !important;
}

/* ── Dashboard stat chips — glass pills ───────────────────────────────────── */
.cmp-stat-chip {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.cmp-stat-chip__num { color: #fff !important; }
.cmp-stat-chip__label { color: rgba(255,255,255,.55) !important; }

/* ── Bento cards — glass border + hover lift ──────────────────────────────── */
.cmp-bento-card {
  border: 1px solid rgba(14,14,26,.07);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.cmp-bento-card:hover {
  box-shadow: 0 8px 32px rgba(14,14,26,.12), 0 2px 8px rgba(14,14,26,.06) !important;
  border-color: rgba(14,14,26,.13) !important;
  transform: translateY(-2px);
}

/* Webinar bento card — dark glass */
.cmp-bento-card--webinar {
  background: linear-gradient(135deg, #13111F 0%, #1e1b32 70%, #2a1f0f 100%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 20px rgba(14,14,26,.25), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.cmp-bento-card--webinar:hover {
  box-shadow: 0 8px 32px rgba(14,14,26,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.16) !important;
  transform: translateY(-2px);
}
.cmp-bento-card--webinar .cmp-bento-card__label { color: rgba(255,255,255,.5) !important; }
.cmp-bento-card--webinar .cmp-bento-card__title { color: #fff !important; }
.cmp-bento-card--webinar .cmp-bento-card__title a { color: #fff !important; }
.cmp-bento-card--webinar .cmp-bento-card__sub { color: rgba(255,255,255,.45) !important; }

/* Webinar bento card — CTA button */
.cmp-bento-card--webinar .cmp-bento-wb-btn {
  background: #FF4D1C !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  margin-top: 16px !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background .15s, transform .12s, box-shadow .15s !important;
  box-shadow: 0 2px 8px rgba(255,77,28,.4) !important;
}
.cmp-bento-card--webinar .cmp-bento-wb-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  border-radius: inherit;
}
.cmp-bento-card--webinar .cmp-bento-wb-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .5s ease;
}
.cmp-bento-card--webinar .cmp-bento-wb-btn:hover {
  background: #e6441a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(255,77,28,.5) !important;
}
.cmp-bento-card--webinar .cmp-bento-wb-btn:hover::after { left: 160%; }

/* Countdown units — tighter pill for dark card */
.cmp-countdown__unit {
  padding: 4px 8px !important;
  border-radius: 8px !important;
  min-width: 38px !important;
}

/* Continue learning card — glass highlight */
.cmp-bento-card--continue {
  border: 1px solid rgba(14,14,26,.08);
  box-shadow: 0 2px 12px rgba(14,14,26,.07), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── Enrolled course items — glass hover ──────────────────────────────────── */
.cmp-enrolled-item {
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease !important;
}
.cmp-enrolled-item:hover {
  box-shadow: 0 6px 20px rgba(14,14,26,.10) !important;
  border-color: rgba(14,14,26,.12) !important;
  transform: translateY(-1px);
}

/* ── Course cards — glass hover ───────────────────────────────────────────── */
.cmp-card {
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease !important;
}
.cmp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(14,14,26,.11), 0 2px 6px rgba(14,14,26,.06) !important;
}

/* ── Webinar archive cards — glass hover ──────────────────────────────────── */
.cmp-wa-card {
  backdrop-filter: blur(0);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, backdrop-filter .18s ease !important;
}
.cmp-wa-card:hover {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Registration card CTA button — glass shimmer ────────────────────────── */
.cmp-btn--reg {
  position: relative;
  overflow: hidden;
}
.cmp-btn--reg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  border-radius: inherit;
}
.cmp-btn--reg::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .55s ease;
}
.cmp-btn--reg:hover::after { left: 160%; }

/* ── Dashboard sidebar nav items — glass active state ────────────────────── */
.cmp-sidebar__nav-item.is-active,
.cmp-sidebar__nav-item[aria-current="page"] {
  background: rgba(255,77,28,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,77,28,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── Countdown units on dashboard — glass pill ────────────────────────────── */
.cmp-countdown__unit {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.cmp-countdown__num { color: #fff !important; }
.cmp-countdown__label { color: rgba(255,255,255,.45) !important; }

/* ── Badge glass ──────────────────────────────────────────────────────────── */
.cmp-badge {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── News items — subtle glass hover ─────────────────────────────────────── */
.cmp-news__item {
  transition: background .15s ease, border-color .15s ease;
}
.cmp-news__item:hover {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Progress bar — glass fill shimmer ───────────────────────────────────── */
.cmp-progress-bar__fill,
.cmp-bento-progress__fill {
  position: relative;
  overflow: hidden;
}
.cmp-progress-bar__fill::after,
.cmp-bento-progress__fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  animation: cmp-shimmer 2.5s infinite;
}
@keyframes cmp-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Sidebar glass + icon circles (v1.1) ─────────────────────────────────── */
.cmp-sidebar {
  background: rgba(12,10,23,.95) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 2px 0 40px rgba(0,0,0,.22) !important;
}

/* Brand mark — orange gradient glass */
.cmp-sidebar__brand-mark {
  background: linear-gradient(135deg, #FF4D1C 0%, #ff6340 100%) !important;
  box-shadow: 0 2px 10px rgba(255,77,28,.45), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* User avatar — stronger ring */
.cmp-sidebar__user-avatar {
  border-color: rgba(255,77,28,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,77,28,.13) !important;
}

/* Nav icon circles */
.cmp-sidebar__nav-icon {
  width: 16px !important;
  height: 16px !important;
  padding: 7px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  box-sizing: content-box !important;
  opacity: 1 !important;
  transition: background .15s !important;
}
.cmp-sidebar__nav-item:hover .cmp-sidebar__nav-icon {
  background: rgba(255,255,255,.11) !important;
}
.cmp-sidebar__nav-item--active .cmp-sidebar__nav-icon {
  background: rgba(255,77,28,.2) !important;
  box-shadow: 0 0 0 1px rgba(255,77,28,.28) inset !important;
}

/* Sidebar footer subtle tint */
.cmp-sidebar__footer {
  background: rgba(0,0,0,.12) !important;
}

/* Sidebar extra section */
.cmp-sidebar__extra {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding-top: 8px !important;
}