/* --- timing Section --- */
.timing-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2f1 100%); /* 淺青色漸層 */
    display: flex;
    justify-content: center;
}

.timing-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* 搜尋框設計 */
.main-search-bar {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 8px;
    border-radius: 50px; /* 圓潤風格 */
    box-shadow: 0 10px 25px -5px rgba(0, 121, 107, 0.15); /* 帶有主色的陰影 */
    margin-top: 30px;
    border: 1px solid var(--border-color);
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.search-icon {
    font-size: 1.2rem;
    color: #94a3b8;
    margin-right: 10px;
}

.search-input {
    width: 85%;
    border: none;
    outline: none;
    font-size: 1.1rem;
    color: var(--text-main);
}

.btn-search-timing {
    background-color: var(--medical-primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-search-timing:hover {
        background-color: var(--medical-primary-hover);
    }

/* 熱門標籤 */
.timing-tags {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-sub);
}

    .timing-tags .tag {
        display: inline-block;
        padding: 4px 12px;
        margin: 0 4px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        color: var(--text-main);
        text-decoration: none;
        transition: all 0.2s;
    }

        .timing-tags .tag:hover {
            color: var(--medical-primary);
            border-color: var(--medical-primary);
        }

/* 特色區塊 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.feature-item {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

    .feature-item .icon {
        font-size: 2.5rem;
        margin-bottom: 16px;
    }

    .feature-item h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: var(--text-main);
    }

    .feature-item p {
        color: var(--text-sub);
        font-size: 0.95rem;
    }

@media (max-width: 768px) {
    .main-search-bar {
        flex-direction: column;
        border-radius: 16px;
    }

    .btn-search-timing {
        width: 100%;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 專業特色區塊 (Features Pro) --- */
.features-section-pro {
    padding: 80px 20px;
    background-color: #fff;
    /* 增加一點點背景裝飾線條，增加質感 (可選) */
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 24px 24px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

    .section-header h2 {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-main);
        margin-bottom: 10px;
    }

    .section-header p {
        font-size: 1.1rem;
        color: var(--text-sub);
    }

.feature-grid-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

/* 卡片本體設計 */
.feature-card {
    background: #fff;
    border: 1px solid #f1f5f9; /* 極淡邊框 */
    border-radius: 24px; /* 大圓角 */
    padding: 40px 30px;
    text-align: left; /* 文字靠左比較現代 */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* 預設陰影：輕柔浮起 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

    /* Hover 特效：上浮 + 陰影加深 + 邊框變色 */
    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: #ccfbf1; /* 變成淺綠色邊框 */
    }

/* 圖標容器 (Icon Box) */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.5rem;
}

/* 不同顏色的圖標底色 */
.icon-teal {
    background-color: #ecfdf5; /* 淺綠底 */
    color: #059669; /* 深綠圖 */
}

.icon-blue {
    background-color: #eff6ff; /* 淺藍底 */
    color: #2563eb; /* 深藍圖 */
}

.icon-orange {
    background-color: #fff7ed; /* 淺橘底 */
    color: #ea580c; /* 深橘圖 */
}

/* 文字排版 */
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-sub);
    margin: 0;
}

/* RWD */
@media (max-width: 992px) {
    .feature-grid-pro {
        grid-template-columns: repeat(2, 1fr); /* 平板變兩欄 */
    }
}

@media (max-width: 768px) {
    .feature-grid-pro {
        grid-template-columns: 1fr; /* 手機變單欄 */
    }

    .feature-card {
        text-align: center; /* 手機版置中可能比較好看 */
        padding: 30px;
    }

    .icon-box {
        margin: 0 auto 20px; /* 圖標置中 */
    }
}

/* =========================================
   timing Section 佈局優化 (左文右圖)
   ========================================= */

/* 1. 容器設定：讓內容左右並排 */
.timing-section .cs-container {
    display: flex; /* 啟用彈性佈局 */
    align-items: center; /* 垂直置中 */
    justify-content: space-between; /* 左右推開 */
    gap: 60px; /* 左邊文字與右邊手機圖的中間留白 */
    padding-top: 60px;
    padding-bottom: 80px;
    position: relative;
    max-width: 1200px; /* 限制最大寬度，以免螢幕太大時分太開 */
    margin: 0 auto;
}

/* 2. 左側內容區 (搜尋框、文字、Tags) */
.timing-content {
    flex: 1; /* 佔滿剩餘空間 */
    max-width: 600px; /* 限制內容寬度，避免搜尋框拉太長 */
    text-align: left; /* ✅ 關鍵：文字靠左，視覺動線較順 */
    z-index: 2; /* 確保文字在最上層 */
}

