html.scroll-lock {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-black);
    width: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-200);
}

main {
    min-height: 740px;
    padding-bottom: 60px;
}

section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    min-width: 300px;
    width: 100%;
    margin: 0 20px;
    /*為了覆蓋後台 bootstrap 設定*/
    padding-bottom: 0;
}


@media(min-width:768px) {
    .container {
        /* max-width: 700px; */
        max-width: 840px;
    }
}

@media(min-width:992px) {
    .container {
        max-width: 960px;
    }
}

@media(min-width:1200px) {
    .container {
        max-width: 1140px;
    }
}

@media(min-width:1400px) {
    .container {
        max-width: 1140px;
    }
}

.container.mt {
    margin-top: 20px;
}

@media(min-width:992px) {
    .container.mt {
        margin-top: 32px;
    }
}

/* 手機版隱藏 */
@media(min-width:300px) {
    .mb-hide {
        display: none !important;
    }
}

@media(min-width:768px) {
    .mb-hide {
        display: flex !important;
    }
}

img {
    width: 100%;
}

/* frame */
.frame-primary {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-primary);
}

.frame-product-card {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-primary);
}

.frame-summary-card,
.frame-item-card {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-primary);
}

/*
.js-room {
    display: none;
}
*/
/*Font_start*/

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 2rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.75rem;
    line-height: 1.2;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0px;
}

h6 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0px;
}

p {
    margin: 0;
}

/*Font_end*/

/*dialog*/

.dialog-wrapper {
    margin: 12px 0;
}

.dialog {
    padding: 8px 12px;
    border: 1px solid;
}

    .dialog.dialog-icon {
        display: flex;
        align-items: flex-start;
        gap: 4px;
    }

    .dialog.dialog-alert {
        background-color: var(--color-danger-light);
        color: var(--color-danger);
        border-color: var(--color-danger-200);
    }

    .dialog.dialog-success {
        background-color: var(--color-success-light);
        color: var(--color-success);
        border-color: var(--color-success-200);
    }

    .dialog.dialog-warning {
        background-color: var(--color-warning-light);
        color: var(--color-warning);
        border-color: var(--color-warning-200);
    }

    .dialog.dialog-info {
        background-color: var(--color-info-light);
        color: var(--color-info);
        border-color: var(--color-info-200);
    }

    .dialog.dialog-primary {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .dialog .dialog-link {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
    }

    .dialog .icon {
        padding-top: 2px;
        width: 16px;
    }

    .dialog ul {
        margin: 4px 0;
        padding-left: 16px;
    }

    .dialog .text-point {
        font-weight: 600;
    }

    .dialog p {
        padding: 0;
        margin: 0;
    }

/* Toast */
.toast {
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease;
}

.toast-s {
    width: 30%;
}

.toast-m {
    width: 50%;
}

.toast-l {
    width: 70%;
}

.toast.active {
    pointer-events: unset;
    bottom: 20px;
}

/*不會消失的toast*/
.toast.toast-show.active {
    opacity: 1;
}

/*會消失的toast_start*/
.toast.toast-disappear.active {
    animation-name: toast-disappear;
    /*自訂名稱*/
    animation-duration: 6s;
    /*動畫持續秒數*/
}

    .toast.toast-disappear.active[data-duration] {
        animation-name: toast-disappear;
        /*自訂名稱*/
        animation-duration: attr(data-duration s);
        /*動畫持續秒數*/
    }


@keyframes toast-disappear {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*會消失的toast_end*/

.toast .content {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.toast .icon {
    width: 16px;
}

.toast .text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-white);
    word-wrap: break-word;
}

.toast .undo-btn {
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.toast button {
    cursor: pointer;
}

.toast.primary {
    background-color: var(--color-primary);
    color: var(--color-primary-light);
}


.toast.error {
    background-color: var(--color-danger);
}


.toast.undo {
    background-color: var(--color-gray-700);
}

/*button & link_start*/
a {
    text-decoration: none;
    color: var(--color-primary);
    cursor: pointer;
}

.text-link-primary {
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    color: var(--color-primary);
}

    .text-link-primary:hover {
        color: var(--color-primary-dark);
    }

.text-link-secondary {
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    color: var(--color-gray-900);
}

    .text-link-secondary:hover {
        color: var(--color-dark);
    }

button {
    border: none;
    padding: 0;
    background-color: inherit;
}

    button.btn,
    a.btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        white-space: nowrap;
        cursor: pointer;
        padding: 0px 16px;
        height: 36px;
        border-radius: 0px;
        font-size: 0.875rem;
        transition: all .3s ease;
    }

.btn.btn-small {
    font-size: 0.75rem;
    line-height: 20px;
    padding: 0px 16px;
    height: 28px;
}

.btn-primary {
    background-color: var(--color-primary);
    outline: 1px solid var(--color-primary);
    outline-offset: -1px;
    color: var(--color-white);
}

    .btn-primary:hover {
        background-color: var(--color-primary-dark);
        outline: 1px solid var(--color-primary-dark);
    }

    .btn-primary:active {
        background-color: var(--color-primary);
        outline: 1px solid var(--color-primary);
    }

    .btn-primary:disabled,
    .btn-primary[disabled] {
        color: var(--color-white);
        background-color: var(--color-gray-400);
        outline: 1px solid var(--color-gray-400);
        cursor: initial;
        cursor: not-allowed;
        /* pointer-events: none; */
    }

    .btn-primary.expand {
        outline: 1px solid var(--color-primary);
        background-color: var(--color-white);
        color: var(--color-primary);
    }

        .btn-primary.expand:hover {
            outline: 1px solid var(--color-primary-dark);
            background-color: var(--color-white);
            color: var(--color-primary-dark);
        }

        .btn-primary.expand:active {
            outline: 1px solid var(--color-primary);
            background-color: var(--color-primary);
            color: var(--color-white);
        }

.btn-secondary {
    outline: 1px solid var(--color-primary);
    outline-offset: -1px;
    background-color: var(--color-white);
    color: var(--color-primary);
}

    .btn-secondary:hover {
        outline: 1px solid var(--color-primary-dark);
        background-color: var(--color-white);
        color: var(--color-primary-dark);
    }

    .btn-secondary:active {
        outline: 1px solid var(--color-primary);
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

    .btn-secondary.active {
        outline: 1px solid var(--color-primary);
        background-color: var(--color-primary);
        color: var(--color-white);
    }

        .btn-secondary.active:hover {
            outline: 1px solid var(--color-primary);
            background-color: var(--color-primary);
            color: var(--color-white);
        }

        .btn-secondary.active:active {
            outline: 1px solid var(--color-primary);
            background-color: var(--color-primary);
            color: var(--color-white);
        }

.btn-third {
    outline: 1px solid var(--color-gray-400);
    outline-offset: -1px;
    background-color: var(--color-white);
    color: var(--color-gray-800);
}

    .btn-third:hover {
        outline: 1px solid var(--color-gray-700);
        background-color: var(--color-white);
        color: var(--color-gray-900);
    }

    .btn-third:active,
    .btn-third.active {
        outline: 1px solid var(--color-gray-900);
        background-color: var(--color-gray-900);
        color: var(--color-white);
    }

    .btn-secondary:disabled,
    .btn-secondary[disabled],
    .btn-third:disabled,
    .btn-third[disabled] {
        color: var(--color-gray-400);
        background-color: var(--color-gray-200);
        outline: 1px solid var(--color-gray-400);
        cursor: initial;
        pointer-events: none;
    }

/* 商品頁 btn已加入 pressed */
.btn-pressed {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    cursor: initial !important;
}

/* 商品頁 btn 必填，庫存不足 => 不可訂 */
.btn-unable {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    display: flex;
    cursor: not-allowed !important;
}

/* 圓角按鈕 */
.btn-round {
    border-radius: 100px !important;
}

/* 刪除按鈕 */
.btn-alert {
    border: 1px solid var(--color-danger);
    background-color: var(--color-white);
    color: var(--color-danger);
}

/*button & link_end*/
/*collapse_start*/
.collapse {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-secondary);
    cursor: pointer;
    padding: 20px 16px;
}

    .collapse.active {
        background-color: var(--color-gray-200);
    }

.collapse-btn {
    gap: 8px;
}

    .collapse-btn .collapse-btn-name {
        margin: 0;
    }

    .collapse-btn .collapse-btn-icon {
        transition: transform .25s ease-in-out;
        width: 16px;
    }

        .collapse-btn .collapse-btn-icon.active {
            transform: rotate(-180deg);
        }

.collapse-content {
    display: none;
    /*padding-top: 20px;*/
}


    .collapse-content p {
        margin: 0;
    }

/* collapse-info */
.collapse.collapse-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
    box-shadow: none;
    border: 1px solid var(--color-info);
}

    .collapse.collapse-info .collapse-btn-icon {
        filter: invert(50%) sepia(81%) saturate(728%) hue-rotate(184deg) brightness(100%) contrast(91%);
    }

    .collapse.collapse-info .collapse-content p {
        margin-top: 20px;
    }

    .collapse.collapse-info .collapse-content img {
        margin-top: 8px;
        max-width: 600px;
    }

/*collapse_end*/

/* label & input_start*/
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_arrow_down.svg) !important;
    background-repeat: no-repeat;
    background-size: 12px auto;
    background-position: bottom 48% right 8px;
}

.form-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.form-frame {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
}

.form-label {
    font-size: 0.875rem;
    line-height: 1.6rem;
}

.label-required {
    color: var(--color-primary);
    font-weight: 800;
    margin-left: 4px;
}

.form-label:has(+.form-control[required])::after,
.form-label:has(+div .form-control[required])::after {
    content: '*';
    color: var(--color-primary);
    font-weight: 800;
    margin-left: 4px;
}

.form-control {
    font-size: 0.875rem;
    padding: 4px 8px;
    width: 100%;
    height: 36px;
    border-radius: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-400);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .form-control:focus {
        box-shadow: none;
        outline: none;
        border: 1px solid var(--color-gray-600);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--color-gray-300);
    }

        .form-control[readonly]:focus {
            border: 1px solid var(--color-gray-400);
        }

    .form-control::-moz-placeholder,
    .form-control::-webkit-input-placeholder {
        color: var(--color-gray-500);
        font-size: 0.875rem;
    }

.form-remind {
    font-size: 0.875rem;
    margin-top: 8px;
    color: var(--color-gray-700);
    text-align: initial;
}

    .form-remind.field-validation-valid {
        margin-top: 0;
    }

    .form-remind.field-validation-error {
        margin-top: 8px;
    }

.form-btn-control {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}

.form-group-id {
    display: grid;
    grid-template-columns: 4fr 6fr;
}


.form-group-phone {
    display: grid;
    grid-template-columns: 2fr 1fr 6fr;
}

.form-group-phonenumber {
    display: grid;
    grid-template-columns: 2fr 5fr 2fr;
}

    .form-group-phone select,
    .form-group-phonenumber select {
        background-image: none !important;
    }

.form-tel-control,
.form-address-control {
    display: grid;
    grid-template-columns: 3fr 7fr;
}

    .form-tel-control .form-control:last-child,
    .form-address-control .form-control:last-child {
        border-left: none;
    }

        .form-tel-control .form-control:last-child:focus,
        .form-address-control .form-control:last-child:focus {
            border-left: solid 1px var(--color-gray-600);
        }

.form-frame.alert .form-control {
    border-color: var(--color-danger-400);
}

.form-frame.alert .form-remind {
    color: var(--color-danger);
}


/* label & input_end*/

/*checkbox & radio_start*/
.form-check {
    display: block;
    position: relative;
    margin-top: 8px;
}

