@import url(
    'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap'
);


/* =====================================================
   VARIABLES
===================================================== */

:root {
    --gold: #c89b5b;
    --gold-light: #e1bd82;
    --cream: #f7f0e3;
    --ink: #191613;
    --card: #fffaf1;
    --muted: #756a5c;
}


/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: auto;
    scroll-padding-top: 110px;
}


body {
    margin: 0;
    background: #171513;
    color: var(--ink);
    font-family: Montserrat, Arial, sans-serif;
    overflow-x: hidden;
}


/* =====================================================
   BACKGROUND
===================================================== */

.bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 10%,
            #4a3928 0,
            #171513 35%,
            #0d0c0b 100%
        );
    z-index: -2;
}


.bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(200,155,91,.12) 1px,
            transparent 1px
        );

    background-size: 24px 24px;
    opacity: .35;
}


/* =====================================================
   HEADER
===================================================== */

.hero {
    padding: 16px 14px;
    text-align: center;
    color: var(--cream);

    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,.97),
            rgba(25,21,17,.94)
        );

    border-bottom:
        1px solid
        rgba(200,155,91,.45);
}


.logo {
    width: min(270px, 72vw);
    max-height: 270px;

    object-fit: contain;
    display: block;
    margin: 0 auto 3px;

    border-radius: 18px;

    mix-blend-mode: screen;

    filter:
        sepia(.2)
        saturate(.8);
}


.tagline {
    letter-spacing: 2.5px;
    font-size: 10px;
    color: #d6b27d;
}


.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;
    flex-wrap: wrap;

    margin-top: 11px;
}


.hero-actions a {
    color: #1a140e;

    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    text-decoration: none;

    padding: 9px 14px;

    border-radius: 999px;

    font-weight: 700;
    font-size: 12px;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);
}


/* =====================================================
   STICKY NAVIGATION
===================================================== */

.nav-wrapper {
    position: sticky;
    top: 0;

    z-index: 20;

    background:
        rgba(12,11,10,.98);

    border-bottom:
        1px solid
        #5b442c;
}


.nav {
    display: flex;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 9px 10px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    touch-action: pan-x;
}


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


.nav a {
    flex: 0 0 auto;

    white-space: nowrap;

    color: #f5e9d7;

    text-decoration: none;

    border:
        1px solid
        #665039;

    background:
        rgba(255,255,255,.03);

    padding: 8px 13px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 500;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease;
}


.nav a.active {
    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    color: #1a140e;

    border-color:
        #e1bd82;

    font-weight: 700;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.25);
}


.nav a:active {
    transform: scale(.96);
}


/* =====================================================
   NAVIGATION DOTS
===================================================== */

.nav-indicator {
    display: none;

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

    gap: 7px;

    height: 17px;
    padding-bottom: 5px;
}


.nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.nav-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #665039;

    transition:
        width .2s ease,
        background .2s ease;
}


.nav-dot.active {
    width: 14px;
    border-radius: 10px;
    background: #c89b5b;
}


.nav-arrow {
    color: #c89b5b;
    font-size: 14px;
}


/* =====================================================
   MAIN
===================================================== */

main {
    max-width: 1100px;
    margin: auto;
    padding: 12px 14px 45px;
}


/* =====================================================
   WELCOME
===================================================== */

.welcome {
    text-align: center;

    color: var(--cream);

    padding:
        18px 10px 25px;
}


.eyebrow {
    font-size: 10px;

    letter-spacing: 3.5px;

    color: var(--gold);

    font-weight: 700;
}


.welcome h1 {
    font:
        700
        clamp(32px, 8vw, 60px)
        "Cormorant Garamond",
        serif;

    margin: 5px 0;
}


.welcome p {
    color: #d4c8b8;
    margin: 0;
    font-size: 14px;
}


.welcome-hint {
    margin-top: 16px;

    color: #c89b5b;

    font-size: 11px;
}


/* =====================================================
   SECTIONS
===================================================== */

.section {
    margin: 20px 0 30px;

    scroll-margin-top: 85px;
}


.section > h2 {
    font:
        700
        34px
        "Cormorant Garamond",
        serif;

    color: #f5e9d7;

    margin: 0 0 12px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        #6a5034;
}


.price-note {
    text-align: right;

    color: #d6b27d;

    font-size: 11px;

    margin:
        -6px 0 7px;
}


/* =====================================================
   SPECIALS
===================================================== */

.section-heading-center {
    text-align: center;

    color: var(--cream);

    margin-bottom: 15px;
}


.section-heading-center h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin: 4px 0;

    color: #f5e9d7;
}


.section-heading-center p {
    margin: 0;

    color: #d4c8b8;

    font-size: 13px;
}


.specials-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.special-card {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.75);

    border-radius: 16px;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.20);
}


.special-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

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

    background: #ead6b4;

    border-radius: 50%;

    font-size: 26px;
}


.special-card h3 {
    font:
        700
        22px
        "Cormorant Garamond",
        serif;

    color: #6f4823;

    margin: 5px 0 2px;
}


.special-card strong {
    color: #7a4d1e;
    font-size: 14px;
}


/* =====================================================
   BADGES
===================================================== */

.badge {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;

    white-space: nowrap;

    vertical-align: middle;
}


.special-badge {
    color: #704817;

    background: #ead09e;

    border:
        1px solid
        #c89b5b;
}


.popular-badge {
    color: #7a3e1b;

    background: #f1c9a4;

    border:
        1px solid
        #d99b6b;
}


/* =====================================================
   MENU GRID
===================================================== */

.grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;
}


.card {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.7);

    border-radius: 15px;

    padding: 13px;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.20);
}


.card h3 {
    font:
        700
        24px
        "Cormorant Garamond",
        serif;

    margin: 0 0 6px;

    color: #6f4823;
}


.card ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.card li {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;

    padding: 7px 0;

    border-bottom:
        1px dashed
        #d2c1a5;

    font-size: 13px;

    line-height: 1.35;
}


.card li:last-child {
    border-bottom: 0;
}


.card li b {
    flex: 0 0 auto;

    white-space: nowrap;

    color: #7a4d1e;
}


.card small {
    font-size: 11px;
    color: #756a5c;
}


.wide {
    grid-column: 1 / -1;
}


/* =====================================================
   BIRTHDAY HALL
===================================================== */

.birthday {
    margin-top: 8px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(225,189,130,.18), transparent 35%),
        linear-gradient(135deg, #17110c, #0d0b09 55%, #21160d);
    border: 1px solid #b8884d;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.birthday-overlay {
    width: 100%;
    padding: 38px 18px 34px;
    color: var(--cream);
    text-align: center;
}

.birthday h2 {
    font: 700 clamp(36px, 9vw, 62px) "Cormorant Garamond", serif;
    margin: 8px 0;
}

.birthday-intro {
    font-size: 16px;
    margin: 0 0 22px;
    color: #e3d6c4;
}

.birthday-video-card {
    width: min(680px, 100%);
    margin: 0 auto 24px;
    padding: 7px;
    border: 1px solid rgba(225,189,130,.55);
    border-radius: 18px;
    background: rgba(0,0,0,.38);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
}

.birthday-video {
    display: block;
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 12px;
    background: #050505;
}

.birthday-packages {
    width: min(900px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

.birthday-package {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(200,155,91,.68);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(58,39,23,.95), rgba(17,13,10,.98));
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.birthday-package.featured {
    border-color: #e1bd82;
    box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(225,189,130,.14);
}

.birthday-popular {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(225,189,130,.14);
    border: 1px solid rgba(225,189,130,.45);
    color: #f0cc91;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.birthday-package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(225,189,130,.28);
}

.birthday-package-label {
    color: #f4e6d2;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.birthday-package-header strong {
    color: #f0c982;
    font-size: 25px;
    white-space: nowrap;
}

.birthday-package-guests {
    margin: 13px 0 8px;
    color: #e7c58e;
    font-size: 12px;
    font-weight: 700;
}

.birthday-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.birthday-features li {
    padding: 7px 0;
    color: #e6dac9;
    font-size: 12px;
    line-height: 1.4;
    border-bottom: 1px dashed rgba(225,189,130,.18);
}

.birthday-features li:last-child {
    border-bottom: 0;
}

.birthday-book-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 11px 15px;
    cursor: pointer;
    color: #1a140e;
    background: linear-gradient(135deg, #e1bd82, #bd8c48);
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,0,0,.24);
}

.birthday-book-btn:active {
    transform: translateY(1px);
}

.birthday-extra-hour {
    width: fit-content;
    margin: 16px auto 20px;
    padding: 8px 16px;
    border: 1px dashed rgba(225,189,130,.55);
    border-radius: 999px;
    color: #e6d5bb;
    font-size: 12px;
    background: rgba(0,0,0,.18);
}

.birthday-extra-hour strong {
    margin-left: 7px;
    color: #f0c982;
}

.birthday-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.birthday-actions .call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #e1bd82, #bd8c48);
    color: #1a140e !important;
    text-decoration: none !important;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 16px rgba(0,0,0,.24);
    cursor: pointer;
}

.birthday-actions .call:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.30);
}

.birthday-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(5px);
}

.birthday-booking-modal.hidden {
    display: none !important;
}

.birthday-booking-box {
    position: relative;
    width: min(470px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px 20px 22px;
    border: 1px solid #b8884d;
    border-radius: 20px;
    background: linear-gradient(145deg, #2b1d12, #100d0a 70%);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    color: var(--cream);
}

.birthday-booking-box h2 {
    margin: 7px 0 18px;
    font: 700 32px "Cormorant Garamond", serif;
    color: #f3dfbd;
}

.birthday-booking-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(225,189,130,.45);
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    color: #f5e9d7;
    cursor: pointer;
    font-size: 14px;
}

.birthday-selected-package {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid rgba(225,189,130,.35);
    border-radius: 12px;
    background: rgba(0,0,0,.22);
}

.birthday-selected-package span {
    color: #e7d4b8;
    font-size: 12px;
    font-weight: 700;
}

.birthday-selected-package strong {
    color: #f0c982;
    font-size: 16px;
}

.birthday-form-field {
    display: block;
    margin-bottom: 11px;
    text-align: left;
}

.birthday-form-field span {
    display: block;
    margin-bottom: 5px;
    color: #ddc8a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}

.birthday-form-field input,
.birthday-form-field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(225,189,130,.38);
    border-radius: 10px;
    outline: none;
    background: rgba(255,255,255,.06);
    color: #f5e9d7;
    font: 12px Montserrat, Arial, sans-serif;
}

.birthday-form-field input:focus,
.birthday-form-field select:focus {
    border-color: #e1bd82;
}

.birthday-form-field select option {
    color: #191613;
}

.birthday-booking-error {
    min-height: 16px;
    margin: 3px 0 8px;
    color: #f0a58e;
    font-size: 11px;
    text-align: left;
}

.birthday-whatsapp-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    cursor: pointer;
    color: #fff;
    background: #218c52;
    font: 700 12px Montserrat, Arial, sans-serif;
}


