/* جعبه مجموعه و کلی */
.sha-collection-ui {
    border: 1px solid #ddd;
    background: #1c1c1c;
    padding: 15px;
    margin: 20px 0.5%;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    width: 49%;
    display: inline-block;
    float: right;
}

.sha-overall-ui {
    background-image: linear-gradient(to bottom, #ffffff, #000000);
    padding: 15px;
    margin: 0px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(116 116 116 / 18%);
    width: 100%;
    text-align: center;
}

.sha-overall-ui h3 {
    padding: 0px 0px 10px 0px;
    margin: 10px 0px !important;
    color: #000000 !important;
    border-bottom: solid 2px #fff;
}

.sha-collection-ui h3{
    padding: 0px;
    margin: 0px 0px 15px 0px !important;
    color: #2aeead !important;
    text-align: center;
}


/* آیتم‌ها */
.sha-item-ui {
    margin: 10px 0 0 0;
    padding: 6px 12px;
    border-radius: 6px;
    background: #4d4d4d;
    transition: background 0.3s;
}
.sha-item-ui:hover {
  background: #fefefe;
}

.sha-item-ui label {
  display: inline-block;
  margin-bottom: 0px;
  font-size: 13px;
  color:#bebebe;
}

/* رپ اسلایدر */
.sha-slider-wrap {
  position: relative;
  width: 100%;
  margin: 10px 0 0 0;
}

/* خود اسلایدر */
.sha-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 5px !important;
  padding: 5px !important;
  border-radius: 6px;
  outline: none;
  background: linear-gradient(to right, #000000 0%, #5d5d5d 40%, #aaaaaa 41%, #e0e0e0 60%, #ffffff 61%, #ffffff 90%, #ffffff 91%, #ebfff1 100%)
}

/* دستگیره اسلایدر (Chrome, Edge, Safari) */
.sha-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: transform 0.2s, background 0.2s;
}
.sha-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: #eee;
}

/* دستگیره اسلایدر (Firefox) */
.sha-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: transform 0.2s, background 0.2s;
}
.sha-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  background: #eee;
}

/* پیام و آیکون آیتم */
.sha-msg{
    display: inline-block;
    margin-top: 0px;
    font-size: 13px;
    font-weight: 500;
    color: #a0a0a0;
    float: left;
    line-height: 25px !important;
}
.sha-icon {
  margin-left: 8px;
  vertical-align: middle;
  max-width: 25px;
}

/* بخش خلاصه مجموعه */
.sha-summary {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}
.sha-summary-text {
    margin-left: 6px;
    color: #c0d5e3;
    font-size: 12px;
    font-weight: 400;
}

/* بخش کلی سایت */
.sha-overall-box {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
}
.sha-overall-text {
  margin-left: 6px;
  color: #a6daf2;
}
.sha-overall-hats {
  margin-top: 15px;
}
.sha-overall-hats img {
    margin: 0 10px;
    opacity: .3;
    transition: opacity 0.3s ease;
    border: none !important;
    box-shadow: 0px 0px !important;
    max-width: 80px !important;
}
.sha-overall-hats img.active {
  opacity: 1 !important;
}




/* موبایل (عرض کمتر از 768px) */
@media (max-width: 768px) {
.sha-collection-ui {
    border: 1px solid #ddd;
    background: #1c1c1c;
    padding: 15px 10px;
    margin: 10px 0%;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    width: 100%;
    display: inline-block;
    float: right;
}

  .sha-overall-hats img {
    max-width: 45px;
    margin: 0 6px;
  }
}