/**
 * @file
 * Contact webform wizard styles.
 */

.contact-webform {
  box-sizing: border-box;
  width: min(100%, 560px);
  margin-inline: auto;
  overflow: hidden;
  color: #4d4d4d;
  font-family: "Teva Sans", Arial, sans-serif;
  background: #f4f7fa;
  border-radius: 20px;
  backdrop-filter: blur(47px);
}

.contact-webform *,
.contact-webform *::before,
.contact-webform *::after {
  box-sizing: border-box;
}

#webform-submission-contact-form-ajax-content:focus {
  outline: none;
}

.contact-webform .webform-progress {
  margin: 0;
}

.contact-webform .webform-progress-tracker {
  display: flex;
  width: 100%;
  height: 44px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  border-radius: 20px 20px 0 0;
}

.contact-webform .webform-progress-tracker .progress-step {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  min-width: 0;
  height: 44px;
  padding: 0;
  margin: 0;
  transition: flex-basis 180ms ease;
}

.contact-webform .webform-progress-tracker .progress-step:nth-child(1) {
  background: var(--color-brand-green);
}

.contact-webform .webform-progress-tracker .progress-step:nth-child(2) {
  background: var(--color-brand-teal);
}

.contact-webform .webform-progress-tracker .progress-step:nth-child(3) {
  background: var(--color-brand-navy);
}

.contact-webform .webform-progress-tracker .progress-step.is-active {
  flex: 1 1 auto;
  width: auto;
}

.contact-webform .webform-progress-tracker .progress-marker,
.contact-webform .webform-progress-tracker .progress-marker::before,
.contact-webform .webform-progress-tracker .progress-marker::after,
.contact-webform .webform-progress-tracker .progress-step::after {
  display: none;
  content: none;
}

.contact-webform .webform-progress-tracker .progress-text {
  display: none;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 20px;
  color: var(--color-brand-white);
}

.contact-webform .webform-progress-tracker .progress-step.is-active .progress-text {
  display: flex;
  color: var(--color-brand-white);
}

.contact-webform .webform-progress-tracker .progress-title {
  width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-webform > [data-webform-key],
.contact-webform .webform-wizard-page {
  padding: 30px 24px 0;
  margin: 0;
  border: 0;
}

.contact-webform .webform-wizard-page > .webform-element-description,
.contact-webform .webform-wizard-page > h2,
.contact-webform .webform-wizard-page > legend {
  display: none;
}

.contact-webform .form-item,
.contact-webform .webform-flexbox {
  margin-block: 0 12px;
}

.contact-webform .form-item-institution input::placeholder {
  font-size: 0.6875rem;
}

.contact-webform .webform-flexbox {
  display: flex;
  gap: 10px;
  margin-inline: 0;
}

.contact-webform .webform-flexbox > .webform-flex {
  min-width: 0;
  padding: 0;
  margin: 0;
}

.contact-webform label:not(.option) {
  display: block;
  margin: 0 0 4px;
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.contact-webform input.required + .description .webform-element-description {
  display: inline;
}

.contact-webform .form-required::after,
.contact-webform input.required + .description::after {
  content: "*";
  display: inline;
}

.contact-webform input[type="text"],
.contact-webform input[type="email"],
.contact-webform input[type="tel"],
.contact-webform select,
.contact-webform textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 9px 16px;
  color: #000;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  background: var(--color-brand-white);
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  box-shadow: none;
}

.contact-webform input[type="text"],
.contact-webform input[type="email"],
.contact-webform input[type="tel"],
.contact-webform select {
  height: 42px;
}

.contact-webform select {
  padding-right: 42px;
  padding-left: 18px;
  appearance: none;
  background-image: url("../assets/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 8px;
}

.contact-webform textarea {
  min-height: 126px;
  resize: vertical;
}

.contact-webform input:focus,
.contact-webform select:focus,
.contact-webform textarea:focus {
  border-color: var(--color-brand-green);
  outline: 2px solid rgb(58 145 65 / 24%);
  outline-offset: 1px;
}

.contact-webform .form-type-checkbox {
  position: relative;
  padding-left: 30px;
}

.contact-webform .form-type-checkbox input {
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-brand-green);
}

.contact-webform .form-type-webform-markup,
.contact-webform .form-type-processed-text {
  margin-top: 20px;

  & p {
    color: #4D4D4D;
    font-family: "Teva Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;

    &:first-of-type {
      margin-top: 0;
    }
  }
}

.contact-webform .form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 18px 24px 20px;
  margin: 0;
}

.contact-webform .form-actions .button {
  width: auto;
  padding: 10px 20px;
  color: var(--color-brand-white);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: normal;
  cursor: pointer;
  background-color: var(--color-brand-teal);
  border: 1.5px solid var(--color-brand-teal);
  border-radius: 999px;

  &:hover,
  &:focus-visible {
    background-color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
    color: var(--color-brand-white);
  }
}

.contact-webform .form-actions .webform-button--next {
  padding-right: 38px;
  background-image: url("../assets/arrow-right-white.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
  background-size: 12px 12px;
}

.contact-webform .form-actions .webform-button--previous {
  color: var(--color-brand-white);
  background-color: #9F9FA9;
  border-color: currentColor;
}

.contact-webform .form-actions .button:hover,
.contact-webform .form-actions .button:focus-visible {
  filter: brightness(0.9);
}

.contact-webform .form-actions .button:focus-visible {
  outline: 2px solid var(--color-brand-navy);
  outline-offset: 2px;
}

.contact-webform .form-item--error-message {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
}

.contact-webform .form-item--error-message {
  color: #b42318;
}

.contact-webform .webform-confirmation {
  padding: 32px 24px;
  color: #374151;
  font-size: 16px;
  line-height: 24px;
}

.contact-webform div[role="alert"] {
  padding: 16px 24px;
  color: var(--color-brand-navy);
}

@media (max-width: 520px) {
  .contact-webform > [data-webform-key],
  .contact-webform .webform-wizard-page {
    padding-inline: 20px;
  }

  .contact-webform .webform-flexbox {
    flex-direction: column;
    gap: 0;
  }

  .contact-webform .webform-progress-tracker .progress-title {
    font-size: 16px;
  }
}

.webform-flex--container {
  margin: 0;
}