/* ============================================================
   WrenchSync — cookie consent banner.
   Shared by index.html and the legal pages, so it defines its own
   tokens with fallbacks: --paper/--ink/--line exist on both style
   sheets, but the fallbacks keep it readable if either is missing.
   ============================================================ */

.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:0 16px 16px;
  transform:translateY(120%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.cookie-banner.is-open{transform:translateY(0)}
.cookie-banner[hidden]{display:none}

.cookie-inner{
  pointer-events:auto;
  max-width:1000px;margin-inline:auto;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:20px 24px;border-radius:20px;
  background:var(--paper,#fff);
  border:1px solid var(--line,#E2ECF0);
  box-shadow:0 18px 50px rgba(4,32,44,.24),0 2px 6px rgba(4,32,44,.10);
}
:root[data-theme="dark"] .cookie-inner{box-shadow:0 18px 50px rgba(0,0,0,.62)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cookie-inner{box-shadow:0 18px 50px rgba(0,0,0,.62)}
}

.cookie-icon{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--tint,#EEF8FB);color:var(--accent-soft,#297E97);
}
.cookie-icon svg{width:20px;height:20px}

.cookie-copy{flex:1 1 340px;min-width:0}
.cookie-copy b{
  display:block;margin-bottom:4px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:15px;letter-spacing:-.02em;color:var(--ink,#0C1B22);
}
.cookie-copy p{
  margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2,#3A4E57);
}
.cookie-copy a{color:var(--link,var(--accent-soft,#297E97));text-decoration:underline;text-underline-offset:2px}

/* Accept and Reject carry the same weight on purpose. A prominent
   Accept next to a buried Reject is the pattern regulators single
   out, and it costs nothing to get right. */
.cookie-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.cookie-btn{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:background .15s ease,transform .15s ease;
  min-width:132px;
}
.cookie-btn:hover{transform:translateY(-1px)}
.cookie-accept{background:var(--btn-brand-bg,#0A5C7A);color:#fff}
.cookie-accept:hover{background:var(--btn-brand-bg-h,#166E8F)}
.cookie-reject{
  background:transparent;color:var(--accent-soft,#297E97);
  border-color:var(--outline,#B7E2EE);
}
.cookie-reject:hover{background:var(--tint,#EEF8FB)}

/* footer "Cookie settings" trigger */
.cookie-link{cursor:pointer}

@media (max-width:720px){
  .cookie-inner{padding:18px;gap:16px}
  .cookie-icon{display:none}
  .cookie-actions{width:100%}
  .cookie-btn{flex:1 1 auto;min-width:0}
}
/* ============================================================
   FLOATING BUY BUTTON
   ============================================================ */
.float-cta{
  position:fixed;right:22px;z-index:9000;
  bottom:calc(24px + var(--cookie-h,0px));
  display:flex;align-items:center;gap:11px;
  padding:13px 22px 13px 16px;border-radius:999px;
  background:var(--btn-brand-bg);color:#fff;
  box-shadow:0 16px 38px rgba(7,62,82,.34),0 2px 8px rgba(7,62,82,.20);
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:-.01em;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);
  transition:opacity .32s var(--ease-out,cubic-bezier(.22,.61,.36,1)),transform .32s var(--ease-out,cubic-bezier(.22,.61,.36,1)),
             visibility .32s,bottom .26s var(--ease-out,cubic-bezier(.22,.61,.36,1)),background .2s ease;
}
.float-cta.show{opacity:1;visibility:visible;transform:none}
.float-cta:hover{background:var(--btn-brand-bg-h);transform:translateY(-3px)}
.float-cta:focus-visible{outline:3px solid var(--brand-400);outline-offset:3px}
.float-cta .fc-ring{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
}
.float-cta .fc-ring svg{width:15px;height:15px}
.float-cta .fc-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.float-cta .fc-text small{font-size:10.5px;font-weight:600;opacity:.82;letter-spacing:.02em}

@media (max-width:560px){
  .float-cta{right:14px;bottom:calc(14px + var(--cookie-h,0px));padding:11px 18px 11px 13px;font-size:13.5px}
  .float-cta .fc-ring{width:26px;height:26px}
}