hr{color:gray;}
#tit{
    li {
    display: flex;
    align-items: center;
    gap: 2px; /* Adjust spacing between items */
    flex-wrap: wrap; /* Ensures responsiveness */
}

.divider {
    width: 2px;
    height: 15px;
    background-color: gray; /* Light gray divider */
}
}
#xzoom-default{width:400px; height:400px;}
.xzoom-gallery{width:80px; height:75px;}

.ribbon {
  width: 48%; /* Increased by 20% */
  height: 0px;
  position: relative;
  float: left;
  background-size: cover;
  text-transform: uppercase;
  color: black;
}

.ribbon:nth-child(even) {margin-right: 4%;}

@media (max-width: 500px) {.ribbon {width: 100%;} .ribbon:nth-child(even) {margin-right: 0%; }

#xzoom-default{width:99%;}
.xzoom-gallery{width:20%;}

}

.wrap {
  width: 100%;
  height: 226px; /* Increased by 20% */
  position: absolute;
  top: 1px;
  left: -4px;
  overflow: hidden;
}

.wrap:before, .wrap:after {
  content: ""; 
  position: absolute;
}

.wrap:before {
  width: 24px; /* Increased by 20% */
  height: 5px;
  left: 60px; /* Adjusted position */
  background: #4D6530;
  border-radius: 5px 5px 0px 0px;
}

.wrap:after {
  width: 5px; /* Increased by 20% */
  height: 24px;
  left: 0px;
  top: 60px; /* Adjusted to fit better */
  background: #4D6530;
  border-radius: 0px 5px 5px 0px;
}

.ribbon6 {
  width: 120px; /* Increased by 20% */
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 18px; /* Adjusted to fit */
  left: -30px; /* Adjusted position */
  z-index: 2;
  overflow: hidden;
  transform: rotate(-45deg); /* Left side rotation */
  border: 1px dashed;
  box-shadow: 0 0 0 2px #57DD43, 0px 12px 3px -9px rgba(0,0,0,0.6);
  background: #57DD43;
  text-align: center;
  font-size: 12px; /* Adjusted for new size */
}

/*Button + - */
.qty-controls {height: 37px; max-width:260px;}

.cart-adjust, .product-adjust {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #1d8cf8, #3356d8);
  display:inline-block;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  font-family:Arial,sans-serif;
  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray;
    width: 30px;
    height: 30px;
    background-color: #007bff;
    color: white;
    font-size: 20px;
}

.product-adjust:hover {    background-color: #0056b3;}

.product-qty {
    min-width: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 25px;
    border: 1px solid #ccc;
    border-radius: 5px;

    border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);

  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray;
margin-right:18px;
}

/*HEADER FOOTER*/
    /* Global Styling */
* {margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }


a {text-decoration: none; color: #fff; transition: color 0.3s ease, transform 0.3s ease;}

    a:hover { color: #ffe8a1; transform: scale(1.05);}

.cc {
  font-size:11px;
  width:100%;
  height:100%;
}

#co {
  position:relative;
  top:-26px;
  right:-13px;
  color:red
}

.three-d input{width:56%;height:30px;border-radius: 5px;}

    /* 3D Effect */
.three-d {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #1d8cf8, #3356d8);

background-blend-mode: multiply;
background-repeat: repeat;
background-color:rgba(255,255,255,0.8);;
    
overflow: hidden;
    }

    /* Header Styling */
header {  
position: fixed;
top: 0px;
padding: 10px;
background: rgba(95, 254, 159, 0.9); /* Adjusted RGB values */
border: 0 solid var(--dark);
overflow: hidden;
width: 100%;
z-index: 2;

}

    header .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
    }

    header nav {
        display: flex;
        gap: 1.5rem;
    }

    header nav a {
        font-size: 1rem;
    }

    /* Footer Styling */
    footer {
        padding: 2rem 2rem;
        text-align: center;
        margin-top: auto;
    }

    footer nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    footer nav a {
        font-size: 0.9rem;
    }

    footer p {
        font-size: 0.8rem;
        color: #ccc;
    }