.custom-check-label,
.custom-radio-label {
    display: block;
    position: relative;
    padding: 0px 2px 0px 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .custom-check-label.active,
    .custom-radio-label.active {
        background-color: var(--color-primary-light);
    }

    .custom-check-label.disabled,
    .custom-radio-label.disabled {
        color: var(--color-gray-600);
        background-color: var(--color-gray-200);
        pointer-events: none;
        opacity: 0.75;
        cursor: initial;
    }

.custom-select-label {
    display: block;
    position: relative;
    padding: 8px 24px 8px 24px;
    width: fit-content;
    height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .custom-select-label input {
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-select-label .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 14px;
        width: 14px;
        margin: 1px 0px 0px 1px;
    }

    .custom-select-label:hover input ~ .checkmark {
        background-color: transparent;
        border: 1px solid transparent;
    }

    /* When the checkbox is checked, add a blue background */
    .custom-select-label input:checked ~ .checkmark {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }

        /* Show the checkmark when checked */
        .custom-select-label input:checked ~ .checkmark:after {
            display: flex;
        }

    .custom-select-label input:checked + .form-select {
        border: 1px solid var(--color-primary);
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

    /* Style the checkmark/indicator */
    .custom-select-label .checkmark:after {
        left: 5px;
        top: 1px;
        width: 3px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

/* Hide the browser's default checkbox */
.custom-check-label input,
.custom-radio-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/*checkbox*/
/* Create a custom checkbox & radio */
.checkmark,
.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-500);
    margin-top: 1px;
}

.radiomark {
    border-radius: 50px;
    border: 1px solid var(--color-gray-500);
    /* margin-left: 8px; */
}

.form-check.alert label,
.form-check.alert .checkmark,
.form-check.alert .radiomark,
.form-check.alert .form-remind {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* On mouse-over, add a grey background color */
.custom-check-label:hover input ~ .checkmark {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-400);
}

/* When the checkbox is checked, add a blue background */
.custom-check-label input:checked ~ .checkmark {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.custom-check-label input:checked ~ .checkmark-border {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-check-label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-check-label .checkmark:after {
    left: 5px;
    top: 1px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-check-label :active,
.custom-check-label .active {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-400);
}

/*radio*/
/* On mouse-over, add a grey background color */
.custom-radio-label:hover input ~ .radiomark {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-400);
}

/* When the checkbox is checked, add a blue background */
.custom-radio-label input:checked ~ .radiomark {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-radio-label input:checked ~ .radiomark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-radio-label .radiomark:after {
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background-color: var(--color-white);
}

input[type="checkbox"]:disabled ~ .checkmark,
input[type="checkbox"][disabled] ~ .checkmark,
input[type="radio"]:disabled ~ .radiomark,
input[type="radio"][disabled] ~ .radiomark {
    border-color: var(--color-gray-500);
    background-color: var(--color-gray-300);
    cursor: initial;
}

/* 點選後背景無底色_start */
.form-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: fit-content;
    border: solid 1px var(--color-gray-400);
    background-color: transparent;
    cursor: pointer;
}

    .form-select:hover {
        border: 1px solid var(--color-primary);
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

.custom-select-img-wrapper {
    display: flex;
    width: auto;
    height: 1.5rem;
}

.custom-select-label {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 8px 24px 8px 24px;
    width: inherit;
    height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

    .custom-select-label input {
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-select-label .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 14px;
        width: 14px;
        margin: 1px 0px 0px 1px;
        border: none;
    }

    .custom-select-label:hover input ~ .checkmark {
        background-color: transparent;
        border: 1px solid transparent;
    }

    .custom-select-label input:checked ~ .checkmark {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }

        .custom-select-label input:checked ~ .checkmark:after {
            display: flex;
        }

/* checkbox 複選無圖 ver-2 */
.custom-select-label-2 {
    display: block;
    position: relative;
    width: fit-content;
    height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.checkbox-input {
    /* Code to hide the input */
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

    .checkbox-input:checked + .checkbox-tile {
        border-color: var(--color-primary);
        color: var(--color-gray--500);
    }

        .checkbox-input:checked + .checkbox-tile:before {
            transform: scale(1);
            opacity: 1;
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

    .checkbox-input:focus + .checkbox-tile {
        border-color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .checkbox-input:checked + .checkbox-tile .checkbox-icon,
    .checkbox-input:checked + .checkbox-tile .checkbox-label {
        color: var(--color-primary);
    }

.checkbox-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 4px 28px;
    border: solid 1px var(--color-gray-400);
    background-color: transparent;
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
}

.checkbox-input:checked + .checkbox-tile:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox-tile:hover {
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
}

.checkbox-tile:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid var(--color-primary);
    background-color: var(--color-white);
    top: 0px;
    left: 0px;
    opacity: 0;
    transition: 0.25s ease;
}

/* 點選後背景無底色_end */

/*Form-check-btn*/
.form-check-btn .ui-button {
    padding: 7px 20px;
}

.form-check-btn .ui-corner-all {
    border-radius: 0;
    border-color: var(--color-gray-400);
    background-color: var(--color-white);
}

.form-check-btn .ui-button:hover {
    background-color: inherit;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.form-check-btn .ui-state-active,
.form-check-btn .ui-button.ui-state-active:hover {
    border: 1px solid var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
    box-shadow: none;
}

    .form-check-btn .ui-icon-background,
    .form-check-btn .ui-state-active .ui-icon-background {
        background-color: inherit;
    }

.form-check-btn .ui-icon-blank.ui-icon-blank.ui-icon-blank {
    background-image: none;
    position: absolute;
    background-color: inherit;
    top: 4px;
    left: 0;
}

.form-check-btn .ui-button.ui-state-active:hover .ui-icon {
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_checkbox_checkwhite.svg);
    background-color: var(--color-primary);
}

.form-check-btn .ui-visual-focus {
    box-shadow: none;
}

/*checked_checkbox*/
.form-check-btn .ui-checkboxradio-label .ui-icon-background {
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_checkbox_checkwhite.svg);
    background-color: var(--color-primary);
    background-size: 16px;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    position: absolute;
    top: 3px;
    left: 0;
}

/*checked_radio*/
.form-check-btn .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.form-check-btn .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_checkbox_checkwhite.svg);
    background-color: var(--color-primary);
    background-position: center;
    background-size: 16px;
    border: 0;
    width: 16px;
    height: 16px;
    border: 0;
    top: 3px;
}

.check-btn-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .check-btn-payment .payment-img {
        width: inherit;
        height: 22px;
    }

/*form-check-optional*/

.form-check-optional .ui-button {
    padding: 7px 16px 9px 16px;
    border: 1px solid var(--color-gray-400);
    border-radius: 0px;
}

.form-check-optional .ui-corner-all {
    display: flex;
    background-color: inherit;
}

.form-check-optional .ui-state-active,
.form-check-optional .ui-widget-content .ui-state-active,
.form-check-optional .ui-widget-header .ui-state-active,
.form-check-optional a.ui-button:active,
.form-check-optional .ui-button:active,
.form-check-optional .ui-button.ui-state-active:hover {
    border: 1px solid var(--color-primary);
    border-radius: 0;
    background: var(--color-primary-light);
    color: var(--color-black);
}

.form-check-optional .ui-icon-blank.ui-icon-blank.ui-icon-blank {
    position: absolute;
    top: 12px;
}

/*點擊陰影*/
.form-check-optional .ui-state-focus {
    box-shadow: none;
}

.form-check-optional .optional-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 2;
    text-align: start;
    padding-left: 24px;
}

.form-check-optional .optional-title {
    margin: 0;
    font-size: 1rem;
}

.form-check-optional .optional-content {
    margin: 6px 0 0 0;
}

.form-check-optional .ui-checkboxradio-radio-label .ui-icon-background {
    border-color: none;
    box-shadow: none;
    border: 1px solid var(--color-gray-400);
    width: 14px;
    height: 14px;
}

.option-choice-wrapper .full-alert {
    font-size: 0.75rem;
    border: 1px solid var(--color-danger-400);
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    padding: 2px 4px;
    margin-top: 4px;
    width: fit-content;
}

/*radio 符號 noraml*/
.form-check-optional.radio-optional .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.form-check-optional.radio-optional .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    border-color: none;
    box-shadow: none;
    background-color: var(--color-white);
    width: 14px;
    height: 14px;
}

/*radio 符號 active*/
.form-check-optional.radio-optional .ui-checkboxradio-radio-label.ui-checkboxradio-checked.ui-state-active .ui-icon,
.form-check-optional.radio-optional .ui-checkboxradio-radio-label.ui-checkboxradio-checked.ui-state-active:hover .ui-icon {
    border-color: none;
    box-shadow: none;
    border: 4px solid var(--color-primary);
    width: 8px;
    height: 8px;
}

/*checkbox 符號*/
.form-check-optional.checkbox-optional .ui-icon-blank.ui-icon-blank.ui-icon-blank {
    background-image: none;
    box-shadow: none;
    border: 1px solid var(--color-gray-400);
    border-radius: 0;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 14px;
}

.form-check-optional.checkbox-optional .ui-button.ui-state-active .ui-icon,
.form-check-optional.checkbox-optional .ui-button.ui-state-active:hover .ui-icon {
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_checkbox_checkwhite.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0;
    box-shadow: none;
    position: absolute;
    top: 14px;
}

/*checkbox & radio_end*/

/* SwitchButton_start */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background-color: var(--color-gray-400);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 4px;
        bottom: 4px;
        border-radius: 50%;
        background-color: var(--color-white);
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        transition: .3s;
    }

input:checked + .slider {
    background-color: var(--color-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.switch-frame {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .switch-frame span {
        line-height: initial;
    }

/* SwitchButton_end */

/*tabs_start*/
.tabs-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.tab-head-primary {
    display: none
}

.tab-label-primary {
    margin: 0 0px 2px 0;
    padding: 10px 16px;
    border-radius: 0px;
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    z-index: 1;
}

.tab-content-primary {
    order: 1;
    display: none;
    width: 100%;
    line-height: 1.6;
    padding: 16px;
    border-top: 1px solid var(--color-gray-300);
}

    .tab-content-primary ul {
        padding-left: 20px;
        margin: 8px 0px 0px 0px;
    }

.tab-head-primary:checked + .tab-label-primary,
.tab-label-primary:hover {
    font-weight: 400;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    margin: 0;
}

    .tab-head-primary:checked + .tab-label-primary + .tab-content-primary {
        display: initial;
    }

/*tabs_end*/

/* input date start */
input[type="date"] {
    display: flex;
    position: relative;
    color: var(--color-gray-800);
    /*border: none;*/
    /*   日期與icon之間間距 */
    padding-right: 4px;
    cursor: text;
}

    /* 點擊icon才出現月曆 */
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 6px;
        padding: 6px;
        background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_calendar.svg) !important;
        background-repeat: no-repeat;
        background-size: 0.875rem auto;
        transition: 0.05s;
        background-color: var(--color-gray-300);
        border-radius: 100%;
    }


        input[type="date"]::-webkit-calendar-picker-indicator:hover,
        input[type="date"]::-webkit-calendar-picker-indicator:active {
            cursor: pointer;
            background-color: var(--color-gray-400);
        }

/* input date end */

/*date time picker_start*/
/* .ui-widget.ui-widget-content {
    border: 0;
}

.ui-datepicker {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-secondary);
    border-radius: 0;
    width: 20em;
    padding: 8px;
    margin-top: 4px;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0 12px;
    border: none;
    background-color: var(--color-white);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev {
    left: 0;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
} */

/*上下月份按鈕_start*/
/* .ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    color: var(--color-primary);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    font-weight: 400;
}

.ui-datepicker-header.ui-widget-header .ui-icon {
    background-image: none;
    text-indent: 1px;
    width: auto;
}

.ui-datepicker .ui-datepicker-prev span {
    margin-left: 0px;
}

.ui-datepicker .ui-datepicker-next span {
    margin-left: -26px;
} */

/*上下月份按鈕_end*/

/* .ui-datepicker .ui-datepicker-title {
    font-weight: 800;
    line-height: 2.2em;
    text-align: center;
    padding-bottom: 8px;
    color: var(--color-black);
}

.ui-datepicker table {
    font-size: 0.875rem;
} */

/*星期*/
/* .ui-datepicker th {
    color: var(--color-gray-600);
    width: 48px;
    padding: 8px 0;
    text-align: center;
    font-weight: 400;
    font-size: 0.75rem;
}

.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default,
.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 8px 0;
    text-align: center;
    text-decoration: none;
    border: 0;
    background: inherit;
    color: var(--color-black);
}

.ui-datepicker .ui-state-default.ui-state-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.ui-datepicker .ui-state-default.ui-state-active:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.ui-datepicker .ui-state-default:hover {
    background-color: var(--color-primary-light);
} */

/*date time picker_end*/

/*searchpanel_start*/
.search-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.tab-head-panel {
    display: none
}

.tab-label-panel {
    padding: 8px;
    border-radius: 0px;
    background: var(--color-gray-500);
    color: var(--color-white);
    cursor: pointer;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-content-panel {
    order: 1;
    display: none;
    width: 100%;
    line-height: 1.6;
    padding: 20px;
    background: var(--color-gray-900);
}

/* 沒有tab */
.content-panel {
    line-height: 1.6;
    padding: 20px;
    background: var(--color-gray-900);
}

.tab-head-panel:checked + .tab-label-panel {
    font-weight: 400;
    color: var(--color-white);
    background: var(--color-gray-900);
    margin: 0;
}

    .tab-head-panel:checked + .tab-label-panel + .tab-content-panel {
        display: initial;
    }

.tab-label-panel.available a {
    color: var(--color-white);
    width: 100%;
}

/*tab-content-panel 裡面的內容*/
.content-panel .form-wrapper,
.tab-content-panel .form-wrapper {
    display: grid;
    align-items: end;
}

.content-panel .form-frame,
.tab-content-panel .form-frame {
    margin: 0;
}

.content-panel .form-label,
.tab-content-panel .form-label {
    color: var(--color-white);
    display: flex;
    align-items: center;
}

.content-panel .form-control,
.tab-content-panel .form-control {
    border: none;
}

.form-label .icon {
    width: 0.875rem;
    padding: 4px;
}

.counter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* height: inherit; */
    width: 100%;
    color: var(--color-gray-800);
    caret-color: var(--color-gray-800);
}

.btn-quantity {
    text-align: center;
    font-size: 1rem;
    height: inherit;
    width: 18px;
    border: none;
    outline: none;
    color: var(--color-gray-800);
    background-color: transparent;
}

.btn-minus,
.btn-plus {
    cursor: pointer;
    padding: 8px;
}

.minus-icon,
.plus-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.6;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

    .minus-icon:hover,
    .plus-icon:hover {
        border: 1px solid var(--color-primary-dark);
        color: var(--color-primary-dark);
    }

.btn-minus:disabled,
.btn-minus[disabled],
.btn-plus:disabled,
.btn-plus[disabled] {
    filter: invert(65%) sepia(98%) saturate(1%) hue-rotate(61deg) brightness(140%) contrast(90%);
    pointer-events: none;
}

.content-panel .btn-primary,
.tab-content-panel .btn-primary {
    width: 100%;
    /* height: 36px; */
}

@media(min-width:300px) {

    .content-panel,
    .tab-content-panel {
        padding: 16px;
    }

    .form-wrapper {
        gap: 8px;
    }
}

@media(min-width:768px) {

    .content-panel,
    .tab-content-panel {
        padding: 20px;
    }

    .form-wrapper {
        gap: 12px;
    }
}

@media(min-width:300px) {
    .tab-content-panel .filter-lable {
        display: none;
    }
}

@media(min-width:992px) {
    .tab-content-panel .filter-lable {
        display: block;
    }
}

.content-panel .filter-btn,
.tab-content-panel .filter-btn {
    padding-right: 36px;
    text-align: left;
    position: relative;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.content-panel .filter-btn-text,
.tab-content-panel .filter-btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--color-gray-500);
}

    .content-panel .filter-btn-text.active,
    .tab-content-panel .filter-btn-text.active {
        color: var(--color-black);
    }

.content-panel .filter-btn-icon,
.tab-content-panel .filter-btn-icon {
    position: absolute;
    top: 5px;
    right: 6px;
    background-color: var(--color-gray-300);
    color: var(--color-gray-900);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    padding: 5px;
}

    .content-panel .filter-btn-icon:hover,
    .tab-content-panel .filter-btn-icon:hover {
        background-color: var(--color-gray-400);
    }


/*panel-collapse*/
.search-panel.panel-collapse {
    display: flex;
    flex-direction: column;
}

    .search-panel.panel-collapse .panel-collapse-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: var(--color-gray-900);
        color: var(--color-white);
    }

@media(min-width:992px) {
    .search-panel.panel-collapse .panel-collapse-head {
        display: none;
    }
}

.search-panel.panel-collapse .tab-content-panel {
    width: auto;
    padding-top: 0;
}

@media(min-width:992px) {
    .search-panel.panel-collapse .tab-content-panel {
        display: block;
        padding-top: 20px;
    }
}

.search-panel.panel-collapse .panel-collapse-date {
    margin: 0;
}

.search-panel.panel-collapse .panel-collapse-btn {
    font-size: 0.75rem;
    border: 1px solid var(--color-gray-600);
    padding: 2px 8px;
}

/*searchpanel_end*/


/*快速訂房*/
.content-panel.booking .form-wrapper,
.tab-content-panel.booking .form-wrapper {
    display: grid;
    align-items: end;
}

@media(min-width:300px) {

    .content-panel.booking .form-wrapper,
    .tab-content-panel.booking .form-wrapper {
        grid-template-columns: 2fr 1fr;
    }
}

@media(min-width:992px) {

    .content-panel.booking .form-wrapper,
    .tab-content-panel.booking .form-wrapper {
        grid-template-columns: 2fr 1fr 3fr 1fr;
    }
}

.content-panel.booking .datetime-picker-input,
.tab-content-panel.booking .datetime-picker-input {
    /* display: grid;
    grid-template-columns: 1fr 1fr; */
    position: relative;
    /* safari 欄位寬度 */
    width: 100%;
}

    .content-panel.booking .datetime-picker-input .form-control,
    .tab-content-panel.booking .datetime-picker-input .form-control {
        caret-color: transparent;
        color: var(--color-black);
    }

    .content-panel.booking .datetime-picker-input .week-input,
    .tab-content-panel.booking .datetime-picker-input .week-input {
        position: absolute;
        top: 1px;
        left: 106px;
        /* text-align: right;
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_calendar.svg) !important;
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-position: bottom 50% right 6px; */
        /* background-color: var(--color-white); */
        padding: 6px 0px 6px 0;
        /* min-width: 48px; */
        color: var(--color-black);
        pointer-events: none;
    }

    .tab-content-panel.booking .datetime-picker-input .week-input {
        position: absolute;
        top: 1px;
        left: 106px;
        /* text-align: right;
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_calendar.svg) !important;
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-position: bottom 50% right 6px; */
        /* background-color: var(--color-white); */
        padding: 6px 0px 6px 0;
        /* min-width: 48px; */
        color: var(--color-black);
        pointer-events: none;
    }

/*夜數加減符號_start*/
.search-panel-section .btn-minus,
.search-panel-section .btn-plus {
    padding: 0;
}

.search-panel-section .minus-icon,
.search-panel-section .plus-icon {
    border: none;
    background-color: var(--color-gray-300);
    color: var(--color-gray-800);
}

    .search-panel-section .minus-icon:hover,
    .search-panel-section .plus-icon:hover {
        border: none;
        background-color: var(--color-gray-400);
        color: var(--color-gray-900);
    }

.search-panel-section .btn-minus:disabled,
.search-panel-section .btn-minus[disabled],
.search-panel-section .btn-plus:disabled,
.search-panel-section .btn-plus[disabled] {
    filter: invert(65%) sepia(98%) saturate(1%) hue-rotate(61deg) brightness(140%) contrast(90%);
    pointer-events: none;
}

/*夜數加減符號_end*/

/*住宿券*/
@media(min-width:300px) {

    .tab-content-panel.voucher .form-wrapper,
    .tab-content-panel.project-code .form-wrapper {
        grid-template-columns: 3fr 1fr;
    }
}

@media(min-width:992px) {

    .tab-content-panel.voucher .form-wrapper,
    .tab-content-panel.project-code .form-wrapper {
        grid-template-columns: 6fr 1fr;
    }
}

/*searchpanel_end*/

/*tag_start*/
.tag {
    padding: 4px 8px;
    font-size: 0.75rem;
}

    .tag.tag-primary {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }

    .tag.tag-secondary {
        background-color: var(--color-danger-light);
        color: var(--color-danger);
    }

    .tag.tag-third {
        background-color: var(--color-gray-300);
        color: var(--color-gray-700);
    }

    /* Promotion Tags */
    .tag.tag-promotion {
        padding: 0px 8px;
        background-color: var(--color-primary);
        color: var(--color-primary-light);
    }

.promotion-badge-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.promotion-badge {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

    .promotion-badge.fail .tag-promotion {
        background-color: var(--color-gray-300);
        color: var(--color-gray-600);
    }

    .promotion-badge.fail .content {
        color: var(--color-gray-600);
    }

    .promotion-badge .tag {
        display: flex;
        align-items: center;
        white-space: nowrap;
        line-height: normal;
        padding: 2px 8px;
    }

    .promotion-badge .content {
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
    }

@media(min-width:300px) {
    .card-end:has(.promotion-badge-wrapper) {
        flex-direction: column;
        gap: 12px 16px;
    }
}

@media(min-width:768px) {
    .card-end:has(.promotion-badge-wrapper) {
        flex-direction: row;
        align-items: center;
    }
}


/*tag_end*/

/*verify_start*/
.verify {
    display: flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 12px;
}

    .verify .icon {
        width: 14px;
    }

    .verify.unverified {
        color: var(--color-warning);
        background-color: var(--color-warning-light);
    }

    .verify.verified {
        color: var(--color-success);
        background-color: var(--color-success-light);
    }

/*verify_end*/

/*tooltip_start*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted;
    ;
}

    .tooltip .tooltip-wrapper {
        visibility: hidden;
        min-width: 160px;
        max-width: 250px;
        background-color: var(--color-white);
        box-shadow: var(--color-shadow-secondary);
        border-radius: 0px;
        padding: 8px 12px;
        z-index: 1;
        position: absolute;
        left: 50%;
        bottom: 150%;
        transform: translate(-50%);
        transition: 0.3s;
        opacity: 0;
        text-align: center;
        line-height: 1.8;
        width: 100%;
    }

        .tooltip .tooltip-wrapper::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--color-white) transparent transparent transparent;
        }

    .tooltip:hover .tooltip-wrapper {
        visibility: visible;
        opacity: 1;
    }

/* add-to-cart 購物車 tooltip */
.amount-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-gray-800);
}

