/* Basic Reset and Global Styles */
body {
              font-family: "Barlow","Rubik", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff5e5;
    color: #333;
	
}

* {
	 font-family: "Barlow","Rubik", sans-serif;
}

/* --- Header Styling (Desktop/Tablet) --- */
.header {
            display: flex;
    align-items: center;
    padding: 0px 30px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
   
    min-height: 65px;
    z-index: 22;
}


.language-wrapper {
          padding: 15px;
    border-radius: 4px;
    background: #00000014;
    position: relative;
}

body.dark-mode .language-wrapper {
	 background: #4c4c4c;
}

.language-wrapper:hover .lang-buttons{display: flex;}
 
.language-wrapper i {
    font-size:18px;
    
}

.lang-buttons {     display: none;
    flex-direction: column;
    position: absolute;
    top: 43px;
    width: 100px;
    right: 0;
    z-index: 33;
    padding: 20px;
    background: #9d9d9d00;}

.lang-buttons button {
        padding: 5px 8px;
    border: none;
    border-radius: 0px;
    background: #f2f2f2;
    cursor: pointer;
    font-size: 12px;

}


.lang-buttons button:hover {
    background:#ddd;
}



.logo {
          font-size: 24px;
    font-weight: 700;
    color: #8b0101;
    margin: 0px 10px;
    white-space: nowrap;
}

.logo img {      max-width: 200px;
    max-height: 65px;
    border-radius: 10px;}

.subtitle {
    font-size: 14px;
    color: #888;
    margin-right: auto;
    white-space: nowrap;
}

.header-icons {
          display: flex;
    gap: 15px;
    width: auto;
    align-items: anchor-center;
    justify-content: end;
}

@media screen and (max-width:700px ){
	.header-icons {
         display: flex;
    gap: 15px;
    width: -webkit-fill-available;
    align-items: anchor-center;
    justify-content: end;
    flex-wrap: wrap;
}
}

.header-icons a img {
         width: 30px;
    height: 30px;
    object-fit: contain;
    text-align: center;
    border-radius: 4px;
    
}

.review-btn, .menu-btn, .cart-btn {
          padding: 15px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
}

.review-btn {
     
}

.menu-btn {
    background: none;
    border: 1px solid #ccc;
    font-size: 18px;
    line-height: 1;
}

.cart-btn {
        position: relative;
    font-size: 18px;
    padding-right: 15px;
}

.cart-btn span {
       position: absolute;
    top: -10px;
    right: -5px;
    background-color: #000000;
    color: white;
    font-size: 12px;
    padding: 5px 6px;
    border-radius: 50%;
}



/* ==================================== */
/* 🖼️ Carousel Slider Styling */
/* ==================================== */

.carousel-container {
           position: relative;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    background-color: #eee;
    margin: 10px auto;
    border-radius: 10px;
    height: 350px;
}

.carousel-track-container {
       height: 100%;
    position: relative;
    overflow: hidden;
}

.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Smooth transition for slides */
}

.carousel-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: none; /* Hidden by default, JS handles visibility */
}

.carousel-slide.current-slide {
    display: block;
}

.carousel-slide img {
        width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

/* Carousel Buttons */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    transition: background 0.3s;
}

.carousel-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-button.prev {
    left: 10px;
    border-radius: 0 5px 5px 0;
}

.carousel-button.next {
    right: 10px;
    border-radius: 5px 0 0 5px;
}

/* Carousel Navigation Indicators (Dots) */
.carousel-nav {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 10;
}

.carousel-indicator {
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s;
}

.carousel-indicator.current-slide-indicator {
    background-color: #ff4500; /* Accent color for active dot */
    transform: scale(1.2);
}

/* Responsive adjustments for Carousel */
@media (max-width: 768px) {
   .carousel-container {
    
    height: 200px;
}
    .slide-caption {
        font-size: 1rem;
        bottom: 10px;
        padding: 8px 15px;
    }
	

}


/* --- Search and Nav Styling --- */
.main-controls {
          padding: 0px 30px 0;
    border-bottom: 1px solid #eee;
    max-width: 800px;
    margin: 10px auto;
}

