:root {
    --forest: #163b2d;
    --leaf: #2f6d4f;
    --moss: #dfe8d2;
    --cream: #fff8ea;
    --paper: #f8f3e8;
    --clay: #b45d2d;
    --ink: #18221f;
    --muted: #66736d;
    --line: #ded8c7;
    --white: #fffefa;
    --shadow: 0 22px 60px rgba(17, 42, 31, .14);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    line-height: 1.55;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

.us-JacobCalendarBooking {
    width: 100%;
    min-width: 0;
}

.calendar-booking-section {
    padding: 34px clamp(18px, 4vw, 54px);
}

.panel,
.calendar-panel,
.booking-panel {
    background: rgba(255, 254, 250, .96);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--clay);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

h2,
h3 {
    margin: 0;
    color: var(--forest);
}

h2 {
    font-size: clamp(24px, 3vw, 34px);
}

h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.booking-page {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(360px, 520px);
    gap: 22px;
    align-items: start;
}

.cart-booking-page {
    grid-template-columns: minmax(540px, 1fr) minmax(420px, 560px);
}

.calendar-panel,
.booking-panel {
    padding: 22px;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.stay-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbf7ee;
}

.icon-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 8px;
    color: var(--forest);
    background: var(--moss);
    font-size: 30px;
    cursor: pointer;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.calendar-weekdays span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.calendar-grid {
    margin-top: 8px;
}

.day {
    min-width: 0;
    min-height: 118px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf0;
    text-align: left;
    cursor: pointer;
}

.day:hover,
.day.selected {
    outline: 3px solid rgba(47, 109, 79, .22);
    border-color: var(--leaf);
}

.day.muted-day {
    opacity: .45;
    cursor: pointer;
}

.day.unbookable {
    background: #f2efe9;
    cursor: not-allowed;
}

.day.unbookable:hover {
    outline: none;
    border-color: var(--line);
}

.day.unbookable .day-number {
    color: #9a978f;
}

.day-number {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--forest);
    font-weight: 900;
}

.type-pill {
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--cream);
    background: var(--leaf);
    font-size: 11px;
    white-space: nowrap;
}

.stock-lines {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    color: #34433c;
    font-size: 13px;
    font-weight: 700;
}

.stock-lines span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.soldout {
    color: #a13b24;
}

