/* FORMS */
select,
input,
button,
textarea {
  font-size: inherit;
  font-family: inherit;
}

.select .icon-caret,
.customer select+svg {
  height: 0.75em;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.25em);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

/* component-form */
.field.btn-style:before {
  border-radius: var(--button-radius);
}

.field.btn-style:after {
  border-radius: var(--button-radius);
}

.field.btn-style input {
  border-radius: var(--button-radius);
}

.field.btn-style:hover {
  border-radius: var(--button-radius);
}

.field.btn-style:hover.field:after {
  border-radius: var(--button-radius);
}


.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--input-radius);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) hsla(var(--black), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--input-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) hsla(var(--black), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}



.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) hsla(var(--black), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--input-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) hsla(var(--black));
  outline: 0;
  border-radius: var(--input-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) hsla(var(--black));
  outline: 0;
  border-radius: var(--input-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.textarea,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */
.select {
  align-items: center;
  gap: 0.5em;
}

.select .icon-caret,
.customer select+svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

.select__select,
.customer select {
  cursor: pointer;
  padding: 0.5em;
  margin: var(--inputs-border-width);
  width: 100%;
  appearance: none;
  border: none;
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: grid;
  transition: box-shadow var(--duration-short) ease;
}

.file-field {
  display: grid;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  transition: box-shadow var(--duration-short) ease;
}

.field label {
  left: 1em;
  top: 50%;
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  display: block;
  transform: translateY(-50%);
  color: hsl(var(--black));
}

.field.textarea:not(:focus-within) label {
  top: 1em;
}

.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label,
.field__input:autofill~.field__label,
.customer .field input:focus~label,
.customer .field input:not(:placeholder-shown)~label,
.customer .field input:autofill~label {
  top: calc(var(--inputs-border-width) + 0.25em);
  left: calc(var(--inputs-border-width) + 1em);
  letter-spacing: 0.05em;
  transform: translateY(0);
  font-size: 0.66em;
}


.field:focus-within label,
.field:has(input:not(:placeholder-shown)) label,
.field.textarea:has(textarea:not(:placeholder-shown)) label {
  top: calc(var(--inputs-border-width) + 0.25em);
  left: calc(var(--inputs-border-width) + 1em);
  transform: translateY(0);
  font-size: 0.66em;
}

textarea+.field__label {
  top: 0.5em;
  transform: translateY(0);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  padding: 0.5em;
  position: absolute;
  right: 0;
  top: 0;
  width: max-content;
  min-width: var(--min-height);
}

.field__button>svg {
  height: 1em;
  width: 1em;
}

.field__input:-webkit-autofill~.field__button,
.field__input:-webkit-autofill~.field__label,
.customer .field input:-webkit-autofill~label {
  color: rgb(0, 0, 0);
}

/* Text area */

.textarea {
  font-family: var(--body-style);
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

.checkbox .fill {
  fill: hsl(var(--white));
}

.checkbox .check {
  fill: none;
}

input:checked+.icon .checkbox .check {
  fill: hsl(var(--white));
}

input:checked+.icon .checkbox .fill {
  fill: hsl(var(--red));
}

/* Form global */

.form-label {
  display: block;
  margin-bottom: 0.5em;
}

.form__message {
  align-items: center;
  display: flex;

  line-height: 1;
  margin-top: 1rem;
}



.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;

}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}


/* FORM AND INPUTS */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  appearance: checkbox;
  height: 1em;
  width: 1em;
} 

.field input,
.field textarea,
.field select {
  border: 1px solid hsl(var(--gray));
  border-radius: var(--input-radius);
  background-color: hsla(var(--white));
  width: 100%;
  min-height: 3.25em;
  padding: 1em 0.75em 0.10em;
}
 
.field textarea {
  padding: 1.5em 0.75em 0.10em;
}

.field input[type="date"] {
  padding: 0.55em 0.75em;
}

.field input::placeholder,
.field textarea::placeholder {
  opacity: 0;
}


.field input[type="checkbox"],
.field input[type="radio"] {
  height: 1em;
  width: 1em;
}



.field .check-box {
  display: flex;
  align-items: center;
  gap: 0.5em;
}



.field .check-box label {
  font-weight: 400;
}

.field {
  align-self: flex-end;
}

.field textarea {
  height: 5em;
}

.file-field input[type="file"] {
  width: 100%;
  padding: 0.35em 0.75em;
  border-radius: var(--input-radius);
}

/* Contact form 7 Specific */

.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 1em;
  font-weight: normal;
  display: block;
  position: absolute;
  left: 1em;
  top: 1.5em;
}