/* =========================================
   1. 基礎設定 (維持原本的)
   ========================================= */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: #f8f9fa;
    font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(120, 194, 173, 0.5);
}

/* =========================================
   2. 導覽列優化 (玻璃擬態效果)
   ========================================= */
.navbar {
    background-color: rgba(120, 194, 173, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* =========================================
   3. 商品卡片特效
   ========================================= */
.product-card {
    border: none;
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

    .product-card img {
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .product-card:hover img {
        transform: scale(1.08);
    }

/* =========================================
   4. 全站按鈕優化
   ========================================= */
.btn {
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 600;
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .btn:active {
        transform: translateY(0);
    }

/* =========================================
   5. 其他細節微調
   ========================================= */
.footer {
    background-color: #fff;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}

.swal2-popup {
    border-radius: 15px !important;
}

/* =========================================
   6. 購物車飛入特效 (升級版：大圖吸入 + 劇烈搖晃)
   ========================================= */
/* 飛行中的圖片樣式 */
.flying-img {
    position: fixed;
    z-index: 9999;
    border-radius: 15px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.5, -0.1, 0.1, 1.05);
}

/* ★★★ 搖晃特效關鍵影格 (角度加大 + 變大) ★★★ */
@keyframes shake-cart {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-25deg) scale(1.3);
    }
    /* 角度變大，同時放大 1.3 倍 */
    50% {
        transform: rotate(25deg) scale(1.3);
    }

    75% {
        transform: rotate(-10deg) scale(1.3);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* 用來觸發搖晃的 class */
.cart-shake {
    /* ★★★ 關鍵修正：必須是 inline-block 才能旋轉 ★★★ */
    display: inline-block !important;
    animation: shake-cart 0.5s ease-in-out;
    color: #e74c3c !important; /* 變紅色 */
    transform-origin: top center; /* 改成上方中心，像鐘擺一樣搖 */
}