/* @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap'); */
@import url('../vendors/fonts/Nunito-Regular.ttf');
@import url('../vendors/fonts/Marhey/Marhey.ttf');

:root{
   --main-color:#004fc5;
   --orange:#f39c12;
   --green:#09ff00;
   --red:#f82323;
   --blue: #009dff;
   --black:#333;
   --white:#fff;
   --gold: gold;
   --light-color:#666;
   --gray:#938f8f;
   --light-bg:#eee;
   --border:.2rem solid var(--light-bg);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
   --btn-bg:#00ba2b;
   --panel:#efefef;
   --text:#111;
   --muted:#666;
   --radius:1.4rem;
   --shadow:0 1rem 2.5rem rgba(0,0,0,.08);


   --action-height: 56px;      /* height of the combined control */
  --action-font-size: 18px;   /* base font-size inside controls */
  --btn-bg: #2eae4f;          /* example button green; keep your var if using it */
  --btn-color: #fff;
  --qty-bg: rgba(255,255,255,0.06);
}

*{
   font-family: 'Marhey', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   text-transform: none;
   direction: rtl;
   
   font-optical-sizing: auto;
   font-weight: 700;
   font-style: normal;
   
}

*::selection{
   background-color: var(--main-color);
   color:var(--white);
}

::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track{
   background-color: transparent;
}

::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background-color: var(--light-bg);
}

section{
   padding:2rem;
   max-width: 1200px;
   margin:0 auto;
   margin-bottom: 6.5rem;/*for the bottom navbar to be above it the sections*/
}


/*splash*/
#splash-screen {
   display: var(--splash-display, flex);
   position: fixed;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background: var(--white);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: splashFadeIn 0.4s ease-out;
}

#splash-screen img {
   width: 100%; height: 100%;
   object-fit: cover;
   animation: splashZoom 2.5s ease-in-out;
}

#splash-screen.hide {
   animation: splashFadeOut 0.6s ease-in forwards;
}

@keyframes splashFadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

@keyframes splashFadeOut {
   0% { opacity: 1; transform: scale(1); }
   100% { opacity: 0; transform: scale(1.05); }
}

@keyframes splashZoom {
   0% { transform: scale(1); }
   50% { transform: scale(1.03); }
   100% { transform: scale(1); }
}
/*splash*/

.heading{
   font-size: 4rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
}

.heading span{
   font-size: 5.5rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
}

.heading span1{
   font-size: 4rem;
   color:var(--blue);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
   border-bottom: 2px solid #000000;
}

.headingList{
   font-size: 4rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
   /* width: 100%; */
   border-bottom: 2px solid #000000;
   
}

.headingProfile{
   font-size: 3rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
   /* width: 100%; */
   border-top: 2px solid #000000;
   
}

.btn,
.delete-btn,
.option-btn, .note-btn{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 2.0rem;
   text-transform: capitalize;
   color:var(--white);
   cursor: pointer;
   text-align: center;
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover{
   background-color: var(--black);
}





.btn{
   background-color: var(--btn-bg);
}

.option-btn{
   background-color: var(--orange);
}

.delete-btn{
   background-color: var(--red);
}

.note-btn{
   background-color: var(--btn-bg);
}

.flex-btn{
   display: flex;
   gap:1rem;
}

.flex-btn1{
   display: flex;
   gap:1rem;
}






.custom-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--btn-bg);
  color: var(--white);
  border: none;
  border-radius: .5rem;
  padding: 1rem 1.5rem;
  font-size: 1.8rem;
  text-transform: capitalize;
  cursor: pointer;
}

.custom-btn .qty-control {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: .4rem;
  overflow: hidden;
}

.custom-btn .qty-control span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.custom-btn .qty-control input {
  width: 3rem;
  height: 2.5rem;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  color: var(--white);
  font-size: 1.6rem;
}

.custom-btn .text {
  flex: 1;
  text-align: center;
  font-weight: 600;
}
/**/

.action-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

/* Keep your original .btn style but slightly adjusted to align */
.action-row .cbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;               /* button takes remaining width */
  min-width: 0;
  border: none;
  width: auto;
  padding: 0.65rem 0.5rem;
  border-radius: .5rem;
  font-size: 1.8rem;
  text-transform: capitalize;
  color:var(--white);
  cursor: pointer;
  text-align: center;
  background-color: var(--btn-bg);
}

/* Qty box styling to visually match the button height */
.action-row .qty-box {
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  overflow: hidden;
  
  background: rgba(0, 154, 46, 0.888); /* subtle background, change as needed */
  height: calc(1.8rem * 2.2);   /* roughly match button height (adjust if needed) */
  /* Alternatively set padding to match your .btn height precisely */
}

/* Buttons inside qty-box */
.action-row .qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  font-size: 3.0rem;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: var(--black);
}

/* Input style */
.action-row .qty-input {
  width: 3.3rem;             /* fixed width for quantity text */
  height: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 1.7rem;
  background: transparent;
  color: var(--white);
}

/* Make sure everything scales nicely on small screens */
/* @media (max-width: 480px) {
  .action-row { gap: 0.1rem; }
  .action-row .qty-input { width: 3.2rem; font-size: 1.4rem; }
  .action-row .cbtn { font-size: 1.6rem; padding: 0.4rem 1rem; }
}

@media (max-width: 363px) {
  .action-row { gap: 0.1rem; }
  
  .action-row .cbtn { font-size: 1.4rem; padding: 0.4rem 1rem; }
} */



/**/





.message1{
   position: sticky;
   top:0;
   max-width: 90%;
   margin:0 auto;
   background-color: var(--green);
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1.5rem;
   z-index: 1100;
}

.message1 span{
   font-size: 2.3rem;
   color:var(--black);
}

.message1 i{
   cursor: pointer;
   color:var(--red);
   font-size: 2.5rem;
}

.message1 i:hover{
   color:var(--black);
}


.toast {
   font-size: 2.2rem; /* Adjust font size */
   width: 350px; /* Set a fixed width or use percentages/vw */
   padding: 7.5px 7.5px; /* Adjust padding */
   text-align: center;
   animation: fadeOutLeft 0.5s ease-in-out forwards;
  animation-delay: 2.5s; /* Trigger before it disappears at 3s */
}

