/* =========================================================
   ChapResto Stable Final Header + Restaurant Mobile Fix
   Load this file LAST.
   ========================================================= */

/* ---------- Main header ---------- */

.cr-topbar-balanced {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    min-height: 72px !important;
    height: 72px !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)) !important;
        height: 72px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: clamp(1.2rem, 2.4vw, 2.2rem) !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;
        min-width: max-content !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;
        flex: 0 0 auto !important;
    }

    .cr-topbar-balanced .cr-brand strong {
        font-size: 1.35rem !important;
        line-height: 1 !important;
    }

    /* ---------- Header navigation ---------- */

    .cr-topbar-balanced .cr-nav-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(.85rem, 1.6vw, 1.35rem) !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

        .cr-topbar-balanced .cr-nav-left a,
        .cr-topbar-balanced .cr-nav-left button,
        .cr-topbar-balanced .cr-login-link {
            position: relative !important;
            min-height: 42px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .42rem !important;
            color: #241e1a !important;
            text-decoration: none !important;
            font-weight: 950 !important;
            white-space: nowrap !important;
            border: 0 !important;
            background: transparent !important;
            cursor: pointer !important;
        }

            .cr-topbar-balanced .cr-nav-left a:hover,
            .cr-topbar-balanced .cr-nav-left button: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;
                }

    /* Restaurant tabs in the main header */
    .cr-topbar-balanced .cr-restaurant-header-nav a {
        padding: 0 .25rem !important;
    }

        .cr-topbar-balanced .cr-restaurant-header-nav a.active {
            min-height: 54px !important;
            padding: 0 1.2rem !important;
            border-radius: 999px !important;
            background: #211b17 !important;
            color: #fff !important;
            box-shadow: 0 12px 28px rgba(24, 18, 14, .16) !important;
        }

            .cr-topbar-balanced .cr-restaurant-header-nav a.active::after {
                display: none !important;
            }

    /* ---------- Header actions: cart / bell / language / login ---------- */

    .cr-topbar-balanced .cr-topbar-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: .85rem !important;
        min-width: max-content !important;
        margin-left: auto !important;
        overflow: visible !important;
    }

.cr-header-icon-btn,
.cr-header-cart-btn {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #211b17 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(45, 30, 18, .08) !important;
    border: 1px solid rgba(60, 42, 25, .08) !important;
    flex: 0 0 auto !important;
}

    .cr-header-icon-btn:hover,
    .cr-header-cart-btn:hover {
        color: #df6424 !important;
        background: #fff4ed !important;
    }

    .cr-header-icon-btn em,
    .cr-header-cart-btn em {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 20px !important;
        height: 20px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #e36425 !important;
        color: #fff !important;
        font-size: .7rem !important;
        line-height: 1 !important;
        font-style: normal !important;
        font-weight: 1000 !important;
    }

.cr-mobile-language-slot,
.cr-mobile-actions-slot {
    display: none !important;
}

/* ---------- Restaurant page cleanup ---------- */

body:has(.rs-page) .cr-bottom-nav {
    display: none !important;
}

body:has(.rs-page) .rs-top-sticky {
    display: none !important;
}

body:has(.rs-page) .rs-floating-cart {
    display: none !important;
}

.rs-page {
    min-height: calc(100dvh - 72px) !important;
}

/* ---------- Embedded cart tab ---------- */

.rs-cart-tab-section {
    padding-top: 0 !important;
}

.rs-cart-tab .rs-section-head {
    margin-bottom: 1rem !important;
}

.rs-cart-layout {
    align-items: start !important;
}

.rs-cart-empty {
    margin-top: 1rem !important;
}

/* ---------- Mobile restaurant tabs ---------- */

.rs-mobile-tabs {
    display: none !important;
}

