/* ═══════════════════════════════════════════════════════════════════════════
   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:        #E0241B;   /* AuctionWars red (a touch deeper than their #FF3B30 so white text passes contrast) */
  --brand-deep:   #080A0C;   /* their near-black — the always-dark hero band */
  --accent:       #E0241B;   /* call-to-action red (REGISTER buttons) */
  --accent-rgb:   224 36 27; /* SAME accent as "R G B" — used for soft tints, keep in sync */
  --on-accent:    #ffffff;   /* white on the red */
  --amber:        #FFB020;   /* their dashboard amber — kickers/highlights on dark */
  --radius:       12px;      /* corner rounding */
  --max:          1120px;    /* content max width */
  --font:         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:      "Oswald","Arial Narrow",Impact,sans-serif;   /* headings, like their current site */
}

/* ─────────────────── Semantic tokens — light (default) ───────────────────── */
/* Neutral surfaces/greys. Sensible defaults; tweak only if the brand needs it. */
:root{
  --bg:#F1F2F4; --surface:#ffffff; --surface-2:#E8EAED;
  --text:#121518; --muted:#555E68; --line:rgba(18,21,24,.14);
  --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:#080A0C; --surface:#161A1F; --surface-2:#0E1216;
  --text:#E9EEF4; --muted:#A3ADB8; --line:rgba(255,255,255,.12);
  --accent-text:#FF3B30;             /* their brighter red reads better on near-black */
  --accent-text-on:#ffffff;
  --header-bg:rgba(0,0,0,.55);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#080A0C; --surface:#161A1F; --surface-2:#0E1216;
    --text:#E9EEF4; --muted:#A3ADB8; --line:rgba(255,255,255,.12);
    --accent-text:#FF3B30;
    --accent-text-on:#ffffff;
    --header-bg:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

/* ═══════════════════════ Below here rarely changes per client ═════════════ */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-gutter:stable}
  section[id]{scroll-margin-top:76px}
  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}
  }

  /* Floating WhatsApp-group starburst CTA (shown by /embed/v1.js when the profile has a group link) */
  .wa-burst{position:fixed;right:16px;bottom:16px;z-index:90;width:132px;height:132px;display:grid;place-items:center;color:#fff;text-decoration:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));animation:wa-pulse 1.7s ease-in-out infinite}
  .wa-burst[hidden]{display:none}
  .wa-burst::before{content:"";position:absolute;inset:0;background:#25D366;clip-path:polygon(50% 0%,60% 15%,75% 5%,75% 22%,92% 20%,84% 35%,100% 40%,88% 50%,100% 60%,84% 65%,92% 80%,75% 78%,75% 95%,60% 85%,50% 100%,40% 85%,25% 95%,25% 78%,8% 80%,16% 65%,0% 60%,12% 50%,0% 40%,16% 35%,8% 20%,25% 22%,25% 5%,40% 15%);z-index:-1}
  .wa-burst .wa-in{text-align:center;font-weight:800;font-size:10.5px;line-height:1.2;letter-spacing:.3px;text-transform:uppercase}
  .wa-burst svg{width:22px;height:22px;display:block;margin:0 auto 3px}
  .wa-burst:hover{filter:drop-shadow(0 9px 24px rgba(0,0,0,.5))}
  @keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  @media(max-width:600px){.wa-burst{width:104px;height:104px;right:12px;bottom:12px}.wa-burst .wa-in{font-size:9px}.wa-burst svg{width:18px;height:18px}}

  /* 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)}

/* ═══════════════════════ AuctionWars — site-specific ══════════════════════
   Their current site's look (dark "instrument cluster", red + amber, Oswald
   headings) without the heavy extras: no radio, no animated gauges. */
  h1,h2,h3,.kicker,.eyebrow,.nav-links a,.btn,.aw-stat b,.aw-rule b{font-family:var(--display);letter-spacing:.02em}
  h1,h2,h3{text-transform:uppercase;font-weight:700}
  .brand .logo{background:transparent;padding:0}
  .brand .logo img{height:44px;border-radius:8px}
  .nav-links a{text-transform:uppercase;letter-spacing:.06em}
  .eyebrow,.hero .eyebrow{color:var(--amber)}
  .eyebrow .dot{background:var(--amber);box-shadow:0 0 0 4px rgb(255 176 32 / .2)}
  .hero{background:radial-gradient(120% 90% at 50% 0%,#1d2228 0%,#080A0C 60%)}
  .hero .wrap{padding:28px 20px 48px}
  .aw-logo{width:min(560px,100%);height:auto;margin:0 auto 18px;border-radius:12px}
  h1{color:#fff;max-width:20ch}

  /* Next-auction cluster: one dark panel, three dials (days / hrs / min). */
  .aw-cluster{max-width:620px;margin:22px auto 26px;background:#0E1216;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
  .aw-cluster .lbl{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:700}
  .aw-cluster .when{font-family:var(--display);font-size:1.4rem;color:#fff;text-transform:uppercase;margin-top:4px}
  .aw-cluster .sub{color:#A3ADB8;font-size:.95rem}
  .aw-dials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
  .aw-dial{border-radius:50%;aspect-ratio:1;max-width:110px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(circle,#161A1F 58%,transparent 59%),conic-gradient(var(--accent) var(--p,0%),rgba(255,255,255,.1) 0);}
  .aw-dial b{font-family:var(--display);font-size:1.6rem;color:#fff;line-height:1}
  .aw-dial span{font-size:.7rem;letter-spacing:.12em;color:#A3ADB8;text-transform:uppercase}
  .aw-facts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;text-align:left}
  .aw-facts div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px;font-size:.92rem;color:#A3ADB8}
  .aw-facts b{color:#fff;font-weight:600;text-align:right}

  /* What we auction — chips */
  .aw-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
  .aw-chips span{border:1px solid rgba(255,255,255,.18);color:#E9EEF4;border-radius:999px;padding:6px 14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}

  /* Rules & fees board */
  .aw-rules{display:grid;grid-template-columns:1fr;gap:12px}
  .aw-rule{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:18px 20px}
  .aw-rule .n{font-size:.75rem;color:var(--muted);letter-spacing:.12em}
  .aw-rule b{display:block;font-size:1.5rem;color:var(--accent-text);margin:2px 0}
  .aw-rule h3{font-size:1rem;margin-bottom:4px}
  .aw-rule p{color:var(--muted);font-size:.95rem}

  /* Inner-page title band + simple content blocks */
  .page-head{background:radial-gradient(120% 90% at 50% 0%,#1d2228 0%,#080A0C 70%);padding:40px 0 36px;text-align:center}
  .page-head h1{font-size:2rem;margin:0 auto}
  .page-head p{color:#C9D1DA;max-width:640px;margin:12px auto 0}
  .prose{max-width:760px;margin:0 auto}
  .prose p{margin-top:14px;color:var(--text)}
  .prose h2{font-size:1.4rem;margin-top:32px}
  .list{display:grid;gap:10px;margin-top:16px}
  .list li{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
  .list li b{display:block}
  .list li span{color:var(--muted);font-size:.95rem}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:14px}
  .kv dt{color:var(--muted)}
  .kv dd{font-weight:600;text-align:right;overflow-wrap:anywhere}
  .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:24px}
  .role{display:flex;flex-direction:column;gap:6px}
  .role .tag{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);font-weight:700}

  @media(min-width:820px){
    .hero .wrap{padding:40px 20px 72px}
    .aw-facts{grid-template-columns:repeat(3,1fr)}
    .aw-facts div{flex-direction:column;justify-content:flex-start}
    .aw-facts b{text-align:left}
    .aw-rules{grid-template-columns:repeat(3,1fr)}
    .page-head h1{font-size:2.8rem}
    .cta-row{flex-direction:row;justify-content:center}
  }