/* B2B Engine cookie consent banner styling.

   The defaults below are deliberately colourless. They used to be #16161d and
   #1b3cf5, described in this comment as "neutral placeholder tokens, never a
   client's real palette". They are Escalate's Ink and Cobalt, taken straight
   from the theme this plugin was extracted out of, so every site that never set
   its own colours quietly wore Escalate's branding. b2b-engine.com shipped a
   blue Accept button on a site with no blue in it for months on that basis, and
   Rene caught it on 2026-09-02, the day it went live.

   Grey is the right default: obviously unfinished, and never another client's.

   Set the real colours per site in Settings, Cookie Consent, which writes
   --cc-bg, --cc-accent and --cc-text. A theme can override any of these
   properties for the ones the settings screen does not expose. */
:root{
  --cc-bg:#2b2b2b;
  --cc-text:#ffffff;
  --cc-accent:#6b6b6b;
  --cc-accent-text:#ffffff;
  --cc-radius:14px;
  /* The secondary copy and the hairline follow the text colour, so a site
     that sets a white ground with black text in Settings > Cookie Consent
     gets grey copy and a grey line without a fourth and fifth setting.
     Before 1.0.1 both were fixed translucent white, which disappears on a
     light ground. */
  --cc-muted:color-mix(in srgb, var(--cc-text) 72%, transparent);
  --cc-line:color-mix(in srgb, var(--cc-text) 18%, transparent);
}
/* Standing rule, Rene 2026-09-08: the banner is a full-width bar fixed to the
   bottom, in the page's own colour, separated from the page by ONE hairline,
   styled as the header scaled back. No shadow, no card, no coloured top line.
   1.0.0 drew a drop shadow here; 1.0.1 replaced it with the hairline. */
.cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--cc-bg);color:var(--cc-text);
  padding:1.1rem 1.4rem;
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;
  font-size:.92rem;line-height:1.5;
  border-top:1px solid var(--cc-line);
  transform:translateY(110%);transition:transform .35s ease;
}
.cc-banner.is-open{transform:translateY(0);}

/* Position variants, set from Settings > Cookie Consent. Default (no
   modifier class) is the bottom bar above. */
.cc-banner--top{bottom:auto;top:0;transform:translateY(-110%);
  border-top:0;border-bottom:1px solid var(--cc-line);}
.cc-banner--top.is-open{transform:translateY(0);}
.cc-banner--box-left,.cc-banner--box-right{
  left:auto;right:auto;bottom:1.2rem;max-width:420px;border-radius:16px;
  border:1px solid var(--cc-line);
  flex-direction:column;align-items:flex-start;transform:translateY(140%);}
.cc-banner--box-left{left:1.2rem;}
.cc-banner--box-right{right:1.2rem;}
/* .cc-banner__text's flex-basis of 320px is a preferred WIDTH in the
   default row layout. flex-direction:column above puts that same number on
   the vertical axis instead, so the text block reserved 320px of height it
   never needed and stretched the whole banner to match, well past 400px
   tall for two lines of text. */
.cc-banner--box-left .cc-banner__text,
.cc-banner--box-right .cc-banner__text{flex:0 1 auto;}
.cc-banner--box-left.is-open,.cc-banner--box-right.is-open{transform:translateY(0);}
@media(max-width:560px){
  .cc-banner--box-left,.cc-banner--box-right{left:.8rem;right:.8rem;max-width:none;}
}
.cc-banner__text{flex:1 1 320px;max-width:640px;margin:0;color:var(--cc-muted);}
.cc-banner__text a{color:var(--cc-text);text-decoration:underline;}
.cc-banner__actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.cc-banner__btn{border:0;border-radius:var(--cc-radius);padding:.6rem 1.2rem;
  font:inherit;font-weight:600;cursor:pointer;}
.cc-banner__btn--accept{background:var(--cc-accent);color:var(--cc-accent-text);}
.cc-banner__btn--reject{background:transparent;color:var(--cc-text);
  border:1px solid color-mix(in srgb, var(--cc-text) 35%, transparent);}
.cc-settings-link{cursor:pointer;background:none;border:0;padding:0;
  font:inherit;text-decoration:underline;color:inherit;}
@media(max-width:560px){
  .cc-banner{padding:1rem;}
  .cc-banner__actions{width:100%;}
  .cc-banner__btn{flex:1;}
}