@media (max-width: 840px) {
    .cr-topbar-balanced {
        min-height: 64px !important;
        height: 64px !important;
    }

        .cr-topbar-balanced .cr-topbar-inner {
            width: calc(100% - 20px) !important;
            height: 64px !important;
            grid-template-columns: auto minmax(0, 1fr) auto !important;
            gap: .65rem !important;
        }

        .cr-topbar-balanced .cr-brand {
            min-width: 0 !important;
            gap: .55rem !important;
        }

        .cr-topbar-balanced .cr-brand-icon {
            width: 38px !important;
            height: 38px !important;
        }

        .cr-topbar-balanced .cr-brand strong {
            max-width: 126px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            font-size: 1.05rem !important;
        }

        .cr-topbar-balanced .cr-nav-left {
            display: none !important;
        }

        .cr-topbar-balanced .cr-topbar-actions {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: .45rem !important;
            min-width: 0 !important;
        }

    .cr-header-icon-btn,
    .cr-header-cart-btn {
        width: 40px !important;
        height: 40px !important;
        box-shadow: none !important;
    }

        .cr-header-icon-btn em,
        .cr-header-cart-btn em {
            top: -3px !important;
            right: -3px !important;
            min-width: 18px !important;
            height: 18px !important;
            font-size: .66rem !important;
        }

    .cr-topbar-balanced .cr-login-link {
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

        .cr-topbar-balanced .cr-login-link span {
            display: none !important;
        }

    .cr-topbar-balanced .cr-topbar-actions .cr-public-language {
        flex: 0 0 auto !important;
    }

    .cr-topbar-balanced .cr-topbar-actions .cr-public-language-btn {
        min-width: 58px !important;
        height: 40px !important;
        padding: 0 .7rem !important;
        border-radius: 999px !important;
        font-size: .9rem !important;
    }

    .rs-mobile-tabs {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1200 !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: .45rem .45rem calc(.45rem + env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .98) !important;
        border-top: 1px solid rgba(60, 42, 25, .10) !important;
        box-shadow: 0 -10px 24px rgba(35, 25, 18, .08) !important;
        backdrop-filter: blur(14px) !important;
    }

        .rs-mobile-tabs button,
        .rs-mobile-tabs a {
            min-width: 0 !important;
            min-height: 56px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .25rem !important;
            border: 0 !important;
            border-radius: 16px !important;
            background: transparent !important;
            color: #2a211c !important;
            font-size: .7rem !important;
            font-weight: 950 !important;
            text-decoration: none !important;
            cursor: pointer !important;
            white-space: nowrap !important;
        }

            .rs-mobile-tabs button i,
            .rs-mobile-tabs a i {
                font-size: 1rem !important;
            }

            .rs-mobile-tabs button.active,
            .rs-mobile-tabs a.active {
                background: #fff1e8 !important;
                color: #df6424 !important;
            }

    .rs-page {
        padding-bottom: 84px !important;
    }
}

@media (min-width: 841px) {
    .rs-mobile-tabs {
        display: none !important;
    }
}


/* =========================================================
   FINAL RESTAURANT HEADER FIX
   Do not touch main portal menu.
   Only fixes restaurant environment.
   Load this file LAST.
   ========================================================= */


/* DESKTOP RESTAURANT HEADER:
   Logo left, restaurant tabs immediately after logo, actions right */
@media (min-width: 841px) {
    body:has(.rs-page) .cr-topbar-balanced .cr-topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: clamp(1.6rem, 3vw, 2.6rem) !important;
    }

    body:has(.rs-page) .cr-topbar-balanced .cr-brand {
        grid-column: 1 !important;
        justify-self: start !important;
        min-width: max-content !important;
    }

    body:has(.rs-page) .cr-topbar-balanced .cr-nav-left {
        grid-column: 2 !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(1rem, 2vw, 1.65rem) !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

        body:has(.rs-page) .cr-topbar-balanced .cr-nav-left a,
        body:has(.rs-page) .cr-topbar-balanced .cr-nav-left button {
            position: relative !important;
            min-height: 46px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .45rem !important;
            padding: 0 .2rem !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: #241e1a !important;
            text-decoration: none !important;
            font-weight: 950 !important;
            white-space: nowrap !important;
            box-shadow: none !important;
        }

            body:has(.rs-page) .cr-topbar-balanced .cr-nav-left a:hover,
            body:has(.rs-page) .cr-topbar-balanced .cr-nav-left button:hover,
            body:has(.rs-page) .cr-topbar-balanced .cr-nav-left a.active,
            body:has(.rs-page) .cr-topbar-balanced .cr-nav-left button.active {
                color: #df6424 !important;
                background: transparent !important;
            }

                body:has(.rs-page) .cr-topbar-balanced .cr-nav-left a.active::after,
                body:has(.rs-page) .cr-topbar-balanced .cr-nav-left button.active::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 2px;
                    height: 3px;
                    border-radius: 999px;
                    background: #df6424;
                }

    body:has(.rs-page) .cr-topbar-balanced .cr-topbar-actions {
        grid-column: 3 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: .9rem !important;
        margin-left: auto !important;
        min-width: max-content !important;
    }
}


