/* ================= ROOT ================= */
:root{
    --primary:var(--site-primary-2, #2a5298);
    --secondary:var(--site-link, #2563eb);
    --text:var(--site-text, #0f172a);
    --bg1:var(--site-surface, #ffffff);
    --bg2:var(--site-surface-2, #f8fafc);
    --radius:var(--site-radius, 14px);
    --vac-border:var(--site-border);
    --vac-shadow-sm:var(--site-shadow-sm);
    --vac-shadow:var(--site-shadow);
    --vac-shadow-hover:var(--site-shadow-hover);
    }
    
    /* ================= BODY ================= */
    body{
    margin:0;
    font-family:var(--site-font, "Segoe UI", sans-serif);
    color:var(--text);
    background:var(--bg1);
    background-color:var(--bg1);
    overflow-x:hidden;
    }
    
    
    /* ================= TITLE ================= */
    .job-title-section{
    margin:var(--space-8) 0 var(--space-12);
    padding:var(--space-12) var(--space-16);
    border-radius:var(--radius);
    border:1px solid var(--vac-border);
    border-left:5px solid var(--primary);
    background:linear-gradient(135deg,var(--bg1),var(--bg2));
    box-shadow:var(--vac-shadow-sm);
    }
  
    .job-title{
    margin:0;
    color:var(--site-text, #0f172a);
    font-size:30px;
    font-weight:800;
    line-height:1.3;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    }

    @supports not ((-webkit-background-clip:text) and (-webkit-text-fill-color:transparent)) {
    .job-title{
    background:none;
    color:var(--site-text, #0f172a);
    }
    }
  
    /* ================= META INFO ================= */
    .meta-info-section{
    margin:0 0 var(--space-12);
    padding:var(--space-8) var(--space-12);
    border-radius:var(--radius);
    border:1px solid var(--vac-border);
    background:var(--bg2);
    box-shadow:var(--vac-shadow-sm);
    }
  
    .meta-info{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    }
  
    .meta-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:var(--site-radius-pill);
    background:var(--bg1);
    border:1px solid var(--vac-border);
    min-width:0;
    }
  
    .meta-label{
    font-size:12px;
    font-weight:600;
    color:#475569;
    white-space:nowrap;
    }
  
    .meta-value{
    font-size:12px;
    color:var(--text-primary-dark);
    font-weight:500;
    }
  
    .meta-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(91,95,239,0.12);
    color:#1e40af;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    }
  
    .meta-tag:hover{
    background:rgba(91,95,239,0.2);
    }
    
    /* ================= CARD ================= */
    .card{
    background:var(--site-surface, #ffffff);
    border-radius:var(--site-radius, 14px);
    padding:18px 22px;
    margin-bottom:22px;
    border-left:4px solid var(--primary);
    box-shadow:var(--vac-shadow);
    transition:.3s;
    }
    
    .card:hover{
    transform:translateY(-3px);
    box-shadow:var(--vac-shadow-hover);
    }
    
    /* ================= CARD HEADER ================= */
    .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    }
    
    .card-header h2{
    font-size:18px;
    margin:0;
    color:var(--primary);
    }

    .card-header .section-title{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    }

    .card-header .section-icon {
      color: #1009f5;
      font-size: 12px;
      transition: color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
      display: inline-block;
    }
   
    .card-header:hover .section-icon {
      color: var(--site-primary-2, #2a5298);
      transform: translateX(2px);
    }
   
    .card-header:active .section-icon {
      transform: translateX(3px);
      color: var(--site-primary-2, #2a5298);
    }
    
    /* ================= DATE ROW ================= */
    .date-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eee;
    font-size:15px;
    line-height:1.45;
    }
    
    .date-value{
    color:var(--color-info);
    font-weight:600;
    }
    
    /* ================= LINKS ================= */
    .links-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
    }
    
    .link-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:var(--site-radius-sm);
    border:1px solid var(--vac-border);
    transition:.3s;
    }
    
    .link-box:hover{
    transform:translateY(-2px);
    box-shadow:var(--vac-shadow);
    }
    
    .left-text{
    font-size:18px;
    font-weight:600;
    line-height:1.45;
    }
    
    .right-link a{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    color:var(--site-text-inverse);
    min-height:44px;
    padding:7px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--site-radius-sm);
    text-decoration:none;
    font-size:14px;
    line-height:1.3;
    }
    
    /* ================= FAQ ================= */
    .faq-item{
    padding:15px;
    border-radius:var(--site-radius-sm);
    margin-bottom:12px;
    border-left:3px solid var(--secondary);
    background:var(--bg1);
    }
    
    .faq-q{
    font-weight:600;
    font-size:14px;
    }
    
    .faq-a{
    font-size:13px;
    color:#555;
    line-height:1.6;
    }
    
    /* ================= TABLE ================= */
    .table-responsive{
    overflow-x:auto;
    }
    
    .table{
    width:100%;
    border-collapse:collapse;
    min-width:480px;
    }
    
    .table th{
    background:var(--primary);
    color:var(--site-text-inverse);
    padding:10px;
    font-size:14px;
    text-align:left;
    line-height:1.4;
    }
    
    .table td{
    padding:10px;
    font-size:14px;
    border:1px solid #eee;
    text-align:left;
    line-height:1.45;
    font-variant-numeric:tabular-nums;
    }

    .table th:last-child,
    .table td:last-child{
    text-align:center;
    }
    
    .table tr:nth-child(even){
    background:#f9f9f9;
    }
    
    /* ================= RELATED ================= */
    .related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    }
    
    .related-card{
    padding:14px;
    border-radius:8px;
    background:#f8fbff;
    border:1px solid #e4e9f2;
    }
    
    .related-card a{
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    line-height:1.4;
    }
    
    /* ================= SOCIAL SHARE ================= */
    .social-share-bar{
    margin:14px 0 16px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f8fafc;
    box-shadow:0 4px 16px rgba(15,23,42,0.06);
    }
  
    .social-share-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    width:100%;
    overflow:hidden;
    min-width:0;
    }
  
    .social-btn{
    min-height:44px;
    padding:0 8px;
    border-radius:10px;
    color:var(--site-text-inverse);
    font-size:14px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:normal;
    line-height:1.2;
    flex:1 1 0;
    min-width:0;
    border:none;
    cursor:pointer;
    }
  
    .social-btn-share{
    background:#1f2937;
    }
  
    .whatsapp{background:#25D366;}
    .telegram{background:#0088cc;}
    .facebook{background:#1877f2;}
  
    /* ================= ADVERTISEMENT ================= */
    .advt-box{
    margin:14px 0 18px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #dbeafe;
    border-left:4px solid var(--primary);
    background:linear-gradient(135deg,var(--surface-alt),var(--surface-muted));
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    }
  
    .advt-label{
    font-size:14px;
    color:#334155;
    font-weight:600;
    }
  
    .advt-sep{
    color:var(--text-secondary);
    font-weight:600;
    }
  
    .advt-value,
    .advt-box > span:last-child{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:999px;
    background:rgba(91,95,239,0.12);
    color:#1e40af;
    font-weight:700;
    letter-spacing:.02em;
    font-size:13px;
    }

/* ================= HIGH PRIORITY: KEY FACTS + APPLY CTA ================= */
.key-facts-section{
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--site-radius);
  background: var(--surface);
}

.key-facts-heading{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary-dark);
}

.key-facts-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.key-fact-item{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  min-width: 0;
}

.key-fact-label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.key-fact-value{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary-dark);
  line-height: 1.35;
  word-break: break-word;
}

.top-apply-cta-wrap{
  margin: 0 0 12px;
}

.apply-online-inline-wrap{
  margin: 0 0 12px;
}

.apply-online-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color .2s ease;
}

.apply-online-cta-top{
  width: 100%;
  min-height: 44px;
  background: #0ea5e9;
  color: var(--site-text-inverse);
  font-size: 15px;
}

.apply-online-cta-top:hover{
  background: #0284c7;
}

.apply-online-cta-inline{
  min-height: 44px;
  padding: 0 14px;
  background: var(--text-primary-dark);
  color: var(--site-text-inverse);
  font-size: 14px;
}

.apply-online-cta-inline:hover{
  background: #1e293b;
}
    
    /* ================= MOBILE ================= */
    @media (max-width: 768px) {
    
    .job-container{
    margin:20px 10px;
    padding:0 12px 20px;
    }
    
    .job-title{
    font-size:22px;
    }
  
    .job-title-section{
    padding:10px 12px;
    border-left-width:4px;
    }
  
    .meta-info-section{
    padding:8px 10px;
    }
  
    .meta-info{
    gap:6px;
    }
  
    .meta-item{
    width:100%;
    justify-content:flex-start;
    }

    .meta-label,
    .meta-value{
    font-size:14px;
    line-height:1.45;
    }
    
    .card{
    padding:14px;
    }
    
    .date-row{
    font-size:14px;
    }

    .links-grid{
    gap:6px;
    margin-top:8px;
    }
    
    .link-box{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    }

    .left-text{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    line-height:1.4;
    text-align:left;
    word-break:break-word;
    }
    
    .right-link{
    width:auto;
    flex:0 0 auto;
    align-self:center;
    }
    
    .right-link a{
    display:inline-flex;
    text-align:center;
    width:auto;
    min-height:44px;
    font-size:12.5px;
    padding:3px 11px;
    white-space:nowrap;
    }
    
    .related-grid{
    grid-template-columns:1fr;
    }
  
    .advt-box{
    padding:10px 12px;
    gap:4px;
    }
  
    .advt-label,
    .advt-value{
    font-size:14px;
    }

    .key-facts-grid{
      grid-template-columns: 1fr;
    }
    
    }
    
    @media (max-width: 480px) {
    
    .social-share-bar{
    padding:10px;
    }
  
    .social-btn{
    min-height:44px;
    font-size:14px;
    padding:0 6px;
    }
    
    }
  
    

/* ================= HIGHLIGHT BANNER (3-layer SarkariResult-style poster) ================= */

.highlight-banner-root {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 0;
  position: relative;
  overflow: visible;
}

@media (min-width: 1024px) {
  .highlight-banner-root {
    max-width: 80%;
    padding: 0 12px;
  }
}

.highlight-banner-root:has(.highlight-banner-title-main:empty) {
  display: none;
  margin-bottom: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.highlight-banner-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--text-primary-dark);
  background: var(--text-primary-dark);
}

