@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';


/* 1️⃣ Define theme tokens with @theme */
@theme {
       --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
        --font-monst: 'Montserrat', sans-serif;
  /* Primary colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
--color-primary-900: #0c4a6e;
  --color-primary: var(--color-primary-500);
  --color-primary-foreground: #ffffff;

  /* Secondary colors */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-foreground: #0f172a;

  /* Accent colors */
  --color-accent-50: #fdf2f8;
  --color-accent-100: #fce7f3;
  --color-accent-200: #fbcfe8;
  --color-accent-300: #f9a8d4;
  --color-accent-400: #f472b6;
  --color-accent-500: #ec4899;
  --color-accent-600: #db2777;
  --color-accent-700: #be185d;
  --color-accent-foreground: #ffffff;

  /* Other semantic colors */
  --color-background: #f8fafc;
  --color-foreground: #1e293b;
  --color-card: #ffffff;
  --color-card-foreground: #1e293b;
  --color-muted: #f1f5f9;
  --color-muted-foreground: #64748b;
  --color-border: #e2e8f0;
  --color-input: #e2e8f0;
  --color-ring: #0ea5e9;

  --gradient-pink-from: #ec4899;
  --gradient-purple-via: #a855f7;
  --gradient-indigo-to: #4f46e5;

  --mobile-header-bg: #1e293b;
  --mobile-header-text: #f1f5f9;

  --yellow-action: #facc15;
  --green-positive: #22c55e;
  --red-negative: #ef4444;

  /* Box shadows */
  --shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07),0 10px 20px -2px rgba(0,0,0,0.04);
  --shadow-top: 0 -4px 12px -1px rgba(0,0,0,0.05),0 -2px 8px -1px rgba(0,0,0,0.03);

  /* Border radius */
  --radius-lg: 0.75rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
}
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}
/* 2️⃣ Add custom utility classes via @layer utilities */
@layer utilities {
  /* Nav gradient, dark mode supported */
  .nav-bg {
    @apply bg-gradient-to-r from-white via-[var(--color-primary-50)] to-white dark:from-gray-900 dark:via-[var(--color-primary-700)] dark:to-gray-900;
  }

  /* Nav border */
  .nav-border {
    @apply border-b border-[var(--color-primary-200)] dark:border-[var(--color-primary-700)/30];
  }

  /* Nav shadow */
  .nav-shadow {
    box-shadow: var(--shadow-soft);
  }

  /* Optional glowing shadow */
  .nav-glow {
    box-shadow: 0 2px 15px -3px rgba(14,165,233,0.07), 0 10px 20px -2px rgba(14,165,233,0.04);
  }

  /* Animations */
  @keyframes pulse {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14,165,233,0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(14,165,233,0); }
  }

  @keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  }

  @keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  @keyframes float-delayed {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
  }

  .animate-pulse-slow { animation: pulse 2.5s infinite; }
  .animate-shine-once { animation: shine 1.5s ease-in-out; }
  .animate-float { animation: float 3s ease-in-out infinite; }
  .animate-float-delayed { animation: float-delayed 4s ease-in-out infinite; }
}


.heroSwiper .swiper-slide {
    transition: opacity 0.8s ease-in-out;
}

/* Light mode */
trix-editor {
    background-color: white;
    color: #111827;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    min-height: 200px;
    padding: 0.75rem;
}

/* Dark mode */
.dark trix-editor {
    background-color: #111827; /* gray-900 */
    color: #f3f4f6; /* gray-100 */
    border: 1px solid #374151; /* gray-700 */
}

.dark trix-toolbar {
    background-color: #1f2937; /* gray-800 */
    border-bottom: 1px solid #374151;
}

.dark trix-toolbar .trix-button {
    filter: invert(1);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


html:active-view-transition-type(forward) {
    &::view-transition-old(content) {
        animation: 300ms ease-out slide-out-left;
    }
    &::view-transition-new(content) {
        animation: 300ms ease-in slide-in-right;
    }
}
 
html:active-view-transition-type(backward) {
    &::view-transition-old(content) {
        animation: 300ms ease-out slide-out-right;
    }
    &::view-transition-new(content) {
        animation: 300ms ease-in slide-in-left;
    }
}
 
@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}
 
