/* ==============================
   Filters + Vacatures: desktop
============================== */

body.single-vacature #main {
    padding-bottom: 0;
}
#vacature-filters-container {
    margin-bottom: 30px;
}

#vacature-filters-container input {
    border-radius: 0;
    max-width: 250px;
    height: 48px;
}
#vacature-filters-container select {
    border-radius: 0 !important;
    border: 1px solid #222;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #000 50%),
        linear-gradient(135deg, #000 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 55%,
        calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

#vacature-filters-container select:focus {
    border-color: #000;
    outline: none;
}
#vacature-filters-container select:hover {
    border-color: #555;
}

#active-filters {
    margin: 20px 0;
    color: #fff;
}
#active-filters .remove-active-filter {
    color: #ff0000;
}

/* wrapper altijd binnen scherm */
.vacature-item-wrapper {
    max-width: 100%;
    width: 100%;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* reset negatieve margins van Avada rows */
.vacature-item-wrapper .fusion-builder-row,
.vacature-item-wrapper .fusion-flex-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Vacature lijst desktop: 2 kolommen */
#vacature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    color: #fff;
}

/* Vacature item desktop */
#vacature-list .vacature-item {
    border: 1px solid #ffffff;
    padding: 2rem;
    background: transparent;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
}

#vacature-list .vacature-item a {
    margin-top: 20px;
}

#vacature-list .vacature-item i {
    border: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

#vacature-list .vacature-item h4.fusion-title-heading {
    font-size: 26px!important;
    color: #fff!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

#vacature-list .vacature-item .salary-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

#vacature-list .vacature-item .salary-line i {
    flex-shrink: 0;
}

#vacature-list .vacature-item .salary-line .salary-text {
    line-height: 1.4;
    font-size: 16px;
}

/* ==============================
   Vacature filters
============================== */
#vacature-filters-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

/* input + selects */
#vacature-filters-form input,
#vacature-filters-form select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    box-sizing: border-box;
}




/* Desktop: twee kolommen */
.vacature-flex {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    min-height: 300px;
}

.vacature-left,
.vacature-right {
    flex: 1 1 50%;
}

.vacature-left {
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
    padding-bottom: 0;
    max-height: 280px;
}

.rnErrorContainer span, .recruiter-email a, .recruiter-phone a, .recruiter-email a:hover, .recruiter-phone a:hover 
{
    color: #fff;
}

#motivation-text { padding: 15px;}

.sollicitatie-widget {
    margin-top: 20px;
}

.recruiter-email {margin-top: 10px;margin-bottom: 5px;}
/* ==============================
   Mobiel (<768px)
============================== */
@media (max-width: 768px) {
    /* Filters: 1 kolom */
    #vacature-filters-form {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    #vacature-filters-form input[name="search"] {
        grid-column: span 1 !important;
    }

    /* Vacature list mobiel: 1 kolom */
    #vacature-list {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }

    .vacature-item-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* Vacature-items mobiel */
    #vacature-list .vacature-item {
        width: 100% !important;
        box-sizing: border-box;
        padding: 1rem 0.5rem;
        overflow: hidden;
        border: 1px solid #fff;
        margin-bottom: 1rem;
    }

    /* Flex container binnen item naar kolom */
    .vacature-item > .vacature-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Kolommen binnen flex container */
    .vacature-item > .vacature-flex > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Titel compacter */
    #vacature-list .vacature-item h4.fusion-title-heading {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        white-space: normal !important;
    }

    /* Buttons full-width onderaan */
    .vacature-item .fusion-button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 1rem !important;
    }

    /* Salaris / iconen */
    .salary-line {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        font-size: 0.9rem !important;
        flex-wrap: wrap !important;
    }

    .salary-line i {
        margin-top: 0.15rem !important;
        min-width: 16px !important;
    }

    .salary-text small {
        display: block !important;
        font-size: 0.8rem !important;
        opacity: 0.8 !important;
    }

    /* Vacature left column als column flex */
    .vacature-left {
      
        flex-direction: column !important;
         display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;
       
    }

    /* Button onderaan door margin-top:auto werkt nu binnen column flex */
    .vacature-left .fusion-button {
        margin-top: auto !important;
    }
}

/* Vacature soliciteer formulier */


.rnFormWrapper {
    margin-top: 40px!important;
}

.rnFormContainer h2 {
    font-size: 22px !important;
    color:#fff !important;
    margin-top: 0 !important;
}

.rnFormContainer .rnLabel{
    color: #fff !important;
    display: none !important;
}
.rnmail-and-whatsapp-consent .rnLabel {
    display:block!important;
}
.rnFormContainer .rnPhoneCountry {
    color: #fff !important;
}
.rnFormGroup { 
    margin-bottom: 1rem !important;
}
.rnFormGroup input, .rnFormGroup text {
   border-radius:0;}
.rnFormControl { border-radius: 0!important;}
.rnformContainer .rnSubmit {
    background-color: #fff !important;
    color: #000 !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
}

.rnFormContainer legend {
    color: #fff !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.rnFormContainer textarea {width:100% !important;}
#phoneSelector_mobilePhoneNumber {margin-bottom: 10px;}

.rnFileUpload, .rnFileUpload input{
    color: #fff !important;
}

.rnFormContainer button { background-color: rgb(213, 67, 34); color:#fff !important; border:none !important; padding:0.75rem 1.5rem !important; cursor:pointer !important; font-size:1rem !important; border-radius:0 !important;}
.rnFormContainer .rnErrors  {
    color: #ff0000 !important;
    
}

div.dienstverband {max-width: 70%;}