/* =============================================
   RS Lisa VIP Popup
   ============================================= */

/* ── Reset — 強制覆蓋主題對 button 的樣式 ── */
.rslisavip-popup *,
.rslisavip-popup *::before,
.rslisavip-popup *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.rslisavip-popup button,
.rslisavip-popup button:focus,
.rslisavip-popup button:active,
.rslisavip-popup button:hover,
.rslisavip-popup button:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.rslisavip-popup a,
.rslisavip-popup a:focus,
.rslisavip-popup a:active,
.rslisavip-popup a:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* ── Variables ── */
.rslisavip-popup {
    --popup-bg: #1a1a1a;
    --popup-text: #EFEBE2;
    --popup-tab-active-bg: #DAC2A3;
    --popup-tab-active-text: #3E2C28;
    --popup-tab-bg: #554947;
    --popup-tab-text: #ffffff;
    --popup-overlay: rgba(0, 0, 0, 0.6);
    --popup-transition: 0.3s ease;
    --popup-radius: 8px;
}

/* =============================================
   入口按鈕 - Trigger
   ============================================= */
.rslisavip-popup__trigger {
    position: fixed;
    z-index: 9998;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    transition: opacity var(--popup-transition);
    overflow: hidden;
    /* 桌機定位 — 以 1440 為基準，固定在底部往上 40px */
    left: calc(33 / 1440 * 100vw);
    bottom: 40px;
    width: calc(166.36 / 1440 * 100vw);
}

/* ── 入口圖片容器 — 完整呈現不裁切 ── */
.rslisavip-popup__trigger-img-wrap {
    display: block;
    position: relative;
    width: 100%;
    line-height: 0;
}

.rslisavip-popup__trigger-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 入口文字 ── */
.rslisavip-popup__trigger-text {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--popup-text) !important;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: calc(16 / 1440 * 100vw);
    font-weight: 400;
    line-height: 1.3;
    padding-top: calc(7 / 1440 * 100vw);
    border: none !important;
    outline: none !important;
    background: none !important;
}

/* ── 打開時隱藏入口 ── */
.rslisavip-popup[data-state="open"] .rslisavip-popup__trigger {
    opacity: 0;
    pointer-events: none;
}

/* =============================================
   Overlay + Modal
   ============================================= */
.rslisavip-popup__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--popup-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--popup-transition), visibility var(--popup-transition);
}

.rslisavip-popup[data-state="open"] .rslisavip-popup__overlay {
    opacity: 1;
    visibility: visible;
}

/* ── Modal 本體 ── */
.rslisavip-popup__modal {
    position: relative;
    width: 520px;
    max-width: calc(100vw - 24px);
    max-height: 90vh;
    background: transparent;
    border-radius: var(--popup-radius);
    overflow: hidden;
    overflow-y: auto;
    transform: translateY(20px) scale(0.97);
    transition: transform var(--popup-transition);
    display: flex;
    flex-direction: column;
}

.rslisavip-popup[data-state="open"] .rslisavip-popup__modal {
    transform: translateY(0) scale(1);
}

/* =============================================
   Tab Bar — 膠囊型
   ============================================= */
.rslisavip-popup__tab-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px 0 12px;
    flex-shrink: 0;
    scrollbar-width: none;
}

.rslisavip-popup__tab-bar::-webkit-scrollbar {
    display: none;
}

/* ── 單一 Tab 膠囊 ── */
.rslisavip-popup__tab {
    flex-shrink: 0;
    padding: 8px 24px !important;
    border: none !important;
    border-radius: 30px !important;
    background: var(--popup-tab-bg) !important;
    color: var(--popup-tab-text) !important;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22.4px;
    letter-spacing: 1.4px;
    cursor: pointer;
    white-space: nowrap;
}

.rslisavip-popup__tab.is-active {
    background: var(--popup-tab-active-bg) !important;
    color: var(--popup-tab-active-text) !important;
}

/* =============================================
   Content Area — 圖片 + 箭頭 + 關閉
   ============================================= */
.rslisavip-popup__content {
    position: relative;
    width: 520px;
    max-width: 100%;
    height: auto;
    margin-top: 16px;
    overflow: hidden;
}

/* ── 關閉按鈕 — 圖片區右上角 ── */
.rslisavip-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    cursor: pointer;
    color: #ffffff;
}

/* ── 箭頭 — 圖片上垂直置中 ── */
.rslisavip-popup__arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    cursor: pointer;
    width: 24px;
    height: 48px;
}

.rslisavip-popup__arrow--prev {
    left: 0;
}

.rslisavip-popup__arrow--next {
    right: 0;
}

.rslisavip-popup__arrow--next svg {
    transform: scaleX(-1);
}

/* ── Panels 容器 ── */
.rslisavip-popup__panels {
    width: 100%;
    height: auto;
}

/* ── 單一 Panel ── */
.rslisavip-popup__panel {
    display: none;
    width: 100%;
    height: auto;
}

.rslisavip-popup__panel.is-active {
    display: block;
}

/* ── 圖片連結 ── */
.rslisavip-popup__image-link {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.rslisavip-popup__image {
    width: 520px;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* =============================================
   手機板 RWD （< 768px）
   ============================================= */
@media (max-width: 767px) {

    .rslisavip-popup__trigger {
        left: 13px;
        bottom: 40px;
        width: 100px !important;
        max-width: 100px !important;
    }

    .rslisavip-popup__trigger-img-wrap,
    .rslisavip-popup__trigger-img {
        max-width: 100px !important;
    }

    .rslisavip-popup__trigger-text {
        color: #EFEBE2 !important;
        text-align: center;
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 9.6px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        padding-top: 4px;
    }
}