/* --- Top strip (light) --- */
.highlight-banner-top {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px 10px;
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  text-align: center;
}

.highlight-banner-top-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
}

.highlight-banner-top-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
  background: var(--border);
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}

.highlight-banner-top-badge-outline {
  background: var(--surface);
  border-color: #94a3b8;
  color: #334155;
}

.highlight-banner-top-advt {
  margin: 0;
  font-size: clamp(11px, 2.2vw, 13px);
  font-weight: 700;
  color: #475569;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.highlight-banner-top-advt-label {
  font-weight: 600;
  margin-right: 6px;
  color: var(--text-secondary);
}

.highlight-banner-top-advt-value {
  color: var(--text-primary-dark);
  font-weight: 800;
}

.highlight-banner-top-advt:has(.highlight-banner-top-advt-value:empty) {
  display: none;
}

/* --- Main strip (black) --- */
.highlight-banner-main {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(18px, 4vw, 36px) clamp(12px, 3vw, 22px) clamp(20px, 4.5vw, 32px);
  background: var(--text-primary);
  color: var(--site-text-inverse);
  text-align: center;
}

.highlight-banner-title-main {
  margin: 0 0 10px;
  padding: 0;
  font-size: clamp(1.2rem, 4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--site-text-inverse);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.highlight-banner-subtitle {
  margin: 0 0 16px;
  padding: 0;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--surface);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.highlight-banner-subtitle-label {
  display: inline-block;
  margin-right: 6px;
  font-size: clamp(0.72rem, 2vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.highlight-banner-total-line {
  margin: 0 0 14px;
  padding: 0;
}

.highlight-banner-total-main {
  display: block;
}

.highlight-banner-total-fallback {
  display: none;
  font-size: clamp(1.15rem, 4.2vw, 1.85rem);
  font-weight: 900;
  line-height: 1.25;
  color: #fef08a;
  letter-spacing: 0.02em;
}

.highlight-banner-total-line:has(.highlight-banner-total-num:empty) .highlight-banner-total-main {
  display: none;
}

.highlight-banner-total-line:has(.highlight-banner-total-num:empty) .highlight-banner-total-fallback {
  display: block;
}

.highlight-banner-total-text {
  display: block;
  font-size: clamp(1.35rem, 5vw, 2.25rem);
  font-weight: 900;
  line-height: 1.25;
  color: #fef08a;
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.highlight-banner-total-num {
  font-size: clamp(1.45rem, 5.5vw, 2.5rem);
  font-weight: 900;
  color: #facc15;
}

.highlight-banner-tagline {
  margin: 0;
  padding: 0;
}

.highlight-banner-tagline:has(.highlight-banner-tag:empty) {
  display: none;
}

.highlight-banner-tag {
  display: inline-block;
  max-width: 100%;
  padding: 5px 12px;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: #facc15;
  border-radius: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* --- Bottom strip (brand red) --- */
.highlight-banner-bottom {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 12px 16px;
  background: #7f1d1d;
  border-top: 3px solid #450a0a;
  text-align: center;
}

.highlight-banner-brand-domain {
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fef08a;
  text-transform: lowercase;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.highlight-banner-brand-tagline {
  margin-top: 6px;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fecaca;
}

/* ----- Category themes (main section + tag only; top white / bottom red unchanged) ----- */
.highlight-banner-root.theme-railway .highlight-banner-main {
  background: #052e16;
}

.highlight-banner-root.theme-railway .highlight-banner-tag {
  background: #4ade80;
  color: #052e16;
}

.highlight-banner-root.theme-railway .highlight-banner-total-num {
  color: #bbf7d0;
}

.highlight-banner-root.theme-railway .highlight-banner-total-text {
  color: #ecfccb;
}

.highlight-banner-root.theme-defence .highlight-banner-main {
  background: #1c1917;
}

.highlight-banner-root.theme-defence .highlight-banner-tag {
  background: #fbbf24;
  color: #1c1917;
}

.highlight-banner-root.theme-defence .highlight-banner-total-num {
  color: #fde68a;
}

.highlight-banner-root.theme-defence .highlight-banner-total-text {
  color: #fef3c7;
}

.highlight-banner-root.theme-police .highlight-banner-main {
  background: var(--text-primary-dark);
}

.highlight-banner-root.theme-police .highlight-banner-tag {
  background: #38bdf8;
  color: var(--text-primary-dark);
}

.highlight-banner-root.theme-police .highlight-banner-total-num {
  color: #fde047;
}

.highlight-banner-root.theme-police .highlight-banner-total-text {
  color: #e0f2fe;
}

@media (max-width: 768px) {
  .highlight-banner-root {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .highlight-banner-wrap {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .highlight-banner-top {
    padding: 10px 10px 8px;
  }

  .highlight-banner-main {
    padding: clamp(16px, 5vw, 24px) 10px clamp(18px, 5vw, 26px);
  }

  .highlight-banner-bottom {
    padding: 12px 10px 14px;
  }
}

@media (max-width: 480px) {
  .highlight-banner-top-inner {
    gap: 6px;
  }

  .highlight-banner-top-badge {
    padding: 5px 10px;
  }
}