@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html{scroll-behavior: smooth;}
html,body{margin:0;font-family: "Roboto", sans-serif;outline:none;background: #ffffff08;}
.padd0{padding:0;}
.mar0{margin:0;}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}
a,a:hover{text-decoration: none;}

header{
    background: #fff;
    padding: 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
    position: relative;
}
header .innerbox{
    display: flex;
    padding: 0;
    align-items: center;
}
header .innerbox .logobox{
    width: 12%;
    padding: 15px;
    border-right: 1px solid #eee;
}

header .innerbox .logobox img{
    width: 100%;
}
header .innerbox .locationbox{
    width: 20%;
}
header .innerbox .locationbox .locationinner{
    padding: 22px;
    padding-top: 20px;
}
header .innerbox .locationbox .locationinner h3{
    font-size: 20px;
    margin: 0;
    font-weight: 900;
    margin-bottom: 5px;
    color: #000;
}
header .innerbox .locationbox .locationinner p{
    margin: 0;
    font-size: 14px;
    color: #181818;
    font-weight: 300;
}
header .innerbox .searchbox{width: 60%; position:relative;}

header .innerbox .searchbox form label{
    display: flex;
    padding: 10px;
    border: 1px solid #d2d1d1;
    border-radius: 7px;
    /* gap: 10px; */
    position: relative;
}
header .innerbox .searchbox form label input{
    width: 100%;
    border: none;
    outline: none;
}
header .innerbox .searchbox form label button{
    position: absolute;
    right: 8px;
    right: 10px;
    border: none;
    background: none;
    top: 9px;
}

