/* Decorative country flags (ZA / UK / US) — pair with visible text labels */
.country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.15em;
  height: 0.86em;
  vertical-align: -0.08em;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  line-height: 0;
}

.country-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.country-flag--md {
  width: 1.35rem;
  height: 0.9rem;
  vertical-align: -0.12em;
  border-radius: 3px;
}

/* Rest-of-World globe — square, same height/alignment as flags for pill titles */
.country-flag--globe {
  width: 0.86em;
  height: 0.86em;
  border-radius: 50%;
  box-shadow: none;
  overflow: visible;
  color: currentColor;
  opacity: 0.92;
}

.country-flag--globe.country-flag--md {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.12em;
}

.country-flag-label {
  margin-left: 0.35em;
}

.hero-eyebrow .country-flag,
.sales-agents-commission-block h3 .country-flag,
.sales-agents-commission-jump .country-flag {
  margin-right: 0.4em;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0;
}

.nav-links a .country-flag,
.mobile-menu a .country-flag,
.nav-more__panel a .country-flag {
  width: 0.95rem;
  height: 0.7rem;
  margin-right: 0.35em;
  vertical-align: middle;
}

.nav-links a,
.mobile-menu > a,
.nav-more__panel a {
  display: inline-flex;
  align-items: center;
}

.currency-switcher__link {
  gap: 0.28rem;
}

.currency-switcher__link .country-flag {
  width: 0.95rem;
  height: 0.7rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.currency-switcher__link.is-active .country-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.guide-market-chip .country-flag {
  width: 1rem;
  height: 0.72rem;
  margin-right: 0; /* gap handled by pill flex */
}

/* Market-title glowing pills (inline-flex + gap) — keep globe square beside flags */
#website-packages .pricing-grid--markets .pricing-card--market-row > h3 .country-flag--globe {
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  box-shadow: none;
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .country-flag {
    transition: none;
  }
}