.desktop-header {
      background-color: #fff;
    }

    .navbar-brand img {
      width: 120px;
    }
.imgLOGOicon{
    width: 145px; 
    height:45px;
}
   .offcanvas {
    z-index: 9999999 !important;
}
 
/* ================== Search Box ================== */
.search-box {
  width: 554px;
  height: 44px;
  border: 1px solid #B7B7B7;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #fff;
}

/* Input */
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding-left: 38px;
  padding-right: 50px; 
  height: 100%;
  border-radius: 20px;
}
.badge-count {
  position: absolute;
  top: -1px;
  left: 14px;
  background-color: #4C2A71;
  color: white;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: 600;
  line-height: 1;
}

.search-box button {
  background-color: #4C2A71;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 20px;
  width: 97px;
  height: 40px;
  margin-right: 2px;
  font-size: 14px;
  cursor: pointer;
}

/* Search Icon */
.search-box .search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #aaa;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.539 15.23q-2.398 0-4.065-1.666Q3.808 11.899 3.808 9.5t1.666-4.065T9.539 3.77t4.064 1.666T15.269 9.5q0 1.042-.369 2.017t-.97 1.668l5.909 5.907q.14.14.15.345q.009.203-.15.363q-.16.16-.354.16t-.354-.16l-5.908-5.908q-.75.639-1.725.989t-1.96.35m0-1q1.99 0 3.361-1.37q1.37-1.37 1.37-3.361T12.9 6.14T9.54 4.77q-1.991 0-3.361 1.37T4.808 9.5t1.37 3.36t3.36 1.37'/%3E%3C/svg%3E");
}

