/**
 * CSS for Vloerplus Enhanced Search v1.3.0
 * Includes styles for Header Search Toggle
 */

/* Live Search Results Popup */

.vloerplus-live-search-results {
    position: absolute;
    /* Positionering nu via JS */
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 10px 2.5rem rgba(0, 21, 57, 0.1);
    z-index: 10000;
    display: none;
    /* Verborgen standaard */
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
}
/* Search Overlay (Voor live results) */

.vloerplus-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 21, 57, 0.15);
    z-index: 9999;
    /* Onder live results */
    display: none;
}
/* --- Header Search Form Toggle --- */

/* Container voor het formulier dat uitklapt */

.header-search-form-container {
    display: none;
    /* Verborgen standaard */
    position: absolute;
    top: 100%;
    /* Direct onder de .main-header */
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 21, 57, 0.1);
    z-index: 10001;
    /* Boven de overlay */
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
/* Zichtbare staat wanneer header .search-active heeft */

#masthead.search-active .header-search-form-container {
    display: block;
}
/* Styling binnen de container */

.header-search-form-container .search-form {
    max-width: 800px;
    /* Max breedte zoals live search */
    margin: 0 auto;
    /* Centreren */
    display: flex;
    align-items: center;
    position: relative;
    /* Nodig voor absolute positionering clear/loading */
}
.header-search-form-container .search-form label {
    flex-grow: 1;
    margin-bottom: 0;
    position: relative;
    /* Nodig voor clear knop */
}
.header-search-form-container .search-form input[type="search"].search-field {
    font-family: "aktiv-grotesk";
    width: 100%;
    padding: 0.938rem 3.125rem 0.938rem 1.25rem;
    /* Ruimte voor clear/loading? */
    border-radius: 2.5rem;
    border: 1.5px solid rgba(0, 21, 57, 0.15);
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #F5F5F7;
}
.header-search-form-container .search-form input[type="search"].search-field:focus {
    outline: none;
    border-color: #016FD0;
    box-shadow: 0 0 0 3px rgba(27, 108, 249, 0.1);
    background-color: #fff;
}
.header-search-form-container .search-form .search-submit {
    margin-left: 0.75rem;
    flex-shrink: 0;
    /* Inherit .cta-btn styles */
}
.header-search-form-container .search-form .search-clear {
    position: absolute;
    top: 50%;
    /* Pas right/left aan op basis van waar je het wilt */
    right: 100px;
    /* Afstand vanaf rechterkant input (naast submit knop?) */
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    display: none;
    /* Alleen tonen bij text */
    padding: 5px;
    font-size: 1.2rem;
    line-height: 1;
    z-index: 2;
    /* Boven input */
}
.header-search-form-container .search-form.has-text .search-clear {
    display: block;
}
.header-search-form-container .search-form .search-loading {
    position: absolute;
    top: 50%;
    /* Positioneer naast clear knop of submit knop */
    right: 70px;
    /* Voorbeeld positie */
    transform: translateY(-50%);
    display: none;
    width: 16px;
    /* Grootte van spinner */
    height: 16px;
    border: 2px solid rgba(0, 21, 57, 0.2);
    border-top-color: #016FD0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2;
}
.header-search-form-container .search-form.searching .search-loading {
    display: block;
}
.header-search-form-container .search-form .close-header-search {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0 0.5rem;
    margin-left: 0.75rem;
    cursor: pointer;
    order: 5;
    flex-shrink: 0;
}
.header-search-form-container .search-form .close-header-search:hover {
    color: #333;
}
/* Algemene Zoekformulier styling (ook voor search results pagina) */

.search-form {
    position: relative;
    /* Nodig voor child positioning */
}
/* Zorg dat .search-form in search.php header ook flex gebruikt */

.search-form-in-header .search-form, .search-form-in-no-results .search-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    /* Ruimte onder form */
}
.search-form-in-header .search-form label, .search-form-in-no-results .search-form label {
    flex-grow: 1;
    margin-bottom: 0;
}
.search-form input[type="search"].search-field {
    font-family: "aktiv-grotesk";
    width: 100%;
    padding: 0.938rem 3.125rem 0.938rem 1.25rem;
    border-radius: 2.5rem;
    border: 1.5px solid rgba(0, 21, 57, 0.15);
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #F5F5F7;
}
.search-form input[type="search"].search-field:focus {
    outline: none;
    border-color: #016FD0;
    box-shadow: 0 0 0 3px rgba(27, 108, 249, 0.1);
    background-color: #fff;
}
/* Submit knop op Search Results Pagina */

