/* ============================================================
   ImmigrationCafe Jobs — homepage.css  (v22 — matches approved
   Homepage / Category Page design: navy + amber, Archivo/Inter,
   trust strip, flat utility cards instead of the old blue SaaS look)
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
.icjb {
  --icjb-ink:        #12213A;
  --icjb-paper:      #F7F5EF;
  --icjb-card:       #FFFFFF;
  --icjb-line:       #E4DFD3;
  --icjb-muted:      #5B6472;
  --icjb-amber:      #C98A2C;
  --icjb-amber-hover:#A96F1C;
  --icjb-amber-ink:  #4A2E0A;
  --icjb-amber-bg:   #F5E9D4;
  --icjb-blue:       #12213A;   /* repointed to ink — single accent system, no more multi-hue collars */
  --icjb-blue-bg:    #E9ECF3;
  --icjb-gray:       #5B6472;
  --icjb-pink:       #8A1538;   /* Qatar-flag maroon, used sparingly for Qatar-context badges only */
  --icjb-green:      #2F6E4E;
  --icjb-green-bg:   #E6F3EB;
  --icjb-apply:      #12213A;   /* Apply/View Job button — dark ink, matches approved design */
  --icjb-apply-hover:#0A1626;
  --icjb-radius:     8px;
  --icjb-font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icjb-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icjb-font-data:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-family: var(--icjb-font-body);
  background: var(--icjb-paper);
  color: var(--icjb-ink);
}
.icjb * { box-sizing: border-box; }
.icjb a { color: inherit; text-decoration: none; }

/* ── Trust strip — sits directly under the search bar on every
   page this plugin renders. This is the site's core differentiator
   (verified listings, no fees) and is deliberately unmissable. ── */
.icjb-trust-strip {
  background: var(--icjb-amber);
  color: var(--icjb-ink);
}
.icjb-trust-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 18px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
}
.icjb-trust-strip-inner span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 480px) {
  .icjb-trust-strip-inner { gap: 12px; padding: 8px 12px; font-size: 11.5px; }
}

/* ── Country strip — Browse by Country (UAE / Saudi / Qatar) ── */
.icjb-country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.icjb-country-card {
  background: var(--icjb-ink);
  color: #fff;
  border-radius: var(--icjb-radius);
  padding: 18px;
  position: relative;
  min-height: 84px;
}
.icjb-country-card--photo {
  min-height: 150px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(18,33,58,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icjb-country-card--photo:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(18,33,58,.28); }
.icjb-country-card .icjb-country-arrow {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; transition: background .15s ease;
}
.icjb-country-card--photo:hover .icjb-country-arrow { background: var(--icjb-amber); color: var(--icjb-ink); }
.icjb-country-card .icjb-country-name { font-family: var(--icjb-font-display); font-weight: 800; font-size: 20px; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); display: block; position: relative; z-index: 2; }
.icjb-country-card--photo { background-color: var(--icjb-ink); } /* visible fallback tint while the photo loads, and darkens any lighter photo areas behind the text */
.icjb-country-card .icjb-country-count { color: rgba(255,255,255,.88); font-size: 12.5px; margin-top: 3px; font-weight: 600; }
.icjb-country-card .icjb-country-flag { font-size: 1.6em; display: block; margin-bottom: 6px; }
@media (max-width: 480px) {
  .icjb-country-grid { grid-template-columns: 1fr; }
}

/* ── Layout shell ─────────────────────────────────────────── */
.icjb-inner {
  max-width: 520px;
  margin: 0 auto;
}

/* On mobile, some page templates (e.g. a narrow/sidebar page layout on
   your "All Jobs" page) constrain the theme's content column, which left
   dead white space on both sides of the job cards. This forces the
   plugin's content to break out and use the full device width instead,
   regardless of what container the theme wraps it in. Desktop/tablet are
   unaffected — the 520/720/1180px max-widths above still apply there. */
@media (max-width: 639px) {
  .icjb-inner {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

/* ── Sticky header ────────────────────────────────────────── */
.icjb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 56px;
  background: var(--icjb-card);
  border-bottom: 1px solid var(--icjb-line);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(15,31,61,.06);
}
.icjb-header-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icjb-logo {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--icjb-ink);
}
.icjb-logo span { color: var(--icjb-amber); }

/* ── Search — always visible bar (no hidden drawer) ──────── */
.icjb-search-toggle { display: none; }  /* toggle button hidden — bar is always open */

