/**
 * css/cosmic.css — космическое небо для всех страниц Astrogide.
 *
 * Что рисует (без картинок, только градиенты — быстро и без загрузки файлов):
 *   - глубокое синее небо (базовый цвет);
 *   - мягкую виньетку по краям (глубина кадра);
 *   - Млечный Путь — светящуюся диагональную полосу;
 *   - туманности (мягкие цветные пятна);
 *   - звёздную пыль: множество мелких звёзд разной яркости (повторяющийся слой).
 *
 * Всё это — фон `body`, поэтому оно всегда ПОД контентом и ничего не перекрывает.
 * На главной поверх работает анимированный Canvas (js/starfield.js).
 * Палитра — см. MASTER.md.
 */

body {
  background-color: #0b1533;
  background-image:
    /* Виньетка по краям */
    radial-gradient(125% 95% at 50% 42%, transparent 58%, rgba(6, 12, 32, 0.55) 100%),
    /* Млечный Путь: светящаяся полоса по диагонали */
    linear-gradient(
      112deg,
      transparent 26%,
      rgba(196, 188, 232, 0.07) 38%,
      rgba(219, 212, 245, 0.17) 48%,
      rgba(206, 200, 238, 0.10) 56%,
      transparent 70%
    ),
    /* Туманности */
    radial-gradient(1100px 720px at 10% -8%, rgba(96, 112, 178, 0.34), transparent 64%),
    radial-gradient(900px 620px at 94% 6%, rgba(63, 95, 190, 0.26), transparent 60%),
    radial-gradient(760px 520px at 74% 100%, rgba(126, 116, 190, 0.16), transparent 66%),
    /* Звёздная пыль (повторяющийся слой) */
    radial-gradient(1.2px 1.2px at 20px 30px, rgba(255, 255, 255, 0.90), transparent 55%),
    radial-gradient(1px 1px at 122px 84px, rgba(207, 224, 255, 0.80), transparent 55%),
    radial-gradient(1.7px 1.7px at 224px 164px, rgba(255, 255, 255, 0.72), transparent 55%),
    radial-gradient(1px 1px at 302px 44px, rgba(227, 233, 251, 0.68), transparent 55%),
    radial-gradient(1.4px 1.4px at 62px 204px, rgba(255, 255, 255, 0.58), transparent 55%),
    radial-gradient(1px 1px at 270px 250px, rgba(200, 216, 250, 0.55), transparent 55%);

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    340px 340px,
    340px 340px,
    340px 340px,
    340px 340px,
    340px 340px,
    340px 340px;

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat, repeat, repeat, repeat;

  background-attachment: fixed;
}

/* ============================================================
   Типографика Hero
   ------------------------------------------------------------
   Размеры слегка зависят от ширины окна: на низких/узких экранах
   блок компактнее, на больших — крупнее.

   Высоты секций НЕ пересчитываются: секции идут обычным потоком.
   Благодаря тому, что Hero компактный, следующий блок («Услуги»)
   попадает в кадр сам собой — предсказуемо и без «прыжков» при
   переходах по якорям.
   ============================================================ */
.hero-title {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  line-height: 1.1;
}

.hero-list {
  font-size: 0.95rem;
  row-gap: 0.45rem;
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: clamp(2.1rem, 1.4rem + 1.6vw, 3rem);
  }
}

/* ============================================================
   Hero-арт направления (рисунок в правом верхнем углу)
   ------------------------------------------------------------
   Рисунок не выглядит «вставленной картиной»: края растворяются
   маской (mask), а цвета смешиваются с космическим фоном (screen).
   Размер задаёт контейнер (та же ячейка сетки, что и раньше),
   поэтому поток соседних блоков не меняется.
   ============================================================ */
.hero-art {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 320px;
}

/* Мягкое свечение за рисунком — связывает его с небом */
.hero-art::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2%;
  width: 72%;
  height: 115%;
  border-radius: 9999px;
  background: radial-gradient(60% 55% at 58% 40%, rgba(226, 166, 63, 0.16), rgba(63, 95, 190, 0.12) 55%, transparent 78%);
  filter: blur(30px);
  pointer-events: none;
}