@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
 
@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
 
@keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.step-wrapper {
    position: relative; /* keep it */
}

.step-wrapper > * {
    position: relative; /* remove absolute */
    width: 100%;
}
.btn-primary {
    @apply flex items-center gap-2 bg-linear-to-tr from-sky-900 to-sky-400 hover:from-sky-500 hover:to-sky-900 p-3 rounded-md text-white font-semibold text-sm capitalize transition-colors ease-in duration-200
}

.btn-primary-icon{
    @apply w-5 h-5
}
/* Tailwind-friendly custom styles */
.swiper-pagination-bullet {
    @apply w-6! rounded-2xl!;
}


.swiper-pagination-bullet-active{
    @apply  bg-indigo-800! dark:bg-white!; /* Longer bullet */
}
/* .swiper-slide {
    transition: transform 0.6s ease, opacity 0.6s ease !important;
}

.swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.96)  !important;
    opacity: 0.6  !important;
} */

/* Base state (hidden) */
.slide-title,
.slide-desc,
.slide-button {
    opacity: 0;
    transform: translateX(-40px);
}


.swiper-slide-active .slide-title {
    animation: slideInX 0.6s ease forwards;
    animation-delay: 0.2s;
}

.swiper-slide-active .slide-desc {
    animation: slideInX 0.6s ease forwards;
    animation-delay: 0.4s;
}

.swiper-slide-active .slide-button {
    animation: slideInX 0.6s ease forwards;
    animation-delay: 0.6s;
}

@keyframes slideInX {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


[x-cloak] {
    display: none !important;
}
#custom-pagination {
    position: static; /* remove absolute positioning */
    text-align: center; /* center bullets */
}


@keyframes fill-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.animate-fill {
    animation: fill-progress 3s linear infinite;
}


.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.fade-in-up.show {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

   body {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: theme('colors.background');
            color: theme('colors.foreground');
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #e2e8f0; } /* slate-200 */
        ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } /* slate-400 */
        ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* slate-500 */

        .dark ::-webkit-scrollbar-track { background: #374151; } /* gray-700 */
        .dark ::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */
        .dark ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */

        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* slate-300 */
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* slate-400 */

        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */
        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */

        .shine-effect-container { position: relative; overflow: hidden; }
        .shine-effect {
            position: absolute; top: -50%; left: -50%;
            width: 200%; height: 200%;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            transform: rotate(45deg); opacity: 0; transition: opacity 0.5s;
        }
        .shine-effect-container:hover .shine-effect { opacity: 1; animation: shine-once 1.5s ease-in-out; }

        .fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
        .fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

        /* Floating elements animation */
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        .floating-slow {
            animation: float 6s ease-in-out infinite;
        }
        .floating-slower {
            animation: float 8s ease-in-out infinite;
        }
        
        /* Interactive elements */
        .input-wrapper {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .input-wrapper:focus-within {
            transform: translateY(-2px);
        }
        
        .input-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1rem;
            color: #94a3b8;
            transition: color 0.3s ease;
        }
        
        .input-wrapper:focus-within .input-icon {
            color: var(--primary-color);
        }
        
        input:focus + .input-toggle {
            color: var(--primary-color);
        }
        
        .dark .input-icon {
            color: #6b7280;
        }
        
        /* Dark mode toggle button styling */
        .dark-mode-toggle {
            transition: all 0.3s ease;
        }
        
        .dark-mode-toggle:hover {
            transform: scale(1.1);
        }

        /* Gradient backgrounds */
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .gradient-primary {
            background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
        }
        
        .gradient-secondary {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        }



        /* Mobile Fixed Buttons */
        .mobile-fixed-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 50;
            display: flex;
        }

        @media (min-width: 1024px) {
            .mobile-fixed-buttons {
                display: none;
            }
        }