.amount-row {
    display: grid;
    grid-template-columns: repeat(1, 3fr 1fr);
    align-items: start;
    gap: 20px;
}

.quentity {
    padding-bottom: 4px;
    box-shadow: inset 0px -1px 0px var(--color-gray-300);
}

.amount-row:last-child {
    font-weight: 500;
    padding-top: 8px;
    box-shadow: inset 0px 1px 0px var(--color-gray-300);
}

.amount-row .item-price,
.amount-row .price {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-black);
    font-size: 0.875rem;
}

.add-to-cart .price-wrapper .tooltip-wrapper .price {
    font-size: 1rem;
}

.quentity,
.amount-item {
    text-align: left;
}

/*tooltip_end*/

/*.hw-modal_start*/

.hw-modal {
    position: fixed;
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity linear 0.2s;
}

    .hw-modal .overlay-close {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: default;
    }

    .hw-modal.active {
        visibility: visible;
        opacity: 1;
    }

.hw-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.hw-modal .modal-dialog {
    position: relative;
    background-color: var(--color-white);
}

@media(min-width:300px) {
    .hw-modal .modal-dialog {
        margin: 20px 20px;
    }
}

@media(min-width:768px) {
    .hw-modal .modal-dialog {
        margin: 20px 80px;
    }
}

.hw-modal .modal-s {
    /* width: 300px; */
    width: 100%;
    max-width: 300px;
}

.hw-modal .modal-m {
    /* width: 500px; */
    width: 100%;
    max-width: 500px;
}

.hw-modal .modal-xl {
    /* width: 700px; */
    width: 100%;
    max-width: 700px;
}

.hw-modal .modal-lg {
    /* width: 1000px; */
    width: 100%;
    max-width: 1000px;
}

.hw-modal .modal-header {
    display: grid;
    grid-template-columns: 9fr 1fr;
    justify-content: space-between;
    align-items: flex-start;
    /* gap: 8px; */
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-300);
}

    .hw-modal .modal-header .modal-title {
        margin: 0;
        word-break: break-all;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-black);
    }

.hw-modal .modal-subtitle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.hw-modal .modal-close-btn {
    grid-column: 2;
    border: none;
    padding: 10px;
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_close.svg);
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: bottom 0% right 0px;
    cursor: pointer;
}

.hw-modal .modal-body {
    padding: 20px 16px;
    overflow-y: auto;
}

    .hw-modal .modal-body:has(.tabs-primary) {
        height: 60vh;
    }

@media(min-width:300px) {
    .hw-modal .modal-body {
        max-height: 440px;
    }
}

@media(min-width:922px) {
    .hw-modal .modal-body {
        max-height: 552px;
    }
}

.hw-modal .modal-footer {
    padding: 16px;
    border-top: 1px solid var(--color-gray-300);
    gap: 8px;
}

.hw-modal .modal-footer-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .hw-modal .modal-footer-wrapper .modal-footer-cta {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 1;
    }

        .hw-modal .modal-footer-wrapper .modal-footer-cta > .btn {
            width: 100%;
        }

    .hw-modal .modal-footer-wrapper .modal-footer-summary {
        display: flex;
        flex: 1;
    }

.hw-modal .modal-footer-summary .summary-price {
    font-size: 1rem;
    font-weight: 600;
}

.hw-modal .modal-footer .modal-footer-totalprice-wrapper {
    display: flex;
    justify-content: space-between;
}

.hw-modal .modal-footer-totalprice-wrapper .total-text,
.hw-modal .modal-footer-totalprice-wrapper .total-price {
    font-size: 1rem;
    font-weight: 600;
}

/*進階篩選*/
.hw-modal .modal-body .filter-section {
    border-bottom: 1px solid var(--color-gray-300);
    padding: 20px 0;
}

    .hw-modal .modal-body .filter-section:first-child {
        padding-top: 0;
    }

    .hw-modal .modal-body .filter-section:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .hw-modal .modal-body .filter-section .modal-subtitle {
        margin-bottom: 4px;
    }

.hw-modal .modal-body .filter-wrapper {
    display: grid;
    gap: 8px 0;
}

@media(min-width:922px) {
    .hw-modal .modal-body .filter-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

/*房型詳情*/
.hw-modal .modal-body .room-description-wrapper {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr
}

@media(min-width:922px) {
    .hw-modal .modal-body .room-description-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

.hw-modal .modal-body .room-description-wrapper .room-facilities-wrapper {
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-300);
    display: grid;
    gap: 20px;
}

@media(min-width:922px) {
    .hw-modal .modal-body .room-description-wrapper .room-facilities-wrapper {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.hw-modal .modal-body .room-introduction-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hw-modal .modal-body .card-title {
    margin: 0;
    /* margin-bottom: 16px; */
    text-decoration: none;
}

.hw-modal .modal-body .room-facilities-wrapper .facilities-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.hw-modal .modal-body .room-facilities-wrapper .room-facilities-section:first-child {
    margin-top: 0;
}

.hw-modal .modal-body .room-facilities-wrapper .facilities-list {
    display: grid;
    gap: 8px 12px;
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 16px;
}

    .hw-modal .modal-body .room-facilities-wrapper .facilities-list li {
        color: var(--color-gray-800);
        padding-right: 20px;
    }

@media(min-width:300px) {
    .hw-modal .modal-body .room-facilities-wrapper .facilities-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width:768px) {
    .hw-modal .modal-body .room-facilities-wrapper .facilities-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/*房價明細*/
.hw-modal .modal-body .price-detail {
    margin-bottom: 16px;
}

    .hw-modal .modal-body .price-detail:last-child {
        margin-bottom: 0px;
    }

.hw-modal .modal-body .price-detail-name {
    background-color: var(--color-gray-200);
    padding: 12px 8px;
}

    .hw-modal .modal-body .price-detail-name h5 {
        font-size: 0.875rem;
    }

.hw-modal .modal-body .price-detail-content {
    border-bottom: 1px solid var(--color-gray-300);
    padding: 16px 8px;
}

    .hw-modal .modal-body .price-detail-content:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .hw-modal .modal-body .price-detail-content .detail-collapse-content {
        border-left: 1px solid var(--color-gray-300);
        padding-left: 12px;
        margin-top: 12px;
        color: var(--color-gray-700);
    }

    .hw-modal .modal-body .price-detail-content .detail-content-name {
        align-content: center;
        flex: 5;
    }

    .hw-modal .modal-body .price-detail-content .detail-collapse-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: var(--color-black);
    }

    .hw-modal .modal-body .price-detail-content .collapse-btn-icon {
        width: 10px;
    }

.hw-modal .modal-body .detail-collapse-content .content-item {
    display: flex;
    justify-content: space-between;
    padding-right: 12px;
    margin-top: 4px;
}

    .hw-modal .modal-body .detail-collapse-content .content-item:first-child {
        margin-top: 0px;
    }

/* 商品頁專案選項、加購 */
.option-description-wrapper {
    /* display: grid; 
    grid-template-columns: 1fr*/
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.option-introduction-wrapper ul {
    /* list-style-type: none; */
    padding: 0px 20px;
    margin: 8px 0px 0px 0px;
    color: var(--color-gray-900);
}

.option-introduction-wrapper p {
    font-size: 1rem;
    margin: 0px 0px 8px 0px;
}

    .option-introduction-wrapper p:last-child {
        margin: 0px;
    }

.option-description-wrapper .btn-third:hover,
.option-description-wrapper .btn-third:active,
.option-description-wrapper .btn-third.active {
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}


.option-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-description-wrapper .custom-check-label,
.option-description-wrapper .custom-radio-label {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px 8px 12px 32px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1rem;
}

    .option-description-wrapper.custom-check-label.disabled,
    .option-description-wrapper.custom-radio-label.disabled {
        background-color: var(--color-gray-200);
        color: var(--color-gray-600);
        pointer-events: none;
        opacity: 0.75;
        cursor: initial;
    }

.option-description-wrapper .checkmark,
.option-description-wrapper .radiomark {
    top: 12px;
    margin-left: 8px;
}

.option-p {
    font-size: 0.875rem;
    margin-top: 8px;
}

.option-choice-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* padding-bottom: 12px; */
    box-shadow: inset 0px -1px 0px var(--color-gray-300);
}

    .option-choice-wrapper:last-child {
        box-shadow: none;
    }

    .option-choice-wrapper label:active {
        background-color: var(--color-primary-light);
    }

.option-title {
    display: flex;
    align-items: center;
    color: var(--color-black);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.option-choice-wrapper img {
    width: 1rem;
}

.option-choice-wrapper .hint {
    margin-top: 4px;
}

.option-choice-wrapper p {
    font-size: 0.875rem;
    margin: 4px auto 0px auto;
}

.form-label-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shuttle-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

    .shuttle-wrapper .info {
        font-size: 0.875rem;
        color: var(--color-gray-800);
        padding-bottom: 16px;
        border-bottom: solid 1px var(--color-gray-300);
    }

        .shuttle-wrapper .info ul,
        .shuttle-wrapper .info ol {
            margin: 0;
            padding-left: 16px;
        }

        .shuttle-wrapper .info li {
            margin-bottom: 2px;
        }

.shuttle-station-wrapper {
    display: flex;
    gap: 16px;
    width: 100%;
}

.station-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    /* border-bottom: solid 1px var(--color-gray-300); */
    width: 100%;
}

    .station-wrapper:last-child {
        padding-bottom: 0px;
        border-bottom: none;
    }

@media(min-width:300px) {
    .shuttle-station-wrapper {
        flex-direction: column;
    }

    .station-wrapper {
        padding-bottom: 16px;
        border-bottom: solid 1px var(--color-gray-300);
    }
}

@media(min-width:768px) {
    .shuttle-station-wrapper {
        flex-direction: row;
    }

    .station-wrapper {
        padding-bottom: 0px;
        border-bottom: none;
    }
}

.station-wrapper .title {
    font-size: 1rem;
    font-weight: 500;
}

.station-wrapper .route {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 0px;
    color: var(--color-gray-800);
    background-color: var(--color-gray-300);
}

    .station-wrapper .route .arrow-right:last-child {
        display: none;
    }

.station-wrapper .stop {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
}

    .station-wrapper .stop p {
        margin: 0px;
    }

.option-timetable-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .option-timetable-wrapper img {
        width: 0.875rem;
        height: 0.875rem;
    }

.timetable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timetable-head {
    display: flex;
    justify-content: space-around;
    color: var(--color-gray-600);
    font-size: 0.75rem;
}

.timetable-body {
    display: grid;
    gap: 20px 12px;
    width: 100%;
}

    .timetable-body input[type="radio"] + label {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.timetable .btn-third:active,
.btn-third:hover,
.timetable .btn-third:active,
.btn-third:active,
.timetable .btn-third:active,
.btn-third.active {
    outline: 1px solid var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 500;
}

.timetable-body .time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 0px;
}

.arrow-right {
    transform: rotate(270deg);
}

/* 變更專案/房型 */
.products {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .products .card-wrapper {
        padding-bottom: 20px;
        box-shadow: inset 0px -1px 0px var(--color-gray-300);
    }

        .products .card-wrapper:last-child {
            box-shadow: none;
        }

/*hw-modal_end*/
/*readmore_start*/

.readmore-content {
    position: relative;
    display: block;
    width: 100%;
}

    .readmore-content span {
        display: none;
    }

    .readmore-content .morelink {
        position: absolute;
        bottom: 2px;
        display: flex;
        justify-content: center;
        width: 100%;
        background: linear-gradient(#ffffff8f, white, white);
        padding: 24px 0 0 0;
        font-size: 0.875rem;
        color: var(--color-primary);
    }

        .readmore-content .morelink:hover {
            cursor: pointer;
            ;
        }

        .readmore-content .morelink::after {
            content: "";
            position: relative;
            left: 6px;
            top: 4px;
            width: 6px;
            height: 6px;
            border: solid var(--color-primary);
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .readmore-content .morelink.less {
            padding: 0;
            bottom: -8px;
        }

            .readmore-content .morelink.less::after {
                content: "";
                position: relative;
                left: 6px;
                top: 8px;
                width: 6px;
                height: 6px;
                border: solid var(--color-primary);
                border-width: 0 2px 2px 0;
                -webkit-transform: rotate(225deg);
                -moz-transform: rotate(225deg);
                -ms-transform: rotate(225deg);
                transform: rotate(225deg);
            }

/*readmore_end*/

/* header */
.top-bar {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--color-white);
    box-shadow: 0px 1px 0px var(--color-gray-300);
    z-index: 2;
}

    .top-bar .container {
        padding: 8px 0;
    }

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .nav-wrapper a:has(.logo) {
        display: flex;
        max-width: 180px;
    }

.nav-item-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.nav-location-wrapper {
    align-items: center;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

    .nav-location-wrapper .nav-item {
        border: 1px solid var(--color-gray-400);
        background-color: var(--color-white);
        border-radius: 100px;
        padding: 4px 12px 4px 4px;
        height: auto;
        width: fit-content;
    }

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .nav-item a {
        display: inherit;
        color: inherit;
    }

.cart-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    width: 20px;
    height: 20px;
    border-radius: 50px;
    top: 16px;
    right: 32px;
    line-height: initial;
    z-index: 3;
}

/* droplist */
.droplist {
    text-align: right;
}

    .droplist:hover,
    .droplist:active {
        background-color: var(--color-gray-200);
    }

        .droplist:hover .list,
        .droplist:active .list {
            display: flex;
        }

    .droplist .list {
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.94);
        box-shadow: var(--color-shadow-primary);
        list-style-type: none;
        padding: 0;
        position: absolute;
        top: 26px;
    }

        .droplist .list.active {
            display: flex;
            align-items: stretch;
            padding: 0px;
            position: absolute;
            top: 32px;
            right: 6%;
        }

        .droplist .list .list-item > * {
            color: var(--color-gray-800);
            border-bottom: 1px solid var(--color-gray-200);
            cursor: pointer;
            padding: 12px;
            width: -webkit-fill-available;
            min-width: 100px;
            text-align: center;
            /* white-space: nowrap; */
        }

.list-item:hover,
.list-item:active {
    background-color: var(--color-gray-light);
}

.list-item a {
    color: var(--color-gray-800);
}

.list-item.logout a {
    color: var(--color-gray-800);
}

.list-item.logout:hover a {
    color: var(--color-danger);
}

/* droplist_end*/

/* 官方網站 active為顯示 */
.nav-item.website {
    display: none;
}

    .nav-item.website.active {
        display: flex;
    }

/* 訂房查詢 active為顯示 */
.nav-item.reservation {
    display: none;
}

    .nav-item.reservation.active {
        display: flex;
    }

/* 購物車預設是隱藏，加入商品後才會變成active狀態顯示 */
.nav-item.cart {
    display: none;
}

    .nav-item.cart.active {
        display: flex;
        position: relative;
    }

/* .nav-wrapper .logo {
    width: fit-content;
} */

/* nav-left 電腦版放分館選單，手機版則為漢堡選單 */
.nav-left {
    display: flex;
    align-items: center;
    width: fit-content;
    flex: 1;
}

/* .nav-left.location {
    display: inherit;
    cursor: pointer;
} */

.mobile-menu {
    z-index: 1000;
    height: calc(100vh - 46px);
    position: fixed;
    left: 0;
    width: 60%;
    background-color: rgba(255, 255, 255, 0.94);
    border-right: 1px solid var(--color-gray-300);
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.11);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s;
}

    .mobile-menu.active {
        transform: translateX(0%);
        transition: transform .3s;
    }

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    padding: 0px;
    height: auto;
    list-style-type: none;
    margin: 0px;
}

.mobile-menu-item {
    padding: 12px 16px;
    border-top: 1px solid rgba(236, 236, 236, 0.8);
    cursor: pointer;
}

    .mobile-menu-item:first-child {
        border-top: none;
    }

    .mobile-menu-item a {
        color: var(--color-gray-800);
    }

    .mobile-menu-item .collapse {
        padding: 0px;
        background-color: transparent;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-menu-item .collapse-btn {
        display: flex;
        color: var(--color-gray-800);
    }

    .mobile-menu-item .collapse-btn-icon {
        width: 0.875rem;
    }

.collapse-item {
    padding: 8px;
}

.mobile-menu li:hover {
    background-color: var(--color-gray-light);
}

.collapse-item:hover {
    background-color: var(--color-gray-300);
}

@media(min-width:300px) {
    .nav-wrapper .logo {
        height: 40px;
    }

    .nav-wrapper .icon {
        width: 20px;
        height: 20px;
        padding: 4px 4px;
        box-sizing: initial;
    }

    .nav-item {
        padding: 0px;
    }

        .nav-item .caption {
            display: none;
        }

    .cart-badge {
        width: 18px;
        height: 18px;
        top: -2px;
        right: -2px;
        font-size: 0.625rem;
    }

    .nav-left.mobile-menu-btn {
        display: block;
    }

    /* .nav-left.location {
        display: none;
    } */

    .nav-left .icon {
        display: block;
    }

    .mobile-menu {
        top: 46px;
    }

    .nav-location-wrapper {
        display: none;
    }
}

@media(min-width:768px) {
    .nav-wrapper .logo {
        height: 54px;
    }

    .nav-wrapper .icon {
        width: 16px;
        height: 16px;
        padding: 2px 4px;
    }

    .nav-item {
        padding: 4px;
    }

        .nav-item .caption {
            display: flex;
            text-align: initial;
        }

    .cart-badge {
        width: 20px;
        height: 20px;
        top: -4px;
        right: -4px;
    }

    .nav-left.mobile-menu-btn {
        display: none;
    }

    /* .nav-left.location {
        display: block;
    } */

    .nav-left .icon {
        display: none;
    }

    .mobile-menu {
        display: none;
        /* top: 76px; */
    }

    .nav-location-wrapper {
        display: flex;
    }
}

/* package-banner-section 主視覺 */
.slideshow-container {
    position: relative;
    overflow: hidden;
}

.banner {
    display: none;
}

/* Next & previous btn */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .prev:hover,
    .next:hover {
        background-color: rgba(77, 77, 77, 0.2);
    }

.banner-dots-wrapper {
    display: flex;
    justify-content: center;
}

.dot {
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin: -20px 4px;
    background-color: var(--color-gray-500);
    border-radius: 50%;
    transition: background-color 0.6s ease;
}

    .bn-active,
    .dot:hover {
        background-color: var(--color-primary);
    }

/* Fading animation */
.banner-fade {
    animation-name: banner-fade;
    animation-duration: 1.5s;
}

@keyframes banner-fade {
    from {
        opacity: .8
    }

    to {
        opacity: 1
    }
}

/* banner end */

/* package-details-section 專案介紹 */
.package-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* package-links-wrapper 標籤及分享 */
.package-links-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 4px;
}

    /*沒有標籤時 share-wrapper 靠右*/
    .package-links-wrapper:not(:has(.tags-wrapper)) .share-wrapper {
        width: 100%;
        justify-content: end;
    }

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
}

.share-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 2px;
}