/* Camera Icon */
.search-box .camera-icon {
  position: absolute;
  right: 110px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M4.5 3A1.5 1.5 0 0 0 3 4.5v2a.5.5 0 0 1-1 0v-2A2.5 2.5 0 0 1 4.5 2h2a.5.5 0 0 1 0 1zm0 14A1.5 1.5 0 0 1 3 15.5v-2a.5.5 0 0 0-1 0v2A2.5 2.5 0 0 0 4.5 18h2a.5.5 0 0 0 0-1zM17 4.5A1.5 1.5 0 0 0 15.5 3h-2a.5.5 0 0 1 0-1h2A2.5 2.5 0 0 1 18 4.5v2a.5.5 0 0 1-1 0zM15.5 17a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 1 1 0v2a2.5 2.5 0 0 1-2.5 2.5h-2a.5.5 0 0 1 0-1zm-4.25-6.692c0 .68-.56 1.23-1.25 1.23a1.24 1.24 0 0 1-1.25-1.23c0-.68.56-1.231 1.25-1.231s1.25.551 1.25 1.23M5 9.077v3.692C5 13.45 5.56 14 6.25 14h7.5c.69 0 1.25-.551 1.25-1.23V9.076c0-.68-.56-1.23-1.25-1.23H12.5l-.879-1.299A1.25 1.25 0 0 0 10.581 6H9.419c-.418 0-.808.206-1.04.548L7.5 7.846H6.25c-.69 0-1.25.551-1.25 1.23m5-1.23c1.38 0 2.5 1.101 2.5 2.46c0 1.36-1.12 2.462-2.5 2.462s-2.5-1.102-2.5-2.461c0-1.36 1.12-2.462 2.5-2.462'/%3E%3C/svg%3E");
}
.ic--round-phone-iphone {
  display: inline-block;
  width: 30px;
  height:30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1m-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5m4.5-4H7V4h9z'/%3E%3C/svg%3E");
}
.mdi-light--account {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13zM11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6'/%3E%3C/svg%3E");
}
.mdi-light--heart-custom {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.24 12.25a4.2 4.2 0 0 1-1.24-3A4.25 4.25 0 0 1 7.25 5c1.58 0 2.96.86 3.69 2.14h1.12A4.24 4.24 0 0 1 15.75 5A4.25 4.25 0 0 1 20 9.25c0 1.17-.5 2.25-1.24 3L11.5 19.5zm15.22.71C20.41 12 21 10.7 21 9.25A5.25 5.25 0 0 0 15.75 4c-1.75 0-3.3.85-4.25 2.17A5.22 5.22 0 0 0 7.25 4A5.25 5.25 0 0 0 2 9.25c0 1.45.59 2.75 1.54 3.71l7.96 7.96z'/%3E%3C/svg%3E");
}
.mdi-light--cart-custom {
  display: inline-block;
   width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1m-9-1a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1M18 6H4.27l2.55 6H15c.33 0 .62-.16.8-.4l3-4c.13-.17.2-.38.2-.6a1 1 0 0 0-1-1m-3 7H6.87l-.77 1.56L6 15a1 1 0 0 0 1 1h11v1H7a2 2 0 0 1-2-2a2 2 0 0 1 .25-.97l.72-1.47L2.34 4H1V3h2l.85 2H18a2 2 0 0 1 2 2c0 .5-.17.92-.45 1.26l-2.91 3.89c-.36.51-.96.85-1.64.85'/%3E%3C/svg%3E");
}
.tabler--category-filled {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m10 0h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1M10 13H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1m7 0a4 4 0 1 1-3.995 4.2L13 17l.005-.2A4 4 0 0 1 17 13'/%3E%3C/svg%3E");
}
.flagicon{
     width: 24px; 
    height:24px;
}
.font-s{
    font-size: 14px;
    font-weight: 500;
    color:#000
}
.font-l{
    font-size: 18px;
    font-weight: 500;
        color:#000

}
.fluent--person-support-20-regular {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M10 14.5a2 2 0 0 1-1.994-1.84A6.002 6.002 0 0 1 10 1a6 6 0 0 1 5.98 5.5a.47.47 0 0 1-.48.5a.54.54 0 0 1-.525-.5a5 5 0 1 0-6.79 5.16A2 2 0 1 1 10 14.5M5.009 12H5.1c.39.381.823.717 1.292 1H5.009C4.448 13 4 13.447 4 14c0 1.309.622 2.284 1.673 2.953C6.743 17.636 8.265 18 10 18s3.257-.364 4.327-1.047C15.377 16.283 16 15.31 16 14a1 1 0 0 0-1-1h-2.041a3 3 0 0 0 0-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797C13.583 18.614 11.855 19 10 19s-3.583-.386-4.865-1.203C3.833 16.967 3 15.69 3 14c0-1.113.903-2 2.009-2M14 7a4 4 0 0 1-1.87 3.387a3 3 0 0 0-.93-.637a3 3 0 1 0-2.4 0c-.35.153-.665.37-.93.637a4 4 0 0 1-1.638-2.042A4 4 0 0 1 6 7a4 4 0 1 1 8 0'/%3E%3C/svg%3E");
}
.picicon{
      width: 30px; 
    height:30px;
}
.nav-item {
  display: flex;
  align-items: center;
  position: relative;
}

/* .nav-item .icon {
  font-size: 20px;
  position: relative;
  color: #333;
} */

