/* --- 基本重設與全域設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; /* 優先使用 Noto Sans TC */
    line-height: 1.7;
    color: #333; /* 深灰色文字 */
    background-color: #fff; /* 白色背景 */
}

.container {
    max-width: 1100px; /* 限制內容最大寬度 */
    margin: 0 auto; /* 水平置中 */
    padding: 0 20px; /* 兩側留白 */
}

a {
    color: #2a3d66; /* 主要連結顏色 - 深藍色 */
    text-decoration: none;
}

    a:hover {
        color: #b8860b; /* 連結滑過顏色 - 暗金黃色 */
        text-decoration: underline;
    }

h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.3;
    color: #1a2b48; /* 標題深藍色 */
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
}

section {
    padding: 60px 0; /* 上下留白 */
}

.bg-light {
    background-color: #f8f9fa; /* 淺灰色背景 */
}

.contact-promo-section {
    background-color: #FFF5E9; /* Adjust to the exact peach/beige color */
    padding: 5rem 0; /* Vertical padding */
    text-align: center;
    color: #333; /* Default text color */
}
    .contact-promo-section .promo-heading {
        font-size: 1.1rem; /* Adjust size */
        color: #5c5c5c; /* Slightly muted color */
        margin-bottom: 1rem;
    }



    .contact-promo-section .promo-email {
        font-size: 2.8rem; /* Adjust size - make it large */
        font-weight: bold; /* Make it bold */
        color: #333; /* Darker color */
        margin-bottom: 1rem;
        line-height: 1.2;
        /* --- ↓↓↓ 添加這兩行來允許長單詞換行 ↓↓↓ --- */
        overflow-wrap: break-word; /* 標準屬性 */
        word-wrap: break-word; /* 舊版瀏覽器兼容 (可選但建議) */
        /* --- ↑↑↑ 添加結束 ↑↑↑ --- */
    }

        .contact-promo-section .promo-email a {
            color: #333; /* Match phone color or slightly different */
            text-decoration: none;
        }

/* --- 按鈕樣式 --- */
.cta-button {
    display: inline-block;
    background-color: #2a3d66; /* 主要按鈕顏色 - 深藍色 */
    color: #fff; /* 按鈕文字白色 */
    padding: 12px 25px;
    border: none;
    border-radius: 5px; /* 輕微圓角 */
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 平滑過渡效果 */
    cursor: pointer; /* 滑鼠指標變手形 */
    margin-top: 1rem;
}

    .cta-button:hover {
        background-color: #1e2f50; /* 按鈕滑過加深 */
        color: #fff;
        text-decoration: none;
        transform: translateY(-2px); /* 輕微上移 */
    }

/* --- Header 頁首 --- */
header {
    background-color: #fff;
    padding: 15px 0; /* Adjust if needed */
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* Ensure container takes full height for alignment */
        min-height: 50px; /* Example: match logo height or desired header height */
    }

.logo a {
    font-size: 1.8rem; /* Keep this? Or rely on image */
    font-weight: bold;
    color: #1a2b48;
    text-decoration: none;
    display: flex; /* Helps vertical alignment of image */
    align-items: center;
}

.logo img {
    display: block; /* Remove extra space below image */
    height: 50px; /* Control height */
    width: auto; /* Maintain aspect ratio */
}


nav ul {
    list-style: none;
    display: flex; /* Default: horizontal menu for desktop */
    margin: 0; /* Reset default UL margin */
    padding: 0; /* Reset default UL padding */
}

    nav ul li {
        margin-left: 25px; /* Desktop spacing */
        position: relative;
    }


        nav ul li a {
            font-size: 1rem;
            padding: 5px 0;
            text-decoration: none;
            color: #333;
            transition: color 0.3s ease;
        }

            nav ul li a:hover {
                color: #b8860b; /* 連結滑過顏色 */
                text-decoration: none;
            }
/* --- Hamburger Button Styles --- */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop by default */
    background: none;
    border: none;
    padding: 10px; /* Tappable area */
    cursor: pointer;
    z-index: 1001; /* Ensure it's above nav if nav has background */
}

    .mobile-nav-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #333; /* Hamburger line color */
        margin: 5px 0;
        transition: transform 0.3s ease, opacity 0.3s ease; /* For potential animation */
    }

    /* Optional: Style for active hamburger (transform to X) */
    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