.icjb-search-drawer {
  background: var(--icjb-card);
  border-bottom: 2px solid var(--icjb-line);
  padding: 10px 18px 12px;
}
.icjb-search-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}
.icjb-search-form input,
.icjb-search-form select {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--icjb-line);
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--icjb-font-body);
  background: var(--icjb-paper);
  color: var(--icjb-ink);
}
.icjb-search-form input:focus,
.icjb-search-form select:focus {
  outline: none;
  border-color: var(--icjb-blue);
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
.icjb-search-form button {
  padding: 10px 20px;
  border: none;
  border-radius: 9px;
  background: var(--icjb-blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s;
}
.icjb-search-form button:hover { background: #1e40af; }

/* ── Results bar ──────────────────────────────────────────── */
.icjb-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.icjb-results-bar h2 { margin: 0; }
.icjb-clear-search {
  font-size: 13px;
  font-weight: 700;
  color: var(--icjb-blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.icjb-clear-search:hover { text-decoration: underline; }

/* ── Hero band ────────────────────────────────────────────── */
.icjb-hero {
  background: var(--icjb-ink);
  padding: 28px 20px 22px;
  text-align: center;
}
.icjb-hero h1 {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: #ffffff;
}
.icjb-hero p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.55;
}

/* ── Sections ─────────────────────────────────────────────── */
.icjb-section {
  padding: 22px 18px 4px;
  scroll-margin-top: 70px;
}
.icjb-related-section {
  border-top: 1px solid var(--icjb-line);
  margin-top: 4px;
  padding-top: 24px;
}
.icjb-section h2 {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--icjb-ink);
}
.icjb-empty { font-size: 14px; color: var(--icjb-muted); }

/* ── Category grid ────────────────────────────────────────── */
/* Mobile: 2-row horizontal slider (swipe for more), never taller than 2 rows.
   Tablet/desktop media queries below switch back to a normal wrapping grid. */
.icjb-cat-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: minmax(148px, 1fr);
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.icjb-cat-grid::-webkit-scrollbar { display: none; }
.icjb-cat-grid .icjb-cat-card { scroll-snap-align: start; }
.icjb-cat-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-radius: var(--icjb-radius);
  padding: 10px 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.icjb-cat-card:hover {
  border-color: var(--icjb-amber);
  transform: translateY(-1px);
}
.icjb-cat-card:active { transform: translateY(0) scale(.98); }

.icjb-cat-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icjb-amber-bg);
  color: var(--icjb-amber-hover);
}
.icjb-cat-icon svg { width: 15px; height: 15px; }

.icjb-cat-text   { min-width: 0; }
.icjb-cat-label  { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icjb-cat-sub    { display: block; font-size: 10px; color: var(--icjb-muted); margin-top: 1px; }

/* ── Job feed ─────────────────────────────────────────────── */
.icjb-job-feed {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 6px;
}

/* ── Job ticket card ──────────────────────────────────────── */
.icjb-ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-left: 4px solid var(--icjb-amber);   /* amber accent stripe, matches approved design */
  border-radius: var(--icjb-radius);
  padding: 14px 14px 14px 12px;
  transition: border-color .15s ease;
}
.icjb-ticket:hover {
  border-color: var(--icjb-amber);
}

/* logo: 56×56 (was 92×92) — smaller but still clear */
.icjb-ticket-logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--icjb-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.icjb-ticket-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.icjb-ticket-logo-fallback {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--icjb-muted);
}

/* text area */
.icjb-ticket-main { flex: 1; min-width: 0; }
.icjb-ticket-title {
  display: block;
  font-size: 15px;           /* was 14.5px */
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.3;
  color: var(--icjb-ink);
}
.icjb-ticket-title:hover { text-decoration: underline; }
.icjb-ticket-company {
  font-size: 13px;           /* was 12px */
  font-weight: 600;
  color: var(--icjb-muted);
  margin-bottom: 9px;
}

/* ── Badges ───────────────────────────────────────────────── */
.icjb-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.icjb-badge {
  font-family: var(--icjb-font-data);
  font-size: 11.5px;         /* was 10.5px — +1px for readability */
  font-weight: 700;          /* was 600 — bolder for contrast */
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Salary badge: brighter background, much deeper ink so text pops */
.icjb-badge-salary {
  background: var(--icjb-amber-bg);   /* #FEF3C7 — softer gold bg */
  color: var(--icjb-amber-ink);       /* #431407 — very dark red-brown, high contrast */
  border: 1px solid #F59E0B;          /* amber border so it reads as "money" */
}
.icjb-badge-visa    { background: var(--icjb-green-bg); color: var(--icjb-green); }
.icjb-badge-self    { background: #F1F5F9; color: var(--icjb-gray); }
.icjb-badge-housing { background: var(--icjb-blue-bg); color: var(--icjb-blue); }
.icjb-badge-expiry  { background: #F8FAFC; color: var(--icjb-muted); border: 1px solid var(--icjb-line); }
.icjb-badge-jobtype.icjb-jobtype-full-time { background: #DCFCE7; color: #15803D; }
.icjb-badge-jobtype.icjb-jobtype-part-time { background: var(--icjb-blue-bg); color: var(--icjb-blue); }
.icjb-badge-jobtype.icjb-jobtype-remote    { background: #F3E8FF; color: #7E22CE; }

/* ── Ticket side (location + Apply) ───────────────────────── */
.icjb-ticket-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
.icjb-ticket-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--icjb-green);
  white-space: nowrap;
}
.icjb-ticket-location svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Apply button — GREEN, not dark navy ──────────────────── */
.icjb-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--icjb-apply);   /* #16A34A — clearly visible green */
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s;
}
.icjb-apply-btn:hover { background: var(--icjb-apply-hover); }
.icjb-apply-btn-ticket  { font-size: 13px; padding: 8px 14px; }
.icjb-apply-btn-sidebar { width: 100%; justify-content: center; font-size: 14px; padding: 10px; margin-top: 4px; }
.icjb-apply-btn-sidebar svg { width: 15px; height: 15px; }

/* ── Walk-in Interview: badge, ticket accent, position chips ─ */
.icjb-badge-walkin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--icjb-amber-bg);
  color: var(--icjb-amber-ink);
  border: 1px solid var(--icjb-amber);
}
.icjb-badge-walkin svg { width: 12px; height: 12px; }

.icjb-ticket-walkin { border-left: 3px solid var(--icjb-amber); }

.icjb-position-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.icjb-position-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: #F1F5F9;
  color: var(--icjb-ink);
  border: 1px solid var(--icjb-line);
  white-space: nowrap;
}

