/* ═══════════════════════════════════════════════════════════════════════════
   BidAll white-label — bespoke site theme.

   ▶▶ TO RESKIN FOR A CLIENT, EDIT ONLY THE "BRAND PALETTE" BLOCK BELOW. ◀◀
   Everything else derives from those tokens (light + dark), so a new client is
   ~6 colour lines + a font. Don't hunt through the rest of the file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── BRAND PALETTE (edit per client) ───────────────── */
:root{
  --brand:        #002F69;   /* primary brand colour — headers, links, accents on light bg */
  --brand-deep:   #001B3D;   /* darker shade — the always-dark hero band */
  --accent:       #C1FF72;   /* call-to-action / highlight colour (primary button, badges) */
  --accent-rgb:   193 255 114; /* SAME accent as "R G B" — used for soft tints, keep in sync */
  --on-accent:    #06210a;   /* text/icon colour that sits ON the accent — MUST contrast it */
  --radius:       12px;      /* corner rounding */
  --max:          1120px;    /* content max width */
  --font:         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ─────────────────── Semantic tokens — light (default) ───────────────────── */
/* Neutral surfaces/greys. Sensible defaults; tweak only if the brand needs it. */
:root{
  --bg:#eef2f7; --surface:#ffffff; --surface-2:#f4f8fc;
  --text:#0c1a2e; --muted:#54657e; --line:rgba(9,26,50,.12);
  --accent-text:var(--brand);        /* on-page accent colour (links/kickers) — brand on light */
  --accent-text-on:#ffffff;          /* text sitting on an --accent-text fill — white on light */
  --header-bg:rgba(255,255,255,.9);
  color-scheme:light;
}
/* ─────────────────── Semantic tokens — dark ──────────────────────────────── */
:root[data-theme="dark"]{
  --bg:#000110; --surface:#0b1a30; --surface-2:#071528;
  --text:#e8eef6; --muted:#9fb2cc; --line:rgba(255,255,255,.12);
  --accent-text:var(--accent);       /* on-page accent colour — the bright accent on dark */
  --accent-text-on:var(--on-accent); /* text on an --accent-text fill — dark on the accent */
  --header-bg:rgba(0,0,0,.55);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000110; --surface:#0b1a30; --surface-2:#071528;
    --text:#e8eef6; --muted:#9fb2cc; --line:rgba(255,255,255,.12);
    --accent-text:var(--accent);
    --accent-text-on:var(--on-accent);
    --header-bg:rgba(0,27,61,.92);
    color-scheme:dark;
  }
}

