/**
 * Circle button — sealed presentation layer
 *
 * - Linked AFTER page stylesheets (see head.php), so cascade order favors this file.
 * - Every rule requires [data-ng-circle-btn] (set by ng_circle_btn()) for high specificity.
 * - Declarations use !important so arbitrary page/section CSS cannot restyle the disk/animation.
 * - `.ng-inline-block` forces `display: inline-block` site-wide; it can conflict with this flex disk.
 * - Exclude .classes-raw-wrapper: class preview rows use display:grid in home.css (Our classes).
 *
 * Animation triggers: .ng-circle-btn--anim-hover | --anim-press | --anim-both
 */

.page-home .ng-inline-block:not([data-ng-circle-btn]):not(.classes-raw-wrapper),
.neogym-site-footer .ng-inline-block:not([data-ng-circle-btn]),
.tpl-menu-center-track .ng-inline-block:not([data-ng-circle-btn]),
.tpl-menu-desktop .ng-inline-block:not([data-ng-circle-btn]) {
  display: inline-block !important;
}

.page-home {
  /* Contact column width (see home.css .form-cta); disk cap matches submit button. */
  --btn-circle-form-col: calc(19.5em / var(--ng-type-scale, 1));
  --btn-circle-disk-max: calc(19.47em / var(--ng-type-scale, 1));
  /*
   * Join disks (about + CTA): design target ~206px (`12.875rem @ 16px` EN rem). fa/hy/ru shrink both
   * `body` vw (`--ng-type-scale`) and `html`; divide so disk matches EN visually.
   */
  --btn-circle-join-cap: calc(12.875rem / var(--ng-type-scale, 1));
  --btn-circle-size: min(100%, var(--btn-circle-disk-max)) !important;
  --btn-circle-text-size: var(--text-btn-circle-default) !important;
}

/* --- Base disk ----------------------------------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn {
  /* `--btn-circle-size` from `.page-home` defaults or `ng_circle_btn([..., circle_size => ...])` */
  --_ng-disk: var(--btn-circle-size, min(100%, var(--btn-circle-disk-max, 19.47em)));
  --btn-cta-anim: 1.15s !important;
  z-index: 2 !important;
  width: min(100%, var(--_ng-disk)) !important;
  max-width: min(100%, var(--_ng-disk)) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-style: solid !important;
  background-color: var(--brand-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
  overflow: hidden !important;
  justify-self: center !important;
  isolation: isolate !important;
  -webkit-tap-highlight-color: transparent !important;
  transition-property: background-color, border-color !important;
  transition-duration: var(--btn-cta-anim), var(--btn-cta-anim) !important;
  transition-timing-function: ease, ease !important;
  -webkit-font-smoothing: antialiased !important;
}

/*
 * <button type="submit">: UA applies outset borders, line-height, fonts — reset to match <a> disks.
 * (DevTools may still list the UA rule; computed values should match .ng-circle-btn base.)
 */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn:is(button) {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  text-align: center !important;
  line-height: 1 !important;
  background-image: none !important;
  box-shadow: none !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: transparent !important;
  overflow: hidden !important;
}

/*
 * Rail “top”: disk size from ng_circle_btn(circle_size/text_size).
 * When footer shows .is-cta-only, nav links disappear and the rail shrink-wraps; base rule
 * width: min(100%, --_ng-disk) then caps the disk to that tiny % — force disk px from --_ng-disk.
 */
.tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta {
  margin: 0 0.45rem !important;
  align-self: center !important;
  justify-self: auto !important;
  width: var(--_ng-disk) !important;
  max-width: var(--_ng-disk) !important;
  min-width: var(--_ng-disk) !important;
  --btn-circle-text-size: var(--text-btn-circle-rail-lang) !important;
}

.tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta .ng-circle-btn__text {
  letter-spacing: 0.12em !important;
}

/*
 * Membership mosaic: column is narrower than .form-cta, so base width min(100%, --_ng-disk) caps the
 * disk to the column. Match contact submit: same tokens as form column + disk max, and use full
 * --_ng-disk width (no % cap). Keeps parity at every breakpoint with .page-home media rules below.
 */
.page-home .sec-about .about-grid__cta-pin > [data-ng-circle-btn].ng-circle-btn {
  top: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
  align-self: center !important;
  --btn-circle-size: min(var(--btn-circle-form-col), var(--btn-circle-disk-max)) !important;
  --btn-circle-text-size: var(--text-btn-circle-default) !important;
  width: var(--_ng-disk) !important;
  max-width: var(--_ng-disk) !important;
}

.page-home .form-cta [data-ng-circle-btn].ng-circle-btn {
  top: 0 !important;
  transform: none !important;
  margin-top: 0.35em !important;
  align-self: center !important;
}

