:root{
  --accent:#1f7a6b;
  --accent-dark:#176457;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#f1f5f9;
}

body{
  background-color: var(--bg);
}

/* ---------- HERO CARD ---------- */
.hero-card{
  background: linear-gradient(180deg, #f8fbfa 0%, #eef5f3 100%);
  border-radius: 28px;                 /* micro polish: slightly rounder */
  padding: 0.5rem 3rem 3rem 3rem;      /* your current spacing */
  box-shadow: 0 25px 80px rgba(15,23,42,.08); /* micro polish: softer/deeper */
  text-align: left;
}

/* ---------- HEADLINE ---------- */
.hero-headline{
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.75rem;
  color: var(--ink);
  max-width: 28ch;
}

.hero-headline span{
  display:block;
  position:relative;
  padding-left: 1.5rem;
  margin-bottom: .4rem;
}

.hero-headline span::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:8px;
  background: var(--accent);
  border-radius:50%;
  transform: translateY(-50%);
}

/* ---------- SUBTEXT ---------- */
.hero-card p{
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  padding: 14px 22px;   /* micro polish: taller button */
  font-weight: 700;     /* micro polish: stronger label */
}

.btn-primary:hover{
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.btn-outline-primary{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  padding: 14px 22px;   /* keep both CTAs visually aligned */
  font-weight: 700;
}

.btn-outline-primary:hover{
  background-color: var(--accent);
  color:#fff !important;
  border-color: var(--accent) !important;
}

/* ---------- CONSISTENT OUTLINE BUTTONS ---------- */
/* Match sizing/centering to primary + outline-primary so labels sit perfectly centered */
.btn-outline-danger,
.btn-outline-secondary{
  padding: 14px 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* ---------- CARD HOVER ---------- */
.card{
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* ---------- CTA BAND ---------- */
.cta-band{
  background-color: var(--accent);
  padding: 3rem 0;
}


/* Dashboard header: ensure Log out text is perfectly centered */
.logout-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;   /* remove vertical padding so text sits centered */
  line-height: 1;    /* avoid font metrics pushing text upward */
}


/* === ACTIVE FILTER BUTTON IMPROVEMENT (Option 3) === */
/* Force active state to be readable and clearly selected */

button.btn.btn-outline-primary.btn-sort.active,
a.btn.btn-outline-primary.btn-sort.active {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
  transform: translateY(-1px);
  font-weight: 600;
}

button.btn.btn-outline-primary.btn-sort.active:hover,
button.btn.btn-outline-primary.btn-sort.active:focus {
  color: #ffffff !important;
}


/* === DASHBOARD JOB CARDS (Stronger Separation) === */

.job-card {
  background: #ffffff;
  border: 2px solid #94a3b8;   /* noticeably stronger */
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
  transition: all 0.2s ease;
}

.job-card:hover {
  border-color: #64748b;
  box-shadow: 0 14px 30px rgba(15,23,42,0.14);
  transform: translateY(-4px);
}
/* === DASHBOARD SECTIONS (Active / Past) === */

.dashboard-section {
  background: #e2e8f0;         /* clearly darker than page bg */
  padding: 26px;
  border-radius: 24px;
  margin-bottom: 36px;
  border: 2px solid #cbd5e1;
}

.dashboard-section h3,
.dashboard-section h4 {
  font-weight: 700;
  margin-bottom: 18px;
}

/* Optional: add this class to the dashboard row wrapper for more breathing room between columns */
.dashboard-columns {
  --bs-gutter-x: 2rem;
}


/* === DASHBOARD POLISH: Clear hierarchy + floating job tiles === */
/* Layering:
   Page bg -> Section panel -> Job tiles -> nested info panels
*/

/* Section panels (Active jobs / Past jobs) */
.dashboard-section{
  background: #e6edf5;           /* slightly darker than page bg */
  border: 2px solid #cbd5e1;
  border-radius: 26px;
  padding: 26px;
}

/* Give more breathing room between the two columns (only if you add class="dashboard-columns" to the row) */
.dashboard-columns{
  --bs-gutter-x: 2.25rem;
}

/* Job tiles:
   - Works whether your template uses .job-card or Bootstrap .card
   - Strong separation comes mainly from spacing + shadow, not heavy lines
*/
.job-card,
.dashboard-section .card{
  background: #ffffff;
  border: 1px solid #9aa9bb;     /* clean, defined grey (not harsh) */
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Spacing between stacked jobs */
.dashboard-section .card + .card,
.job-card + .job-card{
  margin-top: 28px;
}

/* Subtle hover lift */
.job-card:hover,
.dashboard-section .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15,23,42,0.14);
  border-color: #64748b;
}

/* Reduce inner noise: soften the nested assigned courier panel so it feels integrated */
.job-card .assigned-courier-box,
.dashboard-section .card .assigned-courier-box{
  background: #f3f6fb;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
}

/* If the assigned courier panel is also a Bootstrap card, soften it */
.job-card .card,
.dashboard-section .card .card{
  background: #f3f6fb;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

/* Headings inside panels */
.dashboard-section h3,
.dashboard-section h4{
  font-weight: 800;
  margin-bottom: 16px;
}

/* Kenya palette: overrides used across site */
:root{
  --brand: #0E7C66;      /* deep green */
  --brand-2: #075E4F;    /* hover */
  --accent: #F59E0B;     /* amber */
  --accent-2:#D97706;    /* hover */
}

/* Brand link/logo text */
.brand{ color: var(--brand) !important; }

/* Bootstrap button overrides */
.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-primary:hover{
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}

.btn-outline-primary{
  color: var(--brand) !important;
  border-color: rgba(14,124,102,.45) !important;
}
.btn-outline-primary:hover{
  background: rgba(14,124,102,.10) !important;
  border-color: rgba(14,124,102,.65) !important;
  color: var(--brand) !important;
}

/* Optional amber CTA */
.btn-amber{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#111827 !important;
  font-weight:800;
}
.btn-amber:hover{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}


/* =========================================================
   Bold startup landing (Kenya-first)
   Activated by body class: home-bold
   ========================================================= */

.home-bold{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(245,158,11,0.22), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(14,124,102,0.28), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #071A17 0%, #0B2B26 55%, var(--bg) 55%, var(--bg) 100%);
  min-height: 100vh;
}

/* Topbar adapts on dark hero */
.home-bold .topbar{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}

.home-bold .brand span{ color: rgba(233,255,250,0.95); }

.home-bold .btn-outline-primary{
  color: rgba(233,255,250,0.95) !important;
  border-color: rgba(233,255,250,0.35) !important;
}
.home-bold .btn-outline-primary:hover{
  background: rgba(233,255,250,0.12) !important;
  border-color: rgba(233,255,250,0.55) !important;
}

.hero-bold{
  max-width: 1040px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.hero-bold-card{
  border-radius: 26px;
  padding: 56px 34px;
  backdrop-filter: blur(10px);
  margin-bottom: 40px;
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(245,158,11,0.24), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(45,212,191,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
  color: rgba(233,255,250,0.95);
  text-align: center;
}

.hero-bold-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245,158,11,0.16);
  border: 1px solid rgba(245,158,11,0.22);
  color: rgba(255,243,214,0.95);
  font-weight: 800;
  font-size: 13px;
}

.hero-bold-kicker .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.22);
}