/*HEADER FOOTER //*/

/* Styling for Paragraphs */
p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 1rem 0;
    text-align: justify;
    transition: color 0.3s ease;
}

p:hover {
    color: #1d8cf8; /* Subtle color shift on hover */
}

/* Styling for Headings */
h2 {
    font-size: 2rem;
    margin: 1.5rem 0 1rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 0.5rem;
}

h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1d8cf8, #3356d8);
    margin-top: 8px;
    border-radius: 8px;
}

/* Styling for Unordered Lists */
ul {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default padding */
    margin: 1rem 0;
}


.zg ul li {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Add a bullet-like symbol with 3D effect */
.zg ul li::before {
    content: "•";
    color: #1d8cf8;
    font-size: 1.5rem;
    margin-right: 1rem;
    line-height: 1;
}

.zg ul li:hover {
    background: #f0f9ff;
    transform: translateX(10px); /* Subtle slide effect */
}

/* Extra responsive styling */
@media (max-width: 768px) {
  h2 {
        font-size: 1.6rem;
    }

    p {
        font-size: 0.95rem;
    }

    ul li {
        padding: 0.75rem 1rem;
    }
}

#customers th,input[type=submit] {
  background-color:#4caf50;
  color:#fff
}
.mySlides {
  display:none
}
.price,
li {
  list-style-type:none
}
.button,
a {
  text-decoration:none
}
*,
.box,
.box span {
  box-sizing:border-box
}
.button,
.price li,
.xzoom-thumbs,
h1 {
  text-align:center
}



#customers {
  font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  border-collapse:collapse;
  width:100%
}
#customers td, #customers th {
  border:1px solid #ddd;
  padding:2px
}
#customers tr:hover {
  background-color:#ddd
}
#customers th {
  padding-top:12px;
  padding-bottom:12px;
  text-align:left
}

td:first-child {width: 55px;}
td:nth-child(3) {width: 95px;}

table tfoot td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

table tfoot td:first-child {
  padding-left: 20px !important; /* Adjust the value as needed */
}

.form input[type=text],
select,
textarea {
  width:100%;
  margin-bottom:10px
}
input[type=text],
select,
textarea {
  padding:12px;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
  resize:vertical
}
input[type=submit] {
  padding:12px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer
}
input[type=submit]:hover {
  background-color:#45a049
}
,
h1,h2,h3,h4,h5,h6 {
  font-family:"Segoe UI",Arial,sans-serif
}
h1 {
  font-size:30px
}
h3 {
  font-size:24px
}
.ps,
.px,
h2,
h4 {
  font-size:20px
}
h5 {
  font-size:18px
}
h6 {
  font-size:16px
}
h1,h2,h3,
p {
  line-height:200%
}
h1,h2,h3,h4,h5,h6 {
  font-weight:400;
  margin:10px 0
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
  font-weight:inherit
}
hr {
  border-top:1px solid #eee;
  margin:10px 0
}
a {
  color:inherit
}
li {
  font-size:16
}
p {
  font-size:17px
}



.pp,
.ps,
.px {
  font-family:"Times New Roman",Times,serif
}
.box,
.button,
.button:link {
  color:#fff
}
.price img {
    max-width:99%;
  object-fit:cover;
}


.slideshow-container {
  max-width:1000px;
  position:relative;
  margin:auto;
}
.fade {
  -webkit-animation-name:fade;
  -webkit-animation-duration:1.5s;
  animation-name:fade;
  animation-duration:1.5s
}
@-webkit-keyframes fade {
  from {
    opacity:.4
  }
  to {
    opacity:1
  }
}
@keyframes fade {
  from {
    opacity:.4
  }
  to {
    opacity:1
  }
}
@media only screen and (max-width:300px) {
  .text {
    font-size:11px
  }
}
.price {
  border:1px solid #eee;
  margin:0;
  padding:0;
  -webkit-transition:.3s;
  transition:.3s
}
.price:hover {
  box-shadow:0 8px 12px 10px rgba(0,0,0,.5)
}
.price li {
  border-bottom:1px solid #eee;
    padding: 6px 0;

    
}


