/* ========================================
   MOBILE.CSS — 手機版共用樣式
   粵港澳汽車服務有限公司
   ======================================== */

/* --- CSS 變量 --- */
:root {
    --m-primary: #1a4680;
    --m-primary-dark: #0f2d52;
    --m-primary-light: #2d5aa0;
    --m-secondary: #00b14f;
    --m-accent: #FF6F00;
    --m-bg-light: #f5f5f5;
    --m-bg-white: #ffffff;
    --m-text-dark: #333333;
    --m-text-medium: #666666;
    --m-text-light: #999999;
    --m-radius: 12px;
    --m-radius-sm: 8px;
    --m-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --m-shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
    --m-header-h: 56px;
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- 基礎重置 --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
    line-height: 1.6; color: var(--m-text-dark); background: var(--m-bg-light);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--m-header-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--m-primary); text-decoration: none; }
ul, ol { list-style: none; }

/* --- 容器 --- */
.m-container { width: 100%; max-width: 100%; padding: 0 16px; margin: 0 auto; }

/* ========== HEADER ========== */
.m-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--m-header-h);
    background: var(--m-bg-white); box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; z-index: 900;
}
.m-header__logo { display: flex; align-items: center; }
.m-header__logo img { height: 40px; }
.m-header__menu-btn {
    width: 44px; height: 44px; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 0;
}
.m-header__menu-btn span {
    display: block; width: 22px; height: 2px; background: var(--m-primary);
    border-radius: 1px; transition: transform 0.3s, opacity 0.3s;
}
.m-header__menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-header__menu-btn.active span:nth-child(2) { opacity: 0; }
.m-header__menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== NAV DRAWER ========== */
.m-nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 950;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.m-nav-overlay.active { opacity: 1; visibility: visible; }

.m-nav-drawer {
    position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
    background: var(--m-primary-dark); z-index: 951;
    transition: right 0.35s cubic-bezier(0.22,1,0.36,1);
    display: flex; flex-direction: column; overflow-y: auto;
}
.m-nav-drawer.active { right: 0; }