.share-btn {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--color-black);
    width: max-content;
    cursor: pointer;
}

    .share-btn .icon {
        width: 1.125rem;
    }

.icon {
    width: auto;
    height: auto;
}

.js-share-icon.active {
    filter: invert(42%) sepia(50%) saturate(4541%) hue-rotate(330deg) brightness(95%) contrast(107%);
}

/*modal-share*/
.share-item-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*讓 safari 此 div 垂直置中*/
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

    .share-item-wrapper .share-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px;
        cursor: pointer;
    }

        .share-item-wrapper .share-item > .icon {
            width: 50px;
        }

        .share-item-wrapper .share-item > .name {
            color: var(--color-black);
            margin-top: 8px;
        }

.package-head-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 8px 20px;
}

.package-title-wrapper {
    display: flex;
    align-items: center;
}

.package-title {
    margin: 0px;
    font-weight: 500;
    color: var(--color-black);
}

/* price*/

.price-wrapper,
.package-price-wrapper {
    display: flex;
    flex-direction: column;
    min-width: fit-content;
    gap: 6px;
}

.amount {
    display: flex;
    gap: 4px;
    align-items: center;
}

.save-up-to {
    font-size: 0.75rem;
}

.currency {
    font-size: 0.875rem;
}

.andup {
    font-size: 0.75rem;
}

.price {
    font-size: 1.25rem;
    font-weight: 600;
}

.price-info {
    font-size: 0.75rem;
    line-height: 0.75rem;
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.price-original {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-decoration: line-through;
    text-align: end;
    white-space: nowrap;
}

.promotion-discount {
    font-weight: 500;
    color: var(--color-primary);
    white-space: nowrap;
}

.package-price-wrapper .price {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 100%;
}

@media (min-width: 768px) {
    .package-price-wrapper .currency {
        font-size: 1rem;
    }

    .package-price-wrapper .price {
        font-size: 1.75rem;
    }

    .package-price-wrapper .andup {
        font-size: 1rem;
    }
}


/* 訂單詳情價格 */
.reservation-content-wrapper .price-wrapper {
    align-items: end;
}

    .reservation-content-wrapper .price-wrapper .amount .price {
        font-weight: 500;
        font-size: 1rem;
    }

/* 訂單總價 */
.orderprice-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 房價 */
.orderprice-statement {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /*padding-bottom: 12px;*/
}

    .orderprice-statement:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

/* 訂房總額-稅及服務費樣式 */
.total-accommodation .tax-service-fee {
    font-size: 0.875rem;
    text-align: end;
    color: var(--color-gray-700);
    margin-top: 4px;
}

.orderprice-wrapper .orderprice {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

    .orderprice-wrapper .orderprice.discount,
    .orderprice-wrapper .orderprice.promotion {
        color: var(--color-primary);
    }

    .orderprice-wrapper .orderprice:last-child {
        margin-bottom: 0;
    }

.orderprice-statement.summary {
    border-top: 1px solid var(--color-gray-300);
    padding-top: 12px;
}

    .orderprice-statement.summary .title,
    .orderprice-statement.summary .currency,
    .orderprice-statement.summary .price {
        font-weight: 600;
    }

    /* 總金額 */
    .orderprice-statement.summary .orderprice .title,
    /* .orderprice-statement.summary .orderprice .currency, */
    .orderprice-statement.summary .orderprice .price {
        font-size: 1.125rem;
    }

    /* 現場付款提醒 */
    .orderprice-statement.summary .note {
        font-size: 1rem;
        color: var(--color-danger);
    }

/* 加價 */

.orderprice-wrapper .title {
    font-size: 1rem;
}

    .orderprice-wrapper .title .icon {
        width: 1rem;
    }

    /* 房價訂金比例說明tooltip */
    .orderprice-wrapper .title.tooltip .tooltip-wrapper {
        min-width: 172px;
        left: 90%;
    }

.orderprice-wrapper .price {
    font-weight: 500;
    font-size: 1rem;
}

.orderprice-wrapper .order-pay .price {
    font-weight: 600;
    font-size: 1.125rem;
}

@media (min-width: 300px) {
    .card-content.payment-summary {
        flex-direction: column;
    }

    /* .checkout-price-discount-wrapper {
        margin-bottom: 20px;
    } */

    .orderprice-wrapper {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .card-content.payment-summary {
        flex-direction: row;
        /* justify-content: space-between; */
        align-items: center;
        justify-content: flex-end;
    }

    .checkout-price-discount-wrapper {
        margin-bottom: 0;
        width: calc(60%);
    }

        .checkout-price-discount-wrapper .form-control {
            min-width: 280px;
            width: initial;
        }

    .orderprice-wrapper {
        width: initial;
        width: calc(40%);
    }
}

/* 應退金額 */
/* .card-content.payment-refund {
    flex-direction: column;
} */

.card-content.payment-paid .orderprice-wrapper,
.card-content.payment-refund .orderprice-wrapper {
    padding: 12px 8px;
    width: unset;
}

@media (min-width: 768px) {

    .card-content.payment-paid,
    .card-content.payment-refund {
        align-items: end;
    }

        .card-content.payment-paid .orderprice-wrapper,
        .card-content.payment-refund .orderprice-wrapper {
            width: calc(40%);
        }
}

.orderprice-wrapper.paid-summary,
.orderprice-wrapper.refund-summary {
    background-color: var(--color-gray-light);
}

/* price end*/

.package-date-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.caption {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.875rem;
}

    .caption .label {
        display: flex;
        gap: 4px;
        word-break: keep-all;
        color: var(--color-gray-800);
    }

        .caption .label .icon {
            width: 1.125rem !important;
            padding: 1px 0;
        }

    .caption .content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 4px;
        color: var(--color-gray-800);
        line-height: 1.25rem;
    }

    .caption.introduction .content,
    .caption.pricedescription .content {
        overflow: hidden;
        /* white-space: nowrap; */
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* safari 限高以隱藏多餘行數 */
        max-height: 3em;
    }

    .caption .date-range {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        color: var(--color-gray-800);
    }

    .caption .content .tag {
        padding: 0 4px;
    }

.date-nonapplicable {
    font-size: 0.75rem;
    line-height: 0.875rem;
    word-break: break-all;
    margin: 0px 4px;
    color: var(--color-gray-800);
}

    .date-nonapplicable .icon {
        width: 10px;
    }

/* 訂單詳情用到 */
.date-stay .room-night {
    font-size: 0.75rem;
    border: 1px solid var(--color-gray-400);
    padding: 2px 8px;
    border-radius: 16px;
    line-height: initial;
}

.date-badge {
    background-color: var(--color-primary);
    border-radius: 2px;
    padding: 0px 4px;
    margin: 0px 4px;
    font-size: 0.75rem;
    color: var(--color-white);
}

.content-tag {
    display: flex;
    align-items: start;
    gap: 2px;
    color: var(--color-gray-800);
}

    .content-tag span {
        word-break: break-all;
    }

    .content-tag .icon {
        width: 1.125rem !important;
    }

    .content-tag.success {
        color: var(--color-success);
    }

    .content-tag.danger {
        color: var(--color-danger);
    }

    .content-tag.deposit-details {
        border-bottom: 1px dotted;
    }

.sellpoint-wrapper {
    display: flex;
    flex-direction: column;
}

.sellpoint-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    gap: 4px 8px;
    background-color: var(--color-gray-200);
    box-shadow: inset 0px -1px 0px var(--color-gray-300);
}

    .sellpoint-bar:last-child {
        box-shadow: none;
    }



/* tab切換 */
.package-details-section .tabs-primary {
    margin-top: 12px;
}

/* tab切換end */

.product-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-head:last-child {
    /* padding-bottom: 0; */
    border-bottom: none;
}

.product-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-content-item {
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-300);
    margin-bottom: 16px;
}

    .product-content-item:last-child {
        margin-bottom: 0px;
    }

.card-wrapper {
    display: flex;
    align-items: stretch;
    gap: 12px 16px;
}

.card-photos-wrapper {
    display: flex;
    position: relative;
}

@media(min-width:768px) {
    .card-photos-wrapper {
        flex: 2;
    }
}

