/* =================================
   牛盾 - 手機版終極覆蓋樣式
   ================================= */

/* 桌面版隱藏漢堡選單 */
@media screen and (min-width: 769px) {
    .hamburger-btn {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* === 1. 基礎重置 === */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* === 2. 隱藏問題元素 === */
    #particles-js, .fixed-bar, .wrap-box {
        display: none !important;
    }

    /* === 3. 頂部導航區域 === */
    .top {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #0a0a1a !important;
        z-index: 9999 !important;
        display: block !important;
        opacity: 1 !important;
        filter: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .top1 {
        display: none !important;
    }

    .top2 {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
    }

    .top_left {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        position: static !important;
    }

    .top_left img {
        width: 140px !important;
        height: auto !important;
        position: static !important;
        display: block !important;
    }

    .top_right {
        float: none !important;
        margin: 0 !important;
        width: auto !important;
        position: static !important;
        display: block !important;
    }

    /* === 4. 漢堡選單按鈕 === */
    .hamburger-btn {
        display: block !important;
        position: relative !important;
        width: 30px !important;
        height: 24px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hamburger-btn span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #fff !important;
        margin: 5px 0 !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }

    /* 漢堡選單動畫 */
    body.nav-is-open .hamburger-btn span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    body.nav-is-open .hamburger-btn span:nth-child(2) {
        opacity: 0 !important;
    }
    body.nav-is-open .hamburger-btn span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* === 5. 導航選單 === */
    .navig {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(10, 10, 26, 0.98) !important;
        transition: left 0.3s ease !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        padding: 80px 0 50px !important;
        margin: 0 !important;
        float: none !important;
    }

    body.nav-is-open .navig {
        left: 0 !important;
    }

    .navig dl {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .navig dt {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .navig dt a {
        display: block !important;
        width: 100% !important;
        padding: 20px 30px !important;
        color: #fff !important;
        font-size: 16px !important;
        text-decoration: none !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }

    .navig dt:hover {
        background: rgba(255,255,255,0.05) !important;
    }

    /* === 6. 內容區域 === */
    .content {
        width: 100% !important;
        margin: 0 !important;
        padding-top: 60px !important; /* 為固定頂部留空間 */
        position: relative !important;
    }

    /* === 7. 橫幅區域 === */
    .banner, .bannerlist {
        width: 100% !important;
        height: 300px !important;
        position: relative !important;
        margin: 0 !important;
    }

    /* === 8. 中間功能區塊 === */
    .middle1_a_box {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
        padding: 20px !important;
        display: block !important;
        text-align: center !important;
    }

    /* === 9. 產品卡片 === */
    .ue_ssc {
        width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .ue_ssc li {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
        display: block !important;
        height: auto !important;
    }

    /* === 10. 底部完整修正 === */
    .foot {
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 30px 0 !important;
        background: #0a0a1a !important;
        text-align: center !important;
        transform: none !important;
    }

    .foot_a {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        text-align: center !important;
    }

    .foot_a1 {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

    .foot_a1_a {
        display: inline-block !important;
        margin: 5px !important;
        padding: 5px 10px !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 15px !important;
        font-size: 12px !important;
    }

    .foot_a1_a a {
        color: #ccc !important;
        text-decoration: none !important;
    }

    .foot_a2, .foot_a3 {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        font-size: 12px !important;
        color: #888 !important;
    }

    .foot_a2 a {
        color: #888 !important;
        text-decoration: none !important;
    }

    /* === 11. 確保所有元素不偏移 === */
    * {
        box-sizing: border-box !important;
    }

    body > div:not(.top):not(.content):not(.foot) {
        display: none !important;
    }
}