/* Popup look — the 4 layouts. Used by the app (partials/popup-modal) and the admin preview. */
.vpop { position: fixed; z-index: 9500; box-sizing: border-box; }
.vpop *, .vpop *::before, .vpop *::after { box-sizing: border-box; }
.vpop[hidden] { display: none; }

.vpop__wrap { position: relative; width: 100%; max-width: 380px; animation: vpopIn .28s ease-out; }
.vpop__card { display: flex; flex-direction: column; gap: 12px; width: 100%; max-height: 88vh;
              overflow: auto; border-radius: 20px; box-shadow: 0 20px 55px rgba(0, 0, 0, .3);
              background-size: cover; background-position: center; }
.vpop__card--act { cursor: pointer; }
@keyframes vpopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vpop__wrap { animation: none; } }

.vpop__text { margin: 0; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.vpop__img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; }
.vpop__img--act { cursor: pointer; }
.vpop__btn { display: flex; align-items: center; width: 100%; padding: 13px 18px; border: 0; cursor: pointer; line-height: 1.2; text-align: center; }
.vpop__btn:active { transform: scale(.98); }
.vpop__close { position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
               color: #1A2F5C; display: flex; align-items: center; justify-content: center; cursor: pointer;
               box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* Center — a card in the middle with a dimmed backdrop (tap outside closes). */
.vpop--center { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .6); }

/* Full — the card is the whole screen. */
.vpop--full { inset: 0; }
.vpop--full .vpop__wrap { max-width: none; height: 100%; }
.vpop--full .vpop__card { max-height: none; height: 100%; border-radius: 0; justify-content: center; box-shadow: none; }

/* Top / Bottom — a strip over the page; the page behind stays usable. */
.vpop--top, .vpop--bottom { left: 0; right: 0; padding: 20px; pointer-events: none; }   /* 20px leaves room for the half-outside ✕ */
.vpop--top { top: 0; padding-top: max(24px, calc(env(safe-area-inset-top) + 14px)); }
.vpop--bottom { bottom: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.vpop--top .vpop__wrap, .vpop--bottom .vpop__wrap { max-width: 560px; margin: 0 auto; pointer-events: auto; }
.vpop--top .vpop__card, .vpop--bottom .vpop__card { max-height: 60vh; border-radius: 16px; }
.vpop--top .vpop__img, .vpop--bottom .vpop__img { max-height: 140px; }

/* Admin preview: drawn inside a phone-shaped box instead of over the whole page. */
.vpop--preview { position: absolute; }
.vpop--preview .vpop__wrap { animation: none; }

body.vpop-open { overflow: hidden; }