﻿/* =========================================================
   ChapResto Main Portal Final Layout
   Home / Restaurants / Menus = discovery portal
   Restaurant pages = autonomous ordering mini-sites
   Load this file LAST.
   ========================================================= */

.cr-topbar-balanced {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid rgba(60, 42, 25, .08) !important;
    box-shadow: 0 8px 22px rgba(42, 33, 26, .04) !important;
    backdrop-filter: blur(16px) !important;
}

    .cr-topbar-balanced .cr-topbar-inner {
        width: min(1760px, calc(100% - 96px));
        height: 72px;
        margin: 0 auto;
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 2.3rem !important;
    }

    .cr-topbar-balanced .cr-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: .75rem !important;
        color: #221d1a !important;
        text-decoration: none !important;
        font-weight: 1000 !important;
        white-space: nowrap !important;
    }

    .cr-topbar-balanced .cr-brand-icon {
        width: 42px !important;
        height: 42px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: #fff1df !important;
        color: #201a16 !important;
    }

    .cr-topbar-balanced .cr-nav-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1.45rem !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .cr-topbar-balanced .cr-topbar-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 1rem !important;
        min-width: max-content !important;
        margin-left: auto !important;
        overflow: visible !important;
    }

    .cr-topbar-balanced .cr-nav-left a,
    .cr-topbar-balanced .cr-login-link {
        position: relative !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: .42rem !important;
        color: #241e1a !important;
        text-decoration: none !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

        .cr-topbar-balanced .cr-nav-left a:hover,
        .cr-topbar-balanced .cr-login-link:hover,
        .cr-topbar-balanced .cr-nav-left a.active {
            color: #df6424 !important;
        }

            .cr-topbar-balanced .cr-nav-left a.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 1px;
                height: 3px;
                border-radius: 999px;
                background: #df6424;
            }

    .cr-topbar-balanced .cr-mobile-language-slot {
        display: none !important;
    }

/* Restaurant pages: keep only restaurant mini-site nav visible in page header */
body:has(.rs-page) .cr-topbar-balanced .cr-nav-left > a[href="/"],
body:has(.rs-page) .cr-topbar-balanced .cr-nav-left > a[href="/restaurants"],
body:has(.rs-page) .cr-topbar-balanced .cr-nav-left > a[href="/menu"],
body:has(.rs-page) .cr-topbar-balanced .cr-nav-left > a[href="/owner/dashboard"] {
    display: none !important;
}

body:has(.rs-page) .cr-bottom-nav {
    display: none !important;
}

/* Main portal pages should stay centered and comfortable */
.cr-main {
    min-height: calc(100dvh - 72px);
}

/* Tablet */
@media (max-width: 1180px) {
    .cr-topbar-balanced .cr-topbar-inner {
        width: min(100% - 32px, 1760px);
        gap: 1.25rem !important;
    }

    .cr-topbar-balanced .cr-nav-left {
        gap: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 840px) {
    .cr-topbar-balanced {
        min-height: 64px !important;
        height: 64px !important;
    }

        .cr-topbar-balanced .cr-topbar-inner {
            width: calc(100% - 24px);
            height: 64px;
            grid-template-columns: auto 1fr auto !important;
            gap: .75rem !important;
        }

        .cr-topbar-balanced .cr-nav-left,
        .cr-topbar-balanced .cr-topbar-actions {
            display: none !important;
        }

        .cr-topbar-balanced .cr-mobile-language-slot {
            display: flex !important;
            justify-content: flex-end !important;
        }

        .cr-topbar-balanced .cr-brand-icon {
            width: 38px !important;
            height: 38px !important;
        }

    .cr-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
