/* Kiplot Consent - frontend banner
 * Every rule is scoped to #kc-root or #kc-floating.
 * ID selectors (specificity 1,0,0) beat most host-theme class rules (0,1,0)
 * without needing !important. The reset block neutralises inherited
 * typography, colour, spacing, and box-sizing that themes commonly set.
 */

/* ---------- Reset / isolation
 * Note: we intentionally DO NOT set `color` on descendants.
 * Color should inherit from #kc-root down, so buttons and their inner
 * <span>s can override it without being clobbered by a universal rule.
 */
#kc-root,
#kc-floating{
  font-family:var(--kc-font);
  font-size:14px;
  line-height:1.5;
  color:var(--kc-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#kc-root *,
#kc-root *::before,
#kc-root *::after,
#kc-floating *,
#kc-floating *::before,
#kc-floating *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  background:transparent;
  text-shadow:none;
  float:none;
  font-family:inherit;
  line-height:inherit;
}

#kc-root button,
#kc-floating{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  text-transform:none;
  letter-spacing:normal;
}

#kc-root input[type="checkbox"]{
  accent-color:var(--kc-accent);
}

#kc-root a{color:var(--kc-accent)}
#kc-root h1,#kc-root h2,#kc-root h3,#kc-root h4,#kc-root h5,#kc-root h6,
#kc-root p,#kc-root ul,#kc-root ol,#kc-root li,#kc-root span,#kc-root div,
#kc-root label,#kc-root button{
  font-weight:400;
  text-align:left;
}

/* ---------- Root container ---------- */
#kc-root{
  position:fixed;
  inset:auto 0 0 0;
  z-index:2147483600;
  font-family:var(--kc-font);
  color:var(--kc-text);
  line-height:1.5;
  pointer-events:none;   /* children re-enable; prevents catching clicks while hidden */
}
#kc-root.kc-hidden{display:none}
#kc-root[data-theme="dark"]{--kc-bg:#1a1a3d;--kc-text:#F5F7FA}
#kc-root > *{pointer-events:auto}

/* Top positions */
#kc-root[data-position="top"]       { inset:0 0 auto 0; }
#kc-root[data-position="top-left"]  { inset:0 auto auto 0; }
#kc-root[data-position="top-right"] { inset:0 0 auto auto; }

/* ---------- Scrim (only when force-action mode) ---------- */
#kc-root .kc-scrim{display:none}
#kc-root[data-force="1"] .kc-scrim{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(15,12,50,.55);
  pointer-events:auto;
  z-index:-1;
}
html.kc-lock, body.kc-lock{overflow:hidden !important}

/* ---------- Banner ---------- */
#kc-root .kc-banner{
  width:100%;
  /* 98% opacity bar — falls back to solid colour on browsers without color-mix */
  background:var(--kc-bg);
  background:color-mix(in srgb, var(--kc-bg) 98%, transparent);
  color:var(--kc-text);
  border-top:3px solid var(--kc-primary);
  box-shadow:0 -6px 24px rgba(61,60,180,.15);
  animation:kcSlideUp .32s cubic-bezier(.2,.8,.2,1);
}
/* Top-positioned variants: accent on bottom edge, slide down */
#kc-root[data-position^="top"] .kc-banner{
  border-top:0;
  border-bottom:3px solid var(--kc-primary);
  box-shadow:0 6px 24px rgba(61,60,180,.18);
  animation:kcSlideDown .32s cubic-bezier(.2,.8,.2,1);
}
#kc-root .kc-banner-inner{
  max-width:1280px;
  margin:0 auto;
  padding:56px 28px;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}
#kc-root .kc-content{flex:1 1 420px;min-width:260px}
#kc-root .kc-title{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--kc-primary);
}
#kc-root .kc-message{
  margin:0;
  font-size:14px;
  color:var(--kc-text);
  opacity:.85;
}
#kc-root .kc-link{
  position:relative;
  color:var(--kc-primary);
  text-decoration:none;
  font-weight:600;
}
#kc-root .kc-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background:currentColor;
  transform:translateX(-50%);
  transition:width .28s cubic-bezier(.2,.8,.2,1);
}
#kc-root .kc-link:hover::after{width:100%}

/* ---------- Buttons ---------- */
#kc-root .kc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#kc-root .kc-btn{
  border:1px solid transparent;
  border-radius:6px;
  padding:11px 20px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  transition:transform .08s ease,background .15s ease,color .15s ease,border-color .15s ease;
  min-width:120px;
  text-align:center;
  line-height:1.2;
}
#kc-root .kc-btn:active{transform:translateY(1px)}
#kc-root .kc-btn-primary,
#kc-root .kc-btn-primary span{
  color:#fff;
}
#kc-root .kc-btn-primary{
  background:var(--kc-primary);
  border-color:var(--kc-primary);
}
#kc-root .kc-btn-primary:hover,
#kc-root .kc-btn-primary:hover span{color:#fff}
#kc-root .kc-btn-primary:hover{
  background:#2e2d9c;
  border-color:#2e2d9c;
}

/* Emphasised Accept — same size / same weight as Reject, but brand-coloured
   with a subtle shadow and a check icon. Compliant: no size, text-weight, or
   vertical-alignment disparity. */
