.filter-container { background-color:transparent;padding:0;margin:0;} .search-filters { display:flex;align-items:center;gap:20px;padding:0;margin-bottom:0;} .filter-item { position:relative;display:flex;align-items:center;background:white;border-radius:100px;height:62px;} .search-input, .search-input::placeholder{ font-size:var(--e-global-typography-text-font-size) !important;line-height:var(--e-global-typography-text-line-height) !important;font-weight:600 !important;color:var(--e-global-color-secondary) !important;} .search-input, .filter-select { flex:1;padding:12px 24px !important;font-size:16px;background:transparent;height:100%;border:none !important;outline:none !important;box-shadow:none !important;padding-right:32px !important;} .search-input:focus, .filter-select:focus { border:none !important;outline:none !important;box-shadow:none !important;} #city-search { padding-left:40px !important;} .filter-select { cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;} .search-btn { background:#80f1b7;border:none;height:50px;width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;margin-right:4px;flex-shrink:0;} .search-btn:hover{ background:var(--e-global-color-a4951e2) !important;} .search-btn svg { color:#333;width:18px;height:18px;} .global-search { flex:1;max-width:450px;overflow:hidden;} .location-search { flex:1;max-width:450px;position:relative;} .location-icon { position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#7DCDC5;display:flex;align-items:center;z-index:2;pointer-events:none;} .location-icon svg { width:16px;height:16px;color:#7DCDC5;} #city-suggestions { position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;padding:0;list-style:none;background:white;border-radius:10px;max-height:250px;overflow-y:auto;z-index:9999;display:none;box-shadow:0 4px 15px rgba(0,0,0,0.1);border:1px solid #eee;} #city-suggestions li { padding:10px 15px;cursor:pointer;border-bottom:1px solid #f0f0f0;font-size:14px;} #city-suggestions li:last-child { border-bottom:none;} #city-suggestions li:hover { background-color:#f5f5f5;} #city-suggestions li.loading-suggestion, #city-suggestions li.error-suggestion { text-align:center;color:#666;cursor:default;} #city-suggestions li.error-suggestion { color:#d32f2f;} .radius-dropdown { width:160px;overflow:hidden;cursor:pointer;position:relative;} #radius-select{ padding-right:55px !important;position:relative;z-index:1;width:100%;cursor:pointer;} .radius-dropdown .search-btn { position:absolute;right:2px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;} .select-arrow { display:none !important;} .filter-divider { border:none;border-top:1px solid rgba(255, 255, 255, 1);margin:3rem 0 !important;width:100%;} .filter-results-heading { font-size:1.2rem !important;font-weight:600;margin:0 0 20px 0;padding:0;text-align:left;} #custom-vacature-filters { padding:0;margin:0 0 25px 0;} .filter-row { display:flex;flex-wrap:wrap;gap:20px;margin:0;} .filter-group { position:relative;} .filter-pill { border:none !important;outline:none !important;box-shadow:none !important;border-radius:100px !important;padding:12px 40px 12px 24px !important;min-width:180px;font-size:16px !important;font-weight:600 !important;cursor:pointer;color:#444;height:54px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(/wp-content/uploads/TalentWire-Arrow-Down.svg);background-repeat:no-repeat;background-position:right 16px center;background-size:8px;background-color:rgba(255, 255, 255, 0.4);} .filter-pill:focus { border:none !important;outline:none !important;box-shadow:none !important;} .filter-indicators { padding:0;margin:15px 0 20px 0;min-height:20px;text-align:center;} #custom-filter-loading, #custom-filter-load-more-indicator { display:inline-block;padding:0;color:#ffffff;font-style:italic;} #custom-filter-loading:not([style*="display:none"])::before { content:"Laden...";} #custom-filter-load-more-indicator:not([style*="display:none"])::before { content:"Meer laden...";} .vacature-grid { display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;padding:0;margin-top:10px;} .results-placeholder, .no-results, .results-error { grid-column:1 / -1;text-align:center;padding:50px 20px;color:#666;background:rgba(255, 255, 255, 0.1);border-radius:10px;margin-top:10px;} .results-error { color:#d32f2f;background:#fdecea;} .vacature-card { display:flex;flex-direction:column;background:white;border-radius:30px;overflow:hidden;transition:background-color 0.3s, color 0.3s;padding:35px;position:relative;height:100%;min-height:320px;} .vacature-card:hover { background-color:#283c53;color:white;} .company-logo-container { margin-bottom:20px;height:60px;display:flex;align-items:center;transition:opacity 0.3s, height 0.3s, margin 0.3s;} .vacature-card:hover .company-logo-container { opacity:0;height:0;margin:0;overflow:hidden;position:absolute;visibility:hidden;} .company-logo { max-width:100px;max-height:50px;object-fit:contain;} .company-name { font-family:"PP Pangram Sans", Sans-serif;font-size:1.1rem;font-weight:600;line-height:1.6em;color:#283c53;margin-bottom:12px;transition:opacity 0.3s, height 0.3s, margin 0.3s;} .vacature-card:hover .company-name { opacity:0;height:0;margin:0;overflow:hidden;position:absolute;visibility:hidden;} .job-title { font-size:26px !important;font-weight:700;color:#2d3748;margin:0 0 25px 0;line-height:1.2;transition:color 0.3s, font-size 0.3s, margin 0.3s;order:1;} .vacature-card:hover .job-title { color:white !important;font-size:22px !important;margin:0 0 15px 0;} .job-description { display:none;color:rgba(255, 255, 255, 0.8);margin-bottom:25px;font-size:16px;line-height:1.5;order:2;height:90px;overflow:hidden;position:relative;} .job-description:after { content:"";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to bottom, rgba(40, 60, 83, 0), rgba(40, 60, 83, 1));} .job-description p { margin:0 0 1em;font-size:16px;line-height:1.5;color:rgba(255, 255, 255, 0.8);} .job-description p:last-child { margin-bottom:0;} .vacature-card:hover .job-description { display:block;} .vacancy-meta { display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;order:3;} .location-pill, .salary-pill { display:flex;align-items:center;gap:8px;color:var(--e-global-color-secondary);background-color:#ebf7fa;padding:8px 16px;border-radius:50px;font-size:0.85rem;transition:background-color 0.3s, color 0.3s;font-weight:600;} .vacature-card:hover .location-pill, .vacature-card:hover .salary-pill { background-color:rgba(255,255,255,0.15);color:white;} .location-pill svg, .salary-pill svg { color:#7DCDC5;width:16px;height:16px;flex-shrink:0;transition:color 0.3s;} .vacature-card:hover .location-pill svg, .vacature-card:hover .salary-pill svg { color:white;} .city-name { margin-left:5px;} .bekijk-button { display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#283c53 !important;text-decoration:none;padding:12px 30px;border-radius:100px;font-weight:600;transition:all 0.3s;margin-top:auto;width:fit-content;background-color:#80f1b7;font-size:var(--e-global-typography-0179001-font-size);line-height:var(--e-global-typography-0179001-line-height);font-family:var(--e-global-typography-0179001-font-family), Sans-serif;order:4;} .vacature-card:hover .bekijk-button { background-color:#80f1b7;padding:14px 35px;color:#283c53 !important;} .vacature-card .bekijk-button span.button-text { display:inline;color:#283c53;} .vacature-card .bekijk-button span.button-text-hover { display:none;color:#283c53;} .vacature-card:hover .bekijk-button span.button-text { display:none;} .vacature-card:hover .bekijk-button span.button-text-hover { display:inline;} .bekijk-button svg { transition:transform 0.2s;width:18.06px;height:13.06px;fill:#283c53 !important;} .skeleton-card { background:white;border-radius:30px;padding:35px;height:320px;position:relative;overflow:hidden;display:flex;flex-direction:column;} .skeleton-pulse { animation:skeleton-pulse 1.5s infinite;background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%;} .skeleton-logo { width:100px;height:45px;margin-bottom:20px;border-radius:8px;} .skeleton-name { width:150px;height:24px;margin-bottom:12px;border-radius:4px;} .skeleton-title { width:80%;height:32px;margin-bottom:25px;border-radius:4px;} .skeleton-meta { display:flex;gap:15px;margin-bottom:30px;} .skeleton-pill { width:120px;height:36px;border-radius:50px;} .skeleton-button { width:140px;height:44px;border-radius:100px;margin-top:auto;} @keyframes skeleton-pulse { 0% { background-position:200% 0;} 100% { background-position:-200% 0;} } @media (max-width:992px) { .vacature-grid { grid-template-columns:repeat(2, 1fr);gap:25px;} .search-filters { flex-wrap:wrap;gap:15px;} .global-search, .location-search { flex:1 1 calc(50% - 8px);} .radius-dropdown { flex:1 1 150px;min-width:130px;} .filter-divider { margin:25px 0 20px 0 !important;} .filter-results-heading { font-size:1.1rem !important;margin-bottom:15px;} } @media (max-width:768px) { .search-filters { flex-direction:column;align-items:stretch;gap:15px;} .global-search, .location-search, .radius-dropdown { width:100%;flex-basis:auto;margin-top:0;} .vacature-grid { grid-template-columns:1fr;gap:20px;} .filter-pill { width:100%;} .filter-row { flex-direction:column;gap:15px;} .filter-divider { margin:20px 0 15px 0 !important;} .filter-results-heading { margin-bottom:15px;} #custom-vacature-filters { margin-bottom:20px;} }