/**
 * IAS Portal — Portal CSS
 * Loaded by the IAS Portal plugin on all frontend pages.
 * Previously lived in: Avada → Theme Options → Custom CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ias-teal:         #0D9488;
  --ias-teal-dark:    #0F766E;
  --ias-teal-light:   #F0FDFA;
  --ias-teal-mid:     #CCFBF1;
  --ias-navy:         #1E2A5E;
  --ias-green:        #3DAA43;
  --ias-bg:           #F9FAFB;
  --ias-white:        #ffffff;
  --ias-dark:         #111827;
  --ias-mid:          #6B7280;
  --ias-soft:         #9CA3AF;
  --ias-border:       #E5E7EB;
  --ias-border-light: #F3F4F6;
  --ias-shadow:       0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --ias-shadow-h:     0 4px 16px rgba(0,0,0,.10), 0 8px 32px rgba(0,0,0,.07);
  --ias-r:            14px;
  --ias-r-sm:         8px;
}




/* ── Portal wrapper ── */
.ias-portal-wrap {
  display: flex;
  min-height: 100vh;
  background: var(--ias-bg);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}




/* ── Sidebar (HTML/mockup version) ── */
.ias-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--ias-white);
  border-right: 1px solid var(--ias-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}
.ias-sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--ias-border-light);
}
.ias-sb-logo {
  width: 32px;
  height: 32px;
  background: var(--ias-teal);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ias-sb-site-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--ias-dark);
  line-height: 1.2;
}
.ias-sb-site-name span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ias-mid);
}
.ias-sb-section-label {
  padding: 16px 14px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ias-soft);
}
.ias-sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ias-mid);
  cursor: pointer;
  transition: all .15s;
  border-left: 2.5px solid transparent;
  text-decoration: none !important;
}
.ias-sb-item:hover {
  background: var(--ias-bg);
  color: var(--ias-dark);
}
.ias-sb-item.active {
  background: var(--ias-teal-light);
  color: var(--ias-teal-dark);
  font-weight: 600;
  border-left-color: var(--ias-teal);
}
.ias-sb-icon {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ias-sb-sub {
  padding-left: 14px;
}
.ias-sb-sub .ias-sb-item {
  font-size: 12px;
  padding: 6px 14px 6px 10px;
}
.ias-sb-divider {
  height: 1px;
  background: var(--ias-border-light);
  margin: 8px 12px;
}
.ias-sb-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--ias-border-light);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ias-sb-avatar {
  width: 32px;
  height: 32px;
  background: var(--ias-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ias-sb-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ias-dark);
}
.ias-sb-user-tier {
  font-size: 10px;
  color: var(--ias-mid);
}




/* ══════════════════════════════════════════════════════
   AVADA SIDEBAR — Scoped overrides for Fusion Builder
   These target the real Avada Menu element rendered
   inside a column with class "ias-sidebar-col"
   ══════════════════════════════════════════════════════ */


/* ── Base nav reset ── */
.ias-sidebar-col nav.awb-menu,
.ias-sidebar-col .awb-menu__main-ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  background: transparent !important;
}
.ias-sidebar-col .awb-menu__main-ul {
  flex-direction: column !important;
  gap: 0 !important;
}
.ias-sidebar-col .awb-menu__li {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
}


/* ── Default menu item ── */
.ias-sidebar-col a.awb-menu__main-a {
  padding: 10px 16px 10px 14px !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #6B7280 !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  width: 100% !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}


/* ── Hover state ── */
.ias-sidebar-col a.awb-menu__main-a:hover {
  background: #FEF2EE !important;
  color: #C9684F !important;
  border-left-color: #e07a5f !important;
}


/* ── Active / current page ── */
.ias-sidebar-col .current-menu-item > a.awb-menu__main-a {
  background: #FEF2EE !important;
  color: #C9684F !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  border-left-color: #e07a5f !important;
}


/* ── Section labels (MENU / TOOLS / MY ACCOUNT) ── */
.ias-sidebar-col .ias-menu-label > a.awb-menu__main-a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  padding: 22px 16px 8px !important;
  pointer-events: none !important;
  cursor: default !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
}
.ias-sidebar-col .ias-menu-label > a.awb-menu__main-a:hover {
  background: transparent !important;
  border-left-color: transparent !important;
}


/* ── Section break (divider before TOOLS, MY ACCOUNT) ── */
.ias-sidebar-col li.ias-menu-label.ias-section-break {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #F3F4F6 !important;
}


/* ── Icons ── */
.ias-sidebar-col a.awb-menu__main-a i,
.ias-sidebar-col a.awb-menu__main-a i::before {
  color: #6B7280 !important;
  font-size: 16px !important;
  width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  transition: none !important;
}
.ias-sidebar-col .awb-menu__main-ul .awb-menu__li a.awb-menu__main-a:hover i,
.ias-sidebar-col .awb-menu__main-ul .awb-menu__li a.awb-menu__main-a:hover i::before {
  color: #C9684F !important;
  transition: none !important;
}


/* ── Count badge (green pill, e.g. "12" on Lessons) ── */
.ias-sidebar-col .ias-sb-count {
  margin-left: auto !important;
  background: #DCFCE7 !important;
  color: #16A34A !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}


/* ── NEW badge (amber pill, e.g. on My Planner) ── */
.ias-sidebar-col .ias-sb-badge {
  margin-left: auto !important;
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
}




/* ══════════════════════════════════════════════════════
   SLIDING OVERLAY SIDEBAR
   Add class "ias-overlay-sidebar" to the sidebar column
   on pages where you want the collapsed flyout behavior.
   ══════════════════════════════════════════════════════ */


.ias-overlay-sidebar {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  height: calc(100vh - 60px) !important;
  width: 60px !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 60px !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.28s ease !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-right: 1px solid #E5E7EB !important;
}


.ias-overlay-sidebar:hover {
  width: 220px !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.10) !important;
}


/* Collapse text when sidebar is narrow */
.ias-overlay-sidebar:not(:hover) .awb-menu__main-a {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  padding-left: 11px !important;
}
.ias-overlay-sidebar:not(:hover) .awb-menu__main-a i {
  font-size: 18px !important;
}


/* Restore text on hover */
.ias-overlay-sidebar:hover .awb-menu__main-a {
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
}


/* Hide section labels when collapsed */
.ias-overlay-sidebar:not(:hover) .ias-menu-label > a.awb-menu__main-a {
  opacity: 0 !important;
  transition: opacity 0.1s ease !important;
}
.ias-overlay-sidebar:hover .ias-menu-label > a.awb-menu__main-a {
  opacity: 1 !important;
  transition: opacity 0.2s ease 0.1s !important;
}


/* Tighter spacing in overlay mode */
.ias-overlay-sidebar .ias-menu-label > a.awb-menu__main-a {
  padding: 10px 16px 4px !important;
}
.ias-overlay-sidebar .awb-menu__main-a {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.ias-overlay-sidebar .ias-section-break > a.awb-menu__main-a {
  margin-top: 6px !important;
  padding-top: 10px !important;
}


/* Main content offset for overlay sidebar pages */
.ias-main-col {
  width: calc(100% - 60px) !important;
  max-width: calc(100% - 60px) !important;
  flex: 0 0 calc(100% - 60px) !important;
  margin-left: 60px !important;
}




/* ══════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════════ */


.ias-main {
  flex: 1;
  padding: 28px 32px;
  min-width: 0;
}




/* ── Page header ── */
.ias-pg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.ias-pg-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ias-dark);
  margin-bottom: 2px;
}
.ias-pg-sub {
  font-size: 13px;
  color: var(--ias-mid);
}