/* =====================================================
   LOCATION
===================================================== */

.visit-section {
    margin:
        35px 0 25px;

    padding:
        30px 20px;

    text-align: center;

    color: var(--cream);

    background:
        linear-gradient(
            145deg,
            rgba(80,58,35,.65),
            rgba(24,19,15,.8)
        );

    border:
        1px solid
        rgba(200,155,91,.45);

    border-radius: 20px;
}


.visit-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0;
}


.visit-section p {
    margin: 5px 0;

    color: #d4c8b8;

    font-size: 13px;
}


.location-button {
    display: inline-block;

    margin-top: 15px;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


/* =====================================================
   OPENING HOURS
===================================================== */

.hours-section {
    margin: 25px 0;

    text-align: center;

    color: var(--cream);
}


.hours-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0 14px;
}


.hours-card {
    max-width: 500px;

    margin: auto;

    padding: 16px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.7);

    color: #6f4823;
}


.hours-card div {
    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.hours-card strong {
    color: #7a4d1e;

    font-size: 12px;
}


/* =====================================================
   REVIEW
===================================================== */

.review-section {
    margin: 30px 0;

    padding:
        30px 18px;

    text-align: center;

    color: var(--cream);

    background:
        linear-gradient(
            145deg,
            rgba(72,53,32,.7),
            rgba(22,18,14,.9)
        );

    border:
        1px solid
        rgba(200,155,91,.45);

    border-radius: 20px;
}


.review-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0 8px;
}


.review-section p {
    max-width: 500px;

    margin:
        0 auto 18px;

    color: #d4c8b8;

    font-size: 13px;

    line-height: 1.5;
}


.review-button {
    display: inline-block;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #e0b56f,
            #bd8c48
        );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.floating-whatsapp {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 100;

    width: 56px;
    height: 56px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #7bdc8b,
            #35a94c
        );

    color: white;

    text-decoration: none;

    font-size: 26px;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.35);

    border:
        2px solid
        rgba(255,255,255,.75);
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    text-align: center;

    padding:
        26px 15px;

    color: #cdbda9;

    border-top:
        1px solid
        #493725;

    font-size: 12px;
}


footer strong {
    font:
        700
        25px
        "Cormorant Garamond",
        serif;

    color: #e6c58f;
}


footer .call {
    display: inline-block;
}


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

@media (max-width: 680px) {

    html {
        scroll-padding-top: 116px;
    }


    .hero {
        padding:
            10px
            10px
            12px;
    }


    .logo {
        width:
            min(205px, 58vw);

        max-height: 205px;
    }


    .tagline {
        font-size: 8px;

        letter-spacing: 2px;
    }


    .hero-actions {
        gap: 7px;

        margin-top: 9px;
    }


    .hero-actions a {
        padding:
            8px 11px;

        font-size: 10.5px;
    }


    .nav {
        gap: 7px;

        padding:
            8px 9px 6px;
    }


    .nav a {
        font-size: 11px;

        padding:
            8px 12px;
    }


    .nav-indicator {
        display: flex;
    }


    main {
        padding:
            10px
            10px
            35px;
    }


    .welcome {
        padding:
            15px
            6px
            20px;
    }


    .welcome h1 {
        font-size: 36px;

        line-height: .98;
    }


    .welcome p {
        font-size: 12px;
    }


    .welcome-hint {
        font-size: 10px;
    }


    .section {
        margin:
            17px 0
            25px;

        scroll-margin-top:
            120px;
    }


    .section > h2 {
        font-size: 29px;
    }


    .specials-grid {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .section-heading-center h2 {
        font-size: 31px;
    }


    .special-card {
        padding: 12px;
    }


    .special-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 22px;
    }


    .special-card h3 {
        font-size: 21px;
    }


    .grid {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .wide {
        grid-column: auto;
    }


    .card {
        border-radius: 13px;

        padding:
            11px 12px;
    }


    .card h3 {
        font-size: 23px;
    }


    .card li {
        padding:
            6.5px 0;

        font-size: 12px;
    }


    /* ================================================
       BIRTHDAY MOBILE BUTTON FIX
    ================================================ */

    .birthday {
        min-height: 330px;

        border-radius: 18px;
    }


    .birthday-overlay {
        width: 100%;

        padding:
            28px 14px;

        text-align: center;
    }


    .birthday h2 {
        font-size: 39px;

        line-height: 1;
    }


    .birthday p {
        font-size: 14px;
    }


    .birthday-photo-placeholder {
        width: 90%;
    }


    .birthday-actions {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        margin:
            20px auto 0;

        gap: 10px;
    }


    .birthday-actions a {
        display: flex;

        align-items: center;

        justify-content: center;

        width:
            min(280px, 90%);

        min-width: 0;

        margin:
            0 auto;

        text-align: center;
    }


    .birthday-actions .call {
        width: min(280px, 90%);
        min-width: 0;
        padding: 11px 20px;
    }



    /* ================================================
       BIRTHDAY HALL MOBILE
    ================================================ */

    .birthday {
        min-height: 330px;
        border-radius: 18px;
    }

    .birthday-overlay {
        padding: 28px 14px;
    }

    .birthday h2 {
        font-size: 39px;
        line-height: 1;
    }

    .birthday-intro {
        font-size: 14px;
    }

    .birthday-video-card {
        margin-bottom: 18px;
    }

    .birthday-video {
        max-height: 240px;
    }

    .birthday-packages {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .birthday-package {
        padding: 15px;
    }

    .birthday-package-header strong {
        font-size: 22px;
    }

    .birthday-features li {
        font-size: 11px;
    }

    .birthday-booking-box {
        padding: 25px 15px 18px;
    }

    .birthday-booking-box h2 {
        font-size: 29px;
    }

    .visit-section {
        padding:
            24px 14px;
    }


    .visit-section h2 {
        font-size: 31px;
    }


    .hours-card {
        padding: 13px;
    }


    .hours-card div {
        flex-direction: column;

        gap: 5px;
    }


    .review-section {
        padding:
            24px 14px;
    }

}

footer .call:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);
}

.footer-location-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;
    margin: 5px 0 8px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #d9aa61,
        #bd8c48
    );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    box-shadow:
        0 5px 14px rgba(0,0,0,.22);
}

.footer-location-button:hover {
    transform: translateY(-2px);
}


/* =====================================================
   ADD TO CART - NEW FUNCTIONALITY ONLY
===================================================== */

.card li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 5px;
}

.card li > span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.card li > b {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    white-space: nowrap;
}

.item-action {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    min-height: 25px;
}

.add-btn {
    border: 0;
    border-radius: 999px;
    padding: 5px 11px;
    background: linear-gradient(135deg, #d9aa61, #bd8c48);
    color: #1a140e;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.16);
    transition: transform .15s ease, box-shadow .15s ease;
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0,0,0,.22);
}

.special-item-action {
    margin-top: 7px;
}

.special-item-action .add-btn {
    width: auto;
}

.selected-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.inline-qty {
    width: 24px;
    height: 24px;
    border: 1px solid #bd9a69;
    border-radius: 50%;
    background: #fff8ec;
    color: #68431f;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

.inline-count {
    min-width: 18px;
    text-align: center;
    color: #5c3b1c;
    font-size: 11px;
    font-weight: 700;
}

.selected-variant {
    color: #80694e;
    font-size: 10px;
    margin-right: 2px;
}

/* Floating cart stays at the bottom */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 110;
    width: min(560px, calc(100% - 120px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    background: rgba(28,22,17,.97);
    box-shadow: 0 10px 35px rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
}

.cart-bar.hidden,
.cart-overlay.hidden,
.pizza-modal.hidden,
.waiter-mode.hidden {
    display: none !important;
}

.cart-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #f5e9d7;
    font-size: 12px;
}

.cart-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d0a15e;
    font-size: 17px;
}

.cart-total {
    color: #e2bd7d;
    font-weight: 700;
}

.view-cart-btn,
.show-waiter-btn,
.clear-cart-btn {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.view-cart-btn,
.show-waiter-btn {
    border: 0;
    background: linear-gradient(135deg, #d9aa61, #bd8c48);
    color: #1a140e;
}

.clear-cart-btn {
    border: 1px solid #c79f72;
    background: transparent;
    color: #734b28;
}

.cart-overlay,
.pizza-modal,
.waiter-mode {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,.70);
    backdrop-filter: blur(5px);
}

.cart-overlay {
    color: #5c3b1c;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
}

.cart-panel {
    width: min(620px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 1px solid #c89b5b;
    border-radius: 22px 22px 12px 12px;
    box-shadow: 0 -10px 40px rgba(0,0,0,.45);
    overflow: hidden;
    cursor: default;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px;
    border-bottom: 1px solid #d7c4a4;
}

.cart-header h2 {
    margin: 3px 0 0;
    font: 700 28px "Cormorant Garamond", serif;
    color: #62411f;
}

.close-cart,
.close-pizza {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ead9bd;
    color: #4d351e;
    cursor: pointer;
    font-size: 15px;
}

.cart-items {
    overflow-y: auto;
    padding: 12px 18px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #cbb795;
}

.cart-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-item-info strong {
    color: #5c3b1c;
    font-size: 13px;
}

.cart-item-info small {
    color: #8a7155;
    font-size: 10px;
}

.cart-item-info span {
    color: #8a6945;
    font-size: 11px;
}

.cart-item-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cart-item-right > strong {
    color: #75491f;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #bd9a69;
    border-radius: 50%;
    background: #fff8ec;
    color: #68431f;
    cursor: pointer;
    font-weight: 700;
}

.remove-item {
    border: 0;
    background: transparent;
    color: #9b4b3c;
    font-size: 10px;
    cursor: pointer;
}

.cart-footer {
    padding: 14px 18px;
    border-top: 1px solid #d7c4a4;
    background: rgba(255,250,241,.85);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #73583b;
    font-size: 12px;
}

.cart-total-row strong {
    color: #593a1b;
}

.cart-total-row.total-price {
    font-size: 17px;
    margin-bottom: 12px;
}

.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 8px;
}

.empty-cart {
    text-align: center;
    padding: 45px 20px;
    color: #806c54;
}

.empty-cart-icon {
    font-size: 42px;
    margin-bottom: 8px;
}

.empty-cart h3 {
    margin: 5px 0;
    color: #5c3b1c;
}

/* Pizza modal */
.pizza-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.pizza-modal-box {
    width: min(420px, 100%);
    position: relative;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 1px solid #c89b5b;
    border-radius: 22px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.close-pizza {
    position: absolute;
    top: 12px;
    right: 12px;
}

.pizza-modal-box h2 {
    margin: 5px 0 18px;
    color: #5c3b1c;
    font: 700 29px "Cormorant Garamond", serif;
}

.pizza-size-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pizza-size {
    border: 1px solid #c99d67;
    border-radius: 16px;
    padding: 15px 10px;
    background: #fff8ec;
    color: #5c3b1c;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pizza-size:hover {
    background: #e9cf9e;
}

.pizza-size b {
    color: #7a4d1e;
    font-size: 18px;
}

/* Floating WhatsApp: above the cart */
.floating-whatsapp {
    bottom: 86px;
}

/* Show Captain */
.waiter-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.waiter-box {
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 2px solid #c89b5b;
    border-radius: 22px;
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

.waiter-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px dashed #cbb795;
    color: #4f351d;
}

.waiter-item small {
    display: block;
    margin-top: 3px;
    color: #8a7155;
}

.waiter-total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    background: #ead6af;
    color: #513419;
    font-weight: 600;
}

.waiter-note {
    text-align: center;
    color: #80694e;
    font-size: 11px;
    margin: 15px 0 0;
}

.waiter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.waiter-header > div {
    flex: 1;
}

.waiter-header .close-cart {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 680px) {
    .card li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .add-btn {
        padding: 5px 9px;
        font-size: 9px;
    }

    .cart-bar {
        bottom: 10px;
        width: calc(100% - 20px);
    }

    .floating-whatsapp {
        right: 15px;
        bottom: 78px;
    }

    .cart-actions {
        grid-template-columns: 1fr;
    }

    .pizza-size-options {
        grid-template-columns: 1fr;
    }

    .waiter-total {
        flex-direction: column;
    }
}

/* =====================================================
   BIRTHDAY HALL - CALL NOW BUTTON (FINAL OVERRIDE)
===================================================== */
.birthday-actions .birthday-call-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(280px, 90%) !important;
    min-width: 150px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    padding: 11px 22px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #e1bd82, #bd8c48) !important;
    color: #1a140e !important;
    text-decoration: none !important;
    font-family: Montserrat, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.24) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.birthday-actions .birthday-call-btn:hover,
