/* ============================================
   style.css — новый дизайн отеля «Звёздное небо»
   МИНИМАЛИЗМ: Белый + Золото
   ============================================ */

/* Плавные переходы и анимации */
/* Шрифты Playfair Display и Lato подключаются в <head> каждой страницы (так быстрее, чем @import) */

/* ---------- CSS переменные (переиспользуемые цвета) ---------- */
:root {
  --primary-gold: #d4af37;
  --light-gold: #f0e68c;
  --dark-gold: #b8941f;
  --white: #ffffff;
  --light-gray: #f8f8f8;
  --dark-gray: #333333;
  --text-gray: #555555;
  --on-gold: #ffffff;   /* цвет текста на золотых кнопках — не зависит от темы */
}

/* Атрибут hidden всегда прячет элемент (иначе display:flex у блоков его перебивал — пустая рамка расчёта стоимости была видна всегда) */
[hidden] { display: none !important; }

/* ---------- Вся страница ---------- */
body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  background-color: var(--white);
  color: var(--text-gray);
  line-height: 1.7;
}

/* ---------- Шапка сайта ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: var(--white);
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--primary-gold);
  letter-spacing: 1px;
  font-weight: 700;
}

nav {
  display: flex;
  gap: 32px;
}

nav a {
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
}

nav a:hover,
nav a.active {
  color: var(--primary-gold);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-gold);
  transition: width 0.3s;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

.phone {
  color: var(--primary-gold);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Ссылки ---------- */
a {
  color: var(--primary-gold);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--dark-gold);
}

/* ---------- Заголовки ---------- */
h1 {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  color: var(--dark-gray);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1px;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: var(--dark-gray);
  margin: 40px 0 20px;
  letter-spacing: -0.5px;
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--dark-gray);
  margin: 20px 0 12px;
}

/* ---------- Герой (первый экран) ---------- */
.hero {
  padding: 60px 40px;
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInDown 0.8s ease;
}

.hero h1 {
  margin-bottom: 16px;
  font-size: 72px;
}

.hero p {
  font-size: 18px;
  color: var(--text-gray);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.hero img {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-top: 32px;
  animation: fadeInUp 1s ease 0.3s backwards;
  object-fit: cover;
}

/* ---------- Кнопка основная ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--primary-gold) 0%, var(--dark-gold) 100%);
  color: var(--on-gold);
  font-weight: 700;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  min-height: 44px;
}

.btn::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
  z-index: 0;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover,
.btn:focus {
  color: var(--on-gold);   /* без этого текст становился золотым на золотом и «пропадал» */
  background: linear-gradient(135deg, var(--dark-gold) 0%, var(--primary-gold) 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
  border-color: rgba(212, 175, 55, 0.5);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.btn span {
  position: relative;
  z-index: 1;
}

.btn-large {
  padding: 16px 48px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
}

/* ---------- Секции ---------- */
section {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Герой — БЕЗ анимации (фото должна быть видна сразу) */
.hero {
  opacity: 1;
}

/* Другие секции — С анимацией при скролле */
section:not(.hero) {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

section:nth-child(3) { animation-delay: 0.2s; }
section:nth-child(4) { animation-delay: 0.4s; }
section:nth-child(5) { animation-delay: 0.6s; }

.rooms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.card {
  background-color: var(--light-gray);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Золотая полоска, которая заполняется за 2 секунды наведения */
.card {
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background-color: var(--primary-gold);
  z-index: 2;
}

.card.hovering::before {
  width: 100%;
  transition: width 1.1s linear;
}

.card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body h3 {
  margin: 0 0 12px;
  font-size: 24px;
  color: var(--dark-gray);
}

.card-body p {
  margin: 8px 0;
  color: var(--text-gray);
  font-size: 15px;
}

.amenities {
  display: flex;
  gap: 12px;
  margin: 16px 0 20px;
  font-size: 22px;
  flex-wrap: wrap;
}

.amenities span {
  cursor: pointer;
  transition: transform 0.2s;
  display: inline-block;
}

.amenities span:hover {
  transform: scale(1.3) rotate(10deg);
}

.count {
  font-size: 12px;
  color: #999;
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.price {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-gold);
  margin: 16px 0 12px;
}

.price span {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-gray);
}

/* ---------- УРОК 7: Красивые кнопки выбора мессенджера (Вариант 2) ---------- */

.channel-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 15px;
}

.messenger-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 24px;
}

.messenger-card {
  position: relative;
  cursor: pointer;
}

.messenger-card input[type="radio"] {
  display: none;
}

.messenger-card-content {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  background-color: var(--white);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  position: relative;
}

.messenger-card input[type="radio"]:checked + .messenger-card-content {
  border-color: var(--primary-gold);
  background-color: rgba(212, 175, 55, 0.08);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
  transform: translateY(-4px);
}

.messenger-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
  transition: transform 0.3s;
}

.messenger-card input[type="radio"]:checked + .messenger-card-content .messenger-icon {
  transform: scale(1.2) rotate(5deg);
}

.messenger-name {
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 6px;
  font-size: 16px;
}

.messenger-desc {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.messenger-checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background-color: var(--primary-gold);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.messenger-card input[type="radio"]:checked + .messenger-card-content .messenger-checkmark {
  display: flex;
}

/* ---------- Форма бронирования ---------- */
.booking-form {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 32px;
  margin: 40px 0;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: var(--white);
  color: var(--dark-gray);
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  background-color: #fafafa;
}

.form-group input::placeholder {
  color: #bbb;
}

/* ---------- Разделитель ---------- */
.section-divider {
  margin: 40px 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* ---------- Картинки ---------- */
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ---------- Список ---------- */
ul {
  list-style: none;
  padding: 0;
}

ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
  color: var(--text-gray);
  line-height: 1.6;
}

ul li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-gold);
  font-weight: 700;
}