.search-form-in-header .search-form input[type="submit"], .search-form-in-no-results .search-form input[type="submit"] {
    background: #016FD0;
    border: 1px solid #016FD0;
    color: #fff;
    border-radius: 2.5rem;
    padding: 0.938rem 2rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    font-family: "aktiv-grotesk";
    cursor: pointer;
    transition: all 0.2s ease;
    height: auto;
    vertical-align: middle;
    margin-left: 0.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
}
.search-form-in-header .search-form input[type="submit"]:hover, .search-form-in-no-results .search-form input[type="submit"]:hover {
    color: #fff;
    background: #0E55D0;
    border-color: #0E55D0;
}
.search-form-in-header {
    max-width: 31rem;
}
/* Verberg standaard label tekst */

.search-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Live Search Results Styling */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(0, 21, 57, 0.15);
    font-size: 0.875rem;
    color: #001539;
}
.results-header .results-for {
    flex-grow: 1;
}
.results-header .query-term {
    font-weight: 600;
}
.view-all-results {
    color: #016FD0;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 1rem;
}
.view-all-results:hover {
    text-decoration: none;
    color: #001539;
}
/* Results Section */

.results-section {
    margin-bottom: 1.875rem;
}
.results-section:last-child {
    margin-bottom: 0;
}
.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.938rem;
    color: #001539;
}
.results-items {
    display: grid;
    /* Grid voor producten/posts in popup, pas aan indien nodig */
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: 0.938rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.pages-section .results-items {
    /* Pagina's als lijst */
    grid-template-columns: 1fr;
}
.result-item {
    background-color: #F5F5F7;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Minimal shadow, kan weg als te druk */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
}
.result-item:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); */
}
.result-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.result-image {
    width: 5rem;
    /* Kleiner voor popup */
    flex-shrink: 0;
    background-color: #e5e5e7;
    position: relative;
    /* Voor no-image span */
}
.result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.result-image .no-image {
    /* Placeholder als geen afbeelding */
    display: block;
    width: 100%;
    height: 100%;
    background-color: #eee;
    /* Lichte achtergrond */
    /* Optioneel: icoontje */
    /* background-image: url('...'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}
.result-content {
    padding: 0.75rem;
    /* Iets minder padding in popup */
    flex-grow: 1;
    overflow: hidden;
    /* Voorkom text overflow */
}
.result-content.full-width {
    width: 100%;
}
.result-title {
    font-size: 0.9rem;
    /* Iets kleiner */
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: #001539;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-price {
    font-weight: 700;
    color: #001539;
    font-size: 0.875rem;
    margin-bottom: 0.3rem;
}
.result-date {
    font-size: 0.8rem;
    color: #555;
    /* Iets donkerder grijs */
    margin-bottom: 0.3rem;
}
.result-excerpt {
    font-size: 0.85rem;
    color: #333;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Max 2 regels */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
/* No results message in popup */

.vloerplus-live-search-results .no-results {
    text-align: center;
    padding: 1.5rem 0;
}
.vloerplus-live-search-results .no-results p {
    margin: 0.313rem 0;
    color: #333;
    /* Donkerder dan #616161 */
}
.vloerplus-live-search-results .no-results p strong {
    color: #001539;
    /* Primaire tekstkleur */
}
/* --- Enhanced Search Results Page --- */

.search-result-container {
    padding: 2.5rem 0 5rem;
}
.search-result-container .page-header {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    /* Ruimte na filters */
}
.search-result-container .page-title {
    margin-bottom: 0.5rem;
    /* Minder marge */
}
.search-result-container .search-query {
    color: #016FD0;
}
.search-result-count {
    color: #001539;
    margin-bottom: 1.5rem;
    /* Ruimte voor zoekveld */
}
.search-filters {
    margin-top: 1.5rem;
    /* Ruimte boven filters */
    margin-bottom: 2rem;
    /* Ruimte onder filters / voor grid */
    padding-bottom: 0;
    border-bottom: none;
    /* Rand zit nu onder .page-header */
}
.search-type-filter {
    display: flex;
    gap: 0.938rem;
    flex-wrap: wrap;
}
.filter-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 2.5rem;
    cursor: pointer;
    color: #555;
    /* Iets donkerder */
    transition: all 0.2s ease;
    border: 1px solid #ddd;
    /* Subtiele rand */
}
.filter-btn:hover:not(.active) {
    background-color: #F5F5F7;
    color: #001539;
    border-color: #ccc;
}
.filter-btn.active {
    background-color: #016FD0;
    color: white;
    border-color: #016FD0;
}
.filter-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #eee;
    border-color: #eee;
    color: #999;
}
/* Search Results Grid on Page */

