/* #region  全域的設定*/
/* 設定body滿版,並隱藏滾動條 */
[v-cloak] {
    display: none;
}

* {
    box-sizing: border-box;
}
    /* 隱藏全部 Chrome, Safari, Edge 的滾動條 */
    *::-webkit-scrollbar {
        display: none;
    }
.disabled-click {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#index {
    width: 100%;
    height: 100%;
    display: flex;
}
    /* 按鈕統一樣式 */
    #index .custom_button {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        transition: all 0.3s ease;
    }

        #index .custom_button:hover {
            background-color: var(--primary-color-light);
            border-color: var(--primary-color-light);
            color: white;
            font-weight: bold;
        }
/* #endregion */
.aboutScheduleModal2 .modal{
   height:auto;
}
/* #region 上方搜尋欄 searchBar */
.searchBar {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 56px; */
    flex-wrap: wrap;
    width: 100%;
    z-index: 500;
}

    .searchBar .head {
        display: flex;
        align-self: start;
        width: 100%;
        padding: 10px;
        background-color: #fff;
    }

    .searchBar .menuBtn {
        padding: 10px;
        text-align: center;
        font-size: 24px;
        line-height: 24px;
        width: 56px;
    }
    /* searchInput */
    .searchBar .searchInput {
        display: flex;
        flex-grow: 1;
        margin-right: 10px;
        align-items: center;
        border-radius: 50rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        overflow: hidden;
        border: 1px solid #ddd;
        width: 100%;
    }

        .searchBar .searchInput span {
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            white-space: nowrap;
            border: none; /* border-0 */
            border-radius: 0.25rem;
        }

        .searchBar .searchInput input {
            box-shadow: none;
            border: 0;
            background-color: transparent;
            color: white;
        }
            /* 提示輸入的字體顏色 */
            .searchBar .searchInput input::placeholder {
                color: #c4bebe;
            }

    .searchBar .searchBtns {
        display: flex;
        gap: 3px;
        /* width: 100%; */
        justify-content: center;
        margin: 0 5px;
        margin-top: 5px;
        background-color: transparent;
    }
        /* searchBtns */
        .searchBar .searchBtns button {
            min-width: 70px;
            height: 38px;
            display: flex;
            align-items: center;
            gap: 4px; /*讓內部元素有間距 */
            background-color: #fff;
            color: #000;
            border: none;
            border-radius: 50rem;
            padding: 10px 15px; /* 內距 */
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            font-size: 1rem;
            transition: background-color 0.1s ease-in-out;
            justify-content:center;
        }

            .searchBar .searchBtns button:hover {
                /*  background-color: #e2e6ea;*/
            }
        .searchBar .searchBtns button i{
            display:none;
        }
/* #endregion */

/* #region 左側側欄funTripMenuBar */
.funtripMenuBar {
    width: 150px;
    position: fixed;
    top: 0;
    border-radius: 0 10px 10px 0;
    /*    background: linear-gradient(45deg, var(--primary-color), #bbaa92, #e4c7b8);*/
    box-shadow: 0.2rem 0 1rem 0.1rem #c39e88;
    overflow: hidden;
    /* display: flex; */
    height: 100vh;
    border: none;
    transition: width 0.3s ease;
    z-index: 1000;
    background-color: white;
}

    .funtripMenuBar .el-menu {
        background-color: transparent;
        border: 0;
    }

    .funtripMenuBar .el-menu-item {
        display: flex;
        align-items: center;
        text-align: start;
        margin: 0.5rem;
        padding: 10px !important;
        border-radius: 15px;
        color: #8b645a;
        ;
    }
        .funtripMenuBar a {
            color: inherit;
            text-decoration: none; 
        }
    .funtripMenuBar .el-menu-item:hover {
        background-color: #8b645a;
        border-color: #8b645a;
        color: white;
        font-weight: bold;
    }
        /* 按鈕被選到時變色 */
        .funtripMenuBar .el-menu-item.is-active {
            /*        background-color: var(--primary-color-light);*/
            border-color: var(--primary-color-light);
            font-weight: bold;
        }

    .funtripMenuBar .funtripMenu .logoBox {
        display:flex;
        position:relative;       
        align-items:center;
        overflow:hidden;
        padding: 5px !important;
        margin: 8px;
        gap: 10px;
    }
    .funtripMenuBar .funtripMenu .logoBox img{
       
        position:absolute;       
       left:-12px;
       top:-5px;
    }
    .funtripMenuBar .funtripMenu .logoBox span{
       
        position:absolute;       
       left:40px;
       top:3px;
    }

