/* ════════════════════════════════════════════════════════════
   AO-GAMES — Global mobile responsiveness layer
   Loaded on every page via template/header.php
   Mobile-first overrides for Bootstrap 5 / Metronic v8 / custom widgets
   ════════════════════════════════════════════════════════════ */

/* ───────────── Universal safety net ───────────── */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}
img.show-spin,
.wheel-canvas, .easywheel canvas, canvas.wheel {
    height: auto;
}
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Prevent iOS auto-zoom on focus by ensuring inputs are ≥16px */
@media (max-width: 575.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]),
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}

/* ───────────── Tables — always horizontally scrollable on mobile ───────────── */
@media (max-width: 767.98px) {
    .table-responsive,
    .dataTables_wrapper > .dataTables_scroll,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Only force a min-width for tables that don't already declare a custom mobile layout */
    .table-responsive > table:not(.as-table):not([data-no-min]) { min-width: 480px; }
    .dataTables_wrapper table.dataTable { min-width: 480px; }
    /* DataTables length/filter/pagination controls */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: .35em .7em !important;
        font-size: .82rem !important;
    }
}

/* ───────────── Bootstrap container tightening ───────────── */
@media (max-width: 575.98px) {
    .container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .py-6, .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .mb-8 { margin-bottom: 1.5rem !important; }
    .mb-6 { margin-bottom: 1rem !important; }
    .g-4 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
}

/* ───────────── SweetAlert / Swal2 popups ───────────── */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: 92vw !important;
        max-width: 360px !important;
        padding: 1.1em !important;
        font-size: .92rem !important;
        border-radius: 14px !important;
    }
    .swal2-popup .swal2-title { font-size: 1.05rem !important; }
    .swal2-popup .swal2-html-container { font-size: .88rem !important; }
    .swal2-actions { gap: 8px; }
    .swal2-actions .btn { padding: 9px 16px !important; font-size: .85rem !important; }
    .swal2-image { max-width: 100% !important; height: auto !important; }
}

/* ───────────── Bootstrap modal — full screen on tiny phones ───────────── */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 12px;
        max-width: calc(100vw - 24px);
    }
    .modal-content { border-radius: 16px; }
    .modal-body { padding: 16px 14px; }
    .modal-header, .modal-footer { padding: 12px 14px; }
}

