.support {
  display: flex;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.support__form {
  display: grid;
  gap: var(--space-large);
  width: min(100%, 24em);
}

.support__form fieldset {
  display: grid;
  gap: 0.8em;
}

.support__form fieldset label {
  align-items: start;
  display: flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.2875em;
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.425em;
}

.support__form fieldset label span {
  display: flex;
  flex: 1;
}

.support__form fieldset label strong {
  background: var(--color-yellow);
  border-radius: 1em;
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  margin-top: 0.3925em;
  padding: 0.3em 0.725em 0.275em 0.725em;
  text-transform: uppercase;
  white-space: nowrap;
}

.support__form fieldset p {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5375em;
}

.support__form fieldset select,
.support__form fieldset input[type=email],
.support__form fieldset input[type=text],
.support__form fieldset textarea {
  appearance: none;
  background-color: rgba(var(--rgb-black), 0.02);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  color: var(--color-black);
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  transition:
    background var(--transition),
    box-shadow var(--transition)
  ;
}

.support__form fieldset select:focus,
.support__form fieldset input[type=email]:focus,
.support__form fieldset input[type=text]:focus,
.support__form fieldset textarea:focus {
  background-color: var(--color-white);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.85),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
}

.support__form fieldset select {
  background-image: url('/assets/images/general/icon-select.svg');
  background-position: right 0.9em center;
  background-repeat: no-repeat;
  background-size: 0.6em auto;
}

.support__form fieldset input[type=email]::placeholder,
.support__form fieldset input[type=text]::placeholder,
.support__form fieldset textarea::placeholder {
  color: rgba(var(--rgb-black), 0.35);
  transition: color var(--transition);
}

.support__form fieldset input[type=email]:focus::placeholder,
.support__form fieldset input[type=text]:focus::placeholder,
.support__form fieldset textarea:focus::placeholder {
  color: transparent;
}

.support__form fieldset input[type=file] {
  display: flex;
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
}

.support__form fieldset.error label strong {
  background: var(--color-red);
  color: var(--color-white);
}

.support__form fieldset.error select,
.support__form fieldset.error input[type=email],
.support__form fieldset.error input[type=text],
.support__form fieldset.error textarea {
  box-shadow:
    0 0 0 1px var(--color-red),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  color: var(--color-red);
}

.support__form fieldset.error select::placeholder,
.support__form fieldset.error input[type=email]::placeholder,
.support__form fieldset.error input[type=text]::placeholder,
.support__form fieldset.error textarea::placeholder {
  color: var(--color-red);
}

.support__form fieldset.error .error {
  color: var(--color-red);
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
}

.support__form button {
  background: var(--color-green);
  border-radius: 0.25em;
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-xxx-small);
  font-weight: 500;
  justify-self: start;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
}



@media(hover: hover) {

  .support__form button {
    transition: background var(--transition);
  }

  .support__form button:focus,
  .support__form button:hover {
    background: var(--color-green-dark);
  }

}



@media(min-width: 64em) {

  .support {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

}