@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

* {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

html,
body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    background: #FFF7F2;

}

main {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: #343434;
}

a:hover {
    color: #D08223;
}

.color-bar {
    height: 4px;
    background: #EC6C00;
}

.bg-main {
    background-color: #FFE7D4;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multiline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tripleline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cus-brand {
    position: absolute;
    top: 10px;
}

.ellipse {
    background-image: url(../img/ellipse.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 80px;
}

.content-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

.map-image {
    padding: 15px;
    border: 8px solid;
    background-color: #FFF;
    border-image: linear-gradient(90deg, #CD7C1B 2%, #F4D9A5 9%, #D18527 22%, #CE7E1D 77%, #FFF2C7 88%, #C6A44F 94%) 27;
}

.footer {
    background-color: #2F2F2F;
    position: relative;
}

.line-pic {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 280px;
}

.luggage-pic {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.info-title {
    color: #D08223;
    font-weight: 900;
    font-size: 3rem;
    text-align: center;
    position: relative;
    z-index: -2;
}

.info-title:before,
.info-title:after {
    content: "";
    position: absolute;
    top: 50%;
    background: #CF8020;
    width: 40%;
    height: 1px;
}

.info-title:before {
    left: 0%;
}

.info-title:after {
    right: 0%;
}

.plane {
    position: absolute;
    top: -40%;
    left: 10%;
    z-index: -1;
}

.camera {
    position: absolute;
    top: -50%;
    right: 10%;
    z-index: -1;
}

/*===== back to top=====*/
#gotopbutton {
    display: inline-block;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background: url(../img/gotop.png) no-repeat center;
    background-size: contain;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}


#gotopbutton.show {
    opacity: 1;
    visibility: visible;
}

/* -------- PC 版 (LG↑) -------- */
@media (min-width:992px) {

    .mobile-panel,
    .mobile-nav {
        display: none !important;
    }
}

/* -------- 手機版 (md↓) -------- */

@media (max-width:767.98px) {

    /* 右側漂浮選單 */
    .mobile-nav {
        position: fixed;
        z-index: 1040;
        right: .25rem;
        top: 55%;
        transform: translateY(-50%);
        background-color: #FFF;
        padding: 0.5rem 0.5rem;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .mobile-nav .btn {
        display: block;
        margin: .25rem 0;
        width: 2rem;
        height: 2rem;
        padding: 0;
        font-weight: 500;
        border: 0;
        background-color: transparent;
        color: #818181;
    }

    .mobile-nav .btn.active {
        background: #D08223;
        color: #fff;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        font-weight: 700;
    }

    /* 卡片容器 */
    .mobile-panel {
        padding: 1rem 1rem 1rem;
        /* 為了預留選單與 footer 空間 */
    }

    .flower-card+.flower-card {
        margin-top: 1rem;
    }

    .flower-card .badge {
        font-size: .8rem;
    }

    /* 隱藏 PC 元件 */
    .pc-tabs {
        display: none !important;
    }


}

@media (max-width:768px) {

    .plane {
        position: absolute;
        top: 0%;
        left: 10%;
        z-index: -1;
        width: 125px;
    }

    .camera {
        position: absolute;
        top: -15%;
        right: 10%;
        z-index: -1;
        width: 150px;
    }
}

@media (max-width:575.98px) {

    .plane {
        position: absolute;
        top: -37%;
        left: 1%;
        z-index: -1;
        width: 80px;
    }

    .camera {
        position: absolute;
        top: -35%;
        right: 0%;
        z-index: -1;
        width: 100px;
    }

    .info-title {
        font-size: 1.5rem;
    }

    .line-pic {
        position: absolute;
        left: 0;
        bottom: 60px;
        width: 150px;
    }

    .luggage-pic {
        position: absolute;
        right: 0;
        bottom: 60px;
        width: 250px;
    }
}


/* ---------- 主題色變數 (依設計稿調色) ---------- */
:root {
    --tbl-radius: 18px;
    --tbl-border: #e0e0e0;
    --tbl-open-bg: #FDF0E5;
    --tbl-link: #c27b00;
    --tbl-link-hover: #8f5800;
}

/* ---------- 表格外觀 ---------- */
.table-wrapper {
    border-radius: var(--tbl-radius);
    overflow: hidden;
}

.table {
    margin: 0;
    text-align: center;
}

.table th {
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid var(--tbl-border);
}

.table>tbody>tr:not(.row-open)+tr:not(.collapse)>td {
    border-top: 1px solid var(--tbl-border);
}

/* 主資料列 (hover) */
.table tbody>tr:not(.collapse):hover {
    background: #fafafa;
}

/* 展開時主列底色 */
.row-open td {
    background: var(--tbl-open-bg) !important;
}

/* 「點擊查看更多」樣式 */
a.link-more {
    color: var(--tbl-link);
    font-weight: 600;
    text-decoration: none;
}

a.link-more:hover {
    color: var(--tbl-link-hover);
    text-decoration: underline;
}
.btn-view-details {
    border: 1px solid #D08223; 
    color: #D08223;          
    border-radius: 50px;       
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 16px;
    background: transparent;  
    transition: all 0.3s;     
}
.btn-view-details:hover {
    background-color: #D08223;
    border-color: #EC6C00;
    color: #fff;
}
/* ---------- Collapse 動畫 ---------- */
.table .collapse,
.table .collapsing {
    overflow: hidden;
    transition:
        height .45s cubic-bezier(.34, 1.56, .64, 1),
        opacity .35s ease-out;
}

.table .collapse:not(.show) {
    opacity: 0;
}

.table .collapse.show {
    opacity: 1;
}

#table-acc tr td {
    padding: 1.2rem;
}

#table-acc tr th {
    padding: 1rem 1.2rem;
}

