/* ========================================
   FULL WIDTH FIX FOR ALL DEVICES
   ======================================== */

/* Reset and Base */
* {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Layout Containers */
.app-layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

header {
    width: 100vw;
    left: 0;
    right: 0;
}

.sidebar {
    max-width: var(--sidebar-width);
}

.main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Content Elements */
.main-content>* {
    width: 100%;
    max-width: 100%;
}

.brands-container,
.provider-banner,
.games-grid,
.section-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Images and Media */
img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* Grid System */
.games-grid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Remove any max-width constraints */
@media (min-width: 1920px) {

    .main-content>div,
    .main-content>section {
        max-width: none !important;
    }
}

/* Mobile Full Width */
@media (max-width: 768px) {
    .main-content {
        padding-left: 3%;
        padding-right: 3%;
    }

    .games-grid {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Desktop Full Width and Sidebar Toggle */
@media (min-width: 1025px) {
    .sidebar {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar.collapsed {
        transform: translateX(-100%) !important;
        visibility: hidden;
    }

    .main-content {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .main-content.expanded {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Prevent Horizontal Overflow */
.brands-slider {
    max-width: 100%;
}

.game-card,
.brand-item {
    max-width: 100%;
}

/* Footer Full Width */
footer {
    width: 100%;
    max-width: 100%;
}