/* Currency converter — country pages.
   Every price on HALA is in euro, and a reader planning from another country
   has to leave the page to find out what that means. This keeps them here.
   Flat paper and hairlines like the rest of Before You Go: no card, no shadow,
   no gradient, and the country accent only on focus. */

.cx {
  border-top: 1px solid var(--rule-soft, var(--hair, rgba(31, 26, 20, .14)));
  margin-top: 2.5rem;
  padding-top: 1.75rem;
}

.cx[hidden] { display: none; }

/* no global visually-hidden utility exists in this codebase, so scope one */
.cx__vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.cx__label {font-family: var(--serif, var(--fb, system-ui));
  font-size:11px;
  font-weight: 500;
  letter-spacing:.02em;
  color: var(--ink-mute, var(--ink-60, #6b6257))}

.cx__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .6rem;
  margin-top: 1rem;
  font-family: var(--serif, var(--fb, system-ui));
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft, var(--ink-80, #3a332a));
}

/* fr children collapse to min-content without this */
.cx__row > * { min-width: 0; }

.cx__sym { color: var(--ink, #1F1A14); }

.cx__in {
  width: 6ch;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--rule, var(--hair, rgba(31, 26, 20, .28)));
  border-radius: 0;
  background: transparent;
  padding: 0 0 3px;
  font: inherit;
  color: var(--ink, #1F1A14);
  -moz-appearance: textfield;
}

.cx__in::-webkit-outer-spin-button,
.cx__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* accent the rule on any focus, but keyboard users still get a real ring:
   a recoloured hairline is not a sufficient focus indicator on its own */
.cx__in:focus {
  border-bottom-color: var(--country-accent, var(--accent-strong, #8E3F2A));
}

.cx__in:focus-visible,
.cx__sel:focus-visible {
  outline: 2px solid var(--country-accent, var(--accent-strong, #8E3F2A));
  outline-offset: 3px;
}

.cx__out {
  font-weight: 600;
  color: var(--ink, #1F1A14);
  font-variant-numeric: tabular-nums;
}

.cx__sel {
  box-sizing: border-box;
  max-width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule, var(--hair, rgba(31, 26, 20, .28)));
  border-radius: 0;
  background: transparent;
  padding: 0 1.1rem 3px .1rem;
  font: inherit;
  color: var(--ink, #1F1A14);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* the chevron is drawn, not an image file, so nothing extra is fetched */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .42rem center, right .1rem center;
  background-size: .32rem .32rem, .32rem .32rem;
  background-repeat: no-repeat;
}

.cx__sel:focus {
  border-bottom-color: var(--country-accent, var(--accent-strong, #8E3F2A));
}

.cx__note {
  margin-top: .85rem;
  font-family: var(--serif, var(--fb, system-ui));
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute, var(--ink-60, #6b6257));
  max-width: 58ch;
}

@media (prefers-reduced-motion: no-preference) {
  .cx__out { transition: opacity var(--motion-fast, .18s) var(--ease, ease); }
}

.cx.is-loading .cx__out { opacity: .45; }