/**
 * Clics Modernos
 * Product Search — Results Dropdown
 *
 * Estilos del contenido y del panel de resultados del buscador.
 */


/* ============================================================
   RESULTS CONTAINER
   ============================================================ */

.site-search__results {
  position: absolute;

  top: calc(100% + var(--space-2));
  right: 0;
  left: auto;

  width: min(
    560px,
    calc(100vw - (var(--container-padding) * 2))
  );
  min-width: 0;

  display: flex;
  flex-direction: column;

  /*
   * El panel tiene una altura máxima real.
   * Esto permite que la lista interna pueda determinar
   * correctamente cuándo debe comenzar el scroll.
   */
  max-height: 460px;

  overflow: hidden;

  border:
    var(--border-width)
    solid
    var(--color-border);

  border-radius: var(--radius-lg);

  background-color: var(--color-popover);

  box-shadow: var(--shadow-lg);

  z-index: var(--z-dropdown);
}


.site-search__results[hidden] {
  display: none;
}


/* ============================================================
   STATES
   ============================================================ */

.search-results__state {
  display: flex;
  align-items: center;

  gap: var(--space-2);

  min-height: 72px;

  padding:
    var(--space-5)
    var(--space-4);

  color: var(--color-muted-foreground);

  font-size: 0.875rem;
}


.search-results__state--error {
  color: var(--color-destructive, #c0392b);
}


.search-results__spinner {
  width: 14px;
  height: 14px;

  flex-shrink: 0;

  border:
    2px
    solid
    var(--color-border);

  border-top-color: var(--color-accent);

  border-radius: 50%;

  animation:
    cm-search-spin
    0.6s
    linear
    infinite;
}


@keyframes cm-search-spin {

  to {
    transform: rotate(360deg);
  }

}


/* ============================================================
   RESULTS LIST
   ============================================================ */

.search-results__list {
  display: flex;
  flex-direction: column;

  /*
   * flex: 1 permite que la lista ocupe todo el espacio
   * disponible del dropdown.
   */
  flex: 1 1 auto;

  min-height: 0;

  padding: var(--space-2);

  /*
   * El scroll pertenece exclusivamente a los productos.
   */
  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  /*
   * Firefox
   */
  scrollbar-width: thin;

  /*
   * Chromium / Safari
   */
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   RESULT ITEM
   ============================================================ */

.search-result {
  display: flex;
  align-items: center;

  gap: var(--space-3);

  min-width: 0;

  padding:
    var(--space-2)
    var(--space-3);

  border-radius: var(--radius-md);

  color: inherit;

  text-decoration: none;

  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}


.search-result:hover,
.search-result.is-active {
  background-color: var(--color-accent-soft);
}


.search-result:active {
  transform: scale(0.99);
}


/* ============================================================
   THUMBNAIL
   ============================================================ */

.search-result__thumb {
  width: 56px;
  height: 56px;

  flex: 0 0 56px;

  display: block;

  overflow: hidden;

  border-radius: var(--radius-md);

  background-color: var(--color-secondary);
}


.search-result__thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform var(--transition-base);
}


.search-result:hover .search-result__thumb img,
.search-result.is-active .search-result__thumb img {
  transform: scale(1.04);
}


/* ============================================================
   RESULT BODY
   ============================================================ */

.search-result__body {
  display: flex;
  flex-direction: column;

  /*
   * Fundamental para que el contenido pueda utilizar todo el
   * espacio disponible dentro del resultado.
   */
  flex: 1 1 auto;

  min-width: 0;

  gap: 3px;
}


/* ============================================================
   PRODUCT NAME
   ============================================================ */

.search-result__name {
  display: -webkit-box;

  min-width: 0;

  color: var(--color-foreground);

  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;

  /*
   * Permitimos dos líneas para evitar que nombres de producto
   * largos desaparezcan inmediatamente.
   */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}


.search-result__highlight {
  background: none;

  color: var(--color-accent-strong);

  font-weight: 700;
}


/* ============================================================
   META
   ============================================================ */

.search-result__meta {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-2);

  min-width: 0;

  font-size: 0.8125rem;

  line-height: 1.3;

  color: var(--color-muted-foreground);
}


/* ============================================================
   PRICE
   ============================================================ */

.search-result__price {
  display: inline-flex;
  align-items: center;

  min-width: 0;
}


.search-result__price del {
  margin-right: var(--space-1);

  font-size: 0.85em;

  opacity: 0.6;
}


.search-result__price ins {
  color: var(--color-accent-strong);

  text-decoration: none;
}


/* ============================================================
   STOCK
   ============================================================ */

.search-result__stock {
  color: var(--color-destructive, #c0392b);

  font-weight: 600;
}


/* ============================================================
   FOOTER
   ============================================================ */

.search-results__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-2);

  min-height: 52px;

  padding:
    var(--space-3)
    var(--space-4);

  border-top:
    var(--border-width)
    solid
    var(--color-border);

  color: var(--color-foreground);

  font-size: 0.875rem;
  font-weight: 600;

  text-decoration: none;

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}


.search-results__footer svg {
  flex-shrink: 0;

  transition:
    transform var(--transition-fast);
}


.search-results__footer:hover {
  color: var(--color-accent);

  background-color: var(--color-accent-soft);
}


.search-results__footer:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   MOBILE SEARCH
   ============================================================ */

.site-search-mobile .site-search__results {
  position: static;

  width: 100%;
  min-width: 0;

  max-height: none;

  background: transparent;

  border: 0;

  box-shadow: none;

  border-radius: 0;
}


.site-search-mobile .search-results__list {
  /*
   * En mobile el panel completo puede crecer hasta el viewport,
   * pero la lista sigue siendo la zona desplazable.
   */
  max-height: 60vh;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    var(--space-1)
    0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) and (min-width: 768px) {

  .site-search--inline .site-search__results {
    width: min(
      520px,
      calc(100vw - (var(--container-padding) * 2))
    );

    min-width: 0;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .search-result {
    gap: var(--space-2);

    padding-inline: var(--space-2);
  }

  .search-result__thumb {
    width: 48px;
    height: 48px;

    flex-basis: 48px;
  }

  .search-result__name {
    font-size: 0.875rem;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .search-results__spinner {
    animation: none;
  }

  .search-result,
  .search-result__thumb img,
  .search-results__footer,
  .search-results__footer svg {
    transition-duration: 0.01ms !important;
  }

}