/*
 * Поп-ап після відправки заявки — Figma 69:1303 (мобільний, 343 завширшки).
 * Нативний <dialog>, відкриває js/estimate-form-steps.js.
 * Mobile (за макетом): білий, radius 20, px 16 py 32, gap 16;
 *   заголовок 32/1.1 («Thank you!» — IBM Plex Serif Italic, бірюзовий),
 *   текст 16 muted; конверт 202×137 під нахилом −4.39°, 4 шари (71:1314).
 * Desktop (адаптація, макета немає): ширина 480, p 48/40, заголовок 44,
 *   текст 18, конверт ×1.3. Хрестик — додано за запитом.
 */
.estimate-popup {
  width: calc(100% - 32px);
  max-width: 343px;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 24px 64px rgba(33, 40, 42, 0.18);
}

.estimate-popup::backdrop {
  background: rgba(33, 40, 42, 0.55);
  backdrop-filter: blur(4px);
}

.estimate-popup[open] {
  animation: estimate-popup-in 0.45s cubic-bezier(.22, .61, .36, 1);
}

.estimate-popup[open]::backdrop {
  animation: estimate-popup-fade 0.35s ease;
}

.estimate-popup.is-closing {
  animation: estimate-popup-out 0.25s ease forwards;
}

.estimate-popup.is-closing::backdrop {
  animation: estimate-popup-fade 0.25s ease reverse forwards;
}

@keyframes estimate-popup-in {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.96;
  }
}

@keyframes estimate-popup-out {
  to {
    opacity: 0;
    translate: 0 16px;
    scale: 0.97;
  }
}

@keyframes estimate-popup-fade {
  from {
    opacity: 0;
  }
}

.estimate-popup__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px;
  text-align: center;
}

.estimate-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  transition: background-color 0.2s ease, rotate 0.3s ease;
}

.estimate-popup__close:hover {
  background: var(--color-primary-soft);
  rotate: 90deg;
}

.estimate-popup__close img {
  width: 16px;
  height: 16px;
}

.estimate-popup__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.estimate-popup__title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
}

.estimate-popup__title em {
  display: block;
  color: var(--color-primary);
}

.estimate-popup__text,
.estimate-popup__note {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-muted);
}

.estimate-popup__note strong {
  display: block;
  font-weight: 500;
  color: var(--color-black);
}

/* ---------- Конверт: 4 шари з макету, координати у % від 202×137.326 ---------- */
.estimate-popup__envelope {
  --env-scale: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(211.929px * var(--env-scale));
  height: calc(152.401px * var(--env-scale));
}

.estimate-popup__envelope-box {
  position: relative;
  width: calc(202px * var(--env-scale));
  height: calc(137.326px * var(--env-scale));
  rotate: -4.39deg;
}

.estimate-popup__envelope-box img {
  position: absolute;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.estimate-popup__env-shadow {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.14; /* 0.7 шару × 0.2 зображення */
}

.estimate-popup__env-main {
  left: 0.37%;
  top: 0.47%;
  width: 93.05%;
  height: 90.70%;
}

.estimate-popup__env-bottom {
  left: 0.66%;
  top: 33.11%;
  width: 92.79%;
  height: 58.17%;
}

.estimate-popup__env-sticker {
  left: 37.52%;
  top: 24.28%;
  width: 17.75%;
  height: 25.95%;
}

/* Конверт «прилітає» з легким нахилом, наліпка — з затримкою */
.estimate-popup[open] .estimate-popup__envelope-box {
  animation: estimate-envelope-in 0.8s cubic-bezier(.22, 1.2, .36, 1) 0.1s backwards;
}

.estimate-popup[open] .estimate-popup__env-sticker {
  animation: estimate-sticker-in 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.6s backwards;
}

@keyframes estimate-envelope-in {
  from {
    opacity: 0;
    translate: 0 -40px;
    rotate: -14deg;
  }
}

@keyframes estimate-sticker-in {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 901px) {
  .estimate-popup {
    max-width: 480px;
    border-radius: 24px;
  }

  .estimate-popup__inner {
    gap: 24px;
    padding: 48px 40px 40px;
  }

  .estimate-popup__close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  .estimate-popup__title {
    font-size: 44px;
  }

  .estimate-popup__text,
  .estimate-popup__note {
    font-size: 18px;
  }

  .estimate-popup__text {
    max-width: 360px;
  }

  .estimate-popup__envelope {
    --env-scale: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .estimate-popup[open],
  .estimate-popup[open]::backdrop,
  .estimate-popup[open] .estimate-popup__envelope-box,
  .estimate-popup[open] .estimate-popup__env-sticker {
    animation: none;
  }
}