/* ==============================
   右側浮動工具列
================================ */

.floating-tools {
    --tool-size: 74px;
    --tool-gap: 8px;

    position: fixed;

    right: clamp(8px, 1vw, 18px);

    bottom: calc(
        18px + env(safe-area-inset-bottom, 0px)
    );

    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--tool-gap);
}


/* ==============================
   清除舊版定位
   避免之前的 CSS 干擾
================================ */

.floating-tools .shop,
.floating-tools #online-service {
    position: static;

    right: auto;
    bottom: auto;

    margin: 0;
    padding: 0;

    width: var(--tool-size);
}


/* ==============================
   小民福利社 + LINE
================================ */

.floating-tools .shop a,
.floating-tools #online-service a {
    display: block;

    width: 100%;
    height: auto;

    text-decoration: none;
}


.floating-tools .shop img,
.floating-tools #online-service img {
    display: block;

    width: 100%;
    height: auto;

    border: 0;

    /* 避免圖片被舊 CSS 拉伸 */
    max-width: 100%;
}


/* ==============================
   Hover 效果
================================ */

.floating-tools .shop,
.floating-tools #online-service {
    transition:
        transform .2s ease,
        filter .2s ease;
}


@media (hover: hover) {

    .floating-tools .shop:hover,
    .floating-tools #online-service:hover {
        transform: translateY(-3px);
        filter: brightness(1.06);
    }

}


/* ==============================
   回到頂端
================================ */

#backToTopBtn,
.back-to-top {
    position: static;

    width: 42px;
    height: 42px;

    margin: 2px 0 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;

    background: rgba(20, 20, 20, .78);

    color: #fff;

    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .2);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


@media (hover: hover) {

    #backToTopBtn:hover,
    .back-to-top:hover {

        transform: translateY(-2px);

        background: rgba(20, 20, 20, .95);

        box-shadow:
            0 6px 16px rgba(0, 0, 0, .28);
    }

}


/* ==============================
   平板
================================ */

@media (max-width: 991px) {

    .floating-tools {
        --tool-size: 66px;
        --tool-gap: 7px;

        right: 10px;

        bottom: calc(
            14px + env(safe-area-inset-bottom, 0px)
        );
    }

    #backToTopBtn,
    .back-to-top {
        width: 40px;
        height: 40px;
    }

}


/* ==============================
   手機
================================ */

@media (max-width: 767px) {

    .floating-tools {
        --tool-size: 58px;
        --tool-gap: 6px;

        right: 7px;

        bottom: calc(
            10px + env(safe-area-inset-bottom, 0px)
        );
    }


    #backToTopBtn,
    .back-to-top {
        width: 36px;
        height: 36px;

        font-size: 12px;
    }

}


/* ==============================
   小尺寸手機
================================ */

@media (max-width: 375px) {

    .floating-tools {
        --tool-size: 54px;
        --tool-gap: 5px;

        right: 5px;
    }

}


/* ==============================
   手機橫向
================================ */

@media (max-height: 500px) and (orientation: landscape) {

    .floating-tools {
        --tool-size: 48px;
        --tool-gap: 4px;

        right: 5px;
        bottom: 6px;
    }


    #backToTopBtn,
    .back-to-top {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }

}