/* Container & Input */
.custom-search-container {
    position:  relative;
    max-width: 100%;
    width:     480px;
}

.search-input-wrapper {
    position:    relative;
    display:     flex;
    align-items: center;
}

#custom-search-input {
    width:         100%;
    padding:       12px 0;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    color:         #FFFFFF !important; /* Wijzig naar donker indien nodig */
    font-size:     18px;
    outline:       none;
    border-radius: 0;
}

#custom-search-input:focus-visible {
    box-shadow:     none;
    outline:        2px solid #1a66ff;
    outline-offset: 2px;
    /*border-radius: 16px;*/
}

#custom-search-input::placeholder {
    color: #FFFFFF; /* Wijzig naar donker indien nodig */
}

.scrolled #custom-search-input {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color:         #444444 !important;
}

.scrolled #custom-search-input::placeholder {
    color: #444444;
}

#custom-search-close {
    position:   absolute;
    right:      0;
    background: none;
    border:     none;
    color:      #FFFFFF;
    cursor:     pointer;
    padding:    0;
}

@media screen and (max-width: 767px) {
    #custom-search-close {
        right: 0;
    }
}

div#search-default-state {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

/* Dropdown styling */
#custom-search-dropdown {
    position:      absolute;
    top:           100%;
    right:         0;
    width:         100%;
    background:    #FFFFFF;
    box-shadow:    0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding:       20px;
    z-index:       9999;
    margin-top:    10px;
    color:         #333333;

    /*max-height: 80vh;*/
    max-height:    calc(100vh - 150px);
    @media only screen and (max-width: 479px) {
        max-height: calc(100vh - 200px);
        right:      unset;
        left:       0;
        min-width:  calc(100vw - 48px);
    }
    height:        auto;
    overflow:      scroll;
}

.scrolled #custom-search-dropdown {
    max-height: calc(100vh - 85px);
    @media only screen and (max-width: 479px) {

        max-height: calc(100vh - 185px);
    }
}


/* Verbergen class */
.hidden {
    display: none !important;
}

/* Secties in de dropdown */

.search-section h3 {
    margin-top:     0;
    margin-bottom:  0;
    padding-bottom: 0;
}

.search-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.search-list li {
    margin-bottom: 10px;
}

/* Individuele zoekresultaten */
.search-result-item,
.search-view-all a {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    color:           #444444 !important;
    transition:      background 0.2s;
    width:           max-content;
    @media only screen and (max-width: 479px) {
        width: auto;
    }
    gap:             16px;
    position:        relative;
    font-weight:     500 !important;
}

.search-result-item:not(.catalog-link):after,
.search-view-all a:after {
    content:       "";
    display:       block;
    width:         calc(100% + 16px);
    height:        calc(100% + 8px);
    position:      absolute;
    top:           -4px;
    left:          -8px;
    background:    rgba(0, 0, 0, 0.08);
    z-index:       -1;
    border-radius: 8px;
    opacity:       0;
    transition:    opacity 0.2s;
}

.search-result-item:not(.catalog-link):hover:after,
.search-view-all a:hover:after {
    opacity:    1;
    transition: opacity 0.2s;
}

.search-section,
div#recent-searches-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

div#search-results-state {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.search-image-wrapper {
    width:           48px;
    min-width:       48px;
    max-width:       48px;
    height:          48px;
    min-height:      48px;
    max-height:      48px;
    display:         flex;
    justify-content: center;
    align-items:     center;

    border-radius:   3px;
    border:          1px solid rgba(0, 0, 0, 0.08);
    background:      #FFFFFF;
}

.search-image-wrapper img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}

.search-result-title {
    font-size:   14px;
    font-weight: 500;
}

/* Berichten & Links */
.search-msg {
    font-size: 14px;
    color:     #666666;
    margin:    0 !important;
}

.search-view-all {
    text-align:  left;
    margin-top:  15px;
    padding-top: 15px;
    border-top:  1px solid #EEEEEE;
}

.search-view-all a {
    color:           #333333;
    text-decoration: none;
    font-size:       13px;
    font-weight:     bold;
}

/* Voorkom het verspringen (layout shift / text jitter) in Safari tijdens hovers */
.search-result-item {
    -webkit-transform:           translateZ(0);
    transform:                   translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
    -webkit-font-smoothing:      antialiased;
}

/* Zorg dat de SVG-iconen geen onverwachte sub-pixel ruimte innemen in Safari */
.search-custom-icon svg {
    display:   block;
    max-width: 100%;
}


/* Toevoegen aan search-results.css */

/* Highlight van het actieve zoekresultaat bij Tab / pijltjes */
#custom-search-dropdown .search-result-item:focus-visible,
#custom-search-dropdown .search-view-all a:focus-visible {
    background-color: #f2f2f2; /* pas aan naar huisstijl */
    outline:          2px solid currentColor;
    outline-offset:   -2px; /* binnen het item, valt niet buiten de dropdown */
    border-radius:    4px;
}

/* Zelfde highlight bij hover, zodat muis en toetsenbord consistent zijn */
#custom-search-dropdown .search-result-item:hover {
    /*background-color: #f2f2f2;*/
}

/* Kruisje ook zichtbaar bij toetsenbordfocus */
#custom-search-close:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}


html body.show-custom-newsbanner.search-opened header .search-function {
    transform: translateY(-32px) !important;
}

html body.scrolled.show-custom-newsbanner.search-opened header .search-function {
    transform: translateY(23px) !important;
}

#custom-search-input:focus-visible {
    outline: 2px solid #1a66ff !important;
    outline-offset: 2px;
    box-shadow: none;
}

#custom-search-input.is-pointer-focus:focus {
    outline: none !important;
}

html body.search-opened header .search-function .close-search-trigger{
    position: relative !important;
}