.button {
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 background: linear-gradient(145deg, #1d8cf8, #3356d8);
 border-radius: 8px;

  display:inline-block;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  font-family:Arial,sans-serif;
  line-height:2.5em;
  padding:0 2em;
  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray
}
.columns { display:inline-block; padding:5px;  flex: 0 0 auto;  color:black;}



@media only screen and (max-width:1000px) {
.modal {padding-top:0;}}
@media only screen and (max-width:600px) {
.columns {width:49%;}
  .mh {display:none;}}

.box span,.box:before { top:0; height:100%; position:absolute; width:100% }


.container {
    max-width: 1000px;
    margin: 10px auto;       /* top and bottom margin */
    padding: 0px;
    display: flex;
    flex-wrap: wrap;          /* allow stacking on mobile */
    box-sizing: border-box;
}

/* Left column: #default */
#default {
    flex: 0 0 45%;           /* ~45% width on desktop */
    box-sizing: border-box;
}

/* Right column: #tit */
#tit {
    flex: 0 0 50%;           /* ~50% width on desktop */
    box-sizing: border-box;
}

/* Mobile layout: stack vertically */
@media (max-width: 768px) {
    #default, #tit {
        flex: 1 0 100%;      /* full width on small screens */
    }
}


/* Product card styling */
.price {list-style-type: none;
padding: 5px; margin: 0; width: 200px; 
background-color: #fff; border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
text-align: center; transition: transform 0.3s ease;
white-space: nowrap; -webkit-line-clamp: 1;  overflow: hidden; margin:0px 5px 0px 5px;
}


/* Styling for the product image */
.price img {width: 100%; height: 130px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}
/* Product details */
.price li:nth-child(3) {font-weight: bold;}


.cp { font-size: 1.1em; font-weight: bold;}

.cart-add:hover {background-color: #2980b9;}

/* Responsive adjustments */
@media (max-width: 768px) {.price {width: 180px;}}
@media (max-width: 480px) {.price {width: 100%; }}





.xzoom-container{height:auto; display:inline-block}
.xzoom-thumbs{margin-bottom:10px}
.xzoom-gallery,.xzoom-gallery2,.xzoom-gallery3,.xzoom-gallery4,.xzoom-gallery5 {border:1px solid #cecece; margin-left:5px; margin-bottom:10px}









/*THEME CUBE START*/

/* Reset */


html, body {overflow: hidden;  width: 100vw;  height: 100dvh;   display: flex;  justify-content: center;  align-items: center;}
* {box-sizing: border-box;  margin: 0;padding: 0;}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-image: url('https://i.ytimg.com/vi/0hNU-zplTSQ/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGDEgZShTMA8=&rs=AOn4CLDMO4DnKh6mWoHC7N_8okyba_iXgQ'); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
color:white;
    
}










/*Bottom Bar*/
#MAIN {
    z-index: 10000;
    background-color: #22A322; /* Green background */
    color: #fff;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px; /* Rounded corners */
    border: 3px solid white; /* White border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Outer shadow */
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.T{font-size: 11px;}

/* Left side (Savings) */
.cart-sav {
    background: #EAF8E6; /* Light green background */
    color: #2E7D32; /* Dark green text */
    padding: 5px 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    width:43%;
}

/* Savings Icon */
.cart-save::before {
    content: "💡"; /* Placeholder emoji */
    margin-right: 5px;
    font-size: 14px;
}


.cart-save::before {
    content: "";
    display: inline-block;
    width: 5px; /* Adjust width */
    height: 18px; /* Adjust height */
    background-size: contain; /* Ensures the image fits */
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5px;
    vertical-align: middle;
}



/* Vertical White Line Between Elements */
.divider {
    width: 1.5px; /* Slightly thinner line */
    height: 25px;
    background-color: white;
    margin: 0px 7px; /* Reduced space around divider */
}

/* Right side (Total + Items) */
.cart-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
width:45%;
}

/* Cart Total */
.cart-subtotal2 { font-size: 14px; font-weight: bold; }