/* Keyframes */
@keyframes fadeOutLeft {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.empty{
   padding:1.5rem;
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color:var(--red);
   border-radius: .5rem;
   font-size: 2rem;
   text-transform: capitalize;
   width: 100%;
}

.no-results-message{
   padding:1.5rem;
   margin: 0rem 8rem 4rem 8rem;
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color:var(--red);
   border-radius: .5rem;
   font-size: 2rem;
   text-transform: capitalize;
}

.disabled{
   pointer-events: none;
   user-select: none;
   opacity: .5;
}

.disabled1{
   font-size: 2rem;
   font-weight: bold;
   opacity: .5;
}

@keyframes fadeIn{
   0%{
      transform: translateY(1rem);
   }
}


/* popup */
.popup{
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   display: none;
   z-index: 1201 ;
   background-color: var(--white);

 }
 
 .contentBox{
   position: relative;
   width: 600px;
   height: 400px;
   background: var(--white);
   border-radius: 20px;
   display: flex;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   
 }
 
 .contentBox .imgBox{
   position: relative;
   width: 300px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   
 }
 .contentBox .imgBox::before{
   content: '';
   position: absolute;
   width: 250px;
   height: 250px;
   display: flex;
   background: var(--white);
   border-radius: 50%;
   
 }
 
 .contentBox .imgBox img{
   position: relative;
   max-width: 250px;
   height: 400px;
   display: flex;
   z-index: 1 ;
 }
 
 .contentBox .content{
   position: relative;
   width: 300px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .contentBox .content h3{
   color: var(--main-color);
   line-height: 1em;
   font-weight: 300;
   font-size: 2.5em;
 }
 .contentBox .content h2{
   color: var(--main-color);
   line-height: 1em;
   font-size: 4em;
 }
 
 .contentBox .content h2 span{
   color: var(--dark-black);
   font-size: 0.75em;
   text-transform: uppercase;
 }
 .contentBox .content p{
   font-weight: 500;
   font-size: 2.1rem;
 }
 .contentBox .content a{
   display: inline-block;
   padding: 10px 20px;
   background: var(--main-color);
   color: var(--white);
   margin-top: 15px;
   text-decoration: none;
   border-radius: 10px;
   font-size: 20px;
 }
 .contentBox .content a:hover{
 
   background-color: var(--main-color);
 
 }
 
 .close{
   position: absolute;
   top: 20px;
   left: 20px;
   width: 40px;
   height: 40px;
   background: #f3f3f3 url(../images/delete.png);
   background-repeat: no-repeat;
   background-size: 10px;
   background-position: center;
   cursor: pointer;
   border-radius: 50%;
   z-index: 10;
 }
 
 .offerbtn {
   margin-top: 1rem;
   display: inline-block;
   padding:.8rem 3rem;
   font-size: 1.7rem;
   cursor: pointer;
   color:#fff;
   background:var(--main-color);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   position: relative;
   z-index: 0;
   overflow:hidden;
 }
 
 .offerbtn::before{
   content: '';
   position: absolute;
   top:0; left:0;
   height: 100%;
   width:0%;
   background:var(--gold);
   z-index: -1;
   transition: .2s ease-out;
 }
 
 .offerbtn:hover::before{
   right:0;
   width:100%;
 }
 
 /* popup */

.header{
   position: sticky;
   top:0; left:0; right:0;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   z-index: 1200;
   text-transform: capitalize;
   height: 7.5rem;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}


/* .header .flex .profile-container {
   position: relative;
   cursor: pointer;
} */

 
 .header .flex .badge-icon {
   position: absolute;
   width: 30px;
   height: 30px;
   bottom: -7px;
   right: -12px;
   
 }

.header .flex .profile-container {
    position: relative;
    height: 4.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.header .flex .logo {
    height: 4.5rem;
    width: 4.5rem; /* adjust to your logo */
    display: flex;
    align-items: center;
}

.header .flex .logo img {
    width: 250%;
    height: 250%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.header .flex .logo span{
   font-size: 2.5rem;
   color:var(--main-color);
}




.header .flex .logo-word{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .logo-word span{
   font-size: 3.0rem;
   color:var(--main-color);
}



.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2.9rem;
   color:var(--black);
}

.header .flex .navbar a.currency{
   margin:0 1rem;
   font-size: 3.0rem;
   color:var(--black);
   background-color: #eb6868;
   border-radius: 20px;
   padding: 0 1rem 0 1rem;
}

.header .flex .navbar a.currency:hover{
   color:var(--black);
   text-decoration: none;
}

.header .flex .navbar a:hover{
   color:var(--main-color);
   text-decoration: none;
}


.header .flex .icons > *{
   margin-right: 1rem;
   font-size: 2.9rem;
   cursor: pointer;
   color:var(--black);
}

.header .flex .icons a.back{
   margin-right: 1rem;
   font-size: 3.0rem;
   cursor: pointer;
   color:var(--black);
}

.header .flex .icons > *:hover{
   color:var(--main-color);
}

.header .flex .icons a span{
   font-size: 2rem;
   color:var(--main-color);
}

/* .header .flex .icons a span#cart-count{
   font-size: 2.7rem;
   font-weight: bold;
   color:var(--red);
} */

.cart-link {
   position: relative;
   display: inline-block;
}

.cart-link i {
   font-size: 3rem; /* adjust as needed */
}

/* this is for the header cart position */
/* .cart-link #cart-count { 
   position: absolute;
   top: -12px;   
   right: -10px;
   background: var(--red);
   color: #ffffff;
   font-size: 1.8rem;
   font-weight: bold;
   padding: 3px 5px;
   border-radius: 50%;
   line-height: 1;
   
} */

/* this is for the botton-nav cart position */
.cart-link #cart-count {
   position: absolute;
   top: 3px;  
   right: 5px; 
   background: var(--red);
   color: #ffffff;
   font-size: 2.0rem;
   font-weight: bold;
   padding: 3px 5px;
   border-radius: 50%;
   line-height: 1;
   
}


.header .flex .profile{
   position: absolute;
   top:120%; left:2rem;
   background-color: var(--white);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
   padding:2rem;
   width: 30rem;
   padding-top: 1.2rem;
   display: none;
   animation:fadeIn .2s linear;
}

.header .flex .profile.active{
   display: inline-block;
}

.header .flex .profile p{
   text-align: center;
   color:var(--black);
   font-size: 2rem;
   margin-bottom: 1rem;
}

#menu-btn{
   display: none;
}






/*new home banner*/
.banner-container{
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction:column;
    background-color: #ffffff;
}

.banner-container .banner{
    /* background:linear-gradient(-55deg, #75e6ff 29%, #3054d6 29.1%, #3062d6 68%, #75e6ff 68.1%); */
    background:linear-gradient(-55deg, #3062d6 29%, #3054d6 29.1%, #3062d6 68%, #3062d6 68.1%);
    border-radius: 5px;
    margin:4px;/* was 30px */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0 5px 10px #0005;
    overflow: hidden;
}

.banner-container .banner .shoe{
    flex:1 1 150px;
    padding:15px;
    text-align: center;
}

.banner-container .banner .shoe img{
    width:70%;
}

.banner-container .banner .content{
    flex:1 1 250px;
    text-align: center;
    padding:10px;
    text-transform: uppercase;
}

.banner-container .banner .content span{
    color:#eee;
    font-size: 25px;
}

.banner-container .banner .content h3{
    color:#000000;
    font-size: 6rem;
}

.banner-container .banner .content p{
    color:#000000;
    font-size: 5rem;
    padding:10px 0;
}

.banner-container .banner .content .btn{
    display: block;
    height:40px;
    width:150px;
    line-height: 40px;
    background: #fff;
    color:#d63031;
    margin:5px auto;
    text-decoration: none;
}

.banner-container .banner .women{
    position: relative;
    bottom: -33px;
    padding:10px;
    flex:1 1 250px;
}

.banner-container .banner .women img{
    width:100%;
}

@media (max-width:600px){

    .banner-container .banner .shoe img {
      width: 120%;
    }
    .banner-container .banner .women{
        display: none;
    }

    .banner-container .banner .shoe {
    flex: 1 1 116px;
    padding: 15px;
    text-align: center;
   }

   .banner-container .banner .content h3{
    font-size: 4.5rem;
   }

   .banner-container .banner .content p{
    font-size: 4rem;
   }


}


@media (max-width:425px){

    .banner-container .banner .shoe img {
      width: 100%;/*50%*/
    }
 

   .banner-container .banner .content h3{
    font-size: 4.5rem;
   }

   .banner-container .banner .content p{
    font-size: 3.5rem;
   }


}

@media (max-width:375px){

    .banner-container .banner .shoe img {
      width: 180%;/*50%*/
    }

    .banner-container .banner .shoe {
    flex: 1 1 61px;
    padding: 15px;
    text-align: center;
   }
 

   .banner-container .banner .content h3{
    font-size: 3.5rem;
   }

   .banner-container .banner .content p{
    font-size: 3.5rem;
   }


}

@media (max-width:318px){

    .banner-container .banner .shoe img {
      display: none;
    }

    .banner-container .banner .shoe {
    flex: 1 1 61px;
    padding: 15px;
    text-align: center;
   }
 

   .banner-container .banner .content h3{
    font-size: 3.5rem;
   }

   .banner-container .banner .content p{
    font-size: 3.5rem;
   }


}
/*new home banner*/



/*new can delete*/
.home{
   max-height: 350px;
   padding: 0 0 0 0;
}
/*new can delete*/
.home-bg{
   background:url(../images/home-bg-color2.png) no-repeat;
   background-size: cover;
   background-position: center;
}

.home-bg .home .slide{
   /*display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
   padding-bottom: 6rem;
   padding-top: 2rem;
   user-select: none;*/
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   height: 30rem;
   background-size: cover !important;
   background-position: center !important;
}

.home-bg .home .slide .image{
   flex:1 1 40rem;/*1 1 40rem*/
}

.home-bg .home .slide .image img{
   height: 30rem;/*40rem*/
   width: 100%;
   object-fit: contain;
}

.home-bg .home .slide .content{
   flex:1 1 40rem;
}

.home-bg .home .slide .content span{
   font-size: 2rem;
   color:var(--white);
}

.home-bg .home .slide .content h3{
   margin-top: 1rem;
   font-size: 4rem;
   color:var(--white);
   text-transform: uppercase;
}

.home-bg .home .slide .content .btn{
   display: inline-block;
   width: auto;
}

/**/
.home-bg .home .slide .content .add-to-btn{
   display: inline-block;
   width: auto;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 3.5rem;
   text-transform: capitalize;
   color:var(--white);
   cursor: pointer;
   text-align: center;
   background: var(--main-color);
}
/**/

.swiper-pagination-bullet-active{
   background-color: var(--main-color);
}
/*for swiper category slider*/
.category .slide{
   box-shadow: var(--box-shadow);
   border:var(--border);
   text-align: center;
   padding:3rem;
   background: var(--white);
   border-radius: 10px;
   margin-bottom:15rem;
}

.category .slide:hover{
   background-color: var(--white);
}

/* .category .slide:hover img{
   filter:invert();
} */

.category .slide:hover h3{
   color:var(--main-color);
}

.category .slide img{
   height: 12rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
   user-select: none;
   background-color: none;
}

.category .slide h3{
   font-size: 2rem;
   color:var(--black);
   user-select: none;
}

/*categoryAll STARTS*/

.categoryAllApp{
   text-align: center;
   align-items: center;
   margin: auto;
   top: 7%;
   width: 100%;
  position: absolute;
}
.categoryAllApp img{
   height: 35rem;
   width: 100%;
   object-fit: contain;
}

.categoryAllApp .add-to-btn{
   display: inline-block;
   width: auto;
   border-radius: 35px;
   padding:2.5rem 2.5rem;
   font-size: 3.5rem;
   text-transform: capitalize;
   color:var(--black);
   cursor: pointer;
   text-align: center;
   background: #00ffe5;
   margin: 3rem;
}
.categoryAllApp p{
   text-align: center;
   align-items: center;
   margin: auto;
   top: 90%;
   left: 10%;
  position: absolute;
  font-size: 30px;
}
/**/

/* .categoryAll{
   background-color: var(--bg-second-color);
   } */
   
/**/
.categoryAll .add-to-btn{
   display: inline-block;
   width: auto;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 3.5rem;
   text-transform: capitalize;
   color:var(--white);
   cursor: pointer;
   text-align: center;
   background: var(--main-color);
   margin: 3rem;
}
/**/      
   
.categoryAll .box-container {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1.0rem;
}
   
.categoryAll .box-container .box {
   padding: 1rem;
   border: 0.1rem solid var(--gray);
   text-align: center;
   background-color: #fff;
   border-radius: .9rem;
}
   
.categoryAll .box-container .box:hover {
   background: none;
}
   
   
.categoryAll .box-container .box img {
   height: 6rem;
   /* width: 80%; */
   margin-bottom: 0.1rem;
}
   
.categoryAll .box-container .box h3 {
   font-size: 1.4rem;
   color: var(--black);
   text-align: center;
}
   
.categoryAll .box-container .box:hover h3 {
   color: var(--main-color);
}
   
/*CATEGORY ALL ENDS*/












/*category stores*/      
   
.box-container-store {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1.0rem;
   margin: 1rem;
}
   
.box-container-store .box {
   padding: 1rem;
   border: 0.1rem solid var(--gray);
   text-align: center;
   background-color: #fff;
   border-radius: .9rem;
}
   
.box-container-store .box:hover {
   background: none;
}
   
   
.box-container-store .box img {
   height: 6rem;
   /* width: 80%; */
   margin-bottom: 0.1rem;
}
   
.box-container-store .box h3 {
   font-size: 1.9rem;
   color: var(--black);
   text-align: center;
}
   
.box-container-store .box:hover h3 {
   color: var(--main-color);
}

.box-container-store .box h2 {
   font-size: 1.6rem;
   color: var(--black);
   text-align: center;
}
   
/*CATEGORY ALL ENDS*/
 
.home-products .slide{
   position: relative;
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-bottom: 5rem;
   overflow: hidden;
   user-select: none;
}

.home-products .slide img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 2rem;
}

/*27/1/2023 update for qty name*/
.home-products .slide .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.home-products .slide .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   /* padding-left: 8.5rem; *//*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.home-products .slide .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.home-products .slide .name{
   font-size: 2rem;
   color:var(--black);
}

.home-products .slide .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
}

.home-products .slide .flex .qty{
   width: 7rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

/*added on 3/2/2023 // plus and minus for quantity*/
.home-products .slide .flex .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.0rem;
   color:var(--white);
   cursor: pointer;
}

.home-products .slide .flex .fa-minus:hover{
   background-color: var(--black);
}

.home-products .slide .flex .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
}

.home-products .slide .flex .fa-plus:hover{
   background-color: var(--black);
}
/*3/2/2023*/

.home-products .slide .flex .price{
   margin:1rem 0;
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
}

.home-products .slide .fa-heart,
.home-products .slide .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.home-products .slide .fa-heart{
   right: -6rem;
}

