/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ЛИЦЕНЗИЙ - КОРИЧНЕВАЯ ТЕМА
   ============================================== */

/* Основные стили карточки лицензии */
.license-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Рамка как у карточек курсов */
  background-color: #FFFFFF !important; /* Белый фон карточки */
}

/* Округлые углы для превью лицензии */
.license-card-preview-placeholder,
.license-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Белый фон для контентной части карточки лицензии */
.license-card .license-card-content {
  background-color: #FFFFFF !important; /* Белый фон для контента */
  padding: 20px !important; /* Внутренние отступы */
}

/* Кнопка навигации в карточке лицензии */
.license-card-navigate-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #7a9dde !important; /* Коричневый фон */
  border-color: #7a9dde !important; /* Коричневая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки навигации */
.license-card-navigate-button:hover {
  background: #6785b8 !important; /* Темно-коричневый фон при наведении */
  border-color: #6785b8 !important; /* Темно-коричневая рамка при наведении */
  box-shadow: 0 4px 15px rgba(154, 129, 107, 0.3) !important; /* Коричневая тень при наведении */
  /* color: #ffffff !important; */
}

/* Эффект нажатия для кнопки навигации */
.license-card-navigate-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 0 2px 10px rgba(154, 129, 107, 0.4) !important; /* Усиленная коричневая тень при нажатии */
}

/* Позиционирование текста в кнопке навигации */
.license-card-navigate-button span {
  position: relative; /* Относительное позиционирование */
  display: inline-flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
}

/* Добавляем иконку стрелки к кнопке навигации */
.license-card-navigate-button span::after {
  content: ''; /* Пустое содержимое для псевдоэлемента */
  /* SVG иконка стрелки в белом кружке */
  background-image: url("https://con.xl.ru/lLDQDOKQ20C-M-7k4pEIvQ/images/w_qwD4uiRk6MEFfkkpcRfQ.svg");
  display: inline-block; /* Блочно-строчный элемент */
  width: 20px; /* Ширина псевдоэлемента */
  height: 15px; /* Высота псевдоэлемента */
  background-size: 20px 15px; /* подберите нужный размер */
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px; /* Отступ слева от текста */
  vertical-align: middle; /* Выравнивание по центру строки */
}

/* Стили для отключенных кнопок навигации */
.license-card-navigate-button[disabled],
.license-card-navigate-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
  background: #7a9dde !important; /* Сохраняем коричневый фон */
  border-color: #7a9dde !important; /* Сохраняем коричневую рамку */
}

/* Скрываем иконку у отключенных кнопок навигации */
.license-card-navigate-button[disabled] span::after,
.license-card-navigate-button:disabled span::after {
  display: none !important; /* Полностью скрываем иконку */
}

/* Заголовок карточки лицензии */
.license-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* Метка активности лицензии */
.license-card-activity-label[data-active="true"] {
  color: #7a9dde !important; /* Коричневый цвет для активных лицензий */
}

/* Цвет успеха в метке активности */
.license-card-activity-label[data-active="true"] .color-success {
  color: #7a9dde !important; /* Коричневый цвет */
}

/* Иконки в карточках лицензий */
.license-card .anticon {
  color: #7a9dde !important; /* Коричневый цвет иконок */
}

/* Прогресс-бары в карточках лицензий (если есть) */
.license-card .ant-progress-bg,
.license-card .ant-progress-success-bg {
  background-color: #ffa500 !important; /* Коричневый цвет заполнения */
}

/* Текст прогресса */
.license-card .ant-progress-text {
  color: #7a9dde !important; /* Коричневый цвет текста процентов */
}

/* ==============================================
   СТИЛИ ДЛЯ ПАГИНАЦИИ - КОРИЧНЕВАЯ ТЕМА
   ============================================== */

/* Активная страница в пагинации */
.pagination .ant-pagination-item-active {
  border-color: #7a9dde !important; /* Коричневая рамка для активной страницы */
}

