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

/* Основные стили карточки лицензии */
.license-card {
  border-radius: 10px !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: 10px !important; /* Левый верхний угол */
  border-top-right-radius: 10px !important; /* Правый верхний угол */
}

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

/* Кнопка навигации в карточке лицензии */
.license-card-navigate-button {
  border-radius: 8px !important; /* Округлые углы */
  height: 40px !important; /* Высота кнопки */
  background: linear-gradient(270deg, rgb(255, 206, 191), rgb(255, 135, 99)) !important; /* Оранжевый градиент-фон */
  border-color: #ff8763 !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: linear-gradient(270deg, rgb(204, 203, 255), rgb(127, 125, 221)) !important; /* Фиолетовый градиент фон при наведении */
  border-color: #7f7ddd !important; /* Фиолетовая рамка при наведении */
  box-shadow: #FFB8A2 !important; /* Оранжевая тень при наведении */
  /* color: #ffffff !important; */
}

/* Эффект нажатия для кнопки навигации */
.license-card-navigate-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: #FF9F81 !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: #ff8763 !important; /* Сохраняем оранжевый фон */
  border-color: #ff8763 !important; /* Сохраняем оранжевую рамку */
}

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

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

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

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

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

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

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

/* ==============================================
   СТИЛИ ДЛЯ ПАГИНАЦИИ
   ============================================== */

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

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

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

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

.pagination .ant-pagination-item:hover a {
  color: #7f7ddd !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: #3d3d3d !important; /* Белый цвет для заголовков на темном фоне */
  margin-bottom: 20px !important; /* Нижний отступ */
}

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

/* Выключенный переключатель - добавляем коричневую рамку */
.ant-switch {
  border: 2px solid #7f7ddd !important; /* Фиолетовая рамка для всех переключателей */
  background-color: #E3E2FF !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: #7f7ddd !important; /* Фиолетовый фон */
  border: 2px solid #7f7ddd !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: #5856BD !important; /* Более темный фиолетовый при наведении */
  border-color: #5856BD !important; /* Темно-фиолетовая рамка при наведении */
}

/* Эффект наведения на выключенный переключатель */
.ant-switch:hover {
  border-color: #5856BD !important; /* Темно-фиолетовая рамка при наведении */
  background-color: #5856BD !important; /* Чуть более заметный фон */
}

/* Фокус на включенном переключателе */
.ant-switch.ant-switch-checked:focus {
  box-shadow: #E3E2FF !important; /* Фиолетовое свечение при фокусе */
}

/* Фокус на выключенном переключателе */
.ant-switch:focus {
  box-shadow: #E3E2FF !important; /* Фиолетовое свечение при фокусе */
}

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

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

/* Контейнер с переключателем - белый текст */
.ant-layout._content_layout_6sxhr_1 .flex.align-center.gap-5.fw-500 span {
  color: #3d3d3d !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: #3d3d3d !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: #3d3d3d !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: #ff8763 !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: #CD5C3A !important; /* Более темный оранжевый при наведении */
  text-decoration: underline !important; /* Подчеркивание при наведении */
}

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

/* Дополнительные стили для вторичного текста на темном фоне */
.ant-layout._content_layout_6sxhr_1 .secondary-text {
  color: rgba(255, 255, 255, 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: #666666 !important; /* Серый цвет для вторичного текста в карточках */
}

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

/* Основные стили карточки подписки */
.subscription-card {
  border-radius: 10px !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: 10px !important; /* Левый верхний угол */
  border-top-right-radius: 10px !important; /* Правый верхний угол */
}

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

/* Кнопка оплаты в карточке подписки */
.subscription-card-pay-button {
  border-radius: 8px !important; /* Округлые углы */
  height: 40px !important; /* Высота кнопки */
  background: linear-gradient(270deg, rgb(204, 203, 255), rgb(127, 125, 221)) !important; /* Фиолетовый фон градиент */
  border-color: #7f7ddd !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: linear-gradient(270deg, rgb(255, 206, 191), rgb(255, 135, 99)) !important; /* Оранжевый фон-градиент при наведении */
  border-color: #ff8763 !important; /* Оранжевая рамка при наведении */
  box-shadow: 0 4px 15px rgba(154, 129, 107, 0.3) !important; /* Коричневая тень при наведении */
  /*color: white !important; */ /* Белый цвет текста */
}

/* Эффект нажатия для кнопки оплаты */
.subscription-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: #CD5C3A !important; /* Усиленная оранжевая тень при нажатии */
}

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

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

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

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

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

/* Основные стили карточки заказа */
.order-card {
  border-radius: 10px !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: 10px !important; /* Левый верхний угол */
  border-top-right-radius: 10px !important; /* Правый верхний угол */
}

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

/* Кнопка оплаты в карточке заказа */
.order-card-pay-button {
  border-radius: 8px !important; /* Округлые углы */
  height: 40px !important; /* Высота кнопки */
  background: linear-gradient(270deg, rgb(255, 206, 191), rgb(255, 135, 99))!important; /* Оранжевый фон-градиент */
  border-color: #ff8763 !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: linear-gradient(270deg, rgb(204, 203, 255), rgb(127, 125, 221)) !important; /* Фиолетовый фон градиент при наведении */
  border-color: #7f7ddd !important; /* Фиолетовая рамка при наведении */
  box-shadow: 0 4px 15px rgba(154, 129, 107, 0.3) !important; /* Коричневая тень при наведении */
 /*color: white !important; */
}

/* Эффект нажатия для кнопки оплаты заказа */
.order-card-pay-button:active {
  transform: scale(0.97) !important; /* Уменьшение при нажатии */
  box-shadow: #5B58D5 !important; /* Усиленная фиолетовая тень при нажатии */
}

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

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

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

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