/*
    ## Global filter styling ##
*/
.filter-sidebar input::placeholder,
.filter-sidebar select::placeholder,
.silfer-searchbar input::placeholder,
.silfer-searchbar select::placeholder {
    color: var(--nectar-extra-color-1) !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.filter-sidebar input:focus::placeholder,
.filter-sidebar select:focus::placeholder,
.silfer-searchbar input:focus::placeholder,
.silfer-searchbar select:focus::placeholder {
    opacity: 1;
}

/* Form button */
.form-control-btn {
    padding: 12px 22px;
    font-size: 16px;
    color: var(--nectar-bg-color) !important;
    background-color: #005159 !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.form-control-btn:hover,
.form-control-btn:active {
    background-color: #20666d !important;
}

.form-control-btn:focus {
    background-color: #005159 !important;
}

/*
    ## Vacaturepagina filters ##
*/
.post-data-set {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}

/* Vacaturelijst */
.post-data-set .post-content-inner {
    width: calc(80% - 45px) !important;
}

/* Filter sidebar */
.filter-sidebar {
    width: calc(100% - 45px) !important;
    background: white !important;
    padding: 2rem !important;
    border-radius: 1rem !important;
}

.filter-sidebar .with_frm_style input[type="text"],
.filter-sidebar .with_frm_style select {
    background-color: #f4f4f4 !important;
    color: inherit;
}

.filter-sidebar .inner-filter .filter-box {
    margin-bottom: 1rem;
}

.remove-filters {
    color: #005159;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.remove-filters:hover {
    opacity: .75;
}

/* Locatie en straal filters */
.input-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.input-col {
    flex: 1 1 auto;
    min-width: 0;
}

.input-col--sm {
    flex: 0 0 100px;
}

/* Branche checkbox accordion */
.post-data-set .filter-sidebar .inner-filter .accordion {
    background: #f4f4f4 !important;
    color: var(--nectar-extra-color-1) !important;
}

.post-data-set .filter-sidebar .inner-filter .accordion:after {
    content: '' !important;
    display: none !important;
}

/* Branche checkboxes */
.checkbox-grid {
    display: block;
}

.branche-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
}

.branche-box input[type="checkbox"] {
    accent-color: var(--nectar-extra-color-1) !important;
    width: 18px;
    height: 18px;
    border: 2px solid var(--nectar-extra-color-1) !important;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f4f4f4  !important;
}

.branche-box input[type="checkbox"]:hover {
    opacity: 0.8 !important;
}

.branche-box input[type="checkbox"]:checked {
    background-color: var(--nectar-extra-color-1) !important;
    border-color: var(--nectar-extra-color-1) !important;
}

.branche-box input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.branche-box label {
    color: var(--nectar-extra-color-1);
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}


@media (max-width: 1280px) {
    .input-row {
        flex-wrap: wrap;
    }

    .input-col--sm {
        flex: 1 1 140px;
    }
}

@media (max-width: 800px) {
    .post-data-set {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .post-data-set .filter-sidebar {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .post-data-set .post-content-inner {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/*
    ## Searchbar ##
*/

.silfer-searchbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /*gap: 0.5rem;*/
    margin: 0 auto;
    border-radius: 2rem !important;
    background: #f4f4f4 !important;
    padding: 2rem;
}

/* Inputs & selects */
.silfer-searchbar .with_frm_style input[type=text],
.silfer-searchbar .with_frm_style select,
.silfer-searchbar .with_frm_style {
    width: 100%;
    border: none !important;
    background: transparent !important;
    /*padding: 0.75rem 1rem;*/
    outline: none;
}

.silfer-searchbar .form-control-btn {
    border-radius: 50px !important;
}


/* Divider */
.silfer-searchbar .divider {
    display: none;
}

@media (min-width: 1000px) {
    .silfer-searchbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 680px;
        padding: 0.25rem 2rem;
    }

    .silfer-searchbar .with_frm_style input[type=text],
    .silfer-searchbar .with_frm_style select,
    .silfer-searchbar .with_frm_style {
        flex: 1;
        background: transparent !important;
        border-radius: 0;
        padding: 0.75rem 1rem;
    }

    .searchbar-col .form-select {
        flex: 0 0 120px;
    }

    .silfer-searchbar .divider {
        display: block;
        border: 1px solid var(--nectar-extra-color-1);
        animation-fill-mode: revert;
        opacity: 0.5;
        width: 1px;
        height: 28px;
        background: var(--nectar-extra-color-1);
    }
}

/*
    ## Utilities ##
*/
.sr-only {
    display: none;
}