/**
 * Back to Top Button («Наверх»)
 * =============================
 * Floating button bottom-right. Appears after scrolling down, smooth-scrolls to top.
 * Reuses the carousel nav button design (.reviews-nav__btn): 52px circle, orange ring,
 * chevron, hover → orange fill + white chevron, scale(0.96) on press.
 * Difference: solid white fill (button floats over arbitrary content) + layered shadow.
 *
 * Skills: emil-design-eng, make-interfaces-feel-better, accessibility-compliance
 * Conflict note: on mobile sits ABOVE the fixed .bottom-nav (height 64px + safe area).
 */

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9990; /* below mobile-menu overlay (9999) + modals, above content */
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--color-cta-orange);
    background: var(--color-white);
    color: var(--color-cta-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Layered shadow for float (Emil: shadows over borders) */
    box-shadow:
        0 2px 6px rgba(25, 95, 64, 0.10),
        0 8px 24px rgba(25, 95, 64, 0.14);
    -webkit-tap-highlight-color: transparent;
    /* Hidden by default — fade + scale in once scrolled (Emil: never scale from 0) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition:
        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s linear 0.25s,
        background 0.25s ease,
        color 0.25s ease;
}

/* Visible state — toggled by main.js on scroll */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s,
        background 0.25s ease,
        color 0.25s ease;
}

.back-to-top__icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover only on real pointer devices (Emil) — matches carousel button */
@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover {
        background: var(--color-cta-orange);
        color: var(--color-white);
    }
}

/* Press feedback (keeps visible-state translateY at 0) */
.back-to-top.is-visible:active {
    transform: scale(0.96);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--color-primary-green);
    outline-offset: 3px;
}

/* ============================================
   Mobile: lift above the fixed bottom navigation
   ============================================ */
@media (max-width: 767.98px) {
    .back-to-top {
        right: 16px;
        /* bottom-nav height (64px) + iPhone safe area + 16px gap */
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
        width: 46px;
        height: 46px;
    }

    .back-to-top__icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   Reduced motion: keep fade, drop movement (Emil)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top.is-visible {
        transform: none;
        transition: opacity 0.2s ease, visibility 0s, background 0.2s ease, color 0.2s ease;
    }

    .back-to-top.is-visible:active {
        transform: none;
    }
}