@media (max-width: 992px) { .sticky-ad { display: none; } }
.website-ad-box { position: relative; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; margin-bottom: 1rem; }
.ad-slide { display: none; }
.ad-slide.active { display: block; }
.ad-banner img { width: 100%; height: 400px; object-fit: cover; }
.ad-content { padding: 15px; text-align: center; }
.new-tag { color: red; font-weight: bold; font-size: 1.2em; }


/* Sidebar Slider Container */
.premium-slider {
    position: relative;
    width: 100%;
    height: 210px;           /* fixed height for all banners */
}

/* Each Slide */
.premium-slider .slide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s ease-in-out;
}

/* Active Slide */
.premium-slider .slide.active {
    display: block;
    opacity: 1;
}

/* Banner Image */
.premium-slider .slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* ensures full image fits inside box */
    border-radius: 6px;
}

/*hhhhhhhhhhhhhhhhhhh*/
.job-card {
    display: flex;
    align-items: center;          /* Center logo vertically */
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-wrap: nowrap;            /* Keep logo + text in one row */
    min-width: 0;                 /* Allow text to shrink inside flex */
}

.logo-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 6px;
}

.flex-grow-1 {
    flex: 1 1 auto;
    min-width: 0;                 /* Allows child divs to shrink inside */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Allow wrapping so text never gets cut off */
.job-title, .job-company, .job-location, .job-dates {
    overflow-wrap: break-word;    /* Break long words if needed */
    word-break: break-word;       /* Support very long company names */
    line-height: 1.2;
    white-space: normal;          /* Allow multiple lines if needed */
}

.job-title {
  font-weight: 700;
  font-size: 1rem;
  color: #0b5ed7;
  text-decoration: none;
  transition: all 0.2s ease;
}

.job-title:hover {
  color: #e31e24;
  /*text-decoration: underline;*/
}

.job-company {
  color: #228B22;  /* Forest Green */
  font-weight: 600;
  font-size: 0.95rem;
}

.job-location, .job-dates {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Badges */
.job-card .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .job-card {
        gap: 8px;
        padding: 8px;
    }

    .logo-container img {
        width: 45px;
        height: 45px;
    }

    .job-title { font-size: 0.85rem; }
    .job-company { font-size: 0.8rem; }
    .job-location, .job-dates { font-size: 0.8rem; }
}



/* Job card dates */
.job-dates {
    display: flex;
    flex-wrap: nowrap;          /* force one line */
    align-items: center;        /* vertical align center */
    gap: 5px;
    font-size: clamp(0.65rem, 0.7vw, 0.82rem); /* responsive font size */
    white-space: nowrap;        /* keep in one line */
    overflow: hidden;           
    text-overflow: ellipsis;    /* if extremely narrow */
    min-width: 0;               /* allow flex-shrink to work */
}

.job-dates span {
    flex-shrink: 1;             /* shrink proportionally */
    min-width: 0;               /* required for ellipsis in flex */
}

.badges {
    display: flex;
    justify-content: space-between; /* left badges | right remaining time */
    align-items: center;
    flex-wrap: wrap;                /* wrap on small screens if needed */
    font-size: 0.75rem;             /* slightly smaller */
    gap: 4px;
}

.badges small {
    flex-shrink: 0;                 /* prevent shrinking */
}

#searchSuggestions li {
  cursor: pointer;
  padding: 10px 15px;
  font-size: 0.9rem;
}

#searchSuggestions li:hover {
  background-color: #198754; /* JobNziza green hover */
  color: #fff;
}

.highlight {
  background-color: yellow;  /* exact letters typed */
  font-weight: 700;
  color: black;
  padding: 0 2px;
  border-radius: 3px;
}



     .job-card {
    display: flex;
    gap: 15px;
    border: 1px solid #e9ecef;
    border-left: 5px solid #1f4e79;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    background: linear-gradient(90deg, rgba(31,78,121,0.05), transparent, rgba(227,30,36,0.05));
}

/* Hover effect */
.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-left-color: #e31e24;
    border-right: 5px solid #e31e24;
}



.ads-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Mobile fix */
@media (max-width: 576px) {
  .ads-container {
    padding: 0 5px;
  }
}

.col-12.my-4 {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*=================smartScrollBtn=====================*/

    #smartScrollBtn {
  position: fixed;        /* Fix it on the screen */
  right: 20px;            /* Distance from right edge */
  bottom: 40px;           /* Distance from bottom edge */
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #198754;    /* Green button to match JobNziza theme */
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;          /* On top of all content */
  display: none;          /* Hidden by default */
  transition: all 0.3s ease;
}

#smartScrollBtn:hover {
  background: #145c32;    /* Darker green on hover */
  transform: scale(1.1);
}

/*============read_job_post.php===================*/

.similar-jobs .list-group-item {
    border-radius: 10px;
    margin-bottom: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.similar-jobs .list-group-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.similar-jobs img {
    flex-shrink: 0;
}

.badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    margin-left: 6px;
}



.job-box {
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.company-logo { width:120px; border:1px solid #ddd; padding:6px; background:#fff; border-radius:8px; }
.share-btns a { margin-right:6px; }
.ad-slide { position: absolute; top:0; left:0; width:100%; opacity:0; transition:opacity 0.8s ease-in-out; z-index:0; }
.ad-slide.active { opacity:1; z-index:1; }
.ad-banner img { width:100%; height:300px; object-fit:cover; border-radius:8px; }
.ad-content { padding:10px; text-align:center; }
.sponsored-badge { position:absolute; top:10px; left:10px; background:#ffc107; color:#000; padding:4px 8px; border-radius:6px; font-weight:700; font-size:12px; }
@media(max-width:991px){ .ad-box { display:none; } }
.employer-box { background:#f8f9fb; border:1px solid #e6e9f0; border-radius:10px; padding:16px 18px; line-height:1.7; font-size:15px; }
.toggle-link { font-size:14px; font-weight:600; color:#0d6efd; text-decoration:none; }
.toggle-link:hover { text-decoration:underline; }
.attachment-card { background:#f8f9fc; border:1px solid #e4e7f2; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.job-box table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.job-box table th,
.job-box table td {
    border: 1px solid #dee2e6;
    padding: 8px;
}

.job-box table th {
    background: #f8f9fa;
    font-weight: 600;
}

.job-summary {
    line-height: 1.6;
    max-height: calc(1.6em * 5); /* EXACTLY 5 LINES */
    overflow: hidden;
}

.page-bg {
    background: linear-gradient(
        270deg,
        rgba(102,16,242,0.05),
        rgba(227,30,36,0.05),
        rgba(34,139,34,0.05)
    );
    padding: 30px 0;
}

/* Main job container */
.job-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.25s ease; /* 🔥 move transition here */
}

/* Smooth hover */
.job-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.job-box {
    border: 1px solid #f1f1f1;
}