/*fn: filterproducts.css*/

                        
/*fn: search.css*/
#search {
  border: 1px solid #ced4da;
  width: 100%;
  background: url(/website/asset/image/search.png?v=1679211743) #fff top 50% left 10px no-repeat;
  padding-left: 40px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  outline-color: #007bff;
}

/* Brand Spotlight Hub */
.search-brand-hub {
  background: linear-gradient(135deg, #ffffff 0%, #fcfbfb 100%);
  border: 1px solid #eaeaea !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  overflow: hidden; /* prevent child elements from causing horizontal scroll */
}

.brand-hub-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0;
  background-color: #f8f9fa;
  flex-shrink: 0;
  padding: 0 !important;
}

/* Flex utility: allow child to shrink below content size (prevents overflow) */
.min-w-0 {
  min-width: 0;
}

@media (max-width: 575px) {
  .brand-hub-logo {
    width: 52px !important;
    height: 52px !important;
  }
}

.btn-brand-pill {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569 !important;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}

.btn-brand-pill:hover {
  color: #a81e24 !important;
  border-color: #a81e24;
  background-color: #fff5f5;
  transform: translateY(-1px);
}

.btn-brand-pill.active {
  color: #a81e24 !important;
  background-color: #ffffff;
  border: 1.5px solid #a81e24;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(168, 30, 36, 0.12);
}

.btn-brand-pill.is-matched-group {
  border: 1.5px solid #a81e24;
  color: #a81e24 !important;
  font-weight: 600;
  background-color: #ffffff;
}

.btn-brand-primary {
  background-color: #a81e24 !important;
  border-color: #a81e24 !important;
  color: #fff !important;
  transition: all 0.2s ease-in-out;
}

.btn-brand-primary:hover {
  background-color: #8c161b !important;
  border-color: #8c161b !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(168, 30, 36, 0.25);
  transform: translateY(-1px);
}

.btn-brand-outline {
  background-color: transparent !important;
  border: 1px solid #a81e24 !important;
  color: #a81e24 !important;
  transition: all 0.2s ease-in-out;
}

.btn-brand-outline:hover {
  background-color: #fff5f5 !important;
  border-color: #8c161b !important;
  color: #8c161b !important;
  transform: translateY(-1px);
}

.badge-brand-primary {
  background-color: #a81e24 !important;
  color: #fff !important;
}

.badge-brand-subtle {
  background-color: #fff0f0 !important;
  color: #a81e24 !important;
  border: 1px solid #ffd6d6 !important;
}


/* Scent Consultation Card */
.search-consult-card {
  background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
  border: 1px solid #ffe3e3 !important;
  box-shadow: 0 4px 18px rgba(168, 30, 36, 0.05);
}

.btn-consult-zalo {
  background-color: #0068ff;
  color: #fff !important;
  font-size: 13.5px;
  border: none;
  transition: background-color 0.2s ease;
}

.btn-consult-zalo:hover {
  background-color: #0052cc;
  color: #fff !important;
}