/**
 * @file
 * Styles for Korean Cosmetics Brands Catalog.
 */

:root {
  --brand-primary: #A3293E;
  --brand-primary-light: rgba(232, 74, 95, 0.45);
  --brand-primary-lighter: rgba(232, 74, 95, 0.25);
  --brand-primary-bg: #fdf2f8;
}

/* Override Bootstrap primary color */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #a83342;
  border-color: #a83342;
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.text-primary {
  color: var(--brand-primary) !important;
}

.bg-primary {
  background-color: var(--brand-primary) !important;
}

/* Catalog header */
.catalog-title {
  color: var(--brand-primary);
  font-weight: 700;
}

.catalog-divider {
  height: 4px;
  width: 100px;
  border-radius: 2px;
}

/* Brand card styling */
.brand-card {
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: none;
}

.brand-card:hover {
  /*transform: translateY(-5px);*/
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* MOQ badge */
.brand-badge {
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1rem !important;
}
.badge-red {
  background-color: var(--brand-primary);
}
.badge-grey {
  background-color: #5c5c5c;
}
.badge-grey-light {
  background-color: #6161617d;
}
/* Brand logo container */
.brand-logo-container {
  height: 160px;
}

.brand-logo-text {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-primary);
}

/* Search icon positioning */
.search-icon {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #6c757d;
}

/* Filter buttons */
.filter-btn {
  font-size: 0.875rem;
  border-radius: 1rem!important;
}

/* Empty message */
.empty-message {
  width: 100%;
}

/* Make sure cards have equal height */
.card-body {
  display: flex;
  flex-direction: column;
  background-color: #28282805;
}

.card-text {
  flex-grow: 1;
}