/**
 * BrandCoves Engine — Search widget styles
 * Aesthetic: clean warm-white with amber accent. Confident, editorial.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bce-w-bg:       #fafaf8;
  --bce-w-surface:  #ffffff;
  --bce-w-border:   #e2e0d8;
  --bce-w-accent:   #c97d2a;
  --bce-w-accent2:  #8b4f0f;
  --bce-w-text:     #1a1916;
  --bce-w-text-dim: #6b6960;
  --bce-w-radius:   12px;
  --bce-w-shadow:   0 4px 24px rgba(0,0,0,.1);
}

/* ── Widget container ──────────────────────────────────────────────────── */
.bce-search-widget {
  width:       100%;
  font-family: 'DM Sans', -apple-system, sans-serif;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.bce-search-form {
  position:  relative;
  max-width: 680px;
  margin:    0 auto;
}

.bce-input-wrap {
  display:       flex;
  align-items:   center;
  background:    var(--bce-w-surface);
  border:        2px solid var(--bce-w-border);
  border-radius: var(--bce-w-radius);
  box-shadow:    var(--bce-w-shadow);
  overflow:      hidden;
  transition:    border-color .2s ease;
}

.bce-input-wrap:focus-within {
  border-color: var(--bce-w-accent);
}

.bce-search-icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  margin:      0 12px;
  color:       var(--bce-w-text-dim);
}

.bce-search-input {
  flex:        1;
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: 'DM Sans', sans-serif;
  font-size:   1rem;
  color:       var(--bce-w-text);
  padding:     14px 0;
  min-width:   0;
}

.bce-search-input::placeholder {
  color: var(--bce-w-text-dim);
}

.bce-search-btn {
  background:    var(--bce-w-accent);
  color:         #fff;
  border:        none;
  padding:       14px 22px;
  font-family:   'DM Sans', sans-serif;
  font-size:     .9rem;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .18s ease;
  flex-shrink:   0;
}

.bce-search-btn:hover {
  background: var(--bce-w-accent2);
}

/* ── Suggestions dropdown ─────────────────────────────────────────────── */
.bce-suggestions {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  z-index:       1000;
  background:    var(--bce-w-surface);
  border:        1px solid var(--bce-w-border);
  border-radius: 10px;
  box-shadow:    var(--bce-w-shadow);
  list-style:    none;
  margin:        0;
  padding:       6px 0;
  max-height:    240px;
  overflow-y:    auto;
}

.bce-suggestions[hidden] {
  display: none;
}

.bce-suggestion-item {
  padding:     10px 16px;
  cursor:      pointer;
  font-size:   .9rem;
  color:       var(--bce-w-text);
  transition:  background .12s ease;
  display:     flex;
  align-items: center;
  gap:         10px;
}

.bce-suggestion-item::before {
  content:     '↗';
  color:       var(--bce-w-accent);
  font-size:   .8em;
  flex-shrink: 0;
}

.bce-suggestion-item:hover,
.bce-suggestion-item[aria-selected="true"] {
  background: #fdf5ea;
}

/* ── Progress bar ─────────────────────────────────────────────────────── */
.bce-progress {
  height:        4px;
  background:    var(--bce-w-border);
  border-radius: 2px;
  overflow:      hidden;
  margin-top:    12px;
  max-width:     680px;
  margin-left:   auto;
  margin-right:  auto;
}

.bce-progress[hidden] { display: none; }

.bce-progress-bar {
  height:     100%;
  width:      0%;
  background: linear-gradient(90deg, var(--bce-w-accent) 0%, #f0c060 100%);
  transition: width .5s ease;
}

/* ── Result area ──────────────────────────────────────────────────────── */
.bce-result {
  margin-top: 16px;
}

/* ── Direct product results ────────────────────────────────────────────── */
.bce-result-products {
  margin-top: 4px;
}

.bce-result-products .bc-product-grid {
  margin: 0;
}

/* ── Guide banner — shown when a published buying guide exists ─────────── */
.bce-guide-banner {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-top:     12px;
  padding:        16px 20px;
  background:     linear-gradient(135deg, #fffbf4 0%, #fdf3e0 100%);
  border:         1px solid #f0d49a;
  border-radius:  var(--bce-w-radius);
  text-decoration: none;
  transition:     border-color .18s ease, box-shadow .18s ease;
}

.bce-guide-banner:hover {
  border-color: var(--bce-w-accent);
  box-shadow:   0 2px 16px rgba(201,125,42,.15);
}

.bce-guide-banner__eyebrow {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--bce-w-accent);
}

.bce-guide-banner__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--bce-w-text);
  line-height: 1.3;
}

.bce-guide-banner__arrow {
  font-size:  .82rem;
  color:      var(--bce-w-text-dim);
  margin-top: 2px;
}

/* ── Guide generating indicator ────────────────────────────────────────── */
.bce-guide-generating {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  12px;
  padding:     14px 18px;
  background:  #fafaf8;
  border:      1px solid var(--bce-w-border);
  border-radius: var(--bce-w-radius);
  font-size:   .88rem;
  color:       var(--bce-w-text-dim);
}

.bce-guide-generating__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--bce-w-accent);
  flex-shrink:   0;
  animation:     bce-pulse 1.4s ease-in-out infinite;
}

@keyframes bce-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .4; transform: scale(.75); }
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.bce-result-empty {
  padding:       18px 20px;
  background:    #fafaf8;
  border:        1px solid var(--bce-w-border);
  border-radius: var(--bce-w-radius);
}

.bce-result-empty__msg {
  font-size: .9rem;
  color:     var(--bce-w-text-dim);
  margin:    0 0 12px;
}

