@charset "UTF-8";

/* =============================================
   base.css — 全站共用基礎樣式
   所有頁面皆需引入
   ============================================= */

/* --- 基礎設定 --- */
body {
    font-family: 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", sans-serif;
    color: #333;
    background: url('../images/bg.png') no-repeat center top;
    background-size: cover;
}

@media (max-width: 991.98px) {
    body {
        background-image: url('../images/m-bg.png');
    }
}

/* --- 全站內容寬度限制 1320px --- */
html,
body {
    overflow-x: hidden;
}

main {
    max-width: 1320px;
    margin: 0 auto;
}


/* 需要背景滿版的 section：背景色溢出 main 限寬 */
.full-width-bg {
    width: 100vw;
    position: relative;
    margin-left: calc(-50vw + 50%);
}

/* 滿版背景內的內容仍然限縮 1320px */
.full-width-bg>.container,
.full-width-bg>.content-inner {
    max-width: 1320px;
    margin: 0 auto;
}

/* Bootstrap container 在大螢幕也擴到 1320px */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* 桌機版 Footer 內容限縮 */
.footer-light>.container {
    max-width: 1320px;
}

/* --- 共用工具 class --- */
.gold-text {
    color: #D4AF37;
    letter-spacing: 2px;
}

.bg-gold {
    background: linear-gradient(135deg, #e6c15c, #d4af37);
    color: white;
    font-weight: bold;
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #e6c15c 0%, #d4af37 100%);
}

.z-index-2 {
    z-index: 2;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* --- 內頁共用（商家頁、公告頁） --- */
.article-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: #444;
}

.merchant-hero {
    min-height: 350px;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
        top: 0 !important;
    }
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: #ccc;
}

/* Utility Classes */
.min-vh-50 {
    min-height: 50vh !important;
}

.cursor-default {
    cursor: default !important;
}

/* =============================================
   全站手機版底部固定公告 (Sticky Mobile Bar)
   ============================================= */
.mobile-sticky-announcement {
    position: fixed;
    /* 解決手機版滑動時底部漏出 1px 的問題 */
    bottom: -1px;
    padding-bottom: 1px;
    left: 0;
    width: 100%;
    /* 視覺高度維持 40px */
    height: 41px;
    background: #d1d1d1;
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-announcement-swiper {
    width: 100%;
    height: 100%;
}

.mobile-announcement-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #000;
    font-size: 16px;
    padding: 0 10px;
    /* 不設 white-space: nowrap; 交給 JS 裁切 */
    text-decoration: none;
    font-family: 'Noto Sans TC', "Microsoft JhengHei", serif;
}

@media (max-width: 991.98px) {

    /* 防止底部被固定區塊擋住 */
    body {
        padding-bottom: 40px !important;
    }
}