/*@font-face {*/
    /*    font-family: 'ProductDescriptionRobotoBold';*/
    /*    src: url('{{ asset('font/roboto-bold-webfont.woff') }}') format('woff');*/
    /*    font-weight: 700;*/
    /*    font-style: normal;*/
    /*}*/

    :root {
  /**
   * COLORS
   */
font-family: 'Roboto', sans-serif;
  --gold-crayola: hsl(39, 86%, 59%);
  --quick-silver: hsla(0, 0%, 65%, 1);
  --davys-grey: hsla(30, 3%, 34%, 1);
  --smoky-black-1: hsla(40, 12%, 5%, 1);
  --smoky-black-2: hsla(30, 8%, 5%, 1);
  --smoky-black-3: hsla(0, 3%, 7%, 1);
  --eerie-black-1: hsla(210, 4%, 9%, 1);
  --eerie-black-2: hsla(210, 4%, 11%, 1);
  --eerie-black-3: hsla(180, 2%, 8%, 1);
  --eerie-black-4: hsla(0, 0%, 13%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --white-alpha-10: hsla(0, 0%, 100%, 0.1);
  --black: hsla(0, 0%, 0%, 1);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  --black-alpha-15: hsla(0, 0%, 0%, 0.15);F

  /**
   * GRADIENT COLOR
   */

  --loading-text-gradient: linear-gradient(
    90deg,
    transparent 0% 16.66%,
    var(--smoky-black-3) 33.33% 50%,
    transparent 66.66% 75%
  );
    to top,
    hsla(0, 0%, 0%, 0.9),
    hsla(0, 0%, 0%, 0.7),
    transparent
  );

  /**
   * TYPOGRAPHY
   */

  /* font-family */
  --fontFamily-forum: "Times New Roman", Times, serif;
  --fontFamily-dm_sans: "Times New Roman", Times, serif;

  /* font-size */
  --fontSize-display-1: calc(1.3rem + 6.7vw);
  --fontSize-headline-1: calc(1rem + 2vw);
  /* --fontSize-headline-1: calc(2rem + 2.5vw); */
  --fontSize-headline-2: calc(1.3rem + 2.4vw);
  --fontSize-title-1: calc(1.6rem + 1.2vw);
  --fontSize-title-2: 2.2rem;
  --fontSize-title-3: 2.1rem;
  --fontSize-title-4: calc(1.6rem + 1.2vw);
  --fontSize-body-1: 2.4rem;
  --fontSize-body-2: 1.6rem;
  --fontSize-body-3: 1.8rem;
  --fontSize-body-4: 1.6rem;
  --fontSize-label-1: 1.4rem;
  --fontSize-label-2: 1.2rem;

  /* font-weight */
  --weight-regular: 400;
  --weight-bold: 700;

  /* line-height */
  --lineHeight-1: 1em;
  --lineHeight-2: 1.2em;
  --lineHeight-3: 1.5em;
  --lineHeight-4: 1.6em;
  --lineHeight-5: 1.85em;
  --lineHeight-6: 1.4em;

  /* letter-spacing */
  --letterSpacing-1: 0.15em;
  --letterSpacing-2: 0.4em;
  --letterSpacing-3: 0.2em;
  --letterSpacing-4: 0.3em;
  --letterSpacing-5: 3px;

  /**
   * SPACING
   */

  --section-space: 70px;

  /**
   * SHADOW
   */

  --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);

  /**
   * BORDER RADIUS
   */

  --radius-24: 24px;
  --radius-circle: 50%;

  /**
   * TRANSITION
   */
     
   .category-card{
  display:flex;
    gap:25px;
    overflow-x:auto;
    padding:20px;
    justify-content:center;
    }
       .category-card img{
                width:93px;
            height:93px;
            border-radius:50%;
            object-fit:cover;
            background:#fffaeb;
             box-shadow: 
            0 2px 6px rgba(0,0,0,0.08),
            0 8px 20px rgba(0,0,0,0.10);
       }

  --transition-1: 250ms ease;
  --transition-2: 500ms ease;
  --transition-3: 1000ms ease;
}

