/* ================================================================
   OvationLMS — Course UI v3.0
   font-family:inherit everywhere (picks up theme font)
   Brand colors via --ovlms-* CSS vars set by plugin settings
   ================================================================ */

/* ================================================================
   COURSE CARD  (.occ-card) — distinctive signature elements:
   - Per-category colour spine down the left edge
   - 3-dot level meter
   - Cinematic gradient scrim + glass badges on the thumbnail
   - Circular icon CTA
   ================================================================ */
.occ-card {
  --occ-spine: var(--ovlms-primary,#FFDE17);
  background:#fff;
  border:1px solid #edf0f5;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family:var(--ovlms-font, inherit);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  position:relative;
}
.occ-card::before {
  content:'';
  position:absolute; top:0; left:0; bottom:0;
  width:4px;
  background:var(--occ-spine);
  z-index:3;
  opacity:0;
  transition:opacity .28s ease;
}
.occ-card:hover {
  transform:translateY(-6px);
  border-color:#e2e7f0;
  box-shadow:0 20px 40px -12px rgba(16,24,40,.16), 0 4px 10px rgba(16,24,40,.06);
}
.occ-card:hover::before { opacity:1; }

/* Thumbnail */
.occ-thumb {
  display:block;
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f1f5f9;
  flex-shrink:0;
  text-decoration:none;
}
.occ-thumb img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.occ-card:hover .occ-thumb img { transform:scale(1.06); }

.occ-thumb-empty {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:44px;
  background:linear-gradient(135deg, var(--ovlms-primary,#FFDE17), var(--ovlms-secondary,#B9D13D));
}

/* Cinematic bottom scrim — gives the duration chip contrast on any image */
.occ-thumb-scrim {
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events:none; z-index:1;
}

/* Badges — glassmorphism pill, top-left */
.occ-badge {
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:800;
  letter-spacing:.3px; text-transform:uppercase;
  padding:5px 11px; border-radius:99px;
  pointer-events:none; z-index:2;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.occ-badge-sale     { background:rgba(228,47,59,.82); color:#fff; }
.occ-badge-free     { background:rgba(22,163,74,.82); color:#fff; }
.occ-badge-enrolled { background:rgba(37,99,235,.82); color:#fff; }

/* Duration chip — sits on the gradient scrim, bottom-right */
.occ-thumb-duration {
  position:absolute; bottom:8px; right:10px;
  color:#fff; font-size:11px; font-weight:700;
  z-index:2; pointer-events:none;
  letter-spacing:.2px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* Body */
.occ-body {
  padding:15px 16px 6px 18px;
  flex:1; display:flex; flex-direction:column; gap:8px;
}

/* Eyebrow row — category tag and rating share one line, so the title gets
   more vertical space and the eye lands on it first */
.occ-eyebrow {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:18px;
}

/* Category tag — tinted with the card's spine colour (falls back to a
   neutral grey if color-mix() isn't supported by the browser) */
.occ-cat {
  display:inline-block;
  font-size:10px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase;
  color:#475569;
  background:#f1f5f9;
  padding:3px 9px; border-radius:5px;
  width:fit-content;
  font-family:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%;
}

/* Rating row: orange number · percentage-fill stars · grey count */
.occ-rating {
  display:flex; align-items:center; gap:5px;
  line-height:1; flex-shrink:0;
}
.occ-rat-num {
  font-size:13px; font-weight:800;
  color:#b45309;
  font-family:inherit;
}
.occ-stars-wrap {
  position:relative;
  display:inline-block;
  font-size:13px;
  line-height:1;
  letter-spacing:2px;
}
.occ-stars-bg,
.occ-stars-fg { white-space:nowrap; }
.occ-stars-bg { color:#e2e5ea; }
.occ-stars-fg {
  position:absolute; top:0; left:0;
  overflow:hidden;
  color:#f59e0b;
}
.occ-rat-ct {
  font-size:11px; color:#9ca3af;
  font-family:inherit;
}

/* Title */
.occ-title {
  font-size:15.5px; font-weight:800;
  line-height:1.32; margin:1px 0 0;
  letter-spacing:-.1px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  font-family:inherit;
  color:var(--ovlms-dark,#1C1A1A);
}
.occ-title a { color:#111827; text-decoration:none; transition:color .15s; }
.occ-title a:hover { color:var(--occ-spine); text-decoration:none; }

/* Excerpt — short 2-line snippet under title */
.occ-excerpt {
  font-size:12px;
  line-height:1.5;
  color:#6b7280;
  margin:0 0 2px;
  font-family:inherit;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Meta row: svg icon + text, spaced by dots */
.occ-meta {
  display:flex; align-items:center;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  gap:0;
  font-size:12px; color:#6b7280;
  font-family:inherit; margin-top:auto;
}
.occ-meta::-webkit-scrollbar{ display:none; }
.occ-meta-item {
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; flex-shrink:0;
}
.occ-meta-item + .occ-meta-item::before {
  content:'·'; color:#d1d5db; margin:0 5px;
}
.occ-meta-item svg { flex-shrink:0; color:#9ca3af; }

/* Level meter — 3 dots, filled proportionally (beginner=1, intermediate=2,
   advanced/all=3) — a distinctive, instantly-scannable alternative to
   plain "Beginner" text, inspired by (but not copied from) skill-bar UIs */
.occ-level-meter { gap:5px; }
.occ-level-dots { display:inline-flex; gap:2.5px; align-items:center; }
.occ-level-dot {
  width:6px; height:6px; border-radius:50%;
  background:#dfe3ea; display:inline-block;
}
.occ-level-dot--on { background:var(--occ-spine); }

/* Footer: price left, circular animated CTA right */
.occ-footer {
  display:flex; align-items:center;
  justify-content:space-between; gap:8px;
  padding:13px 16px 15px 18px;
  border-top:1px solid #f1f3f7;
  margin-top:12px;
  flex-wrap:wrap; /* safety net: button drops to its own line rather than being clipped if space is ever this tight */
}
.occ-price-wrap {
  display:flex; align-items:baseline; gap:6px;
  min-width:0; flex:1 1 auto;
  overflow:hidden;
}
.occ-price-free,
.occ-price-now  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.occ-price-free { font-size:17px; font-weight:900; color:#16a34a; font-family:inherit; }
.occ-price-now  { font-size:17px; font-weight:900; color:#111827; font-family:inherit; }
.occ-price-orig {
  font-size:12px; color:#9ca3af;
  text-decoration:line-through; font-family:inherit;
  white-space:nowrap;
}

/* CTA — pill with label + a small circular icon that slides forward on hover */
.occ-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 6px 6px 14px;
  background:var(--ovlms-primary,#FFDE17);
  color:var(--ovlms-dark,#1C1A1A);
  border-radius:999px; font-size:12px; font-weight:800;
  text-decoration:none !important; white-space:nowrap;
  font-family:inherit; border:none; cursor:pointer;
  transition:filter .15s, box-shadow .15s;
  flex-shrink:0;
}
.occ-btn-label { white-space:nowrap; }
.occ-btn-circle {
  width:24px; height:24px; border-radius:50%;
  background:var(--ovlms-dark,#1C1A1A); color:var(--ovlms-primary,#FFDE17);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background .2s;
}
.occ-btn:hover {
  filter:brightness(.97);
  color:var(--ovlms-dark,#1C1A1A) !important;
  box-shadow:0 6px 14px rgba(255,222,23,.4);
}
.occ-btn:hover .occ-btn-circle { transform:translateX(2px) rotate(-8deg); }

/* Progressive enhancement: tint the category tag + spine using color-mix()
   where supported (all evergreen browsers). Unsupported browsers silently
   keep the neutral .occ-cat default above — nothing breaks either way. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .occ-card:hover .occ-cat {
    background: color-mix(in srgb, var(--occ-spine) 14%, #fff);
    color: var(--occ-spine);
  }
}

/* ================================================================
   LISTING PAGE
   ================================================================ */
.ovlms-listing-wrap {
  font-family:var(--ovlms-font, inherit);
  max-width:1280px;
  margin:0 auto;
  padding:0 24px 40px;
  box-sizing:border-box;
}
/* The dark hero banner breaks out of the 1280 column to span full width,
   while the filters, cards and pagination stay inside the centered column
   so they never touch the screen edges. */
.ovlms-listing-hero {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--ovlms-dark,#1C1A1A) 0%, #2d2b2b 100%);
  color:#fff; padding:50px 24px; text-align:center;
  margin-bottom:30px;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  width:auto;
}
.ovlms-listing-hero::before,
.ovlms-listing-hero::after {
  content:'';
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, var(--ovlms-primary,#FFDE17) 0%, transparent 70%);
  opacity:.16;
  pointer-events:none;
}
.ovlms-listing-hero::before { width:340px; height:340px; top:-160px; right:-100px; }
.ovlms-listing-hero::after  { width:220px; height:220px; bottom:-120px; left:-60px;
  background:radial-gradient(circle, var(--ovlms-secondary,#B9D13D) 0%, transparent 70%); }

.ovlms-listing-hero-inner { position:relative; z-index:1; }
.ovlms-listing-hero h1 {
  font-size:clamp(24px,4.2vw,34px); font-weight:900;
  margin:0 0 8px; font-family:inherit; letter-spacing:-.3px;
  color:#fff !important;  /* guard against theme heading-color overrides */
}
.ovlms-listing-hero p {
  font-size:15px; color:rgba(255,255,255,.72) !important;
  margin:0 0 22px; font-family:inherit;
}
.ovlms-listing-hero-stats {
  display:flex; justify-content:center; gap:22px;
  margin-bottom:24px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.62); font-weight:600;
}
.ovlms-listing-hero-stats strong { color:#fff; font-weight:800; }

.ovlms-search-bar {
  display:flex; align-items:center;
  max-width:560px; margin:0 auto;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.ovlms-search-bar .ovlms-search-icon {
  padding-left:18px; color:#9ca3af; display:flex; align-items:center; flex-shrink:0;
}
.ovlms-search-bar input {
  flex:1; padding:14px 12px; border:none; outline:none;
  font-size:14px; font-family:inherit; color:#111827;
}
.ovlms-search-bar button {
  padding:14px 22px; border:none; font-weight:800; font-size:14px;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  background:var(--ovlms-primary,#FFDE17); color:var(--ovlms-dark,#1C1A1A);
  transition:filter .15s;
}
.ovlms-search-bar button:hover { filter:brightness(.94); }

.ovlms-filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:24px; padding:12px 14px;
  background:#fff; border:1px solid #edf0f5; border-radius:12px;
}
.ovlms-filter-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 16px; border-radius:99px; font-size:13px; font-weight:700;
  cursor:pointer; border:1.5px solid #e5e9f0; background:#fff; color:#6b7280;
  transition:all .18s; font-family:inherit;
}
.ovlms-filter-chip:hover { border-color:var(--ovlms-primary,#FFDE17); color:#111827; background:rgba(255,222,23,.08); }
.ovlms-filter-chip.active {
  background:var(--ovlms-dark,#1C1A1A);
  border-color:var(--ovlms-dark,#1C1A1A); color:#fff;
}
.ovlms-sort-select {
  margin-left:auto; padding:8px 14px;
  border:1.5px solid #e5e9f0; border-radius:9px;
  font-size:13px; font-family:inherit; background:#fff;
  cursor:pointer; outline:none; color:#111827; font-weight:600;
}

.ovlms-results-bar {
  font-size:13px; color:#6b7280;
  margin-bottom:18px; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.ovlms-results-bar strong { color:#111827; }
.ovlms-results-bar .ovlms-clear-link {
  color:var(--ovlms-accent,#E42F3B); font-size:12px; font-weight:700; text-decoration:none;
}
.ovlms-results-bar .ovlms-clear-link:hover { text-decoration:underline; }

.ovlms-courses-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:24px;
}
.ovlms-no-results {
  grid-column:1/-1; text-align:center;
  padding:64px 20px; color:#9ca3af; font-family:inherit;
  background:#fff; border:1px dashed #e5e9f0; border-radius:14px;
}
.ovlms-no-results .icon { font-size:52px; display:block; margin-bottom:14px; }
.ovlms-pagination {
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:36px; flex-wrap:wrap;
}
.ovlms-page-btn {
  min-width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #e5e9f0; background:#fff;
  font-size:13px; font-weight:700; cursor:pointer;
  color:#111827; font-family:inherit; transition:all .18s;
}
.ovlms-page-btn:hover,
.ovlms-page-btn.active {
  background:var(--ovlms-primary,#FFDE17);
  border-color:var(--ovlms-primary,#FFDE17);
}
.ovlms-page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ================================================================
   CAROUSEL
   ================================================================ */
.ovlms-carousel-wrap { position:relative; font-family:var(--ovlms-font, inherit); }
.ovlms-carousel-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
.ovlms-carousel-title {
  font-size:clamp(18px,3vw,26px); font-weight:900;
  color:var(--ovlms-dark,#1C1A1A); margin:0; font-family:inherit;
}
.ovlms-carousel-controls { display:flex; gap:8px; }
.ovlms-carousel-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--ovlms-dark,#1C1A1A); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:18px; font-weight:700;
  color:#fff; transition:all .18s; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}
.ovlms-carousel-btn:hover {
  background:var(--ovlms-primary,#FFDE17);
  color:var(--ovlms-dark,#1C1A1A);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.ovlms-carousel-btn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.ovlms-carousel-track-wrap { overflow:hidden; padding:6px 2px 14px; margin:-6px -2px -14px; }
.ovlms-carousel-track {
  display:flex; gap:20px;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform; align-items:stretch;
}
.ovlms-carousel-track .occ-card { flex:0 0 calc(25% - 15px); }
.ovlms-carousel-dots {
  display:flex; justify-content:center; gap:6px; margin-top:14px;
}
.ovlms-carousel-dot {
  width:8px; height:8px; border-radius:99px;
  background:#e5e9f0; border:none; cursor:pointer; padding:0;
  transition:all .25s;
}
.ovlms-carousel-dot.active {
  background:var(--ovlms-primary,#FFDE17); width:22px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1023px) {
  .ovlms-carousel-track .occ-card { flex:0 0 calc(33.333% - 14px); }
}
@media (max-width:767px) {
  .ovlms-carousel-track .occ-card { flex:0 0 calc(50% - 10px); }
  .ovlms-courses-grid { grid-template-columns:repeat(2,1fr); }
  .ovlms-sort-select { margin-left:0; width:100%; }

  /* Narrow 2-col cards: shrink the price + CTA so both fit on one row
     without the Enroll button getting pushed off the card. */
  .occ-footer { padding:11px 12px 13px 14px; gap:6px; }
  .occ-price-free,
  .occ-price-now  { font-size:14px; }
  .occ-price-orig { font-size:10px; }
  .occ-price-wrap { flex-wrap:wrap; gap:2px 5px; min-width:0; }
  .occ-btn { padding:5px 5px 5px 11px; font-size:11px; gap:6px; flex-shrink:0; }
  .occ-btn-circle { width:21px; height:21px; }
}
@media (max-width:479px) {
  .ovlms-carousel-track .occ-card { flex:0 0 86%; }
  .ovlms-courses-grid { grid-template-columns:1fr; }
  /* Single column = full-width cards, so the price can breathe again. */
  .occ-price-free,
  .occ-price-now  { font-size:16px; }
  .occ-price-orig { font-size:11px; }
  .occ-btn { padding:6px 6px 6px 14px; font-size:12px; }
  .occ-btn-circle { width:24px; height:24px; }
}

/* Mobile: the [ovlms_course_carousel] shortcode ("Featured Courses" etc.)
   switches from JS arrow/dot paging to a native swipeable strip — the same
   comfortable-width, snap-to-card feel as the Related Courses section. The
   `transform:none !important` neutralizes the JS's inline positioning so
   the browser's own touch scrolling takes over cleanly; hiding the arrows
   and dots avoids two conflicting navigation methods on a touch screen. */
@media (max-width:640px) {
  .ovlms-carousel-controls,
  .ovlms-carousel-dots { display:none; }
  .ovlms-carousel-track-wrap {
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin:-6px 0 -14px; padding:6px 20px 14px;
  }
  .ovlms-carousel-track-wrap::-webkit-scrollbar { display:none; }
  .ovlms-carousel-track {
    transform:none !important;
    gap:14px;
  }
  .ovlms-carousel-track .occ-card {
    flex:0 0 78%;
    scroll-snap-align:start;
  }
}
@media (max-width:420px) {
  .ovlms-carousel-track .occ-card { flex:0 0 86%; }
}