/* Al-Oraini Back To Top - approved electric-blue concept */
#alorainiBackToTop {
    --bt-blue: #168cff;
    --bt-cyan: #45c8ff;
    --bt-ice: #eaf8ff;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;

    width: 66px;
    height: 66px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;

    display: grid;
    place-items: center;

    background:
        radial-gradient(circle at 50% 42%, #102c58 0%, #07162c 40%, #020817 72%, #01040c 100%);

    box-shadow:
        0 12px 30px rgba(0,0,0,.48),
        0 0 0 1px rgba(115,190,255,.42),
        inset 0 0 0 2px rgba(5,17,38,.9),
        inset 0 0 18px rgba(20,118,255,.22);

    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.86);
    pointer-events: none;

    transition:
        opacity .28s ease,
        visibility .28s ease,
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .2s ease;

    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

#alorainiBackToTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* outer metallic/glass ring */
#alorainiBackToTop::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: -2;

    background:
        conic-gradient(
            from 12deg,
            #35c9ff 0deg 38deg,
            #126cff 38deg 78deg,
            transparent 78deg 103deg,
            #7bdcff 103deg 142deg,
            #176dff 142deg 190deg,
            transparent 190deg 218deg,
            #0e5eff 218deg 270deg,
            #63d7ff 270deg 323deg,
            transparent 323deg 342deg,
            #218cff 342deg 360deg
        );

    box-shadow:
        0 0 8px rgba(33,137,255,.82),
        0 0 18px rgba(17,105,255,.56),
        0 0 30px rgba(17,105,255,.22);

    animation: aloraini-ring 8s linear infinite;
}

/* dark separation ring */
#alorainiBackToTop::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    z-index: -1;
    border: 2px solid rgba(116,193,255,.32);
    box-shadow:
        inset 0 0 0 3px #020919,
        inset 0 0 15px rgba(38,127,255,.28),
        0 0 10px rgba(31,132,255,.34);
}

#alorainiBackToTop .bt-arrow {
    position: relative;
    width: 25px;
    height: 25px;
    transform: translateY(5px) rotate(45deg);
    border-left: 7px solid var(--bt-ice);
    border-top: 7px solid var(--bt-ice);
    border-radius: 2px 0 0 0;

    filter:
        drop-shadow(0 0 3px #fff)
        drop-shadow(0 0 7px #3ebcff)
        drop-shadow(0 0 12px #126cff);

    transition:
        transform .2s ease,
        filter .2s ease;
}

/* Hover = stronger glow, matching approved concept */
@media (hover: hover) {
    #alorainiBackToTop:hover {
        transform: translateY(-4px) scale(1.055);
        filter: brightness(1.18);
    }

    #alorainiBackToTop:hover::before {
        box-shadow:
            0 0 10px rgba(69,200,255,.95),
            0 0 24px rgba(20,117,255,.76),
            0 0 42px rgba(20,117,255,.38);
    }

    #alorainiBackToTop:hover .bt-arrow {
        transform: translateY(2px) rotate(45deg);
        filter:
            drop-shadow(0 0 4px #fff)
            drop-shadow(0 0 10px #48caff)
            drop-shadow(0 0 17px #0874ff);
    }
}

/* Pressed */
#alorainiBackToTop:active {
    transform: translateY(1px) scale(.94);
    filter: brightness(1.3);
}

#alorainiBackToTop:focus-visible {
    outline: 3px solid rgba(111,211,255,.9);
    outline-offset: 7px;
}

@keyframes aloraini-ring {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    #alorainiBackToTop {
        width: 58px;
        height: 58px;
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom));
    }

    #alorainiBackToTop .bt-arrow {
        width: 22px;
        height: 22px;
        border-left-width: 6px;
        border-top-width: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #alorainiBackToTop,
    #alorainiBackToTop .bt-arrow {
        transition-duration: .01ms;
    }

    #alorainiBackToTop::before {
        animation: none;
    }

    html:focus-within {
        scroll-behavior: auto;
    }
}

#alorainiBackToTop:disabled{pointer-events:none}