/* ==========================================================================
   Mobile Shop 前台品牌樣式（酒紅 + 金色）
   仿 https://mshop-g.com/ 視覺；純 CSS，無 build pipeline，隨 Bootstrap5 CDN 之後載入。
   僅套用於前台 layouts/app.blade.php（後台 layouts/admin.blade.php 不受影響）。
   ========================================================================== */

:root {
    --brand: #88013f;          /* 酒紅／洋紅（頁尾、主色） */
    --brand-dark: #6a0131;     /* 深酒紅（hover） */
    --brand-btn: #a80a52;      /* 按鈕洋紅（略亮於主色，點擊感） */
    --brand-btn-hover: #88013f;
    --gold: #dcaf3d;           /* 金（header 頂線、重點） */
    --gold-bright: #e8c85e;    /* 亮金（酒紅底上的標題） */
    --copyright-bg: #dbae35;   /* 版權列底色 */
    --ink: #2c2c2c;
    --paper: #f6f3f4;          /* 淺灰粉底 */
}

body {
    color: var(--ink);
    background-color: #fff;
    padding-top: 92px;   /* 固定導覽列（fixed-top）高度佔位 */
}

/* 讓既有 .btn-primary / .text-primary 全站改為品牌洋紅（商品頁、購物車等一併換色） */
.btn-primary {
    --bs-btn-bg: var(--brand-btn);
    --bs-btn-border-color: var(--brand-btn);
    --bs-btn-hover-bg: var(--brand-btn-hover);
    --bs-btn-hover-border-color: var(--brand-btn-hover);
    --bs-btn-active-bg: var(--brand-btn-hover);
    --bs-btn-active-border-color: var(--brand-btn-hover);
    --bs-btn-disabled-bg: var(--brand-btn);
    --bs-btn-disabled-border-color: var(--brand-btn);
    --bs-btn-focus-shadow-rgb: 160, 29, 90;
}
.text-primary { color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* 全站方角：按鈕/卡片/表單/彈窗/下拉/提示一律無圓角。
   例外（維持圓形，與原站一致）：購物車數字泡泡、頁尾社群圓 icon、LINE 浮動鈕、語系 pill。 */
.btn { border-radius: 0; }
.card, .list-group, .list-group-item, .accordion, .accordion-item,
.accordion-button, .accordion-collapse,
.form-control, .form-select, .input-group-text,
.modal-content, .dropdown-menu, .alert, .page-link, .toast { border-radius: 0 !important; }

/* 品牌洋紅按鈕（首頁 CTA 用） */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-btn);
    --bs-btn-border-color: var(--brand-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-btn-hover);
    --bs-btn-hover-border-color: var(--brand-btn-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-btn-hover);
    --bs-btn-active-border-color: var(--brand-btn-hover);
    color: #fff;
}

/* ── 導覽列（白底品牌 header）──────────────────────────────────────── */
.site-navbar {
    background: #fff;
    border-top: 4px solid var(--gold);   /* 頂端金線 #dcaf3d */
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    min-height: 92px;                     /* 預設高度；捲動後縮小 */
    transition: min-height .25s ease, box-shadow .25s ease;
}
.site-navbar.is-scrolled { min-height: 64px; box-shadow: 0 3px 16px rgba(0, 0, 0, .12); }
.site-navbar .navbar-brand { padding: 0; }
.brand-img { height: 54px; width: auto; display: block; transition: height .25s ease; }
.site-navbar.is-scrolled .brand-img { height: 40px; }
.site-navbar .nav-link { color: #3a3a3a; font-weight: 600; }
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus { color: var(--brand); }
.site-navbar .nav-link.active { color: var(--brand); }
.site-navbar .dropdown-menu { border: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }

/* 搜尋 Modal 內輸入框 focus 品牌色 */
#searchModal .form-control:focus {
    border-color: var(--brand-btn);
    box-shadow: 0 0 0 .2rem rgba(136, 1, 63, .18);
}

/* intl-tel-input（註冊手機國碼選擇）：讓外層容器吃滿欄寬 */
.iti { width: 100%; }

/* 手機/橫向短視窗：展開的固定選單可內部捲動，避免底部項目搆不到 */
@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse { max-height: calc(100vh - 92px); overflow-y: auto; }
}

.lang-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border: 1px solid #e2d5db; border-radius: 999px;
    color: #6a6a6a; font-size: .8rem; white-space: nowrap;
}

