/* ==========================================================================
   Попъп „Абонирай се" (F4). 1:1 от makets/final/popup-abonament.html.
   ========================================================================== */
.mg-abon{
  position:fixed; inset:0; z-index:9998;
  display:grid; grid-template-columns:minmax(0,760px); place-content:center;
  padding:16px; background:rgba(51,38,43,.5);
}
.mg-abon[hidden],.mg-abon__state[hidden]{ display:none; }
.mg-abon__card{
  position:relative;
  display:grid; grid-template-columns:300px 1fr;
  background:var(--mg-cream); border-radius:22px;
  box-shadow:0 24px 60px rgba(51,38,43,.3);
  animation:mg-abon-in .35s ease-out both;
}
@keyframes mg-abon-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.mg-abon .mg-abon__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; border-radius:22px 0 0 22px; }
.mg-abon__body{ display:flex; flex-direction:column; justify-content:center; padding:32px 36px 30px; }
.mg-abon__x{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:var(--mg-r-pill);
  background:var(--mg-white); color:var(--mg-ink); font-size:22px; line-height:1; cursor:pointer;
  box-shadow:var(--mg-sh-sm);
}
.mg-abon__x:hover{ background:var(--mg-p-pink-bg); }
.mg-abon__tag{
  align-self:flex-start; margin-bottom:14px; padding:6px 14px; border-radius:var(--mg-r-pill);
  background:var(--mg-p-yellow-bg); color:#7A5410;
  font-family:var(--mg-font-tile); font-size:12px; font-weight:900; line-height:1.2; letter-spacing:.06em; text-transform:uppercase;
}
.mg-abon__tag::before{ content:'✦ '; }
body.mg .mg-abon__title{ margin:0 0 10px; font-family:var(--mg-font-head); font-size:30px; font-weight:700; line-height:1.15; color:var(--mg-ink); }
body.mg .mg-abon__text{ margin:0 0 20px; font-size:16px; line-height:1.5; color:var(--mg-text); }
.mg-abon__form{ display:flex; flex-direction:column; gap:10px; }
body.mg .mg-abon__form input{
  min-height:52px; padding:14px 20px; border:2px solid var(--mg-line); border-radius:var(--mg-r-pill);
  background:var(--mg-white); color:var(--mg-ink); font:inherit; font-size:16px;
}
body.mg .mg-abon__form input:focus-visible{ outline:0; border-color:var(--mg-pink); box-shadow:0 0 0 4px var(--mg-p-pink-bg); }
.mg-abon__form .mg-btn{ min-height:52px; }
body.mg .mg-abon__small{ margin:12px 0 0; font-size:13px; line-height:1.4; color:var(--mg-meta); }
body.mg .mg-abon__skip{
  align-self:flex-start; margin:14px 0 0; padding:0; border:0; background:none;
  color:var(--mg-meta); font:inherit; font-size:14px; text-decoration:underline; cursor:pointer;
}
body.mg .mg-abon__skip:hover{ color:var(--mg-ink); }
body.mg .mg-abon p.mg-abon__err{ margin:-2px 0 0; padding:8px 12px; border-radius:8px; background:var(--mg-p-pink-bg); color:var(--mg-pink-text); font-size:14px; line-height:1.4; }
/* Благодарим - същата карта, друг текст */
.mg-abon__ok{ display:flex; flex-direction:column; align-items:flex-start; }
.mg-abon__ok .mg-abon__tag{ background:var(--mg-p-teal-bg); color:var(--mg-teal-text); }
.mg-abon__ok .mg-abon__tag::before{ content:'♥ '; }

@media (max-width:600px){
  .mg-abon{ grid-template-columns:minmax(0,420px); padding:14px; align-content:center; }
  .mg-abon__card{ grid-template-columns:1fr; border-radius:20px; }
  .mg-abon .mg-abon__img{ height:auto; aspect-ratio:16/10; object-position:50% 35%; border-radius:20px 20px 0 0; }
  .mg-abon__body{ padding:22px 20px 22px; }
  .mg-abon__x{ top:10px; right:10px; }
  body.mg .mg-abon__title{ font-size:25px; }
  body.mg .mg-abon__text{ font-size:15px; margin-bottom:16px; }
  body.mg .mg-abon__skip{ align-self:center; }
}

.mg-abon__card--noimg{ grid-template-columns:1fr; }
.mg-abon__state[hidden]{ display:none; }