.birthday-actions .birthday-call-btn:focus,
.birthday-actions .birthday-call-btn:active,
.birthday-actions .birthday-call-btn:visited {
    background: linear-gradient(135deg, #e1bd82, #bd8c48) !important;
    color: #1a140e !important;
    text-decoration: none !important;
}




On Sat, Sep 5, 2026 at 10:58 PM Yash S Handore <yashshandore@gmail.com> wrote:
FInal code till birthday hall changes


@import url(
    'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap'
);


/* =====================================================
   VARIABLES
===================================================== */

:root {
    --gold: #c89b5b;
    --gold-light: #e1bd82;
    --cream: #f7f0e3;
    --ink: #191613;
    --card: #fffaf1;
    --muted: #756a5c;
}


/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: auto;
    scroll-padding-top: 110px;
}


body {
    margin: 0;
    background: #171513;
    color: var(--ink);
    font-family: Montserrat, Arial, sans-serif;
    overflow-x: hidden;
}


/* =====================================================
   BACKGROUND
===================================================== */

.bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 10%,
            #4a3928 0,
            #171513 35%,
            #0d0c0b 100%
        );
    z-index: -2;
}


.bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(200,155,91,.12) 1px,
            transparent 1px
        );

    background-size: 24px 24px;
    opacity: .35;
}


/* =====================================================
   HEADER
===================================================== */

.hero {
    padding: 16px 14px;
    text-align: center;
    color: var(--cream);

    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,.97),
            rgba(25,21,17,.94)
        );

    border-bottom:
        1px solid
        rgba(200,155,91,.45);
}


.logo {
    width: min(270px, 72vw);
    max-height: 270px;

    object-fit: contain;
    display: block;
    margin: 0 auto 3px;

    border-radius: 18px;

    mix-blend-mode: screen;

    filter:
        sepia(.2)
        saturate(.8);
}


.tagline {
    letter-spacing: 2.5px;
    font-size: 10px;
    color: #d6b27d;
}


.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;
    flex-wrap: wrap;

    margin-top: 11px;
}


.hero-actions a {
    color: #1a140e;

    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    text-decoration: none;

    padding: 9px 14px;

    border-radius: 999px;

    font-weight: 700;
    font-size: 12px;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);
}


/* =====================================================
   STICKY NAVIGATION
===================================================== */

.nav-wrapper {
    position: sticky;
    top: 0;

    z-index: 20;

    background:
        rgba(12,11,10,.98);

    border-bottom:
        1px solid
        #5b442c;
}


.nav {
    display: flex;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 9px 10px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    touch-action: pan-x;
}


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


.nav a {
    flex: 0 0 auto;

    white-space: nowrap;

    color: #f5e9d7;

    text-decoration: none;

    border:
        1px solid
        #665039;

    background:
        rgba(255,255,255,.03);

    padding: 8px 13px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 500;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease;
}


.nav a.active {
    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    color: #1a140e;

    border-color:
        #e1bd82;

    font-weight: 700;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.25);
}


.nav a:active {
    transform: scale(.96);
}


/* =====================================================
   NAVIGATION DOTS
===================================================== */

.nav-indicator {
    display: none;

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

    gap: 7px;

    height: 17px;
    padding-bottom: 5px;
}


.nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.nav-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #665039;

    transition:
        width .2s ease,
        background .2s ease;
}


.nav-dot.active {
    width: 14px;
    border-radius: 10px;
    background: #c89b5b;
}


.nav-arrow {
    color: #c89b5b;
    font-size: 14px;
}


/* =====================================================
   MAIN
===================================================== */

main {
    max-width: 1100px;
    margin: auto;
    padding: 12px 14px 45px;
}


/* =====================================================
   WELCOME
===================================================== */

.welcome {
    text-align: center;

    color: var(--cream);

    padding:
        18px 10px 25px;
}


.eyebrow {
    font-size: 10px;

    letter-spacing: 3.5px;

    color: var(--gold);

    font-weight: 700;
}


.welcome h1 {
    font:
        700
        clamp(32px, 8vw, 60px)
        "Cormorant Garamond",
        serif;

    margin: 5px 0;
}


.welcome p {
    color: #d4c8b8;
    margin: 0;
    font-size: 14px;
}


.welcome-hint {
    margin-top: 16px;

    color: #c89b5b;

    font-size: 11px;
}


/* =====================================================
   SECTIONS
===================================================== */

.section {
    margin: 20px 0 30px;

    scroll-margin-top: 85px;
}


.section > h2 {
    font:
        700
        34px
        "Cormorant Garamond",
        serif;

    color: #f5e9d7;

    margin: 0 0 12px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        #6a5034;
}


.price-note {
    text-align: right;

    color: #d6b27d;

    font-size: 11px;

    margin:
        -6px 0 7px;
}


/* =====================================================
   SPECIALS
===================================================== */

.section-heading-center {
    text-align: center;

    color: var(--cream);

    margin-bottom: 15px;
}


.section-heading-center h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin: 4px 0;

    color: #f5e9d7;
}


.section-heading-center p {
    margin: 0;

    color: #d4c8b8;

    font-size: 13px;
}


.specials-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.special-card {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.75);

    border-radius: 16px;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.20);
}


.special-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

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

    background: #ead6b4;

    border-radius: 50%;

    font-size: 26px;
}


.special-card h3 {
    font:
        700
        22px
        "Cormorant Garamond",
        serif;

    color: #6f4823;

    margin: 5px 0 2px;
}


.special-card strong {
    color: #7a4d1e;
    font-size: 14px;
}


/* =====================================================
   BADGES
===================================================== */

.badge {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;

    white-space: nowrap;

    vertical-align: middle;
}


.special-badge {
    color: #704817;

    background: #ead09e;

    border:
        1px solid
        #c89b5b;
}


.popular-badge {
    color: #7a3e1b;

    background: #f1c9a4;

    border:
        1px solid
        #d99b6b;
}


/* =====================================================
   MENU GRID
===================================================== */

.grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;
}


.card {
    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.7);

    border-radius: 15px;

    padding: 13px;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.20);
}


.card h3 {
    font:
        700
        24px
        "Cormorant Garamond",
        serif;

    margin: 0 0 6px;

    color: #6f4823;
}


.card ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.card li {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;

    padding: 7px 0;

    border-bottom:
        1px dashed
        #d2c1a5;

    font-size: 13px;

    line-height: 1.35;
}


.card li:last-child {
    border-bottom: 0;
}


.card li b {
    flex: 0 0 auto;

    white-space: nowrap;

    color: #7a4d1e;
}


.card small {
    font-size: 11px;
    color: #756a5c;
}


.wide {
    grid-column: 1 / -1;
}


/* =====================================================
   BIRTHDAY HALL
===================================================== */

.birthday {
    min-height: 360px;

    margin-top: 8px;

    border-radius: 22px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(210,158,82,.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #6b4727,
            #23180f 60%,
            #0e0c09
        );

    border:
        1px solid
        #b8884d;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.35);
}


.birthday-overlay {
    width: 100%;

    padding:
        35px 18px;

    color: var(--cream);

    text-align: center;
}


.birthday h2 {
    font:
        700
        clamp(36px, 9vw, 62px)
        "Cormorant Garamond",
        serif;

    margin: 8px 0;
}


.birthday p {
    font-size: 16px;

    margin: 0 0 18px;

    color: #e3d6c4;
}


/* =====================================================
   BIRTHDAY PHOTO PLACEHOLDER
===================================================== */

.birthday-photo-placeholder {
    width:
        min(560px, 90%);

    margin:
        10px auto 20px;

    padding: 18px;

    border:
        1px dashed
        rgba(225,189,130,.55);

    border-radius: 14px;

    background:
        rgba(0,0,0,.20);
}


.birthday-photo-placeholder span {
    font-size: 34px;
}


.birthday-photo-placeholder p {
    margin: 5px 0 0;

    font-size: 11px;

    color: #d9c6aa;
}


/* =====================================================
   BIRTHDAY BUTTONS
===================================================== */

.birthday-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    width: 100%;

    margin:
        20px auto 0;

    text-align: center;
}


.birthday-actions a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 160px;

    padding:
        11px 18px;

    border-radius: 999px;

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    text-align: center;

    line-height: 1.2;

    box-sizing: border-box;
}


.birthday-actions .call {
    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );
}


.birthday-actions .whatsapp {
    background:
        linear-gradient(
            135deg,
            #7bdc8b,
            #48b95d
        );
}


/* =====================================================
   LOCATION
===================================================== */

.visit-section {
    margin:
        35px 0 25px;

    padding:
        30px 20px;

    text-align: center;

    color: var(--cream);

    background:
        linear-gradient(
            145deg,
            rgba(80,58,35,.65),
            rgba(24,19,15,.8)
        );

    border:
        1px solid
        rgba(200,155,91,.45);

    border-radius: 20px;
}


.visit-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0;
}


.visit-section p {
    margin: 5px 0;

    color: #d4c8b8;

    font-size: 13px;
}