/* 下拉選單樣式 (基本) */
.dropdown-content {
    display: none; /* 預設隱藏 */
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 1;
    top: 100%; /* 出現在父元素的下方 */
    left: 0;
    border-radius: 4px;
    padding: 10px 0; /* 上下內距 */
}

    .dropdown-content li {
        margin-left: 0; /* 清除繼承的 margin */
    }

    .dropdown-content a {
        color: #333;
        padding: 10px 20px;
        text-decoration: none;
        display: block; /* 讓連結填滿寬度 */
        white-space: nowrap; /* 防止文字換行 */
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1; /* 滑過背景色 */
            color: #2a3d66;
        }

/* 滑鼠移到父元素時顯示下拉選單 */
.dropdown:hover .dropdown-content {
    display: block;
}
/* --- Hero Section 橫幅 --- */
#hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/images/bg01.png'); /* 移除註解並替換圖片路徑 */
    background-color: #465a88; /* 若圖片無法載入時的備用背景色 */
    background-size: cover;
    background-position: center;
    color: #fff; /* 文字白色 */
    text-align: center;
    padding: 120px 0; /* 增加上下留白，讓區塊更高 */
}

    #hero h1 {
        color: #fff;
        margin-bottom: 1rem;
    }

    #hero p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }


/* --- Services Section 服務項目 --- */
.service-grid {
    display: grid; /* 使用 Grid 佈局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自動調整欄數 */
    gap: 30px; /* 項目間距 */
    margin-top: 2rem;
}

.service-item {
    background-color: #fff; /* 項目背景色 */
    padding: 30px;
    text-align: center;
    border: 1px solid #eee; /* 淺灰色邊框 */
    border-radius: 8px; /* 圓角 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 過渡效果 */
}

    .service-item:hover {
        transform: translateY(-5px); /* 滑過時輕微上移 */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 滑過時增加陰影 */
    }

/*.service-icon {*/
    /* 這裡可以放圖標字體或背景圖 */
    /*display: inline-block;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #b8860b;*/ /* 圖標顏色 - 暗金黃色 */
    /* 臨時樣式 */
    /*background-color: #f0e6d2;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
}*/

.service-item h3 {
    margin-bottom: 0.5rem;
    color: #2a3d66; /* 服務項目標題顏色 */
}

.service-item p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.service-item a {
    font-weight: bold;
}

/* --- About Section 關於我們 --- */
#about p {
    max-width: 800px; /* 限制文字寬度，提高可讀性 */
    margin: 0 auto 1rem auto; /* 置中並增加底部間距 */
    text-align: center;
}

#about img {
    display: block; /* 讓圖片獨佔一行 */
    max-width: 300px; /* 限制圖片最大寬度 */
    margin: 2rem auto 0 auto; /* 置中並增加上方間距 */
    border-radius: 50%; /* 圓形圖片效果 (可選) */
}

/* --- Contact Section 聯絡表單 --- */
#contact ul {
    list-style: none;
    margin-bottom: 2rem;
}

#contact li {
    margin-bottom: 0.5rem;
}

#contact form {
    max-width: 600px;
    margin: 2rem auto 0 auto; /* 表單置中並與上方內容隔開 */
    background-color: #f8f9fa; /* 表單區域淺背景 */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

#contact label {
    display: block; /* 標籤獨佔一行 */
    margin-bottom: 5px;
    font-weight: bold;
}

#contact input[type="text"],
#contact input[type="email"],
#contact select,
#contact textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* 繼承 body 字體 */
}

#contact textarea {
    resize: vertical; /* 允許垂直調整大小 */
}

#contact button[type="submit"] {
    display: block; /* 按鈕獨佔一行 */
    width: 100%; /* 按鈕寬度 100% */
}


/* --- Footer 頁尾 --- */
footer {
    background-color: #1a2b48; /* 深藍色背景 */
    color: #ccc; /* 淺灰色文字 */
    text-align: center;
    padding: 20px 0;
    margin-top: 40px; /* 與主要內容間隔 */
}

    footer p {
        margin: 0;
        font-size: 0.9rem;
    }
/* 浮動社群按鈕容器 */
.floating-social {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999; /* 確保在最上層 */
    display: flex;
    flex-direction: column; /* 垂直排列按鈕 */
    gap: 10px; /* 按鈕間距 */
}

