/* RemoteRoles Premium Dark Theme - Full Replacement CSS */

:root{
  --bg:#0a0a0a;
  --surface:#111111;
  --surface-2:#171717;
  --card:#1f1f1f;

  --border:#2d2d2d;

  --text:#fafafa;
  --muted:#a1a1aa;

  --primary:#8b5cf6;
  --primary2:#6366f1;

  --success:#22c55e;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:
  radial-gradient(circle at top right,#312e81 0%,transparent 30%),
  linear-gradient(180deg,#0a0a0a,#111111);

  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
}

.container{
  max-width:1150px;
  margin:auto;
  padding:30px 20px;
  display:flex;
  gap:25px;
}

.left{flex:2}
.right{flex:1}

.job-hero-card,
.job-content-card,
.faq-card,
.sidebar,
.job-details-card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.job-hero-card{overflow:hidden}

.job-image-box{
  height:380px;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  display:flex;
  align-items:center;
  justify-content:center;
}
.job-image-box img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.job-hero-content{
  padding:24px;
}

.job-title{
  font-size:30px;
  line-height:1.3;
  margin:10px 0 12px;
  color:#fff;
  font-weight:700;
}

.rr-breadcrumb a{color:var(--primary);text-decoration:none}
.rr-breadcrumb .current{color:var(--muted)}

.job-meta span{
  display:inline-flex;
  margin:0 10px 10px 0;
  padding:10px 16px;
  border-radius:999px;
  background:#0b1220;
  border:1px solid var(--border);
  color:#dbeafe;
}

.job-meta a{color:inherit;text-decoration:none}

.job-actions{display:flex;gap:12px;margin-top:20px}

.share-btn,
.report-btn{
  padding:12px 18px;
  border-radius:14px;
  border:none;
  text-decoration:none;
}

.share-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white;
}

.share-dropdown{
  background:#111827;
  border:1px solid var(--border);
  border-radius:16px;
}

.share-dropdown a{
  color:white;
  display:block;
  padding:12px 15px;
}

.job-content-card,
.faq-card{padding:30px}

.job-content{
  color:#e2e8f0;
  line-height:1.8;
  font-size:15px;
}

.job-content h2,
.job-content h3{
  color:white;
  margin-top:24px;
  margin-bottom:10px;
  font-size:22px;
  line-height:1.3;
}

.job-content img,
.job-content iframe,
.job-content table{
  max-width:100%;
}

.sidebar{padding:20px;position:sticky;top:90px}

.job-details-card{
  padding:24px;
  background:#0f172a;
}

.job-details-card h3{
  margin:0 0 20px;
  color:white;
  font-size:26px;
}

.detail-row{
  background:#111827;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  margin-bottom:12px;
}

.detail-row strong{
  display:block;
  color:var(--primary);
  margin-bottom:8px;
}

.detail-row span,
.detail-row a{
  color:white;
}

.country-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.faq-item{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:12px;
}

.faq-question{
  width:100%;
  background:#0f172a;
  color:white;
  border:none;
  padding:16px;
  text-align:left;
}

.faq-answer{
  color:#cbd5e1;
}

.faq-item.active .faq-question{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}

.nm-apply-now-btn{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:20px;
  width:340px;
  text-align:center;
  padding:16px;
  color:white;
  text-decoration:none;
  font-weight:700;
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 20px 50px rgba(59,130,246,.45);
  z-index:9999;
}

@media(max-width:768px){
  .container{flex-direction:column}
  .sidebar{position:static}
  .job-title{font-size:30px}
  .country-grid{grid-template-columns:1fr}
  .nm-apply-now-btn{width:95%}
}






.share-wrapper{
    position:relative;
    display:inline-block;
}

.share-dropdown{
    display:none;
    position:absolute;
    top:55px;
    left:0;

    min-width:180px;

    z-index:99999;

    background:#171717;

    border:1px solid #2d2d2d;

    border-radius:16px;

    overflow:hidden;
}

.share-dropdown.active{
    display:block;
}

.share-dropdown a{
    display:block;
    padding:14px 16px;
    text-decoration:none;
    color:#fff;
}

.share-dropdown a:hover{
    background:#262626;
}




@media(max-width:768px){

    .job-meta{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }

    .job-meta span{
        margin:0;
        font-size:12px;
        padding:5px 10px;
    }

}