.search-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Standaard 1 kolom */
    gap: 1.5rem;
    /* Meer ruimte */
    margin-bottom: 2.5rem;
    /* Ruimte voor load more */
}
.search-result-item {
    background-color: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 21, 57, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.search-result-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 21, 57, 0.08);
}
.search-result-inner {
    display: flex;
}
/* Image styling on results page */

.search-result-image {
    width: 12.5rem;
    flex-shrink: 0;
    position: relative;
}
.search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-result-image .no-thumbnail {
    /* Placeholder div voor post/page */
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    /* Lichte placeholder kleur */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optioneel: icoon */
    /* color: #ccc; */
    /* font-size: 2rem; */
}
.sale-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background-color: #e74c3c;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.188rem 0.5rem;
    border-radius: 0.188rem;
}
/* Content styling on results page */

.search-result-content {
    padding: 1.5rem;
    /* Meer padding */
    flex-grow: 1;
}
.search-result-content.full-width {
    width: 100%;
}
.search-result-item .entry-title {
    font-size: 1.25rem;
    /* Iets groter */
    margin: 0 0 0.75rem;
}
.search-result-item .entry-title a {
    color: #001539;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.search-result-item .entry-title a:hover {
    color: #016FD0;
}
/* Product details */

.product-details {
    margin-top: 0.938rem;
}
.product-price {
    font-weight: 700;
    color: #001539;
    font-size: 1.25rem;
    /* Groter */
    margin-bottom: 0.75rem;
}
.product-categories {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.938rem;
}
.product-categories a {
    color: #555;
    text-decoration: none;
}
.product-categories a:hover {
    color: #016FD0;
    text-decoration: underline;
}
.product-excerpt {
    font-size: 0.938rem;
    color: #333;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
/* Post/Page details */

.entry-meta {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.938rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Wrap op kleine schermen */
    gap: 0.5rem 1rem;
    /* Row and column gap */
}
.post-date, .post-categories {
    display: flex;
    align-items: center;
    gap: 0.313rem;
}
.entry-meta svg {
    flex-shrink: 0;
    /* Voorkom krimpen icon */
    color: #888;
    /* Iets lichter icon */
}
.post-categories a {
    color: #555;
    text-decoration: none;
}
.post-categories a:hover {
    color: #016FD0;
    text-decoration: underline;
}
.entry-summary {
    /* Voor posts/pages */
    font-size: 0.938rem;
    color: #333;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.button-container {
    margin-top: 1rem;
    /* Ruimte boven knoppen */
}
/* Load More Button */

.load-more-button {
    display: block;
    /* Block ipv inline-block */
    width: fit-content;
    /* Breedte baseren op inhoud */
    margin: 2.5rem auto;
    /* Meer marge, centreren */
    padding: 0.8rem 2rem;
    /* Iets meer padding */
    font-size: 1rem;
    background-color: #016FD0;
    color: #fff;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}
.load-more-button:hover {
    background-color: #0E55D0;
    /* Donkerder blauw uit vloerplus-site */
    color: #fff;
}
.load-more-button:disabled {
    background-color: #a0c7ff;
    /* Lichtere kleur indien disabled */
    cursor: wait;
}
/* No Results Styling on Page */

.no-results {
    padding: 3rem 0;
}
.no-results .page-header {
    border-bottom: none;
    /* Geen lijn onder header */
    margin-bottom: 1rem;
}
.no-results-content {
    padding: 3.125rem 0;
    text-align: center;
}
.no-results-icon {
    margin-bottom: 1.5rem;
    color: #ccc;
    /* Lichter grijs icon */
}
.no-results-content h2 {
    margin-bottom: 1rem;
    color: #001539;
}
.search-suggestions {
    margin: 1.875rem auto;
    /* Centreren */
    text-align: left;
    max-width: 500px;
}
.search-suggestions ul {
    margin-left: 1.25rem;
    list-style: disc;
    /* Standaard bolletjes */
}
.popular-products {
    margin-top: 3rem;
    /* Meer ruimte */
    text-align: left;
    /* Align links */
    max-width: 800px;
    /* Beperk breedte */
    margin-left: auto;
    margin-right: auto;
}
.popular-products h3 {
    margin-bottom: 1.5rem;
    text-align: center;
    /* Titel wel centreren */
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    gap: 1.5rem;
    /* Meer ruimte */
    margin-top: 1.5rem;
}
.product-card {
    background-color: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 21, 57, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 21, 57, 0.08);
}
.product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.product-image {
    height: 12.5rem;
    overflow: hidden;
    background-color: #f0f0f0;
    /* Placeholder kleur */
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card h4 {
    padding: 0.938rem 0.938rem 0.625rem;
    margin: 0;
    font-size: 1rem;
    color: #001539;
    font-weight: 600;
    /* Iets dikker */
}
.product-card .product-price {
    padding: 0 0.938rem 0.938rem;
    margin: 0;
    font-size: 1rem;
}
/* Responsive Styles */

@media (max-width: 48rem) {
    /* 768px */
    .search-result-inner {
        flex-direction: column;
    }
    .search-result-image {
        width: 100%;
        height: 12.5rem;
    }
    .results-items {
        /* Live search popup */
        grid-template-columns: 1fr;
    }
    .products-grid {
        /* Populaire producten */
        grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
    }
    .vloerplus-live-search-results {
        /* Live search popup positie */
        left: 0.938rem;
        right: 0.938rem;
        width: auto;
        max-width: none;
        transform: translateX(0);
        /* Reset centrering */
    }
    .header-search-form-container .search-form {
        flex-wrap: wrap;
        /* Laat knoppen onder input wrappen */
    }
    .header-search-form-container .search-form label {
        flex-basis: 100%;
        /* Input volledige breedte */
        margin-bottom: 0.5rem;
        /* Ruimte onder input */
    }
    .header-search-form-container .search-form .search-submit, .header-search-form-container .search-form .close-header-search {
        margin-left: 0;
        /* Geen marge links */
    }
    .header-search-form-container .search-form .search-submit {
        flex-grow: 1;
        /* Submit neemt beschikbare ruimte */
    }
    .header-search-form-container .search-form .close-header-search {
        margin-left: 0.5rem;
    }
    .header-search-form-container .search-form .search-clear {
        right: 10px;
        /* Dichter bij rand op mobiel */
        left: auto;
    }
    .header-search-form-container .search-form .search-loading {
        right: 40px;
        /* Naast clear knop */
        left: auto;
    }
}
/* Added based on vloerplus-site.css media queries */

@media (max-width: 64rem) {
    /* 1024px */
    .results-items {
        /* Live search popup */
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        /* Iets smaller */
    }
    .header-search-form-container .search-form {
        max-width: 95%;
        /* Bijna volledige breedte */
    }
}
@media (max-width: 36rem) {
    /* 576px */
    .results-items {
        /* Live search popup */
        grid-template-columns: 1fr;
    }
    .products-grid {
        /* Populaire producten */
        grid-template-columns: 1fr;
        /* 1 kolom */
    }
}
/* Spin animation */

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}
/* Responsive spin voor loader */

@media (max-width: 48rem) {
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        /* Reset Y transformatie */
        100% {
            transform: rotate(360deg);
        }
    }
    .header-search-form-container .search-form .search-loading {
        transform: translateY(0);
        /* Reset transformatie */
        /* Positioneer relatief tov input of knop */
        position: static;
        /* Of relatief en pas top/left aan */
        margin-left: 5px;
    }
}