/* ============================================
           SCROLL TO TOP BUTTON STYLES
           ============================================ */

        /* Main button container */
        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.9);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* Show button when scrolled */
        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Button styling - Golden theme for dark mode */
        .scroll-to-top-btn {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 50%;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4),
                0 2px 10px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Hover effects - Enhanced golden glow */
        .scroll-to-top-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 30px rgba(255, 215, 0, 0.6),
                0 3px 15px rgba(0, 0, 0, 0.4);
            background: linear-gradient(135deg, #FFDB4D 0%, #FFB733 100%);
        }

        /* Active/Click effect */
        .scroll-to-top-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 3px 15px rgba(255, 215, 0, 0.5),
                0 1px 5px rgba(0, 0, 0, 0.3);
        }

        /* Ripple effect on click */
        .scroll-to-top-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .scroll-to-top-btn.ripple::before {
            width: 300px;
            height: 300px;
        }

        /* Arrow icon - Dark color for contrast with golden background */
        .scroll-to-top-icon {
            width: 24px;
            height: 24px;
            position: relative;
            z-index: 1;
        }

        .scroll-to-top-icon svg {
            width: 100%;
            height: 100%;
            fill: #1a1a1a;
            filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.2));
            animation: float-arrow 2s ease-in-out infinite;
        }

        /* Floating animation for arrow */
        @keyframes float-arrow {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }
        }

        /* Progress ring */
        .scroll-progress {
            position: absolute;
            top: -2px;
            left: -2px;
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            border-radius: 50%;
            pointer-events: none;
        }

        .scroll-progress svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .scroll-progress-circle {
            fill: none;
            stroke: rgba(0, 0, 0, 0.2);
            stroke-width: 2;
        }

        .scroll-progress-bar {
            fill: none;
            stroke: #1a1a1a;
            stroke-width: 2;
            stroke-dasharray: 170;
            stroke-dashoffset: 170;
            transition: stroke-dashoffset 0.3s ease;
        }

        /* Tooltip */
        .scroll-to-top-tooltip {
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: #FFD700;
            padding: 8px 14px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .scroll-to-top-tooltip::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-left-color: rgba(0, 0, 0, 0.9);
        }

        .scroll-to-top-btn:hover+.scroll-to-top-tooltip {
            opacity: 1;
            visibility: visible;
            right: 75px;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .scroll-to-top {
                bottom: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
            }

            .scroll-to-top-icon {
                width: 20px;
                height: 20px;
            }

            .scroll-to-top-tooltip {
                display: none;
            }
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .scroll-to-top-btn {
                background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                    0 2px 10px rgba(0, 0, 0, 0.4);
            }

            .scroll-to-top-btn:hover {
                background: linear-gradient(135deg, #5a6578 0%, #3d4758 100%);
                box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4),
                    0 3px 15px rgba(0, 0, 0, 0.5);
            }
        }

        /* Entrance animation */
        @keyframes slideInBounce {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.5);
            }

            60% {
                transform: translateY(-5px) scale(1.05);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .scroll-to-top.visible {
            animation: slideInBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }