/* Utility classes for common patterns */

/* Container utilities */
.container-main {
    @apply w-full max-w-7xl mx-auto px-6;
}

.container-small {
    @apply w-full max-w-6xl mx-auto px-4 sm:px-6;
}

.container-medium {
    @apply w-full max-w-5xl mx-auto px-4 sm:px-6;
}

.container-narrow {
    @apply w-full max-w-4xl mx-auto px-4 sm:px-6;
}

/* Text utilities */
.gradient-text {
    @apply bg-gradient-to-r from-primary-gradientFrom to-primary-gradientTo bg-clip-text text-transparent;
}

.section-title {
    @apply text-2xl md:text-3xl font-bold text-center mb-12 md:mb-16 text-neutral-900;
}

.section-subtitle {
    @apply text-base text-neutral-600 mb-6 max-w-2xl mx-auto;
}

/* Button utilities */
.btn-primary {
    @apply bg-gradient-to-r from-primary-gradientFrom to-primary-gradientTo text-white px-8 py-3 rounded-lg font-bold transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 hover:from-primary-gradientTo hover:to-primary-gradientFrom;
}

.btn-whatsapp {
    @apply whatsapp-button;
}

/* Card utilities */
.card-feature {
    @apply bg-white p-6 rounded-xl shadow-lg card-hover-vibrant text-center;
}

.card-icon {
    @apply rounded-xl w-16 h-16 flex items-center justify-center text-3xl mb-5 mx-auto shadow-md;
}

.card-icon-primary {
    @apply card-icon bg-gradient-to-br from-primary-gradientFrom to-primary-gradientTo text-white;
}

.card-icon-secondary {
    @apply card-icon bg-gradient-to-br from-sky-400 to-secondary text-white;
}

.card-icon-success {
    @apply card-icon bg-gradient-to-br from-emerald-400 to-emerald-600 text-white;
}

.card-icon-info {
    @apply card-icon bg-gradient-to-br from-indigo-400 to-indigo-600 text-white;
}

/* Animation utilities */
.animate-slide-in-left {
    @apply animated-element slide-in-left;
}

.animate-slide-in-right {
    @apply animated-element slide-in-right;
}

.animate-slide-in-up {
    @apply animated-element slide-in-up;
}

/* Layout utilities */
.section-wrapper {
    @apply section-padding;
}

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

.grid-two-col {
    @apply grid md:grid-cols-2 gap-12 items-center;
}

.grid-three-col {
    @apply grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10;
}

/* Navigation utilities */
.nav-link {
    @apply text-neutral-600 hover:text-primary-gradientFrom transition duration-300 font-semibold;
}

.nav-link-mobile {
    @apply flex items-center gap-3 px-3 py-2 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-primary transition duration-150 drawer-link;
}

/* Footer utilities */
.footer-link {
    @apply flex items-center gap-2 hover:text-primary-gradientFrom transition duration-200;
}

.social-link {
    @apply text-neutral-600 border border-neutral-300 transition duration-300 text-base md:text-lg w-8 h-8 md:w-9 md:h-9 rounded-full flex items-center justify-center hover:bg-neutral-100;
}

.social-link-pink {
    @apply social-link hover:border-pink-500 hover:text-pink-500;
}

.social-link-green {
    @apply social-link hover:border-green-500 hover:text-green-500;
}

/* Image utilities */
.hero-image {
    @apply aspect-square bg-neutral-200 rounded-3xl overflow-hidden shadow-xl border-4 border-white transform rotate-3 hover:rotate-0 transition duration-500 ease-in-out;
}

.testimonial-card {
    @apply animated-element bg-white p-2 rounded-xl shadow-md;
}

.testimonial-img {
    @apply testimonial-image rounded-lg w-full h-auto max-h-80 object-contain;
}

/* Floating elements */
.floating-icon {
    @apply absolute bg-white p-3 rounded-full shadow-lg;
}

.floating-icon-bounce {
    @apply floating-icon -bottom-5 -left-5 animate-bounce;
}

.floating-icon-static {
    @apply floating-icon -top-5 -right-5;
}