/* Card Component Styles */
/* Default styles matching the TypeScript component */

/* Set border radius to 6px for Card component */
.rounded-app-radius {
  border-radius: 6px !important;
}

/* Card base styles */
.bg-card {
  background-color: hsl(var(--card)) !important;
}

.text-card-foreground {
  color: hsl(var(--card-foreground)) !important;
}

/* Card border */
.border {
  border: 1px solid hsl(var(--border)) !important;
}

/* Card shadow - matches Tailwind's default shadow utility */
.shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
}

/* Card header spacing */
.flex.flex-col.space-y-1\.5 {
  display: flex !important;
  flex-direction: column !important;
}

.space-y-1\.5 > * + * {
  margin-top: 0.375rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

/* Card title styles */
.font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.leading-none {
  line-height: 1 !important;
}

.tracking-tight {
  letter-spacing: -0.025em !important;
}

/* Card description styles */
.text-sm {
  font-size: var(--font-size-sm) !important;
}

.text-muted-foreground {
  color: hsl(var(--muted)) !important;
}

/* Card content padding */
.p-6.pt-0 {
  padding: 0 1.5rem 1.5rem 1.5rem !important;
}

/* Card footer styles */
.flex.items-center {
  display: flex !important;
  align-items: center !important;
}

/* Responsive grid for step cards */
/* 2 columns on larger screens (>=768px), 1 column on smaller screens */
@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .steps-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}