/* 通用按鈕樣式 */
.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    text-decoration: none;
}
.floating-btn:hover {
    background-color: #00a300; /* 深一點的綠色 */
    transform: scale(1.1); /* 微微放大 */
}

.floating-btn svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}
/* LINE 按鈕專用顏色 */
.line-btn {
    background-color: #00B900; /* LINE 品牌綠 */
}

    .line-btn:hover {
        background-color: #009800;
        transform: translateY(-3px);
    }

/* Facebook 按鈕專用顏色 */
.fb-btn {
    background-color: #3b5998;
}

    .fb-btn:hover {
        background-color: #344e86;
        transform: translateY(-3px);
    }


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

    .ig-btn svg path {
        fill: white; /* Ensures the Instagram logo is white */
    }

/* 拜訪人數樣式 */
.visitor-count {
    text-align: center; /* 添加這一行 */
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .visitor-count h2 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .visitor-count p {
        font-size: 18px;
        color: #555;
    }

    .visitor-count span {
        font-size: 24px;
        font-weight: bold;
        color: #ff6600;
        transition: all 0.5s ease-in-out;
    }

/* 樣式調整以符合圖片 */
#services {
    padding: 40px 0;
    background-color: #f9f9f9; /* 淺灰色背景 */
}

    #services .container {
        width: 90%; /* 讓容器佔滿整個 section 的寬度 */
        max-width: none; /* 移除最大寬度限制，或者設定一個非常大的值 */
        margin: 0 auto;
        text-align: center;
        padding: 0 20px; /* 左右增加一些內距，避免內容緊貼螢幕邊緣 */
    }

    #services h2 {
        color: #333;
        margin-bottom: 30px;
    }

.promotion-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: #555;
    margin-bottom: 25px;
}

.free-label {
    background-color: #ffc107; /* 黃色背景 */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    margin-right: 10px;
}

.free-mark {
    color: #dc3545; /* 紅色 */
    font-weight: bold;
    margin-left: 15px;
}

.number {
    color: #007bff; /* 藍色 */
    font-size: 2em;
    font-weight: bold;
    margin: 0 5px;
}

.unit, .service {
    font-weight: bold;
    margin: 0 5px;
}

.styled-services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* 使用 space-around 可以讓項目周圍有平均的空間 */
}

.styled-service-item {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 0 30px 0 0; /* 將右上角的 8px 增加到 15px (或其他您想要的值) */
    padding: 40px 20px 20px 20px;
    margin-bottom: 20px;
    width: calc(32% - 20px);
    margin-left: 1%;
    margin-right: 1%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden; /* 建議添加，防止偽元素意外溢出 */
    transition: background 0.3s ease, color 0.3s ease; /* 添加背景過渡 */
}

    .styled-service-item > a { /* 假設 a 包裹所有內容 */
        position: relative;
        z-index: 1;
        /* 其他 a 的樣式 */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* ... */
    }
    .styled-service-item:hover h3,
    .styled-service-item:hover p {
        color: #333; /* 或者 #0056b3 等深色，確保在淡藍色上可讀 */
    }



@media (max-width: 992px) {
    .styled-service-item {
        /*width: calc(45% - 15px);*/ /* 在中等螢幕上調整為兩欄 */
    }
}

@media (max-width: 768px) {
    .styled-service-item {
        width: 90%; /* 在小螢幕上調整為一欄 */
    }
    .floating-social {
        right: 10px;
        bottom: 10px;
    }

    .floating-btn {
        width: 45px;
        height: 45px;
    }
    .you-might-like-item {
        flex-basis: calc(50% - 10px); /* 2 items per row */
    }
}
@media (max-width: 480px) {
    .you-might-like-item {
        flex-basis: 100%; /* 1 item per row */
    }
}

.ribbon-container {
    position: absolute;
    top: 0;
    left: 20px; /* 調整旗幟的水平位置 */
    z-index: 11; /* 確保旗幟在內容之上 */
}

.ribbon {
    background-color: #007bff; /* 旗幟背景色 */
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 0 5px 5px 0; /* 右下角和右側圓角 */
    position: relative;
}

    .ribbon span {
        display: block;
        line-height: 1.5;
        font-size: 1.5em; /* 將字體大小增加 */
    }

    .ribbon::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px; /* 創造旗幟的下垂效果 */
        border-left: 10px solid transparent;
        border-right: 10px solid #007bff; /* 與旗幟背景色一致 */
        border-bottom: 10px solid transparent;
    }

