/* ============================================
   CUSTOM DESIGN (FINAL CLEAN VERSION)
   ============================================ */

/* Плавная прокрутка для всей страницы без JS */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   CSS Переменные
   ========================================================================== */
:root {
  /* Размеры и сетка */
  --layout-max-width: 1366px;

  /* Типографика */
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --line-height-base: 1.4;

  /* Отступы */
  --spacing-sm: 15px;
  --spacing-md: 40px;
  --spacing-lg: 60px;

  /* Кнопка "Вверх" */
  --totop-offset-x: 30px;
  --totop-offset-y: 62px;

  /* Цветовая палитра */
  --color-primary: #E04265;
  --color-link-hover: #2C78E4;
  --color-btn-totop: #737682;
  --color-bg-header: #F9F9F9;
  --color-text-muted: #6B7280;
  --color-text-main: #333333;
  --color-border-light: #eee;
  --color-warning: #ff6600;

  /* Анимации */
  --transition-fast: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;

  /* Тени */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Глобальный контроль размеров */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Глобальные стили
   ========================================================================== */

/* Улучшение типографики и сглаживание шрифтов */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--color-text-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Глобальная адаптивность изображений */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Плавные переходы для всех интерактивных элементов */
a,
button,
.card,
.totop,
.block-login__click img {
  transition: var(--transition-fast);
}

/* Эффект нажатия на кнопки */
button:active,
.totop:active {
  transform: scale(0.96);
}

/* Понятный фокус для навигации с клавиатуры */
:focus-visible {
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
}

/* ==========================================================================
   Макет и сетка (Layout & Header)
   ========================================================================== */

/* Максимальная ширина элементов макета и специфических страниц */
.layout,
.order-by-page .layout,
.offer-page .layout,
.order-pay-page .layout,
.installment-page .layout,
.order-pay-status-page .layout,
.related-page .layout,
.order-page .layout,
.static-noaccess-page .layout,
.pay-error-page .layout {
  max-width: var(--layout-max-width);
}

/* Сетка: строка */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) 0;
  margin-left: 0;
}

/* Шапка сайта */
.header {
  padding: 6px 0;
  background: var(--color-bg-header);
}

/* Размер логотипа */
.logo img {
  width: 100%;
  max-width: 238px;
}

/* ==========================================================================
   Компоненты (Аватары и меню)
   ========================================================================== */

/* Меню клиента */
.client-menu__left {
  width: 120px;
  min-height: 120px;
}