.day-price {
    display: block;
    margin-top: 6px;
    color: var(--leaf, #2f6d4f);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .2px;
}

.day.selected .day-price {
    color: inherit;
}

/* 金額：電腦版完整金額（含 $），手機版精簡 x.xK */
.day-price .price-short {
    display: none;
}

/* 日曆彈窗：電腦版為內嵌，隱藏彈窗頭尾 */
.calendar-dialog-head,
.calendar-dialog-foot {
    display: none;
}

.badge {
    padding: 8px 10px;
    border: 1px solid #ead7a4;
    border-radius: 999px;
    background: #fff4ca;
    color: #77511c;
    font-weight: 800;
    white-space: nowrap;
}

.selected-date {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbf7ee;
    color: var(--muted);
    font-weight: 700;
}

.selected-date p {
    margin: 6px 0 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.full-field {
    grid-column: 1 / -1;
}

label {
    display: grid;
    gap: 7px;
    color: #38443f;
    font-size: 14px;
    font-weight: 700;
}

.field-note {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid #cfc7b5;
    border-radius: 6px;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(47, 109, 79, .2);
    border-color: var(--leaf);
}

.availability,
.summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.summary-note {
    margin: -8px 0 18px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.status-card,
.summary div {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbf7ee;
}

.status-card strong,
.summary strong {
    display: block;
    color: var(--forest);
    font-size: 20px;
}

.status-card span,
.summary span {
    color: var(--muted);
    font-size: 13px;
}

.primary,
.secondary {
    min-height: 46px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
}

.primary {
    width: 100%;
    color: var(--cream);
    background: var(--forest);
}

.primary:hover {
    background: #0f2b20;
}

.secondary {
    padding: 0 16px;
    color: var(--forest);
    background: var(--moss);
}

.secondary:hover,
.link-btn:hover,
.icon-btn:hover {
    filter: brightness(.96);
}

.add-line-btn {
    width: 100%;
    margin-top: 4px;
}

[data-booking-form][hidden] {
    display: none !important;
}

.cart-panel {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf0;
}

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cart-head h3 {
    margin: 0;
}

.cart-list {
    display: grid;
    gap: 10px;
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.cart-item p {
    margin: 4px 0;
    color: var(--muted);
}

.cart-item span {
    color: var(--leaf);
    font-weight: 900;
}

.empty-cart {
    padding: 12px;
    color: var(--muted);
    border: 1px dashed #cfc7b5;
    border-radius: 8px;
}

.text-btn {
    min-height: auto;
    padding: 0;
    color: var(--clay);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}

.agreements {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf0;
}

.agreement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.check-label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    font-size: 15px;
}

.check-label input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--forest);
}

.link-btn {
    min-height: 36px;
    padding: 0 10px;
    color: var(--forest);
    background: var(--moss);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 900;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(13, 42, 29, .62);
}

.modal-backdrop.open {
    display: grid;
}

.modal {
    width: min(680px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    padding: 22px;
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.modal-head {
    position: sticky;
    top: -22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -22px -22px 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.modal-head h2 {
    font-size: 24px;
}

.modal-close {
    font-size: 26px;
    line-height: 1;
}

.terms-list {
    margin: 0;
    padding-left: 22px;
}

.terms-list li {
    margin: 0 0 12px;
    color: #34433c;
}

.transfer-notice {
    color: #34433c;
}

.transfer-notice p {
    margin: 0 0 12px;
}

.transfer-notice ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.toast {
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 14px 16px;
    color: var(--cream);
    background: var(--forest);
    border-radius: 8px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: .2s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* 電腦版隱藏「最少可訂」狀態卡（庫存已顯示於日曆），手機版才顯示 */
@media (min-width: 761px) {
    .status-card:nth-of-type(2) {
        display: none;
    }
}

@media (max-width: 1080px) {
    .booking-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .calendar-booking-section {
        padding: 18px 12px;
    }

    .form-grid,
    .availability,
    .summary {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 1fr;
    }

    /* 入住/退房左右並排 */
    .stay-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 0;
    }

    .agreement-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-weekdays,
    .calendar-grid {
        gap: 5px;
    }

    .day {
        min-height: 98px;
        padding: 7px;
    }

    .stock-lines {
        font-size: 12px;
    }

    .type-pill {
        display: none;
    }

    .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .calendar-panel,
    .booking-panel {
        padding: 14px;
    }

    .calendar-toolbar {
        grid-template-columns: 40px 1fr 40px;
        gap: 8px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
    }

    .day {
        min-height: 78px;
        padding: 5px;
    }

    .stock-lines {
        gap: 2px;
        margin-top: 6px;
        font-size: 10px;
    }

    .day-price {
        margin-top: 3px;
        font-size: 11px;
    }

    .day-number {
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    /* 手機：內嵌日曆改為彈窗，主畫面用原本日期欄位當觸發區 */
    .stay-range[data-calendar-open] {
        cursor: pointer;
    }

    .stay-range[data-calendar-open] input {
        pointer-events: none;
    }

    .calendar-dialog {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: flex-end;
        background: rgba(13, 42, 29, .62);
    }

    .calendar-panel.is-calendar-open .calendar-dialog {
        display: flex;
    }

    .calendar-dialog-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 92vh;
        overflow: auto;
        padding: 16px;
        border-radius: 16px 16px 0 0;
        background: var(--white);
    }

    .calendar-dialog-head {
        position: sticky;
        top: -16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: -16px -16px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--white);
    }

    .calendar-dialog-head h3 {
        font-size: 18px;
    }

    .calendar-toolbar {
        margin-bottom: 12px;
    }

    .calendar-dialog-foot {
        position: sticky;
        bottom: -16px;
        display: grid;
        gap: 10px;
        margin: 12px -16px -16px;
        padding: 14px 16px;
        border-top: 1px solid var(--line);
        background: var(--white);
    }

    .calendar-price-note {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        text-align: center;
    }

    .calendar-dialog-foot .primary {
        width: 100%;
    }

    /* 手機日曆格：只顯示日期與金額，隱藏庫存（庫存改由「最少可訂」呈現） */
    .calendar-dialog .stock-lines {
        display: none;
    }

    .calendar-dialog .day {
        min-height: 60px;
        padding: 6px 4px;
        text-align: center;
    }

    .calendar-dialog .day-number {
        justify-content: center;
        font-size: 13px;
    }

    .day-price .price-full {
        display: none;
    }

    .day-price .price-short {
        display: inline;
    }

    .calendar-dialog .day-price {
        margin-top: 2px;
        font-size: 11px;
    }
}