.home-products .slide .fa-eye{
   left: -6rem;
}

.home-products .slide .fa-heart:hover,
.home-products .slide .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.home-products .slide:hover .fa-heart{
   right: 1rem;
}

.home-products .slide:hover .fa-eye{
   left: 1rem;
}



.quick-view form{
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-top: 1rem;
}

.quick-view form .row{
   display: flex;
   align-items: center;
   gap:1.5rem;
   flex-wrap: wrap;
}

.quick-view form .row .image-container{
   margin-bottom: 2rem;
   flex:1 1 40rem;
}

.quick-view form .row .image-container .main-image img{
   height: 30rem;
   width: 100%;
   object-fit: contain;
}

.quick-view form .row .image-container .sub-image{
   display: flex;
   gap:1.5rem;
   justify-content: center;
   margin-top: 2rem;
}

.quick-view form .row .image-container .sub-image img{
   height: 7rem;
   width: 10rem;
   object-fit: contain;
   padding:.5rem;
   border:var(--border);
   cursor: pointer;
   transition: .2s linear;
}

.quick-view form .flex .image-container .sub-image img:hover{
   transform: scale(1.1);
}

.quick-view form img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 2rem;
}

.quick-view form .row .content{
   flex:1 1 40rem;
}

/*27/1/2023 update for qty name*/
.quick-view form .row .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.quick-view form .row .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   /* padding-left: 8.5rem; *//*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.quick-view form .row .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.quick-view form .row .content .name{
   font-size: 2rem;
   color:var(--black);
}

.quick-view form .row .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
   margin:1rem 0;
}

.quick-view form .row .flex .qty{
   width: 7rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   text-align: center;
}


/*added on 3/22/2023 // plus and minus for quantity | qty-group-box */

.quick-view form .row .qty-box {
   display: flex;
   align-items: center;
   gap:1rem;
   flex-wrap: wrap;
}


.quick-view form .row .flex .qty-box .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
   padding: 5px 5px;
}

.quick-view form .row .fa-minus:hover{
   background-color: var(--black);
}

.quick-view form .row .flex .qty-box .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
   padding: 5px 5px;
}

.quick-view form .row .fa-plus:hover{
   background-color: var(--black);
}
/*3/2/2023*/


/**/
.quick-view form .row .flex .inputBox{
   width: 35%;
}

.quick-view form .row .flex .inputBox .box{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   font-size: 1.8rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color: var(--light-bg);
}

.quick-view form .row .flex .inputBox span{
   font-size: 1.8rem;
   color:var(--light-color);
}

/**/

.quick-view form .row .flex .price{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
}

.quick-view form .row .flex .sale-price{
   font-size: 2rem;
   color:var(--red);
   margin-right: auto;
}

.quick-view form .row .flex .sale-price del{
   font-size: 2rem;
   color:var(--black);
   margin-right: auto;
   text-decoration: line-through;
}
.quick-view .box-container .box .flex .sale-price del{
   font-size: 2rem;
   color:var(--black);
   margin-left: auto;
   text-decoration: line-through;
   
}

.quick-view form .row .content .details{
   font-size: 1.6rem;
   color:var(--light-color);
   line-height: 2;
}

/**/

.products .filter-buttons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding-bottom: 2.5rem;
   gap: 2rem;
}

.products .filter-buttons h1{
   color: #e74c3c;

}
   
.products .filter-buttons .buttons {
   font-size: 2.2rem;
   color: var(--black);
   cursor: pointer;
   background-color: var(--main-color);
   border-radius: 10px;
   padding: 0.2rem;
}
   
.products .filter-buttons .buttons:hover, .products .filter-buttons .buttons.active {
   color: var(--main-color);
   background-color: var(--white);
}
/**/

.products .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.products .box-container .box{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 2rem;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
}

.products .box-container .product-form{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 2rem;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
}
/**/
.products .box-container .box.hide {
   display: none;
 }
 
 .products .box-container .box.active {
   -webkit-animation: fadeUp .4s linear;
           animation: fadeUp .4s linear;
 }
/**/
.products .box-container .box img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart{
   right: -6rem;
}

.products .box-container .box .fa-eye{
   left: -6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.products .box-container .box:hover .fa-heart{
   right:1rem;
}

.products .box-container .box:hover .fa-eye{
   left:1rem;
}

/*27/1/2023 update for qty name*/
.products .box-container .box .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   padding-left: 8.5rem;/*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products .box-container .box .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products .box-container .box .name{
   font-size: 2rem;
   color:var(--black);
}

.products .box-container .box .flex{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex .qty{
   width: 7rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.products .box-container .box .flex .price{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}

/*added on 3/2/2023 // plus and minus for quantity*/
.products .box-container .box .flex .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.0rem;
   color:var(--white);
   cursor: pointer;
}

.products .box-container .box .flex .fa-minus:hover{
   background-color: var(--black);
}

.products .box-container .box .flex .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
}

.products .box-container .box .flex .fa-plus:hover{
   background-color: var(--black);
}
/**/

/*27/1/2023 update for qty name*/
.products .box-container .box .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   /* padding-left: 8.5rem; *//*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products .box-container .box .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products .box-container .box .flex .sale-price{
   font-size: 2.3rem;
   color:var(--red);
   margin-left: auto;
}

.products .box-container .box .flex .sale-price del{
   font-size: 2rem;
   color:var(--black);
   margin-left: auto;
   text-decoration: line-through;
   
}







/*products ajax stylr with product-form*/


/**/

/* .products-ajax .filter-buttons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   padding-bottom: 2.5rem;
   gap: 2rem;
}

.products-ajax .filter-buttons h1{
   color: #e74c3c;

}
   
.products-ajax .filter-buttons .buttons {
   font-size: 2.2rem;
   color: var(--black);
   cursor: pointer;
   background-color: var(--blue);
   border-radius: 20px;
   padding: 0.5rem;

}
   
.products-ajax .filter-buttons .buttons:hover, .products .filter-buttons .buttons.active {
   color: var(--main-color);
   background-color: var(--white);
} */










/* .category-slider {
    display: flex;
    align-items: center;
    position: sticky; 
    top: 0; 

    z-index: 900; 
    padding: 10px 0;
    margin-top: 20px;

    justify-content: center;
    border-radius: 5px;
}*/

/* .category-slider-spacer {
    height: 160px; 
}  */

.products-ajax .filter-buttons {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  gap: 1rem;
  padding: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  border-bottom: 1px solid #636363;
  margin-bottom: 0.8rem;
}

.products-ajax .filter-buttons .buttons {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-size: 1.9rem;
  color: var(--black);
  cursor: pointer;
  background-color: #00d5ff;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  user-select: none;
  transition: background 0.3s;
  margin-bottom: .0rem;
  outline: none; /* Removes the default focus outline */
  border: none;
}

.products-ajax .filter-buttons .buttons:focus,
.products-ajax .filter-buttons .buttons:active {
  outline: none;
  box-shadow: 0 0 0 1px #00d5ff;
  border-radius: 20px; 
}



/* .products-ajax .filter-buttons .buttons:hover, */
.products-ajax .filter-buttons .buttons.active {
  color: var(--black);
  background-color: var(--white);
}



.products-ajax .filter-buttons::-webkit-scrollbar {
  display: none;
}
.products-ajax .filter-buttons {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/**/


.products-ajax .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
   margin-bottom: 10rem;
}


.products-ajax .box-container .product-form{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 2rem;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
}
/**/
.products-ajax .box-container .product-form.hide {
   display: none;
 }
 
 .products-ajax .box-container .product-form.active {
   -webkit-animation: fadeUp .4s linear;
           animation: fadeUp .4s linear;
 }
/**/
.products-ajax .box-container .product-form img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products-ajax .box-container .product-form .fa-heart,
.products-ajax .box-container .product-form .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products-ajax .box-container .product-form .fa-heart{
   right: -6rem;
}

.products-ajax .box-container .product-form .fa-eye{
   left: -6rem;
}

.products-ajax .box-container .product-form .fa-heart:hover,
.products-ajax .box-container .product-form .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.products-ajax .box-container .product-form:hover .fa-heart{
   right:1rem;
}

.products-ajax .box-container .product-form:hover .fa-eye{
   left:1rem;
}

/*27/1/2023 update for qty name*/
.products-ajax .box-container .product-form .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products-ajax .box-container .product-form .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   padding-left: 8.5rem;/*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products-ajax .box-container .product-form .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products-ajax .box-container .product-form .name{
   font-size: 2rem;
   color:var(--black);
}

.products-ajax .box-container .product-form .flex{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products-ajax .box-container .product-form .flex .qty{
   width: 7rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.products-ajax .box-container .product-form .flex .price{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}

/*added on 3/2/2023 // plus and minus for quantity*/
.products-ajax .box-container .product-form .flex .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.0rem;
   color:var(--white);
   cursor: pointer;
}

.products-ajax .box-container .product-form .flex .fa-minus:hover{
   background-color: var(--black);
}

.products-ajax .box-container .product-form .flex .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
}

.products-ajax .box-container .product-form .flex .fa-plus:hover{
   background-color: var(--black);
}
/**/

/*27/1/2023 update for qty name*/
.products-ajax .box-container .product-form .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products-ajax .box-container .product-form .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   /* padding-left: 8.5rem; *//*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products-ajax .box-container .product-form .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products-ajax .box-container .product-form .flex .sale-price{
   font-size: 2.3rem;
   color:var(--red);
   margin-left: auto;
}

.products-ajax .box-container .product-form .flex .sale-price del{
   font-size: 2rem;
   color:var(--black);
   margin-left: auto;
   text-decoration: line-through;
   
}
/*products ajax stylr with product-form*/





/*products preview for product-form*/
.products-preview{
  position: fixed;
  top:0; right:0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
}

.products-preview .preview{
  display: none;
  padding: 1.5rem;
  text-align: center;
  background: #eee;
  position: relative;
  margin:2rem;
  width: 50rem;
  height: 45rem;
  z-index: 1000;
  border-radius: 20px;
  margin-top: 70px;
}

.products-preview .preview.active{
  display: inline-block;
}

.products-preview .preview img{
  height: 20rem;
  margin:3rem;
}


.products-preview .preview .fa-times{
  position: absolute;
  top:1rem; right:1.5rem;
  cursor: pointer;
  color:var(--black);
  font-size: 4rem;
}

.products-preview .preview .fa-times:hover{
  transform: rotate(90deg);
}

.products-preview .preview h3{
  color:var(--black);
  padding:.5rem 0;
  font-size: 2.5rem;
}

.products-preview .preview .stars{
  padding:1rem 0;
  font-size: 1.7rem;
}

.products-preview .preview .stars i{
  color:var(--main-color);
}

