html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

.photo-preview {
  display: none;
}

.photo-preview.has-image {
  display: block;
}

/* ===== ПЛИТКИ СТИЛЕЙ ===== */
.style-item {
  border-radius: 12px;
  overflow: hidden;
}

.style-item img {
  border-radius: 12px;
}

.style-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0) 45%);
  z-index: 1;
  pointer-events: none;
}

.style-item .style-name {
  z-index: 2;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}



/* ===== ТОП СТИЛЕЙ СООБЩЕСТВА (3 в ряд) ===== */
#topStylesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

/* ===== СЕТКА ВСЕХ СТИЛЕЙ 3×3 ===== */
#grid1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

/* Затемнение остальных плиток при открытом превью */
#grid1.preview-open .style-item:not(.active) {
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

/* ===== ПАНЕЛЬ ПРЕВЬЮ СТИЛЯ ===== */
.style-preview-row {
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}

.style-preview-row.open {
  max-height: 600px;
  opacity: 1;
}

/* ===== КНОПКА "НАВЕРХ" ===== */
#scrollTopBtn {
  transition:
    opacity 0.25s ease,
    transform 0.15s ease;
}

#scrollTopBtn.show {
  display: flex;
}

/* ===== МОДАЛКА ДОКУПКИ ===== */
.pack.active::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selected-style:empty::before {
  content: "— не выбран";
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
}

/* ===== РОМАШКА-СПИННЕР ===== */
.daisy-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.daisy {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.daisy-color {
  -webkit-mask-image: conic-gradient(from 0deg,
      #000 var(--fill, 0%),
      transparent 0);
  mask-image: conic-gradient(from 0deg, #000 var(--fill, 0%), transparent 0);
}

.daisy-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 800;
  color: #b45309;
  z-index: 5;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.dark .daisy-percent {
  color: #fde68a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== КНОПКИ НАВИГАЦИИ КАРУСЕЛИ РЕЗУЛЬТАТА ===== */
.result-nav {
  transition:
    transform 0.15s ease,
    background 0.2s ease;
}

.result-nav:active {
  transform: translateY(-50%) scale(0.9);
}


/* Обе сетки стилей — по 3 колонки */
#topStylesGrid,
#grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.style-item {
  border-radius: 14px;
}



.style-name {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* 🟢 Тост-уведомления */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  font-size: 15px;
  line-height: 1.4;
  color: #2d2d2d;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast.hide {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

.toast__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.toast__text {
  flex: 1;
}

/* Цветные акценты по типам */
.toast--error {
  border-left: 4px solid #ff5a76;
}

.toast--success {
  border-left: 4px solid #34c759;
}

.toast--info {
  border-left: 4px solid #5a9cff;
}

.toast--warning {
  border-left: 4px solid #ffb020;
}

/* ===== HERO-БЛОК ===== */
#heroStyleTile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0) 45%);
  z-index: 1;
  pointer-events: none;
}

#heroStyleTile .style-name {
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* 🔥 Значок «горячего» предложения — круг + плоский белый SVG-огонёк */
.hero-hot-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f26b3a;
  /* фирменный оранжево-коралловый */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* Плоский векторный огонёк внутри бейджа */
.hero-hot-badge svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================
   🖥️ АДАПТАЦИЯ ПОД ДЕСКТОП (экраны ≥ 768px)
   ============================================ */
@media (min-width: 768px) {

  /* Главный контейнер — шире в 2 раза */
  .app-shell {
    max-width: 960px !important;
  }

  /* Модалки тоже расширяем, чтобы совпадали с контейнером */
  #buyModal>div,
  #styleModal>div,
  #styleInfoModal>div,
  #photoPickModal>div,
  #animateInfoModal>div,
  #examplesModal>div,
  #cameraModal>div,
  #examplePhotoLightbox>div {
    max-width: 960px !important;
  }

  /* Модалки-«шторки» снизу центрируем и делаем скруглёнными со всех сторон,
     чтобы на широком экране они не выглядели «прилипшими» к низу */
  #buyModal,
  #styleModal,
  #styleInfoModal,
  #photoPickModal,
  #animateInfoModal {
    align-items: center;
  }

  #buyModal>div,
  #styleModal>div,
  #styleInfoModal>div,
  #photoPickModal>div,
  #animateInfoModal>div {
    border-radius: 22px !important;
  }

  /* Плитки стилей — увеличиваем зазоры */
  #topStylesGrid,
  #grid1 {
    gap: 14px;
  }

  /* Крупнее скругление и подписи на больших плитках */
  .style-item {
    border-radius: 18px;
  }

  .style-item .style-name {
    font-size: 14px !important;
    padding-bottom: 6px;
  }

  /* HERO-плитка первого стиля — крупнее */
  #heroStyleTile {
    width: 160px !important;
  }

  #heroStyleName {
    font-size: 14px !important;
  }

  /* Заголовок HERO — крупнее на десктопе */
    #heroBlock h2 {
      font-size: 38px;
      line-height: 1.1;
    }

  #heroBlock p {
    font-size: 15px;
  }

  /* Секции-заголовки чуть крупнее */
  #topStylesSection .uppercase,
  #styleHeaderRow .uppercase {
    font-size: 14px !important;
  }


  #grid1 {
    grid-template-columns: repeat(4, 1fr);
    /* 4 плитки в ряд */
  }

  #topStylesGrid {
      grid-template-columns: repeat(4, 1fr);
      /* 4 плитки в ряд */
    }

}