/* Ссылка активной страницы */
.pagination .ant-pagination-item-active a {
  color: #7a9dde !important; /* Коричневый цвет текста */
}

/* Эффект наведения на кнопки пагинации */
.pagination .ant-btn:hover {
  color: #566f99 !important; /* Темно-коричневый цвет при наведении */
  border-color: #826B59 !important; /* Темно-коричневая рамка при наведении */
}

/* Эффект наведения на элементы пагинации */
.pagination .ant-pagination-item:hover {
  border-color: #566f99 !important; /* Коричневая рамка при наведении */
}

.pagination .ant-pagination-item:hover a {
  color: #566f99 !important; /* Коричневый цвет текста при наведении */
}

/* ==============================================
   СТИЛИ ДЛЯ ЗАГОЛОВКОВ РАЗДЕЛОВ
   ============================================== */

/* Заголовки в разделах лицензий, подписок и заказов - БЕЛЫЙ ЦВЕТ для темного фона */
.ant-layout._content_layout_6sxhr_1 #licenses .ant-typography,
.ant-layout._content_layout_6sxhr_1 #subscriptions .ant-typography,
.ant-layout._content_layout_6sxhr_1 #orders .ant-typography {
  color: #7a9dde !important; /* Белый цвет для заголовков на темном фоне */
  margin-bottom: 20px !important; /* Нижний отступ */
}

/* ==============================================
   СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЕЙ (SWITCH) - КОРИЧНЕВАЯ ТЕМА
   ============================================== */

/* Выключенный переключатель - добавляем коричневую рамку */
.ant-switch {
  border: 2px solid #7a9dde !important; /* Коричневая рамка для всех переключателей */
  background-color: rgba(86,111,153, 0.1) !important; /* Легкий коричневый фон для выключенного */
  display: flex !important; /* Флекс для правильного центрирования */
  align-items: center !important; /* Центрирование по вертикали */
}

/* Ручка переключателя - правильное центрирование */
.ant-switch .ant-switch-handle {
  top: 50% !important; /* Центрирование по вертикали */
  transform: translateY(-50%) !important; /* Смещение для точного центрирования */
}

/* Включенный переключатель */
.ant-switch.ant-switch-checked {
  background-color: #7a9dde !important; /* Коричневый фон */
  border: 2px solid #7a9dde !important; /* Коричневая рамка */
  display: flex !important; /* Флекс для правильного центрирования */
  align-items: center !important; /* Центрирование по вертикали */
}

/* Ручка включенного переключателя */
.ant-switch.ant-switch-checked .ant-switch-handle {
  top: 50% !important; /* Центрирование по вертикали */
  transform: translateY(-50%) !important; /* Смещение для точного центрирования */
}

/* Эффект наведения на включенный переключатель */
.ant-switch.ant-switch-checked:hover {
  background-color: #566f99 !important; /* Более темный коричневый при наведении */
  border-color: #566f99 !important; /* Темно-коричневая рамка при наведении */
}

/* Эффект наведения на выключенный переключатель */
.ant-switch:hover {
  border-color: #566f99 !important; /* Темно-коричневая рамка при наведении */
  background-color: rgba(86,111,153, 0.2) !important; /* Чуть более заметный фон */
}

/* Фокус на включенном переключателе */
.ant-switch.ant-switch-checked:focus {
  box-shadow: 0 0 0 2px rgba(86,111,153, 0.2) !important; /* Коричневое свечение при фокусе */
}

/* Фокус на выключенном переключателе */
.ant-switch:focus {
  box-shadow: 0 0 0 2px rgba(86,111,153, 0.2) !important; /* Коричневое свечение при фокусе */
}

/* Анимация клика на переключателе */
.ant-switch.ant-switch-checked .ant-click-animating-node {
  background-color: #566f99 !important; /* Коричневый цвет анимации */
}

/* ==============================================
   СТИЛИ ДЛЯ ТЕКСТА НА ТЕМНОМ ФОНЕ
   ============================================== */

