/* Стили для версии сайта для слабовидящих */

/* Размеры шрифта */
html.text-normal {
  font-size: 16px;
}

html.text-large {
  font-size: 20px;
}

html.text-xl {
  font-size: 24px;
}

/* Межбуквенное расстояние */
html.letter-spacing-normal {
  letter-spacing: normal;
}

html.letter-spacing-wide {
  letter-spacing: 1px;
}

html.letter-spacing-wider {
  letter-spacing: 2px;
}

/* Высокий контраст */
body.high-contrast img,
body.high-contrast svg {
  filter: grayscale(100%);
}

body.high-contrast {
  color: #000 !important;
  background-color: #fff !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a,
body.high-contrast button,
body.high-contrast label,
body.high-contrast div {
  color: #000 !important;
  background-color: transparent !important;
}

body.high-contrast a {
  text-decoration: underline !important;
}

body.high-contrast button,
body.high-contrast .button,
body.high-contrast [role="button"] {
  border: 2px solid #000 !important;
  color: #000 !important;
  background-color: #fff !important;
}

/* Скрытие изображений */
body.hide-images img:not(.accessibility-icon) {
  visibility: hidden;
}

/* Панель доступности */
#accessibility-panel {
  position: fixed;
  top: 80px;
  right: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 340px;
  max-width: 90vw;
  opacity: 1 !important; /* Чтобы панель всегда была видимой */
}

@media (max-width: 400px) {
  #accessibility-panel {
    right: 5%;
    left: 5%;
    width: 90%;
  }
}

/* Панель доступности не должна терять стиль */
body.high-contrast #accessibility-panel,
body.bg-black #accessibility-panel {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  opacity: 1 !important;
}

/* Переключатели в режиме high-contrast */
body.high-contrast .toggle-slider,
body.bg-black .toggle-slider {
  background-color: #777 !important;
  opacity: 1 !important;
}

body.high-contrast .toggle-slider:before,
body.bg-black .toggle-slider:before {
  background-color: #fff !important;
  opacity: 1 !important;
}

body.high-contrast input:checked + .toggle-slider,
body.bg-black input:checked + .toggle-slider {
  background-color: #8C64D8 !important;
  opacity: 1 !important;
}

/* Чтобы элементы внутри панели всегда были видны */
#accessibility-panel *,
body.high-contrast #accessibility-panel *,
body.bg-black #accessibility-panel * {
  opacity: 1 !important;
}

/* Убедимся, что текст и другие элементы панели отображаются корректно */
body.high-contrast #accessibility-panel .text-sm,
body.bg-black #accessibility-panel .text-sm {
  color: #fff !important;
}

/* Стили для кнопок в панели доступности */
body.high-contrast .font-size-option,
body.bg-black .font-size-option {
  border: 1px solid #fff !important;
  color: #fff !important;
  background-color: #444 !important;
  opacity: 1 !important;
}

body.high-contrast .font-size-option.bg-primary,
body.bg-black .font-size-option.bg-primary {
  background-color: #8C64D8 !important;
  color: #fff !important;
}

/* Кнопки выбора цвета фона */
body.high-contrast .bg-color-option,
body.bg-black .bg-color-option {
  border: 2px solid #fff !important;
  opacity: 1 !important;
}

body.high-contrast .bg-color-option.ring-2,
body.bg-black .bg-color-option.ring-2 {
  box-shadow: 0 0 0 2px #8C64D8 !important;
}

/* Кнопка сброса в панели доступности */
body.high-contrast .reset-button,
body.bg-black .reset-button {
  background-color: #444 !important;
  color: #fff !important;
  border: 1px solid #666 !important;
  opacity: 1 !important;
}

body.high-contrast .reset-button:hover,
body.bg-black .reset-button:hover {
  background-color: #555 !important;
}

/* Кнопка доступности */
#accessibility-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

#accessibility-toggle:hover {
  opacity: 0.8;
}

.accessibility-icon {
  width: 24px;
  height: 24px;
}

