/* ============================================================
   FLOWWRK COOKIE CONSENT SYSTEM — styles
   Reuses the site's existing design tokens (defined as CSS custom
   properties on :root in index.html / privacy.html): --bg, --surface,
   --ink, --ink-muted, --line, --line-strong, --peach, --peach-ink,
   --peach-tint, --accent, --accent-ink, --sage, --sage-tint, --sans,
   --mono, --radius-btn, --radius-rect, --radius-lg, --radius-md.
   This file assumes those variables already exist on :root — it does
   not redefine them, so it must be loaded on pages that also load the
   page's own inline <style> block.
   ============================================================ */

.fw-consent-hidden{display:none !important;}

/* ---------- shared building blocks ---------- */
.fw-consent-visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.fw-consent-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;line-height:1;
  padding:13px 22px;border-radius:var(--radius-btn);cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.fw-consent-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* Accept and Reject share the same visual weight on purpose — neither
   button is styled to look more "correct" or more clickable than the other. */
.fw-consent-btn--accept{background:var(--accent);color:var(--accent-ink);}
.fw-consent-btn--accept:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(225,224,38,0.38);}
.fw-consent-btn--reject{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.fw-consent-btn--reject:hover{border-color:var(--ink);background:rgba(15,15,15,0.03);}
.fw-consent-btn--manage{background:transparent;color:var(--ink-muted);border-color:transparent;text-decoration:underline;text-underline-offset:3px;padding:13px 6px;font-size:12px;font-weight:500;}
.fw-consent-btn--manage:hover{color:var(--ink);}
.fw-consent-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.fw-consent-btn--ghost:hover{border-color:var(--ink);background:rgba(15,15,15,0.03);}

/* ---------- consent bar ---------- */
#fw-consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -12px 32px rgba(15,15,15,0.10);
  padding:22px clamp(18px,4vw,40px);
  font-family:var(--sans);color:var(--ink);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.16,.8,.3,1);
}
#fw-consent-bar[data-open="true"]{transform:translateY(0);}
#fw-consent-bar[hidden]{display:none;}
@media(prefers-reduced-motion:reduce){#fw-consent-bar{transition:none;}}

.fw-bar-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.fw-bar-copy{flex:1 1 150px;min-width:260px;}
.fw-bar-copy p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-muted);max-width:680px;}
.fw-bar-copy .fw-bar-links{margin-top:8px;font-family:var(--mono);font-size:11.5px;display:flex;gap:16px;flex-wrap:wrap;}
.fw-bar-copy .fw-bar-links a{color:var(--peach-ink);text-decoration:underline;text-underline-offset:2px;}
.fw-bar-copy .fw-bar-links a:hover{color:var(--ink);}

.fw-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;}

/* Desktop reading order left-to-right: Manage Preferences, Reject, Accept
   All — Accept lands last/rightmost. Visual order only (see CSS `order`
   below); DOM order stays Accept/Reject/Manage so keyboard and
   screen-reader users still get the same order as the mobile layout. */
.fw-bar-actions .fw-consent-btn--manage{order:1;}
.fw-bar-actions .fw-consent-btn--reject{order:2;}
.fw-bar-actions .fw-consent-btn--accept{order:3;}

@media(max-width:640px){
  #fw-consent-bar{padding:14px 16px 16px;max-height:min(72vh,420px);overflow-y:auto;}
  .fw-bar-inner{flex-direction:column;align-items:stretch;gap:12px;}
  .fw-bar-copy p{font-size:13px;line-height:1.5;}
  .fw-bar-copy .fw-bar-links{margin-top:6px;}
  .fw-bar-actions{width:100%;gap:8px;}
  .fw-bar-actions .fw-consent-btn{flex:1 1 auto;padding:11px 16px;font-size:13.5px;}
  /* Mobile layout: Reject (left) / Accept All (right) share the top row —
     Accept All on the right mirrors its position on desktop and in the
     panel — with Manage Preferences full-width below both. */
  .fw-bar-actions .fw-consent-btn--reject{order:1;}
  .fw-bar-actions .fw-consent-btn--accept{order:2;}
  .fw-bar-actions .fw-consent-btn--manage{flex-basis:100%;order:3;padding:8px 6px;}
}