#kc-root[data-emphasise="1"] .kc-btn-accept{
  box-shadow:0 3px 10px rgba(61,60,180,.2);
}
#kc-root[data-emphasise="1"] .kc-btn-accept:hover{
  box-shadow:0 4px 12px rgba(61,60,180,.28);
}
#kc-root .kc-btn-accept{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#kc-root .kc-check{flex-shrink:0;color:#fff}
#kc-root .kc-btn-secondary{
  background:transparent;
  color:var(--kc-primary);
  border-color:var(--kc-primary);
}
/* Subtle hover: tiny bg tint + darker border. Text colour unchanged. */
#kc-root .kc-btn-secondary:hover{
  background:rgba(61,60,180,.06);
  border-color:#2e2d9c;
  color:var(--kc-primary);
}
#kc-root .kc-btn-ghost{
  position:relative;
  background:transparent;
  color:var(--kc-primary);
  border-color:transparent;
  text-decoration:none;
  min-width:0;
  padding:11px 8px;
}
#kc-root .kc-btn-ghost::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:9px;
  width:0;
  height:2px;
  background:currentColor;
  transform:translateX(-50%);
  transition:width .28s cubic-bezier(.2,.8,.2,1);
}
#kc-root .kc-btn-ghost:hover::after{width:calc(100% - 16px)}
#kc-root[data-theme="dark"] .kc-btn-secondary{color:#fff;border-color:rgba(255,255,255,.6)}
#kc-root[data-theme="dark"] .kc-btn-secondary:hover{background:#fff;color:var(--kc-primary)}

/* ---------- Box layout ---------- */
#kc-root[data-layout="box"] .kc-banner{
  max-width:460px;
  margin:0 24px 24px;
  border-radius:12px;
  border:1px solid rgba(11,37,69,.08);
  border-top:3px solid var(--kc-accent);
}
#kc-root[data-layout="box"][data-position="bottom-right"]{inset:auto 0 0 auto}
#kc-root[data-layout="box"][data-position="bottom-left"]{inset:auto auto 0 0}
#kc-root[data-layout="box"] .kc-banner-inner{
  flex-direction:column;
  align-items:stretch;
  padding:22px;
}
#kc-root[data-layout="box"] .kc-actions{justify-content:stretch}
#kc-root[data-layout="box"] .kc-actions .kc-btn{flex:1}

/* ---------- Modal ---------- */
#kc-root .kc-modal{
  position:fixed;
  inset:0;
  z-index:2147483601;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
#kc-root .kc-modal[hidden]{display:none}
#kc-root .kc-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,37,69,.55);
  backdrop-filter:blur(2px);
}
#kc-root .kc-modal-card{
  position:relative;
  background:var(--kc-bg);
  color:var(--kc-text);
  max-width:560px;
  width:100%;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(11,37,69,.3);
  overflow:hidden;
  animation:kcPop .22s cubic-bezier(.2,.8,.2,1);
}
#kc-root .kc-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(11,37,69,.1);
  background:var(--kc-primary);
  color:#fff;
}
#kc-root .kc-modal-head h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff;
}
#kc-root .kc-close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  opacity:.85;
  padding:4px 8px;
}
#kc-root .kc-close:hover{opacity:1;color:var(--kc-accent)}
#kc-root .kc-modal-body{padding:8px 22px 4px;overflow-y:auto}
#kc-root .kc-modal-foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:16px 22px;
  border-top:1px solid rgba(11,37,69,.1);
}

/* ---------- Categories ---------- */
#kc-root .kc-cat{padding:14px 0;border-bottom:1px solid rgba(11,37,69,.08)}
#kc-root .kc-cat:last-child{border-bottom:0}
#kc-root .kc-cat-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
}
#kc-root .kc-cat-label{
  font-weight:700;
  color:var(--kc-primary);
  font-size:14px;
  margin-bottom:3px;
}
#kc-root[data-theme="dark"] .kc-cat-label{color:var(--kc-accent)}
#kc-root .kc-cat-desc{font-size:13px;opacity:.8}

/* ---------- Toggle switch ---------- */
#kc-root .kc-toggle{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
  flex-shrink:0;
}
#kc-root .kc-toggle input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
#kc-root .kc-slider{
  position:absolute;
  inset:0;
  background:#cbd2db;
  border-radius:24px;
  cursor:pointer;
  transition:background .2s;
}
#kc-root .kc-slider::before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
#kc-root .kc-toggle input:checked + .kc-slider{background:var(--kc-accent)}
#kc-root .kc-toggle input:checked + .kc-slider::before{transform:translateX(18px)}
#kc-root .kc-toggle input:disabled + .kc-slider{opacity:.55;cursor:not-allowed}

/* ---------- Floating reopen button (sibling of #kc-root) ---------- */
#kc-floating{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:2147483590;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:var(--kc-primary,#0B2545);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(11,37,69,.28);
  transition:transform .15s,background .15s;
  font-family:"Century Gothic","Futura","Helvetica Neue",Arial,sans-serif;
}
#kc-floating[hidden]{display:none}
#kc-floating:hover{
  background:var(--kc-accent,#13C4A3);
  color:var(--kc-primary,#0B2545);
  transform:scale(1.06);
}
#kc-floating svg{display:block;width:22px;height:22px;fill:currentColor}

/* ---------- Animations (keyframe names prefixed to avoid collisions) ---------- */
@keyframes kcSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes kcSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes kcPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Footer re-entry link (persistent access to preferences) ---------- */
.kc-reopen-wrap{
  display:inline-block;
  margin:0 .5em;
  font-family:"Century Gothic","Futura","Helvetica Neue",Arial,sans-serif;
  font-size:.9em;
}
.kc-reopen-link{
  color:inherit;
  opacity:.75;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:opacity .15s;
}
.kc-reopen-link:hover,.kc-reopen-link:focus{opacity:1;color:#3d3cb4}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  #kc-root .kc-banner-inner{padding:18px;gap:14px}
  #kc-root .kc-actions{width:100%}
  #kc-root .kc-actions .kc-btn{flex:1;min-width:0}
  #kc-root .kc-btn-ghost{flex-basis:100%;order:-1;text-align:center}
}