/* Контейнер с переключателем - белый текст */
.ant-layout._content_layout_6sxhr_1 .flex.align-center.gap-5.fw-500 span {
  color: #35558f !important; /* Белый цвет для текста "Показать только истекшие" */
}

/* Информационные сообщения в разделах доступов (licenses) */
.ant-layout._content_layout_6sxhr_1 #licenses .flex.align-center.fs-14.gap-10.mt-10 span,
.ant-layout._content_layout_6sxhr_1 #licenses .flex.align-center.fs-14.gap-10.mt-10 span span {
  color: #35558f !important; /* Белый цвет для информационного текста */
}

/* Информационные сообщения в разделах подписок и заказов */
.ant-layout._content_layout_6sxhr_1 #subscriptions .flex.align-center.fs-14.gap-10.mt-10 span,
.ant-layout._content_layout_6sxhr_1 #subscriptions .flex.align-center.fs-14.gap-10.mt-10 span span,
.ant-layout._content_layout_6sxhr_1 #orders .flex.align-center.fs-14.gap-10.mt-10 span,
.ant-layout._content_layout_6sxhr_1 #orders .flex.align-center.fs-14.gap-10.mt-10 span span {
  color: #35558f !important; /* Белый цвет для информационного текста */
}

/* Ссылки в информационных сообщениях */
.ant-layout._content_layout_6sxhr_1 #licenses .ant-btn-link span,
.ant-layout._content_layout_6sxhr_1 #subscriptions .ant-btn-link span,
.ant-layout._content_layout_6sxhr_1 #orders .ant-btn-link span {
  color: #FCA355 !important; /* Оранжевый цвет для ссылок "технической поддержкой" */
}

/* Эффект наведения для ссылок */
.ant-layout._content_layout_6sxhr_1 #licenses .ant-btn-link:hover span,
.ant-layout._content_layout_6sxhr_1 #subscriptions .ant-btn-link:hover span,
.ant-layout._content_layout_6sxhr_1 #orders .ant-btn-link:hover span {
  color: #E8954A !important; /* Более темный оранжевый при наведении */
  text-decoration: underline !important; /* Подчеркивание при наведении */
}

/* Иконки информации */
.ant-layout._content_layout_6sxhr_1 .anticon-info-circle.color-primary {
  color: #7a9dde !important; /* Коричневый цвет для иконок информации */
}

/* Дополнительные стили для вторичного текста на темном фоне */
.ant-layout._content_layout_6sxhr_1 .secondary-text {
  color: rgba(122,157,222, 0.7) !important; /* Полупрозрачный белый для вторичного текста */
}

/* Стили для текста в карточках (остается темным, так как карточки белые) */
.ant-layout._content_layout_6sxhr_1 .license-card .secondary-text,
.ant-layout._content_layout_6sxhr_1 .subscription-card .secondary-text,
.ant-layout._content_layout_6sxhr_1 .order-card .secondary-text {
  color: #7a9dde !important; /* Серый цвет для вторичного текста в карточках */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ПОДПИСОК - КОРИЧНЕВАЯ ТЕМА
   ============================================== */

/* Основные стили карточки подписки */
.subscription-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Рамка */
  background-color: #FFFFFF !important; /* Белый фон карточки */
}

/* Округлые углы для превью подписки */
.subscription-card-preview-placeholder,
.subscription-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Белый фон для контентной части карточки подписки */
.subscription-card .subscription-card-content {
  background-color: #FFFFFF !important; /* Белый фон для контента */
  padding: 20px !important; /* Внутренние отступы */
}

/* Кнопка оплаты в карточке подписки */
.subscription-card-pay-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #7a9dde !important; /* Коричневый фон */
  border-color: #7a9dde !important; /* Коричневая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки оплаты */
.subscription-card-pay-button:hover {
  background: #566f99 !important; /* Темно-коричневый фон при наведении */
  border-color: #566f99 !important; /* Темно-коричневая рамка при наведении */
  box-shadow: 0 4px 15px rgba(86,111,153, 0.3) !important; /* Коричневая тень при наведении */
  /*color: white !important; */ /* Белый цвет текста */
}