.icjb-apply-btn-walkin { background: var(--icjb-amber); color: #1F1100; }
.icjb-apply-btn-walkin:hover { background: var(--icjb-amber-hover); }

/* Homepage banner promoting active walk-in events */
.icjb-walkin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid var(--icjb-amber);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-decoration: none !important;
  transition: transform .12s, box-shadow .15s;
}
.icjb-walkin-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.25); }
.icjb-walkin-banner-icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--icjb-amber);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.icjb-walkin-banner-icon svg { width: 20px; height: 20px; }
.icjb-walkin-banner-text  { flex: 1; min-width: 0; }
.icjb-walkin-banner-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--icjb-ink); }
.icjb-walkin-banner-sub   { display: block; font-size: 12px; font-weight: 600; color: #B45309; margin-top: 2px; }
.icjb-walkin-banner-arrow { flex: 0 0 16px; width: 16px; height: 16px; color: var(--icjb-amber-hover); }

/* Directions + Call/WhatsApp buttons on the single walk-in overview card */
.icjb-directions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  margin-top: -4px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--icjb-blue-bg);
  color: var(--icjb-blue);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}
.icjb-directions-btn svg { width: 15px; height: 15px; }

.icjb-walkin-contact-row { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.icjb-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--icjb-ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
}
.icjb-contact-btn svg { width: 16px; height: 16px; }
.icjb-contact-btn-whatsapp { background: #DCFCE7; color: #15803D; }

/* ── Contact fallback (email/phone boxes) ─────────────────── */
.icjb-apply-contact          { display: flex; flex-direction: column; gap: 6px; }
.icjb-apply-contact-ticket   { align-items: flex-end; }
.icjb-apply-contact-ticket .icjb-apply-contact-box { width: 150px; font-size: 11px; padding: 6px 8px; }
.icjb-apply-contact-sidebar  { margin-top: 4px; }
.icjb-apply-contact-label    { font-size: 12px; color: var(--icjb-muted); }
.icjb-apply-contact-box {
  border: 1px solid var(--icjb-line);
  border-radius: 7px;
  background: var(--icjb-paper);
  color: var(--icjb-ink);
  font-family: var(--icjb-font-data);
  font-size: 12.5px;
  padding: 9px 10px;
  width: 100%;
  text-align: left;
  cursor: text;
}
.icjb-apply-contact-box:focus { outline: 2px solid var(--icjb-amber); outline-offset: 1px; }

/* ── CV tool CTA ──────────────────────────────────────────── */
/* Deliberately styled to contrast with the blue ticket accents and the
   green Apply button below it — warm amber/orange, animated glow, so it
   reads as "do this first" at a single glance. The "Free" badge sits
   inline next to the title (not absolutely positioned) so it can't
   overlap or clip against the sidebar's edge at any card width. */
.icjb-cv-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border: 1.5px solid var(--icjb-amber);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(245,158,11,.18);
  animation: icjb-cv-glow 2.2s ease-in-out infinite;
  transition: transform .15s ease, background .15s ease;
}
@keyframes icjb-cv-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,.18); }
  50%      { box-shadow: 0 2px 20px rgba(245,158,11,.45); }
}
.icjb-cv-cta:hover {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  transform: translateY(-1px);
}
.icjb-cv-cta-icon {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--icjb-amber);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(245,158,11,.4);
}
.icjb-cv-cta-icon svg { width: 17px; height: 17px; }
.icjb-cv-cta-text  { flex: 1; min-width: 0; }
.icjb-cv-cta-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; color: var(--icjb-ink); line-height: 1.3;
}
.icjb-cv-cta-badge {
  display: inline-block;
  background: var(--icjb-amber);
  color: #1F1100;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 20px;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(245,158,11,.4);
}
.icjb-cv-cta-sub   { display: block; font-size: 11.5px; color: #B45309; font-weight: 600; margin-top: 2px; }
.icjb-cv-cta-arrow {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,158,11,.14);
  color: var(--icjb-amber-hover);
  transition: background .15s ease, transform .15s ease;
}
.icjb-cv-cta-arrow svg { width: 11px; height: 11px; }
.icjb-cv-cta:hover .icjb-cv-cta-arrow {
  background: var(--icjb-amber);
  color: #fff;
  transform: translateX(2px);
}