/* ---------- Анимации при скролле ---------- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Анимация при скролле */
.scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== МОДАЛЬНОЕ ОКНО ДЛЯ НОМЕРОВ ========== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: var(--white);
  padding: 40px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
  margin-top: 0;
  color: var(--primary-gold);
}

.close-btn {
  float: right;
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-gold);
  cursor: pointer;
  transition: color 0.3s;
}

.close-btn:hover {
  color: var(--dark-gold);
}

/* ========== НОВЫЕ ЭЛЕМЕНТЫ ДЛЯ МНОГОСТРАНИЧНОГО САЙТА ========== */

/* Галерея фотографий */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

.room-section {
  padding: 32px 0;
  border-bottom: 1px solid #eee;
}

.room-section:last-child {
  border-bottom: none;
}

/* FAQ */
.faq-item {
  padding: 24px;
  margin: 16px 0;
  background-color: var(--light-gray);
  border-radius: 8px;
  border-left: 4px solid var(--primary-gold);
}

.faq-item h3 {
  margin-top: 0;
  color: var(--primary-gold);
}

.faq-item p {
  margin-bottom: 0;
}

/* Карточки услуг */
.service-card {
  background-color: var(--light-gray);
  padding: 28px;
  margin: 20px 0;
  border-radius: 8px;
  border-top: 4px solid var(--primary-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.service-card h3 {
  margin-top: 0;
  color: var(--dark-gray);
  font-size: 20px;
}

/* Карточки маршрутов */
.direction-card {
  background-color: var(--light-gray);
  padding: 24px;
  margin: 16px 0;
  border-radius: 8px;
  border-left: 4px solid var(--primary-gold);
}

.direction-card h4 {
  margin: 0 0 12px;
  color: var(--primary-gold);
  font-size: 18px;
}

.direction-card p {
  margin: 0;
  color: var(--text-gray);
}

/* Карточки отзывов */
.review-card {
  background-color: var(--light-gray);
  padding: 28px;
  margin: 24px 0;
  border-radius: 8px;
  border-left: 4px solid var(--primary-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.review-stars {
  color: var(--primary-gold);
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.review-card h4 {
  margin: 12px 0 8px;
  color: var(--dark-gray);
  font-size: 18px;
}

.review-text {
  margin: 8px 0;
  color: var(--text-gray);
  line-height: 1.6;
  font-style: italic;
}

.review-author {
  margin: 12px 0 0;
  color: #999;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Мобильная версия ---------- */
@media (max-width: 768px) {
  header {
    padding: 14px 20px;
  }

  .logo {
    font-size: 20px;
  }

  .hero {
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero p {
    font-size: 16px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 22px;
  }

  section {
    padding: 40px 20px;
  }

  .rooms {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .booking-form {
    padding: 24px;
  }

  .messenger-options {
    grid-template-columns: 1fr;
  }

  .messenger-card-content {
    min-height: 120px;
    padding: 16px;
  }

  .messenger-icon {
    font-size: 40px;
  }
}

/* Подсказка под кнопкой «Отправить запрос» */
.form-notice {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  background-color: rgba(212, 175, 55, 0.1);
  border-left: 4px solid var(--primary-gold);
  color: var(--dark-gray);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================
   МЕНЮ-«БУРГЕР» (☰) ДЛЯ ТЕЛЕФОНОВ И ПЛАНШЕТОВ
   ============================================ */

/* На компьютере кнопка спрятана */
.burger {
  display: none;
}

@media (max-width: 1150px) {
  header {
    gap: 16px;
  }

  .logo  { order: 0; margin-right: auto; }
  .phone { order: 1; }

  /* Кнопка из трёх полосок */
  .burger {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .burger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--primary-gold);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  /* Полоски превращаются в крестик ✕ */
  .burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Само меню — выпадает под шапкой */
  header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--white);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #f0f0f0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, visibility 0.35s;
  }

  header nav.open {
    max-height: 80vh;
    overflow-y: auto;
    visibility: visible;
  }

  header nav a {
    padding: 14px 24px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 16px;
  }

  /* Активную страницу отмечаем золотой полоской слева, а не подчёркиванием */
  header nav a::after { display: none; }

  header nav a.active {
    border-left: 4px solid var(--primary-gold);
    padding-left: 20px;
    background-color: rgba(212, 175, 55, 0.06);
  }
}

/* На совсем узких экранах номер телефона показываем значком */
@media (max-width: 480px) {
  .logo { font-size: 18px; }

  .phone {
    font-size: 0;            /* прячем текст номера */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 6px;
  }

  .phone::before {
    content: '📞';
    font-size: 20px;
  }
}

/* Расчёт стоимости в форме */
.price-calc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 24px;
  padding: 16px 20px;
  background-color: var(--white);
  border: 2px solid var(--primary-gold);
  border-radius: 8px;
  color: var(--text-gray);
  font-size: 15px;
}

.price-calc strong {
  font-size: 24px;
  color: var(--primary-gold);
}

/* Подсказка «С возвращением» в форме бронирования */
.welcome-back {
  margin-bottom: 24px;
  padding: 18px 20px;
  background-color: var(--white);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-left: 4px solid var(--primary-gold);
  border-radius: 8px;
}

.welcome-back p {
  margin: 0 0 14px;
  color: var(--dark-gray);
  font-size: 15px;
}

.welcome-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.welcome-actions .btn {
  padding: 10px 20px;
  font-size: 14px;
  min-height: 40px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #999;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.link-btn:hover {
  color: var(--dark-gray);
}

/* Невидимое поле-ловушка для спам-роботов */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* ================================================================
   ВАУ-ЭФФЕКТЫ И ДЕТАЛИ (работают вместе с effects.js)
   ================================================================ */

html { scroll-behavior: smooth; }
section { scroll-margin-top: 90px; }

::selection { background: rgba(212, 175, 55, 0.3); color: var(--dark-gray); }

/* Тонкая золотая полоса прокрутки (Chrome, Edge) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #faf8f2; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--light-gold), var(--primary-gold)); border-radius: 10px; border: 2px solid #faf8f2; }

/* Плавное появление и уход страницы */
body { animation: pageIn 0.6s ease both; }
body.page-leave { opacity: 0; transition: opacity 0.28s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ШАПКА: стекло, звезда, прогресс ---------- */
header {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  box-shadow: none;
  gap: 24px;
  transition: padding 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

header.scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--light-gold), var(--primary-gold), var(--dark-gold));
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  pointer-events: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.logo-star {
  width: 22px;
  height: 22px;
  fill: var(--primary-gold);
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
  animation: twinkle 3.2s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
  flex-shrink: 0;
}

.logo:hover .logo-star { transform: rotate(180deg) scale(1.25); }

.logo-text {
  background: linear-gradient(90deg, var(--dark-gold) 0%, var(--primary-gold) 35%, #fff3c4 50%, var(--primary-gold) 65%, var(--dark-gold) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  45%      { opacity: 0.55; transform: scale(0.82) rotate(20deg); }
  55%      { opacity: 1; transform: scale(1.12) rotate(45deg); }
}

@keyframes shimmer {
  from { background-position: 125% 0; }
  to   { background-position: -125% 0; }
}

/* Пункты меню: линия растёт из центра, у активной — звёздочка */
nav { gap: 26px; }
nav a::after { left: 50%; transform: translateX(-50%); }
nav a.active::before {
  content: '✦';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--primary-gold);
  animation: twinkle 2.6s ease-in-out infinite;
}

/* Кнопка «Забронировать» в шапке */
.header-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1.5px solid var(--primary-gold);
  border-radius: 999px;
  color: var(--dark-gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.header-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: ctaShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

.header-cta:hover {
  background-color: var(--primary-gold);
  color: var(--on-gold);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

@keyframes ctaShine {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */
.hero {
  position: relative;
  max-width: none;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%);
}

.hero > *:not(.hero-stars) { position: relative; z-index: 1; }

.hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) rotateX(45deg);
  animation: wordIn 0.9s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes wordIn {
  to { opacity: 1; transform: none; }
}

.hero h1::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
  animation: lineGrow 1.2s 0.7s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes lineGrow { to { width: 180px; } }

.hero img { will-change: transform; }

/* ---------- ЗАГОЛОВКИ РАЗДЕЛОВ: звёздочка и золотая черта ---------- */
section:not(.hero) > h2 { position: relative; }

section:not(.hero) > h2::before {
  content: '✦';
  display: block;
  font-size: 15px;
  color: var(--primary-gold);
  margin-bottom: 6px;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.7s 0.2s cubic-bezier(.2, .8, .2, 1.4);
}

section:not(.hero) > h2::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--primary-gold), transparent);
  transition: width 0.9s 0.3s ease;
}

.scroll-fade.visible > h2::before { transform: scale(1) rotate(0); }
.scroll-fade.visible > h2::after  { width: 90px; }

/* ---------- КАРТОЧКИ ---------- */
.card img { transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.card:hover img { transform: scale(1.07); }

.review-card,
.service-card { position: relative; overflow: hidden; }

.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: soft-light;
  transition: background 0.2s;
}

/* Появление по очереди */
.stagger {
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s;
}

.stagger.in { opacity: 1; transform: none; }

/* Во время наклона карточка должна откликаться мгновенно */
.tilt.in:hover { transition: transform 0.12s ease-out, box-shadow 0.3s; }
.tilt:hover { box-shadow: 0 22px 44px rgba(0, 0, 0, 0.14); }

/* Звёзды в отзывах переливаются */
.review-stars {
  background: linear-gradient(90deg, var(--primary-gold) 40%, #fff3c4 50%, var(--primary-gold) 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ---------- ИСКРЫ ЗА КУРСОРОМ ---------- */
.cursor-spark {
  position: fixed;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, #fff3c4 0%, var(--primary-gold) 60%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  transform: translate(-50%, -50%);
  animation: spark 0.9s ease-out forwards;
}

@keyframes spark {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(120deg) scale(0.2);
  }
}

/* ---------- ВОЛНА ОТ НАЖАТИЯ ---------- */
.btn .ripple, .header-cta .ripple, .ripple {
  position: absolute !important;
  z-index: 0;
  display: block;
  max-width: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: ripple 0.65s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- КНОПКА «НАВЕРХ» ---------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(.2, .8, .2, 1.3);
}

.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); }
.to-top svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 2.5; }
.to-top .ring-bg { stroke: rgba(212, 175, 55, 0.18); }
.to-top .ring { stroke: var(--primary-gold); stroke-linecap: round; transition: stroke-dashoffset 0.1s; }
.to-top .arrow {
  fill: none;
  stroke: var(--dark-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transform-origin: 24px 24px;
}
.to-top:hover .arrow { animation: arrowBounce 0.8s ease infinite; }
@keyframes arrowBounce {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50%      { transform: rotate(90deg) translateX(-3px); }
}

/* ---------- ЦИФРЫ НА ГЛАВНОЙ ---------- */
.stats-section { padding-top: 10px; padding-bottom: 10px; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat {
  position: relative;
  text-align: center;
  padding: 28px 16px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf6, var(--white));
  border: 1px solid rgba(212, 175, 55, 0.18);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1.3), box-shadow 0.4s;
}

.stat:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(212, 175, 55, 0.15); }

.stat::before {
  content: '✦';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 11px;
  color: var(--primary-gold);
  opacity: 0.6;
  animation: twinkle 3s ease-in-out infinite;
}

.stat:nth-child(2)::before { animation-delay: 0.7s; }
.stat:nth-child(3)::before { animation-delay: 1.4s; }
.stat:nth-child(4)::before { animation-delay: 2.1s; }

.stat-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  line-height: 1.1;
  color: var(--primary-gold);
}

