/* Mobile navbar fixes - Step 1: Improve Container Constraints */
@media (max-width: 767px) {
    nav {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    nav .max-w-7xl {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    nav .flex.justify-between.items-center.h-14 {
        height: 3.5rem;
        align-items: center;
    }
    
    nav .flex-1.flex.justify-center.items-center {
        position: relative;
        flex: 0 1 auto;
        justify-content: center;
    }
    
    nav .flex.items-center img {
        max-height: 2.5rem;
        width: auto;
    }
}

/* Desktop dropdown menu styles */
.absolute.z-50.mt-2.w-64.rounded-md.shadow-lg.bg-white.ring-1.ring-black.ring-opacity-5,
.absolute.z-50.mt-2.w-48.rounded-md.shadow-lg.bg-white.ring-1.ring-black.ring-opacity-5 {
    top: 100%;
    right: 0;
    min-width: 12rem;
    padding: 0.5rem 0;
}

/* Mobile menu overlay */
.fixed.inset-0.bg-black.bg-opacity-50.z-40.md\:hidden {
    backdrop-filter: blur(2px);
}

/* Mobile menu slide-in panel */
.fixed.inset-y-0.left-0.z-50.w-3\/4.max-w-xs.transform.bg-white.shadow-md.md\:hidden {
    overflow-y: auto;
}

/* Mobile menu item styles */
.block.p-4.text-indigo-900.font-medium,
.block.p-4.text-indigo-900.font-medium.border-b.border-gray-100 {
    transition: background-color 0.2s ease;
}

.block.p-4.text-indigo-900.font-medium:hover,
.block.p-4.text-indigo-900.font-medium.border-b.border-gray-100:hover {
    background-color: rgba(243, 244, 246, 0.5);
}

/* Mobile submenu item styles */
.block.py-3.px-4.pl-8.text-indigo-900.hover\:bg-gray-50 {
    transition: background-color 0.2s ease;
}

/* Mobile menu toggle button styles */
.flex.items-center.justify-between.w-full.p-4.text-indigo-900.font-medium {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.flex.items-center.justify-between.w-full.p-4.text-indigo-900.font-medium:hover {
    background-color: rgba(243, 244, 246, 0.5);
}

/* Mobile menu toggle icon styles */
.h-5.w-5.text-gray-600 {
    transition: transform 0.2s ease;
}

.bg-red-600.p-1 {
    border-radius: 0.25rem;
}

/* Search modal styles */
.fixed.inset-0.z-\[100\].overflow-y-auto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed.inset-0.bg-black.bg-opacity-50 {
    backdrop-filter: blur(2px);
}

.relative.bg-white.rounded-lg.overflow-hidden.shadow-xl.transform.transition-all.w-full.mx-4.px-4.pt-5.pb-4.sm\:mx-0.sm\:max-w-3xl.sm\:p-6.z-\[110\] {
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Transition utilities for Alpine.js */
.transition-opacity {
    transition-property: opacity;
}

.transition-transform {
    transition-property: transform;
}

.duration-75 {
    transition-duration: 75ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
    --tw-translate-x: -100%;
}

.translate-x-0 {
    --tw-translate-x: 0px;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
}

.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}