/* =========================================================
   ZOEKVENSTER

   Zelfde grammatica als de bestelpopup: een donkere, wazige
   achtergrond over de hele pagina en een wit paneel dat van
   boven naar beneden inschuift. Het veld staat bovenaan en is
   groot, want dat is het enige wat je hier komt doen.
   ========================================================= */

.dvz-search {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 6vh 20px 20px;
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.dvz-search[hidden] { display: none; }

.dvz-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 22, 48, 0.62);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.dvz-search.is-open .dvz-search__backdrop { opacity: 1; }

.dvz-search__panel {
    position: relative;
    width: min(760px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(6, 22, 48, 0.32);
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    transition: opacity 0.26s ease, transform 0.26s ease;
    overflow: hidden;
}

.dvz-search.is-open .dvz-search__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ------------------------------------------------- het veld */
.dvz-search__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 24px;
    border-bottom: 1px solid var(--dvz-lijn);
}

.dvz-search__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--dvz-azuur);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Twee selectors, met opzet: het thema stijlt input[type="search"] met een
   attribuutselector, en die wint van een enkele klasse. */
.dvz-search__form .dvz-search__input,
.dvz-search__form input.dvz-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: "Lora", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--dvz-marine);
    box-shadow: none;
    outline: none;
}

.dvz-search__form .dvz-search__input::placeholder {
    color: #9fb0c4;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 19px;
    font-weight: 400;
}

.dvz-search__form .dvz-search__input::-webkit-search-cancel-button { display: none; }

.dvz-search__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    color: var(--dvz-tekst);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dvz-search__close:hover,
.dvz-search__close:focus-visible {
    background: var(--dvz-ijs);
    color: var(--dvz-marine);
}

.dvz-search__esc {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--dvz-ijs);
    color: var(--dvz-tekst);
}

/* Een dun balkje onder het veld zolang er gezocht wordt, zodat een trage
   verbinding niet als "niets gevonden" voelt. */
.dvz-search__form::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--dvz-azuur);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dvz-search.is-loading .dvz-search__form::after {
    opacity: 1;
    animation: dvz-search-loading 1.1s ease-in-out infinite;
}

@keyframes dvz-search-loading {
    0%   { left: 0;    width: 0; }
    50%  { left: 20%;  width: 60%; }
    100% { left: 100%; width: 0; }
}

/* -------------------------------------------- resultaten */
.dvz-search__results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dvz-search__results:empty { display: none; }

.dvz-search__group { padding: 14px 12px 8px; }

.dvz-search__group + .dvz-search__group { border-top: 1px solid var(--dvz-ijs); }

.dvz-search__grouptitle {
    margin: 0 0 6px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

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

.dvz-search__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--dvz-marine);
    text-decoration: none;
    transition: background-color 0.16s ease;
}

.dvz-search__item:hover,
.dvz-search__item:focus-visible,
.dvz-search__item.is-active {
    background: var(--dvz-ijs);
    color: var(--dvz-marine);
    outline: none;
}

.dvz-search__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--dvz-ijs);
}

.dvz-search__pageicon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--dvz-ijs);
    color: var(--dvz-azuur);
    font-family: "Lora", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
}

.dvz-search__text { flex: 1 1 auto; min-width: 0; }

.dvz-search__name {
    display: block;
    font-family: "Lora", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

.dvz-search__name mark {
    background: transparent;
    color: var(--dvz-diepblauw);
    font-weight: 700;
}

.dvz-search__desc {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dvz-tekst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dvz-search__price {
    flex: 0 0 auto;
    font-family: "Lora", Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dvz-marine);
    white-space: nowrap;
}

.dvz-search__price small {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--dvz-tekst);
    margin-right: 4px;
}

.dvz-search__all,
.dvz-search__note {
    display: block;
    margin: 6px 12px 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--dvz-ijs);
    color: var(--dvz-diepblauw);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.dvz-search__all:hover,
.dvz-search__all:focus-visible { background: #e2ecf8; color: var(--dvz-marine); }

.dvz-search__note {
    font-weight: 400;
    color: var(--dvz-tekst);
    margin-top: 14px;
}

/* ---------------------------------------------- suggesties */
.dvz-search__suggest { padding: 18px 24px 22px; }

.dvz-search.has-query .dvz-search__suggest { display: none; }

.dvz-search__suggesttitle {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.dvz-chips--search { justify-content: flex-start; gap: 8px; }
.dvz-chips--search .dvz-chip { padding: 9px 16px; font-size: 14.5px; }

/* --------------------------------------------- de pagina */
body.dvz-search-open { overflow: hidden; }

@media (max-width: 600px) {
    .dvz-search { padding: 0; align-items: stretch; }
    .dvz-search__panel { width: 100%; max-height: none; border-radius: 0; }
    .dvz-search__form { padding: 10px 12px 10px 16px; }
    .dvz-search__form .dvz-search__input,
    .dvz-search__form input.dvz-search__input { font-size: 20px; }
    .dvz-search__form .dvz-search__input::placeholder { font-size: 16px; }
    .dvz-search__esc { display: none; }
    .dvz-search__price { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-search__backdrop,
    .dvz-search__panel,
    .dvz-search__item { transition: none; }
}