@font-face {
    font-family: roboto;
    src: url(/fonts/roboto.medium.ttf);
}

@font-face {
    font-family: roboto-regular;
    src: url(/fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: haymila;
    src: url(/fonts/Haymila-Regular.otf);
}

/* Global Resets & Fonts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: 10rem;
    scroll-behavior: smooth;
}

body {
    font-family: 'roboto';
    background-color: #000;
    color: #fff;
}

/* Reusable Colors */
:root {
    --gold: #FABA52;
    --dark-bg: #000;
    --darker-bg: #111;
    --card-bg: #222;
}
a{
    text-decoration: none;
}

/* Veg & Non-Veg Marks */
.veg-mark img {
    width: 1.2rem;
}

.nonveg-mark img {
    width: 1.2rem;
}

/* Container to center content horizontally */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header (logo + top-right button) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 80vw;
    max-width: 1200px;
    background-color: rgba(0, 0, 0, 0.733);
}

header .logo {
    font-size: 30px;
    width: 6rem;
    color: var(--gold);
}

header button {
    background-color: var(--gold);
    color: #000;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Horizontal row of 8 items (Appetizer Buttons) */
.appetizer-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    margin-top: 20vh;
}

.appetizer-button {
    display: flex;
    align-items: center;
    background-color: #222;
    border-radius: 10px;
    padding: 10px 20px;
    color: var(--gold);
    font-weight: bold;
    min-width: 150px;
    justify-content: center;
}

.appetizer-button img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 10px;
    object-fit: cover;
}

/* Toggle Buttons for switching tabs */
.toggle-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.toggle-btns {
    background-color: #222;
    border-radius: 30px;
    display: flex;
    padding: 5px;
    width: 220px;
}
.searchInput{
    display: none;
    position: absolute;
        height: 3rem;
        width: 18rem;
        transform: translate(-2rem, -.32rem);
        background: #2a2a2a;
        border-radius: 2rem;
        border: .1rem solid var(--gold);
        color: var(--gold);
        padding: 1rem;
        font-size: 1.2rem;
}
.show {
    display: inline-block;
}
.toggle-btns button {
    flex: 1;
    background: none;
    border: none;
    border-radius: 30px;
    color: #888;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-btns button.active {
    background-color: var(--gold);
    color: #000;
}

/* Main Sections (Veg / Non-Veg) */
.section-title {
    font-size: 24px;
    color: var(--gold);
    margin: 40px 0 40px 0;
}

/* 2-Column Layout of Items */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Single Card for each dish */
.dish-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-image: url(img/hobBg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dish-name {
    font-size: 18px;
    color: var(--gold);
    margin-bottom: 5px;
}

.dish-info {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.btn-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.dish-price {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    align-self: center;
}

.add-to-cart {
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: .6rem;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    border: solid .01rem var(--gold) ;
}

.add-to-cart:hover {
    background: white;
    border: solid .01rem var(--gold) ;
}

/* Hide the inactive page */
.hidden {
    display: none;
}


/* Fixed Menu Card Btn */

.menu-cardBtn {
    padding: 1rem 1.2rem;
    border-radius: 4rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--gold);
    cursor: pointer;
}
.menu-cardBtn img{
    width: 3rem;
}

/* Fixed Menu Card */

.fixedMenu {
    background: #2a2a2a;
    width: 15%;
    border-radius: 1rem;
    padding: 1.5rem;
    max-height: 20rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: none; 
    & ul {
        list-style: none;
        max-height: 17rem;
        overflow-y: scroll;

        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #2a2a2a;
            background-color: #F5F5F5;
        }

        &::-webkit-scrollbar {
            width: 3px;
            background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--gold);
            /* border: 2px solid #555555; */
        }
    }

    & ul li a {
        text-decoration: none;
        color: #fff;
    }

    & ul li {
        padding: .5rem 0;
    }
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #2a2a2a;
    background-color: #2a2a2a;
}

::-webkit-scrollbar {
    width: .5rem;
    background-color: #2a2a2a;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gold);
    /* border: 2px solid #555555; */
}