.category-card a{ text-decoration:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        width:90px;
        font-family:sans-serif;
}
    body {
        background-color: var(--eerie-black-1);
  color: var(--white);
  font-family: var(--fontFamily-dm_sans);
  font-size: var(--fontSize-body-4);
  font-weight: var(--weight-regular);
  line-height: var(--lineHeight-5);
  height: auto;
  min-height: 100vh;
  overflow-x:auto;
  overflow-y: auto;
  /*z-index:-1;*/
    }
    
    .footer.section {
        padding-bottom: 0;
    }

    .footer .footer-top {
        margin-block-end: 0;
    }

    .menu-container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 0 16px 60px;
    }

    
   

    .nonveg-icon {
        width: 16px;
        height: 16px;
        border: 1px solid red;
        display: inline-block;
        position: relative;
        margin-right: 6px;
    }

    .nonveg-icon::after {
        content: "";
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: 3px;
        left: 3px;
    }

    .card-left h3 {
        font-size: 21px;
        /*font-weight: 600;*/
        margin: 8px 0 8px;
        letter-spacing: -0.02em;
        color: #111827;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }

    .price {
        font-size: 21px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #dc2626;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }

    .price .old {
        text-decoration: line-through;
        color: rgba(2, 6, 12, 0.6);
        margin-right: 6px;
        font-weight: normal;
    }

    .rating {
        font-size: 16px;
        color: #02060c;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .rating span {
        color: green;
        font-weight: bold;
        margin-right: 4px;
    }

    .star-review2 i {
        color: #f7b500 !important;
        text-shadow: 0 0 8px rgba(255, 193, 7, 0.35);
        margin-right: 1px;
    }

    .star-review2 span {
        color: #8a6b12;
        font-weight: 600;
        margin-left: 6px;
    }

    .rating-row {
        display: inline-flex;
        align-items: center;
        margin-top: 10px;
    }

    .rating-stars {
        display: none;
    }

    .rating-stars i {
        font-size: 13px;
    }

    .rating-stars .is-filled {
        color: #ffc107;
        text-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
    }

    .rating-stars .is-half {
        color: #ffcf57;
        text-shadow: 0 0 8px rgba(255, 193, 7, 0.2);
    }

    .rating-stars .is-empty {
        color: #94a3b8;
    }

    .rating-count {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 11px;
        border-radius: 999px;
        border: 1px solid #dbe3ee;
        background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.2;
    }

    .rating-count::before {
        content: "\2605";
        color: #f59e0b;
        font-size: 12px;
        line-height: 1;
    }

    .rating-count.is-unrated {
        color: #64748b;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
        border: 1px solid #d8e1ec;
        font-weight: 700;
    }

    .rating-count.is-unrated::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #94a3b8;
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
    }


    /* General */
    .restaurant-header {
            max-width: 100%;
    margin: 80px auto;
    padding-top: 160px;
        padding-top: 165px;
        font-family: "Proxima Nova", Arial, sans-serif;
        color: var(--text);
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 13px;
        color: #6b6b6b;
        margin-bottom: 10px;
    }

    .breadcrumb span {
        color: #000;
        font-weight: 600;
    }

    /* Title */
    .restaurant-name {
        font-size: 28px;
        font-weight: 800;
        margin: 15px 20px 20px;
    }

    /* Info Card */
    .restaurant-info {
        background: var(--surface);
        border-radius: 18px;
        padding: 20px;
        box-shadow: var(--shadow-soft);
        margin-bottom: 18px;
    }


    .info-row {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .rating {
        color: #3ab757;
        font-weight: 600;
    }

    .rating span {
        color: #02060c;
        font-weight: 600;
    }

    .dot {
        margin: 0 5px;
        color: #6b6b6b;
    }

    .cost {
        font-weight: 500;
    }

    .cuisine {
        margin: 6px 0;
        font-size: 14px;
    }

    .cuisine a {
        color: #e23744;
        font-weight: 600;
    }

    .outlet,
    .time {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-top: 4px;
    }

    .bullet {
        width: 6px;
        height: 6px;
        background: #6b6b6b;
        border-radius: 50%;
        margin-right: 8px;
    }

    .label {
        font-weight: 600;
        margin-right: 6px;
    }

    .value {
        font-weight: 600;
    }
  .header {
              padding-bottom: 1.3rem;
  }
    /* Deals Section */

           .deals-wrapper {
            margin: 40px auto 30px auto;
            border-radius: 16px;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            max-width: 90%;
        }

    /*.deals-wrapper::after {*/
    /*    content: "";*/
        /*position: absolute;*/
    /*    inset: 6px;*/
    /*    border-radius: 18px;*/
    /*    border: 1px solid rgba(203, 213, 225, 0.9);*/
    /*    pointer-events: none;*/
    /*}*/

     .deals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
    .deals-title-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .deals-heading-inline {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap; /* helps on small screens */
    }


    .deal-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 3px 14px;
        border-radius: 999px;
        font-size: 1.2rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background: linear-gradient(135deg, #fff8dc, #ffe39a);
        color: #8a6200;
        font-weight: 800;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
        border: 1px solid rgba(203, 213, 225, 0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 10px 18px rgba(255, 193, 7, 0.14);
    }

    .deals {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 1fr);
        gap: 16px;
        padding-top:1rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        /*padding: 6px 4px 8px 2px;*/
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .deal-eyebrow::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffcf33, #f59e0b);
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.14);
        flex-shrink: 0;
    }

    .deals-header h2 {
        margin: 0;
        font-size: 2.8rem;
        letter-spacing: -0.01em;
        color: #1f2937;
        font-weight: 700;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }

    .deals-description {
        margin-bottom: 0rem;
    font-size: 1.8rem;
    color: #666;
    font-weight: 400
}

    .deal-controls {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .deal-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(203, 213, 225, 0.95);
        background: linear-gradient(135deg, #fff9df, #ffe38f);
        color: #b67c00;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        transition: all 0.18s ease;
    }

    .deal-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
        background: linear-gradient(135deg, #ffe38f, #ffd14f);
    }

    .deal-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

      .deal {
              line-height: 20px;
            cursor: pointer;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 12px;
            align-items: center;
            border-radius: 16px;
            border: 1px solid rgba(226, 232, 240, 1);
            box-shadow: 10px 9px 6px rgba(0, 0, 0, 0.08);
            padding: 3px 16px;
            min-height: 90px;
            scroll-snap-align: start;
            background:#fffaeb;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }


    .deals::-webkit-scrollbar {
        height: 8px;
    }

    .deals::-webkit-scrollbar-thumb {
        background: rgba(255, 193, 7, 0.6);
        border-radius: 999px;
        border: 2px solid #fff7de;
    }


    .deal:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
        /*border-color: rgba(148, 163, 184, 0.85);*/
    }

      .deal-icon {
        width: 58px;
        height: 58px;
        border-radius: 22px;
        background:
            radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 243, 204, 0.92) 48%, rgba(255, 214, 102, 0.92) 100%);
        display: grid;
        place-items: center;
        position: relative;
        box-shadow:
            0 14px 26px rgba(255, 193, 7, 0.24),
            0 8px 18px rgba(15, 23, 42, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
        /* border: 1px solid rgba(203, 213, 225, 0.95); */
        overflow: hidden;
    }

    .deal-icon::before {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
        pointer-events: none;
    }

    .deal-icon::after {
        content: "";
        position: absolute;
        inset: auto auto 10px 10px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
        filter: blur(2px);
        pointer-events: none;
    }

    .deal-icon img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        position: relative;
        z-index: 1;
    }



    .deal-icon-glyph {
        width: 42px;
        height: 42px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        font-size: 22px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        border: 1px solid rgba(203, 213, 225, 0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            0 8px 16px rgba(166, 108, 0, 0.18);
    }

    .deal-icon-glyph.deal-day {
        color: #5a3600;
        background: linear-gradient(135deg, #fff7d9, #ffc936);
    }

    .deal-icon-glyph.deal-bogo {
        color: #5a3600;
        background: linear-gradient(135deg, #ffe6bf, #ffb84d);
        font-size: 17px;
    }

    .deal-icon-glyph.deal-flat {
        color: #5a3600;
        background: linear-gradient(135deg, #fff2cc, #ffcf5c);
    }

    .deal-main {
        font-weight: 600;
        font-size: 1.7rem;
        letter-spacing: -0.01em;
        color: #171e28c9;
        margin-bottom: 4px;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }


    .deal-sub {
        color: #b8860b;
        font-weight: 600;
        font-size: 1.3rem;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
            line-height: 16px;
    }

 
    .deal-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0px 8px;
        border-radius: 16px;
        background: linear-gradient(135deg, #fff8dc, #ffe39a);
        color: #7a5600;
        font-weight: 800;
        font-size: 1.1rem;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        width: fit-content;
        white-space: nowrap;
        border: 1px solid rgba(203, 213, 225, 0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.75),
            0 8px 18px rgba(255, 193, 7, 0.14);
    }
    .deal-chip::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffcf33, #f59e0b);
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.14);
        flex-shrink: 0;
    }
.header .contact-info{
    top: 138px;
}
    .header.active .container .contact-info {
        top: 280px;
        right: 23px;
    }
    /* Menu Section */
    .menu-bar {
      display: flex;
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
    }
    .fixed-menu {
        
    }
.fixed-menu .menu-up{
    /*width: 100%;*/
    position: fixed;
    top: 138px;
    z-index: 3;
    background: black;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
    .menu-label {
        font-size: 13px;
        color: white;
        margin-bottom: 12px;
        letter-spacing: 0.08em;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }

    .search-wrapper {
        position: relative;
        margin: 0 auto;
        max-width: 520px;
        background: #ffffff;
        border-radius: 16px;
        padding: 6px;
        box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
    }

     .search-bar {
        width: 100%;
        padding: 14px 45px 14px 15px;
        border-radius: 12px;
        border: 1px solid rgba(203, 213, 225, 0.95);
        background: #ffffff;
        color: #1f2937;
        caret-color: #b67c00;
        font-size: 17px;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
        box-shadow: inset 0 1px 2px rgba(255, 193, 7, 0.28), 0 10px 24px rgba(255, 193, 7, 0.12);
    }


    .search-bar::placeholder {
        color: #9a8330;
        opacity: 0.85;
    }

    .search-icon {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, #fff8dc, #ffd86b);
        color: #8a6200;
        border: 1px solid rgba(203, 213, 225, 0.95);
        font-size: 14px;
        cursor: pointer;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 10px 18px rgba(255, 193, 7, 0.18);
         
    }

    .search-icon::before {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
        pointer-events: none;
    }

    .search-icon svg {
        width: 17px;
        height: 17px;
        display: block;
        position: relative;
        z-index: 1;
        stroke-width: 2.4;
    }

    .filters {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-width: 180px;
        padding: 12px 16px;
        border-radius: 18px;
        border: 1px solid rgba(214, 158, 0, 0.18);
        background: linear-gradient(180deg, #ffffff, #fffaf2);
        color: #1f2937;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        text-align: left;
        position: relative;
        overflow: hidden;
    }

    .filter-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.5), transparent 45%);
        pointer-events: none;
    }

    .filter-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            0 8px 16px rgba(17, 24, 39, 0.08);
    }

    .filter-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: relative;
        z-index: 1;
    }

    .filter-title {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.15;
    }

    .filter-subtitle {
        font-size: 11px;
        font-weight: 700;
        color: #8b95a7;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .filter-btn:hover {
        border-color: rgba(214, 158, 0, 0.34);
        background: linear-gradient(180deg, #ffffff, #fff7e8);
        box-shadow: 0 16px 28px rgba(17, 24, 39, 0.12);
        transform: translateY(-2px);
    }

    .filter-btn.veg {
        border-color: rgba(58, 183, 87, 0.24);
        background: linear-gradient(180deg, #ffffff, #f5fff8);
    }

    .filter-btn.veg .filter-icon {
        background: linear-gradient(135deg, #ecfff0, #c7f5d4);
        border: 1px solid rgba(58, 183, 87, 0.25);
    }

    .filter-btn.veg .veg-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #3ab757;
        box-shadow: 0 0 0 5px rgba(58, 183, 87, 0.16);
    }

    .filter-btn.veg .filter-title {
        color: #166534;
    }

    .filter-btn.tag {
        border-color: rgba(255, 193, 7, 0.26);
        background: linear-gradient(180deg, #ffffff, #fffaf0);
    }

    .filter-btn.tag .filter-icon {
        background: linear-gradient(135deg, #fff5cf, #ffd560);
        border: 1px solid rgba(214, 158, 0, 0.22);
        color: #8a6200;
        font-size: 15px;
        font-weight: 900;
    }

    .filter-btn.tag .filter-title {
        color: #8a6200;
    }

    .filter-badge-star {
        line-height: 1;
    }

    /* Wrap for the rating row */
    .info-row .rating {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: rgba(2, 6, 12, 0.92);
        /* Swiggy-style text color */
        gap: 4px;
        /* spacing between svg and number */
    }

    /* Size the SVG consistently */
    .info-row .rating svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }


    .counter {
display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ffe08a;
    border-radius: 10px;
    overflow: hidden;
    /* box-shadow: 0 10px 22px rgba(255, 193, 7, 0.35); */
    position: absolute;
    bottom: -20px;
    left: 17px;
    padding: 2px 5px;
    gap: 8px;
    }

    .counter button {
        background: none;
        border: none;
        color: #b67c00;;
        font-size: 20px;
        font-weight: bold;
        width: 32px;
        height: 100%;
        cursor: pointer;
    }

    .counter span {
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #02060c;
    }

    ._2mQ-4 {
        height: 45px;
        width: calc(100% - 32px);
        max-width: 400px;
        position: fixed;
        left: 50%;
        bottom: 60px;
        transform: translateX(-50%);
        overflow: visible;
        z-index: 20;
        display: none;
        border-radius: 999px;
        box-shadow:
            0 14px 32px rgba(255, 193, 7, 0.35),
            0 8px 18px rgba(0, 0, 0, 0.12);
    }

    ._3KrAC {
        height: 56px;
        background: linear-gradient(90deg, #ffda6a 0%, #ffc107 50%, #f7b500 100%);
        color: #2b1d04;
        z-index: 2;
        position: relative;
        pointer-events: auto;
        width: 100%;
        border: 1px solid rgba(255, 193, 7, 0.6);
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
        font-weight: 800;
        letter-spacing: 0.015em;
    }

    ._1JiK6 {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
    }

    ._12qOx {
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        color: #2b1d04;
    }

    ._2xXGW {
        font-weight: 700;
        font-size: 1.5rem;
        display: block;
        text-align: left;
    }

    ._36JxA {
        font-size: 0.93rem;
        display: block;
        color: rgba(43, 29, 4, 0.8);
    }

    .ZVNHp {
        text-transform: uppercase;
        font-size: 1.4rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        color: #2b1d04;
    }

    ._5OjeQ {
        margin-left: 8px;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
    }

    .no-underline {
        text-decoration: none;
        color: #fff;
    }

    .fromTop {
        margin-top: 200px;
    }

    ._3kHjz {
        height: 48px;
        background: linear-gradient(135deg, #ffe9a6 0%, #ffd35c 55%, #ffbf36 100%);
        outline: 0;
        cursor: pointer;
        color: #2b1d04;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        letter-spacing: 0.02em;
        font-weight: 600;
        width: 100%;
        margin: auto;
        position: relative;
        bottom: 0;
        right: 0;
        border-radius: 14px;
        border: 1px solid rgba(255, 193, 7, 0.55);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    ._3kHjz:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(255, 193, 7, 0.32);
    }

    ._3kHjz:active {
        transform: translateY(0);
        box-shadow: 0 12px 24px rgba(255, 193, 7, 0.26);
    }

    .modal-footer {
        padding: 0px;
        align-items: center;
        justify-content: space-between;
    }

    /* Customize modal theming */
    #chooseModal .modal-content {
        background:
            radial-gradient(circle at 12% 10%, rgba(255, 215, 79, 0.2), transparent 42%),
            linear-gradient(180deg, #fffef9 0%, #fff8e8 100%);
        width: 100%;
        max-width: 420px;
        padding: 0;
        border-radius: 20px;
        position: relative;
        max-height: 95vh;
        overflow: hidden;
        font-family: "Proxima Nova", Arial, sans-serif;
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.18), 0 14px 30px rgba(255, 193, 7, 0.24);
        border: 1px solid rgba(255, 193, 7, 0.45);
    }

    #chooseModal .modal-header {
        background: linear-gradient(135deg, #ffe8ad, #ffc94b);
        border-bottom: 1px solid rgba(183, 124, 0, 0.3);
        color: #2b1d04;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #chooseModal .modal-title {
        font-weight: 700;
        font-size: 2rem;
        letter-spacing: -0.01em;
        margin: 0;
        flex: 1;
        color: #2b1d04;
    }

    #chooseModal .modal-body {
        padding: 14px 16px 10px;
        background: transparent;
    }

    #chooseModal .modal-subtitle {
        margin: 0 0 12px;
        color: #7a5a14;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    #optionsModal .modal-content {
        border-radius: 18px;
        border: 1px solid rgba(255, 193, 7, 0.3);
        background:
            radial-gradient(circle at 18% 12%, rgba(255, 193, 7, 0.12), transparent 40%),
            radial-gradient(circle at 86% 6%, rgba(255, 215, 79, 0.12), transparent 40%),
            linear-gradient(180deg, #fffef9 0%, #fff6dd 48%, #fff0c7 100%);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(255, 193, 7, 0.22);
        overflow: hidden;
    }
#optionsModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

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

    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    z-index: 9999;
}

#optionsModal.show {
    display: flex;
}

/* STOP SCROLL */
body.modal-open {
    overflow: hidden;
}

/* modal box */
.modal-dialog {
    max-width: 500px;
    width: 90%;
}
    #optionsModal .modal-header {
        background: linear-gradient(135deg, #fff3c4, #ffd35c);
        border-bottom: 1px solid rgba(255, 193, 7, 0.35);
        color: #2b1d04;
        padding: 14px 16px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    #optionsModal .modal-title {
        font-weight: 500;
        letter-spacing: -0.01em;
        margin: 0;
        flex: 1;
    }

    #optionsModal .close {
        font-size: 40px;
        color: #2b1d04;
        opacity: 0.9;
        margin-left: auto;
    }

    #optionsModal .modal-body {
        padding: 18px 18px 6px;
        background: #fffdf7;
    }

    #optionsModal .form-check {
        background: #fffdf5;
        border: 1px solid rgba(255, 193, 7, 0.35);
        border-radius: 12px;
        padding: 10px 12px;
        box-shadow: inset 0 1px 0 rgba(255, 193, 7, 0.16);
        margin-bottom: 10px;
    }

    #chooseModal .modal-close-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(43, 29, 4, 0.25);
        background: rgba(255, 255, 255, 0.5);
        color: #2b1d04;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.18s ease, background 0.18s ease;
    }

    #chooseModal .modal-close-btn:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.85);
    }

    #chooseModal .product-choose-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 18px 16px;
        border-top: 1px solid rgba(183, 124, 0, 0.25);
        background: #fff5d8;
    }

    #chooseModal .product-choose-btn {
        background: linear-gradient(135deg, #2b1d04, #4a2f03);
        border: 1px solid rgba(43, 29, 4, 0.6);
        color: #fff8df;
        font-weight: 700;
        border-radius: 12px;
        box-shadow: 0 10px 22px rgba(43, 29, 4, 0.28);
        width: 170px;
        min-height: 44px;
        padding: 10px 24px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    #chooseModal .product-choose-btn:hover,
    #chooseModal .product-choose-btn:focus {
        background: linear-gradient(135deg, #3b2502, #5f3c03);
        border-color: rgba(43, 29, 4, 0.8);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(43, 29, 4, 0.35);
    }

    #chooseModal .choose-option {
        background: #fffdf6;
        border: 1px solid rgba(255, 193, 7, 0.4);
        border-radius: 14px;
        padding: 12px 12px;
        box-shadow: inset 0 1px 0 rgba(255, 193, 7, 0.14);
        margin-bottom: 10px !important;
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    #chooseModal .choose-option:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 193, 7, 0.6);
        box-shadow: 0 10px 18px rgba(255, 193, 7, 0.16);
    }

    #chooseModal .form-check-input {
        -webkit-appearance: none;
        appearance: none;
        border: 2px solid #f4c74a;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: inline-grid;
        place-content: center;
        background: #fff;
    }

    #chooseModal .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(244, 183, 0, 0.2);
    }

    #chooseModal .form-check-input:hover {
        box-shadow: none;
    }

    #chooseModal .form-check-input:checked {
        background-color: var(--accent);
        border-color: var(--accent);
        background-image: none !important;
        box-shadow: none !important;
    }

    #chooseModal .form-check-input:checked::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
    }

    #chooseModal .form-check-input:checked::before {
        content: none;
    }

    #chooseModal .form-check-label {
        font-weight: 600;
        color: #2b1d04;
        font-size: 15px;
        width: 100%;
        margin-left: 6px;
    }

    #chooseModal .choose-option .form-check-label {
        font-weight: 600;
        color: #2b1d04;
    }

    #chooseModal .choose-price {
        display: inline-block;
        font-size: 18px;
        font-weight: 800;
        color: #9f1239;
        margin: 0;
        white-space: nowrap;
    }

    #chooseModal .choose-option .form-check-label {
        font-weight: 600;
        color: #2b1d04;
    }

    #chooseModal .choose-price {
        display: inline-block;
        font-size: 18px;
        font-weight: 800;
        color: #9f1239;
        margin: 0;
        white-space: nowrap;
    }

    .meal-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .meal-option .form-check-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        font-weight: 600;
    }

    .meal-option .meal-name {
        color: #2b1d04;
    }

    .meal-option .meal-price {
        background: rgba(255, 193, 7, 0.18);
        color: #b67c00;
        padding: 6px 10px;
        border-radius: 10px;
        font-weight: 700;
        letter-spacing: -0.01em;
        min-width: 74px;
        text-align: right;
    }

    .meal-card {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .meal-card .form-check-label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        font-weight: 600;
    }

    .meal-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .meal-chip {
        background: rgba(255, 193, 7, 0.2);
        color: #b67c00;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .meal-chip.soft {
        background: rgba(43, 29, 4, 0.06);
        color: #6a5321;
    }

    .meal-name {
        font-size: 1rem;
        color: #2b1d04;
        font-weight: 700;
    }

    .meal-note {
        font-size: 0.9rem;
        color: #6b5a24;
    }

    #optionsModal .form-check-input:checked {
        background-color: #ffc107;
        border-color: #f7b500;
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    }

    #chooseModal .form-check-label,
    #optionsModal .form-check-label {
        font-weight: 700;
        color: #2b1d04;
    }

    #choosePrice {
        color: #2b1d04;
        font-weight: 600;
        margin: 0;
        letter-spacing: -0.01em;
    }

    /* Responsive tweaks */
    @media (max-width: 1200px) {

        .menu-container,
        .restaurant-header {
            max-width: 1000px;
        }

        .image {
            width: 170px;
            height: 145px;
        }
    }

    @media (max-width: 992px) {

        .menu-container,
        .restaurant-header {
            max-width: 900px;
            padding: 0 14px;
        }

        .restaurant-header {
            padding-top: 220px;
        }

        .card {
            gap: 14px;
        }

        .card-left h3 {
            font-size: 18px;
        }

        .card .description {
            font-size: 14px;
        }

        .image {
            width: 160px;
            height: 140px;
        }

        .deals-wrapper {
            padding: 16px;
        }

        .deals-header h2 {
            font-size: 2rem;
        }

        .deals-description {
            font-size: 1.2rem;
        }

        .deal-eyebrow {
            font-size: 1rem;
        }

        .deals {
            grid-auto-columns: minmax(240px, 1fr);
            gap: 14px;
        }

        .deal {
            padding: 12px 14px;
        }

        .deal-main {
            font-size: 1.2rem;
        }

        .deal-sub {
            font-size: 1.05rem;
        }

        .deal-chip {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 768px) {
        .card {
            flex-direction: column;
            align-items: flex-start;
            padding: 18px 16px 26px;
        }

        .card-left {
            padding-right: 0;
        }

        .card-right {
            width: 100%;
            align-items: flex-start;
        }

        .image {
            width: 100%;
            height: 200px;
        }

        .add-btn,
        .counter {
            position: static;
            margin-top: 10px;
        }

        .menu-bar {
            padding: 14px;
        }
.restaurant-header .menu-up{
        width: 100%;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    padding: 0px 0;
    justify-content: center;
}
    .header.active .restaurant-header .menu-up{
    padding:0px;
}
        .restaurant-header {
            padding-top: 180px;
        }

        .deal {
            width: 280px;
        }

        .deals-wrapper {
            padding: 14px;
        }

        .deals-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .deal-controls {
            width: 100%;
            justify-content: flex-end;
        }

        .deal-btn {
            width: 44px;
            height: 44px;
        }

        .deal-btn:disabled {
            opacity: 0.9;
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
            background: linear-gradient(135deg, #fff9df, #ffe38f);
            color: #b67c00;
        }

        .deals {
            grid-auto-columns: minmax(72%, 1fr);
            gap: 12px;
            padding: 6px 2px 10px;
        }

        .deal {
            grid-template-columns: 1fr;
            text-align: left;
            row-gap: 8px;
        }

        .deal-icon {
            width: 52px;
            height: 52px;
        }

        .deal-icon img {
            width: 42px;
            height: 42px;
        }

        .deal-main {
            font-size: 1.1rem;
        }

        .deal-sub {
            font-size: 1rem;
        }

        .deal-chip {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 576px) {
        .restaurant-header {
            padding: 0 12px;
        }

        .menu-container {
            padding: 0 12px 50px;
        }

        .card {
            padding: 16px 14px 22px;
        }

        .restaurant-name {
            font-size: 24px;
        }

        .deal {
            width: 240px;
        }

        .search-wrapper {
            width: 100%;
        }

        ._2mQ-4 {
            width: calc(100% - 24px);
            height: 54px;
            bottom: 12px;
        }

        ._3KrAC {
            height: 54px;
        }

        ._1JiK6 {
            padding: 0 12px;
            gap: 8px;
        }

        ._2xXGW,
        .ZVNHp {
            font-size: 0.95rem;
        }

        .deals-wrapper {
            padding: 12px;
            margin: 18px 0 14px;
        }

        .deals-title-group {
            gap: 8px;
        }

        .deals-header h2 {
            font-size: 1.5rem;
        }

        .deals-description {
            font-size: 1rem;
        }

        .deal-eyebrow {
            font-size: 0.9rem;
        }

        .deals {
            grid-auto-columns: minmax(65%, 1fr);
            gap: 30px;
        }

        .deal {
            padding: 12px 12px 14px;
        }

        .deal-main {
            font-size: 1rem;
        }

        .deal-sub {
        color: #b8860b;
        font-weight: 600;
        font-size: 1.4rem;
        font-family: 'ProductDescriptionRobotoBold', sans-serif;
    }

        .deal-btn {
            width: 44px;
            height: 44px;
        }

        .deal-btn:disabled {
            opacity: 0.9;
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
            background: linear-gradient(135deg, #fff9df, #ffe38f);
            color: #b67c00;
        }

        .deal-chip {
            font-size: 0.85rem;
        }

    }
/* CARD */
.food-card {
    
        font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: #fffcf4;
    border-radius: 12px;
    margin-bottom: 12px;
}

/* LEFT */
.food-left {
    flex: 1;
    padding-right: 10px;
}

/* VEG ICON */
.veg-icon {
    width: 17px;
    height: 17px;
    border: 2px solid green;
    border-radius: 5px;
    position: relative;
    margin-bottom: 6px;
}

.veg-icon span {
    width: 6px;
    height: 6px;
    background: green;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* TITLE */
.food-title {
     font-size: 18px;
    font-weight: 700;
    color: rgba(2, 6, 12, 0.75);
}

/* PRICE */
.food-price {
      color: black;
    font-size: 15px;
    font-weight: 600;
    margin-top: -4px;
}

/* RATING */
.food-rating {
    font-size: 13px;
    color: #267e3e;
    font-weight: 600;
    margin-bottom: 6px;
}

.food-rating span {
    color: #6b6b6b;
    font-weight: 400;
}

/* DESCRIPTION */
.food-desc {
font-size: 15px;
    color: #6b6b6b;
    line-height: 1.4;
    margin: 0;
}

/* RIGHT */
.food-right {
  width: 134px;
    text-align: center;
    position: relative;
}

/* IMAGE */
.food-img {
 width: 100%;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
}

.food-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
        object-position: center;
}

/* ADD BUTTON */
.add-btn {
        position: absolute;
    bottom: -15px;
    left: 50%;
    font-size: 14px;
    transform: translateX(-50%);
    background: #fff;
    color: hsl(39, 86%, 59%);
    border: none;
    padding: 2px 28px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.add-btn:hover {
    background: hsl(39, 86%, 59%);
    color: #fff;
}

/* CUSTOM TEXT */
.custom-text {
    font-size: 11px;
    color: #888;
    margin-top: 14px;
}
    /* Modal Redesign v2: choose + options (template-matched) */
    .fromTop {
        margin-top: 0 !important;
    }

    .modal-backdrop.in {
        opacity: 0.72;
    }
/* FULL SCREEN MODAL BACKDROP */
#optionsModal {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

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

    background: rgba(0, 0, 0, 0.5); /* dark overlay */
    backdrop-filter: blur(8px); /* BLUR EFFECT */
    -webkit-backdrop-filter: blur(8px);

    z-index: 9999;
}

/* SHOW MODAL */
#optionsModal.show {
    display: flex;
}
body.modal-open {
    overflow: hidden !important;
    height: 100%;
}

/* MODAL BOX */
#optionsModal .modal-dialog {
    margin: 0;
    max-width: 500px;
    width: 90%;
}

/* CONTENT */
#optionsModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

/* OPTIONAL SMOOTH ENTRY */
@keyframes slideDown {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
    #chooseModal .modal-dialog,
    #optionsModal .modal-dialog {
        max-width: 600px;
        margin: 7vh auto;
    }

    #chooseModal .modal-content,
    #optionsModal .modal-content {
        border-radius: 22px;
        border: 1px solid rgba(255, 193, 7, 0.45);
        font-family: var(--fontFamily-dm_sans);
        background:
            radial-gradient(circle at 12% 8%, rgba(255, 215, 79, 0.26), transparent 42%),
            radial-gradient(circle at 88% 2%, rgba(255, 215, 79, 0.18), transparent 36%),
            linear-gradient(180deg, #fffef8 0%, #fff5dc 100%);
        box-shadow: 0 26px 60px rgba(0, 0, 0, 0.24), 0 14px 34px rgba(255, 193, 7, 0.25);
        overflow: hidden;
    }

    #chooseModal .modal-header,
    #optionsModal .modal-header {
        background: linear-gradient(135deg, #ffde86, #ffc53a);
        border-bottom: 1px solid rgba(122, 90, 20, 0.36);
        color: #2b1d04;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #chooseModal .modal-title,
    #optionsModal .modal-title {
        margin: 0;
        flex: 1;
        color: #2b1d04;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        font-family: var(--fontFamily-forum);
    }

    #chooseModal .modal-close-btn,
    #optionsModal .modal-close-btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(43, 29, 4, 0.25);
        background: rgba(255, 255, 255, 0.58);
        color: #2b1d04;
        font-size: 22px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.18s ease, background 0.18s ease;
    }

    #chooseModal .modal-close-btn:hover,
    #optionsModal .modal-close-btn:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.9);
    }

    #chooseModal .modal-body,
    #optionsModal .modal-body {
        padding: 14px 16px 10px;
        background: transparent;
    }

    #chooseModal .modal-subtitle {
        margin: 0 0 12px;
        color: #7a5a14;
        font-size: 13px;
        font-weight: 600;
    }

    #chooseModal .choose-option,
    #optionsModal .form-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        background: #fffdf6;
        border: 1px solid rgba(255, 193, 7, 0.4);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 10px !important;
        box-shadow: inset 0 1px 0 rgba(255, 193, 7, 0.12);
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    #chooseModal .choose-option:hover,
    #optionsModal .form-check:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 193, 7, 0.65);
        box-shadow: 0 10px 18px rgba(255, 193, 7, 0.18);
    }

    #chooseModal .form-check-input,
    #optionsModal .form-check-input {
        margin-top: 2px;
        width: 18px;
        height: 18px;
        border: 2px solid #d7a521;
        background-color: #fff;
    }

    #chooseModal .form-check-input:checked,
    #optionsModal .form-check-input:checked {
        background-color: #d7a521;
        border-color: #b68100;
        box-shadow: none;
    }

    #chooseModal .form-check-label,
    #optionsModal .form-check-label {
        margin: 0;
        width: 100%;
        color: #2b1d04;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.35;
    }

    #chooseModal .product-choose-footer,
    #optionsModal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(122, 90, 20, 0.22);
        background: #fff2ce;
    }

    #chooseModal .choose-price,
    #optionPrice1 {
        margin: 0;
        font-size: 19px;
        font-weight: 800;
        color: #9f1239;
        white-space: nowrap;
    }

    #chooseModal .product-choose-btn,
    #optionsModal .product-choose-btn {
        min-height: 44px;
        min-width: 168px;
        border-radius: 12px;
        border: 1px solid rgba(43, 29, 4, 0.65);
        background: linear-gradient(135deg, #2b1d04, #4b3003);
        color: #fff8df;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        box-shadow: 0 10px 22px rgba(43, 29, 4, 0.3);
    }

    #chooseModal .product-choose-btn:hover,
    #optionsModal .product-choose-btn:hover {
        background: linear-gradient(135deg, #3f2803, #664002);
        color: #ffffff;
    }

    @media (max-width: 576px) {
        #chooseModal .modal-dialog,
        #optionsModal .modal-dialog {
            max-width: calc(100% - 22px);
            margin: 5vh auto;
        }

        #chooseModal .modal-title,
        #optionsModal .modal-title {
            font-size: 1.8rem;
        }

        #chooseModal .product-choose-btn,
        #optionsModal .product-choose-btn {
            min-width: 144px;
            padding-inline: 14px;
            font-size: 12px;
        }
    }
    .deal-main.deal-font-lg{
        font-size:2rem;
    }
    