/* #endregion */

/* #region 右側側欄 scheduleBar 設定*/
.scheduleBar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500;
}

    .scheduleBar .scheduleBtn {
        position: relative;
        top: 95px;
        width: 40px;
        height: 40px;
        padding-left: 5px;
        gap: 5px;
        font-size: 16px;
        border: 0;
        color: white;
        background-color: #ffc107;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        padding: 0.5rem 0.5rem;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        z-index: 1000;
        margin-top: 20px;
        transition: width 0.3s ease, background-color 0.3s ease;
    }

        .scheduleBar .scheduleBtn .el-icon {
            font-size: 24px;
        }

        .scheduleBar .scheduleBtn span {
            padding-left: 5px;
            min-width: 40px;
        }

        .scheduleBar .scheduleBtn:hover {
            width: 80px;
        }
    /* 行程面板 */
    .scheduleBar .schedulePanel {
        position: fixed;
        /* position: relative; */
        max-width: 100vw;
        height: 100%;
        overflow: auto; /* 允許滾動 */
        scrollbar-width: none; /* 隱藏 Firefox 的滾動條 */
        top: 0;
        right: 0;
        background-color: white;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        z-index: 500;
    }
        /* 面板 Header */
        .scheduleBar .schedulePanel .head {
            padding: 1rem;
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0px 4px 6px var(--primary-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 600;
        }

            .scheduleBar .schedulePanel .head h3 {
                margin: 0;
            }
        /* 下拉選單 */
        .scheduleBar .schedulePanel .el-select {
            background-color: #fff;
            padding: 15px;
            padding-bottom: 10px;
            width: 100%;
            z-index: 600;
            /* overflow: hidden; */
        }

.el-popper {
    /* width: 90%; */
    max-width: 90%;
    overflow: hidden;
}

/* 面板內容 (行程列表) scheduleCardBox */
.scheduleBar .scheduleCardBox {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    padding-top: 0;
    align-items: start;
    margin-bottom:80px;
}

.scheduleBar .scheduleCard {
    padding: 5px;
    width: 100%;
}
/* 行程卡片資訊 */
.scheduleBar .cardInfo {
    display: flex;
    flex-wrap: wrap;
    height: 170px;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 0.25rem;
}

    .scheduleBar .cardInfo:hover {
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        /* 卡片稍微提高 */
        transform: translateY(-5px) translateX(-5px);
    }

    .scheduleBar .cardInfo .imgBox {
        width: 100%;
        height: 100px;
        overflow: hidden;
        border-radius: 0.25rem; /* 4px */
    }
        .scheduleBar .cardInfo .imgBox:hover {
            cursor: pointer;
        }

        .scheduleBar .cardInfo .imgBox img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 裁剪圖片以填滿，但不變形 */
        }

    .scheduleBar .cardInfo .textBox {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    

    .scheduleBar .cardInfo .title {
        font-size: 14px;
        font-weight: bold;
        /* display: block; */
        width: 100%;
        display: -webkit-box; /* 啟用 WebKit 彈性盒子 */
        -webkit-line-clamp: 1; /* 限制最多顯示 2 行 */
        -webkit-box-orient: vertical; /* 設定為垂直排列 */
        overflow: hidden;
    }
        .scheduleBar .cardInfo .title:hover {
            cursor: pointer;
        }

    .scheduleBar .cardInfo .date {
        min-width: 145px;
        color: #6c757d;
        font-size: 12px;
        margin-bottom: 0;
    }
        .scheduleBar .cardInfo .date:hover {
            cursor: pointer;
        }
    /* 行程動作按鈕 */
    /* 分享、編輯、刪除行程按鈕 */
    .scheduleBar .cardInfo .button_group {
        width: calc(100% - 145px);
        display: flex;
        justify-content: end;
        gap: 5px;
    }

    .scheduleBar .cardInfo .cardBtn {
        background-color: #f5f5f5; /* 淺灰色背景 */
        color: #6c757d;
        font-size: 12px;
        border: none;
        border-radius: 50%; /* 圓形按鈕 */
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: background 0.3s ease-in-out;
    }

        .scheduleBar .cardInfo .cardBtn:hover {
            background-color: #e0e0e0; /* 稍深的灰色 */
            color: cornflowerblue;
        }

    .scheduleBar .cardInfo .dropdown-item {
        display: flex;
        height: 50px;
        width: 100%;
        align-items: center;
        gap: 8px; /* 圖示與文字之間的間距 */
        font-size: 16px;
        padding: 8px 12px;
        text-align: left; /* 讓內容靠左對齊 */
    }

    .scheduleBar .cardInfo .dropdown-menu {
        padding: 0;
        border-radius: 10px;
        overflow: hidden;

    }

    .scheduleBar .cardInfo .dropdown-item .icon {
        width: 20px;
        font-size: 18px;
    }

    .scheduleBar .cardInfo .dropdown-item p {
        margin: 0; /* 移除 p 標籤預設 margin，避免影響對齊 */
        font-size: 16px;
    }

/* 建立新行程按鈕 */
.scheduleBar .addNewScheduleBtn {
    position: sticky;
    bottom: 0;
    padding: 20px;
    background-color: #fff;
}

    .scheduleBar .addNewScheduleBtn button {
        width: 100%;
        border-radius: 8px; /* 圓角 */
        padding: 12px 24px; /* 內距 */
        font-size: 16px; /* 文字大小 */
        font-weight: bold; /* 文字加粗 */
        transition: background 0.3s ease-in-out; /* 動畫效果 */
    }

        .scheduleBar .addNewScheduleBtn button:hover {
            background-color: #8db0d4; /* 深藍色 */
        }
/* #endregion */

/* #region 右側側欄 scheduleDetailBar 設定*/

.scheduleDetailBar .swiper {
    width: 100%;
}

.scheduleDetailBar .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .scheduleDetailBar .swiper-slide img {
        display: block;
        width: 100%;
        object-fit: cover;
    }


.scheduleDetailBar {
    /* display: none; */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background-color: #fff;
}

.scheduleDetailPanel {
    overflow: auto;
    scrollbar-width: none;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 500;
}

.scheduleDetailBar .head {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加陰影效果 */
}

    .scheduleDetailBar .head div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .scheduleDetailBar .head h5 {
        /* line-height: 20px;     */
        margin: 0;
    }

    .scheduleDetailBar .head .el-icon {
        font-size: 24px;
        cursor: pointer;
    }

        .scheduleDetailBar .head .el-icon.closeBtn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ceafa18e;
        }
