/* ============================================
   AL-QAND EXCHANGE — BACK TO TOP BUTTON
   ============================================ */

/* ---------- Back to Top Button ---------- */
.back-to-top {
    --scroll-progress: 0;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 50;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Outer ring doubles as a reading-progress indicator */
    background: conic-gradient(
        var(--orange-soft) calc(var(--scroll-progress) * 1%),
        rgba(232, 93, 4, 0.16) 0
    );
    box-shadow:
        0 8px 20px rgba(232, 93, 4, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition:
        opacity 0.35s ease,
        transform 0.45s var(--transition-bounce),
        box-shadow 0.35s ease;
}

/* Inner face — inset leaves the progress ring visible at the edge */
.back-to-top::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--orange-soft), var(--orange-dark));
    transition: background 0.35s ease;
}

/* Soft top highlight so the face reads as a rounded surface */
.back-to-top::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.back-to-top svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    transition: transform 0.35s var(--transition-bounce);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow:
        0 14px 30px rgba(232, 93, 4, 0.42),
        0 4px 10px rgba(0, 0, 0, 0.08);
}

.back-to-top:hover::before {
    background: linear-gradient(145deg, var(--orange), var(--orange-dark));
}

.back-to-top:hover svg {
    transform: translateY(-3px);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--orange-dark);
    outline-offset: 3px;
}

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

@media (max-width: 600px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 46px;
        height: 46px;
    }

    .back-to-top::before,
    .back-to-top::after {
        inset: 3px;
    }

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