/* ------------------------------------------------------------------
   ELENTIS — статическая копия главной страницы.
   Этот файл заменяет поведение React/JS чистым CSS:
   бургер-меню, FAQ-аккордеон, переключатель тарифных периодов,
   карусель отзывов, выбор моделей и рейтинг в форме отзыва.
   Подключается ПОСЛЕ assets/app.css.
   ------------------------------------------------------------------ */

/* --- скрытые переключатели (radio/checkbox) ----------------------- */
.static-toggle {
  position: absolute !important;
  width: 1px !important;
  min-height: 0 !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
  pointer-events: none;
}

label[for] {
  cursor: pointer;
}

/* --- ссылки, которые в SPA были кнопками -------------------------- */
a.home-primary-button,
a.home-login-button,
a.home-dark-button,
a.pricing-subscribe,
a.home-mobile-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

a.home-primary-button--wide,
a.pricing-subscribe,
a.home-mobile-menu__button {
  display: flex;
  width: 100%;
}

/* --- шапка: бургер-меню без JS ------------------------------------ */
.home-header .home-menu-button .static-icon-close {
  display: none;
}

#nav-toggle:checked ~ .home-header__inner .home-menu-button .static-icon-menu {
  display: none;
}

#nav-toggle:checked ~ .home-header__inner .home-menu-button .static-icon-close {
  display: block;
}

.home-header .home-mobile-menu {
  display: none;
}

#nav-toggle:checked ~ .home-mobile-menu {
  display: block;
}

@media (min-width: 901px) {
  .home-header .home-mobile-menu {
    display: none !important;
  }
}

/* --- выбор AI-моделей: подсветка отмеченных ----------------------- */
.home-model:has(input:checked) {
  background: #263549;
  color: #ffffff;
}

.home-model:has(input:checked) svg {
  color: #ffffff;
}

/* --- FAQ-аккордеон ------------------------------------------------ */
.home-faq-item .home-faq-answer {
  display: none;
}

.home-faq-item .static-toggle:checked ~ .home-faq-answer {
  display: block;
}

.home-faq-item .static-toggle:checked ~ .home-faq-question svg {
  transform: rotate(180deg);
}

/* --- тарифы: переключатель периодов ------------------------------- */
.pricing-shell .pricing-price {
  display: none;
}

#per-1:checked ~ .pricing-grid .pricing-price[data-period="1"],
#per-2:checked ~ .pricing-grid .pricing-price[data-period="2"],
#per-3:checked ~ .pricing-grid .pricing-price[data-period="3"],
#per-4:checked ~ .pricing-grid .pricing-price[data-period="4"],
#per-5:checked ~ .pricing-grid .pricing-price[data-period="5"] {
  display: flex;
}

#per-1:checked ~ .pricing-periods label[for="per-1"],
#per-2:checked ~ .pricing-periods label[for="per-2"],
#per-3:checked ~ .pricing-periods label[for="per-3"],
#per-4:checked ~ .pricing-periods label[for="per-4"],
#per-5:checked ~ .pricing-periods label[for="per-5"] {
  background: #ffffff;
  color: #10141b;
}

/* --- карусель отзывов --------------------------------------------- */
.static-slider .slick-list {
  overflow: hidden;
}

.static-slider .slick-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.5s ease;
}

.static-slider .home-review-slide {
  flex: 0 0 50%;
  max-width: 50%;
}

#rev-p1:checked ~ .slick-slider .slick-track {
  transform: translateX(0);
}

#rev-p2:checked ~ .slick-slider .slick-track {
  transform: translateX(-100%);
}

.static-slider .home-review-arrow[data-page] {
  display: none !important;
}

#rev-p1:checked ~ .home-review-arrow[data-page="1"],
#rev-p2:checked ~ .home-review-arrow[data-page="2"] {
  display: flex !important;
}

@media (max-width: 700px) {
  .static-slider .slick-list {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .static-slider .slick-track {
    transform: none !important;
  }

  .static-slider .home-review-slide {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
  }

  .static-slider .home-review-arrow[data-page] {
    display: none !important;
  }
}

/* --- форма отзыва: звёзды рейтинга -------------------------------- */
.home-review-form__rating .static-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(104, 197, 255, 0.28);
}

.home-review-form__rating .static-star:hover {
  color: #68c5ff;
}

#rate-1:checked ~ .home-review-form__rating .static-star[data-value="1"],
#rate-2:checked ~ .home-review-form__rating .static-star[data-value="1"],
#rate-2:checked ~ .home-review-form__rating .static-star[data-value="2"],
#rate-3:checked ~ .home-review-form__rating .static-star[data-value="1"],
#rate-3:checked ~ .home-review-form__rating .static-star[data-value="2"],
#rate-3:checked ~ .home-review-form__rating .static-star[data-value="3"],
#rate-4:checked ~ .home-review-form__rating .static-star[data-value="1"],
#rate-4:checked ~ .home-review-form__rating .static-star[data-value="2"],
#rate-4:checked ~ .home-review-form__rating .static-star[data-value="3"],
#rate-4:checked ~ .home-review-form__rating .static-star[data-value="4"],
#rate-5:checked ~ .home-review-form__rating .static-star[data-value="1"],
#rate-5:checked ~ .home-review-form__rating .static-star[data-value="2"],
#rate-5:checked ~ .home-review-form__rating .static-star[data-value="3"],
#rate-5:checked ~ .home-review-form__rating .static-star[data-value="4"],
#rate-5:checked ~ .home-review-form__rating .static-star[data-value="5"] {
  color: #68c5ff;
}

/* --- прочее ------------------------------------------------------- */
/* без JS AOS не инициализируется, поэтому data-aos не используется —
   содержимое видно сразу, дополнительных правил не требуется */