/*
----------------------------------------------------
* Template Name    : Digital Feriwala        *
* Author           : Kutetheme                     *
* Version          : 1.0.0                         *
* Created          : August 2019                   *
* File Description : Main CSS file of the template *
*---------------------------------------------------
/************************
* Global Settings       *
*************************/
.text-green{
    color: #05a503
}
/*********************
* Form errors       *
**********************/
.success {
    background: url(../images/success-icon.png) no-repeat scroll 5px 5px #eaf7d9;
    border: 1px solid #6d9d03;
    border-radius: 5px;
    color: #425c05;
    display: block;
    font-size: 12px;
    margin: 7px 0;
    padding: 15px 15px 23px 1px;
    font-weight: bold;
    text-align: center;
}
.error {
    background: url(../images/error_icon.png) no-repeat scroll 5px 5px #ffd1d1;
    border: 1px solid #de7a7b;
    border-radius: 5px;
    color: #c00;
    display: block;
    font-size: 12px;
    margin: 10px 0;
   	padding: 15px 15px 23px 1px;
	font-weight: bold;
	text-align: center;
}
/*.watercontent {
    position: absolute;
    bottom: 0;
    background: rgb(255 0 0 / 83%);
    color: #ffffff;
    width: 94%;
    padding: 8px;
    z-index: 111;
    margin-bottom: 50%;
    transform: rotate(-35deg);
}
.watercontent h3{
    font-size: 12px;
    font-weight: bold;    
    margin: 1px;
}*/
.biolife-service__type01 .txt-show-01 {
    font-size: 65px;
}
.destoryhtml .btn
{
    border: none;
    font-size: 18px;
    text-transform: uppercase;
    /*color: #4caf50;*/
    text-align: center;
    clear: both;
    border-radius: 9999px;
    /*background-color: #c6c6c6;*/
    padding: 13px 15px 12px;
    font-weight: 700;
    width: 35%;
    margin-top: 9px;
    margin-left: 33%;
}
.destoryhtml{
    clear:both;
    text-align: center;
}
.mblinf{
    display:none;
}
li.product-item.col-lg-3.col-md-3.col-sm-4.col-xs-6 .info .price{
    min-height: 25px;
}
.header-top .right .nice-select{
    margin-right: 19 px;
}
.header-area.layout-01 .header-top .right .horizontal-menu>li {
    margin-left: 11px;
}
@media ( min-width: 992px) {
    .food-card {
        min-height: 545px;
    }
}
@media ( min-width: 991px) {
    .hidedkt{
        display: none !important;
    }
}
@media ( max-width: 991px) {
    .mblinf{
        display:block;
        text-align: center;
        line-height: 8px;
    }
    .header-area.layout-03 .header-bottom .logo-for-mobile {
        display: inline-block;
        float: left;
        margin-top: 5px;
    }
    .header-top .right .horizontal-menu>li {
        min-width: 113px;
    }
    .header-top .right .nice-select{
        margin-right: 7 px;
    }
}
.errorMsg p, .successMsg p {padding-bottom:4px !important;}
#mylocation {
    left: 0;
    right:0;
    top: 50%; 
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 120px;
  font-size: 17px;
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 120px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 120px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 120px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 120px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
footer#footer {
    border-top: 2px solid #8d4a4a;
}
.word {
    color: black;
}
/*----------- Custom css Start---------*/
/*---------For text efftect------------*/
#movetext {
    animation: animate 5s ease-out forwards;
    /*animation: animate 3s ease-out forwards infinite;*/
}
@keyframes animate {
    0% {
        letter-spacing: 8px;
    }
    100% {
        letter-spacing: 1px;
    }
}
.movingrest {
    /*animation-delay: 0.1s;*/
    animation: gradient 5.4s ease-in-out;
}
@keyframes gradient{
  0%{
    letter-spacing: 0px;
    text-indent: 0px;
  }
10%{
    letter-spacing: 4px;
    text-indent: 4px;
  }
  30%{
    letter-spacing: 6px;
    text-indent: 6px;    
  }
  70%{
    letter-spacing: 4px;
    text-indent: 4px;    
  }
  100%{
    letter-spacing: 0px;
    text-indent: 0px;    
  }
}
/*-------------Food court effect in homepage-----------------*/
a.efcttxt {
  /*font-weight: 700;
  text-align: center;
  font-size: 40px;
  letter-spacing: 5px;
  background-size: 90%;
  */
  font-family: Hack, sans-serif;
  text-transform: uppercase;
  background: linear-gradient(120deg, #f31d1d, #e9dada, #a71a1a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #ebdbdb;
  background-repeat: no-repeat;
  animation: shine 7s linear infinite;
  position: relative;
}
@keyframes shine {
  0% {
    background-position-x: -500%;
  }
50% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 500%;
  }
}
/*---------------flote pngimage home page---------------*/
/*@keyframes float1 {
    0% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(-15px);
    }
    50% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
    100% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(-15px);
    }
}
@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.5);
        transform: translatey(-15px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
}
*/
.product-thumb {
    padding-bottom: 5px;
}
/*------------Effect in add to cart button---------*/
.add-to-cart-btn.add_to_cart_button {
    /*background-image: linear-gradient(249deg, #2dd124 0%, #074103 51%, #05a503 100%);
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background: linear-gradient(45deg, #f1eaea, #4ecdc4, #36e34c, #4ecdc4);
    color: #000000;*/
    background: linear-gradient(135deg, #2563eb, #3b82f6);;
    animation: gradientShift 3s ease infinite;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    background-size: 300% 300%;
    border: none;
    border-radius: 12px;
    font-weight: bold;
}
.add-to-cart-btn ,.add-to-cart-btn.unav{
    background-image: linear-gradient(249deg, #e52709 0%, #8f190c 51%, #f90427 100%);
    /*margin: 4px 0;
    padding: 15px 45px;*/
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #837b7b;
    border-radius: 10px;
    display: inline-block;
}
.add-to-cart-btn:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
/*------------Shadow effect in load more button---------*/
/*.loadmr  {
    background-image: linear-gradient(180deg, #871900 0%, #29c9c4 51%, #871900 100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
    animation: text-shadow3 3s ease-in-out infinite;
}
.loadmr :hover {
    background-position: right center; 
    color: #fff;
    text-decoration: none;
}*/
@keyframes text-shadow3 {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #090909, 
            0 0 0 #c1e8e8, 
            0 0 0 #945e65, 
            0 0 0 #05a503;
    }
    20% {  
        transform: translateY(-1em);
        text-shadow: 
            0 0.125em 0 #090909, 
            0 0.25em 0 #c1e8e8, 
            0 -0.125em 0 #945e65, 
            0 -0.25em 0 #05a503;
    }
    40% {  
        transform: translateY(0.5em);
        text-shadow: 
            0 -0.0625em 0 #090909, 
            0 -0.125em 0 #c1e8e8, 
            0 0.0625em 0 #945e65, 
            0 0.125em 0 #05a503;
    }
   60% {
        transform: translateY(-0.25em);
        text-shadow: 
            0 0.03125em 0 #090909, 
            0 0.0625em 0 #c1e8e8, 
            0 -0.03125em 0 #945e65, 
            0 -0.0625em 0 #05a503;
    }
    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #090909, 
            0 0 0 #c1e8e8, 
            0 0 0 #945e65, 
            0 0 0 #05a503;
    }
}    
/*------------USe fro Loading---------*/
.loading {
  font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
  text-transform:uppercase;
  width:150px;
  text-align:center;
  line-height:50px;
  position:absolute;
  left:0;right:0;top:50%;
  margin:auto;
  transform:translateY(-50%);
}
.loading span {
  position:relative;
  z-index:999;
  color:#fff;
}
.loading:before {
  content:'';
  background:#61bdb6;
  width:128px;
  height:36px;
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  animation:2s loadingBefore infinite ease-in-out;
}
@keyframes loadingBefore {
  0%   {transform:translateX(-14px);}
  50%  {transform:translateX(14px);}
  100% {transform:translateX(-14px);}
}
.loading:after {
  content:'';
  background:#ff3600;
  width:14px;
  height:60px;
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  opacity:.5;
  animation:2s loadingAfter infinite ease-in-out;
}
@keyframes loadingAfter {
  0%   {transform:translateX(-50px);}
  50%  {transform:translateX(50px);}
  100% {transform:translateX(-50px);}
}
/*----------resturent title effect--------*/
.niontext {
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: fadeInRotate 1s linear 1s backwards;
  -moz-animation: fadeInRotate 1s linear 1s backwards;
  -ms-animation: fadeInRotate 1s linear 1s backwards;
  animation: fadeInRotate 1s linear 1s backwards;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
      font-size: 23px;
}
@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}
.excerpt , .welcome-us-block .container{
    width: 100%;
    animation: reveal 5s;
}
@keyframes reveal {
    0% {opacity:0;width:50%;}
    100% {opacity:1;width:100%}
}
.linktopost{
    width: 100%;
    animation: reveal2 3s;
}
@keyframes reveal2 {
    0% {opacity:0;width:0%;}
    50% {opacity:0;width:90%;}
    100% {opacity:1;width:100%}
}
/*----------- Resturent border css---------*/
.product-category .row ul.products-list_top img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/
  --_d: calc(var(--d) + var(--s)*1em);
  --_g: calc(100% - 2*(var(--_d) + var(--b)));
  --_m:
    conic-gradient(from 90deg at var(--_d) var(--_d),#0000 25%,#000 0)
     0 0/calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50%/var(--_g) var(--_g) no-repeat;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  font-size: 0;
  cursor: pointer;
  transition: .35s;
}
/*----------- for empty cart---------*/
/*----------- for floting order details---------*/
.fireeffect {
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-shadow: 
        0 0 5px #ff5733, 
        0 0 10px #ff5733, 
        0 0 15px #ff5733, 
        0 0 20px #ffbd33, 
        0 0 25px #ffbd33, 
        0 0 30px #ffbd33, 
        0 0 35px #ffd633;
    animation: fire-animation 1s infinite alternate;
}
@keyframes fire-animation {
    0% {
        text-shadow: 
            0 0 5px #ff5733, 
            0 0 10px #ff5733, 
            0 0 15px #ff5733, 
            0 0 20px #ffbd33, 
            0 0 25px #ffbd33, 
            0 0 30px #ffbd33, 
            0 0 35px #ffd633;
    }
    50% {
        text-shadow: 
            0 0 8px #ff3300, 
            0 0 12px #ff3300, 
            0 0 18px #ff3300, 
            0 0 25px #ff6600, 
            0 0 30px #ff6600, 
            0 0 40px #ff9933, 
            0 0 50px #ffcc66;
    }
    100% {
        text-shadow: 
            0 0 10px #ff2200, 
            0 0 15px #ff2200, 
            0 0 20px #ff4400, 
            0 0 30px #ff5500, 
            0 0 35px #ff8800, 
            0 0 45px #ffaa33, 
            0 0 55px #ffdd66;
    }
}
/*----------------Ortder Details--------------*/
.sign {
    /*background-color: #121111;*/
    padding: 10px 0;
    width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #fdb0ad,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 5px;
  left: 50%;
  top: 50%;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 2em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #060606, -0.2rem 0.1rem 1rem #060606, 0.2rem 0.1rem 1rem #060606, 0 -0.5rem 2rem #eb0808, 0 0.5rem 3rem #EB0809;
  animation: shine 2s forwards, flicker 3s infinite;
}
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #0c4908,
      -0.2rem 0.1rem 1rem #0c4908, 0.2rem 0.1rem 1rem #0c4908,
      0 -0.5rem 2rem #bb4209, 0 0.5rem 3rem #bb4209;
  }
  28%,
  33% {
    color: #0c4908;
    text-shadow: none;
  }
  82%,
  97% {
    color: #bb4209;
    text-shadow: none;
  }
}
.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}
.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}
@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #0c4908,
      -0.2rem 0.1rem 1rem #0c4908, 0.2rem 0.1rem 1rem #0c4908,
      0 -0.5rem 2rem #bb4209, 0 0.5rem 3rem #bb4209;
  }
}
@keyframes flicker {
  from {
    opacity: 1;
  }
  4% {
    opacity: 0.9;
  }
  6% {
    opacity: 0.85;
  }
  8% {
    opacity: 0.95;
  }
  10% {
    opacity: 0.9;
  }
  11% {
    opacity: 0.922;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 0.95;
  }
  16% {
    opacity: 0.98;
  }
  17% {
    opacity: 0.9;
  }
  19% {
    opacity: 0.93;
  }
  20% {
    opacity: 0.99;
  }
  24% {
    opacity: 1;
  }
  26% {
    opacity: 0.94;
  }
  28% {
    opacity: 0.98;
  }
  37% {
    opacity: 0.93;
  }
  38% {
    opacity: 0.5;
  }
  39% {
    opacity: 0.96;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.97;
  }
  46% {
    opacity: 0.94;
  }
  56% {
    opacity: 0.9;
  }
  58% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.99;
  }
  68% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.95;
  }
  93% {
    opacity: 0.93;
  }
  95% {
    opacity: 0.95;
  }
  97% {
    opacity: 0.93;
  }
  to {
    opacity: 1;
  }
}
/*-----------------auto typein shiping form-------*/
.line-1{ 
    width: 100%;
    overflow: hidden;   
}
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 80%;}
  to{width: 100%;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}