.location-button {
    display: inline-block;

    margin-top: 15px;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #d9aa61,
            #bd8c48
        );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


/* =====================================================
   OPENING HOURS
===================================================== */

.hours-section {
    margin: 25px 0;

    text-align: center;

    color: var(--cream);
}


.hours-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0 14px;
}


.hours-card {
    max-width: 500px;

    margin: auto;

    padding: 16px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fffaf1,
            #f1e4ce
        );

    border:
        1px solid
        rgba(200,155,91,.7);

    color: #6f4823;
}


.hours-card div {
    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.hours-card strong {
    color: #7a4d1e;

    font-size: 12px;
}


/* =====================================================
   REVIEW
===================================================== */

.review-section {
    margin: 30px 0;

    padding:
        30px 18px;

    text-align: center;

    color: var(--cream);

    background:
        linear-gradient(
            145deg,
            rgba(72,53,32,.7),
            rgba(22,18,14,.9)
        );

    border:
        1px solid
        rgba(200,155,91,.45);

    border-radius: 20px;
}


.review-section h2 {
    font:
        700
        38px
        "Cormorant Garamond",
        serif;

    margin:
        5px 0 8px;
}


.review-section p {
    max-width: 500px;

    margin:
        0 auto 18px;

    color: #d4c8b8;

    font-size: 13px;

    line-height: 1.5;
}


.review-button {
    display: inline-block;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #e0b56f,
            #bd8c48
        );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.floating-whatsapp {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 100;

    width: 56px;
    height: 56px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #7bdc8b,
            #35a94c
        );

    color: white;

    text-decoration: none;

    font-size: 26px;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.35);

    border:
        2px solid
        rgba(255,255,255,.75);
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    text-align: center;

    padding:
        26px 15px;

    color: #cdbda9;

    border-top:
        1px solid
        #493725;

    font-size: 12px;
}


footer strong {
    font:
        700
        25px
        "Cormorant Garamond",
        serif;

    color: #e6c58f;
}


footer .call {
    display: inline-block;
}


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

@media (max-width: 680px) {

    html {
        scroll-padding-top: 116px;
    }


    .hero {
        padding:
            10px
            10px
            12px;
    }


    .logo {
        width:
            min(205px, 58vw);

        max-height: 205px;
    }


    .tagline {
        font-size: 8px;

        letter-spacing: 2px;
    }


    .hero-actions {
        gap: 7px;

        margin-top: 9px;
    }


    .hero-actions a {
        padding:
            8px 11px;

        font-size: 10.5px;
    }


    .nav {
        gap: 7px;

        padding:
            8px 9px 6px;
    }


    .nav a {
        font-size: 11px;

        padding:
            8px 12px;
    }


    .nav-indicator {
        display: flex;
    }


    main {
        padding:
            10px
            10px
            35px;
    }


    .welcome {
        padding:
            15px
            6px
            20px;
    }


    .welcome h1 {
        font-size: 36px;

        line-height: .98;
    }


    .welcome p {
        font-size: 12px;
    }


    .welcome-hint {
        font-size: 10px;
    }


    .section {
        margin:
            17px 0
            25px;

        scroll-margin-top:
            120px;
    }


    .section > h2 {
        font-size: 29px;
    }


    .specials-grid {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .section-heading-center h2 {
        font-size: 31px;
    }


    .special-card {
        padding: 12px;
    }


    .special-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 22px;
    }


    .special-card h3 {
        font-size: 21px;
    }


    .grid {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .wide {
        grid-column: auto;
    }


    .card {
        border-radius: 13px;

        padding:
            11px 12px;
    }


    .card h3 {
        font-size: 23px;
    }


    .card li {
        padding:
            6.5px 0;

        font-size: 12px;
    }


    /* ================================================
       BIRTHDAY MOBILE BUTTON FIX
    ================================================ */

    .birthday {
        min-height: 330px;

        border-radius: 18px;
    }


    .birthday-overlay {
        width: 100%;

        padding:
            28px 14px;

        text-align: center;
    }


    .birthday h2 {
        font-size: 39px;

        line-height: 1;
    }


    .birthday p {
        font-size: 14px;
    }


    .birthday-photo-placeholder {
        width: 90%;
    }


    .birthday-actions {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        margin:
            20px auto 0;

        gap: 10px;
    }


    .birthday-actions a {
        display: flex;

        align-items: center;

        justify-content: center;

        width:
            min(280px, 90%);

        min-width: 0;

        margin:
            0 auto;

        text-align: center;
    }


    .visit-section {
        padding:
            24px 14px;
    }


    .visit-section h2 {
        font-size: 31px;
    }


    .hours-card {
        padding: 13px;
    }


    .hours-card div {
        flex-direction: column;

        gap: 5px;
    }


    .review-section {
        padding:
            24px 14px;
    }

}

footer .call:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);
}

.footer-location-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;
    margin: 5px 0 8px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #d9aa61,
        #bd8c48
    );

    color: #1a140e;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    box-shadow:
        0 5px 14px rgba(0,0,0,.22);
}

.footer-location-button:hover {
    transform: translateY(-2px);
}


/* =====================================================
   ADD TO CART - NEW FUNCTIONALITY ONLY
===================================================== */

.card li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 5px;
}

.card li > span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.card li > b {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    white-space: nowrap;
}

.item-action {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    min-height: 25px;
}

.add-btn {
    border: 0;
    border-radius: 999px;
    padding: 5px 11px;
    background: linear-gradient(135deg, #d9aa61, #bd8c48);
    color: #1a140e;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0,0,0,.16);
    transition: transform .15s ease, box-shadow .15s ease;
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0,0,0,.22);
}

.special-item-action {
    margin-top: 7px;
}

.special-item-action .add-btn {
    width: auto;
}

.selected-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.inline-qty {
    width: 24px;
    height: 24px;
    border: 1px solid #bd9a69;
    border-radius: 50%;
    background: #fff8ec;
    color: #68431f;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

.inline-count {
    min-width: 18px;
    text-align: center;
    color: #5c3b1c;
    font-size: 11px;
    font-weight: 700;
}

.selected-variant {
    color: #80694e;
    font-size: 10px;
    margin-right: 2px;
}

/* Floating cart stays at the bottom */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 110;
    width: min(560px, calc(100% - 120px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    background: rgba(28,22,17,.97);
    box-shadow: 0 10px 35px rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
}

.cart-bar.hidden,
.cart-overlay.hidden,
.pizza-modal.hidden,
.waiter-mode.hidden {
    display: none !important;
}

.cart-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #f5e9d7;
    font-size: 12px;
}

.cart-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d0a15e;
    font-size: 17px;
}

.cart-total {
    color: #e2bd7d;
    font-weight: 700;
}

