/* fx-countries · country guide teaser. Pair with fx-countries.js. */
.fx-countries {
  --o: var(--fx-o, #ff6a00); --o2: var(--fx-o2, #e85d00); --o3: var(--fx-o3, #d94f00); --ink: var(--fx-ink, #ff6a00);
  --txt: var(--fx-text, #f7f4f0); --mut: var(--fx-muted, #bcb5ae); --ln: var(--fx-line, rgba(255,255,255,.085)); --ln2: var(--fx-line-2, rgba(255,255,255,.16));
  --card: rgba(20,20,20,.62); --soft: rgba(255,255,255,.04);
  --spring: var(--fx-spring, cubic-bezier(.34, 1.56, .64, 1)); --out: var(--fx-ease-out, cubic-bezier(.16, 1, .3, 1));
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); color: var(--txt); font-family: var(--fx-font, inherit);
}
@media (min-width: 900px) { .fx-countries { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; } }

.fxc__label { display: block; font-weight: 600; font-size: .95rem; margin-block-end: 10px; }
.fxc__field { position: relative; }
.fxc__icon { position: absolute; inset-inline-start: 16px; inset-block-start: 50%; translate: 0 -50%; inline-size: 20px; block-size: 20px; color: var(--mut); pointer-events: none; transition: color 160ms; }
.fxc__field input {
  inline-size: 100%; min-block-size: 56px; padding-inline: 48px 52px; border-radius: 18px;
  font: inherit; font-size: 1.02rem; color: var(--txt); background: var(--card); border: 1px solid var(--ln2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color 160ms, box-shadow 320ms var(--out);
}
.fxc__field input::placeholder { color: var(--mut); opacity: .8; }
.fxc__field input::-webkit-search-cancel-button { display: none; }
.fxc__field input:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 5px rgba(255,106,0,.16), 0 20px 40px -24px rgba(255,106,0,.5); }
.fxc__field:focus-within .fxc__icon { color: var(--ink); }
.fxc__clear { position: absolute; inset-inline-end: 6px; inset-block-start: 50%; translate: 0 -50%; inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; border: 0; background: transparent; color: var(--mut); cursor: pointer; }
.fxc__clear[hidden] { display: none; }
.fxc__clear svg { inline-size: 18px; block-size: 18px; }
.fxc__clear:hover { color: var(--txt); background: var(--soft); }

.fxc__list { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; max-block-size: 300px; overflow: auto; padding: 4px; margin-inline: -4px; scrollbar-width: thin; }
.fxc__chip {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 14px 6px 8px; padding-inline: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--txt); background: var(--soft); border: 1px solid var(--ln);
  animation: fxc-pop 420ms var(--out) both; animation-delay: calc(var(--i, 0) * 22ms);
  transition: transform 260ms var(--spring), border-color 160ms, background 260ms var(--out);
}
.fxc__chip:hover { transform: translateY(-2px); border-color: rgba(255,106,0,.45); }
.fxc__chip:active { transform: scale(.96); transition-duration: 90ms; }
.fxc__chip[aria-pressed="true"] { color: #0a0a0a; background: linear-gradient(135deg, var(--o), var(--o2)); border-color: transparent; font-weight: 600; }
@keyframes fxc-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.fxc__empty { margin: 16px 0 0; padding: 16px; border-radius: 16px; border: 1px dashed var(--ln2); color: var(--mut); font-size: .92rem; line-height: 1.6; }
.fxc__empty[hidden] { display: none; }

.fxc__flag { font-size: 1.35rem; line-height: 1; }
.fxc__flag--code {
  display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  font-family: var(--fx-mono, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  color: var(--txt); background: rgba(255,255,255,.08); border: 1px solid var(--ln2);
}
.fxc__chip[aria-pressed="true"] .fxc__flag--code { background: rgba(10,10,10,.14); border-color: rgba(10,10,10,.2); color: #0a0a0a; }

/* ---- result card ---------------------------------------------------------- */
.fxc__stage { position: relative; min-block-size: 420px; }
.fxc__card {
  position: relative; overflow: clip; isolation: isolate; padding: clamp(18px, 2.4vw, 28px); border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%), var(--card);
  border: 1px solid var(--ln); box-shadow: 0 40px 80px -48px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0; transform: translateY(12px) scale(.985);
}
.fxc__card::before { content: ""; position: absolute; z-index: -1; inset-block-start: -50%; inset-inline-start: -30%; inline-size: 80%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(255,106,0,.2), transparent 70%); }
.fxc__card.is-in { opacity: 1; transform: none; transition: opacity 380ms var(--out), transform 700ms var(--spring); }
.fxc__card.is-out { opacity: 0; transform: translateY(-6px) scale(.99); transition: opacity 140ms ease-in, transform 140ms ease-in; }
.fxc__head { display: flex; align-items: center; gap: 14px; }
.fxc__head > .fxc__flag { font-size: 2.6rem; }
.fxc__head > .fxc__flag--code { inline-size: 54px; block-size: 54px; font-size: .9rem; }
.fxc__name { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; }
.fxc__alt { margin: 2px 0 0; color: var(--mut); font-size: .88rem; }
.fxc__dial { margin: 0; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ln2); font-family: var(--fx-mono, monospace); font-size: .9rem; }
.fxc__dial svg { inline-size: 15px; block-size: 15px; color: var(--ink); }

