/* ============================================================
   Smart Flytt — cookie consent UI
   ------------------------------------------------------------
   Uses the site's existing design tokens (--ink, --paper, --line,
   --spruce, --white, --r-md, --btn-h…) so the banner is part of the
   same visual system as every other card on the site. Fallback
   values keep it correct if a page is ever opened standalone.
   ============================================================ */

.sf-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--white,#FFFCF6);
  border-top:1px solid var(--line,#DCD2B8);
  box-shadow:0 -10px 30px -22px rgba(19,35,61,0.45);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink,#13233D);
}
.sf-consent[hidden]{display:none;}

.sf-consent-inner{
  max-width:1180px;margin:0 auto;padding:18px 28px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.sf-consent-copy{flex:1 1 420px;min-width:0;}
.sf-consent-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.05rem;margin:0 0 6px;font-weight:600;letter-spacing:-0.01em;
}
.sf-consent-copy p{
  margin:0;font-size:0.86rem;line-height:1.55;color:var(--ink-soft,#33455f);
}
.sf-consent-copy a{color:var(--spruce,#2F5D50);text-decoration:underline;}

.sf-consent-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto;
}

/* Accept and Reject are the same control at the same size, so one is
   never easier to reach than the other. */
.sf-consent-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h,46px);padding:0 22px;
  border-radius:var(--r-pill,999px);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;font-size:0.9rem;line-height:1.25;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.sf-consent-accept{background:var(--spruce,#2F5D50);color:var(--white,#FFFCF6);}
.sf-consent-accept:hover{background:var(--spruce-deep,#20423A);}
.sf-consent-reject{
  background:transparent;color:var(--ink,#13233D);border-color:var(--ink,#13233D);
}
.sf-consent-reject:hover{background:var(--ink,#13233D);color:var(--paper,#F6F2E9);}

.sf-consent-link{
  background:none;border:0;padding:8px 6px;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;
  font-size:0.88rem;font-weight:600;color:var(--ink-soft,#33455f);
  text-decoration:underline;text-underline-offset:3px;
  min-height:var(--btn-h,46px);
}
.sf-consent-link:hover{color:var(--ink,#13233D);}

/* ---------------- settings dialog ---------------- */
.sf-consent-backdrop{
  position:fixed;inset:0;z-index:9100;
  background:rgba(19,35,61,0.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.sf-consent-backdrop[hidden]{display:none;}

.sf-consent-dialog{
  background:var(--white,#FFFCF6);
  border:1px solid var(--line,#DCD2B8);
  border-radius:var(--r-md,14px);
  box-shadow:0 30px 60px -30px rgba(19,35,61,0.55);
  width:min(620px,100%);max-height:86vh;overflow:auto;
  padding:26px 28px 22px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink,#13233D);
}
.sf-consent-dialog h2{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.3rem;margin:0 0 16px;font-weight:600;letter-spacing:-0.01em;
}
.sf-consent-rows{display:flex;flex-direction:column;gap:2px;}
.sf-consent-row{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:14px 0;border-top:1px solid var(--paper-dim,#EEE7D8);
}
.sf-consent-row:first-child{border-top:0;}
.sf-consent-row input{width:18px;height:18px;margin-top:3px;accent-color:var(--spruce,#2F5D50);}
/* the pages set a global label{font-family:'JetBrains Mono'} for the
   calculator's field labels; the consent rows are prose, not field
   labels, so they state their own face */
.sf-consent-row label{
  cursor:pointer;display:block;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.sf-consent-row-locked label{cursor:default;}
.sf-consent-row-t{
  display:block;font-weight:600;font-size:0.94rem;margin-bottom:3px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.sf-consent-row-t em{
  font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:0.66rem;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--spruce,#2F5D50);margin-left:6px;
}
.sf-consent-row-d{
  display:block;font-size:0.84rem;line-height:1.5;color:var(--ink-soft,#33455f);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.sf-consent-dialog-links{
  margin:14px 0 18px;font-size:0.84rem;color:var(--ink-soft,#33455f);
}
.sf-consent-dialog-links a{color:var(--spruce,#2F5D50);}

/* visible keyboard focus everywhere in the consent UI, including on
   pages whose inputs otherwise clear their outline */
.sf-consent :focus-visible,
.sf-consent-dialog :focus-visible{
  outline:3px solid var(--stamp,#B23A2E);outline-offset:3px;
}

/* the footer's "Evästeasetukset" control */
.footer-consent-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;
  font-size:0.78rem;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
}
.footer-consent-btn:hover{color:var(--white,#FFFCF6);}

@media (max-width:720px){
  .sf-consent-inner{padding:16px 18px 18px;gap:14px;}
  .sf-consent-actions{width:100%;}
  .sf-consent-btn{flex:1 1 140px;}
  .sf-consent-link{flex:1 1 100%;text-align:center;}
  .sf-consent-dialog{padding:22px 18px 18px;max-height:90vh;}
}
@media (max-width:380px){
  .sf-consent-btn{flex:1 1 100%;padding:0 14px;}
}