/* ---------- 細節列 (折疊內容) ---------- */
.detail-row {
    /* display: flex;
    align-items: center;
    justify-content: space-around; */
    gap: 1rem;
    font-weight: 500;
    background: var(--tbl-open-bg);
    border-top: 1px solid var(--tbl-border);
}

.detail-row>div {
    text-align: center;
    width: 150px;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    /* font-weight: 500; */
}

.title-row>div {
    flex: 1 1 0;
    text-align: left;
}

.text-end {
    text-align: center !important;
}

.remark-row{
    /* display: flex;
    align-items: center;
    justify-content: flex-start; */
    gap: 1rem;
    font-weight: 500;
    background: var(--tbl-open-bg);
    border-top: 1px solid var(--tbl-border);
    text-align: left;
}

.remark-link{
    color:#EC6C00;
}

.btn-orange {
    background-color: #EC6C00;
    border-color: #EC6C00;
    color: #fff;
}

.btn-orange:hover {
    background-color: #fff;
    border-color: #EC6C00;
    color: #EC6C00;
}
/* icon 與文字對齊 */
.detail-row i {
    margin-left: .25rem;
}

/* 綠色勾勾 */
.badge-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4caf18;
    color: #fff;
    font-size: 1rem;
}

.col-link {
    width: 100px;
    /* 固定寬度 */
    min-width: 100px;
    /* 防止縮小 */
    text-align: right;
    /* 保留右對齊 */
    white-space: nowrap;
    /* 讓文字不換行 */
}

/*TAB 按鈕*/
.nav-tabs .nav-link {
    border: 0;
    color: #707070;
    font-size: 1.2rem;
    width: 100px;
    border-radius: 27.5px;
    margin-bottom: 30px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #FFF;
    background-color: #EC6C00;
    border-color: #EC6C00;
    border-radius: 27.5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    position: relative;
}

.nav-tabs .nav-item.show .nav-link::after,
.nav-tabs .nav-link.active::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 10px 0 10px;
    border-color: #EC6C00 transparent transparent transparent;
    position: absolute;
    bottom: -25%;
    left: 39%;
}

.tab-content {
    border-radius: 27.5px;
}

.flower-card .card-title {
    font-weight: bold;
    font-size: 1.5rem;
    color: #EC6C00;
    margin-bottom: 0;
}

.toggle-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    text-decoration: none;
    color: #6F6F6F;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, .125);
    background-color: #F4F4F4;
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

.table-border-bottom {
    border-bottom: 2.5px solid #b9b9b9;
}