/*  Navigation Tabs */
.scheduleDetailPanel .NavTab {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1rem 1rem 0;
    font-size: 1.5rem;
}

    .scheduleDetailPanel .NavTab .el-tabs__item,
    .el-tabs__item {
        color: var(--primary-color);
    }

        .scheduleDetailPanel .NavTab .el-tabs__item.is-active,
        .el-tabs__item:hover {
            color: var(--primary-color-light);
            font-weight: bold;
        }

    .scheduleDetailPanel .NavTab button {
        margin-left: 1rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 24px;
    }

    .scheduleDetailPanel .NavTab .el-tabs {
        width: calc(100% - 40px - 1rem);
    }

    .scheduleDetailPanel .NavTab .el-tabs__header {
        margin: 0;
    }

.scheduleDetailPanel .detailTitle {
    display: flex;

    height: 30px;
    margin: 1rem 1rem 0; 
    font-weight: 700;
    font-size: 1.25rem;
}
    .scheduleDetailPanel .detailTitle .el-icon {
        margin-left: 1rem;
        height: 30px;
        color: var(--primary-color) ;
        font-size: 1.5rem;
    }

.scheduleDetailPanel .CardList {
    display: flex;
    /* flex-wrap: wrap; */
    /* align-items:flex-start;
  justify-content:center ; */
    flex-direction: column;
    overflow-x: auto;
    margin: 0 10px 10px;
    height: calc(100vh - 180px);
    gap: 8px;
}