/*-----------------float order display-------*/
table.ordstat {
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 3px 9px rgb(215 31 31 / 65%), 0 9px 22px rgb(0 0 0 / 78%);
    border-radius: 10px;
    overflow: hidden;
}
table.ordstat th, table.ordstat td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    color: #000000;
}
table.ordstat th {
    background-color: #5d6b64;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
}
table.ordstat tbody tr:nth-child(odd) {
    background-color: #f4f4f4;
}
table.ordstat tbody tr:hover {
    background-color: #f1f1f1;
}
table.ordstat tfoot td {
    font-weight: bold;
    background-color: #f8f9fa;
}
#orderbottomPanel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #43cea2, #185a9d); /* Gradient background */
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(100%); /* Hidden initially */
  transition: transform 0.3s ease-in-out;
  z-index: 99999;
}
#orderbottomPanel .float_panel-content {
  padding: 10px;
  text-align: center;
  max-height: calc(100vh - 50px); /* Prevent overflow */
  overflow-y: auto;
}
#orderbottomPanel h3 {
  margin: 0 0 10px;
}
/* Close button styles */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.close-button:hover {
  color: #ff0000;
}
/*#float_cartPanel {
    width: 90%;
    max-width: 500px;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, #43cea2, #185a9d); 
    color: white;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15);
    text-align: left;
    position: relative;
}*/
.float_panel-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    color: #000;
}
.float_cart-detail {
    margin: 15px 0;
    line-height: 1.6;
    color: #fff;
    text-align: left;
    /*padding-left: 35%;*/
}
.float_cart-detail span {
    font-weight: bold;
    display: inline-block;
    min-width: 120px;
}
.float_cart-detail p {
    margin: 10px 0;
}
.float_delivery-info {
    margin-top: 30px;
    padding: 15px;
    border-radius: 10px;
    background-color: #ff7f50;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    animation: floatEffect 2s infinite; /* Infinite animation */
}
/* Animation for background color and scale */
@keyframes floatEffect {
    0% {
        background-color: #ff7f50; /* Initial color */
        transform: scale(1);
    }
    50% {
        background-color: #ff6347; /* Lighter coral on mid-point */
        transform: scale(1.05); /* Slight zoom */
    }
    100% {
        background-color: #ff7f50; /* Return to initial color */
        transform: scale(1); /* Return to normal size */
    }
}
.float_delivery-info span {
    font-weight: bold;
}
.float_delivery-info p {
    margin: 10px 0;
}
/*-----------------float order display-------*/
/*-----------------My Order display-------*/
.mycontainer {
    width: 96%;
    max-width: 1200px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.myorder-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1.1);
    padding: 20px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
}
.myorder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    background: #1dd91d;
    border-radius: 11px;
}
.myorder-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}
.myorder-header .order-id {
    font-size: 14px;
    color: #777;
}
.myorder-details {
    margin: 10px 0;
}
.myorder-details table {
    width: 100%;
    border-collapse: collapse;
}
.myorder-details th, .myorder-details td {
    padding: 8px 5px;
    text-align: left;
}
.myorder-details th {
    color: #555;
}
.myorder-details td {
    font-weight: bold;
}
.myorder-status {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mystatus {
    font-weight: bold;
    /*padding: 5px 10px;
    border-radius: 5px;*/
    text-transform: uppercase;
}
.mystatus.myDelivered {
    background-color: #4CAF50;
    color: white;
}
.mystatus.myProcessing {
    background-color: #c5083c;
    color: white;
}
.mystatus.myConfirm {
    background-color: #fded00;
    color: black;
}
.mystatus.myPicked {
    background-color: #9f249b;
    color: #ffede9;
}
.mystatus.myCancel {
    background-color: #F44336;
    color: white;
}
.mydelivery {
    font-size: 14px;
    color: #333;
}
@media (max-width: 768px) {
    .mycontainer {
        flex-direction: column;
        align-items: center;
    }
    .myorder-card {
        max-width: 90%;
    }
}
.myorder-status .mydelivery:nth-child(2) {
    display: block;
}
.gradient-button {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    font-size: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(255, 117, 143, 0.4);
    max-height: 50px;
}
.gradient-button:hover {
  background: linear-gradient(135deg, #ffa726 0%, #ff6b6b 100%);
  color: #fff;
  box-shadow: 0 6px 12px rgba(255, 117, 143, 0.6);
  transform: scale(1.05);
}
.displymyorder{
    text-align: center;
}
/*-----------------My Order display-------*/
@media (max-width: 768px) {
    table.ordstat {
        font-size: 14px;
    }
    table.ordstat th, table.ordstat td {
        padding: 10px;
    }
}
@media (max-width: 480px) {
    table.ordstat {
        width: 95%;
    }
    table.ordstat th, table.ordstat td {
        padding: 8px;
    }
}
/*----------- Custom css End---------*/
/*----------- Cancel Order css Start---------*/
.cancelpopup-overlay {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.cancelpopup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cancelpopup-buttons button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    background-color: #c6c6c6;
}
/* Shimmer Effect Button */
.shimmer-button {
    position: relative;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}
.shimmer-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 300%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-30deg);
    animation: shimmer1 1.5s linear forwards;
    z-index: -1;
}
@keyframes shimmer1 {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}
/*---------------- Cancel Order css End------------*/
.form-section-box {
    border: 2px solid #f5625b;
    border-radius: 8px;
    padding: 15px 10px;
    margin-top: 15px;
    background-color: #fff8f6;
}
/* Modal background */
.modal.fade {
  background-color: rgba(0, 0, 0, 0.6);
}
/* Modal content */
#locationModal .modal-content {
  border-radius: 12px;
  z-index: 9999;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Modal header */
#locationModal .modal-header {
  background-color: #4CAF50;
  color: white;
  padding: 15px 20px;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#locationModal .modal-header .close {
  color: white;
  font-size: 28px;
  font-weight: 300;
  opacity: 1;
  transition: 0.3s;
}
#locationModal .modal-header .close:hover {
  color: #ddd;
  cursor: pointer;
}
/* Modal title */
#locationModal .modal-title {
  margin: 0;
  font-size: 20px;
}
/* Modal body */
#locationModal .modal-body {
  padding: 20px;
  background-color: #f9f9f9;
}
/* Map styling */
#locationModal #map {
  border-radius: 10px;
  height: 300px;
  width: 100%;
  border: 1px solid #ccc;
  z-index: 1055;
}
/* Modal footer */
#locationModal .modal-footer {
  padding: 15px 20px;
  background-color: #f1f1f1;
  border-top: none;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* Buttons */
#locationModal .btn-success {
  background-color: #4CAF50;
  border: none;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 6px;
  color: white;
  transition: background-color 0.3s ease;
}
#locationModal .btn-success:hover {
  background-color: #45a049;
}
#locationModal .btn-default {
  border: 1px solid #ccc;
  background-color: white;
  color: #333;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}
#locationModal .btn-default:hover {
  background-color: #e9e9e9;
}
#locationModal .form-control {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 10px 12px;
    font-size: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
    margin-bottom: 10px;
    height: 44px; /* Match button height */
    box-sizing: border-box;
}
#locationModal .form-control:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
    outline: none;
}
/* Label Styling */
#locationModal label {
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
    color: #444;
}
/* Search Button Styling */
#locationModal .search-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px; /* Fixed height to match input */
    box-sizing: border-box;
}
#locationModal .search-btn:hover {
    background-color: #45a049;
}
#locationModal .search-btn:active {
    transform: scale(0.98);
}
/* Search icon */
#locationModal .search-btn i {
    font-size: 16px;
}
/* Search Input Group */
#locationModal .search-input-group {
    position: relative;
    display: flex;
    margin-bottom: 15px;
}
#locationModal .search-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    flex: 1;
    display: flex;
    align-items: center;
}
#locationModal .search-input-group .search-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Form Section Spacing */
#locationModal .form-group {
    margin-bottom: 20px;
}
/* Placeholder styling */
#locationModal input::placeholder {
    color: #aaa;
    font-style: italic;
}
/* Error state for input fields */
#locationModal .form-control.is-invalid {
    border-color: #f5625b;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f5625b' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f5625b' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}
