/* ==========================================================
   ebmnt1 — Countries / Arab Markets (flag tiles, 3D hover)
   ========================================================== */
:root {
  --ebmnt1-countries-background-color: var(--ebmnt1-color-helper-surface);
  --ebmnt1-countries-columns: 2;
  --ebmnt1-countries-gap: 1rem;
  --ebmnt1-country-background-color: var(--ebmnt1-color-helper-white);
  --ebmnt1-country-border-color: var(--ebmnt1-color-helper-border);
  --ebmnt1-country-hover-border-color: var(--ebmnt1-color-primary);
  --ebmnt1-country-shadow-color: var(--ebmnt1-color-helper-shadow-medium);
  --ebmnt1-country-flag-font-size: clamp(2.2rem, 1.9rem + 1.4vw, 3rem);
  --ebmnt1-country-name-color: var(--ebmnt1-color-secondary);
  --ebmnt1-country-name-font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --ebmnt1-country-note-color: var(--ebmnt1-color-helper-muted);
  --ebmnt1-country-note-font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --ebmnt1-country-bar-color: var(--ebmnt1-color-primary);
  --ebmnt1-country-tilt-x: 0deg;
  --ebmnt1-country-tilt-y: 0deg;
}

.ebmnt1-countries {
  background-color: var(--ebmnt1-countries-background-color);
}

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

.ebmnt1-country {
  position: relative;
  flex: 0 0 calc((100% - (var(--ebmnt1-countries-columns) - 1) * var(--ebmnt1-countries-gap)) / var(--ebmnt1-countries-columns));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 0.75rem;
  background-color: var(--ebmnt1-country-background-color);
  border: 1px solid var(--ebmnt1-country-border-color);
  overflow: hidden;
  transform: perspective(50rem) rotateX(var(--ebmnt1-country-tilt-x)) rotateY(var(--ebmnt1-country-tilt-y));
  transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ebmnt1-country::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--ebmnt1-country-bar-color);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.ebmnt1-country:hover {
  border-color: var(--ebmnt1-country-hover-border-color);
  box-shadow: 0 0.8rem 1.75rem var(--ebmnt1-country-shadow-color);
}

.ebmnt1-country:hover::after {
  transform: scaleX(1);
}

.ebmnt1-country__flag {
  font-size: var(--ebmnt1-country-flag-font-size);
  line-height: 1.2;
}

.ebmnt1-country__name {
  font-size: var(--ebmnt1-country-name-font-size);
  font-weight: 700;
  color: var(--ebmnt1-country-name-color);
}

.ebmnt1-country__note {
  font-size: var(--ebmnt1-country-note-font-size);
  color: var(--ebmnt1-country-note-color);
}

@media (min-width: 425px) {
  :root { --ebmnt1-countries-gap: 1.25rem; }
}

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