/* Item Count */
.cart-items-count2 {
    font-size: 11px;
    font-weight: bold;
    opacity: 0.8;
}
/* Arrow */
.arrow {
    font-size: 14px;
    font-weight: bold;
    margin-left: 6px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.arrow:hover {transform: translateX(4px);}
/*Bottom Bar /*/





/* Radio Button Container */

/* Hide default radio input */
.radio-label input {
  display: none;
}

/* macOS-Style Buttons */
.radio-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  width: min(12vw, 12vh, 55px);
  height: min(12vw, 12vh, 55px);
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5), 
              0 4px 10px rgba(0, 0, 0, 0.1);
}

/*    display: flex;
    flex-direction: column; 
    align-items: center; 
    cursor: pointer;
.F{font-size:9px;}

*/


.radio-label:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.7), 
              0 6px 15px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

/* Active (Selected) Button */
.radio-label input:checked + svg {
  fill: white;
  filter: drop-shadow(0px 0px 10px rgba(0, 122, 255, 0.5));
}

.radio-label:has(input:checked) {
  background: linear-gradient(145deg, #007aff, #005ecb);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.5), 
              0 6px 15px rgba(0, 122, 255, 0.3);
  transform: scale(1.05);
}

/* macOS-Style Icons */
.radio-label svg {
  width: 30px;
  height: 30px;
  fill: rgba(51, 51, 51, 0.8);
  transition: fill 0.3s ease-in-out, transform 0.2s ease;
}
.cc svg path, .cc svg circle{stroke: rgba(51, 51, 51, 0.8);}

.radio-label:hover svg {
  fill: #007aff;
  transform: scale(1.1);
}


#MAIN, .radio-group {
    position: fixed;
    bottom: 83px; /* Adjust this value for spacing */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    #MAIN, .radio-group {
        bottom: 78px; /* Adjust this value for spacing */}
}


.radio-group {
    bottom: 10px; /* Adjusted spacing */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 16px;
    display: flex;
    gap: 9px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow:hidden;
}


.radio-input {
    display: none; /* Initially hidden */
    cursor: pointer;
    font-size: 16px; /* Adjust as needed */
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px;
    min-width: 0%;
    height: min(12vw, 12vh, 55px);
    transition: min-width 1.2s ease-in-out, opacity 1.2s ease-in-out;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5), 
                0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Hidden initially */
}

/* Active state */
.radio-input.active {
    display: flex; /* Show the element */
    opacity: 1;
    min-width: 67%;
}





/* Global Reset */


/* Scene */
.scene {
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
  position: absolute;
  top: 0;
  left: 0;
}

