/* 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-muted:rgba(255,255,255,.72);
  --cc-accent:#6b6b6b;
  --cc-accent-text:#ffffff;
  --cc-radius:14px;
}
.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;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
  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%);
  box-shadow:0 6px 24px rgba(0,0,0,.18);}
.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;
  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 rgba(255,255,255,.35);}
.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;}
}