/* 
 * 手機版響應式 CSS
 * 只在螢幕寬度 <= 768px 時生效
 * 不會影響桌面版顯示
 */

@media (max-width: 768px) {
    /* ==================== 導航欄 ==================== */
    
    /* 導航欄容器 */
    .vaultcaddy-navbar {
        padding: 0 1rem !important;
        height: 56px !important; /* 手機版略矮 */
    }
    
    /* 顯示漢堡菜單按鈕 */
    #mobile-menu-btn {
        display: block !important;
        font-size: 1.25rem !important;
        padding: 0.5rem !important;
    }
    
    /* 隱藏桌面版導航鏈接（功能、價格、儀表板） */
    .vaultcaddy-navbar > div:last-child > div:first-child {
        display: none !important;
    }
    
    /* 手機版完全隱藏 Logo 和文字（避免閃爍）*/
    /* 使用屬性選擇器覆蓋內聯樣式 */
    .desktop-logo,
    div[style*="background: linear-gradient(135deg, #667eea"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .desktop-logo-text,
    .desktop-logo-text > div {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* 針對導航欄中的 Logo 連結 */
    nav a[href="index.html"] > .desktop-logo,
    nav a[href="index.html"] > .desktop-logo-text {
        display: none !important;
    }
    
    /* 用戶頭像調整 */
    #user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    /* 用戶菜單區域（包含登入按鈕或頭像）*/
    #user-menu {
        display: flex !important;
        align-items: center !important;
    }
    
    /* 登入按鈕在手機版的樣式 */
    #user-menu button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        display: block !important;
    }
    
    /* 用戶下拉菜單 */
    #user-dropdown {
        top: 60px !important;
        right: 1rem !important;
        left: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    /* 手機側邊欄 */
    #mobile-sidebar {
        width: 280px !important;
        max-width: 80vw !important;
    }
    
    /* 側邊欄菜單項 */
    #mobile-sidebar a {
        font-size: 0.9375rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* ==================== 通用容器 ==================== */
    
    /* 主要內容區域 */
    main {
        padding-top: 56px !important; /* 配合手機版導航欄高度 */
        margin-top: 0 !important; /* 移除頂部多餘空白 */
    }
    
    /* Account.html 特定優化 */
    body:has(main) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .container,
    .main-container,
    .content-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 去除過大的左右邊距 */
    section > div,
    section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* ==================== 卡片 ==================== */
    
    .card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* ==================== 標題 ==================== */
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
    }
    
    /* ==================== 按鈕 ==================== */
    
    button,
    .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* ==================== 表格 ==================== */
    
    table {
        font-size: 0.875rem !important;
    }
    
    table th,
    table td {
        padding: 0.5rem !important;
    }
    
    /* ==================== 側邊欄 ==================== */
    
    .sidebar {
        display: none !important; /* 手機版隱藏側邊欄 */
    }
    
    .main-content {
        margin-left: 0 !important; /* 移除側邊欄空間 */
    }
    
    /* ==================== Footer ==================== */
    
    footer > div > div:first-child {
        grid-template-columns: 1fr !important;
    }
    
    /* ==================== 模態框 ==================== */
    
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem !important;
        padding: 1rem !important;
    }
    
    /* ==================== Index.html Hero 區域 ==================== */
    
    /* Hero 區域標題 */
    section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Hero 區域副標題 */
    section p {
        font-size: 0.9375rem !important;
    }
    
    /* CTA 按鈕組 */
    section > div > div > div:has(a[href*="firstproject"]) {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    section > div > div > div a {
        width: 100% !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* 統計數據（10秒、98%、200+）橫向排列 */
    section > div > div > div:has(#stat-speed) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }
    
    section > div > div > div:has(#stat-speed) > div {
        text-align: center !important;
    }
    
    section > div > div > div:has(#stat-speed) > div > div:first-child {
        font-size: 1.75rem !important;
    }
    
    section > div > div > div:has(#stat-speed) > div > div:last-child {
        font-size: 0.75rem !important;
    }
    
    /* ==================== 價格卡片 ==================== */
    
    /* 價格區域網格改為單欄 */
    #pricing + div,
    section:has(#pricing) > div > div {
        grid-template-columns: 1fr !important;
    }
    
    /* ==================== billing.html 手機版卡片式顯示優化 ==================== */
    
    /* 價格卡片容器 - 強制單欄顯示 */
    body:has([href*="billing.html"]) section > div > div:has([style*="grid"]),
    body:has([href*="billing.html"]) section > div > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1rem !important;
        grid-template-columns: 1fr !important; /* 覆蓋 grid 布局 */
    }
    
    /* 所有價格卡片基礎樣式 */
    body:has([href*="billing.html"]) section > div > div > div {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 1.5rem !important;
    }
    
    /* 年費卡片（第二個）移到最上方並高亮 */
    body:has([href*="billing.html"]) section > div > div > div:nth-child(2) {
        order: -1 !important;
        border: 2px solid #667eea !important;
        position: relative !important;
    }
    
    /* 月費卡片（第一個）移到下方 */
    body:has([href*="billing.html"]) section > div > div > div:nth-child(1) {
        order: 1 !important;
    }
    
    /* 價格卡片內部優化 */
    body:has([href*="billing.html"]) section > div > div > div h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    body:has([href*="billing.html"]) section > div > div > div button,
    body:has([href*="billing.html"]) section > div > div > div a[role="button"] {
        width: 100% !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }
    
    /* ==================== 功能卡片 ==================== */
    
    /* 功能卡片網格改為單欄 */
    section > div > div:has([style*="grid"]) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* ==================== 學習中心卡片 ==================== */
    
    /* 學習中心 - 準備好開始了嗎？卡片與左邊卡片同樣大小 */
    section:has([style*="background: linear-gradient(135deg, #667eea"]) > div > div {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    section:has([style*="background: linear-gradient(135deg, #667eea"]) > div > div > div {
        width: 100% !important;
        min-height: 350px !important; /* 確保高度一致 */
    }
    
    /* ==================== 標題置中 ==================== */
    
    /* 功能區域所有 h2 標題置中 */
    section[style*="padding: 6rem 0"] h2 {
        text-align: center !important;
    }
    
    /* 功能卡片內的標題也置中 */
    section[style*="padding: 6rem 0"] h2 span {
        display: inline-block !important;
        text-align: center !important;
    }
    
    /* 具體針對智能發票和銀行對賬單區域 */
    div[style*="grid-template-columns: 1fr 1fr"] h2 {
        text-align: center !important;
    }
    
    /* 所有功能區域的標題行都置中 */
    section:not([style*="gradient"]) h2 {
        text-align: center !important;
    }
    
    /* ==================== 漢堡菜單修復（強化版）==================== */
    
    /* 確保漢堡菜單按鈕可見且可點擊 */
    #mobile-menu-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1001 !important;
        position: relative !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        color: #1f2937 !important;
    }
    
    /* 漢堡菜單圖標 */
    #mobile-menu-btn i {
        pointer-events: none !important; /* 確保點擊穿透到按鈕 */
    }
    
    /* ==================== 所有頁面主要內容區域調整 ==================== */
    
    /* account.html, billing.html, firstproject.html, dashboard.html 內容距離導航欄 15pt */
    body:has([href*="account.html"]) main,
    body:has([href*="billing.html"]) main,
    body:has([href*="firstproject.html"]) main,
    body:has([href*="dashboard.html"]) main {
        padding-top: calc(56px + 15pt) !important; /* 導航欄高度 56px + 間距 15pt */
    }
    
    /* account.html 特定優化 */
    body:has([href*="account.html"]) main > div:first-child,
    body:has([href*="account.html"]) main h1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 表格容器響應式 */
    .table-container,
    table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 表格字體和間距調整 */
    table th,
    table td {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap !important;
    }
    
    /* 按鈕組調整 */
    header > div {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    header button {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* 搜尋欄調整 */
    input[type="text"],
    input[placeholder*="搜尋"] {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Create 按鈕調整 */
    button:has(span:contains("Create")),
    a:has(span:contains("Create")) {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* ==================== Index.html 移除導航欄和內容之間的空白 ==================== */
    
    /* index.html 的 main 無 padding-top */
    body:has([href*="index.html"]) main,
    body:not(:has([href*="account.html"], [href*="billing.html"], [href*="firstproject.html"], [href*="dashboard.html"], [href*="privacy.html"], [href*="terms.html"])) main {
        padding-top: 56px !important; /* 只有導航欄高度，無間距 */
        margin-top: 0 !important;
    }
    
    /* 移除 Hero 區域的額外 margin */
    main > section:first-child {
        margin-top: 0 !important;
    }
    
    /* 確保 Hero 區域緊貼導航欄 */
    section[style*="background: linear-gradient"] {
        margin-top: 0 !important;
    }
    
    /* ==================== firstproject.html 手機版表格和排版優化 ==================== */
    
    /* 表格容器 */
    body:has([href*="firstproject.html"]) table {
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* 頁面頭部重新佈局 */
    body:has([href*="firstproject.html"]) header {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.5rem 1rem !important;
        gap: 0.75rem !important;
    }
    
    /* 標題和搜尋欄容器 */
    body:has([href*="firstproject.html"]) header > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* 標題行（2025年10月 + 編輯按鈕）*/
    body:has([href*="firstproject.html"]) header > div:first-child > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* 搜尋欄 */
    body:has([href*="firstproject.html"]) #document-search {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* 按鈕容器 - 在 header 中獨立一行 */
    #action-buttons-container {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        margin-top: 0.5rem !important;
    }
    
    /* 所有按鈕統一大小 */
    #upload-btn,
    #export-btn,
    #delete-selected-btn {
        flex: 1 !important; /* 平均分配空間 */
        font-size: 0.75rem !important;
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    
    /* Export dropdown 位置調整 */
    #export-dropdown {
        flex: 1 !important;
    }
    
    #export-dropdown button {
        width: 100% !important;
    }
    
    /* 發票統計卡片 */
    body:has([href*="firstproject.html"]) div[style*="background: linear-gradient(135deg, #667eea"] {
        margin: 1rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
    }
    
    /* ==================== dashboard.html 左側欄切換按鈕 ==================== */
    
    /* 在標題右側添加箭頭按鈕 */
    body:has([href*="dashboard.html"]) .projects-header h1::after {
        content: "→" !important;
        margin-left: 0.5rem !important;
        cursor: pointer !important;
        color: #667eea !important;
        font-size: 1.5rem !important;
    }
    
    /* ==================== 學習中心橫向滑動 ==================== */
    
    /* 學習中心容器 - 改為橫向滑動 */
    #learning-center-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 1rem 1rem 1rem !important;
        scrollbar-width: none !important; /* Firefox */
    }
    
    #learning-center-container::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari */
    }
    
    /* 所有學習中心卡片 - 橫向排列 */
    #learning-center-container > div,
    #learning-center-container > a {
        min-width: 280px !important;
        max-width: 280px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }
    
    /* ==================== 使用者評價左右滑動 ==================== */
    
    /* 評價容器 - 水平滑動 */
    #testimonials {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        padding: 0 1rem 1rem 1rem !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
    }
    
    #testimonials::-webkit-scrollbar {
        display: none !important;
    }
    
    /* 每個評價卡片 - 固定寬度 85% */
    #testimonials > div {
        min-width: 85vw !important;
        max-width: 85vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
    }
    
    /* ==================== 為什麼選擇 VaultCaddy 卡片美化 ==================== */
    
    /* 卡片容器 */
    section:has(h2:contains("為什麼選擇 VaultCaddy")) > div:last-child,
    section:has(h2:contains("專為香港會計師打造")) > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    /* 每個卡片 */
    section:has(h2:contains("為什麼選擇 VaultCaddy")) > div:last-child > div,
    section:has(h2:contains("專為香港會計師打造")) > div:last-child > div {
        background: white !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        text-align: center !important;
    }
    
    /* ==================== Hero 區塊手機版排版 ==================== */
    
    /* Hero 區塊整體 */
    main > section:first-child {
        padding: 3rem 0 2rem 0 !important;
    }
    
    /* Hero 內容容器 */
    main > section:first-child > div > div {
        padding: 0 1rem !important;
    }
    
    /* 超過 200+ 企業信賴標籤 - 保持在頂部 */
    main > section:first-child div:has(> span:contains("超過 200+")) {
        margin-bottom: 1.5rem !important;
    }
    
    /* 主標題 */
    main > section:first-child h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    main > section:first-child h1 > span:last-child {
        font-size: 2.5rem !important;
    }
    
    /* 副標題 - 第3行顯示「準確率 98% • 節省 90% 時間」 */
    main > section:first-child > div > div > p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 強制副標題分行 - 使用更具體的選擇器 */
    main > section:first-child p strong {
        display: block !important;
        margin-top: 0.5rem !important;
    }
    
    /* CTA 按鈕組 - 縮小間距並上移 */
    main > section:first-child > div > div > div:has(> a[href="firstproject.html"]) {
        margin-top: 0.5rem !important;
        gap: 0.75rem !important;
    }
    
    main > section:first-child > div > div > div:has(> a[href="firstproject.html"]) > a {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* 統計數據區塊 - 上移至按鈕下方 5pt */
    main > section:first-child > div > div > div:last-child {
        margin-top: 0.5rem !important;
        padding-top: 1.5rem !important;
        gap: 1rem !important;
    }
    
    /* 統計數據字體大小 */
    main > section:first-child > div > div > div:last-child > div > div:first-child {
        font-size: 2rem !important;
    }
    
    main > section:first-child > div > div > div:last-child > div > div:last-child {
        font-size: 0.875rem !important;
    }
    
    /* ==================== 為什麼選擇 VaultCaddy ==================== */
    
    /* 標題區塊 - 縮小行距 */
    #why-choose .section-header {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    #why-choose .section-header h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.125rem !important; /* 2pt */
        line-height: 1.2 !important;
    }
    
    #why-choose .section-header p:last-child {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-top: 0.125rem !important; /* 2pt */
    }
    
    /* 卡片容器 */
    #why-choose .value-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        margin-top: 0.3125rem !important; /* 5pt */
    }
    
    /* 每個卡片 - 保留 HTML 原有樣式，只調整間距 */
    #why-choose .value-cards > div {
        padding: 1.5rem !important;
    }
    
    /* 確保圖標顯示 */
    #why-choose .value-cards > div > div:first-child {
        display: flex !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 1rem !important;
    }
    
    #why-choose .value-cards > div > div:first-child i {
        display: inline-block !important;
        font-size: 2rem !important;
    }
    
    /* ==================== 強大功能區塊 ==================== */
    
    /* 標題區塊 - 縮小行距 */
    #features > div > div:first-child {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    #features > div > div:first-child > p:first-child {
        margin-bottom: 0.125rem !important; /* 2pt */
    }
    
    #features > div > div:first-child > h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.125rem !important; /* 2pt */
        line-height: 1.2 !important;
    }
    
    #features > div > div:first-child > p:last-child {
        font-size: 0.95rem !important;
        margin-top: 0.125rem !important; /* 2pt */
    }
    
    /* 功能卡片 - 改為垂直布局 */
    #features > div > div:not(:first-child) {
        display: flex !important;
        flex-direction: column !important;
        padding: 2rem 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    #features > div > div:not(:first-child) > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* 手機版顯示藍色標籤（智能發票收據處理 / 銀行對賬單智能分析）*/
    .feature-badge {
        display: inline-block !important;
        margin-bottom: 1rem !important;
    }
    
    /* 功能卡片容器 - 使用 flex 布局 */
    #features > div > div:nth-child(2) > div,
    #features > div > div:nth-child(3) > div {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 文字區塊 */
    .feature-text-section {
        display: flex !important;
        flex-direction: column !important;
        order: 1 !important;
    }
    
    /* 藍色標題 */
    .feature-text-section > .feature-badge {
        order: 1 !important;
    }
    
    /* 主標題 */
    .feature-text-section > h2 {
        order: 2 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 功能列表 */
    .feature-text-section > div {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 圖片區塊 - 在文字區塊後面 */
    #features > div > div:nth-child(2) > div > div:last-child,
    #features > div > div:nth-child(3) > div > div:first-child {
        order: 4 !important; /* 圖片在最後 */
        margin-top: 1.5rem !important;
    }
    
    /* 修復發票卡片寬度 - 與銀行對賬單卡片一致 */
    #features > div > div:not(:first-child) > div > div > div:first-child {
        width: 100% !important;
        max-width: 350px !important; /* 限制最大寬度，與銀行卡片一致 */
        margin: 0 auto !important; /* 居中 */
        transform: none !important; /* 移除旋轉 */
        padding: 1.5rem !important;
    }
    
    /* 學習中心 - 確保圖標顯示 */
    #learning-center-container > a > div > div:first-child {
        display: flex !important;
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 1rem !important;
    }
    
    #learning-center-container > a > div > div:first-child i {
        display: inline-block !important;
        font-size: 1.5rem !important;
    }
}