/* Your CSS remains unchanged */
   
    .half-page-div, .right-side-div, .middle-page-div, .full-page-div {
      position: fixed;
      background-color: #ffffff;
      color: black;
      align-items: center;
      transition: transform 0.5s ease-out;
      z-index: 1000;

    }
    .half-page-div {
      bottom: 0;
      width: 100%;
      height: 70%;
      transform: translateY(100%);
	  overflow-y: scroll;
    }
    .half-page-div.show {
      transform: translateY(0);
    }
    .right-side-div {
      top: 0;
      right: 0;
      width: 30%;
      height: 100%;
      transform: translateX(100%);
	  overflow-y: scroll;
    }
    .right-side-div.show {
      transform: translateX(0);
    }
    .middle-page-div {
      top: 0;
      left: 50%;
      transform: translate(-50%, -100%);
      width: 60%;
      height: 70%;
    }
    .middle-page-div.show {
      transform: translate(-50%, 50%);
    }
    .full-page-div {
      bottom: 0;
      width: 100%;
      height: 100%;
      transform: translateY(100%);
    }
    .full-page-div.show {
      transform: translateY(0);
    }
    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 5px 10px;
      background-color: white;
      color: #FD5B44;;
      border: none;
      cursor: pointer;
	  z-index: 2000;
    }

	.cart-total {
	margin-top: 50px;
    flex: 0 0 auto; /* This keeps the total div fixed at the bottom */
    text-align: center;
    padding: 10px;
    bottom: 0;
    width: 100%;
}
.number-input {
    display: flex;
    align-items: center;
}
.cart-item {
	margin-top: 10px;
}

.number-input input[type="number"] {
    -moz-appearance: textfield; /* Hides the default spinner for Firefox */
    -webkit-appearance: none; /* Hides the default spinner for Chrome, Safari, Edge, and Opera */
    appearance: none; /* Standard syntax */
    text-align: center;
    width: 60px; /* Adjust the width as needed */
    padding: 8px;
    margin: 0;
    border: 0px;
    border-radius: 0; /* Remove border radius to match buttons */
}

.number-input input[type="number"]::-webkit-inner-spin-button, 
.number-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hides the default spinner for WebKit browsers */
    margin: 0;
}
 .remove {
        margin-left: 10px; /* Adjust as needed */
    }
.number-input button {
    background-color: #f0f0f0;
    border: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
    height: 100%;
}

.product-grid:hover> :not(:hover) {
 fliter: blur(5px);
 opacity: 0.5;
}	
.number-input .decrement {
    border-radius: 4px 0 0 4px; /* Left rounded corners */
}

.number-input .increment {
    border-radius: 0 4px 4px 0; /* Right rounded corners */
}

.number-input button:focus {
    outline: none; /* Remove the default focus outline */
}

.number-input button:hover {
    background-color: #e0e0e0;
}

/* Base States */
.active {
  display: block;
  animation: introAnimation 0.5s ease-out forwards;
}

.inactive {
  animation: outroAnimation 0.5s ease-in forwards;
}

/* Intro Animation (Slide in + Blur to Clear) */
@keyframes introAnimation {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* Outro Animation (Slide out + Clear to Blur) */
@keyframes outroAnimation {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
  to {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(20px);
    display: none; /* Ensures element hides after animation */
  }
}
    @media (max-width: 768px) {
      .half-page-div, .right-side-div, .middle-page-div {
        width: 100%;
        height: 100%;
        transform: translateY(100%);
      }
      .half-page-div.show, .right-side-div.show, .middle-page-div.show {
        transform: translateY(0);
      }
      .right-side-div {
        transform: translateX(100%);
      }
      .right-side-div.show {
        transform: translateX(0);
      }
      .middle-page-div {
        transform: translate(-50%, -100%);
      }
      .middle-page-div.show {
        transform: translate(-50%, 0);
      }
    }
    .content {
      position: relative;
      z-index: 1;
      padding: 50px;
    }
    .toggle-button {

      top: 20px;
      z-index: 1000;
    }
    .toggle-button.half-page-button {
      left: 20px;
    }
    .toggle-button.right-side-button {
      left: 220px;
    }
    .toggle-button.middle-page-button {
      left: 520px;
    }
    .toggle-button.full-page-button {
      left: 720px;
    }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10px);
      z-index: 900;
      opacity: 0;
      transition: opacity 0.5s ease;
      visibility: hidden;
    }
    .overlay.show {
      opacity: 1;
      visibility: visible;
    }
	.floating-div {
  position: fixed;
  top: 50px; /* Padding from the top */
  right: -400px; /* Initially off-screen */
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  z-index: 9999; /* Ensure it's above other elements */
  transition: right 1s ease-in-out; /* Intro animation */
}

.floating-div.show {
  right: 0; /* Slide in from the right */
}
.progress-container {
  width: 100%;
  background-color: #f3f3f3;
  border-radius: 5px;
    z-index: 10999; /* Ensure it's above other elements */

}

.progress-barr {
  width: 0%;
  height: 5px;
  background-color: #FD5B44;
  border-radius: 5px;
  transition: width 3s linear; /* Duration matches the timeout in JavaScript */
}

small {
  font-size: small !important;

}
.inactive {
	display: none !important;
  animation: outroAnimation 0.5s ease-out forwards;
}
.stats {
  display: flex;
}
.card {
  flex: 1;
  width: 50%;
  padding: 12px;
  margin: 5px 12px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border: none;
  background-color: transparent;
}