.supportt-btn{
    width:147px;
    height:31px;
    background-color:#4C2A71 ;
    font-size: 16px;
    font-weight:500 ;
    border-radius:10px;
    color:#fff;
    border:none
}
.giftt-btn{
    width:147px;
    height:31px;
    background-color:#F6C605 ;
    font-size: 16px;
    font-weight:500 ;
    border-radius:10px ;
    color:#000;
        border:none

}
.mdi-light--heart--heartCustom {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.24 12.25a4.2 4.2 0 0 1-1.24-3A4.25 4.25 0 0 1 7.25 5c1.58 0 2.96.86 3.69 2.14h1.12A4.24 4.24 0 0 1 15.75 5A4.25 4.25 0 0 1 20 9.25c0 1.17-.5 2.25-1.24 3L11.5 19.5zm15.22.71C20.41 12 21 10.7 21 9.25A5.25 5.25 0 0 0 15.75 4c-1.75 0-3.3.85-4.25 2.17A5.22 5.22 0 0 0 7.25 4A5.25 5.25 0 0 0 2 9.25c0 1.45.59 2.75 1.54 3.71l7.96 7.96z'/%3E%3C/svg%3E");
}
@media (max-width: 991px) and (min-width: 768px) {
  .search-box {
  width: 240px;
  height: 34px;
  border: 1px solid #B7B7B7;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  overflow: hidden;
  padding: 0 4px; 
  position: relative;
}

.search-box .search-icon {
      position: absolute;

  flex-shrink: 0;
  color: #888;
  font-size: 16px;
  left: 8px;
  padding: 0 4px;
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size:10px;
  padding: 0 3px;
  height: 100%;
  min-width: 0; 
}

/* الزرار */
.search-box button {
  flex-shrink: 0;
  background-color: #4C2A71;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 20px;
  width: 65px;
  height: 26px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 6px;
}

.search-box .camera-icon {
      position: absolute;

  flex-shrink: 0;
  color: #888;
  font-size: 16px;
  margin-left: 6px;
}

.font-s{
    font-size: 12px;
    font-weight: 500;
    color:#000
}
.font-l{
    font-size: 14px;
    font-weight: 500;
        color:#000

}
  .badge-count {
    top: 0;
    left: 12px;
    font-size: 0.6rem;
    padding: 2px 5px;
  }
.search-box .camera-icon {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M4.5 3A1.5 1.5 0 0 0 3 4.5v2a.5.5 0 0 1-1 0v-2A2.5 2.5 0 0 1 4.5 2h2a.5.5 0 0 1 0 1zm0 14A1.5 1.5 0 0 1 3 15.5v-2a.5.5 0 0 0-1 0v2A2.5 2.5 0 0 0 4.5 18h2a.5.5 0 0 0 0-1zM17 4.5A1.5 1.5 0 0 0 15.5 3h-2a.5.5 0 0 1 0-1h2A2.5 2.5 0 0 1 18 4.5v2a.5.5 0 0 1-1 0zM15.5 17a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 1 1 0v2a2.5 2.5 0 0 1-2.5 2.5h-2a.5.5 0 0 1 0-1zm-4.25-6.692c0 .68-.56 1.23-1.25 1.23a1.24 1.24 0 0 1-1.25-1.23c0-.68.56-1.231 1.25-1.231s1.25.551 1.25 1.23M5 9.077v3.692C5 13.45 5.56 14 6.25 14h7.5c.69 0 1.25-.551 1.25-1.23V9.076c0-.68-.56-1.23-1.25-1.23H12.5l-.879-1.299A1.25 1.25 0 0 0 10.581 6H9.419c-.418 0-.808.206-1.04.548L7.5 7.846H6.25c-.69 0-1.25.551-1.25 1.23m5-1.23c1.38 0 2.5 1.101 2.5 2.46c0 1.36-1.12 2.462-2.5 2.462s-2.5-1.102-2.5-2.461c0-1.36 1.12-2.462 2.5-2.462'/%3E%3C/svg%3E");
}
.ic--round-phone-iphone {
  display: inline-block;
  width: 30px;
  height:30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1m-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5m4.5-4H7V4h9z'/%3E%3C/svg%3E");
} 
}
/* Responsive */
@media (max-width: 768px) {
  .search-box {
    width: 100%;
    height: 42px;
  }
  .search-box button {
    width: 80px;
    font-size: 13px;
  }
  .mdi--user {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4'/%3E%3C/svg%3E");
}
 .mobile-header {
      background-color: #4C2A71;
      color: #fff;
      padding: 10px 12px;
    }
.mobicon{
    width:90px;
    height:28px;
}
    .mobile-header .logo {
      width: 100px;
    }

    .mobile-header i {
      color: #fff;
      font-size: 20px;
    }

    .mobile-icons i {
      margin-left: 15px;
      cursor: pointer;
    }
.mdi-light--heart-custom {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4.24 12.25a4.2 4.2 0 0 1-1.24-3A4.25 4.25 0 0 1 7.25 5c1.58 0 2.96.86 3.69 2.14h1.12A4.24 4.24 0 0 1 15.75 5A4.25 4.25 0 0 1 20 9.25c0 1.17-.5 2.25-1.24 3L11.5 19.5zm15.22.71C20.41 12 21 10.7 21 9.25A5.25 5.25 0 0 0 15.75 4c-1.75 0-3.3.85-4.25 2.17A5.22 5.22 0 0 0 7.25 4A5.25 5.25 0 0 0 2 9.25c0 1.45.59 2.75 1.54 3.71l7.96 7.96z'/%3E%3C/svg%3E");
}
.mdi-light--cart-custom {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1m-9-1a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1M18 6H4.27l2.55 6H15c.33 0 .62-.16.8-.4l3-4c.13-.17.2-.38.2-.6a1 1 0 0 0-1-1m-3 7H6.87l-.77 1.56L6 15a1 1 0 0 0 1 1h11v1H7a2 2 0 0 1-2-2a2 2 0 0 1 .25-.97l.72-1.47L2.34 4H1V3h2l.85 2H18a2 2 0 0 1 2 2c0 .5-.17.92-.45 1.26l-2.91 3.89c-.36.51-.96.85-1.64.85'/%3E%3C/svg%3E");
}
.material-symbols-light--search {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37'/%3E%3C/svg%3E");
}
.ic--twotone-menu {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z'/%3E%3C/svg%3E");
}
.fluent-mdl2--product {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='m960 120l832 416v1040l-832 415l-832-415V536zm625 456L960 264L719 384l621 314zM960 888l238-118l-622-314l-241 120zM256 680v816l640 320v-816zm768 1136l640-320V680l-640 320z'/%3E%3C/svg%3E");
}
.fluent--gift-card-16-regular {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2zm12 7a1 1 0 0 0 1-1V8H6.707l1.147 1.146a.5.5 0 1 1-.708.708L6 8.707V12zM7.915 7H14V5a1 1 0 0 0-1-1H6v1.085q.236-.084.5-.085a1.5 1.5 0 0 1 1.415 2M6.5 7a.5.5 0 1 0-.5-.5V7zM5 5.085V4H3a1 1 0 0 0-1 1v2h1.085A1.5 1.5 0 0 1 5 5.085M4.5 7H5v-.5a.5.5 0 1 0-.5.5m-.207 1H2v3a1 1 0 0 0 1 1h2V8.707L3.854 9.854a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E");
}
.fluent--settings-28-regular {
  display: inline-block;
   width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M14 9.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9M11 14a3 3 0 1 1 6 0a3 3 0 0 1-6 0m10.71 8.395l-1.728-.759a1.72 1.72 0 0 0-1.542.086c-.467.27-.765.747-.824 1.284l-.208 1.88a.92.92 0 0 1-.703.796a11.7 11.7 0 0 1-5.412 0a.92.92 0 0 1-.702-.796l-.208-1.877a1.7 1.7 0 0 0-.838-1.281a1.7 1.7 0 0 0-1.526-.086l-1.728.759a.92.92 0 0 1-1.043-.215a12.1 12.1 0 0 1-2.707-4.672a.92.92 0 0 1 .334-1.016l1.527-1.128a1.7 1.7 0 0 0 0-2.74l-1.527-1.125a.92.92 0 0 1-.334-1.017A12.06 12.06 0 0 1 5.25 5.821a.92.92 0 0 1 1.043-.214l1.72.757a1.707 1.707 0 0 0 2.371-1.376l.21-1.878a.92.92 0 0 1 .715-.799q1.32-.294 2.704-.311c.902.01 1.8.115 2.68.311a.92.92 0 0 1 .715.8l.209 1.878a1.7 1.7 0 0 0 1.688 1.518c.233 0 .464-.049.68-.144l1.72-.757a.92.92 0 0 1 1.043.214a12.06 12.06 0 0 1 2.708 4.667a.92.92 0 0 1-.333 1.016l-1.525 1.127c-.435.32-.698.829-.698 1.37c0 .54.263 1.049.699 1.37l1.526 1.126c.316.234.45.642.334 1.017a12.1 12.1 0 0 1-2.707 4.667a.92.92 0 0 1-1.043.215m-5.447-.198a3.16 3.16 0 0 1 1.425-1.773a3.22 3.22 0 0 1 2.896-.161l1.344.59a10.6 10.6 0 0 0 1.97-3.398l-1.189-.877v-.001a3.2 3.2 0 0 1-1.309-2.578c0-1.027.497-1.98 1.307-2.576l.002-.001l1.187-.877a10.6 10.6 0 0 0-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2 3.2 0 0 1-3.178-2.852v-.002l-.163-1.46a11.5 11.5 0 0 0-1.95-.193q-1.01.014-1.975.193l-.163 1.461A3.207 3.207 0 0 1 7.41 7.737l-1.336-.588a10.6 10.6 0 0 0-1.971 3.397l1.19.877a3.2 3.2 0 0 1 0 5.155l-1.19.878a10.6 10.6 0 0 0 1.97 3.403l1.345-.59a3.2 3.2 0 0 1 2.878.16a3.2 3.2 0 0 1 1.579 2.411v.005l.162 1.464c1.297.255 2.63.255 3.927 0l.162-1.467q.036-.332.138-.645'/%3E%3C/svg%3E");
}
.fluent--chat-48-regular {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M24 6.5C14.335 6.5 6.5 14.335 6.5 24c0 3.188.851 6.173 2.338 8.745c.17.293.213.642.12.968l-2.116 7.442l7.44-2.116a1.25 1.25 0 0 1 .968.12A17.4 17.4 0 0 0 24 41.5c9.665 0 17.5-7.835 17.5-17.5S33.665 6.5 24 6.5M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20c-3.45 0-6.698-.874-9.533-2.414L6.23 43.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9 19.9 0 0 1 4 24m12-3.75c0-.69.56-1.25 1.25-1.25h13.5a1.25 1.25 0 1 1 0 2.5h-13.5c-.69 0-1.25-.56-1.25-1.25m1.25 6.25a1.25 1.25 0 1 0 0 2.5h9.5a1.25 1.25 0 1 0 0-2.5z'/%3E%3C/svg%3E");
}
.offcanvas{
    background-color:#ffffff !important;
    color:#000000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
    .menu-icons {
      background-color: #fff;
      padding: 10px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      border-bottom: 1px solid #eee;
    }

    .menu-icons div {
      color: #000000;
      font-size: 13px;
      font-weight: 500;
    }

    .menu-icons i {
      display: block;
      font-size: 22px;
      margin-bottom: 3px;
    }
 
    .badge-count {
    top: -8px;
    left: 15px;
    font-size: 0.7rem;
    padding: 2px 4px;
    color: #4C2A71;
background-color: white;
  }

}



.lang-toggle.dropdown-toggle::after {
  display: none !important;
}

.usd-text {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.dropdown-arrow {
  border: solid #000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg);
}
.custom-cat-toggle::after {
  display: none !important;
}


.custom-cat-toggle .custom-arrow {
 border: solid #000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg);
    margin-left: 6px;

}

a.log span {
  white-space: nowrap;
}

.account-item {
  position: relative;
}

.account-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  list-style: none;
  padding: 10px 0;
  width: 200px;
  display: none;
  z-index: 1000;
}

.account-dropdown li {
  padding: 8px 16px;
}

.account-dropdown li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.account-dropdown li:hover {
  background-color: #f7f7f7;
}

.account-item:hover .account-dropdown {
  display: block;
}

.account-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 20px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
.btn-sign-header{
background-color: #4C2A71;
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      border-radius: 20px;
      padding: 10px 20px;
      width:300px;
      height:54px;
      border:none
}
.btn-register-header{
 color: #8D8D8D;
 background-color: #ffffff;
      font-weight: 500;
      font-size: 20px;
      padding: 10px 20px;
      width:300px;
      height:54px;
      border:none;
      
}

.account-item {
  position: relative;
}

/* القائمة المنسدلة */
.account-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: clamp(10px, 2vw, 20px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  list-style: none;
  padding: clamp(8px, 1.5vw, 12px) 0;
  width: clamp(40px, 50vw, 330px);
  display: none;
  z-index: 1000;
}

.account-dropdown li {
  padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2vw, 16px);
}

