/**
 * forms.css - Glass enquiry form.
 * Requirements: 15.1, 15.7
 */

.lead-form {
  padding: 2rem 1.25rem;
}

.lead-form__grid {
  display: grid;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  color: var(--color-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  outline: none;
  appearance: none;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-error {
  color: #ff8a8a;
  font-size: 0.85rem;
}

.form-server-errors {
  color: #ff8a8a;
  margin-bottom: 0.75rem;
}

.ascenra-btn--loading {
  pointer-events: none;
  opacity: 0.7;
}

.ascenra-btn--loading::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.form-success-panel {
  display: none;
  padding: 2rem;
  text-align: center;
}

.form-success-panel.is-visible {
  display: block;
}

.lead-form.is-hidden {
  display: none;
}