.search-bar {
                display: flex;
    border: 2px dashed #c40909;
    border-radius: 8px;
    overflow: hidden;
    width: -webkit-fill-available;
    max-width: 800px;
    padding: 5px;
    margin: 7px auto;
    margin-top: 30px;
}

.search-bar input {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    outline: none;
}

.search-bar button {
        background-color: #ff1010;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #ffffff;
    border-radius: 51px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: anchor-center;
    justify-content: center;
}




/* Existing .category-nav styles (keep these) */
.category-nav {
                display: flex;
    overflow-x: hidden;
    white-space: nowrap;
    flex-direction: column;
    gap: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: -webkit-fill-available;
    margin: 10px auto;
    max-width: 100%;
    align-items: normal;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    z-index: 22;
    height: 97vh;
    overflow-y: auto;
    background: #80808026;
    padding: 10px;
}
.category-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


.category-nav a {
                text-decoration: none;
    font-weight: 600;
    transition: color 0.3s, border-bottom 0.3s;
    font-size: 15px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: anchor-center;
    justify-content: flex-start;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 4px;
    padding: 10px;
    color: unset;
}

.category-nav a img {
              width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 19px;
    transition: filter 0.3s;
    border-radius: 100px;
}

.category-nav a p {
       margin: 0;
    font-size: 12px;
    white-space: break-spaces;
    text-align: center;
}

.hover:hover {
    transform: translateY(0px);
	transition:transform 0.2s	;
	
}
.hover:hover {
    transform: translateY(-4px);
		transition:transform 0.2s;
	
}


.category-nav a.active {
    color: #333;
    border-bottom: 3px solid #ff4500; /* Orange highlight for active category */
}

.category-nav a.active img {
    filter: grayscale(0%) brightness(1); /* Full color for active icon */
}

/* Hover effect for non-active items */


/* Existing .nav-divider styles (keep these) */
.nav-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin-top: 10px;
    margin-left: -30px;
    margin-right: -30px;
}



/* --- Menu Section Styling --- */
.menu-section {
          padding: 20px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Veg Toggle Switch Styles */
.veg-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}



.veg-label {
    font-size: 16px;
    color: #555;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4CAF50; /* Green when checked */
}

input:checked + .slider:before {
    transform: translateX(16px);
}

.menu-category-title {
	       margin: 10px 20px;
    display: block;
    font-size: 22px;
}
/* --- Menu Grid Styling --- */
.menu-grid {
    display: grid;
    gap: 20px;
}



.menu-search {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    
}

.veg-label {
    font-weight: 600;
    opacity: 0.4;
}

.veg-active {
    opacity: 1;
    color: green;
}


.nonveg-active {    opacity: 1;
    color: inherit !important;}
	
.category_active {
    border-bottom: 2px solid #ff5722;
}

.menu-item {
       display: none;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 10px 0px;
    transition: transform 0.2s;
}

.menu-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}



/* =========================
   IMAGE FULL PREVIEW
========================= */

.menu-item {
    position: relative;
}





/* ===== GRID SMOOTH SHIFT ===== */
.menu-grid {
    transition: all 0.25s ease;
}


.item-img-container {
    width: 35%; 
    min-width: 120px;
    overflow: hidden;
}

.item-img-container img {
          width: 100px;
    height: 100px;
    max-height: 150px;
    border-radius: 200px;
    object-fit: cover;
    margin: 10px;
}

.item-details {
    padding: 10px 15px;
    flex-grow: 1;
   
    display: flex;
    flex-direction: column;
}

.item-indicator {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid;
}

.veg-dot {
    background-color: #4CAF50; /* Green */
    border-color: #4CAF50;
}

.non-veg-dot {
    background-color: #ff4500; /* Red-Orange */
    border-color: #ff4500;
}

.nonveg-dot {      width: 0px;
    height: 0px;
    background: #ffffff00;
    border-radius: 0px;
    border: 9px solid transparent;
    border-bottom: 12px solid #ff0000;
    top: 0;}

.item-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px;
}