.products-preview .preview .stars span{
  color:#999;
}

.products-preview .preview p{
  line-height: 1.5;
  padding:1rem 0;
  font-size: 1.7rem;
  color:#434343;
}

.products-preview .preview .price{
  padding:1rem 0;
  font-size: 3.0rem;
  color:var(--black);
  font-weight: bold;
}

.products-preview .preview .buttons{
  display: flex;
  gap:1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.products-preview .preview .buttons a{
  flex:1 1 16rem;
  padding:1rem;
  font-size: 1.8rem;
  color:var(--black);
  border:.1rem solid var(--black);
}

.products-preview .preview .buttons a.cart{
  background: var(--black);
  color:var(--white);
}

.products-preview .preview .buttons a.cart:hover{
  background: var(--black);
}

.products-preview .preview .buttons a.buy:hover{
  background: var(--main-color);
  color:var(--white);
}
/*products preview for product-form*/










/* menu list for cart */


.menu-section1 .category {
    padding: 20px;
    font-size: 3.0rem;
    border-radius: 20px;
    width: 100%;
    margin-top: 100px;
    
}

.menu-section1 .category h2 {
    background: #282828;
    color: #30ff4c;
    padding: 5px;
    border-radius: 5px;
}

.menu-section1 .menu-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    color: #000000;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
     border-radius: 20px;
}

.menu-section1 .menu-item img {
    width: 12rem;
    height: 12rem;
    object-fit: contain;
    cursor: pointer;
    position: relative;
}

.menu-section1 .menu-item .info {
    padding: 10px;
    flex: 1;
}

.menu-section1 .menu-item h3 {
    margin: 0;
    font-size: 1.8rem;
}

.menu-section1 .menu-item p {
    color: var(--black);
    margin: 5px 0 0;
    font-size: 2.1rem;
}




.menu-section1 .menu-item .qty-box {
    display: flex;
    align-items: center;
    margin-top: 3px;
    flex-wrap: wrap;
    gap: 1rem;
    flex-direction: row;
}

.menu-section1 .menu-item .qty-box .qty-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-section1 .menu-item .qty-box .fa-minus,
.menu-section1 .menu-item .qty-box .fa-plus {
    height: 3.0rem;
    width: 3.0rem;
    font-size: 2.2rem;
    background-color: var(--main-color);
    color: var(--white);
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.menu-section1 .menu-item .fa-minus:hover,
.menu-section1 .menu-item .fa-plus:hover {
    background-color: var(--black);
}

.menu-section1 .menu-item .qty-box .qty {
    width: 9rem;
    text-align: center;
    font-size: 2.6rem;
    height: 6.4rem;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.menu-section1 .menu-item .remove-btn {
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    font-size: 1.6rem;
    background-color: red;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.menu-section1 .menu-item .remove-btn:hover {
    background-color: darkred;
}

/* Responsive behavior */
@media (max-width: 600px) {
    /* .menu-section1 .menu-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    } */

    /* .menu-section1 .menu-item .qty-box {
        flex-direction: column;
        align-items: center;
    } */

    /* .menu-section1 .menu-item .qty-box .qty-controls {
        flex-direction: row;
        justify-content: center;
    } */

    .menu-section1 .menu-item .qty-box .qty {
      height: 4.9rem;
      margin-top: 0.5rem;
   }

    .menu-section1 .menu-item .qty-box .qty-controls {
        flex-direction: row-reverse;
        justify-content: center;
    }
}







.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
}

.popup-box {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 400px;
  max-width: 90%;
  position: relative;
  margin:5rem auto;
}

.popup-box textarea {
  width: 100%;
  height: 80px;
  margin-bottom: 1rem;
  resize: none;
  padding: 0.5rem;
  font-size: 1.8rem;
}

.popup-box button {
  padding: 0.5rem 1rem;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 2rem;
}

/* menu list for cart */



/* .form-container form{
   background-color: var(--white);
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   margin:0 auto;
   max-width: 50rem;
}

.form-container form h3{
   font-size: 2.5rem;
   text-transform: uppercase;
   color:var(--black);
}

.form-container form p{
   font-size: 2rem;
   color:var(--light-color);
   margin:1.5rem 0;
}

.form-container form .box{
   margin:1rem 0;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);  
   width: 100%;
   border-radius: .5rem;
} */
.form-container{
   margin-bottom:10rem;
}

.form-container form{
   /* background:#fff;
   border:var(--border);
   width:40rem;
   padding:2rem;
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   margin:2rem; */

   background-color: var(--white);
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   margin:0 auto;
   max-width: 50rem;
}

.form-container form h3{
   font-size: 3.5rem;
   text-transform: uppercase;
   color:var(--black);
   text-align: center;
}

.form-container form span{
   display: block;
   font-size: 2.5rem;
   padding-top: 1rem;
   text-align: right;
}

.form-container form .box{
   width: 100%;
   margin:.7rem 0;
   font-size: 1.9rem;
   border:var(--border);
   border-radius: .5rem;
   padding:1rem 1.2rem;
   color:var(--black);
   text-transform: none;
}

.form-container form .select{
   width: 100%;
   margin:.7rem 0;
   font-size: 1.6rem;
   border:var(--border);
   border-radius: .5rem;
   padding:1rem 1.2rem;
   color:var(--black);
   text-transform: none;
}

.form-container form .option{
   font-size: 1.9rem;
   color:var(--black);
}

.form-container form .checkbox{
   display:flex;
   align-items: center;
   gap:.5rem;
   padding:1rem 0;
}

.form-container form .checkbox label{
   font-size: 2.5rem;
   color:var(--black);
   cursor: pointer;
}

.form-container form .btn{
   text-align: center;
   width:100%;
   margin:1.5rem 0;
   font-size: 2.5rem;
}

.form-container form p{
   padding-top: .8rem;
   color:var(--black);
   font-size: 1.8rem;
}


.phone-input {
   position: relative;
   width: 100%;
   margin:.7rem 0;
   font-size: 1.9rem;
}

.phone-input .prefix {
   position: absolute;
   top: 40%;
   left: 1rem;
   transform: translateY(-50%);
   font-size: 2.3rem;
   color: var(--black);
   pointer-events: none; /* so user can't click it */
   
}



.phone-input input {
   width: 100%;
   padding: 1rem 1.2rem 1rem 8rem; /* left padding to make space for prefix */
   font-size: 2.5rem;
   border: var(--border);
   border-radius: .5rem;
   color: var(--black);
   text-transform: none;
   box-sizing: border-box;
   direction: ltr;
   top: 40%;
}

.checkout-orders form .flex .phone-input {
   position: relative;
   width: 100%;
   margin:.7rem 0;
   font-size: 1.9rem;
}

.checkout-orders form .flex .phone-input .prefix {
   position: absolute;
   top: 40%;
   left: 1rem;
   transform: translateY(-50%);
   font-size: 2.3rem;
   color: var(--black);
   pointer-events: none; /* so user can't click it */
   
}



.checkout-orders form .flex .phone-input input {
   width: 100%;
   padding: 1rem 1.2rem 1rem 8rem; /* left padding to make space for prefix */
   font-size: 2.5rem;
   border: var(--border);
   border-radius: .5rem;
   color: var(--black);
   text-transform: none;
   box-sizing: border-box;
   direction: ltr;
   top: 40%;
}




.login-form-container form p a{
   color:var(--green);
   text-decoration: underline;
}

/**/
#togglePassword{
   margin-right: 40rem;
   position: relative;
   bottom: 40px;
   cursor: pointer;
   color: var(--black);
   font-size: 20px;
 }
/**/


.about .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
   text-transform: capitalize;
}

.about .row .image{
   flex:1 1 40rem;
}

.about .row .image img{
   width: 100%;
}

.about .row .content{
   flex:1 1 40rem;
}

.about .row .content h3{
   font-size: 3rem;
   color:var(--black);
}

.about .row .content p{
   line-height: 2;
   font-size: 1.5rem;
   color:var(--light-color);
   padding:1rem 0;
}

.about .row .content .btn{
   display: inline-block;
   width: auto;
}

.reviews .slide{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   margin-bottom: 5rem;
   user-select: none;
}

.reviews .slide img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   margin-bottom: .5rem;
}

.reviews .slide p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.5rem;
   color:var(--light-color);
}

.reviews .slide .stars{
   display: inline-block;
   margin-bottom: 1rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   border-radius: .5rem;
}

.reviews .slide .stars i{
   margin:0 .3rem;
   font-size: 1.7rem;
   color:var(--orange);
}

.reviews .slide h3{
   font-size: 2rem;
   color:var(--black);
}


   
   .contact .icons-container {
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];
         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
     gap: 1.5rem;
     margin-bottom: 10rem;
   }
   
   .contact .icons-container .icons {
     padding: 2rem;
     border-radius: .5rem;
     border: var(--border);
     -webkit-box-shadow: var(--box-shadow);
             box-shadow: --box-shadow;
     text-align: center;
     border: 1px solid #000;
   }
   
   .contact .icons-container .icons i {
     font-size: 4.5rem;
     height: 6rem;
     width: 6rem;
     line-height: 6rem;
     border: var(--border);
     border-radius: 50%;
     color: var(--black);
   }
   
   .contact .icons-container .icons h3 {
     font-size: 3.0rem;
     padding: 1rem 0;
     color: var(--black);
     border-bottom: 1px solid #000;
   }
   
   .contact .icons-container .icons p {
     font-size: 2.5rem;
     line-height: 2;
     color: var(--black);
   }
   
   .contact .icons-container .icons p span{
     font-size: 2.5rem;
     line-height: 2;
     color: var(--black);
     text-transform: lowercase;
   }



   .contact .icons-container .icons-time {
     padding: 2rem;
     border-radius: .5rem;
     border: var(--border);
     -webkit-box-shadow: var(--box-shadow);
             box-shadow: --box-shadow;
     text-align: center;
     border: 1px solid #000;
   }
   
   .contact .icons-container .icons-time i {
     font-size: 4.5rem;
     height: 6rem;
     width: 6rem;
     line-height: 6rem;
     border: var(--border);
     border-radius: 50%;
     color: var(--black);
   }
   
   .contact .icons-container .icons-time h3 {
     font-size: 3.0rem;
     padding: 1rem 0;
     color: var(--black);
     border-bottom: 1px solid #000;
   }
   
   .contact .icons-container .icons-time p {
     font-size: 2.5rem;
     line-height: 2;
     color: var(--black);
   }
   
   .contact .icons-container .icons-time p span{
     font-size: 2.5rem;
     line-height: 2;
     color: var(--black);
     text-transform: lowercase;
   }
   
   .contact .row {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     gap: 1.5rem;
     margin-top: 2rem;
     
   }
   
   .contact .row form {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 42rem;
             flex: 1 1 42rem;
     padding: 2rem;
     border: var(--border);
     -webkit-box-shadow: --box-shadow;
             box-shadow: --box-shadow;
     border-radius: .5rem;
     background-color: var(--white);

   }
   
   .contact .row form h3 {
     font-size: 3rem;
     padding-bottom: 1rem;
     color: var(--black);
   }
   

   .contact .row form .box{
   margin:1rem 0;
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   }
   
   .contact .row form textarea {
     height: 15rem;
     resize: none;
     width: 100%;
   }


   .contact .row .map {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 42rem;
             flex: 1 1 42rem;
     width: 100%;
     padding: 2rem;
     border: var(--border);
     border-radius: .5rem;
     -webkit-box-shadow: --box-shadow;
             box-shadow: --box-shadow;
   }

   
