/**
 * Estilos alineados a la presentación del convertidor de moneda en
 * https://colombia.travel/es/informacion-practica/convertidor-de-moneda
 * (color de marca, tipografía y estructura de 4 campos en fila).
 */

.cop-currency-converter-title {
  /* Mismo estilo que el h2.block-title de producción (color de marca,
   * Source Sans Pro 600, 3rem, centrado). Se repite el selector de clase
   * para ganarle en especificidad a reglas genéricas del tema como
   * ".moneda-converter h2" que forzaban alineación a la izquierda. */
  color: #e60f4b;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 3rem;
  text-align: center;
  margin: 0 0 24px;
}

.cop-currency-converter-title.cop-currency-converter-title {
  text-align: center;
}

/*
 * Los 4 campos (divisa origen, importe, divisa destino, valor final) se
 * organizan por breakpoint, como en colombia.travel:
 * - <= 600px: verticales (1 por fila).
 * - 601px a 990px: 2 campos por fila (2 filas de 2).
 * - >= 991px: los 4 en una sola fila.
 * Se usa grid (no flex) para que el contenedor del campo 4, que es un
 * div extra por el wrapper de AJAX, ocupe una celda igual a los demás.
 */
.cop-currency-converter-fields {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
  margin-bottom: 8px;
}

@media (min-width: 601px) {
  .cop-currency-converter-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 991px) {
  .cop-currency-converter-fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cop-currency-converter-fields > * {
  margin: 0;
  min-width: 0;
}

.cop-currency-converter-fields label {
  display: block;
  color: #e60f4b;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.cop-currency-converter-fields select,
.cop-currency-converter-fields input[type="text"],
.cop-currency-converter-fields input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  height: 39px;
  border-radius: 8px;
  padding: 8px;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}

.cop-currency-converter-fields select {
  background-color: #fbfbfb;
  color: #404041;
  border: 1px solid #cccccc;
  font-size: 1.3rem;
}

.cop-currency-converter-fields input[type="text"],
.cop-currency-converter-fields input[type="number"] {
  background-color: rgba(233, 233, 234, 0.37);
  color: #e60f4b;
  border: 1px solid #e60f4b;
  font-weight: 600;
  font-size: 1.1rem;
}

.cop-currency-converter-fields input[disabled] {
  opacity: 1;
  -webkit-text-fill-color: #e60f4b;
}

/*
 * Campo 3 (divisa destino): representa un select deshabilitado, no un
 * resultado, así que lleva la misma apariencia gris/atenuada que
 * colombia.travel usa para su select "Divisa en" deshabilitado, en vez
 * del rosa reservado para los valores calculados (campos 2 y 4).
 */
.cop-currency-converter-fields input.cop-currency-converter-fixed[type="text"] {
  background-color: #e9e9ea;
  color: #404041;
  border: 1px solid #404041;
  font-weight: 400;
  font-size: 1.3rem;
  opacity: 0.7;
}

.cop-currency-converter-fields input.cop-currency-converter-fixed[disabled] {
  -webkit-text-fill-color: #404041;
  opacity: 0.7;
}

.cop-currency-converter-form .description {
  font-size: 12px;
  color: #6b6b6b;
  margin-top: 6px;
}

.cop-currency-converter-form .form-actions {
  margin-top: 16px;
}

.cop-currency-converter-admin-link-wrapper {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
}