/* ---------- preference modal ---------- */
#fw-consent-modal{position:fixed;inset:0;z-index:600;visibility:hidden;transition:visibility 0s linear .2s;}
#fw-consent-modal[data-open="true"]{visibility:visible;transition:visibility 0s linear 0s;}
#fw-consent-modal[hidden]{display:none;}
.fw-modal-backdrop{position:absolute;inset:0;background:rgba(15,15,15,0.78);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease;}
#fw-consent-modal[data-open="true"] .fw-modal-backdrop{opacity:1;}
.fw-modal-panel{
  position:relative;max-width:620px;width:calc(100% - 32px);margin:5vh auto;
  max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(0,0,0,0.35);
  opacity:0;transform:scale(0.97) translateY(8px);transition:opacity .2s ease, transform .2s ease;
  padding:32px clamp(20px,4vw,36px) 28px;font-family:var(--sans);color:var(--ink);
}
#fw-consent-modal[data-open="true"] .fw-modal-panel{opacity:1;transform:scale(1) translateY(0);}
@media(prefers-reduced-motion:reduce){
  .fw-modal-backdrop,.fw-modal-panel{transition:none;}
}
@media(max-width:640px){
  .fw-modal-panel{width:calc(100% - 20px);margin:16px auto;padding:24px 18px 22px;max-height:calc(100vh - 32px);}
}

.fw-modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--bg);border:none;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease;
}
.fw-modal-close:hover{transform:scale(1.08);}
.fw-modal-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.fw-modal-panel h2{font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:0 0 8px;padding-right:34px;}
.fw-modal-intro{font-size:13.5px;color:var(--ink-muted);margin:0 0 26px;line-height:1.6;}

.fw-cat{border-top:1px solid var(--line);padding:18px 0;}
.fw-cat:last-of-type{border-bottom:1px solid var(--line);}
.fw-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;}
.fw-cat-head h3{font-size:14.5px;font-weight:700;margin:0;}
.fw-cat p{font-size:13px;color:var(--ink-muted);margin:0;line-height:1.55;}
.fw-cat-required{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-faint);border:1px solid var(--line);padding:4px 9px;border-radius:var(--radius-btn);}

/* accessible toggle switch */
.fw-toggle{position:relative;display:inline-flex;align-items:center;flex-shrink:0;}
.fw-toggle input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer;}
.fw-toggle input:disabled{cursor:not-allowed;}
.fw-toggle-track{
  width:44px;height:24px;border-radius:999px;background:var(--line-strong);
  transition:background .15s ease;position:relative;pointer-events:none;
}
.fw-toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,0.3);transition:transform .15s ease;
}
.fw-toggle input:checked + .fw-toggle-track{background:var(--sage);}
.fw-toggle input:checked + .fw-toggle-track::after{transform:translateX(20px);}
.fw-toggle input:disabled + .fw-toggle-track{background:var(--ink-faint);opacity:.55;}
.fw-toggle input:focus-visible + .fw-toggle-track{outline:2px solid var(--ink);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .fw-toggle-track,.fw-toggle-track::after{transition:none;}
}

.fw-modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.fw-modal-actions .fw-consent-btn{flex:1 1 auto;}
.fw-modal-footnote{margin-top:16px;font-size:11.5px;color:var(--ink-faint);line-height:1.6;}
.fw-modal-footnote a{color:var(--peach-ink);text-decoration:underline;text-underline-offset:2px;}

/* ---------- media / embed placeholders ---------- */
.fw-media-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:22px;background:var(--surface);
}
.fw-media-placeholder p{margin:0;font-size:12.5px;color:var(--ink-muted);max-width:320px;line-height:1.6;}
.fw-media-placeholder .fw-media-icon{
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700;
}

/* Senja / testimonial widget placeholder occupies normal flow, not absolute */
.fw-senja-placeholder{
  border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
  padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:repeating-linear-gradient(135deg, rgba(15,15,15,0.02) 0 2px, transparent 2px 14px);
}
.fw-senja-placeholder p{margin:0;font-size:13px;color:var(--ink-muted);max-width:420px;line-height:1.6;}

/* ---------- persistent footer link ---------- */
.fw-cookie-prefs-link{
  background:none;border:none;padding:0;margin:0;font:inherit;color:var(--ink-muted);
  cursor:pointer;text-decoration:none;transition:color .15s ease;
}
.fw-cookie-prefs-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.fw-cookie-prefs-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}