.account-dropdown li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 8px);
  font-size: clamp(13px, 1.3vw, 15px);
}

.account-dropdown li:hover {
  background-color: #f7f7f7;
}

.account-item:hover .account-dropdown {
  display: block;
}

.account-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: clamp(2px, 2vw, 24px);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

/* زر تسجيل الدخول */
.btn-sign-header {
  background-color: #4C2A71;
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  border-radius: clamp(14px, 2vw, 20px);
  padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
  width: clamp(50px, 30vw, 300px);
  height: clamp(40px, 6vw, 54px);
  border: none;
}

/* زر التسجيل */
.btn-register-header {
  color: #8D8D8D;
  background-color: #fff;
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  border-radius: clamp(14px, 2vw, 20px);
  padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
  width: clamp(50px, 30vw, 300px);
  height: clamp(40px, 6vw, 54px);
  border: none;
}

.material-symbols--shopping-bag-outline {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 22q-.825 0-1.412-.587T4 20V8q0-.825.588-1.412T6 6h2q0-1.65 1.175-2.825T12 2t2.825 1.175T16 6h2q.825 0 1.413.588T20 8v12q0 .825-.587 1.413T18 22zm0-2h12V8h-2v2q0 .425-.288.713T15 11t-.712-.288T14 10V8h-4v2q0 .425-.288.713T9 11t-.712-.288T8 10V8H6zm4-14h4q0-.825-.587-1.412T12 4t-1.412.588T10 6M6 20V8z'/%3E%3C/svg%3E");
}
.circum--coins-1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.46 10.905a3.47 3.47 0 0 0-2.47 1.04a2.3 2.3 0 0 0-.86-1.73a2.26 2.26 0 0 0 .86-1.78a2.29 2.29 0 0 0-2.28-2.29H4.35a2.284 2.284 0 0 0-1.43 4.07a2.282 2.282 0 0 0 0 3.57a2.277 2.277 0 0 0 1.43 4.06h9.36a2.29 2.29 0 0 0 2.06-1.29a3.43 3.43 0 0 0 2.69 1.3a3.475 3.475 0 1 0 0-6.95m-4.75 5.94H4.35a1.28 1.28 0 1 1 0-2.56h9.36a1.28 1.28 0 1 1 0 2.56m0-3.56H4.35a1.285 1.285 0 1 1 0-2.57h9.36a1.285 1.285 0 0 1 0 2.57m0-3.57H4.35a1.285 1.285 0 1 1 0-2.57h9.36a1.285 1.285 0 0 1 0 2.57m4.75 7.14a2.475 2.475 0 1 1 2.48-2.48a2.477 2.477 0 0 1-2.48 2.48'/%3E%3C/svg%3E");
}
.fluent--payment-20-regular {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M13.5 13a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM2 6.75A2.75 2.75 0 0 1 4.75 4h10.5A2.75 2.75 0 0 1 18 6.75v6.5A2.75 2.75 0 0 1 15.25 16H4.75A2.75 2.75 0 0 1 2 13.25zM4.75 5A1.75 1.75 0 0 0 3 6.75V8h14V6.75A1.75 1.75 0 0 0 15.25 5zM17 9H3v4.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0 0 17 13.25z'/%3E%3C/svg%3E");
}
.mdi-light--message-text {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 20.59L6.59 17H18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2zM3 22H2V6a3 3 0 0 1 3-3h13a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H7zM6 7h11v1H6zm0 3h11v1H6zm0 3h8v1H6z'/%3E%3C/svg%3E");
}
.mingcute--coupon-line {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M19 4a3 3 0 0 1 2.995 2.824L22 7v1.817a1.55 1.55 0 0 1-.776 1.33l-.107.058a2 2 0 0 0-.14 3.515l.14.075c.433.214.82.656.876 1.24l.007.148V17a3 3 0 0 1-2.824 2.995L19 20H5a3 3 0 0 1-2.995-2.824L2 17v-1.817c0-.606.352-1.078.776-1.33l.107-.058a2 2 0 0 0 .14-3.515l-.14-.075c-.433-.214-.82-.656-.876-1.24L2 8.818V7a3 3 0 0 1 2.824-2.995L5 4zm0 2H5a1 1 0 0 0-.993.883L4 7v1.535a4 4 0 0 1 .185 6.816L4 15.465V17a1 1 0 0 0 .883.993L5 18h14a1 1 0 0 0 .993-.883L20 17v-1.535a4 4 0 0 1-.185-6.816L20 8.535V7a1 1 0 0 0-.883-.993zm-9 3a1 1 0 0 1 .993.883L11 10v4a1 1 0 0 1-1.993.117L9 14v-4a1 1 0 0 1 1-1'/%3E%3C/g%3E%3C/svg%3E");
}
.account-buttons {
  display: flex;
  flex-direction: column;
  align-items: center; 
  margin-bottom: 10px;
  border-bottom:1px solid #D9D9D9;
  padding-bottom: 10px;
}
/* الأساسيات */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}
.modal-overlay.active {
  display: flex;
}
.modal-content {
  background: #fff;
  border-radius: clamp(8px, 2vw, 16px);
  width: clamp(300px, 80vw, 687px) !important;
   height:97vh !important ;
  padding:30px 60px;
  text-align: center;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 5px;
  right: clamp(10px, 2vw, 20px);
  background: none;
  border: none;
  font-size: clamp(20px, 3vw, 28px);
  cursor: pointer;
   background:#D9D9D9;
  border-radius: 50% !important;
  width:40px;
  height:40px;
  font-size: 30px;
  cursor: pointer;
  margin-top: 6px;
}

