/* Laravel Search Bar CSS v2.1 - Updated: 2024-12-26 */
/* This should match the Laravel header-1.blade.php styling exactly */

/* Laravel Search Bar Container */
.laravel-search-bar-container,
div.laravel-search-bar-container,
.elementor-widget-laravel_search_bar .laravel-search-bar-container {
    position: relative !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Laravel Search Bar Form */
.laravel-search-bar,
form.laravel-search-bar,
.elementor-widget-laravel_search_bar .laravel-search-bar {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Laravel Search Input */
.laravel-search-bar .laravel-search-input,
.laravel-search-input,
input.laravel-search-input,
.elementor-widget-laravel_search_bar .laravel-search-input,
.elementor-widget-laravel_search_bar input[name="productname"] {
    flex: 1 !important;
    padding: 8px 55px 8px 45px !important;
    border: 1px solid #ddd !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    transition: border-color 0.3s ease !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 16px 16px !important;
}

.laravel-search-bar .laravel-search-input:focus,
.laravel-search-input:focus {
    outline: none !important;
    border-color: #0073aa !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230073aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
}

/* Laravel Search Button */
.laravel-search-bar .laravel-search-button,
.laravel-search-button,
button.laravel-search-button,
.elementor-widget-laravel_search_bar .laravel-search-button,
.elementor-widget-laravel_search_bar button[type="submit"] {
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    bottom: 1px !important;
    transform: none !important;
    padding: 0 15px !important;
    background-color: #23282d !important;
    color: white !important;
    border: none !important;
    border-radius: 0 24px 24px 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    z-index: 2 !important;
}

.laravel-search-bar .laravel-search-button:hover,
.laravel-search-button:hover {
    background-color: #32373c !important;
    color: #ccc !important; /* Grey text on hover */
}

.laravel-search-loading {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.laravel-search-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073e6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.laravel-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.laravel-search-results .result-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.laravel-search-results .result-item:last-child {
    border-bottom: none;
}

.laravel-search-results .result-item:hover {
    background-color: #f5f5f5;
}

.laravel-search-results .result-item .title {
    font-weight: bold;
    margin-bottom: 5px;
}

.laravel-search-results .result-item .description {
    font-size: 14px;
    color: #666;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile responsive styles - WordPress header layout */
@media (max-width: 768px) {
    /* Force any header containers to stack vertically on mobile */
    .main-header .container,
    .header .container,
    header .container,
    .site-header .container,
    .elementor-container,
    .elementor-row {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Force Elementor columns to stack vertically */
    .elementor-section .elementor-container .elementor-column,
    .elementor-row .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }



    /* Logo on first line - centered */
    .main-header .logo,
    .header .logo,
    header .logo,
    .site-header .logo,
    .logo,
    .elementor-widget-theme-site-logo,
    .elementor-widget-image,
    .site-branding,
    .custom-logo-link {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        display: block !important;
        justify-content: center !important;
    }

    /* Force logo images to center */
    .logo img,
    .custom-logo,
    .site-logo,
    .elementor-widget-image img,
    .elementor-widget-theme-site-logo img {
        margin: 0 auto !important;
        display: block !important;
    }

    /* Search bar on second line - full width with high specificity */
    .laravel-search-bar-container,
    div.laravel-search-bar-container,
    .elementor-widget-laravel_search_bar .laravel-search-bar-container,
    .widget .laravel-search-bar-container,
    body .laravel-search-bar-container,
    .elementor-widget-laravel_search_bar_v2 .laravel-search-bar-container {
        order: 2 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 15px !important;
        margin: 10px 0 !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .laravel-search-bar,
    form.laravel-search-bar,
    .elementor-widget-laravel_search_bar .laravel-search-bar {
        flex-direction: row !important; /* Ensures input and button stay on one line */
        width: 100% !important;
    }

    .laravel-search-bar .laravel-search-input,
    .laravel-search-input,
    input.laravel-search-input,
    .elementor-widget-laravel_search_bar .laravel-search-input,
    .elementor-widget-laravel_search_bar input[name="productname"] {
        font-size: 14px !important;
        height: 36px !important;
        padding: 6px 50px 6px 35px !important;
        background-size: 14px 14px !important;
        background-position: 12px center !important;
    }

    .laravel-search-bar .laravel-search-button,
    .laravel-search-button,
    button.laravel-search-button,
    .elementor-widget-laravel_search_bar .laravel-search-button,
    .elementor-widget-laravel_search_bar button[type="submit"] {
        min-width: 45px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 0 22px 22px 0 !important;
    }

    /* Icons (signin/cart) on third line */
    .main-header .icon-links,
    .header .icon-links,
    header .icon-links,
    .site-header .icon-links,
    .icon-links,
    .header-icons {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: 0 !important;
        display: flex !important;
        gap: 20px !important;
        align-items: center !important;
    }


}

/* Extra small devices (mobile phones, 576px and down) */
@media (max-width: 576px) {
    .laravel-search-bar-container,
    div.laravel-search-bar-container,
    .elementor-widget-laravel_search_bar .laravel-search-bar-container {
        padding: 0 10px !important;
    }

    .laravel-search-bar,
    form.laravel-search-bar,
    .elementor-widget-laravel_search_bar .laravel-search-bar {
        flex-direction: row !important; /* Ensures input and button stay on one line */
        width: 100% !important;
    }

    .laravel-search-bar .laravel-search-input,
    .laravel-search-input,
    input.laravel-search-input,
    .elementor-widget-laravel_search_bar .laravel-search-input,
    .elementor-widget-laravel_search_bar input[name="productname"] {
        font-size: 0.8rem !important;
        height: 32px !important;
        padding: 4px 45px 4px 28px !important;
        background-size: 12px 12px !important;
        background-position: 10px center !important;
        border-radius: 20px !important;
    }

    .laravel-search-bar .laravel-search-button,
    .laravel-search-button,
    button.laravel-search-button,
    .elementor-widget-laravel_search_bar .laravel-search-button,
    .elementor-widget-laravel_search_bar button[type="submit"] {
        min-width: 40px !important;
        padding: 0 10px !important;
        font-size: 0.8rem !important;
        border-radius: 0 19px 19px 0 !important;
    }
}

/* Additional mobile styling for better layout control */
@media (max-width: 768px) {
    /* Ensure search bar is centered and has proper width */
    .elementor-widget-laravel_search_bar_v2 .laravel-search-bar,
    .elementor-widget-laravel_search_bar_v2 .laravel-search-bar-container {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
    }
    
    .elementor-widget-laravel_search_bar_v2 .laravel-search-bar {
        display: flex !important;
        justify-content: center !important;
    }

    /* Additional logo centering for Elementor */
    .elementor-column .elementor-widget-image,
    .elementor-column .elementor-widget-theme-site-logo,
    .elementor-column .elementor-widget-wp-widget-media_image {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .elementor-widget-image .elementor-widget-container,
    .elementor-widget-theme-site-logo .elementor-widget-container {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }




}