.header-bg {
            position: relative;
        }

        @media (max-width: 768px) {
            .header-bg {
                height: 150px !important;
            }
        }

        .header-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45)
        }

        .menu-top-con {
            position: sticky;
            top: 0;
            right: 0;
            left: 0;
            background-color: white;
        }

        .menu-top {
            padding: 30px 15px 0;
            align-items: center;
        }

        .search_container {
            position: relative;
        }

        .menu-container h3 {
            margin: 15px 0 25px;
            font-family: "Trueno Bold" !important;
            font-size: 22px;
            color: #494949;
        }


        #detail-modal-title {
            margin-top: 0 !important;
            line-height: 40px;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: -0.02ch;
        }

        .search_container #search_menu {
            padding: 10px 20px;
            padding-left: 40px;
            border-radius: 15px;
            border: 0;
            background: #f7f7f7;
            width: 400px;
        }

        @media (max-width: 768px) {
            .menu-top {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .search_container {
                width: 80%;
            }

            .search_container #search_menu {
                width: 100%;
            }
        }

        .search_container svg {
            position: absolute;
            left: 10px;
            width: 20px;
            bottom: -9px;
        }

        .container h2 {
            color: #f1c778;
            font-weight: 600;
            margin: 0;
            text-transform: capitalize;
            position: relative;
            font-size: 40px;
            padding: 0 0 10px;
        }

        @media (max-width: 768px) {
            .container h2 {
                font-size: 28px;
            }
        }

        .menu-container {
            padding: 0 15px;
        }

        .menu-info h4 {
            margin-top: 0;
            font-family: "Trueno Bold" !important;
            font-size: 16px;
            margin-bottom: 10px
        }

        .menu-info p:nth-child(1) {
            font-size: 17px;
            font-family: 'HelveticaNeue Roman';
            margin-bottom: 10px;
            margin-top: 0;
        }

        .menu-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .menu-top h3 {
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            letter-spacing: 0ch;
            text-transform: none;
            color: rgb(25, 25, 25);
            margin: 0px;
            padding: 0px;
            display: block;

        }

        .menu-items {
            display: flex;
            flex-wrap: wrap;
            gap: 27px;
            margin: 0 auto;
        }


        .menu-box {
            border: 1px solid rgb(215, 213, 213);
            overflow: hidden;
            display: flex;
            cursor: pointer;
            justify-content: space-between;
            gap: 15px;
            width: 300px;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            width: calc(100% / 3 - 20px);
            height: 160px;
        }

        .menu-img {
            width: 40%;
        }

        .menu-info {
            padding: 15px;
            width: 85%;
        }

        .menu-box img {
            width: 100%;
            height: 100% !important;
            object-fit: cover !important;
        }

        @media (max-width: 768px) {
            .menu-items {
                flex-wrap: nowrap;
                flex-direction: column;
            }

            .menu-box {
                width: 100%;
                height: auto;
                flex-direction: column-reverse;
            }

            .menu-img {
                width: 100%;
                height: auto;
            }

            .menu-info {
                width: 100%;
            }

            .menu-box img {
                width: 100%;
                height: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
            }
        }

        .menu-category-filter {
            padding: 0 15px;
            margin: 15px 0 40px;
        }

        #menu_categories {
            display: flex;
            gap: 15px;
            list-style: none;
            padding: 0;
            flex-wrap: nowrap;
            margin: 0 0 15px;
            overflow: auto;
        }

        @media (max-width: 768px) {
            #menu_categories {
                gap: 30px;
            }

        }

        #menu_categories li a {
            text-decoration: none;
            color: #494949;
            font-size: 14px;
            text-transform: capitalize;
            font-family: "Trueno";
            line-height: 17px;
        }

        #menu_categories li a:hover {
            text-decoration: underline;
        }

        .review-count {
            text-decoration: underline;
            cursor: pointer;
        }

        .reviews-con {
            display: flex;
            align-items: center;
        }

        .avg-number {
            font-size: 22px;
        }

        .menu-rating {
            font-size: 22px;
            margin: 0 !important;
            margin-right: 5px !important;
        }

        .leave-review-btn,
        .leave-review-btn:hover {
            background: transparent;
            text-decoration: underline;
            padding-left: 20px;
            color: #404040;
        }

        .stars-display {
            font-size: 1.5em;
            font-family: Arial, sans-serif;
            letter-spacing: 3px;
            line-height: 1;

            /* Base: empty stars */
            color: #ddd;

            /* Filled layer */
            background: linear-gradient(90deg,
                    #FFD700 var(--fill-percent),
                    #ddd var(--fill-percent));

            /* CLIP background to star text */
            -webkit-background-clip: text;
            background-clip: text;

            /* Make text transparent so gradient shows inside stars */
            -webkit-text-fill-color: transparent;

            /* Optional outline */
            -webkit-text-stroke: 1px #777;
        }

        .stars-con {
            width: fit-content;
            height: fit-content;
        }

        /* ====================================== */
        .star-rating {
            display: inline-flex;
            gap: 0px;
            font-size: 28px;
            cursor: pointer;
            user-select: none;
        }

        /* Base star */
        .modal-star {
            position: relative;
            display: inline-block;
            color: #aaa;
        }

        /* Filled part (controlled by JS variable) */
        .modal-star::before {
            content: "★";
            position: absolute;
            top: 0;
            left: 0;

            color: #FFD700;

            width: var(--star-fill-width, 0%);
            overflow: hidden;
            white-space: nowrap;

            /* Smooth fill */
            transition: width 0.15s ease;
        }

        /* --- Modal Overlay & Content Styling (Based on your provided inline styles) --- */
        .modal-overlay,
        .modal-item-overlay {
            /* Full screen overlay */
            display: none;
            /* Hidden by default */
            position: fixed;
            inset: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Dark semi-transparent background */
            background: rgba(0, 0, 0, 0.6);
            /* Center the modal content */
            display: flex;
            /* Change to 'flex' in JS to show it */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            /* Ensure it's on top of everything */
        }

        .modal-content,
        .modal-item-content {
            background: #fff;
            padding: 3px;
            border-radius: 4px;
            /* Slightly rounded corners */
            height: auto;
            width: 350px;
            position: relative;
            /* Optional: Box shadow for depth */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .modal-item-content {
            padding: 10px 20px 20px !important;
            width: 30% !important;
            max-height: 90vh !important;
            overflow: auto;
        }

        @media (max-width: 768px) {
            .modal-item-content {
                width: 90% !important;
            }
        }

        /* --- Header & Close Button Styling --- */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #dddddd;
            background: #e9e9e9;
            color: #333333;
            font-weight: bold;
            padding: .4em 1em;
            position: relative;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.2em;
            font-weight: normal;
            /* Less bold for the title */
        }

        .close-btn {
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            color: #888;
        }

        /* --- Form Group Styling --- */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-size: 0.9em;
            margin-bottom: 5px;
            font-weight: bold;
            /* 'Name' and 'Enter Comment' bolded */
        }

        input[type="text"],
        textarea {
            width: calc(100% - 20px);
            /* 100% width minus padding */
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
            /* Includes padding and border in the element's total width and height */
            font-size: 1em;
        }

        textarea {
            resize: vertical;
            /* Allow vertical resizing only */
            height: 80px;
        }

        /* --- Star Rating Styling --- */
        .rating-group {
            display: flex;
            flex-direction: column;
            /* Stacked layout for Name and Comment, but stars need special handling */
            margin-bottom: 20px;
        }

        .star-rating {
            display: flex;
            font-size: 2.2em;
            /* Large size for stars */
            line-height: 1;
            color: #ccc;
            /* Unrated stars color */
            margin-bottom: 5px;
        }

        .modal-star {
            cursor: pointer;
            transition: color 0.1s;
            user-select: none;
            /* Prevent selection of the star text */
            margin-right: 2px;
        }

        /* Rated/Hovered state */
        .modal-star.rated {
            color: gold;
            /* Yellow/Gold for selected stars */
        }

        .rating-text {
            font-size: 0.9em;
            font-weight: bold;
            color: #999;
        }

        /* --- Action Buttons Styling (SUBMIT/CANCEL) --- */
        .form-actions {
            display: flex;
            justify-content: flex-start;
            /* Aligns them to the left */
            gap: 10px;
            /* Space between buttons */
            margin-top: 20px;
        }

        .btn {
            padding: 8px 20px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            border-radius: 3px;
            text-transform: uppercase;
        }

        .submit-btn {
            background-color: #d9534f;
            /* Red-ish color from the image */
            color: white;
        }

        .cancel-btn {
            background-color: #333;
            /* Black/Dark color from the image */
            color: white;
        }

        #rating-text {
            color: white;
            font-family: Arial, Helvetica, sans-serif;
            display: inline-block;
            padding: .35em .65em;
            font-size: .75em;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            width: fit-content;
        }

        .rating-group {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
        }

        #review-form {
            padding: 17px;
        }

        /* --- Reused General Modal Styles (Assume you have these from the review modal) --- */
        /*
                                                                            .modal-overlay { ... fixed, background:rgba(0,0,0,0.6), flex centering ... }
                                                                            .modal-content { ... background:#fff, padding, border-radius ... }
                                                                            .close-btn { ... position:absolute, font-size:24px, cursor:pointer ... }
                                                                            */

        /* --- Detail Modal Specific Styles --- */
        .modal-content.item-detail-con {
            max-width: 450px;
            /* Adjust size to fit the image example */
            width: 90%;
            padding: 0;
            /* Remove padding from the content container itself */
            overflow: hidden;
            /* Ensure image and content fit well */
        }


        .modal-header h3 {
            text-align: center;
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }

        .modal-box-header {
            display: flex;
            flex-direction: column;
        }

        /* Close button positioning is handled by .close-btn */

        .modal-body {
            padding: 0 20px 20px 20px;
            /* Padding for the main content area */
        }

        .modal-item-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }


        .detail-img-con {
            margin: 15px auto;
            width: 100%;
            /* Keep the image square and centered */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .detail-img-con img {
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: center;
            display: block;
            /* Optional: If images are strictly square, you can use object-fit */
        }

        .description-text {
            font-size: 1em;
            color: #555;
            margin-bottom: 15px;
        }

        .prices-list {
            margin-top: 10px;
        }

        .prices-list p {
            margin: 5px 0;
            font-size: 1.1em;
            line-height: 1.4;
            font-weight: 500;
        }