/* ========== СТИЛИ ПОПАПА (все классы префикс .wpx-) ========== */

.wpx-root, .wpx-root *{box-sizing:border-box}
.wpx-root{
  --wpx-cream: #f7f1e6;
  --wpx-cream-soft: #faf6ef;
  --wpx-paper: #fffdf8;
  --wpx-wood-dark: #2c1810;
  --wpx-wood: #4a3424;
  --wpx-wood-soft: #6b5240;
  --wpx-amber: #b8935a;
  --wpx-amber-dark: #9c7a45;
  --wpx-amber-light: #d4b888;
  --wpx-line: #e8dcc7;
  --wpx-text: #2c1810;
  --wpx-text-soft: #6b5240;
  --wpx-text-muted: #a08f7a;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--wpx-text);
}

/* Оверлей */
.wpx-overlay{
  position: fixed; inset: 0; z-index: 999992;
  background: rgba(28, 18, 12, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .35s ease;
}
.wpx-overlay.wpx-open{ display: flex; opacity: 1 }

/* Карточка */
.wpx-card{
  background: var(--wpx-cream);
  border-radius: 24px;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: 380px 1fr;
  transform: scale(.92) translateY(20px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  background-image:
    radial-gradient(at 100% 0%, rgba(184, 147, 90, 0.1) 0%, transparent 55%),
    radial-gradient(at 0% 100%, rgba(74, 52, 36, 0.07) 0%, transparent 50%);
}
.wpx-overlay.wpx-open .wpx-card{ transform: scale(1) translateY(0) }

/* Левая сторона — фото мебели */
.wpx-visual{
  position: relative;
  min-height: 460px;
  /* Базовый плейсхолдер — деревянная фактура с амбровым градиентом.
     Виден если основное фото не загрузилось (битая ссылка, hotlink-защита и т.д.) */
  background-color: #6b5240;
  background-image:
    /* тёмная вуаль сверху и снизу для читаемости текста */
    linear-gradient(180deg, rgba(28,18,12,0.35) 0%, rgba(28,18,12,0) 25%, rgba(28,18,12,0) 60%, rgba(28,18,12,0.65) 100%),
    /* фоновая «деревянная» текстура из двух радиальных градиентов */
    radial-gradient(at 30% 20%, rgba(212, 184, 136, 0.4) 0%, transparent 55%),
    radial-gradient(at 80% 70%, rgba(44, 24, 16, 0.55) 0%, transparent 50%),
    linear-gradient(135deg, #8a6b48 0%, #5e4a36 50%, #3d2c1e 100%);
}
.wpx-visual-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
/* Тёмная вуаль поверх фото — для читаемости плашки и цитаты */
.wpx-visual::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,18,12,0.35) 0%, rgba(28,18,12,0) 25%, rgba(28,18,12,0) 60%, rgba(28,18,12,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.wpx-visual-badge{
  position: absolute; top: 20px; left: 20px;
  z-index: 2;
  background: var(--wpx-paper);
  border-radius: 100px;
  padding: 8px 14px 8px 10px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--wpx-wood-dark);
  box-shadow: 0 8px 24px -8px rgba(44, 24, 16, 0.2);
}
.wpx-visual-badge-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ea857;
  box-shadow: 0 0 0 3px rgba(78, 168, 87, .2);
}
.wpx-visual-label{
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  z-index: 2;
  color: var(--wpx-paper);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -.005em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.3;
  font-variation-settings: "SOFT" 50;
}

/* Правая сторона — оффер и форма */
.wpx-content{
  padding: 44px 40px 36px;
  display: flex; flex-direction: column;
  position: relative;
}

.wpx-close{
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid var(--wpx-line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--wpx-wood);
  z-index: 5; transition: all .2s;
}
.wpx-close:hover{ background: var(--wpx-paper); transform: rotate(90deg) }
.wpx-close svg{ width: 16px; height: 16px }

.wpx-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(184, 147, 90, 0.12);
  color: var(--wpx-amber-dark);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 18px;
}
.wpx-eyebrow::before{
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wpx-amber-dark);
}