#locationModal .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #f5625b;
}
#locationModal .form-control.is-invalid ~ .invalid-feedback {
    display: block;
}
.biolife-clone-wrap{
    background: linear-gradient(135deg, #fed2ff, #f1c052);
}
.biolife-panels-actions-wrap {
    background: coral;
    font-size: 20px;
}
.quantity-controls {
    display: flex;
    align-items: center;
    background: #f7fafc;
    border-radius: 12px;
    padding: 6px;
    gap: 8px;
    width: fit-content;
}
.quantity-controls .qty-btn {
    background: #667eea;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.quantity-controls .qty-input {
    width: 140px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    color: black;
}
.quantity-column {
    text-align: center;
    vertical-align: middle;
}
.quantity-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 auto;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .cart_item td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    .quantity-column {
        padding: 15px 10px;
    }
    .quantity-controls {
        justify-content: center;
        max-width: 150px;
        margin: 0 auto;
    }
    /* Show data-title labels on mobile */
    .cart_item td:before {
        content: attr(data-title) ": ";
        font-weight: bold;
        display: inline-block;
        margin-right: 10px;
    }
    .quantity-column:before {
        content: "Quantity: ";
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }
}
@media (max-width: 480px) {
   /* .quantity-controls {
        max-width: 120px;
    }
    .qty-btn {
        min-width: 30px;
        height: 30px;
        padding: 5px;
    }
    .qty-input {
        width: 50px;
        text-align: center;
    }*/
}
.shop-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 10px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.1),
        0 0 0 1px rgba(255,255,255,0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    /*max-width: 800px;*/
    border: 3px solid #e55e58;
}
.shop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.shop-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.3);
}
.shop-content {
    display: grid;
    grid-template-columns: minmax(150px, 200px) 1fr;
    gap: clamp(20px, 4vw, 30px);
    align-items: center;
}
.shop-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 200px;
}
.shop-image-container:hover {
    transform: scale(1.03);
}
.shop-image {
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease;
}
.shop-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,107,107,0.3), rgba(78,205,196,0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}
.shop-image-container:hover .shop-image-overlay {
    opacity: 1;
}
.shop-info {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 3vw, 20px);
}
.info-section {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 5px;
    border-radius: 12px;
    border-left: 4px solid #ff6b6b;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}
.info-section:hover::before {
    left: 100%;
}
.info-section:hover {
    transform: translateX(5px);
    border-left-color: #4ecdc4;
}
.location-info {
    margin-bottom: 15px;
}
.location-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.location-icon {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}
.location-details {
    color: #34495e;
    font-size: 1.1rem;
    line-height: 1.6;
}
.timing-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.timing-item {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.timing-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.timing-item:hover::before {
    opacity: 1;
}
.timing-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.timing-label {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
    /*margin-bottom: 5px;*/
}
.timing-value {
    font-size: 8px;
    font-weight: 700;
}
.status-badge {
    position: absolute;
    top: clamp(15px, 3vw, 20px);
    right: clamp(15px, 3vw, 20px);
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-radius: 15px;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
    animation: pulse 2s infinite;
    white-space: nowrap;
    z-index: 99999;
    padding: 5px;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}
.floating-circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}
.floating-circle:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 10%;
    left: 80%;
    animation-delay: 0s;
}
.floating-circle:nth-child(2) {
    width: 40px;
    height: 40px;
    top: 70%;
    left: 10%;
    animation-delay: 2s;
}
.floating-circle:nth-child(3) {
    width: 30px;
    height: 30px;
    top: 40%;
    left: 90%;
    animation-delay: 4s;
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .shop-content {
        /*grid-template-columns: 1fr;*/
        gap: 20px;
        text-align: center;
    }
    .shop-image-container {
        max-width: 250px;
        margin: 0 auto;
    }
    /*.shop-image {
        height: 150px;
    }*/
    .timing-info {
        /*grid-template-columns: 1fr;*/
        gap: 12px;
    }
    .timing-item {
        min-height: 50px;
    }
    .status-badge {
        position: static;
        display: inline-block;
        margin-bottom: 15px;
    }
    .info-section:hover {
        transform: none;
    }
    .shop-card:hover {
        transform: none;
    }
}
@media (max-width: 480px) {
    .shop-container {
        padding: 0 5px;
    }
    .shop-card {
        border-radius: 15px;
        padding: 15px;
    }
    .shop-image-container {
        max-width: 200px;
    }
    .shop-image {
        height: 120px;
    }
    .timing-item {
        padding: 8px;
        min-height: 45px;
    }
    .floating-elements {
        display: none;
    }
}
@media (max-width: 320px) {
    .shop-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    .shop-card {
        padding: 12px;
    }
    .shop-image-container {
        max-width: 180px;
    }
    /*.shop-image {
        height: 100px;
    }*/
    .location-icon {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
}
/* Tablet Responsive Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .shop-container {
        max-width: 700px;
        padding: 0 20px;
    }
    .shop-content {
        /*grid-template-columns: 180px 1fr;*/
        gap: 25px;
    }
    /*.shop-image {
        height: 160px;
    }*/
}
/* Large Screen Optimization */
@media (min-width: 1200px) {
    .shop-container {
        max-width: 900px;
    }
    .shop-content {
        /*grid-template-columns: 220px 1fr;*/
        gap: 35px;
    }
    /*.shop-image {
        height: 200px;
    }*/
}
/* Hover effects disabled on touch devices */
@media (hover: none) and (pointer: coarse) {
    .shop-card:hover,
    .shop-image-container:hover,
    .timing-item:hover,
    .info-section:hover {
        transform: none;
    }
    .shop-image-overlay {
        display: none;
    }
    .info-section::before {
        display: none;
    }
    .timing-item::before {
        display: none;
    }
}
.fancy-select {
    width: 100%;
    background-color: #e3e3e3; /* soft yellow */
    color: #333;
    font-size: 16px;
    padding: 10px 15px;
    border: 2px solid #998391;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath fill='black' d='M7 10L0 0h14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.fancy-select:hover {
    background-color: #cfbcce;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.fancy-select:focus {
    outline: none;
    border-color: #998391;
}
.cart-summary {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 20px;
}
.summary-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 25px;
    text-align: center;
}
.summary-line {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
}
.summary-label {
    font-weight: 600;
    color: #4a5568;
}
.summary-value {
    font-weight: 700;
    color: #2d3748;
}
.grand-total .summary-label, .grand-total .summary-value {
    color: #e53e3e;
}
.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 25px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 100%;
    padding: 10px;
}
.button-example {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.loadmr-arrow {
    background: #2c3e50;
    border: none;
    border-radius: 8px;
    padding: 15px 45px 15px 35px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.loadmr-arrow::after {
    content: '↓';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: transform 0.3s ease;
}
.loadmr-arrow:hover {
    background: #235689;
    color:aliceblue;
    padding-right: 50px;
}
.loadmr-arrow:hover::after {
    transform: translateY(-50%) translateX(5px);
    animation: bounce 0.6s ease infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(-50%) translateX(5px); }
    50% { transform: translateY(-50%) translateX(5px) translateY(3px); }
}
.loadmr-neon {
    background: transparent;
    border: 2px solid #00f5ff;
    border-radius: 30px;
    padding: 15px 35px;
    color: #00f5ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.loadmr-neon:hover {
    background: #00f5ff;
    color: #000;
    box-shadow: 
        0 0 20px #00f5ff,
        0 0 40px #00f5ff,
        0 0 60px #00f5ff;
    transform: translateY(-3px);
}
.loadmr-loading {
    background: #e74c3c;
    border: none;
    border-radius: 25px;
    padding: 15px 35px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.loadmr-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.loadmr-loading:hover::before {
    left: 100%;
}
.loadmr-loading:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}
/*---------------------------Empty Cart Style------------------*/
.containerEmpty {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    width: 100%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    animation: slideUp 0.8s ease-out;
}
.containerEmpty::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    border-radius: 24px 24px 0 0;
}
.cart-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}
.cart-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 20px rgba(102, 126, 234, 0.3));
}
.empty-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #667eea;
    border-radius: 50%;
    animation: particle-float 4s infinite ease-in-out;
    opacity: 0.6;
}
.particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.particle:nth-child(2) { top: 40%; right: 20%; animation-delay: 1s; }
.particle:nth-child(3) { bottom: 30%; left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { bottom: 20%; right: 30%; animation-delay: 3s; }
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}
.subtitleEmpty {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 40px;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}
.actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    width: 60%;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    /*overflow: hidden;*/
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}
.btn:hover::before {
    left: 100%;
}
.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
}
.btn-secondary:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.features {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}
.feature {
    text-align: center;
    padding: 20px 10px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}
.feature:hover {
    transform: translateY(-5px);
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.2);
}
.feature-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}
.feature-text {
    font-size: 1 rem;
    color: #4a5568;
    font-weight: 500;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.3;
    }
}
figure.btn_call_quickview {
    border: 1px solid black;
    margin-left: 3px;
    overflow: hidden;
    border-radius: 15px;
}
@media (max-width: 768px) {
    .containerEmpty {
        padding: 40px 30px;
        margin: 20px;
        max-width: 500px;
    }
    h1 {
        font-size: 2rem;
    }
    .subtitleEmpty {
        font-size: 1rem;
    }
    .cart-icon {
        width: 100px;
        height: 100px;
    }
    .actions {
        gap: 12px;
    }
    
    /*
    .btn {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
    */
    td a.chgstock{
        font-size: 9px;
        width: 100%;
    }
    a.btn.btn-update.shopchng {
        font-size: 10px;
        padding: 6px;
        width: 40%;
    }
    .features {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }
}
@media (max-width: 480px) {
    .containerEmpty {
        padding: 30px 20px;
    }
    h1 {
        font-size: 1.75rem;
    }
    .cart-icon {
        width: 80px;
        height: 80px;
    }
    .features {
        margin-top: 25px;
    }
}
/*---------------------------Product Listing Style------------------*/
.food-card {
    background: linear-gradient(145deg, #1a1a1d 0%, #16161a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 100%;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    backdrop-filter: blur(20px);
}
.food-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}
.food-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 12px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}
.discount-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #ff3366, #ff1744);
    color: white;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 
        0 8px 20px rgba(255, 51, 102, 0.3),
        0 4px 8px rgba(255, 51, 102, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    from { box-shadow: 0 8px 20px rgba(255, 51, 102, 0.3), 0 4px 8px rgba(255, 51, 102, 0.2); }
    to { box-shadow: 0 8px 25px rgba(255, 51, 102, 0.5), 0 4px 12px rgba(255, 51, 102, 0.3); }
}
.image-section {
    position: relative;
    height: 240px;
    background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    /*background: linear-gradient(to top, rgba(26, 26, 29, 0.8), transparent);*/
    pointer-events: none;
}
.food-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2);
    /*filter: brightness(1.1) contrast(1.1);*/
}
.food-card:hover .food-image {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3);
}
.vendor-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(26, 26, 29, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #ffd700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.content-section {
    padding: 14px;
    position: relative;
    z-index: 2;
}
.rating-row {
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rating {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stars {
    display: flex;
    gap: 2px;
}
.star {
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}
.star:hover {
    transform: scale(1.2) rotate(10deg);
}
.rating-text {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}
.write-review {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.write-review:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.item-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #ffffff, #e4e4e7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-height: 35px;
}
.item-description {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    font-weight: 400;
}
.detailed-description {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #11998e;
    backdrop-filter: blur(10px);
    min-height: 75px;
    font-size: 9px;
}
.detailed-description p,.detailed-description {
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    margin-bottom: 11px;
}
.price-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 25px;
}
.current-price {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}
.groceryprice-area .current-price {
    font-size: 15px !important;
}
.original-price {
    font-size: 18px;
    color: #6b7280;
    text-decoration: line-through;
    font-weight: 500;
}
.savings {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}
.action-buttons {
    display: flex;
    gap: 0;
    margin-top: 5px;
}
.order-btn {
    width: 60%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 0 20px #837b7b;
    /*box-shadow: 
        0 8px 20px rgba(37, 99, 235, 0.3),
        0 4px 8px rgba(37, 99, 235, 0.2);*/
}
.order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}
.order-btn:hover::before {
    left: 100%;
}
.order-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 35px rgba(37, 99, 235, 0.4),
        0 8px 16px rgba(37, 99, 235, 0.3);
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
}
.order-btn:active {
    transform: translateY(-1px);
    transition: transform 0.1s;
}
/* Responsive Design */
@media (max-width: 480px) {
    .food-card {
        max-width: 100%;
        margin: 10px;
        border-radius: 20px;
    }
    .content-section {
        padding: 10px;
    }
    .rating-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .item-title {
        font-size: 12px;
        margin-bottom: 0px;
        min-height: 26px;
    }
    .current-price {
        font-size: 15px;
    }
    .order-btn{width: 50%;font-size: 14px;}
    .actions .btn{width: 100%}
    .mobile-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
        z-index: 100;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
    }
    
    #searchLocationBtn{justify-content: flex-start!important;}
    .current-location-group {padding-top: 0px;margin-top: 0px;margin-bottom: 10px;}
    .search-input-group, .button-group{margin-bottom: 0px!important;flex-wrap: nowrap!important;flex-direction: row!important;}
    #mapSearchInput{min-width: 230px;background: linear-gradient(135deg, #667eea, #764ba2)!important;color: #fff!important;margin-bottom: 0px!important}
    #mapSearchInput::placeholder{color: #fff!important;}
    #searchLocationBtn{font-size: 0px;padding: 15px!important;width: auto!important;height: max-content;}
    #searchLocationBtn i{font-size: 20px;}
    .number a{color: #fff!important;}
    .button-group .btn{font-size: 10px;}
    .button-group{margin-top: 20px;}
}
/* Loading animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.food-card {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Subtle animations for interactive elements */
.write-review,
.order-btn {
    position: relative;
}
.write-review::after,
.order-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}
.write-review:hover::after,
.order-btn:hover::after {
    width: 100%;
    height: 100%;
}
/*---------------------------Product Listing Style------------------*/
/*---------------------------Home page Tag Style------------------*/
.foodtag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    /*margin-bottom: 40px;*/
    background: radial-gradient(ellipse at center, #1e3c72 0%, #2a5298 50%, #1a1a2e 100%);
    padding: 20px 10px;
}
.foodtag-item {
    background: linear-gradient(145deg, rgb(36 59 108), rgb(207 89 197 / 50%));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.foodtag-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.foodtag-item:hover::before {
    opacity: 1;
}
.foodtag-item:hover {
    /*transform: translateY(-12px) scale(1.02);*/
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}
.foodtag-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    object-fit: cover;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}
.foodtag-item:hover .foodtag-image {
    /*transform: scale(1.1);*/
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.foodtag-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 10px;
}
@media (max-width: 768px) {
    .foodtag-name {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .foodtag-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 20px;
    }
}
@media (max-width: 480px) {
    .foodtag-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        gap: 5px;
    }
    .foodtag-name {
        font-size: 8px;
        margin-top: 4px;
    }
    /* Smaller mobile - still 2 per row but more compact */
    .restaurant-list {
        gap: 5px;
    }
    .foodtag-item {
        padding: 4px;
    }
    .foodtag-image {
        margin: 0 auto 5px;
    }
}
/*---------------------------Home page Tag Style------------------*/
/*---------------------------Home page Resturent Style------------------*/
.restaurant-section {
    margin-bottom: 80px;
}
.restaurant-homelist {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));*/
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding: 20px 10px;
}
.restaurant-card {
    background: rgb(67 10 108 / 62%);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px;
    padding: 32px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}
