/* floating_social.css */

/* 浮動社群按鈕容器 */
.floating-social-buttons {
    position: fixed; /* 固定在視窗中 */
    right: 20px; /* 距離右邊20px */
    top: 50%; /* 垂直置中 */
    transform: translateY(-50%); /* 確保精確置中 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 12px; /* 按鈕間距 */
    z-index: 1100; /* 確保在其他內容之上 */
    opacity: 0; /* 初始隱藏 */
    animation: fadeInSocial 0.8s ease-out forwards 2s; /* 延遲2秒後淡入 */
}

/* 浮動按鈕基礎樣式 */
.floating-social-buttons .social-btn {
    width: 55px; /* 按鈕大小 */
    height: 55px;
    border-radius: 50%; /* 圓形 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* 圖示顏色 */
    font-size: 1.8rem; /* 圖示大小 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.floating-social-buttons .social-btn:hover {
    transform: scale(1.1) translateY(-3px); /* 放大並稍微上移 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 各社群平台專屬顏色 */
.social-btn.facebook {
    background-color: #3b5998; /* Facebook 藍 */
}

.social-btn.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); /* Instagram 漸層 */
}

.social-btn.line {
    background-color: #00c300; /* LINE 綠 */
}

/* 淡入動畫 */
@keyframes fadeInSocial {
    to {
        opacity: 1;
    }
}

/* RWD 調整 */
@media (max-width: 900px) {
    .floating-social-buttons {
        flex-direction: row; /* 在小螢幕上橫向排列 */
        bottom: 20px; /* 移到底部 */
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: 15px;
        padding: 10px 20px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    .floating-social-buttons .social-btn {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
    }
}