/** Search Engine Functionality **/

      
.modal-hidden, .footer-modal-hidden{
display: none;
}

#custom-salon-search-form, #footer-salon-search-form {
    display: flex; /* This will align the elements inline */
}

#search-query, #footer-search-query {
    width: 293px;
    height: 40px;
    border-radius: 0px;
    border: 1px solid #ccc; /* Adjust border color as needed */
    margin-right: -1px; /* This helps to remove any gap between the input and the button */
    /* If there's padding or border, adjust the box-sizing */
    box-sizing: border-box; /* This makes sure padding and borders are included in the width */
}

#search-button, #footer-search-button {
    background-color: #e3b8a1;
    height: 40px; /* Adjust for the border of the input if needed */
    border-radius: 0px;
    border: none; /* Remove the border or set it as needed */
    /* Align the text inside the button */
    display: flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
    /* Adjust padding as needed */
    padding: 0 15px; /* This will affect the width, so adjust accordingly */
    box-sizing: border-box; /* This makes sure padding is included in the width */
}

 #search-button:hover, #footer-search-button:hover {
background-color: white; /* Set the icon color to black */
}
 #search-button i,  #footer-search-button i {
    font-size: 15px; /* Set the font size to 15px */
    color: black; /* Set the icon color to black */
}

.custom-search-modal, .footer-search-modal {
    background-color: #fff; /* Change as needed */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for the modal */
    width: 100%; /* Full width - adjust as needed for your layout */
    max-width: 100%; /* Maximum width of the modal */
    padding: 0px; /* Padding around the content */
}

.modal-header, .footer-modal-header {
    display: flex;
    justify-content: space-between; /* Space between the title and arrows */
    align-items: center; /* Align items vertically */
    margin-bottom: 20px; /* Space below the header */
    padding: 15px;
    background-color: black;
    color: white;
    text-transform: capitalize;
}
 
.result-count, .footer-result-count {
    font-size: 15px; /* Large font size for result count */
    font-weight: bold; /* Make the font bold */
}

.nav-arrows, .footer-nav-arrows {
    display: flex;
}

.nav-arrows button, .footer-nav-arrows button {
    background: none; /* Add border to the buttons */
    padding: 5px 10px; /* Padding inside the buttons */
    cursor: pointer; /* Change mouse cursor on hover */
    border: solid 1px white;
    margin-left: 5px;
	border-radius: 0px !important;
}

.nav-arrows button:hover, .footer-nav-arrows button:hover {
    background-color: #e3b8a1; /* Change background on hover */
}

.custom-search-results h5, .footer-custom-search-results h5 {
    display: flex;
    align-items: center; /* Align the text and image vertically */
    border-bottom: 1px solid #eee; /* Separator line */
    padding: 10px 0; /* Space above and below each item */
    margin-left: 20px
    font-size: 17px;
}

.custom-search-results h3 img, .footer-custom-search-results h3 img {
    margin-right: 10px; /* Space between image and text */
    width: 50px; /* Thumbnail size */
    height: auto; /* Maintain aspect ratio */
    border-bottom: 1px;
    border-bottom-color: black;
}

.custom-search-results h3 a, .footer-custom-search-results h3 a {
    text-decoration: none; /* No underline on links */
    color: #000; /* Link color */
}

.custom-search-results h3 a:hover, .footer-custom-search-results h3 a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Add classes for mediatheek, product, and event if needed */
.se-mediatheek, .se-product, .se-event {
 border-bottom: 1px solid #d3d3d3;	
 padding-left: 10px  !important;
 font-size: 15px !important;
 text-transform: uppercase;
}

/* Styles for 'Bekijk alle resultaten' button */
.view-all-results, .footer-view-all-results {
    display: block;
    text-align: center; /* Center the text */
    margin-top: 20px; /* Space above the button */
    padding: 10px;
    background-color: #000; /* Background color */
    color: #fff; /* Text color */
    text-decoration: none; /* No underline */
    border: none;
    cursor: pointer;
}
	
.loader, .footer-loader {
    border: 5px solid #f3f3f3; /* Light grey background */
    border-top: 5px solid #e3b8a1; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin-left: 2%;
    margin-top: 15px;
}

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



   
.modal-footer, .footer-modal-footer {
       width: 100%;
       background-color: black;
}

.view-all-results:hover, .footer-view-all-results:hover {
    background-color: #333; /* Darker background on hover */
}

#custom-salon-search, #footer-salon-search {
    position: relative; /* Establishes a positioning context */
}

#search-results-modal, #footer-search-results-modal { /* Start off hidden */
    position: absolute;
    top: 100%; /* Align top of modal with bottom of the search bar */
    left: 50;
    width: 100%; /* Match the width of the search bar */
    z-index: 10; /* Make sure the modal appears on top of other content */
    /* Add other styling as needed */
}

.modal-visible, .footer-modal-visible {
    display: block !important; /* Show the modal */
}    
        

/** Search Engine Styling Only **/

#searchnew input#search-query, #ftr-searchnew input#footer-search-query { font-family: "DINPro Light", Sans-serif; color: #000; border-color: #fff; border-width: 2px; border-radius: 0px; transition: all 0.5s ease; }
#searchnew input#search-query::placeholder, #ftr-searchnew input#footer-search-query::placeholder { color: #000; opacity: 1; }