/* ==================================================================================================== */
        /* ==================================================================================================== */
        /* POPUP */
        /* ==================================================================================================== */
        /* ==================================================================================================== */

        .backdrop {
            display: none;
            position: fixed; top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 998;
          }
      
          .modal {
            display: none;
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: #2b2b2b;
            border-radius: 1.875rem;
            width: 90%;
            max-width: 600px;
            padding: 2.5rem;
            color: #fff;
            z-index: 999;
          }
          .modal .close {
            position: absolute;
            top: 1.25rem; right: 1.25rem;
            font-size: 1.5rem;
            color: var(--gold);
            cursor: pointer;
          }
          .modal h1 {
            font-size: 1.75rem;
            margin-bottom: 1.25rem;
          }
          .vendor {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.875rem;
          }
          .vendor .required {
            color: #00c853;
            font-weight: bold;
          }
      
          .select-box {
            background: #333;
            border-radius: 0.625rem;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1.875rem;
            position: relative;
            user-select: none;
            cursor: pointer;
          }
          .select-box .label {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .select-box .label span { font-size: 1rem; color: #fff; }
          .select-box .label .arrow {
            font-size: 0.875rem;
            color: #fff;
            transition: transform 0.2s;
          }
          .select-box .options {
            display: none;
            position: absolute;
            top: calc(100% + 0.3125rem);
            left: 0; right: 0;
            background: #333;
            border-radius: 0.5rem;
            padding: 0.5rem 0;
            z-index: 10;
            flex-direction: column;
          }
          .select-box.open .options { display: flex; }
          .select-box.open .arrow { transform: rotate(180deg); }
      
          .options label {
            display: flex;
            align-items: center;
            padding: 0.5rem 1.25rem;
            cursor: pointer;
            color: #fff;
            font-size: 1rem;
          }
          .options label:hover { background: #444; }
          .options input[type="radio"] {
            appearance: none;
            width: 1.125rem; height: 1.125rem;
            border: 2px solid var(--gold);
            border-radius: 50%;
            margin-right: 0.625rem;
            position: relative;
          }
          .options input[type="radio"]:checked::after {
            content: "";
            width: 0.625rem; height: 0.625rem;
            background: var(--gold);
            border-radius: 50%;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
          }
          .options .price { margin-left: auto; }
      
          .instructions {
            margin-bottom: 1.875rem;
          }
          .instructions label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
          }
          .instructions textarea {
            width: 100%;
            height: 3.75rem;
            background: #333;
            border: none;
            border-bottom: 1px solid #666;
            color: #fff;
            padding: 0.5rem;
            resize: none;
            font-size: 0.875rem;
          }
      
          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
          }
          .qty-control {
            display: flex;
            align-items: center;
          }
          .qty-control button {
            background: transparent;
            border: 2px solid var(--gold);
            color: var(--gold);
            width: 2.25rem; height: 2.25rem;
            font-size: 1.25rem;
            cursor: pointer;
            border-radius: 0.375rem;
          }
          .qty-control span {
            width: 2.5rem;
            text-align: center;
            font-size: 1.125rem;
            color: #fff;
          }
          .actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
          }
          .actions .add-cart {
            background: var(--gold);
            color: #2b2b2b;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            cursor: pointer;
          }
          .actions .total {
            border: 2px solid var(--gold);
            color: #fff;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            background: transparent;
          }
      
          /* —— Mobile tweaks —— */
          @media (max-width: 480px) {
          .appetizer-row{
              display: flex;
              flex-wrap: nowrap;
              max-width: 100vw !important;
              margin-top: 7rem;
              gap: 0;
              overflow-x: scroll;
              padding-left: 0;
              margin-left: 0;
              justify-content: flex-start;
              scrollbar-width: none;
          }
          .appetizer-button{
              flex-direction: column-reverse;
              background-color: #00000000;
              padding: 10px;
              min-width: 100px;
              justify-content: space-between;
              & p{
                  font-size: .7rem;
                  text-align: center;
              }
              & img{
                  margin-bottom: 1rem;
                  width: 3rem;
                  height: 3rem;
                  margin-left: 0;
              }
          }
          /* .appetizer-button:first-child{
            margin-left: 50vw;
          } */
          .fixedMenu{
              width: 70%;
          }
          .menu-cardBtn{
              border: none;
              filter: drop-shadow(1px 1px 10px gray);
          }
          .menu-cardBtn img{
              width: 2rem;
          }
          header{
              justify-content: space-around;
              width: 99vw;
          }
            html { font-size: 18px; }
      
            .open-btn {
              width: 90%; max-width: 320px;
              padding: 1rem 1.5rem;
              font-size: 1.125rem;
            }
            .modal {
              width: 95%;
              padding: 1.5rem;
            }
            .modal h1 { font-size: 1.5rem; }
      
            .select-box {
              padding: 1rem 1.25rem;
            }
            .select-box .label span,
            .options label { font-size: 1.125rem; }
            .options label { padding: 0.75rem 1rem; }
            .instructions textarea {
              height: 4rem;
              font-size: 1rem;
            }
            .qty-control button {
              width: 2.5rem; height: 2.5rem;
              font-size: 1.5rem;
            }
            .qty-control span {
              width: 3rem;
              font-size: 1.25rem;
            }
      
            /* ** Footer stacking & full‑width actions ** */
            .footer {
              flex-direction: column;
              align-items: center;
            }
            .actions {
              width: 100%;
              justify-content: space-between;
            }
            .actions .add-cart,
            .actions .total {
              flex: 1;
            }
            .actions .add-cart {
              margin-right: 0.5rem;
            }
            .rightDiv{
                margin-left: 0rem;
               }
          }








          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */
          /* =========================== */

          
          :root {
            --bg-shade-outline: #e0ddcf;
            --font-color: #212121;
            --spacing-32: 2rem;
            --sapcing-24: 1.5rem;
            --spacing-16: 1rem;
            --spacing-1: 0.063rem;
            --universal-transition: all 0.5s ease-in-out;
       }
        ul {
            list-style: none;
       }
       /* svg */
        circle-expand {
            --svg-length: 1.5rem;
            display: flex;
       }
        circle-expand svg {
            width: var(--svg-length);
            height: var(--svg-length);
       }
        circle-expand svg circle {
            stroke-dasharray: var(--circle-length);
            stroke-dashoffset: 0;
            transition: var(--universal-transition);
       }
        circle-expand svg path:nth-of-type(2) {
            stroke-dasharray: var(--top-length);
            stroke-dashoffset: 0;
            transition: var(--universal-transition);
       }
        circle-expand svg path:nth-of-type(3) {
            stroke-dasharray: var(--bottom-length);
            stroke-dashoffset: 0;
            transition: var(--universal-transition);
       }
        summary[expanded] circle-expand svg circle {
            stroke-dashoffset: var(--circle-length);
       }
        summary[expanded] circle-expand svg path:nth-of-type(2) {
            stroke-dashoffset: var(--top-length);
       }
        summary[expanded] circle-expand svg path:nth-of-type(3) {
            stroke-dashoffset: var(--bottom-length);
       }
        details {
            position: relative;
            border: var(--spacing-1) solid var(--bg-shade-outline);
            padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.28125rem) * 0.8081)), 2rem);
            border-radius: var(--sapcing-24);
            transition: var(--universal-transition);
       }
        details details-content {
            display: flex;
            overflow: hidden;
            height: 0;
            transition: var(--universal-transition);
       }
        details:has(summary[expanded]) {
            /* background-color: var(--bg-shade-200); */
            border-color: var(--gold);
       }
        details:has(summary[expanded]) p {
            opacity: 1;
       }
        details p {
            opacity: 0;
            /* line-height: 1; */
            /* margin-block: var(--sapcing-24); */
            transition: var(--universal-transition);
       }
        summary {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-32);
            list-style: none;
            cursor: pointer;
            transition: var(--universal-transition);
           /* avoid Windows insertion caret */
            caret-color: transparent;
       }
        summary::-webkit-details-marker {
            display: none;
       }
        summary::marker {
            content: '';
       }
       details-content{
        & img{
            width: 2rem;
            height: 2rem;
            margin: 1rem 0;
        }
       }
       .rightDiv{
        margin-left: 5rem;
       }
       @media (max-width: 480px) {
        .rightDiv{
            margin-left: 0rem;
           }
           details details-content{
            flex-direction: column;
           }
       }