/* Modern UI utility classes */

.modern-font {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.modern-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #1a1a1a;
}

.modern-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6b7280;
}

.modern-modal-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #1a1a1a;
}

.clickable-card {
  cursor: pointer;
  padding: 32px 24px;
  border-radius: 12px;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.clickable-card * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.clickable-card:hover {
  transform: translateY(-2px);
}

.clickable-card img {
  transition: filter 0.3s ease, transform 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.clickable-card:hover img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
  transform: scale(1.05);
}