.service-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .service-icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.styled-service-item h3 {
    color: #333; /* 您原本設定的標題顏色 */
    transition: color 0.3s ease; /* 添加顏色過渡效果 */
}

.styled-service-item p {
    color: #777; /* 您原本設定的段落顏色 */
    transition: color 0.3s ease; /* 添加顏色過渡效果 */
}

.styled-service-item:hover {
    /* background-color: #007bff; */ /* <--- 刪除或註釋掉這一行 */
    cursor: pointer;
    background: linear-gradient( to bottom, /* 從上到下 */
    white 25%, /* 前 50% 是白色 (您可以調整這個百分比) */
    #e0f2f7 90% /* 在 90% 的位置變成目標淡藍色 (您可以調整這個百分比) */
    /* 90% 到 100% 會是純淡藍色 */
    );
}


    /* 確保旗幟的文字顏色不受影響 (如果需要) */
    .styled-service-item:hover .ribbon span {
        color: white; /* 保持白色 */
    }

.styled-service-item a {
    text-decoration: none; /* 移除底線 */
    color: inherit; /* 繼承父元素的文字顏色 */
    /* --- 新增或確認以下樣式 --- */
    display: flex; /* 將連結本身設為 Flex 容器 */
    flex-direction: column; /* 使其內部元素垂直排列 */
    align-items: center; /* 水平居中其內部元素 (圖示、標題、段落) */
    width: 100%; /* 確保連結佔滿寬度 */
    height: 100%; /* 確保連結佔滿高度 */
    /* --- ------------------- --- */
}


.styled-service-item .service-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    transition: width 0.3s ease, height 0.3s ease;
    background-color: transparent; /* <--- Add or change this line */
    /* Remove any other background or background-color property */
}

    /* 同時確保圖片本身能填滿這個變大的容器 */
    .styled-service-item .service-icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* 'contain' 會完整顯示圖片並保持比例，
                           'cover' 會填滿容器但可能裁切圖片，
                           根據您的圖片選擇 */
        display: block; /* 避免圖片下方出現奇怪的空隙 */
    }

/* 圓圈容器的樣式 */
.circled-items-container {
    display: inline-flex; /* 讓內部項目水平排列 */
    align-items: center; /* 垂直居中對齊 */
    margin-left: 15px; /* 與前面的文字保持一些距離 */
    /* --- 添加或修改這一行 --- */
    margin-bottom: 30px; /* 增加底部的外邊距，值可以根據需要調整 */
    /* --- ----------------- --- */
}

/* 每個圓圈項目的樣式 */
.circled-item {
    display: inline-flex; /* 使用 flex 來居中文字 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 50px; /* 設定圓圈寬度 */
    height: 50px; /* 設定圓圈高度 (與寬度相同) */
    background-color: #e0eaf1; /* 設定圓圈背景色 (淡藍灰色) */
    border-radius: 50%; /* 設定圓角為 50% 使其變為圓形 */
    margin: 0 5px; /* 設定圓圈之間的左右間距 */
    color: #334; /* 設定文字顏色 (深灰藍) */
    font-size: 1.4em; /* 設定文字大小 (根據需要調整) */
    font-weight: bold; /* 設定文字加粗 */
    line-height: 1; /* 確保文字在垂直方向上不會有額外間距 */
    text-align: center; /* 再次確保文字居中 */
}

    /* 可選：如果想讓數字 '6' 的樣式不同 */
    .circled-item.number-item {
        /* 可以設定不同的背景色或文字顏色 */
        /* background-color: #cce5ff; */
        /* color: #0056b3; */
    }

/* 調整 .promotion-text 以確保垂直對齊 */
.promotion-text {
    display: flex;
    justify-content: center;
    align-items: center; /* 確保所有元素垂直居中 */
    font-size: 1.5em;
    color: #555;
    margin-bottom: 25px;
    flex-wrap: wrap; /* 允許在小屏幕上換行 */
}





/*loading*/
/* File: wwwroot/css/loadingIndicator.css */

#loading-overlay {
    /* Initially hidden */
    display: none;
    /* Overlay styling */
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Alternative: Dark overlay */
    z-index: 9999; /* Ensure it's on top */
    /* Center content using flexbox */
    justify-content: center;
    align-items: center;
}