.client-menu__left img {
  width: 115px;
  height: 115px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

/* Размер аватарки в шапке */
.block-login__click img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.block-login__click img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* Аватарка с рамкой */
.avatar-img {
  border: 2px solid var(--color-primary) !important;
}

/* Отзывы */
.review_img img {
  max-height: 130px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Контент и списки
   ========================================================================== */

/* Хлебные крошки */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
  padding-left: 20px;
  margin: 0 0 -44px;
  list-style: none;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* Обертка контента и списков */
.content-wrap,
.content-courses {
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--spacing-lg);
  padding-bottom: 85px;
}

.content-wrap {
  padding-left: 65px;
}

.content-courses {
  padding-left: 49px;
}

.content-wrap > *,
.content-courses > * {
  flex-grow: 1;
  max-width: 100%;
}

.content-wrap > * {
  padding-left: 29px;
}

/* Обложка курса */
.course_cover img,
.category_cover img {
  width: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Вспомогательные элементы и UX (Кнопка "Вверх")
   ========================================================================== */
.totop {
  display: none;
  background: var(--color-btn-totop);
  border-radius: 10px;
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  position: fixed;
  left: var(--totop-offset-x);
  bottom: var(--totop-offset-y);
  cursor: pointer;
  z-index: 999999999;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.totop:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.totop:focus-visible {
  outline: 3px solid var(--color-link-hover);
  outline-offset: 3px;
}

/* Ссылки политики и соцсетей */
.politika-line a:hover,
.soc_buttons a:hover {
  color: var(--color-link-hover);
}

/* Скругления и стили изображений */
.image-radius {
  border: 6px solid #fff;
  border-radius: 10px;
  box-shadow: 2px 1px 5px rgba(55, 58, 76, 0.13);
}

/* Трансляции */
.webinar-full:not(.status-1) .video_box {
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ==========================================================================
   Уведомление reCAPTCHA
   ========================================================================== */
.grecaptcha-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

.recaptcha-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--spacing-sm);
  line-height: var(--line-height-base);
}

.recaptcha-disclaimer a {
  color: inherit;
  text-decoration: underline;
  transition: var(--transition-fast);
}

.recaptcha-disclaimer a:hover,
.recaptcha-disclaimer a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* ==========================================================================
   Адаптивность (Mobile)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .training-page .maincol,
  .training-page .maincol_min,
  .inner-training-page .maincol,
  .inner-training-page .maincol_min {
    margin-bottom: var(--spacing-md);
    margin-left: 0;
    padding-left: 0;
  }

  .totop {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    left: 15px;
  }
}

/* ==========================================================================
   GTranslate Fix
   ========================================================================== */

/* Основное исправление нижнего отступа */
.gtranslate_wrapper,
.gtranslate_wrapper .gt_float_wrapper,
.gtranslate_wrapper .gt_float_switcher,
.gtranslate_wrapper .gt-switcher_wrapper,
.gt_float_wrapper,
.gt_float_switcher,
.gtranslate_wrapper[style*="bottom"],
.gtranslate_wrapper [style*="bottom"] {
  bottom: 60px !important;
}

/* Если контейнер переводчика не спозиционирован */
.gtranslate_wrapper {
  position: fixed !important;
  z-index: 999999999 !important;
}

/* Если после этого виджет оказался не справа, раскомментируйте одну строку */
/* .gtranslate_wrapper { right: 0 !important; } */
/* или задайте отступ от правого края: */
/* .gtranslate_wrapper { right: 20px !important; } */

/* Мобильная версия */
@media screen and (max-width: 767px) {
  .gtranslate_wrapper,
  .gtranslate_wrapper .gt_float_wrapper,
  .gt_float_wrapper,
  .gt_float_switcher {
    bottom: 60px !important;
  }
}

/* ==========================================================================
   ДОПОЛНЕНИЕ 1: Кастомный скроллбар
   ========================================================================== */

/* Для Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-header);
}

::-webkit-scrollbar-thumb {
  background: var(--color-btn-totop);
  border-radius: 6px;
  border: 3px solid var(--color-bg-header);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-btn-totop) var(--color-bg-header);
}

/* ==========================================================================
   ДОПОЛНЕНИЕ 2: Улучшение читаемости текстов
   ========================================================================== */

/* Оптимальная ширина для длинных статей */
.article-content,
.long-read {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.7;
}

/* Красивые цитаты */
blockquote {
  position: relative;
  padding-left: 24px;
  margin: 2em 0;
  font-style: italic;
  color: var(--color-text-muted);
  border-left: 4px solid var(--color-primary);
}

blockquote::before {
  content: '"';
  position: absolute;
  left: -10px;
  top: -20px;
  font-size: 60px;
  color: var(--color-primary);
  opacity: 0.3;
  font-family: Georgia, serif;
}

/* ==========================================================================
   ДОПОЛНЕНИЕ 3: Плавные переходы
   ========================================================================== */

/* Мягкое появление страницы */
body {
  animation: fadeInPage 0.5s ease-in;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   ДОПОЛНЕНИЕ 4: Утилитарные классы
   ========================================================================== */
.text-center { text-align: center !important; }
.text-primary { color: var(--color-primary) !important; }
.text-muted { color: var(--color-text-muted) !important; }

.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }

.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ДОПОЛНЕНИЕ 5: Контактный блок
   ========================================================================== */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.contact-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.contact-link img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Работает с обоими вариантами: contact-block__notice и contact-block_notice */
.contact-block__notice,
.contact-block_notice {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
  font-size: 10pt;
  color: var(--color-warning) !important;
  text-align: center;
  font-style: italic;
}