/* Очень широкие экраны (≥ 1200px) — можно дать ещё больше воздуха */
@media (min-width: 1200px) {
  .app-shell {
    max-width: 1040px !important;
  }
}

@media (min-width: 768px) {

  /* Прячем верхний баннер */
  #freePromoBanner {
    display: none !important;
  }

  /* Hero: две колонки — текст+плашка слева, картинка справа во всю высоту */
  #heroBlock {
    display: flex;
    align-items: stretch;
    /* растягивает картинку по высоте */
    gap: 16px;
  }

  /* Левая колонка (текст + плашка) — растягивается */
  #heroBlock .hero-left {
    order: 1;
      /* ← текст + плашка слева */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* Картинка справа — фикс. ширина, высота = высоте блока */
  #heroBlock #heroStyleTile {
    float: none !important;
    /* отключаем float на десктопе */
    order: 2;
      /* ← картинка справа */
    margin: 0 !important;
    width: 200px;
    flex: 0 0 200px;
    aspect-ratio: auto;
    /* высота берётся от flex-stretch */
    height: auto;
  }

  /* Плашка: прижата к тексту сверху, стоит под ним */
  #heroBlock .promo-in-hero {
    margin-top: 14px;
    /* небольшой отступ = «прижата к тексту» */
    clear: none;
  }

  /* распорку float на десктопе не нужна */
  #heroBlock .clear-both {
    display: none;
  }

/* Плитка hero кликабельна + розовая пульсация */
#heroStyleTile {
  cursor: pointer;
  animation: heroPulse 2.2s ease-in-out infinite;
}

@keyframes heroPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 70, 140, 0.9);
    /* 🟢 ярче и насыщеннее */
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(217, 70, 140, 0);
    /* 🟢 волна шире */
    transform: scale(1.03);
  }
}

/* Стрелка-подсказка мягко «подталкивает» вправо, к плитке */
.hint-arrow {
  animation: hintNudge 1.3s ease-in-out infinite;
}

@keyframes hintNudge {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(8px);
  }
}

/* Левая колонка тянется на всю высоту (чтобы было куда прижимать) */
#heroBlock .hero-left {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Подсказка: прижата к НИЗУ колонки и к ПРАВОМУ краю (ближе к плитке) */
.hero-hint {
  display: flex;
  margin-top: auto;
  /* 🟢 прижимает к низу = к нижнему краю картинки */
  margin-left: auto;
  /* 🟢 прижимает к правому краю, ближе к плитке */
  margin-bottom: 4px;
  /* лёгкий отступ от самого низа */
}

}

@media (max-width: 767px) {
  #heroBlock .promo-in-hero {
    display: none;
  }
}

/* ===== КАК ЭТО РАБОТАЕТ (3 шага, компактно) ===== */
#howItWorks .how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#howItWorks .how-step {
  display: flex;
  flex-direction: row;
  /* 🟢 кружок и текст в одну строку */
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 8px 10px;
  /* 🟢 меньше вертикальный отступ */
  gap: 8px;
}

#howItWorks .how-num {
  width: 26px;
  /* кружок оставляем прежнего размера */
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

#howItWorks .how-title {
  font-size: 12px;
  /* 🟢 шрифт поменьше */
  font-weight: 700;
  line-height: 1.15;
}

