/**
 * Selector de idioma y moneda + código de moneda en los precios.
 *
 * Va en un CSS aparte (mismo patrón que price-comparison.css) porque los .min.css
 * del tema se generan con gulp y aquí no hay entorno de build. Los cambios están
 * también en los .scss fuente, para que al recompilar no se pierdan.
 */

/* ── Botón del menú: ahora lleva idioma Y moneda ───────────────────────────── */

/* El ancho era fijo en 128px, pensado para "Español" a secas. Con la moneda al
   lado el texto se desbordaba (120px de texto en 99px de caja).
   La clase `menu-item--currency` va repetida a propósito: el CSS crítico define
   `.header .main-menu__nav__header li.menu-item--currency` en un <style> inline
   que se imprime DESPUÉS de este archivo, así que con la misma especificidad
   ganaba él. Repetir la clase sube la especificidad lo justo, sin !important. */
.header .main-menu__nav__header li.menu-item--currency.menu-item--currency,
.main-menu__nav__header .menu-item.menu-item--currency,
.menu-item.menu-item--currency {
  width: auto;
  min-width: 128px;
  padding: 0 14px;
  gap: 6px;
  white-space: nowrap;
}

/* El mismo tratamiento en el menú móvil, que usa otro contenedor. */
.main-menu__nav .menu-item--currency {
  width: auto;
  min-width: 128px;
}

.menu-item--currency__sep {
  opacity: 0.45;
  font-size: 0.9em;
}

.menu-item--currency__money {
  font-family: 'GP-Bold', sans-serif;
}

/* ── Modal: dos bloques, idioma y moneda ───────────────────────────────────── */

/* El último bloque no lleva la línea divisoria: solo separa, no cierra. */
.currency-modal__block--last {
  border-bottom: none;
  padding-bottom: 0;
}

.currency-modal__note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.7;
}

/* ── Código de moneda junto al precio ──────────────────────────────────────── */

/* "$13.90 USD": el código va pequeño y en gris para que no compita con la cifra,
   pero visible, porque el "$" a secas se confunde con soles o pesos.

   OJO: el espacio ANTES de "USD" vive en el MARCADO (un &nbsp; dentro del span),
   NO aquí con un margin. Motivo (2026-08-24): este CSS solo se carga en la web, así
   que en los correos de WooCommerce y en las exportaciones el importe salía pegado
   —"$13.90USD"—. Con el espacio en el marcado se lee bien en todas partes. Medido en
   producción antes de cambiarlo: el margin daba 1,91 px y el &nbsp; da 2,00 px con
   el precio a 14 px, o sea que la web no se mueve. Se quitó también la regla que
   afinaba el margin en los precios grandes de la ficha (0.22em): el &nbsp; escala
   solo con el tamaño de letra y allí medía lo mismo. Si alguien vuelve a poner un
   margin-left aquí, el espacio se DUPLICA. */
.gp-price__code {
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.72;
  vertical-align: baseline;
  white-space: nowrap;
}