/* input.css - Form input styles */

.input,
.textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--cal-white);
  border: 1px solid var(--cal-line);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--cal-text);
  box-shadow: var(--shadow-xs);
  outline: none;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--cal-text-muted);
}

.input:focus,
.textarea:focus {
  border-color: var(--cal-teal);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12);
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-relaxed);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--cal-text);
}