/*
 * ═══════════════════════════════════════════════════════════════
 *  LA MISE — mobile.css  v1.0
 *  Global responsive styles for ALL pages on mobile (≤768px)
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── GENERIC RESETS ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

/* ─── MOBILE BREAKPOINT ────────────────────────────────────────── */
@media (max-width: 768px) {

    /* --- Body --- */
    body {
        padding-top: 70px !important;
        overflow-x: hidden !important;
    }

    /* --- Generic containers --- */
    .premium-container,
    .page-container,
    .main-container,
    .content-wrapper {
        padding: 0 1rem !important;
    }

    /* ───────────── HERO SECTION ───────────── */
    .premium-hero {
        padding: 2.5rem 1rem 2rem !important;
    }

    .hero-intro-text {
        font-size: 0.95rem !important;
        padding: 1rem 1.2rem !important;
        margin: 0 0 1.5rem !important;
    }

    .hero-btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .hero-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.9rem 1.5rem !important;
        font-size: 0.82rem !important;
    }

    /* ───────────── GRIDS ───────────── */
    .promo-grid,
    .grid,
    .shop-grid,
    .games-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
        padding: 0 !important;
    }

    #shop-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ───────────── TABLES ───────────── */
    .history-table-wrapper,
    .claims-container,
    .table-wrapper,
    .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 480px;
    }

    .claims-container {
        padding: 1.2rem 1rem !important;
        border-radius: 16px !important;
    }

    .claims-table th,
    .claims-cell {
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
    }

    /* ───────────── SHOP TABS (rewards page) ───────────── */
    .shop-tabs {
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
        justify-content: center !important;
        margin-bottom: 2rem !important;
        padding: 0 0.5rem !important;
    }

    .tab-btn {
        font-size: 0.72rem !important;
        padding: 8px 16px !important;
    }

    /* ───────────── PROFILE PAGE ───────────── */
    .profile-container {
        padding: 1rem !important;
    }

    .profile-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .profile-title-group h1 {
        font-size: 2rem !important;
    }

    .profile-hero {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.5rem !important;
        padding: 1.5rem 1rem !important;
    }

    .hero-balance {
        margin-left: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .balance-amount {
        justify-content: center !important;
    }

    .profile-grid {
        grid-template-columns: 1fr !important;
    }

    /* Promo code row */
    .profile-container [style*="display: flex"][style*="gap: 10px"] {
        flex-direction: column !important;
    }

    /* Connection item buttons */
    .connection-item {
        flex-wrap: wrap !important;
        gap: 0.8rem !important;
    }

    /* ───────────── FAQ PAGE ───────────── */
    .faq-section,
    .faq-container {
        padding: 0 1rem !important;
    }

    .faq-item {
        border-radius: 12px !important;
    }

    /* ───────────── CONTACT PAGE ───────────── */
    .contact-section,
    .contact-container,
    .contact-form-wrapper {
        padding: 0 1rem !important;
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ───────────── BLOG PAGE ───────────── */
    .blog-container,
    .blog-grid,
    .articles-grid {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
        gap: 1.5rem !important;
    }

    /* ───────────── VIP PAGE ───────────── */
    .vip-container,
    .vip-section {
        padding: 0 1rem !important;
    }

    .vip-tiers,
    .tiers-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .vip-tier-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ───────────── PARRAINAGE / REFERRAL PAGE ───────────── */
    .referral-container,
    .parrainage-container,
    .referral-section {
        padding: 0 1rem !important;
    }

    .referral-stats,
    .stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    .referral-link-box {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    .referral-link-box input {
        width: 100% !important;
    }

    /* ───────────── CASHBACK PAGE ───────────── */
    .cashback-container,
    .cashback-section {
        padding: 0 1rem !important;
    }

    .cashback-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ───────────── BONUS PAGE ───────────── */
    .bonus-container,
    .casinos-grid {
        padding: 0 1rem !important;
        grid-template-columns: 1fr !important;
    }

    /* ───────────── BONUS HUNT PAGE ───────────── */
    .hunt-container,
    .bonus-hunt-container {
        padding: 0 1rem !important;
    }

    .hunt-header,
    .hunt-controls {
        flex-direction: column !important;
        gap: 0.8rem !important;
        align-items: stretch !important;
    }

    .hunt-header input,
    .hunt-header button,
    .hunt-controls input,
    .hunt-controls button {
        width: 100% !important;
    }

    .hunt-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    .hunt-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ───────────── DAILY WHEEL PAGE ───────────── */
    .daily-container,
    .wheel-section {
        padding: 0 1rem !important;
    }

    .wheel-wrapper,
    .wheel-container {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
        overflow: hidden !important;
    }

    .rarity-tiers-section {
        padding: 0 1rem !important;
    }

    .rarity-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ───────────── RACE PAGE ───────────── */
    .race-container,
    .race-section {
        padding: 0 1rem !important;
    }

    .race-table-wrapper {
        overflow-x: auto !important;
    }

    .race-prizes {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    /* ───────────── GAMES PAGES (Blackjack, Roulette, Plinko, Mines, Crash) ───────────── */
    .game-container,
    .game-wrapper,
    .game-area {
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }

    .game-canvas-wrapper,
    .canvas-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .game-sidebar,
    .game-controls {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Game layout: stack canvas + controls vertically */
    .game-layout,
    .game-main {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Bet inputs */
    .bet-section,
    .bet-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* ───────────── LOGIN / REGISTER PAGES ───────────── */
    .auth-container,
    .login-container,
    .register-container {
        padding: 1rem !important;
        margin: 0 1rem !important;
        width: calc(100% - 2rem) !important;
    }

    .auth-card,
    .login-card,
    .register-card {
        padding: 1.5rem 1.2rem !important;
        border-radius: 16px !important;
    }

    /* ───────────── CALLS / CLAIMS PAGES ───────────── */
    .calls-container,
    .calls-section {
        padding: 0 1rem !important;
    }

    .calls-filters {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    .calls-filters input,
    .calls-filters select,
    .calls-filters button {
        width: 100% !important;
    }

    /* ───────────── LINKS PAGE ───────────── */
    .links-container,
    .links-grid {
        padding: 0 1rem !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    .link-card {
        padding: 1rem !important;
    }

    /* ───────────── VERIFY PAGE ───────────── */
    .verify-container {
        padding: 1rem !important;
        margin: 0 1rem !important;
        width: calc(100% - 2rem) !important;
    }

    /* ───────────── MODALS ───────────── */
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-box,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 1.5rem 1.2rem !important;
        margin: 0 !important;
    }

    /* ───────────── FOOTER ───────────── */
    .site-footer .footer-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 2rem 1.2rem !important;
        text-align: center !important;
    }

    .footer-col {
        text-align: center !important;
    }

    .footer-socials {
        justify-content: center !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }

    .disclaimer-container {
        text-align: center !important;
    }

    /* ───────────── INLINE FLEX OVERRIDES ───────────── */
    /* Generic inline-style flex divs that need to wrap on mobile */
    [style*="display: flex"][style*="gap: 1.5rem"],
    [style*="display: flex"][style*="gap: 2rem"],
    [style*="display: flex"][style*="gap: 3rem"] {
        flex-wrap: wrap !important;
    }

    /* Affiliation / info banners with flex */
    [style*="display: flex"][style*="align-items: center"][style*="gap: 1.5rem"] {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* ───────────── TYPOGRAPHY ───────────── */
    h1 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }

    .promo-section {
        padding: 0 1rem !important;
        margin-bottom: 2.5rem !important;
    }

    .promo-title-container {
        margin-bottom: 1.5rem !important;
    }

    /* ───────────── FORMS ───────────── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Fix for flex input+button rows */
    .input-group,
    .input-row {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    /* ───────────── WIN ANNOUNCEMENT (rewards) ───────────── */
    .win-title {
        font-size: 2.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .btn-gold {
        padding: 14px 40px !important;
        width: 100% !important;
    }

    /* ───────────── CASE WRAPPER (box opening) ───────────── */
    .case-wrapper {
        max-width: calc(100vw - 2rem) !important;
    }

    /* ───────────── 404 PAGE ───────────── */
    .error-container,
    .not-found-container {
        padding: 1rem !important;
        text-align: center !important;
    }

    /* ───────────── SECTION GENERAL ───────────── */
    section {
        padding: 0 !important;
    }

    /* ───────────── BLACKJACK PAGE ───────────── */
    .bj-container {
        padding: 1rem !important;
    }

    .bj-header {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .bj-title-group h1 {
        font-size: 2rem !important;
    }

    /* bj-layout already has @media 1100px → 1fr, fine */

    .picker-card {
        padding: 1.5rem 1rem !important;
        border-radius: 20px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* ───────────── VIP PAGE ───────────── */
    .vip-wrapper {
        padding: 0 1rem !important;
    }

    .user-status-container,
    .user-name-wrapper {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    /* ───────────── PARRAINAGE PAGE ───────────── */
    .referral-container {
        padding: 1rem !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
    }

    .steps-container {
        padding: 0 1rem !important;
    }

    /* ───────────── BONUS HUNT PAGE ───────────── */
    .dashboard-container {
        padding: 0 1rem !important;
    }

    .bonus-list-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .huge-balance-input-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
    }

    .huge-balance-input-wrapper input,
    .huge-balance-input-wrapper button {
        width: 100% !important;
    }

    /* ───────────── RACE PAGE ───────────── */
    .leaderboard-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ───────────── BLOG PAGE ───────────── */
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    .featured-image-container {
        border-radius: 16px !important;
    }
}


/* ─── TABLET BREAKPOINT (769–1024px) ───────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {

    .premium-container {
        padding: 0 1.5rem !important;
    }

    .promo-grid {
        grid-template-columns: 1fr !important;
    }

    .shop-tabs {
        flex-wrap: wrap !important;
        gap: 0.8rem !important;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr !important;
    }

    .vip-tiers,
    .tiers-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}