/* ── Certificate CTA pill button ── */
.ias-cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ias-teal);
  color: #fff !important;
  border-radius: 50px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(13,148,136,.3);
  transition: all .15s;
}
.ias-cert-btn:hover {
  background: var(--ias-teal-dark);
  box-shadow: 0 4px 18px rgba(13,148,136,.4);
}




/* ── Section tiles ── */
.ias-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ias-tile {
  border-radius: var(--ias-r);
  padding: 20px;
  color: #fff;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
  display: block;
}
.ias-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--ias-shadow-h);
  color: #fff !important;
}
.ias-tile-ic {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ias-tile-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}
.ias-tile-meta {
  font-size: 11.5px;
  opacity: .75;
}
.ias-t-lessons   { background: #3DAA43; }
.ias-t-resources { background: linear-gradient(135deg, #0EA5E9, #0D9488); }
.ias-t-workshops { background: linear-gradient(135deg, #9333EA, #DB2777); }
.ias-t-community { background: linear-gradient(135deg, #F97316, #EC4899); }
.ias-t-cert      { background: #1E2A5E; }




/* ── Dashboard cards ── */
.ias-dcard {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  box-shadow: var(--ias-shadow);
  overflow: hidden;
}
.ias-dc-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--ias-border-light);
  gap: 12px;
}
.ias-dc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ias-dark);
}
.ias-dc-hint {
  font-size: 11.5px;
  color: var(--ias-mid);
  margin-top: 2px;
}
.ias-dc-act {
  font-size: 12px;
  color: var(--ias-teal);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ias-dc-b {
  padding: 18px 20px;
}




/* ── Content tabs ── */
.ias-ltabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ias-ltab {
  background: var(--ias-bg);
  border: 1.5px solid var(--ias-border);
  color: var(--ias-mid);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.ias-ltab.active {
  background: var(--ias-teal);
  border-color: var(--ias-teal);
  color: #fff;
  font-weight: 600;
}




/* ── Mini content cards (My Learning grid) ── */
.ias-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ias-mcard {
  background: var(--ias-bg);
  border: 1.5px solid var(--ias-border);
  border-radius: var(--ias-r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
}
.ias-mcard:hover {
  box-shadow: var(--ias-shadow);
  border-color: transparent;
}
.ias-mthumb {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ias-mbody {
  padding: 10px 12px;
}
.ias-mtags {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.ias-tag {
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
}
.ias-tg  { background: #DCFCE7; color: #15803D; }
.ias-ts  { background: var(--ias-teal-light); color: var(--ias-teal-dark); }
.ias-tt  { background: #F3E8FF; color: #7C3AED; }
.ias-tr  { background: #FFF7ED; color: #C2410C; }
.ias-mtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--ias-dark);
  line-height: 1.4;
  margin-bottom: 4px;
}
.ias-mdur {
  font-size: 11px;
  color: var(--ias-soft);
}




/* ── Tool cards (My Tools) ── */
.ias-tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ias-border-light);
  cursor: pointer;
  transition: background .1s;
}
.ias-tool-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ias-tool-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ias-tc-coach    { background: linear-gradient(135deg, #0D9488, #06B6D4); }
.ias-tc-strategy { background: linear-gradient(135deg, #9333EA, #DB2777); }
.ias-tc-planner  { background: linear-gradient(135deg, #1E2A5E, #3B4BA8); }
.ias-tool-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ias-dark);
}
.ias-tool-desc {
  font-size: 11.5px;
  color: var(--ias-mid);
  margin-top: 2px;
}
.ias-tool-arrow {
  color: var(--ias-soft);
  display: flex;
  align-items: center;
  margin-left: auto;
}




/* ── Dashboard 2-col row ── */
.ias-dash-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}




/* ── Upcoming events ── */
.ias-upc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ias-border-light);
}
.ias-upc-item:last-child { border-bottom: none; }
.ias-upc-chip {
  width: 42px;
  text-align: center;
  flex-shrink: 0;
}
.ias-upc-mo {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ias-teal);
}
.ias-upc-dy {
  font-size: 20px;
  font-weight: 800;
  color: var(--ias-dark);
  line-height: 1.1;
}
.ias-upc-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ias-dark);
  margin-bottom: 3px;
}
.ias-upc-meta {
  font-size: 11px;
  color: var(--ias-mid);
}




/* ── Filter bar (Lessons / Resources / Workshops) ── */
.ias-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ias-filter-chip {
  background: var(--ias-white);
  border: 1.5px solid var(--ias-border);
  color: var(--ias-mid);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ias-filter-chip:hover {
  border-color: var(--ias-teal);
  color: var(--ias-teal);
}
.ias-filter-chip.active {
  background: var(--ias-teal);
  border-color: var(--ias-teal);
  color: #fff;
  font-weight: 600;
}
.ias-filter-search {
  flex: 1;
  max-width: 320px;
  background: var(--ias-white);
  border: 1.5px solid var(--ias-border);
  border-radius: 24px;
  padding: 7px 16px;
  font-size: 12.5px;
  color: var(--ias-dark);
  outline: none;
  font-family: inherit;
}




/* ── Content card grid ── */
.ias-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ias-ccard {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  overflow: hidden;
  box-shadow: var(--ias-shadow);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
}
.ias-ccard:hover {
  box-shadow: var(--ias-shadow-h);
  transform: translateY(-2px);
}
.ias-ccard-thumb {
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ias-ccard-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ias-cbadge {
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.ias-cbadge-grade { background: rgba(0,0,0,.4); }
.ias-cbadge-art   { background: rgba(13,148,136,.85); }
.ias-cbadge-new   { background: #EF4444; }
.ias-ccard-body {
  padding: 14px 16px;
}
.ias-ccard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ias-dark);
  margin-bottom: 6px;
  line-height: 1.4;
}
.ias-ccard-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ias-mid);
  flex-wrap: wrap;
}
.ias-prog-bar {
  height: 3px;
  background: var(--ias-border);
  border-radius: 2px;
  margin-top: 10px;
}
.ias-prog-fill {
  height: 100%;
  background: var(--ias-teal);
  border-radius: 2px;
}




/* ── Preferences page ── */
.ias-pref-section {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  box-shadow: var(--ias-shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.ias-pref-h {
  font-size: 15px;
  font-weight: 700;
  color: var(--ias-dark);
  margin-bottom: 4px;
}
.ias-pref-sub {
  font-size: 12.5px;
  color: var(--ias-mid);
  margin-bottom: 18px;
}
.ias-pchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ias-pchip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ias-bg);
  border: 1.5px solid var(--ias-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ias-dark);
  cursor: pointer;
  transition: all .15s;
}
.ias-pchip:hover {
  border-color: var(--ias-teal);
}
.ias-pchip.selected {
  background: var(--ias-teal-light);
  border-color: var(--ias-teal);
  color: var(--ias-teal-dark);
  font-weight: 600;
}
.ias-pck {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ias-teal);
  display: none;
}
.ias-pchip.selected .ias-pck {
  display: block;
}
.ias-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ias-teal);
  color: #fff !important;
  border: none;
  border-radius: var(--ias-r-sm);
  padding: 11px 24px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
  transition: all .15s;
  text-decoration: none !important;
}
.ias-save-btn:hover {
  background: var(--ias-teal-dark);
}




/* ── Membership tiers page ── */
.ias-tier {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  box-shadow: var(--ias-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
.ias-tier-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ias-hd-a { background: linear-gradient(135deg, #1E2A5E, #3B4BA8); }
.ias-hd-b { background: linear-gradient(135deg, #0D9488, #048CD1); }
.ias-hd-c { background: linear-gradient(135deg, #9333EA, #DB2777); }
.ias-hd-d { background: #374151; }
.ias-tier-body {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
}
.ias-tr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ias-dark);
  padding: 3px 0;
}
.ias-tr.sub {
  padding-left: 16px;
  font-size: 12px;
  color: var(--ias-mid);
}
.ias-tr.locked {
  opacity: .4;
}
.ias-tr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ias-teal);
  flex-shrink: 0;
}
.ias-tr.locked .ias-tr-dot {
  background: var(--ias-soft);
}
.ias-tier-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--ias-border-light);
  font-size: 12px;
  color: var(--ias-mid);
}




/* ── Course page ── */
.ias-course-hero {
  background: linear-gradient(135deg, #1E2A5E, #3B4BA8);
  border-radius: var(--ias-r);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.ias-course-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.ias-module {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  box-shadow: var(--ias-shadow);
  overflow: hidden;
  margin-bottom: 12px;
}
.ias-module-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
}
.ias-lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--ias-border-light);
  cursor: pointer;
  transition: background .1s;
}
.ias-lesson-row:hover {
  background: var(--ias-bg);
}
.ias-lesson-row.current {
  background: var(--ias-teal-light);
}




/* ── Lesson page ── */
.ias-video-player {
  background: #12172B;
  border-radius: var(--ias-r);
  aspect-ratio: 16/9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
  cursor: pointer;
}
.ias-lesson-layout {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 24px;
  align-items: start;
}
.ias-ls-card {
  background: var(--ias-white);
  border-radius: var(--ias-r);
  box-shadow: var(--ias-shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.ias-mark-complete {
  width: 100%;
  background: var(--ias-teal);
  color: #fff;
  border: none;
  border-radius: var(--ias-r-sm);
  padding: 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(13,148,136,.3);
  transition: all .15s;
}
.ias-mark-complete:hover {
  background: var(--ias-teal-dark);
}




/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */


@media (max-width: 1024px) {
  .ias-tiles { grid-template-columns: repeat(3, 1fr); }
  .ias-course-layout { grid-template-columns: 1fr; }
  .ias-lesson-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ias-portal-wrap { flex-direction: column; }
  .ias-sidebar { width: 100%; min-width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; }
  .ias-tiles { grid-template-columns: repeat(2, 1fr); }
  .ias-dash-2col { grid-template-columns: 1fr; }
  .ias-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ias-tiles { grid-template-columns: repeat(2, 1fr); }
  .ias-card-grid { grid-template-columns: 1fr; }
  .ias-main { padding: 20px 16px; }
  .ias-tier-body { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
 * IAS LESSONS PAGE STYLES
 *
 * Install: Avada → Theme Options → Custom Code → Custom CSS
 * Paste this entire file. All selectors are scoped to
 * .ias-lessons-page so they won't leak to other pages.
 * ============================================================ */
 
.ias-lessons-page {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        color: #2d2d2d;
        max-width: 1440px;
        margin: 0 auto;
}
 
.ias-lessons-page *,
.ias-lessons-page *::before,
.ias-lessons-page *::after {
        box-sizing: border-box;
}
 
/* ============================================================
 * HEADER ROW — title left, tile row right
 * ============================================================ */
.ias-lp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
}
 
.ias-lp-title h1 {
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
}
.ias-lp-title p {
        font-size: 14px !important;
        color: #888 !important;
        margin: 0 !important;
        line-height: 1.5 !important;
}
 
/* Tile cards (compact, right-justified) */
.ias-lp-tiles {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
}
.ias-tile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        text-decoration: none;
        transition: transform .2s, box-shadow .2s;
        white-space: nowrap;
        color: #fff;
}
.ias-tile:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        color: #fff;
        text-decoration: none;
}
.ias-tile-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}
.ias-tile-txt {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
}
.ias-tile-txt strong {
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 1px;
}
.ias-tile-txt em {
        color: rgba(255,255,255,0.8);
        font-size: 10px;
        font-style: normal;
        line-height: 1.3;
}
 
.ias-tile-1 { background: linear-gradient(135deg, #5aaad8, #7ac8e0); }
.ias-tile-2 { background: linear-gradient(135deg, #3ab878, #90c840); }
.ias-tile-3 { background: linear-gradient(135deg, #edc115, #f8a040); }
.ias-tile-4 { background: linear-gradient(135deg, #f06878, #e060a8); }
.ias-tile-5 { background: linear-gradient(135deg, #8868c8, #c060b0); }
 
/* ============================================================
 * FILTER BAR — pill-style (matches dashboard top search)
 * ============================================================ */
.ias-lp-filters {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 40px;
        margin-bottom: 40px;
}
 
/* Search input — pill, matches top-bar dashboard search */
.ias-lessons-page .ias-lp-search {
        flex: 1;
        min-width: 240px;
        height: 48px;
        padding-left: 52px !important;
        padding-right: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: 1px solid #ede8e2;
        border-radius: 999px;
        font-family: inherit;
        font-size: 14px;
        color: #2d2d2d;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 22px center;
        background-size: 16px 16px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
        transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ias-lessons-page .ias-lp-search::placeholder {
        color: #999;
        font-weight: 400;
}
.ias-lessons-page .ias-lp-search:hover {
        border-color: #d4cfc9;
}
.ias-lessons-page .ias-lp-search:focus {
        outline: none;
        border-color: #0D9488;
        box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
 
/* Multi-select dropdown triggers — pill */
.ias-lp-dd {
        position: relative;
}
.ias-lessons-page .ias-lp-dd-toggle {
        height: 48px;
        padding: 0 42px 0 22px;
        border: 1px solid #ede8e2;
        border-radius: 999px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: #444;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 12px 12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
        transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}
.ias-lp-dd-toggle:hover {
        border-color: #d4cfc9;
}
.ias-lp-dd-toggle[aria-expanded="true"] {
        border-color: #0D9488;
        box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.ias-lp-dd-toggle.has-selection {
        border-color: #0D9488;
        color: #0D9488;
        background-color: #f0faf9;
}
 
/* Selection count badge */
.ias-lp-dd-badge {
        background: #0D9488;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 12px;
        line-height: 1.4;
}
 
/* Dropdown panel */
.ias-lp-dd-panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 240px;
        max-height: 380px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ede8e2;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
        padding: 6px;
        z-index: 50;
        animation: ias-dd-in .15s ease-out;
}
@keyframes ias-dd-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
}
 
/* Dropdown options */
.ias-lp-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 13.5px;
        color: #444;
        font-weight: 500;
        transition: background-color .12s;
        user-select: none;
}
.ias-lp-opt:hover {
        background: #f9f8f6;
}
.ias-lp-opt input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
}
 
/* Custom checkbox */
.ias-lp-box {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1.5px solid #d4cfc9;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all .15s;
        font-size: 0;
        color: transparent;
        background: #fff;
}
.ias-lp-opt:hover .ias-lp-box {
        border-color: #aaa;
}
.ias-lp-opt input:checked ~ .ias-lp-box {
        background: #0D9488;
        border-color: #0D9488;
        font-size: 12px;
        color: #fff;
}
 
.ias-lp-label {
        flex: 1;
}
 
/* Count pill */
.ias-lp-count {
        font-size: 11px;
        color: #999;
        font-weight: 600;
        background: #f5f3f0;
        padding: 3px 8px;
        border-radius: 10px;
        line-height: 1.3;
        letter-spacing: 0.2px;
}
.ias-lp-opt input:checked ~ .ias-lp-count {
        background: #e6f5f3;
        color: #0D9488;
}
 
/* ============================================================
 * ACTIVE FILTER PILLS
 * ============================================================ */
.ias-lp-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
        align-items: center;
}
.ias-lp-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        background: #e6f5f3;
        color: #0D9488;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
}
.ias-lp-pill-x {
        cursor: pointer;
        font-size: 14px;
        opacity: .6;
        line-height: 1;
        padding: 0 2px;
}
.ias-lp-pill-x:hover {
        opacity: 1;
}
.ias-lp-clear-all {
        font-size: 12px;
        color: #e07a5f;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        margin-left: 4px;
        background: none;
        border: none;
        padding: 0;
        font-family: inherit;
}
 
/* ============================================================
 * RESULTS META
 * ============================================================ */
.ias-lp-meta {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        font-size: 13px;
        color: #999;
        flex-wrap: wrap;
}
.ias-lp-meta-count {
        flex-shrink: 0;
}
.ias-lp-meta strong {
        color: #1a1a2e;
}
.ias-lp-meta-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
}
 
/* ============================================================
 * CREATIVITY COACH AI — promoted purple card in the meta row
 * ============================================================ */
.ias-lp-coach-cta {
        flex: 1;
        min-width: 280px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        background: #f6f0fa;
        border: 1.5px solid #8868c8;
        border-radius: 12px;
        text-decoration: none;
        transition: all .2s;
        cursor: pointer;
}
.ias-lp-coach-cta:hover {
        background: #efe5f6;
        border-color: #6b4ba8;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(136, 104, 200, 0.12);
        text-decoration: none;
}
.ias-lp-coach-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: linear-gradient(135deg, #8868c8, #c060b0);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}
.ias-lp-coach-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
}
.ias-lp-coach-text strong {
        color: #6b4ba8;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 2px;
}
.ias-lp-coach-text em {
        color: #888;
        font-size: 12px;
        font-style: normal;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.ias-lp-coach-btn {
        padding: 9px 18px;
        background: #8868c8;
        color: #fff;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background .15s;
}
.ias-lp-coach-cta:hover .ias-lp-coach-btn {
        background: #6b4ba8;
}
 
/* On smaller viewports, stack the coach CTA below the count */
@media (max-width: 900px) {
        .ias-lp-coach-cta {
                flex: 1 1 100%;
                order: 2;
        }
        .ias-lp-meta-right {
                order: 3;
        }
        .ias-lp-meta-count {
                order: 1;
                flex: 1;
        }
}
 
/* ============================================================
 * FEATURED RESOURCES CARD — blue card on the Resource Directory
 * (parallel to the Creativity Coach AI card on the Lesson Directory)
 * ============================================================ */
.ias-lp-featured-cta {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        background: linear-gradient(135deg, #ecf6fb, #dceefa);
        border: 1.5px solid #5aaad8;
        border-radius: 12px;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s;
        margin-bottom: 14px;
}
.ias-lp-featured-cta:hover {
        background: linear-gradient(135deg, #ddedf7, #c8e2f5);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(90, 170, 216, 0.18);
        text-decoration: none;
}
.ias-lp-featured-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: linear-gradient(135deg, #5aaad8, #7ac8e0);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}
.ias-lp-featured-text {
        flex: 1;
        min-width: 0;
}
.ias-lp-featured-text strong {
        display: block;
        color: #2c6e9c;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px;
}
.ias-lp-featured-text em {
        color: #888;
        font-size: 12.5px;
        font-style: normal;
}
.ias-lp-featured-btn {
        padding: 10px 20px;
        background: #5aaad8;
        color: #fff;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background .15s;
}
.ias-lp-featured-cta:hover .ias-lp-featured-btn {
        background: #4391c2;
}
@media (max-width: 600px) {
        .ias-lp-coach-text em {
                white-space: normal;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
        }
}
.ias-lp-bookmarks-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid #ede8e2;
        border-radius: 999px;
        background: #fff;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: #555;
        text-decoration: none;
        transition: all .15s;
        cursor: pointer;
        line-height: 1.3;
}
.ias-lp-bookmarks-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
}
.ias-lp-bookmarks-btn:hover {
        border-color: #B07D2E;
        color: #B07D2E;
        background: #fef9f0;
        text-decoration: none;
}
.ias-lp-sort {
        padding: 7px 30px 7px 14px;
        border: 1px solid #ede8e2;
        border-radius: 999px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: #555;
        background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 12px center no-repeat;
        background-size: 10px;
        appearance: none;
        cursor: pointer;
        transition: border-color .15s;
}
.ias-lp-sort:hover {
        border-color: #d4cfc9;
}
 
/* ── Grid / List view toggle ── */
.ias-lp-view-toggle {
        display: inline-flex;
        gap: 0;
        border: 1px solid #ede8e2;
        border-radius: 999px;
        padding: 2px;
        background: #fff;
}
.ias-lp-view-btn {
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
        padding: 0;
        transition: background-color .15s, color .15s;
}
.ias-lp-view-btn:hover { color: #555; }
.ias-lp-view-btn.is-active {
        background: #0D9488;
        color: #fff;
}
.ias-lp-view-btn svg {
        width: 14px;
        height: 14px;
}
 
/* ── List view: single column, horizontal cards ── */
.ias-lp-grid.is-list {
        grid-template-columns: 1fr !important;
        gap: 12px;
}
.ias-lp-grid.is-list .ias-lp-card {
        display: flex;
        flex-direction: row;
}
.ias-lp-grid.is-list .ias-lp-card-link {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
}
.ias-lp-grid.is-list .ias-lp-card-img,
.ias-lp-grid.is-list .ias-lp-card-placeholder {
        width: 220px;
        min-width: 220px;
        height: auto;
        min-height: 130px;
        object-fit: cover;
        flex-shrink: 0;
}
.ias-lp-grid.is-list .ias-lp-card-body {
        flex: 1;
        padding: 18px 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
}
.ias-lp-grid.is-list .ias-lp-card h3 {
        font-size: 18px;
        margin-bottom: 6px;
}
.ias-lp-grid.is-list .ias-lp-card p {
        font-size: 13px;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
@media (max-width: 640px) {
        .ias-lp-grid.is-list .ias-lp-card-link {
                flex-direction: column;
        }
        .ias-lp-grid.is-list .ias-lp-card-img,
        .ias-lp-grid.is-list .ias-lp-card-placeholder {
                width: 100%;
                min-width: 0;
                height: 155px;
        }
}
 
/* ============================================================
 * SECTION HEADING
 * ============================================================ */
.ias-lp-sec-head {
        margin-bottom: 14px;
}
.ias-lp-sec-head h2 {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
}
 
/* ============================================================
 * LESSON GRID + CARDS
 * ============================================================ */
.ias-lp-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px 24px;
        margin-bottom: 32px;
}
 
.ias-lp-card {
        background: #fff;
        border: 1px solid #ede8e2;
        border-radius: 14px;
        overflow: hidden;
        transition: all .2s;
        position: relative;
}
.ias-lp-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.06);
        transform: translateY(-2px);
}
 
.ias-lp-card-link {
        display: block;
        text-decoration: none;
        color: inherit;
}
.ias-lp-card-link:hover {
        text-decoration: none;
        color: inherit;
}
 
.ias-lp-card-img {
        width: 100%;
        height: 155px;
        object-fit: cover;
        display: block;
}
.ias-lp-card-placeholder {
        background: linear-gradient(135deg, #f0ebe5, #e8e3dd);
}
 
.ias-lp-card-body {
        padding: 14px 16px;
}
 
.ias-lp-card-tags {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 8px;
}
.ias-tag {
        padding: 3px 8px;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
        line-height: 1.4;
}
.ias-tag-grade   { background: #e0f2f8; color: #4a96be; }
.ias-tag-subject { background: #e8f5ec; color: #3ab878; }
.ias-tag-art     { background: #f3e8f5; color: #8868c8; }
 
/* Resource-specific tag classes */
.ias-tag-restype       { background: #fef3e2; color: #b87015; }  /* Type: warm gold */
.ias-tag-respurpose    { background: #f3e8f5; color: #8868c8; }  /* Purpose: soft purple */
.ias-tag-type-resource { background: #ecf6fb; color: #2c6e9c; }  /* "RESOURCE" badge for mixed contexts (For You, Bookmarks) */
 
.ias-lp-card h3 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 0 5px !important;
        line-height: 1.3 !important;
        font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
}
.ias-lp-card p {
        font-size: 13px !important;
        color: #888 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
}
 
/* ============================================================
 * CARD OVERLAYS — bookmark star + (for bookmarks page) remove X + move dropdown
 * ============================================================ */
 
/* Bookmark star — top-right corner of card */
.ias-lp-bookmark {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(0,0,0,0.05);
        cursor: pointer;
        font-size: 15px;
        color: #bbb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .15s;
        z-index: 2;
        padding: 0;
        line-height: 1;
}
 
/* Remove X (bookmarks page only) — top-right, same slot as the star */
.ias-lp-card-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(0,0,0,0.05);
        cursor: pointer;
        color: #bbb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .15s;
        z-index: 2;
        padding: 0;
        line-height: 1;
}
.ias-lp-card-remove:hover {
        color: #A13560;
        border-color: #A13560;
        background: #fce8ef;
}
.ias-lp-card-remove svg {
        width: 14px;
        height: 14px;
}
 
/* Move-to-category dropdown (bookmarks page only) — bottom of card */
.ias-lp-card-move {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 2;
}
.ias-lp-card-move .ias-bk-move-select {
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        color: #777;
        padding: 5px 20px 5px 8px;
        border: 1px solid #e8e3dd;
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(4px);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 8px;
        max-width: 140px;
}
.ias-lp-card-move .ias-bk-move-select:hover {
        border-color: #0D9488;
        color: #0D9488;
}
 
/* Non-lesson type badge (Workshop, Resource, etc.) */
.ias-tag-type {
        background: #f5f3f0;
        color: #666;
}
.ias-tag-type-workshop { background: #fce7f3; color: #9d174d; }
.ias-tag-type-resource { background: #dcfce7; color: #15803d; }
.ias-tag-type-course   { background: #dbeafe; color: #1d4ed8; }
.ias-tag-type-training { background: #fef3e2; color: #92400e; }
 
/* Original bookmark star hover/saved states */
.ias-lp-bookmark:hover {
        color: #B07D2E;
        border-color: #B07D2E;
}
.ias-lp-bookmark.is-saved {
        color: #B07D2E;
        background: #fef9f0;
}
.ias-lp-bookmark.is-saved::before {
        content: "★";
}
.ias-lp-bookmark:not(.is-saved)::before {
        content: "☆";
}
.ias-lp-bookmark::first-letter {
        content: "";
}
/* Hide the HTML text content (☆) since we use ::before */
.ias-lp-bookmark {
        font-size: 0;
}
.ias-lp-bookmark::before {
        font-size: 16px;
}
 
/* ============================================================
 * NO RESULTS
 * ============================================================ */
.ias-lp-empty {
        text-align: center;
        padding: 60px 20px;
        background: #fff;
        border: 1px solid #ede8e2;
        border-radius: 14px;
        margin-bottom: 28px;
}
.ias-lp-empty p {
        font-size: 14px;
        color: #777;
        margin: 0;
}
.ias-lp-empty a {
        color: #0D9488;
        font-weight: 600;
}
 
/* ============================================================
 * PAGINATION
 * ============================================================ */
.ias-lp-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 32px;
        flex-wrap: wrap;
}
.ias-lp-page-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid #e8e3dd;
        background: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: #777;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .15s;
        padding: 0 10px;
}
.ias-lp-page-btn:hover,
.ias-lp-page-btn.is-active {
        background: #0D9488;
        color: #fff;
        border-color: #0D9488;
}
.ias-lp-page-btn.is-dots {
        cursor: default;
        border: none;
        background: none;
}
.ias-lp-page-btn.is-dots:hover {
        background: none;
        color: #777;
}
.ias-lp-page-btn.is-nav {
        width: auto;
}
 
/* ============================================================
 * MODALS (Implementation + Seasonal)
 * ============================================================ */
/* Works with ias-account.css: that plugin sets .ias-modal{display:none}
   and .ias-modal.is-open{display:flex}. Our JS adds/removes .is-open. */
.ias-modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        align-items: center;
        justify-content: center;
}
.ias-modal[hidden] {
        display: none;
}
.ias-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(4px);
        cursor: pointer;
}
.ias-modal-box {
        position: relative;
        background: #fff;
        border-radius: 18px;
        width: 780px;
        max-width: 92vw;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        z-index: 2;
}
.ias-modal-sm {
        width: 520px;
}
 
.ias-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px 16px;
        border-bottom: 1px solid #f0ebe5;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 3;
        border-radius: 18px 18px 0 0;
}
.ias-modal-head h2 {
        font-size: 20px;
        font-weight: 800;
        color: #1a1a2e;
        margin: 0;
}
.ias-modal-close {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid #e8e3dd;
        background: #fff;
        cursor: pointer;
        font-size: 20px;
        color: #bbb;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
}
.ias-modal-close:hover {
        background: #f9f8f6;
        color: #555;
}
 
.ias-modal-body {
        padding: 24px 28px 28px;
}
.ias-modal-body > p {
        font-size: 13.5px;
        color: #999;
        margin: 0 0 20px;
}
 
.ias-mod-sec {
        font-size: 10px;
        font-weight: 700;
        color: #bbb;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 20px 0 10px;
}
.ias-mod-sec:first-child,
.ias-modal-body > p + .ias-mod-sec {
        margin-top: 8px;
}
 
.ias-mod-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
}
.ias-mod-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border: 1px solid #ede8e2;
        border-radius: 12px;
        cursor: pointer;
        transition: all .15s;
        text-decoration: none;
        color: inherit;
}
.ias-mod-item:hover {
        border-color: #0D9488;
        background: #f0faf9;
        text-decoration: none;
        color: inherit;
}
.ias-mod-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
}
.ias-mod-icon-teal  { background: #e0f2f8; }
.ias-mod-icon-plum  { background: #f3e8f5; }
.ias-mod-icon-ochre { background: #fef3e2; }
.ias-mod-icon-rasp  { background: #fce8ef; }
 
.ias-mod-item h4 {
        font-size: 13.5px;
        font-weight: 600;
        color: #1a1a2e;
        margin: 0;
        line-height: 1.3;
}
.ias-mod-item span {
        font-size: 11px;
        color: #aaa;
        display: block;
        margin-top: 2px;
}
 
/* Seasonal modal specific */
.ias-mod-seasonal-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
}
.ias-mod-seasonal-card {
        border: 1px solid #ede8e2;
        border-radius: 12px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: all .15s;
}
.ias-mod-seasonal-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transform: translateY(-1px);
        text-decoration: none;
        color: inherit;
}
.ias-mod-seasonal-card img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        display: block;
}
.ias-mod-seasonal-card h4 {
        font-size: 13px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        padding: 10px 12px;
        line-height: 1.3;
}
 
/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1200px) {
        .ias-lp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
        .ias-lp-header { flex-direction: column; align-items: flex-start; }
        .ias-lp-tiles { width: 100%; }
        .ias-lp-grid { grid-template-columns: repeat(2, 1fr); }
        .ias-mod-grid { grid-template-columns: 1fr; }
        .ias-mod-seasonal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
        .ias-lp-grid { grid-template-columns: 1fr; }
        .ias-lp-filters { padding: 10px 12px; }
        .ias-lp-dd-panel { min-width: 180px; }
}
/* ============================================================
 * IAS Trainings Directory — additions for phase-3-lessons-page.css
 *
 * Paste this BLOCK at the end of your existing phase-3-lessons-page.css
 * in Avada → Theme Options → Custom CSS. It only adds styles scoped
 * to #ias-trainings-page so it cannot affect the Lesson or Resource
 * Directory pages.
 * ============================================================ */
 
/* ===== PAGE WRAPPER — font + layout base (matches Lesson/Resource directories) ===== */
#ias-trainings-page {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        color: #2d2d2d;
        max-width: 1440px;
        margin: 0 auto;
}
#ias-trainings-page *,
#ias-trainings-page *::before,
#ias-trainings-page *::after {
        box-sizing: border-box;
}
 
/* ===== PAGE TOP ROW (header + right-aligned utility tiles) ===== */
#ias-trainings-page .page-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 28px; margin-bottom: 28px; flex-wrap: wrap; }
#ias-trainings-page .page-header { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 280px; }
#ias-trainings-page .page-kicker { display: inline-flex; align-items: center; gap: 6px; background: #fef3e2; padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #b87015; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; }
#ias-trainings-page .page-kicker i { font-size: 10px; }
#ias-trainings-page .page-header h1 { font-size: 26px; font-weight: 800; color: #1a1a2e; margin: 0; letter-spacing: -0.02em; }
#ias-trainings-page .page-header p { font-size: 14px; color: #888; margin: 0; max-width: 560px; line-height: 1.5; }
 
/* ===== UTILITY TILES (blue / green / pink) ===== */
#ias-trainings-page .utility-tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#ias-trainings-page .util-tile { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; text-decoration: none; color: #fff; cursor: pointer; transition: all .2s; font-size: 13px; font-weight: 600; min-width: 160px; }
#ias-trainings-page .util-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); color: #fff; }
#ias-trainings-page .util-tile-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
#ias-trainings-page .util-tile-1 { background: linear-gradient(135deg, #5aaad8, #7ac8e0); }
#ias-trainings-page .util-tile-2 { background: linear-gradient(135deg, #3ab878, #90c840); }
#ias-trainings-page .util-tile-3 { background: linear-gradient(135deg, #f06878, #e060a8); }
 
/* ===== "PICK UP WHERE YOU LEFT OFF" HERO CARD ===== */
#ias-trainings-page .resume-hero { background: #fff; border: 1px solid #ede8e2; border-radius: 14px; padding: 20px; margin-bottom: 28px; display: flex; align-items: center; gap: 20px; }
#ias-trainings-page .resume-hero-img { width: 140px; height: 140px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; background-color: #f0ebe5; }
#ias-trainings-page .resume-hero-content { flex: 1; min-width: 0; }
#ias-trainings-page .resume-kicker { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
#ias-trainings-page .resume-hero h2 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.3; }
#ias-trainings-page .resume-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: #888; flex-wrap: wrap; }
#ias-trainings-page .resume-badge { color: #fff; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
#ias-trainings-page .resume-progress-bar { width: 100%; max-width: 480px; height: 6px; background: #f0ebe5; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
#ias-trainings-page .resume-progress-fill { height: 100%; background: #0D9488; transition: width .3s; }
#ias-trainings-page .resume-btn { padding: 10px 28px; background: #0D9488; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
#ias-trainings-page .resume-btn:hover { background: #0a7a72; color: #fff; }
#ias-trainings-page .resume-empty { text-align: center; color: #bbb; padding: 20px; font-size: 13px; width: 100%; }
 
/* ===== SEARCH + FILTER ROW (search ~2/5 left, filters spread to fill right) ===== */
#ias-trainings-page .search-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
/* Filter pill wrappers fill the remaining row width and space evenly */
#ias-trainings-page .search-filter-row > div { flex: 1 1 auto; position: relative; }
#ias-trainings-page .search-filter-row > div > .filter-toggle { width: 100%; }
#ias-trainings-page .tp-search { flex: 0 0 38%; max-width: 38%; min-width: 260px; height: 48px; padding: 0 22px 0 48px; border: 1px solid #ede8e2; border-radius: 999px; font-family: inherit; font-size: 14px; color: #444; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 18px center no-repeat; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); transition: border-color .15s, box-shadow .15s; }
#ias-trainings-page .tp-search::placeholder { color: #aaa; }
#ias-trainings-page .tp-search:focus { border-color: #0D9488; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02), 0 0 0 3px rgba(13,148,136,0.12); }
 
/* Filter pill toggles */
#ias-trainings-page .filter-toggle { height: 48px; padding: 0 42px 0 22px; border: 1px solid #ede8e2; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; color: #444; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 18px center no-repeat; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); }
#ias-trainings-page .filter-toggle:hover { border-color: #0D9488; }
 
/* Filter dropdown panels */
#ias-trainings-page .filter-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: #fff; border: 1px solid #ede8e2; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.08); padding: 8px; z-index: 50; max-height: 380px; overflow-y: auto; }
#ias-trainings-page .filter-panel[hidden] { display: none; }
#ias-trainings-page .filter-panel.is-wide { min-width: 560px; right: 0; left: auto; max-height: none; }
#ias-trainings-page .filter-panel.is-wide .filter-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; }
#ias-trainings-page .filter-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #f0ebe5; font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
#ias-trainings-page .filter-panel-clear { font-size: 11px; font-weight: 600; color: #0D9488; cursor: pointer; background: none; border: none; padding: 0; text-transform: none; letter-spacing: 0; }
#ias-trainings-page .filter-panel-clear:hover { text-decoration: underline; }
 
#ias-trainings-page .filter-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #555; transition: background .1s; margin: 0; position: relative; }
#ias-trainings-page .filter-option:hover { background: #f9f8f6; }
#ias-trainings-page .filter-option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
#ias-trainings-page .filter-checkbox { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; font-size: 11px; color: transparent; }
#ias-trainings-page .filter-option.selected .filter-checkbox,
#ias-trainings-page .filter-option input:checked ~ .filter-checkbox { background: #0D9488; border-color: #0D9488; color: #fff; }
#ias-trainings-page .filter-label { flex: 1; }
#ias-trainings-page .filter-count { font-size: 11px; color: #bbb; font-weight: 600; }
/* Inline count format: "Topic name (22)" */
#ias-trainings-page .filter-count-inline { font-size: 11px; color: #bbb; font-weight: 600; margin-left: 4px; }
 
/* ===== RESULTS META ROW ===== */
#ias-trainings-page .results-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 13px; color: #999; flex-wrap: wrap; }
#ias-trainings-page .results-meta strong { color: #1a1a2e; }
#ias-trainings-page .meta-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#ias-trainings-page .bookmarks-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #ede8e2; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: #555; text-decoration: none; cursor: pointer; }
#ias-trainings-page .bookmarks-btn:hover { border-color: #B07D2E; color: #B07D2E; background: #fef9f0; }
#ias-trainings-page .view-toggle { display: inline-flex; gap: 0; border: 1px solid #ede8e2; border-radius: 999px; padding: 2px; background: #fff; }
#ias-trainings-page .view-btn { width: 30px; height: 30px; border: none; border-radius: 999px; background: transparent; cursor: pointer; color: #aaa; display: flex; align-items: center; justify-content: center; }
#ias-trainings-page .view-btn.is-active { background: #0D9488; color: #fff; }
#ias-trainings-page .sort { padding: 7px 30px 7px 14px; border: 1px solid #ede8e2; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #555; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 12px center no-repeat; appearance: none; cursor: pointer; }
 
/* ===== SECTION HEADING ===== */
#ias-trainings-page .section-heading h2 { font-size: 17px; font-weight: 700; color: #1a1a2e; margin: 0 0 14px; }
 
/* ===== TRAINING CARD GRID ===== */
#ias-trainings-page .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; margin-bottom: 32px; }
@media (max-width: 1100px) { #ias-trainings-page .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { #ias-trainings-page .grid { grid-template-columns: repeat(2, 1fr); } }
 
.ias-tp-card { background: #fff; border: 1px solid #ede8e2; border-radius: 14px; overflow: hidden; transition: all .2s; position: relative; cursor: pointer; display: flex; flex-direction: column; }
.ias-tp-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.06); transform: translateY(-2px); }
.ias-tp-card-img { width: 100%; height: 175px; object-fit: cover; display: block; background: linear-gradient(135deg, #f0ebe5, #e8e3dd); position: relative; }
.ias-tp-card-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: rgba(0,0,0,0.1); overflow: hidden; }
.ias-tp-card-progress-fill { height: 100%; background: #0D9488; }
.ias-tp-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.ias-tp-card-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: #fff; width: fit-content; }
.ias-tp-card-badge.badge-workshop       { background: #f06878; }
.ias-tp-card-badge.badge-course          { background: #5aaad8; }
.ias-tp-card-badge.badge-microcredential { background: #8868c8; }
.ias-tp-card-badge.badge-learning-pathway{ background: #3ab878; }
.ias-tp-card-badge.badge-conference-session { background: #f8a040; }
.ias-tp-card-badge.badge-full-event      { background: #e55a2a; }
.ias-tp-card h3 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin: 0 0 5px; line-height: 1.3; }
.ias-tp-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0 0 10px; }
.ias-tp-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ias-tp-card-tags .tag { padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; background: #f0ebe5; color: #8a7969; }
.ias-tp-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #bbb; margin-top: auto; }
.ias-tp-card-footer .card-credits { display: flex; gap: 6px; flex-wrap: wrap; }
.ias-tp-card-footer .credit-chip { background: #f9f8f6; padding: 4px 8px; border-radius: 4px; font-weight: 600; color: #666; font-size: 11px; }
.ias-tp-card-footer .progress-label { font-size: 11px; color: #0D9488; font-weight: 700; }
 
/* ===== PAGINATION ===== */
#ias-trainings-page .pagination { display: flex; justify-content: center; gap: 6px; margin-bottom: 32px; flex-wrap: wrap; }
#ias-trainings-page .page-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #ede8e2; background: #fff; font-family: inherit; font-size: 13px; font-weight: 600; color: #777; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#ias-trainings-page .page-btn:hover:not(:disabled), #ias-trainings-page .page-btn.is-active { background: #0D9488; color: #fff; border-color: #0D9488; }
#ias-trainings-page .page-btn.is-nav { width: auto; padding: 0 14px; }
#ias-trainings-page .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
/* ===== CERTIFICATION CTA BANDS ===== */
#ias-trainings-page .cta-band { background: linear-gradient(135deg, #8868c8, #c060b0); border-radius: 16px; padding: 40px; text-align: center; margin-bottom: 32px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#ias-trainings-page .cta-band.enrolled { background: linear-gradient(135deg, #6e4eb5, #a14fa0); }
#ias-trainings-page .cta-band h2 { font-size: 24px; font-weight: 800; margin: 0; color: #fff; }
#ias-trainings-page .cta-band p { font-size: 15px; margin: 0; opacity: 0.95; color: #fff; }
#ias-trainings-page .cta-band-progress { width: 100%; max-width: 360px; }
#ias-trainings-page .cta-band-progress-bar { height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
#ias-trainings-page .cta-band-progress-fill { height: 100%; background: rgba(255,255,255,0.92); }
#ias-trainings-page .cta-band-progress-text { font-size: 12px; opacity: 0.9; }
#ias-trainings-page .cta-btn { padding: 14px 40px; background: #fff; color: #1a1a2e; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-block; }
#ias-trainings-page .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); color: #1a1a2e; }
#ias-trainings-page .cta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; opacity: 0.85; }
 
/* ============================================================
 * v2 additions — subtag colors, image placeholder with title,
 * bookmark button, list view, bookmarks modal
 * ============================================================ */
 
/* ===== CARD IMAGE PLACEHOLDER with title overlay ===== */
.ias-tp-card-img-placeholder {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 20px;
        text-align: center;
}
.ias-tp-card-img-title {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.005em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.18);
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
 
/* Bookmark button shares styling with .ias-lp-bookmark from the lessons CSS.
 * On training cards we just need to ensure z-index sits above the
 * absolute .ias-tp-card-link layer so clicking the star doesn't navigate. */
.ias-tp-card .ias-lp-bookmark { z-index: 3; }
/* Clickable card overlay — covers entire card, sits under the bookmark star */
.ias-tp-card { position: relative; }
.ias-tp-card-link {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        text-indent: -9999px;
        overflow: hidden;
}
 
/* ===== SUBTAG COLORS (match lesson/resource palette) ===== */
.ias-tp-card-tags .tag-type        { background: #ecf6fb; color: #2c6e9c; }
.ias-tp-card-tags .tag-subject     { background: #e9f8ef; color: #217f52; }
.ias-tp-card-tags .tag-art         { background: #f6edf8; color: #7b3aa1; }
.ias-tp-card-tags .tag-topic       { background: #fdf0dd; color: #a56410; }
.ias-tp-card-tags .tag-credit      { background: #f4efe2; color: #7a6b41; }
/* Fallback generic tag also gets a bit of warmth */
.ias-tp-card-tags .tag { background: #fdf0dd; color: #a56410; }
 
/* ===== LIST VIEW ===== */
#ias-trainings-page .grid.is-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
}
#ias-trainings-page .grid.is-list .ias-tp-card {
        flex-direction: row;
        align-items: stretch;
}
#ias-trainings-page .grid.is-list .ias-tp-card-img,
#ias-trainings-page .grid.is-list .ias-tp-card-img-placeholder {
        width: 220px;
        height: auto;
        min-height: 140px;
        flex-shrink: 0;
}
#ias-trainings-page .grid.is-list .ias-tp-card-body {
        padding: 16px 22px;
}
#ias-trainings-page .grid.is-list .ias-tp-card h3 {
        font-size: 18px;
}
#ias-trainings-page .grid.is-list .ias-tp-card p {
        font-size: 14px;
}
 
/* ===== RESUME HERO EMPTY STATE tightening ===== */
#ias-trainings-page .resume-hero:has(.resume-empty) {
        padding: 14px 20px;
        min-height: 0;
}
 
/* (Duplicate trainings modal CSS removed — using the single .ias-modal block above for all directories.) */
.ias-modal-empty {
        text-align: center;
        color: #aaa;
        font-size: 14px;
        padding: 40px 20px;
}
 
/* ============================================================
 * v3 additions — "Pick Up Where You Left Off" grid of cards
 * (replaces the old wide resume-hero bar, matches My Learning style)
 * ============================================================ */
 
#ias-trainings-page .ias-tp-resume-section {
        margin-bottom: 28px;
}
#ias-trainings-page .ias-tp-resume-heading {
        font-size: 16px;
        font-weight: 800;
        color: #1a1a2e;
        margin: 0 0 12px;
        letter-spacing: -0.01em;
}
#ias-trainings-page .ias-tp-resume-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
}
#ias-trainings-page .ias-tp-resume-card {
        background: #fff;
        border: 1px solid #ede8e2;
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s, transform .15s;
}
#ias-trainings-page .ias-tp-resume-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        transform: translateY(-2px);
        color: inherit;
}
#ias-trainings-page .ias-tp-resume-thumb {
        height: 110px;
        background-size: cover;
        background-position: center;
        position: relative;
}
/* Fallback thumbnail (no image) — colored bg + white title overlay */
#ias-trainings-page .ias-tp-resume-thumb.is-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 34px 14px 14px;  /* space for the type badge up top */
        text-align: center;
}
#ias-trainings-page .ias-tp-resume-thumb-title {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.005em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.18);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
#ias-trainings-page .ias-tp-resume-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 4px 10px;
        border-radius: 4px;
        background: #dbeafe;
        color: #1d4ed8;
}
/* Type-specific badges on resume cards */
#ias-trainings-page .ias-tp-resume-badge.badge-workshop           { background: #fce7f3; color: #9d174d; }
#ias-trainings-page .ias-tp-resume-badge.badge-course             { background: #dbeafe; color: #1d4ed8; }
#ias-trainings-page .ias-tp-resume-badge.badge-microcredential    { background: #ede9fe; color: #6d28d9; }
#ias-trainings-page .ias-tp-resume-badge.badge-learning-pathway   { background: #dcfce7; color: #15803d; }
#ias-trainings-page .ias-tp-resume-badge.badge-conference-session { background: #fed7aa; color: #9a3412; }
#ias-trainings-page .ias-tp-resume-badge.badge-full-event         { background: #fecdd3; color: #9f1239; }
 
#ias-trainings-page .ias-tp-resume-body { padding: 12px 14px 14px; }
#ias-trainings-page .ias-tp-resume-body h4 {
        font-size: 15px;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.35;
        margin: 0 0 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
#ias-trainings-page .ias-tp-resume-meta {
        font-size: 12px;
        color: #888;
        margin: 0 0 10px;
}
#ias-trainings-page .ias-tp-resume-progress {
        height: 5px;
        background: #e8e4df;
        border-radius: 5px;
        overflow: hidden;
}
#ias-trainings-page .ias-tp-resume-progress-fill {
        height: 100%;
        background: #3ab878;
        border-radius: 5px;
        transition: width .3s;
}
 
@media (max-width: 1200px) { #ias-trainings-page .ias-tp-resume-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { #ias-trainings-page .ias-tp-resume-grid { grid-template-columns: repeat(2, 1fr); } }
 
/* ===== Certification CTA meta text — airy spacing between items ===== */
#ias-trainings-page .cta-band p .cta-meta-item {
        display: inline-block;
        margin: 0 4px;
        white-space: nowrap;
}
#ias-trainings-page .cta-band p .cta-meta-sep {
        display: inline-block;
        margin: 0 8px;
        opacity: 0.65;
        font-size: 12px;
        vertical-align: 1px;
}
#ias-trainings-page .cta-band p {
        line-height: 1.75;  /* give breathing room if it wraps to two lines */
}
 
/* ===== ACTIVE FILTER PILLS (shows chosen filters next to "Showing X trainings") ===== */
#ias-trainings-page .ias-tp-count-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#ias-trainings-page .ias-tp-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#ias-trainings-page .ias-tp-pills[hidden] { display: none; }
#ias-trainings-page .ias-tp-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px 4px 12px;
        background: #e6f5f3;
        color: #0D9488;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
}
#ias-trainings-page .ias-tp-pill-x {
        cursor: pointer;
        font-size: 15px;
        line-height: 1;
        opacity: .6;
        padding: 0 3px;
        user-select: none;
}
#ias-trainings-page .ias-tp-pill-x:hover { opacity: 1; }
#ias-trainings-page .ias-tp-clear-all {
        font-size: 12px;
        color: #e07a5f;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        margin-left: 2px;
        background: none;
        border: none;
        padding: 0;
        font-family: inherit;
}
#ias-trainings-page .ias-tp-clear-all:hover { color: #c15a3f; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }