/* ============================================================
   CITY VILLA CLUB — попап "Замовити консультацію"
   Оверлей + картка в нашій дизайн-мові (rd-*). Токени й поля/кнопки
   успадковано з tokens.css і components.css — тут лише розкладка
   самого попапу.
   ============================================================ */

.rd-popup {
  position: fixed;
  inset: 0;
  /* шапка: header 100, мобільне меню 105, бургер 110 — беремо вище всього */
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rd-pad);
}
.rd-popup[hidden] { display: none; }
/* .rd-field__err і подібні класи компонентів задають свій display —
   специфічність зрівнюється з UA-правилом [hidden], і без цього
   перебиває його. Піднімаємо специфічність через предка. */
.rd-popup [hidden] { display: none; }

.rd-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 58, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--rd-norm) var(--rd-ease);
}
.rd-popup.is-open .rd-popup__overlay { opacity: 1; }

.rd-popup__card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100svh - 2 * var(--rd-pad));
  overflow-y: auto;
  background: var(--rd-white);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-lift);
  padding: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem) clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity var(--rd-norm) var(--rd-ease), transform var(--rd-norm) var(--rd-ease);
}
.rd-popup.is-open .rd-popup__card { opacity: 1; transform: none; }

.rd-popup__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--rd-paper);
  color: var(--rd-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rd-fast), color var(--rd-fast);
}
.rd-popup__close:hover { background: var(--rd-hairline); color: var(--rd-navy); }
.rd-popup__close svg { width: 16px; height: 16px; }

.rd-popup__title {
  font-size: var(--rd-fs-h3);
  margin-bottom: .4rem;
  padding-right: 2.2rem; /* не наїжджає на хрестик */
}
.rd-popup__text {
  color: var(--rd-muted);
  font-size: .95rem;
  margin-bottom: 1.6rem;
}

.rd-popup__submit {
  width: 100%;
  margin-top: .3rem;
}

/* Екран підтвердження. Раніше це був просто абзац під формою, а шапка попапу
   лишалася на місці — виходило «Передзвонити вам?» і «Дякуємо» одночасно, і людина
   не розуміла, чи заявка пішла. Тепер це окремий екран: галочка, чіткий статус,
   що буде далі, і кнопка виходу. */
.rd-popup__thanks { text-align: center; padding-block: 1.2rem .4rem; }
.rd-popup__thanks:focus { outline: none; }
.rd-popup__thanks-ic {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  color: var(--rd-white);
  background: var(--rd-amber);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--rd-amber) 75%, transparent);
}
.rd-popup__thanks-ic svg { width: 30px; height: 30px; }
.rd-popup__thanks-btn { margin-top: 1.4rem; width: 100%; }
.rd-popup__thanks-title {
  font-family: var(--rd-font);
  font-weight: 900;
  font-style: italic;
  font-size: var(--rd-fs-h3);
  color: var(--rd-navy);
  margin: 0 0 .5rem;
}
.rd-popup__thanks-text { color: var(--rd-muted); margin: 0; line-height: 1.55; }
.rd-popup__thanks-text a { font-weight: 600; white-space: nowrap; }

@media (max-width: 480px) {
  .rd-popup { padding: 1rem; }
  .rd-popup__card { padding: 1.6rem 1.3rem 1.8rem; }
}


/* Згода на обробку даних під кнопкою. Формально обов'язкова (Закон України
   «Про захист персональних даних») і потрібна рекламним кабінетам Google та
   Meta; у попапі її не було взагалі, хоча форма збирає ім'я й телефон. */
.rd-popup__consent {
  margin: .9rem 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--rd-muted);
}
.rd-popup__consent a { color: inherit; }