/* =========================================================================
 * Flag tooltip — click a country flag in the Travel section to reveal a
 * small dark tooltip with the country's name. Dark surface in light theme,
 * light surface in dark theme (always high-contrast against the page).
 *
 * Built to grow: the .flag-tooltip__actions row is where a "See 5 photos →"
 * link will live once the country photo modal exists.
 * ====================================================================== */

.flag-pill { cursor: pointer; }
.flag-pill:focus-visible {
  outline: 2px solid var(--color-hibiscus, #be3455);
  outline-offset: 2px;
}

.flag-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #17141c;
  color: #fff;
  font-family: var(--font-family-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 7px 11px;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity 0.14s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.flag-tooltip.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.flag-tooltip.flag-tooltip--below { transform-origin: top center; }

.flag-tooltip__name { display: block; }

/* Extension point for the upcoming photo link (hidden until populated). */
.flag-tooltip__actions:empty { display: none; }
.flag-tooltip__actions { margin-top: 5px; }
.flag-tooltip__link {
  color: #ff9db1;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
}

/* Arrow */
.flag-tooltip__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -5px;
  bottom: -4px;
  border-radius: 2px;
}
.flag-tooltip--below .flag-tooltip__arrow { bottom: auto; top: -4px; }

/* Dark theme → light tooltip */
[data-theme="dark"] .flag-tooltip {
  background: #f4f2f7;
  color: #17141c;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .flag-tooltip__link { color: #be3455; }

@media (prefers-reduced-motion: reduce) {
  .flag-tooltip { transition: opacity 0.12s ease; transform: translate(-50%, 0); }
  .flag-tooltip.is-open { transform: translate(-50%, 0); }
}