/* Custom Styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-2 border border-transparent rounded-lg text-base font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-2 border border-transparent rounded-lg text-base font-medium text-primary-600 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-2 border border-primary-600 rounded-lg text-base font-medium text-primary-600 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Form Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
}

/* Card Styles */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow;
}

/* Section Styles */
.section-padding {
    @apply py-24;
}

.container-padding {
    @apply px-4 sm:px-6 lg:px-8;
}

/* Typography */
h1 {
    @apply text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900;
}

h2 {
    @apply text-3xl sm:text-4xl font-bold text-gray-900;
}

h3 {
    @apply text-2xl font-bold text-gray-900;
}

h4 {
    @apply text-xl font-bold text-gray-900;
}

p {
    @apply text-gray-700;
}

/* List Styles */
.list-check {
    @apply space-y-3;
}

.list-check li {
    @apply flex items-start;
}

.list-check li i {
    @apply text-green-500 mt-1 mr-2;
}

/* Grid Layouts */
.grid-auto-fit {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* Image Styles */
.img-rounded {
    @apply rounded-2xl shadow-2xl;
}

/* Icon Styles */
.icon-circle {
    @apply w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center;
}

.icon-circle i {
    @apply text-2xl text-primary-600;
}

/* Responsive Utilities */
.mobile-only {
    @apply block md:hidden;
}

.desktop-only {
    @apply hidden md:block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary-500 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary-600;
}

/* Focus Styles */
*:focus {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
}

/* Selection Styles */
::selection {
    @apply bg-primary-500 text-white;
}

/* Loading States */
.loading {
    @apply animate-pulse bg-gray-200;
}

/* Transitions */
.transition-all {
    @apply transition-all duration-300 ease-in-out;
}

/* Mobile Menu */
.mobile-menu {
    @apply fixed inset-0 z-50 bg-white transform transition-transform duration-300 ease-in-out;
}

.mobile-menu.open {
    @apply translate-x-0;
}

.mobile-menu.closed {
    @apply translate-x-full;
}

/* Accessibility */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-900 {
        @apply bg-gray-900;
    }

    .dark\:text-white {
        @apply text-white;
    }
}

/* Utilities */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Container Queries */
.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Z-index Scale */
.z-header {
    z-index: 50;
}

.z-modal {
    z-index: 100;
}

.z-tooltip {
    z-index: 75;
}

/* Shadows */
.shadow-card {
    @apply shadow-lg hover:shadow-xl transition-shadow;
}

/* Border Radius */
.rounded-card {
    @apply rounded-xl;
}

/* Spacing */
.section-spacing {
    @apply space-y-24;
}

.component-spacing {
    @apply space-y-8;
}

/* Background Patterns */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Gradients */
.gradient-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600;
}

.gradient-hero {
    @apply bg-gradient-to-b from-primary-50 to-white;
}

/* Hover Effects */
.hover-lift {
    @apply transform transition-transform duration-300 hover:-translate-y-1;
}

.hover-scale {
    @apply transform transition-transform duration-300 hover:scale-105;
}

/* Focus Visible */
.focus-visible\:ring-2:focus-visible {
    @apply ring-2 ring-primary-500 ring-offset-2;
}

/* Active States */
.active\:scale-95:active {
    @apply transform scale-95;
}

/* Disabled States */
.disabled\:opacity-50:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Loading States */
.loading\:animate-pulse:loading {
    @apply animate-pulse;
}

/* Error States */
.error\:ring-red-500:error {
    @apply ring-2 ring-red-500;
}

/* Success States */
.success\:ring-green-500:success {
    @apply ring-2 ring-green-500;
}

/* Warning States */
.warning\:ring-yellow-500:warning {
    @apply ring-2 ring-yellow-500;
}

/* Info States */
.info\:ring-blue-500:info {
    @apply ring-2 ring-blue-500;
}

/* Navigation Styles */
.nav-item {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-700 hover:text-primary-600 border-b-2 border-transparent hover:border-primary-500 transition-colors duration-200;
}

.nav-item.active {
    @apply border-primary-500 text-primary-600;
}

/* Mobile Navigation */
.mobile-menu .nav-item {
    @apply block w-full px-4 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 transition-colors duration-200;
}