/* Cube */
.cube {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
/* Cube Faces */
.cube__face {
  position: absolute;
}
/* Active Face */
.cube__face.active {
  opacity: 1; /* Fully visible */
  z-index: 1000000; /* Moves it above other faces */
/*overflow: scroll; */
}

/* Cube Face Colors */
.cube__face--front  { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--right  { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--back   { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--left   { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--top    { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--bottom { background: hsla(0, 0%, 0%, 0.7); }

.c_body { overflow: auto; width:100%; height:100%;}


/*V IMP ADD TO CART, PRODUCT VIEW*/
.cart-addd {cursor: pointer; position: relative; }


/* NEW SLIDES ALL IN ONE */

/* 🔥 Fix: Ensure all slides fit in one row */
.slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%; /* Default, will be set dynamically in JS */

}

.slider img{border-radius: 8px;}

/* 🔥 Fix: Each slide takes full space */
.slide {
    padding:10px;
    flex-shrink: 0;
    width: 100%; /* Ensure full image display */
    box-sizing: border-box;
}



/* 🔥 Fix: Ensure images are fully displayed */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures full image display */
}

/* Radio button navigation */
.slider-buttons {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.slider-buttons input {
    display: none;
}

.slider-buttons label {
    cursor: pointer;
    padding: 3px;
    background: #ddd;
    margin: 3px;
    border-radius: 1px;
    width: 15px;
    display: inline-block;
}

.slider-buttons input:checked + label {
    background: #333;
    color: #fff;
}

/* Responsive Fix */
@media (max-width: 600px) {
    .slider-container {
        flex-direction: column;
    }
}


/*Horizintal scroll 2*/
.slider-container,        .my-slider {
            all: unset; /* Reset inherited styles */
            width: auto;
            overflow-x: auto;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            display: flex;
            box-sizing: border-box; /* Prevent unwanted width changes */
            padding: 15px;
            border: 0px solid #000;
            border-radius:8px;
          margin:5px;
          margin-right:5px;
overflow: hidden;
/*max-height:350px;*/
}

/*Horizintal scroll 2*/
        .my-slider {
            all: unset; /* Reset inherited styles */
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            display: flex;
            box-sizing: border-box; /* Prevent unwanted width changes */
            padding: 15px;
            border: 0px solid #000;
margin-bottom: 10px;
}


.slider-container {
    background-color: white;
            padding: 5px;
}







        .my-slider .columns {
            flex: 0 0 210px; /* Fixed width */
            height: auto;
            scroll-snap-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .my-slider {padding-left: 90%}
            .my-slider > *:first-child {margin-left: 30%;}
}

/*MOON AND SUN */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }  /* Start & End at normal position */
    16% { transform: translateY(-10px); }   /* Move up */
    32% { transform: translateY(10px); }    /* Move down */
    48% { transform: translateY(-8px); }    /* Move up again */
    64% { transform: translateY(8px); }     /* Move down again */
    80% { transform: translateY(-5px); }    /* Final small up */
}

#themeToggle {
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    animation: bounce 2s ease-in-out;
}

/*MOON AND SUN */




/*CATEGODY STYLE*/

        .sidebar { width: 30%; padding: 5px; color: white; overflow-y: auto; }
        .category-list { list-style: none; }
        .category-list li { padding: 10px; cursor: pointer; background: #34495e; margin-bottom: 5px; text-align: center; position: relative; }
        .category-list li.active { background: #1abc9c; }
        .category-list li:hover { background: #1abc9c; }
        .category-image { text-align: center; margin-top: 5px; display: none; }
        .category-image img { width: 100%; max-height: 150px; object-fit: contain; }
        .content { width: 68%; overflow-y: auto; padding: 5px; }
        .product-section h2 {color:white;}
        .products { display: flex; gap: 10px; flex-wrap: wrap; }
        .product { width: 120px; padding: 5px; background: #ecf0f1; text-align: center; border-radius: 5px; }
        .product img { width: 100px; height: 100px; object-fit: cover; }
        @media (max-width: 768px) {
            body { flex-direction: row;}
            .sidebar { width: 30%; height: 100vh; overflow-y: auto; }
            .category-list { display: block;}
            .content { width: 68%; height: 100vh; overflow-y: scroll;}
            .product { width: 27vw;}
            .product img { width: 24vw;}
}

.sidebar, .content {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}
/*CATEGODY STYLE*/

/*LOCATION PIN STYLE*/
/* Container style */
.container1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: white;
  background-image: url("https://img.freepik.com/free-vector/realistic-blue-sky-background_1048-6707.jpg");
  background-size: cover; /* Ensures the image covers the container */
  background-position: center; /* Centers the image */
}

/* Location style */
.location {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  cursor: pointer;
  border-right: 1px solid gray; /* Right border */
  border-radius: 0px 20px 0px 0px;
  padding: 5px;
  font-family: "Lora", serif; /* Apply Lora font to location */
}

/* Pin style */
.pin {
  font-weight: bold;
  color: #007BFF;
  font-family: "Lora", serif; /* Apply Lora font to pin */
}

/* Area style */
.area {
  font-size: 14px;
  color: #555;
  font-family: "Lora", serif; /* Apply Lora font to area */
}

/* Delivery info style */
.delivery-info {
  display: flex;
  flex-direction: column;
  font-family: "Lora", serif; /* Apply Lora font to delivery-info */
}

/* Delivery time style */
.delivery-time {
  font-weight: bold;
  font-family: "Lora", serif; /* Apply Lora font to delivery-time */
}  





















/*PPP*/
      .containerppp {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .button-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .button-container button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
            margin: 2px;
        }
        .button-container button:hover {
            background-color: #0056b3;
        }
        .policy-content {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
























  /* Custom Radio Button Styles */
  .radio-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #aaa;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.3s ease;
  }

  /* Inner Circle for Checked Radio */
  .radio-btn:checked::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #4caf50;
    border-radius: 50%;
    top: 1px;
    left: 1px;
  }

  /* Hover Effect */
  .radio-btn:hover {
    border-color: #2196f3;
  }

  /* Custom Label Styles */
  .label-bold {
    font-size: 14px;
    font-weight: bold;
  }

  .label-font {
    font-size: 14px;
  }

  /* Container Styling */

.payment-container .payment-option .label-bold {height:30px;}
.payment-container .payment-option:first-of-type .label-bold img {
top:-8px; position: relative;  width:65px; right:-3px; margin-right:7px;}
.payment-container .payment-option .label-bold img {width:80px;top:5px; position: relative;}




  /* Spacing between items */
  .payment-option div {
    display: flex;
}

  .payment-option img {
    display: flex;
    margin-top: -10px;
  }


/*checkbox COD UPI*/

.payment-option {
  cursor: pointer;
  border: 1px solid white;
  border-radius: 10px;
  transition: border-color 0.3s, background 0.3s;
}

.payment-option:hover {
  border-color: #999;
  background: rgba(0, 0, 0, 0.8);
}

.payment-option.selected {
  background: rgba(0, 0, 0, 0.4); /* selected background */
}


.payment-container {
  display: flex;
  flex-direction: row; /* side by side by default */
  flex-wrap: wrap;     /* wrap to next line if needed */
  gap: 15px;           /* spacing between boxes */
}

/* Mobile: stack vertically */

.payment-option {
  flex: 1 1 45%;       /* take up ~45% width on desktop */
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 10px;
  position: relative; /* Important for absolute positioning inside */
}

.cart-subtotalupi {
  margin: 0;
}

.vertical-line {
  width: 1px;
  height: 40px;
  background-color: #ccc;
  margin: 0 10px;
}


.price-block {
  flex-direction: column;
}

.save-text {
  position: absolute;
  bottom: 19px;      /* Adjust to move vertically */
  color: green;
  font-weight: bold;
  font-size: 14px;
}


.csdel{
  font-size: 14px;
  top: 5px;      /* Adjust to move vertically */
  font-weight: ;

}



.payment-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
}

.radio-btn {
  margin-left: auto;
}



/*FORM GROUP*/
    .form-group {
      position: relative;
      margin-bottom: 20px;
      flex: 1;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 14px 12px 6px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
      background: white;

}

    .form-group label {
      position: absolute;
      top: 12px;
      left: 12px;
      background: orange;
      padding: 0 6px;
      pointer-events: none;
      transition: 0.2s ease all;
      border-radius: 10px;
border: 1px solid gray;
}

    .form-group input:focus + label,
    .form-group input:not(:placeholder-shown) + label,
    .form-group textarea:focus + label,
    .form-group textarea:not(:placeholder-shown) + label {
      top: -8px;
      left: 10px;
      border-radius: 15px;
    }
    .form-group textarea {resize: none;}

.row,.otp-inline {  display: flex;  gap: 10px;}










    #fox {
      display: flex;
      gap: 15px;
    }

    .bzox {
      flex: 1;
      padding: 5px;
      border: 1px solid #ccc;
      text-align: center;
    }

    /* Stack vertically on small screens */
    @media (max-width: 768px) {
      #fox {
        flex-direction: column;
      }
    }







/*history*/

/* Container for the whole history section */
#history {
  max-width: 800px;
  margin: 30px auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Each order block */
.order-box {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 10px;
  transition: transform 0.2s ease;
margin:10px;
}

.order-box:hover {
  transform: scale(1.01);
}

/* Order Header */
.order-head {
  font-weight: 600;
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.order-head strong {
  color: #34495e;
}

/* Product list within each order */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Individual product item */
.product-item {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 6px 6px;
  gap: 10px;
  transition: background 0.3s ease;
}

.product-item:hover {
  background: #f0f8ff;
}

/* Product image */
.product-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #ccc;
}

/* Product info */

.product-info {
width:100%;
}

.product-title {
  font-weight: 600;
  font-size: 15px;
  color: #2d3436;
  float: left;
}

.product-qty {
  font-size: 14px;
  color: #7f8c8d;
  float: right;
}



/* Responsive adjustments */
@media screen and (max-width: 600px) {

  .product-item {
    align-items: flex-start;
  }

  .product-item img {
    width: 60px;
    height: auto;
  }
}




















.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.order-id {
  flex: 1;
  text-align: left;
  color: #2c3e50;
}

.order-date {
  flex: 1;
  text-align: center;
  color: #555;
}

.order-status {
  flex: 1;
  text-align: right;
}

.order-status .badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

/* Status Colors */

.badge-Pending, .badge-Confirmed {
  background-color: #fff3cd;
  color: #856404;
}

.badge-Shipped {
  background-color: #d0ebff;
  color: #0c5460;
}

.badge-InTransit {
  background-color: #e0c9f7;
  color: #5e35b1;
}

.badge-Delivered {
  background-color: #d4edda;
  color: #155724;
}

.badge-Cancelled {
  background-color: #f8d7da;
  color: #721c24;
}



/*Tracking*/

.tracking {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 15px 0px 0px 0px;
  padding: 0 0px;
}

.tracking .progress-line {
  position: absolute;
  top: 12px; /* aligns with icon center */
  left: 0;
  right: 0;
  height: 4px;
  background: #ccc;
  z-index: 0;
}

.tracking .step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.tracking .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 4px;
  background: #ccc;
  z-index: -1;
}

