form {
  width: 50%;
  font-size: 0.8rem;
}

@media (max-width: 1000px) {
  form {
    width: 100%;
    font-size: 1rem;
  }
}

form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  cursor: pointer;
}

form label>input,
form label>textarea {
  margin-top: 0.5rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid;
  border-color: var(--text-color);
  padding: 10px 5px;
  transition: box-shadow 0.2s;
}

label.in-row {
  flex-direction: row;
  align-items: center;
  justify-content: start;
  column-gap: 0.5rem;
}

label.in-row>input {
  margin-top: 0;
}

.form-row {
  display: flex;
  flex-direction: row;
  column-gap: 2rem;
}

.form-row>label {
  flex: 1 1 auto;
  width: 40%;
}

@media (max-width: 1000px) {
  .form-row {
    flex-direction: column;
  }

  .form-row>label {
    width: 100%;
  }

  #contact-us-sunbmit-btn {
    margin-top: 1rem;
    width: 100%;
  }
}

/* Focus */
input:focus,
textarea:focus {
  border-color: var(--borders-color-1);
  background-color: color-mix(in srgb, var(--borders-color-1) 20%, rgba(255, 255, 255, 0.05));
}

label:has(input:focus) span,
label:has(textarea:focus) span {
  color: var(--borders-color-1);
}

/* Valid */
input:required:valid,
input[type="checkbox"]:required:valid,
textarea:required.valid {
  border-color: var(--color-success);
  accent-color: var(--color-success);
  background-color: color-mix(in srgb, var(--color-success) 10%, rgba(255, 255, 255, 0.05));
}

label:has(input:required:valid) span,
label:has(textarea:required:valid) span {
  color: var(--color-success);
}

/* Invalid touched */
input:required:invalid.touched,
textarea:required.invalid.touched {
  border-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, rgba(255, 255, 255, 0.05));
}

label:has(input:required:invalid.touched) span,
label:has(textarea:required.invalid.touched) span {
  color: var(--color-error);
}

button:disabled {
  color: var(--color-disabled) !important;
  border-color: var(--color-disabled) !important;
  background-color: var(--color-bg);
  background: var(--color-bg);
  animation: pulse-loading 0.5s ease-in-out infinite alternate-reverse;
}

form:has(button:disabled) input,
form:has(button:disabled) textarea {
  color: var(--color-disabled);
  border-color: var(--color-disabled) !important;
  background-color: var(--color-bg);
  animation: pulse-loading 0.5s ease-in-out infinite alternate-reverse;
}

form:has(button:disabled) label {
  color: var(--color-disabled) !important;
}

@keyframes pulse-loading {
  0% {
    background-color: var(--text-color) !important;
    background: var(--text-color) !important;
  }

  100% {
    background-color: var(--color-disabled) !important;
    background: var(--color-disabled) !important;
  }
}