/* SA brand palette layered on top of Bootstrap */
:root {
  --brand: #007a4d;       /* SA green */
  --brand-ink: #00563a;
  --brand-soft: #e6f4ec;
  --gold: #ffb81c;        /* SA gold */
  --gold-ink: #3a2a00;
  --red: #c1272d;         /* SA red */
  --cream: #fffaf2;
  --cream-soft: #fffdf8;
  --line: #ecdfca;
}

html, body {
  overflow-x: hidden; /* prevent horizontal scroll on iOS Safari */
}
body {
  background: var(--cream);
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* SA flag stripe */
.stripe {
  height: 6px;
  background: linear-gradient(to right,
    #007a4d 0 16.66%,
    #ffffff 16.66% 33.33%,
    #ffb81c 33.33% 50%,
    #000000 50% 66.66%,
    #de3831 66.66% 83.33%,
    #002395 83.33% 100%);
}

/* 920px container, narrower than Bootstrap defaults */
.lc-container { max-width: 920px; }

/* Logo tile */
.logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
}

/* Soft, cream-bordered card */
.lc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Hero accent */
.text-brand { color: var(--brand) !important; }
.text-brand-ink { color: var(--brand-ink) !important; }

/* Made-in-SA pill */
.pill-sa {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-ink);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* Form controls - cream background, brand-green focus ring */
.form-control {
  background-color: var(--cream-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.form-control:focus {
  background-color: var(--cream-soft);
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem rgba(0,122,77,0.15);
}
textarea.form-control { min-height: 130px; }

/* Brand-green primary buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-ink);
  --bs-btn-hover-border-color: var(--brand-ink);
  --bs-btn-focus-shadow-rgb: 0,122,77;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-ink);
  --bs-btn-active-border-color: var(--brand-ink);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 22px;
  box-shadow: 0 6px 14px rgba(0,122,77,0.25);
}

/* Cream secondary buttons */
.btn-secondary {
  --bs-btn-color: #1d1d1f;
  --bs-btn-bg: #f4ede0;
  --bs-btn-border-color: #f4ede0;
  --bs-btn-hover-color: #1d1d1f;
  --bs-btn-hover-bg: #ebe1cd;
  --bs-btn-hover-border-color: #ebe1cd;
  --bs-btn-active-color: #1d1d1f;
  --bs-btn-active-bg: #ebe1cd;
  --bs-btn-active-border-color: #ebe1cd;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 22px;
}

/* Gold "Send to a human" CTA */
.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}
.btn-gold:hover { background: #f0a800; color: var(--gold-ink); }
.btn-gold:disabled { background: #e6d9b0; color: #7a6a3a; cursor: wait; }

/* "How it works" tiles */
.how-tile {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  height: 100%;
}

/* Verdict alerts - extend Bootstrap alerts with SA tones */
.verdict {
  border-radius: 14px;
  border-width: 1.5px;
  padding: 18px 20px;
}
.verdict.alert-danger  { background: #fbeaea; border-color: #e8b1b3; color: #1d1d1f; }
.verdict.alert-warning { background: #fff4de; border-color: #ecd3a1; color: #1d1d1f; }
.verdict.alert-success { background: var(--brand-soft); border-color: #b8dec7; color: #1d1d1f; }
.verdict h3.alert-heading { font-size: 20px; margin: 0 0 4px; }
.verdict.alert-danger  h3.alert-heading { color: var(--red); }
.verdict.alert-warning h3.alert-heading { color: #b97309; }
.verdict.alert-success h3.alert-heading { color: var(--brand); }

/* "What we spotted" reasons box */
.reasons-box {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.reasons-box h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b5b62;
  font-weight: 700;
}
.reasons-list { margin: 0; padding: 0; list-style: none; }
.reasons-list li { margin: 4px 0; font-size: 14.5px; word-break: break-word; overflow-wrap: anywhere; }
.reasons-list .good { color: var(--brand-ink); }
.reasons-list .bad  { color: var(--red); }

/* Human-handover boxes */
.human-box {
  background: #f8f3e6;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.human-success {
  background: var(--brand-soft);
  border: 1.5px solid #b8dec7;
  border-radius: 12px;
  padding: 16px;
  color: var(--brand-ink);
}
.human-success strong { color: var(--brand); display: block; margin-bottom: 2px; }
.human-error {
  background: #fbeaea;
  border: 1.5px solid #e8b1b3;
  border-radius: 12px;
  padding: 16px;
  color: var(--red);
}
.human-error strong { display: block; margin-bottom: 2px; }

/* Checkbox brand colour */
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(0,122,77,0.2);
}

/* Bootstrap accordion brand tweaks */
.accordion-button:not(.collapsed) {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
}
.accordion-button:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(0,122,77,0.15);
}
.accordion-button { font-weight: 700; }

/* Nav links */
.nav-link-muted { color: #5b5b62; text-decoration: none; font-size: 14px; }
.nav-link-muted:hover { color: #1d1d1f; }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  gap: 2px;
  background: #f4ede0;
  border-radius: 8px;
  padding: 2px;
  font-size: 12px;
  font-weight: 700;
}
.lang-toggle button {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  color: #5b5b62;
}
.lang-toggle button.active {
  background: var(--brand);
  color: #fff;
}
.lang-toggle button:hover:not(.active) { color: var(--ink); }

/* Input helper buttons (paste from clipboard, upload screenshot) */
.input-helpers { display: flex; gap: 6px; flex-wrap: wrap; }
.input-helper-btn {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  color: #5b5b62;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.input-helper-btn:hover {
  background: #fff;
  color: var(--brand-ink);
  border-color: var(--brand);
}
.input-helper-btn:disabled { opacity: 0.6; cursor: default; }

/* OCR progress strip under textarea */
.ocr-progress {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--brand-soft);
  border: 1px solid #b8dec7;
  border-radius: 8px;
  font-size: 13px;
  color: var(--brand-ink);
}
.ocr-progress.active { display: flex; gap: 8px; align-items: center; }

/* Recently checked history chips */
.history-bar {
  display: none;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--cream-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.history-bar.active { display: block; }
.history-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.history-bar-head span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b5b62;
}
.history-bar-head button {
  background: none;
  border: none;
  color: #5b5b62;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.history-bar-head button:hover { color: var(--red); }
.history-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.history-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: #1d1d1f;
}
.history-chip:hover { border-color: var(--brand); }
.history-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.history-chip .dot.danger  { background: var(--red); }
.history-chip .dot.warn    { background: var(--gold); }
.history-chip .dot.ok      { background: var(--brand); }
.history-chip .chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Severity animation - pulse on danger/warn */
@keyframes verdict-pulse-danger {
  0%   { box-shadow: 0 0 0 0 rgba(193,39,45,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(193,39,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,39,45,0); }
}
@keyframes verdict-pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(185,115,9,0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(185,115,9,0); }
  100% { box-shadow: 0 0 0 0 rgba(185,115,9,0); }
}
@keyframes verdict-shake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-4px); }
  30%  { transform: translateX(4px); }
  45%  { transform: translateX(-3px); }
  60%  { transform: translateX(3px); }
  75%  { transform: translateX(-1px); }
  90%  { transform: translateX(1px); }
}
.verdict.animate-danger {
  animation: verdict-pulse-danger 0.6s ease-out, verdict-shake 0.5s ease-out;
}
.verdict.animate-warn {
  animation: verdict-pulse-warn 0.5s ease-out;
}

/* Share result button */
.btn-share {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #5b5b62;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-share:hover { border-color: var(--brand); color: var(--brand-ink); }

/* Sticky check bar on mobile */
.sticky-check {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.sticky-check.visible { display: flex; gap: 8px; align-items: center; }
.sticky-check .btn { flex: 1; }

@media (max-width: 576px) {
  .history-chip .chip-text { max-width: 140px; }
  body.sticky-active { padding-bottom: 70px; }
}