/* CART ICON LIKE NOTIFICATION BELL */
body:has(.rs-page) .rs-header-cart,
body:has(.rs-page) .cr-header-cart,
body:has(.rs-page) .rs-top-cart-action {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(60, 42, 25, .08) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #221c18 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(35, 25, 18, .08) !important;
    padding: 0 !important;
}

    body:has(.rs-page) .rs-header-cart span,
    body:has(.rs-page) .cr-header-cart span,
    body:has(.rs-page) .rs-top-cart-action span {
        display: none !important;
    }

    body:has(.rs-page) .rs-header-cart i,
    body:has(.rs-page) .cr-header-cart i,
    body:has(.rs-page) .rs-top-cart-action i {
        font-size: 1.1rem !important;
    }

    body:has(.rs-page) .rs-header-cart em,
    body:has(.rs-page) .cr-header-cart em,
    body:has(.rs-page) .rs-top-cart-action em {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 20px !important;
        height: 20px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #e36425 !important;
        color: #fff !important;
        font-size: .7rem !important;
        line-height: 1 !important;
        font-style: normal !important;
        font-weight: 1000 !important;
        box-shadow: 0 5px 12px rgba(227, 100, 37, .28) !important;
    }


/* MOBILE:
   Hide restaurant top menu completely.
   Keep only brand + cart badge + language + login in header.
   Bottom restaurant menu handles navigation. */
@media (max-width: 840px) {
    body:has(.rs-page) .cr-topbar-balanced {
        min-height: 64px !important;
        height: 64px !important;
    }

        body:has(.rs-page) .cr-topbar-balanced .cr-topbar-inner {
            width: calc(100% - 22px) !important;
            height: 64px !important;
            min-height: 64px !important;
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr) auto !important;
            align-items: center !important;
            gap: .65rem !important;
            margin: 0 auto !important;
        }

        body:has(.rs-page) .cr-topbar-balanced .cr-brand {
            grid-column: 1 !important;
            min-width: 0 !important;
            gap: .55rem !important;
        }

        body:has(.rs-page) .cr-topbar-balanced .cr-brand-icon {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
        }

        body:has(.rs-page) .cr-topbar-balanced .cr-brand strong {
            max-width: 128px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            font-size: 1.05rem !important;
        }

        /* THIS IS THE IMPORTANT FIX:
       No top restaurant menu on mobile */
        body:has(.rs-page) .cr-topbar-balanced .cr-nav-left,
        body:has(.rs-page) .rs-site-nav,
        body:has(.rs-page) .rs-top-sticky {
            display: none !important;
        }

        body:has(.rs-page) .cr-topbar-balanced .cr-topbar-actions {
            grid-column: 3 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: .45rem !important;
            min-width: max-content !important;
            margin-left: auto !important;
        }

    body:has(.rs-page) .rs-header-cart,
    body:has(.rs-page) .cr-header-cart,
    body:has(.rs-page) .rs-top-cart-action {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        box-shadow: none !important;
    }

        body:has(.rs-page) .rs-header-cart em,
        body:has(.rs-page) .cr-header-cart em,
        body:has(.rs-page) .rs-top-cart-action em {
            top: -3px !important;
            right: -3px !important;
            min-width: 18px !important;
            height: 18px !important;
            font-size: .66rem !important;
        }

    body:has(.rs-page) .cr-topbar-balanced .cr-login-link span {
        display: none !important;
    }

    body:has(.rs-page) .cr-topbar-balanced .cr-login-link {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}


/* MOBILE BOTTOM RESTAURANT MENU:
   Always uses full width.
   Buttons share the row automatically, whatever the number of visible items. */
@media (max-width: 840px) {
    body:has(.rs-page) .rs-mobile-tabs {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1200 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 64px !important;
        padding: .42rem .45rem calc(.42rem + env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .98) !important;
        border-top: 1px solid rgba(60, 42, 25, .10) !important;
        box-shadow: 0 -10px 24px rgba(35, 25, 18, .08) !important;
        backdrop-filter: blur(14px) !important;
    }

        body:has(.rs-page) .rs-mobile-tabs button,
        body:has(.rs-page) .rs-mobile-tabs a {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            max-width: none !important;
            min-height: 56px !important;
            display: inline-flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .24rem !important;
            border: 0 !important;
            border-radius: 16px !important;
            background: transparent !important;
            color: #2a211c !important;
            text-decoration: none !important;
            font-size: .72rem !important;
            line-height: 1 !important;
            font-weight: 950 !important;
            white-space: nowrap !important;
            padding: 0 .15rem !important;
        }

            body:has(.rs-page) .rs-mobile-tabs button i,
            body:has(.rs-page) .rs-mobile-tabs a i {
                font-size: 1rem !important;
            }

            body:has(.rs-page) .rs-mobile-tabs button.active,
            body:has(.rs-page) .rs-mobile-tabs a.active {
                background: #fff1e8 !important;
                color: #df6424 !important;
            }

    body:has(.rs-page) .rs-page {
        padding-bottom: 86px !important;
    }
}


