@import url('site.css');

.srl-form-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--srl-cream-2); }
.srl-form-card { background: #fff; border-radius: 20px; box-shadow: 0 14px 44px rgba(26,23,20,.10); padding: 40px 36px; width: 100%; max-width: 480px; }
.srl-form-card img.srl-form-logo { height: 36px; margin-bottom: 22px; }
.srl-form-title { font-family: var(--font-display); font-weight: 900; font-size: 26px; margin: 0 0 8px; }
.srl-form-subtitle { color: var(--srl-muted); font-size: 15px; margin: 0 0 26px; line-height: 1.5; }

.srl-field { display: block; margin-bottom: 18px; }
.srl-field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #45403A; }
.srl-field input, .srl-field select {
  width: 100%; border: 2px solid #ECE3D2; border-radius: 10px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px; color: var(--srl-dark); background: #FCFAF5; outline: none;
}
.srl-field input:focus, .srl-field select:focus { border-color: var(--srl-green); }
.srl-field .hint { font-size: 12.5px; color: var(--srl-muted); margin-top: 5px; }

.srl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.srl-form-status { font-size: 14px; font-weight: 600; margin-top: 14px; text-align: center; }
.srl-form-status.ok { color: var(--srl-green); }
.srl-form-status.error { color: var(--srl-red); }

.srl-modal-backdrop::backdrop { background: rgba(26,23,20,.55); }
.srl-modal-backdrop { border: none; border-radius: 20px; padding: 0; max-width: 480px; width: 92vw; }
.srl-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--srl-muted); line-height: 1; }

@media (max-width: 520px) {
  .srl-grid-2 { grid-template-columns: 1fr; }
  .srl-form-card { padding: 30px 22px; }
}