.hero-bold h1{
  margin: 14px 0 14px;
  font-weight: 900;
  letter-spacing: -1.2px;
  font-size: 56px;
  line-height: 1.02;
}

.hero-bold p{
  margin: 0 auto 22px;
  max-width: 72ch;
  color: rgba(233,255,250,0.84);
  line-height: 1.6;
}

.hero-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 8px;
}

.hero-actions .btn{
  padding: 14px 26px;
  font-weight: 900;
  border-radius: 12px;
}

.home-bold .btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.home-bold .btn-primary:hover{
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}

/* Ensure amber CTA always visible on dark hero */
.home-bold .btn-amber{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111827 !important;
  box-shadow: 0 10px 30px rgba(245,158,11,0.35);
}
.home-bold .btn-amber:hover{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}

.hero-stats{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 22px;
}

.stat{
  min-width: 170px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.stat .num{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.stat .lbl{
  font-size: 12px;
  color: rgba(233,255,250,0.78);
}

.section-after-hero{
  max-width: 1040px;
  margin: 26px auto 0;
  padding: 0 24px 60px;
}

@media (max-width: 900px){
  .hero-bold-card{ padding: 36px 18px; }
  .hero-bold h1{ font-size: 40px; }
}


@keyframes heroLift {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-bold-card{
  animation: heroLift 0.6s ease-out;
}