/* Agent Update: 商品選購頁面自訂樣式表 | Based on: Current Workspace Version */

/* 確保 Modal 始終在最前層，避免被 Backdrop 擋住，且層級高於 Offcanvas 側邊欄 (1060) */
.modal {
    z-index: 1080 !important;
}

/* 僅在 modal 開啟 (body 有 .modal-open) 時，才將 backdrop z-index 提升至 1070，防止購物車側邊欄也被 1070 遮罩覆蓋 */
.modal-open .modal-backdrop {
    z-index: 1070 !important;
}

/* 修復某些情況下點擊被攔截的問題 */
.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Agent Update: 飛入購物車動畫樣式 */
.fly-item {
    position: fixed;
    z-index: 9999;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.1, 0.7, 0.1, 1);
    border: 4px solid #ffc107;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
}

/* Agent Update: 確保 Fancybox 燈箱層級高於購物車側邊欄 (1060)，且工具列永遠顯示不消失 */
.fancybox__container {
    z-index: 2000 !important;
}

.fancybox__toolbar {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Agent Update: Fancybox 自訂說明區塊樣式 - 貼齊圖片左下緣、字體放大、顯示單價與說明 */
.fancybox__slide {
    padding-top: 50px !important;
    padding-bottom: 240px !important;
    /* 桌機保留空間給說明文字，防止圖片與其重疊 */
}

@media (max-width: 576px) {
    .fancybox__slide {
        padding-bottom: 180px !important;
        /* 手機版保留空間較小 */
    }
}

.fancybox__caption {
    text-align: left !important;
    padding: 15px 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    width: 100% !important;
    max-width: var(--fancybox-caption-width, 100%) !important;
    box-sizing: border-box !important;
}

.custom-fancybox-caption {
    font-family: inherit;
    color: #fff;
    width: 100%;
}

.custom-fancybox-caption .caption-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 8px;
}

.custom-fancybox-caption .caption-name {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffffff;
}

.custom-fancybox-caption .caption-price {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffc107;
}

.custom-fancybox-caption .caption-desc {
    font-size: 1rem !important;
    color: #cccccc;
    line-height: 1.5;
    white-space: pre-wrap;
}

@media (max-width: 576px) {

    .custom-fancybox-caption .caption-name,
    .custom-fancybox-caption .caption-price {
        font-size: 1.5rem !important;
    }

    .custom-fancybox-caption .caption-desc {
        font-size: 0.85rem !important;
    }
}