.restaurant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    opacity: 0;
    border-radius: 28px;
    transition: opacity 0.4s ease;
    z-index: -2;
}
.restaurant-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    animation: rotateGlow 4s linear infinite;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.restaurant-card:hover::before {
    opacity: 1;
}
.restaurant-card:hover::after {
    opacity: 1;
}
@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.restaurant-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}
.restaurant-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.restaurant-logo {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    object-fit: cover;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.restaurant-card:hover .restaurant-logo {
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}
.restaurant-info {
    flex: 1;
    min-width: 0;
}
.restaurant-info h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.restaurant-type {
    font-size: 1rem;
    color: #b8c6db;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.restaurant-rating {
    display: flex;
    align-items: center;
    /*gap: 12px;
    margin: 20px 0;
    padding: 12px 0;*/
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stars {
    color: #ffd700;
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    letter-spacing: 2px;
}
.rating-text {
    font-size: 0.95rem;
    color: #b8c6db;
    font-weight: 500;
    flex: 1;
}
.restaurant-features {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.feature-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}
.feature-tag:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
/* Menu Button Styles */
.menu-button {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
    width: 50%;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.menu-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.menu-button:hover::before {
    left: 100%;
}
.menu-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.menu-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive Design */
@media (max-width: 1024px) {
    .restaurant-homelist {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }
    .container {
        padding: 32px 20px;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 16px 16px;
        width: 100%;
    }
    .header-top{
        display: none;
    }
    .restaurant-homelist {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .restaurant-card {
        padding: 16px;
        border-radius: 20px;
    }
    .restaurant-header {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }
    .restaurant-logo {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        font-size: 0.8rem;
        margin: 0 auto;
    }
    .restaurant-info {
        text-align: center;
    }
    .restaurant-info h3 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    .restaurant-type {
        font-size: 0.7rem;
    }
    .restaurant-rating {
        margin: 8px 0;
        padding: 6px 0;
        flex-direction: column;
        /*gap: 4px;*/
    }
    .stars {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
    .rating-text {
        font-size: 0.6rem;
        text-align: center;
    }
    .restaurant-features {
        gap: 4px;
        margin-top: 8px;
        justify-content: center;
    }
    .feature-tag {
        font-size: 0.55rem;
        padding: 4px 6px;
        border-radius: 12px;
    }
    .menu-button {
        padding: 8px 12px;
        font-size: 0.7rem;
        margin-top: 8px;
        border-radius: 15px;
        width: 100%;
    }
    .restaurantsection-title {
        margin-bottom: 40px;
    }
    .restaurantsection-title span {
        padding: 0 20px;
    }
}
@media (max-width: 480px) {
    .restaurant-homelist {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .restaurant-card {
        padding: 10px;
        border-radius: 16px;
    }
    .restaurant-header {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 8px;
    }
    .restaurant-logo {
        width: 70px;
        height: 70px;
        border-radius: 8px;
        font-size: 0.7rem;
        margin: 0 auto;
    }
    .restaurant-info {
        text-align: center;
    }
    .restaurant-info h3 {
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 2px;
    }
    .restaurant-type {
        font-size: 0.6rem;
    }
    .restaurant-rating {
        margin: 6px 0;
        padding: 4px 0;
        flex-direction: column;
        /*gap: 2px;*/
    }
    .stars {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
        line-height: 10px;
    }
    .rating-text{line-height: 20px;}
    .rating-text {
        font-size: 10px;
        text-align: center;
    }
    .restaurant-features {
        gap: 3px;
        margin-top: 6px;
        justify-content: center;
    }
    .feature-tag {
        font-size: 0.5rem;
        padding: 3px 5px;
        border-radius: 10px;
    }
    .menu-button {
        padding: 7px 8px;
        font-size: 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .restaurantsection-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    .restaurantsection-title span {
        padding: 0 16px;
    }
    .restaurantsection-title span::after {
        width: 40px;
        height: 2px;
    }
    .shop-content{display: unset!important;}
    .location-title{justify-content: center!important;}
    .timing-label{font-size: 12px;}
    .timing-value{font-size: 10px}
    .info-section{padding: 10px 5px;}
    .image-section{height: auto!important;}
    .food-image{height: 150px;width: 100%}
    .food-card{margin: 0px!important;}
    .detailed-description{min-height: auto!important;padding: 12px;}
    .submitDbtn a{width: 100%!important;}
}
@media (max-width: 360px) {
    .container {
        padding: 16px 8px;
    }
    .restaurant-card {
        padding: 10px;
        border-radius: 16px;
    }
    .restaurant-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .restaurant-logo {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        margin: 0 auto;
    }
    .restaurant-info h3 {
        font-size: 1rem;
        text-align: center;
    }
    .restaurant-type {
        font-size: 0.8rem;
        text-align: center;
    }
    .restaurant-features {
        justify-content: center;
    }
    .restaurantsection-title {
        font-size: 1.6rem;
    }
}
/* Loading Animation for Images */
.restaurant-logo {
    animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
/* Scroll Animations */
@media (prefers-reduced-motion: no-preference) {
    .restaurant-card {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.6s ease forwards;
    }
    .restaurant-card:nth-child(1) { animation-delay: 0.1s; }
    .restaurant-card:nth-child(2) { animation-delay: 0.2s; }
    .restaurant-card:nth-child(3) { animation-delay: 0.3s; }
    .restaurant-card:nth-child(4) { animation-delay: 0.4s; }
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .restaurant-card {
        min-height: 44px; /* Minimum touch target size */
    }
    .feature-tag {
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/*---------------------------Home page Resturent Style------------------*/
/*---------------------------Shipping Form Style------------------*/
.whiteborder_radius{
    border-radius: 20px; 
    border: 1px solid white;
}
.shippingform-header {
    background: linear-gradient(135deg, #f5625b, #874949);
    color: white;
    text-align: center;
    padding: 5px;
    position: relative;
    overflow: hidden;
}
.shippingform-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer8 3s infinite;
}
@keyframes shimmer8 {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}
.shippingform-header h2 {
    font-size: 23px;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}
.shippingform-content {
    display: flex;
    flex-wrap: wrap;
    min-height: 600px;
}
.shipping-section1 {
    flex: 1;
    min-width: 300px;
    padding: 30px 12px;
    background: #f8f9fa;
}
.shippingorder-section {
    flex: 1;
    min-width: 300px;
    /*padding: 30px;*/
}
.shippingform-group {
    margin-bottom: 25px;
    position: relative;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
.required {
    color: #e74c3c;
}
input, select, textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
    color:#555555;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}
/* Location Selection Container */
.shippinglocation-container {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}
.shippinglocation-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}
.shippinglocation-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}
.shippinglocation-title i {
    color: #667eea;
    font-size: 20px;
}
.shippinglocation-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.shippingoption-toggle {
    flex: 1;
    min-width: 120px;
}
.shippingtoggle-btn {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.shippingtoggle-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.shippingtoggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.shippingtoggle-btn i {
    margin-right: 8px;
}
/* Custom Select Styling */
.custom-select {
    position: relative;
}
.custom-select select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 45px;
}
/* Mark Location Button */
.mark-location-btn {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
}
.mark-location-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
}
.mark-location-btn:active {
    transform: translateY(-1px);
}
.mark-location-btn i {
    margin-right: 10px;
    font-size: 18px;
}
/* Order Summary Styling */
.shippingorder-summary {
    background: #f8f9fa;
    border-radius: 0 0 15px 15px;
    padding: 20px;
    /*margin-top: 20px;*/
}
.shippingcart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.shippingproduct-thumb img {
    width: 80px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}
.shippingcart-info {
    flex: 1;
}
.shippingcart-info h4 {
    margin-bottom: 5px;
    color: #333;
}
.shippingcart-info p {
    color: #666;
    font-size: 14px;
}
.shippingprice {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
}
.shippingsubtotal {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
}
.shippingsubtotal-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #000000;
}
.shippingsubtotal-line:last-child {
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.confirm-btn {
    width: 100%;
    padding: 18px 30px;
    /*background: linear-gradient(135deg, #28a745, #20c997);*/
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}
.confirm-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.4);
}
.confirm-btn i {
    margin-right: 10px;
}
/* Responsive Design */
@media (max-width: 768px) {
    .shippingform-content {
        flex-direction: column;
    }
    .shippinglocation-options {
        /*flex-direction: column;*/
    }
    .shippingoption-toggle {
        min-width: auto;
    }
}
/* Animation for form groups */
.shippingform-group {
    animation: slideUp3 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}
.shippingform-group:nth-child(1) { animation-delay: 0.1s; }
.shippingform-group:nth-child(2) { animation-delay: 0.2s; }
.shippingform-group:nth-child(3) { animation-delay: 0.3s; }
.shippingform-group:nth-child(4) { animation-delay: 0.4s; }
.shippingform-group:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideUp3 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*---------------------------Shipping Form Style------------------*/
/*---------------------------Thank You Page------------------*/
.thankbody{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow-x: hidden;
}
.containerthank {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    position: relative;
}
.thanksuccess-icon {
    width: 100px;
    height: 100px;
    border: 4px solid #4CAF50;
    border-radius: 50%;
    margin: 0 auto 2rem;
    position: relative;
    animation: scaleIn5 0.6s ease-out;
}
.thanksuccess-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 25px;
    height: 50px;
    border: 4px solid #4CAF50;
    border-left: none;
    border-top: none;
    animation: checkmark 0.8s ease-out 0.3s both;
}
@keyframes scaleIn5 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes checkmark {
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 25px;
        height: 50px;
    }
}
.thanktitle {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #4CAF50, #81C784);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp5 0.8s ease-out 0.5s both;
}
.subthanktitle {
    font-size: 1.1rem;
    color: #B0BEC5;
    margin-bottom: 2rem;
    line-height: 1.5;
    animation: fadeInUp5 0.8s ease-out 0.7s both;
}
.thankorder-details {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp5 0.8s ease-out 0.9s both;
}
.thankorder-number {
    font-size: 1.2rem;
    color: #FFC107;
    font-weight: bold;
    margin-bottom: 1rem;
}
.thankdelivery-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #81C784;
    font-weight: 600;
}
.thankpulse-dot {
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.thankbuttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: fadeInUp5 0.8s ease-out 1.1s both;
}
.thankbtn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}
.thankbtn-primary {
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.thankbtn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.thankbtn-secondary {
    background: transparent;
    color: #B0BEC5;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.thankbtn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-2px);
}
@keyframes fadeInUp5 {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.thankfloating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.floating-elementthank {
    position: absolute;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.1);
    animation: float5 6s ease-in-out infinite;
}
.floating-elementthank:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}
.floating-elementthank:nth-child(2) {
    width: 40px;
    height: 40px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}
.floating-elementthank:nth-child(3) {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}
@keyframes float5 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }
}
@media (max-width: 480px) {
    .thanktitle {
        font-size: 2rem;
    }
    .containerthank {
        padding: 1rem;
    }
    .thanksuccess-icon {
        width: 80px;
        height: 80px;
    }
}
/*---------------------------Thank You Page------------------*/
/*---------------------------Delete Cart Pop Up------------------*/
.confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    animation: fadeIn 0.3s ease;
}
.confirmation-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    z-index: 10000;
    animation: slideIn 0.3s ease;
}
.popup-header {
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
.popup-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.popup-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.popup-body {
    padding: 25px;
    text-align: center;
}
.popup-message {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.5;
}
.popup-submessage {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}
.popup-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.popup-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}
.btn-cancel {
    background: #f1f2f6;
    color: #333;
}
.btn-cancel:hover {
    background: #ddd;
    transform: translateY(-1px);
}
.btn-delete {
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
}
.btn-delete:hover {
    background: linear-gradient(135deg, #ff3838, #ff2929);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to { 
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@media (max-width: 480px) {
.popup-header {
    padding: 18px 20px;
}
.popup-body {
    padding: 20px;
}
.popup-buttons {
    flex-direction: column;
}
.popup-btn {
    width: 100%;
}
}
.modal-backdrop {
position: relative;
}
/*---------------------------Delete Cart Pop Up------------------*/
/*---------------------------Pagination------------------*/
.pagicontainer {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /*backdrop-filter: blur(20px);*/
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /*padding: 20px;*/
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}
.pagicontainer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer2 3s infinite;
}
@keyframes shimmer2 {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.pagibiolife-nav {
    position: relative;
    z-index: 2;
}
.paginav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    list-style: none;
    padding: 5px 0;
}
.paginav-item {
    position: relative;
}
.pagipermal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52, #ff8e53);
    color: white;
    text-decoration: none;
    border-radius: 50%;
    font-size: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.pagipermal-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}