.photo {
    width: 100%;
    height: fit-content;
    aspect-ratio: 5/3;
    object-fit: cover;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media(min-width:768px) {
    .card-body {
        flex: 5;
    }
}

.card-package {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media(min-width:768px) {
    .card-package {
        flex: 7;
    }
}

.card-title {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    color: var(--color-black);
}

    .card-title .icon {
        width: 12px !important;
        transform: rotate(270deg);
        display: initial;
    }

/* 房型資料 */
.info-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: start;
}

/* 房型介紹 */
.info-intro {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

    /* popup內房型說明 */
    .info-intro p,
    .info-additional p {
        margin: 0;
        color: var(--color-gray-800);
    }

.card-action {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4px;
}

.package-display-section .card-action {
    flex: 2;
}

@media(min-width:768px) {
    .card-action {
        flex: 2;
    }
}

.card-cta {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    justify-content: flex-end;
}

/* 專案卡片card-wrapper後面接card-stand，強制直立卡片 */
/* 目前使用頁面：首頁、專案代碼訂房、住宿券訂房 */
.card-wrapper.card-stand {
    display: flex;
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
}

.card-stand .card-photos-wrapper {
    flex: unset;
}

.card-stand .card-body,
.card-stand .card-action {
    padding: 12px;
    background-color: var(--color-white);
}

.card-stand .card-title {
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-stand .card-action {
    justify-content: flex-end;
}

/* card-stand-END */

/* 直立卡片按鈕數量剛好為２時 套用此class */
.card-cta-btn2 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.card-stand .card-cta button,
.card-stand .card-cta-btn2 button {
    white-space: initial;
}

/* 按鈕內文字自動換行以免卡片跑版 */

.room-instock {
    font-weight: 500;
    color: var(--color-primary);
    display: flex;
    justify-content: flex-end;
}

/* calendar */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
}

.hw-modal .modal-body:has(.calendar-wrapper) {
    padding-top: 0;
    min-height: 440px;
}

.calendar-head-wrapper {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    z-index: 1;
}

@media(min-width:300px) {
    .calendar-head-wrapper {
        padding: 0px 0px;
    }
}

@media(min-width:768px) {
    .calendar-head-wrapper {
        height: 36px;
        padding: 0px 24px;
    }
}

.calendar-head-prev,
.calendar-head-next {
    color: var(--color-white);
    padding: 4px;
    cursor: pointer;
}

    .calendar-head-prev.disabled,
    .calendar-head-next.disabled {
        color: var(--color-gray-600);
        cursor: not-allowed;
    }

.calendar-head-month .form-control {
    /*windows 的 option 會吃 select 本身設定的顏色，Mac 不會*/
    background-color: var(--color-gray-800);
    border: none;
    color: var(--color-white);
    padding-right: 26px;
    text-align: center;
}

/*無上個月份 tooltips 提示_start*/
.calendar-wrapper .tooltip {
    text-decoration: none;
}

    .calendar-wrapper .tooltip .tooltip-wrapper {
        min-width: 100px;
        max-width: 160px;
        left: 50px;
        top: 120%;
        bottom: inherit;
    }

        .calendar-wrapper .tooltip .tooltip-wrapper::after {
            top: -11px;
            left: 30%;
            border-width: 6px;
            border-color: transparent transparent var(--color-white) transparent;
        }


/*無上個月份 tooltips 提示_end*/

.calendar-week-pc {
    position: sticky;
    top: 36;
}

    .calendar-week-pc li {
        padding: 4px 0px;
    }

.calendar-day {
    border: solid 0.5px var(--color-white);
    background-color: var(--color-gray-300);
}

.calendar-wrapper ul {
    list-style: none;
    padding-inline-start: 0px;
    margin: 0px;
}

.calendar-wrapper li {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: flex-start;
}

.calendar-date-wrapper {
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
}

    .calendar-date-wrapper .button-small {
        font-size: 0.75rem;
        padding: 5px 16px;
        background-color: var(--color-primary);
        color: var(--color-white);
    }

.calendar-date {
    display: flex;
    font-size: 0.75rem;
    text-align: left;
    margin: -4px 0px 4px -4px;
    color: var(--color-black);
}

.calendar-availbility {
    margin: 2px 0px;
}

.switch-frame.calendar {
    width: 100%;
    justify-content: center;
}

@media(min-width:768px) {
    .hw-modal .modal-footer:has(.switch-frame.calendar) {
        display: none;
    }
}


/* calendar class */
/* 可預訂 .avalible */
.calendar-date-wrapper.avalible {
    background-color: var(--color-white);
}

    .calendar-date-wrapper.avalible:hover {
        background-color: var(--color-primary-light);
    }

    .calendar-date-wrapper.avalible .calendar-availbility {
        color: var(--color-primary);
    }

.calendar-rate {
    color: var(--color-black);
}

/* 候補訂房 .waiting */
.calendar-date-wrapper.waiting:hover {
    background-color: var(--color-primary-light);
}

.calendar-date-wrapper.waiting .calendar-availbility {
    color: var(--color-danger);
}

/* 尚未開賣 .notstarted */
.calendar-date-wrapper.notstarted {
    background-color: var(--color-gray-200);
}

    .calendar-date-wrapper.notstarted .calendar-availbility {
        color: var(--color-gray-500);
        padding: 5px 4px;
    }

    .calendar-date-wrapper.notstarted .calendar-date {
        color: var(--color-gray-500);
    }

    .calendar-date-wrapper.notstarted .calendar-rate {
        display: none;
    }

/* 已客滿 .fully */
.calendar-date-wrapper.fully {
    background-color: var(--color-gray-200);
}

    .calendar-date-wrapper.fully .calendar-availbility {
        color: var(--color-gray-500);
        font-weight: 400;
        padding: 5px 6px;
    }

    .calendar-date-wrapper.fully .calendar-date {
        color: var(--color-gray-500);
    }

    .calendar-date-wrapper.fully .calendar-rate {
        display: none;
    }

/* 不適用 .unsuitable */
.calendar-date-wrapper.unsuitable {
    background-color: var(--color-gray-200);
}

    .calendar-date-wrapper.unsuitable .calendar-availbility {
        color: var(--color-gray-500);
        font-weight: 400;
        padding: 5px 6px;
    }

    .calendar-date-wrapper.unsuitable .calendar-date {
        color: var(--color-gray-500);
    }

    .calendar-date-wrapper.unsuitable .calendar-rate {
        display: none;
    }

/* 不在專案效期內 .expired */
.calendar-date-wrapper.expired {
    background-color: var(--color-gray-200);
}

    .calendar-date-wrapper.expired .calendar-availbility {
        color: var(--color-gray-500);
        font-weight: 400;
        padding: 5px 6px;
    }

    .calendar-date-wrapper.expired .calendar-date {
        color: var(--color-gray-500);
    }

    .calendar-date-wrapper.expired .calendar-rate {
        display: none;
    }

/* 已過期 .before*/
.calendar-date-wrapper.before {
    background-color: var(--color-gray-200);
}

    .calendar-date-wrapper.before .calendar-availbility + .calendar-rate {
        display: none;
    }

    .calendar-date-wrapper.before .calendar-date {
        color: var(--color-gray-500);
    }

/* searchpage */
.sort-button-wrapper {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.card-outline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-title a {
    color: var(--color-black);
}

/* searchpage-end */



/* productpage-start */
.product-page {
    padding-bottom: 0;
}

    .product-page section:nth-last-of-type(2) {
        margin-bottom: 32px;
        /* 倒數第二個section */
    }

.summary-wrapper {
    display: grid;
    grid-auto-columns: 6fr;
    gap: 16px 0px;
}

    .summary-wrapper .card-body {
        gap: 8px;
    }

.product-card-wrapper {
    display: flex;
    flex-direction: column;
}

/* basic-card */
.basic-card-title {
    display: flex;
    align-items: center;
    gap: 4px 8px;
    flex-wrap: wrap;
}

.btn-edit {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-edit .icon {
        width: 1rem;
    }

.check-info {
    display: grid;
    /*border-top: 1px solid var(--color-gray-300);*/
}

    .check-info .title {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
        justify-items: start;
        text-align: right;
        white-space: nowrap;
        border-right: solid 1px var(--color-gray-300);
        padding-right: 4px;
    }

    .check-info .title,
    .check-info select {
        color: var(--color-gray-800);
    }

    .check-info .form-control {
        border: none;
        text-align: center;
        /*color: transparent;*/
        text-shadow: 0 0 0 var(--color-gray-800);
    }

        .check-info .form-control:first-child {
            border-right: 1px solid var(--color-gray-300);
            background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_calendar.svg) !important;
            background-repeat: no-repeat;
            background-size: 16px auto;
            background-position: bottom 50% right 12px;
        }

@media(min-width:300px) {
    .frame-summary-card {
        padding: 16px;
    }

    .product-info {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .summary-wrapper .price-wrapper {
        order: 3;
        align-items: end;
    }

    .check-info {
        /* order: 2; */
        grid-template-columns: 2fr 1fr;
        /*border-bottom: 1px solid var(--color-gray-300);*/
    }

        .check-info .form-control::placeholder {
            text-align: left;
        }
}

@media(min-width:768px) {
    .frame-summary-card {
        padding: 0px;
    }

    .product-info {
        order: 1;
        grid-column: 1/5;
        padding: 20px 0px 20px 20px;
        gap: 24px;
    }

    .summary-wrapper .price-wrapper {
        order: 2;
        grid-column: 5/6;
        padding: 20px 20px 20px 0px
    }

    .check-info {
        /* order: 3;
        grid-column: 1/6; */
        grid-template-columns: 1fr 1fr;
        border-bottom: none;
    }

        .check-info .form-control::placeholder {
            text-align: center;
        }
}

/* room-card */
.room-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.icon-delete {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.1;
    width: 16px;
    height: 16px;
    padding: 3px;
    border-radius: 50%;
    cursor: pointer;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: var(--color-gray-500);
    color: var(--color-white);
}

    .icon-delete:hover {
        background-color: var(--color-gray-400);
    }

.product-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hint {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-danger);
}

.selection-bed,
.selection-people,
.selection-additional,
.selection-voucher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.selection-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.selection-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.selection-people-content {
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    width: 100%;
}

/* add new room */
.add-room {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px;
    width: 100%;
    font-size: 1rem;
    background-color: var(--color-white);
    border: 1px dashed var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
}

    .add-room .add-room-icon {
        font-size: 1rem;
        line-height: 1.6;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    .add-room:disabled,
    .add-room[disabled] {
        background-color: var(--color-gray-light);
        border: 1px dashed var(--color-gray-400);
        color: var(--color-gray-400);
        cursor: not-allowed;
    }

        .add-room:disabled .add-room-icon,
        .add-room[disabled] .add-room-icon {
            border: 1px solid var(--color-gray-400);
            color: var(--color-gray-400);
        }

.selection-additional .form-control {
    min-height: 60px;
    padding-left: 8px;
}

.form-control-wrapper,
.selection-voucher .form-wrapper {
    display: grid;
    gap: 8px;
    width: 100%;
}

@media(min-width:300px) {

    .form-control-wrapper,
    .selection-voucher .form-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media(min-width:768px) {
    .form-control-wrapper {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media(min-width:768px) {
    .selection-voucher .form-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

.selection-voucher .voucher-direction {
    font-size: 0.875rem;
    color: var(--color-gray-800);
}

/* items-card */
.product-item-wrapper {
    display: grid;
}

.item-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* box-shadow: 0px 1px 0px var(--color-gray-300); */
    /*border-top: solid 1px var(--color-gray-300);*/
}

    .item-card.item-error {
        background-color: var(--color-warning-light);
    }

    .item-card.unable .item-title {
        color: var(--color-gray-600);
    }

/* 更多選擇展開按鈕 */
.product-item-card-wrapper .btn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    width: 100%;
    cursor: pointer;
}

.btn-more .icon {
    width: 0.75rem;
}

@media(min-width:300px) {
    .item-card {
        padding: 12px 0px;
    }

        .item-card:first-child {
            padding-top: 0px;
            border-top: none;
        }

        .item-card:last-child {
            box-shadow: none;
            /*            padding-bottom: 0px;*/
        }
}

@media(min-width:768px) {
    .item-card {
        padding: 0px 16px;
    }

    /* .item-card:first-child,
        .item-card:nth-child(2) {
            padding: 0px 16px 12px 16px;
            border-top: none;
        }*/


}

.item-photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.item-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 12px;
}

.item-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
}

.item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    /*text-decoration-line: underline;*/
    /* 和字之間距離 */
    /*text-underline-offset: 2.4px;*/
    /* 底線粗細 */
    /*text-decoration-thickness: 1.2px;*/
}

    .item-title .icon {
        width: 12px;
        transform: rotate(270deg);
        display: initial;
    }

.item-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1rem;
    color: var(--color-primary);
}

    .item-price .amount,
    .item-price .currency,
    .item-price .price-info {
        font-size: 0.875rem;
    }

    .item-price .price {
        font-size: 1rem;
        display: block !important;
    }

.item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .item-body .caption .label {
        align-items: flex-start;
    }

        .item-body .caption .label .icon {
            padding: 0px;
        }

.item-detail {
    color: var(--color-gray-800);
}

.item-selections {
    display: flex;
    flex-direction: column;
}

.item-select-title {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.selection-people-adult,
.selection-people-children {
    display: flex;
    flex-direction: column;
    column-gap: 4px;
    gap: 8px;
}

    .selection-people-children .form-frame {
        gap: 2px;
    }

.counter-box-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.counter-box-title {
    min-width: 44px;
}


    /* 兒童說明 tooltip */
    .counter-box-title.tooltip {
        text-decoration: none;
        display: flex;
        gap: 2px;
    }

        .counter-box-title.tooltip .icon {
            width: 14px;
        }

        .counter-box-title.tooltip .tooltip-wrapper {
            left: 220%;
            min-width: 180px;
        }

            .counter-box-title.tooltip .tooltip-wrapper::after {
                left: 16%;
            }

.counter-box-wrapper .counter-box {
    justify-content: flex-start;
    width: initial;
}

.counter-box .icon {
    width: 24px;
    border-radius: 50%;
    transition: all .3s ease;
}

    .counter-box .icon:active {
        background-color: var(--color-primary-light);
    }

.counter-remind {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
    flex-grow: 1;
}

    .item-action a {
        width: 80px;
        font-size: 0.875rem;
        padding: 0px;
        height: 28px;
    }

.more-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 24px;
    width: 100%;
    text-decoration-line: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
    color: var(--color-gray-800);
    cursor: pointer;
}

    .more-item img,
    .add-to-cart .icon {
        width: 0.875rem;
    }

.product-cart-section {
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0px;
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

.add-to-cart,
.add-to-cart .price-wrapper {
    display: flex;
}

    .add-to-cart .price-wrapper span {
        color: var(--color-black);
        font-size: 1rem;
    }

    .add-to-cart .price-wrapper .price {
        color: var(--color-black);
        font-size: 1.25rem;
    }


@media(min-width:300px) {
    .product-cart-section .container {
        padding: 16px 0;
    }

    .add-to-cart {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .add-to-cart .price-wrapper {
            flex-direction: row;
            justify-content: space-between;
            gap: 8px;
        }

        .add-to-cart .tooltip .tooltip-wrapper {
            min-width: 296px;
            left: -50%;
            right: auto;
        }

            .add-to-cart .tooltip .tooltip-wrapper::after {
                left: 90%;
            }
}

@media(min-width:768px) {
    .product-cart-section .container {
        padding: 20px 0;
    }

    .add-to-cart {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        .add-to-cart .price-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .add-to-cart .btn {
            padding: 8px 24px;
        }

        .add-to-cart .tooltip .tooltip-wrapper {
            min-width: 300px;
            left: 200%;
            right: auto;
        }

            .add-to-cart .tooltip .tooltip-wrapper::after {
                left: 10%;
            }
}

.item-photos-wrapper {
    display: flex;
}

/* productpage-end */


/* 當螢幕寬度大於300px 手機版 */
@media(min-width:300px) {

    .frame-primary,
    .frame-product-card {
        /* padding: 16px 16px 0px 16px; */
        padding: 16px;
    }

    .frame-product-card {
        margin-bottom: 16px;
    }

    .package-title {
        font-size: 1.125rem;
    }

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

    .btn-text {
        display: none;
    }

    .package-price-wrapper {
        align-items: flex-start;
    }

    .price-wrapper {
        align-items: flex-end;
    }

    /* room-mobile */
    .card-wrapper {
        flex-direction: column;
    }

    .calendar-date-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 48px;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        border-bottom: solid 1px var(--color-gray-300);
    }

    .calendar-day li:last-child .calendar-date-wrapper {
        border-bottom: none;
    }


    .calendar-week-pc {
        display: none;
        font-size: 0.75rem;
        border-bottom: 1px solid var(--color-gray-500);
    }

    .calendar-day {
        display: flex;
        flex-direction: column;
        /* gap: 1px; */
        /*   以下套版時可刪 */
        /* height: 389px;
        overflow: hidden; */
        /*   以上套版時可刪 */
    }

    .calendar-date {
        font-size: 0.75rem;
        text-align: left;
        margin: 0px;
    }

    /* 手機版 房價日曆空白狀態文字提示 */
    .calendar-body-wrapper .empty {
        display: none;
    }

        .calendar-body-wrapper .empty.active {
            display: flex;
            justify-content: center;
            padding-top: 200px;
            font-size: 1.125rem;
            color: var(--color-gray-700);
        }

    .product-card-content {
        padding: 12px 16px;
    }

    .product-item-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    /* 手機板 空房查詢 不可預訂日期直接隱藏 */
    .calendar-date-wrapper.before {
        display: none;
    }
}

/* 當螢幕寬度大於768px 電腦版 */
@media(min-width:768px) {

    .frame-primary,
    .frame-product-card {
        /* padding: 20px 20px 4px 20px; */
        padding: 20px;
    }

    .frame-product-card {
        margin-bottom: 20px;
    }

    .package-title {
        font-size: 1.75rem;
    }

    .package-head-wrapper {
        flex-direction: row;
    }

    .btn-text {
        display: block;
    }

    .package-price-wrapper,
    .price-wrapper {
        align-items: flex-end;
    }

    .card-wrapper {
        flex-direction: row;
    }

    .calendar-wrapper ul {
        list-style: none;
        padding-inline-start: 0px;
        margin: 0px;
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(7, 1fr);
    }

    .calendar-date-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        height: 80px;
        gap: 4px;
        /* padding: 2px; */
    }

    .calendar-week-pc {
        display: flex;
        background-color: var(--color-white);
    }

    .calendar-day {
        height: auto;
        /*   套版時可刪 */
        overflow: visible;
        /*   套版時可刪 */
    }

    .calendar-date {
        font-size: 0.75rem;
        text-align: left;
        padding-left: 4px;
    }

    .calendar-content {
        align-items: center;
    }

    .date-week,
    .calendar-action {
        display: none;
    }

    .calendar-body-wrapper .empty,
    .calendar-body-wrapper .empty.active {
        display: none;
    }


    /* searchpage */

    /* productpage */

    .product-card-content {
        padding: 12px 20px 20px 20px;
    }

    .product-item-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 0px;
    }

    /* 手機板 空房查詢 不可預訂日期直接隱藏 */
    .calendar-date-wrapper.before {
        display: flex;
    }
}

/*退款政策 stepbar*/
.stepbar-wrapper {
    display: flex;
    justify-content: center;
}

.stepbar-content,
.stepbar-info {
    width: 140px;
}

.step-dot {
    width: 20px;
}

.stepbar-content {
    text-align: end;
    padding-right: 8px;
    padding-bottom: 44px;
}

.stepbar-info {
    position: relative;
    padding-left: 8px;
    padding-bottom: 44px;
}

.stepbar-wrapper:last-child .stepbar-content,
.stepbar-wrapper:last-child .stepbar-info {
    padding-bottom: 0;
}

.stepbar-info::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 4px;
    left: -10px;
    height: 100%;
    width: 10px;
    border-left: 2px solid var(--color-gray-400);
}

.stepbar-info.last::before {
    border-left: none;
}

.stepbar-info::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 4px;
    left: -14px;
    width: 6px;
    height: 6px;
    border: 2px solid var(--color-gray-400);
    border-radius: 50%;
    background-color: var(--color-gray-400);
}

.stepbar-content-text,
.stepbar-info-text {
    word-break: break-all;
    margin: 0;
}

.stepbar-content-text {
    color: var(--color-gray-600);
}

.stepbar-info-text {
    background-color: var(--color-gray-200);
    font-weight: 600;
    padding: 8px;
}

/*可退款*/
.stepbar-info.success::after {
    left: -16px;
    border: 4px solid var(--color-success);
    background-color: var(--color-success-light);
}

