/* 
 * Contact Button CSS - 聯絡按鈕樣式
 * Mobile-first approach with 576px breakpoint
 */

/* 回到頂部按鈕樣式 */
.scroll-to-top {
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 0;
    /* 移除 d-none 控制，讓按鈕一直顯示 */
    display: block !important;
    background: none;
    /* 預設狀態圖片 */
    background-image: url('../images/button/topDefault.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fixed 定位模式 - 預設狀態 */
.scroll-to-top--fixed {
    position: fixed;
    bottom: 5rem;
    right: 1.25rem;
}

/* Absolute 定位模式 - 定格狀態 */
.scroll-to-top--absolute {
    position: absolute;
    right: 1.25rem;
    transform: translateY(0%);
}

.scroll-to-top:focus {
    outline: none;
}

.scroll-to-top>.goTop {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    /* 隱藏 img 標籤，改用背景圖片 */
    opacity: 0;
}

/* Hover 狀態圖片切換（僅在支持 hover 的設備上生效） */
@media (hover: hover) and (pointer: fine) {
    .scroll-to-top:hover {
        background-image: url('../images/button/topEffect.png');
    }
}

/* 預設狀態圖片 */
.scroll-to-top {
    background-image: url('../images/button/topDefault.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hover 狀態圖片切換 */
.scroll-to-top:hover {
    background-image: url('../images/button/topEffect.png');
}

/* 隱藏 img 標籤，改用背景圖片 */
.scroll-to-top>.goTop {
    opacity: 0;
}

/* 通用聯絡按鈕樣式 */
.contact-btn {
    position: fixed;
    z-index: 16;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.contact-btn__image {
    display: block;
    transition: transform 0.3s ease;
}

/* Mobile 版本 - 底部固定，填滿寬度 */
.contact-btn--mobile {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.contact-btn--mobile .contact-btn__image {
    width: 100%;
    height: auto;
    display: block;
}

/* Desktop 版本 - 右側固定，垂直居中 */
@media (min-width: 576px) {

    /* Fixed 定位模式 - PC版 */
    .scroll-to-top--fixed {
        bottom: 2rem;
        right: 2rem;
    }

    /* Absolute 定位模式 - PC版 */
    .scroll-to-top--absolute {
        right: 2rem;
    }

    .contact-btn--desktop {
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .contact-btn--desktop:hover {
        transform: translateY(-50%) scale(1.1);
    }

    .contact-btn--desktop .contact-btn__image {
        width: 6rem;
        object-fit: contain;
    }

    /* Desktop版本的hover效果 */
    .contact-btn--desktop:hover .contact-btn__image {
        transform: scale(1.1);
    }
}