/* AfriDash public-site UI system — aligned with the 2026 homepage. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --afd-ink: #07100c;
  --afd-green: #005c3d;
  --afd-green-2: #08704b;
  --afd-wash: #f1f6f3;
  --afd-line: #cfddd5;
  --afd-muted: #475a50;
  --afd-orange: #f26a1b;
  --afd-white: #fff;
  --afd-radius: 12px;
  --green: #005c3d;
  --green-d: #005c3d;
  --green-l: #08704b;
  --orange: #f26a1b;
  --bg: #f7faf8;
  --card: #fff;
  --text: #07100c;
  --muted: #475a50;
  --border: #cfddd5;
  --radius: 12px;
  --shadow: 0 8px 28px rgba(0, 64, 42, .07);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--afd-white);
  color: var(--afd-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: #cfe8dc; color: var(--afd-ink); }
a { text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }

/* Shared legacy headers become the same light, restrained shell as the homepage. */
.top-bar,
body > .top,
body > header,
body > nav[aria-label="Main navigation"] {
  min-height: 70px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  color: var(--afd-ink);
  border-bottom: 1px solid rgba(207, 221, 213, .9);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
.top-brand,
body > .top > a:first-child,
body > header .logo,
body > nav .logo {
  color: var(--afd-ink) !important;
  font-size: clamp(27px, 3vw, 36px) !important;
  line-height: 1;
  font-weight: 900 !important;
  letter-spacing: -1.8px;
  text-decoration: none;
}
.top-brand span,
body > .top .o,
body > header .logo span,
body > nav .logo span { color: var(--afd-green) !important; }
.top-sep { color: var(--afd-line) !important; }
.top-page, .top-store { color: var(--afd-muted) !important; font-weight: 650; }
.top-link { color: var(--afd-ink) !important; }
.top-bar > a:last-child,
body > .top > a:last-child,
body > header > a:not(.logo),
.nav-link.primary {
  color: #fff !important;
  background: var(--afd-green) !important;
  border: 1px solid var(--afd-green) !important;
  border-radius: 7px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none;
  white-space: nowrap;
}
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-link:not(.primary) { color: var(--afd-ink) !important; font-weight: 650; text-decoration: none; }

/* Public-page hero language. */
body > .hero,
main > .intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 76px) 24px 26px;
  background: #fff;
  color: var(--afd-ink);
  text-align: left;
}
body > .hero h1,
main > .intro h1,
.wrap > h1 {
  margin: 0 0 16px;
  color: var(--afd-ink);
  font-size: clamp(38px, 6vw, 72px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 900;
}
body > .hero h1 span { color: var(--afd-green); }
body > .hero p,
main > .intro p,
.wrap > h1 + p {
  max-width: 780px;
  margin: 0;
  color: #33473c;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.55;
}
.eyebrow { color: var(--afd-green) !important; font-weight: 800; letter-spacing: .16em; }

/* Main content and surfaces. */
.main,
main,
.wrap,
.foot {
  width: min(1100px, calc(100% - 48px));
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.main, main { padding-top: 24px; padding-bottom: 64px; }
.wrap { padding-top: 42px; padding-bottom: 70px; }
.card,
.how,
.store,
.calculator-shell,
.service-terms,
.result,
.seller-card {
  border: 1px solid var(--afd-line) !important;
  border-radius: var(--afd-radius) !important;
  background: var(--afd-white) !important;
  box-shadow: var(--shadow) !important;
}
.card, .how, .calculator-shell { padding: clamp(18px, 3vw, 28px) !important; }
.seller-card { width: min(1100px, calc(100% - 48px)); margin: 24px auto 0 !important; }
.seller-card:not([style*="display:none"]):not([style*="display: none"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
}
.seller-card .seller-name { margin: 0 !important; }
.seller-card .seller-meta {
  color: var(--afd-muted) !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.seller-card .seller-badge { margin: 0; white-space: nowrap; }
.addbar { background: var(--afd-wash) !important; color: var(--afd-ink) !important; border: 1px solid var(--afd-line); box-shadow: none; }
.addbar b, .addbar div { color: var(--afd-ink) !important; }

h2, h3 { color: var(--afd-ink); letter-spacing: -.025em; }
.wrap h2 { margin-top: 34px; font-size: clamp(22px, 3vw, 30px); }
.wrap p, .wrap li { color: #33473c; }
.wrap li + li { margin-top: 8px; }
.wrap ul { padding-left: 22px; }
.muted, .note, .hint, .updated { color: var(--afd-muted) !important; }

/* Inputs and controls. */
input, select, textarea,
.search,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--afd-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--afd-ink) !important;
  padding: 11px 14px;
  outline: none;
}
textarea { min-height: 104px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--afd-green) !important;
  box-shadow: 0 0 0 3px rgba(0, 92, 61, .11) !important;
}
label { color: #294337 !important; font-weight: 700 !important; }
.go-btn, .go, .btn-primary, .cont-btn, .addbtn, button[type="submit"], .cta {
  min-height: 50px;
  border: 1px solid var(--afd-green) !important;
  border-radius: 7px !important;
  background: var(--afd-green) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  text-decoration: none;
}
.go-btn:hover, .go:hover, .btn-primary:hover, .cont-btn:hover, .addbtn:hover, button[type="submit"]:hover, .cta:hover {
  background: var(--afd-green-2) !important;
  transform: translateY(-1px);
}
.cta { display: inline-flex !important; align-items: center; justify-content: center; padding: 12px 20px !important; margin: 18px 8px 6px 0; }
.cta.alt { background: #fff !important; color: var(--afd-green) !important; }
.chip { border-color: var(--afd-line) !important; background: #fff !important; color: var(--afd-muted) !important; }
.chip.active, .tab.on { background: var(--afd-green) !important; border-color: var(--afd-green) !important; color: #fff !important; }
.tabs { border-color: var(--afd-line) !important; border-radius: 9px !important; overflow: hidden; }

/* Directory, catalog and product pages. */
.city-grid { gap: 16px !important; }
.store { padding: 20px !important; }
.store.partner { border-color: #b4d5c4 !important; }
.city-h { color: var(--afd-ink) !important; border-color: var(--afd-line) !important; }
.pill.partner { color: var(--afd-green) !important; background: #e5f3ec !important; }
.catalog-grid, .product-grid { gap: 16px; }
.wrap > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 18px;
  padding: 0;
  list-style: none;
}
.wrap > ul li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--afd-line);
  border-radius: 9px;
  background: var(--afd-wash);
}
.wrap > ul a { color: var(--afd-green); font-weight: 750; text-decoration: none; }

/* Long-haul calculator. */
body > nav[aria-label="Main navigation"] { justify-content: space-between; }
main > .intro { padding-left: 0; padding-right: 0; }
.service-terms { overflow: hidden; box-shadow: none !important; }
.service-term { border-color: var(--afd-line) !important; }
.calculator-shell { background: linear-gradient(135deg, #f2f8f5, #f8fbf9) !important; }
.price-card, .quote-result { border-color: var(--afd-line) !important; }

/* Tracking and checkout stay calm and operational. */
#lookup-card { max-width: 680px; margin: 34px auto 0; }
#lookup-card h1 { font-size: clamp(28px, 5vw, 44px) !important; letter-spacing: -.045em; }
.timeline .step, #timeline .step { border-color: var(--afd-line) !important; }
.seller-name { color: var(--afd-ink) !important; }
.seller-badge { background: var(--afd-wash) !important; color: var(--afd-green) !important; }
.oc-head h2 { color: #fff !important; }
.oc-head p { color: rgba(255, 255, 255, .86) !important; }

/* Legal pages. */
.back { color: var(--afd-green) !important; font-weight: 700; }
.updated { padding-bottom: 18px; border-bottom: 1px solid var(--afd-line); }

@media (max-width: 760px) {
  .top-bar,
  body > .top,
  body > header,
  body > nav[aria-label="Main navigation"] {
    min-height: 62px;
    padding: 0 16px;
    gap: 9px;
  }
  .top-brand,
  body > .top > a:first-child,
  body > header .logo,
  body > nav .logo { font-size: 28px !important; }
  .top-page, .top-store { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .top-sep { display: none; }
  .top-bar > a:last-child,
  body > .top > a:last-child,
  .nav-link.primary { padding: 9px 11px !important; font-size: 12px !important; }
  .nav-actions .nav-link:not(.primary) { display: none; }

  body > .hero,
  main > .intro { padding: 32px 16px 18px; }
  body > .hero h1,
  main > .intro h1,
  .wrap > h1 { font-size: clamp(36px, 11vw, 50px); line-height: .98; }
  body > .hero p,
  main > .intro p,
  .wrap > h1 + p { font-size: 16px; }

  .main, main, .wrap, .foot,
  .seller-card { width: calc(100% - 32px); }
  .main, main { padding-top: 16px; padding-bottom: 44px; }
  .wrap { padding-top: 28px; padding-bottom: 50px; }
  .card, .how, .calculator-shell { padding: 18px !important; }
  .seller-card { margin-top: 16px !important; }
  .seller-card:not([style*="display:none"]):not([style*="display: none"]) {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px 18px !important;
    min-height: 0;
  }
  .seller-card .seller-name { font-size: 22px !important; }
  .seller-card .seller-meta { font-size: 12px; }
  input, select, textarea { font-size: 16px !important; }
  .steps, .controls, .service-terms { grid-template-columns: 1fr !important; }
  .city-grid { grid-template-columns: 1fr !important; }
  .actions { flex-direction: column; }
  .btn { width: 100%; min-height: 48px; }
  .wrap > ul { grid-template-columns: 1fr; }
  .cta { width: 100%; margin-right: 0; }
  .tabs { display: grid !important; grid-template-columns: 1fr 1fr; }
  .tab { min-width: 0; text-align: center; }
}

@media (max-width: 600px) {
  .top-page, .top-store { display: none; }
  .top-bar > a:last-child,
  body > .top > a:last-child,
  .nav-link.primary { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}