/* Slide Left Slo-mo Styles */
.jo-smart-search.slide-left-slo-mo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.jo-smart-search.slide-left-slo-mo .jo-search-form {
    position: absolute;
    right: 100%; /* Start off-screen to the left */
    transform: translateX(100%); /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    transition: all 1.1s cubic-bezier(0.65, 0.05, 0.36, 1); /* Custom easing for crawling */
    z-index: 1000;
    width: 0; /* Start with no width */
    white-space: nowrap; /* Prevent text wrapping */
}

.jo-smart-search.slide-left-slo-mo .jo-search-form.active {
    right: calc(100% + 10px); /* Move fully to the left of the icon */
    transform: translateX(0); /* Reveal the input */
    opacity: 1;
    visibility: visible;
    width: 220px; /* Final width */
}

.jo-smart-search.slide-left-slo-mo .jo-search-input-wrapper {
    padding: 0;
}

.jo-smart-search.slide-left-slo-mo .js-finder-search-query {
    flex-grow: 1;
    border: none;
    outline: none;
    margin-right: 8px;
    font-size: 16px;
    transition: width 2s cubic-bezier(0.65, 0.05, 0.36, 1); /* Custom easing for crawling */
}

.jo-smart-search.slide-left-slo-mo .jo-search-submit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #007bff; /* Bootstrap primary blue */
    padding: 0;
    transition: color 2s ease-in-out; /* Slow hover effect */
}

.jo-smart-search.slide-left-slo-mo .jo-search-submit:hover {
    color: #0056b3; /* Darker blue on hover */
}