/* ============================================================
   site-v19.css — Adaptive modal sizing (v1.5.5)
   Make modal grow with its content so it doesn't force a
   scrollbar; only scroll when truly taller than viewport.
   ============================================================ */

.modal-backdrop {
  align-items: flex-start !important;
  padding: 24px 16px !important;
  overflow-y: auto !important;
}

/* Modal itself: shrink-to-fit content, no fixed cap */
.modal {
  max-width: 460px !important;
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* Body should grow naturally — never inner-scroll */
.modal-body {
  overflow: visible !important;
  max-height: none !important;
  flex: 0 1 auto !important;
  padding: 16px 22px 18px !important;
}

/* Tighten internal spacing for the register form so it fits without bloat */
.modal-body form { display: flex; flex-direction: column; }
.modal-body .input-group { margin-bottom: 10px !important; }
.modal-body .input-group:last-of-type { margin-bottom: 6px !important; }
.modal-body .input-group label { font-size: 11px !important; margin-bottom: 4px !important; }
.modal-body .input-group input,
.modal-body .input-group select,
.modal-body .input-group textarea {
  padding: 8px 12px !important;
  font-size: 13px !important;
}
.modal-body .input-group .hint { font-size: 11px !important; margin-top: 4px !important; line-height: 1.4 !important; }
.modal-body .role-row { gap: 8px !important; margin-bottom: 10px !important; }
.modal-body .role-row .role-card { padding: 10px 8px !important; gap: 4px !important; }
.modal-body .role-row .role-card .ic { width: 28px !important; height: 28px !important; font-size: 13px !important; margin-bottom: 2px !important; }
.modal-body .role-row .role-card .ttl { font-size: 12px !important; }
.modal-body .role-row .role-card .sub-l { font-size: 10px !important; line-height: 1.2 !important; }
.modal-body .input-row { gap: 8px !important; }
.modal-body button[type="submit"] { padding: 10px 18px !important; margin-top: 4px !important; }
.modal-body h3 { font-size: 14px !important; margin-bottom: 2px !important; }
.modal-body .sub { font-size: 12px !important; margin-bottom: 12px !important; }
.modal-body .forgot { margin: 0 0 6px !important; }
.modal-body .divider { margin: 10px 0 !important; }
.modal-body .login-mode { padding: 6px !important; font-size: 11px !important; }
.modal-body .social-btn { padding: 9px 12px !important; font-size: 12px !important; }

/* Modal head + footer stay compact */
.modal-head { padding: 16px 22px 14px !important; }
.modal-foot { padding: 10px 22px 16px !important; }
.modal-foot .alt { font-size: 12px !important; }

@media (max-width: 520px) {
  .modal-backdrop { padding: 12px !important; }
  .modal { max-width: 100% !important; }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px !important; padding-right: 16px !important; }
}