/* ── Error state ────────────────────────────────────────────────────────── */
.bce-result-error {
  background:    #fff5f5;
  border:        1px solid #fcc;
  border-radius: var(--bce-w-radius);
  padding:       18px 20px;
  color:         #c0392b;
  font-size:     .9rem;
}

/* ── Related pills ────────────────────────────────────────────────────── */
.bce-related-section {
  display:    flex;
  flex-wrap:  wrap;
  align-items: center;
  gap:         8px;
  margin-top:  10px;
}

.bce-related-label {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--bce-w-text-dim);
  flex-basis:     100%;
}

.bce-related-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.bce-related-pill,
.bce-popular-pill {
  background:    var(--bce-w-surface);
  border:        1px solid var(--bce-w-border);
  border-radius: 20px;
  padding:       6px 14px;
  font-size:     .82rem;
  color:         var(--bce-w-text);
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  transition:    border-color .15s ease, background .15s ease;
}

.bce-related-pill:hover,
.bce-popular-pill:hover {
  border-color: var(--bce-w-accent);
  background:   #fdf5ea;
}

/* ── Popular searches ─────────────────────────────────────────────────── */
.bce-popular {
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          8px;
  margin-top:   14px;
  max-width:    680px;
  margin-left:  auto;
  margin-right: auto;
}

.bce-popular-label {
  font-size:   .78rem;
  color:       var(--bce-w-text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Product grid (injected cards) ─────────────────────────────────────── */
.bc-product-grid {
  margin:        16px 0 0;
  padding:       16px;
  background:    #f9f7f2;
  border:        1px solid var(--bce-w-border);
  border-radius: var(--bce-w-radius);
}

.bc-grid-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--bce-w-text);
  margin:      0 0 12px;
}

.bc-product-grid-inner {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

/* Compact card sizing inside the search widget */
.bc-product-grid-inner .bc-product-card {
  max-width: none;
  --bc-card-img-h:       130px;
  --bc-card-gap:         10px;
  --bc-font-size-price:  1rem;
}

.bc-product-grid-inner .bc-product-info {
  padding: 10px 12px 12px;
}

.bc-disclosure {
  font-size:  .72rem;
  color:      var(--bce-w-text-dim);
  margin:     10px 0 0;
  font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bc-product-grid-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .bce-search-btn { padding: 14px 14px; font-size: .82rem; }
  .bc-product-grid-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ── Brand cards ─────────────────────────────────────────────────────────── */
.bce-brands-section {
  margin-top: 4px;
}

.bce-brands-label {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--bce-w-text-dim);
  margin:         0 0 8px;
}

.bce-brand-cards {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.bce-brand-card {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         12px 16px;
  background:      var(--bce-w-surface);
  border:          1px solid var(--bce-w-border);
  border-radius:   var(--bce-w-radius);
  text-decoration: none;
  transition:      border-color .18s ease, box-shadow .18s ease;
}

.bce-brand-card:hover {
  border-color: var(--bce-w-accent);
  box-shadow:   0 2px 12px rgba(201,125,42,.12);
}

.bce-brand-card__media {
  width:         52px;
  height:        52px;
  flex-shrink:   0;
  border-radius: 8px;
  overflow:      hidden;
  background:    #f5f3ee;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.bce-brand-card__img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  padding:    4px;
}

.bce-brand-card__initials {
  font-family: 'Fraunces', Georgia, serif;
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--bce-w-accent);
}

.bce-brand-card__body {
  flex:       1;
  min-width:  0;
}

.bce-brand-card__cats {
  display: flex;
  gap:     6px;
  margin-bottom: 2px;
}

.bce-brand-card__cat {
  font-size:      .68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--bce-w-accent);
}

.bce-brand-card__name {
  display:     block;
  font-size:   .92rem;
  font-weight: 600;
  color:       var(--bce-w-text);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bce-brand-card__excerpt {
  font-size:   .78rem;
  color:       var(--bce-w-text-dim);
  margin:      2px 0 0;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bce-brand-card__arrow {
  font-size:   1rem;
  color:       var(--bce-w-text-dim);
  flex-shrink: 0;
  transition:  color .15s ease, transform .15s ease;
}

.bce-brand-card:hover .bce-brand-card__arrow {
  color:     var(--bce-w-accent);
  transform: translateX(3px);
}

/* ── Results page layout ─────────────────────────────────────────────────── */
.bce-results-page {
  width: 100%;
}

.bce-results-search {
  width:        100%;
  margin-bottom: 32px;
}

.bce-results-search .bce-search-form {
  max-width: 680px;
  margin:    0 auto;
}

.bce-rp-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bce-w-border);
}

.bce-rp-label {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--bce-w-accent);
  margin:         0 0 4px;
}

.bce-rp-query {
  font-family: 'Fraunces', Georgia, serif;
  font-size:   2rem;
  font-weight: 700;
  color:       var(--bce-w-text);
  margin:      0;
  line-height: 1.2;
}

.bce-rp-section {
  margin-bottom: 20px;
}

.bce-rp-section:last-child {
  margin-bottom: 0;
}

.bce-rp-error {
  padding:       18px 20px;
  background:    #fff5f5;
  border:        1px solid #fcc;
  border-radius: var(--bce-w-radius);
  color:         #c0392b;
  font-size:     .9rem;
  margin-top:    16px;
}

.bce-rp-empty-state {
  padding:     32px 0;
  font-size:   .95rem;
  color:       var(--bce-w-text-dim);
  text-align:  center;
}

/* Related pills as links (results page uses <a> instead of <button>) */
a.bce-related-pill {
  text-decoration: none;
  display:         inline-block;
}

@media (max-width: 600px) {
  .bce-rp-query { font-size: 1.5rem; }
}