/* العناوين */
.modal-content h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  margin-bottom: clamp(5px, 1vw, 10px);
  margin-top:8px;
  font-weight:700;
}

.modal-content p {
  font-size: clamp(12px, 1.5vw, 16px);
  color: #424242;
  margin-bottom: 30px;
    font-weight:400;

}

/* الفورم */
.modal-content input {
  width: 100%;
  padding: clamp(10px, 2vw, 12px);
  margin-bottom: 6px;
  border: 1px solid #ccc;
  border-radius: clamp(6px, 1.5vw, 10px);
  font-size: clamp(14px, 2vw, 16px);
}

.modal-signin-btn {
  width: 100%;
  background-color: #4C2A71;
  color: #fff;
  border: none;
  padding:clamp(4px, 2vw, 6px) clamp(10px, 2vw, 14px);
  border-radius: clamp(8px, 2vw, 10px);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700;
  cursor: pointer;
  margin-top:6px;
}

/* روابط */
.forgot {
  display: block;
  font-size: clamp(12px, 1.5vw, 16px) !important;
  color: #424242;
  margin-top: 8px;
  text-decoration: none;
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ccc;
  margin: 0 10px;
}

.divider span {
  font-size: clamp(12px, 1.5vw, 14px);
  color: #424242;
}

/* Social icons */
.social-icons-signin {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
  margin-bottom:6px;
}

