/* Shared by the PHP frontend and retained WordPress pages; load tokens.css first. */
html:has(.callback-button) {
  scroll-padding-bottom: calc(var(--callback-size) + var(--callback-offset) * 2 + env(safe-area-inset-bottom, 0px));
}

body:has(.callback-button) {
  padding-bottom: calc(var(--callback-size) + var(--callback-offset) * 2 + env(safe-area-inset-bottom, 0px));
}

/* Preserve the retained WordPress theme's existing Back to top control. */
body:has(.callback-button) .scrollToTop {
  bottom: calc(var(--callback-size) + var(--callback-offset) * 2 + env(safe-area-inset-bottom, 0px));
}

.callback-button {
  position: fixed;
  right: calc(var(--callback-offset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--callback-offset) + env(safe-area-inset-bottom, 0px));
  z-index: var(--layer-callback);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--callback-size);
  height: var(--callback-size);
  padding: 0;
  border: var(--border-width) solid var(--color-white);
  border-radius: var(--radius-round);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--shadow-control);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--motion-easing);
}

.callback-button .icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.callback-button:hover {
  background: var(--button-primary-hover-bg);
  color: var(--button-primary-text);
}

.callback-button:active {
  background: var(--button-primary-active-bg);
}

.callback-button:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

body:has(dialog[open], #main-nav.is-open, .mega-menu[open]) .callback-button {
  visibility: hidden;
}

@media (max-width: 48rem) {
  body:has(input:focus, select:focus, textarea:focus) .callback-button {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .callback-button {
    transition: none;
  }
}