/* ======================================================= */
/* ОФОРМЛЕНИЕ ШАПКИ И ВНУТРЕННОСТЕЙ УРОКА (PROПИТАНИЕ)     */
/* ======================================================= */
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
   /* Основные цвета с лендинга */
   --Gcolor1: #333333;       /* Темно-серый текст */
   --Gcolor2: rgb(104, 91, 245); /* Главный фиолетовый для кнопок внутри */
   --Gcolor2-hover: rgb(75, 59, 243); /* Фиолетовый при наведении */
   --Gcolor3: #E61919;       /* Красный для акцентов/ошибок */
   --Gwhite: #ffffff;        /* Белый фон карточек */
   --Gwhite2: #f4f6f9;       /* Светло-серый фон страницы */
   --Gblack: #555555;        /* Вторичный текст */
   --Gblack2: #888888;       /* Третичный текст */
   
   /* Тени как на лендинге */
   --Gshadow: 0px 20px 10px -7px rgba(0, 0, 0, 0.05);
   --Gshadow-btn: 0px 11px 5px -7px rgba(0, 0, 0, 0.35);
   
   /* Фон страницы */
   --Gbackground: #f4f6f9;
   
   /* Основные шрифты */
   --Gfont: 'TTNorms Medium', 'Open Sans', sans-serif !important;  
   --Gfont2: 'Open Sans', 'Helvetica Neue', sans-serif !important;  
}
 
body {
   background: var(--Gbackground);
   color: var(--Gcolor1);
   font-family: var(--Gfont2);
}
 
/* Видео */
.clearfix.videoWrapper iframe,  
.vhi-root iframe {
   border: none;
   border-radius: 20px;
   box-shadow: var(--Gshadow);
}
 
/* Логотип/название проекта */
.standard-logo { display: none; }
 
/* Ссылки "хлебные крошки" (в самом верху) */
.breadcrumb { margin-top: 40px; }
.breadcrumb a {
   font-family: var(--Gfont2);
   color: var(--Gblack2);
   transition: all 0.3s;
}
.breadcrumb a:hover { color: var(--Gcolor2); text-decoration: none;}
 
/* Заголовок страницы - название тренинга над уроком */
.page-header H1 a {
   font-family: var(--Gfont);
   font-size: 25px;  
   font-weight: 700;
   text-transform: uppercase;
   color: var(--Gcolor1);
}
.page-header { border-bottom: none; }
 

/* ========================================= */
/* ОФОРМЛЕНИЕ ШАПКИ УРОКА (ГРАДИЕНТНАЯ ПЛАШКА) */
/* ========================================= */

