/* ─── Scroll to Top / Bottom Buttons ─────────────────────────────── */

.scroll-btn-wrap {
  position: fixed;
  right: 1.5rem;
  bottom: 6rem; /* above chatbot FAB (1.5rem + 3.5rem + gap) */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
  pointer-events: none;
}

.scroll-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #524838;
  box-shadow: 0 2px 8px rgba(45, 35, 25, 0.15);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}

.scroll-btn.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.scroll-btn:hover {
  background: #8B2842;
  color: #fff;
  box-shadow: 0 4px 14px rgba(139, 40, 66, 0.3);
}

.scroll-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
}

/* On mobile with bottom tabs, push buttons higher */
@media (max-width: 1023px) {
  .scroll-btn-wrap {
    bottom: 8.5rem; /* above mobile-bottom-tabs (~4rem) + chatbot FAB */
  }
}