/* =====================================================================
   Плейсхолдер системных попапов — финальный дизайн desktop/mobile позже.
   Разметка: inc/modals.php · JS: assets/js/modals.js
   ===================================================================== */

.vb-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.vb-modal[hidden] { display: none; }

.vb-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 16, 10, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 0; padding: 0; cursor: pointer;
}

.vb-modal__panel {
  position: relative; z-index: 1;
  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--vb-cream);
  color: var(--vb-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: clamp(22px, 4vw, 36px);
}

.vb-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--vb-line); background: #fff; color: var(--vb-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.vb-modal__close:hover { border-color: var(--vb-gold); }

.vb-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 36px 16px 0;
}

.vb-modal__body { font-size: 16px; line-height: 1.55; color: var(--vb-ink-2); }
.vb-modal__body p { margin: 0 0 12px; }
.vb-modal__body--mob { display: none; }

.vb-modal__hint {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--vb-line);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vb-ink-3);
}

@media (max-width: 759.98px) {
  .vb-modal { align-items: flex-end; padding: 0; }
  .vb-modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .vb-modal__body--desk:has(+ .vb-modal__body--mob),
  .vb-modal__panel:has(.vb-modal__body--mob) .vb-modal__body--desk { display: none; }
  .vb-modal__body--mob { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .vb-modal__backdrop { animation: vb-modal-fade .22s ease; }
  .vb-modal__panel { animation: vb-modal-rise .28s var(--ease-soft, ease); }
}
@keyframes vb-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vb-modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-modal__backdrop, .vb-modal__panel { animation: none; }
}