.search-form{
      position: sticky;
      top: 0px;
      z-index: 1000;
}

.search-slider {
    height: 77px; /* Same height as slider container */
}

.search-form form{
   display: flex;
   gap:1rem;
}

.search-form form input{
   width: 100%;
   border:var(--border);
   border-radius: 20px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.7rem;
   font-size: 2rem;
   color:var(--black);
}

.search-form form button{
   font-size: 2.5rem;
   height: 5.5rem;
   line-height: 5.5rem;
   background-color: var(--main-color);
   cursor: pointer;
   color:var(--white);
   border-radius: .5rem;
   width: 6rem;
   text-align: center;
}

.search-form form button:hover{
   background-color: var(--black);
}

@media (max-width: 1000px) {
  .search-slider {
    height: 68px; /* Same height as slider container */
}

}
@media (max-width: 450px) {
  .search-slider {
    height: 62px; /* Same height as slider container */
   }
}




.wishlist-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
}

.wishlist-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.wishlist-total p span{
   color:var(--red);
}

/*27/1/2023 update for qty name*/

.shopping-cart .box-container .box .flex .qty{
   width: 5.0rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.shopping-cart .box-container .box .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.shopping-cart .box-container .box .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   padding-left: 8.5rem;/*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.shopping-cart .box-container .box .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.shopping-cart .fa-edit{
   height: 4.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
}

.shopping-cart .fa-edit:hover{
   background-color: var(--black);
}

/**/
.shopping-cart .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.0rem;
   color:var(--white);
   cursor: pointer;
}

.shopping-cart .fa-minus:hover{
   background-color: var(--black);
}

.shopping-cart .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
}

.shopping-cart .fa-plus:hover{
   background-color: var(--black);
}
/**/

.shopping-cart .sub-total{
   margin:2rem 0;
   font-size: 2rem;
   color:var(--light-color);
}

.shopping-cart .sub-total span{
   color:var(--black);
}

.cart-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
   margin-bottom: 8rem;/*margin from bottom-nav*/
}

.cart-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.cart-total p span{
   color:var(--red);
}

.display-orders{
   text-align: center;
   padding-bottom: 0;
}

.display-orders p{
   display: inline-block;
   padding:1rem 2rem;
   margin:1rem .5rem;
   font-size: 2rem;
   text-align: center;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.display-orders img{
   display: block;
   padding:0rem 0rem;
   margin:0rem 0rem 0rem 0rem;
   /* text-align: center; */
   width: 65px;
   height: 65px;

}

.display-orders p span{
   color:var(--red);
}

.display-orders .grand-total{
   margin-top: 1.5rem;
   margin-bottom: 2.5rem;
   font-size: 2.5rem;
   color:var(--black);
   border-bottom: 1px solid #000000;
}

.display-orders .grand-total span{
   color:var(--red);
}

.checkout-orders form{
   padding:2rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.checkout-orders form h3{
   border-radius: .5rem;
   background-color: var(--black);
   color:var(--white);
   padding:1.5rem 1rem;
   text-align: center;
   text-transform: uppercase;
   margin-bottom: 2rem;
   font-size: 2.5rem;
}

.checkout-orders form .flex{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   justify-content: space-between;
}

.checkout-orders form .flex .inputBox{
   width: 100%; /*width: 49%;*/
}

.checkout-orders form .flex .address{
   display: none;
}

.checkout-orders form .flex .inputBox .box{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   font-size: 2.0rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color: var(--light-bg);
   padding: 1rem 1.2rem 1rem 8rem;
}

.checkout-orders form .flex .inputBox .radio-container {
   display: inline-block;
   margin-left: 10px;
   margin-top: 10px;
   border: .2rem solid var(--black);
   border-radius: 15px;
   padding: 0.3rem;
 }
 

.checkout-orders form .flex .inputBox .radio-container input[type="radio"] {
   display: inline-block;
   vertical-align: middle;
   font-size: 2rem;
 }
.checkout-orders form .flex .inputBox .radio-container label {
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;
   font-size: 2rem;
   font-weight: bold;
 }

.checkout-orders form .flex .inputBox .select{
   /* width: 100%;
   margin:.7rem 0;
   font-size: 1.6rem;
   border:var(--border);
   border-radius: .5rem;
   padding:1rem 1.2rem;
   color:var(--black);
   text-transform: none; */

   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   font-size: 1.8rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color: var(--light-bg);
}

.checkout-orders form .flex .inputBox .option{
   font-size: 1.9rem;
   color:var(--black);
}

.checkout-orders form .flex .inputBox span{
   font-size: 1.9rem;
   color:var(--black);
   font-weight: bold;
   border-bottom: 1px solid #747474;
}


.checkout-orders form .flex .inputBox span.prefix{
   position: absolute;
   top: 50%;
   left: 1rem;
   transform: translateY(-50%);
   font-size: 2.4rem;
   color: var(--black);
   pointer-events: none; /* so user can't click it */
   border-bottom: none;
}










.message-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1300;
}

.dialog-content {
  /* background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); */

  background-color: var(--white);
  margin: 10% auto;
  padding: 20px;
  border: var(--border);
  width: 90%;
  max-width: 600px;
  border-radius: 1rem;
  position: relative;
  font-size: 3rem;
}


.dialog-content img {
  
  width: 100%;
  height: 100%;
  
}

.dialog-content p {
  
  text-align: center;
  font-size: 4rem;
  
}

.dialog-content textarea {
  width: 100%;
  resize: none;
  padding: 0.5rem;
  border: var(--border);
  border-radius: 10px;
  font-size: 2.5rem;
}

/* .dialog-content button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #00c851;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
} */

.close-btn {
  position: absolute;
  top: -5px; right: 15px;
  font-size: 5.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--red);
}

.message-dialog .qr-link{
  font-size: 3.0rem;
  color: #000;
  /* border-bottom: solid 1px black; */
}
.message-dialog .qr-link span{
    font-size: 3.5em;
    color: #000;
    /* border-bottom: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-left: solid 1px black; */
    border-radius: 20px;
}


.message-dialog .qr-link .share-btn{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 2.8rem;
   text-transform: capitalize;
   color:var(--black);
   cursor: pointer;
   text-align: center;
   background-color: var(--green);
}










/* ==========================================================================
   MENU LIST REDESIGN
   --------------------------------------------------------------------------
   HOW TO USE:
   1) APPEND everything in this file to the END of your existing style.css
   2) You can DELETE these old blocks (they are no longer used by the page):
        - the whole  ".featured .row ..."  block  (old item rows)
        - the old ".category-slider-container" / ".category-tab" / ".cat-arrow"
          rules between the  "menu list with images menu3"  comments
      (keeping them harms nothing, the new rules below win anyway)
   3) The design reuses your existing CSS variables
      (--main-color, --btn-bg, --light-bg, --box-shadow ...) and the
      62.5% html font-size, so rem values scale on mobile automatically.
   ========================================================================== */



/* =====================  sticky toolbar (banner)  =============== */
/* ---------- Store Banner ---------- */
/* ---------- Store Banner ---------- */
.store-banner {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--white);
    border-radius: 2rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
    box-shadow: var(--box-shadow);
    border: .1rem solid rgba(0,0,0,.05);
    overflow: hidden;
    margin-top: 0.5rem;
}

.store-banner .banner-image {
    flex-shrink: 0;
    width: 14rem;
    height: 14rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--light-bg);
}

.store-banner .banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-banner .banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Title Row: Name + Status */
.store-banner .store-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap; /* Wraps to next line if screen is too narrow */
}

