/* =====================================================================
   Razex – Responsive layer (โหลดหลัง theme.css ทุกหน้า)
   เป้าหมาย: ใช้งานได้ดีบนมือถือ (360px ขึ้นไป) ไม่มี scroll แนวนอนที่ไม่ตั้งใจ
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ปุ่มสัมผัสง่าย มีพื้นที่กดอย่างน้อย 44px ตามมาตรฐานมือถือ */
.btn {
    touch-action: manipulation;
}

input, select, textarea, button {
    font-size: 16px; /* กัน iOS ซูมอัตโนมัติเมื่อโฟกัสช่องกรอก */
}

/* ---------- ทุกขนาดจอที่เล็กกว่าแท็บเล็ต ---------- */
@media (max-width: 991.98px) {
    body {
        background-attachment: scroll !important; /* background-attachment: fixed หน่วงมากบนมือถือ */
    }
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .modal-dialog {
        margin: 0.75rem;
    }
}

/* ---------- มือถือ (ต่ำกว่า 768px) ---------- */
@media (max-width: 767.98px) {
    body {
        font-size: 15px;
        overflow-x: hidden;
    }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }

    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .btn-sm {
        min-height: 36px;
    }
    .btn.w-100 {
        width: 100% !important;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer > .btn {
        flex: 1 1 auto;
    }

    /* ป๊อปอัปแจ้งเตือน (SweetAlert) ให้พอดีจอ */
    .swal2-popup {
        width: 92vw !important;
        max-width: 420px;
        padding: 1.2em !important;
    }

    /* ช่องค้นหา / ฟอร์มซ้อนเป็นคอลัมน์เดียว */
    .form-control, .form-select {
        min-height: 44px;
    }

    /* วงล้อ: ย่อให้พอดีจอ */
    .wheel-wrapper {
        max-width: 100%;
    }
    canvas#wheelCanvas {
        width: min(86vw, 400px) !important;
        height: auto !important;
    }

    /* ฟุตเตอร์หลายคอลัมน์ (ใช้ในหน้าวงล้อ) */
    .ft2-main {
        grid-template-columns: 1fr 1fr !important;
        padding: 32px 20px !important;
        gap: 28px !important;
    }
    .ft2-logo-wrap {
        width: 120px !important;
        height: 120px !important;
    }
    .ft2-bottom {
        padding: 20px 16px !important;
    }
    .ft2-ticker-item {
        font-size: 11px !important;
    }
    .ft2-main > div:first-child {
        grid-column: 1 / -1;
    }

    /* การ์ดสินค้า / panel ที่ใช้ padding มาก ให้ลดลง */
    .bg-light.p-5 {
        padding: 1.5rem !important;
    }
    .bg-light.p-4 {
        padding: 1rem !important;
    }
}

/* ---------- มือถือเล็กมาก (ต่ำกว่า 480px) ---------- */
@media (max-width: 479.98px) {
    .ft2-main {
        grid-template-columns: 1fr !important;
    }
    .ft2-brand-name {
        font-size: 24px !important;
    }
    .bg-light.p-5 {
        padding: 1.1rem !important;
    }
}

/* =====================================================================
   หน้าแอดมิน (admin.php)
   ===================================================================== */
@media (max-width: 767.98px) {
    /* เมนูแอดมิน: เลื่อนแนวนอนได้ ไม่ขึ้นบรรทัดใหม่ */
    .admin-sidebar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .admin-sidebar::-webkit-scrollbar {
        display: none;
    }
    .admin-sidebar a {
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .admin-sidebar .sidebar-divider {
        display: none;
    }

    .admin-panel-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .admin-panel-header h4 {
        font-size: 1rem;
    }
    .admin-panel-body {
        padding: 12px !important;
    }
    .admin-table {
        font-size: 13px;
    }
    .admin-table td, .admin-table th {
        white-space: nowrap;
    }
    .stat-card .stat-num {
        font-size: 20px;
    }
    .stat-card .stat-label {
        font-size: 11px;
    }
    .rev-chart {
        height: 150px;
        gap: 4px;
        padding: 8px;
    }
    .rev-val {
        font-size: 9px;
    }
    .rev-day {
        font-size: 10px;
    }
    .adm-search {
        max-width: 100%;
    }
    .admin-topbar, .admin-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.pm-balance-status{position:fixed;right:18px;bottom:18px;z-index:999990;display:flex;flex-direction:column;gap:2px;max-width:min(300px,calc(100vw - 36px));padding:12px 16px;border:1px solid rgba(30,120,90,.2);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 32px rgba(15,23,42,.16);backdrop-filter:blur(12px);color:#14251f;font-family:Kanit,sans-serif}.pm-balance-label{font-size:12px;color:#66756f}.pm-balance-value{font-size:17px;font-weight:700;color:#11734d}@media(max-width:600px){.pm-balance-status{right:12px;bottom:12px;padding:9px 12px}.pm-balance-value{font-size:15px}}




/* Standalone wallet pill beside account controls; no extra tab/row and no floating overlay */
.site-wallet-pill{position:static;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 13px;margin:0 9px 0 0;border:1px solid rgba(14,165,233,.2);border-radius:999px;background:linear-gradient(180deg,#fff,#f3fbfe);box-shadow:0 3px 12px rgba(15,23,42,.08);color:#168fb9;text-decoration:none;white-space:nowrap;vertical-align:middle;transition:transform .18s ease,box-shadow .18s ease}.site-wallet-pill:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,23,42,.12);color:#087fa8}.site-wallet-icon{width:18px;height:18px;fill:#20b7e8;flex:0 0 auto}.site-wallet-amount{font-size:14px;font-weight:700;color:#138db8}.site-wallet-fallback{margin:12px 16px 0 auto;width:max-content}@media(max-width:600px){.site-wallet-pill{height:36px;padding:0 9px;gap:5px;margin-right:6px}.site-wallet-amount{font-size:13px}.site-wallet-icon{width:16px;height:16px}}

.site-wallet-nav-item{display:flex;align-items:center;margin:0 4px}.site-wallet-nav-item .site-wallet-pill{margin:0 8px 0 0}

.site-wallet-fallback{position:fixed!important;top:8px;right:10px;z-index:1100;margin:0!important;width:auto!important;pointer-events:auto}