/* Блоки 6 и 7. Поздравлялочка, форма открытки, модалки.
   База вырезана из styles.min.css сборки вёрстки от 09.09.2026.
   Селекторы: .sectionSix*, .sectionSeven*, .posterForm*, .posterModal*, .thanksModal*. */

.sectionSix__inner {
  padding-top: 7rem;
  padding-bottom: 0;
  position: relative;
}
.sectionSix__head {
  width: 48.75rem;
  margin-bottom: 3rem;
}
.sectionSix__subtitle {
  line-height: 1.2;
}
.sectionSix__slider-wrap {
  padding-left: 1rem;
  padding-right: 1rem;
}
.sectionSix-slider {
  margin-left: -1rem;
  margin-right: -1rem;
}
.sectionSix-slider__slide {
  padding-left: 1rem;
  padding-right: 1rem;
  height: initial;
}
.sectionSix-card {
  height: 100%;
  padding: 1.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.375rem;
  background: var(--white);
  border-radius: 1.25rem;
}
.sectionSix-card__top {
  position: relative;
}
.sectionSix-card__img {
  height: 25rem;
  background: url(../../static/images/general/no-photo.svg) center no-repeat;
  background-size: 4rem 3.625rem;
}
.sectionSix-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sectionSix-card__badge {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.02em;
  padding: 0.375rem 0.625rem;
  background: var(--white);
  border-radius: 4rem;
  color: var(--pink);
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
}
.sectionSix-card__badge::before {
  border-color: var(--pink);
}
.sectionSix-card__txt {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--pink);
  padding: 1.5rem;
}
.sectionSix-card__txt::before {
  border-color: var(--pink);
}
.sectionSix-card__remove {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  fill: var(--pink);
}
.sectionSix-card__buttons {
  grid-template-columns: 2.875rem 1fr;
  gap: 1rem;
}
.sectionSix-card__back svg {
  width: 0.75rem;
  height: 1.25rem;
}
.sectionSix-card__btn {
  height: ren(46);
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
}
.sectionSix__controls {
  margin-top: 3rem;
}
.sectionSix__stars {
  position: absolute;
  width: 115.875rem;
  left: -15.625rem;
  top: -14.6875rem;
}
.sectionSix__decor {
  position: absolute;
  width: 45.25rem;
  right: 18.5rem;
  top: 1.25rem;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 480px) {
  .sectionSix__inner {
    padding: 2.5rem 0;
  }
  .sectionSix__head {
    padding: 0 1rem;
    margin-bottom: 3.125rem;
  }
  .sectionSix__subtitle {
    margin-top: 1rem;
  }
  .sectionSix-slider {
    overflow: initial;
    margin-left: -0.375rem;
    margin-right: -0.375rem;
  }
  .sectionSix-slider__slide {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
  .sectionSix-card {
    gap: 0.75rem;
    padding-top: 2rem;
  }
  .sectionSix-card__txt {
    padding: 1.25rem 1.5rem;
  }
  .sectionSix__controls {
    margin-top: 2rem;
  }
  .sectionSix__decor {
    width: 12rem;
    right: -2.375rem;
    top: -3rem;
  }
  .sectionSix__stars {
    width: 30.25rem;
    left: -2.125rem;
    top: -5.875rem;
  }
  .sectionSix__slider-wrap {
    position: relative;
  }
  .sectionSix__slider-wrap::before {
    content: "";
    width: 6rem;
    height: 7.875rem;
    background: url(../../static/images/general/s6-decor-2.png) 0 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: -2rem;
    left: -1.75rem;
    z-index: 9;
  }
}
.sectionSeven__inner {
  padding-top: 8.125rem;
  padding-bottom: 8.125rem;
  position: relative;
}
.sectionSeven__head {
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 3;
}
.sectionSeven__decor {
  width: 96.625rem;
  position: absolute;
  right: -3.875rem;
  top: -4.875rem;
  pointer-events: none;
}
.sectionSeven__stars {
  width: 105.5rem;
  position: absolute;
  left: -8.25rem;
  top: -25.625rem;
  pointer-events: none;
}
.posterForm {
  width: 75rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 9;
}
.posterForm__decor {
  width: 71.75rem;
  position: absolute;
  left: 0.125rem;
  top: 1.25rem;
  pointer-events: none;
  z-index: 9;
}
.posterForm__inner {
  background: rgba(148, 207, 255, 0.3);
  -webkit-box-shadow: inset -3px -4px 4px #65AAE2, inset 4px 5px 4px rgba(255, 255, 255, 0.35);
          box-shadow: inset -3px -4px 4px #65AAE2, inset 4px 5px 4px rgba(255, 255, 255, 0.35);
  border-radius: 3.25rem;
  padding: 3.625rem 3.125rem 4rem;
}
.posterForm__subtitle {
  text-align: center;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  width: 51.875rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.posterForm__text-wrap {
  width: 34.75rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}
.posterForm__textarea {
  display: block;
  width: 100%;
  height: 13.125rem;
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1.5rem 2rem;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--pink);
  border: 0.125rem solid var(--white);
  letter-spacing: 0.02em;
}
.posterForm__textarea::-webkit-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__textarea::-moz-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__textarea:-ms-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__textarea::-ms-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__textarea::placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__input {
  display: block;
  width: 100%;
  height: 3.75rem;
  background: var(--white);
  border-radius: 4rem;
  padding-left: 3.375rem;
  padding-right: 1.25rem;
  border: 0.125rem solid var(--white);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--pink);
}
.posterForm__input::-webkit-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__input::-moz-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__input:-ms-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__input::-ms-input-placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__input::placeholder {
  color: rgba(75, 75, 75, 0.3);
}
.posterForm__placeholder {
  position: absolute;
  left: 2rem;
  top: calc(50% + 0px);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--pink);
}
.posterForm__mobileFile {
  display: none;
  margin-top: 1.25rem;
}
.posterForm__field.error input, .posterForm__field.error textarea {
  border-color: var(--red);
}
.posterForm__field.error .posterForm-img__content::before {
  border-color: var(--red);
  opacity: 1;
}
.posterForm__field.selected .posterForm-cancel {
  opacity: 1;
  pointer-events: auto;
}
.posterForm__field.selected .posterForm-img__content::before {
  border-color: var(--green);
  opacity: 1;
}
.posterForm-add {
  display: block;
  text-align: center;
  height: 100%;
}
.posterForm-add.error .posterForm-add__error {
  display: block;
}
.posterForm-add.error .posterForm-add__inner::before {
  border-color: var(--red);
}
.posterForm-add.success .posterForm-add__success {
  display: block;
}
.posterForm-add.success .posterForm-add__inner::before {
  border-color: var(--green);
}
.posterForm-add input {
  display: none;
}
.posterForm-add__inner {
  position: relative;
  height: 26.875rem;
  display: block;
  border-radius: 1.25rem;
}
.posterForm-add__inner::before {
  border-style: dashed;
  border-color: var(--pink);
  z-index: 9;
}
.posterForm-add__error, .posterForm-add__success {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: none;
}
.posterForm-add__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  gap: 0.5rem;
  background: var(--white);
  border-radius: inherit;
  height: 100%;
}
.posterForm-add__content-img img {
  width: 2.5rem;
}
.posterForm-add__content-title {
  font-size: 1rem;
  color: var(--black);
}
.posterForm-add__content-txt {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #939393;
}
.posterForm__slider-wrap:has(.posterForm-img-wrap.selected) .posterForm-img__content::after {
  opacity: 0.6;
}
.posterForm__slider-wrap:has(.posterForm-img-wrap.selected) .selected .posterForm-img__content::after {
  opacity: 0;
}
.posterForm-img-wrap {
  position: relative;
}
.posterForm-img {
  display: block;
  height: 100%;
  padding: 0 0.25rem;
}
.posterForm-img input {
  display: none;
}
.posterForm-img__content {
  height: 26.875rem;
  display: block;
  border-radius: 1.25rem;
}
.posterForm-img__content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #999999;
  opacity: 0;
}
.posterForm-img__content::before {
  border-width: 0.125rem;
  opacity: 0;
}
.posterForm-img__content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.25rem;
}
.posterForm-cancel {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--white);
  fill: var(--pink);
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  pointer-events: none;
}
.posterForm-cancel svg {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.posterForm-slider__slide {
  width: 21rem;
}
.posterForm__controls {
  margin-top: 2rem;
}
.posterForm__bottom {
  width: 34.75rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  margin-top: 3.75rem;
}
.posterForm__btn {
  width: 100%;
  height: 3.75rem;
  font-size: 1.25rem;
}
.posterModal-dialog {
  max-width: 20.5rem;
}
.posterModal .sectionSix-card {
  padding-top: 3.75rem;
}
.thanksModal-dialog {
  max-width: 45.25rem;
}
.thanksModal-content {
  padding: 6.25rem 4.5rem;
  background: var(--white);
  border-radius: 2.5rem;
  position: relative;
  color: var(--pink);
}
.thanksModal-content__title {
  font-size: 2.125rem;
  line-height: 1.1;
  font-family: var(--second-ff);
  font-weight: bold;
}
.thanksModal-content__txt {
  font-size: 1.125rem;
  line-height: 1.2;
}
.thanksModal-content__inner {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
@media (max-width: 480px) {
  .sectionSeven__inner {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 5rem;
  }
  .sectionSeven__head {
    margin-bottom: 1rem;
  }
  .sectionSeven__stars {
    width: 26.75rem;
    top: -12.5rem;
    left: -2.125rem;
  }
  .sectionSeven__decor {
    display: none;
  }
  .posterForm__decor {
    display: none;
  }
  .posterForm__inner {
    -webkit-box-shadow: initial;
            box-shadow: initial;
    border-radius: 0;
    padding: 0;
    background: none;
    border: none;
    backdrop-filter: initial;
    overflow: initial;
  }
  .posterForm__inner::before, .posterForm__inner::after {
    display: none;
  }
  .posterForm__subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .posterForm__text-wrap {
    margin-bottom: 2rem;
  }
  .posterForm__textarea {
    height: 10.25rem;
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
  .posterForm-slider {
    margin-right: -1rem;
    padding-right: 1rem;
  }
  .posterForm-slider__slide {
    max-width: 13.75rem;
  }
  .posterForm-slider__slide:has(.posterForm-add) {
    display: none;
  }
  .posterForm-img {
    padding: 0;
  }
  .posterForm-img__content {
    height: 100%;
    border-radius: 0.625rem;
  }
  .posterForm-img__content img {
    border-radius: 0.625rem;
  }
  .posterForm-add__inner {
    height: 10rem;
  }
  .posterForm__controls {
    margin-top: 1.25rem;
    padding-left: 0;
    padding-right: 0;
  }
  .posterForm__bottom {
    margin-top: 1rem;
    gap: 1rem;
  }
  .posterForm__btn {
    padding-top: 0;
    padding-bottom: 0;
    height: 2.625rem;
    font-size: 0.875rem;
    border-radius: 3.125rem;
  }
  .posterForm__mobileFile {
    display: block;
  }
  .posterForm__placeholder {
    left: 1.25rem;
  }
  .posterForm__input {
    padding-left: 2.625rem;
  }
  .posterModal-dialog {
    max-width: 100%;
    margin: 1rem;
  }
  .thanksModal.fade .modal-dialog {
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
  }
  .thanksModal.show .modal-dialog {
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
  }
  .thanksModal-dialog {
    margin: 0;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    min-height: 100vh;
  }
  .thanksModal-content {
    padding: 6.875rem 1.25rem;
    border-radius: 2.5rem 2.5rem 0 0;
  }
}

/* ================================================================
   Наши доработки — их нет в вёрстке. База выше заменяется при новой
   сборке, этот блок переносится как есть. */

/* Кнопка «Тоже хочу поздравить Моё солнышко®» (ТЗ, п. 8.1) убрана 10.09.2026
   по решению заказчика — в вёрстке и в галерее её нет, к форме ведёт заголовок
   блока 7. Разметка, обработчик и стили сохранены в
   `ЧЕК-ЛИСТ-после-переноса-images.md`, §11, если понадобится вернуть. */

/* Ошибка «оформление открытки не выбрано» — ТЗ, п. 8.5.
   Краснеют и карточки пресетов (правило .posterForm__field.error выше, оно из
   вёрстки), и дропзона: выбрать можно и то и другое, значит подсветить надо оба
   места. Подзаголовок «Украсьте открытку!» красным не подсвечиваем — решение
   пользователя, не возвращать.
   Для дропзоны отдельный класс, а не .posterForm-add.error: тот показывает слой
   с текстом «Неподходящий формат», здесь сообщение было бы неверным. */
.posterForm-add.error-empty .posterForm-add__inner::before {
  border-color: var(--red);
  border-width: 0.125rem;
}
/* ТЗ, п. 8.4: при загруженном своём фото карусель пресетов приглушается.
   Приглушаем тем же слоем, что и невыбранные карточки рядом с выбранной,
   чтобы состояние читалось одинаково.

   Клики при этом НЕ снимаем, хотя ТЗ говорит «становится недоступной».
   Иначе получается тупик: убрать загруженное фото можно только выбором
   пресета (тот же п. 8.4), а пресеты выключены — выйти из своей картинки
   нечем, крестика у дропзоны в вёрстке нет. Приглушение остаётся подсказкой,
   что сейчас активна своя картинка, а клик по карточке её заменяет. */
.posterForm__slider-wrap.presets-off .posterForm-img__content::after {
  opacity: 0.6;
}
/* Четвёртое состояние дропзоны — ТЗ, п. 8.3.
   Вёрстка знала три: пустая, ошибка формата, успех. Перевес и превышение
   разрешения показывались слоем «Неподходящий формат», то есть сообщение
   врало. Слой позиционируется так же, как __error и __success. */
.posterForm-add__error-size {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: none;
}
.posterForm-add.error-size .posterForm-add__error-size {
  display: block;
}
.posterForm-add.error-size .posterForm-add__inner::before {
  border-color: var(--red);
}
/* Подсветка при наведении перетаскиваемого файла — ТЗ, п. 8.3.
   Зелёным, как у состояния «Картинка загружена!»: тот же смысл «отпускай сюда». */
.posterForm-add.dragover .posterForm-add__inner::before {
  border-color: var(--green);
  border-width: 0.125rem;
}
/* Текст поздравления в предпросмотре подставляется через textContent, поэтому
   переносы строк приходят символами \n, а не тегами <br>. Сохраняем их. */
.posterModal .sectionSix-card__txt-inner {
  white-space: pre-line;
}
/* Поздравление пишет посетитель, и там запросто окажется длинная строка без
   пробелов. Точек переноса у неё нет, и браузер выпускает её за пределы
   карточки. Касается и предпросмотра, и галереи — правило общее.
   break-word, а не anywhere: обычные слова переносим по-человечески, рвём
   только то, что иначе не помещается. */
.sectionSix-card__txt-inner {
  overflow-wrap: break-word;
}
/* Ошибка отправки в предпросмотре. Экрана под неё в макете нет — временное
   решение, согласованное с пользователем: показать её надо, иначе после
   неудачной отправки человеку либо покажут «Спасибо!» без отправки, либо
   не покажут ничего. Прячется атрибутом hidden, поэтому display в основном
   правиле не задаём — иначе он перебьёт скрытие. */
.sectionSix-card__error {
  margin-top: 0.75rem;
  color: var(--red);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
}
.sectionSix-card__error[hidden] {
  display: none;
}

/* Поле поздравления укорочено с 13.125rem до 10.125rem — правка заказчика
   10.09.2026. Декор поднят на те же 3rem, чтобы его низ сохранил положение
   относительно укоротившейся формы.

   Только десктоп, и медиазапрос здесь обязателен: у поля есть своя мобильная
   высота (10.25rem) в базе выше, а хвост идёт последним — правило без рамки
   перебило бы и её. Брейкпоинт зеркалит базовый max-width: 480px.

   .posterForm__decor — одна картинка на весь декор формы: шарики и звёздочка
   сверху, сердечко снизу. Подвинуть в ней только сердечко нельзя, поэтому
   вместе с ним на 3rem поднимаются и шарики. Если это окажется заметно,
   правильный путь — разрезать спрайт на два слоя с общим холстом, как сделано
   с солнышком «Поздравлялочки» в animations.css. */
@media (min-width: 481px) {
  .posterForm__textarea {
    height: 10.125rem;
  }
  .posterForm__decor {
    top: -1.75rem;
  }
}

/* Карточки пресетов на мобильном — одной высоты (14.09.2026).
   На десктопе высоту держит .posterForm-img__content (26.875rem), а на мобильном
   база ставит ей height: 100% от родителя без высоты — то есть высоты нет,
   и карточка вырастает по пропорции самой картинки. Пока все постеры были
   328×430, это не было видно; poster-4…6 другой пропорции (0.75 и 0.708)
   и выходили выше соседей.
   Пропорцию задаём картинке, а не контейнеру: цепочка процентных высот тогда
   не нужна. Лишнее срезает object-fit: cover из базы, как на десктопе. */
@media (max-width: 480px) {
  .posterForm-img__content img {
    height: auto;
    aspect-ratio: 328 / 430;
  }
}