@import url("/services/service.css");

.area-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #237a4b;
  background: #eaf8f0;
  font-size: 12px;
  font-weight: 800;
}
.area-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #35a86b; }
.area-badge.unavailable { color: #9a5d20; background: #fff4e5; }
.area-badge.unavailable::before { background: #d88b34; }
.area-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
.area-service-link {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 19px;
  color: var(--ink);
  background: #fff;
  font-weight: 800;
  transition: transform .2s ease, border-color .2s ease;
}
.area-service-link:hover { transform: translateY(-2px); border-color: var(--purple); }

@media (max-width: 650px) {
  .area-services { grid-template-columns: 1fr; }
}