/* client.css */
.contractor-card {
  border: 1px solid var(--border);
  background: #0b1220;
}

.contractor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.badge.verified {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  font-size: 12px;
  margin-inline-start: 6px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tags span {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #0b1020;
  font-size: 12px;
  color: var(--muted);
}

.rating {
  font-size: 12px;
  color: var(--muted);
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.filters {
  border: 1px dashed var(--border);
  padding: 12px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.6);
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.skeleton-card {
  height: 160px;
  border-radius: 14px;
  background: linear-gradient(90deg, #0b1220 25%, #101b2e 50%, #0b1220 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.image-placeholder {
  height: 140px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(16, 185, 129, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.quote-steps {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .skeleton-grid { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
}