/* Alpine.js x-cloak directive - hides elements until Alpine.js is loaded */
[x-cloak] { 
    display: none !important; 
}

/* Additional specificity for dropdown elements that might flash */
.backdrop[x-cloak],
div[x-show="open"][x-cloak] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure category dropdowns are hidden before Alpine.js loads */
.relative.inline-block[x-cloak] {
    visibility: visible !important;
}

.relative.inline-block[x-cloak] .backdrop,
.relative.inline-block[x-cloak] div[x-show="open"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}