/* Шапка урока - Фон-градиент, тень и скругления */
.lesson-header-block.row-section {
   /* Градиент "PROПИТАНИЕ" слева направо */
   background: linear-gradient(90deg, #fd4fe3 0%, #9c51ff 50%, #606aff 100%) !important; 
   min-height: 140px;
   border: none !important;
   border-radius: 23px;
   box-shadow: 0px 20px 20px -7px rgba(156, 81, 255, 0.3); /* Тень в цвет градиента */
   padding: 35px 40px !important;
   position: relative; 
}
 
/* Шапка урока - Название урока (Крупное и белое) */
.lesson-header-block h2.lesson-title-value {
   display: block !important; 
   font-family: var(--Gfont);  
   font-size: 42px !important; 
   font-weight: 800;
   color: var(--Gwhite) !important; 
   line-height: 1.2;
   margin-bottom: 10px;
}
 
/* Шапка урока - Описание к уроку (под заголовком) */
.lesson-header-block .lesson-description-value {
   display: block;
   font-family: var(--Gfont2);
   color: rgba(255, 255, 255, 0.9) !important; /* Белый текст */
   margin-top: 10px;
   font-size: 20px;
   font-weight: 500;
}
 
/* Шапка урока - Кнопки "Предыдущий / Следующий урок" (Белые) */
.lesson-header-block .lesson-navigation a {
   position: relative;
   font-family: var(--Gfont2);
   font-size: 11px !important; /* Уменьшили шрифт, чтобы помещалось в строку */
   font-weight: bold;
   text-transform: uppercase;
   /* Цвет текста кнопок делаем центральным фиолетовым из градиента */
   color: #9c51ff !important; 
   background: var(--Gwhite) !important; /* Белый фон */
   border: none;
   border-radius: 10px;
   padding: 10px 16px !important; /* Немного уменьшили отступы по бокам */
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
   transition: all .3s ease;
   display: inline-block;
   white-space: nowrap; /* Запрет переноса текста на новую строку */
}
 
/* Эффект при наведении на кнопки навигации */
.lesson-header-block .lesson-navigation a:hover {
   background: #f4f6f9 !important; 
   box-shadow: none;
   transform: translateY(2px);
   text-decoration: none;
}
 
/* Стрелочки для кнопок навигации */
.lesson-header-block .lesson-navigation td:nth-child(1) a::before { content: '← '; margin-right: 3px;}
.lesson-header-block .lesson-navigation td:nth-child(3) a::after { content: ' →'; margin-left: 3px;}
 
/* Скрываем лишние подписи над кнопками и стилизуем номер урока */
.lesson-header-block .lesson-navigation div.hidden-xs { display: none; }
.lesson-header-block .lesson-navigation td.text-center.hidden-xs {
   font-family: var(--Gfont2);
   color: rgba(255, 255, 255, 0.8) !important; 
   padding-bottom: 20px;
   font-size: 14px;
}


/* ========================================= */
/* БЛОКИ ВНУТРИ УРОКА: ТЕСТЫ, ЗАДАНИЯ, КОММЕНТАРИИ */
/* ========================================= */

/* Внешний вид кнопки старта теста */
.testing-widget .before-start-block .start-btn {
    background: var(--Gcolor2);
    color: var(--Gwhite);
    margin: 25px 0;
    border-radius: 10px;
    padding: 14px 60px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px !important;
    box-shadow: var(--Gshadow-btn);
    transition: all 0.3s;
    border: none;
}
.testing-widget .before-start-block .start-btn:hover {
    background: var(--Gcolor2-hover);
    box-shadow: none;
    transform: translateY(2px);
}

div.lt-block-wrapper { border-radius: 20px; }
 
/* Блок Задание */
.lesson-mission-wrapper {
   border: none;
   margin-top: 20px;
}
.lt-lesson-mission-block h3 {
   font-family: var(--Gfont);
   font-size: 32px;
   font-weight: 700;
   color: var(--Gcolor1);
}
.lesson-mission-text {
   font-family: var(--Gfont2) !important;
   font-size: 16px !important;
   color: var(--Gcolor1) !important;
   padding-left: 0px !important;
   border-bottom: none;
}   
.lesson-mission-text a {
   color: var(--Gcolor2) !important;
   font-weight: bold;
}
 
/* Блок Тест - заголовки */
.testing-widget .question .question-number,
.testing-widget .question .question-title-big {
   font-family: var(--Gfont) !important;
   font-size: 20px !important;
   color: var(--Gcolor1) !important;
   border-bottom: none;
   font-weight: 700;
}   
 
/* Формы ответов и комментариев (Белые карточки) */
.answer-form,
.lt-lesson-comment-block .simple-answer.user-answer,
.lt-lesson-comment-block .gc-comment-form.comment-form-wrapper {
   font-family: var(--Gfont2) !important;
   background: var(--Gwhite);
   border-radius: 23px;
   box-shadow: var(--Gshadow);
   padding: 30px;
   border: none;
}
 
/* Поля ввода (Инпуты) */
.lt-lesson-mission-block #LessonAnswer_answer_text,
.comment-form-wrapper .new-comment-textarea,
.new-comment-textarea {
   border: 1px solid #EAEAEA;
   background: var(--Gwhite2);
   border-radius: 10px;
   color: var(--Gcolor1);
   padding: 15px;
}
.lt-lesson-mission-block #LessonAnswer_answer_text:focus,
.comment-form-wrapper .new-comment-textarea:focus,
.new-comment-textarea:focus {
   outline: 0;
   box-shadow: none;
   border: 1px solid var(--Gcolor2);
   background: var(--Gwhite);
}
 
/* Аватарка пользователя */
.user-profile-image {
   border: 2px solid var(--Gcolor2);
   border-radius: 100px;
}
 
/* Основные кнопки отправки (Отправить ответ, Сохранить и т.д.) */
.lt-lesson-mission-block .btn-send-answer,
.lt-lesson-mission-block .btn-primary.btn-lg,
.lt-lesson-mission-block .btn-primary.btn-send,
.lt-lesson-comment-block .btn.btn-primary.btn-send,
.btn-primary.save-edited-comment-btn,
.field-lessonanswer-answer_text .uploadifive-button {
   background-color: var(--Gcolor2);
   color: var(--Gwhite);
   font-family: var(--Gfont2);
   font-size: 14px !important;
   font-weight: bold;
   text-transform: uppercase;
   border: none;
   border-radius: 10px;
   padding: 14px 30px;
   box-shadow: var(--Gshadow-btn);
   transition: all .3s;
}
.lt-lesson-mission-block .btn-send-answer:hover,
.lt-lesson-mission-block .btn-primary.btn-lg:hover,
.lt-lesson-mission-block .btn-primary.btn-send:hover,
.lt-lesson-comment-block .btn.btn-primary.btn-send:hover,
.field-lessonanswer-answer_text .uploadifive-button:hover {
   background-color: var(--Gcolor2-hover);
   box-shadow: none;
   transform: translateY(2px);
}
 
/* Сохранить черновик */
.lt-lesson-mission-block .btn-save-draft {
   font-family: var(--Gfont2) !important;
   color: var(--Gblack2) !important;
   transition: all .3s;
}
.lt-lesson-mission-block .btn-save-draft:hover { color: var(--Gcolor1) !important; }
 
/* Плашки статусов ответов (Принято / Отклонено / Ожидает) */
.user-answer .answer-status .answer-status-label {
   background: #EAEAEA;
   color: var(--Gblack);
   border-radius: 8px;      
}
.user-answer.status-accepted .answer-status .answer-status-label {
   background: linear-gradient(95.64deg, #6ECA72 -1.75%, #50A154 61.3%);
   color: var(--Gwhite);
   border-radius: 8px;
}
.user-answer.status-declined .answer-status .answer-status-label {
   background: linear-gradient(97.14deg, #DF5050 18.45%, #F36363 47.56%, #BF3333 83.44%);
   color: var(--Gwhite);
   border-radius: 8px;
}
 
/* Дерево ответов и комментарии */
.comments-tree, .o-lt-lesson-comment-block {
   font-family: var(--Gfont2) !important;
   color: var(--Gcolor1);
}
.comments-tree a.user-profile-link { color: var(--Gcolor1) !important; font-weight: bold;}
.comments-tree .worker .text { color: var(--Gcolor2); font-weight: bold; }
.pseudo-link { color: var(--Gblack2) !important; font-weight: 500; }
.level-1.more-comments { color: var(--Gcolor2) !important; font-weight: bold; }
 
.b-like .positive-count .icon,
.b-like a.like_users_list,
.b-like .positive-count .value { color: var(--Gcolor2) !important; }
.b-like .button, .b-notifications-subscribe .button {
   color: var(--Gblack2);
   border-bottom: 1px dotted var(--Gcolor2);
}
 
/* Заголовки в ленте ответов */
.lesson-answers-title H3 {
   font-family: var(--Gfont);
   font-size: 28px;
   font-weight: 700;
   color: var(--Gcolor1);
}
.lesson-answers-title H3 a { color: var(--Gblack2); font-size: 16px; font-weight: normal; }
.lesson-answers-title .pull-right { color: var(--Gblack2); }
.lesson-answers-title .pull-right a { color: var(--Gcolor2); font-weight: bold;}
 

/* ========================================= */
/* МОБИЛЬНАЯ АДАПТАЦИЯ УРОКА */
/* ========================================= */

@media (max-width: 991px) {
   .gc-main-content.with-left-menu .container { margin: 40px auto 0px; }
   .simple-answer .new-comment-textarea { min-height: 80px; }
}
@media (max-width: 767px) {
   .lesson-header-block.row-section { padding: 25px 20px !important; }
   .lesson-header-block h2.lesson-title-value { font-size: 32px !important; }
   
   .lt-lesson-comment-block .simple-answer.user-answer,
   .answer-form { padding: 20px; }
   .simple-answer.user-answer .new-comment .textarea-block { width: 100%; }
   .lt-lesson-mission-block h3 { font-size: 26px; }
   
   /* На мобильных кнопках навигации делаем шрифт еще меньше */
   .lesson-header-block .lesson-navigation a { font-size: 10px !important; padding: 10px 12px !important; }
}
@media (max-width: 580px) {  
   .page-header H1 a { font-size: 20px; }
   .lesson-header-block h2.lesson-title-value { font-size: 28px !important; }  
   .lesson-header-block .lesson-description-value { font-size: 16px; }
   
   .lesson-answers-title H3 { font-size: 22px; }
   .self-answers { padding: 5px; }  
}
@media (max-width: 360px) {
   .lesson-header-block .lesson-navigation td:nth-child(1) a::before,
   .lesson-header-block .lesson-navigation td:nth-child(3) a::after { display: none; }
}