.scheduleDetailPanel .el-card {
    width: 100%;
    height: 116px;
    min-height: 116px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.scheduleDetailPanel .el-card__body {
    display: flex;
    padding: 0.5rem;
    max-height: 116px;
}

.scheduleDetailPanel .el-card .imgBox {
    position: relative;
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1; /* 設定容器的長寬比為 1:1 */
}

    .scheduleDetailPanel .el-card .imgBox i {
        position: absolute;
        top: -5px;
        left: -5px;
        font-size: 1.6rem;
        color: #7a72df;
    }

    .scheduleDetailPanel .el-card .imgBox span {
        position: absolute;
        top: -5px;
        left: -8px;
        padding: 0 0.3rem;
        font-size: 1rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
    }

    .scheduleDetailPanel .el-card .imgBox img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 圖片填滿容器且不變形 */
        object-position: center; /* 圖片置中 */
        transition: transform 0.5s ease; /* 平滑的過渡效果 */
        border-radius: 0.25rem;
    }

    .scheduleDetailPanel .el-card .imgBox:hover {
        transform: scale(1.05); /* 滑鼠懸停時放大圖片 */
    }

.scheduleDetailPanel .el-card .textBox {
    width: 160px;
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    flex-grow: 1;
    max-width: 160px;
    min-width: 123px;
}

    .scheduleDetailPanel .el-card .textBox .arrivalTime {
        display: flex;
        justify-content: start;
        align-items: center;
        font-weight: bold;
        gap: 3px;
    }
    .scheduleDetailPanel .el-card .textBox .editPen:hover {
        cursor: pointer;
    }

    .scheduleDetailPanel .el-card .textBox h6 {
        margin: 0.25rem 0;
        font-weight: bold;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .scheduleDetailPanel .el-card .textBox .stayTime {
        margin-top: auto;
        color: #6c757d;
        /* min-width :125px;  */
    }

.scheduleDetailPanel .el-card .noteBox {
    display: flex;
    flex-grow: 1;
    justify-content: end;
    margin-right: 0.5rem;
}
    .scheduleDetailPanel .el-card .noteBox:hover {
        cursor: pointer;
    }

.scheduleDetailPanel .el-card .notebook {
    display: flex;
    width: 2rem;
    margin-top: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.scheduleDetailPanel .el-card .note {
    display: none;
}

.scheduleDetailPanel .el-card .notebook .el-icon {
    font-size: 2rem;
}

.scheduleDetailPanel .el-card .el-dropdown .el-icon {
    margin-bottom: 0.5rem;
}

/* #endregion */

/* #region 地圖相關 #map */
#map {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 0;
}

    #map .mapBtns {
        position: absolute;
        right: 0;
        transform: translateY(-50%); /* 讓容器真正置中 */
        margin-bottom: 1rem; /* mb-3 */
        margin-right: 1rem; /* me-3 */
        display: flex;
        flex-direction: column; /* 讓內部元素垂直排列 */
        z-index: 1000;
    }

        #map .mapBtns button {
            border-radius: 6px;
            margin-bottom: 8px;
            padding: 10px 15px;
            border: 1px solid #ccc;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
        }

            #map .mapBtns button:hover {
                background-color: #e9ecef;
            }

    #map .middleBtn {
        top: 50%;
    }

    #map .bottomBtns {
        bottom: 0;
    }

    #map button:hover {
        background-color: #88b2db;
        transform: translateY(-3px) translateX(-3px);
    }
/* #endregion */

/* #region 左側景點(產品)欄 productsBar */
.productsBar {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px;
    z-index: 0;
}

