.tzq-form-group {
  margin-bottom: var(--tzq-spacing-lg);
}
.tzq-form-group--compact {
  margin-bottom: var(--tzq-spacing-md);
}
.tzq-form-group--spacious {
  margin-bottom: var(--tzq-spacing-lg);
}
.tzq-form-group__label {
  display: block;
  font-weight: var(--tzq-font-semibold);
  color: var(--tzq-text-primary);
  margin-bottom: var(--tzq-spacing-sm);
  font-size: var(--tzq-text-sm);
}
.tzq-form-group__label--flex {
  display: flex;
  align-items: center;
  gap: var(--tzq-spacing-xs);
  font-weight: 600;
  font-size: var(--tzq-text-sm);
  margin-bottom: var(--tzq-spacing-xs);
}
.tzq-form-group__label--required::after {
  content: "*";
  color: var(--tzq-error);
  margin-left: var(--tzq-spacing-1);
}
.tzq-form-group__input {
  width: 100%;
  padding: var(--tzq-input-padding);
  background: var(--tzq-bg-primary);
  border: 1px solid var(--tzq-primary-light);
  border-radius: var(--tzq-radius-md);
  font-size: var(--tzq-text-base);
  font-family: var(--tzq-font-primary);
  color: var(--tzq-text-primary);
  transition: var(--tzq-transition-all);
  outline: none;
}
.tzq-form-group__input:focus {
  border-color: var(--tzq-primary);
  box-shadow: var(--tzq-input-focus-ring);
  background: var(--tzq-bg-primary);
}
.tzq-form-group__input::placeholder {
  color: var(--tzq-text-tertiary);
  opacity: 0.7;
}
.tzq-form-group__input--error {
  border-color: var(--tzq-error);
}
.tzq-form-group__input--success {
  border-color: var(--tzq-success);
}
.tzq-form-group__input:disabled {
  background: var(--tzq-bg-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}
.tzq-form-group__textarea {
  width: 100%;
  padding: var(--tzq-input-padding);
  background: var(--tzq-bg-primary);
  border: 1px solid var(--tzq-primary-light);
  border-radius: var(--tzq-radius-md);
  font-size: var(--tzq-text-base);
  font-family: var(--tzq-font-primary);
  color: var(--tzq-text-primary);
  transition: var(--tzq-transition-all);
  outline: none;
  min-height: 120px;
  resize: vertical;
}
.tzq-form-group__textarea:focus {
  border-color: var(--tzq-primary);
  box-shadow: var(--tzq-input-focus-ring);
  background: var(--tzq-bg-primary);
}
.tzq-form-group__textarea::placeholder {
  color: var(--tzq-text-tertiary);
  opacity: 0.7;
}
.tzq-form-group__textarea--error {
  border-color: var(--tzq-error);
}
.tzq-form-group__textarea--success {
  border-color: var(--tzq-success);
}
.tzq-form-group__select {
  width: 100%;
  padding: var(--tzq-input-padding);
  background: var(--tzq-bg-primary);
  border: 1px solid var(--tzq-primary-light);
  border-radius: var(--tzq-radius-md);
  font-size: var(--tzq-text-base);
  font-family: var(--tzq-font-primary);
  color: var(--tzq-text-primary);
  transition: var(--tzq-transition-all);
  outline: none;
}
.tzq-form-group__select:focus {
  border-color: var(--tzq-primary);
  box-shadow: var(--tzq-input-focus-ring);
  background: var(--tzq-bg-primary);
}
.tzq-form-group__select--error {
  border-color: var(--tzq-error);
}
.tzq-form-group__select--success {
  border-color: var(--tzq-success);
}
.tzq-form--inline {
  display: flex;
  align-items: flex-end;
  gap: var(--tzq-spacing-md);
  flex-wrap: wrap;
}
.tzq-form--inline .tzq-form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.tzq-form-group__help {
  display: block;
  font-size: var(--tzq-text-sm);
  color: var(--tzq-text-tertiary);
  margin-top: var(--tzq-spacing-1);
}
.tzq-form-group__error {
  display: block;
  font-size: var(--tzq-text-sm);
  color: var(--tzq-error);
  margin-top: var(--tzq-spacing-1);
  animation: shake 0.5s ease;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}
.tzq-form-check {
  display: flex;
  align-items: center;
  gap: var(--tzq-spacing-2);
  margin-bottom: var(--tzq-spacing-3);
}
.tzq-form-check__input {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.tzq-form-check__label {
  cursor: pointer;
  user-select: none;
  font-weight: var(--tzq-font-normal);
}
