/* ------ Buttons ------ */

/* - Button Outlined - */

.wp-block-button {
  font-weight: 400;
}

.wp-block-button.is-style-outline {
  position: relative;
  width: 12rem;
  line-height: 100%;
  -webkit-transition: border-color .35s ease, background .35s ease;
  transition: border-color .35s ease, background .35s ease;
}

.wp-block-button.is-style-outline > div {
  width: 100%;
}

.wp-block-button.is-style-outline::before {
  background: var(--wp--preset--color--accent-1);
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
}

.wp-block-button.is-style-outline:hover:before {
  top: 0;
}

.wp-block-button.is-style-outline:after {
  -webkit-transform: translateY(-50%) translateX(50%);
  -ms-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}

.cb-button-prev:focus,
.cb-button-next:focus,
.wp-block-button.is-style-outline:focus-within {
  outline: 2px;
  outline-style: solid;
  outline-color: var(--wp--preset--color--accent-4);
  outline-offset: 3px;
}

.wp-block-button.is-style-outline > a {
  text-decoration: none;
}

@media (min-width: 1000px) {
  .wp-block-button.is-style-outline {
    width: 15rem;
  }
}

@media (min-width: 1500px) {
  .wp-block-button.is-style-outline {
    width: 18.125rem;
  }
}

/* ------ Inputs ------ */

input[type=radio] {
  --radio-h: 1.25em;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  position: relative;
  width: var(--radio-h);
  height: var(--radio-h);
  margin: 0;
  border: 0.12em solid currentColor;
  border-radius: 50%;
  font: inherit;
  background: var(--background);
}

input[type=radio]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
  transform: scale(0);
  transition: transform 0.15s;
}

input[type="radio"]:checked {
  border-width: 0;
  transition: border-width 0.1s;
}

input[type="radio"]:checked::after {
  transform: scale(1.1);
}

input[type=radio]:focus {
  outline-width: 0;
}

input, textarea {
  font-family: Inter, sans-serif;
}

input[type=text], input[type=email], textarea {
  border: 1px solid rgba(255, 255, 255, 0.50);
  color: var(--wp--preset--color--contrast);
  background: black;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--large);
}

input[type=text]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form textarea:focus {
  outline-width: 0.1em;
  outline-color: var(--wp--preset--color--accent-4);
}

/* ------ Contact form 7 ------ */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-text {
  width: 100%;
  max-width: 40em;
}

.contact-form {
  width: 100%;
}

@media (min-width: 1200px) {
  .contact {
    display: flex;
    flex-direction: row;
  }

  .contact-text {
    width: 65%;
  }

  .contact-form {
    width: auto;
  }
}

@media (min-width: 1500px) {
  .contact-text {
    width: 75%;
  }
}

.wpcf7-form {
  color: var(--wp--preset--color--contrast);
}

.wpcf7-radio {
  --background: rgba(255, 255, 255, 0.10);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr 1fr 1fr;
  column-gap: 1em;
  row-gap: 2em;
  padding-bottom: 2em;
}

@media (min-width: 375px) {
  .wpcf7-radio {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr 1fr;
  }
}

@media (min-width: 575px) {
  .wpcf7-radio {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

.wpcf7-radio > span.wpcf7-list-item {
  margin: 0;
}

.wpcf7-radio label {
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1.25em auto;
  gap: 0.5em;
  padding: 0.5em 1em;
  background: var(--background);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 200;
}

.wpcf7-radio label:focus-within {
  outline: 0.015em;
  outline-style: solid;
  outline-color: var(--wp--preset--color--accent-4);
}

.wpcf7-form label+br {
  display: none;
}

.wpcf7-form textarea {
  height: 6em;
  resize: none;
 }

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea {
  --padding-x: 1rem;
  width: calc(100% - 2 * var(--padding-x));
  padding: 0.625rem var(--padding-x);
}

.wpcf7-form textarea {
  margin-bottom: 3em;
}

/* - Submit Button - */

.sumbit-outline {
  margin: auto;
  width: min-content;
}

.sumbit-outline > p {
  margin: 0;
}

.is-style-outline button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
}

.is-style-outline button > a {
  width: 100%;
  word-break: normal;
  text-decoration: none;
}

.sumbit-outline .wpcf7-spinner {
  display: none;
  background-color: var(--wp--preset--color--contrast);
}

form.submitting .sumbit-outline .wpcf7-spinner {
  display: block;
}