/* Опции размера шрифта */
.font-size-options {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.font-size-option {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Опции межбуквенного расстояния */
.letter-spacing-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}

.letter-spacing-option {
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  text-align: center;
  flex: 1 0 auto;
  min-width: 90px;
  margin-bottom: 5px;
}

/* Опции цвета фона */
.bg-color-options {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.bg-color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Переключатели */
.toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-right: 10px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #8C64D8;
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Кнопка сброса */
.reset-button {
  width: 100%;
  padding: 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-button:hover {
  background-color: #e0e0e0;
}

/* Подсветка элемента, который озвучивается */
.speaking {
  outline: 2px solid #8C64D8 !important;
  outline-offset: 2px !important;
}

/* Кнопка озвучивания выделенного текста */
.speech-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #8C64D8;
  color: white;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
}

.speech-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.speech-button.active {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
  50% { transform: scale(1.2); box-shadow: 0 6px 15px rgba(140, 100, 216, 0.6); }
  100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
}

/* Стили для кнопки в разных режимах */
body.bg-black .speech-button {
  background-color: #a882f8;
  border-color: #fff;
}

body.high-contrast .speech-button {
  background-color: #000;
  border-color: #fff;
}

/* Цвета фона */
body.bg-black {
  background-color: #000 !important;
  background-image: none !important;
  background: #000 !important;
  color: #fff !important;
}

/* Черно-белый режим при черном фоне */
body.bg-black * {
  color: #fff !important;
}

body.bg-black h1,
body.bg-black h2,
body.bg-black h3,
body.bg-black h4,
body.bg-black h5,
body.bg-black h6,
body.bg-black p,
body.bg-black span,
body.bg-black a,
body.bg-black div,
body.bg-black label {
  color: #fff !important;
}

/* Улучшенные стили для карточек в режиме черного фона */
body.bg-black .card,
body.bg-black .info-card,
body.bg-black .event-card,
body.bg-black .news-card,
body.bg-black .quote-card,
body.bg-black .contact-info,
body.bg-black .team-card,
body.bg-black .bg-white,
body.bg-black .bg-gradient-to-br,
body.bg-black form,
body.bg-black #about .card,
body.bg-black #events .card,
body.bg-black #news .card,
body.bg-black .advice-card,
body.bg-black #contact form {
  background-color: #222 !important;
  border: 1px solid #444 !important;
  color: #fff !important;
}

/* Специально для текста в событиях, новостях и напутствиях */
body.bg-black #events .text-gray-600,
body.bg-black #events .text-gray-700,
body.bg-black #events .text-gray-800,
body.bg-black #news .text-gray-600,
body.bg-black #news .text-gray-700,
body.bg-black #news .text-gray-800,
body.bg-black .advice-card .text-gray-600,
body.bg-black .advice-card .text-gray-700,
body.bg-black .advice-card .text-gray-800,
body.bg-black .advice-text {
  color: #fff !important;
}

/* Стили для карточек в разделе "О нашем центре" */
body.bg-black #about .bg-gradient-to-br,
body.bg-black #about .bg-white {
  background-color: #222 !important;
  background-image: none !important;
  border: 1px solid #444 !important;
}

body.bg-black #about .bg-gradient-to-br *,
body.bg-black #about .bg-white * {
  color: #fff !important;
}

/* Стили для карточек в разделе "События" */
body.bg-black #events .bg-gradient-to-br,
body.bg-black #events .bg-white {
  background-color: #222 !important;
  background-image: none !important;
  border: 1px solid #444 !important;
}

body.bg-black #events .bg-gradient-to-br *,
body.bg-black #events .bg-white * {
  color: #fff !important;
}

/* Стили для карточек в разделе "Новости" */
body.bg-black #news .bg-gradient-to-br,
body.bg-black #news .bg-white {
  background-color: #222 !important;
  background-image: none !important;
  border: 1px solid #444 !important;
}

body.bg-black #news .bg-gradient-to-br *,
body.bg-black #news .bg-white * {
  color: #fff !important;
}

body.bg-black input,
body.bg-black textarea,
body.bg-black select {
  background-color: #222 !important;
  border-color: #555 !important;
  color: #fff !important;
}

body.bg-black img:not(.accessibility-icon),
body.bg-black svg:not(.accessibility-icon) {
  filter: grayscale(100%) !important;
}

/* Отключение анимаций для лучшей читаемости */
body.bg-black .animate-on-scroll,
body.bg-black .animate-fade-in,
body.bg-black .floating,
body.bg-black .spinning,
body.bg-black .pulsing,
body.bg-black .transition-all,
body.bg-black .transition-colors,
body.bg-black .group-hover\:rotate-\[360deg\],
body.bg-black .hover\:-translate-y-2,
body.bg-black .hover\:rotate-2 {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Специальные стили для кнопок и интерактивных элементов */
body.bg-black .btn,
body.bg-black button:not(.toggle-switch):not(.font-size-option):not(.bg-color-option):not(.text-color-option):not(.reset-button):not(#accessibility-toggle):not(#close-menu) {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  font-weight: bold !important;
}

/* Хедер и футер */
body.bg-black header, 
body.bg-black footer, 
body.bg-black #mobile-menu {
  background-color: #333 !important;
}