/* ───────────── Public navbar — wrap & shrink ───────────── */
@media (max-width: 575.98px) {
    /* Logo */
    .ao-logo-icon { width: 30px !important; height: 30px !important; font-size: .9rem !important; }
    .ao-logo-name { font-size: 1rem !important; }

    /* Header search (shrink) */
    #kt_header_search input.form-control { font-size: 16px !important; }

    /* Avatar trigger */
    .ao-utrig { width: 36px !important; height: 36px !important; }

    /* User dropdown — narrower + pinned to viewport right edge.
       KTMenu sets inline `inset` + `transform` from Popper based on the trigger
       (avatar at screen-right), which can push the dropdown off-screen on
       mobile. Pin to the viewport explicitly. NOTE: do not use the `inset`
       shorthand here — it resets top/right/bottom/left and conflicts with the
       individual declarations above. */
    #kt_header_user_menu_toggle .menu.menu-sub-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 88vw !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }
    #kt_header_user_menu_toggle .symbol.symbol-50px { width: 56px !important; height: 56px !important; }

    /* Header height */
    #kt_header { min-height: 56px; }
    #kt_header .container-xxl { min-height: 56px; }

    /* Category dropdown menu inside navbar */
    .ao-dd-menu {
        min-width: 0 !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* "Contact" CTA — shrink the visual */
    .ao-contact-btn {
        padding: 8px 14px !important;
        font-size: .76rem !important;
    }
}

/* ≤ 991px : tablet+phone — make sure dropdown menu inside drawer is full width */
@media (max-width: 991.98px) {
    .ao-dd-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        background: #f8faff !important;
        margin: 4px 0 8px !important;
        border: 1px solid #e0e7f5 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .ao-dd-menu::before { display: none !important; }
}

/* ───────────── Admin sidebar (mobile drawer overlap fix) ───────────── */
@media (max-width: 991.98px) {
    .ao-sidebar { width: 84vw !important; max-width: 300px !important; }
}

/* ───────────── Admin topbar — keep search visible on phones ───────────── */
@media (max-width: 575.98px) {
    .ao-topbar { padding: 0 10px !important; gap: 6px !important; }
    .ao-topbar-toggle { width: 34px !important; height: 34px !important; }
    .ao-search-wrap { margin: 0 2px !important; }
    .ao-search-box { height: 36px !important; font-size: 16px !important; padding-left: 34px !important; }
    .ao-search-icon { left: 11px !important; font-size: .76rem !important; }
    .ao-user-btn { padding: 4px !important; }
    .ao-user-avatar { width: 28px !important; height: 28px !important; font-size: .72rem !important; }
    .ao-user-dropdown { width: 240px !important; right: -6px; }
}

/* ───────────── Admin DataTables/cards — generic tightening ───────────── */
@media (max-width: 575.98px) {
    /* DataTable card wrapping */
    .ap-tbl, .ap-card, .adm-card, .cfg-card, .uc-card, .stk-card, .key-card,
    .au-card, .as-card, .ak-card, .ord-card, .tp-card, .tr-card, .news-card {
        border-radius: 14px !important;
    }
    /* Generic action buttons (.ap-edit-btn .ap-del-btn .ap-info-btn .stk-btn etc.) */
    [class*="-btn"]:not(.btn):not(.tp-card-btn):not(.pf-btn):not(.auth-btn):not(.hp-btn-main):not(.hp-btn-sub):not(.ao-footer-btn) {
        min-height: 36px;
    }
    /* Small icon-only buttons should remain ≥36px square */
    .ap-edit-btn, .ap-del-btn, .ap-info-btn,
    .stk-edit-btn, .stk-del-btn,
    .key-act-btn, .key-edit, .key-del,
    .uc-edit, .uc-del,
    .news-edit, .news-del {
        min-width: 36px;
        min-height: 36px;
    }

    /* Admin live-search inputs: force full width even with inline width:NNNpx */
    .au-search-box, .ak-input, .as-search-box, .ord-search-box,
    .key-search-box, .uc-search-box, .news-search-box,
    input[id$="_live_search"], input[id$="_search"] {
        width: 100% !important;
        font-size: 16px !important;
    }

    /* Admin card top — wrap controls into separate rows */
    .au-card-top, .as-card-top, .ak-card-top, .ord-header, .key-card-top,
    .uc-card-top, .news-card-top, .tr-card-top, .ap-tbl-top {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    .au-card-top > div:last-child, .ord-header > div:last-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Pagination touch targets ≥36px on mobile */
    .au-pagi a, .au-pagi span,
    .pagi-btns a, .pagi-btns span {
        min-width: 36px !important;
        height: 36px !important;
        font-size: .8rem !important;
    }

    /* Admin pagination wrap stacks */
    .au-pagi-wrap, .pagi-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }
    .au-pagi, .pagi-btns { justify-content: center !important; }
}

/* ───────────── Forms — stack side-by-side fields ───────────── */
@media (max-width: 575.98px) {
    .row.gx-4 > [class*="col-"]:not(:last-child),
    .row.gx-3 > [class*="col-"]:not(:last-child) {
        margin-bottom: 12px;
    }
    /* Inline button rows */
    .d-flex.gap-2 > .btn, .d-flex.gap-3 > .btn {
        flex: 1 1 auto;
    }
}

/* ───────────── Game.php spin wheel — consolidate breakpoints ───────────── */
@media (max-width: 575.98px) {
    img.show-spin {
        width: 22vw !important;
        max-width: 110px !important;
        min-width: 70px;
    }
    .gm-spin-body { padding: 18px 12px !important; }
    .gm-spin-header { padding: 16px 18px !important; }
    .gm-spin-title { font-size: 1rem !important; }
    .gm-spin-sub { font-size: .74rem !important; }
    .gm-spin-btn { padding: 11px 28px !important; font-size: .85rem !important; }
    .gm-wrap { padding: 18px 12px 32px !important; }
    .gm-table thead th { padding: 8px 10px !important; font-size: .68rem !important; }
    .gm-table tbody td { padding: 8px 10px !important; font-size: .76rem !important; }
}

/* ───────────── Index.php category grid ───────────── */
@media (max-width: 575.98px) {
    .ao-section-title { font-size: 1.2rem !important; }
    .ao-section-sub { font-size: .78rem !important; }
    .ao-news-bar { padding: 10px 12px !important; border-radius: 8px !important; }
    .ao-news-item { font-size: .78rem !important; }
    .ao-news-date { font-size: .68rem !important; }
    .ao-game-card { border-radius: 12px !important; }
    .ao-game-footer { padding: 8px 10px 10px !important; }
    .ao-game-name { font-size: .76rem !important; }
    /* dashboard cards on home */
    .db-card { border-radius: 14px !important; }
    .db-card-header { padding: 13px 14px 10px !important; }
    .db-card-body { padding: 6px 14px 12px !important; }
    .db-card-title { font-size: .88rem !important; }
    .db-news-text { font-size: .8rem !important; }
    .db-topup-avatar { width: 36px !important; height: 36px !important; }
    .db-topup-user { font-size: .8rem !important; }
    .db-topup-credit { font-size: .78rem !important; }
}

/* ───────────── Footer / chat bubble — don't overlap content ───────────── */
@media (max-width: 575.98px) {
    .fb_dialog, .fb_iframe_widget {
        transform: scale(.85) !important;
        transform-origin: bottom right !important;
    }
}

/* ───────────── DataTables Bootstrap pagination ───────────── */
@media (max-width: 575.98px) {
    .pagination { flex-wrap: wrap; gap: 4px; }
    .pagination .page-link { padding: 6px 10px; font-size: .8rem; }
}

/* ───────────── _page/product.php sticky form actions ───────────── */
@media (max-width: 575.98px) {
    .ap-form-card { margin-bottom: 110px !important; }
    .ap-form-actions {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .ap-form-actions .btn {
        flex: 1 1 auto;
        font-size: .82rem !important;
        padding: 9px 12px !important;
    }
}

/* ───────────── Orders/report tables ───────────── */
@media (max-width: 575.98px) {
    .ord-col-head, .ord-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .ord-col-head { display: none !important; }
    .ord-row { padding: 12px !important; border-radius: 12px !important; }
}

/* ───────────── Generic overflow guard — prevent body horizontal scroll ───────────── */
/* Only set on html — setting on both html+body breaks Android scroll */
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip doesn't create scroll container, safe on all browsers */

/* KT Metronic bakes min-width values into .page / .wrapper that force the viewport
   to expand past device-width on Android, making the page appear zoomed in.
   Zero them out at all breakpoints — the layout handles narrowing via flex/grid. */
.flex-root, .page, .wrapper, #kt_wrapper, #kt_content, #kt_content_container,
.content, .content-wrapper, .ao-layout, .ao-main {
    min-width: 0 !important;
    max-width: 100vw;
}

/* ── Marketplace: tighter on very small phones ── */
@media (max-width: 480px) {
    /* Reduce the 3rem top/bottom padding of the page container */
    main.container { padding-top: 1.25rem !important; padding-bottom: 2rem !important; }
    /* Shorter card image area — was 60%, too tall on a narrow phone */
    .mk-img-wrap { padding-top: 48% !important; }
    /* Slightly tighter card body */
    .mk-body { padding: 11px 12px !important; }
    .mk-title { font-size: 1.25rem !important; }
}

/* Long words / URLs inside text */
.od-key-box, .hs-product-name, .pf-stat-value, .od-help-box {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ───────────── Wallet-gift / Gift code / Slip-check / Status pages ───────────── */
@media (max-width: 575.98px) {
    .wg-wrap, .gc-wrap, .sc-wrap, .st-wrap, .ht-wrap, .dl-wrap {
        padding: 16px 12px 32px !important;
    }
    .wg-card, .gc-card, .sc-card, .st-card, .ht-card, .dl-card {
        border-radius: 14px !important;
    }
    .wg-card-header, .gc-card-header, .sc-card-header, .st-card-header {
        padding: 18px 16px !important;
    }
    .wg-card-body, .gc-card-body, .sc-card-body, .st-card-body {
        padding: 16px 16px !important;
    }
    .wg-card-title, .gc-card-title, .sc-card-title, .st-card-title { font-size: 1.05rem !important; }
    .wg-card-sub, .gc-card-sub, .sc-card-sub, .st-card-sub { font-size: .76rem !important; }
    .wg-modal, .gc-modal, .sc-modal {
        width: 94% !important;
        max-height: 88vh !important;
    }
    .wg-modal-header, .gc-modal-header, .sc-modal-header {
        padding: 14px 16px 12px !important;
    }
    .wg-modal-body, .gc-modal-body, .sc-modal-body {
        padding: 14px 16px 18px !important;
    }
    .ht-table thead th { padding: 9px 10px !important; font-size: .68rem !important; }
    .ht-table tbody td { padding: 9px 10px !important; font-size: .78rem !important; }
}

/* ───────────── Topup history table (historytm.php) ───────────── */
@media (max-width: 575.98px) {
    .htm-table thead th { padding: 8px 10px !important; font-size: .68rem !important; }
    .htm-table tbody td { padding: 8px 10px !important; font-size: .76rem !important; }
}

/* ───────────── Register page (sits next to login.php) ───────────── */
@media (max-width: 575.98px) {
    .reg-card, .auth-card { max-width: calc(100vw - 24px) !important; }
}

/* ───────────── shop_android.php tightening ───────────── */
@media (max-width: 575.98px) {
    .sa-wrap { padding: 16px 0 28px !important; }
    .sa-title { font-size: 1.2rem !important; }
    .sa-warn { padding: 10px 14px !important; border-radius: 10px !important; margin-bottom: 18px !important; }
    .sa-warn-text { font-size: .78rem !important; }
    .sa-card { border-radius: 12px !important; }
    .sa-card-body { padding: 12px 12px 14px !important; }
    .sa-name { font-size: .82rem !important; }
    .sa-stock-ok, .sa-stock-out { font-size: .72rem !important; margin-bottom: 8px !important; }
    .sa-btn { padding: 9px !important; font-size: .8rem !important; border-radius: 9px !important; }
}

/* ───────────── Slipcheck specific tweaks ───────────── */
@media (max-width: 575.98px) {
    .sc-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .sc-card { padding: 16px 14px !important; border-radius: 14px !important; }
    .sc-amount-buttons { flex-wrap: wrap !important; }
    .sc-amount-buttons .btn { flex: 1 1 calc(50% - 6px) !important; }
}

/* ───────────── Toast on mobile — keep above FB chat ───────────── */
@media (max-width: 575.98px) {
    .swal2-container.swal2-top-end > .swal2-popup,
    .swal2-container.swal2-top-right > .swal2-popup {
        margin: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: 360px !important;
    }
}