/* Agent Update: 商品卡外頁標籤限制在單行，超出寬度則隱藏且不換行 */
.product-tags {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.product-tags .badge {
    flex-shrink: 0 !important;
}

/* Agent Update: 商品卡內頁 Swiper 輪播圖，預設不顯示左右箭頭 */
.modal-product-swiper .swiper-button-prev,
.modal-product-swiper .swiper-button-next {
    display: none !important;
}

/* 當 Swiper 初始化完成，且沒有被 disabled 時，才顯示對應箭頭 */
.modal-product-swiper.swiper-container-initialized .swiper-button-prev:not(.swiper-button-disabled),
.modal-product-swiper.swiper-container-initialized .swiper-button-next:not(.swiper-button-disabled) {
    display: flex !important;
}

/* Sticky bar tune for productselection page */
body.page-productselection .sticky-finish-bar {
    padding: 10px 0 38px 0 !important;
}

body.page-productselection .sticky-finish-bar.d-none {
    display: block !important;
}

body.page-productselection .sticky-finish-bar.empty-cart,
body.page-productselection .sticky-finish-bar.empty-cart.scroll-active,
body.page-productselection .sticky-finish-bar.has-items {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.page-productselection .sticky-finish-bar .bar-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-right: 0 !important;
}

body.page-productselection .sticky-finish-bar .bar-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

body.page-productselection .sticky-finish-bar .bar-right {
    /* 空白元素以平衡左側 */
}

body.page-productselection .sticky-finish-bar.has-items .btn-view-cart {
    position: relative;
}

body.page-productselection .sticky-finish-bar .btn-view-cart .cart-badge {
    position: absolute !important;
    top: 10% !important;
    left: 44% !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
    line-height: 1 !important;
}

body.page-productselection .sticky-finish-bar .btn-view-cart .cart-badge.d-none {
    display: none !important;
}

body.page-productselection .sticky-finish-bar .summary-text {
    font-size: 1.16rem !important;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #5f6975 !important;
}

body.page-productselection .sticky-finish-bar .summary-text strong {
    font-size: 1.2em;
}

body.page-productselection .sticky-finish-bar .summary-text strong:first-of-type {
    font-weight: 700;
    color: #5f6975 !important;
}

body.page-productselection .sticky-finish-bar .summary-text .text-danger {
    font-size: 1.78rem !important;
    margin-left: 2px;
}

body.page-productselection .sticky-finish-bar .btn-view-cart {
    min-width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin-left: 8px !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #4f5965 !important;
    font-size: 2.38rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

body.page-productselection .sticky-finish-bar .btn-view-cart:hover,
body.page-productselection .sticky-finish-bar .btn-view-cart:focus,
body.page-productselection .sticky-finish-bar .btn-view-cart:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.page-productselection .sticky-finish-bar .btn-view-cart i,
body.page-productselection .sticky-finish-bar .btn-view-cart .svg-inline--fa,
body.page-productselection .sticky-finish-bar .btn-view-cart .fa-shopping-cart {
    font-size: 1em !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Keep back-to-top hidden by default; show only when JS adds .visible, and pin to right */
body.page-productselection .btn-scroll-top {
    left: auto !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
}

body.page-productselection .btn-scroll-top.visible {
    transform: translateY(-50%) !important;
}

body.page-productselection .btn-scroll-top:hover {
    transform: translateY(-56%) !important;
}

@media (max-width: 767.98px) {
    body.page-productselection .sticky-finish-bar {
        padding: 9px 0 34px 0 !important;
    }

    body.page-productselection .sticky-finish-bar .bar-main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
        margin-right: 0;
    }

    body.page-productselection #cart-bar-contents .col-12 {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-productselection .sticky-finish-bar .summary-text {
        font-size: 1.02rem !important;
    }

    body.page-productselection .sticky-finish-bar .summary-text .text-danger {
        font-size: 1.48rem !important;
    }

    body.page-productselection .sticky-finish-bar .btn-view-cart {
        min-width: auto !important;
        min-height: auto !important;
        width: 66px !important;
        height: 38px !important;
        padding: 0 !important;
        margin-left: 8px !important;
        transform: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        border-right: none !important;
        font-size: 2.68rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.page-productselection .sticky-finish-bar .btn-view-cart i,
    body.page-productselection .sticky-finish-bar .btn-view-cart .svg-inline--fa,
    body.page-productselection .sticky-finish-bar .btn-view-cart .fa-shopping-cart {
        font-size: 1em !important;
        width: 1em !important;
        height: 1em !important;
        line-height: 1 !important;
    }

    body.page-productselection .btn-scroll-top {
        width: 47px !important;
        height: 47px !important;
        min-width: 47px !important;
    }

    body.page-productselection #wrapper {
        padding-bottom: 168px !important;
    }
}

/* Card Limit Alert styling and keyframes */
.card-limit-alert {
    animation: cardAlertFadeIn 0.25s ease-out forwards;
    letter-spacing: 0.5px;
}

@keyframes cardAlertFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Agent Update: 購物車按鈕水波紋提示脈衝動畫，僅在有商品且尚未點開購物車時顯示 */
body.page-productselection .sticky-finish-bar.has-items .btn-view-cart.pulse-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -22px;
    background-color: rgba(201, 160, 84, 0.4);
    /* 金銅色水波紋，呼應龍山寺莊嚴典雅色調 */
    border-radius: 50%;
    z-index: -1;
    animation: cartRipplePulse 2.4s infinite ease-out;
    pointer-events: none;
}

@keyframes cartRipplePulse {
    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}