/* --- Label --------------------------------------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn .ng-circle-btn__text {
  z-index: 2 !important;
  position: relative !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  font-family: Antonio, sans-serif !important;
  font-size: var(--btn-circle-text-size, var(--text-btn-circle-default)) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: clamp(0.45rem, 11%, 1.85rem) !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
  transition: color var(--btn-cta-anim) ease !important;
  -webkit-font-smoothing: antialiased !important;
}

/* --- Mask --------------------------------------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn .ng-circle-btn__mask {
  z-index: 1 !important;
  width: 135% !important;
  height: 400% !important;
  background-color: #1b1b1b !important;
  border: 0 !important;
  border-radius: 100% !important;
  position: absolute !important;
  top: auto !important;
  bottom: -400% !important;
  left: -3em !important;
  right: auto !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) translateZ(0) !important;
  transition: transform var(--btn-cta-anim) ease !important;
}

/* --- Triggers: filled background + border ------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:hover,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:focus-visible {
  background-color: #1b1b1b !important;
  border-color: #454545 !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:active,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press.is-pressing,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:focus-visible {
  background-color: #1b1b1b !important;
  border-color: #454545 !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:hover,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:focus-visible,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:active,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both.is-pressing {
  background-color: #1b1b1b !important;
  border-color: #454545 !important;
}

/* --- Triggers: label color ---------------------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:hover .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:focus-visible .ng-circle-btn__text {
  color: var(--btn-cta-txt-hover, #ff3a3a) !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:active .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press.is-pressing .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:focus-visible .ng-circle-btn__text {
  color: var(--btn-cta-txt-hover, #ff3a3a) !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:hover .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:focus-visible .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:active .ng-circle-btn__text,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both.is-pressing .ng-circle-btn__text {
  color: var(--btn-cta-txt-hover, #ff3a3a) !important;
}

/* --- Triggers: mask sweep ----------------------------------------------- */
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:hover .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:focus-visible .ng-circle-btn__mask {
  transform: translate3d(0, -100%, 0) translateZ(0) !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:active .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press.is-pressing .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:focus-visible .ng-circle-btn__mask {
  transform: translate3d(0, -100%, 0) translateZ(0) !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:hover .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:focus-visible .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:active .ng-circle-btn__mask,
:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both.is-pressing .ng-circle-btn__mask {
  transform: translate3d(0, -100%, 0) translateZ(0) !important;
}

:is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
  [data-ng-circle-btn].ng-circle-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn .ng-circle-btn__mask {
    transition: none !important;
  }

  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:hover .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:focus-visible .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:active .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press.is-pressing .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:focus-visible .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:hover .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:focus-visible .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:active .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both.is-pressing .ng-circle-btn__mask {
    transform: translate3d(0, -100%, 0) translateZ(0) !important;
  }

  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-hover:not(:hover):not(:focus-visible) .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-press:not(:active):not(.is-pressing):not(:focus-visible) .ng-circle-btn__mask,
  :is(.page-home, .neogym-site-footer, .tpl-menu-center-track, .tpl-menu-desktop)
    [data-ng-circle-btn].ng-circle-btn.ng-circle-btn--anim-both:not(:hover):not(:focus-visible):not(:active):not(.is-pressing) .ng-circle-btn__mask {
    transform: translate3d(0, 0, 0) translateZ(0) !important;
  }
}

@media (max-width: 640px) {
  .page-home {
    --btn-circle-size: min(88vw, var(--btn-circle-join-cap)) !important;
    --btn-circle-text-size: var(--text-btn-circle-home-640) !important;
  }

  .page-home .sec-about .about-grid__cta-pin > [data-ng-circle-btn].ng-circle-btn {
    --btn-circle-size: min(88vw, var(--btn-circle-join-cap)) !important;
    --btn-circle-text-size: var(--text-btn-circle-home-640) !important;
    width: var(--_ng-disk) !important;
    max-width: var(--_ng-disk) !important;
  }

  .page-home .form-cta [data-ng-circle-btn].ng-circle-btn {
    --btn-circle-size: min(88vw, var(--btn-circle-join-cap)) !important;
  }
}

@media (max-width: 479px) {
  .page-home {
    --btn-circle-size: min(58vw, var(--btn-circle-join-cap)) !important;
    --btn-circle-text-size: var(--text-btn-circle-home-479) !important;
  }

  .page-home .sec-about .about-grid__cta-pin > [data-ng-circle-btn].ng-circle-btn {
    --btn-circle-size: min(58vw, var(--btn-circle-join-cap)) !important;
    --btn-circle-text-size: var(--text-btn-circle-home-479) !important;
    width: var(--_ng-disk) !important;
    max-width: var(--_ng-disk) !important;
  }

  .page-home .form-cta [data-ng-circle-btn].ng-circle-btn {
    --btn-circle-size: min(58vw, var(--btn-circle-join-cap)) !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta {
    background-color: var(--brand-red) !important;
    border-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:hover,
  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:focus-visible {
    background-color: var(--brand-red) !important;
    border-color: transparent !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:hover .ng-circle-btn__text,
  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:focus-visible .ng-circle-btn__text {
    color: #fff !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:hover .ng-circle-btn__mask,
  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:focus-visible .ng-circle-btn__mask {
    transform: translate3d(0, 0, 0) translateZ(0) !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:active {
    background-color: #1b1b1b !important;
    border-color: #454545 !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta.is-pressing {
    background-color: #1b1b1b !important;
    border-color: #454545 !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:active .ng-circle-btn__text {
    color: var(--btn-cta-txt-hover, #ff3a3a) !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta.is-pressing .ng-circle-btn__text {
    color: var(--btn-cta-txt-hover, #ff3a3a) !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta:active .ng-circle-btn__mask {
    transform: translate3d(0, -100%, 0) translateZ(0) !important;
  }

  .tpl-menu-center-inner > [data-ng-circle-btn].ng-circle-btn.tpl-menu-rail-cta.is-pressing .ng-circle-btn__mask {
    transform: translate3d(0, -100%, 0) translateZ(0) !important;
  }
}