/* ============================================================
   Курсоло — бренд-слой веб-приложения (демо)
   Палитра и шрифт с лендинга cursolo.ru:
   accent #6C4BF4 · blue #005BFF · violet #8B5CF6 · dark #171F2F
   Подключается ПОСЛЕ style.bundle.css, бандлы Metronic не трогаем.
   ============================================================ */

/* ===== Шрифт Onest: само-хостинг, subset кириллица+латиница ===== */
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/onest-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/onest-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/onest-500-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/onest-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/onest-600-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/onest-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/onest-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/onest-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/onest-800-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/onest-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Базовая типографика ===== */
:root {
  --cs-accent: #6C4BF4;
  --cs-blue: #005BFF;
  --cs-violet: #8B5CF6;
  --cs-dark: #171F2F;
  --cs-grad: linear-gradient(120deg, #005BFF, #8B5CF6);
}
body,
html,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal,
.tooltip,
.popover,
.font-roboto,
.font-inter {
  font-family: "Onest", Inter, -apple-system, "Segoe UI", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-bolder {
  letter-spacing: -.01em;
}

/* ===== Primary → фиолетовый Курсоло ===== */
:root {
  --kt-primary: #6C4BF4;
  --kt-primary-rgb: 108, 75, 244;
  --kt-primary-hover: #5B3AE8;
  --kt-primary-active: #4E2FCB;
  --kt-primary-light: #ECE7FD;
  --kt-primary-light-rgb: 236, 231, 253;
  --kt-primary-dark: #4A2BD0;
  --bs-primary: #6C4BF4;
  --bs-primary-rgb: 108, 75, 244;
  --bs-link-color: #6C4BF4;
  --bs-link-color-rgb: 108, 75, 244;
  --bs-link-hover-color: #5B3AE8;
  --bs-link-hover-color-rgb: 91, 58, 232;
  --bs-focus-ring-color: rgba(108, 75, 244, .35);
  --kt-focus-ring-color: rgba(108, 75, 244, .35);
}
[data-bs-theme="dark"] {
  --kt-primary-light: rgba(108, 75, 244, .25);
  --kt-primary-light-rgb: 108, 75, 244;
}

.text-primary { color: #6C4BF4 !important; }
.text-primary:hover, .text-hover-primary:hover { color: #5B3AE8 !important; }
.bg-primary { background-color: #6C4BF4 !important; }
a { color: #6C4BF4; }
a:hover { color: #5B3AE8; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6C4BF4;
  --bs-btn-border-color: #6C4BF4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5B3AE8;
  --bs-btn-hover-border-color: #5B3AE8;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4E2FCB;
  --bs-btn-active-border-color: #4E2FCB;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6C4BF4;
  --bs-btn-disabled-border-color: #6C4BF4;
  --bs-btn-focus-shadow-rgb: 108, 75, 244;
  background-color: #6C4BF4;
  border-color: #6C4BF4;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #5B3AE8;
  border-color: #5B3AE8;
}
.btn-primary:active { background-color: #4E2FCB; border-color: #4E2FCB; }

.btn-light-primary {
  color: #6C4BF4 !important;
  background-color: #ECE7FD !important;
  border-color: #ECE7FD !important;
}
[data-bs-theme="dark"] .btn-light-primary {
  color: #B3A4FB !important;
  background-color: rgba(108, 75, 244, .22) !important;
}
.btn-color-primary, .btn-link-primary { color: #6C4BF4 !important; }

.btn-outline-primary {
  --bs-btn-color: #6C4BF4;
  --bs-btn-border-color: #6C4BF4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6C4BF4;
  --bs-btn-hover-border-color: #6C4BF4;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4E2FCB;
  --bs-btn-active-border-color: #4E2FCB;
  color: #6C4BF4;
  border-color: #6C4BF4;
}

/* Активные пункты меню/навигации */
.menu-link.active, .menu-here .menu-link,
.nav-link.active, .router-link-active.nav-link,
.page-link.active,
.active .menu-link {
  color: #6C4BF4 !important;
}
.menu-item.here .menu-link, .menu-item .menu-link.active {
  background-color: rgba(108, 75, 244, .08) !important;
}

/* Фокус-кольца */
.form-control:focus, .form-select:focus,
.btn:focus, .btn-check:focus + .btn,
.form-check-input:focus {
  border-color: #A99CFF;
  box-shadow: 0 0 0 .25rem rgba(108, 75, 244, .18);
}
.form-check-input:checked {
  background-color: #6C4BF4;
  border-color: #6C4BF4;
}
.form-switch .form-check-input:checked {
  background-color: #6C4BF4;
  border-color: #6C4BF4;
}
.swal2-container .swal2-popup .swal2-confirm,
.btn.swal2-confirm { background-color: #6C4BF4 !important; }

/* Прогресс/спиннеры */
.progress-bar { background-color: #6C4BF4; }
.spinner-border.text-primary, .text-primary .spinner-border { color: #6C4BF4 !important; }

/* Вордмарк «курсоло.» */
.cs-wordmark {
  font-family: "Onest", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink, #1A2233);
}
.cs-wordmark i { font-style: normal; color: #6C4BF4; }

/* ═══════════════ Кабинет ученика (/learn) ═══════════════
   Карточки/прогрессы ученика живут в Metronic-оболочке и наследуют
   тему (светлую/тёмную) через bootstrap-переменные. */

/* Карточка — общая для «Мои курсы», «Каталог», страниц курса и тестов */
.learn-card {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #E5E9F2);
  border-radius: 1rem;
  box-shadow: var(--bs-card-box-shadow, 0 3px 4px rgba(0, 0, 0, .03));
  padding: 26px 28px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.learn-card, .learn-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(98, 63, 243, .12);
  border-color: rgba(108, 75, 244, .35);
  text-decoration: none;
}

/* Заголовок страницы */
.learn-title {
  font-family: "Onest", Inter, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* «← Назад» */
.learn-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--bs-link-color, #6C4BF4);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  padding: 4px 8px 4px 4px;
  transition: background .15s ease;
}
.learn-back:hover {
  background: rgba(108, 75, 244, .08);
  color: var(--bs-link-hover-color, #5A34E0);
}

/* Прогресс-бар урока */
.learn-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(108, 75, 244, .14);
  overflow: hidden;
  min-width: 60px;
}
.learn-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9D86FF, #623FF3);
  transition: width .4s ease;
}
.learn-progress--done .learn-progress-bar {
  background: linear-gradient(90deg, #2FE3A0, #14B87C);
}

/* Строки уроков на странице курса */
.learn-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--bs-border-color, #EEF0F6);
}
.learn-lesson-row:last-child { border-bottom: 0; }
.learn-lesson-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(108, 75, 244, .10);
  font-size: 15px;
}

/* Ссылки футера кабинета */
.learn-footer-link {
  color: var(--bs-secondary-color, #5F6C85);
  text-decoration: none;
}
.learn-footer-link:hover { color: #6C4BF4; }

/* Обложка сверху карточки курса («Мои курсы», «Каталог») */
.learn-cover {
  margin: -26px -28px 20px;              /* выходим на края карточки */
  border-radius: 15px 15px 0 0;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #EEF0F6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.learn-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Заглушка без обложки: цветной градиент (inline) + название курса */
.learn-cover--fallback {
  color: #fff;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  text-align: center;
  position: relative;
}
.learn-cover--fallback::after {
  /* мягкие «круги», как на сгенерированных обложках */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(28% 34% at 24% 26%, rgba(255, 255, 255, .16) 0% 58%, transparent 60%),
    radial-gradient(22% 28% at 78% 70%, rgba(255, 255, 255, .12) 0% 58%, transparent 60%);
  pointer-events: none;
}
.learn-cover__title {
  position: relative;
  font-family: "Onest", Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.learn-cover__brand {
  position: relative;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, .82);
}
/* Мини-превью урока в списке (карточка урока) */
.learn-lesson-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  flex: 0 0 56px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(108, 75, 244, .10);
}
.learn-lesson-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Мобильная версия: карточки компактнее, обложка прижата к краям,
   заголовки и отступы — телефонные */
@media (max-width: 767.98px) {
  .learn-card {
    padding: 16px;
    border-radius: 14px;
  }
  .learn-card .fs-4 {
    font-size: 1.15rem;
  }
  .learn-card .fs-2 {
    font-size: 1.45rem;
  }
  .learn-cover {
    margin: -16px -16px 16px;
    border-radius: 13px 13px 0 0;
  }
  .learn-cover--fallback {
    padding: 10px 14px;
  }
  .learn-title {
    font-size: 1.45rem;
  }
  /* плотнее внутренние отступы карточек курса */
  .learn-card .mb-6 {
    margin-bottom: 1rem;
  }
  .learn-card .mb-4 {
    margin-bottom: 0.75rem;
  }
}

/* Мини-заглушка превью урока: цветной фон + номер */
.learn-lesson-thumb--fallback {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
}