/*
 * Shared responsive layout system.
 *
 * This file only controls viewport safety, shared shell widths, and layout
 * breakpoints. Page-specific styles remain in each page so component sizing,
 * typography, colors, and behavior do not change.
 */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/*
 * Button labels are controls, not document content. Keep their text from
 * entering the selection/copy range without affecting surrounding text.
 */
button,
button *,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[role="button"] *,
a[class~="btn"],
a[class~="btn"] *,
a[class*="-btn"],
a[class*="-btn"] *,
a[class~="button"],
a[class~="button"] *,
a[class*="-button"],
a[class*="-button"] * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Shared storefront shell */
.navbar-wrap,
.navbar,
.page-content,
.banner-wrapper,
.banner-inner,
.banner-carousel,
.services-section,
.services-grid,
.footer-banner-container,
.footer-banner-content,
.site-footer,
.footer-inner {
    min-width: 0;
}

.navbar {
    width: 100%;
    max-width: 1520px !important;
    margin-inline: auto;
}

.page-content {
    width: 100%;
    max-width: 1552px !important;
    margin-inline: auto;
    padding-inline: 16px;
}

.banner-wrapper,
.banner-inner,
.banner-carousel,
.services-grid {
    width: 100%;
}

.banner-carousel {
    overflow: hidden;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.footer-banner-container {
    width: calc(100% - 32px) !important;
    max-width: 1520px !important;
    margin-inline: auto;
}

.site-footer {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    background: #202329 !important;
}

.site-footer .footer-inner {
    width: 100%;
    max-width: 1520px !important;
    margin-inline: auto;
}

.search,
.nav-right,
.footer-grid,
.footer-col,
.footer-social,
.footer-lang {
    min-width: 0;
}

/* Storefront content and product layouts can grow without stretching controls. */
.product-layout,
.product-main,
.product-column,
.checkout-grid,
.chat-layout {
    width: 100%;
    min-width: 0;
}

.product-layout,
.chat-layout {
    max-width: 1520px;
    margin-inline: auto;
}

@media (min-width: 601px) {
    .chat-layout.chat-layout {
        width: calc(100% - 32px);
        max-width: 1520px !important;
        margin-inline: auto;
    }
}

/* Checkout is intentionally narrower than the marketplace shell. */
.wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

/* Seller and admin workspaces use their own sidebars but share the same
   min-width and wide-screen content behavior. */
.app,
.main,
.admin-main {
    min-width: 0;
}

.main {
    width: 100%;
}

.admin-main {
    width: 100%;
}

@media (min-width: 1200px) {
    .main,
    .admin-main {
        max-width: 1520px;
        margin-inline: auto;
    }
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .main,
    .admin-main {
        width: 100%;
        max-width: none;
    }

    .main {
        overflow-x: clip;
    }

    .admin-main {
        overflow-x: auto;
    }

    /* Admin keeps every section available without forcing the content into
       the desktop sidebar width on phones. */
    body:has(.admin-sidebar) {
        display: block;
        min-width: 0;
    }

    body:has(.admin-sidebar) .admin-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 16px 12px 12px;
        border-right: 0;
        border-bottom: 1px solid #1a1a24;
        overflow: visible;
    }

    body:has(.admin-sidebar) .sidebar-brand {
        margin-bottom: 12px;
    }

    body:has(.admin-sidebar) .sidebar-nav {
        flex: none;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    body:has(.admin-sidebar) .sidebar-nav .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body:has(.admin-sidebar) .sidebar-footer {
        padding-top: 12px;
        margin-top: 12px;
    }

    body:has(.admin-sidebar) .logout-btn {
        width: auto;
    }

    body:has(.admin-sidebar) .admin-main {
        width: 100%;
        padding: 20px 12px 32px;
        overflow-x: auto;
    }

    body:has(.admin-sidebar) .admin-main table {
        min-width: 720px;
    }
}

@media (max-width: 600px) {
    .navbar {
        max-width: 100% !important;
    }

    .page-content {
        max-width: 100% !important;
        padding-inline: 12px !important;
    }

    .footer-banner-container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
    }

    .footer-inner {
        max-width: 100% !important;
        padding-inline: 12px !important;
    }

    .product-layout,
    .chat-layout {
        max-width: 100%;
    }

    .chat-layout.chat-layout {
        width: 100%;
        margin-inline: 0;
    }

    .checkout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .footer-banner-container {
        width: calc(100% - 24px) !important;
    }
}

/* Standalone auth pages remain centered, but their cards never exceed the
   available viewport or become wider than their intended proportions. */
body.login-page,
body.admin-login-page {
    max-width: 100%;
    overflow-x: clip;
}

.login-card,
.admin-login-card {
    width: min(100%, 420px);
}

body.admin-login-page > .card {
    width: min(100%, 380px);
}

@media (max-width: 480px) {
    body.login-page {
        padding-inline: 12px !important;
    }

    .login-card,
    .admin-login-card,
    body.admin-login-page > .card {
        padding-inline: 18px;
    }
}