/* * BID Back to Top Button - Stylesheet
 * Positioning and transitions are handled here. 
 * The button icon is injected dynamically via PHP.
 */

.to-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    
    /* Background properties - URL is injected via wp_add_inline_style in PHP */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* Visibility States */
    visibility: hidden;
    opacity: 0;
    
    /* Smooth Transitions */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    
    /* Aesthetics */
    border-radius: 3px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
    z-index: 1000;
}

/* State: Button is visible after scrolling 300px */
.to-top.top-is-visible {
    visibility: visible;
    opacity: 1;
}

/* State: Button fades slightly after scrolling 1200px */
.to-top.top-fade-out {
    opacity: .5;
}

/* Hover State */
.to-top:hover {
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Tablet Adjustments */
@media only screen and (min-width: 768px) {
    .to-top {
        right: 20px;
        bottom: 20px;
    }
}

/* Desktop Adjustments */
@media only screen and (min-width: 1024px) {
    .to-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }
}