.m-nav-drawer__head {
    padding: 20px 16px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.m-nav-drawer__head img { height: 36px; border-radius: 6px; }
.m-nav-drawer__head span { color: #fff; font-size: 14px; font-weight: 700; flex: 1; }
.m-nav-drawer__close {
    width: 36px; height: 36px; background: none; border: none;
    color: rgba(255,255,255,0.7); font-size: 28px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

.m-nav-drawer__list { padding: 8px 0; flex: 1; }
.m-nav-drawer__list a {
    display: block; padding: 14px 24px; color: rgba(255,255,255,0.88);
    font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s, color 0.2s;
}
.m-nav-drawer__list a:active,
.m-nav-drawer__list a.active { background: rgba(255,255,255,0.1); color: #fff; }

.m-nav-drawer__lang {
    padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; gap: 12px;
}
.m-nav-drawer__lang a {
    padding: 6px 16px; border-radius: 16px; font-size: 13px;
    color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08);
    transition: background 0.2s, color 0.2s;
}
.m-nav-drawer__lang a.active,
.m-nav-drawer__lang a:active { background: rgba(255,255,255,0.25); color: #fff; }

/* ========== FAB 聯繫按鈕 ========== */
.m-fab-contact {
    position: fixed; bottom: 24px; right: 16px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #018859, #00b86b);
    box-shadow: 0 4px 16px rgba(1,136,89,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 800; transition: transform 0.2s;
}
.m-fab-contact:active { transform: scale(0.92); }
.m-fab-contact svg { fill: #fff; }

/* ========== BANNER ========== */
.m-banner {
    background: linear-gradient(95deg, #018859 0%, #0079b9 100%);
    padding: 48px 20px 40px; text-align: center; color: #fff;
    position: relative; overflow: hidden;
}
.m-banner h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; position: relative; z-index: 2; margin: 0 0 6px; }
.m-banner p { font-size: 13px; opacity: 0.85; margin: 0; position: relative; z-index: 2; }

/* --- 泡泡動畫（banner 背景）--- */
.bubble-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bubble-bg .bubble { position: absolute; border-radius: 50%; opacity: 0; animation: bubbleRise linear infinite; }
@keyframes bubbleRise {
    0% { bottom: -20%; opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
    15% { opacity: 0.55; }
    50% { transform: translateY(-40vh) translateX(var(--drift, 0px)) scale(1); }
    85% { opacity: 0.3; }
    100% { bottom: 110%; opacity: 0; transform: translateY(-80vh) translateX(calc(var(--drift, 0px) * -0.5)) scale(0.8); }
}

/* ========== CARD ========== */
.m-card {
    background: var(--m-bg-white); border-radius: var(--m-radius);
    box-shadow: var(--m-shadow); padding: 20px 16px; margin-bottom: 16px;
}

/* ========== SECTION ========== */
.m-section { padding: 24px 0; }
.m-section--light { background: var(--m-bg-light); }
.m-section--white { background: var(--m-bg-white); }

/* ========== GRID ========== */
.m-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-grid-1 { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ========== 標題 ========== */
.m-chapter-title {
    font-size: 1.15rem; font-weight: 800; color: var(--m-primary);
    text-align: center; margin-bottom: 16px; position: relative;
}
.m-chapter-title::before {
    content: ''; display: block; width: 40px; height: 3px;
    background: linear-gradient(90deg, var(--m-primary), #0079b9); border-radius: 2px;
    margin: 0 auto 8px;
}

/* ========== CTA BUTTON ========== */
.m-btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px 24px;
    background: linear-gradient(135deg, #1a4680, #2563a8); color: #fff;
    border: none; border-radius: 30px; font-size: 1rem; font-weight: 700;
    text-decoration: none; text-align: center;
    box-shadow: 0 4px 16px rgba(26,70,128,0.25);
}
.m-btn-cta:active { transform: scale(0.97); }

/* ========== FOOTER ========== */
.m-foot {
    background: var(--m-primary-dark); padding: 20px 16px; text-align: center;
    padding-bottom: calc(20px + var(--m-safe-bottom));
}
.m-foot__links { margin-bottom: 12px; }
.m-foot__links a {
    color: rgba(255,255,255,0.75); font-size: 13px; margin: 0 12px;
    transition: color 0.2s;
}
.m-foot__links a:active { color: #fff; }
.m-foot__copy { font-size: 11px; color: rgba(255,255,255,0.45); }
.m-foot__desktop-link {
    display: inline-block; margin-top: 12px; font-size: 12px;
    color: rgba(255,255,255,0.35); text-decoration: underline;
}

/* ========== CONTACT MODAL（居中彈窗，2行2列）========== */
.m-contact-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(4px)}
.m-contact-modal-overlay.active{opacity:1;visibility:visible}
.m-contact-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:92vw;max-width:420px;max-height:85vh;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:9001;opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding-bottom:var(--m-safe-bottom,0px)}
.m-contact-modal.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.m-contact-modal__head{background:linear-gradient(135deg,#1a4680,#2563a8);padding:20px 24px 16px;text-align:center;color:#fff;position:relative;overflow:hidden;border-radius:20px 20px 0 0}
.m-contact-modal__head::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.08)}
.m-contact-modal__head::after{content:'';position:absolute;bottom:-20px;left:-20px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.06)}
.m-contact-modal__head-title{font-size:1.15rem;font-weight:800;letter-spacing:1px;position:relative;z-index:1}
.m-contact-modal__head-tag{display:inline-block;font-size:.72rem;background:rgba(255,255,255,.2);padding:3px 12px;border-radius:20px;margin-top:6px;letter-spacing:1px;position:relative;z-index:1}
.m-contact-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.25);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.m-contact-modal__close:active{background:rgba(255,255,255,.4)}
.m-contact-modal__body{padding:16px}
/* 2行2列網格 */
.m-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.m-contact-grid__item{background:#f9f9f9;border-radius:12px;overflow:hidden;padding:12px}
.m-contact-grid__head{display:inline-block;padding:3px 10px;border-radius:0 0 8px 8px;color:#fff;font-weight:700;font-size:12px;margin-bottom:8px}
.m-contact-grid__row{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--m-text-dark);padding:4px 0;line-height:1.5;cursor:pointer;position:relative}
.m-contact-grid__row svg{flex-shrink:0;margin-top:1px}
.m-contact-grid__row a{color:var(--m-primary);text-decoration:none}
/* 微信區 */
.m-contact-wechat{display:flex;align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg,#f9f9f9,#fff);border-radius:12px;border:1px solid #eee}
.m-contact-wechat__qr{flex-shrink:0;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #eee;background:#fff;display:flex;align-items:center;justify-content:center}
.m-contact-wechat__qr img{width:100%;height:100%;object-fit:cover}
.m-contact-wechat__info{flex:1;text-align:left}
.m-contact-wechat__label{font-size:12px;color:var(--m-text-medium);margin-bottom:4px}
.m-contact-wechat__id{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--m-text-dark);cursor:pointer}
.m-contact-wechat__id:active{opacity:.7}
.m-contact-wechat__copy-icon{width:16px;height:16px;opacity:.4;flex-shrink:0;transition:opacity .2s}
.m-contact-wechat__id:active .m-contact-wechat__copy-icon{opacity:.8}
/* 複製提示 */
.m-copy-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:rgba(0,0,0,.75);color:#fff;padding:10px 24px;border-radius:8px;font-size:14px;z-index:9999;opacity:0;transition:all .3s;pointer-events:none}
.m-copy-toast.active{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ========== EMPTY STATE ========== */
.m-empty {
    text-align: center; padding: 60px 20px;
    color: var(--m-text-light); font-size: 15px;
}

/* ========== PAGINATOR ========== */
.m-paginator {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; margin-top: 24px; padding: 16px 0; flex-wrap: wrap;
}
.m-paginator a,
.m-paginator .cpb,
.m-paginator span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px;
    font-size: 14px; text-decoration: none;
    border: 1px solid #e0e0e0; background: var(--m-bg-white); color: var(--m-text-dark);
}
.m-paginator a:active { border-color: var(--m-primary); color: var(--m-primary); }
.m-paginator .cpb {
    background: var(--m-primary); color: #fff; border-color: var(--m-primary); font-weight: 700;
}

/* ========== NEWS ITEM (mobile) ========== */
.m-news-item {
    display: block; background: var(--m-bg-white); border-radius: var(--m-radius);
    padding: 16px; margin-bottom: 12px; box-shadow: var(--m-shadow);
    text-decoration: none; color: inherit;
}
.m-news-item__date {
    font-size: 12px; color: var(--m-primary); font-weight: 700; margin-bottom: 6px;
}
.m-news-item__title {
    font-size: 15px; font-weight: 700; color: var(--m-text-dark); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-news-item__summary {
    font-size: 13px; color: var(--m-text-medium); line-height: 1.6; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ========== CAR CARD (mobile) ========== */
.m-car-card {
    display: block; background: var(--m-bg-white); border-radius: var(--m-radius);
    overflow: hidden; box-shadow: var(--m-shadow); text-decoration: none; color: inherit;
}
.m-car-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #f5f5f5; }
.m-car-card__img--empty {
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 13px;
}
.m-car-card__body { padding: 10px 12px; }
.m-car-card__name {
    font-size: 13px; font-weight: 600; color: var(--m-text-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.m-car-card__price {
    font-size: 15px; font-weight: 700; color: var(--m-accent); text-align: center; margin-top: 4px;
}
.m-car-card__price span { font-size: 11px; font-weight: 400; }

/* ========== CASE CARD (mobile) ========== */
.m-case-card {
    break-inside: avoid; margin-bottom: 8px; border-radius: 10px;
    overflow: hidden; background: var(--m-bg-white); box-shadow: var(--m-shadow); cursor: pointer;
}
.m-case-card img { width: 100%; display: block; }

/* ========== PHOTO SECTION (cars_info mobile) ========== */
.m-photo-section { margin-bottom: 20px; }
.m-photo-section__head {
    font-size: 14px; font-weight: 700; color: var(--m-text-dark);
    padding: 10px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 10px;
}
.m-photo-section__head::before {
    content: ''; display: inline-block; width: 3px; height: 14px;
    background: var(--m-accent); border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.m-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-photo-grid img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;
    cursor: pointer; transition: opacity 0.2s;
}
.m-photo-grid img:active { opacity: 0.8; }

/* ========== CAR INFO (cars_info mobile) ========== */
.m-car-info { background: var(--m-bg-white); border-radius: var(--m-radius); padding: 16px; box-shadow: var(--m-shadow); margin-bottom: 16px; }
.m-car-info__price { font-size: 24px; font-weight: 700; color: var(--m-accent); margin-bottom: 12px; }
.m-car-info__price span { font-size: 13px; font-weight: 400; }
.m-car-info__row { display: flex; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.m-car-info__label { color: var(--m-text-light); width: 70px; flex-shrink: 0; }
.m-car-info__value { color: var(--m-text-dark); font-weight: 500; }
.m-car-info__remark { margin-top: 12px; padding: 12px; background: #f9f9f9; border-radius: 8px; font-size: 13px; color: var(--m-text-medium); line-height: 1.6; }

/* ========== LIGHTBOX (mobile) ========== */
.m-lb-overlay {
    display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.92);
    z-index: 9999; justify-content: center; align-items: center;
    visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s;
}
.m-lb-overlay.active { visibility: visible; opacity: 1; }
.m-lb-overlay img { max-width: 95vw; max-height: 85vh; border-radius: 6px; display: block; user-select: none; }
.m-lb-close {
    position: fixed; top: 16px; right: 16px; color: #fff; font-size: 36px;
    cursor: pointer; z-index: 10001; opacity: 0.6; line-height: 1; user-select: none;
    display: none;
}
.m-lb-close.active { display: block; }
.m-lb-close:active { opacity: 1; }
.m-lb-prev, .m-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 40px; cursor: pointer; z-index: 10001;
    opacity: 0.5; user-select: none; padding: 0 12px; line-height: 1;
}
.m-lb-prev { left: 4px; }
.m-lb-next { right: 4px; }
.m-lb-prev:active, .m-lb-next:active { opacity: 1; }
.m-lb-counter {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 12px; background: rgba(0,0,0,0.45);
    padding: 4px 14px; border-radius: 12px; z-index: 10001;
}

/* ========== CTA BAR (cars_info mobile) ========== */
.m-cta-bar { padding: 24px 16px; background: var(--m-bg-light); }
.m-cta-bar__inner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(90deg, #e85d4c 0%, #d94e8f 50%, #a855c7 100%);
    border-radius: 12px; padding: 24px 20px; box-shadow: var(--m-shadow-lg);
}
.m-cta-bar__icon { flex-shrink: 0; }
.m-cta-bar__text { flex: 1; }
.m-cta-bar__title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; line-height: 1.4; }
.m-cta-bar__desc { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 4px; }
.m-cta-bar__arrow { flex-shrink: 0; }

/* ========== SERVICE PAGE CONTENT (mobile) ========== */
.m-service-content {
    background: var(--m-bg-white); border-radius: var(--m-radius);
    padding: 20px 16px; box-shadow: var(--m-shadow); margin-bottom: 16px;
    font-size: 15px; line-height: 1.8; color: var(--m-text-dark);
}
.m-service-content h2, .m-service-content h3 {
    color: var(--m-primary); margin: 16px 0 8px;
}
.m-service-content ul, .m-service-content ol {
    padding-left: 20px; margin: 8px 0;
}
.m-service-content li { margin-bottom: 4px; }
.m-service-content img { border-radius: 8px; margin: 12px 0; }
.m-service-content table {
    width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px;
}
.m-service-content table th, .m-service-content table td {
    border: 1px solid #e0e0e0; padding: 8px; text-align: left;
}
.m-service-content table th { background: var(--m-bg-light); font-weight: 700; }

/* ========== FLOATING CTA BUTTON ========== */
.m-fab-cta{position:fixed;bottom:0;left:0;right:0;z-index:8000;padding:10px 16px;padding-bottom:calc(10px + var(--m-safe-bottom,0px));background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 20%,#fff 100%)}
.m-fab-cta__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;background:linear-gradient(90deg,#e85d4c 0%,#d94e8f 50%,#a855c7 100%);color:#fff;border:none;border-radius:30px;font-size:1rem;font-weight:700;text-decoration:none;text-align:center;box-shadow:0 4px 16px rgba(233,93,76,.3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-fab-cta__btn:active{transform:scale(.97)}