header .innerbox .accbox{
    width: 20%;
    text-align: RIGHT;
    padding-right: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
header .innerbox .accbox .lgnbtn{
    border: none;
    background: none;
}
header .innerbox .accbox .lgnbtn svg{fill: #02060c;margin-right: 8px;}
header .innerbox .accbox .cartbutton{
    border: none;
    background: none;
}
header .innerbox .accbox .cartbutton > .icbx{
    position: relative;
    display: inline-block;
    margin-right: 8px;
}
header .innerbox .accbox .cartbutton > .icbx > svg{fill: #fff;
    stroke-width: 2px;
    stroke: #02060c;}
 header .innerbox .accbox .cartbutton > .icbx  .iccount{position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;}

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

.popup-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 320px;
    text-align: center;
    position: relative;
    animation: popupFade 0.3s ease;
}

.popup-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.popup-box h3 {
    margin-bottom: 10px;
    color: #dc3545;
}

.popup-box p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

.popup-box button {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
}

.popup-box button:hover {
    background: #c82333;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

@keyframes popupFade {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


.widget-dishes{
    padding: 30px 0;

    border-bottom: 1px solid #dbdbdb;
}

.widget-dishes .head h3{
    font-size: 20px;
}
 .dish-slider-wrapper {
    position: relative;
    overflow: hidden;
}

.dish-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

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

.dish-slider li {
    list-style: none;
    min-width: 140px;
    flex: 0 0 auto;
    width: 10%;
}

.dish-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s;
}

.dish-slider img:hover {
    transform: scale(1.05);
}

/* Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #00000080;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    width: 40px;
    height: 40px;
}

.slider-btn.prev {
    left: 5px;
}

.slider-btn.next {
    right: 5px;

}

.slider-btn.hide {
    display: none;
}

.widget-home-restaurants{
    padding: 30px 0;
}

.widget-home-restaurants .head h3{font-size: 20px;font-weight: 700;margin-bottom: 20px;}

.widget-home-restaurants .restaurant-card .inner-card a figure img{
    width: 100%;
    border-radius: 10px;
}
.widget-home-restaurants .restaurant-card .inner-card a h4{
    font-size: 20px;
    font-weight: 700;
    color: #000;
}
.widget-home-restaurants .restaurant-card .inner-card a .meta{
    display: flex;
    gap: 10px;
}
.widget-home-restaurants .restaurant-card .inner-card a .meta .distag{
    color: #676767;
}
.widget-home-restaurants .restaurant-card .inner-card a .meta .distime{
    color: #676767;
}
.widget-home-restaurants .restaurant-card .inner-card a .ratebox{
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.widget-home-restaurants .restaurant-card .inner-card a .ratebox .ratestar{
    background: #4CAF50;
    display: inline-block;
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
}
.widget-home-restaurants .restaurant-card .inner-card a .ratebox .ratecount{
    display: inline;
    color: #4f4f4f;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 998;
}

/* Active Overlay */
.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Login Panel */
.login-panel {
    position: fixed;
    top: 0;
    right: -450px; /* hidden */
    width: 450px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    padding: 5%;
    transition: 0.4s ease;
    z-index: 999;
}

/* Active Panel */
.login-panel.active {
    right: 0;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right:  25px;
    font-size: 34px;
    cursor: pointer;
    font-weight: 200;
}
.back-btn {
    position: absolute;
    top: 10px;
    left: 25px;

    cursor: pointer;
display: none;

}
/* Form */

.login-panel .innerboxlogin h3{
    margin: 0;
}
.login-panel .innerboxlogin .crtacc{position: relative;display: block;padding-bottom: 25px;margin-bottom: 15px;}
.login-panel .innerboxlogin .crtacc span{
    color: #ed4a12;
}
.login-panel .innerboxlogin .crtacc::before{content: "";position: absolute;width: 50px;height: 2px;background: #000;bottom: 10px;}

.login-panel .innerboxlogin form label{
    border: 1px solid #c7c7c7;
    padding: 10px 15px;
    margin-bottom: 5px;
}
.login-panel .innerboxlogin form label span{
    font-weight: 400;
}
.login-panel .innerboxlogin form label input{
    outline: none;
    border: none;
    width: 100%;
}
.login-panel .innerboxlogin form button{
    width: 100%;
    padding: 15px;
    border: none;
    background: #ed4a12;
    color: #fff;
}


.widget-cartlist{
    padding: 30px 0;
}

.widget-cartlist .head{
    display: flex;
    border: 1px solid #eee;
    background: #fff;
    padding: 15px;
    border-radius: 9px;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}
.widget-cartlist .head button{
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}
.widget-cartlist .head h3{
    margin: 0;
    font-size: 18px;
}
.widget-cartlist .inneritemlist{
    border: 1px solid #eee;
    background: #fff;
    padding: 15px;
    border-radius: 9px;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.widget-cartlist .inneritemlist .cart-item{
    display: flex;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}


.widget-cartlist .inneritemlist .cart-item .itembx{
    width: 90%;
}
.widget-cartlist .inneritemlist .cart-item .itembx h4{
    display: flex;
    margin: 0;
    gap: 7px;
    font-size: 20px;
    align-items: center;
}
.widget-cartlist .inneritemlist .cart-item .itembx h4 .icon{
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 4px;
}
.widget-cartlist .inneritemlist .cart-item .itembx h4 .veg{
    background: #4CAF50;
}

.widget-cartlist .inneritemlist .cart-item .addons span{position: relative;font-size: 14px;color: #afafaf;display: inline-block;padding-right: 5px;}
.widget-cartlist .inneritemlist .cart-item .addons span::before{content: ",";position: absolute;right: 0;}
.widget-cartlist .inneritemlist .cart-item .addons span:last-child:before{content: "";}
.widget-cartlist .inneritemlist .cart-item .itembx h4 .nonveg{ background: #790c0c;}
.widget-cartlist .inneritemlist .cart-item .itembx h4 .egg{ background: #ebdb03;}
.widget-cartlist .inneritemlist .cart-item .itemqty{
    width: 10%;
    text-align: right;
    display: grid;
    justify-content: end;
}
.widget-cartlist .inneritemlist .cart-item .qtybox{
    border: 1px solid #eee;
    display: flex;
    width: 80px;
    padding: 5px;
    border: 1px solid #208b0e;
    border-radius: 5px;
    justify-content: space-between;
    background: #f5fff3;
}
.widget-cartlist .inneritemlist .cart-item .qtybox button.minusbtn{
    border: none;
    background: none;
    font-size: 15px;
    width: 20px;
    background: #e6f9e3;
    border-radius: 4px;
    color: #4CAF50;
}
.widget-cartlist .inneritemlist .cart-item .qtybox span{
    width: 20px;
    text-align: center;
}
.widget-cartlist .inneritemlist .cart-item .qtybox button.plusbtn{
    border: none;
    background: none;
    width: 20px;
    font-size: 15px;
    width: 20px;
    background: #e6f9e3;
    border-radius: 4px;
    color: #4CAF50;
}
.widget-cartlist .inneritemlist .cart-item p{
    display: block;
    margin: 0;
}
.widget-cartlist .inneritemlist .cart-item:last-child{border:none;}
.widget-cartlist .inneritemlist .addmoreitems{
    margin-top: 15px;
    border: none;
    background: none;
    font-weight: 500;
    color: #F44336;
    margin-bottom: 8px;
}
.widget-cartlist .inneritemlist ul{
    padding: 0;
    list-style: none;
    margin: 0;
    /* list-style: none; */
    display: flex;
    gap: 10px;
    align-items: center;
}

.widget-cartlist .inneritemlist ul li a{
    border: 1px solid #bbbbbb;
    color: #8c8c8c;
    padding: 5px 10px;
    display: block;
    font-size: 14px;
    border-radius: 5px;
    background: #eee;
}




.widget-cartlist .emptycart .innerbox h3{
    font-size: 40px;
    font-weight: 700;
}

.widget-cartlist .emptycart .innerbox a{
    display: inline-block;
    background: #d52106;
    padding: 15px 30px;
    border-radius: 6px;
    color: #fff;
}


#cartPopup{position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background: #1c1c1c;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    z-index: 9999;
}


#cartPopup .popupcartinner button:first-child{  background: #e23744;
            color: #fff;
            border: none;
            padding: 8px 15px;
            margin-right: 10px;
            cursor: pointer;}
     #cartPopup .popupcartinner button   { background: transparent;
            color: #fff;
            border: 1px solid #fff;
            padding: 8px 15px;
            cursor: pointer;
        }

#itemmodalOverlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 999;
}


.itemmodal .modal-content{
    display: block;
    bottom: 0;
    position: absolute;
    padding: 15px;
    border-radius: 0;
    border: none;
    background: #000;
}
.itemmodal .modal-content .closeitemmodal{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    display: inline-block;
    width: 50px;
    height: 50px;
    bottom: 100%;
    border: none;
    background: #000;
    color: #fff;
}
.itemmodal .modal-content #itemName{
    border-bottom: 1px solid #232323;
    font-size: 18px;
    /* background: #eee; */
    padding: 15px;
    border-radius: 3px;
    color: #fff;
}

.itemmodal .modal-content #cartForm .modalitems{
    background: #202020;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
}
.itemmodal .modal-content #cartForm .modalitems h4{
    margin: 0;
    font-size: 14px;
    padding: 5px 10px;
    color: #fff;
    /* border-bottom: 1px solid #282828; */
    background: #00000052;
    border-radius: 3px;
}
.itemmodal .modal-content #cartForm .modalitems label{
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: 7px 5px;
}
.itemmodal .modal-content #cartForm .totalhead{
    text-align: RIGHT;
    color: #fff;
    padding: 10px;
    font-size: 20px;
}
.itemmodal .modal-content #cartForm .itemodaladd{
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: none;
    background: #4CAF50;
    color: #fff;
}
.variant-error-popup {
    position: fixed;
    bottom: 80px; /* above button */
    left: 50%;
    transform: translateX(-50%) translateY(20px);

    background: #e23744;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
    z-index: 9999;
}