/* Desktop: no mobile bottom menu */
@media (min-width: 841px) {
    body:has(.rs-page) .rs-mobile-tabs {
        display: none !important;
    }
}
/* =========================================================
   Restaurant tab content final adjustment
   Desktop: 4 cards per row
   Tablet: 2 cards per row
   Mobile: 1 card per row, full width like Events
   ========================================================= */

.rs-restaurant-food-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
}

    .rs-restaurant-food-row .rs-menu-gallery-card {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .rs-restaurant-food-row .rs-menu-gallery-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .rs-restaurant-food-row .rs-menu-card-buttons {
        margin-top: auto !important;
    }

/* If hero banner is hidden, content should not leave a big empty space */
.rs-shell > .rs-section:first-child,
.rs-shell > .rs-home-layout:first-child,
.rs-shell > .rs-info-cards:first-child,
.rs-shell > .rs-cart-tab-section:first-child {
    margin-top: 0 !important;
}

/* Large tablet / small laptop */
@media (max-width: 1180px) {
    .rs-restaurant-food-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablet */
@media (max-width: 980px) {
    .rs-restaurant-food-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: one card per row, full width */
@media (max-width: 640px) {
    .rs-restaurant-food-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

        .rs-restaurant-food-row .rs-menu-gallery-card {
            width: 100% !important;
            max-width: none !important;
            border-radius: 22px !important;
        }

        .rs-restaurant-food-row .rs-menu-gallery-image {
            height: 220px !important;
            border-radius: 22px 22px 0 0 !important;
        }

        .rs-restaurant-food-row .rs-menu-gallery-body {
            padding: 1rem !important;
        }

        .rs-restaurant-food-row .rs-menu-gallery-title {
            display: flex !important;
            align-items: flex-start !important;
            justify-content: space-between !important;
            gap: .75rem !important;
        }

            .rs-restaurant-food-row .rs-menu-gallery-title h4 {
                font-size: 1.05rem !important;
                line-height: 1.2 !important;
            }

            .rs-restaurant-food-row .rs-menu-gallery-title strong {
                font-size: 1rem !important;
                white-space: nowrap !important;
            }

        .rs-restaurant-food-row .rs-menu-card-buttons {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: .65rem !important;
        }

        .rs-restaurant-food-row .rs-menu-btn {
            width: 100% !important;
            min-height: 46px !important;
        }
}

/* Very small mobile */
@media (max-width: 420px) {
    .rs-restaurant-food-row {
        grid-template-columns: 1fr !important;
    }

        .rs-restaurant-food-row .rs-menu-gallery-image {
            height: 210px !important;
        }
}

/* =========================================================
   Add to cart toast / snackbar
   Must stay above menu details modal
   ========================================================= */

.rs-cart-toast {
    position: fixed !important;
    right: clamp(1rem, 3vw, 2rem) !important;
    bottom: clamp(1rem, 3vw, 2rem) !important;
    z-index: 999999 !important;
    min-width: 280px !important;
    max-width: min(420px, calc(100vw - 2rem)) !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .85rem 1rem !important;
    border-radius: 22px !important;
    background: #211b17 !important;
    color: #fff !important;
    box-shadow: 0 20px 50px rgba(24, 18, 14, .24) !important;
    animation: rsCartToastIn .22s ease-out !important;
    pointer-events: auto !important;
}

    .rs-cart-toast,
    .rs-cart-toast * {
        pointer-events: auto !important;
    }

        .rs-cart-toast i {
            width: 34px !important;
            height: 34px !important;
            display: inline-grid !important;
            place-items: center !important;
            border-radius: 999px !important;
            background: rgba(255, 255, 255, .12) !important;
            color: #7ee39a !important;
            flex: 0 0 auto !important;
        }

        .rs-cart-toast span {
            flex: 1 !important;
            font-weight: 850 !important;
            line-height: 1.25 !important;
        }

        .rs-cart-toast button {
            border: 0 !important;
            min-height: 34px !important;
            padding: 0 .85rem !important;
            border-radius: 999px !important;
            background: #fff !important;
            color: #df6424 !important;
            font-weight: 950 !important;
            cursor: pointer !important;
        }

            .rs-cart-toast button:hover {
                background: #fff3eb !important;
            }

@keyframes rsCartToastIn {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .rs-cart-toast {
        left: .8rem !important;
        right: .8rem !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 20px !important;
        z-index: 999999 !important;
    }
}