.pagipermal-link::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #667eea);
    background-size: 300% 300%;
    animation: borderGlow2 3s ease-in-out infinite;
    z-index: -1;
}
@keyframes borderGlow2 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.pagipermal-link:hover {
    transform: translateY(-8px) scale(1.15) rotate(5deg);
    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
}
.pagipermal-link:hover::before {
    width: 120%;
    height: 120%;
}
.pagipermal-link:active {
    transform: translateY(-4px) scale(1.1);
}
.pagipermal-link i {
    z-index: 1;
    position: relative;
    animation: pulse2 2s infinite;
}
@keyframes pulse2 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.text-wraper{
    padding: 0 20px;
}
.pagicurrent-page {
    font-size: 10px;
    font-weight: bold;
    background: linear-gradient(135deg, #ff6b6b, #ffd93d, #f9fffa, #4ecdc4, #667eea);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 5px 16px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    animation: glow2 2s ease-in-out infinite alternate, pagicolorShift 4s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}
@keyframes glow2 {
    from { 
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5), 0 0 40px rgba(102, 126, 234, 0.3);
        transform: scale(1);
    }
    to { 
        box-shadow: 0 0 30px rgba(118, 75, 162, 0.8), 0 0 50px rgba(255, 215, 61, 0.4);
        transform: scale(1.02);
    }
}
@keyframes pagicolorShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pagicurrent-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: pagislide 2s infinite;
}
@keyframes pagislide {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}
/* Floating pagiparticles effect */
.pagiparticle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: pagifloat 4s infinite ease-in-out;
}
.pagiparticle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.pagiparticle:nth-child(2) { top: 80%; left: 80%; animation-delay: 1s; }
.pagiparticle:nth-child(3) { top: 40%; left: 70%; animation-delay: 2s; }
.pagiparticle:nth-child(4) { top: 70%; left: 30%; animation-delay: 3s; }
@keyframes pagifloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
/* Enhanced responsive design with better mobile experience */
@media (max-width: 768px) {
    .pagicontainer {
        margin: 10px;
        padding: 5px;
        border-radius: 5px;
    }
    .paginav-list {
        /*flex-direction: column;*/
        gap: 25px;
        padding: 10px 0;
    }
    .pagicurrent-page {
        font-size: 12px;
        padding: 8px 15px;
        text-align: center;
        min-width: 200px;
    }
    .pagipermal-link {
        width: 25px;
        height: 25px;
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    .pagicontainer {
        margin: 5px;
        padding: 12px;
    }
    .paginav-list {
        gap: 20px;
        padding: 0;
    }
    .pagicurrent-page {
        font-size: 9px;
        padding: 7px 17px;
        min-width: 180px;
    }
    .pagipermal-link {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
    .pagipermal-link:hover {
        transform: translateY(-6px) scale(1.12);
    }
}
/* Enhanced pagiparticle system for mobile */
.pagiparticle {
    position: absolute;
    border-radius: 50%;
    animation: pagifloat 4s infinite ease-in-out;
    pointer-events: none;
}
.pagiparticle:nth-child(1) { 
    width: 4px; height: 4px;
    background: rgba(255, 107, 107, 0.6);
    top: 20%; left: 20%; animation-delay: 0s; 
}
.pagiparticle:nth-child(2) { 
    width: 6px; height: 6px;
    background: rgba(255, 215, 61, 0.6);
    top: 80%; left: 80%; animation-delay: 1s; 
}
.pagiparticle:nth-child(3) { 
    width: 5px; height: 5px;
    background: rgba(107, 207, 127, 0.6);
    top: 40%; left: 70%; animation-delay: 2s; 
}
.pagiparticle:nth-child(4) { 
    width: 3px; height: 3px;
    background: rgba(78, 205, 196, 0.6);
    top: 70%; left: 30%; animation-delay: 3s; 
}
/* Add touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .pagipermal-link:active {
        transform: translateY(-4px) scale(1.1);
        transition: all 0.2s ease;
    }
    .pagicurrent-page {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}
/*---------------------------Pagination------------------*/
/*---------------------------Progress bar after order------------------*/
.progress-container {
    /*margin-bottom: 20px;*/
    width: 80%
}
.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}
.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}
.step-icon.active {
    background: #ff6b35;
    color: white;
    animation: stepPulse 2s infinite;
}
.step-icon.completed {
    background: #4ade80;
    color: white;
}
.step-icon.pending {
    background: #fbcdcf;
    color: #888;
}
.step-icon.delivared {
    background: #299d03;
    color: #fff;
}
.step-text.delivared{
    color: #fff;
}
@keyframes stepPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}
.step-text {
    font-size: 8px;
    color: #94cfcf;
    text-align: center;
}
.step-text.active {
    color: #ff6b35;
    font-weight: 600;
}
.step-text.completed {
    color: #4ade80;
}
.progress-bar {
    width: 100%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShine 2s infinite;
}
@keyframes progressShine {
    0% { left: -30px; }
    100% { left: 100%; }
}
.action-button {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.action-button:hover::before {
    left: 100%;
}
.action-button:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4190);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(102, 126, 234, 0.4);
}
.action-button:active {
    transform: translateY(0);
}
.progresscont  {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/*---------------------------Progress bar after order------------------*/
/*---------------------------My order page style------------------*/
.filter-tabs {
    display: flex;
    gap: 12px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.filter-tab {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}
.filter-tab:hover {
    background: rgba(60, 60, 60, 0.9);
    transform: translateY(-2px);
}
.filter-tab.active {
    background: linear-gradient(45deg, #ff6b6b, #ffa726);
    border-color: transparent;
    color: #ffffff;
}
.orders-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
    width: 90%;
}
.order-card {
    background: linear-gradient(2deg, rgba(25, 25, 25, 0.95) 0%, rgba(255, 193, 7, 0.1) 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /*max-width: 380px;
    text-align: center;*/
}
.order-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b6b, #ffa726);
}
.order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
}
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}
.order-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}
.order-date {
    color: #888;
    font-size: 0.9rem;
}
.order-status {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-delivered {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.status-pending {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.3);
}
.status-cancelled {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
.order-items {
    margin-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgb(47 45 48);
    padding: 0 20px;
    border-radius: 10px;
}
.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.order-item:last-child {
    border-bottom: none;
}
.item-menu{
    color: #ffa726;
    font-weight: 600;
    font-size: 12px;
}
.item-info {
    flex: 1;
}
.item-name {
    font-weight: 500;
    color: #ffffff;
    /*margin-bottom: 4px;*/
}
.item-details {
    color: #e18b8b;
    font-size: 14px;
}
.item-price {
    color: #ffa726;
    font-weight: 600;
    font-size: 14px;
}
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.order-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff6b6b;
}
@media (max-width: 768px) {
    .filter-tabs {
        justify-content: center;
    }
    .filter-tab {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .order-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .order-footer {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}
@media (max-width: 480px) {
    .order-card {
        padding: 20px;
    }
    .order-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .item-price {
        align-self: flex-end;
    }
}
/*---------------------------My order page style------------------*/
/*---------------------------Order Details page style------------------*/
.viewordercontent {
    padding: 20px;
    width: 100%;
}
.order-hero {
    background: linear-gradient(135deg, 
        rgba(255, 0, 128, 0.15) 0%, 
        rgba(121, 40, 202, 0.15) 50%, 
        rgba(0, 212, 255, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 25px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.order-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 0, 128, 0.1), transparent, rgba(0, 212, 255, 0.1), transparent);
    animation: viewspin 8s linear infinite;
}
@keyframes viewspin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.order-hero-content {
    position: relative;
    z-index: 1;
}
.order-hero h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}
.order-id {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 18px;
}
.viewordprogress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.vieworderprogress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0080, #7928ca, #00d4ff);
    width: 75%;
    border-radius: 10px;
    animation: viewpulse 2s ease-in-out infinite;
}
@keyframes viewpulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.viewstatus-badge {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1));
    border: 1px solid rgba(0, 255, 0, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.viewstatus-badge::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    animation: viewblink 1.5s infinite;
}
.viewstatus-badge.View-Processing {
    background: linear-gradient(135deg, rgba(122, 100, 211, 0.2), rgba(0, 255, 0, 0.1));
    border: 1px solid rgba(0, 64, 255, 0.3);
}
.viewstatus-badge.View-Processing::before {
    background: #182f9d;
}
.viewstatus-badge.View-Confirm {
    background: linear-gradient(135deg, rgba(255, 118, 0, 0.2), rgba(0, 255, 0, 0.1));
    border: 1px solid #ff6b35;
}
.viewstatus-badge.View-Confirm::before {
    background: #ff6b35;
}
.viewstatus-badge.View-Picked {
    background: linear-gradient(135deg, rgba(0, 255, 145, 0.2), rgba(0, 255, 0, 0.1));
    border: 1px solid rgba(209, 30, 160, 0.3);
}
.viewstatus-badge.View-Picked::before {
    background: #fbcdcf;
}
.viewstatus-badge.View-Cancel {
    background: linear-gradient(135deg, rgba(255, 0, 45, 0.2), rgba(0, 255, 0, 0.1));
    border: 1px solid rgba(205, 10, 10, 0.3);
}
.viewstatus-badge.View-Cancel::before {
    background: #e70e17;
}
@keyframes viewblink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.viewordshop-card {
    background: linear-gradient(2deg, rgba(25, 25, 25, 0.95) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 15px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
.viewordshop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
.viewshop-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.viewshop-avatar {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    margin-right: 12px;
    overflow: hidden;
    position: relative;
    background: #333;
}
.viewshop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.viewshop-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #ffffff;
}
.viewshop-info p {
    font-size: 12px;
    opacity: 0.6;
}
.viewshop-rating {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vieworderitem {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.vieworderitem:last-child {
    border-bottom: none;
}
.vieworderitem-image {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    margin-right: 12px;
    overflow: hidden;
    position: relative;
    background: #333;
    flex-shrink: 0;
}
.vieworderitem-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vieworderitem-details {
    flex: 1;
}
.vieworderitem-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #ffffff;
}
.vieworderitem-description {
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 8px;
    line-height: 1.3;
}
.vieworderitem-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quantity-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.vieworderitem-price {
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #00d4ff, #7928ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.viewsummary-card {
    background: linear-gradient(2deg, rgba(25, 25, 25, 0.95) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
.viewsummary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff0080, #7928ca, #00d4ff);
}
.viewsummary-card h3,.viewordshop-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ff6b6b;
}
.viewsummary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    opacity: 0.8;
}
.viewsummary-row.total {
    font-weight: 600;
    font-size: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 8px;
    opacity: 1;
}
.viewsummary-row.total .amount {
    background: linear-gradient(135deg, #00d4ff, #7928ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.viewdelivery-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-top: 15px;
    backdrop-filter: blur(20px);
}
.viewdelivery-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}
.viewdelivery-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    opacity: 0.8;
}
.viewdelivery-icon {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    border-radius: 50%;
    overflow: hidden;
}
.viewdelivery-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reviewtrack-button {
    background: linear-gradient(135deg, #ff0080 0%, #7928ca 50%, #00d4ff 100%);
    color: white;
    border: none;
    padding: 16px 30px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 20%;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.reviewtrack-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}
.reviewtrack-button:hover::before {
    left: 100%;
}
.reviewtrack-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 0, 128, 0.3);
}
.bottom-spacing {
    height: 80px;
}
.estimated-time {
    background: rgb(14 14 13 / 53%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}
.time-display {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFC107;
    margin-bottom: 0.5rem;
}
.delivery-info {
    background: linear-gradient(2deg, rgba(25, 25, 25, 0.95) 0%, rgba(255, 193, 7, 0.1) 100%);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.delivery-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.delivery-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}
.delivery-row .icon {
    width: 20px;
    margin-right: 10px;
    opacity: 0.7;
}
.delivery-row .icon {
    width: 20px;
    margin-right: 10px;
    opacity: 0.7;
}
/*---------------------------Order Details page style------------------*/
/*---------------------------After Map Success------------------*/
.checkmark-simple {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #4caf50;
    border-radius: 50%;
    position: relative;
    margin: 10px;
}
.checkmark-simple::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/*---------------------------After Map Success------------------*/
/*---------------------------Cancel Order Popup------------------*/
.reason-section {
    margin: 20px 0;
    text-align: left;
}
.reason-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
.reason-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: white;
    margin-bottom: 15px;
}
.reason-select:focus {
    outline: none;
    border-color: #007bff;
}
.other-reason {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    display: none;
}
.other-reason:focus {
    outline: none;
    border-color: #007bff;
}
/*---------------------------Cancel Order Popup------------------*/
/*---------------------------Loading Text------------------*/
.loading-dots,.loading-dots1 {
    font-size: 2rem;
    color: white;
    font-weight: bold;
}
.loading-dots::after,.loading-dots1::after {
    content: '';
    animation: dots 1.5s infinite;
}
@keyframes dots {
    0%, 20% { content: '-'; }
    40% { content: '--'; }
    60% { content: '---'; }
    80% { content: '----'; }
    100% { content: '-----'; }
}
.btn-review-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    margin: 15px;
}
.btn-review-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
.btn-review-primary:active {
    transform: translateY(0);
}
.reviewicon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.deltvcall-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}
.deltvcall-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 205, 196, 0.4);
    background: linear-gradient(135deg, #44a08d 0%, #4ecdc4 100%);
}
.deltvcall-btn i {
    font-size: 12px;
}
/*---------------------------Loading Text------------------*/
/*---------------------------Review Page Style------------------*/
.review-section h1 {
    font-size: 2.5rem;
    background: linear-gradient(7deg, #e50c0c, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    from { filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.3)); }
    to { filter: drop-shadow(0 0 30px rgba(78, 205, 196, 0.3)); }
}
.review-section {
    /*background: rgba(255, 255, 255, 0.05);*/
    background: linear-gradient(135deg, #151515, #37393a);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    /*width: 90%;*/
    margin-top: 30px;
    text-align: center;
}
.review-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.reviewsection-header {
    display: contents;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.reviewsection-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.reviewrestaurant-icon { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);}
.delivery-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.reviewsection-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.reviewrestaurant-card {
    /*background: rgba(255, 255, 255, 0.03);*/
    background: linear-gradient(2deg, rgba(25, 25, 25, 0.95) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}
.reviewrestaurant-card:hover {
    /*background: rgba(56, 43, 58, 0.95);*/
    background: linear-gradient(2deg, rgba(255, 193, 7, 0.1) 0%, rgba(25, 25, 25, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.15);
}
.reviewrestaurant-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.reviewrestaurant-name::before {
    content: "🏷️";
    margin-right: 10px;
    font-size: 1.2rem;
}
.reviewrating-group {
    margin-bottom: 25px;
}
.reviewrating-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #ccc;
}
.reviewstar-rating {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}
.reviewstar {
    font-size: 24px;
    color: #87c5cf;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.reviewstar:hover,
.reviewstar.active {
    color: #ffd700;
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}
.reviewcomment-box {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s ease;
}
.reviewcomment-box:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.2);
    background: rgba(255, 255, 255, 0.08);
}
.reviewcomment-box::placeholder {
    color: #666;
}
.reviewfood-item {
    /*background: rgba(255, 255, 255, 0.02);*/
    background: linear-gradient(135deg, #151515, #37393a);
    border: 1px solid rgb(2 2 2 / 24%);
    border-radius: 12px;
    padding: 20px;
    /*margin-bottom: 20px;*/
    transition: all 0.3s ease;
}
.reviewfood-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.reviewitem-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.reviewitem-name::before {
    content: "🍽";
    margin-right: 8px;
}
.reviewfood-item small {
    font-size: 9px;
    display: flex;
    color: #edc038;
}
.reviewrestaurant-name small{
    font-size: 9px;
    margin-left: 10px;
    color: #edc038; 
}
.reviewdelivery-section {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
}
.reviewdelivery-person {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}
.reviewdelivery-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-right: 15px;
}
.reviewdelivery-info h3 {
    color: #fff;
    margin-bottom: 5px;
}
.reviewdelivery-info p {
    color: #999;
    font-size: 0.9rem;
}
.reviewshop{
    /*background: linear-gradient(135deg, #151515, #37393a);*/
    /* padding: 5px; */
    border-radius: 12px;
    border-left: 4px solid #ff6b6b;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@media (max-width: 768px) {
    .review-section {
        padding: 20px;
    }
    .reviewstar {
        font-size: 20px;
    }
}
.successoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: none;
}
.success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    z-index: 1000;
    display: none;
}
.success-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: bounce 1s ease-in-out;
}
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
/*---------------------------Review Page Style------------------*/
/*---------------------------Shipping Page GPS Style------------------*/
input[type="text"]::placeholder,input[type="email"]::placeholder,input[type="tel"]::placeholder,textarea::placeholder
{
    font-size: 10px;
    color: #888888;
}