.productsArea {
    width: 100%;
    height: calc(100vh - 60px);
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

    .productsArea .pushHead {
        height: 40px;
    }

.productsBar .showProductsBtn {
    position: fixed;
    left: 0;
    top: 110px;
    margin-left: 5px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .productsBar .showProductsBtn:hover {
        background-color: #88b2db;
    }

/* 篩選條件,頁面關閉鍵 */
.productsArea .sortBy {
    display: flex;
    justify-content: space-between;
    gap:10px;
    align-items: center;
    border-bottom: 1px solid #ddd; /* 灰色底線 */
    padding-bottom: 8px; /* 相當於 pb-2 */
    margin-bottom: 16px; /* 相當於 mb-3 */
}
    .productsArea .sortBy .searchResult {
       flex:1;
       font-size:20px;
    }
    .productsArea .sortBy .el-icon {
    
    }

.productsArea .productsPanel .list-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.productsArea .productsPanel {
    width: 100%;
    height: 100%;
    overflow: auto; /* 允許滾動 */
    scrollbar-width: none; /* 隱藏 Firefox 的滾動條 */
    flex-direction: column;
}

.productsArea .productCard {
    border: none;
    width: 100%;
    min-width: 350px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(122, 3, 3, 0.5);
    border-radius: 8px;
    position: relative;
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

    .productsArea .productCard .imgBox {
        position: relative;
        display: flexbox;
        align-items: center;
        width: 150px;
        height: 120px;
        overflow: hidden;
        border-radius: 8px;
        font-size: 20px;
    }

    .productsArea .productCard img {
        width: 100%;
        height:100%;
        object-fit: cover;
    }

.productsArea .myFavoriteBtn {
    position: absolute; /* 固定位置 */
    bottom: 8px;
    left: 8px;
    width: 36px; /* 按鈕大小 */
    height: 36px;
    background-color: white;
    border: 1px solid #ccc; /* 邊框顏色 */
    border-radius: 50%; /* 讓按鈕變圓 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.productsArea .productCard .textBox {
    display: flex;
    flex-direction: column;
    width: calc(100% - 150px);
}

    .productsArea .productCard .textBox strong {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 18px;
        margin-bottom: 0.25rem;
    }

    .productsArea .productCard .textBox .ratingNum {
        color: red;
        margin-bottom: 0.25rem;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap:5px;
    }

    .productsArea .productCard .textBox small {
        color: #6c757d;
        margin-bottom: 0.5rem;
        opacity: 0.6;
    }

    .productsArea .productCard .textBox .btnBox {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 8px;
        margin-top: auto;
    }

    .productsArea .productCard .textBox .addToSchedule {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 120px;
        background-color: #ffc107;
        font-size: 18px;
        padding: 6px 12px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
        color: #fff;
    }

    .productsArea .productCard .textBox .addToScheduleIcon {
        background-color: #fff;
        color: #ffc107;
        border-radius: 50%;
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
        height: 20px;
        width: 20px;
    }

    .productsArea .productCard .textBox .moveToLocation {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background-color: #f8f9fa;
        color: #212529;
        font-size: 14px; /* 與 btn-sm 類似 */
        padding: 6px;
        border: 1px solid #dee2e6; /* 與 border 類似 */
        border-radius: 50%; /* 與 rounded-circle 類似 */
        cursor: pointer;
        transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    }
        /* 滑鼠懸停時的變化 */
        .productsArea .productCard .textBox .moveToLocation:hover {
            background-color: #e9ecef;
        }
/* #endregion */

/* #region 切換地圖與景點牆按鈕  */
.switcherBtn {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:1500;
}

    .switcherBtn button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background-color: #4e6b8d;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    }

        .switcherBtn button:hover {
            background-color: #1f2d3d;
        }
/* #endregion */

/* #region 行程詳細總覽頁expertScheduleDetail */
.expertScheduleDetail {
    width: 100%;
    background: white;
    padding: 0px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto; /* 允許滾動 */
    height: calc(100vh - 170px);
}

    .expertScheduleDetail .title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
    }
    .expertScheduleDetail .scheduleNameBlock {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .expertScheduleDetail .scheduleName {
        font-size: 18px;
        margin-top: 10px;
    }

    .expertScheduleDetail .likeBox {
        color: gray;
        font-size: 14px;
    }

    .expertScheduleDetail .ScheduleInfoBox {
        margin-top: 15px;
        padding: 10px;
        background: #eef;
        border-left: 5px solid #c39e88;
    }
        .expertScheduleDetail .ScheduleInfoBox:hover {
            cursor: pointer;
        }
        .expertScheduleDetail .tagList {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }

    .expertScheduleDetail .tag {
        background: #c39e88;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .expertScheduleDetail .tsdOverviewListList {
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .expertScheduleDetail .tsdOverviewListList h3 {
            font-size: 1.25rem;
            font-weight: bold;
        }

    .expertScheduleDetail .itemList {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
    }
        .expertScheduleDetail .itemList a {
            display: flex;
            height:28px;
            padding:0 5px;
            text-decoration: none;
            align-items: center;
        gap:7px;
            color: var(--primary-color);
            border-radius:5px;
        }
            .expertScheduleDetail .itemList a.isTicket:hover {
                background-color: var(--primary-color-light);
                color: white;
            }
        .expertScheduleDetail .itemList a.notTicket {
            cursor: default;
        }



    .expertScheduleDetail .day {
        font-weight: bold;
        color: #007bff;
    }

    .expertScheduleDetail .addToCartBtn {
        position: sticky;
        bottom: 10px;
    }

        .expertScheduleDetail .addToCartBtn button {
            width: 100%;
            border-radius: 8px;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
        }
/* #endregion */

/* #region  aboutScheduleModals 區域 CSS設定*/
/* editScheduleStayTimeModal */
#editScheduleStayTimeModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    #editScheduleStayTimeModal .modal-body h3 {
        font-size: 26px;
    }

#editScheduleStayTimeModal .categoryBox {
    display: flex;
    align-items: center;
    gap: 10px;
}
#editScheduleStayTimeModal .categorys {    
    background-color: #a47764;
    border-radius: 5px;
    color:white;
    padding:2px;
    font-size:14px;
}

#editScheduleStayTimeModal .el-radio__input.is-checked + .el-radio__label {
    color: #a47764;
}

