/* ============================================
   FnH Jobs — Design Tokens
   Display: Fraunces (warm, characterful serif — menu/hospitality feel)
   Body/UI: Inter (clean, highly legible)
   Palette: Brand orange + brand blue (from logo), warm ink, clean warm white
   Signature: "ticket stub" perforated cards for the role selector
   ============================================ */

:root {
  --orange: #EA6A12;
  --orange-dark: #C7530A;
  --blue: #1C5D99;
  --blue-dark: #164a7c;
  --ink: #1B1B20;
  --ink-soft: #55565f;
  --paper: #FFFFFF;
  --cream: #FBF8F3;
  --line: #E8E4DB;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}
h1, h2, h3, .display {
  /*font-family: 'Fraunces', Georgia, serif;*/
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1350px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand img { height: 58px; }
.main-nav { display: flex; gap: 32px; }
.main-nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .15s; }
.main-nav a:hover { color: var(--orange); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-ghost {
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px;
  color: var(--ink); transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.btn-ghost:hover { background: var(--cream); }
.header-dropdown { position: relative; display: inline-block; }
.header-dropdown > button { white-space: nowrap; }
.header-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  min-width: 210px; padding: 8px; z-index: 200;
}
.header-dropdown-menu.show { display: block; }
.header-dropdown-menu a { display: block; padding: 9px 12px; font-size: 13.5px; color: var(--ink); border-radius: 8px; text-decoration: none; white-space: nowrap; }
.header-dropdown-menu a:hover { background: var(--cream); }
.nav-inline-dropdown { display: inline-block; }
.nav-drop-btn { background: none; border: none; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; font-family: inherit; padding: 0; }
.nav-drop-btn:hover { color: var(--orange); }
.nav-inline-dropdown .header-dropdown-menu { left: 0; right: auto; min-width: 180px; }
.header-bell { position: relative; color: var(--ink-soft); display: flex; align-items: center; padding: 6px; border-radius: 8px; }
.header-bell:hover { background: var(--cream); color: var(--ink); }
.header-user-chip { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid var(--line); }
.header-user-chip:hover { background: var(--cream); }
.header-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) {
  .nav-inline-dropdown, .header-bell, .header-user-chip span:last-child { display: none; }
}
@media (max-width: 480px) {
  .header-dropdown-menu { right: 0; left: auto; min-width: 0; width: min(240px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
}
.header-dropdown-menu a.role-link { display: flex; align-items: center; gap: 10px; }
.role-link-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.role-link-icon.role-employer { background: var(--blue); }
.role-link-icon.role-jobseeker { background: var(--orange); }
.btn-solid {
  font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 10px;
  background: var(--ink); color: #fff; transition: transform .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.btn-solid:hover { background: var(--orange); transform: translateY(-1px); }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
.mobile-home-icon { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 90px 24px 70px;
  text-align: center;
  display: flow-root;
  background:
    radial-gradient(560px 320px at 15% -10%, rgba(234,106,18,0.10), transparent 60%),
    radial-gradient(560px 320px at 90% 0%, rgba(28,93,153,0.10), transparent 60%);
}
.hero.hero-tight { padding: 40px 24px 44px; }
.hero.hero-tight .eyebrow { margin-bottom: 14px; }
.hero.hero-tight h1 { font-size: clamp(28px, 4.4vw, 46px); }
.hero.hero-tight p.sub { margin: 14px auto 0; font-size: 15.5px; }
.hero.hero-tight .role-select { margin-top: 30px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--orange-dark);
  background: #FDEEE1; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px); line-height: 1.08; max-width: 840px; margin: 0 auto;
}
.hero h1 em { font-style: italic; color: var(--orange); }
.hero p.sub {
  max-width: 560px; margin: 22px auto 0; font-size: 17px; color: var(--ink-soft); line-height: 1.6;
}

/* ---------- Role Selector (signature: ticket-stub cards) ---------- */
.role-select {
  max-width: 900px; margin: 52px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.ticket-card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 30px 28px;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: visible;
  box-shadow: 0 10px 24px -16px rgba(27,27,32,0.12);
}
.ticket-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -20px rgba(27,27,32,0.22); }
.ticket-card.for-employee { background: linear-gradient(180deg, #FFF9F4 0%, #FFFFFF 55%); border-color: #F5D2AE; }
.ticket-card.for-employee:hover { border-color: var(--orange); }
.ticket-card.for-employer { background: linear-gradient(180deg, #F4F8FC 0%, #FFFFFF 55%); border-color: #C7DBEC; }
.ticket-card.for-employer:hover { border-color: var(--blue); }

.ticket-icon {
  width: 56px; height: 56px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.15);
}
.for-employee .ticket-icon { background: linear-gradient(135deg, #FDEEE1, #FBDCC0); color: var(--orange-dark); }
.for-employer .ticket-icon { background: linear-gradient(135deg, #E5EEF6, #D2E3F0); color: var(--blue-dark); }

.ticket-illustration {
  width: 130px; height: 130px; object-fit: cover; object-position: top center;
  border-radius: 50%; margin: 0 auto 18px; display: block;
  padding: 6px; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.18);
}
.for-employee .ticket-illustration { background: linear-gradient(135deg, #FDEEE1, #FBDCC0); }
.for-employer .ticket-illustration { background: linear-gradient(135deg, #E5EEF6, #D2E3F0); }

.cta-banner {
  background: linear-gradient(135deg, #1a1a1a, #2a2a33);
  padding: 60px 24px;
}

.ticket-card h3 { font-size: 22px; margin-bottom: 8px; }
.ticket-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 22px; }

.ticket-seam {
  position: relative;
  border-top: 2px dashed var(--line);
  margin: 0 -30px 20px;
}
.ticket-seam::before, .ticket-seam::after {
  content: ''; position: absolute; top: -13px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
}
.ticket-seam::before { left: -13px; }
.ticket-seam::after { right: -13px; }

.ticket-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  padding: 11px 20px; border-radius: 12px;
  transition: transform .15s, box-shadow .15s;
}
.for-employee .ticket-cta { background: var(--orange); color: #fff; box-shadow: 0 10px 20px -10px rgba(234,106,18,0.6); }
.for-employer .ticket-cta { background: var(--blue); color: #fff; box-shadow: 0 10px 20px -10px rgba(28,93,153,0.6); }
.ticket-card:hover .ticket-cta { transform: scale(1.03); }
.ticket-cta svg { transition: transform .15s; }
.ticket-card:hover .ticket-cta svg { transform: translateX(4px); }

.ticket-tag {
  position: absolute; top: -12px; right: 24px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; color: #fff;
}
.for-employee .ticket-tag { background: var(--orange); }
.for-employer .ticket-tag { background: var(--blue); }

/* ---------- Trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 28px 24px; background: var(--cream);
}
.trust-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; text-align: center;
}
.trust-stat strong { display: block; font-family: 'Fraunces', serif; font-size: 26px; }
.trust-stat span { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Generic section ---------- */
.section { padding: 80px 24px; }
.section-head { text-align: center; margin: 0 auto 48px; }
/* Was used in index.php but never actually defined — the double gap
   before "Top Food & Hospitality Brands" and "Supported By" was this
   banner wrapper still getting the full 80px .section top padding. */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.section-head .eyebrow { font-size: 13px; font-weight: 700; color: var(--orange-dark); text-transform: uppercase; letter-spacing: .06em; }
.section-head h2 {     font-size: 22px;
    margin: 0;
    font-weight: 700;}
.section-head p { color: var(--ink-soft); margin-top: 12px; font-size: 15.5px; }
.flex_head_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex_head_title a {
        font-size: 12px;
    color: #1d5d99;
    font-weight: 600;
}
.how-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-card { padding: 28px; border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.how-card:hover { border-color: var(--orange); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.15); transform: translateY(-2px); }
.how-card .num { font-family: 'Fraunces', serif; font-size: 15px; color: var(--orange); font-weight: 600; }
.how-card h4 { font-size: 17px; margin: 10px 0 8px; }
.how-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ---------- App download ---------- */
.app-promo {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 76px 24px;
  overflow: hidden;
}
.app-promo::before {
  content: '';
  position: absolute;
  top: -20%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(234,106,18,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.app-promo::after {
  content: '';
  position: absolute;
  bottom: -25%; right: -10%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(28,93,153,0.28) 0%, transparent 70%);
  pointer-events: none;
}
.app-promo-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
}
.app-promo-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.app-promo .eyebrow { font-size: 13px; font-weight: 700; color: #FDB877; text-transform: uppercase; letter-spacing: .06em; }
.app-promo h2 { color: #fff; font-size: clamp(26px, 3.6vw, 38px); margin-top: 10px; max-width: 420px; }
.app-promo p { color: #C7C8D1; font-size: 15px; line-height: 1.6; max-width: 420px; margin-top: 14px; }
.store-badges { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.store-badge {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 12px;
  transition: transform .15s;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge small { display: block; font-size: 10px; color: var(--ink-soft); }
.store-badge strong { display: block; font-size: 15px; line-height: 1.15; }

.app-promo-visual { display: flex; justify-content: center; }

/* Neutralize the darker/older .app-promo section styling (navy background,
   orange/blue blob decorations) for pages using the v2 card below — those
   are meant for a different, unused layout and would otherwise show
   through behind the purple gradient card. */
.app-promo-v2 { background: transparent; padding: 50px 20px; }
.app-promo-v2::before, .app-promo-v2::after, .app-promo-v2 .app-promo-dots { display: none; }

/* Shared "Take your career to the next level!" app-download card — used
   via includes/app-download-section.php across the home page, login /
   register pages, categories page, job details, etc. Matches the phone
   mockup + QR + animated-rows design already used elsewhere on the site,
   now centralized here so every page that includes the shared partial
   gets the current design automatically. */
.app-promo-card {
  max-width: 1100px; margin: 0 auto; position: relative; overflow: hidden;
  background: #0c90cd;
  border-radius: 22px; padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.app-promo-card-text { position: relative; z-index: 2; max-width: 420px; display: flex; flex-direction: column; justify-content: center; }
.app-promo-card-text h2 { color: #fff; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25; margin: 0 0 8px; }
.app-promo-card-text p { color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.app-promo-store-badges { display: flex; flex-direction: column; gap: 8px; max-width: 200px; }
.app-store-pill { display: flex; align-items: center; gap: 9px; background: rgba(0,0,0,0.55); color: #fff; padding: 8px 13px; border-radius: 10px; text-decoration: none; transition: transform .15s, background .15s; }
.app-store-pill:hover { background: #000; transform: translateY(-2px); }
.app-store-pill small { display: block; font-size: 8.5px; letter-spacing: .03em; opacity: .85; line-height: 1.2; }
.app-store-pill strong { display: block; font-size: 13px; line-height: 1.2; }

/* Fills the gap between the copy/buttons and the phone mockup on wide
   screens instead of leaving empty purple space. */
.app-promo-mid-stats { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 2; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.22); }
.app-promo-mid-stat { display: flex; align-items: center; gap: 11px; }
.app-promo-mid-stat-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-promo-mid-stat-text strong { display: block; color: #fff; font-size: 15px; line-height: 1.2; }
.app-promo-mid-stat-text span { display: block; color: rgba(255,255,255,.72); font-size: 11px; margin-top: 1px; }
@media (max-width: 900px) { .app-promo-mid-stats { display: none; } }

.app-promo-card-visual { position: relative; flex-shrink: 0; z-index: 1; }
.app-promo-sparkle { position: absolute; background: rgba(255,255,255,.55); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
.app-promo-sparkle.s1 { width: 15px; height: 15px; top: -6px; left: -14px; }
.app-promo-sparkle.s2 { width: 10px; height: 10px; bottom: 30%; left: -20px; }
.app-promo-sparkle.s3 { width: 9px; height: 9px; bottom: -4px; right: 34%; }

.app-promo-phone { position: relative; width: 120px; height: 222px; background: #141420; border-radius: 20px; padding: 5px; box-shadow: 0 24px 48px -18px rgba(20,10,60,.5), 0 0 0 1px rgba(255,255,255,.08); animation: fnhPhoneFloat 3.4s ease-in-out infinite; }
.app-promo-phone-notch { width: 36px; height: 9px; background: #141420; border-radius: 0 0 6px 6px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; }
.app-promo-phone-screen { background: #F5F1FB; height: 100%; border-radius: 15px; padding: 12px 7px 7px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.app-promo-phone-topbar { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.app-promo-phone-avatar { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg,#8b7cf6,#6c5ce7); flex-shrink: 0; animation: fnhPulse 2s ease-in-out infinite; }
.app-promo-phone-topbar-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.app-promo-phone-topbar-lines span { display: block; height: 3px; border-radius: 2px; background: #DAD3F5; }
.app-promo-phone-topbar-lines span:first-child { width: 70%; }
.app-promo-phone-topbar-lines span:last-child { width: 45%; background: #E7E2F8; }
.app-promo-phone-row {
  display: flex; align-items: center; gap: 6px; height: 30px; border-radius: 7px; padding: 0 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  background: linear-gradient(90deg, #fff 0%, #fff 40%, #EFEAFB 50%, #fff 60%, #fff 100%);
  background-size: 220% 100%;
  animation: fnhRowFloat 2.8s ease-in-out infinite, fnhShimmer 2.4s linear infinite;
}
.app-promo-phone-row.r1 { animation-delay: 0s, 0s; }
.app-promo-phone-row.r2 { animation-delay: .25s, .3s; }
.app-promo-phone-row.r3 { animation-delay: .5s, .6s; }
.app-promo-phone-row-icon { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
.app-promo-phone-row.r1 .app-promo-phone-row-icon { background: #FDEEE1; }
.app-promo-phone-row.r2 .app-promo-phone-row-icon { background: #E5EEF6; }
.app-promo-phone-row.r3 .app-promo-phone-row-icon { background: #E3F5E9; }
.app-promo-phone-row-lines { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.app-promo-phone-row-lines span { display: block; height: 3px; border-radius: 2px; background: #E3E0EF; }
.app-promo-phone-row-lines span:first-child { width: 75%; background: #C9C3E8; }
.app-promo-phone-row-lines span:last-child { width: 50%; }
.app-promo-phone-row-tag { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; animation: fnhPulse 1.8s ease-in-out infinite; }
.app-promo-phone-row.r1 .app-promo-phone-row-tag { background: #EA6A12; }
.app-promo-phone-row.r2 .app-promo-phone-row-tag { background: #1C5D99; animation-delay: .3s; }
.app-promo-phone-row.r3 .app-promo-phone-row-tag { background: #1E9E52; animation-delay: .6s; }
.app-promo-qr { position: absolute; bottom: -14px; right: -14px; width: 56px; height: 56px; background: #fff; border-radius: 11px; padding: 5px; box-shadow: 0 10px 22px rgba(0,0,0,.28); }

@keyframes fnhPhoneFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fnhRowFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fnhShimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@keyframes fnhPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }

@media (max-width: 720px) {
  .app-promo-card { padding: 22px 20px; gap: 12px; border-radius: 18px; }
  .app-promo-card-text { max-width: 58%; }
  .app-promo-card-text h2 { font-size: 17px; margin-bottom: 6px; }
  .app-promo-card-text p { font-size: 11.5px; margin-bottom: 12px; }
  /* Item fix: same "buttons too small to comfortably tap on phone" issue
     already fixed on the per-page app-promo cards — this is the third,
     separate copy of the component (centralized here for the shared
     includes/app-download-section.php partial used across 11 pages:
     employer/candidate index, login, register, job-details, categories,
     pricing, page.php, employer/jobs.php) that still had it. Buttons now
     hold at a comfortable, consistently tappable size across both
     breakpoints; the phone mockup keeps shrinking instead to make room. */
  .app-promo-store-badges { gap: 8px; max-width: 190px; }
  .app-store-pill { padding: 9px 13px; gap: 8px; }
  .app-store-pill svg { width: 17px; height: 17px; }
  .app-store-pill small { font-size: 8px; }
  .app-store-pill strong { font-size: 12.5px; }
  .app-promo-phone { width: 88px; height: 170px; border-radius: 16px; padding: 4px; }
  .app-promo-phone-notch { width: 28px; height: 8px; }
  .app-promo-phone-screen { border-radius: 12px; padding: 9px 6px 6px; gap: 4px; }
  .app-promo-phone-row { height: 24px; border-radius: 6px; padding: 0 5px; gap: 5px; }
  .app-promo-qr { width: 38px; height: 38px; bottom: -8px; right: -8px; border-radius: 8px; padding: 3px; }
  .app-promo-sparkle.s2 { display: none; }
}
@media (max-width: 480px) {
  .app-promo-card { padding: 16px 14px; gap: 10px; }
  .app-promo-card-text { max-width: 60%; }
  .app-promo-card-text h2 { font-size: 13.5px; margin-bottom: 4px; }
  .app-promo-card-text p { font-size: 9.5px; margin-bottom: 8px; line-height: 1.4; }
  .app-promo-store-badges { gap: 7px; max-width: 175px; }
  .app-store-pill { padding: 8px 12px; gap: 7px; border-radius: 9px; }
  .app-store-pill svg { width: 15px; height: 15px; }
  .app-store-pill small { font-size: 7.5px; }
  .app-store-pill strong { font-size: 11.5px; }
  .app-promo-phone { width: 62px; height: 120px; border-radius: 12px; padding: 3px; }
  .app-promo-phone-notch { width: 20px; height: 6px; }
  .app-promo-phone-screen { border-radius: 9px; padding: 7px 4px 4px; gap: 3px; }
  .app-promo-phone-row { height: 17px; border-radius: 4px; padding: 0 4px; gap: 3px; }
  .app-promo-phone-row-icon { width: 10px; height: 10px; }
  .app-promo-qr { width: 26px; height: 26px; bottom: -5px; right: -5px; border-radius: 6px; padding: 2px; }
  .app-promo-sparkle.s1, .app-promo-sparkle.s3 { display: none; }
}

.phone-mock {
  width: 230px; height: 460px; background: #1a1a1f; border-radius: 36px;
  padding: 10px; box-shadow: 0 40px 70px -24px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.phone-notch { width: 70px; height: 18px; background: #1a1a1f; border-radius: 0 0 12px 12px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; }
.phone-screen { background: #FFFCF8; height: 100%; border-radius: 26px; padding: 22px 14px 12px; display: flex; flex-direction: column; }
.phone-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.phone-greeting { font-size: 12.5px; font-weight: 700; color: var(--ink); font-family: 'Inter', sans-serif; }
.phone-bell { font-size: 13px; }
.phone-search {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}
.phone-section-label { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.phone-job-card {
  background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.phone-job-logo { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.phone-job-logo.l1 { background: #FDEEE1; }
.phone-job-logo.l2 { background: #E5EEF6; }
.phone-job-logo.l3 { background: #EFEAE0; }
.phone-job-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.phone-job-info strong { font-size: 11px; color: var(--ink); }
.phone-job-info span { font-size: 9.5px; color: var(--ink-soft); margin-top: 1px; }
.phone-job-tag { font-size: 8.5px; font-weight: 700; color: var(--orange-dark); background: #FDEEE1; padding: 3px 7px; border-radius: 999px; flex-shrink: 0; }
.phone-navbar { margin-top: auto; display: flex; justify-content: space-around; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; opacity: 0.5; }
.phone-navbar .active { opacity: 1; }

/* ---------- Footer ---------- */
.site-footer { background: #0D2B4E; padding: 30px 24px 0; }
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 24px;
}
.footer-logo { height: 40px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 220px; }
.footer-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 10px; transition: color .15s; }
.footer-col a:hover { color: var(--orange); }
.footer-socials { display: flex; gap: 10px; margin-top: 14px; }
.footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); }
.footer-socials a:hover { color: #fff; border-color: var(--orange); background: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding: 6px 0; max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,0.55);
}

/* ============================================
   PANEL LAYOUT (Employer / Candidate dashboards)
   ============================================ */
.panel-wrap { display: flex; min-height: 100vh; background: var(--cream); max-width: 100%; overflow-x: hidden; }

.panel-sidebar {
  width: 250px; background: #fff; border-right: 1px solid var(--line);
  padding: 22px 14px 0; position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
  transition: transform .2s; z-index: 40;
  display: flex; flex-direction: column;
}
.panel-sidebar-scroll {
  flex: 1; overflow-y: auto; padding-bottom: 12px; position: relative;
  /* Make the scrollbar always visible (not just on hover/scroll) on
     browsers that allow it (desktop Chrome/Edge/Firefox). Phones running
     iOS/Android intentionally auto-hide overlay scrollbars at the OS
     level — no CSS can force those to stay on-screen, which is why the
     bouncing arrow below exists as the real fix for phones. */
  scrollbar-width: thin;
  scrollbar-color: #c9c4b6 transparent;
}
.panel-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.panel-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-sidebar-scroll::-webkit-scrollbar-thumb { background: #c9c4b6; border-radius: 999px; }
.panel-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #b3ad9c; }
.panel-sidebar-footer {
  flex-shrink: 0; padding: 10px 0 16px; border-top: 1px solid var(--line);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  position: relative;
}
/* Permanent "more below" cue — a soft fade plus a gently bouncing arrow,
   both sitting right above the fixed footer, outside the scrolling area
   itself. Unlike a scrollbar this is normal page content, so mobile
   browsers can't auto-hide it: it stays on screen no matter how the nav
   above is scrolled or how the browser's address bar shows/hides. */
.panel-sidebar-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 30px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.95) 80%);
}
.panel-sidebar-footer::after {
  content: '▾'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--orange); opacity: 1;
  text-shadow: 0 1px 3px rgba(234,106,18,0.35);
  pointer-events: none;
  animation: panelSidebarMoreBounce 1.6s ease-in-out infinite;
}
@keyframes panelSidebarMoreBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 5px); }
}
@media (max-width: 640px) {
  .panel-sidebar { height: 100vh; height: 100dvh; padding-bottom: 20px; }
  .panel-sidebar-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
}
.panel-logo { padding: 6px 10px 20px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.panel-logo img { height: 40px; }
.panel-nav-group { margin-bottom: 18px; }
.panel-nav-label { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; padding: 0 10px; margin-bottom: 8px; }
.panel-nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); margin-bottom: 3px; transition: background .15s, color .15s;
}
.panel-nav a svg { flex-shrink: 0; opacity: .8; }
.panel-nav a:hover { background: var(--cream); color: var(--ink); }
.panel-nav a.active { background: linear-gradient(135deg, #FDEEE1, #E5EEF6); color: var(--ink); font-weight: 700; }
.panel-nav a.active svg { opacity: 1; color: var(--orange); }
.panel-nav a.logout-link { color: #C0392B; margin-top: 6px; }
.panel-nav a.logout-link:hover { background: #FDECEA; }

.panel-main { flex: 1; min-width: 0; margin-left: 250px; max-width: 100%; overflow-x: hidden; }
/* Item fix: the shared site footer sits as a sibling of .panel-wrap (not
   inside .panel-main), so on its own it starts at the very left edge —
   right underneath .panel-sidebar, which is position:fixed and stays
   pinned there regardless of scroll position. Without this, the sidebar
   permanently covers the left ~250px of the footer on every panel page.
   Matches .panel-main's own margin-left/breakpoint exactly, and does
   nothing outside the panel layout (public pages don't use this class). */
.panel-footer-wrap { margin-left: 250px; }
@media (max-width: 900px) { .panel-footer-wrap { margin-left: 0; } }
.panel-topbar {
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  padding: 16px 28px; display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 20;
}
@media (max-width: 640px) { .panel-topbar { padding: 12px 16px; } .panel-topbar h1 { font-size: 16px; } }
/* Item fix: generic (unscoped) so pages that show a small breadcrumb
   label above their own page heading outside the panel-topbar — e.g.
   Employer's Applications/Search Candidates/CV Access/My Jobs pages, and
   candidate Job Search/Job Details — can reuse the exact same look
   instead of each page inventing its own eyebrow style. */
.eyebrow-sm { font-size: 11px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.panel-topbar .eyebrow-sm { margin: 0; }
.panel-topbar h1 { font-size: 19px; font-family: 'Fraunces', serif; }
.panel-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.panel-content { padding: 26px 28px 60px; }

.panel-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
/* Item: phone-only "back to wherever you came from" button in the panel
   topbar (candidate + employer both share this stylesheet) — hidden on
   desktop, where the sidebar is always visible and a back button isn't
   needed. Same breakpoint as .panel-toggle just below. */
.panel-back-link { display: none; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 14px 28px 0; cursor: pointer; }
.panel-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 35; }

/* Cards & stats */
/* ===== Redesigned Job Seeker Dashboard ===== */
.dash-layout { display: flex; gap: 22px; align-items: flex-start; }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dash-sidebar { width: 320px; flex-shrink: 0; }
@media (max-width: 960px) { .dash-layout { flex-direction: column; } .dash-sidebar { width: 100%; } }

.dash-greeting-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.dash-greeting-illustration { width: 110px; height: auto; flex-shrink: 0; }
@media (max-width: 640px) { .dash-greeting-illustration { display: none; } }

.dash-profile-strip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-progress-ring {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--orange) calc(var(--pct) * 1%), var(--cream) 0);
  position: relative;
}
.dash-progress-ring::before { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.dash-progress-num { position: relative; z-index: 1; font-weight: 700; font-size: 16px; }
.dash-progress-label { position: relative; z-index: 1; font-size: 9.5px; color: var(--ink-soft); }
.dash-profile-strip-mid { flex: 1; min-width: 200px; }
.dash-checklist { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }

.dash-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-stat-box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .15s, border-color .15s; }
.dash-stat-box:hover { box-shadow: 0 10px 22px -12px rgba(0,0,0,0.15); transform: translateY(-1px); border-color: var(--orange); }
.dash-stat-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.dash-stat-box strong { font-family: 'Fraunces', serif; font-size: 20px; }
.dash-stat-box span { font-size: 11px; color: var(--ink-soft); }
@media (max-width: 640px) { .dash-stat-row { grid-template-columns: repeat(2, 1fr); } }

.dash-boost-banner { background: linear-gradient(135deg, #FFF3E9, #FFFDF9); border: 1px solid #FFE0C2; border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-boost-icon { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.dash-boost-points { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }

.dash-dark-banner { background: linear-gradient(135deg, #0a6a9e, #0574ae); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.dash-profile-card { background: linear-gradient(160deg, #0a6a9e, #0574ae); border-radius: 18px; padding: 22px; position: relative; }
.dash-edit-btn { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; }
.dash-profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.dash-strength-track { height: 6px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.dash-strength-fill { height: 100%; background: #4ADE80; border-radius: 999px; }
.dash-profile-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; text-align: center; }
.dash-profile-mini-stats strong { display: block; color: #fff; font-size: 17px; font-family: 'Fraunces', serif; }
.dash-profile-mini-stats span { color: rgba(255,255,255,0.6); font-size: 10px; }

.dash-mini-app-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: center; }
.dash-mini-app-stats > div { background: var(--cream); border-radius: 10px; padding: 10px 6px; }
.dash-mini-app-stats strong { display: block; font-size: 18px; font-family: 'Fraunces', serif; }
.dash-mini-app-stats span { font-size: 10.5px; color: var(--ink-soft); }

.dash-rec-mini-card { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dash-rec-mini-card:last-child { border-bottom: none; }
.dash-rec-mini-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--cream); color: var(--orange); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.dash-rec-mini-card strong { font-size: 13px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.sidebar-widget { margin: 0 8px 12px; padding: 14px; border-radius: 12px; background: var(--cream); }
.complete-profile-widget .sw-pct { font-size: 20px; font-weight: 700; color: var(--orange-dark); margin: 0 0 8px; }
.complete-profile-widget .sw-pct span { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.sw-track { height: 6px; background: #fff; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.sw-fill { height: 100%; background: var(--orange); border-radius: 999px; }
.sw-link { font-size: 12px; font-weight: 700; color: var(--orange-dark); text-decoration: none; }
.help-widget { display: flex; align-items: center; gap: 10px; }
.hw-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-widget strong { display: block; font-size: 12.5px; }
.help-widget a { font-size: 11.5px; color: var(--orange-dark); text-decoration: none; font-weight: 600; }
.topbar-searchbox { display: flex; align-items: center; gap: 8px; background: var(--cream); border-radius: 10px; padding: 9px 14px; flex: 1; max-width: 420px; color: var(--ink-soft); }
.topbar-searchbox input { border: none; outline: none; background: transparent; font-size: 13.5px; font-family: inherit; width: 100%; color: var(--ink); }
/* Item fix: candidate topbar's page title — now shown at every width
   (was phone-only before), same eyebrow+h1 the employer topbar always
   shows. On phone the searchbox has no room and hides below 640px; on
   desktop both sit side by side (searchbox is flex:1 with a 420px cap,
   so it shrinks instead of overlapping). */
.topbar-mobile-title { display: block; min-width: 0; }
@media (max-width: 640px) {
  .topbar-searchbox { display: none; }
}
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
a.stat-card { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s, transform .15s; }
a.stat-card:hover { box-shadow: 0 8px 20px -8px rgba(0,0,0,0.12); transform: translateY(-1px); }
.app-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 20px; }
.filter-bar .form-row { flex: 1 1 170px; min-width: 150px; margin-bottom: 0; }
.skill-chip { display: inline-block; font-size: 13px; font-weight: 600; background: #F7F5F1; color: #23324A; padding: 6px 14px; border-radius: 999px; margin: 4px 4px 0 0; }
.filter-bar select, .filter-bar input[type="text"] { max-width: 100%; width: 100%; padding: 9px 12px; font-size: 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; }
@media (max-width: 640px) {
  .filter-bar { gap: 8px; }
  .filter-bar .form-row { flex: 1 1 calc(50% - 8px); }
}
.app-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #d4590d); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.app-info { display: flex; flex-direction: column; min-width: 160px; flex: 1 1 180px; }
.app-info strong { font-size: 14px; }
.app-info span { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.app-meta { font-size: 12px; color: var(--ink-soft); line-height: 1.6; flex: 1 1 200px; min-width: 160px; word-break: break-word; }
.app-status-select { font-size: 12.5px; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-family: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .app-card { flex-direction: column; align-items: flex-start; }
  .app-card form { margin-left: 0 !important; width: 100%; }
  .app-status-select { width: 100%; }
}
.stat-card .stat-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.stat-card strong { display: block; font-family: 'Fraunces', serif; font-size: 20px; }
.stat-card span { font-size: 11.5px; color: var(--ink-soft); }

.panel-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-bottom: 20px; }
.panel-card h3 { font-size: 16px; margin-bottom: 4px; }
.panel-card .card-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; }

/* Forms */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=tel], .form-row input[type=date],
.form-row select, .form-row textarea {
  width: 100%; padding: 11px 14px; font-size: 14px; font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
  transition: border-color .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--orange); }
.form-row input[type=date] { min-height: 44px; line-height: 1.4; -webkit-appearance: none; appearance: none; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }

.btn-panel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px;
  font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: transform .15s, box-shadow .15s;
  text-align: center;
}
.btn-panel.primary { background: var(--orange); color: #fff; box-shadow: 0 10px 20px -10px rgba(234,106,18,0.5); }
.btn-panel.primary:hover { background: #d4590d; transform: translateY(-1px); }
.btn-panel.outline { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.btn-panel.outline:hover { background: var(--cream); }
.btn-panel.danger { background: #FDECEA; color: #C0392B; }
.btn-panel.blue { background: var(--blue); color: #fff; box-shadow: 0 10px 20px -10px rgba(28,93,153,0.5); }
.btn-panel.blue:hover { background: #164A7C; transform: translateY(-1px); }

/* Tables */
.panel-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.panel-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.panel-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.panel-table tr:last-child td { border-bottom: none; }
.panel-table tr:hover td { background: var(--cream); }

.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.green { background: #E3F5E9; color: #1E9E52; }
.badge.amber { background: #FDF1DC; color: #B9770E; }
.badge.red { background: #FDECEA; color: #C0392B; }
.badge.gray { background: #EFECE5; color: var(--ink-soft); }
.badge.blue { background: #E5EEF6; color: var(--blue-dark); }

.alert { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 18px; }
.alert.success { background: #E3F5E9; color: #1E7A42; }
.alert.error { background: #FDECEA; color: #C0392B; }
.alert.warning { background: #FDF3E3; color: #8A5A00; }

.empty-box { text-align: center; padding: 50px 20px; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line); border-radius: 16px; }

@media (max-width: 900px) {
  .panel-sidebar { transform: translateX(-100%); }
  .panel-sidebar.open { transform: translateX(0); }
  .panel-main { margin-left: 0; }
  .panel-toggle { display: block; }
  .panel-back-link { display: inline-block; }
  /* Item: a few pages already had their own more-specific back link
     ("← Back to Job Details" etc, desktop-only by convention up to now)
     — hide those on phone so the generic topbar "← Back" (added above)
     doesn't show twice on the same page. */
  .legacy-back-link { display: none !important; }
  .panel-backdrop.open { display: block; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .role-select { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .app-promo-inner { grid-template-columns: 1fr; text-align: center; }
  .app-promo p, .app-promo h2 { margin-left: auto; margin-right: auto; }
  .store-badges { justify-content: center; }
  .app-promo-visual { margin-top: 20px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .header-inner { gap: 10px; }
  .brand img { height: 40px; }
  .main-nav { position: fixed; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 16px 24px; gap: 16px; transform: translateY(-130%);
    opacity: 0; visibility: hidden; transition: transform .2s, opacity .2s, visibility 0s .2s; z-index: 40; }
  .main-nav.open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .2s, opacity .2s, visibility 0s; }
  .nav-toggle { display: none; }
  .mobile-home-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 7px; background: #FDEEE1; color: var(--orange-dark); margin-right: 6px; flex-shrink: 0; }
  .mobile-home-icon:active { background: #FBE1CB; }
  .header-actions { gap: 8px; }
  .header-actions .btn-ghost { display: none; }
  .header-actions .btn-solid { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .trust-inner { justify-content: center; }
}
@media (max-width: 768px) {
  .header-actions .btn-solid { 
      padding: 4px 5px;
        font-size: 10px;
        border: none;
        height: 30px;
        border-radius: 5px;
  }
  .header-inner {
      padding: 10px 10px;
  }
  .nav-inline-dropdown .header-dropdown-menu.show {
          right: auto !important;
          left: 0 !important;
  }
  .header-actions .header-dropdown-menu.show {
          right: 0 !important;
          left: auto !important;
          width: min(230px, calc(100vw - 20px)) !important;
          max-width: calc(100vw - 20px) !important;
  }
  .role-cards-grid {
          gap: 10px !important;
              padding: 0 10px !important;
  }
}

/* Phone number field with country code select — used across registration
   and profile forms. Stacks vertically on very narrow screens so the
   country dropdown never squeezes the number input into nothing.
   (Higher-specificity selectors here are needed to beat the base
   ".form-row select { width:100% }" rule above.) */
.phone-input-row { display: flex; gap: 8px; }
.form-row .phone-input-row select.phone-country-select { width: 150px; flex: 0 0 150px; min-width: 0; }
.form-row .phone-input-row input.phone-number-input { width: auto; flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
  .phone-input-row { flex-direction: column; }
  .form-row .phone-input-row select.phone-country-select { width: 100%; flex-basis: auto; }
}

/* Item 17: consistent Required / Optional field markers used across every
   employer and candidate panel form. */
.req-mark { color:#C0392B; font-weight:700; margin-left:2px; }
.opt-mark { color: var(--ink-soft); font-weight:400; font-size: 11.5px; margin-left: 4px; }

.job-badge_tag {
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    position: absolute;
    right: 10px;
    top: 10px;
}
.job-badge_tag.urgent {
    background: #ea6a13;
}
.job-badge_tag.new {
    background: #1d5d99;
}

/* Item fix: this exact job-card HTML pattern (.job-grid/.job-card/
   .job-card-top/.job-card-avatar/.company/.job-meta/.empty-state) is
   reused across several pages — index.php, candidate/index.php,
   categories.php, candidate/saved-jobs.php — but the CSS for it only
   ever lived inside index.php's own page-local <style> block (with a
   comment there noting the same thing had already happened once before,
   copied from candidate/index.php's own local copy). Any other page
   that reused the HTML without also copying that CSS rendered totally
   unstyled — which is what candidate/saved-jobs.php was doing. Moving it
   here once, into the shared stylesheet, means every page using this
   pattern gets it for free instead of everyone keeping their own copy in
   sync by hand. (index.php and candidate/index.php keep their own local
   copies too — identical rules, so no visual change there, left alone
   rather than touched for the sake of it.) */
.job-grid { max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .job-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .job-grid { grid-template-columns: 1fr; } }
.job-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; transition: box-shadow .18s, transform .18s, border-color .18s; overflow: hidden; }
.job-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background: linear-gradient(180deg, var(--orange), var(--blue)); opacity:0; transition: opacity .18s; }
.job-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(27,27,32,0.22); border-color: transparent; }
.job-card:hover::before { opacity: 1; }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.job-card-avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #FDEEE1, #E5EEF6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--orange-dark); flex-shrink: 0; margin-bottom: 8px; }
.job-card h4 { font-size: 14px; margin-bottom: 3px; line-height: 1.3; }
.job-card .company { font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; font-weight: 500; }
.job-tag { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #E5EEF6; color: var(--blue-dark); white-space: nowrap; }
.job-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--ink-soft); background: var(--cream); border-radius: 16px; }