/**
 * @file
 * MLT Modern — Service area pills.
 *
 * Rounded pill links arranged in a centred wrap, used for service area
 * lists like "We cover: Cheshunt, Waltham Cross, Broxbourne, Harlow...".
 *
 * Markup:
 *   <div class="mlt-areas">
 *     <a href="/areas/cheshunt" class="mlt-area-pill">Cheshunt</a>
 *     <a href="/areas/waltham-cross" class="mlt-area-pill">Waltham Cross</a>
 *     ...
 *   </div>
 */

.mlt-areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.mlt-area-pill {
  background: #fff;
  border: 1px solid var(--mlt-border);
  padding: 10px 20px;
  border-radius: var(--mlt-radius-pill);
  font-size: 15px;
  color: var(--mlt-text);
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  display: inline-block;
}

.mlt-area-pill:hover {
  background: var(--mlt-primary);
  color: #fff;
  border-color: var(--mlt-primary);
  text-decoration: none;
}