/* Custom Buttons */

[data-button-anim-target] {
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Fake a duplicate text element using text shadow without blur  */
/* We save the distance in a variable for easy use in the CSS animation */
.btn-icon-content__text {
  --text-duplicate-distance: 1.5em;
  text-shadow: 0px var(--text-duplicate-distance) currentColor;
}

/* Only apply hover animations if they are actually not supported */
@media (hover:hover) and (pointer:fine) {

  .btn-icon-link:hover .btn-icon-content__text {
    transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
  }

  .btn-icon-link:hover .btn-icon-icon__bg {
    transform: rotate(90deg);
  }

  .btn-icon-link:hover .btn-icon-icon__arrow {
    transform: translate(200%, 0px);
  }

  .btn-icon-link:hover .btn-icon-content__bg {
    transform: translate(0px, 0%) rotate(0deg);
  }

}

/* Custom Form Styling */

/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea,
[data-validate].is--error select {
  border-color: #FF4C24;
}

[data-validate].is--error .form-field-icon.is--error,
[data-validate].is--error .radiocheck-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success,
[data-validate].is--success .radiocheck-field-icon.is--success {
  opacity: 1;
}

/* Field: Custom Radio or Checkbox */
[data-form-validate] .radiocheck-field input:focus-visible~.radiocheck-custom {
  background-color: #D0CFCD;
  color: #E2E1DF;
}

[data-form-validate] .radiocheck-field input:focus-visible:checked~.radiocheck-custom,
[data-form-validate] .radiocheck-field input:checked~.radiocheck-custom {
  background-color: #131313;
  color: #EFEEEC;
}

[data-form-validate] .radiocheck-field .radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .radiocheck-custom {
  border-color: #FF4C24;
}

[data-validate].is--error input:checked~.radiocheck-custom {
  border-color: #131313;
}

/* Field: Select */
[data-form-validate] select:has(option[value=""]:checked) {
  color: rgba(19, 19, 19, 0.3);
}

/* Testimonial Slider Style */

.text-line-mask {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* Multi filters */

/* Filter Button */
.filter-btn {
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #c9b28c;
  color: #111;
}

/* Reset Button */
.reset-btn {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}

/* Filter List Item */
.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* Fix native select dropdown readability on Windows */
[data-form-validate] select,
[data-form-validate] .form-input.members-form-input.is-dark {
  color: #fff;
  background-color: #1b2023;
}

/* The opened dropdown options, especially Windows Chrome/Edge */
[data-form-validate] select option,
[data-form-validate] .form-input.members-form-input.is-dark option {
  color: #111;
  background-color: #fff;
}

/* Placeholder option */
[data-form-validate] select option[value=""],
[data-form-validate] .form-input.members-form-input.is-dark option[value=""] {
  color: #777;
  background-color: #fff;
}