.loading-content {
    background-color: #fff; /* White box for content */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    /* Optional: Add max-width if needed */
    /* max-width: 300px; */
}

.loading-spinner {
    border: 5px solid #f3f3f3; /* Light grey track */
    border-top: 5px solid #5a5a5a; /* Dark grey spinner color (adjust as needed) */
    /* border-top: 5px solid #007bff; */ /* Blue spinner color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto; /* Center horizontally, space below */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: #333; /* Dark text color */
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0; /* Remove default margins */
}
.nav-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0; /* 根據需要調整 */
    font: inherit; /* 繼承父元素的字體 */
    cursor: pointer;
    color: inherit; /* 繼承父元素的文字顏色，或設置您想要的連結顏色 */
    text-decoration: none; /* 如果不想下劃線 */
    /* 其他樣式使其融入導航條 */
    display: inline-block; /* 或者 flex, block 取決於佈局需要 */
    line-height: inherit;
}

    .nav-link-button:hover {
        text-decoration: underline; /* Hover 時顯示下劃線 */
        /* 或其他 Hover 效果 */
    }


/* --- 響應式設計 (行動版 - 修改或確認以下樣式) --- */
@media (max-width: 768px) {

    header .container {
        /* Keep flex, space-between, and relative positioning */
        /* No changes needed here if desktop rule is sufficient */
    }

    /* ** 主要導航列表 ul 在行動版下的樣式 (覆蓋桌面版樣式) ** */
    nav ul#main-nav-ul {
        list-style: none; /* Remove list style */
        margin: 0; /* Remove default margin */
        padding: 0; /* Reset padding */
        gap: 0; /* Ensure no gap between items */
        flex-direction: column; /* ** Stack items vertically when displayed ** */
        /* --- Positioning and Visibility --- */
        position: absolute; /* ** Position relative to header.container ** */
        top: 100%; /* ** Position right below the header ** */
        left: 0; /* Align to the left edge of the header container */
        width: 100%; /* ** Take full width of the header container ** */
        /* If you want a side menu, use 'right: 0; width: 250px;' and 'right: -250px;' for hidden */

        background-color: #fff; /* Menu background color */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add shadow */
        z-index: 998; /* Below toggle button (z-index 999 or 1001), above content */
        overflow-y: auto; /* Add scroll if menu is too long */
        max-height: calc(100vh - 50px); /* Limit max height to viewport height minus header height */
        /* --- Initial State (Hidden) --- */
        display: none; /* ** Hide the UL by default on mobile ** */
        /* Optional: Add transition for smooth appearance */
        /* opacity: 0; */ /* If using opacity/visibility toggle */
        /* visibility: hidden; */
        /* transition: opacity 0.3s ease-out, visibility 0.3s ease-out; */
    }

        /* ** 主要導航列表 ul 在行動版下展開時的狀態 (添加了 .active 類別時) ** */
        nav ul#main-nav-ul.active {
            display: flex; /* ** Show the menu when active ** */
            /* If using opacity/visibility: */
            /* opacity: 1; */
            /* visibility: visible; */
        }

    /* ** 行動版菜單中每個列表項 li 的樣式 ** */
    nav ul li {
        margin-left: 0; /* Remove desktop left margin */
        margin-bottom: 0; /* ** Remove vertical margin on li itself ** */
        width: 100%; /* Ensure each list item takes full width */
    }

        /* Remove the desktop specific li + li margin */
        nav ul li + li {
            margin-left: 0;
        }


        /* ** 行動版菜單中連結、文字、按鈕的樣式 ** */
        /* Apply padding and border-bottom to the elements *inside* the li */
        nav ul li a,
        nav ul li span, /* Target "您好, pm pm" span */
        nav ul li form button /* Target the logout button */ {
            display: block; /* ** Make these elements block-level to fill width and stack ** */
            padding: 12px 20px; /* ** Add internal padding for vertical spacing and touch area ** */
            color: #333; /* Text color */
            text-decoration: none; /* Remove underline */
            font-size: 1.1em; /* Text size */
            text-align: left; /* Align text to the left */
            border-bottom: 1px solid #eee; /* ** Add a separator line below each item ** */
            width: 100%; /* Ensure these block elements take full width of their parent li */
            box-sizing: border-box; /* Include padding and border in the element's total width */
        }

        /* Remove the bottom border from the last item */
        nav ul li:last-child a,
        nav ul li:last-child span,
        nav ul li:last-child form button {
            border-bottom: none;
        }


        /* ** Style for the greeting text ("您好, pm pm") ** */
        nav ul li span {
            cursor: default; /* Default cursor, not pointer */
            font-weight: normal; /* Not bold */
            color: #555; /* Or match link color #333 */
        }

    /* ** Style for the logout button ** */
    .nav-link-button {
        background: none;
        border: none;
        color: #000;
        font-size: 16px; /* 和其他選單項目對齊 */
        padding: 12px 16px;
        text-align: left;
        display: block;
        width: 100%;
        cursor: pointer;
        text-decoration: none;
        font-family: inherit; /* 跟其他項目一致 */
    }

        .nav-link-button:hover {
            color: #007bff; /* Or your desired hover color */
            text-decoration: none;
        }


    /* mobile-nav-toggle is already displayed in the media query */
    .mobile-nav-toggle {
        display: block;
    }

    /* --- Mobile Dropdown Styles (for multi-level menus) --- */
    .dropdown-content {
        position: static; /* ** Remove absolute positioning ** */
        display: none; /* ** Hide by default (will need JS to toggle display) ** */
        box-shadow: none; /* Remove shadow */
        background-color: #f9f9f9; /* Slightly different background */
        padding-left: 20px; /* Indent child items */
        border-top: 1px solid #eee; /* Add top border */
    }

    /* Remove desktop hover rule for dropdown content */
    .dropdown:hover .dropdown-content {
        display: none;
    }

    /* If you implement JS to toggle child dropdowns, you'd need a rule like this: */
    /*
    .dropdown.active .dropdown-content {
        display: block; // Or flex
    }
    */


    /* --- Other Responsive Styles (Keep as is) --- */
    #hero h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

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

    .contact-promo-section .promo-email {
        font-size: 2rem;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .styled-service-item {
        width: 90%;
    }

    @media (max-width: 992px) {
        .styled-service-item {
           /* width: calc(45% - 15px);*/
        }
    }
}
/* --- 響應式媒體查詢結束 --- */