/* 🔥 Modal background */
.custom-modal {
    display: none; /* hidden initially */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

/* Modal box */
.modal-content {
    background: #fff;
    width: 60%;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

/* Close button */
.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 22px;
    cursor: pointer;
}

/* Deal items */
.deal-item {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.deal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.deal-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}

.deal-info {
    flex: 1;
}

.deal-info h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: black;
}

.deal-info p {
    margin: 2px 0;
    font-size: 18px;
    color: #666;
}

.deal-info span {
    font-size: 13px;
    font-weight: 600;
    color: black;
}

.deal-item button {
    background: orange;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 5px;
}

</style>

@section('content')

    <div class="container">
        <div class="restaurant-header">
            <!-- Breadcrumb -->

            <!-- Menu Section -->
           <!-- Menu Section -->
<div class="menu-bar">
    <div class="menu-up">

        <!-- Left Arrow -->
        <button class="category-arrow left-arrow" onclick="slideCategories('left')">
            &#10094;
        </button>

        <!-- Category Scroll Container -->
        <div class="category-slider" id="categorySlider">

            @foreach($categories as $cat)
            <a 
                href="javascript:void(0)"
                data-id="{{ $cat->id }}"
                onclick='setActiveCategory(this); loadCategory(@json($cat->sub_category))'
            >
                <!-- Image -->
                <img 
                    src="{{ asset('/storage/' . $cat->category_image) }}" 
                    alt="{{ $cat->name }}"
                >

                <!-- Text -->
                <span style="
                    margin-top:6px;
                    font-size:13px;
                    color:#ffe7b1;
                    text-align:center;
                    line-height:18px;
                    font-weight:bold;
                    display:block;
                ">
                    {{ $cat->sub_category }}
                </span>
            </a>
            @endforeach

        </div>

        <!-- Right Arrow -->
        <button class="category-arrow right-arrow" onclick="slideCategories('right')">
            &#10095;
        </button>

    </div>
