/* 新增：booking 頁面標題區 */
.page-intro {
    padding: 108px 20px 24px;
    background: #fff;
    margin-top: 8px;
    text-align: center;
}
.page-intro__title {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.page-intro__title::before,
.page-intro__title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, rgba(74,124,89,.25), rgba(74,124,89,0));
    transform: translateY(-50%);
}
.page-intro__title::before { left: -56px; }
.page-intro__title::after  { right: -56px; transform: translateY(-50%) scaleX(-1); }
.page-intro .title-zh {
    font-size: 24px;
    font-weight: 800;
    color: #2c5530;
    letter-spacing: .5px;
    line-height: 1.15;
}
.page-intro .title-en {
    font-size: 14px;
    color: #6b8e23;
    letter-spacing: .8px;
    text-transform: lowercase;
    font-weight: 500;
}
.page-intro__lead {
    margin-top: 10px;
    color: #5b6e5f;
    font-size: 15px;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .page-intro { padding: 108px 16px 20px; }
    .page-intro__title::before,
    .page-intro__title::after { width: 32px; }
    .page-intro .title-zh { font-size: 22px; }
    .page-intro .title-en { font-size: 13px; }
}
@media (max-width: 480px) {
    .page-intro { padding: 108px 14px 16px; }
    .page-intro__lead { font-size: 14px; }
}

/**//**//**/
/**//**//**/
/**//**//**/
/**//**//**/
/**//**//**/
/**//**//**/

/* 桌機版月曆 */
.booking-desktop {
    padding: 16px 20px 28px;
    max-width: 980px;
    margin: 0 auto;
}
.cal-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.cal-title { font-weight: 800; color: #2c5530; letter-spacing: .5px; }
.cal-nav {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #e3efe3; background: #fff; color: #2c5530;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.cal-nav:hover { background: #f5fbf6; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    background: #f9fcf9;
    border: 1px solid #e3efe3;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 3px 12px rgba(74,124,89,0.08);
    position: relative;
}
.cal-wd {
    text-align: center; font-weight: 700; color: #4a7c59;
    padding: 6px 0;
    border-bottom: 1px solid #e3efe3; /* 新增分隔線 */
    padding-bottom: 8px;              /* 與線條間距 */
}
.cal-cell {
    background: #fff; border: 1px solid #e6efe6; border-radius: 10px;
    padding: 8px; min-height: 110px; display: flex; flex-direction: column;
    gap: 6px; position: relative;
}
.cal-cell .date {
    font-weight: 800; color: #2c5530; font-size: 14px;
}
.cal-meta {
    display: grid; gap: 4px; font-size: 12.5px; color: #455a46;
}
.cal-meta .left { color: #2e5333; font-weight: 700; }
.cal-meta .price { color: #6b8e23; font-weight: 700; }

.cal-book {
    margin-top: auto;
    display: inline-flex; justify-content: center; align-items: center;
    padding: 6px 10px; font-size: 13px; font-weight: 700;
    border-radius: 8px; border: 1px solid #e3efe3; cursor: pointer;
    background: linear-gradient(45deg, #4a7c59, #6b8e23); color: #fff;
}

/*.cal-book[disabled],*/
/*.cal-cell.--closed .cal-book,*/
/*.cal-cell.--full .cal-book {*/
/*    background: #f0f3f0; color: #9aa9a0; cursor: not-allowed; border-color: #e5ece5;*/
/*}*/

/* 原本的禁用樣式，改為僅套在一般禁用與 closed */
.cal-book[disabled],
.cal-cell.--closed .cal-book {
    background: #f0f3f0;
    color: #9aa9a0;
    cursor: not-allowed;
    border-color: #e5ece5;
}

/* full（已滿）使用淡紅色系，與 closed 區分 */
.cal-cell.--full .cal-book {
    background: #fbe9e9;          /* 淡紅底 */
    color: #b35a5a;               /* 紅棕字 */
    border-color: #f3d3d3;        /* 淡紅邊 */
    cursor: not-allowed;
}

/* 若需要 cell 本體也帶紅調（可選） */
.cal-cell.--full {
    background: #fdf4f4;
    border-color: #f3dede;
    opacity: 1;
}

/* 狀態顏色 */
.cal-cell.--open { outline: 2px solid rgba(106,158,69,.18); }
.cal-cell.--full { background: #f7f9f7; opacity: .68; }
.cal-cell.--closed { background: #fafafa; opacity: .6; }

.cal-legend { margin-top: 10px; display: flex; gap: 10px; justify-content: center; }
.lg { font-size: 12.5px; color: #455a46; padding: 4px 8px; border-radius: 999px; background: #f2f8f2; border: 1px solid #e0efe0; }
.lg--open { background: #e9f7ea; border-color: #cfe8d2; }
.lg--full { background: #f5f5f5; border-color: #e5e5e5; }
.lg--closed { background: #fbf1f1; border-color: #f0d7d7; }

/* 手機版清單 */
.booking-mobile {
    padding: 10px 16px 24px;
    max-width: 680px;
    margin: 0 auto;
    display: none;
}
.open-list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.open-item {
    display: grid; grid-template-columns: 1.2fr .8fr .8fr auto;
    align-items: center; gap: 8px;
    background: #ffffff; border: 1px solid #e6efe6; border-radius: 12px;
    padding: 10px 12px; box-shadow: 0 2px 10px rgba(74,124,89,.06);
}
.open-item .d { font-weight: 800; color: #2c5530; }
.open-item .l { color: #2e5333; font-weight: 700; }
.open-item .p { color: #6b8e23; font-weight: 700; }
.open-item .btn {
    padding: 6px 10px; font-size: 13px; font-weight: 700; border-radius: 8px;
    background: linear-gradient(45deg, #4a7c59, #6b8e23); color: #fff; border: 1px solid #e3efe3; cursor: pointer;
}

/* 手機版月份抬頭樣式 */
.booking-mobile .mcal-head {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 10px;
}
.booking-mobile .mcal-title {
    font-weight: 800; color: #2c5530; letter-spacing: .5px;
}
.booking-mobile .mcal-nav {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #e3efe3; background: #fff; color: #2c5530;
    box-shadow: 0 2px 6px rgba(0,0,0,.05); cursor: pointer;
}
.booking-mobile .mcal-nav:hover { background: #f5fbf6; }

/* 只有在手機寬度時顯示 */
@media (max-width: 768px) {
    .booking-mobile .mcal-head { display: flex; }
}

/* 顯示切換 */
@media (max-width: 768px) {
    .booking-desktop { display: none; }
    .booking-mobile { display: block; }
    .open-item { grid-template-columns: 1.4fr .8fr .8fr 1fr; }
    .open-item .btn {
        width: 100%;
        justify-self: end;
    }

    .open-item .btn[disabled] {
        background: #f0f3f0;
        color: #9aa9a0;
        border-color: #e5ece5;
        cursor: not-allowed;
    }

    /* 僅「已滿」時套用淡紅系（需在 JS 端為已滿的 li 加上 is-full） */
    .open-item.is-full .btn[disabled] {
        background: #fbe9e9;
        color: #b35a5a;
        border-color: #f3d3d3;
    }
    .open-item.is-full {
        background: #fdf4f4;
        border-color: #f3dede;
    }
}