:root{
  --primary:#028295;
  --secondary:#48be4e;
  --bg:#f2fff7;
  --dark:#1f2937;
  --light:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
}

.jbody{
  
  background:var(--bg);
  color:var(--dark);
}

/* PAGE */
.jobs-wrap{max-width:1400px;margin:auto;padding:1rem}

/* HEADER */
.jobs-head{text-align:center;margin-bottom:1.5rem}
.jobs-head h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.jobs-head p{color:var(--light);margin-top:.4rem}

/* FILTER BAR */
.jobs-filter{
      background: #e0fdff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:1.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.8rem;
}

.jobs-filter input,
.jobs-filter select{
  padding:.65rem .9rem;
  border-radius:10px;
  border:1px solid #29b6d3;
  font-size:1.6rem;
}

/* LIST */
.jobs-list{display:flex;flex-direction:column;gap:1rem}

/* CARD */
.job-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  display:flex;
  gap:1rem;
}

.job-logo{
  width:72px;height:72px;min-width:72px;
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}

.job-logo img{width:80%;object-fit:contain}

.job-info{flex:1;display:flex;flex-direction:column;gap:.4rem}
.job-title{font-size:1.8rem;font-weight:600}
.job-sub{font-size:1.6rem;color:var(--light)}

.job-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.job-tags span{
  background:var(--secondary);
  color:rgb(255, 255, 255);
  padding:.25rem .6rem;
  border-radius:20px;
  font-size:1.5rem;
}

.job-footer{
  margin-top:.6rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
}

.job-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.btn{
  padding:.5rem 1rem;
  border-radius:8px;
  font-size:1.4rem;
  text-decoration:none;
  min-width:110px;
  text-align:center;
}

.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:#e5e7eb;color:#000}

/* ================= MODAL ================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:99999;
}
.modal.active{display:flex}

/* MODAL BOX */
.modal-box{
  background:#fff;
  width:100%;
  max-width:70%;
  border-radius:18px;
  padding:1.2rem;
  max-height:92vh;
  overflow-y:auto;
  position:relative;
}

/* 🔽 CLEAN SCROLLBAR — POPUP ONLY */
.modal-box{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #cbd5e1 transparent;
}

.modal-box::-webkit-scrollbar{
  width:6px;
}

.modal-box::-webkit-scrollbar-track{
  background:transparent;
}

.modal-box::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:10px;
}

.modal-box::-webkit-scrollbar-thumb:hover{
  background:#94a3b8;
}
/* 🔼 END SCROLLBAR */

/* CLOSE */
.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  font-size:1.8rem;
  border:none;
  background:none;
  cursor:pointer;
}

.modal-head{display:flex;gap:1rem;flex-wrap:wrap}
.modal-head img{
  width:64px;height:64px;
  border:1px solid var(--border);
  border-radius:12px;
}

.modal-meta{
  margin:1rem 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.7rem;
}

.modal-meta div{
  background:var(--secondary);
  padding:.6rem;
  border-radius:10px;
  font-size:1.4rem;
}

.modal-section{margin-top:1rem}
.modal-section h3{font-size:1.8rem;margin-bottom:.3rem}
.modal-section p,
.modal-section li{font-size:1.5rem;color:var(--light)}
.modal-section ul{padding-left:1.2rem}

.modal-footer{
  margin-top:1.4rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}
.modal-footer .btn{flex:1 1 160px}

/* MOBILE */
@media(max-width:575px){
  .job-card{flex-direction:column}
  .modal-head{flex-direction:column;align-items:flex-start}
}

/* LOCK PAGE SCROLL */
.jbody.modal-open{
  overflow:hidden;
}

.no-jobs{
  display:none;
  text-align:center;
  padding:3rem 1rem;
  font-size:1.6rem;
  color:var(--light);
  background:#fff;
  border:1px dashed var(--border);
  border-radius:var(--radius);
}
.modal-box{
    max-width: 96%;
}