.stepbar-info.success .stepbar-info-text {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.stepbar-info.alert .stepbar-info-text {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

/*不可退款*/
.stepbar-wrapper.alert .stepbar-info::after {
    left: -16px;
    border: 4px solid var(--color-danger);
    background-color: var(--color-danger-light);
}

.stepbar-wrapper.alert .stepbar-info-text {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.stepbar-wrapper.alert .stepbar-content-text {
    color: var(--color-danger);
}


/*checkout page_start*/

.card-wrap {
    display: flex;
    flex-direction: column;
}

.card-top {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-300);
}

    .card-top .title {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        font-size: 1.125rem;
    }

    .card-top .icon {
        width: 1.125rem;
    }

.card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-end {
    display: flex;
    justify-content: end;
    padding: 16px;
    /*border-top: 1px solid var(--color-gray-300);*/
}

/* 不顯示card-content(內容明細)時，取消 card-end 的 border-top */
.card-wrap:not(:has(.card-content)) .card-end {
    border-top: none;
}


/*訂單詳情*/
.card-content .card-content-item {
    display: flex;
    align-items: stretch;
    gap: 12px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-300);
}

    .card-content .card-content-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.card-content .card-photos-wrapper {
    height: 100%;
}

.card-content .reservation-content-wrapper {
    display: flex;
    flex: 8;
    gap: 16px;
}

.reservation-content-wrapper .card-wrapper {
    display: flex;
    flex: 7;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.reservation-content-wrapper .reservation-title-wrapper {
    display: flex;
}

.reservation-content-wrapper .title .name {
    font-weight: 600;
    color: var(--color-black);
    font-size: 1rem;
}

/*客房內容_start*/
.room-type-content-wrapper .room-type-item {
    display: flex;
    flex: 8;
    padding: 16px 0;
    border-top: 1px solid var(--color-gray-300);
}

/* 內含、加購商品 */
.room-type-content-wrapper .product-item {
    display: flex;
    flex: 8;
}

@media (min-width: 320px) {

    .room-type-content-wrapper .room-type-item,
    .room-type-content-wrapper .product-item {
        flex-direction: column;
        gap: 8px;
    }
}

@media (min-width: 768px) {

    .room-type-content-wrapper .room-type-item,
    .room-type-content-wrapper .product-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }
}

.room-type-content-wrapper .room-type-item:last-child,
.room-type-content-wrapper .product-item:last-child {
    padding-bottom: 0px;
}

.room-type-content-wrapper .info-wrapper {
    display: flex;
    flex-direction: column;
    flex: 7;
}

.room-type-content-wrapper .name {
    font-size: 1rem;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.room-type-content-wrapper .require {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-top: 4px;
}

.room-type-content-wrapper .voucher-wrapper {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-gray-800);
    margin-top: 8px;
}

.room-type-content-wrapper .price-wrapper {
    display: flex;
    flex: 1;
}

.room-type-content-wrapper .amount {
    color: var(--color-black);
    margin-bottom: 2px;
}

    .room-type-content-wrapper .amount.detail {
        border-bottom: 1px dotted;
    }


.room-type-content-wrapper .price-wrapper .icon {
    width: 0.75rem;
    line-height: 0.75rem;
}

/* 商品 */
.room-type-content-wrapper > .title {
    font-size: 1rem;
    font-weight: 500;
    padding: 8px;
    margin-top: 4px;
    background-color: var(--color-gray-200);
}

/*客房內容_end*/

.card-outline p {
    margin: 0;
}

.card-outline ul {
    margin: 0px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roominfo-wrapper {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.card-outline .refund-policy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.card-outline .require {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

/* 專案選項或加購 */
.card-outline .room-type-content-wrapper .product-item {
    color: var(--color-gray-800);
    display: flex;
    padding: 16px 0;
}

.prodcut-item-wrapper .product-item {
    border-top: 1px solid var(--color-gray-300);
}

    .prodcut-item-wrapper .product-item:first-child {
        border-top: none;
    }

/* 專案內容 */
.card-outline .package-about {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

    .card-outline .package-about a {
        color: var(--color-gray-800);
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
    }

    .card-outline .package-about .icon {
        width: 1.125rem;
    }

.card-outline .product-item .title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 4px;
}

.card-outline .product-item .item-group {
    margin-bottom: 4px;
}

.card-outline .product-item .time {
    margin-right: 8px;
}

.card-outline .product-item .option {
    margin-right: 8px;
}

.card-outline .product-item .quantity {
    margin-right: 8px;
}

.card-outline .package-about .title {
    font-weight: 500;
    color: var(--color-gray-900);
    margin-bottom: 2px;
}

.card-outline .package-about .content {
    color: var(--color-gray-800);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reservation-content-wrapper .action-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
    gap: 4px;
}

    .reservation-content-wrapper .action-wrapper .button-wrapper,
    .reservation-content-wrapper .action-wrapper .btn {
        display: flex;
        flex-direction: column;
        gap: 8px;
        /*        width: 100%;*/
        min-width: 120px;
    }

    .reservation-content-wrapper .action-wrapper:has(.price-wrapper):has(.button-wrapper) {
        justify-content: space-between;
    }

.checkout-action {
    display: flex;
}

    .checkout-action .action-item {
        display: flex;
        color: var(--color-gray-800);
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 4px;
        border-right: 1px solid var(--color-gray-300);
    }


        .checkout-action .action-item:last-child {
            border-right: none;
            padding-right: 0;
        }

        .checkout-action .action-item .icon {
            width: 16px;
        }

        .checkout-action .action-item span {
            white-space: nowrap;
        }

        .checkout-action .action-item:only-child {
            justify-content: flex-end;
            padding: 0;
            border: none;
        }

/* 當螢幕寬度大於300px 手機版 */
@media (min-width: 300px) {
    .card-content .card-content-item {
        flex-direction: column;
    }

    .card-content .reservation-content-wrapper {
        flex-direction: column;
    }

    .checkout-action {
        width: 100%;
    }

        .checkout-action .action-item {
            padding: 12px 8px;
            border-top: solid 1px var(--color-gray-300);
            border-bottom: solid 1px var(--color-gray-300);
        }

    .reservation-content-wrapper .action-wrapper {
        gap: 12px;
    }

    .card-end .btn-width-limit {
        width: 100%;
    }

    .checkout-action.mobile {
        display: flex;
    }

    .checkout-action.desktop {
        display: none;
    }
}

/* 當螢幕寬度大於768px 電腦版 */

@media (min-width: 768px) {
    .card-content .card-content-item {
        flex-direction: row;
    }

    .card-content .reservation-content-wrapper {
        flex-direction: row;
    }

    .checkout-action {
        border: none;
        width: unset;
    }

        .checkout-action .action-item {
            padding: 0px 12px;
            border-top: none;
            border-bottom: none;
        }

    .card-end .btn-width-limit {
        width: 144px;
    }

    .checkout-action.mobile {
        display: none;
    }

    .checkout-action.desktop {
        display: flex;
    }
}

/* 當螢幕寬度大於992px 電腦版 */
/* checkout頁限定，為了「預訂更多房型」按鈕對齊 */
/* @media (min-width: 992px) {
    .card-content.add-order .reservation-content-wrapper .card-wrapper {
        flex: 6;
    }

    .card-content.add-order .reservation-content-wrapper .action-wrapper {
        flex: 2;
    }
} */

/*訂單加購*/
.reservation-content-wrapper .content-wrapper {
    display: flex;
    flex: 6;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.content-wrapper .dialog {
    text-align: start;
    font-weight: 400;
}

.content-wrapper .title {
    font-weight: 600;
    font-size: 1rem;
}

.content-wrapper .info {
    color: var(--color-gray-800);
}

    .content-wrapper .info p {
        margin: 0;
        margin-bottom: 2px;
    }

    .content-wrapper .info ul {
        margin: 0;
        padding-left: 16px;
    }

    .content-wrapper .info li {
        margin-bottom: 2px;
    }

.content-wrapper .route-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

    .content-wrapper .route-wrapper:last-child {
        margin-bottom: 0px;
    }

.content-wrapper .action-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 2;
}

/*折扣碼&金額*/
/* .payment-summary {
    padding: 16px;
    display: flex;
} */

.checkout-price-discount-wrapper {
    display: flex;
    flex-direction: column;
}

    .checkout-price-discount-wrapper .form-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .checkout-price-discount-wrapper button {
        min-width: 70px;
    }

    .checkout-price-discount-wrapper .discount-description {
        padding-left: 16px;
        color: var(--color-gray-800);
    }

@media (min-width: 300px) {
    .checkout-purchase-item-photos-wrapper {
        display: none;
    }
}

@media (min-width: 768px) {
    .checkout-purchase-item-photos-wrapper {
        display: block;
    }
}

/*聯絡資料*/
.passenger-contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 20px;
}

    .passenger-contact-item:last-child {
        border-bottom: 0;
        padding-bottom: 4px;
    }

.checkout-guestname {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .checkout-guestname .title {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-black);
    }

    .checkout-guestname .guest-check-wrapper,
    .room-member-wrapper .guest-check-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
    }

.room-member-wrapper .guest-check-wrapper {
    margin-top: 18px;
}

    .checkout-guestname .guest-check-wrapper .form-check,
    .room-member-wrapper .guest-check-wrapper .form-check {
        margin-top: 0px;
    }

.checkout-guestname .subtitle {
    margin: 0;
    color: var(--color-gray-600);
}

.user-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


@media(min-width:300px) {
    .user-info-wrapper .form-wrapper {
        /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

@media(min-width:768px) {
    .user-info-wrapper .form-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
}

@media(min-width:300px) {

    .user-info-wrapper .form-frame.email,
    .user-info-wrapper .form-frame.phone,
    .user-info-wrapper .form-frame.address {
        grid-column: span 4;
    }
}

@media(min-width:768px) {

    .user-info-wrapper .form-frame.email,
    .user-info-wrapper .form-frame.phone,
    .user-info-wrapper .form-frame.address {
        grid-column: span 2;
    }
}

/* 所有入住人資料以房間分 */
.room-member-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .room-member-wrapper .title {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.6rem;
        color: var(--color-black);
    }

        .room-member-wrapper .title .name {
            font-size: 1rem;
        }

        .room-member-wrapper .title .room-type {
            font-size: 1rem;
            margin-left: 4px;
        }

.register-verify-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--color-primary-light);
    padding: 12px;
    margin-top: 12px;
}

    .register-verify-wrapper .title {
        font-weight: 600;
        margin: 0;
    }

.verify-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

    .verify-wrapper .content {
        margin: 0;
        color: var(--color-gray-800);
    }

    .verify-wrapper .content-point {
        font-weight: 600;
        color: var(--color-primary);
    }

    .verify-wrapper .form-btn-control {
        margin-top: 16px;
    }

    .verify-wrapper .verify-email {
        margin: 0px 8px;
    }

.verify-captcha-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    cursor: pointer;
}

.verify-reload {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    color: var(--color-gray-600);
    font-size: 0.875rem;
    line-height: 1.6rem;
}

    .verify-reload .icon {
        width: 16px;
        padding: 0px;
        filter: invert(50%) sepia(65%) saturate(18%) hue-rotate(12deg) brightness(102%) contrast(87%);
    }

.login-wrapper .verify-img {
    box-sizing: border-box;
    height: 36px;
}


.checkout-arrival-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .checkout-arrival-wrapper .arrivalinfo-title {
        margin: 0;
        font-size: 0.875rem;
    }

.arrivalinfo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrivalinfo-list-item {
    display: flex;
    gap: 4px;
    align-items: start;
    color: var(--color-success);
}

    .arrivalinfo-list-item .icon {
        width: 18px;
    }

.checkout-arrival-wrapper .arrivalinfo-time {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0px 16px;
    align-items: end;
}

.card-top.collapse-btn {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

    .card-top.collapse-btn:hover {
        background-color: var(--color-primary-light);
    }

    .card-top.collapse-btn .collapse-action {
        color: var(--color-primary);
    }

.promotion-cta-wrapper .btn,
.checkout-cta-wrapper .btn {
    min-width: 240px;
}

.checkout-payment-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

    .checkout-payment-wrapper .ui-corner-all {
        display: block;
    }

    .checkout-payment-wrapper .form-check-btn .ui-button {
        padding: 12px 20px;
    }

/*checkout page_end*/


/* 住宿券及專案代碼訂房 */
.package-wrapper .card-wrapper {
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
}

.info-text {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .info-text p {
        margin: 0;
    }

/* 住宿券及專案代碼訂房-end */


/* homepage start */
.home-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

    .home-wrapper > .title {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--color-black);
        margin-bottom: 2rem;
    }

.item {
    position: relative;
}

    .product-wrapper .card-wrapper .share-btn,
    .card-stand:has(.share-btn) .share-btn,
    .item .share-btn {
        position: absolute;
        right: 0px;
        top: 0px;
        padding: 8px;
        cursor: pointer;
    }

@media(min-width:768px) {
    .product-wrapper .card-wrapper .share-btn {
        position: absolute;
        left: 0px;
        top: 0px;
    }
}

.card-photos-wrapper .share-btn .icon {
    width: 1.5rem;
}

.panel-btn-wrapper {
    display: flex;
    gap: 8px;
}

.panel-btn {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 2px;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    cursor: pointer;
}

    .panel-btn img {
        width: 1.25rem;
    }

.ad-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
}

.ad-pc {
    width: 100%;
    aspect-ratio: 6.85/1;
    object-fit: cover;
}

.ad-mb {
    width: 100%;
    /* aspect-ratio: 5/3; */
    object-fit: cover;
}

.featured-grid-wrapper,
.facility-grid-wrapper {
    display: grid;
    align-items: start;
}

.featured-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    background-color: var(--color-white);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
}