/* ── Companies carousel ───────────────────────────────────── */
.icjb-carousel-wrap { position: relative; }
.icjb-company-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.icjb-company-strip::-webkit-scrollbar { display: none; }
.icjb-company-chip {
  flex: 0 0 auto;
  width: 128px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  transition: box-shadow .15s;
}
.icjb-company-chip:hover { box-shadow: 0 4px 12px rgba(15,31,61,.1); }
.icjb-company-avatar {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: var(--icjb-ink);
  color: #fff;
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.icjb-company-logo {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--icjb-line);
  padding: 5px;
  display: block;
}
.icjb-company-name  { font-size: 11px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.icjb-company-count { font-size: 10px; color: var(--icjb-green); font-weight: 600; }

.icjb-carousel-btn {
  display: none;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--icjb-line);
  background: var(--icjb-card);
  box-shadow: 0 2px 6px rgba(15,31,61,.12);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.icjb-carousel-btn svg { width: 14px; height: 14px; }
.icjb-carousel-prev { left: -14px; }
.icjb-carousel-next { right: -14px; }

/* ── Single job: top band ─────────────────────────────────── */
.icjb-topbar {
  background: var(--icjb-paper);
  border-bottom: 1px solid var(--icjb-line);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.icjb-topbar-category {
  font-size: 12px;
  color: var(--icjb-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  width: 100%;
}

/* ── Single job: detail layout ────────────────────────────── */
.icjb-detail-grid   { display: block; padding: 20px 18px; width: 100%; }
.icjb-detail-main   { font-size: 15px; line-height: 1.75; width: 100%; }
.icjb-detail-main p { margin: 0 0 14px; }
.icjb-detail-sidebar { width: 100%; margin-top: 24px; }
.icjb-overview-card  {
  background: var(--icjb-paper);
  border: 1px solid var(--icjb-line);
  border-radius: var(--icjb-radius);
  padding: 22px;
}
.icjb-overview-heading { font-family: var(--icjb-font-display); font-weight: 800; font-size: 17px; margin: 0 0 20px; }
.icjb-overview-row     { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.icjb-overview-icon    { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; background: var(--icjb-blue-bg); color: var(--icjb-blue); display: flex; align-items: center; justify-content: center; }
.icjb-overview-icon svg { width: 20px; height: 20px; }
.icjb-overview-icon.icjb-overview-icon-logo { width: 60px; height: 60px; background: #fff; border: 1px solid var(--icjb-line); border-radius: 10px; padding: 4px; }
.icjb-overview-logo    { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.icjb-overview-label   { display: block; font-size: 12.5px; color: var(--icjb-muted); margin-bottom: 3px; }
.icjb-overview-value   { display: block; font-size: 16px; font-weight: 700; color: var(--icjb-ink); }

/* ── Focus styles ─────────────────────────────────────────── */
.icjb a:focus-visible,
.icjb button:focus-visible { outline: 2px solid var(--icjb-amber); outline-offset: 2px; }

/* ── Mobile: narrow wrap ──────────────────────────────────── */
@media (max-width: 420px) {
  .icjb-ticket { flex-wrap: wrap; }
  .icjb-ticket-side {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--icjb-line);
  }
  .icjb-apply-contact-ticket              { align-items: flex-start; }
  .icjb-apply-contact-ticket .icjb-apply-contact-box { width: 130px; }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (min-width: 640px) {
  .icjb-inner,
  .icjb-header-inner,
  .icjb-search-form { max-width: 720px; }
  .icjb-hero h1 { font-size: 26px; }
  .icjb-cat-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .icjb-inner,
  .icjb-header-inner,
  .icjb-search-form { max-width: 1180px; }
  .icjb-header { padding: 0 32px; height: 62px; }
  .icjb-search-drawer { padding: 12px 32px 14px; }
  .icjb-topbar        { padding: 18px 32px; }
  .icjb-detail-grid   { display: grid; grid-template-columns: 1fr 360px; gap: 36px; padding: 36px; }
  .icjb-detail-sidebar { margin-top: 0; }
  .icjb-overview-card  { position: sticky; top: 20px; }
  .icjb-section        { padding: 36px 32px 6px; }
  .icjb-hero           { padding: 48px 32px 36px; }
  .icjb-hero h1        { font-size: 36px; max-width: 720px; margin: 0 auto 10px; }
  .icjb-hero p         { font-size: 16px; max-width: 560px; margin: 0 auto; }
  .icjb-section h2     { font-size: 20px; margin-bottom: 18px; }
  .icjb-cat-grid       { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(6, 1fr); gap: 12px; overflow-x: visible; }
  .icjb-company-chip   { width: 148px; padding: 18px 10px; }
  .icjb-company-avatar,
  .icjb-company-logo   { width: 72px; height: 72px; }
  .icjb-carousel-btn   { display: flex; }
  .icjb-carousel-wrap  { padding: 0 6px; }
  .icjb-ticket-logo    { flex: 0 0 64px; width: 64px; height: 64px; } /* slightly bigger on desktop */
  .icjb-ticket-title   { font-size: 16px; }
  .icjb-ticket-company { font-size: 14px; }
  .icjb-badge          { font-size: 12px; padding: 5px 10px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .icjb-ticket,
  .icjb-company-strip { transition: none; scroll-behavior: auto; }
  .icjb-cv-cta { animation: none; }
}

/* ── Hide theme featured image on single job posts ─────────── */
body.single-icjb_job .post-thumbnail,
body.single-icjb_job .entry-thumbnail,
body.single-icjb_job .wp-post-image,
body.single-icjb_job img.attachment-post-thumbnail,
body.single-icjb_job .featured-image { display: none !important; }

/* ============================================================
   PATCH: Force Apply / View Job button green regardless of
   theme overrides. Using !important intentionally — the theme
   is the only thing that could still win specificity here.
   ============================================================ */
.icjb .icjb-apply-btn,
.icjb-ticket .icjb-apply-btn,
a.icjb-apply-btn {
  background: #16A34A !important;
  color: #ffffff !important;
  border: none !important;
}
.icjb .icjb-apply-btn:hover,
.icjb-ticket .icjb-apply-btn:hover,
a.icjb-apply-btn:hover {
  background: #15803D !important;
  color: #ffffff !important;
}

/* Contract / Freelance badge colours */
.icjb-badge-jobtype.icjb-jobtype-contract  { background: #FEF9C3; color: #854D0E; }
.icjb-badge-jobtype.icjb-jobtype-freelance { background: #F3E8FF; color: #6B21A8; }

/* ============================================================
   DETAIL PAGE: top category + meta bar
   ============================================================ */
.icjb-detail-topbar {
  border-bottom: 1px solid var(--icjb-line);
  background: var(--icjb-card);
  padding-bottom: 0;
}

/* ── Category pills strip ─────────────────────────────────── */
.icjb-cat-pills-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--icjb-line);
}
.icjb-cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.icjb-cat-pills::-webkit-scrollbar { display: none; }

/* Left/right fade-edge hint */
.icjb-pills-fade-left,
.icjb-pills-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 2;
}
.icjb-pills-fade-left  {
  left: 0;
  background: linear-gradient(to right, var(--icjb-card) 0%, transparent 100%);
  opacity: 0;
}
.icjb-pills-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--icjb-card) 0%, transparent 100%);
  opacity: 0;
}

/* Individual pill */
.icjb-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--icjb-line);
  background: var(--icjb-paper);
  color: var(--icjb-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
}
.icjb-cat-pill:hover {
  border-color: var(--icjb-blue);
  color: var(--icjb-blue);
  background: var(--icjb-blue-bg);
}
.icjb-cat-pill--active {
  background: var(--icjb-ink) !important;
  border-color: var(--icjb-ink) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15,31,61,.25);
}

/* Collar colour for inactive pills */
.icjb-cat-pill.icjb-collar-blue:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-blue); color: var(--icjb-blue); background: var(--icjb-blue-bg); }
.icjb-cat-pill.icjb-collar-gray:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-gray); color: var(--icjb-gray); background: #EEF1F5; }
.icjb-cat-pill.icjb-collar-pink:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-pink); color: var(--icjb-pink); background: #FCE8EF; }

