/* Lightweight Custom Search Styles */

.gio-custom-search-wrapper {
    /* Default hidden state for the template */
    display: none;
}

/* Inline Mode Styles (Active) */
.gio-custom-search-wrapper.gio-inline-mode {
    display: block;
    position: relative;
    /* Relative to flow in the header */
    width: auto;
    /* Let flexbox or container decide width */
    min-width: 250px;
    background: transparent;
    padding: 0 10px;
    box-shadow: none;
    border-radius: 4px;
    z-index: 100;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.gio-custom-search-form {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 20px;
    /* Rounded pill shape */
    background: #fff;
    overflow: hidden;
    height: 40px;
    /* Comfortable height */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for depth */
}

.gio-custom-search-form {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

.gio-custom-search-form input[type="search"] {
    border: none;
    padding: 8px 12px;
    width: 100%;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
}

.gio-custom-search-form button {
    background: transparent;
    border: none;
    padding: 0 15px;
    /* Increase horizontal padding */
    cursor: pointer;
    color: var(--theme-palette-color-1, #333);
    height: 100%;
    /* Full height of container */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.gio-custom-search-form button svg {
    width: 18px;
    /* Slightly larger icon */
    height: 18px;
    transition: all 0.2s ease;
}

.gio-custom-search-form button:hover {
    background-color: var(--theme-palette-color-2, #e91e63);
    color: #fff;
    /* White icon on hover */
}