/* Place in: wwwroot/css/chapresto-ui-fixes.css
   Load LAST in Components/App.razor, after all other ChapResto CSS files. */

:root {
    --cr-orange: #df6520;
    --cr-dark: #1f1b19;
    --cr-muted: #6f675f;
    --cr-soft: #fff7ef;
}

/* =========================================================
   GLOBAL PAGE SPACING
   ========================================================= */
.cr-main,
main {
    overflow-x: hidden;
}

.cr-page,
.cr-home,
.cr-list-page,
.cr-menu-page,
.cr-restaurants-page,
.cr-owner-page,
.cr-admin-page,
section[class*="page"],
section[class*="home"],
section[class*="menu"],
section[class*="restaurant"] {
    padding-top: clamp(0.1rem, 0.1vw, 0.1rem) !important;
}

    /* =========================================================
   TITLES - REAL OVERRIDE FOR EXISTING PAGES
   Works even when pages do not use cr-page-title classes.
   ========================================================= */
    .cr-main h1,
    main h1,
    section h1,
    .cr-hero h1,
    .cr-home-hero h1,
    .cr-public-hero h1,
    .cr-restaurants-hero h1,
    .cr-menu-hero h1,
    .cr-list-hero h1,
    .cr-page-hero h1,
    .cr-page-title,
    .cr-section-title,
    .cr-list-page h1,
    .cr-menu-page h1,
    .cr-restaurants-page h1 {
        max-width: 760px !important;
        font-size: clamp(2.35rem, 4.5vw, 4.8rem) !important;
        line-height: .98 !important;
/*        letter-spacing: -0.055em !important;*/
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
    }

    .cr-home h1,
    .cr-hero h1,
    .cr-home-hero h1,
    .cr-public-hero h1 {
        font-size: clamp(2.6rem, 5vw, 5.4rem) !important;
    }

    .cr-menu-page h1,
    .cr-menu-hero h1,
    .cr-list-page h1,
    .cr-restaurants-page h1,
    .cr-restaurants-hero h1,
    main h1:where(:not(.cr-login-page h1):not(.cr-register-page h1)) {
        font-size: clamp(2.15rem, 4.2vw, 4.2rem) !important;
    }

