/* Cookie consent. Sits in the corner rather than across the whole screen: the
   question is real but it is not more important than the page behind it. */
.nd-cc{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  display:flex;justify-content:flex-start;pointer-events:none;
}
.nd-cc-box{
  pointer-events:auto;
  max-width:440px;width:100%;
  background:#FAF9F6;color:#1A1F1E;
  border:1px solid rgba(26,31,30,.1);border-radius:18px;
  box-shadow:0 24px 60px -24px rgba(26,31,30,.45);
  padding:20px 22px;
  font-family:'Poppins',Arial,sans-serif;font-size:.9rem;line-height:1.55;
}
.nd-cc-box:focus{outline:none}
.nd-cc-box h2{margin:0 0 6px;font-size:1.02rem;font-weight:700;line-height:1.3}
.nd-cc-box p{margin:0;color:rgba(26,31,30,.72);font-size:.86rem}

.nd-cc-opts{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px}
/* A class rule with display:flex beats the browser's own [hidden]{display:none},
   so the panel opened itself and every category was on show before anybody
   asked for it. */
/* The banner itself too, not only what is inside it: .nd-cc{display:flex}
   beat [hidden] the same way, so an answer was saved and the banner stayed on
   screen, on every page, looking as if the buttons did nothing. */
.nd-cc[hidden],.nd-cc [hidden]{display:none!important}
.nd-cc-opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.nd-cc-opt.is-locked{cursor:default;opacity:.75}
.nd-cc-opt input{margin:3px 0 0;flex:none;width:16px;height:16px;accent-color:#1A1F1E}
.nd-cc-opt b{display:block;font-size:.86rem;font-weight:600}
.nd-cc-opt em{display:block;font-style:normal;font-size:.78rem;color:rgba(26,31,30,.66);line-height:1.45}

/* Reject and Accept are the same button in the same size. Nothing about the
   styling should make one of them the easy answer. */
.nd-cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.nd-cc-btn{
  /* 1 1 0, not 1 1 auto: with auto they size to their own words and "Aðeins
     nauðsynlegar" comes out wider than "Samþykkja allt". Equal prominence has to
     mean equal, not nearly. */
  flex:1 1 0;min-width:130px;
  border:1px solid #1A1F1E;background:#fff;color:#1A1F1E;
  border-radius:999px;padding:11px 18px;
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s;
}
.nd-cc-btn:hover{background:#1A1F1E;color:#fff}
.nd-cc-save{flex-basis:100%;background:#FFE7A0;border-color:#F5D678}
.nd-cc-save:hover{background:#F5D678;color:#1A1F1E}
/* Settings on its own line under the two answers, so the answers get the
   whole row and "Aðeins nauðsynlegar" stays on one line, as tall as its twin. */
.nd-cc-link{
  flex-basis:100%;text-align:left;
  border:0;background:none;padding:6px 2px;font:inherit;font-size:.82rem;
  color:rgba(26,31,30,.72);text-decoration:underline;cursor:pointer;
}
.nd-cc-link:hover{color:#1A1F1E}
.nd-cc-foot{margin:12px 0 0!important;font-size:.78rem}
.nd-cc-foot a{color:rgba(26,31,30,.72);text-decoration:underline}
.nd-cc-btn:focus-visible,.nd-cc-link:focus-visible,.nd-cc-opt input:focus-visible{
  outline:3px solid #74c7d3;outline-offset:2px;
}

@media (max-width:520px){
  .nd-cc{left:10px;right:10px;bottom:10px}
  .nd-cc-box{padding:18px}
  .nd-cc-btn{min-width:0;flex:1 1 100%}
}
@media (prefers-reduced-motion:no-preference){
  .nd-cc-box{animation:ndCcIn .35s cubic-bezier(.22,.8,.24,1) both}
  @keyframes ndCcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}