.view-cart-btn,
.show-waiter-btn,
.clear-cart-btn {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.view-cart-btn,
.show-waiter-btn {
    border: 0;
    background: linear-gradient(135deg, #d9aa61, #bd8c48);
    color: #1a140e;
}

.clear-cart-btn {
    border: 1px solid #c79f72;
    background: transparent;
    color: #734b28;
}

.cart-overlay,
.pizza-modal,
.waiter-mode {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,.70);
    backdrop-filter: blur(5px);
}

.cart-overlay {
    color: #5c3b1c;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
}

.cart-panel {
    width: min(620px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 1px solid #c89b5b;
    border-radius: 22px 22px 12px 12px;
    box-shadow: 0 -10px 40px rgba(0,0,0,.45);
    overflow: hidden;
    cursor: default;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px;
    border-bottom: 1px solid #d7c4a4;
}

.cart-header h2 {
    margin: 3px 0 0;
    font: 700 28px "Cormorant Garamond", serif;
    color: #62411f;
}

.close-cart,
.close-pizza {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ead9bd;
    color: #4d351e;
    cursor: pointer;
    font-size: 15px;
}

.cart-items {
    overflow-y: auto;
    padding: 12px 18px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #cbb795;
}

.cart-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-item-info strong {
    color: #5c3b1c;
    font-size: 13px;
}

.cart-item-info small {
    color: #8a7155;
    font-size: 10px;
}

.cart-item-info span {
    color: #8a6945;
    font-size: 11px;
}

.cart-item-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cart-item-right > strong {
    color: #75491f;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #bd9a69;
    border-radius: 50%;
    background: #fff8ec;
    color: #68431f;
    cursor: pointer;
    font-weight: 700;
}

.remove-item {
    border: 0;
    background: transparent;
    color: #9b4b3c;
    font-size: 10px;
    cursor: pointer;
}

.cart-footer {
    padding: 14px 18px;
    border-top: 1px solid #d7c4a4;
    background: rgba(255,250,241,.85);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #73583b;
    font-size: 12px;
}

.cart-total-row strong {
    color: #593a1b;
}

.cart-total-row.total-price {
    font-size: 17px;
    margin-bottom: 12px;
}

.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 8px;
}

.empty-cart {
    text-align: center;
    padding: 45px 20px;
    color: #806c54;
}

.empty-cart-icon {
    font-size: 42px;
    margin-bottom: 8px;
}

.empty-cart h3 {
    margin: 5px 0;
    color: #5c3b1c;
}

/* Pizza modal */
.pizza-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.pizza-modal-box {
    width: min(420px, 100%);
    position: relative;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 1px solid #c89b5b;
    border-radius: 22px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.close-pizza {
    position: absolute;
    top: 12px;
    right: 12px;
}

.pizza-modal-box h2 {
    margin: 5px 0 18px;
    color: #5c3b1c;
    font: 700 29px "Cormorant Garamond", serif;
}

.pizza-size-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pizza-size {
    border: 1px solid #c99d67;
    border-radius: 16px;
    padding: 15px 10px;
    background: #fff8ec;
    color: #5c3b1c;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pizza-size:hover {
    background: #e9cf9e;
}

.pizza-size b {
    color: #7a4d1e;
    font-size: 18px;
}

/* Floating WhatsApp: above the cart */
.floating-whatsapp {
    bottom: 86px;
}

/* Show Captain */
.waiter-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.waiter-box {
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: linear-gradient(145deg, #fffaf1, #f0e2cb);
    border: 2px solid #c89b5b;
    border-radius: 22px;
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

.waiter-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px dashed #cbb795;
    color: #4f351d;
}

.waiter-item small {
    display: block;
    margin-top: 3px;
    color: #8a7155;
}

.waiter-total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    background: #ead6af;
    color: #513419;
    font-weight: 600;
}

.waiter-note {
    text-align: center;
    color: #80694e;
    font-size: 11px;
    margin: 15px 0 0;
}

.waiter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.waiter-header > div {
    flex: 1;
}

.waiter-header .close-cart {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 680px) {
    .card li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .add-btn {
        padding: 5px 9px;
        font-size: 9px;
    }

    .cart-bar {
        bottom: 10px;
        width: calc(100% - 20px);
    }

    .floating-whatsapp {
        right: 15px;
        bottom: 78px;
    }

    .cart-actions {
        grid-template-columns: 1fr;
    }

    .pizza-size-options {
        grid-template-columns: 1fr;
    }

    .waiter-total {
        flex-direction: column;
    }
}



==================================================================================================================================

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#11100e">

    <meta name="description"
          content="Skylight Cafe & Restro - Digital Menu">

    <title>Skylight Cafe & Restro | Digital Menu</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

<script>
    /*
     * Always start the normal/base URL at the very top of the page.
     * A URL containing a category hash (for example #pizza) is still
     * allowed to open that specific category intentionally.
     */
    if ("scrollRestoration" in history) {
        history.scrollRestoration = "manual";
    }

    function resetToTopForBaseUrl() {
        if (!window.location.hash) {
            window.scrollTo({
                top: 0,
                left: 0,
                behavior: "auto"
            });
        }
    }

    /* Do it immediately and again after the page is laid out.
       This prevents browser scroll restoration / image layout from
       opening the page somewhere below the logo. */
    resetToTopForBaseUrl();

    window.addEventListener("load", resetToTopForBaseUrl);
    window.addEventListener("pageshow", function () {
        resetToTopForBaseUrl();
    });
</script>


<div class="bg"></div>


<!-- =====================================================
     HEADER
===================================================== -->

<header class="hero">

    <img
        src="logo.jpg"
        class="logo"
        alt="Skylight Cafe & Restro Logo"
    >

    <div class="tagline">
        GOOD FOOD · GOOD VIBES · GOOD TIMES
    </div>

    <div class="hero-actions">

        <a href="tel:8007138763">
            📞 8007138763
        </a>

        <a href="tel:9637340956">
            📞 9637340956
        </a>

        <a
            href="https://maps.app.goo.gl/LDqEwQvmm9vroLCU7?g_st=ac"
            target="_blank"
            rel="noopener noreferrer"
        >
            📍 Location
        </a>

        <a
            href="https://www.instagram.com/skylight_cafe_and_restro/"
            target="_blank"
            rel="noopener noreferrer"
        >
            📸 Instagram
        </a>

    </div>

</header>


<!-- =====================================================
     CATEGORY NAVIGATION
===================================================== -->

<nav class="nav-wrapper">

    <div class="nav" id="categoryNav">

        <a href="#specials" data-section="specials">
            ⭐ Specials
        </a>

        <a href="#beverages" data-section="beverages">
            ☕ Beverages
        </a>

        <a href="#pizza" data-section="pizza">
            🍕 Pizza
        </a>

        <a href="#sandwich" data-section="sandwich">
            🥪 Sandwich
        </a>

        <a href="#burger" data-section="burger">
            🍔 Burger
        </a>

        <a href="#fries" data-section="fries">
            🍟 Fries
        </a>

        <a href="#nachos" data-section="nachos">
            🌮 Nachos
        </a>

        <a href="#maggie" data-section="maggie">
            🍜 maggie
        </a>

        <a href="#pasta" data-section="pasta">
            🍝 Pasta
        </a>

        <a href="#pavbhaji" data-section="pavbhaji">
            🍛 Pav Bhaji
        </a>

        <a href="#extras" data-section="extras">
            ➕ Extras
        </a>

        <a href="#momos" data-section="momos">
            🥟 Momos
        </a>

        <a href="#chinese" data-section="chinese">
            🥢 Chinese
        </a>

        <a href="#desserts" data-section="desserts">
            🍰 Desserts
        </a>

        <a href="#birthday" data-section="birthday">
            🎂 Birthday Hall
        </a>

    </div>


    <div class="nav-indicator">

        <span class="nav-arrow">‹</span>

        <div
            class="nav-dots"
            id="navDots"
        ></div>

        <span class="nav-arrow">›</span>

    </div>

</nav>


<!-- =====================================================
     MAIN
===================================================== -->

<main>


<!-- =====================================================
     WELCOME
===================================================== -->

<section
    class="welcome"
    id="welcome"
>

    <span class="eyebrow">
        WELCOME TO
    </span>

    <h1>
        Skylight Cafe & Restro
    </h1>

    <p>
        Good food, good vibes and good times.
    </p>

    <div class="welcome-hint">
        👇 Scroll down to explore our menu
    </div>

</section>


<!-- =====================================================
     SPECIALS
===================================================== -->

<section
    id="specials"
    class="section specials-section"
>

    <div class="section-heading-center">

        <span class="eyebrow">
            OUR RECOMMENDATIONS
        </span>

        <h2>
            ⭐ Skylight Specials
        </h2>

        <p>
            Try something special from our menu.
        </p>

    </div>


    <div class="specials-grid">


        <div class="special-card">

            <div class="special-icon">
                🍕
            </div>

            <div>

                <span class="badge special-badge">
                    👑 Skylight Special
                </span>

                <h3>
                    Skylight Special Pizza
                </h3>

                <strong>
                    ₹220 / ₹260
                </strong>

            </div>

        </div>


        <div class="special-card">

            <div class="special-icon">
                🥪
            </div>

            <div>

                <span class="badge special-badge">
                    👑 Skylight Special
                </span>

                <h3>
                    Skylight Special Sandwich
                </h3>

                <strong>
                    ₹160
                </strong>

            </div>

        </div>


        <div class="special-card">

            <div class="special-icon">
                🍨
            </div>

            <div>

                <span class="badge popular-badge">
                    ⭐ Customer Favourite
                </span>

                <h3>
                    Skylight Special Ice-Cream
                </h3>

                <strong>
                    ₹70
                </strong>

            </div>

        </div>


        <div class="special-card">

            <div class="special-icon">
                🍛
            </div>

            <div>

                <span class="badge popular-badge">
                    🔥 Popular
                </span>

                <h3>
                    Unlimited Pav Bhaji
                </h3>

                <strong>
                    ₹149
                </strong>

            </div>

        </div>

    </div>

</section>


<!-- =====================================================
     BEVERAGES
===================================================== -->

<section id="beverages" class="section">

    <h2>☕ Beverages</h2>

    <div class="grid">

        <div class="card">

            <h3>Hot Beverages</h3>

            <ul>
                <li>Hot Coffee <b>₹40</b></li>
                <li>Black Coffee <b>₹40</b></li>
                <li>Bournvita Milk <b>₹40</b></li>
                <li>Hot Chocolate <b>₹70</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Cold Beverages</h3>

            <ul>
                <li>Cold Coffee <b>₹50</b></li>
                <li>Cold Coffee With Crush <b>₹80</b></li>
                <li>Cold Coffee With Ice-Cream <b>₹90</b></li>
                <li>Lemon Ice Tea <b>₹80</b></li>
                <li>Peach Ice Tea <b>₹80</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Milkshake</h3>

            <ul>
                <li>Oreo Milkshake <b>₹100</b></li>
                <li>KitKat Milkshake <b>₹100</b></li>
                <li>Vanilla Milkshake <b>₹100</b></li>
                <li>Mango Milkshake <b>₹100</b></li>
                <li>Chocolate Milkshake <b>₹100</b></li>
                <li>Strawberry Milkshake <b>₹100</b></li>
                <li>Pineapple Milkshake <b>₹100</b></li>
                <li>Pista Milkshake <b>₹100</b></li>
                <li>Butterscotch Milkshake <b>₹100</b></li>
                <li>Blueberry Milkshake <b>₹100</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Mocktails</h3>

            <ul>
                <li>Blue Curacao Mojito <b>₹90</b></li>
                <li>Mint Mojito <b>₹90</b></li>
                <li>Guava Mojito <b>₹90</b></li>
                <li>Classic Mojito <b>₹90</b></li>
                <li>Raspberry Mojito <b>₹90</b></li>
                <li>Green Apple Mojito <b>₹90</b></li>
                <li>Watermelon Mojito <b>₹90</b></li>
                <li>Blue Berry Mojito <b>₹90</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Ice-Cream</h3>

            <ul>
                <li>Vanilla Ice-Cream <b>₹50</b></li>
                <li>Chocolate Ice-Cream <b>₹50</b></li>
                <li>Butter Scotch Ice-Cream <b>₹50</b></li>
                <li>Mango Ice-Cream <b>₹50</b></li>
                <li>Pista Ice-Cream <b>₹50</b></li>
                <li>Strawberry Ice-Cream <b>₹50</b></li>
                <li>Skylight Special Ice-Cream <b>₹70</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Ice Crusher</h3>

            <ul>
                <li>Mango Crusher <b>₹80</b></li>
                <li>Pista Crusher <b>₹80</b></li>
                <li>Strawberry Crusher <b>₹80</b></li>
                <li>Blueberry Crusher <b>₹80</b></li>
                <li>Pineapple Crusher <b>₹80</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>CAD-B</h3>

            <ul>
                <li>Choco CAD-B <b>₹140</b></li>
                <li>Oreo CAD-B <b>₹140</b></li>
                <li>KitKat CAD-B <b>₹140</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Mastani</h3>

            <ul>
                <li>Mango Mastani <b>₹120</b></li>
                <li>Strawberry Mastani <b>₹120</b></li>
                <li>Pista Mastani <b>₹120</b></li>
                <li>Butter Scotch Mastani <b>₹120</b></li>
                <li>Chocolate Mastani <b>₹120</b></li>
                <li>Vanilla Mastani <b>₹120</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     PIZZA
===================================================== -->

<section id="pizza" class="section">

    <h2>🍕 Pizza</h2>

    <div class="price-note">
        S (6") / M (8")
    </div>

    <div class="grid">

        <div class="card wide">

            <ul>

                <li>
                    Veg Cheese Pizza
                    <b>₹160 / ₹200</b>
                </li>

                <li>
                    Margarita Pizza
                    <b>₹140 / ₹180</b>
                </li>

                <li>
                    Corn & Cheese Pizza
                    <b>₹150 / ₹180</b>
                </li>

                <li>
                    Schezwan Cheese Pizza
                    <b>₹170 / ₹210</b>
                </li>

                <li>
                    Tandoori Cheese Pizza
                    <b>₹170 / ₹210</b>
                </li>

                <li>
                    Peri Peri Cheese Pizza
                    <b>₹170 / ₹210</b>
                </li>

                <li>
                    Paneer Pizza
                    <b>₹180 / ₹220</b>
                </li>

                <li>
                    Paneer Tikka Pizza
                    <b>₹200 / ₹240</b>
                </li>

                <li>
                    Schezwan Paneer Pizza
                    <b>₹200 / ₹240</b>
                </li>

                <li>
                    Chocolate Cheese Pizza
                    <b>₹160 / ₹200</b>
                </li>

                <li>
                    <span>
                        Skylight Special Pizza
                        <span class="badge special-badge">
                            👑 Special
                        </span>
                    </span>

                    <b>₹220 / ₹260</b>
                </li>

            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     SANDWICH
===================================================== -->

<section id="sandwich" class="section">

    <h2>🥪 Sandwich</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Veg Sandwich (Without Grill) <b>₹60</b></li>
                <li>Veg Grill Sandwich <b>₹70</b></li>
                <li>Veg Cheese Grill Sandwich <b>₹100</b></li>
                <li>Schezwan Cheese Grill Sandwich <b>₹120</b></li>
                <li>Peri Peri Cheese Grill Sandwich <b>₹120</b></li>
                <li>Masala Cheese Grill Sandwich <b>₹120</b></li>
                <li>Tandoori Cheese Grill Sandwich <b>₹120</b></li>
                <li>Paneer Cheese Grill Sandwich <b>₹130</b></li>
                <li>Corn And Cheese Sandwich <b>₹100</b></li>
                <li>Chocolate Grill Sandwich <b>₹100</b></li>
                <li>Bread Butter Sandwich <b>₹40</b></li>
                <li>Bread Butter Grill Sandwich <b>₹60</b></li>
                <li>Club Sandwich <b>₹140</b></li>

                <li>
                    <span>
                        Skylight Special Sandwich
                        <span class="badge special-badge">
                            👑 Special
                        </span>
                    </span>

                    <b>₹160</b>
                </li>

            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     BURGER
===================================================== -->

<section id="burger" class="section">

    <h2>🍔 Burger</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Veg Burger <b>₹70</b></li>
                <li>Veg Cheese Burger <b>₹90</b></li>
                <li>Mayo Cheese Burger <b>₹90</b></li>
                <li>Schezwan Cheese Burger <b>₹100</b></li>
                <li>Peri Peri Cheese Burger <b>₹100</b></li>
                <li>Tandoori Cheese Burger <b>₹100</b></li>
                <li>Paneer Burger <b>₹110</b></li>
                <li>Paneer Cheese Burger <b>₹120</b></li>
                <li>Double Patty Cheese Burger <b>₹140</b></li>
                <li>Double Patty Paneer Cheese Burger <b>₹160</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     FRIES
===================================================== -->

<section id="fries" class="section">

    <h2>🍟 Fries</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Simply Salted Fries <b>₹80</b></li>
                <li>Peri Peri Fries <b>₹100</b></li>
                <li>Mayo Fries <b>₹110</b></li>
                <li>Tandoori Fries <b>₹120</b></li>
                <li>Cheese Fries <b>₹120</b></li>
                <li>Double Cheese Fries <b>₹140</b></li>
                <li>Masala Fries <b>₹140</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     NACHOS
===================================================== -->

<section id="nachos" class="section">

    <h2>🌮 Nachos</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Cheese Nachos <b>₹100</b></li>
                <li>Peri Peri Cheese Nachos <b>₹120</b></li>
                <li>Tandoori Cheese Nachos <b>₹120</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     maggie
===================================================== -->

<section id="maggie" class="section">

    <h2>🍜 maggie</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Plain maggie <b>₹50</b></li>
                <li>Plain Masala maggie <b>₹70</b></li>
                <li>Plain Cheese maggie <b>₹80</b></li>
                <li>Vegetable maggie <b>₹80</b></li>
                <li>Schezwan Cheese maggie <b>₹90</b></li>
                <li>Peri Peri Cheese maggie <b>₹100</b></li>
                <li>Butter & Cheese maggie <b>₹100</b></li>
                <li>Corn & Cheese maggie <b>₹90</b></li>
                <li>Alfredo Cheese maggie <b>₹120</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     PASTA
===================================================== -->

<section id="pasta" class="section">

    <h2>🍝 Pasta</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>White Sauce Pasta <b>₹150</b></li>
                <li>Red Sauce Pasta <b>₹150</b></li>
                <li>Alfredo Sauce Pasta <b>₹150</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     PAV BHAJI
===================================================== -->

<section id="pavbhaji" class="section">

    <h2>🍛 Pav Bhaji</h2>

    <div class="grid">

        <div class="card wide">

            <ul>

                <li>

                    <span>

                        Unlimited Pav Bhaji
                        <small>
                            (Single Person)
                        </small>

                        <span class="badge popular-badge">
                            🔥 Popular
                        </span>

                    </span>

                    <b>₹149</b>

                </li>

                <li>
                    Butter Pav Bhaji (Limited)
                    <b>₹120</b>
                </li>

                <li>
                    Kolhapuri Pav Bhaji
                    <b>₹140</b>
                </li>

                <li>
                    Cheese Pav Bhaji
                    <b>₹150</b>
                </li>

            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     EXTRAS
===================================================== -->

<section id="extras" class="section">

    <h2>➕ Extras</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Extra Butter <b>₹10</b></li>
                <li>Extra Pav <b>₹10</b></li>
                <li>Extra Cheese <b>₹20</b></li>
                <li>Extra Bhaji <b>₹90</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     MOMOS
===================================================== -->

<section id="momos" class="section">

    <h2>🥟 Momos & Bites</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Veg Momos <b>₹100</b></li>
                <li>Veg Cheese Momos <b>₹130</b></li>
                <li>Paneer Momos <b>₹150</b></li>

                <li>
                    Garlic Cheese Bread
                    <small>(2-Slice)</small>
                    <b>₹120</b>
                </li>

                <li>
                    Potato Cheese Balls
                    <b>₹120</b>
                </li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     CHINESE
===================================================== -->

<section id="chinese" class="section">

    <h2>🥢 Chinese Starter</h2>

    <div class="grid">

        <div class="card">

            <h3>Soups</h3>

            <ul>
                <li>Tomato Soup <b>₹90</b></li>
                <li>Sweet Corn Soup <b>₹90</b></li>
                <li>Veg Manchow Soup <b>₹90</b></li>
                <li>Hot & Sour Soup <b>₹90</b></li>
            </ul>

        </div>


        <div class="card">

            <h3>Chillies & Noodles</h3>

            <ul>
                <li>Veg Manchurian <b>₹140</b></li>
                <li>Veg Manchurian (Gravy) <b>₹150</b></li>
                <li>Soyabean Chilly <b>₹150</b></li>
                <li>Paneer Chilly <b>₹170</b></li>
                <li>Hakka Noodles <b>₹140</b></li>
                <li>Schezwan Noodles <b>₹150</b></li>
                <li>Manchurian Noodles <b>₹170</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     DESSERTS
===================================================== -->

<section id="desserts" class="section">

    <h2>🍰 Desserts</h2>

    <div class="grid">

        <div class="card wide">

            <ul>
                <li>Brownie <b>₹130</b></li>
                <li>Brownie With Ice-Cream <b>₹150</b></li>
                <li>Choco Lava Cake <b>₹80</b></li>
            </ul>

        </div>

    </div>

</section>


<!-- =====================================================
     BIRTHDAY HALL
===================================================== -->

<section id="birthday" class="birthday">

    <div class="birthday-overlay">

        <span class="eyebrow">
            CELEBRATE WITH US
        </span>

        <h2>
            🎂 Birthday Party Hall
        </h2>

        <p>
            Make your special day memorable at
            Skylight Cafe & Restro.
        </p>


        <!--
            Replace this placeholder with the actual
            birthday hall image later.
        -->

        <div class="birthday-photo-placeholder">

            <span>🎉</span>

            <p>
                Birthday Hall Photos Coming Soon
            </p>

        </div>


        <!-- IMPORTANT:
             Both buttons are inside one centered
             container.
        -->

        <div class="birthday-actions">

            <a
                class="call"
                href="tel:8007138763"
            >
                📞 Call Now
            </a>


            <a
                class="whatsapp"
                href="https://wa.me/918007138763?text=Hello%20Skylight%20Cafe%2C%20I%20want%20to%20enquire%20about%20the%20Birthday%20Party%20Hall."
                target="_blank"
                rel="noopener noreferrer"
            >
                💬 Enquire on WhatsApp
            </a>

        </div>

    </div>

</section>


<!-- =====================================================
     LOCATION
===================================================== -->

<section class="visit-section">

    <span class="eyebrow">
        COME VISIT US
    </span>

    <h2>
        📍 Find Us
    </h2>

    <p>
        Skylight Cafe & Restro
    </p>

    <p>
        Nashik, Maharashtra
    </p>

    <a
        class="location-button"
        href="https://maps.app.goo.gl/LDqEwQvmm9vroLCU7?g_st=ac"
        target="_blank"
        rel="noopener noreferrer"
    >
        📍 Get Directions
    </a>

</section>


<!-- =====================================================
     OPENING HOURS
===================================================== -->

<section class="hours-section">

    <span class="eyebrow">
        WHEN TO VISIT
    </span>

    <h2>
        🕐 Opening Hours
    </h2>

    <div class="hours-card">

        <div>

            <span>
                Monday – Sunday
            </span>

            <strong>
                9:30 AM – 10:00 PM
            </strong>

        </div>

    </div>

</section>


<!-- =====================================================
     REVIEW
===================================================== -->

<section class="review-section">

    <span class="eyebrow">
        ENJOYED YOUR VISIT?
    </span>

    <h2>
        ⭐ We'd Love Your Feedback
    </h2>

    <p>
        Your review helps Skylight Cafe & Restro
        grow and serve you better.
    </p>

    <a
        class="review-button"
        href="https://g.page/r/CUjUCkSeVe0YEBE/review"
        target="_blank"
        rel="noopener noreferrer"
    >
        ⭐ Rate Us on Google
    </a>

</section>


</main>


<!-- =====================================================
     FOOTER
===================================================== -->

<footer>

    <strong>
        Skylight Cafe & Restro
    </strong>

    <p>
        📞 8007138763 &nbsp; | &nbsp; 9637340956
    </p>

    <p>
        📍 Nashik, Maharashtra
    </p>

    <a
    class="footer-location-button"
    href="https://maps.app.goo.gl/LDqEwQvmm9vroLCU7?g_st=ac"
    target="_blank"
    rel="noopener noreferrer"
>
    📍 Get Directions
</a>
    <p>
        © 2026 Skylight Cafe & Restro
    </p>

</footer>


<!-- =====================================================
     FLOATING WHATSAPP
===================================================== -->

<a
    class="floating-whatsapp"
    href="https://wa.me/918007138763?text=Hello%20Skylight%20Cafe%2C%20I%20want%20to%20know%20more%20about%20your%20cafe."
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Chat with Skylight Cafe on WhatsApp"
>
    💬
</a>




<!-- =====================================================
     CART / ADD BUTTON FUNCTIONALITY
     Added without removing existing page sections.
===================================================== -->

<div id="cartBar" class="cart-bar hidden">
    <div class="cart-summary">
        <span class="cart-icon">🛒</span>
        <span><strong id="cartCount">0</strong> Items</span>
        <span class="cart-total">₹<span id="cartTotal">0</span></span>
    </div>
    <button id="viewCartBtn" class="view-cart-btn" type="button">View Cart</button>
</div>

<div id="cartOverlay" class="cart-overlay hidden" aria-hidden="true">
    <div class="cart-panel" role="dialog" aria-modal="true" aria-label="Selected items">
        <div class="cart-header">
            <div>
                <span class="eyebrow">YOUR SELECTION</span>
                <h2>🛒 Selected Items</h2>
            </div>
            <button id="closeCartBtn" class="close-cart" type="button" aria-label="Close cart">✕</button>
        </div>

        <div id="cartItems" class="cart-items"></div>

        <div class="cart-footer">
            <div class="cart-total-row">
                <span>Total Items</span>
                <strong id="panelCartCount">0</strong>
            </div>
            <div class="cart-total-row total-price">
                <span>Estimated Total</span>
                <strong>₹<span id="panelCartTotal">0</span></strong>
            </div>
            <div class="cart-actions">
                <button id="clearCartBtn" class="clear-cart-btn" type="button">Clear All</button>
                <button id="showWaiterBtn" class="show-waiter-btn" type="button">👋 Show Captain</button>
            </div>
        </div>
    </div>
</div>

<div id="pizzaModal" class="pizza-modal hidden" aria-hidden="true">
    <div class="pizza-modal-box" role="dialog" aria-modal="true" aria-label="Choose pizza size">
        <button id="closePizzaModal" class="close-pizza" type="button" aria-label="Close">✕</button>
        <span class="eyebrow">CHOOSE SIZE</span>
        <h2 id="pizzaName">Pizza</h2>
        <div class="pizza-size-options">
            <button id="smallPizzaBtn" class="pizza-size" type="button">
                <span>Small</span>
                <strong>6&quot;</strong>
                <b>₹0</b>
            </button>
            <button id="mediumPizzaBtn" class="pizza-size" type="button">
                <span>Medium</span>
                <strong>8&quot;</strong>
                <b>₹0</b>
            </button>
        </div>
    </div>
</div>

<div id="waiterMode" class="waiter-mode hidden" aria-hidden="true">
    <div class="waiter-box" role="dialog" aria-modal="true" aria-label="Selection for captain">
        <div class="waiter-header">
            <div>
                <span class="eyebrow">SHOW TO CAPTAIN</span>
                <h2>Your Selection</h2>
            </div>
            <button id="closeWaiterBtn" class="close-cart" type="button" aria-label="Close">✕</button>
        </div>
        <div id="waiterItems"></div>
        <div class="waiter-total">
            <span>Total Items: <strong id="waiterCount">0</strong></span>
            <span>Estimated Total: <strong>₹<span id="waiterTotal">0</span></strong></span>
        </div>
        <p class="waiter-note">Please show this screen to your captain.</p>
    </div>
</div>

<script>
(function () {
    "use strict";

    document.addEventListener("DOMContentLoaded", function () {
        var cart = [];
        var selectedPizza = null;

        var cartBar = document.getElementById("cartBar");
        var cartOverlay = document.getElementById("cartOverlay");
        var cartItems = document.getElementById("cartItems");
        var cartCount = document.getElementById("cartCount");
        var cartTotal = document.getElementById("cartTotal");
        var panelCartCount = document.getElementById("panelCartCount");
        var panelCartTotal = document.getElementById("panelCartTotal");

        var pizzaModal = document.getElementById("pizzaModal");
        var pizzaName = document.getElementById("pizzaName");
        var smallPizzaBtn = document.getElementById("smallPizzaBtn");
        var mediumPizzaBtn = document.getElementById("mediumPizzaBtn");

        var waiterMode = document.getElementById("waiterMode");
        var waiterItems = document.getElementById("waiterItems");

        function escapeHtml(value) {
            return String(value)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/\"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function numberFromPrice(text) {
            var match = String(text).replace(/,/g, "").match(/\d+(?:\.\d+)?/);
            return match ? Number(match[0]) : 0;
        }

        function pricesFromText(text) {
            return String(text)
                .split("/")
                .map(function (part) {
                    return numberFromPrice(part);
                })
                .filter(function (value) {
                    return value > 0;
                });
        }

        function getMenuItemName(li) {
            var clone = li.cloneNode(true);
            var price = clone.querySelector("b");
            if (price) {
                price.remove();
            }
            clone.querySelectorAll(".badge, .add-btn, .item-action").forEach(function (element) {
                element.remove();
            });
            return clone.textContent.replace(/\s+/g, " ").trim();
        }

        function makeItemAction(li, name, prices, isPizza) {
            var existing = li.querySelector(".item-action");
            if (existing) {
                return;
            }

            var action = document.createElement("div");
            action.className = "item-action";
            action.dataset.name = name;
            action.dataset.pizza = isPizza ? "true" : "false";
            action.dataset.small = prices[0] || "0";
            action.dataset.medium = prices[1] || "0";

            var addButton = document.createElement("button");
            addButton.type = "button";
            addButton.className = "add-btn";
            addButton.textContent = "+ Add";

            addButton.addEventListener("click", function () {
                if (isPizza && prices.length >= 2) {
                    openPizzaModal(name, prices[0], prices[1]);
                } else {
                    addToCart(name, prices[0], "");
                }
            });

            action.appendChild(addButton);
            li.appendChild(action);
        }

        function addButtonToMenuItem(li, isPizza) {
            if (li.querySelector(".item-action")) {
                return;
            }

            var priceElement = li.querySelector("b");
            if (!priceElement) {
                return;
            }

            var prices = pricesFromText(priceElement.textContent);
            if (prices.length === 0) {
                return;
            }

            var name = getMenuItemName(li);
            makeItemAction(li, name, prices, isPizza);
        }

        function addButtonToSpecialCard(card) {
            if (card.querySelector(".item-action")) {
                return;
            }

            var title = card.querySelector("h3");
            var price = card.querySelector("strong");
            if (!title || !price) {
                return;
            }

            var prices = pricesFromText(price.textContent);
            if (prices.length === 0) {
                return;
            }

            var name = title.textContent.replace(/\s+/g, " ").trim();
            var action = document.createElement("div");
            action.className = "item-action special-item-action";
            action.dataset.name = name;
            action.dataset.pizza = prices.length >= 2 ? "true" : "false";
            action.dataset.small = prices[0] || "0";
            action.dataset.medium = prices[1] || "0";

            var button = document.createElement("button");
            button.type = "button";
            button.className = "add-btn";
            button.textContent = "+ Add";
            button.addEventListener("click", function () {
                if (prices.length >= 2) {
                    openPizzaModal(name, prices[0], prices[1]);
                } else {
                    addToCart(name, prices[0], "");
                }
            });

            action.appendChild(button);
            title.parentElement.appendChild(action);
        }

        function setupAddButtons() {
            document.querySelectorAll("main section.section").forEach(function (section) {
                var isPizza = section.id === "pizza";
                section.querySelectorAll("li").forEach(function (li) {
                    addButtonToMenuItem(li, isPizza);
                });
            });

            document.querySelectorAll(".special-card").forEach(function (card) {
                addButtonToSpecialCard(card);
            });
        }

        function updateMenuActions() {
            document.querySelectorAll(".item-action").forEach(function (action) {
                var name = action.dataset.name;
                var isPizza = action.dataset.pizza === "true";
                var smallPrice = Number(action.dataset.small || 0);
                var mediumPrice = Number(action.dataset.medium || 0);

                var items = cart.filter(function (item) {
                    if (isPizza) {
                        return item.name === name;
                    }
                    return item.name === name && item.variant === "";
                });

                action.innerHTML = "";

                if (items.length === 0) {
                    var add = document.createElement("button");
                    add.type = "button";
                    add.className = "add-btn";
                    add.textContent = "+ Add";
                    add.addEventListener("click", function () {
                        if (isPizza && mediumPrice > 0) {
                            openPizzaModal(name, smallPrice, mediumPrice);
                        } else {
                            addToCart(name, smallPrice, "");
                        }
                    });
                    action.appendChild(add);
                    return;
                }

                if (isPizza) {
                    items.forEach(function (item) {
                        var control = document.createElement("div");
                        control.className = "selected-control";
                        control.innerHTML =
                            '<span class="selected-variant">' + escapeHtml(item.variant || "Selected") + '</span>' +
                            '<button type="button" class="inline-qty" data-key="' + escapeHtml(item.key) + '" data-action="decrease">−</button>' +
                            '<span class="inline-count">' + item.quantity + '</span>' +
                            '<button type="button" class="inline-qty" data-key="' + escapeHtml(item.key) + '" data-action="increase">+</button>';
                        action.appendChild(control);
                    });
                    return;
                }

                var item = items[0];
                var control = document.createElement("div");
                control.className = "selected-control";
                control.innerHTML =
                    '<button type="button" class="inline-qty" data-key="' + escapeHtml(item.key) + '" data-action="decrease">−</button>' +
                    '<span class="inline-count">' + item.quantity + '</span>' +
                    '<button type="button" class="inline-qty" data-key="' + escapeHtml(item.key) + '" data-action="increase">+</button>';
                action.appendChild(control);
            });
        }

        function openPizzaModal(name, smallPrice, mediumPrice) {
            selectedPizza = {
                name: name,
                small: smallPrice,
                medium: mediumPrice
            };

            pizzaName.textContent = name;
            smallPizzaBtn.querySelector("b").textContent = "₹" + smallPrice;
            mediumPizzaBtn.querySelector("b").textContent = "₹" + mediumPrice;

            pizzaModal.classList.remove("hidden");
            pizzaModal.setAttribute("aria-hidden", "false");
        }

        function closePizzaModal() {
            selectedPizza = null;
            pizzaModal.classList.add("hidden");
            pizzaModal.setAttribute("aria-hidden", "true");
        }

        function addToCart(name, price, variant) {
            var key = name + "|" + variant;
            var existing = cart.find(function (item) {
                return item.key === key;
            });

            if (existing) {
                existing.quantity += 1;
            } else {
                cart.push({
                    key: key,
                    name: name,
                    price: price,
                    variant: variant,
                    quantity: 1
                });
            }

            updateCart();
        }

        function updateCart() {
            var count = 0;
            var total = 0;

            cart.forEach(function (item) {
                count += item.quantity;
                total += item.price * item.quantity;
            });

            cartCount.textContent = count;
            cartTotal.textContent = total;
            panelCartCount.textContent = count;
            panelCartTotal.textContent = total;

            if (count > 0) {
                cartBar.classList.remove("hidden");
            } else {
                cartBar.classList.add("hidden");
                cartOverlay.classList.add("hidden");
            }

            renderCart();
            updateMenuActions();
        }

        function renderCart() {
            cartItems.innerHTML = "";

            if (cart.length === 0) {
                cartItems.innerHTML =
                    '<div class="empty-cart"><div class="empty-cart-icon">🛒</div>' +
                    '<h3>Your selection is empty</h3>' +
                    '<p>Add your favourite items from the menu.</p></div>';
                return;
            }

            cart.forEach(function (item, index) {
                var row = document.createElement("div");
                row.className = "cart-item";

                row.innerHTML =
                    '<div class="cart-item-info">' +
                        '<strong>' + escapeHtml(item.name) + '</strong>' +
                        (item.variant ? '<small>' + escapeHtml(item.variant) + '</small>' : '') +
                        '<span>₹' + item.price + ' × ' + item.quantity + '</span>' +
                    '</div>' +
                    '<div class="cart-item-right">' +
                        '<strong>₹' + (item.price * item.quantity) + '</strong>' +
                        '<div class="quantity-control">' +
                            '<button class="quantity-btn" type="button" data-index="' + index + '" data-action="decrease">−</button>' +
                            '<span>' + item.quantity + '</span>' +
                            '<button class="quantity-btn" type="button" data-index="' + index + '" data-action="increase">+</button>' +
                        '</div>' +
                        '<button class="remove-item" type="button" data-index="' + index + '">Remove</button>' +
                    '</div>';

                cartItems.appendChild(row);
            });
        }

        function openCart() {
            cartOverlay.classList.remove("hidden");
            cartOverlay.setAttribute("aria-hidden", "false");
        }

        function closeCart() {
            cartOverlay.classList.add("hidden");
            cartOverlay.setAttribute("aria-hidden", "true");
        }

        function renderWaiter() {
            waiterItems.innerHTML = "";
            var count = 0;
            var total = 0;

            cart.forEach(function (item) {
                count += item.quantity;
                total += item.price * item.quantity;

                var row = document.createElement("div");
                row.className = "waiter-item";
                row.innerHTML =
                    '<div><strong>' + escapeHtml(item.name) + '</strong>' +
                    (item.variant ? '<small>' + escapeHtml(item.variant) + '</small>' : '') +
                    '</div><strong>× ' + item.quantity + '</strong>';
                waiterItems.appendChild(row);
            });

            document.getElementById("waiterCount").textContent = count;
            document.getElementById("waiterTotal").textContent = total;
        }

        document.getElementById("viewCartBtn").addEventListener("click", openCart);
        document.getElementById("closeCartBtn").addEventListener("click", closeCart);
        document.getElementById("closePizzaModal").addEventListener("click", closePizzaModal);

        cartOverlay.addEventListener("click", function (event) {
            if (event.target === cartOverlay) {
                closeCart();
            }
        });

        pizzaModal.addEventListener("click", function (event) {
            if (event.target === pizzaModal) {
                closePizzaModal();
            }
        });

        smallPizzaBtn.addEventListener("click", function () {
            if (selectedPizza) {
                addToCart(selectedPizza.name, selectedPizza.small, "Small (6\")");
                closePizzaModal();
            }
        });

        mediumPizzaBtn.addEventListener("click", function () {
            if (selectedPizza) {
                addToCart(selectedPizza.name, selectedPizza.medium, "Medium (8\")");
                closePizzaModal();
            }
        });

        document.getElementById("clearCartBtn").addEventListener("click", function () {
            if (cart.length && window.confirm("Remove all selected items?")) {
                cart = [];
                updateCart();
            }
        });

        document.getElementById("showWaiterBtn").addEventListener("click", function () {
            if (!cart.length) {
                return;
            }

            renderWaiter();
            cartOverlay.classList.add("hidden");
            waiterMode.classList.remove("hidden");
            waiterMode.setAttribute("aria-hidden", "false");
        });

        document.getElementById("closeWaiterBtn").addEventListener("click", function () {
            waiterMode.classList.add("hidden");
            waiterMode.setAttribute("aria-hidden", "true");
        });

        document.addEventListener("click", function (event) {
            var button = event.target.closest(".inline-qty");
            if (!button) {
                return;
            }

            var key = button.dataset.key;
            var item = cart.find(function (entry) {
                return entry.key === key;
            });

            if (!item) {
                return;
            }

            if (button.dataset.action === "increase") {
                item.quantity += 1;
            } else {
                item.quantity -= 1;
                if (item.quantity <= 0) {
                    cart = cart.filter(function (entry) {
                        return entry.key !== key;
                    });
                }
            }

            updateCart();
        });

        cartItems.addEventListener("click", function (event) {
            var button = event.target.closest("button");
            if (!button) {
                return;
            }

            var index = Number(button.dataset.index);
            if (!Number.isInteger(index) || !cart[index]) {
                return;
            }

            if (button.classList.contains("remove-item")) {
                cart.splice(index, 1);
                updateCart();
                return;
            }

            if (button.classList.contains("quantity-btn")) {
                if (button.dataset.action === "increase") {
                    cart[index].quantity += 1;
                } else {
                    cart[index].quantity -= 1;
                    if (cart[index].quantity <= 0) {
                        cart.splice(index, 1);
                    }
                }
                updateCart();
            }
        });

        document.addEventListener("keydown", function (event) {
            if (event.key === "Escape") {
                closePizzaModal();
                closeCart();
                waiterMode.classList.add("hidden");
                waiterMode.setAttribute("aria-hidden", "true");
            }
        });

        setupAddButtons();
        updateCart();
    });
})();
</script>


<!-- =====================================================
     JAVASCRIPT
===================================================== -->

<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

        const nav =
            document.getElementById(
                "categoryNav"
            );

        const navWrapper =
            document.querySelector(
                ".nav-wrapper"
            );

        const navLinks =
            Array.from(
                document.querySelectorAll(
                    ".nav a[data-section]"
                )
            );

        const sections =
            navLinks
                .map(function (link) {

                    return document.getElementById(
                        link.dataset.section
                    );

                })
                .filter(Boolean);

        const dotsContainer =
            document.getElementById(
                "navDots"
            );


        let currentActiveId = null;

        let clickInProgress = false;

        let clickTimer = null;

        let scrollFrame = null;


        /* =================================================
           CREATE PAGINATION DOTS
        ================================================= */

        sections.forEach(
            function () {

                if (!dotsContainer) {
                    return;
                }

                const dot =
                    document.createElement(
                        "span"
                    );

                dot.className =
                    "nav-dot";

                dotsContainer.appendChild(
                    dot
                );

            }
        );


        const dots =
            dotsContainer
                ? Array.from(
                    dotsContainer.querySelectorAll(
                        ".nav-dot"
                    )
                )
                : [];


        /* =================================================
           KEEP ACTIVE TAB VISIBLE
        ================================================= */

        function keepLinkVisible(link) {

            if (!nav || !link) {
                return;
            }


            const navRect =
                nav.getBoundingClientRect();

            const linkRect =
                link.getBoundingClientRect();


            const margin = 30;


            if (
                linkRect.left <
                navRect.left + margin
            ) {

                nav.scrollBy({

                    left:
                        linkRect.left -
                        navRect.left -
                        margin,

                    behavior: "smooth"

                });

            }

            else if (
                linkRect.right >
                navRect.right - margin
            ) {

                nav.scrollBy({

                    left:
                        linkRect.right -
                        navRect.right +
                        margin,

                    behavior: "smooth"

                });

            }

        }


        /* =================================================
           SET ACTIVE CATEGORY
        ================================================= */

        function setActive(
            id,
            moveNavigation
        ) {

            if (!id) {
                return;
            }


            currentActiveId = id;


            navLinks.forEach(
                function (link) {

                    const active =
                        link.dataset.section === id;

                    link.classList.toggle(
                        "active",
                        active
                    );


                    if (
                        active &&
                        moveNavigation
                    ) {

                        keepLinkVisible(
                            link
                        );

                    }

                }
            );


            const index =
                sections.findIndex(
                    function (section) {

                        return section.id === id;

                    }
                );


            dots.forEach(
                function (dot, dotIndex) {

                    dot.classList.toggle(
                        "active",
                        dotIndex === index
                    );

                }
            );

        }


        /* =================================================
           NAVIGATION CLICK
        ================================================= */

        navLinks.forEach(
            function (link) {

                link.addEventListener(
                    "click",
                    function (event) {

                        event.preventDefault();


                        const id =
                            this.dataset.section;


                        const target =
                            document.getElementById(
                                id
                            );


                        if (!target) {
                            return;
                        }


                        clickInProgress =
                            true;


                        clearTimeout(
                            clickTimer
                        );


                        setActive(
                            id,
                            true
                        );


                        const navHeight =
                            navWrapper
                                ? navWrapper.offsetHeight
                                : 0;


                        const targetTop =
                            target.getBoundingClientRect().top +
                            window.pageYOffset -
                            navHeight -
                            8;


                        window.scrollTo({

                            top:
                                Math.max(
                                    0,
                                    targetTop
                                ),

                            behavior:
                                "smooth"

                        });


                        /*
                         * Update URL hash without
                         * causing browser's own jump.
                         */

                        history.replaceState(
                            null,
                            "",
                            "#" + id
                        );


                        clickTimer =
                            setTimeout(
                                function () {

                                    clickInProgress =
                                        false;

                                    updateActiveFromScroll();

                                },
                                800
                            );

                    }
                );

            }
        );


        /* =================================================
           DETERMINE ACTIVE CATEGORY
        ================================================= */

        function updateActiveFromScroll() {

            if (clickInProgress) {
                return;
            }


            const navHeight =
                navWrapper
                    ? navWrapper.offsetHeight
                    : 0;


            const activationPoint =
                navHeight + 80;


            /*
             * At very top, Specials is active.
             */

            if (window.scrollY < 120) {

                setActive(
                    "specials",
                    true
                );

                return;
            }


            let activeSection =
                sections[0];


            sections.forEach(
                function (section) {

                    const rect =
                        section.getBoundingClientRect();


                    if (
                        rect.top <=
                        activationPoint
                    ) {

                        activeSection =
                            section;

                    }

                }
            );


            if (
                activeSection &&
                activeSection.id !==
                currentActiveId
            ) {

                setActive(
                    activeSection.id,
                    true
                );

            }

        }


        /* =================================================
           SCROLL EVENT
        ================================================= */

        window.addEventListener(
            "scroll",
            function () {

                if (scrollFrame) {
                    return;
                }


                scrollFrame =
                    requestAnimationFrame(
                        function () {

                            updateActiveFromScroll();

                            scrollFrame =
                                null;

                        }
                    );

            },
            {
                passive: true
            }
        );


        /* =================================================
           INITIAL PAGE STATE
        ================================================= */

        if (!window.location.hash) {

            window.scrollTo({

                top: 0,

                left: 0,

                behavior: "auto"

            });


            setActive(
                "specials",
                false
            );

        }

        else {

            /*
             * If a customer intentionally opens
             * #pizza etc., respect that.
             */

            const hash =
                window.location.hash
                    .substring(1);


            const target =
                document.getElementById(
                    hash
                );


            if (target) {

                setActive(
                    hash,
                    false
                );

            }

        }

    }
);

</script>

</body>
</html>