.store-banner .store-name {
    font-size: 2.6rem;
    color: var(--black);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.store-banner .store-status {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.4rem;
    font-weight: 500;
    padding: .6rem 1.4rem;
    border-radius: 5rem;
    width: fit-content;
    white-space: nowrap;
}

.store-banner .store-status i {
    font-size: 1.3rem;
}

/* Address Section */
.store-banner .store-address {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-size: 1.5rem;
    color: var(--gray);
    line-height: 1.5;
}

.store-banner .store-address i {
    font-size: 1.6rem;
    color: var(--light-color); /* Change to var(--main-color) if you want it colored */
    margin-top: .2rem;
    flex-shrink: 0;
}

/* Open/Close Colors */
.store-banner .store-status.status-open {
    background: rgba(46, 204, 113, .15);
    color: #27ae60;
}

.store-banner .store-status.status-closed {
    background: rgba(231, 76, 60, .15);
    color: #c0392b;
}

/* ---------- Responsive Banner ---------- */
@media (max-width: 768px) {
    /* .store-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        margin-top: 0.5rem;
    }
    
    .store-banner .banner-image {
        width: 100%;
        height: 18rem;
        border-radius: 1.5rem;
    } */

     .store-banner .banner-image img { width: 100%; height: 100%; }
    
    .store-banner .banner-content {
        /* align-items: center; */ /* Centers content on mobile */
        align-items: flex-start; /* Centers content on mobile */
    }

    .store-banner .store-title-row {
        justify-content: center;
        flex-direction: column; /* Stacks name and status vertically on smaller screens */
        gap: 1rem;
    }
    
    .store-banner .store-name {
        font-size: 2.4rem;
    }
    
    .store-banner .store-address {
        justify-content: right;
        text-align: right; /* Keeps Arabic text aligned nicely */
        width: 100%;
    }
}

@media (max-width: 450px) {
    .store-banner {
        padding: 1.2rem;
        border-radius: 1.5rem;
        margin-bottom: 1.2rem;
        margin-top: 0.5rem;
    }
    
    .store-banner .banner-image {
        height: 15rem;
    }
    
    .store-banner .store-name {
        font-size: 2.2rem;
    }
    
    .store-banner .store-status {
        font-size: 1.3rem;
        padding: .5rem 1.2rem;
    }

    .store-banner .store-address {
        font-size: 1.4rem;
    }
}
/* =====================  sticky toolbar (banner)  =============== */

/* =====================  sticky toolbar (search + slider)  =============== */

.menu-toolbar{
   position: sticky;
   top: 8.5rem;                    /* sticks right under your header */
   z-index: 1400;
   background: var(--light-bg);
   padding: 1.2rem 0 .6rem;
   max-width: 1200px;
   margin: 0 auto;
   padding-left: 2rem;
   padding-right: 2rem;
}

/* ---------- live search box ---------- */

.menu-search{
   display: flex;
   align-items: center;
   gap: 1rem;
   background: var(--white);
   border-radius: 5rem;
   padding: 0 2rem;
   border: .1rem solid rgba(0,0,0,.06);
   box-shadow: var(--box-shadow);
   margin-bottom: 1rem;
}

.menu-search > i{
   font-size: 1.8rem;
   color: var(--gray);
}

.menu-search input{
   flex: 1;
   height: 5rem;
   font-size: 1.8rem;
   color: var(--black);
   background: transparent;
}

.menu-search input::placeholder{
   color: var(--gray);
}

.menu-search .clear-search{
   display: none;                  /* shown by JS when there is text */
   align-items: center;
   justify-content: center;
   width: 3.2rem;
   height: 3.2rem;
   border-radius: 50%;
   background: var(--light-bg);
   color: var(--light-color);
   font-size: 1.6rem;
   cursor: pointer;
   transition: .2s;
}

.menu-search .clear-search:hover{
   background: var(--red);
   color: var(--white);
}


/* =====================  category slider  ================================ */

.category-slider-container{
   display: flex;
   align-items: center;
   gap: .6rem;
   background: var(--white);
   border-radius: 5rem;
   padding: .8rem;
   border: .1rem solid rgba(0,0,0,.06);
   box-shadow: var(--box-shadow);
   height: 5.5rem;
}

.category-slider{
   display: flex;
   gap: .8rem;
   flex: 1;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
   padding: .2rem;
}

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

.category-tab{
   background: var(--light-bg);
   color: var(--black);
   padding: .9rem 2.4rem;
   border-radius: 5rem;
   white-space: nowrap;
   cursor: pointer;
   flex-shrink: 0;
   font-size: 1.8rem;
   font-weight: 700;
   border: .1rem solid transparent;
   transition: all .25s ease;
   user-select: none;
}

.category-tab:hover{
   background: #e4e4e4;
}

.category-tab.active{
   background: var(--main-color);
   color: var(--white);
   box-shadow: 0 .4rem 1.2rem rgba(0,79,197,.35);
}

.cat-arrow{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 4rem;
   height: 4rem;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--light-bg);
   color: var(--black);
   font-size: 2.2rem;
   cursor: pointer;
   transition: .2s;
}

.cat-arrow:hover{
   background: var(--main-color);
   color: var(--white);
}


/* =====================  menu item cards  ================================ */

.featured{
   margin-bottom: 10rem;
   margin-top: 1rem;
}

/* offset so a scrolled-to category is not hidden under the sticky toolbar */
.featured .category{
   margin-top: 4rem;
   scroll-margin-top: 19rem;
}

.menu-list{
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin: 1.5rem 0;
}

/* two-column grid of cards on larger screens */
@media (min-width: 768px){
   .menu-list{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.8rem;
   }
}

.menu-card{
   display: flex;
   align-items: center;
   gap: 1.6rem;
   background: var(--white);
   border-radius: 1.8rem;
   padding: 1.4rem;
   border: .1rem solid rgba(0,0,0,.05);
   box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
   transition: transform .25s ease, box-shadow .25s ease;
   animation: cardIn .35s ease;
}

@keyframes cardIn{
   from{ opacity: 0; transform: translateY(1rem); }
   to  { opacity: 1; transform: translateY(0); }
}

.menu-card:hover{
   transform: translateY(-.3rem);
   box-shadow: 0 1rem 2.5rem rgba(0,0,0,.12);
}

/* ---------- text content (name / details / price) ---------- */

.menu-card .content{
   flex: 1;
   min-width: 0;
}

.menu-card .content h3{
   font-size: 2.3rem;
   font-weight: 800;
   color: var(--black);
   margin-bottom: .5rem;
   line-height: 1.35;
}

.menu-card .content .details{
   font-size: 1.65rem;
   color: var(--light-color);
   line-height: 1.65;
   margin-bottom: 1rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;          /* max 3 lines, then "..." */
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.menu-card .price-row{
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.menu-card .price{
   font-size: 2.2rem;
   font-weight: 600;
   color: var(--black);
   display: flex;
   align-items: baseline;
   gap: .6rem;
   flex-wrap: wrap;
}

.menu-card .price .cur{
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 700;
   color: var(--main-color);
}

/* old price before discount */
.menu-card .price .old-price{
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--gray);
   text-decoration: line-through;
}

/* discount percentage pill */
.menu-card .discount-badge{
   background: #e7f9ec;
   color: var(--btn-bg);
   font-size: 1.4rem;
   font-weight: 800;
   padding: .4rem 1.1rem;
   border-radius: 5rem;
   white-space: nowrap;
}

/* ---------- image + add to cart ---------- */

.menu-card .image-box{
   position: relative;
   flex-shrink: 0;
   width: 15rem;
   height: 15rem;
   border-radius: 1.4rem;
   overflow: visible;              /* let the + button hang off the corner */
}

.menu-card .image-box img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 1.4rem;
   display: block;
   transition: transform .35s ease;
   box-shadow: 0 .3rem 1rem rgba(0,0,0,.12);
}

.menu-card:hover .image-box img{
   transform: scale(1.06);
}

/* circular add-to-cart button on the image corner */
.menu-card .add-btn{
   position: absolute;
   bottom: -.7rem;
   left: -.7rem;                   /* in RTL this is the outer corner */
   width: 4.4rem;
   height: 4.4rem;
   border-radius: 50%;
   background: var(--white);
   color: var(--btn-bg);
   font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: .2rem solid var(--light-bg);
   box-shadow: 0 .3rem 1.2rem rgba(0,0,0,.22);
   transition: all .2s ease;
   z-index: 2;
}

.menu-card .add-btn:hover{
   background: var(--btn-bg);
   color: var(--white);
   transform: scale(1.12);
}

.menu-card .add-btn:active{
   transform: scale(.92);
}

/* "closed now" badge over the image */
.menu-card .closed-badge{
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0,0,0,.45);
   color: var(--white);
   font-size: 1.8rem;
   font-weight: 800;
   border-radius: 1.4rem;
}

/* no-results message icon spacing */
.no-results-message i{
   margin-left: .8rem;
}


/* =====================  responsive  ===================================== */

@media (max-width: 450px){

   .menu-toolbar{
      top: 7rem;                  /* your fixed mobile header height */
      padding: 1rem 1.2rem .5rem;
   }

   .featured .category{
      scroll-margin-top: 17rem;
   }

   .menu-card{
      gap: 1.3rem;
      padding: 1.2rem;
      border-radius: 1.6rem;
   }

   .menu-card .image-box{
      width: 12rem;
      height: 12rem;
   }

   .menu-card .add-btn{
      width: 4rem;
      height: 4rem;
   }

   .cat-arrow{
      display: none;              /* swiping is enough on mobile */
   }
}




















/* menu list with images menu3*/

/* .menu-section1 {
  width: 100%;
  padding: 2rem;
  background: var(--light-bg);
} */
.menu-list{
   margin-bottom: 10rem;
}
.menu-list .category {
    padding: 20px;
    font-size: 3.0rem;
    border-radius: 20px;
    width: 100%;
    margin-top: 100px;
    
}

.menu-list .category h2 {
    background: #282828;
    color: #30ff4c;
    padding: 5px;
    border-radius: 5px;
}

.menu-list .menu-item {
    display: flex;
    align-items: center;
    background: #303030;
    color: #fff;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
     border-radius: 20px;
}

.menu-list .menu-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    position: relative;
}

.menu-list .menu-item .info {
    padding: 10px;
    flex: 1;
}

.menu-list .menu-item .cart {
    margin-left: 2rem;
    align-items: center;
    text-align: center;
}

.menu-list .menu-item .cart i {
    font-size: 2.5rem;
    text-align: center;
}

 .submit-btn{
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: .5rem;
    padding:1rem;
    font-size: 1.7rem;
    text-transform: capitalize;
    color: #fff;
    cursor: pointer;
    text-align: center;
    background-color: var(--btn-bg);
 }

.menu-list .menu-item h3 {
    margin: 0;
    font-size: 3.0rem;
}

.menu-list .menu-item p {
    color: #ffffff;
    margin: 5px 0 0;
    font-size: 2.4rem;
}


/* @media (max-width: 600px) {
    .menu-section1 .menu-item {
        flex-direction: column;
        text-align: center;
    }
    .menu-section1 .menu-item img {
        width: 100%;
    }
} */

/* Popup */

.popup-img {
  position: relative;
}
.popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    color: black;
    text-align: center;
    max-width: 400px;
}

.popup-content img {
    width: 100%;
    border-radius: 10px;
}

.close-btn1 {
   position: absolute;
  top: 10px; right: 20px;
  font-size: 6.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--red);
}













.bottom-navbar{
    text-align: center;
    background:var(--light-color);
    position: fixed;
    bottom:0; left:0; right:0;
    z-index: 1010;
    /* display: none; */
}

.bottom-navbar a{
    font-size: 2.7rem;
    padding:2rem;
    color:#fff;
    text-align: center;
}

.bottom-navbar #premium{
    font-size: 2.7rem;
    padding:1.2rem;
    background-color:#f34e4e;
    text-align: center;
    border-radius: 50%;
}

.bottom-navbar #puzzle{
    font-size: 3.1rem;
    padding:2rem;
    color:#4e9bf3;
    text-align: center;
    border-radius: 50%;
}

.bottom-navbar a.whatsapp{
    font-size: 3.5rem;
    padding:2rem;
    color:var(--green);
   background-color: none;
   border-radius: 20rem;
   animation: pulse 2s infinite;
}

.bottom-navbar a:hover{
    background:var(--dark-color);
}


@media (max-width:768px){

    .bottom-navbar{
        display: block;
    }
   }
@media (max-width:340px){

    .bottom-navbar a{
    font-size: 2.3rem;
    padding: 1.5rem;
   }  

   .bottom-navbar a.whatsapp{
    font-size: 2.5rem;
}
}




.orders .box-container{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   align-items: flex-start;
   margin-bottom: 10rem;
}

.orders .box-container .box{
   padding:1rem 2rem;
   flex:1 1 40rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   
}

