/* Глобальна кнопка «наверх» з кільцем-прогресом. Палітра — змінні панелі. */
.scrolltop {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 46px; height: 46px; padding: 0; border: none; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface, #fffdf9); color: var(--primary, #b45f2f);
  box-shadow: 0 6px 20px rgba(80, 55, 30, .18), 0 1px 3px rgba(80, 55, 30, .12);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .2s ease;
}
.scrolltop.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scrolltop:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 26px rgba(80, 55, 30, .26); }
.scrolltop:active { transform: translateY(0) scale(.95); }
.scrolltop:focus-visible { outline: 2px solid var(--primary, #b45f2f); outline-offset: 3px; }

.scrolltop__ring { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
.scrolltop__ring-bg { stroke: var(--border, #e8dfd1); }
.scrolltop__ring-fg { stroke: var(--primary, #b45f2f); transition: stroke-dashoffset .12s linear; }

.scrolltop__arrow { position: relative; z-index: 1; display: block; transition: transform .2s ease; }
.scrolltop:hover .scrolltop__arrow { transform: translateY(-1px); }

@media (max-width: 640px) { .scrolltop { right: 14px; bottom: 14px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .scrolltop { transition: opacity .2s ease; }
  .scrolltop:hover { transform: translateY(0) scale(1); }
  .scrolltop__ring-fg { transition: none; }
}

/* FH-MOB 25.08.2026: на сторінці заявок кнопку «наверх» перекриває
   плаваюча «+ Нова заявка» — піднімаємо її вище на вузьких екранах. */
@media (max-width: 640px) {
    .scrolltop { bottom: 74px; right: 14px; }
}