/* ============================================================
   PUNJAB GRILL DIGITAL GUEST EXPERIENCE
   MASTER CUSTOMER CSS
   menu.php + info.php
   Version 23.0
============================================================ */

* , *::before, *::after { box-sizing: border-box; }

:root {
    --pg-bg: #080807;
    --pg-bg-soft: #0f0f0d;
    --pg-card: #151411;
    --pg-card-hover: #1b1915;
    --pg-gold: #d4aa42;
    --pg-gold-light: #e3bb55;
    --pg-gold-dark: #a97920;
    --pg-text: #f4efe7;
    --pg-muted: #aca298;
    --pg-muted-light: #c6baac;
    --pg-green: #58b66d;
    --pg-red: #c96969;
    --pg-border: rgba(212, 170, 66, .22);
    --pg-border-soft: rgba(212, 170, 66, .12);
    --pg-max-width: 760px;
    --bottom-nav-height: 68px;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #050504;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: #050504;
    color: var(--pg-text);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

/* ============================================================
   COMMON APP WIDTH
============================================================ */

.customer-app,
.info-app {
    position: relative;
    width: 100%;
    max-width: var(--pg-max-width);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--pg-bg);
}

/* Do not put overflow:hidden on .customer-app.
   It can break position:sticky in some browsers. */
.info-app { overflow-x: hidden; }

/* ============================================================
   MENU HERO
============================================================ */

.menu-hero {
    position: relative;
    width: 100%;
    padding: 30px 24px 32px;
    text-align: center;
    border-bottom: 1px solid var(--pg-border);
    background:
        radial-gradient(circle at 50% 12%, rgba(212,170,66,.10), transparent 38%),
        linear-gradient(180deg, #11100e, #080807);
}

.premium-logo-circle,
.menu-brand-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 22px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--pg-gold-dark);
    border-radius: 50%;
    background: #050505;
    box-shadow: 0 10px 30px rgba(0,0,0,.30);
}

.premium-logo-circle img,
.menu-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

.menu-hero h1 {
    margin: 0;
    color: var(--pg-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
}

.menu-hero > p {
    margin: 10px 0 0;
    color: var(--pg-text);
    font-size: 14px;
}

.outlet-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 10px 18px;
    border: 1px solid var(--pg-border);
    border-radius: 24px;
    background: rgba(255,255,255,.02);
    color: var(--pg-text);
    font-size: 12px;
}

/* ============================================================
   ONE STICKY WRAPPER: SEARCH + CATEGORY BAR
   This is intentionally one sticky element to avoid sibling
   sticky conflicts on Chrome/Android/Safari.
============================================================ */

.menu-sticky-tools {
    position: sticky;
    top: 0;
    z-index: 150;
    width: 100%;
    background: rgba(8,8,7,.985);
    border-bottom: 1px solid var(--pg-border-soft);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.menu-search {
    width: 100%;
    padding: 12px 24px 8px;
}

.menu-search input {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 26px;
    outline: none;
    background: #1a1916;
    color: var(--pg-text);
    font-size: 13px;
}

.menu-search input::placeholder { color: #8f887f; }

.menu-search input:focus {
    border-color: rgba(212,170,66,.55);
    box-shadow: 0 0 0 3px rgba(212,170,66,.06);
}

.category-nav {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 24px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.category-nav::-webkit-scrollbar { display: none; }

.category-link {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    background: #11110f;
    color: #d4cec5;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.category-link:hover { border-color: rgba(212,170,66,.42); }

.category-link.active {
    border-color: var(--pg-gold);
    background: linear-gradient(135deg, #b98726, #d7ad48);
    color: #080807;
}

/* ============================================================
   MENU CONTENT / CATEGORY SECTIONS
============================================================ */

.menu-content {
    width: 100%;
    padding-bottom: calc(var(--bottom-nav-height) + 30px + env(safe-area-inset-bottom));
    background: var(--pg-bg);
}

.menu-category {
    width: 100%;
    padding: 22px 24px 0;
    scroll-margin-top: 145px;
}

.category-title { margin-bottom: 6px; }

.category-title h2 {
    margin: 0 0 6px;
    color: var(--pg-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.category-title p {
    margin: 0;
    color: var(--pg-muted);
    font-size: 11px;
    line-height: 1.6;
}

/* ============================================================
   DISH CARD
============================================================ */

.dish-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) 112px;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--pg-border-soft);
}

.dish-card:last-child { border-bottom: 0; }
.dish-info { min-width: 0; }

.dish-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.dish-name h3 {
    margin: 0;
    color: var(--pg-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.food-dot {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1px solid #68ae51;
}

.food-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: #68ae51;
}

.food-dot.nonveg { border-color: #b65e50; }
.food-dot.nonveg::after { background: #b65e50; }

.chef-label {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 4px 8px;
    border: 1px solid rgba(212,170,66,.20);
    border-radius: 12px;
    background: rgba(212,170,66,.05);
    color: var(--pg-gold);
    font-size: 9px;
    font-weight: 700;
}

.dish-description {
    margin: 8px 0 0;
    color: var(--pg-muted);
    font-size: 11px;
    line-height: 1.65;
}

.dish-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.dish-meta span {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 12px;
    background: rgba(212,170,66,.06);
    color: #c1aa7b;
    font-size: 9px;
}

.dish-allergen {
    margin-top: 7px;
    color: #938a80;
    font-size: 9px;
    line-height: 1.5;
}

.dish-price {
    margin-top: 11px;
    color: var(--pg-gold);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.old-price {
    margin-right: 8px;
    color: #79736c;
    font-size: 11px;
    font-weight: 500;
    text-decoration: line-through;
}

.special-price {
    color: var(--pg-gold-light);
    font-size: 14px;
    font-weight: 800;
}

.dish-image {
    width: 112px;
    height: 112px;
    justify-self: end;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #211f1b;
}

.dish-image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.dish-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(212,170,66,.12), transparent 60%),
        #181613;
    color: var(--pg-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
}

.menu-empty {
    width: 100%;
    padding: 60px 24px 100px;
    text-align: center;
}

.menu-empty h2 {
    margin: 0 0 10px;
    color: var(--pg-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.menu-empty p {
    margin: 0;
    color: var(--pg-muted);
    font-size: 12px;
    line-height: 1.7;
}

.menu-empty-logo { width: 90px; height: 90px; }

/* ============================================================
   INFO PAGE
============================================================ */

.info-storefront {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    background: var(--pg-bg);
}

.store-carousel { position: absolute; inset: 0; width: 100%; height: 100%; }

.store-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility .55s ease;
}

.store-slide.active { opacity: 1; visibility: visible; }

.store-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.info-storefront-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(212,170,66,.15), transparent 58%), var(--pg-bg);
}

.info-storefront-placeholder img { width: 130px; height: 130px; object-fit: contain; }

.info-image-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.06) 5%, rgba(0,0,0,.17) 42%, rgba(0,0,0,.96) 100%);
}

.info-brand {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 26px;
    padding: 0 22px;
    text-align: center;
}

.info-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--pg-gold);
    border-radius: 50%;
    background: #050504;
}

.info-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

.info-brand h1 {
    margin: 0;
    color: var(--pg-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
}

.info-brand p { margin: 6px 0 0; color: #fff; font-size: 12px; }

.carousel-arrow {
    position: absolute;
    z-index: 15;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(212,170,66,.35);
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: var(--pg-gold);
    font-size: 24px;
    cursor: pointer;
}

.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }

.carousel-dots {
    position: absolute;
    z-index: 16;
    left: 50%;
    bottom: 8px;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.carousel-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
}

.carousel-dot.active { width: 22px; border-radius: 10px; background: var(--pg-gold); }

.info-content {
    width: 100%;
    padding: 28px 24px calc(var(--bottom-nav-height) + 35px + env(safe-area-inset-bottom));
    background: var(--pg-bg);
}

.info-card {
    width: 100%;
    display: grid;
    grid-template-columns: 50px minmax(0,1fr);
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid var(--pg-border-soft);
}

.info-card:first-child { padding-top: 4px; }

.info-card-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212,170,66,.30);
    border-radius: 50%;
    background: rgba(212,170,66,.04);
    color: var(--pg-gold);
}

