/* =========================================================
   ChapResto Client - global spacing and restaurant mobile fix
   Load this file LAST in Components/App.razor.
   Goal: clean, professional margins on desktop/tablet/mobile,
   with no large blank gap below the mobile header.
   ========================================================= */

:root {
    --cr-client-page-max: 1600px;
    --cr-client-page-gutter: clamp(18px, 2.2vw, 34px);
    --cr-client-page-gutter-mobile: 10px;
    --cr-client-section-gap: clamp(16px, 2.2vw, 28px);
    --cr-client-card-radius: 24px;
    --cr-client-mobile-header-height: 64px;
    --cr-client-mobile-bottom-height: 78px;
}

html,
body,
.client-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.client-shell .cr-main,
.client-shell main.cr-main,
.client-shell .client-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* ---------- Global public pages: consistent gutters ---------- */
.client-shell.is-client-public .cr-page,
.client-shell.is-client-public .cr-page-head,
.client-shell.is-client-public .cr-filter-panel,
.client-shell.is-client-public .cr-page-grid,
.client-shell.is-client-public .cr-empty,
.client-shell.is-client-public .cr-cart-wrap,
.client-shell.is-client-public .cr-order-status,
.client-shell.is-client-public .cr-loading,
.client-shell.is-client-public .cr-public-hero,
.client-shell.is-client-public .cr-grid,
.client-shell.is-client-public .cr-section,
.client-shell.is-client-public .cr-restaurants-directory-grid,
.client-shell.is-client-public .cr-menu-grid {
    width: min(calc(100% - (var(--cr-client-page-gutter) * 2)), var(--cr-client-page-max)) !important;
    max-width: var(--cr-client-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.client-shell.is-client-public .cr-page {
    padding: clamp(18px, 3vw, 42px) 0 calc(96px + env(safe-area-inset-bottom)) !important;
}

.client-shell.is-client-public .cr-page-head {
    padding-top: clamp(24px, 4vw, 54px) !important;
    margin-bottom: clamp(14px, 2vw, 26px) !important;
}

.client-shell.is-client-public .cr-card,
.client-shell.is-client-public .cr-auth-card,
.client-shell.is-client-public .cr-form-card,
.client-shell.is-client-public .cr-restaurant-card,
.client-shell.is-client-public .cr-restaurants-clickable-card {
    border-radius: var(--cr-client-card-radius) !important;
}

/* ---------- Restaurant public site: desktop/tablet spacing ---------- */
.client-shell.is-restaurant-public .cr-topbar,
.client-shell.is-restaurant-public .cr-topbar-balanced {
    z-index: 1300 !important;
}

.client-shell.is-restaurant-public .rs-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(24px, 3vw, 40px) 0 54px !important;
    background: linear-gradient(180deg, #fbf8f3 0%, #f3eee6 100%) !important;
    overflow-x: hidden !important;
}

.client-shell.is-restaurant-public .rs-shell {
    width: min(calc(100% - (var(--cr-client-page-gutter) * 2)), var(--cr-client-page-max)) !important;
    max-width: var(--cr-client-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.client-shell.is-restaurant-public .rs-hero-card-premium {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: var(--cr-client-section-gap) !important;
}

.client-shell.is-restaurant-public .rs-hero-card-compact {
    margin-top: 0 !important;
}

.client-shell.is-restaurant-public .rs-hero-card-compact .rs-identity-card,
.client-shell.is-restaurant-public .rs-identity-card-compact {
    margin-top: 0 !important;
}

.client-shell.is-restaurant-public .rs-section,
.client-shell.is-restaurant-public .rs-home-layout,
.client-shell.is-restaurant-public .rs-info-cluster,
.client-shell.is-restaurant-public .rs-info-cards,
.client-shell.is-restaurant-public .rs-cart-tab-section,
.client-shell.is-restaurant-public .rs-orders-tab-section,
.client-shell.is-restaurant-public .rs-order-tracking-tab-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.client-shell.is-restaurant-public .rs-section {
    margin-top: 0 !important;
    margin-bottom: var(--cr-client-section-gap) !important;
}

.client-shell.is-restaurant-public .rs-section-head {
    margin-bottom: clamp(12px, 1.6vw, 20px) !important;
}

.client-shell.is-restaurant-public .rs-empty-panel {
    min-height: clamp(150px, 18vw, 210px) !important;
    padding: clamp(18px, 2.5vw, 28px) !important;
}

.client-shell.is-restaurant-public .rs-search-box {
    max-width: 520px !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
    .client-shell.is-client-public .cr-page,
    .client-shell.is-client-public .cr-page-head,
    .client-shell.is-client-public .cr-filter-panel,
    .client-shell.is-client-public .cr-page-grid,
    .client-shell.is-client-public .cr-empty,
    .client-shell.is-client-public .cr-cart-wrap,
    .client-shell.is-client-public .cr-order-status,
    .client-shell.is-client-public .cr-loading,
    .client-shell.is-client-public .cr-public-hero,
    .client-shell.is-client-public .cr-grid,
    .client-shell.is-client-public .cr-section,
    .client-shell.is-client-public .cr-restaurants-directory-grid,
    .client-shell.is-client-public .cr-menu-grid,
    .client-shell.is-restaurant-public .rs-shell {
        width: calc(100% - 28px) !important;
    }
}

/* ---------- Mobile: remove the large blank zone under the topbar ---------- */
@media (max-width: 840px) {
    .client-shell .cr-topbar-balanced,
    .client-shell.is-restaurant-public .cr-topbar-balanced {
        height: var(--cr-client-mobile-header-height) !important;
        min-height: var(--cr-client-mobile-header-height) !important;
    }

    .client-shell .cr-topbar-balanced .cr-topbar-inner,
    .client-shell.is-restaurant-public .cr-topbar-balanced .cr-topbar-inner {
        width: calc(100% - 18px) !important;
        height: var(--cr-client-mobile-header-height) !important;
        min-height: var(--cr-client-mobile-header-height) !important;
        margin-inline: auto !important;
        gap: 8px !important;
    }

    .client-shell.is-restaurant-public .cr-brand-logo,
    .client-shell.is-restaurant-public .cr-brand-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .client-shell.is-restaurant-public .cr-brand strong {
        max-width: clamp(104px, 34vw, 150px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(.98rem, 4.4vw, 1.12rem) !important;
        line-height: 1.05 !important;
    }

    .client-shell.is-restaurant-public .cr-topbar-actions {
        gap: 8px !important;
    }

    .client-shell.is-restaurant-public .rs-page {
        padding: 8px 0 calc(var(--cr-client-mobile-bottom-height) + 14px + env(safe-area-inset-bottom)) !important;
        min-height: calc(100dvh - var(--cr-client-mobile-header-height)) !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 var(--cr-client-page-gutter-mobile) !important;
    }

    .client-shell.is-restaurant-public .rs-hero-card-premium,
    .client-shell.is-restaurant-public .rs-hero-card-compact {
        margin-top: 8px !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-hero-card-compact .rs-identity-card,
    .client-shell.is-restaurant-public .rs-identity-card-compact {
        margin-top: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: 118px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        width: 100% !important;
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
        grid-template-columns: 66px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 7px !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 62px !important;
        height: 62px !important;
        border-radius: 14px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card h1 {
        font-size: clamp(1.55rem, 7.2vw, 2rem) !important;
        line-height: .98 !important;
        margin: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card p {
        margin-top: 4px !important;
        font-size: .86rem !important;
        line-height: 1.42 !important;
        -webkit-line-clamp: 4 !important;
    }

    .client-shell.is-restaurant-public .rs-section-head.compact,
    .client-shell.is-restaurant-public .rs-section-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
        margin-bottom: 12px !important;
    }

    .client-shell.is-restaurant-public .rs-search-box {
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
    }

    .client-shell.is-restaurant-public .rs-empty-panel {
        min-height: 132px !important;
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }

    .client-shell.is-restaurant-public .rs-mobile-tabs {
        height: var(--cr-client-mobile-bottom-height) !important;
        min-height: var(--cr-client-mobile-bottom-height) !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    }

    .client-shell.is-restaurant-public .rs-mobile-tabs button,
    .client-shell.is-restaurant-public .rs-mobile-tabs a {
        min-height: 58px !important;
        height: 58px !important;
        border-radius: 18px !important;
    }

    .client-shell.is-client-public .cr-page,
    .client-shell.is-client-public .cr-page-head,
    .client-shell.is-client-public .cr-filter-panel,
    .client-shell.is-client-public .cr-page-grid,
    .client-shell.is-client-public .cr-empty,
    .client-shell.is-client-public .cr-cart-wrap,
    .client-shell.is-client-public .cr-order-status,
    .client-shell.is-client-public .cr-loading,
    .client-shell.is-client-public .cr-public-hero,
    .client-shell.is-client-public .cr-grid,
    .client-shell.is-client-public .cr-section,
    .client-shell.is-client-public .cr-restaurants-directory-grid,
    .client-shell.is-client-public .cr-menu-grid {
        width: calc(100% - 20px) !important;
    }

    .client-shell.is-client-public .cr-page {
        padding-top: 14px !important;
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }

    .client-shell.is-client-public .cr-page-head {
        padding-top: 14px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 420px) {
    :root {
        --cr-client-page-gutter-mobile: 9px;
    }

    .client-shell.is-restaurant-public .rs-page {
        padding-top: 6px !important;
    }

    .client-shell.is-restaurant-public .rs-hero-card-premium,
    .client-shell.is-restaurant-public .rs-hero-card-compact {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        padding: 13px !important;
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 58px !important;
        height: 58px !important;
    }

    .client-shell.is-restaurant-public .rs-section-head h2 {
        font-size: clamp(1.55rem, 8vw, 1.95rem) !important;
    }
}

/* =========================================================
   V2 BALANCE FIX - restore complete restaurant banner/buttons
   after the compact spacing pass. Keep margins professional,
   but do not crop the hero cover or action buttons.
   ========================================================= */

/* Desktop / laptop: keep full banner visible below topbar. */
@media (min-width: 841px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: clamp(34px, 4vw, 62px) !important;
        padding-bottom: 72px !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        width: min(calc(100% - 48px), var(--cr-client-page-max)) !important;
    }

    .client-shell.is-restaurant-public .rs-hero-card-premium:not(.rs-hero-card-compact) {
        margin-top: 0 !important;
        margin-bottom: clamp(28px, 3vw, 42px) !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: clamp(210px, 17vw, 280px) !important;
        min-height: 210px !important;
        overflow: hidden !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        display: flex !important;
        top: 18px !important;
        right: 20px !important;
        z-index: 8 !important;
        max-width: calc(100% - 40px) !important;
    }

    .client-shell.is-restaurant-public .rs-action-pill {
        min-height: 40px !important;
        padding: 0 18px !important;
        font-size: .88rem !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        margin-top: -52px !important;
        min-height: 168px !important;
        padding: 30px 30px 26px !important;
        grid-template-columns: 132px minmax(0, 1fr) !important;
        gap: 22px !important;
        border-radius: 0 0 28px 28px !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 112px !important;
        height: 112px !important;
        border-radius: 20px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card h1 {
        font-size: clamp(2.25rem, 4.3vw, 3.25rem) !important;
        line-height: 1 !important;
        margin-bottom: 12px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card p {
        font-size: clamp(.98rem, 1.2vw, 1.12rem) !important;
        line-height: 1.55 !important;
        margin-bottom: 14px !important;
    }

    .client-shell.is-restaurant-public .rs-home-layout,
    .client-shell.is-restaurant-public .rs-info-cluster,
    .client-shell.is-restaurant-public .rs-section {
        margin-top: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-panel,
    .client-shell.is-restaurant-public .rs-info-panel,
    .client-shell.is-restaurant-public .rs-empty-panel {
        border-radius: 22px !important;
    }
}

/* Tablet: preserve banner and actions without creating a huge empty top gap. */
@media (min-width: 721px) and (max-width: 840px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: 18px !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        width: calc(100% - 28px) !important;
        padding: 0 !important;
        margin-inline: auto !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: 190px !important;
        min-height: 190px !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        display: flex !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        max-width: calc(100% - 24px) !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        margin-top: -34px !important;
        padding: 20px !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        border-radius: 24px !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 82px !important;
        height: 82px !important;
    }
}

/* Mobile: show the complete cover and the action buttons, but keep margins tight. */
@media (max-width: 720px) {
    :root {
        --cr-client-page-gutter-mobile: 12px;
        --cr-client-mobile-bottom-height: 86px;
    }

    .client-shell.is-restaurant-public .rs-page {
        padding-top: 12px !important;
        padding-bottom: calc(var(--cr-client-mobile-bottom-height) + 18px + env(safe-area-inset-bottom)) !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        width: 100% !important;
        max-width: none !important;
        padding: 0 var(--cr-client-page-gutter-mobile) !important;
        margin: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-hero-card-premium:not(.rs-hero-card-compact) {
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        border-radius: 0 !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: clamp(156px, 42vw, 190px) !important;
        min-height: 156px !important;
        border-radius: 0 0 24px 24px !important;
        overflow: hidden !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        display: flex !important;
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        max-width: none !important;
        padding: 2px 0 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions::-webkit-scrollbar {
        display: none !important;
    }

    .client-shell.is-restaurant-public .rs-action-pill {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 0 13px !important;
        font-size: .76rem !important;
        background: rgba(255,255,255,.97) !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        width: calc(100% - 14px) !important;
        margin: -30px auto 0 !important;
        min-height: auto !important;
        padding: 18px 16px 16px !important;
        border-radius: 24px !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        row-gap: 10px !important;
        align-items: center !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 74px !important;
        height: 74px !important;
        border-radius: 16px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card h1 {
        font-size: clamp(1.85rem, 8.6vw, 2.35rem) !important;
        line-height: 1.03 !important;
        margin: 0 0 8px !important;
        letter-spacing: -.045em !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card p {
        margin: 0 0 10px !important;
        font-size: .94rem !important;
        line-height: 1.48 !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    .client-shell.is-restaurant-public .rs-badges,
    .client-shell.is-restaurant-public .rs-meta-line {
        gap: 7px !important;
    }

    .client-shell.is-restaurant-public .rs-badges span,
    .client-shell.is-restaurant-public .rs-meta-line span,
    .client-shell.is-restaurant-public .rs-row-tags span {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: .72rem !important;
    }

    .client-shell.is-restaurant-public .rs-home-layout,
    .client-shell.is-restaurant-public .rs-info-cluster,
    .client-shell.is-restaurant-public .rs-section {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 18px !important;
    }

    .client-shell.is-restaurant-public .rs-panel,
    .client-shell.is-restaurant-public .rs-info-panel,
    .client-shell.is-restaurant-public .rs-empty-panel {
        border-radius: 20px !important;
    }

    .client-shell.is-restaurant-public .rs-mobile-tabs {
        height: var(--cr-client-mobile-bottom-height) !important;
        min-height: var(--cr-client-mobile-bottom-height) !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    }

    .client-shell.is-restaurant-public .rs-mobile-tabs button,
    .client-shell.is-restaurant-public .rs-mobile-tabs a {
        min-height: 62px !important;
        height: 62px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 420px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: 10px !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        padding-inline: 10px !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: 158px !important;
        min-height: 158px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        width: calc(100% - 10px) !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        padding: 16px 14px 15px !important;
    }

    .client-shell.is-restaurant-public .rs-logo-box {
        width: 68px !important;
        height: 68px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card h1 {
        font-size: clamp(1.7rem, 8.8vw, 2.05rem) !important;
    }
}


/* =========================================================
   V3 FINAL RESPONSIVE SPACING TUNER
   CHANGE VALUES HERE ONLY when you want to tune top spacing.

   What each variable controls:
   - --rs-desktop-page-top / --rs-mobile-page-top: space below sticky header.
   - --rs-desktop-cover-height / --rs-mobile-cover-height: visible beige/banner height.
   - --rs-desktop-actions-top / --rs-mobile-actions-top: Appeler/WhatsApp/Partager position inside banner.
   - --rs-desktop-identity-overlap / --rs-mobile-identity-overlap: how much white identity card overlaps banner.
   ========================================================= */
:root {

    --rs-desktop-page-top: clamp(75px, 10vw, 80px);
    --rs-desktop-shell-gutter: 48px;
    --rs-desktop-cover-height: clamp(220px, 17vw, 280px);
    --rs-desktop-actions-top: 18px;
    --rs-desktop-identity-overlap: -46px;
    --rs-tablet-page-top: 22px;
    --rs-tablet-cover-height: 200px;
    --rs-tablet-actions-top: 14px;
    --rs-tablet-identity-overlap: -34px;
    --rs-mobile-page-top: 50px;
    --rs-mobile-shell-gutter: 12px;
    --rs-mobile-cover-height: clamp(178px, 48vw, 210px);
    --rs-mobile-actions-top: 14px;
    --rs-mobile-identity-overlap: -28px;
}

@media (min-width: 841px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: var(--rs-desktop-page-top) !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        width: min(calc(100% - var(--rs-desktop-shell-gutter)), var(--cr-client-page-max)) !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: var(--rs-desktop-cover-height) !important;
        min-height: 220px !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        top: var(--rs-desktop-actions-top) !important;
        right: 20px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        margin-top: var(--rs-desktop-identity-overlap) !important;
    }
}

@media (min-width: 721px) and (max-width: 840px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: var(--rs-tablet-page-top) !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: var(--rs-tablet-cover-height) !important;
        min-height: var(--rs-tablet-cover-height) !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        top: var(--rs-tablet-actions-top) !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        margin-top: var(--rs-tablet-identity-overlap) !important;
    }
}

@media (max-width: 720px) {
    .client-shell.is-restaurant-public .rs-page {
        padding-top: var(--rs-mobile-page-top) !important;
    }

    .client-shell.is-restaurant-public .rs-shell {
        padding-inline: var(--rs-mobile-shell-gutter) !important;
    }

    .client-shell.is-restaurant-public .rs-cover {
        height: var(--rs-mobile-cover-height) !important;
        min-height: 178px !important;
    }

    .client-shell.is-restaurant-public .rs-cover-actions {
        top: var(--rs-mobile-actions-top) !important;
        left: 12px !important;
        right: 12px !important;
    }

    .client-shell.is-restaurant-public .rs-identity-card {
        margin-top: var(--rs-mobile-identity-overlap) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --rs-mobile-page-top: 50px;
        --rs-mobile-shell-gutter: 10px;
        --rs-mobile-cover-height: 178px;
        --rs-mobile-actions-top: 12px;
        --rs-mobile-identity-overlap: -26px;
    }
}

/* Mobile PWA install prompt: keep it compact and above the bottom tabs. */
@media (max-width: 520px) {
    .pwa-install-card {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--cr-client-mobile-bottom-height, 86px) + 10px + env(safe-area-inset-bottom)) !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .pwa-install-card > div {
        grid-column: 1 / -1 !important;
    }

    .pwa-install-card strong {
        font-size: .98rem !important;
        line-height: 1.15 !important;
    }

    .pwa-install-card span {
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    .pwa-install-card button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 12px !important;
    }
}

/* =========================================================
   Mobile restaurant cover actions - align right
   Appeler / WhatsApp / Partager
   ========================================================= */
@media (max-width: 720px) {
    .client-shell.is-restaurant-public .rs-cover-actions {
        left: 12px !important;
        right: 12px !important;
        top: var(--rs-mobile-actions-top, 12px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        max-width: calc(100% - 24px) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

        .client-shell.is-restaurant-public .rs-cover-actions::-webkit-scrollbar {
            display: none !important;
        }

    .client-shell.is-restaurant-public .rs-action-pill {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 0 13px !important;
        font-size: .76rem !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 420px) {
    .client-shell.is-restaurant-public .rs-cover-actions {
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .client-shell.is-restaurant-public .rs-action-pill {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: .74rem !important;
    }
}