/* Основные стили панели */
.eye-panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background-color: #fff !important; /* Фиксированный фон панели */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px;
  color: #000 !important; /* Фиксированный цвет текста панели */
}

/* Отступ для основного контента */
body.has-eye-panel {
  margin-top: 60px; /* Примерное значение, будет переопределено JS */
}

/* Цветовые темы для всего документа */
html.eye-theme-white,
body.eye-theme-white,
#header.eye-theme-white,
footer.eye-theme-white {
  background-color: #fff !important;
  color: #000 !important;
}

html.eye-theme-black,
body.eye-theme-black,
#header.eye-theme-black,
footer.eye-theme-black {
  background-color: #000 !important;
  color: #fff !important;
}

html.eye-theme-blue,
body.eye-theme-blue,
#header.eye-theme-blue,
footer.eye-theme-blue {
  background-color: #9dd1ff !important;
  color: #063462 !important;
}

html.eye-theme-brown,
body.eye-theme-brown,
#header.eye-theme-brown,
footer.eye-theme-brown {
  background-color: #f7f3d6 !important;
  color: #4d4b43 !important;
}

html.eye-theme-green,
body.eye-theme-green,
#header.eye-theme-green,
footer.eye-theme-green {
  background-color: #3b2716 !important;
  color: #a9e44d !important;
}


/* Исключение для самой панели */
.eye-panel,
.eye-panel * {
  background-color: #fff !important;
  color: #000 !important;
}

