/**
 * BR Pakkeliste
 *
 * Farver og fonte er hentet fra backpackingrejser.dk (Astra + Elementor).
 * Rubik og Karla loades allerede af temaet, så der er ingen @import her.
 * Alt er scopet under .br-pakkeliste, så intet siver ud i temaet.
 */

.br-pakkeliste{
  --mint:#6DC7B6;        /* brandfarve: fyld og valgt tilstand */
  --mint-tekst:#2F8878;  /* mørkere mint, kun til linktekst (kontrast) */
  --ink:#0C0C0C;
  --ink-2:#3A3A3A;
  --brod:#4B4F58;
  --grey:#F2F2F2;
  --grey-2:#EAEAEA;
  --line:#D6D6D6;
  --line-soft:#ECECEC;
  --hvid:#FFFFFF;

  /* Sæt til headerens højde hvis du bruger sticky header i Elementor */
  --brk-top:0px;

  font:400 18px/1.65 "Karla", sans-serif;
  color:var(--brod);
  font-variant-numeric:tabular-nums;
  margin:0 0 2em;
}
.br-pakkeliste *{box-sizing:border-box}

/* ---------- spørgsmål ---------- */
.br-pakkeliste .brk-form{border-top:1px solid var(--line)}
.br-pakkeliste .brk-q{
  display:grid;grid-template-columns:130px 1fr;gap:12px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.br-pakkeliste .brk-q > span{font:500 16px/1.3 "Rubik", sans-serif;color:var(--brod)}
.br-pakkeliste .brk-opts{display:flex;flex-wrap:wrap;gap:6px}
.br-pakkeliste .brk-opts button{
  font:400 17px/1 "Karla", sans-serif;
  background:var(--hvid);color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  padding:10px 14px;cursor:pointer;
}
.br-pakkeliste .brk-opts button:hover{border-color:var(--mint)}
.br-pakkeliste .brk-opts button[aria-checked="true"]{
  background:var(--mint);border-color:var(--mint);color:var(--ink);font-weight:700;
}
.br-pakkeliste .brk-opts button:focus-visible,
.br-pakkeliste .brk-act button:focus-visible,
.br-pakkeliste .brk-item input:focus-visible{
  outline:2px solid var(--mint-tekst);outline-offset:2px;
}

/* ---------- klæbende måler ---------- */
.br-pakkeliste .brk-bar{
  position:sticky;top:var(--brk-top);z-index:5;
  padding:14px 0 0;background:var(--grey);
  border-bottom:1px solid var(--grey-2);
  box-shadow:0 0 0 100vmax var(--grey);clip-path:inset(0 -100vmax);
}
.br-pakkeliste .brk-bar-in{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.br-pakkeliste .brk-fig{font:600 clamp(24px,6.5vw,32px)/1 "Rubik", sans-serif;color:var(--ink)}
.br-pakkeliste .brk-fig small{font:400 15px/1 "Karla", sans-serif;color:var(--brod);margin-left:5px}
.br-pakkeliste .brk-gauge{margin:11px 0 0}
.br-pakkeliste .brk-track{
  position:relative;height:10px;background:var(--hvid);
  border:1px solid var(--grey-2);overflow:hidden;
}
.br-pakkeliste .brk-fill{
  position:absolute;top:0;bottom:0;left:0;background:var(--mint);transition:width .28s ease;
}
.br-pakkeliste .brk-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--grey-2)}
.br-pakkeliste .brk-scale{
  display:flex;justify-content:space-between;
  font:400 13px/1.4 "Karla", sans-serif;color:var(--brod);margin-top:3px;
}
.br-pakkeliste .brk-advice{margin:9px 0 0;font-size:15px;line-height:1.5;max-width:60ch}
.br-pakkeliste .brk-progress{height:3px;background:var(--grey-2);margin:12px 0 0}
.br-pakkeliste .brk-progress i{display:block;height:100%;background:var(--ink-2);transition:width .2s ease}

/* ---------- listen ---------- */
.br-pakkeliste .brk-cat{margin:28px 0 0}
.br-pakkeliste .brk-cat > h2{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:600 18px/1.3 "Rubik", sans-serif;color:var(--ink);
  margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.br-pakkeliste .brk-cat > h2 b{font:400 14px/1 "Karla", sans-serif;color:var(--brod)}
.br-pakkeliste .brk-item{
  display:grid;grid-template-columns:24px 1fr auto;gap:10px;
  align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line-soft);
}
.br-pakkeliste .brk-item input{
  width:18px;height:18px;margin:3px 0 0;accent-color:var(--mint);cursor:pointer;
}
.br-pakkeliste .brk-item label{cursor:pointer;color:var(--ink-2)}
.br-pakkeliste .brk-item.on label{color:#8A8F97;text-decoration:line-through}
.br-pakkeliste .brk-note{
  display:block;font-size:15px;line-height:1.45;color:var(--brod);text-decoration:none;
}
.br-pakkeliste .brk-item a{color:var(--mint-tekst);text-underline-offset:2px}
.br-pakkeliste .brk-g{font-size:15px;color:var(--brod);white-space:nowrap}

/* ---------- handlinger ---------- */
.br-pakkeliste .brk-act{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.br-pakkeliste .brk-act[hidden]{display:none}
.br-pakkeliste .brk-act button{
  font:500 16px/1 "Rubik", sans-serif;background:var(--mint);color:var(--ink);
  border:1px solid var(--mint);border-radius:0;padding:13px 18px;cursor:pointer;
}
.br-pakkeliste .brk-act button.ghost{background:var(--hvid);border-color:var(--line)}
.br-pakkeliste .brk-say{
  margin:12px 0 0;font-size:15px;color:var(--mint-tekst);min-height:1.4em;word-break:break-all;
}

@media (max-width:560px){
  .br-pakkeliste{font-size:17px}
  .br-pakkeliste .brk-q{grid-template-columns:1fr;gap:7px;align-items:start}
}

@media (prefers-reduced-motion:reduce){
  .br-pakkeliste *{transition:none !important}
}

@media print{
  .br-pakkeliste{font-size:11pt;color:#000}
  .br-pakkeliste .brk-form,
  .br-pakkeliste .brk-act,
  .br-pakkeliste .brk-say,
  .br-pakkeliste .brk-progress,
  .br-pakkeliste .brk-gauge{display:none}
  .br-pakkeliste .brk-bar{
    position:static;background:none;border:0;padding:0;box-shadow:none;clip-path:none;
  }
  .br-pakkeliste .brk-list{columns:2;column-gap:28px}
  .br-pakkeliste .brk-cat{break-inside:avoid;margin-top:14px}
  .br-pakkeliste .brk-item{break-inside:avoid}
  .br-pakkeliste .brk-item a{color:inherit;text-decoration:none}
}