:root{
  --card-bg:#fff; --border:#e5e7eb; --text:#111827; --muted:#6b7280;
  --accent:#7c3aed; --accent-10:rgba(124,58,237,.1); --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;

  /* sticky vars for .jobs-header */
  --jobs-offset:0px;   /* admin bar + fixed site header total */
  --jobs-left:0px;     /* fixed fallback X position */
  --jobs-width:auto;   /* fixed fallback width */
  --jobs-height:0px;   /* spacer height when fixed */
}

/*Careers*/

section#section2_job{
   display: block;
   background-color: #000;
   padding:2rem;
	
}
 section#section2_job #section2_job_inside{
display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  color: white;
}

section#joblist{
   display: block;
 
   padding:2rem;
   width: 100%;
   max-width: 1900px;
}
 section#joblist #joblist_inside{
 display: grid;
 grid-template-columns: 50% 50%;
 width: inherit;
  
}
.jobs-section{ color:var(--text); margin:2rem auto 0; position:relative; }
.jobs-section h2{ margin:0 0 .25rem; }

/* ✅ STICKY TARGET */
.jobs-header{
  position: sticky;
  top: var(--jobs-offset);
  z-index: 100;
  background:#fff;
  border-bottom:1px solid var(--border);
  transition: box-shadow .15s ease;
}
/* Fixed fallback (force when necessary) */
.jobs-header.is-stuck{
  position: fixed;
  top: var(--jobs-offset);
  left: var(--jobs-left);
  width: var(--jobs-width);
  margin: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.jobs-header-anchor{ height:0 } /* spacer */

/* Inner layout */
.filters-bar{ position:relative; }
.filters-bar form{ padding:0; margin:0; width: 96%; }
.jobs-header .filters-bar{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:.5rem; }
.jobs-header .top-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; width:100%; }
.jobs-header input[type="search"]{ flex:1 1 280px; padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px; }
#career-sort{ padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px; background:#fff; }

.btn{ appearance:none; border:1px solid var(--border); background:#fff; padding:.55rem .8rem; border-radius:10px; cursor:pointer; }
.btn:hover{ border-color:var(--accent); box-shadow: inset 0 0 0 1px var(--accent-10); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }

.filter-row{ display:flex; gap:10px; }
.filter-control{ position:relative; }
.filter-toggle{ display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px; background:#fff; cursor:pointer; white-space:nowrap; }
.filter-toggle:after{ content:"▾"; font-size:.9rem; color:var(--muted); }
.filter-control.open .filter-toggle{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-10); }
.filter-popover{
  position:absolute; top:calc(100% + 8px); left:0; min-width:260px; max-width:min(90vw,340px);
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.75rem; z-index:200; display:none;
}
.filter-control.open .filter-popover{ display:block; }
.filter-popover .options{ max-height:260px; overflow:auto; display:block; padding-right:6px; }
.filter-popover label{ display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.2;
  padding: 0;
  font-size: .95rem;
  cursor: pointer;
  margin: 0;

 }
.filter-popover input[type="checkbox"]{ width:1rem; height:1rem; }

/* Jobs grid/cards/pager */
.careers-grid{ display:grid; grid-template-columns:100%; gap:14px; margin-top:14px; }
.job-card{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:14px; display:flex; justify-content:space-between; gap:10px; }
.job-icon{ font-size:1.6rem; }
.career-card__badges{ list-style:none; padding:0; margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.career-card__badge a{ display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#f3f4f6; font-size:.8rem; color:#374151; text-decoration:none; }
.jobs-empty{ text-align:center; color:var(--muted); padding:20px; }
.jobs-list.is-loading{ opacity:.6; pointer-events:none; transition: opacity .2s ease; }

.jobs-pagination{ display:flex; gap:6px; justify-content:center; margin-top:18px; }
.jobs-pagination .jobs-page{ border:1px solid var(--border); background:#fff; padding:.45rem .7rem; border-radius:8px; cursor:pointer; }
.jobs-pagination .jobs-page.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.jobs-pagination .jobs-page[disabled]{ opacity:.5; cursor:not-allowed; }

/* Common sticky killers: keep wrappers clean */
main, .site-content, .content-area, .container, .wrap{ overflow:visible; }
.transform, .translated, .has-transform{ transform:none; }

/* Responsive */
@media (min-width:720px){
  .jobs-header .filters-bar{
    grid-template-columns:30% 70%;
    align-items:start;
    background-color:#1fd660;
    width:100%;
    place-items:center;
    gap:1rem;
    margin:0;
    padding:0 1rem;
  }


}

@media (min-width: 769px) and (max-width: 1200px) and (min-height: 720px) and (max-height: 920px) {
  #mainbanner {
    height: auto !important;
  }
}
@media (max-width:1280px){

       #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left h1,   #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left h2   {
text-align: center !important;
width: 100% !important;
    }
  #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left ul {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap:2rem;
margin: 0 auto;
  }
  #candidate_mainbanner {
 
  padding-bottom: 5rem;
}
}
@media (max-width:1180px){
   #mainbanner {
    height: auto !important;
  }
  #mainbanner #mainbanner_content {
  
  height: inherit !important;
  
}
#candidate_mainbanner_inside{
    display: grid;
    grid-template-columns:100% !important ;
}

#candidate_mainbanner {
 