.featured-body {
    display: flex;
    gap: 8px;
    padding: 12px;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.featured-card .title {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.featured-card .icon {
    transform: rotate(-90deg);
    width: 0.75rem !important;
}

.viewed-title .icon {
    width: 1.375rem !important;
}

.featured-cover {
    aspect-ratio: 5/3;
    object-fit: cover;
}

.facility-section .caption .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 5em;
}

.facility-section .card-wrapper,
.facility-grid-wrapper .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.facility-section .card-body,
.facility-grid-wrapper .card-body {
    gap: 4px;
}

.facility-section .card-title,
.facility-grid-wrapper .card-title {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

.facility-grid-wrapper .caption {
    gap: 2px;
}

    .facility-grid-wrapper .caption .label .icon {
        width: 0.875rem;
    }

.facility-grid-wrapper .package-text-content {
    font-size: 0.875rem;
    line-height: 128%;
}


.project-grid-wrapper {
    display: grid;
}


.viewed-card {
    display: flex;
    background-color: var(--color-white);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    height: 100px;
}

.viewed-photos-wrapper {
    display: flex;
    width: 40%;
}

.viewed-photo {
    object-fit: cover;
}

.viewed-title {
    display: flex;
    flex: 7;
    gap: 4px;
    padding: 24px 48px 20px 12px;
}

    .viewed-title .title {
        display: flex;
        align-items: start;
    }

    .viewed-title p {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


@media(min-width:300px) {
    .panel-btn-wrapper {
        padding-top: 12px;
    }

    .panel-btn {
        flex-direction: column;
    }

    .ad-pc {
        display: none;
    }

    .ad-mb {
        display: block;
    }

    .featured-grid-wrapper,
    .facility-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .project-grid-wrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

@media(min-width:768px) {
    .panel-btn-wrapper {
        padding-top: 16px;
    }

    .panel-btn {
        flex-direction: row;
    }

    .ad-pc {
        display: block;
    }

    .ad-mb {
        display: none;
    }

    .featured-grid-wrapper,
    .facility-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

        /* 當列表-精選專案及列表-設施數量可被3整除時，套用repeat-3 */
        .featured-grid-wrapper.repeat-3,
        .facility-grid-wrapper.repeat-3 {
            grid-template-columns: repeat(3, 1fr);
        }

    .project-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media(min-width:1024px) {
    .project-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* news 最新消息公告 */
.news-list-wrapper {
    display: flex;
    flex-direction: column;
}

    /* 列表List */
    .news-list-wrapper .news {
        display: flex;
        justify-content: space-between;
        padding: 16px 0px;
        border-bottom: solid 1px var(--color-gray-400);
    }

    .news-list-wrapper a {
        color: var(--color-gray-800);
    }

    .news-list-wrapper .news:first-child {
        padding: 0px 0px 16px 0px;
        padding-top: 0px;
    }

    .news-list-wrapper .news .article {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .news-list-wrapper .news .title {
        font-weight: 500;
        font-size: initial;
        color: var(--color-gray-900);
    }

    .news-list-wrapper .news .content,
    .news-list-wrapper .news p {
        font-size: 0.875rem;
        color: var(--color-gray-800);
        margin: 0;
    }

    .news-list-wrapper .ellipsis p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .news-list-wrapper .news ol {
        padding-left: 20px;
        color: var(--color-gray-800);
    }

    .news-list-wrapper .news .time {
        font-size: 0.875rem;
        color: var(--color-gray-600);
    }

    .news-list-wrapper .news .icon {
        width: 0.75rem;
        height: 0.75rem;
        transform: rotate(-90deg);
    }

    .news-list-wrapper .news:hover {
        background-color: var(--color-gray-light);
    }

@media(min-width:300px) {
    .news-list-wrapper .news {
        align-items: flex-end;
    }
}

@media(min-width:768px) {
    .news-list-wrapper .news {
        align-items: center;
    }
}

/* modal公告不加區隔線 */
.modal-dialog .news-list-wrapper .news {
    border-bottom: none;
    padding-bottom: 0;
}

    .modal-dialog .news-list-wrapper .news:hover {
        background-color: unset;
    }

/* modal公告內容不隱藏 */
.modal-dialog .news .content {
    overflow: unset;
    text-overflow: unset;
    display: block;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
}

/* hotel information Google商家 */
.information-wrapper {
    display: flex;
    gap: 28px;
    padding: 12px;
    background-color: var(--color-white);
}

    /* .information-wrapper:not(:has(.point-wrapper)) .content {
    padding: 24px;
} */

    .information-wrapper .point-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: 2;
    }

        .information-wrapper .point-wrapper .number {
            display: flex;
            gap: 6px;
            align-items: baseline;
        }

            .information-wrapper .point-wrapper .number .point {
                font-size: 2.5rem;
                font-weight: 500;
                line-height: initial;
            }

            .information-wrapper .point-wrapper .number .full-point {
                font-size: 0.875rem;
                color: var(--color-gray-600);
                white-space: nowrap;
            }

    .information-wrapper .star {
        position: relative;
        vertical-align: middle;
        display: inline-block;
        color: var(--color-gray-300);
        /*背景星星顏色*/
        overflow: hidden;
        font-size: 0.875rem;
        /*調整字體大小可放大縮小星星*/
        width: fit-content;
    }

    .information-wrapper .full-star {
        width: 82%;
        /*調整寬度可變更星等*/
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: hidden;
        color: #EDC252;
        /*前景星星顏色*/
    }

    .information-wrapper .point-wrapper .remark {
        font-size: 0.75rem;
        color: var(--color-gray-600);
    }

    .information-wrapper .content {
        display: flex;
        flex-direction: column;
    }

        .information-wrapper .content .facility,
        .information-wrapper .content .service {
            display: flex;
            align-items: center;
            gap: 12px;
        }

            .information-wrapper .content .facility .title,
            .information-wrapper .content .service .title {
                font-size: 0.875rem;
                font-weight: 500;
                white-space: nowrap;
            }

                .information-wrapper .content .facility .title .icon,
                .information-wrapper .content .service .title .icon {
                    width: 1rem;
                }

            .information-wrapper .content .facility .item-wrapper,
            .information-wrapper .content .service .item-wrapper {
                gap: 8px 12px;
            }

    .information-wrapper .item-wrapper .tag.tag-third {
        padding: 0 2px;
        margin-left: 2px;
    }

    .information-wrapper .link {
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
        white-space: nowrap;
        text-align: center;
        font-size: 0.75rem;
        flex: 1;
    }

@media(min-width:300px) {
    .information-wrapper {
        flex-direction: column;
        padding: 20px;
    }

        .information-wrapper .point-wrapper {
            padding-right: none;
            border-right: none;
        }

        .information-wrapper .content {
            gap: 12px;
            /* padding-left: none;
        border-left: none; */
            width: 100%;
        }

            .information-wrapper .content .facility,
            .information-wrapper .content .service {
                justify-content: center;
            }

            .information-wrapper .content .facility {
                padding: 0px 0px 12px 0px;
                border-bottom: solid 1px var(--color-gray-300);
            }

                .information-wrapper .content .facility .title,
                .information-wrapper .content .service .title {
                    display: none;
                }

        .information-wrapper .point-wrapper .number .point {
            font-size: 2rem;
        }

        .information-wrapper .point-wrapper .number .full-point {
            font-size: 0.875rem;
        }

        .information-wrapper .point-wrapper .remark {
            display: none;
        }

        .information-wrapper .content .facility .item-wrapper,
        .information-wrapper .content .service .item-wrapper {
            display: grid;
            align-items: start;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
            padding-left: 12px;
        }

        .information-wrapper .content .facility .content-tag,
        .information-wrapper .content .service .content-tag {
            margin-left: 8%;
        }
}

@media(min-width:768px) {
    .information-wrapper {
        flex-direction: row;
        align-items: center;
        /* padding: 12px; */
    }

        .information-wrapper .point-wrapper {
            /* padding-right: 20px; */
            border-right: solid 1px var(--color-gray-300);
        }

        .information-wrapper .content {
            gap: 12px;
            flex: 10;
            /* padding-left: 12px; */
        }

            .information-wrapper .content .facility,
            .information-wrapper .content .service {
                justify-content: flex-start;
            }

            .information-wrapper .content .facility {
                padding: 0px;
                border-bottom: none;
            }

                .information-wrapper .content .facility .title,
                .information-wrapper .content .service .title {
                    display: flex;
                    gap: 4px;
                }

        .information-wrapper .point-wrapper .number .point {
            font-size: 2.5rem;
        }

        .information-wrapper .point-wrapper .number .full-point {
            font-size: 0.875rem;
        }

        .information-wrapper .point-wrapper .remark {
            display: flex;
        }

        .information-wrapper .content .facility .item-wrapper,
        .information-wrapper .content .service .item-wrapper {
            display: flex;
            flex-wrap: wrap;
            text-wrap: balance;
        }

        .information-wrapper .content .facility .content-tag,
        .information-wrapper .content .service .content-tag {
            margin-left: 0;
        }
}


/* homepage end */

/* footer */
.location select {
    background-image: url(https://cdn.gobooking.com.tw/Hotel/img/icon_location.svg) !important;
    background-size: 16px auto;
    background-position: bottom 52% left 12px;
    border-radius: 100px;
    padding: 4px 16px 4px 32px;
    height: auto;
    width: fit-content;
}

.footer {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-head {
    display: grid;
    gap: 28px 12px;
    justify-items: center;
    align-items: center;
    padding: 36px 0px;
}

.footer .brand-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer .logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.footer .brand {
    width: 150px;
    height: auto;
    cursor: pointer;
}

.footer .social-media {
    display: flex;
    justify-content: center;
    gap: 4px;
}

    .footer .social-media .icon {
        width: 32px;
        padding: 6px;
    }

.footer .infos-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0px;
    gap: 12px 28px;
    height: fit-content;
    width: 100%;
}

.footer .infos {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    margin: 0px;
    height: fit-content;
    gap: 12px;
    order: 3;
    width: unset;
    flex: 1;
}

    .footer .infos .infos-item {
        display: flex;
        align-items: flex-start;
        font-size: 0.875rem;
        word-break: break-all;
        gap: 12px;
        color: var(--color-black);
    }

    .footer .infos .icon {
        width: auto;
        height: auto;
        padding: 2px 0px;
    }

.footer .optional {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    width: min-content;
    order: 5;
}

.footer .YOTOR {
    display: flex;
    width: 100%;
    font-size: 0.875rem;
    text-align: center;
    padding: 28px 0px;
    box-shadow: 0px -1px 0px var(--color-gray-300);
}

@media(min-width:300px) {
    .footer {
        /* padding: 24px 0px 0px; */
        gap: 24px;
    }

    .footer-head {
        grid-template-rows: 1fr;
    }

    .footer .YOTOR {
        flex-direction: column;
    }
}

@media(min-width:768px) {
    .footer {
        gap: 20px;
    }

    .footer-head {
        grid-template-columns: 1fr 3fr;
    }

    .footer .YOTOR {
        flex-direction: row;
        gap: 12px;
        justify-content: center;
    }
}

/* cookie */
.cookie {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    color: var(--color-white);
    background: rgba(45, 45, 45, 0.85);
    width: 100%;
    z-index: 9;
}

    .cookie .content {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        padding: 20px 0px;
        gap: 12px;
    }

    .cookie .cookie-policy {
        text-wrap: balance;
        margin: 0;
    }

    .cookie a {
        color: var(--color-white);
    }

@media(min-width:300px) {
    .cookie .content {
        flex-direction: column;
    }
}

@media(min-width:768px) {
    .cookie .content {
        flex-direction: row;
    }
}

/* 設施圖片zoom-in效果 */
@media(min-width:300px) {
    .grid-1-2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }
}

@media(min-width:768px) {
    .grid-1-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.zoom-in {
    position: relative;
    aspect-ratio: 5/3;
    overflow: hidden;
    outline: 1px solid transparent;
    display: flex;
    flex-direction: column;
    place-content: center;
}

    .zoom-in > :is(h5, p) {
        display: block;
        opacity: 0;
        transition: .5s;
        color: var(--color-white);
        text-align: center;
        padding: 0px 7%;
        margin: 1;
        z-index: 1;
    }

.zoom-in-img {
    position: absolute;
    width: 100%;
    object-fit: cover;
    transition: .5s;
}

/* hover */
.zoom-in:hover {
    outline: 2px solid var(--color-white);
    outline-offset: -12px;
}

    .zoom-in:hover > :is(h5, p) {
        opacity: 1;
    }

    .zoom-in:hover > .zoom-in-img {
        transform: scale(1.1);
        filter: brightness(0.4);
    }

/* facility-page */
.facility-item {
    display: flex;
    width: 100%;
    color: var(--color-gray-900);
    border-top: 1px solid var(--color-gray-400);
}

    .facility-item .photo {
        aspect-ratio: 5/3;
        order: 1;
        flex: 2;
    }

    .facility-item .about {
        display: flex;
        flex-direction: column;
        width: 100%;
        order: 2;
        flex: 3;
    }

    .facility-item .title {
        font-weight: 500;
        color: var(--color-black);
    }

    .facility-item ul {
        padding: 0px 24px;
        margin: 0;
    }

    .facility-item li {
        padding: 2px 0;
    }

@media(min-width:300px) {
    .facility-item {
        flex-direction: column;
        gap: 4px;
        padding-top: 24px;
        margin-top: 32px;
    }

        .facility-item .photo {
            width: 100%;
        }

        .facility-item .about {
            padding: 0;
        }

        .facility-item .title {
            font-size: 1rem;
            margin: 12px 2px;
        }

        .facility-item p,
        .facility-item ul {
            font-size: 0.75rem;
            margin: 2px;
        }
}

@media(min-width:768px) {
    .facility-item {
        width: 100%;
        flex-direction: row;
        gap: 0px;
        padding-top: 48px;
        margin-top: 48px;
    }

        .facility-item .photo {
            width: 40%;
            /* padding: 0px 20px; */
        }

        .facility-item .about {
            padding: 0px 24px;
        }

        .facility-item:nth-child(odd) .photo {
            order: 2;
        }

        .facility-item:nth-child(odd) .about {
            order: 1;
        }

        .facility-item .title {
            font-size: 1.125rem;
            margin: 8px;
        }

        .facility-item p,
        .facility-item ul {
            font-size: 0.875rem;
            margin: 4px 8px;
        }
}

/* Member */
/* 左右layout */
.nav-row-layout {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.row-wrapper {
    display: flex;
    flex: 8;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* 左右layout_end */

.member-nav-wrapper {
    position: sticky;
    left: 0;
    min-width: 148px;
    height: fit-content;
    box-shadow: var(--color-shadow-primary);
}

    .member-nav-wrapper > div {
        width: 100%;
    }

.member-nav {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* min-width: 132px;
    max-width: 188px; */
}

    .member-nav li,
    .member-nav a {
        display: flex;
        gap: 8px;
        font-weight: 400;
    }

    .member-nav li {
        align-items: center;
        background-color: var(--color-white);
    }

    .member-nav a {
        color: var(--color-gray-800);
        width: 100%;
    }

    .member-nav .icon {
        width: 16px;
    }

.member-nav-item span {
    white-space: nowrap;
}

.member-nav .member-nav-item:hover,
.member-nav .member-nav-item:active,
.member-nav .member-nav-item.active {
    background-color: var(--color-gray-light);
    color: var(--color-primary-dark);
    font-weight: 500;
    cursor: pointer;
}

    .member-nav .member-nav-item:hover span,
    .member-nav .member-nav-item:active span,
    .member-nav .member-nav-item.active span {
        color: var(--color-primary);
        font-weight: 500;
    }

/* mobile only 像tab的navigation bar */
.member-nav-wrapper.mb-top {
    background-color: var(--color-white);
    box-shadow: var(--color-shadow-primary);
    z-index: 1;
}

    .member-nav-wrapper.mb-top li:hover,
    .member-nav-wrapper.mb-top li:active,
    .member-nav-wrapper.mb-top li.active {
        border-bottom: 1px solid var(--color-primary-dark);
    }

.member-nav .user {
    border-bottom: solid 1px var(--color-gray-300);
}

.member-nav .logout {
    justify-content: center;
    border-top: solid 1px var(--color-gray-300);
}

    .member-nav .logout a {
        justify-content: center;
    }


@media(min-width:300px) {
    .member-nav-wrapper.mb-top {
        top: 0px;
    }

    .nav-row-layout {
        flex-direction: column;
    }

    .member-nav-wrapper {
        display: none;
    }

    .member-nav {
        flex-direction: row;
    }

        .member-nav a {
            padding: 14px 16px;
        }

    .member-nav-wrapper.mb-top {
        display: flex;
        overflow-x: auto;
    }

        .member-nav-wrapper.mb-top .icon,
        .member-nav-wrapper.mb-top .user,
        .member-nav-wrapper.mb-top .logout {
            display: none;
        }
}

@media(min-width:768px) {
    .nav-row-layout {
        flex-direction: row;
    }

    .member-nav-wrapper {
        display: flex;
        flex: 2;
        top: 20px;
    }

    .member-nav {
        flex-direction: column;
        width: 100%;
    }

        .member-nav a,
        .member-nav .user {
            padding: 20px 16px;
        }

    .member-nav-wrapper.mb-top {
        display: none;
    }

    .member-nav .icon,
    .member-nav .user,
    .member-nav .logout {
        display: flex;
    }
}

.member-info .form-control:disabled {
    border: none;
    background-color: var(--color-gray-light);
}

.member-info-part {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px var(--color-gray-300);
}

    .member-info-part:last-child {
        padding-bottom: 0px;
        border-bottom: none;
    }

    .member-info-part .title-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .member-info-part .title {
        font-size: 0.875rem;
        font-weight: 500;
        margin: 0;
    }


    .member-info-part input:read-only,
    .login-wrapper input:read-only,
    .member-info-part .form-control[readonly]:focus,
    .login-wrapper .form-control[readonly]:focus {
        background-color: var(--color-gray-light);
        color: var(--color-gray-700);
        border: none;
        cursor: unset;
    }

    .member-info-part .form-control[readonly]::placeholder,
    .login-wrapper .form-control[readonly]::placeholder {
        color: var(--color-gray-700);
    }

    .member-info-part .action-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

        .member-info-part .action-wrapper .btn {
            width: 100%;
            max-width: 354px;
        }

.third-party-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.third-party {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: solid 1px var(--color-gray-300);
    cursor: pointer;
}

    .third-party .brand {
        display: flex;
        gap: 16px;
    }

    .third-party .logo {
        width: 28px;
    }

    .third-party .caption {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }

    .third-party .brand-name {
        font-size: 1rem;
        color: var(--color-gray-900);
    }

    .third-party .linked-info {
        word-break: break-all;
        color: var(--color-gray-600);
    }

    .third-party .unlinked {
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
        font-size: 0.875rem;
    }

.member-delete p {
    margin: 0;
}

.member-delete .btn {
    max-width: 120px;
}

.user-info-wrapper .verify-state {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 訂房記錄 start */
.booking-record-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--color-gray-light);
}

.booking-record {
    display: grid;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
}

.record-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    gap: 12px;
}

.record-list-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

    .record-list-item.order {
        grid-column: span 2;
    }

    .record-list-item .title {
        color: var(--color-gray-800);
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .record-list-item p {
        margin: 0;
        word-break: break-all;
        font-size: 0.875rem;
    }

.record-action {
    display: flex;
}

    .record-action .open-page,
    .record-action .action {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .record-action a {
        white-space: nowrap;
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
    }

    .record-action .link.more {
        text-align: end;
        color: var(--color-gray-800);
    }

    .record-action .link.cancel,
    .record-action .link.THSR {
        color: var(--color-primary);
    }


/* 訂房記錄 (詳細)  */
.card-content.booking-detail .booking-record-wrapper {
    background-color: unset;
}

.card-content.booking-detail .booking-record {
    padding-right: 0;
}

.recommend-wrapper .title {
    color: var(--color-gray-800);
}

.recommend-link {
    grid-column: span 2;
    text-align: end;
}

.wishlist-wrapper .expired {
    opacity: 0.7;
    filter: grayscale(100%);
}

/* 會員條款 */
/* 確認頁入住須知 */
.terms-wrapper {
    color: var(--color-gray-900);
}

    .terms-wrapper .title {
        text-align: center;
        color: var(--color-black);
    }

    .terms-wrapper .content {
        margin: 0 0 12px 0;
    }

        .terms-wrapper .content p,
        .terms-wrapper .content ul {
            margin: 0;
        }

@media(min-width:300px) {
    .booking-record-wrapper {
        flex-direction: column;
    }

    .booking-record {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 8px;
    }

    .card-content.booking-detail .booking-record {
        padding: 8px 0px;
    }

    .record-list {
        display: flex;
        flex-direction: column;
    }

    .record-action {
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 12px;
        flex-grow: 1;
    }

        .record-action .open-page,
        .record-action .action {
            width: 100%;
        }

        .record-action .action {
            justify-content: flex-start;
        }

    .recommend-wrapper .list,
    .wishlist-wrapper .list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

/* 原本是800px */
@media(min-width:768px) {
    .booking-record-wrapper {
        flex-direction: row;
    }

    .booking-record {
        display: grid;
        grid-template-columns: 8fr 2fr;
        gap: 16px;
        padding: 8px 12px;
    }

    .card-content.booking-detail .booking-record {
        display: flex;
        flex-direction: row;
        padding: 8px 0px 8px 12px;
    }

    .record-list {
        display: grid;
        align-items: start;
    }

    .record-action {
        flex-direction: column;
        gap: 16px;
        height: 100%;
        align-content: space-between;
        width: unset;
    }

        .record-action .open-page,
        .record-action .action {
            justify-content: flex-end;
        }

    .recommend-wrapper .list,
    .wishlist-wrapper .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* 訂單狀態 */
.booking-state {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    align-self: stretch;
    gap: 4px;
}

    .booking-state .icon {
        width: 16px;
    }

    .booking-state .state {
        white-space: nowrap;
        line-height: initial;
    }

    .booking-state.confirmed {
        background-color: var(--color-success-light);
        color: var(--color-success);
        border-left: 1px solid var(--color-success-200);
    }

    .booking-state.confirming {
        background-color: var(--color-warning-light);
        color: var(--color-warning);
        border-left: 1px solid var(--color-warning-200);
    }

    .booking-state.cancel {
        background-color: var(--color-gray-300);
        color: var(--color-gray-800);
        border-left: 1px solid var(--color-gray-800);
    }

@media(min-width:300px) {
    .booking-state {
        padding: 4px 8px;
        justify-content: flex-start;
    }
}

/* 原本是800px */
@media(min-width:768px) {
    .booking-state {
        padding: 6px;
        justify-content: center;
    }
}

/* 訂單狀態 end  */
/* 訂單記錄 end */


/* login */
.login-frame {
    display: flex;
    justify-content: center;
}

.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 24px;
    background-color: var(--color-white);
    max-width: 380px;
    width: 100%;
    box-shadow: var(--color-shadow-primary);
}

    .login-wrapper .title {
        display: flex;
        gap: 6px;
    }

        .login-wrapper .title .icon {
            width: 22px;
        }

    .login-wrapper .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
        text-align: center;
    }

    .login-wrapper .form-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .login-wrapper .form-label {
        display: flex;
    }

    .login-wrapper .action-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
    }

        .login-wrapper .action-wrapper .form-check-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .login-wrapper .action-wrapper .form-check {
            width: 100%;
            text-align: initial;
        }

    .login-wrapper .btn {
        width: 100%;
    }

    .login-wrapper .btn-small {
        width: initial;
    }

    .login-wrapper .verify-wrapper,
    .member-info-part .verify-wrapper {
        justify-content: center;
    }

.action-wrapper .secondary-option {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.login-wrapper .email-check .form-control::placeholder {
    text-align: center;
}

.login-wrapper .link,
.member-info .link {
    text-decoration: underline;
    /* 和字之間距離 */
    text-underline-offset: 2.4px;
    /* 底線粗細 */
    text-decoration-thickness: 1.2px;
}

.action-wrapper .link.another {
    color: var(--color-gray-600);
}

.link.email-reset {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.login-wrapper .third-party-wrapper {
    display: flex;
    gap: 20px;
}

.login-wrapper .third-party {
    padding: 16px;
    border: solid 1px var(--color-gray-300);
    width: 24px;
    height: 24px;
}

.login-wrapper .text-divider {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    width: 100%;
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: var(--color-gray-300);
    flex-grow: 1;
}

.text-divider::before {
    margin-right: 16px;
}

.text-divider::after {
    margin-left: 16px;
}

.login-wrapper .dialog {
    width: -webkit-fill-available;
    text-align: center;
}

.login-wrapper .links-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .login-wrapper .links-wrapper span {
        text-decoration: underline;
        /* 和字之間距離 */
        text-underline-offset: 2.4px;
        /* 底線粗細 */
        text-decoration-thickness: 1.2px;
        font-size: 0.875rem;
        color: var(--color-gray-800);
    }

/* 確認頁 */
.reservation-status-wrapper .title {
    display: flex;
    justify-content: center;
    gap: 4px;
    color: var(--color-success);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: normal;
}

    .reservation-status-wrapper .title.cancelled {
        color: var(--color-black);
    }

.reservation-status-wrapper .banner {
    display: flex;
    aspect-ratio: 5/2;
    object-fit: cover;
    max-height: 180px;
}

.reservation-status-wrapper .title .icon {
    width: 1.75rem;
}

.reservation-status-wrapper .inform {
    font-size: 1rem;
    color: var(--color-gray-800);
    margin: 0px;
}

    .reservation-status-wrapper .inform .order-number {
        color: var(--color-black);
        font-weight: 500;
        margin-left: 4px;
    }

    .reservation-status-wrapper .inform .hotel-name {
        color: var(--color-primary);
        margin-left: 4px;
    }

/* 抵達/checkin out時間 */
.checkin-out-wrapper {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid var(--color-gray-300);
}

    .checkin-out-wrapper .arrival-wrapper,
    .checkin-out-wrapper .checkout-wrapper,
    .checkin-out-wrapper .checkin-wrapper {
        display: flex;
        width: 100%;
    }

    .checkin-out-wrapper .title {
        margin: 0;
        font-size: 0.75rem;
        color: var(--color-gray-800);
    }

    .checkin-out-wrapper .content {
        margin: 0;
        font-size: 0.875rem;
    }

@media(min-width:300px) {
    .checkin-out-wrapper {
        flex-direction: column;
        gap: 4px;
    }

        .checkin-out-wrapper .arrival-wrapper,
        .checkin-out-wrapper .checkout-wrapper,
        .checkin-out-wrapper .checkin-wrapper {
            flex-direction: row;
            gap: 8px;
        }
}

@media(min-width:768px) {
    .checkin-out-wrapper {
        flex-direction: row;
        gap: 0;
    }

        .checkin-out-wrapper .arrival-wrapper,
        .checkin-out-wrapper .checkout-wrapper,
        .checkin-out-wrapper .checkin-wrapper {
            gap: 8px;
            justify-content: center;
        }
}

/* 取消訂房 */

/* 訂單狀態-new */
.reserve-status.success .card-top {
    color: var(--color-success);
    background-color: var(--color-success-light);
    border-bottom: none;
}

.reserve-status.waiting .card-top {
    color: var(--color-warning);
    background-color: var(--color-warning-light);
    border-bottom: none;
}

.reserve-status.cancel .card-top {
    color: var(--color-gray-800);
    background-color: var(--color-gray-300);
    border-bottom: none;
}

.card-top:has(.record-action) {
    justify-content: space-between;
}

.reserve-status .record-list-item {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2px 8px;
}


.cancel-notice .terms {
    color: var(--color-gray-900);
    padding: 0px 20px;
    margin: 8px 0px;
}

    .cancel-notice .terms li {
        margin-bottom: 6px;
    }

    .cancel-notice .terms .cancel-policy {
        color: var(--color-black);
        font-weight: 600;
    }

.cancel-notice-action {
    display: flex;
    justify-content: center;
    padding: 4px 0px 0px 0px;
    border-top: 1px solid var(--color-gray-300);
}

.reserve-info-wrapper .list {
    display: grid;
    gap: 12px 40px;
    list-style-type: none;
    margin: 0;
    padding: 16px 0 0 0;
    border-top: solid 1px var(--color-gray-300);
}

    .reserve-info-wrapper .list:first-child {
        padding: 0;
        border-top: none;
    }



    .reserve-info-wrapper .list .item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 4px;
        color: var(--color-black);
    }


    .reserve-info-wrapper .list .title {
        color: var(--color-black);
        font-size: 1rem;
    }

    .reserve-info-wrapper .list .content {
        font-size: 1rem;
        font-weight: initial;
        overflow-wrap: anywhere;
    }

    .reserve-info-wrapper .list.order-info .order-number {
        color: var(--color-primary);
        font-weight: 500;
    }


.promotion-cta-wrapper,
.checkout-cta-wrapper,
.member-cta-wrapper {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .member-cta-wrapper .btn {
        width: 100%;
        min-width: unset;
        max-width: 180px;
    }

@media(min-width:300px) {
    .reserve-info-wrapper .list {
        grid-template-rows: unset;
    }
}

@media(min-width:768px) {
    .reserve-info-wrapper .list {
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width:768px) {
    .cancel-page-wrapper .record-list {
        display: flex;
        flex-direction: row;
    }
}

/* 刪除帳戶 */
.accountdele-page-wrapper .custom-check-label {
    font-size: 1rem;
}

.accountdele-page-wrapper .subtitle {
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
}

.accountdele-page-wrapper .content {
    font-size: 0.875rem;
    color: var(--color-gray-800);
    text-align: center;
}

/* 高鐵票 THSR */
.THSR-outbound,
.THSR-inbound {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .THSR-outbound .subtitle,
    .THSR-inbound .subtitle {
        font-weight: 500;
    }

/* 可訂購日期表格 */
.THSR-booking-date-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: solid 1px var(--color-danger-200);
}

    /* .THSR-booking-date-table .departure,
.THSR-booking-date-table .buy-ticket {
    display: flex;
    flex-direction: column;
    width: 100%;
} */

    .THSR-booking-date-table .title,
    .THSR-booking-date-table .date {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 2px;
        box-shadow: 0 0 0 0.5px var(--color-danger-200);
    }

.dialog.THSR {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.THSR-content .info {
    margin: 0;
    padding-left: 16px;
    color: var(--color-gray-900);
}

    .THSR-content .info li {
        margin-bottom: 2px;
    }

.THSR-ticket {
    border: solid 1px var(--color-gray-300);
}

    .THSR-ticket .top {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        color: var(--color-white);
    }

    /* 尚未劃位 */
    /* .THSR-ticket.reserv .top {
    background-color: var(--color-warning);
} */

    /* 新增高鐵票 */
    .THSR-ticket.add .top {
        background-color: var(--color-info);
    }

    /* 劃位成功 */
    .THSR-ticket.success .top {
        background-color: var(--color-success);
    }

    /* 劃位失敗 */
    .THSR-ticket.failed .top {
        background-color: var(--color-danger);
    }

    /* 劃位已取消 */
    .THSR-ticket.cancelled .top {
        background-color: var(--color-gray-600);
    }

    .THSR-ticket .action-wrapper {
        flex-direction: row;
        justify-content: flex-end;
        gap: 4px;
    }

        .THSR-ticket .action-wrapper .btn {
            width: fit-content;
            padding: 4px 6px;
            color: var(--color-white);
            border: solid 1px var(--color-white);
        }

        .THSR-ticket .action-wrapper .icon {
            width: 0.875rem;
        }

    .THSR-ticket .code-info-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        border-bottom: solid 1px var(--color-gray-300);
    }

    .THSR-ticket .info-code .number {
        font-weight: 500;
        margin-left: 4px;
    }

    .THSR-ticket .content {
        display: grid;
    }

    .THSR-ticket .from-to {
        gap: 28px;
    }

    .THSR-ticket .seat-reserv {
        gap: 16px;
    }

    .THSR-ticket .from-to,
    .THSR-ticket .seat-reserv {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .THSR-ticket .depart-date,
    .THSR-ticket .return-date {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .THSR-ticket .date {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1rem;
    }

    .THSR-ticket .tag {
        width: fit-content;
        white-space: nowrap;
    }

    .THSR-ticket .station {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

        .THSR-ticket .station .departure,
        .THSR-ticket .station .arrival {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .THSR-ticket .station .train-no {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.75rem;
        }

        .THSR-ticket .station .stop {
            font-size: 0.875rem;
        }

        .THSR-ticket .station .time {
            font-weight: 500;
            font-size: 1.125rem;
        }

.train-no .icon {
    width: 28px;
}

.THSR-ticket .seat-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

    .THSR-ticket .seat-info .trip,
    .THSR-ticket .seat-info .ticket,
    .THSR-ticket .seat-info .fare,
    .THSR-ticket .seat-info .seat {
        display: grid;
        grid-auto-flow: column;
        justify-content: left;
        white-space: nowrap;
        gap: 16px;
        grid-template-columns: 60px 100px 1fr;
    }

    .THSR-ticket .seat-info .title {
        font-size: 0.75rem;
        color: var(--color-gray-800);
    }

    .THSR-ticket .seat-info .price {
        font-size: inherit;
    }

        .THSR-ticket .seat-info .price .tag {
            font-size: 0.75rem;
            font-weight: 400;
            padding: 0px 4px;
        }

@media(min-width:300px) {
    .THSR-ticket .top {
        gap: 8px;
    }

    .THSR-ticket .content {
        grid-template-rows: unset;
        grid-template-columns: unset;
        padding: 16px 12px;
    }

    .THSR-ticket .from-to {
        padding: 0 0 20px 0;
        border-right: none;
        border-bottom: solid 1px var(--color-gray-300);
    }

    .THSR-ticket .seat-reserv {
        padding: 20px 0 0 0;
    }

    .THSR-ticket .seat-info .trip,
    .THSR-ticket .seat-info .ticket,
    .THSR-ticket .seat-info .fare,
    .THSR-ticket .seat-info .seat {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        white-space: nowrap;
        gap: 16px;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(min-width:768px) {
    .THSR-ticket .top {
        flex-direction: row;
        align-items: center;
    }

    .THSR-ticket .content {
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr;
        padding: 16px 12px;
    }

    .THSR-ticket .from-to {
        padding: 0 20px 0 0;
        border-right: solid 1px var(--color-gray-300);
        border-bottom: none;
    }

    .THSR-ticket .seat-reserv {
        padding: 0 0 0 20px;
    }

    .THSR-ticket .seat-info .trip,
    .THSR-ticket .seat-info .ticket,
    .THSR-ticket .seat-info .fare,
    .THSR-ticket .seat-info .seat {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        white-space: nowrap;
        gap: 16px;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* 避免高鐵票造成破版 單獨設rwd */
@media(min-width:300px) {
    .row-wrapper .THSR-ticket .top {
        flex-direction: column;
        gap: 8px;
    }

    .row-wrapper .THSR-ticket .content {
        grid-template-rows: 1fr 0fr;
        grid-template-columns: unset;
        padding: 16px 12px;
    }

    .row-wrapper .THSR-ticket .from-to {
        padding: 0 0 20px 0;
        border-right: none;
        border-bottom: solid 1px var(--color-gray-300);
    }

    .row-wrapper .THSR-ticket .seat-reserv {
        padding: 20px 0 0 0;
    }
}

@media(min-width:992px) {
    .row-wrapper .THSR-ticket .top {
        flex-direction: row;
        align-items: center;
    }

    .row-wrapper .THSR-ticket .content {
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr;
        padding: 16px 12px;
    }

    .row-wrapper .THSR-ticket .from-to {
        padding: 0 20px 0 0;
        border-right: solid 1px var(--color-gray-300);
        border-bottom: none;
    }

    .row-wrapper .THSR-ticket .seat-reserv {
        padding: 0 0 0 20px;
    }
}

/* Promotion 促銷活動頁 */
.promotion-hero-banner-wrapper {
    width: 100%;
    max-height: 600px;
    overflow: hidden;
}

    .promotion-hero-banner-wrapper img {
        aspect-ratio: 16/5;
        object-fit: cover;
        object-position: center;
    }

.promotion-rule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-gray-800);
    line-height: initial;
}

.promotion-title-wrapper {
    display: flex;
    justify-content: space-between;
}

.promotion-rule .title {
    font-weight: 500;
    color: var(--color-black);
}

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

.promotion-content {
    margin: 0px;
}

.promotion-package-wrapper {
    display: flex;
    flex-direction: column;
}

.promotion-title {
    font-size: 1.25rem;
    font-weight: 500;
}


@media(min-width:300px) {
    .promotion-package-wrapper {
        gap: 16px;
    }

    .promotion-rule .title {
        font-size: 1.5rem;
    }
}

@media(min-width:768px) {
    .promotion-package-wrapper {
        gap: 20px;
    }

    .promotion-rule .title {
        font-size: 1.75rem;
    }
}


/* 限時優惠倒數 */
.countdown-wrapper {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(90deg, #F83333 17.42%, rgba(243, 74, 74, 0.71) 67.02%, rgba(243, 74, 74, 0.69) 100.96%);
}

    .countdown-wrapper .title {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--color-white);
        font-weight: 500;
    }

    .countdown-wrapper .countdown {
        display: flex;
        gap: 8px;
        color: var(--color-white);
    }

        .countdown-wrapper .countdown .hour,
        .countdown-wrapper .countdown .minute,
        .countdown-wrapper .countdown .second {
            padding: 0px 4px;
            background-color: var(--color-white);
            color: var(--color-danger);
            font-weight: 600;
            box-shadow: 0px 4px 4px 0px rgba(194, 39, 39, 0.29);
        }

@media(min-width:300px) {
    .countdown-wrapper {
        padding: 6px 8px;
    }

        .countdown-wrapper .title {
            font-size: 0.875rem;
        }

        .countdown-wrapper .icon {
            width: 14px;
        }
}

@media(min-width:768px) {
    .countdown-wrapper {
        padding: 8px 2%;
    }

        .countdown-wrapper .title {
            font-size: 1rem;
        }

        .countdown-wrapper .icon {
            width: 18px;
        }
}

.room-wrap {
    border-bottom: solid 1px var(--color-gray-300);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .room-wrap:last-child {
        border-bottom: none;
    }


    .room-wrap .title {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        font-size: 1.125rem;
    }

    .room-wrap .icon {
        width: 1.125rem;
    }

.room-title {
    display: flex;
    gap: 4px;
}

.option-price {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.option-date-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-800);
    padding-left: 20px;
    background-image: url("https://cdn.gobooking.com.tw/Hotel/img/icon_calendar_product.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1rem;
}

    /* 無內容時隱藏icon */
    .option-date-wrapper:empty {
        background-image: none;
    }
/* --- EDM --- */

/* --- Loading --- */
.section-loading {
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    position: fixed;
    height: 100vh;
}

    .section-loading .title {
        display: flex;
        font-size: 64px;
        font-weight: bold;
        color: var(--color-primary);
    }

    .section-loading .letter {
        display: inline-block;
        animation: loadingbounce 2s infinite;
    }

        .section-loading .letter:nth-child(1) {
            animation-delay: 0s;
        }

        .section-loading .letter:nth-child(2) {
            animation-delay: 0.1s;
        }

        .section-loading .letter:nth-child(3) {
            animation-delay: 0.2s;
        }

        .section-loading .letter:nth-child(4) {
            animation-delay: 0.3s;
        }

        .section-loading .letter:nth-child(5) {
            animation-delay: 0.4s;
        }

        .section-loading .letter:nth-child(6) {
            animation-delay: 0.5s;
        }

        .section-loading .letter:nth-child(7) {
            animation-delay: 0.6s;
        }

        .section-loading .letter:nth-child(8) {
            animation-delay: 0.7s;
        }

        .section-loading .letter:nth-child(9) {
            animation-delay: 0.8s;
        }

        .section-loading .letter:nth-child(10) {
            animation-delay: 0.8s;
        }

@keyframes loadingbounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.section-loading .loading-text {
    margin-top: 30px;
    font-size: 24px;
    color: #ffffffcc;
    animation: loadinglink 0.4s steps(60, start) infinite;
}

@keyframes loadinglink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

button.processing {
    pointer-events: none;
}
/* --- Loading --- */