/* Эффект нажатия для кнопки оплаты */
.subscription-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 0 2px 10px rgba(86,111,153, 0.4) !important; /* Усиленная коричневая тень при нажатии */
}

/* Отключенная кнопка оплаты */
.subscription-card-pay-button[disabled],
.subscription-card-pay-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
  background: #7a9dde !important; /* Сохраняем коричневый фон */
  border-color: #7a9dde !important; /* Сохраняем коричневую рамку */
}

/* Метка активности подписки */
.subscription-card-activity-label[data-active="true"] .color-success {
  color: #7a9dde !important; /* Коричневый цвет для активных подписок */
}

/* Заголовок карточки подписки */
.subscription-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* Иконки в карточках подписок */
.subscription-card .anticon {
  color: #7a9dde !important; /* Коричневый цвет иконок */
}

/* ==============================================
   СТИЛИ ДЛЯ КАРТОЧЕК ЗАКАЗОВ - КОРИЧНЕВАЯ ТЕМА
   ============================================== */

/* Основные стили карточки заказа */
.order-card {
  border-radius: 20px !important; /* Округлые углы */
  box-shadow: 0 4px 20px 0 rgba(128, 128, 128, 0.15) !important; /* Мягкая тень */
  overflow: hidden; /* Скрываем переполнение */
  border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Рамка */
  background-color: #FFFFFF !important; /* Белый фон карточки */
}

/* Округлые углы для превью заказа */
.order-card-preview-placeholder,
.order-card-preview-image {
  border-top-left-radius: 20px !important; /* Левый верхний угол */
  border-top-right-radius: 20px !important; /* Правый верхний угол */
}

/* Белый фон для контентной части карточки заказа */
.order-card .order-card-content {
  background-color: #FFFFFF !important; /* Белый фон для контента */
  padding: 20px !important; /* Внутренние отступы */
}

/* Кнопка оплаты в карточке заказа */
.order-card-pay-button {
  border-radius: 10px !important; /* Округлые углы */
  height: 60px !important; /* Высота кнопки */
  background: #7a9dde !important; /* Коричневый фон */
  border-color: #7a9dde !important; /* Коричневая рамка */
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Центрирование по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 0 20px !important; /* Внутренние отступы */
  margin-top: 20px; /* Верхний отступ */
  margin-bottom: 15px; /* Нижний отступ */
  transition: all 0.3s ease !important; /* Плавный переход при наведении */
  color: white !important; /* Белый цвет текста */
}

/* Эффект наведения для кнопки оплаты заказа */
.order-card-pay-button:hover {
  background: #566f99 !important; /* Темно-коричневый фон при наведении */
  border-color: #566f99 !important; /* Темно-коричневая рамка при наведении */
  box-shadow: 0 4px 15px rgba(86,111,153, 0.3) !important; /* Коричневая тень при наведении */
 /*color: white !important; */
}

/* Эффект нажатия для кнопки оплаты заказа */
.order-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: 0 2px 10px rgba(86,111,153, 0.4) !important; /* Усиленная коричневая тень при нажатии */
}

/* Отключенная кнопка оплаты заказа */
.order-card-pay-button[disabled],
.order-card-pay-button:disabled {
  color: #fff !important; /* Белый цвет текста */
  opacity: 0.7 !important; /* Полупрозрачность */
  background: #7a9dde !important; /* Сохраняем коричневый фон даже для отключенных */
  border-color: #7a9dde !important; /* Сохраняем коричневую рамку */
}

/* Метка оплаченного заказа */
.order-card-activity-label[data-paid="true"] .color-success {
  color: #7a9dde !important; /* Коричневый цвет для оплаченных заказов */
}

/* Заголовок карточки заказа */
.order-card-title {
  color: #333 !important; /* Темно-серый цвет */
  font-weight: 500 !important; /* Средняя жирность шрифта */
}

/* Иконки в карточках заказов */
.order-card .anticon {
  color: #7a9dde !important; /* Коричневый цвет иконок */
}