#editScheduleStayTimeModal .el-radio__input.is-checked .el-radio__inner {
    background: #a47764;
    border-color: white;
}

#editScheduleStayTimeModal .head {
    background-color: #a47764;
    color: white;
    overflow: hidden;
}
/* editScheduleNoteModal */
#editScheduleNoteModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

#editScheduleNoteModal .modal-content {
    height: 100%;
}

#editScheduleNoteModal .note-textarea {
    overflow: auto; /* 允許滾動 */
    scrollbar-width: none; /* 隱藏 Firefox 的滾動條 */
    width: 100%;
    height: 100%;
    resize: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

    #editScheduleNoteModal .note-textarea:focus {
        border-color: #a47764;
        outline: none;
        box-shadow: 0 0 5px #a47764(119, 196, 31, 0.5);
    }

#editScheduleNoteModal .el-radio__input.is-checked + .el-radio__label {
    color: #a47764;
}

#editScheduleNoteModal .el-radio__input.is-checked .el-radio__inner {
    background: #a47764;
    border-color: white;
}

#editScheduleNoteModal .head {
    background-color: #a47764;
    color: white;
    overflow: hidden;
}
/* .checkDeleteScheduleModal,*/
#checkDeleteScheduleModal .modal-body {
    text-align: center;
}

#checkDeleteScheduleModal .dialog-header img {
    width: 200px;
    margin-bottom: 10px;
}

#checkDeleteScheduleModal .title {
    font-size: 18px;
    font-weight: bold;
}

#checkDeleteScheduleModal .description {
    font-size: 14px;
    color: #666;
}

#checkDeleteScheduleModal .modal-footer {
    display: flex;
    justify-content: center;
}

#checkDeleteScheduleModal .btn-full {
    width: 48%;
}
/* .confirmDeleteFavoriteListModal,*/
#confirmDeleteFavoriteListModal .modal-body {
    text-align: center;
}

#confirmDeleteFavoriteListModal .dialog-header img {
    width: 200px;
    margin-bottom: 10px;
}

#confirmDeleteFavoriteListModal .title {
    font-size: 18px;
    font-weight: bold;
}

#confirmDeleteFavoriteListModal .description {
    font-size: 14px;
    color: #666;
}

#confirmDeleteFavoriteListModal .modal-footer {
    display: flex;
    justify-content: center;
}

#confirmDeleteFavoriteListModal .btn-full {
    width: 48%;
}
/*checkCopyScheduleModal */
#checkCopyScheduleModal .modal-body {
    text-align: center;
}

#checkCopyScheduleModal .dialog-header img {
    width: 200px;
    margin-bottom: 10px;
}

#checkCopyScheduleModal .title {
    font-size: 18px;
    font-weight: bold;
}

