/* Mobile responsive fixes for search filter */

#search-container h1 {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    padding: 0;
}

@media screen and (max-width: 1024px) {
    #search-container h1 {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    #search-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #search-container * {
        max-width: 100%;
        box-sizing: border-box;
    }

    #search-container .search-keyword-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #search-container #search-keyword {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Search keyword placeholder ellipsis fixes */
.search-suggestion .input-container .search-keyword-placeholder {
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;

    p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .search-suggestion {
        .input-container {
            .search-keyword-placeholder {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                p {
                    margin: 0;
                    max-width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

/* Search box mobile responsive fixes */
#search-container.template-1 {
    @media screen and (max-width: 768px) {
        .d-flex {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .search_box {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        .search_field {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .icon-search {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .input-container {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        .search-keyword-placeholder {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box;
            flex: 1;
            text-overflow: ellipsis;

            p {
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
        }

        #search-keyword {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box;
        }
    }

    .dropdown_box {
        @media screen and (max-width: 1024px) {
            flex-direction: column;
        }
    }
}

/* Dropdown box flex-wrap for mobile */
.search-filter > div.dropdown_box {
    @media screen and (max-width: 768px) {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        
        > * {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .d-flex {
            width: 100%;
            flex: 1 1 100%;
        }
    }
}

/* Consistent breakpoint update */
@media screen and (max-width: 1024px) { 
    #search-container .search-filter .search_field .input, 
    #search-container .search_field .search_box {
        max-width: 800px;
    }
}

#search-container.template-1 {
    .button[type="submit"] {
        top: 3px;
    }
}

#search-container.template-1 .search-filter .search_field .input:focus-visible {
    border: 2px solid rgb(from var(--brand-color-primary-acf) r g b / 0.3);
}

.search-actions-divider {
    margin: 0;
}

@media screen and (min-width: 1025px) {
    .search-actions-divider {
        display: none;
    }
}

#search-container .search-filter > div.dropdown_box {
    margin-top: 0 !important;
}

@media screen and (max-width: 1024px) {
    #search-container .search-filter {
        &:has(.ai-search-button) {
            padding-bottom: 16px;
        }
    }
}

.one_line_simple .search-suggestion .token.remaining {
    position: absolute;
    right: auto;
    float: right;
    width: 47px;
    bottom: unset;
}

@media screen and (min-width: 1025px) {
    .one_line_simple .search-suggestion .token.remaining {
        right: -46px;
    }
}