/*
Theme Name: MasterLife Child
Theme URI: https://masterlife.jwsuperthemes.com
Template: masterlife
Author: the JWSThemes team
Author URI: https://themeforest.net/user/jwsthemes/portfolio
Description: MasterLife is a modern WordPress theme designed and built specifically for Education LMS and Online Training. It offers a comprehensive suite of tools to seamlessly set up your learning management system. With five distinct and visually appealing demos, MasterLife makes it easy to create professional websites for online education, instructors, academies, universities, and more. The intuitive demo importer simplifies the process, providing ready-made content to help you get started effortlessly. Empower your students and transform the learning experience with MasterLife.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.1.7
Updated: 2024-11-12 09:32:50
*/
:root {
  --main: #030f40;
  --secondary: #543cdf;
  --third: #fffaf5;
  --light: #ffffff;
  --dark: #000000;
  --heading: #0e1316;
  --body: #667085;
  --body2: #f4f7ff;
  --body3: #ebebeb;
  --body4: #f8f8f8;

  --bodybg: #ffffff;
  --btn-bgcolor: #09205c;
  --btn-color: #ffffff;
  --btn-bgcolor2: transparent;
  --btn-color2: #09205c;
  --font-size-sm: 14px;
  --line-height-sm: 22.5px;
  --font-size-md: 18px;
  --line-height-md: 25.2px;
  --input-background: #ffffff;
  --input-background2: #ffffff;
  --background-item: #fef8e6;
  --background-body: #ffffff;
  --border-color: #626262;
  --border-color2: #eff1f2;
  --border-color3: #b7b7b7;
  --full-fd: 70px;
  --link: #232323;
  --font-size-md: 18px;
  --line-height-md: 25px;
  --inscolor: var(--bodybg);
  --jws-sticky-header-height: 0px;
}
@media (max-width: 767px) {
  :root {
    --font-size-sm: 12px;
    --line-height-sm: 16px;
  }
}
.btn-theme {
  background: var(--main);
  color: #ffffff;
  height: 50px;
  padding: 0 40px;
  text-align: center;
  line-height: 50px;
}

button.btn-theme {
  border: 0;
}

/* ── Language Flag Badge ───────────────────────────────────────── */
/* Flag is injected inside the <a> category tag (dark background),
   so it inherits the black badge bg and only needs size + appearance */
.course-lang-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  vertical-align: middle;
  margin-left: 7px;
  margin-bottom: 1px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Polish flag – white top half, crimson bottom half */
.course-lang-flag--pl {
  background: linear-gradient(to bottom, #ffffff 50%, #dc143c 50%);
}

/* ── Date row – per-day list ────────────────────────────────────── */
.jws-courses-info > ul li.course-info--date {
  display: block !important;
}
.jws-courses-info > ul li.course-info--date span.cl-heading {
  display: block;
}
.course-date-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 27px; /* align with label text after icon */
}
.course-date-list li {
  font-size: var(--font-size-sm);
  color: var(--body);
  line-height: 1.7;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  justify-content: unset !important;
}

/* ── Venue row – value below label ─────────────────────────────── */
/* Icon: font-size 20px + margin-right 7px = 27px indent */
.jws-courses-info > ul li.course-info--venue {
  display: block !important;
}
.jws-courses-info > ul li.course-info--venue span.cl-heading {
  display: block;
}
.jws-courses-info > ul li.course-info--venue span:last-child {
  display: block;
  padding-left: 27px;
  margin-top: 3px;
}

/* ── Course Instructors block ───────────────────────────────────── */
.course-instructors {
  border-top: 1px solid var(--border-color2);
  padding-top: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.course-instructor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color2);
}
.course-instructor-item:last-child {
  border-bottom: none;
}

/* Circular avatar */
.course-instructor-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--body3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-instructor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-instructor-avatar--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body);
  font-size: 22px;
}

/* Name + bio */
.course-instructor-info {
  flex: 1;
  min-width: 0;
}
.course-instructor-info strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.3;
}
.course-instructor-info p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--body);
  line-height: 1.4;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Mobile: sidebar widget above content ───────────────────────── */
/* Below xl breakpoint (< 1200px) swap column order so widget shows
   directly under the course header, before the course body text    */
@media (max-width: 1199px) {
  .course-single-layout {
    flex-direction: column;
  }
  .course-single-sidebar {
    order: -1;
  }
}

/* ── Courses archive: language filter pills ─────────────────────── */
.sc-lang-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.sc-lang-btn {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 99px;
  border: 1.5px solid var(--main);
  color: var(--main);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.sc-lang-btn:hover,
.sc-lang-btn.active {
  background: var(--main);
  color: #fff;
}

/* ── Course status badge (on listing card image) ─────────────────── */
.course-status-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
  pointer-events: none;
}
.course-status-badge--ongoing {
  background: #16a34a;
  color: #fff;
}
.course-status-badge--ended {
  background: rgba(0, 0, 0, 0.55);
  color: #e5e7eb;
}

/* Grayscale + dim for ended courses */
.course-card--ended .post-media img {
  filter: grayscale(80%) brightness(0.75);
  transition: filter 0.2s;
}
.course-card--ended:hover .post-media img {
  filter: grayscale(40%) brightness(0.85);
}

/* ── Sort bar: subtle top border separating pills from dropdown ─── */
.sc-sort-bar {
  border-top: 1px solid var(--border-color2);
  padding-top: 14px;
}

/* UK flag – SVG data URI (self-contained: no DOM ID conflicts, no fill inheritance) */
.course-lang-flag--en {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><defs><clipPath id='a'><path d='M0 0v30h60V0z'/></clipPath><clipPath id='b'><path d='M30 15h30v15zv15H0zH0V0zV0h30z'/></clipPath></defs><g clip-path='url(%23a)'><path d='M0 0v30h60V0z' fill='%23012169'/><path fill='none' d='M0 0l60 30m0-30L0 30' stroke='white' stroke-width='6'/><path fill='none' d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/><path fill='none' d='M30 0v30M0 15h60' stroke='white' stroke-width='10'/><path fill='none' d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/></g></svg>");
}