/* =========================================================
   ДАРСИ — универсальный попап с формой.
   Один шаблон, содержимое подставляется из data-modal кнопки.
   ========================================================= */

.mpop{
  position:fixed; inset:0; z-index:96;
  display:grid; place-items:center;
  padding:clamp(16px,3vh,40px) clamp(16px,3vw,40px);
  background:rgba(12,8,10,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.mpop[hidden]{display:none}
.mpop [hidden]{display:none !important}
.mpop.is-open{opacity:1}

.mpop__win{
  --ink:#1B1418; --ink-2:#4A4046; --ink-3:#8A7F86;
  --hair:#E7DDE1; --tint:#FBF5F6; --rose-dark:#C07E93;

  position:relative; width:100%; max-width:940px; max-height:100%;
  display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1fr);
  background:#fff; color:var(--ink);
  box-shadow:0 50px 100px -50px rgba(50,20,32,.7);
  overflow:hidden;
  transform:translateY(18px) scale(.98);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.mpop.is-open .mpop__win{transform:none}

.mpop__media{position:relative; overflow:hidden; background:var(--tint)}
.mpop__media img{
  max-width:none;
  position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
}
.mpop__media .mpop__badge{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:36px 16px 20px; max-width:100%;
  border-radius:0;
  background:linear-gradient(180deg, rgba(8,8,9,0), rgba(8,8,9,.82));
  color:#fff; font-size:12.5px; line-height:1.35; letter-spacing:-.02em;
}

.mpop__body{
  padding:clamp(22px,2.4vw,38px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

.mpop__close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:#1B1418;
  transition:background .25s ease, transform .25s ease;
}
.mpop__close:hover{background:#fff; transform:rotate(90deg)}
.mpop__close svg{width:14px; height:14px; fill:currentColor}

.mpop__eyebrow{
  display:inline-block; margin:0 0 10px;
  padding:5px 10px; background:var(--tint); border:1px solid var(--hair);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rose-dark); font-weight:600;
}
.mpop__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(21px,1.9vw,29px); line-height:1.1; letter-spacing:-.015em;
  margin:0 0 10px;
}
.mpop__sub{
  margin:0 0 18px; font-size:14.5px; line-height:1.45;
  letter-spacing:-.03em; color:var(--ink-2);
}
.mpop__list{display:flex; flex-direction:column; gap:9px; margin:0 0 20px; padding:0; list-style:none}
.mpop__list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:13.5px; line-height:1.42; letter-spacing:-.03em; color:var(--ink-2);
}
.mpop__list li::before{
  content:''; width:9px; height:9px; margin-top:5px; flex:0 0 auto;
  background:var(--rose-dark);
}

/* ---------- форма ---------- */
.mpop__area{
  width:100%; min-height:92px; resize:vertical; display:block;
  margin-bottom:12px; padding:13px 15px;
  font:inherit; font-size:14.5px; letter-spacing:-.03em;
  color:var(--ink); background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.mpop__area::placeholder{color:#B9AEB4}
.mpop__area:focus{border-color:var(--rose-dark)}
.mpop__area.is-err{border-color:#D46A6A}

.mpop__label{
  display:block; margin:0 0 6px;
  font-size:12.5px; line-height:1.35; color:var(--ink-3); letter-spacing:-.02em;
}
.mpop__input{
  width:100%; height:52px; padding:0 16px;
  font:inherit; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.mpop__input::placeholder{color:#B9AEB4}
.mpop__input:focus{border-color:var(--rose-dark)}
.mpop__input.is-err{border-color:#D46A6A}
.mpop__input--telegram{margin-top:10px}
.mpop__err{margin:8px 0 0; font-size:12.5px; color:#C25757}

.mpop__btn{
  width:100%; height:56px; margin-top:14px;
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.mpop__btn:hover{background:var(--accent-grad-hi); transform:translateY(-1px)}

.mpop__check{display:flex; gap:10px; align-items:flex-start; margin-top:12px; cursor:pointer}
.mpop__check input{position:absolute; opacity:0; width:0; height:0}
.mpop__check-box{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  border:1px solid var(--hair); background:#fff; transition:.2s ease;
}
.mpop__check input:checked + .mpop__check-box{
  background:var(--rose-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--rose-dark);
}
.mpop__check span:last-child{font-size:12px; line-height:1.4; color:var(--ink-3)}
.mpop__check a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}

.mpop__done{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px; background:var(--tint); border:1px solid var(--hair);
}
.mpop__done p{margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.mpop__done b{color:var(--ink)}
.mpop__done-ico{
  width:26px; height:26px; flex:0 0 auto; color:#fff;
  background:var(--rose-dark); display:grid; place-items:center;
}
.mpop__done-ico svg{width:16px; height:16px}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:900px){
  .mpop{padding:12px}
  .mpop__win{grid-template-columns:1fr; max-height:92vh; overflow-y: scroll}
  .mpop__media{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mpop,.mpop__win{transition:none}
}