/* 🔥 SHOW STATE */
.variant-error-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

footer .innerbox > ul{
    padding: 0;
    list-style: none;
    display: flex;
}
footer .innerbox > ul > li{
    width: 25%;
}

footer .innerbox > ul > li.footlogo a img{
    width: 160px;
}

footer .innerbox > ul > li.quicklinks h3{font-size: 20px;font-weight: 600;color: #000;}
footer .innerbox > ul > li.quicklinks > ul{
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}

footer .innerbox > ul > li.quicklinks > ul > li > a{
    color: #676767;
    display: inline-block;
    padding: 4px 0px;
}

.minusbtn, .plusbtn {
    position: relative;
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
}

/* 🔥 loading state */
.minusbtn.loading,
.plusbtn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.minusbtn.loading::after,
.plusbtn.loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #333;
    border-top: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.addressoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 998;
}

/* Active Overlay */
.addressoverlay.active {
    opacity: 1;
    visibility: visible;
}
.cart-login-box{
    padding: 10px 0;
    /* border-top: 1px solid #eee; */
}
.cart-login-box button{
    border: 2px solid #F44336;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background: #ffffff;
    color: #F44336;
    font-weight: 500;
}
.addresslistpopup,
.addnewaddres {
    position: fixed;
    right: -100%; /* hidden from right */
    top: 0;
    width: 400px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    transition: 0.3s ease;
    padding: 2%;
}

