form {
  --form-field-padding: 0 18px;
}

/* Main button control */
.breath-audio-button,
.breath-audio-button .stk-button {
  cursor: pointer;
}

/* Force the button text and border to be white */
.breath-audio-button .stk-button {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Force text inside the button to stay white */
.breath-audio-button .stk-button *,
.breath-audio-button .stk-button__inner-text {
  color: #ffffff !important;
}

/* Custom play/pause icon container */
.breath-audio-icon {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -1px;
  flex-shrink: 0;
}

/* Play triangle */
.breath-audio-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #ffffff;
  margin-left: 2px;
}

/* Hide play triangle when playing */
.breath-audio-button.is-playing .breath-audio-icon::before,
.breath-audio-button .stk-button.is-playing .breath-audio-icon::before {
  display: none;
}

/* Pause bars when playing */
.breath-audio-button.is-playing .breath-audio-icon::after,
.breath-audio-button .stk-button.is-playing .breath-audio-icon::after {
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  background: linear-gradient(
    to right,
    #ffffff 0,
    #ffffff 4px,
    transparent 4px,
    transparent 8px,
    #ffffff 8px,
    #ffffff 12px
  );
}

/* Practice heading alignment */
.practice-heading {
  text-align: right !important;
}

@media (max-width: 767px) {
  .practice-heading {
    text-align: center !important;
  }
}

/* Original desktop native anchor offset */
#the-practice {
  scroll-margin-top: 200px;
}

/* Original mobile and tablet native anchor offset */
@media (max-width: 768px) {
  #the-practice {
    scroll-margin-top: 80px;
  }
}

/* Hide permanent underlines on homepage section links */
#header [data-menu] > ul > li > a[href^="/#"]::after {
  opacity: 0;
}

/* Show the underline on hover or keyboard focus */
#header [data-menu] > ul > li:hover > a[href^="/#"]::after,
#header [data-menu] > ul > li > a[href^="/#"]:focus-visible::after {
  opacity: 1;
}