.countries-marquee {
  --country-gap: 28px;
  position: relative;
  padding-block: 24px;
  overflow: hidden;
  border-block: 1px solid #051e3510;
  background: linear-gradient(105deg, #f5f6ef, #edf5ef 55%, #f7f8f2);
  color: #051e35;
}
.countries-inner { display: flex; align-items: center; gap: 18px; direction: ltr; }
.countries-viewport {
  min-width: 0; flex: 1; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.countries-track {
  display: flex; width: max-content; direction: ltr;
  animation: country-flow var(--countries-duration, 24s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.countries-marquee[data-running="true"] .countries-track { animation-play-state: running; }
.countries-group {
  display: flex; flex: none; align-items: stretch; gap: var(--country-gap);
  list-style: none; margin: 0; padding: 0 var(--country-gap) 0 0;
  direction: ltr;
}
.country-item {
  display: flex; flex: 0 0 152px; width: 152px; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 11px;
  padding-block: 6px; text-align: center;
}
.country-flag {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 64px;
  filter: drop-shadow(0 5px 8px #051e3512);
}
.country-flag img { display: block; width: 96px; height: 64px; object-fit: contain; }
.country-name {
  color: #29463f; font-family: 'Manrope', Arial, sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.countries-toggle {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  gap: 8px; min-width: 112px; min-height: 40px; padding: 8px 12px;
  border: 1px solid #051e3520; border-radius: 99px;
  background: #ffffffb8; color: #16392f; font: 600 12px/1.3 'Tajawal', Arial, sans-serif;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.countries-toggle:hover { border-color: #138c72; background: #fff; }
.countries-toggle:focus-visible, .countries-viewport:focus-visible {
  outline: 2px solid #087d69; outline-offset: 4px;
}
.countries-toggle-icon { display: inline-flex; align-items: center; font-family: Arial, sans-serif; font-size: 12px; }
.countries-marquee.is-reduced .countries-viewport { overflow-x: auto; scrollbar-width: thin; mask-image: none; -webkit-mask-image: none; }
.countries-marquee.is-reduced .countries-track { animation: none; transform: none; will-change: auto; }
@keyframes country-flow { from { transform: translateX(var(--countries-start, 0px)); } to { transform: translateX(var(--countries-end, -1800px)); } }
@media (max-width: 600px) {
  .countries-marquee { --country-gap: 18px; padding-block: 18px; }
  .countries-inner { gap: 8px; }
  .country-item { flex-basis: 136px; width: 136px; }
  .country-flag, .country-flag img { width: 84px; height: 56px; }
  .country-name { font-size: 11px; }
  .countries-toggle { min-width: 40px; width: 40px; height: 40px; padding: 0; }
  .countries-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .countries-viewport { overflow-x: auto; scrollbar-width: thin; mask-image: none; -webkit-mask-image: none; }
  .countries-track { animation: none; transform: none; will-change: auto; }
  .countries-group[data-country-clone], .countries-toggle { display: none !important; }
}