.gpseffect-3 {
    position: relative;
    overflow: hidden;
}

.gpseffect-3::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gpseffect-3:hover::after {
    width: 300px;
    height: 300px;
}

.gpseffect-3:hover {
    color: #c4021a;
}
.gpslocater i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.gpslocater:hover i {
    transform: scale(1.2) rotate(10deg);
}
.gpslocater:active {
    transform: scale(0.98);
}
@media (max-width: 480px) {
    p.mblview_67657 span a{
        color: #ffffff;
    }
}
/*---------------------------Review popup------------------*/
.itemreviews-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.itemreviews-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Popup Container */
.itemreviews-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin: 10px;
}

.itemreviews-overlay.active .itemreviews-popup {
    transform: translate(-50%, -50%) scale(1);
}

/* Header */
.itempopup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px 30px;
    position: relative;
    overflow: hidden;
}

.itempopup-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.itempopup-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.itempopup-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.itemclose-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.itemclose-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}
.reviewloading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    color: #667eea;
}

.reviewloading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Reviews Content */
.itemreviews-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
}

.itemreviews-content::-webkit-scrollbar {
    width: 6px;
}

.itemreviews-content::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.itemreviews-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px;
}
.itemreview-item {
    padding: 25px 30px;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

.itemreview-item:hover {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.itemreview-item:last-child {
    border-bottom: none;
}
.itemreviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.itemreviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.itemreviewer-details h4 {
    margin: 0 0 5px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
}
.itemreview-date {
    color: #64748b;
    font-size: 14px;
}

.itemreview-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.itemstars-display {
    display: flex;
    gap: 2px;
}

.itemstar-filled {
    color: #fbbf24;
    font-size: 16px;
}

.itemstar-empty {
    color: #d1d5db;
    font-size: 16px;
}

.itemrating-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.itemreview-text {
    color: #374151;
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 15px;
}

.itemreview-actions {
    display: flex;
    gap: 15px;
}

.itemaction-btn {
    background: none;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.itemaction-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Empty State */
.no-reviews {
    text-align: center;
    padding: 60px 30px;
    color: #64748b;
}

.no-reviews i {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .itemreviews-popup {
        width: calc(100% - 20px);
        max-width: none;
        max-height: 90vh;
        margin: 10px;
        border-radius: 16px;
        transform: translate(-50%, -50%) scale(0.9);
    }

    .itemreviews-overlay.active .itemreviews-popup {
        transform: translate(-50%, -50%) scale(1);
    }

    .itempopup-header {
        padding: 20px;
        border-radius: 16px 16px 0 0;
    }

    .itempopup-title h3 {
        font-size: 1.25rem;
    }

    .itemclose-btn {
        width: 36px;
        height: 36px;
    }

    .itemreview-item {
        padding: 20px 15px;
    }

    .itemreviewer-info {
        gap: 12px;
    }

    .itemreviewer-avatar {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .itemreviewer-details h4 {
        font-size: 1rem;
    }

    .itemreview-text {
        font-size: 0.95rem;
    }

    .itemaction-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .itemreviews-content {
        max-height: calc(90vh - 100px);
    }
}

@media (max-width: 480px) {
    .itemreviews-popup {
        width: calc(100% - 16px);
        margin: 8px;
        max-height: 95vh;
        border-radius: 12px;
    }

    .itempopup-header {
        padding: 16px;
        border-radius: 12px 12px 0 0;
    }

    .itempopup-title h3 {
        font-size: 1.1rem;
        gap: 8px;
    }

    .itemclose-btn {
        width: 32px;
        height: 32px;
    }

    .itemreview-item {
        padding: 16px 12px;
    }

    .itemreviewer-info {
        gap: 10px;
    }

    .itemreviewer-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .itemreviewer-details h4 {
        font-size: 0.95rem;
    }

    .itemreview-date {
        font-size: 14px;
    }

    .itemreview-text {
        font-size: 15px;
        line-height: 1.5;
    }

    .itemreview-actions {
        gap: 10px;
        flex-wrap: wrap;
    }

    .itemaction-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
        flex: 1;
        min-width: 80px;
        justify-content: center;
    }

    .itemrating-number {
        padding: 3px 8px;
        font-size: 13.6px;
    }

    .itemreviews-content {
        max-height: calc(95vh - 90px);
    }

    .reviewloading {
        padding: 40px 20px;
    }

    .no-reviews {
        padding: 40px 20px;
    }

    .no-reviews i {
        font-size: 3rem;
        margin-bottom: 15px;
    }
}

/* Ultra small screens */
@media (max-width: 360px) {
    .itemreviews-popup {
        width: calc(100% - 12px);
        margin: 6px;
        border-radius: 8px;
    }

    .itempopup-header {
        padding: 14px;
        border-radius: 8px 8px 0 0;
    }

    .itempopup-title h3 {
        font-size: 1rem;
    }

    .itemreview-item {
        padding: 14px 10px;
    }

    .itemreviewer-avatar {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .itemreviewer-details h4 {
        font-size: 0.9rem;
    }

    .itemreview-text {
        font-size: 16px;
    }

    .itemaction-btn {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* Landscape mobile orientation fix */
@media (max-height: 500px) and (orientation: landscape) {
    .itemreviews-popup {
        max-height: 95vh;
        width: 95%;
    }

    .itempopup-header {
        padding: 15px 20px;
    }

    .itemreviews-content {
        max-height: calc(95vh - 80px);
    }

    .itemreview-item {
        padding: 15px 20px;
    }
}

/* Animation for new reviews */
.itemreview-item.new {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*---------------------------Review popup------------------*/




.othercategory-title {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    /*margin: 0 20px;*/
    background: linear-gradient(135deg, #f128bd 0%, #f6b73b 50%, #d43f06 100%);
}

.othercategory-scroll {
    display: flex;
    gap: 25px;
    padding: 20px 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}

.othercategory-scroll:active {
    cursor: grabbing;
}

.othercategory-scroll::-webkit-scrollbar {
    display: none;
}

.othercategory-card {
    position: relative;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 35px 25px;
    text-align: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.othercategory-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #4facfe);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.othercategory-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.othercategory-card:hover::before {
    opacity: 1;
}

.othercategory-card:hover::after {
    opacity: 1;
}

.othercategory-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 0 40px rgba(102, 126, 234, 0.3);
}

.othericon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.othericon-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.othercategory-card:hover .othericon-wrapper {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.othercategory-card:hover .othericon-wrapper::before {
    left: 100%;
}

.othericon-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /*filter: brightness(0) invert(1);*/
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.othercategory-card:hover .othericon-wrapper img {
    transform: scale(1.15);
    /*filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));*/
}

.categorysemi-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    transition: all 0.3s ease;
    letter-spacing: -0.3px;
}

.othercategory-card:hover .categorysemi-title {
    color: #667eea;
    transform: translateY(-2px);
}
.payment-methods {
    margin: 24px 0;
    padding: 18px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.payment-methods h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #222;
    font-weight: 600;
}

/* FORCE SAME LINE */
.payment-options {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap; /* 🔥 important */
}

/* Each button 50% */
.payment-option {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Hide radio */
.payment-option input[type="radio"] {
    display: none;
}

/* Button */
.payment-label {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 10px;
    border-radius: 10px;

    cursor: pointer;
    transition: all 0.25s ease;

    min-height: 64px;
}

/* Text stack */
.payment-text,
.payment-subtext {
    display: block;
}

/* Title */
.payment-text {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    line-height: 1.2;
}

/* Subtitle */
.payment-subtext {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    line-height: 1.2;
}

/* Icon */
.payment-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* COD */
#cod + .payment-label {
    background: #f8f9fa;
    border: 1.5px solid #cfd4da;
}

#cod:checked + .payment-label {
    background: #e9ecef;
    border-color: #6c757d;
}

/* Online */
#online + .payment-label {
    background: #f8f9fa;
    border: 1.5px solid #cfd4da;
}

#online:checked + .payment-label {
    background: #dbe9ff;
    border-color: #125aa3;
}

/* Hover */
.payment-label:hover {
    transform: translateY(-1px);
}

/* VERY SMALL SCREENS (still same line) */
@media (max-width: 360px) {
    .payment-text {
        font-size: 12px;
    }
}

/*---------Tool Tip-------------*/
.summary-line {
    position: relative;
}

.tooltip-text {
    display: none;
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 12px;
    top: 35px;
    left: 0;
    z-index: 10;
    white-space: nowrap;
}

.tooltip-text.active {
    display: inline-block;
}
.search-bar {
        background: #eaffe2;
    border-radius: 5px;
    color: #000;
    padding: 3px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);*/
    transition: all 0.3s;
    animation: fadeInUp 0.6s ease 0.2s both;
}

.search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 15px;
    background: transparent;
}
.search-bar input[type="text"]::placeholder {
    color: #000000 !important;
}

/* Responsive Design */
@media (max-width: 768px) {

    .othercategory-card {
        min-width: 150px;
        padding: 30px 20px;
    }

    .othericon-wrapper {
        width: 75px;
        height: 75px;
    }

    .categorysemi-title {
        font-size: 13px;
    }
}

@media (max-width: 480px) {

    .othercategory-scroll {
        gap: 12px;
        padding: 10px 10px;
    }

    .othercategory-card {
        min-width: 100px;
        padding: 10px 5px;
    }

    .othericon-wrapper {
        width: 70px;
        height: 70px;
    }
    /*.payment-options {
        flex-direction: column;
    }*/
}
/*---------For Image instuction copyright-------------*/
.image-section {
    position: relative;
}

.image-section::after {
    content: "Image for representation purpose only";
    position: absolute;
    top: clamp(4px, 1vw, 8px);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: clamp(9px, 2.2vw, 12px);
    line-height: 1.2;
    color: #ffffff;
    /* 
    font-style: italic;
    black border effect */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;

    pointer-events: none; /* does not block clicks */
    z-index: 2;
}
/*---------For Image instuction copyright-------------*/
/*---------For dropdown in add to cart-------------*/
.chngprice {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: 
        linear-gradient(45deg, transparent 50%, #555 50%),
        linear-gradient(135deg, #555 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;

    padding-right: 30px;
}
/*---------For dropdown in add to cart-------------*/
/*---------Close app pop up-------------*/
.popup {
    position: fixed;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0 0 0 / 82%);
    text-align: center;
    /*display: none;*/
}
.popup-content {
    background-color: white;
    margin: 10% auto;
    padding: 23px 10px;
    border: 3px solid #db0707;
    width: 70%;
    font-weight: bolder;
    margin-top: 15%;
    vertical-align: middle;
    border-radius: 8px;
    min-height: 200px;
    font-size: 28px;
}
.popup-content p {
    padding: 8px;
    text-decoration: none;
    /*font-size: 16px;*/
    color: #000000;
    display: block;
    transition: 0.3s;
    /*line-height: 40px;*/
    text-shadow: 2px 4px 4px rgb(239 11 11 / 60%);
    line-height: 30px;
}
.popup-content button {
    display: block;
    margin: 0 auto;
    background-color: green;
    color: white;
    width: 25%;
}
@media only screen and (max-width:450px){
  .popup-content p {font-size: 20px}
    .popup-content {
    margin-top: 45%;
    }
  .popup-content button {
    width: 40%;
  }
}
/*---------Close app pop up-------------*/
/*---------Home page slide in mobile-------------*/
.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  position: relative;
}
.swiper-slide img {
  display: block;
  width: 100%;
}
.swiperslide-content {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 90%;
}
.swiperslide-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 10px;
  
  /* Text shadow effects */
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 255, 255, 0.3);
  
  /* Border/Line effects */
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  
  /* Background with transparency */
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
  
  /* Hover effects */
  transition: all 0.3s ease;
            width: 100%;
}