.info-card-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-card-content { min-width: 0; }

.info-label {
    display: block;
    margin-bottom: 8px;
    color: var(--pg-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.info-card-content h3 { margin: 0 0 7px; color: var(--pg-text); font-size: 16px; }
.info-card-content p { margin: 4px 0; color: var(--pg-muted-light); font-size: 12px; line-height: 1.6; }
.info-country { color: #c7a66c !important; }

.info-text-link {
    display: inline-flex;
    margin-top: 10px;
    color: var(--pg-gold);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.restaurant-status { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.status-open { background: var(--pg-green); box-shadow: 0 0 0 5px rgba(88,182,109,.12); }
.status-closed { background: var(--pg-red); box-shadow: 0 0 0 5px rgba(201,105,105,.12); }
.restaurant-status strong { font-size: 14px; }
.open-text { color: var(--pg-green); }
.closed-text { color: var(--pg-red); }
.restaurant-status-message { margin-top: 7px !important; color: var(--pg-muted-light) !important; font-size: 11px !important; }

.weekly-opening-hours {
    width: 100%;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid var(--pg-border-soft);
}

.weekly-hours-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0;
}

.weekly-hours-day { color: #bfa777; font-size: 11px; }
.weekly-hours-row strong { margin-left: auto; color: var(--pg-text); font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
.hours-closed { color: var(--pg-red) !important; }

.info-contact-line {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 6px 0;
    color: var(--pg-text);
    font-size: 13px;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.whatsapp-link { margin-top: 10px; color: var(--pg-gold); font-size: 11px; font-weight: 600; }

.info-about {
    width: 100%;
    padding: 28px 0;
    border-bottom: 1px solid var(--pg-border-soft);
}

.info-about p { margin: 0; color: var(--pg-muted-light); font-size: 12px; line-height: 1.8; }

.info-social { width: 100%; padding: 28px 0 0; }

.social-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 15px;
}

.social-button {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 15px;
    border: 1px solid var(--pg-border);
    border-radius: 13px;
    background: var(--pg-card);
    color: var(--pg-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.social-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212,170,66,.18);
    border-radius: 50%;
    background: rgba(212,170,66,.05);
    color: var(--pg-gold);
}

.social-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-icon .svg-fill { fill: currentColor; stroke: none; }

.info-actions { width: 100%; display: block; margin: 26px 0 0; padding: 0; }

.call-restaurant-btn {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    margin: 0;
    padding: 15px 20px;
    border: 1px solid var(--pg-gold-light);
    border-radius: 14px;
    background: linear-gradient(135deg,#c6972e,#e0b954);
    color: #080807;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.call-restaurant-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   COMMON BOTTOM NAVIGATION
============================================================ */

.bottom-nav,
.customer-bottom-nav {
    position: fixed;
    z-index: 200;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: var(--pg-max-width);
    min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pg-border-soft);
    background: rgba(11,11,10,.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.bottom-nav a,
.customer-bottom-nav a {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    color: #79756f;
    font-size: 9px;
    line-height: 1;
    text-decoration: none;
}

.bottom-nav a.active,
.customer-bottom-nav a.active { color: var(--pg-gold); }

.bottom-nav svg,
.customer-bottom-nav svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bottom-nav a:nth-child(2) svg,
.customer-bottom-nav a:nth-child(2) svg { fill: currentColor; stroke: none; }

.bottom-nav a span,
.customer-bottom-nav a span { display: block; font-size: 9px; white-space: nowrap; }

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 768px) {
    .customer-app, .info-app { max-width: 100%; }
    .bottom-nav, .customer-bottom-nav { max-width: 100%; }
    .info-storefront { height: 320px; }
}

@media (max-width: 520px) {
    :root { --bottom-nav-height: 64px; }

    .menu-hero { padding: 27px 20px 29px; }
    .premium-logo-circle, .menu-brand-logo { width: 106px; height: 106px; margin-bottom: 19px; }
    .menu-hero h1 { font-size: 33px; }
    .menu-hero > p { font-size: 13px; }
    .outlet-display { margin-top: 15px; padding: 9px 16px; font-size: 11px; }

    .menu-search { padding: 11px 20px 7px; }
    .menu-search input { height: 46px; }
    .category-nav { padding: 4px 20px 11px; }
    .category-link { min-height: 38px; padding: 0 15px; font-size: 10.5px; }

    .menu-category { padding: 19px 20px 0; }
    .category-title h2 { font-size: 23px; }

    .dish-card { grid-template-columns: minmax(0,1fr) 96px; gap: 14px; padding: 21px 0; }
    .dish-name h3 { font-size: 15px; }
    .dish-image { width: 96px; height: 96px; }
    .dish-description { font-size: 10.5px; }
    .dish-price { font-size: 13px; }

    .info-storefront { height: 290px; }
    .info-content { padding: 25px 20px calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom)); }
    .info-logo { width: 68px; height: 68px; }
    .info-brand h1 { font-size: 27px; }
    .info-card { grid-template-columns: 48px minmax(0,1fr); gap: 15px; padding: 24px 0; }
    .info-card-icon { width: 48px; height: 48px; }

    .social-buttons { gap: 9px; }
    .social-button { min-height: 58px; padding: 10px 11px; gap: 9px; font-size: 11px; }
    .social-icon { width: 33px; height: 33px; flex-basis: 33px; }
    .call-restaurant-btn { min-height: 57px; font-size: 13px; }

    .bottom-nav,
    .customer-bottom-nav { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }

    .bottom-nav svg,
    .customer-bottom-nav svg { width: 17px; height: 17px; flex-basis: 17px; }

    .bottom-nav a,
    .customer-bottom-nav a,
    .bottom-nav a span,
    .customer-bottom-nav a span { font-size: 8.5px; }
}

@media (max-width: 390px) {
    .menu-search, .menu-category, .info-content { padding-left: 17px; padding-right: 17px; }
    .category-nav { padding-left: 17px; padding-right: 17px; }
    .dish-card { grid-template-columns: minmax(0,1fr) 84px; gap: 12px; }
    .dish-image { width: 84px; height: 84px; }
    .dish-name h3 { font-size: 14px; }
    .info-card { grid-template-columns: 45px minmax(0,1fr); gap: 13px; }
    .info-card-icon { width: 45px; height: 45px; }
    .weekly-hours-row { align-items: flex-start; }
    .weekly-hours-row strong { max-width: 145px; white-space: normal; }
}

@media (max-width: 340px) {
    .dish-card { grid-template-columns: minmax(0,1fr) 76px; }
    .dish-image { width: 76px; height: 76px; }
    .social-buttons { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE TAP / BLUE HIGHLIGHT FIX
============================================================ */

a,
button,
.category-link,
.bottom-nav a,
.bottom-nav-item {
    -webkit-tap-highlight-color: transparent;
}


/* Category buttons */
.category-link {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;

    outline: none;
}


/* Remove browser focus background */
.category-link:focus,
.category-link:active {
    outline: none;
    box-shadow: none;
}


/* Keep our selected category gold */
.category-link.active {
    background: linear-gradient(
        135deg,
        #b98726,
        #d7ad48
    );

    border-color: #d4aa42;

    color: #080807;
}


/* Bottom navigation */
.bottom-nav a,
.bottom-nav-item {
    outline: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.bottom-nav a:focus,
.bottom-nav a:active,
.bottom-nav-item:focus,
.bottom-nav-item:active {
    outline: none;
    box-shadow: none;
}



/* ============================================================
   CLICKABLE DISH CARD
============================================================ */

.dish-clickable {
    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        opacity .15s ease,
        transform .15s ease;
}


.dish-clickable:active {
    opacity: .88;

    transform:
        scale(.995);
}


/* ============================================================
   UAE DIRHAM SYMBOL - MENU PRICE
============================================================ */

.dish-price {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #d4aa42;
    font-weight: 700;
}


.menu-dirham-symbol {
    width: 18px;
    height: 18px;

    display: inline-block;
    flex-shrink: 0;

    object-fit: contain;

    /* Makes black symbol Punjab Grill gold */
    filter:
        invert(72%)
        sepia(47%)
        saturate(725%)
        hue-rotate(359deg)
        brightness(89%);
}


.dish-price-amount {
    display: inline-block;

    color: #d4aa42;

    font-size: inherit;
    font-weight: 700;
    line-height: 1;
}


.menu-currency-text {
    color: #d4aa42;
    font-weight: 700;
}


@media (max-width: 600px) {

    .menu-dirham-symbol {
        width: 17px;
        height: 17px;
    }

}

/* ============================================================
   PUNJAB GRILL QR MENU
   SEARCH + STICKY CATEGORY + TAP FIXES
   Add this to the BOTTOM of assets/css/menu.css
============================================================ */

.menu-sticky-tools {
    position: sticky;
    top: 0;
    z-index: 150;
    width: 100%;
    background: rgba(8, 8, 7, .98);
    border-bottom: 1px solid rgba(212, 170, 66, .14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.menu-sticky-tools .menu-search {
    position: static;
    width: 100%;
    padding: 12px 16px 8px;
    background: transparent;
}

#menuSearch {
    width: 100%;
    min-height: 44px;
    display: block;
    padding: 0 15px;
    border: 1px solid rgba(212, 170, 66, .22);
    border-radius: 12px;
    outline: none;
    background: #12110f;
    color: #f4efe7;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
}

#menuSearch::placeholder {
    color: #867e73;
}

#menuSearch:focus {
    border-color: rgba(212, 170, 66, .65);
    box-shadow: 0 0 0 3px rgba(212, 170, 66, .08);
}

.menu-sticky-tools .category-nav,
.menu-sticky-tools .sticky-category-nav {
    position: static;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 16px 11px;
    border-bottom: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.menu-sticky-tools .category-nav::-webkit-scrollbar {
    display: none;
}

.category-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid rgba(212, 170, 66, .18);
    border-radius: 999px;
    background: #12110f;
    color: #a69d91;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.category-link.active {
    border-color: #d4aa42;
    background: rgba(212, 170, 66, .12);
    color: #d4aa42;
}

.category-link:focus,
.category-link:active {
    outline: none;
    box-shadow: none;
}

.menu-category {
    scroll-margin-top: 125px;
}

.dish-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dish-clickable:active {
    opacity: .90;
}

.menu-dirham-symbol {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 18px;
    object-fit: contain;
    vertical-align: middle;
    filter:
        invert(72%)
        sepia(47%)
        saturate(725%)
        hue-rotate(359deg)
        brightness(89%);
}

.menu-dirham-symbol.old-dirham-symbol {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
    opacity: .58;
}

.dish-price-main,
.special-price,
.old-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.menu-mode-message {
    display: none;
    padding: 12px 20px 0;
    color: #d4aa42;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.bottom-nav a,
.customer-bottom-nav a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.bottom-nav a:focus,
.bottom-nav a:active,
.customer-bottom-nav a:focus,
.customer-bottom-nav a:active {
    outline: none;
    box-shadow: none;
}

@media (max-width: 600px) {
    .menu-sticky-tools .menu-search {
        padding: 10px 14px 7px;
    }

    .menu-sticky-tools .category-nav,
    .menu-sticky-tools .sticky-category-nav {
        padding: 2px 14px 10px;
    }

    #menuSearch {
        min-height: 42px;
        font-size: 12px;
    }

    .category-link {
        min-height: 32px;
        padding: 6px 11px;
        font-size: 9px;
    }

    .menu-category {
        scroll-margin-top: 118px;
    }

    .menu-dirham-symbol {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}

/* ============================================================
   PUNJAB GRILL QR MENU
   FINAL MANAGEMENT THEME
   MODERN HERITAGE — MAROON / IVORY / GOLD
   Version 33.0
============================================================ */

.customer-app {
    --pg-menu-maroon: #6F1825;
    --pg-menu-maroon-2: #7D2230;
    --pg-menu-maroon-dark: #4E1019;
    --pg-menu-gold: #C8A25B;
    --pg-menu-gold-dark: #A87F34;
    --pg-menu-white: #FFFFFF;
    --pg-menu-ivory: #F8F4EF;
    --pg-menu-soft: #FCFAF7;
    --pg-menu-charcoal: #292423;
    --pg-menu-muted: #746B66;
    --pg-menu-border: #E7DDD3;
    --pg-menu-border-soft: #EFE7DF;
    position: relative;
    overflow-x: hidden;
    background: var(--pg-menu-ivory);
    color: var(--pg-menu-charcoal);
}

.customer-app::before,
.customer-app::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 310px;
    height: 310px;
    pointer-events: none;
    opacity: .07;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23A9823D' stroke-width='2'%3E%3Cpath d='M160 245c-20-27-30-55-29-84 1-36 13-67 29-92 16 25 28 56 29 92 1 29-9 57-29 84Z'/%3E%3Cpath d='M159 246c-35-17-61-40-77-68-18-31-22-64-18-94 29 11 55 30 74 60 16 26 23 60 21 102Z'/%3E%3Cpath d='M161 246c35-17 61-40 77-68 18-31 22-64 18-94-29 11-55 30-74 60-16 26-23 60-21 102Z'/%3E%3Cpath d='M160 250c-45-2-81-14-108-36-28-23-42-52-48-82 31 1 63 12 89 35 24 21 45 49 67 83Z'/%3E%3Cpath d='M160 250c45-2 81-14 108-36 28-23 42-52 48-82-31 1-63 12-89 35-24 21-45 49-67 83Z'/%3E%3Cpath d='M64 256c31 8 63 9 96 2 33 7 65 6 96-2'/%3E%3Cpath d='M86 273c25 5 50 6 74 2 24 4 49 3 74-2'/%3E%3C/g%3E%3C/svg%3E");
}
.customer-app::before { left:-120px; bottom:60px; transform:rotate(-9deg); }
.customer-app::after { right:-130px; bottom:135px; transform:rotate(10deg) scaleX(-1); }

.customer-app .menu-hero {
    padding:0;
    text-align:left;
    border-bottom:0;
    background:
        radial-gradient(circle at 50% -80%, rgba(200,162,91,.16), transparent 56%),
        linear-gradient(135deg,#58111C 0%,#6F1825 46%,#7D2230 100%);
    box-shadow:0 8px 28px rgba(78,16,25,.16);
}

.customer-app .menu-brand-row {
    min-height:92px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    align-items:center;
    gap:10px;
    padding:13px 20px 12px;
}

.customer-app .menu-header-icon {
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;opacity:.92;
}
.customer-app .menu-header-icon svg {
    width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
}
.customer-app .menu-header-icon-right { justify-self:end; }

.customer-app .menu-brand-lockup {
    min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;
}

.customer-app .premium-logo-circle,
.customer-app .menu-brand-logo {
    width:58px;height:58px;flex:0 0 58px;margin:0;padding:3px;
    border:1px solid rgba(200,162,91,.9);border-radius:50%;
    background:#32090F;box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.customer-app .menu-brand-copy { min-width:0; }

.customer-app .menu-hero h1 {
    margin:0;color:var(--pg-menu-gold);
    font-family:Georgia,"Times New Roman",serif;
    font-size:29px;font-weight:600;letter-spacing:.45px;line-height:1.05;
}

.customer-app .menu-hero .menu-brand-copy > p {
    margin:5px 0 0;color:#fff;font-size:9px;font-weight:700;
    letter-spacing:1.65px;text-transform:uppercase;
}

.customer-app .outlet-display {
    width:100%;margin:0;padding:12px 20px;display:flex;align-items:center;gap:11px;
    border:0;border-top:1px solid rgba(255,255,255,.11);border-radius:0;
    background:rgba(255,255,255,.055);color:#fff;
}

.customer-app .outlet-pin {
    width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;
    justify-content:center;color:var(--pg-menu-gold);
}
.customer-app .outlet-pin svg {
    width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
}
.customer-app .outlet-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
.customer-app .outlet-copy strong {
    overflow:hidden;color:#fff;font-size:12px;font-weight:700;
    text-overflow:ellipsis;white-space:nowrap;
}
.customer-app .outlet-copy small { color:rgba(255,255,255,.68);font-size:8px; }

.customer-app .outlet-open-badge {
    margin-left:auto;padding:5px 11px;border:1px solid #A8D7B4;border-radius:999px;
    background:#F3FBF5;color:#247A46;font-size:8px;font-weight:800;
    letter-spacing:.45px;text-transform:uppercase;
}

.customer-app .menu-sticky-tools {
    position:sticky;top:0;z-index:150;width:100%;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid var(--pg-menu-border);
    box-shadow:0 7px 24px rgba(60,31,21,.07);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

.customer-app .menu-search { padding:14px 18px 8px;position:relative; }
.customer-app .menu-search::before {
    content:"";position:absolute;z-index:2;left:34px;top:29px;width:13px;height:13px;
    border:1.6px solid #9B918A;border-radius:50%;pointer-events:none;
}
.customer-app .menu-search::after {
    content:"";position:absolute;z-index:2;left:45px;top:40px;width:6px;height:1.6px;
    transform:rotate(45deg);transform-origin:left center;border-radius:2px;
    background:#9B918A;pointer-events:none;
}
.customer-app .menu-search input,
.customer-app #menuSearch {
    height:48px;min-height:48px;padding:0 17px 0 43px;
    border:1px solid #E4D9CF;border-radius:14px;outline:none;background:#FCFAF7;
    color:var(--pg-menu-charcoal);font-size:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.customer-app .menu-search input::placeholder { color:#938A83; }
.customer-app .menu-search input:focus {
    border-color:rgba(111,24,37,.52);box-shadow:0 0 0 3px rgba(111,24,37,.055);
}

.customer-app .category-nav,
.customer-app .sticky-category-nav { gap:8px;padding:2px 18px 12px; }

.customer-app .category-link {
    min-height:37px;padding:0 14px;border:1px solid var(--pg-menu-border);
    border-radius:20px;background:#fff;color:#5F5651;font-size:9px;font-weight:700;
    box-shadow:none;
}
.customer-app .category-link:hover { border-color:rgba(111,24,37,.35); }
.customer-app .category-link.active {
    border-color:var(--pg-menu-maroon);background:var(--pg-menu-maroon);color:#fff;
    box-shadow:0 6px 16px rgba(111,24,37,.16);
}

.customer-app .menu-content {
    padding-bottom:calc(var(--bottom-nav-height) + 34px + env(safe-area-inset-bottom));
    background:rgba(248,244,239,.94);
}

.customer-app .menu-mode-message {
    display:none;padding:14px 18px 0;background:rgba(248,244,239,.96);
    color:var(--pg-menu-maroon);font-size:8px;font-weight:800;
    letter-spacing:1px;text-transform:uppercase;
}

.customer-app .menu-category { padding:27px 18px 0;scroll-margin-top:125px; }
.customer-app .category-title { margin-bottom:12px;text-align:center; }
.customer-app .category-eyebrow {
    margin-bottom:6px;color:var(--pg-menu-gold-dark);font-size:7px;font-weight:800;
    letter-spacing:1.6px;text-transform:uppercase;
}
.customer-app .category-title h2 {
    margin:0;color:var(--pg-menu-maroon-dark);
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;font-weight:500;line-height:1.15;
}
.customer-app .heritage-divider {
    width:92px;height:13px;margin:6px auto 3px;display:flex;align-items:center;justify-content:center;
}
.customer-app .heritage-divider::before,
.customer-app .heritage-divider::after {
    content:"";width:33px;height:1px;
    background:linear-gradient(to right,transparent,var(--pg-menu-gold));
}
.customer-app .heritage-divider::after { transform:scaleX(-1); }
.customer-app .heritage-divider span {
    width:7px;height:7px;margin:0 6px;border:1px solid var(--pg-menu-gold);
    transform:rotate(45deg);background:var(--pg-menu-ivory);
}
.customer-app .category-title p {
    max-width:520px;margin:4px auto 0;color:var(--pg-menu-muted);
    font-size:9px;line-height:1.55;
}

.customer-app .dish-card {
    width:100%;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:17px;
    align-items:center;margin-top:12px;padding:16px;border:1px solid var(--pg-menu-border-soft);
    border-radius:17px;background:rgba(255,255,255,.98);
    box-shadow:0 8px 24px rgba(58,37,26,.055);
}
.customer-app .dish-card:last-child { border-bottom:1px solid var(--pg-menu-border-soft); }
.customer-app .dish-info { min-width:0; }
.customer-app .dish-name { gap:8px; }
.customer-app .dish-name h3 {
    color:var(--pg-menu-charcoal);font-family:Georgia,"Times New Roman",serif;
    font-size:16px;font-weight:700;line-height:1.25;
}
.customer-app .food-dot { width:14px;height:14px;flex-basis:14px; }

.customer-app .chef-label {
    margin-top:8px;padding:4px 8px;border:1px solid rgba(200,162,91,.55);
    border-radius:999px;background:#FFFAEE;color:#8F6920;font-size:7.5px;font-weight:800;
}
.customer-app .dish-description {
    margin-top:8px;color:var(--pg-menu-muted);font-size:9.4px;line-height:1.58;
}
.customer-app .dish-meta { margin-top:7px; }
.customer-app .dish-meta span {
    padding:4px 7px;border-radius:999px;background:#FFF2EF;
    color:var(--pg-menu-maroon);font-size:7px;
}
.customer-app .dish-allergen { margin-top:7px;color:#948A82;font-size:7.8px; }

.customer-app .dish-price {
    margin-top:10px;color:var(--pg-menu-maroon);font-size:13px;font-weight:800;
}
.customer-app .dish-price-main,
.customer-app .special-price,
.customer-app .menu-currency-text { color:var(--pg-menu-maroon);font-weight:800; }
.customer-app .old-price { color:#9A9189; }

.customer-app .menu-dirham-symbol {
    width:15px;height:15px;flex:0 0 15px;
    filter:invert(16%) sepia(42%) saturate(2554%) hue-rotate(322deg) brightness(80%) contrast(91%);
}
.customer-app .menu-dirham-symbol.old-dirham-symbol {
    width:12px;height:12px;flex-basis:12px;opacity:.45;filter:grayscale(1);
}

.customer-app .dish-image {
    width:128px;height:128px;border:1px solid #E6DDD4;border-radius:14px;
    background:#F3ECE5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.customer-app .dish-image > img { border-radius:14px; }
.customer-app .dish-placeholder {
    background:radial-gradient(circle at center,rgba(200,162,91,.13),transparent 62%),#F4EEE7;
    color:var(--pg-menu-maroon);font-size:19px;
}

.customer-app .dish-clickable {
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
    -webkit-tap-highlight-color:transparent;
}
.customer-app .dish-clickable:hover {
    border-color:rgba(111,24,37,.19);box-shadow:0 12px 28px rgba(58,37,26,.075);
}
.customer-app .dish-clickable:active {
    opacity:1;transform:scale(.994);background:#FFFDFB;
}

.customer-app .menu-empty { background:transparent; }
.customer-app .menu-empty h2 { color:var(--pg-menu-maroon-dark); }
.customer-app .menu-empty p { color:var(--pg-menu-muted); }
.customer-app .menu-empty-logo { border-color:var(--pg-menu-gold);background:var(--pg-menu-maroon-dark); }

.customer-app .bottom-nav,
.customer-app .customer-bottom-nav {
    border-top:1px solid var(--pg-menu-border);
    background:rgba(255,255,255,.985);
    box-shadow:0 -8px 26px rgba(54,33,24,.075);
    backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
}
.customer-app .bottom-nav a,
.customer-app .customer-bottom-nav a { color:#8C837D; }
.customer-app .bottom-nav a.active,
.customer-app .customer-bottom-nav a.active { color:var(--pg-menu-maroon); }
.customer-app .bottom-nav a span,
.customer-app .customer-bottom-nav a span { font-size:8px;font-weight:700; }

@media (max-width:520px) {
    .customer-app .menu-brand-row {
        min-height:82px;grid-template-columns:34px minmax(0,1fr) 34px;gap:7px;padding:10px 13px;
    }
    .customer-app .menu-header-icon { width:32px;height:32px; }
    .customer-app .menu-header-icon svg { width:20px;height:20px; }
    .customer-app .menu-brand-lockup { gap:9px; }
    .customer-app .premium-logo-circle,
    .customer-app .menu-brand-logo { width:50px;height:50px;flex-basis:50px; }
    .customer-app .menu-hero h1 { font-size:24px; }
    .customer-app .menu-hero .menu-brand-copy > p { font-size:7.3px;letter-spacing:1.3px; }
    .customer-app .outlet-display { padding:10px 14px; }
    .customer-app .outlet-copy strong { font-size:10.5px; }
    .customer-app .menu-search { padding:11px 13px 7px; }
    .customer-app .menu-search::before { left:29px;top:26px; }
    .customer-app .menu-search::after { left:40px;top:37px; }
    .customer-app .category-nav,
    .customer-app .sticky-category-nav { padding:2px 13px 10px; }
    .customer-app .category-link { min-height:34px;padding:0 12px;font-size:8.4px; }
    .customer-app .menu-category { padding:23px 13px 0;scroll-margin-top:116px; }
    .customer-app .category-title h2 { font-size:23px; }
    .customer-app .dish-card {
        grid-template-columns:minmax(0,1fr) 106px;gap:12px;padding:13px;border-radius:14px;
    }
    .customer-app .dish-name h3 { font-size:14px; }
    .customer-app .dish-image { width:106px;height:106px;border-radius:12px; }
    .customer-app .dish-image > img { border-radius:12px; }
    .customer-app .dish-description { font-size:8.8px; }
    .customer-app .dish-price { font-size:12px; }
    .customer-app::before,
    .customer-app::after { width:250px;height:250px; }
}

@media (max-width:380px) {
    .customer-app .menu-hero h1 { font-size:21px; }
    .customer-app .premium-logo-circle,
    .customer-app .menu-brand-logo { width:45px;height:45px;flex-basis:45px; }
    .customer-app .dish-card {
        grid-template-columns:minmax(0,1fr) 92px;gap:10px;padding:11px;
    }
    .customer-app .dish-image { width:92px;height:92px; }
    .customer-app .outlet-copy strong { max-width:185px; }
}

/* ============================================================
   VERSION 35.0
   STICKY HEADER + STICKY SEARCH/CATEGORIES + FIXED FOOTER
============================================================ */

/*
|--------------------------------------------------------------------------
| IMPORTANT
|--------------------------------------------------------------------------
| Version 33 used:
| .customer-app > * { position: relative; }
| That unintentionally changed the fixed bottom navigation to relative.
| These rules explicitly restore the intended positioning.
|--------------------------------------------------------------------------
*/

.customer-app {
    --pg-sticky-header-height: 136px;
}


/* Decorative pattern must stay behind real page content. */

.customer-app .menu-content {
    position: relative;
    z-index: 1;
}


/* ============================================================
   STICKY MAROON HEADER
============================================================ */

.customer-app .menu-hero {
    position:
        -webkit-sticky;

    position:
        sticky;

    top: 0;

    z-index: 260;

    width: 100%;
}


/* ============================================================
   STICKY SEARCH + CATEGORIES
============================================================ */

.customer-app .menu-sticky-tools {
    position:
        -webkit-sticky;

    position:
        sticky;

    top:
        var(
            --pg-sticky-header-height
        );

    z-index: 250;

    width: 100%;
}


/* ============================================================
   FIXED BOTTOM NAVIGATION
============================================================ */

.customer-app .bottom-nav,
.customer-app .customer-bottom-nav {
    position:
        fixed !important;

    left: 50%;

    right: auto;

    bottom: 0;

    z-index: 500;

    width: min(
        100%,
        var(--pg-max-width)
    );

    transform:
        translateX(-50%);

    padding-bottom:
        env(
            safe-area-inset-bottom
        );
}


/* Ensure menu content never disappears underneath fixed footer. */

.customer-app .menu-content {
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            +
            42px
            +
            env(
                safe-area-inset-bottom
            )
        );
}


/* ============================================================
   SCROLL TARGET CORRECTION
============================================================ */

.customer-app .menu-category {
    scroll-margin-top:
        calc(
            var(--pg-sticky-header-height)
            +
            118px
        );
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 520px) {

    .customer-app {
        --pg-sticky-header-height:
            126px;
    }


    .customer-app .menu-category {
        scroll-margin-top:
            calc(
                var(--pg-sticky-header-height)
                +
                108px
            );
    }

}

/* ============================================================
   VERSION 36.0
   DESKTOP + MOBILE STICKY POSITIONING FIX
   Fixes:
   1. Sticky maroon header
   2. Sticky search/category toolbar
   3. Full-width fixed bottom navigation on desktop
============================================================ */

/*
|--------------------------------------------------------------------------
| ROOT APP
|--------------------------------------------------------------------------
| The old transform: translateZ(0) caused position:fixed children
| to use .customer-app as their containing block. It also interfered
| with sticky behavior in some browsers.
|--------------------------------------------------------------------------
*/

.customer-app {
    transform: none !important;

    overflow-x: clip !important;

    contain: none !important;

    isolation: isolate;

    --pg-sticky-header-height: 136px;
}


/*
|--------------------------------------------------------------------------
| STICKY BRAND HEADER
|--------------------------------------------------------------------------
*/

.customer-app .menu-hero {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: 0 !important;

    z-index: 1000 !important;

    width: 100% !important;
}


/*
|--------------------------------------------------------------------------
| STICKY SEARCH + CATEGORY BAR
|--------------------------------------------------------------------------
*/

.customer-app .menu-sticky-tools {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: var(--pg-sticky-header-height) !important;

    z-index: 990 !important;

    width: 100% !important;
}


/*
|--------------------------------------------------------------------------
| FIXED FULL-WIDTH BOTTOM NAVIGATION
|--------------------------------------------------------------------------
*/

.customer-app .bottom-nav,
.customer-app .customer-bottom-nav {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    bottom: 0 !important;

    z-index: 2000 !important;

    width: 100% !important;
    max-width: var(--pg-max-width) !important;

    min-height:
        calc(
            var(--bottom-nav-height)
            +
            env(safe-area-inset-bottom)
        ) !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    display: grid !important;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    align-items: center !important;

    padding:
        0
        12px
        env(safe-area-inset-bottom) !important;

    border-top:
        1px solid
        var(--pg-menu-border) !important;

    background:
        rgba(255,255,255,.99) !important;

    box-shadow:
        0 -8px 26px
        rgba(54,33,24,.08) !important;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/*
|--------------------------------------------------------------------------
| BOTTOM NAV ITEMS
|--------------------------------------------------------------------------
*/

.customer-app .bottom-nav a,
.customer-app .customer-bottom-nav a {
    width: 100% !important;
    min-width: 0 !important;

    min-height:
        var(--bottom-nav-height) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    padding: 7px 4px !important;
}


/*
|--------------------------------------------------------------------------
| MENU SCROLL CLEARANCE
|--------------------------------------------------------------------------
*/

.customer-app .menu-content {
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            +
            52px
            +
            env(safe-area-inset-bottom)
        ) !important;
}


/*
|--------------------------------------------------------------------------
| CATEGORY ANCHOR CLEARANCE
|--------------------------------------------------------------------------
*/

.customer-app .menu-category {
    scroll-margin-top:
        calc(
            var(--pg-sticky-header-height)
            +
            116px
        ) !important;
}


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 701px) {

    .customer-app .bottom-nav,
    .customer-app .customer-bottom-nav {
        width: 100% !important;
        max-width: var(--pg-max-width) !important;
    }


    .customer-app .bottom-nav a,
    .customer-app .customer-bottom-nav a {
        font-size: 11px !important;
    }


    .customer-app .bottom-nav svg,
    .customer-app .customer-bottom-nav svg {
        width: 19px !important;
        height: 19px !important;
    }


    .customer-app .bottom-nav a span,
    .customer-app .customer-bottom-nav a span {
        font-size: 9px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .customer-app {
        --pg-sticky-header-height: 126px;
    }


    .customer-app .bottom-nav,
    .customer-app .customer-bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
    }


    .customer-app .menu-category {
        scroll-margin-top:
            calc(
                var(--pg-sticky-header-height)
                +
                108px
            ) !important;
    }

}

/* ============================================================
   VERSION 37.0
   DESKTOP FOOTER WIDTH + CATEGORY SCROLL FIX
============================================================ */

/*
|--------------------------------------------------------------------------
| DESKTOP FOOTER
|--------------------------------------------------------------------------
| Keep the fixed footer exactly the same width as the QR menu app.
| The correct master variable is --pg-max-width (760px).
|--------------------------------------------------------------------------
*/

.customer-app .bottom-nav,
.customer-app .customer-bottom-nav {
    width: 100% !important;

    max-width:
        var(--pg-max-width) !important;

    left: 50% !important;

    right: auto !important;

    transform:
        translateX(-50%) !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE FOOTER
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .customer-app .bottom-nav,
    .customer-app .customer-bottom-nav {
        width: 100% !important;

        max-width: 100% !important;
    }

}


/*
|--------------------------------------------------------------------------
| CATEGORY TARGETS
|--------------------------------------------------------------------------
| JS now uses the live header + toolbar heights. This CSS value is a
| fallback for direct hash navigation and initial page loading.
|--------------------------------------------------------------------------
*/

.customer-app .menu-category {
    scroll-margin-top:
        calc(
            var(--pg-sticky-header-height)
            +
            126px
        ) !important;
}

/* ============================================================
   VERSION 38.0
   FINAL APPROVED BRAND LOCKUP + FLORAL HERITAGE BACKGROUND
============================================================ */

/* Header lion-only logo: designer source recommended 240x240 or larger PNG */
.customer-app .menu-brand-lockup {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.customer-app .menu-lion-mark {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.customer-app .menu-lion-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-app .menu-lion-mark img.fallback-round-logo {
    padding: 2px;
    border: 1px solid rgba(200,162,91,.85);
    border-radius: 50%;
    background: #32090F;
}

.customer-app .menu-brand-copy h1 {
    margin: 0;
    color: #C8A25B;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .9px;
    white-space: nowrap;
}

.customer-app .menu-brand-copy p {
    margin: 6px 0 0;
    color: #FFFFFF;
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| FLORAL BACKGROUND
|--------------------------------------------------------------------------
| No extra image is required. The flower is an embedded SVG.
| Keep opacity low so food photography remains the focus.
|--------------------------------------------------------------------------
*/

.customer-app::before,
.customer-app::after {
    opacity: .05 !important;
}

@media (max-width: 520px) {

    .customer-app .menu-brand-lockup {
        gap: 8px;
    }

    .customer-app .menu-lion-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .customer-app .menu-brand-copy h1 {
        font-size: 22px;
        letter-spacing: .65px;
    }

    .customer-app .menu-brand-copy p {
        margin-top: 5px;
        font-size: 6.3px;
        letter-spacing: 1.35px;
    }
}

@media (max-width: 380px) {

    .customer-app .menu-lion-mark {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .customer-app .menu-brand-copy h1 {
        font-size: 19px;
    }

    .customer-app .menu-brand-copy p {
        font-size: 5.7px;
        letter-spacing: 1.1px;
    }
}

/* ============================================================
   VERSION 39.0
   FINAL HORIZONTAL PUNJAB GRILL BRAND LOGO
============================================================ */

.customer-app .menu-brand-lockup {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-app .menu-full-logo {
    width: 275px;
    max-width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (max-width: 520px) {
    .customer-app .menu-full-logo {
        width: 225px;
    }
}

@media (max-width: 380px) {
    .customer-app .menu-full-logo {
        width: 195px;
    }
}

/* ============================================================
   VERSION 40.0
   FINAL READABILITY PASS
   Bigger typography for desktop + mobile
============================================================ */

.customer-app .menu-search input,
.customer-app #menuSearch {
    font-size: 13px !important;
}

.customer-app .category-link {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
}

.customer-app .category-eyebrow {
    font-size: 9px !important;
}

.customer-app .category-title h2 {
    font-size: 31px !important;
}

.customer-app .category-title p {
    font-size: 11px !important;
    line-height: 1.6 !important;
}

.customer-app .dish-card {
    grid-template-columns: minmax(0,1fr) 142px !important;
    gap: 19px !important;
    padding: 18px !important;
}

.customer-app .dish-name h3 {
    font-size: 19px !important;
}

.customer-app .chef-label {
    font-size: 9px !important;
    padding: 5px 9px !important;
}

.customer-app .dish-description {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.customer-app .dish-meta span {
    font-size: 9px !important;
}

.customer-app .dish-allergen {
    font-size: 9.5px !important;
}

.customer-app .dish-price {
    font-size: 16px !important;
}

.customer-app .dish-image {
    width: 142px !important;
    height: 142px !important;
}

.customer-app .bottom-nav a span,
.customer-app .customer-bottom-nav a span {
    font-size: 10px !important;
}

@media (max-width: 520px) {

    .customer-app .menu-search input,
    .customer-app #menuSearch {
        font-size: 12px !important;
    }

    .customer-app .category-link {
        min-height: 36px !important;
        padding: 0 13px !important;
        font-size: 9.5px !important;
    }

    .customer-app .category-title h2 {
        font-size: 26px !important;
    }

    .customer-app .category-title p {
        font-size: 10px !important;
    }

    .customer-app .dish-card {
        grid-template-columns: minmax(0,1fr) 112px !important;
        gap: 13px !important;
        padding: 14px !important;
    }

    .customer-app .dish-name h3 {
        font-size: 16px !important;
    }

    .customer-app .chef-label {
        font-size: 8px !important;
    }

    .customer-app .dish-description {
        font-size: 10.5px !important;
    }

    .customer-app .dish-allergen {
        font-size: 8.5px !important;
    }

    .customer-app .dish-price {
        font-size: 14px !important;
    }

    .customer-app .dish-image {
        width: 112px !important;
        height: 112px !important;
    }

    .customer-app .bottom-nav a span,
    .customer-app .customer-bottom-nav a span {
        font-size: 9px !important;
    }
}

/* ============================================================
   V40 - NO IMAGE PLACEHOLDER
   If a menu item has no image, show no PG, no square, no border
   and let the dish information use the full card width.
============================================================ */

.customer-app .dish-card.dish-no-image {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

.customer-app .dish-card.dish-no-image .dish-info {
    width: 100%;
}

.customer-app .dish-card.dish-no-image .dish-image,
.customer-app .dish-card.dish-no-image .dish-placeholder {
    display: none !important;
}

/* Safety: legacy placeholder must never be visible on the menu. */
.customer-app .dish-placeholder {
    display: none !important;
}

/* ============================================================
   V41 - HEADER NAVIGATION + FEEDBACK
   Left hamburger opens navigation drawer.
   Right icon opens outlet-specific feedback form.
============================================================ */

.customer-app .menu-header-button {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.customer-app .menu-header-button:focus-visible {
    outline: 2px solid rgba(200,162,91,.95);
    outline-offset: 3px;
}

.customer-app .feedback-header-button svg {
    width: 21px;
    height: 21px;
}

body.customer-menu-open {
    overflow: hidden;
}

.customer-menu-backdrop {
    position: fixed;
    z-index: 980;
    inset: 0;
    max-width: var(--pg-max-width);
    margin: 0 auto;
    background: rgba(27,12,14,.52);
    opacity: 0;
    transition: opacity .22s ease;
}

.customer-menu-backdrop.open {
    opacity: 1;
}

.customer-menu-drawer {
    position: fixed;
    z-index: 990;
    top: 0;
    left: max(0px, calc((100vw - var(--pg-max-width)) / 2));
    width: min(84vw, 330px);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    transform: translateX(-105%);
    transition: transform .24s ease;
    background:
        radial-gradient(circle at 8% 0%, rgba(200,162,91,.10), transparent 28%),
        #FFFDFB;
    color: #292423;
    box-shadow: 20px 0 45px rgba(43,20,22,.22);
}

.customer-menu-drawer.open {
    transform: translateX(0);
}

.customer-menu-drawer-head {
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 18px;
    border-bottom: 1px solid #E9DDD3;
    background: linear-gradient(145deg,#59111C,#7A1D2C);
}

.customer-menu-drawer-brand img {
    width: 205px;
    max-width: 100%;
    display: block;
}

.customer-menu-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
}

.customer-menu-drawer-outlet {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #EEE4DC;
}

.customer-menu-drawer-outlet strong {
    color: #6F1825;
    font-size: 13px;
}

.customer-menu-drawer-outlet span {
    color: #7C716A;
    font-size: 10px;
}

.customer-menu-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
}

.customer-menu-drawer-links > a {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    border: 1px solid #E9DED5;
    border-radius: 13px;
    background: #fff;
    color: #342C29;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.customer-menu-drawer-links > a:hover {
    transform: translateY(-1px);
    border-color: rgba(111,24,37,.22);
    box-shadow: 0 8px 18px rgba(67,38,27,.06);
}

.customer-menu-drawer-links .drawer-feedback-link {
    border-color: rgba(200,162,91,.65);
    background: #FFF9ED;
}

.drawer-link-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F8F1EB;
    color: #6F1825;
}

.drawer-feedback-link .drawer-link-icon {
    background: #6F1825;
    color: #fff;
}

.drawer-link-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-menu-drawer-links strong,
.customer-menu-drawer-links small {
    display: block;
}

.customer-menu-drawer-links strong {
    color: #4E1019;
    font-size: 12px;
}

.customer-menu-drawer-links small {
    margin-top: 3px;
    color: #857A72;
    font-size: 9px;
    line-height: 1.35;
}

.customer-menu-drawer-footer {
    margin-top: auto;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid #EEE4DC;
    color: #9B8E84;
    font-size: 9px;
    text-align: center;
    letter-spacing: .3px;
}

@media (max-width: 480px) {
    .customer-menu-drawer {
        width: min(86vw, 320px);
        left: 0;
    }

    .customer-menu-backdrop {
        max-width: 100%;
    }

    .customer-menu-drawer-brand img {
        width: 190px;
    }
}

/* ============================================================
   V41.1 - DRAWER LAYER FIX
   Keep the open drawer above header, search bar, category tabs,
   sticky tools and bottom navigation.
============================================================ */

.customer-menu-backdrop {
    z-index: 2147483000 !important;
}

.customer-menu-drawer {
    z-index: 2147483001 !important;
}

.customer-menu-drawer.open,
.customer-menu-backdrop.open {
    visibility: visible !important;
}

body.customer-menu-open .menu-hero,
body.customer-menu-open .menu-sticky-tools,
body.customer-menu-open .bottom-nav,
body.customer-menu-open .customer-bottom-nav {
    pointer-events: none;
}

/* Make sure drawer content begins from the very top and remains usable. */
.customer-menu-drawer {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.customer-menu-drawer-head {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.customer-menu-drawer-links {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

/* Prevent sticky menu controls from visually covering the drawer. */
body.customer-menu-open .customer-menu-drawer,
body.customer-menu-open .customer-menu-backdrop {
    pointer-events: auto !important;
}

/* ============================================================
   V41.2 - MOBILE DRAWER + HEADER ICON POLISH
============================================================ */

/* Remove the white/boxed background from the top-left menu button. */
.customer-app .menu-header-icon,
.customer-app .menu-header-button,
.customer-app .menu-header-icon-right {
    background: transparent !important;
    box-shadow: none !important;
}

.customer-app button.menu-header-icon,
.customer-app .menu-header-button {
    border: 0 !important;
}

/* Keep a clean touch target without showing a square background. */
.customer-app .menu-header-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

/* Hamburger sizing. */
.customer-app #menuDrawerOpen svg {
    width: 25px !important;
    height: 25px !important;
}

/* Feedback icon: visibly larger but still elegant. */
.customer-app .feedback-header-button svg {
    width: 26px !important;
    height: 26px !important;
}

.customer-app .feedback-header-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
}

/* Drawer/backdrop now live directly under BODY. */
body > .customer-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(27,12,14,.55) !important;
}

body > .customer-menu-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 2147483001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Drawer should always begin at the top of the viewport. */
body > .customer-menu-drawer .customer-menu-drawer-head {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure every drawer item is fully visible. */
body > .customer-menu-drawer .customer-menu-drawer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body > .customer-menu-drawer .customer-menu-drawer-links > a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

/* Mobile-specific sizing and safe-area handling. */
@media (max-width: 600px) {
    body > .customer-menu-drawer {
        width: 88vw !important;
        max-width: 330px !important;
        padding-top: env(safe-area-inset-top);
    }

    body > .customer-menu-drawer .customer-menu-drawer-head {
        min-height: 92px !important;
        padding: 16px 15px !important;
    }

    body > .customer-menu-drawer .customer-menu-drawer-brand img {
        width: 185px !important;
    }

    body > .customer-menu-drawer .customer-menu-drawer-links {
        padding: 14px 12px 22px !important;
    }

    body > .customer-menu-drawer .customer-menu-drawer-links > a {
        min-height: 60px !important;
    }

    .customer-app .menu-header-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .customer-app #menuDrawerOpen svg {
        width: 24px !important;
        height: 24px !important;
    }

    .customer-app .feedback-header-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .customer-app .feedback-header-button svg {
        width: 27px !important;
        height: 27px !important;
    }
}

/* ============================================================
   V41.3 - HEADER ICON POLISH
   - Hamburger icon only: no white background / no square
   - Feedback icon larger and clearer
============================================================ */

/* TOP LEFT HAMBURGER */
.customer-app #menuDrawerOpen,
.customer-app button#menuDrawerOpen,
.customer-app .menu-brand-row #menuDrawerOpen {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.customer-app #menuDrawerOpen:hover,
.customer-app #menuDrawerOpen:active,
.customer-app #menuDrawerOpen:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.customer-app #menuDrawerOpen svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* TOP RIGHT FEEDBACK */
.customer-app .feedback-header-button,
.customer-app a.feedback-header-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.customer-app .feedback-header-button:hover,
.customer-app .feedback-header-button:active,
.customer-app .feedback-header-button:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.customer-app .feedback-header-button svg {
    width: 31px !important;
    height: 31px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Keep header layout balanced */
.customer-app .menu-brand-row {
    grid-template-columns: 50px minmax(0,1fr) 50px !important;
}

@media (max-width: 600px) {
    .customer-app #menuDrawerOpen {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .customer-app #menuDrawerOpen svg {
        width: 27px !important;
        height: 27px !important;
    }

    .customer-app .feedback-header-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .customer-app .feedback-header-button svg {
        width: 30px !important;
        height: 30px !important;
    }

    .customer-app .menu-brand-row {
        grid-template-columns: 48px minmax(0,1fr) 48px !important;
    }
}