/* #region DIDEMEX - Orderby Custom Select
   =========================================================
   Archivo: dmx-orderby-select.css
   Uso: Listbox custom accesible que reemplaza visualmente el
   <select class="fibofilters-orderby"> (o el <select class="orderby">
   nativo de WooCommerce). Ver js/woocommerce/shop/dmx-orderby-select.js
   -- ese script es quien construye este markup y quien reescribe el
   texto de las opciones (mapa de etiquetas cortas); este archivo
   solo lo pinta.

   Fallback sin JS: si el script no corre, el wrapper .dmx-orderby
   nunca se crea y el <select> nativo se ve tal cual lo define
   dmx-shop-toolbar.css -- estas reglas no afectan ese caso.

   Paridad con el pill de resultados: ancho/alto/radio del trigger
   (región 3) están copiados literalmente de
   body.woocommerce .woocommerce-result-count en dmx-shop-toolbar.css
   (min-width: 17.5rem, min-height: 2.75rem, border-radius: 999px,
   border/box-shadow) -- no son valores inventados, son los mismos
   números para que ambos pills se vean como componentes hermanos.
   ========================================================= */


/* #region 1. Select nativo (oculto una vez mejorado) */

.dmx-orderby__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* #endregion */


/* #region 2. Wrapper
   =========================================================
   width fijo (no solo min-width) para que el ancho resuelto sea
   determinista y no dependa de cómo el navegador calcule el
   shrink-to-fit de un inline-flex con un hijo al 100% -- así
   garantizamos el mismo ancho exacto que el pill en todos los
   casos, no solo "normalmente". En tablet/mobile (mismo breakpoint
   980px que dmx-shop-toolbar.css) pasa a 100% del espacio que ya
   le da .woocommerce-ordering -- ver región 7.
   ========================================================= */

.dmx-orderby {
  position: relative;
  display: inline-flex;

  width: 17.5rem;
  max-width: 100%;
}

/* El formulario no debe imponer un ancho menor al del componente.
   Mismo prefijo body.woocommerce(-page) que el resto de reglas de
   .woocommerce-ordering en dmx-shop-toolbar.css. */
body.woocommerce .woocommerce-ordering,
body.woocommerce-page .woocommerce-ordering {
  max-width: 100%;
}

/* #endregion */


/* #region 3. Trigger (cerrado)
   =========================================================
   min-height / border-radius / border / box-shadow: copiados de
   .woocommerce-result-count (dmx-shop-toolbar.css región 1).
   color / font-weight / hover / focus: copiados del <select>
   original que este componente reemplaza (misma región, región 3
   de ese archivo) -- es el mismo control interactivo de siempre,
   solo que ahora es un <button> en vez de un <select>.
   ========================================================= */

.dmx-orderby__trigger {
  position: relative;

  width: 100%;
  min-height: 2.75rem;

  display: inline-flex;
  align-items: center;
  /* Centrado real del label (igual que el pill de resultados). El
     padding es asimétrico a propósito (más a la derecha, reserva
     para la flecha) -- eso ya deja el label centrado dentro del área
     de texto disponible, sin invadir la flecha. El desplazamiento al
     abrir NUNCA se hace togglear este justify-content (no anima
     fluido); se anima .dmx-orderby__label con transform más abajo. */
  justify-content: center;

  padding: 0 2rem 0 1.15rem;

  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background-color: #ffffff;

  color: #555555;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;

  cursor: pointer;
  outline: none;

  /* Apaga el flash azul nativo de Android/Chrome al tocar (no es
     nuestro anillo de foco real -- ese es :focus-visible más abajo,
     que sí debe quedarse por accesibilidad). */
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.045);

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

.dmx-orderby__trigger:hover {
  border-color: #cfe0ff;
  color: #202020;
  box-shadow: 0 0.35rem 1rem rgba(0, 102, 255, 0.10);
}

/* Foco visible accesible -- anillo suave, no deforma el componente. */
.dmx-orderby__trigger:focus-visible {
  outline: none;
  border-color: #0066ff;
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

/* Flecha moderna, sin librerías -- mismo trazo que la flecha
   original del <select> nativo (dmx-shop-toolbar.css región 4).
   Rota al abrirse (JS sincroniza aria-expanded y la clase
   .dmx-orderby--open al mismo tiempo). */
.dmx-orderby__trigger::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;

  width: 0.55rem;
  height: 0.55rem;

  border-right: 2px solid #0066ff;
  border-bottom: 2px solid #0066ff;

  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;

  transition: transform 0.22s ease;
}

/* Texto del trigger en su propio elemento -- ver docblock de
   dmx-orderby-select.js (updateLabelShift). En reposo no lleva
   transform (queda centrado por el justify-content del botón); al
   abrir, la región 4 le agrega el desplazamiento calculado por JS. */
.dmx-orderby__label {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);

  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* #endregion */


/* #region 4. Estado abierto */

.dmx-orderby--open .dmx-orderby__trigger {
  border-color: #cfe0ff;
  color: #202020;
}

.dmx-orderby--open .dmx-orderby__trigger::after {
  transform: translateY(-35%) rotate(225deg);
}

/* --dmx-orderby-label-shift la calcula updateLabelShift() en JS cada
   vez que cambia el texto seleccionado o el layout (resize) -- nunca
   es un valor fijo, así que funciona igual de bien con "Predeterminado"
   que con "Precio: mayor a menor". El 0px de respaldo es solo por si
   el JS no llegara a correr (no debería notarse ningún salto). */