.fxc__tiles { display: grid; gap: 10px; margin-block: 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fxc__tiles[data-n="1"] { grid-template-columns: 1fr; }
.fxc__tiles[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .fxc__tiles[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fxc__tiles[data-n="3"] .fxc__tile:first-child { grid-column: 1 / -1; } }
.fxc__tile {
  position: relative; overflow: clip; display: grid; gap: 2px; align-content: start; min-block-size: 112px; padding: 14px 16px; border-radius: 20px;
  text-decoration: none; color: var(--txt); background: var(--soft); border: 1px solid var(--ln2);
  animation: fxc-tile 620ms var(--spring) both; animation-delay: calc(120ms + var(--i, 0) * 70ms);
  transition: transform 300ms var(--spring), border-color 160ms, box-shadow 300ms var(--out), background 300ms var(--out);
}
.fxc__tile::after { /* the "ring" that pulses from the call icon on hover */
  content: ""; position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 30px; block-size: 30px; border-radius: 50%;
  border: 1.5px solid var(--o); opacity: 0; transform: scale(.6); pointer-events: none;
}
.fxc__tile:hover { transform: translateY(-3px); border-color: rgba(255,106,0,.6); box-shadow: 0 22px 40px -22px rgba(255,106,0,.55); background: rgba(255,106,0,.07); }
.fxc__tile:hover::after { animation: fxc-ring 1.2s var(--out) infinite; }
.fxc__tile:active { transform: scale(.97); transition-duration: 90ms; }
.fxc__tile:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
.fxc__tile--general, .fxc__tiles[data-n="1"] .fxc__tile { background: linear-gradient(140deg, var(--o), var(--o2) 65%, var(--o3)); color: #0a0a0a; border-color: transparent; }
.fxc__tile--general .fxc__tile-h, .fxc__tile--general .fxc__tile-k { color: rgba(10,10,10,.75); }
.fxc__tile--general::after { border-color: #0a0a0a; }
.fxc__tile-ic { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 26px; block-size: 26px; color: var(--ink); }
.fxc__tile--general .fxc__tile-ic { color: #0a0a0a; }
.fxc__tile-k { font-size: .85rem; color: var(--mut); padding-inline-end: 34px; }
.fxc__tile-n { font-family: var(--fx-mono, monospace); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; justify-self: start; }
.fxc__tile-h { font-size: .74rem; color: var(--mut); }
@keyframes fxc-tile { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes fxc-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }

.fxc__facts { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
@media (max-width: 520px) { .fxc__facts { grid-template-columns: 1fr; } }
.fxc__facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--ln); }
.fxc__facts svg { grid-row: span 2; inline-size: 20px; block-size: 20px; color: var(--ink); }
.fxc__facts dt { font-size: .72rem; color: var(--mut); }
.fxc__facts dd { margin: 0; font-size: .88rem; font-weight: 600; }
.fxc__tip { display: flex; gap: 10px; margin: 14px 0 0; font-size: .88rem; line-height: 1.6; color: var(--mut); }
.fxc__tip svg { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 3px; color: var(--ink); }
.fxc__tip b { color: var(--txt); font-weight: 600; }
.fxc__note { margin: 14px 0 0; font-size: .76rem; color: var(--mut); }

.fxc__loading, .fxc__error { grid-column: 1 / -1; padding: 40px 20px; text-align: center; color: var(--mut); border-radius: 24px; border: 1px dashed var(--ln2); }
.fxc__loading { background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent) 0 0 / 200% 100%; animation: fxc-sh 1.4s linear infinite; }
@keyframes fxc-sh { to { background-position: -200% 0; } }
.fxc__retry { margin-block-start: 10px; min-block-size: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--o); color: #0a0a0a; font: inherit; font-weight: 600; cursor: pointer; }

@media (prefers-color-scheme: light) {
  .fx-countries { --ink: #b84a00; --txt: #14110e; --mut: #5f5a55; --ln: rgba(0,0,0,.08); --ln2: rgba(0,0,0,.14); --card: rgba(255,255,255,.75); --soft: rgba(0,0,0,.03); }
  .fxc__card { box-shadow: 0 30px 60px -40px rgba(60,30,0,.35); }
  .fxc__flag--code { background: rgba(0,0,0,.05); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-countries *, .fx-countries *::before, .fx-countries *::after { animation: none !important; transition-duration: 1ms !important; }
  .fxc__card { transform: none; }
}