/* Improve typography for Tailwind components */
        [class*="tw-"] {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Smooth transitions */
        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }

        /* Fix grid issues - override Bootstrap conflicts */
        .grid {
            display: grid !important;
        }

        .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }

        .grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }

        .gap-6 {
            gap: 1.5rem !important;
        }

        .gap-8 {
            gap: 2rem !important;
        }

        /* Responsive grid overrides */
        @media (min-width: 768px) {
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .md\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }

        @media (min-width: 1024px) {
            .lg\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
            .lg\:grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }
            .lg\:grid-cols-6 {
                grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
            }
        }
/* Ensure Tailwind responsive utilities work with prefix and override Bootstrap */
    .hidden { display: none !important; }
    .flex { display: flex !important; }
    .items-center { align-items: center !important; }
    .justify-between { justify-content: space-between !important; }
    .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
    .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem !important; }
    .relative { position: relative !important; }
    .absolute { position: absolute !important; }
    .fixed { position: fixed !important; }
    .top-0 { top: 0 !important; }
    .left-0 { left: 0 !important; }
    .right-0 { right: 0 !important; }
    .z-50 { z-index: 50 !important; }
    .h-16 { height: 4rem !important; }
    .h-8 { height: 2rem !important; }
    .w-8 { width: 2rem !important; }
    .w-4 { width: 1rem !important; }
    .h-4 { height: 1rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .text-xl { font-size: 1.25rem !important; }
    .font-bold { font-weight: 700 !important; }
    .font-medium { font-weight: 500 !important; }
    .text-gray-700 { color: #374151 !important; }
    .text-white { color: #ffffff !important; }
    .bg-white { background-color: #ffffff !important; }
    .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
    .transition-colors { transition-property: color, background-color, border-color, fill, stroke !important; }
    .transition-all { transition-property: all !important; }
    .duration-300 { transition-duration: 300ms !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .rounded-md { border-radius: 0.375rem !important; }

    @media (min-width: 640px) {
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 1024px) {
        .lg\:flex { display: flex !important; }
        .lg\:hidden { display: none !important; }
        .lg\:items-center { align-items: center !important; }
        .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem !important; }
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }

    /* Hover states */
    .hover\:text-blue-600:hover { color: #2563eb !important; }
    .hover\:bg-gray-50:hover { background-color: #f9fafb !important; }
    .hover\:bg-gray-200:hover { background-color: #f3f4f6 !important; }
    .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

    /* Dropdown specific styles */
    [x-show="conversionsOpen"], [x-show="languageOpen"], [x-show="profileOpen"] {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        margin-top: 0.5rem !important;
        background-color: #ffffff !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        padding: 0.5rem 0 !important;
        z-index: 1000 !important;
        border: 1px solid #e5e7eb !important;
    }

    [x-show="conversionsOpen"]:dir(rtl),
    [x-show="languageOpen"]:dir(rtl),
    [x-show="profileOpen"]:dir(rtl) {
        left: 0 !important;
        right: auto !important;
    }

    /* Ensure dropdowns are properly positioned */
    .absolute {
        position: absolute !important;
    }

    .mt-2 {
        margin-top: 0.5rem !important;
    }

    .w-48 {
        width: 12rem !important;
    }

    .w-64 {
        width: 16rem !important;
    }

    .overflow-y-auto {
        overflow-y: auto !important;
    }

    .max-h-96 {
        max-height: 24rem !important;
    }

    .conversion-menu {
        width: min(44rem, calc(100vw - 2rem)) !important;
        max-height: calc(100vh - 4.5rem) !important;
        max-height: calc(100dvh - 4.5rem) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 0.875rem !important;
    }

    .conversion-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    .conversion-menu-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .conversion-menu-section-title {
        display: block !important;
        margin: 0 0 0.375rem !important;
        padding: 0 0.5rem !important;
        color: #6b7280 !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        line-height: 1rem !important;
    }

    .conversion-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.625rem !important;
        min-height: 3.25rem !important;
        padding: 0.5rem !important;
        border-radius: 0.5rem !important;
        color: #111827 !important;
        text-decoration: none !important;
        transition: background-color 150ms ease, color 150ms ease !important;
    }

    .conversion-menu-link:hover {
        background-color: #f9fafb !important;
        text-decoration: none !important;
    }

    .conversion-menu-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 0.5rem !important;
        font-size: 0.625rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .conversion-menu-copy {
        min-width: 0 !important;
    }

    .conversion-menu-label {
        display: block !important;
        overflow: hidden !important;
        color: #111827 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .conversion-menu-description {
        display: block !important;
        overflow: hidden !important;
        margin-top: 0.125rem !important;
        color: #6b7280 !important;
        font-size: 0.75rem !important;
        line-height: 1rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .conversion-menu-badge-blue { background-color: #dbeafe !important; color: #2563eb !important; }
    .conversion-menu-badge-green { background-color: #dcfce7 !important; color: #16a34a !important; }
    .conversion-menu-badge-purple { background-color: #f3e8ff !important; color: #9333ea !important; }
    .conversion-menu-badge-emerald { background-color: #d1fae5 !important; color: #059669 !important; }
    .conversion-menu-badge-cyan { background-color: #cffafe !important; color: #0e7490 !important; }
    .conversion-menu-badge-fuchsia { background-color: #fae8ff !important; color: #c026d3 !important; }
    .conversion-menu-badge-amber { background-color: #fef3c7 !important; color: #b45309 !important; }
    .conversion-menu-badge-orange { background-color: #ffedd5 !important; color: #ea580c !important; }
    .conversion-menu-badge-teal { background-color: #ccfbf1 !important; color: #0f766e !important; }
    .conversion-menu-badge-red { background-color: #fee2e2 !important; color: #dc2626 !important; }
    .conversion-menu-badge-indigo { background-color: #e0e7ff !important; color: #4f46e5 !important; }

    .mobile-navigation-menu {
        max-height: calc(100vh - 4rem - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 4rem - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        scrollbar-color: #9ca3af #f3f4f6 !important;
        scrollbar-gutter: stable !important;
        scrollbar-width: thin !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-navigation-menu::-webkit-scrollbar {
        width: 0.5rem !important;
    }

    .mobile-navigation-menu::-webkit-scrollbar-track {
        background: #f3f4f6 !important;
    }

    .mobile-navigation-menu::-webkit-scrollbar-thumb {
        background: #9ca3af !important;
        border: 2px solid #f3f4f6 !important;
        border-radius: 0.5rem !important;
    }

    .mobile-language-list {
        max-height: min(18rem, calc(100dvh - 12rem)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        scrollbar-gutter: stable !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-language-button:focus-visible,
    .mobile-language-link:focus-visible {
        outline: 2px solid #4f46e5 !important;
        outline-offset: 2px !important;
    }

    .mobile-language-link {
        min-height: 2.75rem !important;
    }

    html.mobile-navigation-open,
    html.mobile-navigation-open body {
        overflow: hidden !important;
    }

    .mobile-conversion-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-width: 1.25rem !important;
        height: 1.25rem !important;
        margin-right: 0.5rem !important;
        padding: 0 0.25rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.625rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* Alpine.js x-show states - ensure hidden by default */
    [x-show][style*="display: none"] {
        display: none !important;
    }

    /* Ensure dropdown links are styled */
    .ring-1 {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    }

    .ring-black {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    }

    .text-sm {
        font-size: 0.875rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .block {
        display: block !important;
    }

    /* Remove unwanted button/input styling */
    nav button {
        background: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    nav button:focus {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    nav button:hover {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Ensure dropdown buttons look like links */
    [data-dropdown-button] {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    [data-dropdown-button]:focus,
    [data-dropdown-button]:hover,
    [data-dropdown-button]:active {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Target specific button classes that might be getting Bootstrap styling */
    .navbar button,
    nav .btn,
    nav .btn-outline-secondary,
    nav .dropdown-toggle {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .navbar button:focus,
    nav .btn:focus,
    nav .btn-outline-secondary:focus,
    nav .dropdown-toggle:focus {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Override any Bootstrap button styles */
    nav [class*="btn"] {
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    nav [class*="btn"]:focus,
    nav [class*="btn"]:hover,
    nav [class*="btn"]:active {
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Fix responsive visibility - hide mobile menu on desktop */
    @media (min-width: 1024px) {
        .lg\:hidden {
            display: none !important;
        }

        /* Show desktop menu items */
        .lg\:flex {
            display: flex !important;
        }

        /* Hide mobile menu button on desktop */
        nav .flex.items-center.lg\:hidden {
            display: none !important;
        }
    }

    /* Show mobile menu button only on mobile */
    @media (max-width: 1023px) {
        /* Hide desktop navigation on mobile */
        .hidden.lg\:flex {
            display: none !important;
        }

        /* Show mobile menu button */
        .flex.items-center.lg\:hidden {
            display: flex !important;
        }
    }