.social-icons-signin img {
  width: clamp(50px, 5vw, 70px);
  height: clamp(50px, 5vw, 70px);
  cursor: pointer;
  margin-bottom: 10px !important;
}

/* الموقع */
.location {
  font-size: clamp(13px, 1.5vw, 15px);
  margin-bottom:10px !important;
  font-weight: 500;
  text-align: center;
}

/* النص السفلي */
.terms {
  font-size: clamp(8px, 1.3vw, 10px) !important;
  color: #424242;
    font-weight: 400;

}
.terms p {
  margin-bottom: 5px !important;
}


/* .terms a {
  color: #424242;
  text-decoration: none;
} */
.qsign{
font-size: clamp(10px, 1.3vw, 13px) !important;
  color: #424242;
    font-weight: 400;
    margin:5px auto 20px auto !important;
}
.location {
  font-size: clamp(13px, 1.5vw, 15px);
  color: #000000;
  margin-bottom: 4px;

}

.country-select {
 
  border: none;
    padding: 2px !important;

}
.password-wrapper {
  position: relative;
  display: inline-block;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  padding-right: 40px;
}

.password-wrapper .toggle-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Trick: switch input type via CSS */
#showPass {
  display: none;
}

#showPass:checked ~ #password {
  -webkit-text-security: none; /* يعمل زي النص العادي */
  text-security: none;
}
.form-custtom input::placeholder {
  font-size: clamp(14px, 1.5vw, 18px); /* حجم خط مرن */
  color: #888; /* لون placeholder */
  font-weight: 400; /* سماكة الخط */
  font-family: 'Poppins', sans-serif; /* نوع الخط لو حابة */
}
/* Popup الخاص بالكود */
.code-inputs {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  margin: clamp(15px, 3vw, 25px) 0;
}