.tracking .step.active:not(:last-child)::after {
  background: #27ae60; /* Green progress */
}

.tracking .circle {
  width: 24px;
  height: 24px;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  z-index: 2;
}

.tracking .step.active .circle {
  background: #27ae60;
}

.tracking .step p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #2d3436;
}




/*SEARCH RESULT*/

#results {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.result-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
margin:0px 10px 0px 10px;
}

.result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.result-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 16px;
    flex-shrink: 0;
    border: 1px solid #ddd;
}

.result-item div {
    flex-grow: 1;
}

.result-item strong {
    display: block;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 4px;
}

.result-item span {
    font-size: 0.9rem;
    color: #555;
}

.result-item span.price {
    font-weight: bold;
    color: #2e8b57;
    margin-top: 4px;
}


.price2 {
    font-weight: bold;
    color: #2e8b57;
float:right;
}

span .price2{color:green;
    font-size: 1rem;
}

.mrp {
    text-decoration: line-through;
    color: #999;
    margin-left: 6px;
    font-size: 0.9rem;
}

.discount {
    color: #d9534f;
    font-size: 0.9rem;
    margin-left: 6px;
}










/* Toast container */
#toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 16px 24px;
  position: fixed;
  z-index: 1000;

  /* ✅ Centering both ways */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 16px;
  opacity: 0;
  transition: opacity 0.5s;
}

/* Show the toast */
#toast.show {
  visibility: visible;
  opacity: 1;
}



/*QR STYLISH SECTION*/


       .qr-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

         border-radius: 16px;
      padding: 20px;
      width: 300px;
      margin: 0 auto;
    }

    #qrcode {
      margin-bottom: 15px;
    }

    .upi-info {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .upi-info button {
      background: #f2b600;
      color: black;
      padding: 5px 12px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .upi-amount {
      font-size: 22px;
      font-weight: bold;
      color: #00ff99;
    }

    .countdown {
      margin-top: 10px;
      color: #f2b600;
      font-size: 14px;
    }

    .secure-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
      color: #00d4ff;
      font-size: 13px;
    }

    .payment-logos {
      margin-top: 15px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .payment-logos img {
      height: 30px;
    }