/* Hide uncompiled Vue templates */
[v-cloak] {
    display: none !important;
}

:root {
    /* 桌機版時內容欄維持的手機寬度；改這一個值就能調整整個 App 的欄寬 */
    --app-max-width: 480px;
    /* 桌機版時內容欄左右留白處的底色 */
    --app-shell-bg: #E9E3E3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

html, body {
    height: 100%;
    background-color: #ACA394 !important;
    font-family: 'Roboto', 'Inter', sans-serif;
}

.min-vh-100 {
    min-height: 100vh;
}

body > * {
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.3s, color 0.3s;
    border-radius: 12px;
}

.nav-link:active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: ripple 0.4s ease-out;
    z-index: 1;
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.nav-link > * {
    position: relative;
    z-index: 2;
}

/* 貼在底部導覽列正上方的動作按鈕列（加入購物車、確認兌換…）。
   導覽列高度會隨字級與裝置改變，寫死 bottom 值會在兩者之間露出一條縫，
   實際高度由 main.js 量測後寫進 --bottom-nav-height，這裡的 4.83rem 只是 JS 尚未執行前的備援值。 */
.action-bar-fixed {
    position: fixed;
    bottom: var(--bottom-nav-height, 4.83rem);
    left: 0;
    right: 0;
    z-index: 1030;
}

/* 底部導覽列（原本寫在 layout.html 的 inline style，移進來才好被 media query 覆寫） */
.app-bottom-nav {
    background-color: #dfdfdf;
    margin: 0 auto;
    padding: 6px 0;
}

/* 內容最上方的棕色留白。原本是靠 body 底色透出來，桌機版會被 .app-shell 的灰底蓋掉，
   所以直接寫在這個元素上，兩種寬度看起來才一致。 */
.app-topbar {
    background-color: #ACA394;
}

/* ===================== 桌機版版面 =====================
   LIFF 內一律是手機寬度，但使用者也會直接用電腦瀏覽器開。
   桌機時內容欄維持手機寬度置中，底部導覽列的底色仍然滿版，
   只用左右 padding 把 nav-fill 的項目擠回跟內容同寬。 */
@media (min-width: 768px) {
    .app-shell {
        background-color: var(--app-shell-bg);
        min-height: 100vh;
    }

    /* 棕色留白與內容一起收成手機欄寬；細線只畫左右兩邊，兩者之間才不會多一條橫線 */
    .app-topbar,
    .app-main {
        max-width: var(--app-max-width);
        margin: 0 auto;
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06), -1px 0 0 rgba(0, 0, 0, 0.06);
    }

    /* 各頁最上層元素的 margin-top（例如 footer/home.html 的 tab .mt-3）會一路 collapse
       穿出 .bg-white、section、main，手機版那段露的是 body 的棕色所以看不出來。
       桌機版底下換成灰底後就變成棕色區與 tab 之間的一條縫。
       flow-root 建立 BFC 把 margin 關回 main 內，再補上同一個棕底，縫就消失了。
       用 flow-root 而不是 overflow: hidden，避免裁掉 dropdown 之類的浮層。 */
    .app-main {
        display: flow-root;
        background-color: #ACA394;
    }

    .app-bottom-nav {
        padding-left: calc((100% - var(--app-max-width)) / 2);
        padding-right: calc((100% - var(--app-max-width)) / 2);
    }

    /* 頁面內貼在導覽列上方的動作列（加入購物車、確認兌換…）要跟著內容欄，不能滿版 */
    .action-bar-fixed {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: var(--app-max-width);
    }
}