:root{
  --bg:#f7f7fb; --card:#fff; --text:#222; --muted:#6b7280; --primary:#008080;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
.site-header,.site-footer{padding:16px 20px;background:#fff;border-bottom:1px solid #eee}
.site-footer{border-top:1px solid #eee;border-bottom:none}
.brand__title{font-weight:700}
.brand__subtitle{color:var(--muted);font-size:14px;margin-top:2px}
.container{max-width:1000px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #eee;border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
h2{margin:0 0 14px 0}
h3{margin:18px 0 10px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:14px;font-weight:600}
.field input,.field select{padding:10px 12px;border:1px solid #ddd;border-radius:10px}
small{color:var(--muted)}
.consent{display:flex;align-items:center;gap:10px}
.actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.actions button{border:none;border-radius:10px;padding:12px 14px;font-weight:600;cursor:pointer}
#previewBtn{background:#e5f4f4;color:#055}
#printBtn{background:var(--primary);color:#fff}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.send-email{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ddd;border-radius:10px;padding:10px 12px}

.print-area{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;margin-top:16px}
.contract{color:#000;line-height:1.5}
.contract h1{font-size:22px;margin:.2em 0}
.contract h2{font-size:16px;margin:.4em 0 .8em 0}
.contract h3{font-size:16px;margin:1em 0 .5em 0}
.contract p{margin:.5em 0}
.contract-meta{display:flex;justify-content:space-between;margin-bottom:.8em}
.pay-block{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px dashed #bbb;border-radius:12px;padding:12px;margin:10px 0}
.qr-wrap{width:140px;height:140px;display:flex;align-items:center;justify-content:center;border:1px solid #eee;border-radius:8px;background:#fff}
.qr-wrap img{max-width:100%;max-height:100%;display:block}
.pep-stamp{margin-top:18px;font-size:12px;color:#444;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#fafafa}
.signatures{display:flex;justify-content:space-between;gap:20px;margin-top:16px}

@media print{
  body{background:#fff}
  header,footer,.container form{display:none!important}
  .print-area{border:none;margin:0;padding:0}
}

/* === Валидация: зелёный — ок, красный — ошибка === */
.field input.is-valid, .field select.is-valid {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.field input.is-invalid, .field select.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.field .hint-error { color:#dc2626; font-size:12px; display:none; }
.field.invalid .hint-error { display:block; }

/* --- POPUP --- */
.popup{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;}
.popup.show{display:flex;}
.popup__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.popup__dialog{
  position:relative; width:min(1200px,95vw); max-height:90vh; background:#fff;
  border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); padding:16px; overflow:auto;
}
.popup__close{
  position:absolute; top:8px; right:10px; border:0; background:transparent;
  font-size:28px; line-height:1; cursor:pointer; color:#666;
}
.popup__title{margin:0 0 12px 0; font-size:18px; color:#222;}
.popup__frames{display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:1024px){ .popup__frames{ grid-template-columns:repeat(3, 1fr);} }
.popup__frame{display:flex; flex-direction:column; gap:6px;}
.popup__caption{font-size:13px; color:#666;}
.popup__frame iframe{
  width:100%; height:65vh; border:1px solid #e5e5e5; border-radius:8px; background:#fff;
}
/* подложка */
#previewModal {
  position: fixed;
  inset: 0;
  display: none;                /* скрыт по умолчанию */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
  z-index: 1000;
}

#previewModal.show { display: flex; }

/* само окно */
.popup__dialog {
  width: min(1100px, 96vw);
  max-height: calc(100vh - 64px); /* ключ: ограничили по высоте */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;               /* скроем рамки, но не контент */
  display: flex;
  flex-direction: column;
}

/* область прокрутки внутри окна */
.popup__scroll {
  overflow-y: auto;               /* ключ: вертикальный скролл */
  -webkit-overflow-scrolling: touch; /* iOS */
  max-height: inherit;            /* унаследовать ограничение */
  padding: 16px;
  gap: 16px;
  display: grid;
}

/* заголовок/кнопка закрытия без влияния на скролл */
.popup__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #eee;
}

/* iframe'ам даём высоту, чтобы было что скроллить */
.popup__scroll iframe {
  width: 100%;
  height: 60vh;                   /* или 50–70vh по вкусу */
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}