.item-desc {
    font-size: 13px;
    color: #777;
    margin: 0 0 10px;
    /* Limit description to two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.support-modal {
       position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 14;
    display: none;
    overflow-y: auto;
    transition: transform 0.3s ease-out;
}

.support-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}


body.dark-mode .support-header {
	    background: black;
}

body.dark-mode .footer-content {
	color: white;
}

body.dark-mode .contact-info p, body.dark-mode .contact-info a {
	color:white;
}

.close-support {
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}



.item-footer {
       display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 5px;
    align-items: end;
}

.price_box {
       display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-direction: row;
    width: -webkit-fill-available;
    flex-wrap: wrap;
}

/* MRP (Old Price) */
.price_box .item-mrp {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}

/* Selling Price */
.price_box .item-price {
           font-size: 18px;
    font-weight: 700;
    margin-bottom: 11px;
   
}

/* Currency spacing fix */
.price_box span {
    white-space: nowrap;
}


.item-discount {
	       font-weight: 600;
    
    font-size: 12px !important;
}


/* Mobile tweak */
@media (max-width: 480px) {
	
	


    .price_box {
            gap: 6px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    }

    .price_box .item-price {
        font-size: 15px;
    }
}



.footer_img  {    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
    object-position: center;}


/* --- ADD TO ORDER BUTTON (GREEN) --- */

.add_to_cart, .add-to-order-btn {
    width: 100%;
    padding: 8px 12px;
    background: #ff6b00;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
	width: -webkit-fill-available;
    text-align: center;
	padding: 11px 16px;
        font-size: 12px;
    
}

.add-to-order-btn:hover {
    background: #e65f00;
}


.custom-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.custom-confirm-box {
           background: #f1f1f1;
    color: #121212;
    padding: 25px 30px;
    border-radius: 10px;
    width: 300px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border: 1px solid;
}

.custom-confirm-box p {
    font-size: 16px;
    margin-bottom: 20px;
}

.confirm-buttons button {
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    margin: 0 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.confirm-buttons .btn-yes {
    background-color: #16a34a; /* green */
    color: #fff;
}

.confirm-buttons .btn-yes:hover {
    background-color: #15803d;
}

.confirm-buttons .btn-no {
    background-color: #ef4444; /* red */
    color: #fff;
}

.confirm-buttons .btn-no:hover {
    background-color: #dc2626;
}




/* Footer Styling */
footer {
       text-align: center;
    padding: 15px;
    font-size: 12px;
    color: #b8b8b8;
    background-color: #000000;
    border-top: 0px solid #eee;
}

/* ==================================== */
/* 📱 Responsive Adjustments */
/* ==================================== */

/* --- Tablet View (Max 1024px) --- */
@media (max-width: 1024px) {
    .menu-grid {
        gap: 15px; /* Slightly tighter gap */
    }
    
    .item-img-container {
        width: 40%; 
    }
}

/* --- Mobile View (Max 768px) --- */
@media (max-width: 768px) {
    .header {
            padding: 0px 15px;
    flex-wrap: nowrap;
    }
    
    /* Adjust header elements */
    .subtitle {
        display: none; /* Hide subtitle on small screens */
    }
    
    .header-icons {
        gap: 8px;
    }

    .header-icons a img {
            width: 24px;
    height: 23px;
    }
	
	.menu-category-title {
    margin: 10px 10px;
    display: block;
    font-size: 18px;
}

    
    
    .main-controls, .menu-section {
               padding: 0px 5px;
    }

    /* Full-width single column menu grid */
    .menu-grid {
       
            gap: 5px;
    }

    /* Item Card Layout on Mobile */
    .menu-item {
        flex-direction: row; /* Ensure row layout */
        min-height: 120px;
    }

    .item-img-container {
            min-width: 80px;
    width: -webkit-fill-available;
    height: 100px;
    border-radius: 4px;
    }
	
	.item-img-container img {
       width: 100%;
    height: 100%;
    border-radius: 00px;
    object-fit: cover;
    
    margin: 0 auto;
    display: block;
}
    
    .item-details {
            padding: 10px 10px 10px 15px;
    align-items: flex-start;
    }
    
    .item-name {
        font-size: 12px;
    }
    
	
	.qty_crt_btn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
    justify-content: center;
}


    .item-desc {
        font-size: 12px;
        -webkit-line-clamp: 1; /* Shorter description on mobile */
    }
    
    
    
    .add-to-order-btn {
           padding: 11px 16px;
    font-size: 12px;
    }

    .section-header h2 {
        font-size: 24px;
    }
    
    .veg-label {
        font-size: 14px;
    }
	
	
}



/* 💻 PC / Desktop → 3 columns */
@media (min-width: 1224px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 📱 Tablet → 2 columns */
@media (min-width: 768px) and (max-width: 1224px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 📱 Mobile → 1 column */
@media (max-width: 767px) {
    .menu-grid {
       grid-template-columns: repeat(2, 1fr);
    }
	
	.item-footer {
        flex-direction: column;
    align-items: center;
    width: -webkit-fill-available;
}


}


/* Responsive adjustments for category nav images */
@media (max-width: 768px) {
	
	.category-link  i {
        font-size: 50px !important;
    width: 70px !important;
    height: 70px !important;
    margin: 0px 0px 5px !important;
  
}
    .category-nav {
                    gap: 7px;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: left;
    padding: 0px;
    top: 67px;
    }
    .category-nav a {
           padding: 8px 3px;
    width: 80px;
    }
    .category-nav a img {
                width: 60px;
    height: 60px;
    margin: 2px 0px 10px;
    }
    .category-nav a p {
        font-size: 12px; /* Smaller text on mobile */
    }
	
	.search-bar {
           
        position: sticky;
    top: 2px;
    z-index: 12;
    background: #ffffff;
    margin: 5px;
}


}

/* ==================================== */
/* 🦶 Detailed Footer Styling */
/* ==================================== */

.detailed-footer {
    
    color: #fff;
    position:relative;
}

.footer-content {
          display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: black;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
   
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-info p {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1rem;
    color: #555;
}

.contact-label {
    width: 35px;
    height: 35px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    color: #28a745;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.contact-info a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
}

.contact-info a:hover {
    color: #28a745;
}



/* Social Icons */
.social-links {
       margin-top: 20px;
    display: flex;
    gap: 15px;
    max-width: 400px;
    flex-wrap: wrap;
}

.social-links img {
        width: 40px;
    height: 40px;
    border-radius: 40px;
    
    
   
}

.social-links a:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* Contact Form */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group {
    width: 100%;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form textarea {
       width: 100%;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #ffffff;
    color: black;
    font-size: 14px;
    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaa;
}

.submit-btn {
    background-color: #ff4500; /* Use an accent color for the button */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #cc3700;
}

/* Visually hidden accessibility class */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Responsive Adjustments for Footer --- */
@media (max-width: 768px) {
    .detailed-footer {
        padding: 30px 15px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .footer-column {
        min-width: 100%;
    }
}

/* --- Global Header Button Style (Add this to your existing styles) --- */
.icon-btn {
       font-size: 20px;
    background: #8080803d;
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #c9c9c9;
}



/* ==================================== */
/* 📢 Special Offer Marquee Banner Styling */
/* ==================================== */

.special-offer-banner {
    /* Assuming you wrap the whole element in a class for styling */
       padding: 8px 15px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.special-offer-banner span {
          flex-shrink: 0;
    margin-right: 10px;
    background: #ff410e;
    white-space: nowrap;
    color: white;
    padding: 10px;
    border-radius: 0px  25px   25px 0px;
}

.special-offer-banner marquee {
    /* Styles for the scrolling text */
    flex-grow: 1;
    line-height: 1.2;
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .special-offer-banner {
        padding: 6px 10px;
        font-size: 14px;
    }
}
/* ==================================== */
/* 🌙 Dark Theme Styles */
/* ==================================== */

body.dark-mode {
    background:  #121212 !important; /* Very dark background */
    color: #f0f0f0;
}

/* Header */
body.dark-mode .header {
    background-color: #1e1e1e;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}
body.dark-mode .subtitle {
    color: #bbb;
}
body.dark-mode .menu-btn {
    border-color: #555;
    color: #f0f0f0;
}
body.dark-mode .review-btn {
       background-color: #4c4c4c;
    color: #f0f0f0;
}

/* Main Controls/Search/Nav */
body.dark-mode .main-controls {
    background-color: #1e1e1e;
}
body.dark-mode .search-bar {
           border: 2px solid;
    background: #363636;
}
body.dark-mode .search-bar input {
    background-color: #1e1e1e;
    color: #f0f0f0;
}

body.dark-mode .category-nav a {
       color: white;
    background: black;
}
body.dark-mode .category-nav a.active {
    color: #f0f0f0;
}
body.dark-mode .nav-divider {
    border-color: #333;
}
body.dark-mode .section-header h2 {
    color: #f0f0f0;
}
body.dark-mode .veg-label {
        color: #09c709;
}

/* Menu Items */
body.dark-mode .menu-item {
        background: linear-gradient(45deg, #29182c, #323131);
}
body.dark-mode .item-name {
    color: #f0f0f0;
}
body.dark-mode .item-desc {
    color: #aaa;
}


/* Detailed Footer */
body.dark-mode .detailed-footer {
    background-color: #1e1e1e;
}
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
    background-color: #2b2b2b;
    border-color: #555;
    color: #f0f0f0;
}
body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder {
    color: #888;
}

/* Simple Footer */
body.dark-mode footer {
    background-color: #1e1e1e;
    border-top-color: #333;
}/* Simple Footer */



.cart-coupon {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.cart-coupon input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.cart-coupon button {
    padding: 8px 12px;
    background-color: #16a34a;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cart-coupon button:hover {
    background-color: #15803d;
}

.no-products-box{
    text-align:center;
    padding:30px 15px;
    color:#666;
}
.no-products-box button{
    margin-top:10px;
    padding:8px 16px;
    border:none;
    background:#222;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
}

/* Container for the buttons */
.contact-form-data {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
    gap: 12px;       /* Spacing between buttons */
    margin-top: 15px;
}

/* Base style for the button links */
.contact-form-data a {
    text-decoration: none; /* Removes underline */
    flex: 1;               /* Makes buttons grow to fill space evenly */
    min-width: 120px;      /* Prevents buttons from getting too small */
}

/* Container Layout */
.contact-form-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px;
}

/* Base Button Style */
.link_btn {
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #ffffff; /* White text for all colored buttons */
    border: none;
}

.link_btn i {
    margin-right: 8px;
    font-size: 1.1em;
}

.link_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    filter: brightness(1.1);
    color: #fff;
}

/* Brand Specific Colors */
.btn-phone    { background: linear-gradient(135deg, #007bff, #0056b3); } /* Blue */
.btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); } /* Green */
.btn-mail     { background: linear-gradient(135deg, #ea4335, #c5221f); } /* Gmail Red */
.btn-web      { background: linear-gradient(135deg, #6f42c1, #59359a); } /* Purple */
.btn-map      { background: linear-gradient(135deg, #34a853, #188038); } /* Google Maps Green */
.btn-google   { background: linear-gradient(135deg, #4285f4, #357ae8); } /* Google Blue */

.contact-info {}


/* Container styling */
.item-footer-multiple-payment {
    max-width: 100%;
    margin-top: 15px;
   
}

/* Individual Row - Card Style */
.option-price-row {
           border: 0px solid #f0f0f0;
    border-radius: 12px;
    padding: 2px 0px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    width: -webkit-fill-available;
    align-items: baseline;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}


@media screen and (max-width:700px){
	.option-price-row {
    
    justify-content: right;
}
}
.option-price-row:hover {
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Size and Price Branding */
.options {
        font-weight: 600;
    font-size: 12px;
    
    flex: 1;
}

.all_prices {
        font-weight: 700;
    font-size: 12px;
    margin-right: 15px;
}

/* Controls Group */
.qty_crt_btn2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Modern Quantity Pill */
 .qty-wrapper {
    display: flex;
    align-items: center;
    background: #f1f2f6;
    border-radius: 50px; /* Pill shape */
    padding: 2px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #2d3436;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

 .qty-btn:hover {
    background: #dfe4ea;
}

 .qty-input {
    width: 30px;
    background: transparent;
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    outline: none;
}

/* Add Button Styling */
 .add-to-order-btn {
          background: #2d3436;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    width: auto;
	
}

.add-to-order-btn:hover {
    background: #000;
}

.add-to-order-btn:active {
    transform: scale(0.96);
}

.display-none {display:none;}

.multi_price {}