.scroll-area { /* This is the main rule for .scroll-area to modify */
    position: relative;
    padding: 0 45px; /* Add padding to make space for the buttons INSIDE */
    margin: 40px auto; /* Add some vertical margin */
    max-width: 1100px; /* Match container width or adjust as needed */
    text-align: center; /* MODIFICATION: ADDED to center inline/inline-block children */
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 10;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.scroll-area {
    position: relative;
    padding: 0 45px; /* Add padding to make space for the buttons INSIDE */
    margin: 40px auto; /* Add some vertical margin */
    max-width: 1100px; /* Match container width or adjust as needed */
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* --- Color & Appearance --- */
    background-color: #2a3d66; /* Use primary blue from your theme */
    color: white; /* White arrow for contrast */
    border: none; /* Remove default border */
    /* --- Size --- */
    width: 45px; /* Increased width */
    height: 45px; /* Increased height */
    border-radius: 50%; /* Keep it circular */
    /* --- Centering Arrow & Style --- */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Increased arrow size */
    font-weight: bold; /* Make arrow bolder */
    line-height: 1; /* Ensure proper vertical centering */
    /* --- Other --- */
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2); /* Slightly stronger shadow */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

    .scroll-btn.left {
        left: 10px; /* Adjusted position within padding */
    }

    .scroll-btn.right {
        right: 10px; /* Adjusted position within padding */
    }



.tools-scroll-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    /* padding: 10px 0; */ /* Remove padding here if added to .scroll-area */
    width: 100%;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .tools-scroll-container::-webkit-scrollbar {
        display: none;
    }

.tools-scroll {
    display: flex;
    gap: 16px;
    width: max-content;
    /* padding: 0 10px; */ /* Remove padding here if added to .scroll-area */
}

.tool-card {
    flex: 0 0 auto;
    width: 160px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-decoration: none; /* Ensure link doesn't have underline */
    color: #333; /* Default text color */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee; /* Subtle border */
}

    .tool-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        text-decoration: none; /* Ensure link doesn't have underline */
        color: #2a3d66; /* Change text color on hover */
        background-color: #FFF0F5; /* MODIFICATION: Added beige background on hover */
    }

    .tool-card span {
        display: block;
        margin-top: 8px; /* Space between icon and text */
        font-weight: 500;
    }

