@charset "UTF-8";

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="datetime-local"],
textarea {
  font-size: 14px;
  font-family: inherit;
  max-width: 100%;
  width: 100%;
  padding: 0 16px;
  border-radius: 2px;
  background-color: var(--color-bg-offWhite);
}

input + input {
  margin-top: 8px;
}

textarea {
  min-height: 100px;
  padding: 8px 16px;
}

textarea.largeTextArea {
  min-height: 360px;
}

/**
/* Disabled Styles
/* ------------------------------------ */
input:disabled,
textarea:disabled {
  background-color: var(--color-bg-lightGray);
}

/**
/* Error Styles
/* ------------------------------------ */

input[type="text"].is-error,
input[type="number"].is-error,
input[type="tel"].is-error,
input[type="email"].is-error,
input[type="password"].is-error,
input[type="datetime-local"].is-error,
textarea.is-error {
  border: 1px solid var(--color-border-error);
  background-color: var(--color-bg-pink);
}

select.is-error {
  border: 1px solid var(--color-border-error);
}

.c-inputErrorText {
  color: var(--color-text-error);
  font-size: 12px;
  margin-top: 4px;
}

/**
/* Form Parts
/* ------------------------------------ */

/* Radio */
.c-formRadio {
  margin: 8px 0;
}

.c-formRadio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.c-formRadio__label {
  cursor: pointer;
}

.c-formRadio__label:before {
  content: "";
  background: var(--color-bg-white);
  border-radius: 100%;
  border: 1px solid var(--color-accent-violet);
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  margin-right: 8px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

input[type="radio"]:checked + .c-formRadio__label:before {
  background-color: var(--color-accent-violet);
  box-shadow: inset 0 0 0 2px var(--color-bg-white);
}

.c-formRadio__label:focus + .c-formRadio__label:before {
  outline: none;
  border-color: var(--color-accent-violet);
}

/* Checkbox */
.c-formCheckboxWrapper {
  display: grid;
  gap: 8px;
}

.c-formCheckbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.c-formCheckbox__input {
  margin: 0;
  width: 0;
  opacity: 0;
}

.c-formCheckbox__box {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-accent-violet);
  border-radius: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c-formCheckbox__text {
  font-size: 16px;
  margin-left: 8px;
  display: block;
}

.c-formCheckbox__input:focus + .c-formCheckbox__box {
  border: 1px solid var(--color-border-brown);
}

.c-formCheckbox__input:checked + .c-formCheckbox__box {
  background-color: var(--color-accent-violet);
}

.c-formCheckbox__input:checked + .c-formCheckbox__box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSIKYXJpYS1kZXNjcmliZWRieT0iZGVzYyIgcm9sZT0iaW1nIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPHRpdGxlPkNoZWNrbWFyazwvdGl0bGU+CiAgPGRlc2M+QSBsaW5lIHN0eWxlZCBpY29uIGZyb20gT3Jpb24gSWNvbiBMaWJyYXJ5LjwvZGVzYz4KICA8cGF0aCBkYXRhLW5hbWU9ImxheWVyMSIKICBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI2IiBkPSJNMTYgMzNsMTEgMTEgMjEtMjIiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+Cjwvc3ZnPgo=")
    no-repeat center;
  background-size: contain;
}

.c-formCheckboxWrapper + .c-inputErrorText {
  margin-top: 8px;
}

/* Select */
.c-formSelectWrapper {
  position: relative;
}

.c-formSelectWrapper::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzEwMDlfMTIzMSkiPgo8cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xN0w3LjQxIDguNTlMNiAxMEwxMiAxNkwxOCAxMEwxNi41OSA4LjU5WiIgZmlsbD0iI0FGNjk5MiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzEwMDlfMTIzMSI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.c-formSelect {
  line-height: 40px;
  width: 100%;
  padding: 0 40px 0 16px;
  border: 1px solid var(--color-border-lightestGray);
  border-radius: 2px;
}