/* Десктоп — тоже компактно, чуть крупнее шрифт */
@media (min-width: 768px) {
  #howItWorks .how-grid {
    gap: 12px;
  }

    #howItWorks .how-step {
      display: flex;
      flex-direction: row;
      align-items: center;
      /* 🟢 кружок и текст по одной центральной линии */
      justify-content: center;
      text-align: center;
      padding: 8px 10px;
      gap: 8px;
    }
  
    #howItWorks .how-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      /* 🟢 цифра по центру кружка вертикально */
      justify-content: center;
      /* 🟢 цифра по центру кружка горизонтально */
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      /* 🟢 убираем лишнюю высоту строки у цифры */
      flex-shrink: 0;
    }
  
    #howItWorks .how-title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      /* 🟢 та же line-height, что у цифры — ровно по центру */
      white-space: nowrap;
    }
}
#createdCounter span:last-child,
#genCount+span {
  line-height: 1.15;
}

/* 🟢 Поле подписи поднимается выше клавиатуры при фокусе */
#cardCaptionInput {
  scroll-margin-bottom: 340px;
}
/* ===== ЭФФЕКТ ПЕЧАТНОЙ МАШИНКИ В HERO ===== */
.hero-type-caret {
  display: inline-block;
  margin-left: 1px;
  font-weight: 400;
  color: inherit;
  animation: heroCaretBlink 0.7s step-end infinite;
}

@keyframes heroCaretBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Счётчик созданных открыток — только на десктопе */
@media (max-width: 767px) {
  #createdCounter {
    display: none !important;
  }
}

/* Узкая модалка стиля и связанные модалки только на десктопе */
@media (min-width: 768px) {

  #styleModal>div,
  #photoPickModal>div,
  #styleInfoModal>div,
  #animateInfoModal>div {
    max-width: 700px !important;
  }
}

/* Временно скрыт счётчик созданных открыток в хедере (из-за разметки) */
#createdCounter {
  display: none !important;
}

/* Мелкая подсказка под розовой кнопкой в hero */
#heroFreeBtnHint {
  color: #a99fc4;
}

.dark #heroFreeBtnHint {
  color: #9a8fb8;
}
/* ===== ЭКРАН РЕЗУЛЬТАТА: десктоп ===== */
@media (min-width: 768px) {

  /* Карусель — половина ширины, по центру */
  #resultsGrid {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Статус скачивания под каруселью */
  #downloadStatusBar {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== ЭКРАН РЕЗУЛЬТАТА: десктоп — все кнопки в одну строку ===== */
@media (min-width: 768px) {
  #footerResult {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 8px;
  }

  /* Оживить фото и Повторить — поровну делят свободное пространство */
  #downloadButtonsRow {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Строка "Повторить + иконки" тоже растягивается на половину */
  #footerResult>.flex.items-center.gap-2 {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Повторить внутри строки занимает всё доступное место */
  #footerResult>.flex.items-center.gap-2>button:first-child {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* ===== HERO: большое «до»-фото слева + стрелка-завиток ===== */

/* Снимаем обрезку у плитки, но скругление оставляем самой картинке */
#heroStyleTile {
  overflow: visible;
}

#heroStyleTile>img,
#heroStyleTile::before {
  border-radius: 14px;
}

#heroStyleTile .style-name {
  z-index: 4;
}

.hero-hot-badge {
  z-index: 6;
}

/* Фото «до» — по умолчанию (мобилки) остаётся как было, внутри плитки */
#heroBeforeImg {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 33.333%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 3;
}

/* Стрелка на мобилке не нужна — места нет */
#heroBeforeArrow {
  display: none;
}

@media (min-width: 768px) {

  /* Фото ×2, вынесено левее, наклонено 10°, прижато к низу стиля */
  #heroBeforeImg {
    width: 66.66%;
    left: -55%;
    /* 🟢 было -44.44% */
    top: auto;
    bottom: 0;
    transform: rotate(-5deg);
    /* 🟢 наклон */
    transform-origin: bottom center;
    max-height: 80%;
    border-width: 3px;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }

  /* Стрелка — уже и левее (зазор между фото и стилем) */
  #heroBeforeArrow {
    display: block;
    position: absolute;
    left: -58%;
    /* 🟢 было -40% */
    bottom: 66%;
    top: auto;
    width: 58%;
    /* 🟢 было 78% */
    height: 34%;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
    color: #d9468c;
  }

  #heroBeforeArrow path {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  }

  #heroBeforeArrow .arrow-line {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: heroArrowDraw 1.8s ease-out 0.35s forwards;
  }

  #heroBeforeArrow .arrow-head {
    opacity: 0;
    animation: heroArrowHead 0.35s ease-out 2s forwards;
  }

  #heroBlock .hero-left {
    padding-right: 96px;
  }
}