</div>


<style>
.menu-up {
    display: flex;
    align-items: center;
    position: relative;
    width:100%;
}

.category-slider {
    display: flex;
    /*gap: 20px;*/
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.category-slider a {
    min-width: 100px;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
}

.category-arrow {
    background: #ffffff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    z-index: 10;
}

.left-arrow {
    margin-right: 12px;
}

.right-arrow {
    margin-left: 12px;
}


.category-slider a img,
.category-card a img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: #f5f1e8;
    /*padding: 6px;*/
}

/* Category text below image */

.category-slider a span,
.category-card a span {
    margin-top: 8px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    display: block;
    color: #ffe7b1;
    max-width: 110px;
    margin-left: auto;
    margin-right: auto;
}

/* Proper spacing between categories */

.category-slider,
.category-card {
    gap: 15px;
    align-items: flex-start;
}
@media (min-width: 1851px) {
    .category-arrow {
        display: none;
    }

    .category-slider {
        overflow: visible;
        width: 100%;
        display: flex;
        margin: auto;
        justify-content: center;
    }
}

/* ===== MODAL BACKDROP ===== */
                    .tag-modal {
                        display: none;
                        position: fixed;
                        inset: 0;
                        background: rgba(0,0,0,0.6);
                        backdrop-filter: blur(6px);
                        z-index: 9999;
                        justify-content: center;
                        align-items: center;
                        overflow:hidden;
                    }
                    #modalTitle{
                        text-transform:uppercase;
                        font-size: 20px;
                    }
                    /* SHOW MODAL */
                    .tag-modal.show {
                        display: flex;
                    }
                    
                    /* ===== MODAL BOX ===== */
                    .tag-modal-box {
                        background: #fff;
                        border-radius: 15px;
                        width: 35%;
                        animation: modalFade 0.25s ease;
                    }
                    
                    /* ===== HEADER ===== */
                    .tag-modal-header {
                        border-radius:10px 10px 0px 0px;
                        background: linear-gradient(90deg, #c58b00, #ffcc00);
                        padding: 15px 20px;
                        color: #fff;
                        font-weight: 600;
                        font-size: 16px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    
                    /* CLOSE BUTTON */
                    .tag-close {
                        border-radius: 50%;
                        height: 31px;
                        width: 31px;
                        text-align: center;
                        cursor: pointer;
                        font-size: 16px;
                        background: #8a62005c;
                        transition: transform 0.2s ease;
                    }
                    
                    .tag-close:hover {
                        transform: scale(1.2);
                    }
                    
                    /* ===== BODY ===== */
                    .tag-modal-body {
                        height: 70%;
                        border-radius:10px;
                        background: #f5f5f5;
                        padding: 15px;
                        overflow-y: scroll;
                        overflow-x: hidden;
                    }
                    
                    
                    /* ===== ITEM CARD ===== */
                    .tag-item {
                        display: flex;
                        gap: 12px;
                        background: #fff;
                        border-radius: 12px;
                        padding: 12px;
                        margin-bottom: 12px;
                        align-items: center;
                        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
                        transition: transform 0.2s ease;
                    }
                     .tag-item .counter{
                         position:static;
                     }
                    /* ===== IMAGE ===== */
                    .tag-img {
                        width: 60px;
                        height: 60px;
                        flex-shrink: 0;
                    }
                    
                    .tag-img img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 10px;
                    }
                    
                    /* ===== CONTENT ===== */
                    .tag-content {
                        flex: 1;
                        line-height: 23px;
                    }
                    
                    /* TITLE */
                    .tag-title {
                        font-weight: 600;
                        font-size: 16px;
                        color: #000;
                    }
                    
                    /* DESCRIPTION */
                    .tag-desc {
                        font-size: 13px;
                        color: #666;
                    }
                    
                    /* OFFER TEXT */
                    .tag-offer {
                        font-size: 14px;
                        color: #bb890e;
                        font-weight: bold;
                    }
                    
                    /* ===== BUTTON ===== */
                    .tag-btn {
                        background: #ffcc00;
                        border: none;
                        padding: 6px 14px;
                        border-radius: 8px;
                        font-weight: 500;
                        cursor: pointer;
                        transition: all 0.2s ease;
                    }
                    
                    .tag-btn:hover {
                        background: #e6b800;
                    }
                    
                    /* ===== ANIMATION ===== */
                    @keyframes modalFade {
                        from {
                            opacity: 0;
                            transform: scale(0.95);
                        }
                        to {
                            opacity: 1;
                            transform: scale(1);
                        }
                    }