.swiperslide-title:hover {
  transform: scale(1.05);
  text-shadow: 
    3px 3px 6px rgba(0, 0, 0, 0.9),
    0 0 15px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 0.7);
}
.swiper {
    width: 98%;
    padding-top: 5px;
    padding-bottom: 5px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  /*width: 300px;
  height: 300px;*/
}

.swiper-slide img {
  display: block;
  width: 100%;
    border-radius: 15px;
}
.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    display: none;
}
@media (max-width: 480px) {
  .swiperslide-title {
    font-size: 18px;
    padding: 8px 15px;
  }
}
/*---------Home page slide in mobile-------------*/
/*---------floatting cart panel in footer-------------*/
.CartButton_dtlsbox {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 2000; /* HIGHER than footer */
}
.cnIrQF {
    position: fixed;
    /*left: 12px;
    right: 12px;*/
    display: flex;
    z-index: 999;
    /*background: rgb(12, 131, 31);*/
    background: linear-gradient(135deg, #033717 0%, #0dcf0a 100%);
    color: white;
    border-radius: 12px;
    padding: 6px 10px 6px 10px;
    margin: 0px auto;
    -webkit-box-pack: justify;
    justify-content: space-between;
    transition: transform 300ms linear 0s;
    transform: translate(0px);
    opacity: 1;
}
.cjAGwa {
    bottom: 0px;
    display: block;
    left: 12px;
    right: 12px;
    height: 64px;
    z-index: 1;
    position: fixed;
    transition: transform 300ms linear 0s;
    transform: translate(0px);
    background: black;
    opacity: 0.3;
    filter: blur(8px);
}
.cMgCFv {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.cCjPOq {
    margin-right: 12px;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
}
svg:not(:root) {
    overflow: hidden;
}
.gloyuf {
    font-family: Okra-Regular;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 2px;
}
.jGtrlY {
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
}
.hVpzJm {
    font-family: Okra-Regular;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    margin-right: 4px;
}
.ggVDHv {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.dEmCCC {
    font-family: Okra-Regular;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
}
.hffrDZ {
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid white;
    margin-left: 8px;
    margin-top: 2px;
}
#countdown {
  font-size: 2rem;
  font-weight: bold;
}
/*---------floatting cart panel in footer-------------*/
/*---------Addon part in cart page-------------*/
.addon-section {
    background: #caf7a8;
    padding: 0 10px;
    border-radius: 10px;
}

.addon-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* CARD */
.addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px;
    border-bottom: 1px solid #eee;
    border: 1px solid gray;
    border-radius: 5px;
}

/* LEFT */
.addon-left {
    display: flex;
    align-items: center;
}

.addon-check {
    margin-right: 6px;
}

.addon-img {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    margin-left: 10px;
}

/* CENTER */
.addon-middle {
    flex: 1;
    padding: 0 10px;
}

.addon-name {
    font-size: 13px;
    font-weight: bold;
    color: #540404;
}

.addon-price {
    font-size: 12px;
    color: #666;
}

/* RIGHT */
.addon-right {
    display: flex;
    align-items: center;
}

.addon-right button {
    width: 24px;
    height: 24px;
    border: none;
    background: #667eea;
    color: #fff;
    border-radius: 5px;
}

.addon-qty {
    width: 40px !important;
    height: 26px !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 2px !important;
    margin: 0 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
/* Hide default checkbox */
.addon-check-wrap input {
    display: none;
}

/* Custom checkbox */
.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #667eea;
    border-radius: 6px;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addon-check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Checked state */
.addon-check-wrap input:checked + .checkmark {
    background: #667eea;
    border-color: #667eea;
}

/* Tick icon */
.checkmark::after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}

/* Show tick */
.addon-check-wrap input:checked + .checkmark::after {
    display: block;
}

/* Tick design */
.addon-check-wrap .checkmark::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.addon-card:has(.addon-check:checked) {
    background: #e8f0ff;
    border: 1px solid #667eea;
    border-radius: 8px;
}

/* Optional: text highlight */
.addon-card:has(.addon-check:checked) .addon-name {
    color: #a70000;
    font-weight: bold;
}
.addon-plus,.addon-minus {
    position: relative;
    z-index: 999;
}
/* MOBILE */
@media (max-width: 768px) {
    .addon-card {
        flex-wrap: nowrap;
    }

    .addon-name {
        font-size: 12px;
    }

    .addon-img {
        width: 30px;
        height: 30px;
    }
        .shopping-cart-container table.cart-form tr {
        margin-bottom: 0px;
    }
} 
/*---------Addon part in cart page-------------*/
/*---------Recommanded cart page-------------*/
 :root {
    --purple-dark: #4a3a8a;
    --purple-mid: #6b4fa0;
    --purple-light: #9b7ed4;
    --blue-header: #5a6bbf;
    --coral: #c0504a;
    --coral-light: #e07060;
    --gold: #f5a623;
    --white: #ffffff;
    --bg-light: #f7f5fc;
    --text-dark: #2d2550;
    --text-mid: #555;
    --shadow: 0 4px 20px rgba(74,58,138,0.13);
    --card-radius: 14px;
  }
.rec-section {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: 10px;
  }

  /* ── Header bar – matches site's coral Cart header ── */
  .rec-header {
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%);
    padding: 8px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .rec-header h2 {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .rec-header h2 span.icon {
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
  }

  .rec-header .recnav-btns {
    display: flex;
    gap: 10px;
  }

  .recnav-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.18);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
    backdrop-filter: blur(4px);
  }

  .recnav-btn:hover {
    background: rgba(255,255,255,0.38);
    transform: scale(1.1);
  }

  .recnav-btn:active { transform: scale(0.96); }

  /* ── Slider track ── */
  .recslider-outer {
    padding: 24px 20px 20px;
    overflow: hidden;
    position: relative;
  }

  .recslider-track {
    display: flex;
    gap: 18px;
    transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
  }

  /* ── Product Card ── */
  .recprod-card {
    flex: 0 0 calc(20% - 14px);
    min-width: 0;
    background: var(--bg-light);
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1.5px solid #e8e2f5;
    transition: transform 0.22s, box-shadow 0.22s;
    position: relative;
  }

  .recprod-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(74,58,138,0.18);
  }

  /* Badge */
  .prod-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--coral);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    z-index: 2;
  }

  .prod-badge.new { background: #27ae60; }
  .prod-badge.hot { background: var(--gold); color: #333; }

  /* Image area */
  .prod-img-wrap {
    background: linear-gradient(135deg, #ede8f8, #f7f0fa);
    display: flex; align-items: center; justify-content: center;
    height: 160px;
    position: relative;
    overflow: hidden;
  }

  .prod-img-wrap img {
    width: 120px; height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: transform 0.3s;
  }

  .recprod-card:hover .prod-img-wrap img {
    transform: scale(1.07);
  }

  /* Info */
  .prod-info {
    padding: 14px 14px 16px;
  }

  .prod-brand {
    font-size: 0.7rem;
    color: var(--purple-mid);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
  }

  .prod-name {
    font-size: 0.92rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  /* Stars */
  .prod-recstars {
    display: flex; align-items: center; gap: 4px;
    /*margin-bottom: 10px;*/
  }

  .recstars {
    color: var(--gold);
    font-size: 0.78rem;
    letter-spacing: 1px;
  }

  .recrating-count {
    font-size: 0.7rem;
    color: #999;
    font-weight: 600;
  }
    .recstars .star {
        width: 10px;
        height: 10px;
    }
  /* Price row */
  .recprod-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .recprod-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--coral);
  }

  .recprod-price-old {
    font-size: 0.78rem;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 600;
  }

  .recadd-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-mid));
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(74,58,138,0.3);
    flex-shrink: 0;
  }

  .recadd-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 14px rgba(74,58,138,0.45);
  }

  .recadd-btn:active { transform: scale(0.94); }

  /* ── Dots ── */
  .slider-recdots {
    /*display: flex;*/
    justify-content: center;
    gap: 7px;
    padding: 0 20px 20px;
    display: none;
  }

  .recdot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, width 0.25s;
  }

  .recdot.active {
    background: var(--coral);
    width: 22px;
    border-radius: 4px;
  }

 @media (max-width: 900px) {
    .recprod-card { flex: 0 0 calc(33.33% - 13px); }
  }

  @media (max-width: 640px) {
    .recprod-card { flex: 0 0 calc(50% - 10px); }
    .rec-header h2 { font-size: 1rem; }
    .recslider-outer { padding: 16px 14px 14px; }
    .prod-img-wrap { height: 130px; }
    .prod-img-wrap img { width: 95px; height: 95px; }
  }

  @media (max-width: 400px) {
    .recprod-card { flex: 0 0 calc(45% - 8px); }
  }
