/* ============================================
   БАЗОВЫЕ СТИЛИ (БЕЗ ЦВЕТОВ)
   Структура, шрифты, размеры, отступы
   ============================================ */

/* Импорты и шрифты */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poly&family=Poppins:wght@400;500;600;700;800&display=swap");

/* font-display: swap - показывает системный шрифт пока загружается кастомный
   Это предотвращает "невидимый текст" (FOIT) */
@font-face {
  font-family: 'Noir Pro';
  src: url(../../assets/css/fonts/NoirPro-Regular.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noir Pro Bold';
  src: url(../../assets/css/fonts/NoirPro-Bold.otf) format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noir Pro Semi Bold';
  src: url(../../assets/css/fonts/NoirPro-SemiBold.otf) format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noir Pro Light';
  src: url(../../assets/css/fonts/NoirPro-Light.otf) format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Базовые переменные (без цветов) */
:root {
  /* По ТЗ: современный sans (Inter/system) */
  --font-primary: var(--font-sans, "Noir Pro");
  --font-sec: "Poppins", sans-serif;
  --font-Noir-Pro-Bold: "Noir Pro Bold";
  --font-Noir-Pro-semiBold: "Noir Pro Semi Bold";
  --font-Noir-Pro-Light: "Noir Pro Light";
  --transition: all 0.3s ease-in-out;
  --font-body-1: 18px;
  --font-body-2: 16px;
  --font-body-3: 14px;
  --font-body-4: 12px;
  /* По ТЗ: читаемость */
  --line-height-b1: 1.6;
  --line-height-b3: 1.2;
  --h1: 80px;
  --h2: 64px;
  --h3: 48px;
  --h4: 32px;
  --h5: 24px;
  --h6: 20px;

  /* ============================================
     DESIGN SYSTEM (ГЕОМЕТРИЯ / РАЗМЕРЫ)
     Цвета НЕ трогаем — только sizing/spacing/typography
     ============================================ */
  --ds-radius: 8px;
  --ds-control-h: 52px;     /* стандартная высота кнопок/инпутов */
  --ds-btn-px: 32px;        /* кнопки: горизонтальный padding */
  --ds-input-px: 16px;      /* инпуты: горизонтальный padding */
  --ds-container-max: 1440px;
  --ds-section-gap: 60px;
}

/* Базовые стили для названия сериала (применяются везде) */
.anime-title,
.anime-blog .anime-title,
.anime-blog h4.anime-title,
.anime-blog a .anime-title,
h4.anime-title,
p.anime-title {
  font-family: var(--font-secondary, "Poppins", sans-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Заголовки секций (Новинки, Популярные, Рекомендации) */
.heading.style-1 h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: var(--font-secondary, "Poppins", sans-serif) !important;
}

/* Ярлычки-фильтры (жанры, статусы, теги) - оригинальный стиль из app.css */
.text-box,
a.text-box,
p.text-box {
  display: inline-block !important;
  padding: 0px 10px !important;
  border: 2px solid var(--color-medium-grey) !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  margin-right: 10px !important;
  color: var(--color-medium-grey) !important;
  margin-bottom: 20px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.text-box.active,
a.text-box.active,
p.text-box.active {
  color: var(--color-black) !important;
  background: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

.text-box:hover,
a.text-box:hover,
p.text-box:hover {
  color: var(--color-black) !important;
  background: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

/* Вкладки каталога (Рекомендации / Новинки / Популярные / Все) */
.catalog-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}

.catalog-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.catalog-tab:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.catalog-tab.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
}

/* Переключатель вида каталога (плитка/список) */
.view-switcher-link {
  font-size: 22px !important;
  color: #666 !important;
  transition: 0.3s !important;
  margin: 0 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.view-switcher-link:hover {
  color: #fff !important;
}

.view-switcher-link.active {
  color: var(--color-primary) !important;
}

/* Расписание - затемненный фон для панельки с днями недели (для всех тем) */
.schedule-box .card-header,
.schedule-box .card-header-tabs,
.schedule-box .nav-tabs {
  background: rgba(0, 0, 0, 0.6) !important; /* Затемненный фон */
  backdrop-filter: blur(10px) !important; /* Размытие для лучшей читаемости */
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 15px !important;
  margin-bottom: 0 !important;
}

/* Переопределяем стили из app.css для элементов с классом anime-title */
.anime-blog a p.anime-title,
.anime-blog a h4.anime-title,
.anime-blog .anime-title,
.anime-blog h4.anime-title {
  font-size: 26px !important; /* Переопределяем app.css */
}

/* Reset Styles */
html { font-size: 16px; }

a {
  display: inline-block;
  text-decoration: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: unset;
  letter-spacing: 0;
}

span {
  display: inline-block;
  letter-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul.list-style,
ol.list-style {
  margin: -10px 0;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

section:after {
  content: '';
  display: block;
  clear: both;
}

/* Table */
table {
  border-collapse: unset;
}

table td {
  border: 0;
  position: relative;
}

/* Typography - структура без цветов */
body {
  font-family: var(--font-primary);
  font-size: var(--font-body-2);
  line-height: var(--line-height-b1);
  font-weight: 400;
  letter-spacing: 0;
  height: 100%;
  /* Важно для мобилок: убираем “пустое место справа” и горизонтальную прокрутку страницы */
  overflow-x: hidden;
}

/* Дополнительная защита от горизонтального overflow (часто появляется из-за 100vw/transform/slider) */
html {
  overflow-x: hidden;
}

#main-wrapper {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
address, p, pre, blockquote, table, hr {
  margin: 0 0 10px 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-Noir-Pro-Bold, "Noir Pro Bold");
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--line-height-b3);
}

/* По ТЗ: “воздух” под заголовками */
/* DESIGN SYSTEM: Заголовки (H1-H3) */
h1 {
  font-size: clamp(2rem, 1.2vw + 1.8rem, 2.5rem); /* desktop 2.5rem, mobile 2rem */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 24px;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Применяем шрифт Noir Pro ко всему тексту */
p, span, a, li, td, th, div, label, input, textarea, select, button {
  font-family: var(--font-primary, "Noir Pro");
}

p {
  font-size: var(--font-body-2);
  line-height: var(--line-height-b1);
  margin: 0 0 10px 0;
  letter-spacing: 0;
}

/* Text utilities */
.text-small { font-size: 14px; line-height: 1.6; }
.text-tiny {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.body-font1 { font-size: var(--font-body-1); line-height: var(--line-height-b1); }
.body-font2 { font-size: var(--font-body-2); line-height: var(--line-height-b1); }
.body-font3 { font-size: var(--font-body-3); line-height: var(--line-height-b3); }
.body-font4 { font-size: var(--font-body-4); line-height: var(--line-height-b3); }

/* Forms - структура без цветов */
input, .form-control, select, textarea {
  border: none;
  border-radius: var(--ds-radius);
  padding: 0 var(--ds-input-px);
  font-weight: 400;
  font-size: 16px; /* важно: не зумит на мобилках */
  width: 100%;
  min-height: var(--ds-control-h);
}

input:focus, .form-control:focus {
  outline: none;
  box-shadow: none;
}

input { height: var(--ds-control-h); }
input[type='checkbox'] { height: auto; width: auto; }
input[type='radio'] { height: auto; width: auto; }

textarea {
  min-height: calc(var(--ds-control-h) * 2);
  padding: 12px var(--ds-input-px);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* Buttons - структура без цветов */
.anime-btn {
  border-radius: 10px;
  font-weight: 500;
  height: auto;
  text-align: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  z-index: 1;
  border-right: none;
}

.anime-btn2 {
  border-radius: 10px;
  background-color: transparent;
  padding: 10px 20px; /* Увеличено для кнопки профиля */
  overflow: hidden;
  position: relative;
  font-size: 16px; /* Немного уменьшено для читаемости */
  line-height: 100%;
  font-weight: 600; /* Пожирнее */
  text-transform: uppercase;
  transition: 300ms ease;
}

/* DESIGN SYSTEM: единая геометрия интерактивных элементов (без цветов) */
.btn-main,
.anime-btn2,
.anime-btn,
.category-mode-btn {
  min-height: var(--ds-control-h);
  border-radius: var(--ds-radius);
  padding-left: var(--ds-btn-px);
  padding-right: var(--ds-btn-px);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-main:hover,
.anime-btn2:hover,
.anime-btn:hover,
.category-mode-btn:hover {
  transform: translateY(-2px);
}

/* Icon sizing/alignment */
i[class^="fa"],
i[class*=" fa-"],
svg {
  vertical-align: middle;
}

.anime-btn2::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: 100%;
  left: 0;
  transition: 500ms ease;
}

.anime-btn2:hover::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cards - структура без цветов */
.card {
  border-radius: 10px;
  overflow: hidden;
}

.card-body {
  padding: 20px;
}

/* Helper Classes - структура */
.sec-mar { margin: var(--ds-section-gap) 0; }
.sec-pad { padding: 50px 0; }

/* Public pages: reduce huge gap under header.
   Many pages start with a `.sec-mar` section, which makes too much empty space. */
.main-content > section.sec-mar:first-child {
  margin-top: 16px;
}

@media only screen and (max-width: 992px) {
  .sec-mar { margin: 40px 0; }
  .main-content > section.sec-mar:first-child {
    margin-top: 10px;
  }
}

/* Container sizing/padding (bootstrap override) */
.container {
  max-width: var(--ds-container-max);
  padding-left: 20px;
  padding-right: 20px;
}

/* Dropdown - структура */
.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  padding: 10px;
  border-radius: 15px;
}

/* Text Box - структура */
a.text-box,
p.text-box {
  display: inline-block;
  padding: 0px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  margin-right: 10px;
  margin-bottom: 20px;
}

/* Preloader - структура */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#preloader img {
  width: clamp(250px, 52.083vw, 1550px);
}

/* Back To Top - структура */
.back-to-top {
  position: fixed;
  bottom: -40px;
  right: 40px;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9991;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.back-to-top.show {
  bottom: 40px;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.back-to-top.show:hover {
  bottom: 50px;
}

/* Адаптивность */
@media only screen and (max-width: 575px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  
  .back-to-top.show {
    bottom: 10px;
    right: 10px;
  }
  
  .back-to-top.show:hover {
    bottom: 10px;
  }
}



/* Public pages: reduce huge gap under header.
   Many pages start with a `.sec-mar` section, which makes too much empty space. */
.main-content > section.sec-mar:first-child {
  margin-top: 16px;
}

@media only screen and (max-width: 992px) {
  .sec-mar { margin: 40px 0; }
  .main-content > section.sec-mar:first-child {
    margin-top: 10px;
  }
}

/* Container sizing/padding (bootstrap override) */
.container {
  max-width: var(--ds-container-max);
  padding-left: 20px;
  padding-right: 20px;
}

/* Dropdown - структура */
.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  padding: 10px;
  border-radius: 15px;
}

/* Text Box - структура */
a.text-box,
p.text-box {
  display: inline-block;
  padding: 0px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  margin-right: 10px;
  margin-bottom: 20px;
}

/* Preloader - структура */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#preloader img {
  width: clamp(250px, 52.083vw, 1550px);
}

/* Back To Top - структура */
.back-to-top {
  position: fixed;
  bottom: -40px;
  right: 40px;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9991;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.back-to-top.show {
  bottom: 40px;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.back-to-top.show:hover {
  bottom: 50px;
}

/* Адаптивность */
@media only screen and (max-width: 575px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  
  .back-to-top.show {
    bottom: 10px;
    right: 10px;
  }
  
  .back-to-top.show:hover {
    bottom: 10px;
  }
}