.addresslistpopup.active,
.addnewaddres.active {
    right: 0;
}
.addresslistpopup .closeaddresslist{
    position: absolute;
    right: 100%;
    top: 0;
    padding: 6px;
    width: 40px;
    height: 40px;
    border: none;
    background: #000;
    color: #fff;
}
.addresslistpopup .opennewaddress{
    display: flex;
    border: 2px solid #F44336;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background: #ffffff;
    color: #F44336;
    font-weight: 500;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
}
.addresslistpopup .headsaved{
    display: block;
    font-size: 14px;
    color: #7f7f7f;
    margin-bottom: 12px;
}
.addresslistpopup ul{
    padding: 0;
    list-style: none;
}

.addresslistpopup ul li .innerbox{
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 10px;
}
.addresslistpopup ul li .innerbox.active{border: 2px solid red;}
.addresslistpopup ul li .innerbox .subhead{
    font-size: 14px;
    font-weight: 600;
    color: #f44336;
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: block;
}
.addresslistpopup ul li .innerbox h4{
    font-size: 13px;
    font-weight: 800;
}
.addresslistpopup ul li .innerbox p{
    font-size: 14px;
    margin: 0;
}

.addnewaddres{
    overflow: auto;
}
.addnewaddres h3{font-size: 16px;display: flex;gap: 10px;align-items: center;}
.addnewaddres h3 button{
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
}

#map {
    height: 200px;
    position: relative;

}

.map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 35px;
    height: 35px;
    background: url('https://maps.google.com/mapfiles/ms/icons/red-dot.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
}
.addressmapbox{
    position: relative;
    margin-bottom: 20px;
}
.addressmapbox .getcurrentlocation{
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    width: 180px;
    margin: 0 auto;
    padding: 7px;
    border-radius: 30px;
    background: #000000c4;
    color: #ff2121;
    border: none;
    font-size: 14px;
    font-weight: 500;
}


#mapaddressform .lbltag{
    display: block;
    width: 100%;
    margin-bottom: 15px;
    border: 2px solid #eee;
    position: relative;
    border-radius: 6px;
}
#mapaddressform .lbltag span.lblspan{display: block;font-size: 13px;color: #6b6b6b;position: absolute;top: -10px;left: 8px;background: #ffff;padding: 0 7px;}
#mapaddressform .lbltag input{
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
}
#mapaddressform .lbltag .sublbl{
    position: absolute;
    left: 0;
    bottom: -18px;
    font-size: 10px;
    padding: 0px 0;
}
#mapaddressform h4{
    font-size: 14px;
    margin-bottom: 14px;
    font-weight: 600;
}
#mapaddressform ul{
    padding: 0;
    list-style: none;
    display: flex;
    gap: 10px;
}

#mapaddressform ul li label{
    padding: 5px 10px;
    border: 2px solid #dfdfdf;
    position: relative;
    border-radius: 3px;
    font-size: 14px;
    color: #7b7b7b;
}
#mapaddressform ul li label.active{
    border: 2px solid #F44336;
    color: #F44336;
}
#mapaddressform ul li label input{
    position: absolute;
    opacity: 0;
}
#mapaddressform button{
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: none;
    background: #F44336;
    color: #fff;
}


.widget-cartlist .deliveryaddress{
    padding: 14px;
    border: 1px solid #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.widget-cartlist .deliveryaddress span{
    font-weight: 800;
}
.widget-cartlist .deliveryaddress p{
    margin: 0;
    margin-bottom: 5px;
}
.widget-cartlist .deliveryaddress button{
    border: none;
    background: none;
    padding: 0;
    font-weight: 700;
    color: #F44336;
}
.widget-cartlist .contactdelivery{
    padding: 14px;
    border: 1px solid #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.widget-cartlist .contactdelivery span{
    display: flex;
    gap: 10px;

    align-items: center;
}

.placeorder{
    width: 100%;
    padding: 15px;
    background: #F44336;
    border: none;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 15px rgb(219 60 48 / 57%);
}



.order-success-page{padding:50px 0;text-align:center;font-family:sans-serif;}
.success-box{max-width:500px;margin:0 auto;background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.success-box h2{color:green;margin-bottom:10px;}
.delivery-info, .order-summary, .order-estimate{margin:20px 0;text-align:left;}
.order-summary ul{list-style:none;padding:0;margin:0;}
.order-summary ul li{display:flex;justify-content:space-between;margin-bottom:10px;}
.total-row{display:flex;justify-content:space-between;font-weight:bold;margin-top:5px;}
.total-pay{font-size:18px;}
.track-order-btn .btn{display:inline-block;padding:10px 20px;background:#ff5a00;color:#fff;border-radius:5px;text-decoration:none;margin-top:20px;}
.back-to-home{margin-top:20px;}