#searchnew input#search-query, #ftr-searchnew input#footer-search-query { background-color: #fff;  background: linear-gradient(-45deg, #FFFFFF, #f7ece6, #f1d8ca); background-size: 400% 400%; animation: headersearch2 1.5s infinite; animation-delay: 0s; }
#searchnew input#search-query:hover, #searchnew input#search-query:active, #ftr-searchnew input#footer-search-query:hover, #ftr-searchnew input#footer-search-query:active { background-position: 100% 50% !important; transition: all 0.5s ease; }

@keyframes headersearch2 {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 0%; }
}

#searchnew #search-results-modal, #ftr-searchnew #footer-search-results-modal { top: 53px !important; }
#searchnew #loading-indicator, #ftr-searchnew #footer-loading-indicator { position: absolute; top: 36px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; }
#searchnew .view-all-results, #ftr-searchnew .footer-view-all-results { margin-top: 0px; font-size: 13px; font-weight: 700; padding: 15px 15px 14px 15px; line-height: 1.5em; }
#searchnew .view-all-results:hover, #ftr-searchnew .footer-view-all-results:hover { background: none; color: #E3B8A1; }
#searchnew .custom-search-results h5, #ftr-searchnew .footer-custom-search-results h5 { margin: 0px; transition: all 0.3s ease; color: #000; padding: 10px 16px !important; position: relative; cursor: pointer; }
#searchnew .custom-search-results h5:hover, #ftr-searchnew .footer-custom-search-results h5:hover { background: #E3B8A1; }
#searchnew .custom-search-results h5 a, #ftr-searchnew .footer-custom-search-results h5 a { color: #000; line-height: 1.4em; hyphens: none !important; }
#searchnew .custom-search-results h5 a:hover, #ftr-searchnew .footer-custom-search-results h5 a:hover { color: #000; }
#searchnew .modal-header, #ftr-searchnew .footer-modal-header { margin-bottom: 0px; }
#searchnew .elementor-shortcode, #ftr-searchnew .elementor-shortcode { position: relative; }
#searchnew .result-count, #ftr-searchnew .footer-result-count { text-transform: uppercase; font-size: 14px; font-weight: 700; }

#searchnew .se-mediatheek, #searchnew .se-product, #searchnew .se-event, #searchnew .se-course, #ftr-searchnew .se-mediatheek, #ftr-searchnew .se-product, #ftr-searchnew .se-event, #ftr-searchnew .se-course { font-size: 15px !important; text-transform: uppercase !important; }

#searchnew .nav-arrows button.left-arrow:hover, #searchnew .nav-arrows button.right-arrow:hover, #ftr-searchnew .footer-nav-arrows button.footer-left-arrow:hover, #ftr-searchnew .footer-nav-arrows button.footer-right-arrow:hover { border-color: #E3B8A1 !important; }
#searchnew .nav-arrows button.left-arrow, #ftr-searchnew .footer-nav-arrows button.footer-left-arrow { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/se-arrow-left-small.png') no-repeat center center; width: 26px; height: 26px; }
#searchnew .nav-arrows button.right-arrow, #ftr-searchnew .footer-nav-arrows button.footer-right-arrow { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/se-arrow-right-small.png') no-repeat center center; width: 26px; height: 26px; }

#searchnew h5 span::before, #ftr-searchnew h5 span::before { z-index: 1; content: ''; background: #000; width: 44px; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0.1; }
#searchnew h5 span, #ftr-searchnew h5 span { display: block; width: 18px !important; height: 18px !important; background-size: cover; margin-right: 26px; z-index: 2; margin-left: -3px; }

#searchnew h5.se-mediatheek span, #ftr-searchnew h5.se-mediatheek span { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/icon-se-mediatheek.png') no-repeat center center; background-size: cover; width: 24px; height: 19px; }
#searchnew h5.se-product span, #ftr-searchnew h5.se-product span { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/icon-se-webshop.png') no-repeat center center; background-size: cover; }
#searchnew h5.se-event span, #ftr-searchnew h5.se-event span { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/icon-se-trainingen.png') no-repeat center center; background-size: cover; }
#searchnew h5.se-course span, #ftr-searchnew h5.se-course span { background: url('https://login.dermaesthetics.nl/wp-content/themes/kava-child/images/icon-se-courses.png') no-repeat center center; background-size: cover; width: 16px; height: 16px; }
#ftr-searchnew h5.se-mediatheek span { width: 18px; height: 18px; }

#ftr-searchnew { width: 100%; max-width: 100%; }
#ftr-searchnew input#search-query { width: 100%; }
#ftr-searchnew button#footer-search-button { margin-left: 0px; }
#ftr-searchnew #search-results-modal { bottom: 53px !important; }
#footer-search-results-modal { bottom: 20px; }
#footer-search-query { width: 100%; }
#ftr-searchnew #footer-search-results-modal { bottom: 53px !important; top: auto !important; }
#footer-loading-indicator { top: auto !important; bottom: 56px !important; }