/* ============================================================
   Search widget
   Zoekbalk (input + knop) + standaard WooCommerce-resultatengrid.
   Input krijgt de Elementor-preset; knop harmoniseert in primary.
   ============================================================ */
body {
    --cpx-search-primary: var(--e-global-color-primary);
    --cpx-search-accent: var(--e-global-color-accent);

    --cpx-search-size: 52px;
    --cpx-search-icon-size: 20px;

    --cpx-search-gap: 0.5rem;
    --cpx-search-radius: 0px;

    --cpx-search-transition: 0.18s ease;
}

/* Block ----------------------------------------------------- */
.cpx-search {
    width: 100%;
}

/* Formulier: input + knop naast elkaar --------------------- */
.cpx-search__form {
    display: flex;
    align-items: stretch;
    gap: var(--cpx-search-gap);
    width: 100%;
}

/* Zoek-input. !important nodig om Elementor's kit-styling te overrulen:
   .elementor-kit-N input:not([type="button"]):not([type="submit"]) heeft een
   hogere specificiteit (0,3,1) en de kit-N-class verschilt per site, dus !important
   op de preset-properties is hier de betrouwbare keuze. */
.cpx-search .cpx-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--cpx-search-size);
    margin: 0;
    background-color: var(--e-global-color-a44ca5f) !important;
    color: var(--e-global-color-text) !important;
    font-size: var(--e-global-typography-text-font-size) !important;
    line-height: var(--e-global-typography-text-line-height) !important;
    font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-text-font-weight) !important;
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-color: var(--e-global-color-d375381) !important;
    border-radius: 0px 0px 0px 0px !important;
    padding: 12px 25px 12px 25px !important;
    box-shadow: none;
    transition: border-color var(--cpx-search-transition);
}

.cpx-search .cpx-search__input:focus {
    outline: none;
    border-color: var(--cpx-search-primary) !important;
}

/* Zoekknop: dubbele class + resets om Elementor's globale
   button-styling te overrulen. Vierkant, primary-kleur, wit icoon. */
.cpx-search .cpx-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--cpx-search-size);
    height: var(--cpx-search-size);
    margin: 0;
    background-color: var(--cpx-search-primary);
    color: var(--cpx-search-accent);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--cpx-search-primary);
    border-radius: var(--cpx-search-radius);
    padding: 0;
    cursor: pointer;
    transition: opacity var(--cpx-search-transition);
}

.cpx-search .cpx-search__button:hover,
.cpx-search .cpx-search__button:focus {
    opacity: 0.85;
}

.cpx-search__icon {
    width: var(--cpx-search-icon-size);
    height: var(--cpx-search-icon-size);
    display: block;
}

/* Focus-affordance (toegevoegd via JS) --------------------- */
.cpx-search--focused .cpx-search__input {
    border-color: var(--cpx-search-primary);
}

/* Resultaten: spacing rond de standaard WooCommerce-grid ---- */
.cpx-search__results {
    margin-top: 1.5rem;
}

/* Paginatie: zelfde look als de Woo-archiefpaginatie
   (links primary-bg / accent-tekst, 15px padding, accent randen). */
.cpx-search__pagination {
    margin-top: 40px;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
}

.cpx-search__pagination .page-numbers {
    display: inline-block;
    padding: 15px;
    border: 1px solid var(--cpx-search-accent);
    line-height: 1;
}

.cpx-search__pagination a.page-numbers {
    background-color: var(--cpx-search-primary);
    color: var(--cpx-search-accent);
}

.cpx-search__pagination .page-numbers.current {
    background-color: var(--cpx-search-accent);
    color: var(--cpx-search-primary);
}