.wpx-title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--wpx-wood-dark);
  margin: 0 0 8px;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.wpx-title em{
  font-style: italic;
  font-weight: 600;
  color: var(--wpx-amber-dark);
  font-size: 1.15em;
  display: inline-block;
  line-height: 1;
}

.wpx-subtitle{
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--wpx-text-soft);
  margin: 0 0 24px;
}

/* Преимущества (буллеты) */
.wpx-bullets{
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.wpx-bullets li{
  font-size: 13.5px;
  color: var(--wpx-wood);
  display: flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.wpx-bullets li::before{
  content: '';
  width: 18px; height: 18px;
  background: var(--wpx-amber);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Форма */
.wpx-form{
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
}
.wpx-input{
  background: var(--wpx-paper);
  border: 1.5px solid var(--wpx-line);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--wpx-wood-dark);
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.wpx-input:focus{ border-color: var(--wpx-amber); box-shadow: 0 0 0 4px rgba(184, 147, 90, 0.12) }
.wpx-input::placeholder{ color: var(--wpx-text-muted) }
.wpx-error{
  font-size: 12px; color: #c25a3a; margin-top: -4px; display: none;
}
.wpx-error.wpx-show{ display: block }

.wpx-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: linear-gradient(180deg, var(--wpx-amber), var(--wpx-amber-dark));
  color: var(--wpx-paper);
  border: none;
  border-radius: 100px;
  padding: 17px 28px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 10px 30px -8px rgba(184, 147, 90, 0.55);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.wpx-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px -8px rgba(184, 147, 90, 0.65) }
.wpx-cta:disabled{ opacity: .5; cursor: not-allowed; transform: none }
/* лёгкий shimmer-effект на кнопке */
.wpx-cta::before{
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: wpx-shimmer 3.5s infinite;
}
@keyframes wpx-shimmer{
  0%, 100%{ left: -75% }
  50%, 70%{ left: 130% }
}

.wpx-consent{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: var(--wpx-text-muted); line-height: 1.4;
  margin-top: 2px;
}
.wpx-consent input{ margin-top: 1px; accent-color: var(--wpx-amber-dark); flex-shrink: 0 }
.wpx-consent a{ color: var(--wpx-wood); text-decoration: underline }

/* Финальный экран — после отправки */
.wpx-done{
  padding: 50px 40px;
  text-align: center;
  grid-column: 1 / -1;
  display: none;
}
.wpx-card.wpx-success .wpx-visual,
.wpx-card.wpx-success .wpx-content{ display: none }
.wpx-card.wpx-success .wpx-done{ display: block }
.wpx-card.wpx-success{ grid-template-columns: 1fr; max-width: 540px }
.wpx-done-icon{
  width: 72px; height: 72px; margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wpx-amber-light), var(--wpx-amber));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(184, 147, 90, 0.55);
}
.wpx-done-icon svg{ width: 36px; height: 36px; color: var(--wpx-paper) }
.wpx-done h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.015em;
  color: var(--wpx-wood-dark);
  margin: 0 0 12px;
}
.wpx-done p{
  font-size: 15px; line-height: 1.55;
  color: var(--wpx-text-soft);
  margin: 0;
}

/* На малых десктопах — режем картинку */
@media (max-width: 820px){
  .wpx-card{ grid-template-columns: 1fr; max-width: 480px }
  .wpx-visual{ min-height: 200px; max-height: 200px }
  .wpx-content{ padding: 32px 28px 28px }
  .wpx-title{ font-size: 28px }
}

/* На мобильных попап вообще скрыт — exit-intent работает только на курсорах */
@media (max-width: 600px), (hover: none) {
  .wpx-overlay{ display: none !important }
}