/**
 * Scroll to Top Button - Complete Fix for All Devices
 * Ensures proper sizing on mobile, tablet, and desktop
 */

/* Base styles - Override everything */
.btn-scroll-top {
    /* Position */
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    z-index: 9999 !important;
    
    /* Size - Desktop */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    
    /* Display */
    display: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Style */
    background: linear-gradient(135deg, #1e40af, #1e3a8a) !important;
    color: white !important;
    box-shadow: 0 8px 30px rgba(30, 64, 175, 0.5) !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Flex for centering icon */
    align-items: center !important;
    justify-content: center !important;
}

/* Show state */
.btn-scroll-top.show {
    display: flex !important;
}

/* Icon inside button */
.btn-scroll-top i {
    font-size: 22px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover effect - Desktop only */
@media (min-width: 992px) {
    .btn-scroll-top:hover {
        transform: translateY(-8px) scale(1.1) !important;
        box-shadow: 0 15px 40px rgba(30, 64, 175, 0.6) !important;
    }
}

/* Active/Click effect */
.btn-scroll-top:active {
    transform: translateY(-4px) scale(1.05) !important;
}

/* ==============================================
   TABLET (768px - 991px)
   ============================================== */

@media (max-width: 991px) {
    .btn-scroll-top {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        max-width: 55px !important;
        max-height: 55px !important;
        bottom: 25px !important;
        left: 25px !important;
    }
    
    .btn-scroll-top i {
        font-size: 20px !important;
    }
}

/* ==============================================
   MOBILE (< 768px)
   ============================================== */

@media (max-width: 767px) {
    .btn-scroll-top {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        bottom: 20px !important;
        left: 20px !important;
    }
    
    .btn-scroll-top i {
        font-size: 18px !important;
    }
}

/* ==============================================
   SMALL MOBILE (< 576px)
   ============================================== */

@media (max-width: 575px) {
    .btn-scroll-top {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        bottom: 15px !important;
        left: 15px !important;
    }
    
    .btn-scroll-top i {
        font-size: 16px !important;
    }
}

/* ==============================================
   EXTRA SMALL (< 400px)
   ============================================== */

@media (max-width: 399px) {
    .btn-scroll-top {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        bottom: 12px !important;
        left: 12px !important;
    }
    
    .btn-scroll-top i {
        font-size: 15px !important;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    .btn-scroll-top {
        /* Larger touch target on touch devices */
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
    
    .btn-scroll-top:active {
        transform: scale(0.95) !important;
        box-shadow: 0 4px 15px rgba(30, 64, 175, 0.5) !important;
    }
}

/* Ensure button stays circular */
.btn-scroll-top,
.btn-scroll-top:hover,
.btn-scroll-top:active,
.btn-scroll-top:focus {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}

/* Remove any conflicting Bootstrap styles */
.btn-scroll-top.btn-primary {
    padding: 0 !important;
    line-height: 1 !important;
}

/* Accessibility */
.btn-scroll-top:focus {
    outline: 3px solid #f59e0b !important;
    outline-offset: 3px !important;
}

/* Prevent text selection */
.btn-scroll-top {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}