/* --- 字體設定 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;700&display=swap');

body {
    font-family: 'Noto Serif TC', serif;
    background-color: #fcfcfc;
    color: #444;
}

/* 預設狀態：完全透明，無陰影，文字白色 */
.transition-navbar {
    background-color: transparent !important; /* 關鍵：透明 */
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* 捲動後的狀態：變回白色毛玻璃，文字變深色 (會透過 JS 加入此 class) */
.transition-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* 處理文字顏色變化 */
/* 預設(透明背景)時：連結白色 */
.transition-navbar .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
}
/* 捲動後(白背景)時：連結變深色 (透過 CSS 選擇器權重) */
.transition-navbar.scrolled .nav-link {
    color: #444 !important;
}

.transition-navbar.scrolled .nav-link:hover {
    color: #bfa15f !important;
}
/* --- 網站名稱文字顏色控制 --- */

/* 1. 預設狀態 (透明背景)：文字為白色 */
.transition-navbar .site-title-text {
    color: rgba(255, 255, 255, 0.95) !important;
    transition: color 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 加一點陰影，確保在淺色背景上也看得到 */
}

/* 2. 捲動後 (白色背景)：文字變深色 */
.transition-navbar.scrolled .site-title-text {
    color: #333 !important;
    text-shadow: none; /* 移除陰影，保持乾淨 */
}
/* --- 頁尾 (修改為白色風格) --- */
.theme-footer {
    background-color: #ffffff; /* 背景改白 */
    color: #666; /* 一般文字改深灰 */
    font-size: 0.9rem;
    border-top: 1px solid #eee; /* 邊線改極淡灰色 */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.02); /* 加一點點向上陰影，增加層次 */
}

.theme-footer a {
    color: #444; /* 連結改深色 */
    text-decoration: none;
    transition: color 0.3s;
}

.theme-footer a:hover {
    color: #bfa15f; /* Hover 改金色 */
}

/* ★ 重要修正：強制將 Layout 中設定為 text-white 的網站名稱改回深色 */
.theme-footer .text-white {
    color: #222 !important;
    font-weight: 600;
}
/* =========================================
   Logo 動態顯示效果 (預設隱藏，捲動顯示)
   ========================================= */

/* 1. 預設狀態 (在頂端時)：隱藏整個 <a> 標籤 */
.transition-navbar .navbar-brand {
    opacity: 0; /* 透明度設為 0 */
    visibility: hidden; /* 隱藏元素 (但在畫面上保留空間，避免右側選單跳動) */
    transform: translateY(-20px); /* 稍微往上移，製造滑入感 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 平滑過渡動畫 */
}

/* 2. 捲動後的狀態 (JS 加入 .scrolled 時)：顯示 */
.transition-navbar.scrolled .navbar-brand {
    opacity: 1; /* 不透明 */
    visibility: visible; /* 可見 */
    transform: translateY(0); /* 回到原位 */
}
/* --- 首頁 Hero 區塊 (原 Home/Index 的 inline style) --- */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* 定義在這裡，之後海洋風就可以換張圖 */
    background-image: url('../../images/ocean-home-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin-top: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35); /* 半透明遮罩 */
}

.hero-title {
    font-weight: 300;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-subtitle {
    letter-spacing: 0.15em;
    font-weight: 300;
    margin-bottom: 3rem;
    font-size: 1.5rem;
}

.theme-btn-primary {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 15px 40px;
    letter-spacing: 2px;
    border-radius: 0; /* 直角風格 */
    transition: all 0.3s;
}

    .theme-btn-primary:hover {
        background-color: #fff;
        color: #000;
    }

/* --- 分隔線 --- */
.section-divider {
    width: 50px;
    height: 3px;
    background-color: #bfa15f; /* 金色質感 */
    margin: 0 auto;
}

/* --- 輪播動畫 (原本在 View 裡的 style) --- */
.carousel-fade .carousel-item {
    transition: opacity 1.5s ease-in-out !important; /* 慢速淡入淡出 */
}
/* --- 優化使用者體驗：互動特效 --- */

/* 1. 所有按鈕 (btn) 的通用懸停效果 */
.btn {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; /* 增加彈性曲線，讓上浮感更Q彈 */
}

    .btn:hover {
        transform: translateY(-3px); /* 向上浮動 3px */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 增加陰影，強化立體感 */
    }

    .btn:active {
        transform: translateY(-1px); /* 按下時稍微下沉，模擬回饋感 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* 2. 針對「首頁 Hero 區塊按鈕」的特別優化 (與深色背景對比) */
.theme-btn-primary:hover {
    /* 繼承上面的 translateY，但陰影改用白色光暈效果比較適合深色背景 */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* 3. 房型卡片 (Card) 的懸停效果 */
/* 讓整張卡片移過去也浮起來，增加點擊慾望 */
.hover-shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-shadow:hover {
        transform: translateY(-5px); /* 卡片浮動幅度大一點 */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important; /* 強制覆蓋 Bootstrap 預設陰影 */
    }

/* ★ RWD 手機版專用設定 */
@media (max-width: 768px) {
    /* 1. 手機版導覽列設為純黑，避免選單展開時背景透明看不清文字 */
    .theme-navbar {
        background-color: #141414 !important;
        backdrop-filter: none;
    }

    /* 2. Hero 標題縮小，避免手機螢幕被撐爆 */
    .hero-title {
        font-size: 2.2rem; /* 原本太大 */
        word-wrap: break-word; /* 避免長單字破版 */
    }

    /* 3. Hero 副標題調整 */
    .hero-subtitle {
        font-size: 1rem;
    }

    /* 4. 按鈕改為 100% 寬度，手指比較好點 */
    .theme-btn-primary {
        width: 100%;
        margin-top: 1rem;
        padding: 12px 0;
    }

    /* 5. 輪播控制箭頭縮小 */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
    }
}
/* =========================================
   LOGIN PAGE (Ocean Style - Split Layout)
   ========================================= */

.ocean-login-wrapper {
    background-color: #fff;
    overflow: hidden;
}

/* 左側邊欄 */
.ocean-login-sidebar {
    background-color: #fff;
    position: relative;
    z-index: 1;
    flex: 0 0 450px;
    max-width: 100%;
    /* 這裡可以加一點右側陰影區隔 */
    box-shadow: 5px 0 15px rgba(0,0,0,0.05);
}

.ocean-login-content {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* 右側背景圖 (改為海景) */
.ocean-login-bg {
    /* 使用與首頁相同的海洋 Hero 圖片，或另外選一張直式海景 */
    background-image: url('../../images/ocean-login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.ocean-login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ocean 風格：使用深藍色半透明遮罩 */
   /* background-color: rgba(13, 110, 253, 0.25);*/
}

/* 輸入框樣式 - Ocean 版 (帶點藍色調) */
.ocean-form-control {
    height: 50px;
    background-color: #f0f8ff; /* AliceBlue 淺藍底色 */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #495057;
}

    .ocean-form-control:focus {
        background-color: #fff !important;
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); /* Bootstrap Primary Blue Glow */
        outline: none;
    }

/* RWD: 手機版讓左側佔滿 */
@media (max-width: 768px) {
    .ocean-login-sidebar {
        flex: 0 0 100% !important;
        box-shadow: none;
    }
    /* 如果不想在手機版載入大圖，可隱藏 */
    .ocean-login-bg {
        display: none;
    }
}