/* ════════════════════════════════════════════════════════════
   USER PAGES — GLOBAL RESPONSIVE & BUG FIXES
   Loaded from new/partials/head.blade.php so it cascades to
   every page that extends new.layouts.app.
   Goal: ONE place to fix layout bleed, table overflow, missing
   bottom-padding for the mobile dock, broken touch targets,
   image overflow, safe-area on notched phones, and form spacing.
   ════════════════════════════════════════════════════════════ */

/* ── 1. ROOT GUARDS ──────────────────────────────────────────
   Prevent any page from horizontally scrolling the document or
   leaking content past the viewport (the #1 mobile complaint). */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* Universal media safety — every img/video/iframe is fluid by default. */
img, video, iframe, svg, picture, canvas {
    max-width: 100%;
    height: auto;
}
iframe { border: 0; }

/* ── 2. MAIN CONTENT BOTTOM PADDING ──────────────────────────
   The mobile dock is fixed at the bottom; without enough padding
   the last form button / pagination row sits under the dock and
   becomes un-tappable. The existing fixes were 100px which is too
   tight on iPhones with the home indicator bar — bump to 110 + safe-area. */
@media (max-width: 900px) {
    .main {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Mobile dock itself respects safe-area (already does, but enforce). */
.mobile-dock {
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
}

/* ── 3. TABLES — HORIZONTAL SCROLL WRAPPING ─────────────────
   Any table inside .main collapses on phones. Force its parent
   to allow horizontal scroll instead of pushing layout sideways. */
.main table {
    max-width: 100%;
}
@media (max-width: 768px) {
    .main .stmt-card,
    .main .bh-card,
    .main .table-responsive,
    .main .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main table:not(.no-scroll) {
        min-width: 100%;
    }
}

/* ── 4. FORMS — TOUCH-FRIENDLY INPUTS ─────────────────────── */
.main input[type="text"],
.main input[type="email"],
.main input[type="tel"],
.main input[type="number"],
.main input[type="password"],
.main input[type="date"],
.main input[type="search"],
.main input[type="url"],
.main select,
.main textarea {
    font-size: 16px;          /* Prevents iOS zoom-on-focus */
    min-height: 44px;         /* Apple HIG minimum tap target */
    -webkit-appearance: none;
    appearance: none;
}
.main textarea { min-height: 80px; }
.main input[type="file"] {
    font-size: 13px;
    min-height: 44px;
    padding: 8px;
}
.main button,
.main .btn,
.main a.btn {
    min-height: 38px;
    touch-action: manipulation;  /* kill the 300ms tap delay */
}

/* ── 5. CARDS / WRAPPERS — CONSISTENT SIDE PADDING ─────────
   Several pages used hardcoded 16px which becomes cramped on
   small phones. Tighten on <=420px so content reaches the edges
   without stealing horizontal real estate. */
@media (max-width: 480px) {
    .main .prof-wrap,
    .main .dep-wrap,
    .main .wit-wrap,
    .main .stmt-wrap,
    .main .bh-wrap,
    .main .mb-wrap,
    .main .cp-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-top: 12px !important;
    }
}
@media (max-width: 360px) {
    .main .prof-wrap,
    .main .dep-wrap,
    .main .wit-wrap,
    .main .stmt-wrap,
    .main .bh-wrap,
    .main .mb-wrap,
    .main .cp-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ── 6. AUTH PAGES — CENTER VERTICALLY ON ALL VIEWPORTS ─── */
.login-wrap,
.auth-page {
    min-height: calc(100vh - var(--nav-h, 68px) - 100px) !important;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
}
@media (max-width: 480px) {
    .login-box {
        margin-top: 12px !important;
        padding: 24px 18px !important;
        max-width: 100% !important;
    }
    .login-title { font-size: 19px !important; }
    .otp-digit { width: 38px !important; height: 44px !important; font-size: 17px !important; }
}

/* ── 7. SPORTS DETAIL — BET SLIP CLEARANCE ─────────────────
   The bet slip is fixed bottom (.betslip-outer at bottom:60px on
   mobile, just above the dock). The markets-wrap already adds
   220px bottom padding — we re-enforce here in case the inline
   <style> in sports/detail.blade.php is overridden by anything
   loaded after. */
@media (max-width: 768px) {
    .markets-wrap,
    .market-list,
    .dt-content,
    .dt-markets {
        padding-bottom: 220px !important;
    }
    /* Make sure the betslip itself sits above the mobile dock + safe-area */
    .betslip-outer {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── 8. PROVIDERS / CASINO GRID — NEVER OVERFLOW ──────────
   The casino page builds its grid in JS; ensure outer wrap can
   never push the dock or sidebar. */
.cx-root, .cx-body, .game-grid, .featured-grid, .scroll-row {
    max-width: 100%;
}
.scroll-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }

/* Game cards stay inside their grid track. */
.game-card,
.featured-card,
.rtab-game-card,
.rtab-live-card,
.live-casino-card {
    min-width: 0;
    max-width: 100%;
}

/* ── 9. BUTTONS THAT WERE PUSHING OFF-SCREEN ────────────── */
.dep-submit,
.wit-submit,
.prof-submit,
.cp-submit,
.lf-btn,
.auth-submit {
    width: 100%;
    max-width: 100%;
}

/* ── 10. SUPPORT BUBBLE — DON'T COVER DOCK ───────────────── */
@media (max-width: 900px) {
    .support-bubble {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .notif-bell-btn {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── 11. MODALS — FILL SCREEN ON PHONES ─────────────────── */
@media (max-width: 480px) {
    .auth-modal,
    .wallet-modal,
    .lucky-spin-modal {
        max-width: 100% !important;
        width: calc(100% - 16px) !important;
        margin: 8px !important;
    }
}

/* ── 12. SCROLLBAR HYGIENE FOR ALL HORIZONTAL ROWS ───────── */
.casino-section-tabs,
.filter-chips,
.sport-tabs-wrap,
.market-tabs,
.stmt-tabs,
.mb-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.casino-section-tabs::-webkit-scrollbar,
.filter-chips::-webkit-scrollbar,
.sport-tabs-wrap::-webkit-scrollbar,
.market-tabs::-webkit-scrollbar,
.stmt-tabs::-webkit-scrollbar,
.mb-links::-webkit-scrollbar { display: none; }

/* ── 13. LONG WORDS / EMAILS / WALLETS DON'T BREAK LAYOUT ─ */
.dep-crypto-val,
.dep-detail-val,
.prof-info-email,
.mb-card-game,
.featured-name {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── 14. GAMES THAT LAUNCH IN AN IFRAME ──────────────────── */
.game-launch-frame,
.slot-launch-iframe,
iframe[src*="launch"],
iframe[src*="game"] {
    width: 100%;
    min-height: 70vh;
    display: block;
}

/* ── 15. LAYOUT SHIFT GUARD ON LATE-LOAD IMAGES ─────────── */
img[loading="lazy"]:not([width]) { aspect-ratio: 4 / 3; }

/* ── 16. FORM ERROR MESSAGES — FULL WIDTH STACK ─────────── */
.main .alert,
.main .error-message,
.main .invalid-feedback {
    width: 100%;
    max-width: 100%;
    word-break: break-word;
}

/* ── 17. PAGINATION — SCROLL ON MOBILE INSTEAD OF WRAPPING ─ */
.bh-pagination,
.mb-pagination,
.pagination {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.bh-pagination::-webkit-scrollbar,
.mb-pagination::-webkit-scrollbar,
.pagination::-webkit-scrollbar { display: none; }

/* ── 18. LANDSCAPE PHONES — NAV STILL VISIBLE ──────────── */
@media (max-height: 480px) and (orientation: landscape) {
    .mobile-dock {
        height: 50px !important;
    }
    .main {
        padding-bottom: 70px !important;
    }
}

/* ── 19. PRINT — STRIP CHROME ────────────────────────────── */
@media print {
    .topnav,
    .sidebar,
    .mobile-dock,
    .support-bubble,
    .notif-bell-btn,
    .winners-ticker,
    .install-banner { display: none !important; }
    .main { margin-left: 0 !important; padding: 0 !important; }
}