.code-inputs input {
  width: clamp(45px, 8vw, 60px);
  height: clamp(45px, 8vw, 60px);
  text-align: center;
  font-size: clamp(20px, 3vw, 28px);
  border: 1px solid #ccc;
  border-radius: clamp(6px, 1.5vw, 10px);
}

.modify-email {
  display: inline-block;
  text-decoration: underline;
  margin-bottom: clamp(10px, 2vw, 15px);
  font-size: clamp(14px, 1.5vw, 16px);
}

.resend {
  font-size: clamp(13px, 1.5vw, 15px);
  margin-bottom: clamp(15px, 2vw, 25px);
}

.have-account {
  font-size: clamp(14px, 1.5vw, 16px);
  margin-top: clamp(15px, 2vw, 25px);
}

.have-account a {
  text-decoration: underline;
}

.not-now-btn {
  width: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: clamp(4px, 2vw, 6px) clamp(10px, 2vw, 14px);
  border-radius: clamp(8px, 2vw, 10px);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  margin-top: clamp(10px, 2vw, 15px);
  cursor: pointer;
}

/* إضافة سهم مخصص بسيط
.country-select::after {

  font-size: clamp(10px, 1vw, 12px);
  margin-left: 5px;
}

.location select {
  display: inline-block;
  vertical-align: middle ;
}
.mdi-light--chevron-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m5.84 9.59l5.66 5.66l5.66-5.66l-.71-.7l-4.95 4.95l-4.95-4.95z'/%3E%3C/svg%3E");
} */
 @media (max-width: 768px) {
.account-item:hover .account-dropdown {
    display: block;
  }
  /* نخليها تتحكم بالـ click عن طريق كلاس active */
  .account-dropdown.active {
    display: block;
  }
  .modal-content {
  background: #fff;
  border-radius: clamp(8px, 2vw, 16px);
  width: clamp(300px, 80vw, 687px) !important;
   height:70vh!important ;
  padding:30px 60px;
  text-align: center;
  position: relative;
}

}