/* 3. 右側圖片區 (手機 Mockup) */
.timing-image {
    flex: 0 0 auto; /* 不隨視窗壓縮 */
    width: 380px; /* 給予足夠的空間放手機 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* --- 內部元素微調 --- */

/* 搜尋框：稍微加大下邊距，不要跟信任文字黏太近 */
.main-search-bar {
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%; /* 讓它填滿左側區塊 */
}

/* 信任訊息 (綠色鎖頭)：改為靠左 */
.search-trust-msg {
    justify-content: flex-start; /* 靠左對齊 */
    margin-bottom: 24px;
    padding-left: 4px; /* 微調對齊視覺 */
}

/* Tags (常見需求)：改為靠左 */
.timing-tags {
    justify-content: flex-start; /* 靠左對齊 */
}

/* --- Mockup 視覺優化 --- */
/* 讓手機稍微歪一點點，看起來比較活潑，不像呆板的證件照 */
.timing-ui-mockup {
    transform: rotate(-3deg) translateY(10px);
    transition: transform 0.3s ease;
}

/* 滑鼠移過去時回正 (微互動) */
.timing-section:hover .timing-ui-mockup {
    transform: rotate(0deg) translateY(0px);
}

/* =========================================
   RWD 手機版適配 (變回直排)
   ========================================= */
@media (max-width: 991px) {
    .timing-section .cs-container {
        flex-direction: column; /* 變回直式堆疊 */
        text-align: center; /* 文字置中 */
        gap: 40px;
        padding-top: 40px;
    }

    .timing-content {
        max-width: 100%;
        text-align: center;
    }

    .search-trust-msg,
    .timing-tags {
        justify-content: center; /* 手機版改回置中 */
    }

    .timing-image {
        width: 100%; /* 手機版圖片區塊全寬 */
        justify-content: center;
    }

    .timing-ui-mockup {
        transform: rotate(0deg); /* 手機版不要歪斜，保持正的比較好閱讀 */
        margin-top: -20px; /* 稍微往上拉一點，減少留白 */
    }
}

/* --- 新增：信任訊號 (Trust Signal) --- */
.search-trust-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

    .search-trust-msg svg {
        color: #059669; /* 鎖頭用綠色，給人安全感 */
        position: relative;
        top: -1px;
    }

.timing-content .cs-text {
    margin-bottom: 24px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
}

.timing-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
}

.timing-ui-mockup {
    position: relative;
    width: 280px;
    height: 380px;
}

/* 背景光暈 (增加氛圍感) */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    z-index: 0;
}

.blob-1 {
    width: 200px;
    height: 200px;
    background: #ccfbf1; /* 淺綠 */
    top: -20px;
    right: -20px;
}

.blob-2 {
    width: 180px;
    height: 180px;
    background: #e0f2fe; /* 淺藍 */
    bottom: -20px;
    left: -20px;
}

/* 手機卡片本體 */
.mockup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #fff;
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.05); /* 邊框細節 */
    backdrop-filter: blur(10px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 懸浮動畫 */
.floating-anim {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* 內部 UI 元素模擬 */
.mockup-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.mockup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
}

.mockup-doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.line-lg {
    height: 10px;
    width: 60%;
    background: #cbd5e1;
    border-radius: 4px;
}

.line-sm {
    height: 8px;
    width: 40%;
    background: #e2e8f0;
    border-radius: 4px;
}

.mockup-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 模擬日曆 */
.mockup-cal-row {
    display: flex;
    justify-content: space-between;
}

.mockup-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.8rem;
}

    .mockup-day.active {
        background: #0ea5a4; /* 主色 */
        color: #fff;
        box-shadow: 0 4px 10px rgba(14, 165, 164, 0.3);
    }

/* 模擬時段 */
.mockup-time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.slot {
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    text-align: center;
    padding: 8px 0;
    font-size: 0.85rem;
}

    .slot.active {
        border: 2px solid #0ea5a4;
        background: #f0fdfa;
        color: #0d9488;
        font-weight: bold;
    }

/* 模擬按鈕 */
.mockup-footer {
    margin-top: auto;
}

.mockup-btn {
    width: 100%;
    padding: 12px;
    background: #0ea5a4;
    color: #fff;
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(14, 165, 164, 0.25);
}

/* 懸浮標籤 (Badge) */
.float-badge {
    position: absolute;
    background: #fff;
    padding: 8px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #f1f5f9;
    z-index: 2;
    white-space: nowrap;
}

.badge-1 {
    top: 60px;
    right: -30px;
    animation: float 5s ease-in-out infinite reverse; /* 反向浮動 */
}

