/* ==========================================================================
   Live Search Dropdown — MRINGCO
   ========================================================================== */

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown, 200);
  background: var(--color-surface-2);
  border: var(--border-thin);
  border-top: var(--border-accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: dropdownIn var(--duration-fast) var(--ease-out);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Result item */
.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast);
}

.search-dropdown__item:last-of-type { border-bottom: none; }

.search-dropdown__item:hover,
.search-dropdown__item:focus {
  background: var(--color-surface-3);
  outline: none;
}

/* Thumbnail */
.search-dropdown__img-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border-thin);
  background: var(--color-surface-3);
}

.search-dropdown__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-dropdown__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-surface-4);
}

/* Info */
.search-dropdown__info {
  flex: 1;
  min-width: 0;
}

.search-dropdown__title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown__price {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-yellow);
  margin-top: var(--space-1);
}

/* Empty state */
.search-dropdown__empty {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* View all */
.search-dropdown__view-all {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
  text-decoration: none;
  background: var(--color-surface-3);
  border-top: var(--border-thin);
  transition: background var(--duration-fast);
}

.search-dropdown__view-all:hover { background: var(--color-surface-4); }

/* Skeleton loader */
.search-dropdown__skeleton {
  height: 60px;
  margin: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface-3) 25%,
    var(--color-surface-4) 50%,
    var(--color-surface-3) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}