/*
    LOCO global page width alignment.
    Keeps main page panels aligned with the same visual width as the header.
*/

:root {
    --loco-page-max: 1180px;
    --loco-page-pad: 20px;
}

/* Generic main/content wrappers */
main > section,
.main > section,
.page,
.page-content,
.content,
.container,
.loco-container {
    max-width: var(--loco-page-max);
    margin-left: auto;
    margin-right: auto;
}

/* Public/user pages */
.loco-home-page,
.loco-products-page,
.spoofer-page,
.jobs-page,
.status-page,
.resellers-page,
.loco-static-page,
.loco-activate-page,
.dashboard-grid,
.dashboard-page,
.auth-card {
    width: min(calc(100% - (var(--loco-page-pad) * 2)), var(--loco-page-max)) !important;
    max-width: var(--loco-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Inner shells should never be wider than the page */
.loco-products-shell,
.resellers-shell,
.loco-static-shell,
.loco-activate-shell,
.jobs-page .job-list,
.status-page .product-status-list,
.spoofer-page .supported-games,
.dashboard-panel {
    max-width: 100% !important;
}

/* Sections/cards that were stretching too wide */
.loco-home-stats,
.loco-home-products,
.loco-home-benefits,
.loco-home-faq,
.loco-home-cta,
.spoofer-hero,
.spoofer-alert,
.spoofer-steps,
.supported-games,
.jobs-hero,
.job-list,
.jobs-contact,
.server-card,
.product-status-list,
.status-empty,
.loco-static-hero,
.loco-contact-grid,
.loco-static-note,
.loco-terms-card,
.loco-activate-card,
.loco-activate-help {
    width: 100%;
    max-width: 100%;
}

/* Keep hero background/full visual bands from forcing horizontal overflow */
.loco-home-hero,
.hero,
.full-hero {
    max-width: var(--loco-page-max);
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid rgba(168, 85, 247, 0.16);
    border-right: 1px solid rgba(168, 85, 247, 0.16);
}

/* Dashboard/admin-like panels */
.stats-grid,
.dashboard-actions,
.file-list,
.table-wrap {
    max-width: 100%;
}

/* Mobile spacing */
@media (max-width: 720px) {
    :root {
        --loco-page-pad: 14px;
    }

    main > section,
    .main > section,
    .page,
    .page-content,
    .content,
    .container,
    .loco-container,
    .loco-home-page,
    .loco-products-page,
    .spoofer-page,
    .jobs-page,
    .status-page,
    .resellers-page,
    .loco-static-page,
    .loco-activate-page,
    .dashboard-grid,
    .dashboard-page,
    .auth-card {
        width: min(calc(100% - (var(--loco-page-pad) * 2)), var(--loco-page-max)) !important;
    }
}