/* ------------- 
content start - pbar
------------- */

/* ===== ПРОГРЕСС-БАРЫ ===== */

/* Универсальные контейнеры (старые ID + новые классы) */
#progress-lessons .pbar,
#progress-days .pbar,
.js-progress-lessons .pbar,
.js-progress-days .pbar{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-text { display: none; }
.progress-title { margin-bottom: 25px; }

/* caption НАД полоской */
#progress-lessons .pbar-caption,
#progress-days .pbar-caption,
.js-progress-lessons .pbar-caption,
.js-progress-days .pbar-caption{
  order: 0;
  margin: 0 !important;
}

#progress-lessons .pbar-track,
#progress-days .pbar-track,
.js-progress-lessons .pbar-track,
.js-progress-days .pbar-track{
  order: 1;
}

/* Полоска */
.pbar-track{
  position: relative;
  height: 60px;
  border-radius: 999px;
  overflow: hidden;
}

/* Заливка — ВАЖНО: вернуть position:absolute иначе "пустая зона" */
.pbar-fill{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.9s ease;
  z-index: 1;
}

/* Процент по центру внутри полоски */
.pbar-track::after{
  content: attr(data-percent);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Gilroy-Bold', sans-serif!important;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #000;              /* проценты ЧЁРНЫЕ */
  pointer-events: none;
  z-index: 2;
}

/* ===== УРОКИ =====
незаполненный: белый
заполненный: розовый
остаётся тонкая белая обводка
*/
#progress-lessons .pbar-track,
.js-progress-lessons .pbar-track{
  background: #ffffff;
  border: 2px solid #ffffff;
}
#progress-lessons .pbar-fill,
.js-progress-lessons .pbar-fill{
  background: var(--color-accent-2)!important;
}

/* ===== ДНИ ДОСТУПА =====
незаполненный: розовый
заполненный: белый
остаётся тонкая розовая обводка
*/
#progress-days .pbar-track,
.js-progress-days .pbar-track{
  background: var(--color-accent-2)!important;
  border: 2px solid var(--color-accent-2)!important;
}
#progress-days .pbar-fill,
.js-progress-days .pbar-fill{
  background: #ffffff!important;
}

/* Подпись: оставляем только верхнюю строку */
.pbar-caption{
  display: block;
  font-family: 'Gilroy-Medium', sans-serif!important;
}
.pbar-main{
  font-size: 16px;
  line-height: 1.2;
  opacity: 0.95;
  margin-bottom: 20px;
}
.pbar-sub{ display: none !important; }

/* прячем продление покупки внутри блока прогресса дней */
#progress-days .standard-form,
.js-progress-days .standard-form{
  display: none !important;
}

/* Адаптация */
@media (max-width: 820px){
  .pbar-track{ height: 56px; }
  .pbar-track::after{ font-size: 16px; }
  .pbar-main{ font-size: 15px; }
}
@media (max-width: 600px){
  .pbar-track{ height: 52px; }
  .pbar-track::after{ font-size: 15px; }
  .pbar-main{ font-size: 14px; }
}

/* ===== Картинка для прогресса доступа ===== */

/* 1) делаем дорожку якорем */
#progress-days .pbar-track,
.js-progress-days .pbar-track{
  position: relative;
  overflow: visible;
}

/* 2) картинка "прилипает" к дорожке */
#progress-days .pbar-track::before,
.js-progress-days .pbar-track::before{
  content: "";
  position: absolute;
  bottom: calc(100% + 0px);
  right: 0;
  width: 100px;
  height: 100px;
  background-image: var(--access-ill);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}

/* 3) чтобы трек/проценты были поверх картинки */
#progress-days .pbar-track,
#progress-days .pbar-caption,
.js-progress-days .pbar-track,
.js-progress-days .pbar-caption{
  position: relative;
  z-index: 1;
}

/* 4) резерв справа, чтобы картинка не мешала */
#progress-days .pbar-caption,
#progress-days .pbar-track,
.js-progress-days .pbar-caption,
.js-progress-days .pbar-track{
  padding-right: 140px;
}

/* адаптация */
@media (max-width: 820px){
  #progress-days .pbar-track::before,
  .js-progress-days .pbar-track::before{
    width: 90px;
    height: 90px;
    bottom: calc(100% + 6px);
    opacity: .85;
  }
  #progress-days .pbar-caption,
  #progress-days .pbar-track,
  .js-progress-days .pbar-caption,
  .js-progress-days .pbar-track{
    padding-right: 110px;
  }
}
@media (max-width: 600px){
  #progress-days .pbar-track::before,
  .js-progress-days .pbar-track::before{
    width: 70px;
    height: 70px;
    bottom: calc(100% + 6px);
    opacity: .8;
  }
  #progress-days .pbar-caption,
  #progress-days .pbar-track,
  .js-progress-days .pbar-caption,
  .js-progress-days .pbar-track{
    padding-right: 90px;
  }
}

/* ===== прогресс бары конец ===== */

/* ------------- 
content finish - pbar
------------- */

/* ------------- 
content start - sidebar
------------- */

@font-face {
  font-family: 'Gilroy-Bold';
  src:
    url('/fileservice/file/download/h/24748c13b215b58b66de2ee8ea60cfc3.otf/a/722111/sc/239') format('opentype'),
    url('/fileservice/file/download/h/7e7a8da0da1db09c43d2eab83cf3a34c.woff/a/722111/sc/416') format('woff');
}
@font-face {
  font-family: 'Gilroy-Medium';
  src:
    url('/fileservice/file/download/h/068f0d4da0e1e9bf7edc8669c04d8fc6.otf/a/722111/sc/351') format('opentype'),
    url('/fileservice/file/download/h/83415fc4cccd01d1ba974bb3a93d0458.woff/a/722111/sc/229') format('woff');
}

:root {
  --title-color: #FF4C9F;
  --fon: #ffffff;
  --primary: #fafafa;
  --secondary: #FF9D00;
  --tertiary: #57AD31;
  --grey: #D1D1D1;
  --white: #ffffff;
  --dark: #1F1F1F;
  --background: #ffffff;
  --radius: 30px;
  --padding: 5px 5px;
  --font: 'Gilroy-Medium';
  --font1: 'Gilroy-Bold';
  --color-link: #57AD31;
  --color-link-hover: #458a27;
  /* эффекты (мягкие) */
  --menu-press-hover: rgba(0,0,0,0.04);
  --menu-press-active: rgba(0,0,0,0.08);
  --menu-press-selected: rgba(0,0,0,0.06);
}

/* Шрифты */
html .gc-account-leftbar {
  font-family: var(--font), sans-serif !important;
  font-weight: 300;
}
html .gc-account-leftbar h1,
html .gc-account-leftbar h2,
html .gc-account-leftbar h3 {
  font-family: var(--font1), sans-serif;
  font-weight: 600;
}

/* Основные элементы */
html .gc-account-leftbar {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  background-color: var(--fon)!important; /* общий фон меню */
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/217/h/1999bc6b276ce4e570a72829e6ecf7b5.png");
}
html .gc-account-leftbar{
  box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}

/* ==== ПЛОТНОСТЬ МЕНЮ ==== */

html .gc-account-leftbar .gc-account-user-menu li {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  padding: 2px 0 !important; 
  margin-bottom: 0 !important;
}

/* размер/оформление */
html .gc-account-user-menu li.menu-item.menu-item-profile {
  background: var(--fon); /* фон профиля (когда без фото) */
  border-radius: 50px;
  border: 2px solid var(--tertiary);
  padding: 0px !important;
  margin-top: 15px !important;
  margin-bottom: 10px !important; /* чуть разделим профиль и остальные */
}

/* === ССЫЛКИ/КРУГЛЯШ ==== */

html .gc-account-leftbar .gc-account-user-menu li a {
  -webkit-transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  -o-transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  background: none; /* фон иконки */
  position: relative;
  height: 50px !important;       
  border-radius: 30px !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Для остальных делаем визуально компактнее по ширине подложку */
html .gc-account-leftbar .gc-account-user-menu li:not(.menu-item-profile) a{
  width: 50px !important;
  margin: 0 auto !important;
}

/* Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a{
  width: 50px !important;
  height: 50px !important;
  border-radius: 50px !important;
  overflow: hidden !important;
}

/* иконка/картинка профиля под размер */
html .menu-item-profile a::before{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

/* ЭФФЕКТ */
html .gc-account-leftbar .gc-account-user-menu li a:hover {
  background-color: transparent !important;
  transform: translateY(0) scale(0.985);
  box-shadow: inset 0 0 0 999px var(--menu-press-hover);
}
html .gc-account-leftbar .gc-account-user-menu li a:active {
  transform: translateY(0) scale(0.97);
  box-shadow: inset 0 0 0 999px var(--menu-press-active);
}

/* Активный */
html .gc-account-leftbar .gc-account-user-menu li.selected a,
html .gc-account-leftbar .gc-account-user-menu li.active a,
html .gc-account-leftbar .gc-account-user-menu li.active a:hover {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 999px var(--menu-press-selected);
}

/* Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile:hover,
html .gc-account-user-menu li.menu-item.menu-item-profile a:hover {
  background: var(--primary) !important;
  border-radius: 50px;
  box-shadow: none !important;
  transform: none !important;
}

/* Скрываем исходные иконки */
html .menu-item a img {
  display: none;
}

/* Вставка своих иконок */
html .menu-item a::before,
html .sub-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 20px;
  height: 20px;
}

/* Активная/выбранная иконка -> розовый (приблизительно через filter) */
html .gc-account-leftbar .gc-account-user-menu li.active a::before,
html .gc-account-leftbar .gc-account-user-menu li.selected a::before{
  filter: brightness(0) saturate(100%)
          invert(48%) sepia(89%) saturate(2085%)
          hue-rotate(309deg) brightness(101%) contrast(103%);
}

/* чтобы на hover активной не сбрасывалось */
html .gc-account-leftbar .gc-account-user-menu li.active a:hover::before,
html .gc-account-leftbar .gc-account-user-menu li.selected a:hover::before{
  filter: brightness(0) saturate(100%)
          invert(48%) sepia(89%) saturate(2085%)
          hue-rotate(309deg) brightness(101%) contrast(103%);
}

/* Ссылки на картинки */
html .menu-item-profile a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/315/h/af86d697c3b6fe1c521f2b489d5f9ed7.png');
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

html .menu-item-notifications_button_small a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/79/h/3975209cbae626309a2a0a5f0223f4c3.svg');
  width: 20px;
  height: 20px;
}
html .menu-item-search a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/106/h/6b33c834c04cb9462e825978607da3bf.svg');
  width: 20px;
  height: 20px;
}
html .menu-item-cms a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/208/h/036948bc6564ea09af076cd4dee9725e.svg');
}
html .menu-item-teach a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/386/h/6f7f52d22ec757dfc86a31d1baceab48.svg');
}
html .menu-item-user a::before,
html .menu-item-chatium .sub-icon::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/227/h/762e8ec720060a66ee2e034dcd1d0ac7.svg');
}
html .menu-item-tasks a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/51/h/2efbbafec88f40eb0bff672aaa2c2ba8.svg');
}
html .menu-item-notifications a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/180/h/38577ec8a658967bba663d9afe877a35.svg');
}
html .menu-item-sales a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/314/h/5ebefec983c003d6b36c201402aacfe0.svg');
}
html .menu-item-chatium a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/507/h/8919e7919a0fc6699a66a429868219a9.svg');
  left: 55%;
}