/* ═══════════════════════ Below here rarely changes per client ═════════════ */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-gutter:stable}
  body{
    font-family:var(--font);
    color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
    transition:background .2s ease,color .2s ease;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 22px;border-radius:var(--radius);font-weight:700;font-size:1rem;
    border:2px solid transparent;cursor:pointer;transition:transform .12s ease,opacity .12s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent);color:var(--on-accent)}
  .btn-primary:hover{opacity:.9}
  /* WhatsApp actions are ALWAYS WhatsApp green, never the brand accent (global standard). */
  .btn-whatsapp{background:#25D366;color:#fff}
  .btn-whatsapp:hover{background:#1EBE5D}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}

  /* ---- Header ---- */
  header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;position:relative}
  .brand{display:flex;align-items:center;gap:10px}
  .brand .logo{background:#fff;border-radius:10px;padding:6px 10px}   /* light chip so dark logos stay legible */
  .brand .logo img{height:34px;width:auto}
  .brand .brand-name{font-weight:800;font-size:1.15rem;color:var(--text)}
  .brand .brand-name span{color:var(--accent-text)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .nav-controls{display:flex;align-items:center;gap:8px}
  .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--text);cursor:pointer}
  .icon-btn svg{width:22px;height:22px}
  .theme-toggle .icon-sun{display:none}
  .theme-toggle .icon-moon{display:block}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
  @media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
    :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
  }
  .nav-links{
    display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 20px 16px;
    box-shadow:0 14px 26px rgba(0,0,0,.18);z-index:60;
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:13px 4px;font-size:1rem;color:var(--text);border-bottom:1px solid var(--line)}
  .nav-links a:not(.btn):hover{color:var(--accent-text)}
  .nav-links .btn{width:100%;margin-top:12px}

  /* ---- Hero (always dark brand band) ---- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--brand-deep),#00040e)}
  .hero .bg{position:absolute;inset:0;opacity:.22;object-fit:cover;width:100%;height:100%}
  .hero .wrap{position:relative;padding:64px 20px 72px;text-align:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:18px}
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .2)}
  h1{font-size:2.1rem;line-height:1.15;color:#fff;font-weight:800;letter-spacing:-.02em;max-width:16ch;margin:0 auto}
  h1 .accent{color:var(--accent)}
  .hero p.lead{margin:20px auto 30px;max-width:760px;font-size:1.08rem;color:#cdd9ea}
  .hero-actions{display:flex;flex-direction:column;gap:12px;max-width:360px;margin:0 auto}
  .hero .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
  .hero .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .trust-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:38px;flex-wrap:wrap;opacity:.95}
  .trust-row img{height:52px;width:auto;background:#fff;border-radius:10px;padding:6px}
  .trust-row .lbl{font-size:.78rem;color:#9fb2cc;width:100%;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
  .trust-row b{color:#fff}
  .trust-row span{color:#cdd9ea;font-size:.95rem}

  /* ---- Trusted-by logo marquee (optional section) ---- */
  .trust-band{background:var(--surface-2);padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust-band .head{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:20px;padding:0 20px}
  .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee-track{display:flex;align-items:center;gap:24px;width:max-content;animation:marquee 55s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-logo{height:60px;width:auto;background:#fff;border-radius:12px;padding:8px 14px;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.1)}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

  /* ---- Sections (themed) ---- */
  section.pad{padding:56px 0}
  .section-alt{background:var(--surface-2)}
  .section-head{text-align:center;max-width:720px;margin:0 auto 36px}
  .section-head .kicker{color:var(--accent-text);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
  .section-head h2{color:var(--text);font-size:1.75rem;font-weight:800;margin-top:8px;letter-spacing:-.01em}
  .section-head p{color:var(--muted);margin-top:12px}

  .grid{display:grid;grid-template-columns:1fr;gap:16px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
  .card .ico{width:44px;height:44px;border-radius:12px;background:rgb(var(--accent-rgb) / .18);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1.4rem}
  .card h3{color:var(--text);font-size:1.15rem;margin-bottom:6px}
  .card p{color:var(--muted);font-size:.96rem}

  /* steps */
  .steps{counter-reset:step}
  @media(min-width:560px){ .grid.steps{grid-template-columns:repeat(2,1fr)} }
  .step{position:relative;padding-left:56px}
  .step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:800;display:flex;align-items:center;justify-content:center}

  /* team (optional section) */
  .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .member{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 14px}
  .avatar{width:120px;height:158px;border-radius:50%;object-fit:cover;object-position:center;margin:0 auto 14px;display:block;border:3px solid var(--brand);box-shadow:0 5px 16px rgba(0,0,0,.2);background:var(--surface-2)}
  .member .name{color:var(--text);font-weight:700}
  .member .role{color:var(--muted);font-size:.85rem;margin-top:2px}

  /* contact (themed) */
  .contact{background:var(--surface-2)}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .c-item{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
  .c-item .ico{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:rgb(var(--accent-rgb) / .18);display:flex;align-items:center;justify-content:center}
  .c-item .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
  .c-item .v{color:var(--text);font-weight:700}

  footer{background:var(--surface-2);border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:.88rem}
  footer .logo{background:#fff;border-radius:10px;padding:6px 10px;display:inline-block;margin-bottom:14px}
  footer .logo img{height:30px}
  footer .brand-name{font-weight:800;font-size:1.2rem;color:var(--text);margin-bottom:8px}
  footer .brand-name span{color:var(--accent-text)}
  footer .built{margin-top:14px;font-size:.8rem;opacity:.8}
  footer a{color:var(--muted)}
  footer a:hover{color:var(--accent-text)}

  /* ---- Auction embed (inherits themed tokens; ONE embed, every client) ---- */
  #bidall-auction{
    --bidall-accent:var(--accent-text);        /* accent colour, flips light/dark */
    --bidall-accent-text:var(--accent-text-on);/* text ON the accent, flips light/dark */
    --bidall-bg:transparent;
    --bidall-card-bg:var(--surface);
    --bidall-text:var(--text);
    --bidall-muted:var(--muted);
    --bidall-border:var(--line);
    --bidall-radius:16px;
    --bidall-gap:16px;
    display:block;min-height:120px;
  }
  .embed-empty{color:var(--muted);text-align:center;padding:28px;border:1px dashed var(--line);border-radius:16px}

  /* ---- Desktop ---- */
  @media(min-width:820px){
    h1{font-size:3.2rem}
    .nav-toggle{display:none}
    .nav-links{display:flex;flex-direction:row;position:static;background:transparent;border:0;box-shadow:none;padding:0;gap:26px;align-items:center;font-size:.95rem}
    .nav-links a:not(.btn){padding:0;border:0;color:var(--muted)}
    .nav-links .btn{width:auto;margin:0}
    .hero .wrap{padding:96px 20px 104px}
    .grid{grid-template-columns:repeat(3,1fr)}
    .grid.steps{grid-template-columns:repeat(4,1fr)}
    .team-grid{grid-template-columns:repeat(4,1fr)}
    .contact-grid{grid-template-columns:repeat(2,1fr)}
    .hero-actions{flex-direction:row;max-width:none;justify-content:center}
  }

  /* POPIA cookie-consent banner (rendered by consent.js; analytics stay denied until Accept). */
  #cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  #cookie-consent .cc-wrap{max-width:var(--max);margin:0 auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
  #cookie-consent .cc-text{color:var(--text);font-size:14.5px;line-height:1.55;margin:0}
  #cookie-consent .cc-text a{color:var(--accent-text);text-decoration:underline}
  #cookie-consent .cc-actions{display:flex;gap:12px;width:100%}
  #cookie-consent .cc-actions .btn{flex:1;min-height:44px}
  @media(min-width:560px){
    #cookie-consent .cc-wrap{flex-direction:row;align-items:center;justify-content:space-between}
    #cookie-consent .cc-text{flex:1}
    #cookie-consent .cc-actions{width:auto}
    #cookie-consent .cc-actions .btn{flex:0 0 auto}
  }

  /* Legal / privacy page. */
  .legal{padding:40px 0 64px}
  .legal .doc{max-width:760px;margin:0 auto}
  .legal h1{font-size:clamp(30px,5vw,44px);color:var(--brand);line-height:1.1}
  .legal h2{font-size:clamp(20px,3vw,26px);color:var(--brand);margin:34px 0 10px}
  html[data-theme="dark"] .legal h1,html[data-theme="dark"] .legal h2{color:var(--accent)}
  .legal .updated{color:var(--muted);font-size:14px;margin-top:10px}
  .legal p,.legal li{color:var(--text);font-size:16px;line-height:1.7}
  .legal ul{margin:8px 0 8px 22px}
  .legal li{margin:6px 0}
  .legal a{color:var(--accent-text);text-decoration:underline}
  .legal .lead{font-size:17.5px;color:var(--muted);margin-top:16px}
  .cookie-box{margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}