.cr-main h2,
main h2,
section h2,
.cr-section-title h2 {
    font-size: clamp(1.45rem, 2.3vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.cr-kicker,
.cr-page-kicker,
.cr-eyebrow,
.cr-muted-title,
main small:first-child,
section > small:first-child {
    font-size: .78rem !important;
    letter-spacing: .14em !important;
    font-weight: 900 !important;
    color: #a34313 !important;
    text-transform: uppercase !important;
}

/* =========================================================
   PAGE CONTAINERS WIDTH / ALIGNMENT
   ========================================================= */
.cr-home,
.cr-page,
.cr-list-page,
.cr-menu-page,
.cr-restaurants-page,
.cr-owner-page,
.cr-admin-page,
main > section {
    width: min(1280px, calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

    .cr-home,
    main > section.cr-home,
    main > section:first-child {
        margin-top: 0 !important;
    }

/* =========================================================
   TOP BAR / DESKTOP NAV
   ========================================================= */
.cr-topbar {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(31, 27, 25, .08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
}

.cr-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: .75rem !important;
    color: var(--cr-dark) !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    font-size: 1.25rem !important;
    white-space: nowrap !important;
}

.cr-brand-icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #fff0dc !important;
    color: #1f1b19 !important;
}

.cr-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .95rem !important;
    min-width: 0 !important;
}

    .cr-nav a,
    .cr-nav button,
    .cr-link-btn {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .42rem !important;
        min-height: 38px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #28231f !important;
        text-decoration: none !important;
        font-size: .95rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

        .cr-nav a i,
        .cr-nav button i,
        .cr-link-btn i {
            font-size: .98rem !important;
            line-height: 1 !important;
            color: #1f1b19 !important;
        }

        .cr-nav a.active,
        .cr-nav a.active i {
            color: var(--cr-orange) !important;
        }

.cr-primary-link {
    min-height: 44px !important;
    padding: 0 1.2rem !important;
    border-radius: 999px !important;
    background: #1f1b19 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(31, 27, 25, .15) !important;
}

    .cr-primary-link i,
    .cr-primary-link span {
        color: #fff !important;
    }

/* =========================================================
   CART BADGE - DESKTOP + MOBILE
   Use only <em> for the count.
   ========================================================= */
.cr-cart-link,
.cr-bottom-cart,
.cr-bottom-nav a[href="/cart"] {
    position: relative !important;
}

    .cr-cart-link em,
    .cr-bottom-cart em,
    .cr-bottom-nav a[href="/cart"] em {
        position: absolute !important;
        top: -8px !important;
        right: -13px !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: var(--cr-orange) !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        font-style: normal !important;
        line-height: 1 !important;
        box-shadow: 0 8px 18px rgba(223, 101, 32, .28) !important;
        z-index: 3 !important;
    }

    /* Remove old badge style if any old span count exists */
    .cr-cart-link > span:not(:first-of-type) {
        position: absolute !important;
        top: -8px !important;
        right: -13px !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: var(--cr-orange) !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        line-height: 18px !important;
        text-align: center !important;
    }

/* =========================================================
   FILTER BARS
   ========================================================= */
.cr-filter,
.cr-search-card,
.cr-filter-card,
.cr-menu-filter,
.cr-restaurants-filter,
form[class*="filter"],
div[class*="filter"]:has(input) {
    border-radius: 22px !important;
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.cr-bottom-nav {
    height: 72px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    display: none !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(255, 255, 255, .98) !important;
    border-top: 1px solid rgba(31, 27, 25, .08) !important;
    box-shadow: 0 -16px 40px rgba(31, 27, 25, .08) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 80 !important;
}

    .cr-bottom-nav a,
    .cr-bottom-nav button {
        min-width: 58px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: #4e4741 !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .cr-bottom-nav i {
        font-size: 18px !important;
        color: #1f1b19 !important;
    }

    .cr-bottom-nav a.active,
    .cr-bottom-nav a.active i {
        color: var(--cr-orange) !important;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
    .cr-nav {
        gap: .65rem !important;
    }

        .cr-nav a,
        .cr-nav button,
        .cr-link-btn {
            font-size: .88rem !important;
        }
}

@media (max-width: 920px) {
    .cr-topbar {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 1rem !important;
    }

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

    .cr-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
    }

    .cr-main,
    main {
        padding-bottom: 86px !important;
    }

        .cr-main h1,
        main h1,
        section h1,
        .cr-hero h1,
        .cr-home-hero h1,
        .cr-public-hero h1,
        .cr-restaurants-hero h1,
        .cr-menu-hero h1,
        .cr-list-hero h1,
        .cr-page-hero h1,
        .cr-page-title,
        .cr-section-title,
        .cr-list-page h1,
        .cr-menu-page h1,
        .cr-restaurants-page h1 {
            font-size: clamp(2rem, 9vw, 3.15rem) !important;
            letter-spacing: -0.05em !important;
            max-width: 100% !important;
        }
}

@media (max-width: 520px) {
    .cr-brand {
        font-size: 1.05rem !important;
    }

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

    .cr-home,
    .cr-page,
    .cr-list-page,
    .cr-menu-page,
    .cr-restaurants-page,
    .cr-owner-page,
    .cr-admin-page,
    main > section {
        width: min(100% - 24px, 1280px) !important;
    }

    .cr-bottom-nav span {
        font-size: 10.5px !important;
    }

    .cr-cart-link em,
    .cr-bottom-cart em,
    .cr-bottom-nav a[href="/cart"] em {
        top: -7px !important;
        right: 7px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
}
/* Add at the END of wwwroot/css/chapresto-ui-fixes.css */

/* Desktop cart badge: place count on top of the cart icon, not after Panier text */
.cr-nav .cr-cart-link,
.cr-nav a[href="/cart"] {
    position: relative !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

    .cr-nav .cr-cart-link i,
    .cr-nav a[href="/cart"] i {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        min-width: 18px !important;
    }

    .cr-nav .cr-cart-link em,
    .cr-nav a[href="/cart"] em {
        position: absolute !important;
        top: -9px !important;
        left: 10px !important;
        right: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: #df6520 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        font-style: normal !important;
        line-height: 1 !important;
        box-shadow: 0 8px 18px rgba(223, 101, 32, .28) !important;
        z-index: 5 !important;
    }

/* Bottom/mobile cart badge */
.cr-bottom-nav .cr-cart-link,
.cr-bottom-nav a[href="/cart"] {
    position: relative !important;
    overflow: visible !important;
}

    .cr-bottom-nav .cr-cart-link em,
    .cr-bottom-nav a[href="/cart"] em {
        position: absolute !important;
        top: 2px !important;
        left: calc(50% + 3px) !important;
        right: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: #df6520 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        font-style: normal !important;
        line-height: 1 !important;
        box-shadow: 0 8px 18px rgba(223, 101, 32, .28) !important;
        z-index: 5 !important;
    }

    /* Keep the menu text normal, never transform the Panier label into a badge */
    .cr-cart-link > span,
    .cr-nav a[href="/cart"] > span,
    .cr-bottom-nav a[href="/cart"] > span {
        position: static !important;
        display: inline !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

/* Recommended markup:
<NavLink href="/cart" class="cr-cart-link">
    <i class="fa fa-cart-shopping"></i>
    <span>Panier</span>
    @if (Cart.Summary.TotalItems > 0)
    {
        <em>@Cart.Summary.TotalItems</em>
    }
</NavLink>
*/