/* Custom Styles for Style Swaps LLC */

/* General Styling */
body {
    font-family: 'Inter', sans-serif;
}

/* Navigation Link Styling */
.nav-link {
    @apply text-gray-600 font-medium text-lg relative;
    transition: color 0.3s ease;
}

.nav-link:hover {
    @apply text-primary;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4f46e5; /* primary color */
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    @apply text-primary font-semibold;
}

/* Feature Card Styling */
.feature-card {
    @apply bg-white p-8 rounded-lg shadow-sm border border-gray-100 text-center transition-all duration-300;
}

.feature-card:hover {
    @apply shadow-lg -translate-y-1;
}

/* Pricing Card Styling */
.pricing-card {
    @apply bg-white p-8 rounded-lg shadow-md border-2 border-transparent text-center transition-all duration-300 relative overflow-hidden;
}

.pricing-card.popular {
    @apply border-primary transform lg:scale-105;
}

.popular-badge {
    @apply bg-primary text-white text-sm font-bold px-4 py-1 rounded-full absolute top-4 right-4;
}

.pricing-button {
    @apply block w-full bg-primary/10 text-primary font-bold py-3 px-6 rounded-lg transition-colors duration-300;
}

.pricing-button:hover {
    @apply bg-primary text-white;
}

.pricing-button-popular {
    @apply block w-full bg-primary text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300;
}

.pricing-button-popular:hover {
    @apply bg-primary-dark;
}

/* How It Works Step Number */
.step-number {
    @apply flex-shrink-0 w-16 h-16 bg-primary text-white text-3xl font-bold rounded-full flex items-center justify-center shadow-lg;
}

/* Form Styling */
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary transition-all;
}

/* Footer Link Styling */
.footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
}

/* Prose (for legal pages) custom styling */
.prose h1, .prose h2, .prose h3 {
    @apply text-dark-blue;
}

.prose a {
    @apply text-primary;
}

.prose a:hover {
    @apply text-primary-dark;
}