.orders .box-container .box p{
   margin:.5rem 0;
   line-height: 1.8;
   font-size: 2rem;
   color:var(--light-color);
}

.orders .box-container .box p span{
   color:var(--main-color);
}















.aside-container .posts-container .post{
    width:100%;
    padding:2rem;
    background: var(--white);
    border:var(--border);
    border-radius: .5rem;
    /* margin-bottom: 1.5rem; */
    margin-bottom: 8rem; /*margin from bottom-nav*/
}

.aside-container .posts-container .post .image{
    height: 40rem;
    width:100%;
    border-radius: .5rem;
    object-fit: cover;
}

.aside-container .posts-container .post .date{
    padding-top: 2rem;
    font-size: 1.5rem;
    color:var(--main-color);
}

.aside-container .posts-container .post .title{
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 3.3rem;
    color:var(--black);
    border: var(--border);
    border-radius: 20px;
    text-align: center;
    background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
}

.aside-container .posts-container .post .text{
    color:var(--light-color);
    font-size: 1.6rem;
    line-height: 1.7;
    padding:1rem 0;
}

.aside-container .posts-container .links{
    border-top: var(--border);
    margin-top: .5rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
}

.aside-container .posts-container .links .user{
    margin-right: auto;
}

.aside-container .posts-container .links .icon{
    padding-right: 1rem;
}

.aside-container .posts-container .links a{
    font-size: 1.5rem;
    color:var(--light-color);
}

.aside-container .posts-container .links a i{
    padding-right: .2rem;
    color:var(--black);
}

.aside-container .posts-container .links a:hover{
    color:var(--main-color);
}

.aside-container .posts-container .links a:hover i{
    color:var(--main-color);
}

@media (max-width: 768px) {
  /* .aside-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .chart-box {
    margin-bottom: 2rem;
  } */

  .aside-container .posts-container .post {
    width: 100%;
   }


   .aside-container .posts-container .post .image{
        height: 30rem;;
    }
}














.video-app {
  background: var(--gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  margin-top: 25rem;
}

.video-app .video-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.video-app .video-container video {
  border-radius: 1rem;
  width: 100%;
}
.video-app .video-container iframe {
  border-radius: 1rem;
  width: 100%;
}

.video-app .video-container .controls {
  text-align: center;
  padding: 2rem 0;
}

.video-app .video-container .controls span {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  margin: .7rem;
}

.video-app .video-container .controls span:hover {
  background: #29d9d5;
}

.video-app .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
  margin-bottom: 1rem;
}

.video-app .content span {
  color: #29d9d5;
  font-size: 2rem;
}

.video-app .content h3 {
  color: #fff;
  font-size: 2.7rem;
  margin-top: .5rem;
}

.video-app .content p {
  padding: 1rem 0;
  font-size: 1.4rem;
  color: #aaa;
  line-height: 2;
}



.order-table-box {
  padding: 2rem;
  background: #fff;
  border: var(--border);
  border-radius: .5rem;
  font-size: 2.5rem;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.order-table th,
.order-table td {
  text-align: center;
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  border: 1px solid var(--black);
}

@media (max-width: 768px) {
  .order-table th,
  .order-table td {
    font-size: 2rem;
  }

}

@media (max-width: 345px) {
  .order-table th,
  .order-table td {
    font-size: 1.5rem;
  }

}


















.footer{
   background-color: var(--white);
   /* padding-bottom: 7rem; */
}

.footer .grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
}

.footer .grid .box h3{
   font-size: 2rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-transform: capitalize;
}

.footer .grid .box a{
   display: block;
   margin:1.5rem 0;
   font-size: 1.9rem;
   color:var(--light-color);
}

.footer .grid .box a i{
   padding-left: 1rem;
   color:var(--main-color);
   transition: .2s linear;
}

.footer .grid .box a:hover{
   color:var(--main-color);
}

.footer .grid .box a:hover i{
   padding-left: 2rem;
}

.footer .credit{
   text-align: center;
   padding: 2.5rem 2rem;
   border-top: var(--border);
   font-size: 2rem;
   color:var(--black);
}

.footer .credit span{
   color:var(--main-color);
}


/*back btn starts*/
#back-btn {
   position: fixed;
   /* bottom: 550px; */
   top: 70px;
   left: 25px;
   background: none;
   width: 35px;
   height: 35px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: .5rem;
   /* display: none; */
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index: 1000;
}
#back-btn i {
   color: var(--black);
   margin: 0;
   position: relative;
   left: 0px;
   top: 15px;
   right: 4px;
   font-size: 40px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

@media (max-width:768px) {
   #back-btn i {
   color: var(--black);
   margin: 0;
   position: relative;
   left: 0px;
   top: 5px;
   right: 9px;
   font-size: 35px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
}
#back-btn:hover {
   background: none;
}
#back-btn:hover i {
   color: var(--main-color);
   /* top: 5px; */
}
/*back btn end*/






/*whatsapp btn starts*/



@keyframes pulse {
  0% {
    transform: scale(1);
    /* box-shadow: 0 0 0 0 rgb(255, 0, 43) */;
  }
  70% {
    transform: scale(1.2);
    /* box-shadow: 0 0 0 10px rgba(0, 255, 26, 0); */
  }
  100% {
    transform: scale(1);
    /* box-shadow: 0 0 0 0 rgba(0, 255, 26, 0); */
  }
}


#whatsapp-btn {
   position: fixed;
   bottom: 60px;
   right: 10px;
   background: none;
   width: 35px;
   height: 35px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: .5rem;
   /* display: none; */
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index: 1000;
   animation: pulse 2s infinite;
   
}
#whatsapp-btn i {
   color: var(--green);
   margin: 0;
   position: relative;
   left: 0px;
   top: 3px;
   right: 4px;
   font-size: 50px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   background-color: #fff;
   border-radius: 50rem;
}
#whatsapp-btn:hover {
   background: none;
}
#whatsapp-btn:hover i {
   color: var(--green);
   /* top: 5px; */
}
/*whatsapp btn end*/



@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){
    
    /*added on 24/4/2023 2 items grid*/
   .products .box-container { grid-template-columns: repeat(2, 1fr); }

   .products-ajax .box-container { grid-template-columns: repeat(2, 1fr); }
   
   .shopping-cart .box-container { grid-template-columns: repeat(auto-fit, 33rem); }
   /*added on 24/4/2023 2 items grid*/

   #menu-btn{
      display: inline-block;
   }

   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

   .home-bg .home .slide .content{
      text-align: center;
   }

   .home-bg .home .slide .content h3{
      font-size: 3rem;
   }

     /*popup here*/
  .contentBox{
   width: 300px;
   height: auto;
   flex-direction: column;
   top: 25px;
  }
  .contentBox .imgBox{
   height: 300px;
   transform: translateY(-50px);

  }
  .contentBox .imgBox::before{
   background: #fff;
  }
  .contentBox .content{
   height: auto;
   text-align: center;
   padding: 10px;
   padding-top: 0;
  }
  .close{
   top: -40px;
   left: -10px;
   background: #f3f3f3 url(../images/delete.png);
   background-repeat: no-repeat;
   background-size: 10px;
   background-position: center;
  }
  /*popup here*/

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .heading{
      font-size: 3rem;
   }

   .delete-btn, .note-btn, .btn{
      /* display: block; */
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 1rem;
   font-size: 1.7rem;
   
   }

   .flex-btn{
      flex-flow: column;
      gap:0;
   }

   .flex-btn1{
      flex-flow: row;
      gap:0.1;
   }

   .quick-view form .row .image-container .sub-image img{
      width: 8rem;
   }

   .quick-view form .flex .inputBox{
      width: 100%;
   }


   .checkout-orders form .flex .inputBox{
      width: 100%;
   }
   
   /*added on 24/4/2023 2 items grid*/
   .products .box-container .box .btn{
      width: 100%;
   }

   .products .box-container .box input{
      /*width: 100%;*/
      padding:1.2rem;
   }
   
   .products .box-container .box img {
      height: 15rem;
      width: 100%;
      object-fit: contain;
      margin-bottom: 1rem;
  }


  .products-ajax .box-container .product-form .btn{
      width: 100%;
   }

   .products-ajax .box-container .product-form input{
      /*width: 100%;*/
      /* padding:1.2rem; */
   }
   
   .products-ajax .box-container .product-form img {
      height: 15rem;
      width: 100%;
      object-fit: contain;
      margin-bottom: 1rem;
  }

  .products-ajax .box-container .product-form .flex1 .name {
    font-size: 2rem;

   }

   .products-ajax .filter-buttons {
      justify-content: normal;
   }
   /*added on 24/4/2023 2 items grid*/

   /**/
   #togglePassword{
      margin-right: 30rem;
      bottom: 35px;

   }
/**/

}

@media (max-width:350px){
   .delete-btn, .note-btn, .btn{
      /* display: block; */
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 1rem;
   font-size: 1.5rem;
   
   }
}








/* ============================================
   ADS PAGE - MODERN DESIGN
   ============================================ */
.ads-page {
   padding: 4rem 2rem;
   max-width: 1400px;
   margin: 0 auto;
}

.ads-header {
   text-align: center;
   margin-bottom: 3rem;
}

.ads-subtitle {
   font-size: 1.8rem;
   color: var(--light-color);
   margin-top: 1rem;
}

/* Filter Tabs */
.ads-filter-container {
   margin-bottom: 3rem;
   position: relative;
}

.ads-filter-scroll {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   padding-bottom: 1rem;
   scrollbar-width: none;
}

.ads-filter-scroll::-webkit-scrollbar {
   display: none;
}

.ads-filter-tab {
   display: flex;
   align-items: center;
   gap: .8rem;
   padding: 1.2rem 2rem;
   border: 2px solid var(--light-bg);
   background: var(--white);
   border-radius: 5rem;
   font-size: 1.5rem;
   color: var(--black);
   cursor: pointer;
   transition: all .3s ease;
   white-space: nowrap;
   font-family: 'Nunito', sans-serif;
}

.ads-filter-tab i {
   font-size: 1.4rem;
   color: var(--light-color);
   transition: color .3s ease;
}

.ads-filter-tab:hover {
   border-color: var(--btn-bg);
   color: var(--btn-bg);
}

.ads-filter-tab:hover i {
   color: var(--btn-bg);
}

.ads-filter-tab.active {
   background: var(--btn-bg);
   border-color: var(--btn-bg);
   color: var(--white);
   box-shadow: 0 .4rem 1.5rem rgba(46, 174, 79, 0.3);
}

.ads-filter-tab.active i {
   color: var(--white);
}

/* Stats Bar */
.ads-stats {
   display: flex;
   gap: 2rem;
   margin-bottom: 3rem;
   flex-wrap: wrap;
}