padding-top: 10rem !important;
    height: auto !important;
}
#candidate_mainbanner_inside_right{
    display: none;
}
  #candidate_mainbanner {
    padding-top: 0rem !important;
    height: auto !important;
  }
}
@media (max-width:520px){
    .actions {
 
 
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}
	section#contactusbanner, div#resourcesmainbannerinside, div#candidate_mainbanner_inside {
    padding: 5rem 0px 0rem 0px !important;
}
	section#section2_job #section2_job_inside {
 
    font-size: 2.5rem;
   
}
    #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left ul {
      
        grid-template-columns: repeat(1, 1fr);
               width: 80%;
    }
       #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left ul li {
      
        display: block;
               width: 100%;
    }
        #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left h1    {
       font-size: 2.5rem !important;
    }
        #candidate_mainbanner #candidate_mainbanner_inside #candidate_mainbanner_inside_left h2    {
       font-size: 1.8rem !important;
       
    }
}
/* intl-tel-input fixes */
.iti { width: 100%; }
.iti input[type="tel"] { width: 100%; }

#error-phone, #err-phone {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #dc2626;
}

.input.has-error,
.iti input[type="tel"].has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.08);
}

.iti--separate-dial-code .iti__selected-flag { background: transparent; }

 

 

/** Mobile version **/

@media(max-width:1024px){
    .jobs-header.is-stuck {
  position:unset !important;
 
}
.jobs-header.is-stuck {
  position:unset !important;
 
 
}

.jobs-header input[type="search"] {
 
  border: 1px solid rgba(0,0,0,0.3);
 
}
.jobs-header .filters-bar {
  display: flex !important;
 justify-content: center;
    align-items: center;
}
}



/* =================== Mobile/Tablet Tabs (optional) =================== */
.mobile-tabs{ display:none; }
@media (max-width: 1024px) {

     .callfluent_paper {
 
    box-shadow: none !important;
    
 
}
  .mobile-tabs{
    position: relative;
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem; background:#f8fafc; border-bottom:1px solid var(--border);
  }
  .mobile-tabs .tab{
    appearance:none; cursor:pointer; user-select:none; font-weight:600;
    padding:.55rem 1rem; border:1px solid var(--border); border-radius:999px; background:#fff;
  }
  .mobile-tabs .tab.active{
    background:var(--tab-accent); color:#fff; border-color:var(--tab-accent);
    box-shadow:0 0 0 4px var(--tab-ring);
  }
  /* show one panel at a time on mobile */
  #apply-panel, #jobs-panel{ display:none; }
  #apply-panel.is-active, #jobs-panel.is-active{ display:block; }
}
@media (min-width: var(--bp-desktop)) {
  #apply-panel, #jobs-panel{ display:block !important; }
}

/* =================== Mobile Filters Toggle (this fixes your issue) =================== */
/* Button shown on mobile only */
.filters-toggle-btn{
display: none;
  align-items: center;
  gap: .5rem;
  padding: 0rem .85rem;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.5rem;
  background: #fff;
  color: black;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 5px !important;
  height: 2.5rem;
}
 
    .filters-close-btn{
      
      display:none;
      cursor: pointer;
    }
@media (max-width: 1024px) {
section#joblist {
 
    padding: 2rem 0 !important;
  
}
        .filters-close-btn{
      appearance:none; cursor:pointer; user-select:none;
      display:inline-flex; align-items:center; justify-content:center;
      width:32px; height:32px; border-radius:999px;
      color:black;
    }
    .filters-close-btn:hover{ 
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-10);
    }

    /* Optional: visually hide sr-only text while keeping it accessible */
  
    #career-sort {
 
  width: fit-content;
  display: block;
}
 .filter-control {
  position: relative;
  display: block;
  margin-block: 1rem;
}
  .filters-toggle-btn{ display:inline-flex; }
.career-filter-form{
        display: flex !important;
    gap: 1rem;
    flex-direction: column;
}
  /* Make the inline row become a fixed overlay panel under the sticky header */
  #career-filters-form.mobile-collapsible{
display: none;
    position: fixed;
    top: 85px;
    left: 0;
    right: 0;
    z-index: 120;
    margin: 0;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
 
    overflow: auto;
    height: 100%;
    width: 100%;
  }

  .jobs-header.filters-open #career-filters-form.mobile-collapsible{ display:block; }

  /* Inside the panel, stack controls vertically and make popovers inline */
  /* #career-filters-form.mobile-collapsible.filter-row{  gap:0; }
  #career-filters-form .filter-control{ display:block; margin-bottom:.6rem; }
  #career-filters-form .filter-toggle{ width:100%; justify-content:space-between; }
  #career-filters-form .filter-popover{
    position:relative; top:auto; left:auto; min-width:0; max-width:100%;
    display:block; box-shadow:none; border-color:var(--border);
    margin-top:.4rem;
  } */

  /* Scrim behind the panel */
  .filters-scrim{
    position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:110;
  }
  .filters-scrim[hidden]{ display:none; }


  .btn {
 
  width: fit-content;
}
}

/* Desktop: keep original row layout; hide scrim & button */
@media (min-width: 1025px) {
  .filters-toggle-btn{ display:none !important; }
  #career-filters-form.mobile-collapsible{
    display:flex !important; position:static !important; box-shadow:none !important;
    max-height:none !important; overflow:visible !important;
  }
  .filters-scrim{ display:none !important; }
}