/*---------Recommanded cart page-------------*/
/*---------Home Grocery Product slider-------------*/
.groceryslider-wrapper{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:40px 15px 80px;
    position:relative;
}
.groceryslider{
    position:relative;
    width:100%;
    height:380px;
}
.groceryslide{
   position:absolute;
    width:260px;
    height:380px;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    left:50%;
    top:50%;
    display:flex;
    flex-direction:column;
    transform-style:preserve-3d;
    transition:0.5s ease;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);

    will-change: transform, opacity;
    backface-visibility:hidden;
}
.groceryslide img{
    width:100%;
    height:130px;
    object-fit:cover;
}
.grocerycontent{
    padding:15px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    flex:1;
}
.grocerycontent h2{
    font-size:15px;
    margin-top: 2px;
    margin-bottom: 2px;
    /*margin-bottom:5px;*/
}
.grocerycontent p{
    color:#666;
    margin-bottom:2px;
    font-size:10px;
}
.grocerysmall-title{
    display:block;
    font-size:12px;
    color:#0066ff;
    font-weight:bold;
    margin-bottom:6px;
    text-transform:uppercase;
}
.groceryrating{
    margin:1px 0;
    color:#ffb400;
    font-size:10px;
}
.groceryprice-area{
    margin-bottom:5px;
}
.groceryold-price{
    text-decoration:line-through;
    color:#999;
    margin-right:10px;
    font-size:18px;
}
.groceryprice{
    font-size:20px;
    font-weight:bold;
    color:#ff5722;
}
.grocerycart-btn{
    border:none;
    background:#0066ff;
    color:#fff;
    padding:10px 18px;
    font-size:14px;
    border-radius:50px;
    cursor:pointer;
    margin-top:auto;
}

.grocerycontrols{
    position:absolute;
    width:100%;
    top:42%;
    left:0;
    z-index:999;
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}
.groceryproduct-option{
    width:100%;
    padding:5px;
    border-radius:10px;
    border:1px solid #ddd;
    margin-bottom:5px;
    outline:none;
}
.grocerycontrols button{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    font-size:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
    pointer-events:auto;
}
.no-option-space{
    height:35px;
}


/* Lightbox Overlay */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-box {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: popIn 0.25s ease;
}

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

.lightbox-box img {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 8px; right: 10px;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    line-height: 32px;
    text-align: center;
    z-index: 10;
}

.lightbox-close:hover {
    background: #ff4444;
    color: #fff;
}

/* Make slider images look clickable */
.groceryslide img {
    cursor: pointer;
}
#lightboxImg{
    max-width: 100%;
    max-height: 85vh;
    transition: opacity 0.25s ease;
    border-radius: 12px;
    display:block;
    margin:auto;
}

.lightbox-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s;
    z-index: 999999;
}

.lightbox-overlay.active{
    opacity: 1;
    visibility: visible;
}
#lightboxName {
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    word-break: break-word;
}
/*-------------Home Grocery Product slider------------*/
@media (max-width: 768px) {
    .groceryslider-wrapper {
        padding: 15px 8px 30px;
        /*z-index: 1;*/
    }
    .groceryslider {
        height: 190px !important;
        overflow: hidden;
    }
    .groceryslide {
        width: 110px !important;
        height: 190px !important;
        border-radius: 10px;
        overflow: hidden;
    }
    .groceryslide img {
        width: 100% !important;
        height: 60px !important;
        object-fit: cover;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; /* removes gray flash on tap */
        touch-action: manipulation;
    }
    .grocerycontent {
        padding: 4px 5px;
    }
    .grocerycontent h2 {
        font-size: 8px;
        margin: 1px 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #d45310;
    }
    .grocerycontent p {
        font-size: 7px;
        margin: 1px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: normal;
    }
    .grocerysmall-title {
        font-size: 7px;
        margin-bottom: 1px;
        display: block;
        line-height: 1.2;
    }
    .groceryrating {
        font-size: 6px;
        margin: 1px 0;
        line-height: 1;
    }
    .groceryprice-area {
        /*margin: 2px 0;*/
        line-height: 1.2;
        margin-bottom:1px
    }
    .groceryold-price {
        font-size: 7px;
        margin-right: 2px;
    }
    .groceryprice {
        font-size: 9px;
        font-weight: 600;
    }
    .grocerycart-btn {
        padding: 0px 5px;
        font-size: 7px;
        border-radius: 20px;
        width: 100%;
        display: block;
        margin-top: 2px;
        white-space: nowrap;
    }
    .grocerycontrols button {
        width: 26px;
        height: 26px;
        font-size: 11px;
        background: #f5625b;
        color: #fff;
    }
    .groceryproduct-option {
        padding: 0px 3px;
        font-size: 7px;
        margin-bottom: 1px;
        width: 100%;
        display: block;
    }
    .no-option-space {
        height: 14px;
    }
}
/*---------Home Grocery Product slider-------------*/