/* ═══════════════════════════════════════
   SiteRent — forms.css
   Підключіть після основних стилів
═══════════════════════════════════════ */

/* ── Modal ──────────────────────────── */
#sr-modal { display: none; }
#sr-modal.sr-open { display: block; }

.sr-ov {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(6,6,13,.88);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: srFade .2s ease;
}

.sr-box {
  background: #0c0c16;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  width: 100%; max-width: 600px;
  max-height: 92vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  animation: srUp .25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sr-box::-webkit-scrollbar { width: 5px; }
.sr-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.sr-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: #9296b0; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; font-family: inherit;
}
.sr-close:hover { background: rgba(255,255,255,.15); color: #dde0f0; }

/* ── Form wrapper ───────────────────── */
.sr-mf { padding: 40px 36px 36px; }
.sr-mf-c { text-align: center; padding: 56px 36px 44px; }

.sr-mf-badge {
  display: inline-block;
  background: rgba(198,241,53,.1); border: 1px solid rgba(198,241,53,.25);
  color: #c6f135; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 14px;
}

.sr-mf-t {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px; font-weight: 900; letter-spacing: -.03em;
  color: #dde0f0; margin-bottom: 8px; line-height: 1.2;
}

.sr-mf-s {
  font-size: 14px; color: #9296b0; line-height: 1.65;
  margin-bottom: 28px;
}
.sr-mf-s strong { color: #dde0f0; }

/* ── Form elements ──────────────────── */
.sr-form { display: flex; flex-direction: column; gap: 16px; }

.sr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sr-fg { display: flex; flex-direction: column; gap: 5px; }

.sr-lbl {
  font-size: 12px; font-weight: 600; color: #9296b0; letter-spacing: .03em;
}

.sr-inp {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 15px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px; color: #dde0f0;
  transition: border-color .2s, box-shadow .2s;
  width: 100%; outline: none;
  -webkit-appearance: none;
}
.sr-inp::placeholder { color: #3a3d4e; }
.sr-inp:focus {
  border-color: rgba(198,241,53,.55);
  box-shadow: 0 0 0 3px rgba(198,241,53,.09);
  background: rgba(255,255,255,.07);
}
.sr-inp-err { border-color: rgba(255,87,87,.6) !important; }
.sr-inp-err:focus { box-shadow: 0 0 0 3px rgba(255,87,87,.09) !important; }

.sr-ta { resize: vertical; min-height: 84px; line-height: 1.5; }

.sr-sel {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5e78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.sr-sel option { background: #111118; color: #dde0f0; }

/* ── Field error ────────────────────── */
.sr-err {
  font-size: 12px; color: #ff5757;
  display: block; margin-top: 1px;
}

/* ── Submit button ──────────────────── */
.sr-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #c6f135; color: #06060d;
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700;
  padding: 14px 24px; border-radius: 10px;
  border: none; cursor: pointer; transition: all .25s;
  margin-top: 6px; text-decoration: none;
}
.sr-btn:hover {
  background: #d8ff50;
  box-shadow: 0 12px 32px rgba(198,241,53,.3);
  transform: translateY(-1px);
}
.sr-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.sr-lnk {
  background: none; border: none; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 13px; color: #5a5e78;
  margin-top: 10px; text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.sr-lnk:hover { color: #9296b0; }

.sr-note {
  font-size: 12px; color: #5a5e78; line-height: 1.6;
  text-align: center; margin-top: 4px;
}

/* ── Success icon ───────────────────── */
.sr-big-ic {
  font-size: 56px; line-height: 1;
  margin-bottom: 18px; display: block;
  animation: srBounce .5s ease;
}

/* ── Spinner ────────────────────────── */
.sr-spin {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(6,6,13,.3);
  border-top-color: #06060d;
  border-radius: 50%;
  animation: srSpin .7s linear infinite;
  vertical-align: middle;
}

/* ── Toast ──────────────────────────── */
.sr-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 3000;
  background: #111118; border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 13px 18px;
  font-size: 14px; font-weight: 500; color: #dde0f0;
  max-width: 340px; line-height: 1.45;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  transform: translateY(16px); opacity: 0;
  transition: all .3s ease; pointer-events: none;
}
.sr-toast-show   { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sr-toast-ok  { border-color: rgba(198,241,53,.35); }
.sr-toast-err { border-color: rgba(255,87,87,.35); }

/* ── Keyframes ──────────────────────── */
@keyframes srFade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes srUp     { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes srSpin   { to { transform: rotate(360deg) } }
@keyframes srBounce { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) } }

/* ── Mobile ─────────────────────────── */
@media (max-width: 560px) {
  .sr-mf  { padding: 28px 20px 24px; }
  .sr-row { grid-template-columns: 1fr; }
  .sr-box { border-radius: 16px; }
  .sr-toast { bottom: 14px; right: 14px; left: 14px; max-width: none; }
}