.dmx-orderby--open .dmx-orderby__label {
  transform: translateX(var(--dmx-orderby-label-shift, 0px));
}

/* #endregion */


/* #region 5. Panel de opciones
   =========================================================
   Panel flotante, separado 4px del trigger (no pegado). Mismo
   ancho exacto que el trigger porque left/right: 0 lo estiran al
   ancho del wrapper .dmx-orderby (width fijo, región 2) -- no al
   ancho intrínseco del botón, así que un valor u otro nunca puede
   desalinearse.
   ========================================================= */

.dmx-orderby__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;

  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 1rem;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.05);

  outline: none;
}

/* Animación de apertura/cierre: slide-down vertical (max-height +
   opacity + translateY), no un popup con scale/zoom. Ver docblock de
   dmx-orderby-select.js (showList/hideListAfterTransition) -- el JS
   mide scrollHeight y anima max-height hacia esa medida real (no un
   valor fijo arbitrario), y coordina el atributo "hidden" con el fin
   de la transición real en vez de con un timer o a la vez que la
   clase --visible (el atributo "hidden" fuerza display:none de
   inmediato y cortaría la animación de salida en seco).

   overflow: hidden es necesario para que el contenido quede recortado
   mientras max-height crece/decrece -- esta lista solo tiene 6
   opciones fijas (~40px cada una), así que no hace falta scroll
   interno una vez abierta del todo (max-height pasa a "none"). */
.dmx-orderby__list {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  pointer-events: none;

  transition:
    max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dmx-orderby__list.dmx-orderby__list--visible {
  /* El alto real en px lo asigna el JS (scrollHeight) y lo libera a
     "none" al terminar de abrir -- este valor es solo un respaldo
     por si el JS no llegara a correr. */
  max-height: none;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Reset explícito del <ul>: el navegador (y en este sitio también
   Divi/WooCommerce, que inyectan reglas con más especificidad que
   una sola clase) le ponen a todo <ul> un padding-inline-start de
   ~40px y margin-block-start/end -- si solo declaramos "padding"/
   "margin" físicos, esas propiedades lógicas pueden seguir ganando
   la cascada y dejar un padding izquierdo "extraño". Se fuerzan
   ambas formas (física + lógica) con !important porque es
   exactamente el mismo tipo de pelea de especificidad contra Divi
   documentada en dmx-chi-divi-accordions.css. */
.dmx-orderby__list {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0.375rem !important;
  padding-inline-start: 0.375rem !important;
  list-style: none !important;
}

/* Sin bullets: neutraliza cualquier ::marker/::before heredado del
   tema (Divi agrega "•" a los <li> por defecto en varios contextos
   de contenido -- confirmado visualmente). */
.dmx-orderby__option {
  list-style: none;
}

.dmx-orderby__option::marker {
  content: none;
}

.dmx-orderby__option::before {
  content: none !important;
  display: none !important;
}

/* #endregion */


/* #region 6. Opciones
   =========================================================
   Padding vertical reducido (menú más compacto) manteniendo un
   min-height cómodo para touch.
   ========================================================= */

.dmx-orderby__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  min-height: 2.375rem;
  padding: 0.625rem 0.875rem;
  margin: 0 0 0.125rem;

  border-radius: 0.75rem;

  color: #202020;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: background-color 0.14s ease, color 0.14s ease;
}

.dmx-orderby__option:last-child {
  margin-bottom: 0;
}

/* Hover / activa por teclado: gris muy claro, nunca azul sólido. */
.dmx-orderby__option:hover,
.dmx-orderby__option--active {
  background: #f5f6f8;
}

/* Seleccionada: discreta -- azul extremadamente claro de fondo,
   texto oscuro, peso un poco mayor, check a la derecha. Nunca
   fondo azul sólido. */
.dmx-orderby__option--selected {
  background: rgba(0, 102, 255, 0.06);
  font-weight: 700;
}

.dmx-orderby__option--selected::after {
  content: "\2713";
  flex-shrink: 0;
  color: #0066ff;
  font-weight: 700;
}

.dmx-orderby__option--selected.dmx-orderby__option--active {
  background: rgba(0, 102, 255, 0.11);
}

/* #endregion */


/* #region 7. Responsive
   =========================================================
   Mismo breakpoint de tablet que dmx-shop-toolbar.css (980px):
   ahí .woocommerce-ordering ya pasa a ~50% del ancho disponible
   (regla existente, sin tocar) -- el componente solo debe llenar
   ese espacio en vez de imponer los 17.5rem de desktop.
   ========================================================= */

@media (max-width: 980px) {

  .dmx-orderby {
    width: 100%;
  }
}

@media (max-width: 479px) {

  .dmx-orderby__trigger {
    padding-left: 0.75rem;
    padding-right: 1.75rem;
    font-size: 0.78rem;
  }

  .dmx-orderby__trigger::after {
    right: 0.85rem;
  }

  .dmx-orderby__option {
    font-size: 0.8rem;
  }
}

/* #endregion */


/* #region 8. Movimiento reducido */

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

  .dmx-orderby__list,
  .dmx-orderby__trigger::after,
  .dmx-orderby__label {
    transition: none !important;
  }
}

/* #endregion */

/* #endregion DIDEMEX - Orderby Custom Select */