/* --- Daily Reward Section & Button --- */
#daily-reward h2 {
    color: #2a3d66; /* Consistent heading color */
    margin-bottom: 1rem;
}

#daily-reward p.lead {
    color: #555;
    font-size: 1.1rem;
}
#daily-reward .container {
    text-align: center;
}

.points-collect-button {
    background-color: #ffc107; /* A nice gold/yellow for points/rewards */
    color: #333; /* Darker text for better contrast on yellow */
    padding: 15px 30px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .points-collect-button:hover {
        background-color: #e0a800; /* Darker gold on hover */
        color: #333;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .points-collect-button:disabled {
        background-color: #aaa;
        color: #666;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .points-collect-button i.fa-star {
        margin-right: 10px;
        animation: sparkle 1.5s infinite ease-in-out; /* Optional: subtle sparkle */
    }
@keyframes sparkle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

#points-feedback-message.success {
    color: #28a745; /* Green for success */
}

#points-feedback-message.error {
    color: #dc3545; /* Red for error/already collected */
}


.form-interactive-area {
    position: relative;
}

.form-disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 220, 220, 0.75); /* 更明顯的半透明灰色 */
    z-index: 1000; /* 確保在最上層 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.375rem;
    cursor: default; /* 覆蓋層本身不顯示特殊鼠標指針 */
    /* 確保覆蓋層本身可以接收點擊，以防意外點透 */
    pointer-events: auto;
}

.form-disabled-overlay-text {
    color: #212529; /* 深色文字，更易讀 */
    font-weight: 600;
    font-size: 1.1rem;
    padding: 25px 30px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 當表單區域被“禁用”時，其下的直接內容元素將無法響應鼠標事件 */
.form-interactive-area.is-visually-disabled > *:not(.form-disabled-overlay) {
    pointer-events: none; /* 核心：阻止鼠標事件穿透到下面的元素 */
    opacity: 0.5; /* 視覺上調暗，表示不可用 */
    user-select: none; /* 防止選擇文本 */
}


/* Basic styling for "猜你喜歡" section - can be moved to baziInput.css */
/* --- Style 2: New "Pill/Button" Style --- */
.you-might-like-section-style2 {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #eaeaea;
    text-align: center; /* Center the h2 and the container of links */
}

    .you-might-like-section-style2 h2 {
        margin-bottom: 30px;
        color: #444;
        font-size: 1.7em; /* Slightly smaller than original H2 */
        font-weight: 600;
    }

.you-might-like-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 12px; /* Vertical and horizontal gap */
    justify-content: center; /* Center the links within the container */
    padding: 0 10px; /* Some padding for the container itself */
}

.you-might-like-link-item {
    display: inline-block;
    background-color: #f0f6ff; /* A very light, soft blue */
    color: #0056b3; /* A good, readable blue */
    padding: 12px 18px;
    border-radius: 20px; /* Rounded pill shape */
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    border: 1px solid #d6e6ff; /* A slightly darker border for definition */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
    min-width: 200px; /* Ensure pills have some width */
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

    .you-might-like-link-item:hover {
        background-color: #0056b3; /* Darker blue on hover */
        color: #ffffff; /* White text on hover */
        border-color: #004085;
        box-shadow: 0 3px 8px rgba(0, 86, 179, 0.2);
        transform: translateY(-2px);
    }

    .you-might-like-link-item .feature-name-alt {
        display: block;
        font-size: 1.05em;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .you-might-like-link-item .feature-desc-alt {
        display: block;
        font-size: 0.8em;
        opacity: 0.85;
        margin-bottom: 7px;
        line-height: 1.3;
        /* color will be inherited, or set specifically for normal/hover if needed */
    }

    .you-might-like-link-item .feature-cost-alt {
        display: block;
        font-size: 0.85em;
        font-weight: bold;
        color: #c0392b; /* A slightly muted red for cost */
    }
    /* When link is hovered, cost color changes for visibility */
    .you-might-like-link-item:hover .feature-desc-alt {
        opacity: 1; /* Make description fully opaque on hover if desired */
    }

    .you-might-like-link-item:hover .feature-cost-alt {
        color: #f5c6cb; /* Lighter red for contrast on dark hover */
    }