/* ========== CUSTOM TAILWIND EXTENSIONS ========== */

/* Color Scheme */
:root {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #1e40af;
    --secondary: #f97316;
    --accent: #10b981;
    --text-dark: #111827;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --border-color: #e5e7eb;
}

/* ========== GLOBAL LAYOUT ========== */
body {
    @apply font-sans text-gray-900 leading-relaxed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Ensure consistent max-width for all content */
.container {
    @apply mx-auto;
}

section {
    @apply overflow-hidden;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-gray-900;
}

/* ========== SMOOTH SCROLLING ========== */
html {
    scroll-behavior: smooth;
}

/* ========== BUTTON STYLES ========== */
.btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg transition duration-300 cursor-pointer;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-orange-500 text-white hover:bg-orange-600;
}

.btn-border {
    @apply border-2 border-current hover:bg-opacity-10 hover:bg-current;
}

/* ========== CONTAINER UTILITIES ========== */
.container {
    @apply mx-auto;
}

/* ========== ANIMATIONS ========== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

.animate-slide-in-down {
    animation: slideInDown 0.6s ease-out;
}

/* ========== CAROUSEL/SLIDER OVERRIDES ========== */
.slider-area {
    width: 100%;
}

.slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.slider-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slider-content h1 {
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.slider-content p {
    margin-bottom: 2rem;
    max-width: 90%;
}

.slick-slide {
    @apply outline-none;
}

.slick-dots {
    @apply flex justify-center gap-2 my-4;
}

.slick-dots li {
    @apply w-3 h-3;
}

.slick-dots li button {
    @apply w-3 h-3 rounded-full bg-gray-300 transition duration-300;
}

.slick-dots li.slick-active button {
    @apply bg-blue-600;
}

.slick-arrow {
    @apply absolute top-1/2 transform -translate-y-1/2 z-10 cursor-pointer transition duration-300 !important;
}

.slick-prev {
    @apply left-4 !important;
}

.slick-next {
    @apply right-4 !important;
}

.slick-prev:before,
.slick-next:before {
    @apply text-2xl text-white opacity-80 hover:opacity-100 !important;
}

/* ========== CARD STYLES ========== */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition duration-300 border border-gray-100;
}

.card-header {
    @apply p-6 border-b border-gray-100;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply p-6 border-t border-gray-100;
}

/* ========== FORM ELEMENTS ========== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

input:disabled,
select:disabled,
textarea:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* ========== LOADING STATES ========== */
.loading {
    @apply opacity-60 pointer-events-none;
}

.spinner {
    @apply inline-block animate-spin;
}

/* ========== UTILITY CLASSES ========== */
.text-truncate {
    @apply truncate;
}

.text-ellipsis {
    @apply overflow-hidden text-ellipsis;
}

.flex-center {
    @apply flex items-center justify-center;
}

.absolute-center {
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
}

/* ========== ACCESSIBILITY ========== */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden clip-path-inset whitespace-nowrap border-0;
}

.focus-visible:focus {
    @apply ring-2 ring-offset-2 ring-blue-500;
}

/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 768px) {
    .hide-mobile {
        @apply hidden;
    }
}

@media (min-width: 769px) {
    .show-mobile-only {
        @apply hidden;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    * {
        @apply bg-white text-black;
    }
}