.icjb-pill-icon { display: flex; align-items: center; }
.icjb-pill-icon svg { width: 14px; height: 14px; }
.icjb-pill-label { line-height: 1; }
.icjb-pill-count {
  background: rgba(0,0,0,.08);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.icjb-cat-pill--active .icjb-pill-count { background: rgba(255,255,255,.22); }

/* ── Meta strip (category label + type + location + salary) ─ */
.icjb-detail-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 14px;
}
.icjb-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
}
.icjb-meta-chip svg { width: 14px; height: 14px; }
.icjb-meta-chip--cat {
  background: var(--icjb-blue-bg);
  color: var(--icjb-blue);
}
.icjb-meta-chip--loc {
  background: var(--icjb-green-bg);
  color: var(--icjb-green);
}

/* On desktop, constrain the topbar to the content width */
@media (min-width: 1024px) {
  .icjb-cat-pills  { padding: 14px 32px; }
  .icjb-detail-meta-strip { padding: 14px 32px 16px; max-width: 1180px; margin: 0 auto; }
}

/* ============================================================
   v3 PATCH: All 5 fixes from feedback
   ============================================================ */

/* ── FIX 4: Search bar — attractive gradient, compact on mobile ── */
.icjb-search-drawer {
  padding: 14px 16px 16px;
  border-bottom: none;
  background-size: cover;
  background-position: center;
}
.icjb-search-inner {
  max-width: 720px;
  margin: 0 auto;
}
.icjb-search-tagline {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.icjb-search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.icjb-search-form input,
.icjb-search-form select {
  flex: 1;
  min-width: 120px;
  padding: 11px 13px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--icjb-font-body);
  background: rgba(255,255,255,.96);
  color: var(--icjb-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.icjb-search-form input:focus,
.icjb-search-form select:focus {
  outline: 2px solid #FCD34D;
  box-shadow: 0 0 0 4px rgba(252,211,77,.25);
}
.icjb-search-form button {
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: var(--icjb-amber);
  color: #1F1100;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(245,158,11,.4);
  transition: background .15s, transform .1s;
}
.icjb-search-form button:hover { background: var(--icjb-amber-hover); transform: translateY(-1px); }
.icjb-clear-search-inline {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  cursor: pointer;
}
.icjb-clear-search-inline:hover { color: #fff; }
@media (max-width: 480px) {
  .icjb-search-drawer { padding: 10px 14px 12px; }
  .icjb-search-tagline { font-size: 12px; margin-bottom: 8px; }
  .icjb-search-form { gap: 7px; }
  .icjb-search-form input,
  .icjb-search-form select { font-size: 13.5px; padding: 10px 11px; }
  .icjb-search-form button { padding: 10px 16px; font-size: 13.5px; }
}
@media (min-width: 768px) {
  .icjb-search-drawer { padding: 16px 24px 18px; }
  .icjb-search-form { flex-wrap: nowrap; }
}

/* ── FIX 3: Location text — larger and more prominent ─────── */
.icjb-ticket-location {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--icjb-green) !important;
  letter-spacing: .01em;
}
.icjb-ticket-location svg { width: 15px !important; height: 15px !important; }

/* ── "More Jobs" load-more button ────────────────────────── */
.icjb-loadmore-wrap {
  text-align: center;
  padding: 20px 0 8px;
}
.icjb-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--icjb-ink);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15,31,61,.25);
  transition: background .15s, transform .12s, box-shadow .15s;
  font-family: inherit;
}
.icjb-loadmore-btn:hover:not(:disabled) {
  background: var(--icjb-amber-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(169,111,28,.35);
}
.icjb-loadmore-btn:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
}
.icjb-loadmore-btn svg { flex-shrink: 0; }
.icjb-loadmore-btn.is-loading svg { animation: icjb-spin .8s linear infinite; }
@keyframes icjb-spin { to { transform: rotate(360deg); } }

