/**
 * Botão voltar ao topo — alinhado ao Joinchat
 * Joinchat: container right/bottom 20px, botão inset 8px, tamanho 60px
 */
.cf-back-top,
button.cf-back-top,
button#cf-back-top {
  --cf-bt-size: 60px;
  --cf-bt-navy: var(--wdtPrimaryColor, #231f5a);
  --cf-bt-cyan: var(--wdtSecondaryColor, #46bfe0);
  /* Mesmo eixo do botão WhatsApp: 20px (sep) + 8px (inset) */
  --cf-bt-edge: calc(28px + env(safe-area-inset-right, 0px));
  /* Abaixo do WhatsApp: bottom do WA (28px) + altura (60px) + folga (24px) */
  --cf-bt-bottom: calc(28px + 60px + 24px + env(safe-area-inset-bottom, 0px));

  position: fixed !important;
  z-index: 10050 !important;
  right: var(--cf-bt-edge) !important;
  bottom: var(--cf-bt-bottom) !important;
  left: auto !important;
  top: auto !important;
  width: var(--cf-bt-size) !important;
  height: var(--cf-bt-size) !important;
  min-width: var(--cf-bt-size) !important;
  min-height: var(--cf-bt-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--cf-bt-navy) !important;
  background-color: var(--cf-bt-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(35, 31, 90, 0.28) !important;
  cursor: pointer !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.92);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
  float: none !important;
  font: inherit !important;
  font-size: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.cf-back-top.is-visible,
button.cf-back-top.is-visible,
button#cf-back-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.cf-back-top:hover,
.cf-back-top:focus-visible {
  background: var(--cf-bt-cyan) !important;
  background-color: var(--cf-bt-cyan) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(70, 191, 224, 0.35) !important;
  outline: none;
}

.cf-back-top:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--cf-bt-navy),
    0 6px 22px rgba(35, 31, 90, 0.28) !important;
}

.cf-back-top:active {
  transform: translateY(1px) scale(0.96);
}

.cf-back-top__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.cf-back-top:hover .cf-back-top__icon {
  transform: translateY(-2px);
}

/* Sem Joinchat: canto inferior */
body:not(:has(.joinchat)) .cf-back-top,
body:not(:has(.joinchat)) button.cf-back-top {
  --cf-bt-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 600px) {
  .cf-back-top,
  button.cf-back-top,
  button#cf-back-top {
    --cf-bt-size: 56px;
    --cf-bt-edge: calc(24px + env(safe-area-inset-right, 0px));
    --cf-bt-bottom: calc(24px + 56px + 20px + env(safe-area-inset-bottom, 0px));
  }

  body:not(:has(.joinchat)) .cf-back-top,
  body:not(:has(.joinchat)) button.cf-back-top {
    --cf-bt-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-back-top,
  .cf-back-top__icon {
    transition: none;
  }
}