/* ============================================================================
 * styles.css — small custom layer on top of Tailwind (CDN) utilities.
 * Keyframe animations, skeleton shimmer, listbox affordances, focus ring,
 * reduced-motion. Colours stay strictly within the brand palette.
 * ========================================================================== */
:root {
  --brand-teal: #118488;
  --brand-teal-dark: #0b5453;
  --brand-green: #16a34a;
  --brand-amber: #d97706;
  --brand-ink: #0f172a;
  --ring: #118488;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Country flags (flag-icons SVG): crisp, hairline border for light flags. */
.fi.vc-flag {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
  vertical-align: -0.12em;
}

/* ---- Combobox listbox ---------------------------------------------------- */
.vc-listbox { max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.vc-listbox::-webkit-scrollbar { width: 10px; }
.vc-listbox::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; border: 3px solid #fff; }
.vc-option[aria-selected="true"] { font-weight: 600; }

/* ---- Visible focus ring for keyboard users ------------------------------- */
.vc-focusable:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring);
  border-radius: 0.75rem;
}
/* Single focus ring hugging the combobox field. */
.vc-shell { transition: border-color .15s ease, box-shadow .15s ease; }
.vc-shell:focus-within { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(17, 132, 136, 0.16); }
.vc-input:focus { outline: none; }

/* ---- Skeleton shimmer (loading state) ------------------------------------ */
.skeleton { position: relative; overflow: hidden; background: #eef2f6; border-radius: 0.75rem; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%);
  animation: vc-shimmer 1.25s infinite;
}
@keyframes vc-shimmer { 100% { transform: translateX(100%); } }
[dir="rtl"] .skeleton::after { animation-name: vc-shimmer-rtl; }
@keyframes vc-shimmer-rtl { 100% { transform: translateX(-200%); } }

/* ---- Result entrance animation ------------------------------------------- */
.vc-enter { animation: vc-fade-up 260ms cubic-bezier(.16,1,.3,1) both; }
@keyframes vc-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Spinner used in retry / inline loaders. */
.vc-spin { animation: vc-rotate 0.7s linear infinite; }
@keyframes vc-rotate { to { transform: rotate(360deg); } }

/* Mirror directional glyphs (arrows) under RTL. */
[dir="rtl"] .vc-flip { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .vc-enter, .skeleton::after, .vc-spin { animation: none !important; }
  html, * { scroll-behavior: auto !important; }
}