/* ================================================================
   totop.css  —  To Top 按鈕樣式（10 種）
   手機底部偏移由 tt_assets() 動態輸出
================================================================ */

/* ── 基底 ── */
#rfp-totop {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    z-index: 99997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s, transform .3s, box-shadow .3s;
    box-sizing: border-box;
}

#rfp-totop.rfp-visible {
    opacity: 1;
    pointer-events: auto;
}

#rfp-totop:hover  { transform: translateY(-4px); }
#rfp-totop:active { transform: scale(.93); }

.tt-top-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
}

/* ── S1: Classic Dark ── */
#rfp-totop.rfp-tt-s1 {
    background: #2c2c2c;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,.32);
}

/* ── S2: Outline ── */
#rfp-totop.rfp-tt-s2 {
    background: #fff;
    color: #222;
    border-radius: 50%;
    border: 2.5px solid #222;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
#rfp-totop.rfp-tt-s2:hover { background: #222; color: #fff; }

/* ── S3: Gradient ── */
#rfp-totop.rfp-tt-s3 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(102,126,234,.5);
}

/* ── S4: Rocket ── */
#rfp-totop.rfp-tt-s4 {
    background: #ff6b35;
    color: #fff;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(255,107,53,.45);
}

/* ── S5: Chevron Minimal ── */
#rfp-totop.rfp-tt-s5 {
    background: rgba(255,255,255,.85);
    color: #444;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
#rfp-totop.rfp-tt-s5:hover { color: #000; }

/* ── S6: Neon Glow ── */
#rfp-totop.rfp-tt-s6 {
    background: #06060c;
    color: #00ffe5;
    border-radius: 50%;
    border: 1.5px solid #00ffe5;
    box-shadow: 0 0 8px #00ffe5, 0 0 22px rgba(0,255,229,.35);
}
#rfp-totop.rfp-tt-s6:hover {
    box-shadow: 0 0 14px #00ffe5, 0 0 40px rgba(0,255,229,.55);
    transform: translateY(-4px) scale(1.04);
}

/* ── S7: Retro Flat ── */
#rfp-totop.rfp-tt-s7 {
    background: #e74c3c;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 0 #c0392b;
}
#rfp-totop.rfp-tt-s7:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 #c0392b; }
#rfp-totop.rfp-tt-s7:active { transform: translateY(2px);  box-shadow: 0 2px 0 #c0392b; }

/* ── S8: Soft Bubble ── */
#rfp-totop.rfp-tt-s8 {
    background: #fff;
    color: #555;
    border-radius: 50%;
    box-shadow: 0 6px 24px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
}
#rfp-totop.rfp-tt-s8:hover { box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* ── S9: TOP Text ── */
#rfp-totop.rfp-tt-s9 {
    background: #27ae60;
    color: #fff;
    border-radius: 12px;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 14px rgba(39,174,96,.42);
    width: 46px;
    height: 46px;
}

/* ── S10: Glass ── */
#rfp-totop.rfp-tt-s10 {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(70,70,200,.32);
    box-shadow: 0 5px 20px rgba(0,0,0,.22);
}

/* ── 手機版（底部偏移由 PHP 動態輸出） ── */
@media (max-width: 768px) {
    #rfp-totop {
        right: 16px;
        width: 44px;
        height: 44px;
    }
}