/* wb-courses-v2.css — Course Hub & Detail Pages v3.0
   Does NOT touch any existing CSS files.
   Per-page theme vars set via inline <style>. */

:root {
  --ca: #2563eb;
  --ca-rgb: 37, 99, 235;
  --ca-light: #eff6ff;
  --hero-from: #060e38;
  --hero-to: #0a1f5c;
}

/* ═══════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════ */
.wbc-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--ca), rgba(var(--ca-rgb),.5));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  transition: transform .06s linear;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.wbc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.wbc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   CARD ENTRANCE ANIMATION
═══════════════════════════════════════════ */
@keyframes wbc-card-pop {
  from { opacity: 0; transform: scale(.96) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.wbc-card-pop {
  animation: wbc-card-pop .38s ease both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* ═══════════════════════════════════════════
   STICKY MINI HEADER (course pages)
═══════════════════════════════════════════ */
.wbc-mini-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: rgba(6,14,56,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 11px 0;
  transform: translateY(-110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.wbc-mini-header.visible { transform: translateY(0); }
.wbc-mh-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wbc-mh-course {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.wbc-mh-course span {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  margin-left: 8px;
}
.wbc-mh-btn {
  flex-shrink: 0;
  padding: 9px 22px;
  background: var(--ca);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .18s, transform .15s;
  box-shadow: 0 2px 10px rgba(var(--ca-rgb),.4);
}
.wbc-mh-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ═══════════════════════════════════════════
   HUB — HERO
═══════════════════════════════════════════ */
@keyframes wbc-orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-24px,18px) scale(1.06); }
  66%      { transform: translate(14px,-22px) scale(0.94); }
}
.wbc-hero {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
  padding: 84px 0 96px;
  position: relative;
  overflow: hidden;
}
.wbc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.wbc-hero::after {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: rgba(var(--ca-rgb),.14);
  filter: blur(90px);
  top: -160px; right: -120px;
  pointer-events: none;
  animation: wbc-orb-drift 14s ease-in-out infinite;
}
.wbc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.wbc-hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.wbc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  animation: wbc-card-pop .5s ease both;
}
.wbc-hero-badge:nth-child(1) { animation-delay: .05s; }
.wbc-hero-badge:nth-child(2) { animation-delay: .12s; }
.wbc-hero-badge:nth-child(3) { animation-delay: .19s; }
.wbc-hero-badge:nth-child(4) { animation-delay: .26s; }
.wbc-hero-badge.accent { background: var(--ca); border-color: var(--ca); color: #fff; }
.wbc-hero-h1 {
  font-size: clamp(34px,5vw,56px);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -.6px;
}
.wbc-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,.66);
  line-height: 1.7;
  margin-bottom: 42px;
  max-width: 600px;
}
.wbc-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.wbc-hero-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wbc-hero-stat-icon {
  width: 46px; height: 46px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.wbc-hero-stat-text strong {
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}
.wbc-hero-stat-text span {
  color: rgba(255,255,255,.45);
  font-size: 12px;
  font-weight: 500;
}
.wbc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ca);
  color: #fff;
  padding: 15px 32px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 6px 24px rgba(var(--ca-rgb),.45);
}
.wbc-hero-cta:hover { opacity:.9; transform:translateY(-2px); color:#fff; }

/* ═══════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════ */
.wbc-trust-strip {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 18px 0;
}
.wbc-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.wbc-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.wbc-trust-item .t-icon { font-size: 16px; }
.wbc-trust-div { width:1px; height:20px; background:#e5e7eb; }

/* ═══════════════════════════════════════════
   COURSES SECTION + SEARCH + FILTER
═══════════════════════════════════════════ */
.wbc-courses-section { background: #f8fafc; padding: 60px 0 90px; }
.wbc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.wbc-section-title { font-size: 26px; font-weight: 800; color: #111; margin: 0; }
.wbc-section-count {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 600;
  background: #f0f0f5;
  padding: 4px 12px;
  border-radius: 99px;
}

/* Search */
.wbc-search-wrap {
  position: relative;
  margin-bottom: 18px;
  max-width: 440px;
}
.wbc-search-icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  pointer-events: none;
  opacity: .45;
  line-height: 1;
}
.wbc-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
  box-sizing: border-box;
}
.wbc-search-input:focus {
  border-color: var(--ca);
  box-shadow: 0 0 0 3px rgba(var(--ca-rgb),.1);
}
.wbc-search-input::placeholder { color: #9ca3af; }

/* Filter bar */
.wbc-filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.wbc-filter-btn {
  padding: 8px 18px;
  border-radius: 99px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  font-family: inherit;
}
.wbc-filter-btn:hover { border-color:var(--ca); color:var(--ca); }
.wbc-filter-btn.active {
  background: var(--ca);
  border-color: var(--ca);
  color: #fff;
  box-shadow: 0 3px 12px rgba(var(--ca-rgb),.35);
}

/* ═══════════════════════════════════════════
   COURSE CARDS GRID
═══════════════════════════════════════════ */
.wbc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.wbc-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .28s, transform .24s, border-color .24s;
  position: relative;
}
.wbc-card:hover {
  box-shadow: 0 16px 50px rgba(var(--ca-rgb),.14), 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(-6px);
  border-color: rgba(var(--ca-rgb),.22);
}
.wbc-card.hidden { display:none; }
.wbc-card-accent { height: 4px; }

/* Card badge (Popular / Featured / etc.) */
.wbc-card-badge {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  pointer-events: none;
}
.wbc-card-badge.popular { background: #fef3c7; color: #92400e; }
.wbc-card-badge.featured { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; }
.wbc-card-badge.demand   { background: #d1fae5; color: #065f46; }
.wbc-card-badge.new-badge{ background: #e0e7ff; color: #3730a3; }

.wbc-card-body { padding: 22px 22px 0; flex: 1; }
.wbc-card-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.wbc-card-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
}
.wbc-card-tag.track { background:rgba(var(--track-rgb,37 99 235),.1); color:var(--track-color,#2563eb); }
.wbc-card-tag.lvl { background:#f3f4f6; color:#374151; }
.wbc-card-title { font-size:17px; font-weight:800; color:#111; margin:0 0 8px; line-height:1.3; }
.wbc-card-summary {
  font-size:13px; color:#6b7280; line-height:1.6; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wbc-card-meta { display:flex; gap:18px; margin-bottom:12px; }
.wbc-card-meta-item { display:flex; align-items:center; gap:5px; font-size:12.5px; color:#374151; font-weight:600; }
.wbc-card-meta-item .mi { font-size:14px; color:#9ca3af; }
.wbc-card-qp { font-size:11px; color:#9ca3af; font-family:monospace; margin-bottom:14px; letter-spacing:.3px; }
.wbc-card-tools { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.wbc-tool-chip { font-size:11.5px; padding:3px 10px; border-radius:6px; background:#f3f4f6; color:#374151; font-weight:500; }
.wbc-card-career {
  font-size:11.5px; color:#6b7280; padding:12px 0;
  border-top:1px solid #f3f4f6;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.wbc-career-arr { color:#d1d5db; }
.wbc-card-footer { padding:16px 22px; }
.wbc-card-cta {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:11px 16px; border-radius:9px;
  font-size:13px; font-weight:700; text-decoration:none;
  transition:all .18s; cursor:pointer; font-family:inherit;
  background:rgba(var(--ca-rgb),.07); color:var(--ca);
  border:1.5px solid rgba(var(--ca-rgb),.18);
}
.wbc-card-cta:hover { background:var(--ca); color:#fff; border-color:var(--ca); }

/* ═══════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════ */
.wbc-cta-band {
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  padding: 70px 0; text-align:center; position:relative; overflow:hidden;
}
.wbc-cta-band::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px;
}
.wbc-cta-band-inner { position:relative; z-index:1; }
.wbc-cta-band h2 { font-size:34px; font-weight:900; color:#fff; margin-bottom:12px; }
.wbc-cta-band p { color:rgba(255,255,255,.6); font-size:16px; margin-bottom:32px; }
.wbc-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.wbc-btn-wa {
  display:inline-flex; align-items:center; gap:8px; background:#25d366; color:#fff;
  padding:13px 26px; border-radius:11px; font-size:15px; font-weight:700;
  text-decoration:none; transition:opacity .2s, transform .15s;
}
.wbc-btn-wa:hover { opacity:.9; transform:translateY(-2px); color:#fff; }
.wbc-btn-outline-w {
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff;
  padding:13px 26px; border-radius:11px; font-size:15px; font-weight:700;
  text-decoration:none; border:2px solid rgba(255,255,255,.35); transition:all .2s;
}
.wbc-btn-outline-w:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); color:#fff; }

/* ═══════════════════════════════════════════
   COURSE PAGE — HERO
═══════════════════════════════════════════ */
.wbc-cp-hero {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
  padding: 54px 0 70px;
  position: relative;
  overflow: hidden;
}
.wbc-cp-hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.wbc-cp-hero::after {
  content:''; position:absolute;
  width:580px; height:580px; border-radius:50%;
  background:rgba(var(--ca-rgb),.16); filter:blur(80px);
  top:-100px; right:-80px; pointer-events:none;
  animation: wbc-orb-drift 16s ease-in-out infinite;
}
.wbc-cp-hero-inner { position:relative; z-index:1; }
.wbc-cp-hero-content { max-width:760px; }

/* Breadcrumb */
.wbc-breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:rgba(255,255,255,.42); margin-bottom:22px; flex-wrap:wrap;
}
.wbc-breadcrumb a { color:rgba(255,255,255,.42); text-decoration:none; transition:color .15s; }
.wbc-breadcrumb a:hover { color:rgba(255,255,255,.85); }
.wbc-breadcrumb span { color:rgba(255,255,255,.28); font-size:10px; }

/* Badges */
.wbc-cp-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.wbc-cp-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 14px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
.wbc-cp-badge.accent { background:var(--ca); border-color:var(--ca); color:#fff; }

/* Heading */
.wbc-cp-h1 {
  font-size:clamp(30px,4.5vw,52px); font-weight:900; color:#fff;
  line-height:1.08; margin:0 0 16px; letter-spacing:-.5px;
}
.wbc-cp-sub {
  font-size:16px; color:rgba(255,255,255,.64); line-height:1.72;
  max-width:650px; margin-bottom:28px;
}

/* Meta box */
.wbc-cp-hero-meta {
  display:flex; gap:18px; flex-wrap:wrap; margin-bottom:32px;
  padding:16px 20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; max-width:660px;
}
.wbc-cp-meta-item {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.72); font-weight:500;
}
.wbc-cp-meta-item strong { color:#fff; font-weight:700; }
.wbc-cp-mi { font-size:15px; flex-shrink:0; }

/* CTAs */
.wbc-cp-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.wbc-cp-btn-prim {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; background:var(--ca); color:#fff;
  border-radius:11px; font-size:15px; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition:opacity .2s, transform .15s;
  box-shadow:0 4px 20px rgba(var(--ca-rgb),.45);
  font-family:inherit;
}
.wbc-cp-btn-prim:hover { opacity:.9; transform:translateY(-1px); color:#fff; }
.wbc-cp-btn-wa {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; background:#25d366; color:#fff;
  border-radius:11px; font-size:15px; font-weight:700;
  text-decoration:none; transition:opacity .2s;
}
.wbc-cp-btn-wa:hover { opacity:.9; color:#fff; }

/* ═══════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════ */
.wbc-cp-stats-strip {
  background:#fff; border-bottom:1px solid #eef0f4;
  box-shadow:0 2px 18px rgba(0,0,0,.05);
  position:relative; z-index:2;
}
.wbc-cp-stats-inner { display:flex; align-items:stretch; }
.wbc-cp-stat {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:26px 16px; border-right:1px solid #eef0f4;
  text-align:center; transition:background .18s;
}
.wbc-cp-stat:hover { background:#f8fafc; }
.wbc-cp-stat:last-child { border-right:none; }
.wbc-cp-stat-val {
  font-size:24px; font-weight:900; color:var(--ca);
  line-height:1; margin-bottom:6px; letter-spacing:-.5px;
}
.wbc-cp-stat-lbl {
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; color:#9ca3af;
}

/* ═══════════════════════════════════════════
   TWO-COLUMN LAYOUT
═══════════════════════════════════════════ */
.wbc-cp-layout-bg { background:#f8fafc; }
.wbc-cp-layout {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:32px;
  padding:44px 0 90px;
  align-items:start;
}

/* ═══════════════════════════════════════════
   CONTENT SECTIONS
═══════════════════════════════════════════ */
.wbc-cp-sec {
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:18px;
  padding:32px 34px;
  margin-bottom:22px;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.wbc-cp-sec:last-child { margin-bottom:0; }
.wbc-cp-sec-title {
  font-size:20px; font-weight:800; color:#111;
  margin:0 0 20px; padding-bottom:16px;
  border-bottom:2px solid var(--ca-light,#eff6ff);
  display:flex; align-items:center; gap:10px;
}
.wbc-cp-sec-title-ico {
  width:38px; height:38px;
  background:var(--ca-light,#eff6ff);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.wbc-cp-sec-sub {
  font-size:14px; color:#6b7280; margin:-10px 0 20px; line-height:1.65;
}
.wbc-cp-sec p { font-size:14.5px; color:#4b5563; line-height:1.82; }

/* Highlight grid (About section) */
.wbc-cp-highlight-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;
}
.wbc-cp-highlight {
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px;
  background:var(--ca-light,#eff6ff);
  border-radius:10px;
  border:1px solid rgba(var(--ca-rgb),.1);
  font-size:13px; color:#374151; line-height:1.45; font-weight:500;
  transition:border-color .18s, transform .18s;
}
.wbc-cp-highlight:hover { border-color:rgba(var(--ca-rgb),.3); transform:translateY(-1px); }
.wbc-cp-hl-icon { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ═══════════════════════════════════════════
   SMOOTH ACCORDION
═══════════════════════════════════════════ */
.wbc-accordion { display:flex; flex-direction:column; gap:8px; }
.wbc-acc-item {
  border:1px solid #e8edf3; border-radius:13px; overflow:hidden;
  transition:box-shadow .22s, border-color .22s;
}
.wbc-acc-item.open {
  border-color:rgba(var(--ca-rgb),.3);
  box-shadow:0 4px 20px rgba(var(--ca-rgb),.1);
}
.wbc-acc-hd {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; cursor:pointer;
  background:#fff; border:none; width:100%; text-align:left;
  transition:background .15s; font-family:inherit;
}
.wbc-acc-hd:hover { background:#fafbfd; }
.wbc-acc-item.open .wbc-acc-hd { background:var(--ca-light,#eff6ff); }
.wbc-acc-num {
  width:34px; height:34px;
  background:var(--ca); color:#fff;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0; letter-spacing:.2px;
}
.wbc-acc-label {
  flex:1; font-size:14px; font-weight:700; color:#111; line-height:1.35;
  text-align:left;
}
.wbc-acc-hrs {
  font-size:11.5px; color:#9ca3af; font-weight:600; white-space:nowrap;
  background:#f3f4f6; padding:3px 10px; border-radius:6px; flex-shrink:0;
  transition:all .18s;
}
.wbc-acc-item.open .wbc-acc-hrs {
  background:rgba(var(--ca-rgb),.12); color:var(--ca);
}
.wbc-acc-arrow {
  font-size:16px; color:#9ca3af; flex-shrink:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1), color .18s;
  line-height:1;
}
.wbc-acc-item.open .wbc-acc-arrow { transform:rotate(90deg); color:var(--ca); }

/* Smooth height transition */
.wbc-acc-bd {
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
  background:#fafbfd;
  border-top:0 solid #eef0f4;
}
.wbc-acc-item.open .wbc-acc-bd {
  border-top-width:1px;
}
.wbc-acc-bd ul {
  margin:0; padding:20px 24px 22px 72px;
  list-style:none;
  display:flex; flex-direction:column; gap:9px;
}
.wbc-acc-bd li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; color:#374151; line-height:1.55;
}
.wbc-acc-bd li::before {
  content:'▸'; color:var(--ca); font-size:11px;
  flex-shrink:0; margin-top:3px; font-weight:900;
}

/* ═══════════════════════════════════════════
   LEARNING OUTCOMES
═══════════════════════════════════════════ */
.wbc-outcomes-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.wbc-outcome-item {
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 15px; background:#f8fafc;
  border-radius:10px; border:1px solid #eef0f4;
  font-size:13px; color:#374151; line-height:1.45; font-weight:500;
  transition:border-color .18s, transform .18s;
}
.wbc-outcome-item:hover { border-color:rgba(var(--ca-rgb),.25); transform:translateY(-1px); }
.wbc-oi-icon { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ═══════════════════════════════════════════
   TOOLS
═══════════════════════════════════════════ */
.wbc-tools-wrap { display:flex; gap:9px; flex-wrap:wrap; }
.wbc-tool-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:9px;
  background:#f3f4f6; border:1px solid #e5e7eb;
  font-size:13px; font-weight:600; color:#374151;
  transition:all .18s; cursor:default;
}
.wbc-tool-pill:hover {
  background:var(--ca-light,#eff6ff);
  border-color:rgba(var(--ca-rgb),.3);
  color:var(--ca);
}

/* ═══════════════════════════════════════════
   CAREER PATH — horizontal stepper
═══════════════════════════════════════════ */
.wbc-career-path {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  padding:12px 0 8px;
  counter-reset: career-step;
}
.wbc-career-node {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; flex-shrink:0; min-width:90px; max-width:110px;
  counter-increment: career-step;
}
.wbc-career-dot {
  width:22px; height:22px; border-radius:50%;
  background:var(--ca);
  flex-shrink:0; position:relative;
  box-shadow:0 0 0 4px rgba(var(--ca-rgb),.18);
  display:flex; align-items:center; justify-content:center;
}
.wbc-career-dot::before {
  content: counter(career-step);
  font-size:9px; font-weight:900; color:#fff; line-height:1;
}
.wbc-career-dot.last {
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.2);
}
.wbc-career-info { margin-top:10px; }
.wbc-career-info strong {
  display:block; font-size:12.5px; font-weight:700; color:#111; line-height:1.3;
}
.wbc-career-info span {
  font-size:11px; color:#9ca3af; margin-top:2px; display:block;
}
.wbc-career-connector {
  flex:1; height:2px; min-width:16px;
  background:linear-gradient(90deg, rgba(var(--ca-rgb),.6), rgba(var(--ca-rgb),.15));
  margin-top:10px; /* aligns with center of 22px dot */
  border-radius:2px;
  position:relative;
}
.wbc-career-connector::after {
  content:'▶'; position:absolute;
  right:-5px; top:-6px;
  font-size:8px; color:rgba(var(--ca-rgb),1);
  opacity:.5;
}

/* ═══════════════════════════════════════════
   RELATED COURSES
═══════════════════════════════════════════ */
.wbc-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wbc-related-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:18px; text-decoration:none; display:block; transition:all .22s;
}
.wbc-related-card:hover {
  border-color:var(--ca);
  box-shadow:0 6px 24px rgba(var(--ca-rgb),.12);
  transform:translateY(-3px);
}
.wbc-related-tag {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 9px; border-radius:5px; display:inline-block; margin-bottom:9px;
}
.wbc-related-card h4 { font-size:14px; font-weight:700; color:#111; line-height:1.3; margin:0 0 7px; }
.wbc-related-card p { font-size:12px; color:#9ca3af; margin:0; line-height:1.45; }

/* ═══════════════════════════════════════════
   STICKY ENROLL SIDEBAR
═══════════════════════════════════════════ */
.wbc-enroll-sidebar { position:sticky; top:90px; }
.wbc-enroll-card {
  background:#060e38; border-radius:20px; overflow:hidden;
  box-shadow:0 14px 60px rgba(6,14,56,.38);
}
.wbc-enroll-card-head {
  padding:28px 26px 22px;
  background:linear-gradient(145deg,#0c1a4e 0%,#060e38 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.wbc-enroll-card-head::after {
  content:''; position:absolute;
  width:240px; height:240px; border-radius:50%;
  background:rgba(var(--ca-rgb),.17); filter:blur(50px);
  top:-70px; right:-40px; pointer-events:none;
}
.wbc-enroll-badge {
  font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ca); background:rgba(var(--ca-rgb),.15);
  border:1px solid rgba(var(--ca-rgb),.25);
  padding:4px 12px; border-radius:99px;
  display:inline-block; margin-bottom:12px; position:relative;
}
.wbc-enroll-course-name {
  font-size:22px; font-weight:800; color:#fff; line-height:1.2;
  margin-bottom:6px; position:relative;
}
.wbc-enroll-qp {
  font-size:11px; color:rgba(255,255,255,.35); line-height:1.5; position:relative;
}

/* Urgency tag */
.wbc-urgency-tag {
  display:flex; align-items:center; gap:9px;
  margin:18px 26px 0;
  padding:11px 16px;
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.22);
  border-radius:10px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.68);
}
.wbc-urg-dot {
  width:8px; height:8px; border-radius:50%;
  background:#f59e0b; flex-shrink:0;
  animation:wbc-urg-pulse 1.8s ease-in-out infinite;
}
@keyframes wbc-urg-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,.6); }
  50%      { box-shadow:0 0 0 5px rgba(245,158,11,0); }
}

.wbc-enroll-highlights { padding:20px 26px 0; display:flex; flex-direction:column; gap:12px; }
.wbc-enroll-hl {
  display:flex; align-items:center; gap:11px;
  font-size:13.5px; color:rgba(255,255,255,.72); font-weight:500;
}
.wbc-enroll-hl-icon {
  width:32px; height:32px; background:rgba(255,255,255,.06);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.wbc-enroll-btn {
  display:block; text-align:center;
  margin:22px 26px 0;
  padding:15px;
  background:var(--ca); color:#fff; border-radius:12px;
  font-size:16px; font-weight:800; text-decoration:none;
  border:none; cursor:pointer; font-family:inherit;
  transition:opacity .2s, transform .15s;
  box-shadow:0 4px 22px rgba(var(--ca-rgb),.5);
  letter-spacing:.2px;
}
.wbc-enroll-btn:hover { opacity:.92; transform:translateY(-1px); color:#fff; }
.wbc-enroll-btn-wa {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:10px 26px 0;
  padding:12px; background:rgba(37,211,102,.1); color:#25d366;
  border:1.5px solid rgba(37,211,102,.3); border-radius:11px;
  font-size:14px; font-weight:700; text-decoration:none; transition:all .2s;
  font-family:inherit;
}
.wbc-enroll-btn-wa:hover { background:#25d366; color:#fff; border-color:#25d366; }
.wbc-enroll-note {
  text-align:center; font-size:11.5px; color:rgba(255,255,255,.3);
  padding:12px 26px 26px; font-weight:500;
}

/* ═══════════════════════════════════════════
   LEVEL DIVIDER (Tally)
═══════════════════════════════════════════ */
.wbc-acc-level-divider {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.9px;
  color:var(--ca); padding:20px 0 8px;
  display:flex; align-items:center; gap:12px;
}
.wbc-acc-level-divider::after {
  content:''; flex:1; height:1px; background:rgba(var(--ca-rgb),.18);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1100px) {
  .wbc-cards-grid { grid-template-columns:repeat(2,1fr); }
  .wbc-cp-layout { grid-template-columns:1fr; padding:32px 0 60px; }
  .wbc-enroll-sidebar { position:relative; top:0; order:2; }
  .wbc-career-path { flex-wrap:wrap; }
}

@media (max-width:768px) {
  .wbc-hero { padding:54px 0 68px; }
  .wbc-cards-grid { grid-template-columns:1fr; }
  .wbc-outcomes-grid { grid-template-columns:1fr; }
  .wbc-related-grid { grid-template-columns:1fr; }
  .wbc-cp-highlight-grid { grid-template-columns:1fr; }
  .wbc-trust-inner { gap:16px; justify-content:flex-start; }
  .wbc-trust-div { display:none; }
  .wbc-cp-stats-inner { flex-wrap:wrap; }
  .wbc-cp-stat { flex:0 0 50%; border-right:none; border-bottom:1px solid #eef0f4; }
  .wbc-cp-stat:nth-child(odd) { border-right:1px solid #eef0f4; }
  .wbc-cp-stat:nth-last-child(-n+2) { border-bottom:none; }
  .wbc-cp-hero-meta { padding:14px 16px; gap:14px; }
  .wbc-cp-sec { padding:24px 20px; }
  .wbc-acc-bd ul { padding-left:20px; }
  .wbc-cta-band h2 { font-size:26px; }
  .wbc-cp-stat-val { font-size:20px; }
  .wbc-mh-course span { display:none; }
  /* Career path vertical on mobile */
  .wbc-career-path { flex-direction:column; }
  .wbc-career-node { flex-direction:row; align-items:flex-start; text-align:left; min-width:0; max-width:none; }
  .wbc-career-info { margin-top:0; margin-left:14px; }
  .wbc-career-connector { width:2px; height:24px; flex:none; min-width:0; margin-top:0; margin-left:10px; background:linear-gradient(180deg,rgba(var(--ca-rgb),.5),rgba(var(--ca-rgb),.15)); }
  .wbc-career-connector::after { display:none; }
}


/* ── Urgency Signal (batch countdown) ── */
.wbc-cp-urgency{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 14px;margin-bottom:16px;font-size:13px;color:rgba(255,255,255,.9);flex-wrap:wrap;}
.wbc-cp-urgency strong{color:#fff;}
.wbc-cp-urgency-dot{width:7px;height:7px;background:#f59e0b;border-radius:50%;flex-shrink:0;animation:wbc-urgency-pulse 2s ease-in-out infinite;}
@keyframes wbc-urgency-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);}}
.wbc-cp-urgency-sep{opacity:.4;}