/**
 * Location Search Form - Minimal CSS (Using Tailwind Classes)
 */

/* GLIZWP Location Search Form - Enhanced Modern Styles */

/* Custom location dropdown styling */
.location-select {
    appearance: none;
    cursor: pointer;
}

.location-dropdown-btn:hover {
    opacity: 0.8;
}

/* Guest dropdown animations */
.guest-dropdown {
    transition: all 0.2s ease-in-out;
    transform-origin: top;
    z-index: 1000;
}

/* Ensure guest dropdown shows properly in expanded search */
.glizwp-search-expanded .guest-dropdown,
.glizwp-search-expanded .location-search-guest-dropdown {
    z-index: 1001 !important;
    position: absolute !important;
}

/* Guest field container needs relative positioning for dropdown */
.glizwp-search-expanded .guest-field {
    position: relative !important;
    overflow: visible !important;
}

.guest-dropdown[style*="display: none"] {
    transform: scaleY(0);
    opacity: 0;
}

.guest-dropdown[style*="display: block"] {
    transform: scaleY(1);
    opacity: 1;
}

/* Arrow rotation animation */
.guest-dropdown-arrow {
    transition: transform 0.2s ease-in-out;
}

.guest-dropdown-arrow.rotate-180 {
    transform: rotate(180deg);
}

/* Enhanced hover effects for form sections */
.glizwp-location-search .flex-1:hover {
    background-color: rgba(243, 244, 246, 0.5) !important;
}

/* Focus states */
.glizwp-location-search input:focus,
.glizwp-location-search select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Enhanced button hover and focus effects */
.search-submit:hover {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
}

.search-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Loading state */
.search-submit.loading {
    pointer-events: none;
    opacity: 0.7;
}

.search-submit.loading svg {
    animation: spin 1s linear infinite;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .glizwp-location-search .rounded-full {
        border-radius: 1rem !important;
    }

    .mobile-search-text {
        /*  display: none !important; */
    }



    .glizwp-search-collapsed button svg {
        margin-right: 0rem !important;
    }

    .glizwp-location-search .md\\:rounded-l-full {
        border-radius: 1rem 1rem 0 0 !important;
    }

    .glizwp-location-search .flex-1:last-of-type {
        border-radius: 0 0 1rem 1rem !important;
    }
}

/* Spin animation for loading states */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Collapsible Search Form Styles */
.glizwp-collapsible-search-wrapper {
    position: relative;
}

.glizwp-search-collapsed {
    transition: all 0.3s ease-in-out;
}

.glizwp-search-expanded {
    animation: expandDown 0.3s ease-out;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.glizwp-search-expanded.hidden {
    animation: collapseUp 0.3s ease-in;
}

/* Smooth expand/collapse animations */
@keyframes expandDown {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes collapseUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* Enhanced search trigger button */
#glizwp-search-trigger {
    transition: all 0.3s ease;
}

#glizwp-search-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#glizwp-search-trigger:hover svg {
    transform: scale(1.1);
    color: #6B7280;
}



/* Better mobile spacing for collapsible form */
@media (max-width: 1024px) {
    .glizwp-search-expanded {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        width: 100vw !important;
        height: 100vh !important;
        position: fixed !important;
        padding: 1rem !important;
        overflow-y: visible !important;
        z-index: 9999 !important;
    }

    .glizwp-search-expanded .style-collapsible-expanded {
        margin-top: 0;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .glizwp-search-expanded .bg-white.rounded-none.md\\:rounded-full {
        border-radius: 1rem !important;
        flex-direction: column !important;
        padding: 1rem !important;
    }

    .glizwp-search-expanded .flex-1 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        /* padding: 1rem !important; */
        border-radius: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .glizwp-search-expanded .flex-1:last-of-type {
        border-bottom: none !important;
        margin-bottom: 1rem !important;
    }

    .glizwp-collapsible-search-wrapper {
        position: relative;
    }

    /* Mobile collapsed search button adjustments */
    .glizwp-search-collapsed button {
        /* 40px height for better touch target */
    }

    .glizwp-search-collapsed button svg {
        margin-right: 0.5rem;
    }

    .glizwp-search-collapsed {
        width: auto;
        min-width: auto;
    }

    /* Mobile header search wrapper */
    .glizwp-collapsible-search-wrapper {
        max-width: 120px;
    }


}

/* Desktop-specific styles */
@media (min-width: 1024px) {
    .glizwp-search-expanded {
        position: fixed !important;
        top: 100px;
        /* Position below header */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 4rem) !important;
        /* Full viewport width minus padding */
        max-width: 1200px !important;
        /* Max container width */
        height: auto !important;
        margin-top: 0 !important;
        z-index: 50 !important;
        box-shadow: 7px 10px 18px -12px rgba(0, 0, 0, 0.25) !important;
        overflow: visible !important;
        border-radius: 1rem !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
    }

    /* Reset mobile constraints on desktop */
    .glizwp-collapsible-search-wrapper {
        max-width: none;
        width: 100%;
    }

    .glizwp-search-collapsed button {
        font-size: 0.875rem;
        padding: 1rem 1.5rem;
        max-width: none;
        width: 100%;
    }

    /* Ensure expanded form takes full width of container */
    .glizwp-search-expanded .style-collapsible-expanded {
        width: 100% !important;
    }
}

/* Mobile-specific wrapper constraints */
@media (max-width: 1023px) {
    .glizwp-collapsible-search-wrapper {
        flex-shrink: 0;
        width: auto;
        max-width: 100px;
    }
}