/* =========================================================
   LOCO — Mobile Responsive Patch
   Drop-in overrides loaded after page CSS.
   ========================================================= */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

.container { width: min(100% - 28px, var(--container)); }
main.container { padding: clamp(22px, 5vw, 40px) 0 clamp(42px, 8vw, 60px); }

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 10, 15, 0.86);
}

.navbar-inner, .loco-navbar-inner { min-width: 0; }
.loco-brand-logo { max-width: 150px; height: auto; }
.nav-links, .loco-nav-links { min-width: 0; }
.nav-links a, .loco-nav-links a { white-space: nowrap; }

input, select, textarea, button, .button { max-width: 100%; }
input, select, textarea { font-size: 16px; }
.table-wrap { -webkit-overflow-scrolling: touch; }
.table { min-width: 640px; }

.hero, .auth-card, section, .dashboard-panel, .stat-card, .file-card { max-width: 100%; }
.file-card { flex-wrap: wrap; }

.job-media {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
}
.job-media-creator { background-image: url('/assets/images/jobs/creator.png'); }
.job-media-reseller { background-image: url('/assets/images/jobs/reseller.png'); }
.job-media-support { background-image: url('/assets/images/jobs/supporter.png'); }

@media (max-width: 980px) {
    .container { width: min(100% - 24px, var(--container)); }

    .navbar-inner, .loco-navbar-inner { align-items: center; gap: 12px; }

    .nav-links, .loco-nav-links {
        gap: 10px;
        justify-content: flex-end;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 6px;
    }
    .nav-links::-webkit-scrollbar, .loco-nav-links::-webkit-scrollbar { display: none; }

    .nav-links a, .loco-nav-links a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.9rem;
    }

    .loco-home-hero { min-height: 620px; }
    .loco-home-hero-content { padding: 86px 18px 96px; }

    .loco-home-stats,
    .loco-contact-grid,
    .spoofer-steps,
    .games-grid,
    .loco-activate-help {
        grid-template-columns: 1fr !important;
    }

    .loco-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .job-list, .resellers-shell, .status-page { width: 100%; }
}

@media (max-width: 820px) {
    h1 { font-size: clamp(2rem, 10vw, 3.2rem); }

    .navbar-inner, .loco-navbar-inner {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px 0;
    }
    .brand, .loco-brand { justify-self: center; }
    .nav-links, .loco-nav-links { justify-content: flex-start; width: 100%; }

    .hero, .auth-card, section, .dashboard-panel {
        padding: 22px;
        border-radius: 18px;
    }

    .job-card { grid-template-columns: 1fr !important; min-height: 0; }
    .job-card-right .job-media { order: -1; }
    .job-media { min-height: 230px; }
    .job-content { padding: 28px !important; }

    .server-card, .product-status-row {
        grid-template-columns: 1fr !important;
        display: grid !important;
        align-items: start;
    }
    .server-bars { display: none !important; }
    .status-tags, .server-left, .product-status-main { align-items: flex-start; }
    .loco-activate-card { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 18px, var(--container)); }
    main.container { padding-top: 18px; }
    .loco-brand-logo { max-width: 132px; }

    .nav-links, .loco-nav-links { gap: 8px; }
    .nav-links a, .loco-nav-links a {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.84rem;
    }

    .jobs-hero, .spoofer-hero, .resellers-hero, .status-hero {
        padding: 30px 10px 14px !important;
    }

    .jobs-page, .spoofer-page { gap: 20px; }
    .job-list { gap: 16px; }
    .job-card { border-radius: 16px; }
    .job-media { min-height: 205px; }
    .job-content { padding: 22px !important; }
    .job-content h2 { font-size: 1.45rem; }
    .jobs-contact { padding: 22px; }

    .loco-home-hero { min-height: 560px; }
    .loco-home-hero-content { padding: 72px 14px 82px; }
    .loco-home-pill { margin-bottom: 28px; }
    .loco-home-hero h1 {
        font-size: clamp(4rem, 22vw, 7rem);
        letter-spacing: -0.06em;
    }
    .loco-home-hero p { font-size: 1rem; }

    .loco-home-actions,
    .actions,
    .dashboard-actions,
    .spoofer-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .loco-home-actions a,
    .actions .button,
    .dashboard-actions .button,
    .spoofer-actions .button,
    .button {
        width: 100%;
        justify-content: center;
    }

    .loco-home-stats {
        width: min(100% - 18px, 1000px);
        margin-top: -28px;
    }

    .loco-products-page, .loco-static-page, .loco-activate-page {
        padding: 30px 10px 52px;
    }
    .loco-products-header h1,
    .loco-static-hero h1,
    .loco-activate-main h1 {
        font-size: clamp(2.2rem, 13vw, 3.4rem);
    }
    .loco-products-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .loco-products-search, .loco-products-sort { width: 100%; }
    .loco-products-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .loco-product-image-wrap { height: 190px; }

    .reseller-grid { grid-template-columns: 1fr !important; }
    .reseller-card, .empty-state { padding: 20px; }
    .reseller-top { align-items: flex-start; }

    .loco-static-hero,
    .loco-terms-card,
    .loco-contact-card,
    .loco-activate-card,
    .loco-activate-side,
    .loco-activate-help article,
    .supported-games,
    .spoofer-steps article {
        border-radius: 16px;
    }
    .loco-static-hero { padding: 32px 18px; }
    .loco-terms-card { padding: 4px 18px; }
    .loco-activate-card { padding: 22px; }
    .loco-activate-button { width: 100%; }

    .game-row { flex-wrap: wrap; }
    .game-row em { margin-left: 0; }
    .product-status-row time { white-space: normal; }
}

@media (max-width: 420px) {
    .container { width: min(100% - 14px, var(--container)); }
    .nav-links a, .loco-nav-links a { font-size: 0.8rem; padding-inline: 9px; }
    .job-media { min-height: 180px; }
    .job-content, .jobs-contact, .hero, .auth-card, section, .dashboard-panel {
        padding: 18px !important;
    }
    .loco-product-image-wrap { height: 170px; }
}