/* 導覽列 */
.program-navigation {
    position: fixed;
    top: 70px;
    width: 100%;
    border-top: 1px solid #3331;
    background-color: #ffffff;
    box-shadow: 0 5px 10px 0 #0002;
    z-index: 9999;
}
.program-navigation-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    overflow: auto;
    height: 50px;
}
.program-navigation-bar::after {
    content: '';
    background-image: linear-gradient('to right', #FFF0, #FFFF);
}
.program-navigation-bar::-webkit-scrollbar {
    display: none;
}
.program-navigation-item {
    font-size: 1.4rem;
    padding: 8px 10px;
    border-radius: 0;
    border-bottom: 3px solid #0000;
    flex: 0 0 auto;
    height: 100%;
}
.program-navigation-item.active {
    font-weight: 600;
    color: var(--color-5);
    border-bottom-color: var(--color-5);
}
.program-navigation-item:focus {
    box-shadow: unset;
}


/* ------------------------------------ */
/* 活動 */
.program-detail {
    padding: 30px 0 50px;
}
.program-detail-title {
    border-left: 7px solid var(--color-5);
    padding-left: 15px;
    line-height: 1.5;
    padding-top: 5px;
    margin-bottom: 20px;
    font-size: 2.2rem;
    font-weight: 600;
}


/* ------------------------------------ */
/* 活動(佈局) */
.program-col {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
}
.program-col .program-col-1 {

}
.program-col .program-col-2 {
    position: sticky;
    top: calc(70px + 50px + 20px);
}
@media (max-width: 768px) {
    .program-col {
        grid-template-columns: minmax(0, 1fr);
    }
    .program-col .program-col-2 {
        display: none !important;
    }
}


/* ------------------------------------ */
/* 日期、地點、加入收藏 */
.program-info-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.program-info-1-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
/* 日期 */
.program-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.program-date-item {
    /* position: relative; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.2rem;
}
.program-date-item + .program-date-item {
    /* padding-left: 14px; */
}
.program-date-item + .program-date-item::before {
    content: ' ~ ';
    padding: 0 5px;
    /* position: absolute; */
    /* left: calc((14px - 8px) / 2); */
}
/* 地點 */
.program-location {
    position: relative;
}
.program-location-item {
    font-size: 1.2rem;
}
.program-date + .program-location {
    padding-left: 24px;
}
.program-date + .program-location::before {
    content: ' | ';
    position: absolute;
    left: calc((24px - 3px) / 2);
}
/* 加入收藏 */
.program-favorites {
    position: relative;
}
.program-favorites button {
    padding: .375rem .75rem;
    width: auto;
    
}
.bookmark-icon {
	font-size: 18px;
	position: relative;
	z-index: 2;
	top: unset;
	right: unset;
	cursor: pointer;
	display: inline-block;
	width: 15px;
	height: 22px;
	line-height: 22px;
	border-radius: unset;
	transition: all 0.4s;
	color: #000;
	background-color: unset;
}
@media (max-width: 768px) {
    .program-info-1-1 {
        flex-direction: column;
        align-items: flex-start;
    }
    .program-date + .program-location {
        padding-left: 0;
    }
    .program-date + .program-location::before {
        content: unset;
    }
}


/* ------------------------------------ */
/* 圖片 */
.program-gallery {
    --gap: 5px;
    --height: 460px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gap);
    grid-template-rows: calc(var(--height) + var(--gap) * 2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 50px;
}
.program-gallery-col-1 {
    
}
.program-gallery-col-1 a {
    
}
.program-gallery-col-1 img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.program-gallery-col-2 {
    display: grid;
    grid-template-rows: calc(var(--height)/3) calc(var(--height)/3) calc(var(--height)/3);
    gap: var(--gap);
}
.program-gallery-col-2 a {
    
}
.program-gallery-col-2 img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}
@media (max-width: 992px) {
    .program-gallery {
        --height: 340px;
    }
}
@media (max-width: 768px) {
    .program-gallery {
        --height: 300px;
        --gap: 0;
        aspect-ratio: 16 / 9;
        grid-template-columns: 1fr;
    }
    .program-gallery-col-2 {
        display: none;
    }
    
}


