@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --primary-color: #1B2028;
    --secondary-color: #083B66;
    --tertiary-color: #fff;
    --quaternary-color: #007C83;
    --quinary-color: #282828;
    /* Kuwait National Theme & JobNest Brand */
    /* Kuwait theme: JobNest Blue + Deep Teal */
    --kw-blue: #0866C6;
    --kw-teal: #007C83;
    --kw-blue-dark: #083B66;
    --kw-teal-light: #E8F7F6;
    --kw-bg-light: #F4F8FC;
    /* Outer page background for every page except Login / Registration
       (applied by menu/page_background.php): a light grey with a faint
       Kuwait teal (#007C83) tint, slightly darker than white so the white
       content panels stand out; plus the subtle border + shadow used to
       separate those panels from it. */
    --jn-page-bg: #EEF4F5;
    --jn-panel-border: #E2EAF2;
    --jn-panel-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 6px 18px rgba(16, 42, 67, 0.05);    --kw-gradient: linear-gradient(110deg, #0866C6 0%, #08749B 35%, #007C83 65%, #006B70 100%);
    --jobnest-blue: #0866C6;
    --jobnest-blue-dark: #083B66;
    --kw-green: #007C83;
    --kw-red: #CE1126;
    --kw-white: #FFFFFF;
    --kw-black: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

html {
    height: 100%;
}

/*
 * Sticky footer: body is a column flexbox spanning at least the full
 * viewport, and .site-footer (below) gets margin-top: auto so it's pushed
 * to the bottom of the screen on short pages instead of riding up right
 * under the content. Pages with more content than fits the viewport are
 * unaffected — the extra content just pushes body taller and the page
 * scrolls as before.
 */
body {
    background-color: var(--tertiary-color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Ubuntu', sans-serif;
    overflow-y: scroll;
}

/* Apply only on mobile screens */
@media (max-width: 1024px) {
  /* Reset any existing padding */
  body {
    padding-top: 0;
    margin-top: 0;
  }
  
  /* For devices with safe area support. Pages with the white header give
     the notch padding to the header only; on the body as well it left an
     empty strip above the header. */
  @supports (padding: max(0px)) {
    body:not(:has(.navbar-custom)) {
      padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
    .navbar {
      padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
  }
  
  /* Fallback */
  @supports not (padding: max(0px)) {
    body:not(:has(.navbar-custom)) {
      padding-top: 35px !important;
    }
    .navbar {
      padding-top: 35px !important;
    }
  }
}
/*@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top) !important;
  }
}

@supports (top: env(safe-area-inset-top)) {
  .navbar {
    top: env(safe-area-inset-top) !important;
  }
}*/

.navbar-custom {
    background-color: #ffffff;
    padding: 20px 10px;
  }

  .navbar-brand .logo{
    width: 180px;
  }

  @media (max-width: 991px) {
    .navbar-brand .logo{
    width: 100px;
  }
  }

  .navbar-nav{
    gap: 20px;
  }

  .navbar-nav .nav-link {
    color: #0000;
    margin-right: 1rem;
    font-size: 1rem;
  }

  .nav-item a{
    color:#000 !important;
  }


  .navbar-nav .active,
  .navbar-nav a:hover {
    color: var(--kw-teal) !important;
  }

  .navbar-nav .nav-link.active {
    color: #ffffff !important;
    font-weight: 700;
    background: var(--secondary-color); /* same navy as the Dashboard button (.btn-blue) */
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 2px 8px rgba(8, 59, 102, 0.22);
    animation: navActivePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .navbar-nav .nav-link.active:hover {
    color: #ffffff !important;
  }
  @keyframes navActivePop {
    0%   { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes navActiveGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 124, 131, 0.35); }
    50%      { box-shadow: 0 4px 20px rgba(0, 124, 131, 0.6); }
  }
  @media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link.active { animation: none; }
  }
  @media (max-width: 991px) {
    .navbar-nav .nav-link.active {
      display: inline-block;
      padding: 6px 14px;
    }
  }
  .navbar-nav .nav-link:last-child {
    margin-right: 0;
  }


  .navbar-toggler {
    border: none;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-toggler spane{
    color: var(--secondary-color);
    background: var(--secondary-color);
  }

  @media (max-width: 992px) {
    .navbar-nav .nav-link {
      margin-left: 1rem;
      font-size: 1rem;
    }

    .navbar-icons {
      margin-left: 1rem !important;
    }

    
  }

  @media (max-width: 768px) {
    .navbar-nav .nav-link {
      font-size: 1rem;
      margin-left: 0.8rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }

    .navbar-nav{
      gap: 5px;
    }
  
  }

  @media (max-width: 576px) {
    .navbar-nav .nav-link {
      font-size: 0.875rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  @media (max-width: 480px) {
    .navbar-nav .nav-link {
      font-size: 0.75rem;
    }

    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  @media (max-width: 320px) {
    .navbar-nav .nav-link {
      font-size: 0.625rem;
    }
    .navbar-icons {
      margin-left: 0.8rem !important;
    }
  }

  .content{
    margin-top: 10px;
  }

.btn-blue{
  background: var(--secondary-color);
  padding: 5px 8px;
  color: #fff;
  border-radius: 8px;
}

.btn-blue-outline{
  border: 1px solid var(--secondary-color);
  background: #fff;
  padding: 5px 8px;
  color: var(--secondary-color);
  border-radius: 8px;
}

/* Hero section */
.hero{
  padding: 28px 16px 56px;
  text-align: center;
}

.hero-title{
  /*color: #075A9E;*/
  color: #fafafa;
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-subtitle{
  margin-top: 6px;
  /*color: #4f5b66;*/
  color: #fafafa;
}

.hero-count{
  font-weight: 700;
}

.hero-search{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr auto;
  gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.hero-search .form-control{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d6dde3;
  padding: 0 14px 0 40px;
}

.search-with-icon{ position: relative; }
.search-with-icon:before{
  content: "\1F50D"; /* magnifying glass */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8aa0ae;
  font-size: 16px;
}

.btn-search{
  background: var(--kw-gradient);
  color: #fff;
  border: none;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Hover State - Kuwait Deep Teal Accent */
.btn-search:hover,
.btn-search:focus {
    background: linear-gradient(110deg, #08749B 0%, #007C83 50%, #006B70 100%);
    color: #ffffff !important;
    border-color: #007C83;
    box-shadow: 0 4px 12px rgba(0, 124, 131, 0.25);
}

/* Responsive layout */
@media (max-width: 768px){
  .hero{
    padding-top: 36px;
  }
  .hero-search{
    grid-template-columns: 1fr;
    max-width: 290px;
  }
  .hero-search .form-control{
    padding-left: 40px;
  }
  .btn-search{ width: 100%; }
}

/* Jobs board */
.jobs-board{
  padding: 0px;
  /* starts right at the hero's bottom edge (the logo strip sits inside the
     hero, so there is no strip overhang to tuck under any more) */
  margin-top: 0;

}

.jobs-toolbar{
  position: sticky;
  top: 0;
  background: var(--kw-gradient);
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 10;
  border-bottom: 2px solid #083B66;
}

.toolbar-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-select{
  appearance: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 6px 32px 6px 12px;
  min-width: 150px;
  cursor: pointer;
  outline-offset: none;
  outline: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
.filter-select option{ color: #083B66; }
.refresh-btn{
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.2s ease;
}
.refresh-btn:hover {
  background: #083B66;
  transform: rotate(180deg);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

  .jobs-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
  }

  .toolbar-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .filter-select {
    width: 100%;
    min-width: unset;
    padding: 10px 40px 10px 14px;
    font-size: 14px;
  }

  .foreign-job-btn {
    width: auto;
    flex: 1 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .refresh-btn {
    align-self: flex-end;
    width: 36px;
    height: 36px;
  }
}

.jobs-layout{
  margin-top: 16px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 16px;
  /* Opt out of grid's default item stretch: with it on, once the sidebar-
     height sync script (further down the page) gives .jobs-sidebar an
     explicit height, that height would count as this row's own size too
     and get stretched right back onto the job listings column — fighting
     the script and leaving stale, inaccurate heights when the column's
     content shrinks. Start-aligned, each column is simply its own natural
     size, and the script is the only thing that resizes the sidebar. */
  align-items: start;
}

.jobs-sidebar{
  background: #e8f0f5;
  border-radius: 10px;
  padding: 8px;
  /* Baseline height for before JS has measured the job listings column
     (see the sidebar-height sync script below) and as the safe fallback
     if it can't run. .sidebar-list's own max-height keeps this from
     growing unbounded to fit all categories unscrolled, which would
     otherwise inflate this box (and, via the grid, the column next to
     it) far past a sensible size. */
  min-height: 650px;
  /* Hard cap so the box can never grow taller than the screen — the sync
     script below keeps it within this too, this is the CSS-only fallback
     (no JS, or before the script's first run). Keeps the category list
     scrolling inside the box instead of the box spilling past the
     viewport, which is what made it look "unlimited". */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 20px;
}

.sticky-scroller{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  background: var(--kw-gradient);
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 124, 131, 0.25);
}
.sidebar-list{
  flex: 1 1 auto;
  min-height: 0;
  /* Safe baseline cap — the sync script below raises this (inline style)
     once it knows the job listings column's real height, so the list can
     fill it exactly instead of leaving a gap under a fixed-height list. */
  max-height: 600px;
  overflow: auto;
  padding: 8px 4px;
}
.sidebar-item{
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #d6dde3;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #083B66;
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background: #F0FAF9;
  border-color: #007C83;
  color: #007C83;
}

.sidebar-item.active{
  background: #E8F7F6 !important;
  border-color: #007C83 !important;
  color: #007C83 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 124, 131, 0.18) !important;
}

.sidebar-item i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: #eaf4ff;
  color: #0866C6;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sidebar-item.active i {
  background-color: #D3EFEC !important;
  color: #007C83 !important;
}

.sidebar-item:hover i {
  background-color: #D3EFEC;
  color: #007C83;
}

/* Mobile spacing */
/*@media (max-width: 991px) {
  .sidebar-item {
    width: 90%;
  }
}*/

.jobs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.job-card{
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #d6dde3;
  padding: 20px 16px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
}

/* Urgent & New Job Badges and Card Frames - Bright Vibrant Red */
.urgent-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 5;
  background: #DC2626 !important; /* Bright vibrant red */
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5) !important;
  line-height: 1.2;
  pointer-events: none;
}

.urgent-badge.new-badge,
.new-badge {
  top: 8px;
  right: 8px !important;
  left: auto !important;
  background: #007C83 !important; /* Vibrant Kuwait Green */
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 124, 131, 0.45) !important;
}

@media (max-width: 480px) {
  .urgent-badge {
    font-size: 8px !important;
    padding: 2px 5px !important;
    top: 6px;
    left: 6px;
  }
  .urgent-badge.new-badge,
  .new-badge {
    top: 6px;
    right: 6px !important;
    left: auto !important;
  }
}

/* Card frames for Urgent jobs - Bright Vibrant RED */
.job-card.urgent-job,
.job-card2.urgent-job {
  position: relative;
  border: 2px solid #DC2626 !important;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25) !important;
}

.job-card.urgent-job:hover,
.job-card2.urgent-job:hover {
  border-color: #DC2626 !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45) !important;
}

/* Card frames for New jobs (not urgent) - Vibrant GREEN */
.job-card2.highlight-job:not(.urgent-job),
.job-card.highlight-job:not(.urgent-job) {
  position: relative;
  border: 1.5px solid #007C83 !important;
  box-shadow: 0 4px 14px rgba(0, 124, 131, 0.18) !important;
}

.job-card2.highlight-job:not(.urgent-job):hover,
.job-card.highlight-job:not(.urgent-job):hover {
  border-color: #007C83 !important;
  box-shadow: 0 8px 24px rgba(0, 124, 131, 0.3) !important;
}

.job-logo-container{
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.job-logo{ 
  width: 60px; 
  height: 60px; 
  object-fit: contain; 
  border-radius: 8px;
}
/* Add margin-top only on mobile devices */
@media (max-width: 768px) {
  .job-logo {
    margin-top: 10px;
  }
}
.job-title{ 
  font-size: 1rem; 
  font-weight: 600;
  margin: 0 0 8px 0; 
  color: #1a1a1a;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile only - limit title to 3 lines */
@media (max-width: 767.98px){
    .job-title{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: calc(1.4em * 3);
    }
}

.job-meta{ 
  color: #6a7a86; 
  font-size: 0.9rem; 
  margin-bottom: 6px;
  font-weight: 500;
}
.job-company{
  color: #1a1a1a;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: 500;
}

/* Hide on mobile devices */
@media (max-width: 768px) {
  .job-company {
    display: none;
  }
}

.job-closing{ 
  color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  right: 12px;
}

  @media (max-width: 768px) {
  .job-closing{ 
    display: none;
      /*color: #8aa0ae; 
      font-size: 0.6rem; 
      position: absolute;
      bottom: 12px;
      right: 12px;*/
    }
}

.job-foot{ 
  color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  text-align: left;
}

  @media (max-width: 768px) {
  .job-foot{ 
    display: none;
  /*color: #8aa0ae; 
  font-size: 0.6rem; 
  position: absolute;
  bottom: 12px;
  text-align: left;*/
}
}

/* Jobs responsive */
@media (max-width: 1200px){
  .jobs-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px){
  .jobs-layout{ grid-template-columns: 1fr; }
  .jobs-grid{ grid-template-columns: repeat(2, 1fr); }
  .sidebar-list{ 
    max-height: 420px; 
  }
  .jobs-sidebar{
    padding: 8px;
    position:static;
    min-height: auto;
    max-height: 100%;
  }
}
@media (max-width: 576px){
  .filter-chip{ padding: 6px 10px; }
  .jobs-grid{ grid-template-columns: 1fr; }
  .sidebar-list{ max-height: 280px; }
  .sidebar-list{ 
    max-height: 420px; 
  }
}

/* Site Footer */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0866C6, #075A9E 60%, #083B66);
  padding: 16px 20px 10px;
  color: #fff;
  overflow: hidden;
  font-family: inherit;
  /* Sticky footer: absorbs any leftover space in the body flexbox so it
     sits at the bottom of the viewport on short pages. Collapses to 0 (no
     effect) once the content above it already fills the viewport. */
  margin-top: auto;
  flex-shrink: 0;
}
.site-footer .footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  gap: 12px;
}
.site-footer .footer-left {
  display: flex;
  align-items: center;
}
.site-footer .footer-logo {
  height: 40px;
  width: auto;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.site-footer .footer-logo:hover {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(255,255,255,0.4));
}
.site-footer .footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}
.site-footer .footer-link {
  color: #fff;
  opacity: 0.95;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}
.site-footer .footer-link:hover {
  opacity: 1;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.site-footer .footer-right {
  display: flex;
  gap: 8px;
}
.site-footer .social {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.15);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
}
.site-footer .social:hover { transform: translateY(-2px); background: rgba(255,255,255,0.3); }

/* Keep footer content clear of the fixed live-chat bubble (ClickConnector,
   ~60px at 20px from the bottom-right corner): side by side, the social
   icons stop short of it; stacked, the footer ends above it. */
@media (min-width: 993px) {
  .site-footer .footer-right { margin-right: 72px; }
}
@media (max-width: 992px) {
  .site-footer { padding-bottom: 84px; }
}

.site-footer .footer-copy {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 10px auto 0;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 8px;
}

@media (max-width: 992px) {
  .site-footer .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 10px 0;
  }
}
@media (max-width: 576px) {
  .site-footer .footer-nav {
    gap: 6px 10px;
  }
  .site-footer .footer-link {
    font-size: 12px;
  }
}

/* WhatsApp Support Button */
.whatsapp-support{
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.whatsapp-support a{
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s ease;
}

.whatsapp-support a:hover{
  transform: scale(1.1);
  color: #fff;
}

.support-text{
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px){
  .jobs-toolbar{
    padding: 8px;
    flex-direction: column;
    gap: 12px;
  }
  
  .toolbar-group{
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .filter-select{
    min-width: 120px;
    font-size: 14px;
  }
  
  .whatsapp-support{
    right: 15px;
    bottom: 15px;
  }
  
  .whatsapp-support a{
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  
  .support-text{
    font-size: 10px;
  }
}

@media (max-width: 576px){
  .jobs-board{
    padding: 0;
  }
  
  .jobs-toolbar{
    margin: 0;
    border-radius: 0;
  }
  
  .filter-select{
    min-width: 100px;
    padding: 4px 24px 4px 8px;
    font-size: 12px;
  }
  
  .jobs-layout{
    margin-top: 12px;
  }
  
  .jobs-grid{
    gap: 12px;
  }
  
  .job-card{
    padding: 12px;
  }
  
  .job-title{
    font-size: 0.9rem;
  }
  
  .job-meta{
    font-size: 0.8rem;
  }
}


.page-header{
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.page-header-img{
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-content{
  padding: 50px 0px;
}

.page-content .card{
  border: none;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
}

.page-content .card-body{
  padding: 20px;
}

.advertise-img{
  width: 100%;
}

@media (max-width: 991px) {
  .advertise-img-wrap-empty {
    display: none;
  }
}

/* Job list full-width card (detail row) */
.joblist-card{
  display: grid;
  grid-template-columns: 260px 1fr auto; /* wider left column */
  grid-template-rows: auto auto;       /* top row (title+right), bottom row (meta+actions) */
  gap: 16px 20px;
  align-items: start;
  padding: 18px 22px;
}

.joblist-left{ display: flex; align-items: center; justify-content: center;}
.joblist-logo{ width: 180px; height: auto; object-fit: contain;margin-top: 50px; }

.joblist-main{ width: 100%; grid-column: 2 / 3; grid-row: 1 / 3; }
.joblist-right{ grid-column: 3 / 4; grid-row: 1 / 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: #1b3a4b; font-weight: 500; }
.joblist-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.joblist-title-badge{
  background: #0d4061;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
}
.joblist-top-right{ display: flex; gap: 18px; color: #1b3a4b; font-size: 0.95rem; flex-wrap: wrap; font-weight: 500; }
.joblist-sub{ color: #4f5b66; margin-top: 6px; font-weight: 600; }
.joblist-company{ margin-top: 6px; font-weight: 700; }
.joblist-meta{ display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; color: #1b3a4b; align-items: center; }
.joblist-meta i{ color: #075A9E; margin-right: 6px; }
.joblist-salary{ font-weight: 700; }

.joblist-actions{ display: flex; flex-direction: row; gap: 12px; align-self: end; justify-self: end; grid-column: 3 / 4; grid-row: 2 / 3; }
.joblist-actions .btn{ text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 12px 20px; font-weight: 600; white-space: nowrap; font-size: 0.95rem; }
.btn-apply{ background: #0866C6; color: #fff; }
.btn-print{ background: #CE1126; color: #fff; }
.btn-share{ background: #007C83; color: #fff; }
.joblist-actions .btn i{ font-size: 16px; }

/* Mobile responsiveness for job list card */
@media (max-width: 992px){
  .joblist-card{ grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto; padding: 16px; }
  .joblist-main{ grid-column: 2 / 3; grid-row: 1 / 3; }
  .joblist-right{ grid-column: 1 / -1; grid-row: 1 / 2; align-items: flex-start; gap: 4px; font-size: 0.9rem; }
  .joblist-actions{ grid-column: 1 / -1; grid-row: 3 / 4; justify-content: flex-end; }
  .joblist-logo{ width: 150px; }
}

@media (max-width: 768px){
  .joblist-logo{ width: 110px; margin-top: 0px;}
  .joblist-top-right{ font-size: 0.85rem; }
  .joblist-actions .btn{ padding: 10px 16px; font-size: 0.9rem; }
}

@media (max-width: 576px){
  .joblist-card{ 
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto auto; 
    grid-template-areas: 
      "left"
      "main"
      "right"
      "actions"; 
    padding: 14px; 
    gap: 12px; 
  }
  .joblist-left{ display: flex; grid-area: left;}
  .joblist-logo{ width: 130px; margin-bottom: 6px;margin-top: 0px; }
  .joblist-main{ grid-column: 1 / -1; grid-row: auto; grid-area: main; }
  .joblist-right{ grid-column: 1 / -1; align-items: flex-start; grid-area: right; }
  .joblist-title-badge{ font-size: 0.95rem; padding: 5px 10px; }
  .joblist-sub{ font-size: 0.95rem; }
  .joblist-company{ font-size: 1rem; }
  .joblist-meta{ gap: 12px; font-size: 0.9rem; }
  .joblist-salary{ display: inline-block; margin-top: 4px; }
  .joblist-actions{ grid-column: 1 / -1; grid-area: actions; justify-content: stretch; flex-wrap: wrap; gap: 8px; }
  .joblist-actions .btn{ flex: 1 1 auto; text-align: center; justify-content: center; min-width: 120px; padding: 10px 12px; font-size: 0.85rem; }
}

@media (max-width: 400px){
  .joblist-card{ padding: 12px; }
  .joblist-logo{ width: 110px; }
  .joblist-title-badge{ font-size: 0.9rem; padding: 4px 8px; }
  .joblist-meta{ gap: 10px; font-size: 0.85rem; }
  .joblist-actions .btn{ padding: 8px 10px; font-size: 0.8rem; min-width: 100px; }
}

.back-to-job-list{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(110deg, #0866C6 0%, #08749B 35%, #007C83 65%, #006B70 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 0px 25px 25px 0px;
  box-shadow: 0 4px 15px rgba(13, 100, 146, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}

.back-to-job-list::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.back-to-job-list:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 100, 146, 0.4);
  color: #fff;
  text-decoration: none;
}

.back-to-job-list:hover::before{
  left: 100%;
}

.back-to-job-list i{
  font-size: 16px;
  transition: transform 0.3s ease;
}

.back-to-job-list:hover i{
  transform: translateX(-3px);
}

/* Mobile responsiveness for back button */
@media (max-width: 768px){
  .back-to-job-list{
    padding: 10px 16px;
    font-size: 0.9rem;
    margin: 15px 0;
  }
}

@media (max-width: 576px){
  .back-to-job-list{
    padding: 8px 14px;
    font-size: 0.85rem;
    margin: 10px 0;
  }
}

/* Action content section */
.action-content{
  text-align: center;
}

.action-content .btn{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  white-space: nowrap;
  font-size: 1rem;
  margin: 8px 0;
  min-width: 200px;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-content .btn i{
  font-size: 18px;
}

.btn-apply-email{ 
  background: #0866C6; 
  color: #fff; 
}

.btn-apply-email:hover{ 
  background: #0a5499; 
  color: #fff; 
  transform: translateY(-2px);
}

.btn-share{ 
  background: #007C83; 
  color: #fff; 
}

.btn-share:hover{ 
  background: #007C83; 
  color: #fff; 
  transform: translateY(-2px);
}

.btn-print{ 
  background: #CE1126; 
  color: #fff; 
}

.btn-print:hover{ 
  background: #A50E1F; 
  color: #fff; 
  transform: translateY(-2px);
}

/* Mobile responsiveness for action buttons */
@media (max-width: 768px){
  .action-content{
    padding: 30px 0;
  }
  
  .action-content .btn{
    min-width: 180px;
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 576px){
  .action-content .btn{
    min-width: 160px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* Official colors */
.social.facebook { color: #ffffff; }   /* Facebook Blue */
.social.x        { color: #ffffff; }   /* X (Twitter) Black */
.social.linkedin { color: #ffffff; }   /* LinkedIn Blue */
.social.instagram{ color: #ffffff; }
.social.tiktok   { color: #ffffff; }

/*My Css*/

/* Default → Mobile First (1 column) */
#job-listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  #job-listings {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 992px) {
  #job-listings {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Hidden by default */
.mobile-login-buttons {
  display: none;
}

/* MOBILE + TABLET: the header menu is collapsed behind the hamburger
   below 1200px (navbar-expand-xl), so these stay next to it until then */
@media (max-width: 1199.98px) {

  .mobile-login-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
  }

  /* make buttons look like compact pills */
  .mobile-login-buttons button {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  /* Recruiter (outline style refinement) */
  .mobile-login-buttons .btn-blue-outline {
    background: transparent;
    border: 1px solid #083B66;
    color: #083B66;
  }

  .mobile-login-buttons .btn-blue-outline:active {
    background: #083B66;
    color: #fff;
  }

  /* Jobseeker (primary button) */
  .mobile-login-buttons .btn-blue {
    background: #083B66;
    color: #fff;
  }

  .mobile-login-buttons .btn-blue:active {
    opacity: 0.85;
  }
}

/*Foreign Job*/

.foreign-job-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #0866C6;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  width: 200px;
}

.foreign-job-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/*end*/

/*Add more button*/

.btn-add-education{

    background:#0866C6;

    color:white;

    font-size:11px !important;

    padding:4px 10px;

    border-radius:5px;

    border:1px solid #0866C6;

    display:inline-flex;

    align-items:center;

    gap:5px;

    line-height:1;

    transition:0.3s;

}


.btn-add-education i{

    font-size:10px;

}


.btn-add-education:hover{

    background:#0288D1;

    border-color:#0288D1;

    color:white;

}

.btn-remove-education{

    position:absolute;

    top:8px;

    right:8px;

    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#CE1126;

    color:white;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.3s;

}


.btn-remove-education:hover{

    background:#A50E1F;

    transform:scale(1.1);

}

.btn-remove-experience{

    position:absolute;

    top:8px;

    right:8px;

    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#CE1126;

    color:white;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.3s;

}


.btn-remove-experience:hover{

    background:#A50E1F;

    transform:scale(1.1);

}

.password-input-wrap{
    position:relative;
}

.password-toggle{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#777;
}

.password-toggle:hover{
    color:#0d6efd;
}


/*3 CV*/

.cv-actions{
    margin-top:10px;
    display:flex;
    gap:8px;
}

.cv-btn{
    border:none;
    background:#bcddf7;
    color:#1d4f73;
    font-size:12px;
    padding:5px 12px;
    border-radius:6px;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:5px;
    transition:0.3s;
}

.cv-btn:hover{
    background:#9fcceb;
    color:#123b55;
}

.download-btn i,
.delete-btn i{
    font-size:11px;
}

.primary-badge{
    color:#1d4f73;
    padding:3px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    display:inline-block;
}

/*End*/

/* Select2 main box */
#preferredJobCategory + .select2-container .select2-selection--multiple {
    min-height: 45px;
    border-radius: 10px;
    border: 1px solid #ced4da;
    padding: 5px 8px;
}

/* Selected tags */
#preferredJobCategory + .select2-container .select2-selection__choice {
    border-radius: 8px;
    padding: 4px 8px;
}

/* Search input inside Select2 */
#preferredJobCategory + .select2-container .select2-search__field {
    height: 30px;
}

/* Focus effect */
#preferredJobCategory + .select2-container.select2-container--focus 
.select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* Fix Select2 selected text overlap with close button */
#preferredJobCategory + .select2-container .select2-selection__choice {
    padding-left: 28px !important;
    position: relative;
}

/* Position close button */
#preferredJobCategory + .select2-container .select2-selection__choice__remove {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
}

/* Select2 error border */
.select2-selection.error {
    border: 1px solid red !important;
}

/*Search Fields*/

.position-relative {
    position: relative;
}

/* 2. Dropdown styling */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 5px;
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f8fafc;
    color: #007bff;
}

.jobnest-loading {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(7, 90, 158, 0.15);
}

/*Video CV*/

/* Base Card Layout */
    .card {
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e5e7eb;
    }

    /* Card Header */
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .card-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #1f2937;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .badge-gray {
      background-color: #f3f4f6;
      color: #6b7280;
    }

    .badge-optional {
      background-color: #eff6ff;
      color: #2563eb;
    }

    .badge-boost {
      background-color: #E8F7F6;
      color: #007C83;
    }

    /* -------------------------------------------------- */
    /* STATE 1: UPLOAD DROPZONE UI                         */
    /* -------------------------------------------------- */
    .upload-dropzone {
      border: 2px dashed #d1d5db;
      border-radius: 8px;
      padding: 24px 16px;
      text-align: center;
      background-color: #fafafa;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .upload-dropzone:hover {
      border-color: #2563eb;
      background-color: #f0f7ff;
    }

    .upload-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .dropzone-text {
      font-size: 13px;
      color: #4b5563;
      margin: 0 0 10px 0;
    }

    .dropzone-text strong {
      color: #111827;
    }

    .btn-browse {
      background-color: #2563eb;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .btn-browse:hover {
      background-color: #1d4ed8;
    }

    .file-limits {
      font-size: 11px;
      color: #9ca3af;
      margin-top: 10px;
    }

    .file-input-hidden {
      display: none;
    }

    /* -------------------------------------------------- */
    /* STATE 2: UPLOADED PREVIEW UI                        */
    /* -------------------------------------------------- */
    .video-preview-wrapper {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      background-color: #000000;
      aspect-ratio: 16 / 9;
    }

    .video-preview-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .file-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      padding: 8px 12px;
      background-color: #f9fafb;
      border-radius: 6px;
      border: 1px solid #f3f4f6;
    }

    .file-name {
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }

    .file-size {
      font-size: 11px;
      color: #9ca3af;
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .action-buttons .btn-secondary {
      flex: 1;
      background-color: #ffffff;
      border: 1px solid #d1d5db;
      color: #374151;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
    }

    .action-buttons .btn-secondary:hover {
      background-color: #f9fafb;
      border-color: #9ca3af;
    }

    .action-buttons .btn-danger {
      background-color: #ffffff;
      border: 1px solid #FCE8EA;
      color: #CE1126;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
    }

    .action-buttons .btn-danger:hover {
      background-color: #FCE8EA;
    }

    /* Tip Box */
    .tip-box {
      margin-top: 14px;
      padding: 10px 12px;
      background-color: #FCE8EA;
      border: 1px solid #FCE8EA;
      border-radius: 6px;
      font-size: 12px;
      color: #A50E1F;
      display: flex;
      align-items: center;
      gap: 6px;
    }


/*Subscription*/

.nav-highlight-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #DC2626 !important; /* Bright vibrant red */
  color: #ffffff !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  line-height: 1.1;
  animation: pulse-ring 1.8s infinite;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.75);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

/* ==========================================================
   Kuwait theme: Bootstrap semantic colors
   JobNest blue stays the primary brand color; Kuwait green
   is "success", Kuwait red is "danger", black is "dark".
   ========================================================== */
:root {
    --bs-success: #007C83;
    --bs-success-rgb: 0, 124, 131;
    --bs-success-text-emphasis: #00666C;
    --bs-success-bg-subtle: #E8F7F6;
    --bs-success-border-subtle: #C4E8E5;
    --bs-danger: #CE1126;
    --bs-danger-rgb: 206, 17, 38;
    --bs-danger-text-emphasis: #A50E1F;
    --bs-danger-bg-subtle: #FCE8EA;
    --bs-danger-border-subtle: #F5C2C8;
    --bs-dark: #000000;
    --bs-dark-rgb: 0, 0, 0;
}

.btn-success {
    --bs-btn-bg: #007C83;
    --bs-btn-border-color: #007C83;
    --bs-btn-hover-bg: #00666C;
    --bs-btn-hover-border-color: #00666C;
    --bs-btn-active-bg: #00666C;
    --bs-btn-active-border-color: #00666C;
    --bs-btn-disabled-bg: #007C83;
    --bs-btn-disabled-border-color: #007C83;
    --bs-btn-focus-shadow-rgb: 0, 124, 131;
}
.btn-outline-success {
    --bs-btn-color: #007C83;
    --bs-btn-border-color: #007C83;
    --bs-btn-hover-bg: #007C83;
    --bs-btn-hover-border-color: #007C83;
    --bs-btn-active-bg: #007C83;
    --bs-btn-active-border-color: #007C83;
    --bs-btn-focus-shadow-rgb: 0, 124, 131;
}
.btn-danger {
    --bs-btn-bg: #CE1126;
    --bs-btn-border-color: #CE1126;
    --bs-btn-hover-bg: #A50E1F;
    --bs-btn-hover-border-color: #A50E1F;
    --bs-btn-active-bg: #A50E1F;
    --bs-btn-active-border-color: #A50E1F;
    --bs-btn-disabled-bg: #CE1126;
    --bs-btn-disabled-border-color: #CE1126;
    --bs-btn-focus-shadow-rgb: 206, 17, 38;
}
.btn-outline-danger {
    --bs-btn-color: #CE1126;
    --bs-btn-border-color: #CE1126;
    --bs-btn-hover-bg: #CE1126;
    --bs-btn-hover-border-color: #CE1126;
    --bs-btn-active-bg: #CE1126;
    --bs-btn-active-border-color: #CE1126;
    --bs-btn-focus-shadow-rgb: 206, 17, 38;
}
/* Kuwait has no yellow: warnings use the red family, pending/info stays blue */
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #CE1126;
    --bs-btn-border-color: #CE1126;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #A50E1F;
    --bs-btn-hover-border-color: #A50E1F;
}
.bg-warning { background-color: #FCE8EA !important; color: #A50E1F !important; }
.text-warning { color: #CE1126 !important; }
.alert-warning {
    --bs-alert-color: #A50E1F;
    --bs-alert-bg: #FCE8EA;
    --bs-alert-border-color: #F5C2C8;
}
.alert-success {
    --bs-alert-color: #00666C;
    --bs-alert-bg: #E8F7F6;
    --bs-alert-border-color: #C4E8E5;
}
.alert-danger {
    --bs-alert-color: #A50E1F;
    --bs-alert-bg: #FCE8EA;
    --bs-alert-border-color: #F5C2C8;
}
.form-check-input:checked { background-color: #0866C6; border-color: #0866C6; }
.form-switch .form-check-input:checked { background-color: #007C83; border-color: #007C83; }
.form-control:focus, .form-select:focus {
    border-color: #0866C6;
    box-shadow: 0 0 0 0.2rem rgba(8, 102, 198, 0.18);
}

/* SweetAlert2 defaults (popups that don't set their own button colors) */
div.swal2-popup .swal2-styled.swal2-confirm { background-color: #0866C6; }
div.swal2-popup .swal2-styled.swal2-deny { background-color: #CE1126; }
.swal2-icon.swal2-success { border-color: #007C83 !important; color: #007C83 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #007C83 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(0, 124, 131, 0.3) !important; }
.swal2-icon.swal2-error { border-color: #CE1126 !important; color: #CE1126 !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #CE1126 !important; }
.swal2-timer-progress-bar { background: #007C83 !important; }

/* ==========================================================
   Dashboard banners: Kuwait photo panel (job seeker + recruiter)
   Two photos crossfade on the right side of the banner and
   fade into the JobNest blue -> Kuwait deep teal gradient.
   ========================================================== */
.kw-photo-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}
.kw-photo-panel > span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
    animation: kwPhotoFade 16s ease-in-out infinite;
}
.kw-photo-panel > span:nth-child(2) { animation-delay: -8s; }
.kw-photo-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(8, 59, 102, 0.55) 0%, rgba(8, 102, 198, 0.12) 55%, rgba(0, 124, 131, 0.28) 100%);
}
@keyframes kwPhotoFade {
    0%, 42%  { opacity: 1; }
    50%, 92% { opacity: 0; }
    100%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kw-photo-panel > span { animation: none; }
    .kw-photo-panel > span:nth-child(2) { display: none; }
}
@media (max-width: 767px) {
    .kw-photo-panel {
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .kw-photo-panel::after {
        background: linear-gradient(160deg, rgba(8, 59, 102, 0.92) 0%, rgba(8, 102, 198, 0.82) 55%, rgba(0, 124, 131, 0.7) 100%);
    }
}

/* Header: on laptop/desktop widths up to ~1800px the full nav (language switch,
   login or dashboard buttons) was wider than the screen and caused sideways scroll. */
@media (min-width: 992px) and (max-width: 1799px) {
    .navbar-custom .navbar-nav { gap: 4px; }
    .navbar-custom .navbar-nav .nav-link {
        white-space: nowrap;
        margin-right: 0.25rem;
        font-size: 0.92rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .navbar-custom .navbar-collapse { min-width: 0; flex-wrap: wrap; }
}

/* ==========================================================
   Post Vacancy actions: same Blue -> Deep Teal gradient as the
   homepage Categories header (var(--kw-gradient)). Targets only
   buttons/tabs that lead to recruiters_post_new_vacancy.php.
   ========================================================== */
a.promo-btn[href="recruiters_post_new_vacancy.php"],
a.banner-btn-post[href="recruiters_post_new_vacancy.php"],
a.published-create-btn[href="recruiters_post_new_vacancy.php"],
a.received-create-btn[href="recruiters_post_new_vacancy.php"],
a.dash-quick-post[href="recruiters_post_new_vacancy.php"],
button#send-cv-btn[onclick*="recruiters_post_new_vacancy.php"] {
    background: var(--kw-gradient);
    border-color: transparent;
    color: #fff;
}
a.promo-btn[href="recruiters_post_new_vacancy.php"]:hover,
a.banner-btn-post[href="recruiters_post_new_vacancy.php"]:hover,
a.published-create-btn[href="recruiters_post_new_vacancy.php"]:hover,
a.received-create-btn[href="recruiters_post_new_vacancy.php"]:hover,
a.dash-quick-post[href="recruiters_post_new_vacancy.php"]:hover,
button#send-cv-btn[onclick*="recruiters_post_new_vacancy.php"]:hover {
    background: linear-gradient(110deg, #075A9E 0%, #007C83 60%, #006B70 100%);
    border-color: transparent;
    color: #fff;
}
a.dash-quick-post[href="recruiters_post_new_vacancy.php"] .dash-quick-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
/* navigation: gradient only while the Post Vacancy tab is the active one */
.navbar-nav .nav-link.active[href="recruiters_post_new_vacancy.php"],
.tab-item.active[href="recruiters_post_new_vacancy.php"],
.recruiter-profile-page .tab-item.active[href="recruiters_post_new_vacancy.php"] {
    background: var(--kw-gradient);
    color: #fff;
}

/* ==========================================================
   Kuwait primary actions & selected tabs: same Blue -> Deep Teal
   gradient as the sidebar "Dashboard" item (var(--kw-gradient)).
   Not used for the top header, the Login/Register buttons or the
   homepage Search button. Only background-image is set, so buttons
   with their own inline colour (e.g. red Delete) keep it.
   ========================================================== */
html body .btn-primary.btn-primary,
html body .update-btn.update-btn,
html body .btn-apply.btn-apply,
html body .btn-apply-email.btn-apply-email,
html body .btn-browse.btn-browse,
html body .btn-add-education.btn-add-education,
html body .btn-jobnest.btn-jobnest,
html body .btn-info.btn-info,
html body .jshare-btn--primary.jshare-btn--primary,
html body .avatar-cropper .avc-save.avc-save,
html body .event-details-save.event-details-save,
html body .btn-banner-save.btn-banner-save,
html body .btn-cert-upload.btn-cert-upload,
html body .profile-cta-banner__btn.profile-cta-banner__btn,
html body .vp-act--primary.vp-act--primary,
html body .promo-card .btn-promo.btn-promo,
html body .banner-upload-btn.banner-upload-btn,
html body .cv-choice-popup .cvc-card--upload .cvc-btn.cvc-btn,
html body .faq-support-box .btn-contact.btn-contact,
html body .guide-btn-recruiter.guide-btn-recruiter,
html body .cvp-btn-approve.cvp-btn-approve,
html body #send-msg-btn:not(:disabled),
html body .msg-input button:not(:disabled),
html body .category-tab.category-tab,
html body .testimonial-subnav .t-tab.active.active,
html body .ppl-tab.active.active,
html body .submission-tab.active.active,
html body .category-pill.active.active,
html body .received-status-tab.active.active,
html body .faq-cat-btn.active.active {
    background-image: var(--kw-gradient);
    border-color: transparent;
    color: #fff;
}
html body .btn-primary.btn-primary:hover,
html body .update-btn.update-btn:hover,
html body .btn-apply.btn-apply:hover,
html body .btn-apply-email.btn-apply-email:hover,
html body .btn-browse.btn-browse:hover,
html body .btn-add-education.btn-add-education:hover,
html body .btn-jobnest.btn-jobnest:hover,
html body .btn-info.btn-info:hover,
html body .jshare-btn--primary.jshare-btn--primary:hover,
html body .avatar-cropper .avc-save.avc-save:hover,
html body .event-details-save.event-details-save:hover,
html body .btn-banner-save.btn-banner-save:hover,
html body .btn-cert-upload.btn-cert-upload:hover,
html body .profile-cta-banner__btn.profile-cta-banner__btn:hover,
html body .vp-act--primary.vp-act--primary:hover,
html body .promo-card .btn-promo.btn-promo:hover,
html body .banner-upload-btn.banner-upload-btn:hover,
html body .cv-choice-popup .cvc-card--upload .cvc-btn.cvc-btn:hover,
html body .faq-support-box .btn-contact.btn-contact:hover,
html body .guide-btn-recruiter.guide-btn-recruiter:hover,
html body .cvp-btn-approve.cvp-btn-approve:hover,
html body #send-msg-btn:not(:disabled):hover,
html body .msg-input button:not(:disabled):hover {
    background-image: linear-gradient(110deg, #075A9E 0%, #007C83 60%, #006B70 100%);
    border-color: transparent;
    color: #fff;
}