:root {
  --ocb-hero-from: #0d6efd;
  --ocb-hero-to: #0b5ed7;
}

body { 
  background-color: #f8f9fb; 
}

.hero-bg {
  background: linear-gradient(135deg, var(--ocb-hero-from), var(--ocb-hero-to));
}

.hero-card {
  border: 1px solid rgba(0,0,0,0.06);
}

.map-wrap #map {
  width: 100%;
  height: 380px;
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 0.25rem 1rem rgba(13,110,253,0.15);
}

@media (min-width: 992px) {
  .map-wrap #map { height: 520px; }
}

.country-card { 
  transition: transform .15s ease, box-shadow .15s ease; 
}
.country-card:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); 
}

.flag-img {
  width: 44px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
}

.country-link {
  word-break: break-word;
}

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; }

.leaflet-marker-icon.marker-highlight {
  transform: scale(1.15) translateY(-2px);
  transition: transform .12s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}