input[type="text"],
input[type="email"],
textarea {
  background-color: transparent;
  border: none;
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg);
  resize: none;
  color: var(--primary-color);
  line-height: 1.618;

  border: 1px solid hsl(from var(--primary-color) h s l / 0.15);

  backdrop-filter: blur(3px);
  background-image: radial-gradient(
    circle at 50% -100px,
    hsl(from var(--accent-color) h s l / 0.05) 0.5px,
    transparent
  );
  box-shadow: 0 0.5rem 2rem hsl(from var(--primary-color) h s l / 0.15);
}

.contact-wrapper {
  .contact-form-info {
    color: var(--text-color-light);
    line-height: 1.618;
    margin-bottom: var(--spacing-lg);
    .contact-form-info-title {
      display: inline-block;
      font-size: clamp(1.25rem, 5svw, 2rem);
      font-weight: 700;
      margin-bottom: var(--spacing-md);
      color: var(--text-color);
      max-width: 24rem;
    }

    p {
      max-width: 24rem;
    }
  }

  .character-counter {
    font-size: 0.75rem;
    color: var(--text-color-light);
    margin-top: var(--spacing-xs);
  }

  .form-group {
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    label {
      font-weight: 400;
      font-size: 0.85rem;
      color: var(--text-color);
      margin-bottom: 0;
      &:not(.no-margin) {
        margin-bottom: var(--spacing-xs);
      }
    }
  }

  .success-message, .error-message {
    text-align: center;
    border: 1px solid hsl(from olivedrab h s l / 0.25);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    margin-block: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: olivedrab;
    font-size: 0.85rem;
    margin-top: var(--spacing-md);

    backdrop-filter: blur(3px);
  background-image: radial-gradient(
    circle at 50% -100px,
    hsl(from var(--accent-color) h s l / 0.05) 0.5px,
    transparent
  );
    svg {
      width: 1.5rem;
      height: 1.5rem;
      fill: var(--accent-color);
    }
  }

  .error-message {
    color: var(--error-color);
    border-color: hsl(from var(--error-color) h s l / 0.25);
  }

  button {
    color: var(--white);
    background: linear-gradient(
      45deg,
      hsl(from var(--accent-color) h s 32),
      hsl(from var(--accent-color) h s 45)
    );
    /* display: inline-block; */
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    text-decoration: none;
    box-shadow: var(--glowing-shadows);
    transition: box-shadow 0.15s ease;
    border-radius: var(--radius-lg);
    transition: filter 0.3s ease, box-shadow 0.3s ease;

    &:disabled {
      filter: grayscale(1);
      cursor: not-allowed;
    }

    @media screen and (max-width: 768px) {
      font-size: 0.85rem;
      padding: var(--spacing-xs) var(--spacing-sm);
      display: block;
      max-width: 12rem;
      margin: 0 auto;
    }

    &:hover {
      box-shadow: var(--glowing-shadows-hover);
    }
  }
}

.sending-loader {
  color: transparent;
  /* border: 2px solid var(--accent-color); */
  display: inline-block;
  svg {
    height: 4rem;
    width: 4rem;
    g {
      transform: translate3d();
      stroke-dasharray: 300;
      stroke: hsl(from var(--accent-color) h s l / 1);
      stroke-width: 6px;
      animation-name: logoLoading;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes logoLoading {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 3000;
  }
}