/* Enhanced Components CSS */

/* Card Components */
.service-card {
    @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 px-6 shadow-sm transition-all duration-300 hover:shadow-lg hover:border-primary/50;
}

.service-icon {
    @apply size-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary text-2xl mb-4;
}

.service-title {
    @apply text-xl font-semibold mb-2;
}

.service-description {
    @apply text-muted-foreground text-sm mb-4;
}

.service-features {
    @apply space-y-2;
}

.service-feature {
    @apply flex items-center gap-2 text-sm text-muted-foreground;
}

.service-feature i {
    @apply text-primary text-xs;
}

/* Stats Cards */
.stat-card {
    @apply bg-card text-card-foreground rounded-xl border p-6 shadow-sm;
}

.stat-number {
    @apply text-4xl font-bold text-primary mb-2;
}

.stat-label {
    @apply text-lg font-semibold mb-1;
}

.stat-description {
    @apply text-sm text-muted-foreground;
}

/* Process Steps */
.process-step {
    @apply bg-card text-card-foreground rounded-xl border p-6 shadow-sm relative;
}

.process-number {
    @apply size-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold text-lg mb-4;
}

/* FAQ Accordion */
.faq-container {
    @apply space-y-4;
}

.faq-item {
    @apply border-b last:border-b-0;
}

.faq-question {
    @apply flex items-start justify-between gap-4 py-4 text-left text-sm font-medium transition-all cursor-pointer hover:text-primary;
}

.faq-answer {
    @apply overflow-hidden transition-all duration-300;
}

.faq-answer.active {
    @apply pt-0 pb-4;
}

.faq-icon {
    @apply text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200;
}

.faq-icon.active {
    @apply rotate-180;
}

/* Contact Form */
.contact-form {
    @apply space-y-6;
}

.form-group {
    @apply grid gap-2;
}

.form-label {
    @apply text-sm font-medium leading-none;
}

.form-input,
.form-textarea,
.form-select {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

.form-textarea {
    @apply min-h-[120px];
}

.form-submit {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full;
}

/* CTA Section */
.cta-section {
    @apply bg-card text-card-foreground rounded-xl border p-8 text-center;
}

.cta-title {
    @apply text-2xl font-bold mb-4;
}

.cta-description {
    @apply text-muted-foreground mb-6;
}

.cta-button {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6;
}

/* Related Services */
.related-service-card {
    @apply bg-card text-card-foreground rounded-xl border p-6 shadow-sm transition-all duration-300 hover:shadow-lg hover:border-primary/50;
}

.related-service-icon {
    @apply size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary text-xl mb-4;
}

.related-service-title {
    @apply text-lg font-semibold mb-2;
}

.related-service-description {
    @apply text-sm text-muted-foreground;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Grid Layouts */
.stats-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.service-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.process-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.related-services-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6;
}