.badge-2 {
    bottom: 80px;
    left: -40px;
    animation: float 7s ease-in-out infinite 1s; /* 延遲浮動 */
}

/* --- RWD 調整 --- */
@media (max-width: 992px) {
    .timing-ui-mockup {
        width: 240px;
        height: 340px;
    }

    .float-badge {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .badge-1 {
        right: -10px;
    }

    .badge-2 {
        left: -20px;
    }
}

@media (max-width: 768px) {
    /* 手機版隱藏右側圖示，或縮小放到標題下 */
    .timing-image {
        display: none;
    }

    .timing-section {
        padding: 40px 20px !important;
        text-align: center;
    }

    .timing-content {
        align-items: center; /* 讓內容居中 */
    }

    .cs-title {
        font-size: 1.8rem;
    }

    .search-trust-msg {
        justify-content: center; /* 信任訊息居中 */
    }
}

/* --- timing Section 佈局與配色優化 --- */
.timing-section {
    padding: 80px 20px;
    /* 背景改為：從極淡的灰綠到米白的優雅漸層 */
    background: linear-gradient(135deg, #f1f5f0 0%, var(--medical-accent) 100%);
    display: flex;
    justify-content: center;
    overflow: hidden; /* 防止背景光暈溢出 */
}

    .timing-section .cs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

/* 搜尋框設計 - 調整陰影色調 */
.main-search-bar {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 10px 30px -5px rgba(45, 90, 39, 0.12); /* 墨綠色系的淡陰影 */
    margin-top: 30px;
    border: 1px solid #d1d5db;
}

/* 搜尋按鈕 - 墨綠風格 */
.btn-search-timing {
    background-color: var(--medical-primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-search-timing:hover {
        background-color: var(--medical-primary-hover);
        box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
    }

/* 熱門標籤 - Hover 變墨綠 */
.timing-tags .tag:hover {
    color: var(--medical-primary);
    border-color: var(--medical-primary);
    background-color: #fff;
}

/* =========================================
   右側 Mockup UI 優化 (區分示意與實體)
   ========================================= */

/* 1. 模擬日曆：將原本墨綠改為較淺的草綠色或灰色 */
.mockup-day.active {
    background: #5d8a56 !important; /* 較淺的墨綠，降低飽和度 */
    color: #fff;
    box-shadow: none; /* 去除陰影，降低「可點擊感」 */
}

/* 2. 模擬時段：讓它看起來更像示意圖 */
.slot.active {
    border: 1.5px solid #a7c0a2 !important; /* 邊框變淡變細 */
    background: #fdfdfd !important;
    color: #5d8a56 !important;
}

/* 3. 關鍵：模擬手機底部的按鈕 (Mockup Button) */
.mockup-btn {
    /* 改為空心或淺色系，不要用跟左邊一樣的高飽和實色 */
    background: transparent !important;
    border: 2px solid #a7c0a2 !important;
    color: #2d5a27 !important;
    box-shadow: none !important; /* 移除強烈的按鈕陰影 */
    opacity: 0.8; /* 稍微透明，暗示它是背景裝飾 */
}

/* 4. 懸浮標籤 (Float Badge)：文字改為中性灰 */
.float-badge {
    color: #475569 !important; /* 改為 Slate-600 */
    border: 1px solid #e2e8f0;
}

/* 5. 再次強化左側實體搜尋按鈕 (Primary Button) */
.btn-search-timing {
    /* 增加一點漸層與深度，使其從平面背景中「跳」出來 */
    background: linear-gradient(135deg, #3a6d33 0%, #2d5a27 100%);
    box-shadow: 0 10px 20px -5px rgba(45, 90, 39, 0.4); /* 加強陰影，強調這是真正的按鈕 */
}

.timing-image {
    pointer-events: none; /* 讓滑鼠點擊直接穿透 Mockup，不會產生互動回饋 */
    user-select: none; /* 防止 user 誤選 Mockup 內的文字 */
}

@media (max-width: 991px) {
    .timing-section .cs-container {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
    }

    .timing-content {
        max-width: 100%;
        text-align: center;
    }

    /* 手機版讓圖片縮小顯示而非隱藏，增加產品說服力 */
    .timing-image {
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .timing-ui-mockup {
        width: 260px; /* 稍微縮小 */
        height: auto;
        transform: rotate(0deg); /* 手機版不歪斜 */
    }
}

@media (max-width: 768px) {
    /* 在極小螢幕下，為了載入速度與空間，可以選擇隱藏背景 Blob */
    .blob {
        display: none;
    }
}