/*
 * 節慶主題
 * 後台「版型管理 > 節慶主題」設定後, App.vue 會在 body 加上 theme-{代碼} class
 * 新增活動時: 後台 LayoutController.SiteThemes 加一筆, 這裡加對應的 body.theme-{代碼} 樣式
 */

/* ===== 預設主題: 底部選單 icon 只顯示一張 ===== */
.nav-menu .menu-box a img.full {
    display: none;
}

/* QR Code 外框: 提供節慶主題在中央疊加圖示的定位基準 */
.qr-box .qr-img {
    display: inline-block;
    position: relative;
    max-width: 100%;
    line-height: 0;
}

/* ===== BTS活動 (bts) ===== */

/* QR Code 中央紫色愛心(QR 為最高容錯 H 級, 遮蓋中央約 20% 寬度不影響掃描) */
body.theme-bts .qr-box .qr-img::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    height: 22%;
    transform: translate(-50%, -50%);
    background: url(../img/qr_heart_bts.svg) no-repeat center / contain;
    pointer-events: none;
}

/* 紫色愛心背景圖 */
body.theme-bts .wrapper {
    background: url(../img/heart_bg_p.svg), linear-gradient(to bottom, #e8cdff 0%, #E4EAF0 200px, #EFF3F6 20%);
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    background-position: top center;
}

body.theme-bts .nav-menu {
    background-color: #63179E;
}

body.theme-bts .nav-menu .menu-box a {
    padding: 4px 7px;
    border-radius: 5px;
    color: #fff;
}

body.theme-bts .nav-menu .menu-box a:hover {
    color: #fff;
    font-weight: 500;
}

body.theme-bts .nav-menu .menu-box a.router-link-active {
    background-color: #ffffff33;
}

body.theme-bts .nav-menu .menu-box a .icon_box {
    position: relative;
    padding: 3px 0;
    padding-bottom: 1px;
}

body.theme-bts .nav-menu .menu-box a .icon_box img {
    height: 30px;
}

body.theme-bts .nav-menu .menu-box a img.full {
    display: block;
    opacity: 0;
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}

body.theme-bts .nav-menu .menu-box a:hover img.icon,
body.theme-bts .nav-menu .menu-box a.router-link-active img.icon {
    opacity: 0;
}

body.theme-bts .nav-menu .menu-box a:hover img.full,
body.theme-bts .nav-menu .menu-box a.router-link-active img.full {
    opacity: 1;
}