/* ============================================================
   TukTuket — Mobile App UI  (โหลดคู่กับ style.css)
   โทนสีจากโลโก้: ฟ้า (--tt-blue) + เหลือง (--tt-yellow)
   ทำงานเฉพาะจอ ≤ 767.98px — จอใหญ่กว่านี้ใช้เว็บปกติ
   ============================================================ */

/* helper: แสดง/ซ่อนตามอุปกรณ์ (base = โชว์เฉพาะ desktop) */
.only-mobile { display: none !important; }

@media (max-width: 767.98px) {
    .only-desktop { display: none !important; }
    .only-mobile  { display: block !important; }
    .only-mobile.d-flex { display: flex !important; }

    :root {
        --m-brand-grad: linear-gradient(145deg, #1f8fff 0%, #0b5ed7 55%, #0a3f9e 100%);
        --m-brand-shadow: rgba(11, 94, 215, 0.30);
    }

    body {
        background: #f2f3f5;
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    /* ── ซ่อน chrome ของเว็บ desktop ─────────────────────────── */
    .navbar-ets,
    .footer-ets { display: none !important; }

    .container { padding-left: 14px; padding-right: 14px; }

    /* ตัด padding แนวตั้งของ section ให้กระชับ */
    section.py-5 { padding-top: 1.35rem !important; padding-bottom: 1.35rem !important; }
    section { scroll-margin-top: 70px; }

    /* หัวข้อ section ให้เล็กลง อ่านง่ายบนมือถือ */
    section h2 { font-size: 1.15rem !important; line-height: 1.4; }
    section .fs-1 { font-size: 1.4rem !important; }

    /* ── App bar (หน้าใน) ───────────────────────────────────── */
    .m-appbar {
        position: sticky; top: 0; z-index: 1030;
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px calc(12px);
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        background: var(--m-brand-grad);
        color: #fff;
        box-shadow: 0 2px 12px var(--m-brand-shadow);
    }
    .m-appbar a.m-back {
        color: #fff; font-size: 1.4rem; line-height: 1;
        display: flex; align-items: center; text-decoration: none;
    }
    .m-appbar .m-appbar-title {
        font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 1.05rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }
    .m-appbar a.m-appbar-act { color: #fff; font-size: 1.25rem; text-decoration: none; }
    body.page-home .m-appbar { display: none !important; }

    /* ── หน้าแรก: ส่วนหัวแบบแอป ─────────────────────────────── */
    .m-hero {
        background: var(--m-brand-grad);
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 58px;
        color: #fff;
        border-bottom-left-radius: 26px;
        border-bottom-right-radius: 26px;
    }
    .m-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .m-hero-brand { display: inline-flex; align-items: center; }
    .m-hero-brand .tt-wordmark { font-size: 1.4rem; }
    .m-hero-brand .tt-wordmark .tt-w1 { color: #fff; }
    .m-hero-brand .tt-wordmark .tt-w2 { color: #bcdcff; }
    .m-hero-brand .tt-wordmark .tt-pin { color: var(--tt-yellow, #ffc02e); }
    .m-hero-bell { position: relative; color: #fff; font-size: 1.55rem; text-decoration: none; display: flex; }
    .m-hero-bell .m-dot {
        position: absolute; top: -2px; right: -3px; width: 8px; height: 8px;
        background: var(--tt-yellow, #ffc02e); border-radius: 50%; border: 2px solid #0b5ed7;
    }
    .m-hero form { position: relative; }
    .m-hero .m-search {
        width: 100%; border: 0; border-radius: 14px;
        padding: 12px 14px 12px 42px; font-size: .95rem;
        background: #fff; color: #1f2937; box-shadow: 0 6px 18px rgba(0,0,0,.12);
    }
    .m-hero .m-search::placeholder { color: #9ca3af; }
    .m-hero .m-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tt-blue, #1f8fff); font-size: 1.05rem; }

    /* Quick actions (โอนเงิน/รับเงิน สไตล์) */
    .m-quick {
        margin: -40px 14px 0;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
        padding: 16px 6px 14px;
        display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 4px;
        position: relative; z-index: 2;
    }
    .m-quick a {
        display: flex; flex-direction: column; align-items: center; gap: 7px;
        text-decoration: none; color: #374151; font-size: .74rem; font-weight: 500;
        text-align: center; line-height: 1.25;
    }
    .m-quick .m-qic {
        width: 46px; height: 46px; border-radius: 15px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem;
        background: var(--tt-blue-soft, #eaf3ff);
        color: var(--tt-blue-mid, #0b5ed7);
    }
    .m-quick .m-qic-alt {
        background: #fff5da;
        color: var(--tt-yellow-deep, #f0a500);
    }

    /* การ์ดสถิติ (เลขคิว/ร้าน/จังหวัด) */
    .m-stats {
        margin: 12px 14px 0;
        background: #fff; border-radius: 18px;
        box-shadow: 0 2px 12px rgba(15,23,42,.06);
        display: flex !important; text-align: center; padding: 14px 4px;
    }
    .m-stats > div { flex: 1; position: relative; }
    .m-stats > div + div::before {
        content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: #e5e7eb;
    }
    .m-stats .m-stat-num { font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 1.15rem; color: #0f172a; }
    .m-stats .m-stat-lbl { font-size: .68rem; color: #6b7280; margin-top: 2px; }

    /* ── การ์ด section ทั่วไป ───────────────────────────────── */
    section.bg-light, section.bg-white { background: transparent !important; border: 0 !important; }

    section .d-flex.justify-content-between.align-items-end { align-items: center !important; margin-bottom: .85rem !important; }
    section .badge.rounded-pill.mb-1 { font-size: .68rem; }

    /* เลื่อนแนวนอน (ร้านแนะนำ / โปรโมชัน / รีวิว) */
    .m-hscroll {
        display: flex !important; flex-wrap: nowrap !important;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 12px; margin: 0 -14px; padding: 4px 14px 10px;
        scrollbar-width: none;
    }
    .m-hscroll::-webkit-scrollbar { display: none; }
    .m-hscroll > [class*="col-"] {
        flex: 0 0 82% !important; max-width: 82% !important;
        width: 82% !important; padding: 0 !important; scroll-snap-align: start;
    }
    .m-hscroll > [class*="col-"]:last-child { margin-right: 2px; }

    /* ร้านแนะนำ card ให้เตี้ยลง */
    .shop-card-img-wrapper { height: 130px !important; }
    .shop-card-body { padding: 12px !important; }
    .shop-card-body h5 { font-size: 1rem !important; }

    /* หมวดหมู่บริการ: กริด 3 คอลัมน์ กระชับ */
    section .row.g-3 > .col-6.col-md-4 { width: 33.3333% !important; }
    .category-card { padding: 12px 6px !important; }
    .category-icon-wrapper { width: 46px !important; height: 46px !important; font-size: 1.2rem !important; }
    .category-card h6 { font-size: .78rem !important; }
    .category-card span { display: none; }

    /* โปรโมชันการ์ด */
    .border-dashed { flex-wrap: wrap; gap: 6px; }

    /* แบนเนอร์ dark near-me + hero desktop: ซ่อน (มีใน quick action + tab แล้ว) */
    /* จัดการผ่าน class only-desktop ใน view */

    /* CTA ร้านค้า: กระชับ */
    section.bg-white.border-top .col-lg-4 { text-align: left !important; }
    section.bg-white.border-top .btn-lg { width: 100%; margin-top: 10px; }

    /* ── Bottom Tab Bar ─────────────────────────────────────── */
    .m-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: flex; align-items: stretch;
        background: #fff;
        border-top: 1px solid #eef0f2;
        box-shadow: 0 -3px 18px rgba(15, 23, 42, .07);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .m-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 2px 7px;
        text-decoration: none; color: #94a3b8; font-size: .66rem; font-weight: 500;
    }
    .m-tabbar a i { font-size: 1.3rem; }
    .m-tabbar a.active { color: var(--tt-blue-mid, #0b5ed7); }
    .m-tabbar a.active i { transform: translateY(-1px); }

    /* ปุ่มกลาง (ใกล้ฉัน) ยกลอย */
    .m-tabbar a.m-tab-center { position: relative; }
    .m-tabbar a.m-tab-center .m-tab-fab {
        width: 50px; height: 50px; margin-top: -22px; margin-bottom: 1px;
        border-radius: 50%;
        background: var(--m-brand-grad);
        color: #fff; display: flex; align-items: center; justify-content: center;
        font-size: 1.45rem;
        box-shadow: 0 6px 16px rgba(11, 94, 215, .4);
        border: 4px solid #fff;
    }
    .m-tabbar a.m-tab-center.active { color: var(--tt-blue-mid, #0b5ed7); }

    /* flash message ให้ลอยเหนือ content ไม่ดันเลย์เอาต์ */
    .flash-wrap { position: fixed; left: 12px; right: 12px; top: 64px; z-index: 1050; }
}

/* ════════ หน้าอื่น ๆ (ค้นหา / ใกล้ฉัน / จองคิว / บัญชี / ร้าน) ════════ */
@media (max-width: 767.98px) {

    /* หน้าที่มี hero ของตัวเอง → ซ่อน app bar (กันหัวซ้ำ) */
    body:has(.inner-hero) .m-appbar { display: none !important; }

    /* dark hero ของหน้าใน → บีบให้กระชับ + เปลี่ยนเป็นไล่สีแดง */
    .inner-hero {
        background: var(--m-brand-grad) !important;
        border-bottom: 0 !important;
        border-radius: 0 0 20px 20px;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 0 16px !important;
        box-shadow: 0 2px 12px rgba(11, 94, 215, .22);
    }
    .inner-hero .text-dtac-blue { color: var(--tt-yellow, #ffc02e) !important; }
    .inner-hero h1 { font-size: 1.15rem !important; }
    .inner-hero p, .inner-hero .badge { display: none !important; }
    .inner-hero .breadcrumb { display: none !important; }
    .inner-hero .col-md-4, .inner-hero .col-md-5, .inner-hero .col-md-7, .inner-hero .col-md-8 { text-align: left !important; }
    .inner-hero .btn { margin-top: 8px; }

    /* ── ค้นหาร้าน ─────────────────────────────────────────── */
    body.page-search .container.py-4 > .row.g-4 { --bs-gutter-x: 0; }

    /* แถบค้นหา + ลิ้นชักตัวกรอง (แทน sidebar เดิมบนมือถือ) */
    body.page-search .tt-msearch .input-group-text { padding-right: 2px; }
    body.page-search .tt-msearch .form-control { font-size: .9rem; box-shadow: none; }
    #filterDrawer { width: 86vw !important; max-width: 360px; }
    #filterDrawer .form-select { font-size: .9rem; }

    /* ผลลัพธ์: 2 การ์ดต่อแถว + การ์ดแบบกระชับ */
    body.page-search .shop-grid { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
    body.page-search .shop-grid .shop-card-img-wrapper { height: 100px !important; }
    body.page-search .shop-grid .shop-card-body { padding: 9px 10px 10px !important; }
    body.page-search .shop-grid .shop-card-body > .d-flex.mb-2 { flex-wrap: wrap; gap: 3px; margin-bottom: 4px !important; }
    body.page-search .shop-grid .shop-card-body .badge { font-size: .6rem; padding: .2em .45em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.page-search .shop-grid .shop-card-body h5 { font-size: .82rem !important; margin-bottom: 2px !important; white-space: normal; }
    body.page-search .shop-grid .shop-card-body > p { display: none !important; }              /* tagline */
    body.page-search .shop-grid .shop-card-body .text-secondary { font-size: .66rem !important; margin-bottom: 8px !important; }
    body.page-search .shop-grid .shop-card-body .mt-auto.pt-3 {
        flex-direction: column; align-items: stretch !important; gap: 6px; padding-top: 8px !important;
    }
    body.page-search .shop-grid .shop-card-body .mt-auto .fs-5 { font-size: .95rem !important; }
    body.page-search .shop-grid .shop-card-body .mt-auto .font-small.text-muted { font-size: .62rem !important; }
    body.page-search .shop-grid .shop-card-body .mt-auto > .d-flex.gap-2 {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    body.page-search .shop-grid .shop-card-body .mt-auto .btn { width: 100%; padding: 5px 2px; font-size: .72rem; }
    body.page-search .shop-grid .shop-card-body .mt-auto .btn i { display: none; }

    /* ── ใกล้ฉัน (Trip.com Fullscreen Experience) ────────── */
    body.page-near-me {
        padding-bottom: 0 !important;
        overflow: hidden;
    }
    body.page-near-me .footer-ets {
        display: none !important;
    }
    body.page-near-me .nearme-fullscreen-wrapper {
        height: calc(100vh - 60px) !important;
    }

    /* ── จองคิว ────────────────────────────────────────────── */
    body.page-booking { padding-bottom: 0; }
    body.page-booking .m-tabbar { display: none !important; }
    body.page-booking .card { border-radius: 14px !important; margin-bottom: 12px !important; }
    body.page-booking .card-body { padding: 14px !important; }
    body.page-booking h5 { font-size: 1rem !important; }
    body.page-booking .badge.rounded-circle { padding: 3px 10px !important; font-size: .82rem; }
    body.page-booking .vehicle-selector-btn { padding: 9px 4px !important; }
    body.page-booking .vehicle-selector-btn i { font-size: 1.3rem !important; }
    body.page-booking #slotsContainer > [class*="col-"] { flex: 0 0 25%; max-width: 25%; }
    body.page-booking .position-sticky { position: static !important; top: auto !important; }
    body.page-booking .col-lg-4 { padding-bottom: 84px; }
    body.page-booking #btnSubmitBooking { display: none !important; }

    .m-booking-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
        display: flex; align-items: center; gap: 12px;
        background: #fff; border-top: 1px solid #eef0f2;
        box-shadow: 0 -4px 20px rgba(0,0,0,.09);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .m-booking-bar .m-bar-total { flex: 1; line-height: 1.25; }
    .m-booking-bar .m-bar-total small { display: block; font-size: .66rem; color: #6b7280; }
    .m-booking-bar .m-bar-total b { font-family: 'Kanit', sans-serif; font-size: 1.15rem; color: var(--tt-blue-mid, #0b5ed7); }

    /* ── บัญชี / ประวัติการจอง ─────────────────────────────── */
    body.page-account .col-lg-3 .card.text-center { border-radius: 16px !important; padding: 16px !important; margin-bottom: 12px !important; }
    body.page-account .col-lg-3 .list-group {
        flex-direction: row; overflow-x: auto; gap: 8px;
        border: 0 !important; box-shadow: none !important; margin-bottom: 12px;
        scrollbar-width: none;
    }
    body.page-account .col-lg-3 .list-group::-webkit-scrollbar { display: none; }
    body.page-account .col-lg-3 .list-group > form { flex: 0 0 auto; }
    body.page-account .col-lg-3 .list-group-item {
        border-radius: 999px !important; border: 1px solid var(--border-color) !important;
        padding: 7px 15px !important; font-size: .82rem; white-space: nowrap; width: auto !important;
    }
    body.page-account .card-body { padding: 16px !important; }
    body.page-account .card-body h4 { font-size: 1.05rem !important; }
    .m-booking-list .m-bk {
        display: block; background: #fff; border: 1px solid var(--border-color);
        border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; text-decoration: none;
        box-shadow: 0 2px 10px rgba(15,23,42,.05); color: inherit;
    }
    .m-booking-list .m-bk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .m-booking-list .m-bk-no { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--tt-blue-mid, #0b5ed7); font-weight: 700; }
    .m-booking-list .m-bk-shop { font-weight: 700; font-size: .95rem; }
    .m-booking-list .m-bk-meta { font-size: .8rem; color: #6b7280; margin-top: 2px; }
    .m-booking-list .m-bk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
    .m-booking-list .m-bk-net { font-family: 'Kanit', sans-serif; font-weight: 700; }

    /* ── หน้าร้าน: แถบจองคิวลอยล่าง ─────────────────────────── */
    body.page-shops { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
    body.page-shops .m-tabbar { display: none !important; }
    .m-shopbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
        display: flex; gap: 10px; align-items: center;
        background: #fff; border-top: 1px solid #eef0f2;
        box-shadow: 0 -4px 20px rgba(0,0,0,.09);
        padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    }
    .m-shopbar .m-sb-price { flex: 1; line-height: 1.2; }
    .m-shopbar .m-sb-price small { display: block; font-size: .64rem; color: #6b7280; }
    .m-shopbar .m-sb-price b { font-family: 'Kanit', sans-serif; font-size: 1.05rem; color: var(--tt-blue-mid, #0b5ed7); }
    .m-shopbar .btn { flex: 0 0 auto; }

    /* หน้าร้าน: carousel เตี้ยลงนิด */
    #shopGallery .carousel-item img { height: 240px !important; }

    /* ── auth (login / register / ลืมรหัสผ่าน) ─────────────── */
    body.page-login .container.py-5, body.page-register .container.py-5,
    body.page-register-shop .container.py-5, body.page-forgot-password .container.py-5,
    body.page-reset-password .container.py-5 { padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
    body.page-login .card.shadow-xl, body.page-register .card.shadow-xl,
    body.page-forgot-password .card.shadow-xl, body.page-reset-password .card.shadow-xl {
        box-shadow: 0 4px 20px rgba(15,23,42,.08) !important;
    }
}

/* จอ ≥ 768px: กันพลาด ให้ mobile chrome หายแน่นอน */
@media (min-width: 768px) {
    .m-tabbar, .m-appbar, .m-hero, .m-quick, .m-stats,
    .m-booking-bar, .m-shopbar { display: none !important; }
}