/* Thrive breakpoints:
   Desktop: > 1025px
   Tablet:  769px - 1024px
   Mobile:  < 768px
*/

:root {
  /* EU palette reference (EC blue #004494, darker blue #003776 for icons on gold) */
  --ww-btt-blue: #004494;
  --ww-btt-blue-dark: #003776;

  /* Custom request */
  --ww-btt-gold: #ffd700;

  /* Desktop defaults */
  --ww-btt-size: 56px;
  --ww-btt-right: 24px;
  --ww-btt-bottom: 24px;
}

.ww-btt {
  position: fixed;
  right: var(--ww-btt-right);
  bottom: var(--ww-btt-bottom);
  width: var(--ww-btt-size);
  height: var(--ww-btt-size);
  border-radius: 999px;

  background: var(--ww-btt-blue);
  border: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  z-index: 99999; /* keep it above overlays */
  cursor: pointer;
  touch-action: manipulation;

  /* hidden by default; JS toggles */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.ww-btt.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ww-btt:focus-visible {
  outline: 3px solid var(--ww-btt-gold);
  outline-offset: 3px;
}

.ww-btt__icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.ww-btt__img {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
}

.ww-btt__img--hover {
  opacity: 0;
}

/* Desktop hover (nur Desktop, damit Mobile/Tablet nicht „spinnt“) */
@media (min-width: 1025px) {
  .ww-btt:hover {
    background: var(--ww-btt-gold);
  }
  .ww-btt:hover .ww-btt__img--default {
    opacity: 0;
  }
  .ww-btt:hover .ww-btt__img--hover {
    opacity: 1;
  }
}

/* Tablet: 769–1024 */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --ww-btt-size: 52px;
    --ww-btt-right: 20px;
    --ww-btt-bottom: 20px;
  }
}

/* Mobile: < 768 */
@media (max-width: 767px) {
  :root {
    --ww-btt-size: 48px;
    --ww-btt-right: 16px;
    --ww-btt-bottom: 16px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ww-btt {
    transition: none;
    transform: none;
  }
}

@media print {
  .ww-btt {
    display: none !important;
  }
}