/* ==========================================================
   countries.css — الدول / الأسواق العربية (لوح داكن)
   ========================================================== */
:root {
  --ebmnt1-countries-background-color: var(--ebmnt1-color-surface-dark);
  --ebmnt1-countries-divider-gradient: linear-gradient(90deg, var(--ebmnt1-color-surface-dark), var(--ebmnt1-color-border-on-dark), var(--ebmnt1-color-surface-dark));
  --ebmnt1-countries-map-dot-color: rgba(255, 255, 255, 0.13);
  --ebmnt1-countries-pulse-color: var(--ebmnt1-color-primary-light);
  --ebmnt1-countries-description-text-color: var(--ebmnt1-color-text-on-dark);
  --ebmnt1-countries-card-background-color: var(--ebmnt1-color-white-soft);
  --ebmnt1-countries-card-border-color: var(--ebmnt1-color-border-on-dark);
  --ebmnt1-countries-card-hover-border-color: var(--ebmnt1-color-primary);
  --ebmnt1-countries-card-glow-color: rgba(91, 87, 231, 0.3);
  --ebmnt1-countries-icon-background-color: rgba(164, 147, 255, 0.16);
  --ebmnt1-countries-icon-color: var(--ebmnt1-color-primary-light);
  --ebmnt1-countries-name-color: var(--ebmnt1-color-white);
  --ebmnt1-countries-meta-color: var(--ebmnt1-color-text-on-dark);

  --ebmnt1-countries-vertical-space: clamp(3rem, 8vw, 7rem);
  --ebmnt1-countries-columns: 2;
  --ebmnt1-countries-grid-gap: 0.875rem;
  --ebmnt1-countries-map-dot-size: 1.5rem;
}

.ebmnt1-countries {
  gap: 0;
  overflow: hidden;
  background-color: var(--ebmnt1-countries-background-color);
  background-image:
    var(--ebmnt1-countries-divider-gradient),
    var(--ebmnt1-countries-divider-gradient);
  background-size: 100% 1px, 100% 1px;
  background-position: top, bottom;
  background-repeat: no-repeat;
}

.ebmnt1-countries::before,
.ebmnt1-countries::after {
  content: "";
  display: block;
  flex: none;
  width: 100%;
  height: var(--ebmnt1-countries-vertical-space);
}

.ebmnt1-countries__map {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ebmnt1-countries-map-dot-color) 1.2px, transparent 1.6px);
  background-size: var(--ebmnt1-countries-map-dot-size) var(--ebmnt1-countries-map-dot-size);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  pointer-events: none;
}

.ebmnt1-countries__pulse {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--ebmnt1-countries-pulse-color);
  pointer-events: none;
}

.ebmnt1-countries__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ebmnt1-countries-pulse-color);
  border-radius: 50%;
  animation: ebmnt1-countries-pulse 2.6s ease-out infinite;
}

.ebmnt1-countries__pulse--one {
  top: 22%;
  inset-inline-start: 12%;
}

.ebmnt1-countries__pulse--two {
  top: 68%;
  inset-inline-start: 30%;
}

.ebmnt1-countries__pulse--three {
  top: 30%;
  inset-inline-end: 14%;
}

.ebmnt1-countries__pulse--four {
  top: 74%;
  inset-inline-end: 24%;
}

.ebmnt1-countries__pulse--two::after {
  animation-delay: -0.8s;
}

.ebmnt1-countries__pulse--three::after {
  animation-delay: -1.5s;
}

.ebmnt1-countries__pulse--four::after {
  animation-delay: -2.1s;
}

.ebmnt1-countries__inner {
  gap: 2.5rem;
}

.ebmnt1-countries__description {
  color: var(--ebmnt1-countries-description-text-color);
}

.ebmnt1-countries__grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ebmnt1-countries-grid-gap);
}

.ebmnt1-country-card {
  flex: 0 0 calc((100% - (var(--ebmnt1-countries-columns) - 1) * var(--ebmnt1-countries-grid-gap)) / var(--ebmnt1-countries-columns));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ebmnt1-countries-card-border-color);
  border-radius: var(--ebmnt1-radius-card);
  background-color: var(--ebmnt1-countries-card-background-color);
  text-align: start;
  transition: border-color var(--ebmnt1-transition-duration) var(--ebmnt1-transition-easing),
    box-shadow var(--ebmnt1-transition-duration) var(--ebmnt1-transition-easing),
    transform var(--ebmnt1-transition-duration) var(--ebmnt1-transition-easing);
}

.ebmnt1-country-card:hover {
  border-color: var(--ebmnt1-countries-card-hover-border-color);
  box-shadow: 0 0 28px var(--ebmnt1-countries-card-glow-color);
  transform: translateY(-4px);
}

.ebmnt1-country-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--ebmnt1-countries-icon-background-color);
  color: var(--ebmnt1-countries-icon-color);
  transition: transform var(--ebmnt1-transition-duration) var(--ebmnt1-transition-easing);
}

.ebmnt1-country-card:hover .ebmnt1-country-card__icon {
  transform: translateY(-4px);
}

.ebmnt1-country-card__text {
  display: flex;
  flex-direction: column;
}

.ebmnt1-country-card__name {
  font-size: var(--ebmnt1-font-size-item-title);
  font-weight: 700;
  color: var(--ebmnt1-countries-name-color);
}

.ebmnt1-country-card__meta {
  font-size: var(--ebmnt1-font-size-label);
  color: var(--ebmnt1-countries-meta-color);
}

@media (min-width: 768px) {
  :root {
    --ebmnt1-countries-columns: 3;
    --ebmnt1-countries-grid-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --ebmnt1-countries-columns: 4;
  }
}

@media (min-width: 1440px) {
  :root {
    --ebmnt1-countries-columns: 5;
  }
}

@keyframes ebmnt1-countries-pulse {
  from {
    transform: scale(1);
    opacity: 0.9;
  }

  to {
    transform: scale(5);
    opacity: 0;
  }
}