.stat-label { display: block; margin-top: 8px; font-size: 14px; color: var(--text-gray); }

/* ---------- ПОДВАЛ «НОЧНОЕ НЕБО» ---------- */
.site-footer {
  position: relative;
  margin-top: 80px;
  padding: 64px 40px 28px;
  color: rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff3c4 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 30%, #f0e68c 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 80%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 18%, #fff3c4 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 37% 88%, #f0e68c 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 86%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 50% 0%, #1d2550 0%, #0e1330 70%);
  overflow: hidden;
}

/* Плавный «закат» из белого в ночь */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

/* Луна */
.site-footer::after {
  content: '';
  position: absolute;
  top: 36px;
  right: 8%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset -12px 6px 0 0 #f5e6a8;
  filter: drop-shadow(0 0 14px rgba(245, 230, 168, 0.5));
  transform: rotate(-20deg);
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.site-footer .logo-text { font-family: 'Playfair Display', serif; font-size: 24px; }
.site-footer p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; }
.site-footer h4 { margin: 0 0 14px; color: var(--light-gold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

.site-footer a { color: rgba(255, 255, 255, 0.8); transition: color 0.25s, padding-left 0.25s; }
.site-footer a:hover { color: var(--light-gold); }

.footer-links { display: grid; gap: 8px; font-size: 14px; }
.footer-links a:hover { padding-left: 6px; }

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- ТЕЛЕФОНЫ И ПЛАНШЕТЫ ---------- */
@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-number { font-size: 34px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .site-footer { padding: 48px 20px 24px; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  nav a.active::before { display: none; }
}

@media (max-width: 560px) {
  .header-cta { display: none; }
}

/* ---------- ЕСЛИ В СИСТЕМЕ ВКЛЮЧЕНО «УМЕНЬШИТЬ ДВИЖЕНИЕ» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Пункты меню и телефон не переносятся на две строки */
nav a, .phone { white-space: nowrap; }

/* Ноутбуки: места мало — телефон в шапке показываем значком */
@media (min-width: 1151px) and (max-width: 1380px) {
  nav { gap: 20px; }
  header { gap: 18px; }
  .phone {
    font-size: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
  }
  .phone::before { content: '📞'; font-size: 17px; }
  .phone:hover { background-color: rgba(212, 175, 55, 0.12); transform: rotate(-12deg); }
}

/* Цена на карточке номера крупная и золотая (раньше её перебивал стиль абзацев) */
.card-body .price {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-gold);
}

/* Фото кухни в разделе «Удобства»: не шире экрана, с подписью и приближением */
.photo-frame {
  width: 100%;
  max-width: 480px;
  margin: 24px 0 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.photo-frame img {
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
}

.photo-frame:hover img { transform: scale(1.05); }

.photo-frame figcaption {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-gray);
  background: linear-gradient(180deg, #fffdf6, var(--white));
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

/* ================================================================
   УСКОРЕНИЕ: убираем постоянную перерисовку
   ================================================================ */

/* Блик по названию — один раз при загрузке и при наведении, а не постоянно.
   (Постоянная анимация заставляла шапку с размытием перерисовываться каждый кадр.) */
.logo-text { animation: shimmer 2.2s ease-out 0.4s 1 both; }
.logo:hover .logo-text { animation: shimmer 1.4s ease-out 1; }

/* Звёзды в отзывах переливаются только при наведении на отзыв */
.review-stars { animation: none; background-position: 0 0; }
.review-card:hover .review-stars { animation: shimmer 1.6s ease-out 1; }

/* Мерцающим звёздочкам — отдельный слой, чтобы не перерисовывать соседей */
.logo-star, nav a.active::before, .stat::before, .header-cta::before { will-change: transform, opacity; }

/* Размытие под шапкой — полегче */
header {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Блик в карточке — без дорогого режима наложения */
.tilt-glare { mix-blend-mode: normal; }

/* На телефонах размытие под шапкой не нужно — просто почти белый фон */
@media (max-width: 1150px) {
  header,
  .to-top {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.96);
  }
}

/* Во время прокрутки мерцания замирают */
.is-scrolling .logo-star,
.is-scrolling .header-cta::before { animation-play-state: paused; }

/* Звёздочка у активного пункта меню — просто светится, без постоянной анимации */
nav a.active::before { animation: none; text-shadow: 0 0 6px rgba(212, 175, 55, 0.7); }

/* Звёздочки на карточках с цифрами мерцают только при наведении */
.stat::before { animation: none; }
.stat:hover::before { animation: twinkle 1.6s ease-in-out infinite; }

/* Холст для искр за курсором — поверх всего, но не мешает кликам */
.spark-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Согласие на обработку данных */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.consent input { width: 20px; height: 20px; min-width: 20px; margin-top: 1px; accent-color: var(--primary-gold); cursor: pointer; }
.consent a { text-decoration: underline; }

/* Фото на первом экране не заезжает на кнопку */
.hero img { will-change: auto; transform: none !important; position: relative; z-index: 0; max-width: 900px; }
.hero .btn { position: relative; z-index: 2; }


/* ===================================================== */
/* Идеи из дизайна GitHub                                 */
/* ===================================================== */

/* 1. Быстрая проверка дат на первом экране */
.quick-book {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 8px auto 40px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.qb-field { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 170px; text-align: left; }
.qb-field span { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #8a7a4a; margin: 0 0 4px 4px; }
.qb-field input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #e3dccb;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--dark-gray);
}
.qb-field input:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
.quick-book .qb-btn { flex: 1 1 220px; height: 48px; min-height: 48px; border-radius: 10px; padding: 0 20px; font-size: 15px; }
@media (max-width: 600px) {
  .quick-book { margin-bottom: 28px; }
  .qb-field, .quick-book .qb-btn { flex-basis: 100%; }
}

/* 2. Главное фото в светящейся рамке */
.glow-frame {
  position: relative;
  max-width: 900px;
  margin: 24px auto 0;
  padding: 6px;
  border-radius: 16px;
}
.glow-frame::after {                  /* тонкая переливающаяся рамка */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(212, 175, 55, 0.95), rgba(255, 255, 255, 0.7) 45%, rgba(150, 120, 230, 0.6));
  pointer-events: none;
}
.glow-frame::before {                 /* мягкое свечение за фото, как у GitHub */
  content: '';
  position: absolute;
  inset: -50px -70px;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 55%, rgba(212, 175, 55, 0.45), transparent),
    radial-gradient(closest-side at 75% 45%, rgba(140, 110, 230, 0.30), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.hero .glow-frame img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 11px;
  box-shadow: none;
}
@media (max-width: 600px) {
  .glow-frame { padding: 4px; border-radius: 12px; }
  .glow-frame::before { inset: -24px -16px; filter: blur(20px); }
  .hero .glow-frame img { border-radius: 9px; }
}

/* 3. Текст в два тона */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 40px;
  margin: 24px 0 32px;
}
.feature { margin: 0; font-size: 18px; line-height: 1.5; color: #8b8b8b; }
.feature strong { color: var(--dark-gray); font-weight: 700; }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }

/* ===================================================== */
/* ТЁМНАЯ ТЕМА — «ночное небо»                            */
/* ===================================================== */
html[data-theme="dark"] {
  color-scheme: dark;                 /* календарь выбора даты и полосы прокрутки тоже становятся тёмными */
  --white: #0e1018;
  --light-gray: #171a27;
  --dark-gray: #f4efe2;
  --text-gray: #bcb8ad;
  --light-gold: #f0d87a;
}

html[data-theme="dark"] body { background-color: #0e1018; }

/* Шапка */
html[data-theme="dark"] header { background-color: rgba(14, 16, 24, 0.78); border-bottom-color: rgba(212, 175, 55, 0.22); }
html[data-theme="dark"] header.scrolled { background-color: rgba(14, 16, 24, 0.92); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .header-cta { color: var(--light-gold); }
html[data-theme="dark"] .header-cta::before { background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); }
html[data-theme="dark"] .logo-text { background: linear-gradient(90deg, #d4af37 0%, #f5e08a 35%, #fff3c4 50%, #f5e08a 65%, #d4af37 100%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .phone::before { filter: none; }
html[data-theme="dark"] .burger { border-color: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] header nav { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] header nav a { border-bottom-color: rgba(255, 255, 255, 0.06); }

/* Первый экран и фон секций */
html[data-theme="dark"] .hero { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 175, 55, 0.14), transparent 70%); }
html[data-theme="dark"] .stats-section,
html[data-theme="dark"] .site-footer + * { background: none; }
html[data-theme="dark"] .quick-book { background: rgba(23, 26, 39, 0.85); border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .qb-field span { color: #cdb877; }
html[data-theme="dark"] .qb-field input { background: #0e1018; border-color: rgba(255, 255, 255, 0.14); color: var(--dark-gray); }
html[data-theme="dark"] .glow-frame::after { background: linear-gradient(140deg, rgba(212, 175, 55, 0.95), rgba(255, 255, 255, 0.25) 45%, rgba(150, 120, 230, 0.7)); }
html[data-theme="dark"] .glow-frame { box-shadow: 0 0 40px rgba(212, 175, 55, 0.3), 0 0 110px rgba(212, 175, 55, 0.2), -60px 30px 160px rgba(240, 200, 90, 0.2), 70px -20px 170px rgba(150, 120, 230, 0.3); }

/* Карточки, формы, модальное окно */
html[data-theme="dark"] .card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .photo-frame { background-color: #171a27; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .photo-frame figcaption { background: #171a27; color: var(--text-gray); }
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea { background-color: #0e1018; border-color: rgba(255, 255, 255, 0.16); color: var(--dark-gray); }
html[data-theme="dark"] .form-group input::placeholder { color: #7d7a72; }
html[data-theme="dark"] .messenger-card-content { background-color: #171a27; border-color: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .price-calc,
html[data-theme="dark"] .welcome-back,
html[data-theme="dark"] .booking-form { background-color: #171a27; }
html[data-theme="dark"] .form-notice { background-color: rgba(212, 175, 55, 0.12); color: var(--dark-gray); }
html[data-theme="dark"] section a:not(.btn):not(.header-cta) { color: var(--light-gold); }
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn:focus { color: #fff; }
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content { background-color: #171a27; color: var(--text-gray); border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .modal-close, html[data-theme="dark"] .close { color: var(--dark-gray); }

/* Тонкие линии и подписи */
html[data-theme="dark"] hr, html[data-theme="dark"] .section-divider { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] [style*="color:#999"], html[data-theme="dark"] [style*="color: #999"] { color: #8b8880 !important; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0e1018; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: #0e1018; }
html[data-theme="dark"] .to-top { background: rgba(23, 26, 39, 0.9); }
html[data-theme="dark"] .scroll-fade, html[data-theme="dark"] section { background-color: transparent; }

/* Страница «Доступность» */
html[data-theme="dark"] .av-dates,
html[data-theme="dark"] .av-card,
html[data-theme="dark"] .cal-block { background-color: #171a27; box-shadow: none; }
html[data-theme="dark"] .av-card h4, html[data-theme="dark"] .cal-block h4 { color: var(--dark-gray); }
html[data-theme="dark"] .av-hint, html[data-theme="dark"] .cal-count, html[data-theme="dark"] .cal-weekdays span { color: #8b8880; }
html[data-theme="dark"] .cal-nav button { background: #171a27; border-color: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .cal-past { color: #4d4f5c; }
html[data-theme="dark"] .cal-unknown { background-color: #232637; color: #8b8880; }
html[data-theme="dark"] .cal-free { color: #6fe0a0; }
html[data-theme="dark"] .cal-partial { color: #f0d060; }
html[data-theme="dark"] .cal-full { color: #ff8a7d; }
html[data-theme="dark"] .av-status-msg { background-color: rgba(231, 76, 60, 0.12); color: var(--text-gray); }
html[data-theme="dark"] .features .feature { color: #8f8c84; }
html[data-theme="dark"] .features .feature strong { color: var(--dark-gray); }

/* Тонкие разделители внутри карточек и блоков — приглушённые, не белые */
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-body *,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .service-card { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .count { border-top-color: rgba(255, 255, 255, 0.1); color: #8b8880; }
html[data-theme="dark"] .room-section { border-bottom-color: rgba(255, 255, 255, 0.1); }


/* Узкие экраны: шапка не должна сжимать кнопки (логотип, переключатель темы, телефон, бургер помещаются в ряд) */
.burger, .phone, .theme-toggle { flex-shrink: 0; }
@media (max-width: 480px) {
  header { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .logo { gap: 7px; }
  .logo-text { font-size: 19px; letter-spacing: 0.3px; }
  .logo-star { width: 19px; height: 19px; }
}
@media (max-width: 350px) {
  .logo-text { font-size: 16px; }
  .phone { width: 40px; height: 40px; }
  .burger { width: 40px; height: 40px; }
}
html[data-theme="dark"] .phone { border-color: rgba(255, 255, 255, 0.18); }


/* Пока идёт смена темы, декоративные анимации стоят на паузе — переход не лагает */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { animation-play-state: paused !important; }
html.theme-switching .spark-layer { display: none !important; }

/* ЛЁГКОЕ СВЕЧЕНИЕ: градиенты и так мягкие, поэтому тяжёлый blur-фильтр и тени на 170px не нужны —
   страница перерисовывается быстрее (это и убирает рывки при смене темы) */
.glow-frame { box-shadow: 0 0 46px rgba(212, 175, 55, 0.38); }
.glow-frame::before {
  inset: -130px -170px;
  filter: none;
  background:
    radial-gradient(closest-side at 24% 52%, rgba(225, 185, 60, 0.55), rgba(225, 185, 60, 0.22) 55%, transparent),
    radial-gradient(closest-side at 80% 42%, rgba(150, 115, 235, 0.42), rgba(150, 115, 235, 0.16) 55%, transparent);
  transform: translateZ(0);
}
html[data-theme="dark"] .glow-frame { box-shadow: 0 0 46px rgba(212, 175, 55, 0.3); }
html[data-theme="dark"] .glow-frame::before {
  background:
    radial-gradient(closest-side at 24% 52%, rgba(225, 185, 60, 0.38), rgba(225, 185, 60, 0.14) 55%, transparent),
    radial-gradient(closest-side at 80% 42%, rgba(150, 115, 235, 0.45), rgba(150, 115, 235, 0.16) 55%, transparent);
}
@media (max-width: 600px) {
  .glow-frame { box-shadow: 0 0 26px rgba(212, 175, 55, 0.38); }
  .glow-frame::before { inset: -50px -24px; }
  html[data-theme="dark"] .glow-frame { box-shadow: 0 0 26px rgba(212, 175, 55, 0.3); }
}

/* ===================================================== */
/* КНОПКА СМЕНЫ ТЕМЫ: солнце катится и становится луной   */
/* Всё — мягкие кривые, шаги идут внахлёст, без рывков     */
/* ===================================================== */
.theme-toggle {
  --ease: cubic-bezier(.65, 0, .35, 1);
  --soft: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f3ebd6;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 1.2s var(--soft), box-shadow 0.4s ease;
  view-transition-name: theme-toggle;          /* при смене темы кнопка остаётся «живой» поверх снимка страницы */
}
html[data-theme="dark"] .theme-toggle { background: #262a42; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.theme-toggle:hover { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), 0 0 0 3px rgba(212, 175, 55, 0.14); }
html[data-theme="dark"] .theme-toggle:hover { box-shadow: inset 0 0 0 1px rgba(240, 233, 214, 0.25), 0 0 0 3px rgba(240, 233, 214, 0.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 3px; }

/* Звёзды на ночной дорожке — появляются последними */
.theme-toggle .tstars { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff4cc; opacity: 0; transition: opacity 0.5s ease; }
html[data-theme="dark"] .theme-toggle .tstars { opacity: 0.85; transition: opacity 0.9s ease 0.7s; }

/* Кружок: едет и одновременно перекатывается (как шар) */
.theme-toggle .knob {
  --x: 0px;
  --rot: -150deg;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  transform: translateX(var(--x)) rotate(var(--rot));
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
html[data-theme="dark"] .theme-toggle .knob { --x: 24px; --rot: 0deg; }

/* Лучи солнца: днём видны и медленно поворачиваются при наведении, к ночи втягиваются в диск */
.theme-toggle .rays {
  position: absolute;
  left: -5px; top: -5px;
  width: 30px; height: 30px;
  fill: none;
  stroke: #d4af37;
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transition: transform 0.8s var(--soft) 0.35s, opacity 0.6s ease 0.35s;
}
html[data-theme="dark"] .theme-toggle .rays { transform: scale(0.55) rotate(45deg); opacity: 0; transition: transform 0.6s var(--soft), opacity 0.45s ease; }
.theme-toggle .rays g { transform-origin: 0 0; transition: transform 0.8s var(--soft); }
html[data-theme="light"] .theme-toggle:hover .rays g { transform: rotate(22deg); }

/* Сам диск: солнце и луна — два слоя, которые плавно растворяются друг в друге */
.theme-toggle .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(244, 196, 70, 0.55), 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 1.2s var(--soft);
}
html[data-theme="dark"] .theme-toggle .disc { box-shadow: 0 0 7px rgba(240, 233, 214, 0.28), 0 1px 3px rgba(0, 0, 0, 0.4); }
.theme-toggle .sun, .theme-toggle .moon { position: absolute; inset: 0; border-radius: 50%; transition: opacity 1.1s var(--soft); }
.theme-toggle .sun  { background: radial-gradient(circle at 34% 32%, #fbe39a 0%, #e9c45a 45%, #d4af37 100%); }
.theme-toggle .moon { background: radial-gradient(circle at 34% 32%, #fffaf0 0%, #efe8d4 55%, #ddd4bb 100%); opacity: 0; }
html[data-theme="dark"] .theme-toggle .sun  { opacity: 0; }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; }

/* Кратеры проступают, когда луна почти доехала; исчезают первыми при возврате */
.theme-toggle .craters { position: absolute; inset: 0; width: 100%; height: 100%; fill: #d6cdb2; opacity: 0; transition: opacity 0.4s ease; }
html[data-theme="dark"] .theme-toggle .craters { opacity: 0.9; transition: opacity 0.8s ease 0.55s; }

/* Тень, которая вырезает серп: наплывает мягко, уходит раньше остального */
.theme-toggle .shade {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: #262a42;
  transform: translate(105%, -105%);
  transition: transform 0.75s var(--soft);
}
html[data-theme="dark"] .theme-toggle .shade { transform: translate(38%, -30%); transition: transform 1s var(--soft) 0.25s; }

/* Положение в шапке: на компьютере — в самом конце, на телефоне — перед бургером */
@media (max-width: 1150px) { .theme-toggle { order: 1; } }
@media (max-width: 420px) {
  .theme-toggle { width: 46px; height: 26px; }
  .theme-toggle .knob { width: 18px; height: 18px; }
  .theme-toggle .rays { left: -4.5px; top: -4.5px; width: 27px; height: 27px; }
  html[data-theme="dark"] .theme-toggle .knob { --x: 20px; }
}

/* ===================================================== */
/* ПЛАВНАЯ СМЕНА ТЕМЫ ВСЕЙ СТРАНИЦЫ                       */
/* ===================================================== */
/* Новая тема мягко проявляется поверх снимка старой (только прозрачность — самое лёгкое для браузера) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* Кнопка: показываем только «живую» версию, без двоения */
::view-transition-group(theme-toggle) { animation: none; z-index: 3; }
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }
/* Пока идёт смена, остальные элементы не анимируют цвета сами (иначе в снимке они «догоняют») */
html.theme-vt *:not(.theme-toggle):not(.theme-toggle *), html.theme-vt *:not(.theme-toggle):not(.theme-toggle *)::before, html.theme-vt *:not(.theme-toggle):not(.theme-toggle *)::after { transition: none !important; }

/* Запасной вариант для старых браузеров: цвета плавно растворяются */
html.theme-anim *:not(.theme-toggle):not(.theme-toggle *), html.theme-anim *:not(.theme-toggle):not(.theme-toggle *)::before, html.theme-anim *:not(.theme-toggle):not(.theme-toggle *)::after {
  transition: background-color 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle * { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Тёмная тема: у плашек с цифрами и подписи к фото был светлый градиент — делаем тёмным */
html[data-theme="dark"] .stat { background: linear-gradient(180deg, #1b1f30, #151827); border-color: rgba(212, 175, 55, 0.22); }
html[data-theme="dark"] .photo-frame figcaption { background: #171a27; border-top-color: rgba(212, 175, 55, 0.2); }