/* Цвет текста про монеты */
html .gc-account-leftbar .gc-account-user-submenu-bar div.user-balance {
  color: var(--dark);
}

/* 2 Уведомления small */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small {
  padding: 0px;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
  background-color: var(--primary); /* фон иконки уведомлений */
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:hover,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small.selected a {
  background-color: var(--primary);
}

/* 2A Окно уведомлений (непрочитанные) */
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
  border-top-color: var(--grey);
  background-color: var(--primary);
  color:  var(--dark);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
  background-color: var(--white);
  color: var(--dark);
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
  background-color: var(--white);
  color: var(--grey);
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
  background-color: var(--primary);
  color: var(--dark)!important;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link {
  border-bottom-color: var(--grey);
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link,
html .gc-account-leftbar .mark-viewed-all {
  color: var(--title-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link,
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link:hover,
html .gc-account-leftbar .mark-viewed-all:hover {
  color: var(--color-link-hover);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link:hover {
  color: var(--color-link);
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group .user-image {
  overflow: hidden;
  border-radius: var(--radius);
  background-color: rgb(0 0 0 / 5%);
}

/* 3 Счётчики уведомлений */
html .gc-account-leftbar .notify-count {
  background-color: var(--secondary);
  padding: 1px 0px;
  color: var(--dark);
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
  background-color: var(--secondary);
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    bottom: 25px;
    right: 10px;
}
html .gc-account-leftbar .gc-account-user-menu li.selected .notify-count,
html .gc-account-leftbar .gc-account-user-menu li.selected span.sub-icon,
html .gc-account-leftbar .gc-account-user-menu li.active .notify-count {
  background-color: var(--secondary);
  color: var(--dark);
  border: 1px solid var(--secondary);
}

/* Вылезающее подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
  background-color: var(--fon);
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--dark);
  -webkit-text-decoration-color: var(--title-color);
  text-decoration-color: var(--title-color);
  box-shadow: none !important;
  transform: none !important;
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
  background: none!important;
  -webkit-text-decoration: underline solid 2px;
  text-decoration: underline solid 2px;
  -webkit-text-decoration-color: var(--title-color);
  text-decoration-color: var(--title-color);
}
html .gc-account-user-submenu-bar h3 {
  color: var(--title-color);
}

/* 4 Маленькие иконки (чатиум и тд) */
html .gc-account-leftbar span.sub-icon {
  background-color: var(--dark);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
html .menu-item.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
  display: block;
  position: relative;
  z-index: 0;
}
html .sub-icon::before {
  width: 16px;
  height: 16px;
}
html .sub-icon .fa,
html .sub-icon img {
  display: none;
}

/* Адаптивность */
@media (max-width: 768px) {
  html .gc-account-leftbar .toggle-link, 
  html .gc-account-leftbar.expanded .toggle-link {
    background: #21252f!important;
  }
  html .gc-account-leftbar .gc-account-user-menu {
    background: url("https://fs.getcourse.ru/fileservice/file/download/a/722111/sc/217/h/1999bc6b276ce4e570a72829e6ecf7b5.png");
  }
  html .gc-account-leftbar .gc-account-user-menu li {
    border-bottom: 0;
  }
  html .gc-page-nav-items-menu {
    left: 70px;
  }
}
/* === ПРОФИЛЬ: без фона при active/selected === */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.active,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.selected{
  background: var(--fon) !important;
}
/* убираем заливку на ссылке профиля */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.active a,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.selected a,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.active a:hover,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.selected a:hover{
  box-shadow: none !important;
  background-color: transparent !important;
  transform: none !important;
}
/* не красим профиль в розовый */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.active a::before,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.selected a::before,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.active a:hover::before,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile.selected a:hover::before{
  filter: none !important;
}


/* ------------- 
content finish - sidebar
------------- */