/* Hide Radio button */
.rate > input{
  display: none;
}

.rate{
  display: inline-block;;
  border: 0;
}

.rate > label{
  float: right;
}

/* Showing the stars */
.rate > label:before{
  display: inline-block;
  font-size: 1.1rem;
  font-family: FontAwesome;
  content: "\f005";
  margin:0;
  padding:0.3rem .2rem;
  cursor: pointer;
}

/* Half star */
.rate .half:before{
  content: "\f089";
  position: absolute;
  padding-right: 0;
}

/* Click and hover */
input:checked ~ label, label:hover ~ label{
  color: #ffb503;
}

/* hover hightlight */
input:checked + label:hover, input:checked ~ label:hover,input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label{
  color: #cc9000;
}

.rating-star i{
  color: #ffb503 !important;
}

ul.thumb{
  margin:0 auto;
  padding: 0;
  float: left;
}
ul.thumb li{
  list-style: none;
  margin: 10px;
}
ul.thumb li img{
  width: 80px;
  height: 80px;
  border: 1px solid grey;
}

.custom-btn {
  font-size: 13px !important;
  font-weight: bold;
}

.custom-bg {
  background-color: rgb(235 239 239); /* 更柔和的黄色 */
}

.card .title {
  color: #371d4d;
}

.card .brand_title {
  font-size: 13px;
}

.brand-image {
  max-width: 100px; /* 限制宽度 */
  max-height: 50px; /* 限制高度 */
  object-fit: contain; /* 保持图片比例 */
  padding: 2px;
}

/* Reduce gaps between sections */
.section-pagetop {
    padding: 0 !important;
    margin-top: 0;
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

/* Ensure the bg class has proper styling */
.section-pagetop.bg {
    background-color: transparent; /* Changed from #f8f9fa to transparent */
    border-bottom: none; /* Removed border */
    padding: 0 !important; /* Added to ensure no padding */
}

/* Adjust brands section styling */
.section-brands {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0 !important;
    margin-top: 0 !important; /* Added to remove top margin */
}

.brands-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 2px 0; /* Reduced from 5px to 2px */
    border-top: none;
    border-bottom: none;
}

.brands-label {
    font-weight: bold;
    margin-right: 15px;
    color: #212529;
}

.brand-btn {
    padding: 2px 8px !important;
    margin: 2px !important;
    display: inline-block;
    border: 1px solid #4fa607;
    border-radius: 20px;
    color: #4fa607;
    background-color: white;
    font-size: 14px;
    transition: all 0.3s;
    min-width: 80px;
    text-align: center;
}

.brand-btn:hover, .brand-btn.active {
    background-color: #4fa607;
    color: white !important;
    text-decoration: none;
}

/* Ensure active state persists after click */
.brand-btn.active {
    background-color: #4fa607;
    color: white !important;
    text-decoration: none;
    font-weight: bold;
}

/* Ensure section-content has transparent background */
.section-content {
    padding-top: 5px !important; /* Further reduced top padding from 10px to 5px */
    margin-top: 0 !important;
    background-color: transparent !important;
}

.section-content.bg {
    background-color: transparent !important;
}

/* Set white background for the entire page */
body {
    background-color: white !important;
}

/* Ensure containers have white background */
.container {
    background-color: white !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure rows and columns have white background 
.row, .col, .col-md-3, .col-md-9 {
    background-color: white !important;
}*/

/* Ensure aside has white background */
aside {
    background-color: white !important;
}

/* Ensure cards have white background */
.card, .card-body, .card-header, .card-footer {
    background-color: white !important;
}

/* Ensure filter groups have white background */
.filter-group {
    background-color: white !important;
    margin-bottom: 0 !important;
}

/* Ensure list groups have white background */
.list-group, .list-group-item {
    background-color: white !important;
}

/* Ensure form groups have white background */
.form-group {
    background-color: white !important;
}

/* Ensure form checks have white background */
.form-check, .form-check-label, .form-check-input {
    background-color: white !important;
}

/* Reduce card margins */
.card {
    margin-bottom: 10px !important; /* Reduced from default */
}

/* Reduce spacing in filter groups */
.filter-group {
    margin-bottom: 0 !important;
}

.card-header {
    padding: 0.5rem 1rem !important; /* Reduced padding */
}

.card-body {
    padding: 0.75rem !important; /* Reduced padding */
}

/* Reduce spacing in product grid */
main .row {
    margin-top: 0 !important;
}

.col-md-4 {
    padding-bottom: 10px !important;
}

.card-product-grid {
    margin-bottom: 10px !important;
}

/* Reduce spacing in pagination */
nav.mt-4 {
    margin-top: 10px !important;
}

/* Adjust spacing between sidebar and main content */
.row > aside.col-md-3 {
    padding-right: 10px !important;
}

.row > main.col-md-9 {
    padding-left: 10px !important;
}

/* Reduce header spacing */
header.border-bottom.mb-4.pb-3 {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

/* Reduce spacing in filter options */
.filter-option {
    margin-bottom: 5px !important;
}

.vertical-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Reduce spacing in form groups */
.form-row {
    margin-bottom: 5px !important;
}

.form-group {
    margin-bottom: 5px !important;
}

/* Adjust button spacing */
.btn-block {
    margin-top: 5px !important;
}