.stat-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   background: var(--white);
   padding: 1.2rem 2rem;
   border-radius: 1rem;
   font-size: 1.5rem;
   color: var(--light-color);
   box-shadow: var(--box-shadow);
}

.stat-item i {
   color: var(--btn-bg);
   font-size: 1.8rem;
}

.stat-item strong {
   color: var(--black);
}

/* Ads Grid */
.ads-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
   gap: 2.5rem;
   margin-bottom: 6.5rem;
}

.ad-card {
   background: var(--white);
   border-radius: 1.5rem;
   overflow: hidden;
   box-shadow: var(--box-shadow);
   transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 1;
   transform: translateY(0);
}

.ad-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 1.5rem 4rem rgba(0,0,0,.12);
}

/* Image Section */
.ad-image-wrap {
   position: relative;
   height: 22rem;
   overflow: hidden;
}

.ad-image-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.ad-card:hover .ad-image-wrap img {
   transform: scale(1.08);
}

.ad-image-wrap.no-image {
   background: linear-gradient(135deg, var(--light-bg) 0%, #e0e0e0 100%);
}

.ad-image-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.ad-image-placeholder i {
   font-size: 6rem;
   color: var(--gray);
   opacity: .5;
}

/* Badges */
.ad-badge {
   position: absolute;
   top: 1.2rem;
   padding: .6rem 1.2rem;
   border-radius: 5rem;
   font-size: 1.2rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: .5rem;
   backdrop-filter: blur(10px);
}

.ad-badge.paid {
   right: 1.2rem;
   background: rgba(255, 193, 7, 0.95);
   color: #333;
}

.ad-badge.free {
   right: 1.2rem;
   background: rgba(46, 174, 79, 0.95);
   color: var(--white);
}

.ad-time-badge {
   position: absolute;
   bottom: 1.2rem;
   left: 1.2rem;
   background: rgba(0,0,0,0.7);
   color: var(--white);
   padding: .6rem 1.2rem;
   border-radius: 5rem;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   gap: .5rem;
   backdrop-filter: blur(10px);
}

.ad-time-badge.urgent {
   background: rgba(248, 35, 35, 0.9);
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: .7; }
}

/* Content Section */
.ad-content {
   padding: 2rem;
}

.ad-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.2rem;
   flex-wrap: wrap;
   gap: 1rem;
}

.ad-category {
   display: flex;
   align-items: center;
   gap: .6rem;
   font-size: 1.3rem;
   color: var(--btn-bg);
   background: rgba(46, 174, 79, 0.1);
   padding: .4rem 1rem;
   border-radius: 5rem;
}

.ad-category i {
   font-size: 1.1rem;
}

.ad-date {
   display: flex;
   align-items: center;
   gap: .6rem;
   font-size: 1.3rem;
   color: var(--light-color);
}

.ad-title {
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: 1.5rem;
   line-height: 1.4;
   font-weight: 700;
}

/* Progress Bar */
.ad-progress {
   width: 100%;
   height: .6rem;
   background: var(--light-bg);
   border-radius: 5rem;
   overflow: hidden;
   margin-bottom: .8rem;
}

.ad-progress-bar {
   height: 100%;
   background: linear-gradient(90deg, var(--btn-bg), #4ade80);
   border-radius: 5rem;
   transition: width 1s ease;
}

.ad-progress-label {
   display: flex;
   justify-content: space-between;
   font-size: 1.2rem;
   color: var(--light-color);
   margin-bottom: 1.5rem;
}

/* Actions */
.ad-actions {
   display: flex;
   gap: 1rem;
}

.ad-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .8rem;
   padding: 1rem 1.8rem;
   border-radius: 1rem;
   font-size: 1.4rem;
   font-weight: 600;
   cursor: pointer;
   transition: all .3s ease;
   border: none;
   font-family: 'Nunito', sans-serif;
}

.ad-btn.primary {
   flex: 1;
   background: var(--btn-bg);
   color: var(--white);
}

.ad-btn.primary:hover {
   background: var(--black);
}

.ad-btn.secondary {
   width: 4.5rem;
   height: 4.5rem;
   padding: 0;
   background: var(--light-bg);
   color: var(--black);
}

.ad-btn.secondary:hover {
   background: var(--btn-bg);
   color: var(--white);
}

/* Empty State */
.ads-empty {
   grid-column: 1 / -1;
   text-align: center;
   padding: 6rem 2rem;
   background: var(--white);
   border-radius: 1.5rem;
   box-shadow: var(--box-shadow);
}

.ads-empty i {
   font-size: 6rem;
   color: var(--light-color);
   margin-bottom: 2rem;
   opacity: .5;
}

.ads-empty p {
   font-size: 2rem;
   color: var(--light-color);
}

/* Responsive */
@media (max-width: 768px) {
   .ads-grid {
      grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
      gap: 1.5rem;
   }
   
   .ads-stats {
      gap: 1rem;
   }
   
   .stat-item {
      padding: 1rem 1.5rem;
      font-size: 1.3rem;
   }
   
   .ad-image-wrap {
      height: 18rem;
   }
}

@media (max-width: 450px) {
   .ads-grid {
      grid-template-columns: 1fr;
   }
   
   .ads-filter-tab {
      padding: 1rem 1.5rem;
      font-size: 1.3rem;
   }
}


/* ============================================
   PRICING TABLE - COLLAPSIBLE
   ============================================ */
.pricing-section {
   max-width: 800px;
   margin: 0 auto 4rem;
   background: var(--white);
   border-radius: 1.5rem;
   box-shadow: var(--box-shadow);
   overflow: hidden;
}

.pricing-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.8rem 2.5rem;
   background: linear-gradient(135deg, var(--btn-bg), #1e8c3a);
   border: none;
   color: var(--white);
   font-size: 1.8rem;
   font-weight: 700;
   cursor: pointer;
   transition: all .3s ease;
   font-family: 'Nunito', sans-serif;
}

.pricing-toggle:hover {
   background: linear-gradient(135deg, #249a42, #166b2d);
}

.pricing-toggle-content {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.pricing-toggle-content i {
   font-size: 2rem;
}

.pricing-arrow {
   font-size: 1.6rem;
   transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsible Wrap */
.pricing-table-wrap {
   max-height: 0;
   overflow: hidden;
   transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-table-container {
   padding: 2.5rem;
}

/* Table Styles */
.pricing-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 1.6rem;
}

.pricing-table thead {
   display: none;
}

.pricing-table tbody tr {
   display: flex;
   flex-direction: column;
   background: var(--light-bg);
   border-radius: 1rem;
   margin-bottom: 1rem;
   padding: 1.5rem;
   transition: all .3s ease;
   position: relative;
   overflow: hidden;
}

.pricing-table tbody tr:hover {
   background: #e8f5e9;
   transform: translateX(-5px);
}

.pricing-table tbody tr.pricing-best {
   background: linear-gradient(135deg, #fff8e1, #ffecb3);
   border: 2px solid var(--gold);
}

.pricing-table tbody tr.pricing-best:hover {
   background: linear-gradient(135deg, #ffecb3, #ffe082);
}

.pricing-table td {
   padding: .8rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.pricing-table td::before {
   content: attr(data-label);
   font-weight: 600;
   color: var(--light-color);
   font-size: 1.3rem;
}

/* Duration Cell */
.pricing-duration {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.pricing-duration i {
   width: 4rem;
   height: 4rem;
   min-width: 4rem;
   border-radius: 1rem;
   background: rgba(46, 174, 79, 0.1);
   color: var(--btn-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
}

.pricing-best .pricing-duration i {
   background: rgba(255, 193, 7, 0.2);
   color: #f39c12;
}

.pricing-duration span {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--black);
}

/* Price Cell */
.pricing-price {
   font-size: 2.2rem;
   font-weight: 800;
   color: var(--btn-bg);
}

.pricing-best .pricing-price {
   color: #e65100;
}

/* Save Cell */
.pricing-save {
   font-size: 1.4rem;
   color: var(--light-color);
}

.save-tag {
   display: inline-block;
   background: rgba(46, 174, 79, 0.1);
   color: var(--btn-bg);
   padding: .4rem 1rem;
   border-radius: 5rem;
   font-weight: 600;
}

.save-tag.best {
   background: rgba(255, 193, 7, 0.2);
   color: #e65100;
}

.pricing-best-badge {
   display: inline-block;
   background: var(--gold);
   color: #333;
   padding: .3rem .8rem;
   border-radius: 5rem;
   font-size: 1.1rem;
   font-weight: 700;
   margin-right: .5rem;
}

/* Note */
.pricing-note {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-top: 2rem;
   padding: 1.5rem;
   background: rgba(0, 79, 197, 0.05);
   border-radius: 1rem;
   font-size: 1.4rem;
   color: var(--main-color);
}

.pricing-note i {
   font-size: 1.8rem;
}

/* Desktop Table Layout */
@media (min-width: 768px) {
   .pricing-table thead {
      display: table-header-group;
   }
   
   .pricing-table thead th {
      padding: 1.5rem;
      text-align: right;
      font-size: 1.4rem;
      color: var(--light-color);
      text-transform: uppercase;
      letter-spacing: .05rem;
      border-bottom: 2px solid var(--light-bg);
   }
   
   .pricing-table tbody tr {
      display: table-row;
      background: transparent;
      margin-bottom: 0;
      padding: 0;
      border-radius: 0;
   }
   
   .pricing-table tbody tr:hover {
      transform: none;
      background: var(--light-bg);
   }
   
   .pricing-table tbody tr.pricing-best:hover {
      background: linear-gradient(135deg, #ffecb3, #ffe082);
   }
   
   .pricing-table td {
      display: table-cell;
      padding: 1.8rem 1.5rem;
      border-bottom: 1px solid var(--light-bg);
      text-align: right;
   }
   
   .pricing-table td::before {
      display: none;
   }
   
   .pricing-table tbody tr:last-child td {
      border-bottom: none;
   }
}

/* Mobile Card Labels */
@media (max-width: 767px) {
   .pricing-table td:nth-child(1)::before { content: 'المدة:'; }
   .pricing-table td:nth-child(2)::before { content: 'السعر:'; }
   .pricing-table td:nth-child(3)::before { content: 'التوفير:'; }
}

/* Small Mobile */
@media (max-width: 450px) {
   .pricing-toggle {
      padding: 1.5rem;
      font-size: 1.6rem;
   }
   
   .pricing-table-container {
      padding: 1.5rem;
   }
   
   .pricing-duration span {
      font-size: 1.6rem;
   }
   
   .pricing-price {
      font-size: 1.8rem;
   }
}