/**
 * Luxury Search Overlay — lso-style.css v1.3.2
 * Inline dropdown search box (ha-search-field-row style).
 * Navy/grey palette — Poppins font.
 * MonsterAds © 2025
 */

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH BOX WRAPPER
   ══════════════════════════════════════════════════════════════════════════ */
.lso-search-box {
  position: relative !important;
  width: 260px !important;
  font-family: 'Poppins', sans-serif !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INPUT ROW  (matches ha-search-field-row)
   ══════════════════════════════════════════════════════════════════════════ */
.lso-field-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f4f6f9 !important;
  border: 1.5px solid #e2e6ec !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  height: 38px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  box-sizing: border-box !important;
}

.lso-field-row:focus-within {
  background: #fff !important;
  border-color: #1a2540 !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 64, .07) !important;
}

/* Magnifier icon */
.lso-field-icon {
  flex-shrink: 0 !important;
  display: block !important;
}

/* Text input */
.lso-field {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  color: #1a2540 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: normal !important;
  height: auto !important;
  min-height: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lso-field::placeholder { color: #9aabb8 !important; }

/* Hide browser default search cancel */
.lso-field::-webkit-search-cancel-button,
.lso-field::-webkit-search-decoration { display: none !important; }

/* Clear (×) button */
.lso-field-clear {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 3px !important;
  border-radius: 50% !important;
  color: #9aabb8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s !important;
  line-height: 1 !important;
}
.lso-field-clear:hover {
  background: #e8ecf0 !important;
  color: #1a2540 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWN PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.lso-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 320px !important;
  background: #fff !important;
  border: 1px solid #e2e6ec !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 36px rgba(26, 37, 64, .13) !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #e2e6ec transparent !important;
}
.lso-dropdown::-webkit-scrollbar { width: 4px !important; }
.lso-dropdown::-webkit-scrollbar-track { background: transparent !important; }
.lso-dropdown::-webkit-scrollbar-thumb { background: #e2e6ec !important; border-radius: 4px !important; }

/* Shown when box is active */
.lso-search-box.lso-active .lso-dropdown {
  display: block !important;
  animation: lso-dd-appear .18s ease both !important;
}

@keyframes lso-dd-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown section padding */
.lso-dd-section {
  padding: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION LABELS
   ══════════════════════════════════════════════════════════════════════════ */
.lso-dd-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #9aabb8 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.4 !important;
}
.lso-dd-label--mt {
  margin-top: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   POPULAR SEARCHES — category pill chips
   ══════════════════════════════════════════════════════════════════════════ */
.lso-idle-cats-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Category pill — <a> link that navigates to the category archive */
.lso-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: #f4f6f9 !important;
  border: 1px solid #e2e6ec !important;
  border-radius: 20px !important;
  padding: 4px 11px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #1a2540 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.lso-tag:hover,
.lso-tag:focus {
  background: #1a2540 !important;
  border-color: #1a2540 !important;
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BROWSE PRODUCTS & SEARCH RESULTS — product rows
   ══════════════════════════════════════════════════════════════════════════ */
.lso-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 6px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  color: #1a2540 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background .12s ease !important;
}
.lso-result-item:hover,
.lso-result-item:focus {
  background: #f4f6f9 !important;
  text-decoration: none !important;
  color: #1a2540 !important;
  outline: none !important;
}

/* Thumbnail */
.lso-result-thumb {
  width: 36px !important;
  height: 36px !important;
  background: #f0f2f5 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lso-result-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text column */
.lso-result-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.lso-result-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a2540 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  font-family: 'Poppins', sans-serif !important;
}
.lso-result-meta {
  font-size: 11px !important;
  color: #9aabb8 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Poppins', sans-serif !important;
}

/* .lso-result-price — removed in v1.3.2 (price not displayed in search or browse) */

/* ══════════════════════════════════════════════════════════════════════════
   VIEW ALL RESULTS button
   ══════════════════════════════════════════════════════════════════════════ */
.lso-view-all {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 10px !important;
  padding: 9px !important;
  background: #f4f6f9 !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1a2540 !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
}
.lso-view-all:hover {
  background: #1a2540 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.lso-view-all svg { transition: transform .15s ease !important; }
.lso-view-all:hover svg { transform: translateX(2px) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════════════════════════════════════════ */
.lso-spinner-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 0 !important;
}
.lso-spinner {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
}
.lso-spinner div {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #9aabb8 !important;
  animation: lso-bounce 1.1s infinite ease-in-out !important;
}
.lso-spinner div:nth-child(1) { animation-delay: -0.32s !important; }
.lso-spinner div:nth-child(2) { animation-delay: -0.16s !important; }
.lso-spinner div:nth-child(3) { animation-delay:  0s    !important; }
.lso-spinner div:nth-child(4) { animation-delay:  0.16s !important; }

@keyframes lso-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: .3; }
  40%            { transform: scale(1); opacity: 1;  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.lso-empty-wrap {
  padding: 10px 0 4px !important;
}
.lso-empty-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  color: #9aabb8 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON CHIPS  (shown before idle AJAX resolves)
   ══════════════════════════════════════════════════════════════════════════ */
.lso-skeleton {
  display: inline-block !important;
  height: 26px !important;
  width: 80px !important;
  border-radius: 20px !important;
  background: linear-gradient(
    90deg,
    #f0f2f5 25%,
    #f8f9fb 50%,
    #f0f2f5 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: lso-shimmer 1.4s infinite linear !important;
}
.lso-skeleton--sm { width: 58px  !important; }
.lso-skeleton--md { width: 100px !important; }
.lso-skeleton--lg { width: 122px !important; }

@keyframes lso-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* On narrow screens the box and dropdown go full-width */
@media (max-width: 600px) {
  .lso-search-box {
    width: 100% !important;
    display: block !important;
  }
  .lso-dropdown {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 10px !important;
  }
}

/* Reduce chip font on very small screens */
@media (max-width: 360px) {
  .lso-tag { font-size: 11px !important; padding: 3px 9px !important; }
  .lso-result-name { font-size: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lso-search-box.lso-active .lso-dropdown,
  .lso-skeleton,
  .lso-spinner div,
  .lso-tag,
  .lso-result-item,
  .lso-view-all {
    animation: none !important;
    transition: none !important;
  }
}