#checkCopyScheduleModal .description {
    font-size: 14px;
    color: #666;
}

#checkCopyScheduleModal .modal-footer {
    display: flex;
    justify-content: center;
}

#checkCopyScheduleModal .btn-full {
    width: 48%;
}

/* #endregion */

/* --------------RWD------------ */
/* #region @media (min-width: 470px) */
@media (min-width: 470px) {
    /* 行程列表開關位置 */
    .scheduleBar .scheduleBtn {
        top: 51px;
    }
    /* 行程表內卡片兩排 */
    .scheduleBar .scheduleCard {
        width: 50%;
    }
    /* 行程詳細頁筆記顯示note */
    .scheduleDetailPanel .el-card .noteBox {
        /* display: none; */
    }

    .scheduleDetailPanel .el-card .notebook {
        display: none;
    }

    .scheduleDetailPanel .el-card .note {
        line-height: 1rem;
        height: 6rem;
        margin-right: auto;
        padding-top: 1rem;
        font-size: 0.8rem;
        color: #aaaaaa;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .searchBar .searchBtns button i {
        display:flex;
    }
}
/* #endregion */

/* #region @media (min-width: 768px) */
@media (min-width: 768px) {
    /* 景點卡片 */
    .productsArea .productCard {
        width: calc(50% - 5px);
    }
}
/* #endregion */

/* #region @media (min-width: 992px) */
@media (min-width: 992px) {
    /* 上方搜尋欄searchBar */
    .searchBar {
        flex-grow: 0;
        justify-content: start;
    }

        .searchBar .head {
            max-width: 300px;
            background-color: transparent;
        }

        .searchBar .searchBtns {
            width: auto;
        }
    /* 左側側欄funtripMenuBar設定 */
    .funtripMenuBar {
        display: block;
        width: 56px;
    }

        .funtripMenuBar:hover {
            width: 150px;
        }
    /* 右側側欄 scheduleBar 設定*/
    .scheduleBar .scheduleBtn {
        top: 0;
    }
    /* 行程面板 */
    .scheduleBar .schedulePanel {
        width: 360px;
        height: calc(100vh - 10px);
        border-radius: 8px;
    }

    .scheduleBar .scheduleCard {
        width: 100%;
    }
    /* 右側側欄 scheduleDetailBar section  */
    .scheduleDetailBar {
        width: 360px;
        height: calc(100vh - 10px);
        border-radius: 8px;
        overflow:hidden;
    }

    .scheduleDetailPanel .CardList {
        margin: 0 10px 10px;
    }
    /* 行程詳細頁筆記顯示note */
    .scheduleDetailPanel .el-card .notebook {
        display: flex;
    }

    .scheduleDetailPanel .el-card .note {
        display: none;
    }

    /* 左側景點(產品)欄  */
    .productsBar {
        position: fixed;
        left: 70px;
        right: unset;
        top: 60px;
    }

    .productsArea {
        width: 380px;
        height: 90vh;
        background-color: white;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .productsBar .productCard:hover {
        transform: translateY(-5px) translateX(-5px);
    }

    .productsBar .pushHead {
        display: none;
    }
    /* 景點列表開關位置 */
    .productsBar .showProductsBtn {
        top: 68px;
        left: 70px;
    }
}
/* #endregion */


/* #region scheduleLikeBtn行程按讚按鈕 */
.scheduleLikeBtn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.scheduleLikeBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin-right:20px;
}

    .scheduleLikeBtn input:checked ~ .like {
        animation: kfs-fill-like .5s forwards;
    }

    .scheduleLikeBtn .like {
        fill: none;
        stroke: var(--primary-color);
    }

    .scheduleLikeBtn input:checked ~ .celebrate {
        display: block;
    }

    .scheduleLikeBtn .celebrate {
        position: absolute;
        animation: kfs-celebrate 1s;
        animation-fill-mode: forwards;
        display: none;
        stroke: var(--primary-color);
    }

@keyframes kfs-celebrate {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
        display: none;
    }
}

@keyframes kfs-fill-like {

    50% {
        fill: var(--primary-color);
        stroke: var(--primary-color);
        transform: scale(1.2);
    }

    100% {
        fill: var(--primary-color);
        stroke: var(--primary-color);
    }
}
/* #endregion */