/* Update 38: opleidingen.php in Lextra 2 (list + single training). NL and fr/ identical.
   Update 39: also used by index.php and members/mijnopleidingen.php; past cards no longer greyed out. */

/* ---------- list: tabs, search, groups ---------- */
.opl-wrap { max-width: 100%; color: #444; }
.opl-wrap .nav-tabs { border-bottom: 1px solid #e3e8ee; justify-content: center; }
.opl-wrap .nav-tabs .nav-link {
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: #213b52;
  font-family: "Poppins", "Raleway", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; padding: .8rem 1.1rem;
}
.opl-wrap .nav-tabs .nav-link:hover { color: #fdc134; background: transparent; }
.opl-wrap .nav-tabs .nav-link.active { color: #213b52; background: transparent; border-bottom-color: #fdc134; }
.opl-count {
  display: inline-block; min-width: 1.35em; margin-left: .35rem; padding: 0 .45em; border-radius: 50px;
  font-size: .72em; font-weight: 700; background: #213b52; color: #fff; vertical-align: middle; text-transform: none;
}
.opl-wrap .nav-link.active .opl-count { background: #fdc134; color: #213b52; }
.opl-toolbar { margin: 1.1rem 0 1.2rem; }
.opl-search-wrap.lx-opl2-search { max-width: 520px; margin: 0 auto; }
.lx-opl2-search #oplSearch { height: 42px; border-radius: 999px; padding-right: 5.5rem; border: 1px solid #d5dde6; box-shadow: none; }
.lx-opl2-search #oplSearch:focus { border-color: #fdc134; box-shadow: 0 0 0 .2rem rgba(253, 193, 52, .25); outline: 0; }
.lx-opl2-search { position: relative; }
.lx-opl2-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none; }
.lx-opl2-search #oplSearch { padding-left: 40px; }
.opl-search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: none;
  border: 0; border-radius: 999px; background: #fdc134; color: #213b52; font-weight: 600; font-size: 13px; padding: 5px 14px;
}
.opl-search-clear:hover { background: #213b52; color: #fff; }
.opl-search-hint { color: #6c757d; font-size: .85rem; margin-top: .45rem; text-align: center; }
.opl-empty {
  display: none; text-align: center; padding: 2rem 1rem; color: #6c757d; font-style: italic;
  background: #fff; border-radius: 10px; box-shadow: 0 2px 14px rgba(33, 59, 82, .10);
}
.opl-highlight { background: #fff7e5; padding: 0 .1em; color: #213b52; }
.lx-opl2-grouphead { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; color: #213b52; font-weight: 700; font-family: "Poppins", sans-serif; }
.lx-opl2-grouphead::after { content: ""; flex: 1; height: 2px; background: #e3e8ee; }
.lx-opl2-grouphead i { color: #fdc134; }
.lx-opl2-pasthead { margin-top: 22px; color: #213b52; } /* Update 39: same colour as the upcoming head */
.lx-opl2-pasthead i { color: #6c757d; }

/* Update 39: badge base for pages without lx-admin-layout.css (members/mijnopleidingen.php) */
.lx-opl2-card .lx-opl-badge { display: inline-flex; align-items: center; gap: 6px; background: #f2f6fa; color: #213b52; border-radius: 999px; line-height: 1.45; }
.lx-opl2-card .lx-opl-badge i { color: #fdc134; }
.lx-opl2-card .lx-opl-badge.lx-opl-price { background: #213b52; color: #fff; font-weight: 600; }
.lx-opl2-card .lx-opl-badge.lx-opl-open { background: #e6f4ea; color: #1e7e34; font-weight: 600; }
.lx-opl2-card .lx-opl-badge.lx-opl-off { background: #eceff3; color: #495057; font-weight: 600; }
.lx-opl2-card .lx-opl-badge.lx-opl-free { background: #e8f0fe; color: #1a56c4; font-weight: 600; }
.lx-opl2-card .lx-opl-badge.lx-opl-full { background: #fdecea; color: #b02a37; font-weight: 600; }
.lx-opl2-actions .subm-btn.bg-success { color: #fff; }

/* ---------- list: compact cards ---------- */
/* style.css gives .services .card-body a -60px overlap and .services .card a transparent background: undo that here */
.services .lx-opl2-card { margin-bottom: 0; background: #fff; }
.services .lx-opl2-card .card-body { margin-top: 0; box-shadow: none; border-top: 0; background: transparent; z-index: auto; transition: none; }
.services .lx-opl2-main { margin-bottom: 20px; background: #fff; }
.lx-opl2-card {
  border: 0; border-left: 5px solid #fdc134; border-radius: 10px; background: #fff;
  box-shadow: 0 2px 14px rgba(33, 59, 82, .10); transition: transform .2s ease, box-shadow .2s ease;
}
.lx-opl2-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(33, 59, 82, .16); }
.lx-opl2-card.lx-opl2-st-open { border-left-color: #fdc134; }
.lx-opl2-card.lx-opl2-st-in { border-left-color: #28a745; }
.lx-opl2-card.lx-opl2-st-full { border-left-color: #dc3545; }
.services .lx-opl2-card.lx-opl2-st-past, .lx-opl2-card.lx-opl2-st-past { border-left-color: #adb5bd; background: #fff; } /* Update 39: no grey wash / opacity, the grey border + badge mark it as past */
.lx-opl2-card .card-body { padding: 14px 16px 14px; text-align: left; }
.lx-opl2-cardtitle { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.lx-opl2-cardtitle a { color: #213b52; text-decoration: none; }
.lx-opl2-cardtitle a:hover { color: #fdc134; }
.lx-opl2-card .lx-share-under { margin: 2px 0 6px; text-align: left; }
.lx-opl2-status, .lx-opl2-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.lx-opl2-card .lx-opl-badge { margin: 0; font-size: .8rem; padding: 3px 10px; }
.lx-opl-badge.lx-opl2-in { background: #e6f4ea; color: #1e7e34; font-weight: 600; }
.lx-opl-badge.lx-opl2-in i { color: #28a745; }
.lx-opl-badge.lx-opl-open i { color: #28a745; }
.lx-opl-badge.lx-opl-full i { color: #b02a37; }
.lx-opl-badge.lx-opl-off i { color: #6c757d; }
.lx-opl-badge.lx-opl-free i { color: #1a56c4; }
.lx-opl-badge.lx-opl-price i { color: #fdc134; }
.lx-opl2-org { font-size: .85rem; color: #555; margin: 2px 0 10px; }
.lx-opl2-org i { color: #fdc134; margin-right: 4px; }
.lx-opl2-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid #eef1f4; }
.lx-opl2-actions .subm-btn { margin: 0; }

/* ---------- single training page ---------- */
.lx-opl2-single { max-width: 940px; margin: 0 auto; }
.lx-opl2-hero { margin: 0 0 18px; }
.lx-opl2-hero img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 26px rgba(33, 59, 82, .18); }
.lx-opl2-main {
  border: 0; border-top: 6px solid #fdc134; border-radius: 14px; background: #fff;
  box-shadow: 0 4px 24px rgba(33, 59, 82, .12); padding: 28px 32px 22px; text-align: left;
}
.lx-opl2-main.lx-opl2-st-full { border-top-color: #dc3545; }
.lx-opl2-main.lx-opl2-st-past { border-top-color: #adb5bd; }
.lx-opl2-title { text-align: center; padding-bottom: 12px; margin-bottom: 8px; }
.lx-opl2-title h2 { margin-bottom: 14px; }
.lx-opl2-title .lx-share-under { margin: 0 0 8px; }
.lx-opl2-facts.lx-opl-meta { justify-content: center; margin: 0 0 18px; }
.lx-opl2-info { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.lx-opl2-ib { flex: 1 1 220px; margin: 0; padding: 12px 16px; font-size: .92rem; }
.lx-opl2-ibh { font-weight: 700; color: #213b52; margin-bottom: 4px; }
.lx-opl2-ibh i { color: #fdc134; margin-right: 4px; }
.lx-opl2-ib-org { border-left-color: #213b52; }
.lx-opl2-ib-meal { border-left-color: #28a745; }
.lx-opl2-ib-meal .lx-opl2-ibh i { color: #28a745; }
.lx-opl2-ib-ws { border-left-color: #fdc134; }
.lx-opl2-cta { text-align: center; margin: 0 0 18px; padding: 18px 12px; background: #f6f9fc; border-radius: 12px; }
.lx-opl2-cta .lx-opl2-signup-big {
  font-size: 1.15rem; padding: 12px 34px; border-radius: 999px; background: #fdc134; color: #213b52; font-weight: 700;
  border: 0; box-shadow: 0 4px 14px rgba(253, 193, 52, .45); margin: 0;
}
.lx-opl2-cta .lx-opl2-signup-big:hover { background: #213b52; color: #fff; }
.lx-opl2-ctahint { font-size: .85rem; color: #6c757d; margin-top: 8px; }
.lx-opl2-content {
  background: #fff; border: 1px solid #e3e8ee; border-left: 4px solid #213b52; border-radius: 10px;
  padding: 18px 22px; margin: 0 0 16px; line-height: 1.65;
}
.lx-opl2-content > :last-child { margin-bottom: 0; }
.lx-opl2-content img { max-width: 100%; height: auto; }
.lx-opl2-back { text-align: center; font-size: 1rem; margin: 0; }
.lx-opl2-back a { color: #213b52; font-weight: 600; }
.lx-opl2-back a:hover { color: #fdc134; }
.lx-opl2-signupsec { padding: 0; } /* Update 39: only hosts the popup */

@media (max-width: 575px) {
  .opl-wrap .nav-tabs .nav-link { padding: .65rem .5rem; font-size: .78rem; }
  .lx-opl2-main { padding: 20px 16px 16px; }
  .lx-opl2-cta .lx-opl2-signup-big { width: 100%; }
  .lx-opl2-content { padding: 14px 14px; }
}