/* ------------------------------------ */
/* 介紹、推薦方案 */
.program-info-2 {
    font-size: 1.2rem;
    margin-bottom: 50px;
}
.program-summary {
    position: relative;
    padding: 15px;
    border-radius: 10px;
    background-color: #e8e8e8;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 50px;
}
.program-summary .more-cover {
    position: absolute;
    bottom: 0px;
    background-image: linear-gradient(to top, #e8e8e8 50%, transparent 100%);
    width: 100%;
    left: 0;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
}
.program-summary .summary-more-btn {
    font-size: 1.2rem;
    text-decoration: underline;
}
.program-summary.active {
    max-height: unset;
}
.program-summary.active .more-cover {
    display: none;
}
.program-anchor {
    height: max-content;
    padding: 20px;
    margin-left: 10px;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.program-anchor-price {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    line-height: 1;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5px;
}
.program-anchor-price span {
    
}
.program-anchor-price font {
    font-size: 1.8rem;
}
.program-anchor-price font::before {
    content: '$';
}
.program-anchor-btn {
    color: #fff;
    background-color: var(--color-1);
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 1.4rem;
}
.program-anchor-btn:hover {
    color: #fff;
}


/* ------------------------------------ */
/* 方案 */
.program-plan {
    margin-bottom: 50px;
}
/* 篩選 */
.program-plan-filter {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    margin-bottom: 15px;
    overflow: auto;
    max-width: 100%;
}
.program-plan-filter::-webkit-scrollbar {
    height: 8px;
}
.program-plan-filter::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 4px;
}
.program-plan-filter::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #d0d2d4;
}
.program-plan-filter::-webkit-scrollbar-thumb:hover {
    background-color: #bfbfbf;
}
.program-plan-filter.date::before,
.program-plan-filter.plan::before {
    width: 110px;
    font-size: 1.4rem;
}
.program-plan-filter.date {

}
.program-plan-filter.date::before {
    content: 'Select Date';

}
.filter-date-item,
.filter-plan-item {
    padding: 12px 12px 10px;
    line-height: 1;
    border-radius: 5px;
    border: 1px solid #000;
    cursor: pointer;
}
.filter-date-item:not(.active):hover,
.filter-plan-item:not(.active):hover {
    background-color: #ffaa001a;
}
.filter-date-item {
    
}
.filter-date-item.active {
    color: #ffffff;
    border-color: var(--color-5);
    background-color: var(--color-5);
}
.filter-date-item.all,
.filter-date-item.this-date.active {
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-date-item.all {
    
}
.filter-date-item.this-date {
    display: none;
}
.filter-date-item.this-date.active {
    display: flex;
    
}
.filter-date-item.this-date .txt {
    
}
.filter-date-item.this-date .icn {
    width: 14.5px;
    height: 14.5px;
    text-align: center;
}
.program-plan-filter.plan {

}
.program-plan-filter.plan::before {
    content: 'Ticket Groups';

}
.filter-plan-item {
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 0 0 auto;
}
.filter-plan-item.active {
    color: var(--color-5);
    border-color: var(--color-5);
    background-color: #ffaa0033;
    border-width: 2px;
}
.filter-plan-item.disable {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}
/* .program-plan-group ------------------ */
.program-plan-group {
    padding: 20px 20px 0;
    background-color: #00ccff33;
    border-radius: 20px;
}
.plan-group-tag,
.plan-item-tag {
    display: inline-block;
    padding: 6px 9px;
    line-height: 1;
    border-radius: 5px;
}
.plan-group-tag {
    color: #fff;
    background-color: var(--color-3);
}
.plan-group-title,
.plan-item-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 5px;
}
.plan-group-title {
    margin-top: 15px;
}
.plan-group-subtitle {
    font-size: 1.3rem;
    margin-bottom: 15px;
}
/* .plan-item ------------------ */
.plan-item {
    padding: calc(25px + 3px) calc(20px + 3px) calc(30px + 3px);
    border: 1px solid #e6e6e6;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #fff;
}
.program-plan-group .plan-item {
    margin: 0 -20px 0;
}
.plan-item.active {
    padding: 25px 20px 30px;
    border-width: 4px;
    border-color: var(--color-5);
}
.plan-item + .plan-item {
    border-radius: 0;
    border-top: unset;
}
.plan-item + .plan-item.active {
    padding-top: calc(25px - 1px);
    border-top: 4px solid var(--color-5);
}
.plan-item:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.plan-item a[data-bs-toggle="collapse"] {

}
.plan-item-title {
    position: relative;
    padding-right: 30px;
    margin-bottom: 5px;
    transition: 0.35s ease;
}
.plan-item .plan-item-title::before {
    content: "\f106";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.plan-item.active .plan-item-title::before {
    transform: translateY(-50%) rotateX(180deg);
}
.plan-item-tag {
    color: #fff;
    background-color: var(--color-11);

}
.plan-item-feature {
    margin: 10px 0 5px;
    font-size: 1.2rem;
}
/* .item-content ------------------ */
.plan-item-content {
    position: relative;
    margin-top: 15px;
    padding-top: 20px;
}
.plan-item-content::before {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #0001;
}
.plan-item-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 45px;
}
.plan-item-info-1 {
    
}
.plan-item-info-2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.plan-item.active .plan-item-info-2 {
    display: none;
}
.plan-item-price {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.plan-item-price-1 {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}
.plan-item-price-1 font,
.plan-item-price-2 {
    position: relative;
}
.plan-item-price-1 font::before,
.plan-item-price-2::before {
    content: '$';
}
.plan-item-price-1 span {

}
.plan-item-price-1 font {
    font-size: 1.4rem;
    font-weight: 600;
}
.plan-item-price-2 {
    opacity: 0.6;
    text-decoration: line-through;
}
.plan-item-detail-btn:focus,
.plan-item-selection-btn:focus {
    box-shadow: none;
}
.plan-item-detail-btn {
    font-size: 1.2rem;
    text-decoration: underline;
    padding: 0;
}
.plan-item-selection-btn {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    line-height: 1;
    border-radius: 8px;
    color: #fff;
    background-color: var(--color-1);
    font-size: 1.4rem;
}
.plan-item-selection-btn:hover {
    color: #fff;
}
.plan-item-content-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}
/* .plan-item-content-col ------------------ */
.plan-item-content-col {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.plan-item-calendar-title,
.plan-item-booking-title {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
/* .plan-item-booking-control ------------------ */
.plan-item-booking-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    gap: 5px;
}
.plan-item-booking-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-radius: 5px;
    gap: 10px;
}
.plan-item-booking-item + .plan-item-booking-item {
    padding-top: 12px;
    margin-top: 12px;
}
.plan-item-booking-item + .plan-item-booking-item::before {
    content: '';
    position: absolute;
    background-color: #0001;
    width: 100%;
    height: 1px;
    left: 0;
    top: -5px;
}
.booking-item-title {
    flex-grow: 1;
}
.booking-item-title-1 {
    font-weight: 600;
    font-size: 1.2rem;
}
.booking-item-title-2 {
    font-size: 80%;
    color: var(--color-5);
}
.booking-item-price {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    font-weight: 600;
    font-size: 1.2rem;
}
.booking-item-price-1::before,
.booking-item-price-2::before {
    content: '$';
}
.booking-item-price-2 {
    opacity: 0.6;
    font-size: 80%;
    font-weight: 400;
    text-decoration: line-through;
}
/* .booking-item-option ------------------ */
.booking-item-option {
    display: flex;
    align-items: center;
    width: 100px;
}
.booking-item-option-sub,
.booking-item-option-add {
    width: 30px;
    height: 30px;
    line-height: 1;
    background-color: #f5f5f5;
}
.booking-item-option-sub.disabled,
.booking-item-option-add.disabled {
    color: #0005;
    cursor: not-allowed;
    pointer-events: unset !important;
}
.booking-item-option-qty {
    flex-grow: 1;
    text-align: center;
}
.booking-item-option-add {

}
/* .plan-item-booking-subtotal ------------------ */
.plan-item-booking-subtotal {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 10px;
}
.subtotal-price {
    font-size: 2rem;
    font-weight: 600;
}
.subtotal-price::before {
    content: '$';
}
.subtotal-discount {

}
.subtotal-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.subtotal-addcart-btn,
.subtotal-booking-btn {
    color: #fff;
    font-size: 1.2rem;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}
.subtotal-addcart-btn:hover,
.subtotal-booking-btn:hover {
    color: #fff;
}
.subtotal-addcart-btn {
    background-color: var(--color-5);
}
.subtotal-booking-btn {
    background-color: var(--color-1);
}






/* ------------------------------------ */
/* 關於 */
.program-about {
    margin-bottom: 50px;
}
.program-about-content {

}
.program-about-content * {
    color: #000;
}


/* 注意事項 */
.program-note {
    margin-bottom: 50px;
}
.program-note-content {
    
}
.program-note-content * {
    color: #000;
}