@keyframes heroArrowDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes heroArrowHead {
  to {
    opacity: 1;
  }
}

/* ===== МОБИЛЬНЫЙ HERO: вертикальный стек ===== */
@media (max-width: 767px) {

  /* Переходим с float-раскладки на flex-колонку */
  #heroBlock {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
  }

  /* Растворяем .hero-left: его дети (h2, p, div-кнопка)
     становятся прямыми flex-потомками #heroBlock */
  #heroBlock .hero-left {
    display: contents;
  }

  /* Заголовок — вся ширина, крупнее (float больше не ужимает) */
  #heroBlock h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px;
    /* order по умолчанию 0 → идёт до плитки (order 2) */
  }

  /* Подзаголовок — вся ширина */
  #heroBlock p {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
    /* order 0, второй по DOM → идёт сразу после h2 */
  }

  /* Плитка стиля: убираем float, центрируем, ставим второй */
  #heroBlock #heroStyleTile {
    float: none !important;
    order: 2;
    align-self: center;
    width: 150px !important;
    margin: 14px 0 0 0 !important;
    flex-shrink: 0;
  }

  /* Обёртка с кнопкой — идёт после плитки */
  #heroBlock .hero-left>div {
    order: 3;
    margin-top: 14px !important;
    align-self: stretch;
    width: 100%;
  }

  /* Скрываем распорку float */
  #heroBlock .clear-both {
    display: none !important;
  }
}

/* ===== МОБИЛЬНЫЙ HERO: фото «до» слева + стрелка (как на десктопе) ===== */
@media (max-width: 767px) {

  /* Сдвигаем плитку вправо меньше, чем раньше (фото меньше перекрывает) */
  #heroBlock #heroStyleTile {
    margin-left: 50px !important;
  }

  /* Фото ×2, вынесено левее, наклонено 10° вправо, чуть касается стиля */
  #heroBeforeImg {
    width: 66.66%;
    left: -55%;
    /* было -44.44% → дальше влево */
    top: auto;
    bottom: 0;
    transform: rotate(-5deg);
    /* 🟢 наклон «прислонено к стилю» */
    transform-origin: bottom center;
    max-height: 80%;
    border-width: 3px;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }

  /* Стрелка — уже (не заходит на стиль) и левее */
  #heroBeforeArrow {
    display: block;
    position: absolute;
    left: -58%;
    /* было -40% → левее */
    bottom: 66%;
    top: auto;
    width: 58%;
    /* было 78% → уже, зазор до стиля */
    height: 34%;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
    color: #d9468c;
  }

  #heroBeforeArrow path {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  }

  #heroBeforeArrow .arrow-line {
    stroke-dasharray: 320;
    /* одиночный завиток короче */
    stroke-dashoffset: 320;
    animation: heroArrowDraw 1.8s ease-out 0.35s forwards;
  }

  #heroBeforeArrow .arrow-head {
    opacity: 0;
    animation: heroArrowHead 0.35s ease-out 2s forwards;
  }
}

/* Подъём плитки стиля при наведении (только устройства с курсором) */
@media (hover: hover) and (pointer: fine) {

  #topStylesGrid .style-item,
  #grid1 .style-item {
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
    will-change: transform;
    cursor: pointer;
  }

  #topStylesGrid .style-item:hover,
  #grid1 .style-item:hover,
  #topStylesGrid .style-item:focus-visible,
  #grid1 .style-item:focus-visible {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    z-index: 5;
    position: relative;
  }
}

.style-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Модалка стиля во всю ширину сайта на десктопе */
@media (min-width: 768px) {
  #styleModal > div {
    max-width: 960px !important;
  }
}

@media (min-width: 1200px) {
  #styleModal > div {
    max-width: 1040px !important;
  }
}

/* Сетка выбора другого стиля — как на главном экране */
#styleSwitcherStrip.switcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 768px) {
  #styleSwitcherStrip.switcher-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* 🟢 Появление плашки "первая бесплатно" с лёгким пульсом */
@keyframes freeBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


#photoFreeBadge.animate-freebadge {
  animation: freeBadgeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#styleTagsRow::-webkit-scrollbar {
  display: none;
}