/* forms.css — ფორმის ველები, შეტყობინებები, switch, დამატებითი ღილაკები */

/* ── ფორმა და ველი ─────────────────────────────────────────── */
.auth-form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); }
.field-link {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-accent-text);
  border-radius: var(--radius-xs);
}
.field-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.field-control { position: relative; display: flex; align-items: center; }
.field-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(8, 11, 17, 0.62);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field-input::placeholder { color: var(--c-text-3); opacity: 1; }
.field-input:hover { border-color: rgba(255, 255, 255, 0.24); }
.field-input:focus {
  outline: none;
  border-color: rgba(173, 196, 255, 0.75);
  background: rgba(8, 11, 17, 0.8);
  box-shadow: 0 0 0 4px rgba(61, 126, 255, 0.2);
}
.field-input[aria-invalid="true"] { border-color: rgba(255, 90, 106, 0.85); }
.field-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(255, 59, 79, 0.18); }
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  caret-color: var(--c-text);
  box-shadow: 0 0 0 1000px #101622 inset;
  transition: background-color 9999s;
}

.field-control--password .field-input { padding-right: 54px; }
.field-toggle {
  position: absolute;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--c-text-2);
}
.field-toggle:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.05); }
.field-toggle .icon-eye-off,
.field-toggle[aria-pressed="true"] .icon-eye { display: none; }
.field-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.field-textarea {
  height: auto;
  min-height: 116px;
  padding: 13px 16px;
  resize: vertical;
  line-height: 1.55;
}

.field-select { padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.field-select option { background: var(--c-surface); color: var(--c-text); }
.field-select-icon { position: absolute; right: 14px; color: var(--c-text-2); pointer-events: none; }

.field-hint { font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text-3); }
.field-error {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: #ff97a2;
}
.field-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.field-counter { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-3); font-variant-numeric: tabular-nums; }

/* ── პაროლის მოთხოვნები ───────────────────────────────────── */
.password-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.password-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  transition: color var(--dur-fast) var(--ease);
}
.password-rule .icon {
  padding: 2px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  color: transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.password-rule.is-met { color: #9fe3c4; }
.password-rule.is-met .icon { background: rgba(62, 207, 142, 0.18); border-color: rgba(62, 207, 142, 0.5); color: #6fe0ae; }

/* ── ფორმის შეტყობინება ──────────────────────────────────── */
.form-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.form-alert--error { background: rgba(255, 59, 79, 0.1); border: 1px solid rgba(255, 59, 79, 0.38); color: #ffd4d9; }
.form-alert--success { background: rgba(62, 207, 142, 0.1); border: 1px solid rgba(62, 207, 142, 0.4); color: #cdf6e3; }

/* ── Switch ───────────────────────────────────────────────── */
.field--switch { align-content: end; }
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 11, 17, 0.62);
  cursor: pointer;
}
.switch-text { display: grid; gap: 2px; min-width: 0; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--c-surface-3);
  border: 1px solid var(--c-line-strong);
  transition: background-color var(--dur-fast) var(--ease);
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c9d2e3;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.switch-input:checked + .switch-track { background: var(--c-accent); border-color: transparent; }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: #fff; }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ── ღილაკები ─────────────────────────────────────────────── */
.btn-block { width: 100%; }
.btn:disabled { cursor: progress; opacity: 0.72; }
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
.btn[aria-busy="true"] .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-oauth {
  background: #f3f5fa;
  color: #101522;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn-oauth:hover { background: #ffffff; }

.btn-danger {
  background: rgba(255, 59, 79, 0.12);
  border: 1px solid rgba(255, 59, 79, 0.45);
  color: #ffb3bc;
}
.btn-danger:hover { background: rgba(255, 59, 79, 0.2); color: #ffd4d9; }

/* ── მოსანიშნი ველი (checkbox) ── */
.field--check { gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-2); }
.check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--c-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.check:hover .check-box { border-color: rgba(173, 196, 255, 0.5); }
.check-input:checked + .check-box { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.check-input:focus-visible + .check-box { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.check-input[aria-invalid="true"] + .check-box { border-color: var(--c-danger); }