/* Стили для раздела "Напутствие молодёжи Нестерова" */
body.bg-black .advice-card {
  background-color: #222 !important;
  background-image: none !important;
  border: 1px solid #444 !important;
}

body.bg-black .advice-card * {
  color: #fff !important;
}

/* Формы в разделе "Связаться с нами" */
body.bg-black #contact form {
  background-color: #222 !important;
  border: 1px solid #444 !important;
}

body.bg-black #contact input,
body.bg-black #contact textarea {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
}

body.bg-black #contact label {
  color: #fff !important;
  font-weight: bold !important;
}

body.bg-black #contact button[type="submit"] {
  background-color: #8C64D8 !important;
  border: 1px solid #a882f8 !important;
  color: white !important;
}

/* Дополнительные стили для форм в черном режиме */
body.bg-black #contact .form-group input, 
body.bg-black #contact .form-control,
body.bg-black #contact .form-group textarea {
  background-color: #333 !important;
  color: #fff !important;
  border-color: #555 !important;
}

body.bg-black #contact .form-group label,
body.bg-black #contact .form-label {
  color: #fff !important;
  background-color: transparent !important;
}

body.bg-black #contact .form-group input:focus,
body.bg-black #contact .form-group textarea:focus {
  border-color: #a882f8 !important;
  box-shadow: 0 0 0 2px rgba(168, 130, 248, 0.3) !important;
}

/* Градиентные карточки и другие элементы */
body.bg-black .bg-gradient-to-br,
body.bg-black .bg-gradient-to-r,
body.bg-black .bg-gradient-to-l {
  background-image: none !important;
  background-color: #222 !important;
}

/* Кнопки отправки сообщений и другие кнопки взаимодействия */
body.bg-black button[type="submit"],
body.bg-black input[type="submit"],
body.bg-black .btn-primary {
  background-color: #8C64D8 !important;
  color: white !important;
  border: 1px solid #a882f8 !important;
}

/* Стили для карточек "О нашем центре" в режиме доступности */
body.high-contrast .about-card,
body.bg-black .about-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  animation: none !important;
  background-color: #222 !important;
  border: 1px solid #444 !important;
}

body.high-contrast .about-card::after,
body.bg-black .about-card::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
}

body.high-contrast .about-card:hover,
body.bg-black .about-card:hover {
  transform: translateY(-15px) rotate3d(1, 1, 0, 5deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
  animation: floating 3s ease-in-out infinite !important;
}

body.high-contrast .about-card:hover i,
body.bg-black .about-card:hover i {
  color: #a882f8 !important;
}

/* Черно-белый режим - более агрессивное применение стилей */
body.high-contrast header,
body.high-contrast footer,
body.high-contrast section,
body.high-contrast nav,
body.high-contrast main,
body.high-contrast aside,
body.high-contrast article {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

body.high-contrast .container,
body.high-contrast .mx-auto,
body.high-contrast .card,
body.high-contrast .bg-white,
body.high-contrast .bg-gray-50,
body.high-contrast .bg-gray-100,
body.high-contrast .bg-gray-200,
body.high-contrast .bg-primary,
body.high-contrast .bg-secondary,
body.high-contrast .hero-gradient,
body.high-contrast .gradient-bg,
body.high-contrast .bg-gradient-to-br {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

body.high-contrast .bg-gray-800,
body.high-contrast .bg-gray-900,
body.high-contrast .text-white {
  background-color: #fff !important;
  color: #000 !important;
}

body.high-contrast .border,
body.high-contrast .border-t,
body.high-contrast .border-b,
body.high-contrast .border-l,
body.high-contrast .border-r {
  border-color: #000 !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

body.high-contrast .shadow,
body.high-contrast .shadow-md,
body.high-contrast .shadow-lg,
body.high-contrast .shadow-xl {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

body.high-contrast .text-gray-400,
body.high-contrast .text-gray-500,
body.high-contrast .text-gray-600,
body.high-contrast .text-gray-700,
body.high-contrast .text-gray-800,
body.high-contrast .text-gray-900 {
  color: #000 !important;
}

body.high-contrast .hover\:bg-gray-100:hover,
body.high-contrast .hover\:bg-secondary:hover,
body.high-contrast .hover\:bg-primary:hover {
  background-color: #eee !important;
}

body.high-contrast .hover\:text-white:hover,
body.high-contrast .hover\:text-primary:hover {
  color: #000 !important;
  text-decoration: underline !important;
}