/* Края растворяем мягким ПРЯМОУГОЛЬНЫМ градиентом (без «яйца») */
.hero-art__img {
  display: block;
  height: 300px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  mix-blend-mode: screen;
  filter: saturate(0.88) brightness(1.05) contrast(1.02) hue-rotate(-10deg);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* Лёгкий палитровый слой поверх — подгоняет оттенки под сайт */
.hero-art::after {
  content: "";
  position: absolute;
  top: 0;
  right: 2%;
  width: 72%;
  height: 115%;
  pointer-events: none;
  background: radial-gradient(60% 55% at 62% 34%, rgba(63, 95, 190, 0.18), transparent 72%);
  mix-blend-mode: screen;
}

@media (min-width: 1024px) {
  /* Высота блока одинакова для всех направлений — рисунок не заходит на карточки */
  .hero-art {
    min-height: 440px;
  }
  /* +50% к размеру, чуть левее верхнего правого угла */
  .hero-art__img {
    position: absolute;
    top: 0;
    right: 6%;
    height: 480px;
    max-width: none;
    margin-left: 0;
  }
  .hero-art::before,
  .hero-art::after {
    height: 150%;
  }
}

/* Вариант для главной: фото Екатерины — крупнее, занимает больше места */
.hero-art--profile {
  min-height: 360px;
}
@media (min-width: 1024px) {
  .hero-art--profile {
    min-height: 560px;
  }
  .hero-art--profile .hero-art__img {
    height: 560px;
    right: 2%;
  }
  .hero-art--profile::before,
  .hero-art--profile::after {
    height: 112%;
  }
}

/* ============================================================
   Мобильное меню (javascript: js/mobile-menu.js)
   ------------------------------------------------------------
   Иконка бургера меняется на «крестик» при открытом меню
   (по aria-expanded). ПК не затрагивается — кнопка скрыта md:hidden.
   ============================================================ */
[data-menu-toggle] .menu-icon-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .menu-icon-open { display: none; }
[data-menu-toggle][aria-expanded="true"] .menu-icon-close { display: block; }

/* ============================================================
   Мобильные карусели (свайп пальцем, без стрелок)
   ------------------------------------------------------------
   Полосу прокрутки прячем — листается свайпом (scroll-snap).
   ============================================================ */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   Мобильная карусель «Fan / колода» (javascript: js/deck-carousel.js)
   ------------------------------------------------------------
   Только МВ (<768px): контейнер [data-deck] превращается в 3D-сцену,
   карточки — в «колоду» (активная в фокусе, соседи уходят за неё).
   ПК-версия (сетка) не затрагивается — правила живут только в media.

   Настройка: можно переопределить на конкретном контейнере, напр.
   <div data-deck style="--deck-rot:12;--deck-depth:50">
   ============================================================ */
@media (max-width: 767px) {
  [data-deck].deck {
    display: block;
    position: relative;
    overflow: hidden;
    perspective: 1200px;
    touch-action: pan-y;
  }
  [data-deck].deck > * {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--deck-w, 80%);
    margin-left: calc(var(--deck-w, 80%) / -2);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
    will-change: transform, opacity;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* Боковые карточки не перехватывают тап — свайп работает откуда угодно */
  [data-deck].deck > *[aria-hidden="true"] { pointer-events: none; }

  /* В колоде карточки почти непрозрачные: текст соседей не просвечивает
     сквозь активную карточку. Легкая полупрозрачность сохранена. */
  [data-deck].deck > * { background-color: rgba(26, 42, 90, 0.96) !important; }

  [data-deck].deck.deck-dragging { user-select: none; -webkit-user-select: none; }
  [data-deck].deck.deck-dragging > * { transition: none; }

  /* Неон — ВНУТРЬ карточки (только активная, только МВ) */
  [data-deck].deck > .deck-active {
    box-shadow: inset 0 0 0 1px rgba(207, 224, 255, 0.28),
                inset 0 0 44px -6px rgba(93, 125, 230, 0.8) !important;
  }
  [data-deck].deck > .deck-active[data-premium] {
    box-shadow: inset 0 0 0 1px rgba(226, 166, 63, 0.5),
                inset 0 0 44px -6px rgba(226, 166, 63, 0.85) !important;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  [data-deck].deck > * { transition: none; }
}

/* ============================================================
   Выбор способа оплаты (checkout.html)
   ------------------------------------------------------------
   Выбранная опция светится неоном ВНУТРЬ — тот же приём, что у
   активной карточки в колоде на МВ (см. .deck-active выше).
   Работает через :has(input:checked): отметил радио — подсветилось.
   ============================================================ */
.pm-option {
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.pm-option:has(input:checked) {
  border-color: rgba(207, 224, 255, 0.5);
  background-color: rgba(63, 95, 190, 0.14);
  box-shadow: inset 0 0 0 1px rgba(207, 224, 255, 0.30),
              inset 0 0 44px -6px rgba(93, 125, 230, 0.85);
}
/* Наведение на невыбранную опцию — лёгкая подсказка */
.pm-option:hover:not(:has(input:checked)) {
  border-color: rgba(207, 224, 255, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .pm-option { transition: none; }
}

/* ============================================================
   Мобильная админ-панель (admin.html + js/admin.js)
   ------------------------------------------------------------
   Отдельная лёгкая страница-приложение: нижняя навигация, карточки,
   «шторки». Учитываем safe-area (вырез/жесты) на телефонах.
   ============================================================ */
.admin-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Выпадающее меню (правый верхний угол): разделы + выход */
.admin-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: 224px;
  z-index: 50;
  padding: 8px;
  background-color: #141f45;
  border: 1px solid rgba(63, 95, 190, 0.55);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
}
.admin-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  color: #e3e9fb;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease;
}
.admin-menu__item:active,
.admin-menu__item:hover { background-color: rgba(63, 95, 190, 0.22); }
.admin-menu__item--active {
  background-color: rgba(63, 95, 190, 0.35);
  color: #cfe0ff;
  font-weight: 600;
}

/* Бейдж (например, новые заявки) */
.admin-navbadge {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e2a63f;
  color: #0b1533;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Карточка приветствия */
.admin-greeting {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(63, 95, 190, 0.35) 0%, transparent 55%),
    #141f45;
  border: 1px solid rgba(63, 95, 190, 0.55);
  border-radius: 18px;
}
.admin-greeting__star {
  animation: admin-twinkle 3.2s ease-in-out infinite;
}
@keyframes admin-twinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-greeting__star { animation: none; }
}

/* Карточки-«плитки» разделов и элементов списков */
.admin-card {
  background-color: rgba(26, 42, 90, 0.75);
  border: 1px solid rgba(63, 95, 190, 0.5);
  border-radius: 16px;
}

/* «Шторка»: открывается СВЕРХУ (детали заявки и другие панели) */
.admin-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.admin-sheet__panel {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  background: #141f45;
  border: 1px solid rgba(63, 95, 190, 0.55);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Полноэкранный вариант (композер поста): весь экран, поле текста растягивается */
.admin-sheet--full { align-items: stretch; }
.admin-sheet__panel--full {
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* На телефоне поля не должны «зумить» страницу: минимум 16px у input */
.admin-field {
  font-size: 16px;
  min-height: 52px;
}

/* Лёгкая тактильная отдача для главных кнопок */
.admin-btn { -webkit-tap-highlight-color: transparent; }
.admin-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .admin-btn:active { transform: none; }
}

/* Кнопка-инструмент композера поста */
.admin-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(63, 95, 190, 0.5);
  background-color: rgba(26, 42, 90, 0.6);
  color: #e3e9fb;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.admin-tool:active { transform: scale(.97); }

/* Предпросмотр поста: как будет выглядеть текст после рендера разметки */
.admin-preview p { margin: 0 0 .6em; }
.admin-preview p:last-child { margin-bottom: 0; }
.admin-preview blockquote {
  margin: .5em 0;
  padding: .45em .85em;
  border-left: 3px solid rgba(207, 224, 255, 0.5);
  background-color: rgba(63, 95, 190, 0.12);
  border-radius: 0 8px 8px 0;
}
.admin-preview ul, .admin-preview ol { margin: .4em 0 .6em; padding-left: 1.3em; }
.admin-preview ul { list-style: disc; }
.admin-preview ol { list-style: decimal; }
.admin-preview a { color: #cfe0ff; text-decoration: underline; }
.admin-preview code {
  background-color: rgba(11, 21, 51, 0.7);
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .9em;
}