.cart-link { color: #3a3a3a; }
.cart-link:hover { color: var(--brand); }

/* ── 首頁 Hero：滿版三欄，四周與欄間統一保留 20px ──────────────────── */
.hero-cards { padding: 20px; }   /* 左右留邊 20px；下方 20px 即與聯絡我們橫幅的間距 */
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 767.98px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-card {   /* 滿版三欄、無圓角（四周與欄間 20px 見 .hero-cards / .hero-grid） */
    position: relative;
    display: block;
    min-height: 30rem;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background-color: #5c0f30;   /* 圖片載入前的底色 */
    transition: color .2s ease;
    isolation: isolate;
}
.hero-card:hover { color: #fff; }
.hero-card__img {   /* 實拍照片鋪滿卡片 */
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.hero-card:hover .hero-card__img { transform: scale(1.05); }
.hero-card::after {   /* 暗色漸層，讓文字清楚 */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .8) 100%);
}
.hero-card__body { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; bottom: 1.5rem; }
.hero-card__title { font-size: 1.55rem; font-weight: 800; margin: 0 0 .3rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.hero-card__desc { font-size: .95rem; opacity: .92; margin: 0 0 1rem; }
.hero-card__cta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.2rem; border-radius: 0;
    background: var(--brand-btn); color: #fff; font-weight: 700; font-size: .95rem;
    box-shadow: 0 4px 14px rgba(136, 1, 63, .45);
    transition: background .2s ease, gap .2s ease;
}
.hero-card:hover .hero-card__cta { background: var(--brand-btn-hover); gap: .7rem; }

/* ── 客製商品 CTA 橫幅（全幅深底）────────────────────────────────── */
.cta-banner {
    position: relative;
    min-height: 26rem;                /* 加高，避免區塊過扁 */
    display: grid;
    align-items: center;
    background-color: #2f1a13;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.cta-banner::before {   /* 左深右淺遮罩，保左側文字可讀 */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(25, 14, 9, .9) 0%, rgba(25, 14, 9, .62) 45%, rgba(25, 14, 9, .2) 100%);
}
.cta-banner > .container { position: relative; z-index: 1; width: 100%; }
.cta-banner__eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--gold-bright); font-weight: 700; letter-spacing: .05em; }
.cta-banner__eyebrow::after { content: ""; width: 3rem; height: 2px; background: var(--gold-bright); opacity: .7; }
.cta-banner__title { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; margin: .6rem 0 1.4rem; }

/* ── eSIM 操作設定（淺灰底段落）──────────────────────────────────── */
.esim-guide { background: var(--paper); }
.section-title { text-align: center; font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.section-underline { width: 68px; height: 3px; background: var(--gold); border: 0; opacity: 1; margin: .5rem auto 2.5rem; border-radius: 2px; }

.video-frame { background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* FAQ 手風琴（貼近原站：白底、細框、展開不變色底） */
.esim-guide .accordion { --bs-accordion-border-color: #e6dce0; border-radius: 0; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
.esim-guide .accordion-button { font-weight: 700; color: var(--ink); background: #fff; }
.esim-guide .accordion-button:not(.collapsed) { background: #fff; color: var(--ink); box-shadow: inset 0 -1px 0 #e6dce0; }
.esim-guide .accordion-button:focus { border-color: transparent; box-shadow: 0 0 0 .18rem rgba(136, 1, 63, .18); }

/* ── 最新消息段落 ─────────────────────────────────────────────────── */
.news-item { transition: background .15s ease; }
.news-item:hover { background: var(--paper); }

/* ── 頁尾（酒紅底）＋ 版權列（金底）─────────────────────────────── */
.site-footer { background: var(--brand); color: rgba(255, 255, 255, .85); }
.footer-logo { height: 78px; width: auto; }   /* 金色透明 logo，直接置於酒紅底 */
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-head { color: var(--gold-bright); font-weight: 800; letter-spacing: .04em; margin-bottom: 1rem; }
.footer-social a {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.05rem;
    transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--gold); color: var(--brand-dark); transform: translateY(-2px); }
.copyright-bar { background: var(--copyright-bg); color: #4a3b12; }
.copyright-bar a { color: #4a3b12; text-decoration: underline; }

/* ── 線上諮詢浮動鈕 ──────────────────────────────────────────────── */
.line-fab {
    position: fixed; right: 20px; bottom: 24px; z-index: 1030;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem; border-radius: 999px;
    background: #06c755; color: #fff; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 20px rgba(6, 199, 85, .45);
    transition: transform .2s ease, box-shadow .2s ease;
}
.line-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 199, 85, .55); }
.line-fab i { font-size: 1.25rem; }

@media (max-width: 575.98px) {
    .hero-card { min-height: 20rem; }
    .line-fab span { display: none; }
    .line-fab { padding: .7rem; }
    .line-fab i { font-size: 1.5rem; }
}