/* ── FIX 2: Company chips — styled as links, hover effect ─── */
a.icjb-company-chip {
  display: block;
  text-decoration: none !important;
  color: var(--icjb-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
a.icjb-company-chip::after {
  content: 'View Jobs →';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--icjb-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 6px 4px;
  transform: translateY(100%);
  transition: transform .2s ease;
}
a.icjb-company-chip:hover::after { transform: translateY(0); }
a.icjb-company-chip:hover {
  box-shadow: 0 6px 20px rgba(15,31,61,.18);
  border-color: var(--icjb-blue);
}

/* ── FIX 5: Related jobs salary badge — fix overflow ─────── */
.icjb-related-section .icjb-badge-row {
  flex-wrap: wrap;
}
.icjb-related-section .icjb-badge-salary {
  white-space: normal !important;
  word-break: break-word;
  max-width: 100%;
}
.icjb-related-section .icjb-ticket {
  flex-wrap: wrap;
}
.icjb-related-section .icjb-ticket-main {
  min-width: 0;
  width: 100%;
}
/* On related jobs, put side below main on narrow screens */
@media (max-width: 540px) {
  .icjb-related-section .icjb-ticket {
    display: block;
  }
  .icjb-related-section .icjb-ticket-side {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed var(--icjb-line);
    width: 100%;
    display: flex;
  }
  .icjb-related-section .icjb-badge-salary {
    font-size: 11px;
  }
}

/* ============================================================
   v14 PATCH: Posted date on tickets, job_type last, mobile margins
   ============================================================ */

/* Posted date row on ticket cards */
.icjb-ticket-posted {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--icjb-muted);
  font-weight: 500;
  margin-top: 7px;
}
.icjb-ticket-posted svg {
  flex-shrink: 0;
  opacity: .7;
}

/* Date chip in detail meta strip */
.icjb-meta-chip--date {
  background: #F1F5F9;
  color: var(--icjb-muted);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
}
.icjb-meta-chip--date svg { width: 13px; height: 13px; opacity: .75; }

/* ── Reduce mobile side margins across all sections ───────── */
@media (max-width: 640px) {
  .icjb-section             { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-ticket              { padding: 12px 10px 12px 8px; gap: 10px; }
  .icjb-ticket-logo         { flex: 0 0 48px; width: 48px; height: 48px; }
  .icjb-search-drawer       { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-detail-meta-strip   { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-cat-pills           { padding-left: 10px; padding-right: 10px; }
  .icjb-detail-grid         { padding: 12px 10px !important; }
  .icjb-overview-card       { padding: 14px 12px; }
  .icjb-npc-wrap,
  .icjb-wrap                { padding-left: 10px !important; padding-right: 10px !important; }
  /* ticket side: tighter on mobile */
  .icjb-ticket-side         { gap: 7px; }
  .icjb-apply-btn-ticket    { font-size: 12px; padding: 7px 11px; }
  /* badge text smaller on very narrow screens */
  .icjb-badge               { font-size: 11px; padding: 3px 8px; }
  .icjb-ticket-title        { font-size: 14px; }
  .icjb-ticket-company      { font-size: 12.5px; }
}

/* ── Country flag emoji ──────────────────────────────────── */
.icjb-flag {
  font-style: normal;
  font-size: 1.75em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
/* Slightly larger in the meta strip chips */
.icjb-meta-chip--loc .icjb-flag { font-size: 1.8em; }
/* In the overview sidebar */
.icjb-overview-value .icjb-flag { font-size: 1.65em; }

/* ── Company page sections (Phase 3) ─────────────────────────── */
.icjb-company-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-radius: var(--icjb-radius);
  padding: 16px;
}
.icjb-info-label { display: block; font-size: 11.5px; color: var(--icjb-muted); text-transform: uppercase; letter-spacing: .03em; }
.icjb-info-value { display: block; font-weight: 700; font-size: 14px; margin-top: 2px; }

.icjb-joblist { display: flex; flex-direction: column; gap: 10px; }
.icjb-ticket-main { flex: 1; }
.icjb-ticket-posted { color: var(--icjb-muted); font-size: 12px; white-space: nowrap; }

.icjb-benefits-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.icjb-benefits-list li { background: var(--icjb-green-bg); color: var(--icjb-green); border-radius: 6px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; }
.icjb-benefits-list li::before { content: "✓ "; }

.icjb-faq-item { border: 1px solid var(--icjb-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; background: var(--icjb-card); }
.icjb-faq-item summary { font-weight: 700; cursor: pointer; }
.icjb-faq-item p { color: var(--icjb-muted); margin: 8px 0 0; font-size: 14px; line-height: 1.55; }

.icjb-company-positions .icjb-empty { padding: 16px; background: var(--icjb-card); border: 1px solid var(--icjb-line); border-radius: var(--icjb-radius); }

/* ── Section head with a "View all" link (Top Companies, Directory) ── */
.icjb-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.icjb-view-all { font-size: 13px; font-weight: 700; color: var(--icjb-amber-hover); white-space: nowrap; }
.icjb-view-all:hover { text-decoration: underline; }

/* ── Company Directory page ─────────────────────────────────── */
.icjb-directory-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; background: var(--icjb-card); border: 1px solid var(--icjb-line); border-radius: var(--icjb-radius); padding: 14px; }
.icjb-directory-filters input[type="text"],
.icjb-directory-filters select { padding: 9px 12px; border: 1px solid var(--icjb-line); border-radius: 6px; font: inherit; font-size: 13.5px; flex: 1; min-width: 160px; }
.icjb-directory-filters button { background: var(--icjb-ink); color: #fff; border: none; padding: 9px 20px; border-radius: 6px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.icjb-directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.icjb-directory-card { background: var(--icjb-card); border: 1px solid var(--icjb-line); border-radius: var(--icjb-radius); padding: 16px; text-align: center; transition: border-color .15s ease; }
.icjb-directory-card:hover { border-color: var(--icjb-amber); }
.icjb-directory-card img,
.icjb-directory-card .icjb-company-avatar { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; margin: 0 auto 8px; display: block; background: var(--icjb-paper); }
.icjb-directory-card .icjb-company-avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--icjb-amber-hover); }
.icjb-directory-card .icjb-dir-name { font-weight: 700; font-size: 14px; }
.icjb-directory-card .icjb-dir-count { color: var(--icjb-muted); font-size: 12px; margin-top: 3px; }
.icjb-directory-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.icjb-directory-pagination a,
.icjb-directory-pagination span { padding: 8px 14px; border: 1px solid var(--icjb-line); border-radius: 6px; font-size: 13px; font-weight: 700; }
.icjb-directory-pagination .current { background: var(--icjb-ink); color: #fff; border-color: var(--icjb-ink); }

/* ── Popular Searches row (under the search bar) ────────────── */
.icjb-popular-searches { margin-top: 12px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icjb-popular-label { color: rgba(255,255,255,.6); font-weight: 600; }
.icjb-popular-searches a { color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: 5px 12px; border-radius: 16px; font-weight: 600; transition: background .15s ease; }
.icjb-popular-searches a:hover { background: rgba(255,255,255,.18); }

/* ── Country tabs on Latest Job Openings ─────────────────────── */
.icjb-country-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.icjb-country-tabs a { font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 16px; background: var(--icjb-card); border: 1px solid var(--icjb-line); color: var(--icjb-muted); }
.icjb-country-tabs a.active { background: var(--icjb-ink); color: #fff; border-color: var(--icjb-ink); }
.icjb-country-tabs a:hover:not(.active) { border-color: var(--icjb-amber); color: var(--icjb-ink); }

/* ── Expired job notice (single job page) ────────────────────── */
.icjb-expired-notice { background: var(--icjb-amber-bg); color: var(--icjb-amber-ink); border: 1px solid var(--icjb-amber); border-radius: var(--icjb-radius); padding: 14px 18px; margin-bottom: 18px; font-weight: 600; font-size: 14.5px; }
.icjb-expired-notice a { color: var(--icjb-amber-hover); text-decoration: underline; font-weight: 700; }


/* Homepage: one block per country, with a "view all" button to the country page. */
.icjb-country-jobs { margin-bottom: 36px; }
.icjb-country-all-link { font-weight: 700; font-size: 14px; color: var(--icjb-ink); text-decoration: none; }
.icjb-country-all-link:hover { text-decoration: underline; }
.icjb-country-more-wrap { text-align: center; margin: 22px 0 6px; }
.icjb-country-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--icjb-ink);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15,31,61,.25);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.icjb-country-more-btn:hover {
  background: var(--icjb-amber-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(169,111,28,.35);
}


/* Browse by Country: plain cards, one row on desktop, two columns on mobile. */
.icjb-cc-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.icjb-cc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-top: 4px solid var(--cc, var(--icjb-ink));
  border-radius: 12px;
  color: var(--icjb-ink) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(18,33,58,.05);
  transition: transform .15s, box-shadow .15s;
}
.icjb-cc:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18,33,58,.12); }
.icjb-cc-flag { font-size: 30px; line-height: 1; }
.icjb-cc-name { font-family: var(--icjb-font-display); font-weight: 800; font-size: 18px; line-height: 1.2; }
.icjb-cc-count { font-size: 14px; color: var(--icjb-muted); }
.icjb-cc-count b { color: var(--icjb-ink); font-size: 22px; font-weight: 800; margin-right: 5px; }
.icjb-cc-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--icjb-blue-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .15s;
}
.icjb-cc:hover .icjb-cc-arrow { background: var(--icjb-amber); }
@media (max-width: 640px) {
  .icjb-cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .icjb-cc { padding: 16px 14px 14px; }
  .icjb-cc-flag { font-size: 26px; }
  .icjb-cc-name { font-size: 16px; }
  .icjb-cc-count b { font-size: 19px; }
  .icjb-cc-arrow { top: 12px; right: 12px; width: 26px; height: 26px; font-size: 13px; }
}


/* Long locations must wrap and never squeeze the job title into a one-letter column. */
.icjb-ticket-main { min-width: 0; }
.icjb-ticket-side { min-width: 0; max-width: 42%; }
.icjb-ticket-location { white-space: normal; text-align: right; overflow-wrap: anywhere; line-height: 1.3; }
@media (max-width: 420px) {
  .icjb-ticket-side { max-width: none; }
  .icjb-ticket-location { flex: 1 1 auto; min-width: 0; text-align: left; }
  .icjb-ticket-side .icjb-apply-btn { flex: 0 0 auto; }
}


/* ============================================================
   v3.0 — NEW HOMEPAGE DESIGN
   Full-width hero · scrolling trust strip · employers · locations ·
   latest jobs · fields · blog
   ============================================================ */

.icjb-home {
  --icjb-heading: #262A6E;   /* indigo section titles */
  --icjb-link:    #1479B5;   /* blue card links */
  --icjb-red:     #C0152F;   /* carousel arrows / accents */
  background: #fff;
  margin: 0;
  padding: 0;
}

/* Stop the full-bleed bars from causing a sideways scrollbar. */
body.icjb-fullbleed { overflow-x: clip; }

/* ── 1. Hero search banner + trust strip touch both screen edges ── */
.icjb-home .icjb-search-drawer,
.icjb-home .icjb-trust-strip,
.icjb > .icjb-search-drawer,
.icjb > .icjb-trust-strip {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  border-radius: 0;
}
.icjb-search-drawer {
  background-color: #12213A;
  background-size: cover;
  background-position: center bottom;
  padding: 22px 16px 24px;
}
.icjb-search-inner { max-width: 1180px; padding: 0 16px; }
.icjb-search-tagline { color: #fff; font-size: 13.5px; font-weight: 600; }
.icjb-search-form { max-width: 760px; }
.icjb-search-form input { border-radius: 4px; box-shadow: none; padding: 12px 14px; }
.icjb-search-form button { border-radius: 8px; padding: 12px 24px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.icjb-popular-searches { margin-top: 14px; }
.icjb-popular-searches a { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
@media (min-width: 768px) {
  .icjb-search-drawer { padding: 28px 24px 30px; }
}

/* Trust strip: amber bar with a slow scrolling line of text. */
.icjb-trust-strip { overflow: hidden; background: var(--icjb-amber); }
.icjb-trust-track { display: flex; width: max-content; animation: icjb-marquee 22s linear infinite; }
.icjb-trust-strip-inner {
  display: flex; flex: 0 0 auto; gap: 34px; flex-wrap: nowrap;
  max-width: none; margin: 0; padding: 10px 17px; font-size: 12.5px; font-weight: 700;
}
@keyframes icjb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .icjb-trust-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .icjb-trust-strip-inner[aria-hidden="true"] { display: none; }
}
@media (min-width: 900px) {
  /* Plenty of room on desktop: no need to scroll. */
  .icjb-trust-track { animation: none; width: 100%; justify-content: flex-start; }
  .icjb-trust-strip-inner { margin: 0 auto; max-width: 1180px; width: 100%; padding: 10px 32px; }
  .icjb-trust-strip-inner[aria-hidden="true"] { display: none; }
}

/* ── Shared: centered section titles ── */
.icjb-center-title {
  text-align: center;
  font-family: var(--icjb-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--icjb-heading);
  margin: 0 0 26px;
}
@media (min-width: 768px) { .icjb-center-title { font-size: 28px; margin-bottom: 30px; } }
.icjb-home .icjb-section { padding-top: 30px; }
@media (min-width: 1024px) { .icjb-home .icjb-section { padding: 40px 32px 6px; } }

/* ── 2. Top employers (logo cards + red arrows) ── */
.icjb-employers-section .icjb-carousel-wrap { padding: 0 34px; }
.icjb-employers-section .icjb-company-strip { gap: 18px; padding: 6px 4px 12px; }
.icjb-employers-section .icjb-company-chip {
  width: 112px; height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; border: 1px solid #E6E6E6; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.icjb-employers-section .icjb-company-logo {
  width: 88px; height: 88px; margin: 0; border: 0; padding: 0; border-radius: 0; background: transparent; object-fit: contain;
}
.icjb-employers-section .icjb-company-avatar { width: 52px; height: 52px; margin: 0 0 6px; font-size: 20px; }
.icjb-employers-section .icjb-company-name { font-size: 11px; margin: 0; }
.icjb-employers-section .icjb-carousel-btn {
  display: flex; width: 30px; height: 30px; border: 0; background: transparent; box-shadow: none; color: var(--icjb-red);
}
.icjb-employers-section .icjb-carousel-btn svg { width: 18px; height: 18px; }
.icjb-employers-section .icjb-carousel-prev { left: 0; }
.icjb-employers-section .icjb-carousel-next { right: 0; }
.icjb-view-all-wrap { text-align: center; margin: 4px 0 0; }
@media (min-width: 1024px) { .icjb-employers-section .icjb-company-strip { gap: 28px; } }

/* ── 3. Find jobs by location (grey panel, white cards) ── */
.icjb-loc-section {
  background: #EEEEEE;
  border-top: 3px solid #2B2F2B;
  margin-top: 34px;
  padding: 34px 16px 40px !important;
}
.icjb-loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .icjb-loc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.icjb-loc-card {
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; padding: 10px 16px;
  background: #fff; border: 1px solid #E2E2E2; border-radius: 4px;
  color: var(--icjb-link) !important; text-decoration: none !important;
  font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.icjb-loc-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.icjb-loc-flag { width: 44px; height: 33px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.icjb-loc-text { display: flex; flex-direction: column; min-width: 0; }
.icjb-loc-name { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--icjb-link); }
.icjb-loc-count { font-size: 11.5px; color: #666; margin-top: 3px; }
.icjb-loc-more, .icjb-field-more { justify-content: center; color: var(--icjb-heading) !important; font-weight: 700; font-size: 14px; }
.icjb-loc-more-label span, .icjb-field-more-label span { color: var(--icjb-red); }
.icjb-more-hidden { display: none !important; }

/* ── 4. Latest jobs + View More Jobs ── */
.icjb-home .icjb-section-head h2 { color: var(--icjb-heading); }
.icjb-home .icjb-loadmore-wrap { text-align: center; }

/* ── 5. Find jobs in your field ── */
.icjb-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .icjb-field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.icjb-field-card {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 10px 14px;
  background: #fff; border: 1px solid #E2E2E2; border-radius: 4px;
  color: var(--icjb-link) !important; text-decoration: none !important;
  font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.icjb-field-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.icjb-field-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #C9CCE6; color: var(--icjb-heading);
  display: flex; align-items: center; justify-content: center;
}
.icjb-field-icon svg { width: 22px; height: 22px; }
.icjb-field-text { display: flex; flex-direction: column; min-width: 0; }
.icjb-field-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--icjb-link); }
.icjb-field-count { font-size: 11.5px; color: #666; margin-top: 3px; }

/* ── 6. Latest blog articles ── */
.icjb-blog-section { padding-bottom: 40px !important; }
.icjb-blog-panel { background: #F2F2F2; padding: 26px 18px 30px; max-width: 1000px; margin: 0 auto; }
.icjb-blog-title { font-family: Roboto, var(--icjb-font-display); font-weight: 700; font-size: 20px; color: #1a1a1a; margin-bottom: 20px; }
.icjb-blog-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .icjb-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.icjb-blog-card { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.10); display: flex; flex-direction: column; }
.icjb-blog-img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #12213A, #3A4F7A); overflow: hidden; }
.icjb-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icjb-blog-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.icjb-blog-meta { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #666; display: flex; gap: 6px; flex-wrap: wrap; }
.icjb-blog-cat { color: #222; font-weight: 700; }
.icjb-blog-card-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; font-family: Roboto, var(--icjb-font-body); }
.icjb-blog-card-title a { color: #111 !important; }
.icjb-blog-card-title a:hover { color: var(--icjb-link) !important; }
.icjb-blog-excerpt { margin: 0; font-size: 12px; line-height: 1.55; color: #444; }
.icjb-blog-more { margin-top: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1a63d6 !important; }
.icjb-blog-more:hover { text-decoration: underline; }

/* ── v3.0.1 — center everything in the hero banner on one axis ── */
.icjb .icjb-search-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.icjb .icjb-search-tagline { text-align: center; margin: 0 auto 14px; }
.icjb .icjb-search-form { max-width: 820px; margin: 0 auto; justify-content: center; }
.icjb .icjb-popular-searches { justify-content: center; margin-left: auto; margin-right: auto; }
.icjb .icjb-clear-search-inline { display: block; text-align: center; }
@media (min-width: 900px) {
  .icjb .icjb-trust-strip-inner { justify-content: center; max-width: 1180px; }
}