/* Блоки и элементы панели */
.eye-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.eye-block {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.eye-block-title {
  font-size: 1.5rem;
  white-space: nowrap;
  margin-right: 0.3rem;
}

.eye-link {
  text-decoration: none;
  color: #333;
  font-size: 1.5rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.2rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.eye-link:hover {
  opacity: 0.8;
}

.eye-link.active {
  font-weight: bold;
  transform: scale(1.05);
}

/* Стили кнопок тем */
.eye-theme-white { 
  background-color: #fff !important; 
  color: #000 !important; 
  border-color: #000 !important; 
}
.eye-theme-black { 
  background-color: #000 !important; 
  color: #fff !important; 
  border-color: #fff !important; 
}
.eye-theme-blue { 
  background-color: #9dd1ff !important; 
  color: #063462 !important; 
  border-color: #063462 !important; 
}
.eye-theme-brown { 
  background-color: #f7f3d6 !important; 
  color: #4d4b43 !important; 
  border-color: #4d4b43 !important; 
}
.eye-theme-green { 
  background-color: #3b2716 !important; 
  color: #a9e44d !important; 
  border-color: #a9e44d !important; 
}

/* Классы для body */
body.eye-theme-white {
  background-color: #fff !important;
  color: #000 !important;
}

body.eye-theme-black {
  background-color: #000 !important;
  color: #fff !important;
}

body.eye-theme-blue {
  background-color: #9dd1ff !important;
  color: #063462 !important;
}

body.eye-theme-brown {
  background-color: #f7f3d6 !important;
  color: #4d4b43 !important;
}

body.eye-theme-green {
  background-color: #3b2716 !important;
  color: #a9e44d !important;
}

/* Управление изображениями */
body.eye-images-off img {
  display: none !important;
}

body.eye-images-grayscale img {
  filter: grayscale(100%) contrast(1.5) brightness(1.1) !important;
}

/* Управление шрифтами */
body.eye-font-sans {
  font-family: Arial, sans-serif !important;
}

body.eye-font-serif {
  font-family: "Times New Roman", serif !important;
}

/* Управление межстрочным интервалом */
body.eye-line-normal {
  line-height: 1.5 !important;
}

body.eye-line-medium {
  line-height: 2.0 !important;
}

body.eye-line-large {
  line-height: 2.5 !important;
}

/* Дополнительные цвета для кнопок и фона (в дополнение к Bootstrap) */
/* 6 дополнительных цветов: orange, lavender, mint, peach, lilac, sky */
/* Для светлых фонов (lavender, mint, peach, sky) используется тёмный текст #333 */

.bg-orange { background-color: #fd7e14 !important; }
.bg-lavender { background-color: #d4a5ff !important; }
.bg-mint { background-color: #7fff7f !important; }
.bg-peach { background-color: #ffb380 !important; }
.bg-lilac { background-color: #b886b8 !important; }
.bg-sky { background-color: #6bb6d9 !important; }

.text-orange { color: #fd7e14 !important; }
.text-lavender { color: #9c5fbf !important; }
.text-mint { color: #5cb85c !important; }
.text-peach { color: #e67e50 !important; }
.text-lilac { color: #9b59b6 !important; }
.text-sky { color: #5bc0de !important; }

/* Кнопки с дополнительными цветами (не Bootstrap) */
.btn-lavender {
    background-color: #d4a5ff !important;
    border-color: #d4a5ff !important;
    color: #333 !important;
}
.btn-lavender:hover, .btn-lavender:focus {
    background-color: #c084ff !important;
    border-color: #c084ff !important;
    color: #333 !important;
}

.btn-mint {
    background-color: #7fff7f !important;
    border-color: #7fff7f !important;
    color: #333 !important;
}
.btn-mint:hover, .btn-mint:focus {
    background-color: #5cff5c !important;
    border-color: #5cff5c !important;
    color: #333 !important;
}

.btn-peach {
    background-color: #ffb380 !important;
    border-color: #ffb380 !important;
    color: #333 !important;
}
.btn-peach:hover, .btn-peach:focus {
    background-color: #ff9454 !important;
    border-color: #ff9454 !important;
    color: #333 !important;
}

.btn-lilac {
    background-color: #b886b8 !important;
    border-color: #b886b8 !important;
    color: #fff !important;
}
.btn-lilac:hover, .btn-lilac:focus {
    background-color: #a56fa5 !important;
    border-color: #a56fa5 !important;
    color: #fff !important;
}

.btn-sky {
    background-color: #6bb6d9 !important;
    border-color: #6bb6d9 !important;
    color: #333 !important;
}
.btn-sky:hover, .btn-sky:focus {
    background-color: #4fa3d1 !important;
    border-color: #4fa3d1 !important;
    color: #333 !important;
}

/* Цвета Bootstrap 5 */
/* $blue #0d6efd, $indigo #6610f2, $purple #6f42c1, $pink #d63384 */
/* $red #dc3545, $orange #fd7e14, $yellow #ffc107, $green #198754 */
/* $teal #20c997, $cyan #0dcaf0 */

/* Все цвета Bootstrap 5 */
.bg-blue { background-color: #0d6efd !important; }
.bg-indigo { background-color: #6610f2 !important; }
.bg-purple { background-color: #6f42c1 !important; }
.bg-pink { background-color: #d63384 !important; }
.bg-red { background-color: #dc3545 !important; }
.bg-orange { background-color: #fd7e14 !important; }
.bg-yellow { background-color: #ffc107 !important; }
.bg-green { background-color: #198754 !important; }
.bg-teal { background-color: #20c997 !important; }
.bg-cyan { background-color: #0dcaf0 !important; }

.text-blue { color: #0d6efd !important; }
.text-indigo { color: #6610f2 !important; }
.text-purple { color: #6f42c1 !important; }
.text-pink { color: #d63384 !important; }
.text-red { color: #dc3545 !important; }
.text-orange { color: #fd7e14 !important; }
.text-yellow { color: #ffc107 !important; }
.text-green { color: #198754 !important; }
.text-teal { color: #20c997 !important; }
.text-cyan { color: #0dcaf0 !important; }

.btn-blue {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}
.btn-blue:hover, .btn-blue:focus {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
    color: #fff !important;
}

.btn-indigo {
    background-color: #6610f2 !important;
    border-color: #6610f2 !important;
    color: #fff !important;
}
.btn-indigo:hover, .btn-indigo:focus {
    background-color: #560ddb !important;
    border-color: #560ddb !important;
    color: #fff !important;
}

.btn-purple {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #fff !important;
}
.btn-purple:hover, .btn-purple:focus {
    background-color: #5a32a3 !important;
    border-color: #5a32a3 !important;
    color: #fff !important;
}

.btn-pink {
    background-color: #d63384 !important;
    border-color: #d63384 !important;
    color: #fff !important;
}
.btn-pink:hover, .btn-pink:focus {
    background-color: #b52b6f !important;
    border-color: #b52b6f !important;
    color: #fff !important;
}

.btn-red {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
.btn-red:hover, .btn-red:focus {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #fff !important;
}

.btn-orange {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
}
.btn-orange:hover, .btn-orange:focus {
    background-color: #e36a0d !important;
    border-color: #e36a0d !important;
    color: #fff !important;
}

.btn-yellow {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #333 !important;
}
.btn-yellow:hover, .btn-yellow:focus {
    background-color: #ffb300 !important;
    border-color: #ffb300 !important;
    color: #333 !important;
}

.btn-green {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}
.btn-green:hover, .btn-green:focus {
    background-color: #146c43 !important;
    border-color: #146c43 !important;
    color: #fff !important;
}

.btn-teal {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
    color: #fff !important;
}
.btn-teal:hover, .btn-teal:focus {
    background-color: #1ba87e !important;
    border-color: #1ba87e !important;
    color: #fff !important;
}

.btn-cyan {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #fff !important;
}
.btn-cyan:hover, .btn-cyan:focus {
    background-color: #0baccc !important;
    border-color: #0baccc !important;
    color: #fff !important;
}

/* Карточки категорий тестов */
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    overflow: hidden;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
.category-card .category-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
}
.category-card:hover .category-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Цветовые темы для ссылок */
a.eye-theme-white,
.eye-theme-white a {
  color: #0000EE !important; /* Стандартный синий для светлой темы */
}

a.eye-theme-black,
.eye-theme-black a {
  color: #1E90FF !important; /* Ярко-синий для темной темы */
}

a.eye-theme-blue,
.eye-theme-blue a {
  color: #003366 !important; /* Темно-синий для синей темы */
}

a.eye-theme-brown,
.eye-theme-brown a {
  color: #5E4B2D !important; /* Коричневый для бежевой темы */
}

a.eye-theme-green,
.eye-theme-green a {
  color: #7CFC00 !important; /* Салатовый для зеленой темы */
}

/* Стили для посещенных ссылок */
a.eye-theme-white:visited,
.eye-theme-white a:visited {
  color: #551A8B !important;
}

a.eye-theme-black:visited,
.eye-theme-black a:visited {
  color: #9370DB !important;
}

a.eye-theme-blue:visited,
.eye-theme-blue a:visited {
  color: #483D8B !important;
}

a.eye-theme-brown:visited,
.eye-theme-brown a:visited {
  color: #8B4513 !important;
}

a.eye-theme-green:visited,
.eye-theme-green a:visited {
  color: #32CD32 !important;
}

/* Стили для hover-состояния */
a.eye-theme-white:hover,
.eye-theme-white a:hover {
  color: #FF4500 !important;
}

a.eye-theme-black:hover,
.eye-theme-black a:hover {
  color: #00BFFF !important;
}

a.eye-theme-blue:hover,
.eye-theme-blue a:hover {
  color: #FF8C00 !important;
}

a.eye-theme-brown:hover,
.eye-theme-brown a:hover {
  color: #CD853F !important;
}

a.eye-theme-green:hover,
.eye-theme-green a:hover {
  color: #ADFF2F !important;
}