/* ===== Layout ===== */
.tvpakke-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:18px;
  align-items:flex-start;
}
@media(max-width:900px){
  .tvpakke-layout{ grid-template-columns:1fr; }
}

.tvpakke-filter-col{ position:relative; }
.tvpakke-main{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Placeholder for JS sticky */
.filter-placeholder{ height:0; }

/* Topbar */
.tvpakke-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}
.tvpakke-count{
  font-weight:600;
  color:#2C3E50;
  font-size:.95rem;
}

/* Sortering */
.tvpakke-sort{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.tvpakke-sort label{
  font-size:.9rem;
  color:#6b7a8f;
}
.tvpakke-sort select{
  padding:4px 14px;
  font-size:.9rem;
  border-radius:999px;
  border:2px solid #27AE60;
  background:#F3FBF6;
  color:#2C3E50;
  font-weight:600;
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.tvpakke-sort select:hover,
.tvpakke-sort select:focus{
  box-shadow:0 0 0 3px rgba(39,174,96,0.15);
}

/* Vis flere */
.vis-flere-wrap{
  text-align:center;
  margin:8px 0 4px;
}
#load-more{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid #DFE5EA;
  background:#F6F8FA;
  cursor:pointer;
  font-size:.95rem;
  font-weight:600;
  color:#2C3E50;
}
#load-more:hover{ background:#e5ebf1; }
#load-more:focus-visible{
  outline:2px solid #004A89;
  outline-offset:3px;
}

/* ===== Filterpanel ===== */
.filter-panel{
  background:#fff;
  border:1px solid #E2E6EA;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(44,62,80,.06);
  padding:14px;
  z-index:5;
}
.filter-header{
  font-weight:800;
  font-size:1.05rem;
  color:#2C3E50;
  margin-bottom:8px;
}
.filter-section{
  border:1px solid #E8ECEF;
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
}
.filter-toggle{
  width:100%;
  text-align:left;
  background:#F6F8FA;
  color:#2C3E50;
  font-weight:600;
  padding:10px 12px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.filter-toggle:focus-visible{
  outline:2px solid #004A89;
  outline-offset:2px;
}
.filter-toggle .plus{
  font-weight:800;
  color:#6b7a8f;
  transition:transform .2s ease;
}
.filter-toggle.open .plus{ transform:rotate(45deg); }

.filter-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease,padding .2s ease;
  padding:0 12px;
  background:#fff;
}
.filter-content.open{
  padding:10px 12px 12px;
  max-height:550px;
}
.filter-group{
  display:grid;
  gap:8px;
}

/* Udbyderliste: scroll ved mange */
#udbyder-group{
  max-height:220px;
  overflow:auto;
  padding-right:6px;
}

.filter-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.filter-row input[type="checkbox"]{ transform:translateY(1px); }
.filter-row input[type="checkbox"]:focus-visible{
  outline:2px solid #004A89;
  outline-offset:2px;
}

.filter-hint{
  font-size:12px;
  color:#6b7a8f;
  margin-top:6px;
}
.filter-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
}
.result-count{
  font-size:.92rem;
  color:#6b7a8f;
}
.reset-btn{
  background:#eef2f6;
  color:#2C3E50;
  border:1px solid #DFE5EA;
  border-radius:10px;
  padding:7px 10px;
  font-size:.92rem;
  cursor:pointer;
}
.reset-btn:hover{ background:#e5ebf1; }
.reset-btn:focus-visible{
  outline:2px solid #004A89;
  outline-offset:2px;
}

/* ===== Pris range slider ===== */
.range-wrap{ display:grid; gap:8px; }
.range-values{ font-size:.95rem; color:#2C3E50; }
.slider{ position:relative; height:32px; }
.slider input[type="range"]{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:32px;
  background:transparent;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
.slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  pointer-events:auto;
  background:#004A89;
  border:2px solid #fff;
  width:18px; height:18px;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.slider input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  background:#004A89;
  border:2px solid #fff;
  width:18px; height:18px;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.slider-track{
  position:absolute;
  left:0; right:0;
  top:13px;
  height:6px;
  border-radius:4px;
  background:#e5e9ee;
}
.slider-fill{
  position:absolute;
  top:13px;
  height:6px;
  border-radius:4px;
  background:#BBD7F0;
}

/* ===== Pakke-boks ===== */
.tvpakke-boks{
  width:100%;
  background:#F8F9FA;
  border:1.5px solid #E2E6EA;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(44,62,80,.06);
  display:flex;
  flex-wrap:wrap;
  padding:8px 0 4px;
  margin:10px 0;
  box-sizing:border-box;
  align-items:stretch;
  position:relative;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  /* NYT: performance på lange lister (kan fjernes hvis du vil) */
  content-visibility:auto;
  contain-intrinsic-size:240px;
}
.tvpakke-boks:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  border-color:#BBD7F0;
}
.tvpakke-usp{
  position:absolute;
  top:-12px;
  left:20px;
  background:#FF9800;
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:6px 16px;
  border-radius:10px;
}

/* Kolonner */
.tvpakke-kolonne{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1 1 0;
  padding:0 12px;
  min-width:90px;
  border-right:1px solid #f0f2f5;
  min-height:60px;
}
.tvpakke-kolonne:last-child{ border-right:none; }

/* Logo (CLS-reservation) */
.tvpakke-logo{
  text-align:center;
  margin-bottom:6px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
}
.tvpakke-logo img{
  width:120px;
  height:auto;
  display:block;
}

.tvpakke-navn{
  font-size:.98rem;
  font-weight:700;
  color:#004A89;
  background:#E9F2FA;
  border-radius:6px;
  padding:1px 10px;
  text-align:center;
}

.tvpakke-kanaler{ font-size:.95rem; color:#2C3E50; }
.tvpakke-signal{
  font-size:.9rem;
  color:#888;
  background:#e6e6e6;
  border-radius:7px;
  padding:2px 8px;
  text-align:center;
}

.tvpakke-binding,
.tvpakke-enheder{
  font-size:.95rem;
  color:#2C3E50;
}
.tvpakke-enheder-note{
  color:#888;
  font-size:.9em;
}

.tvpakke-oprettelse,
.tvpakke-mindstepris{
  font-size:.9rem;
  color:#2C3E50;
  margin-top:2px;
}

/* Pris-område */
.price-col{
  align-items:flex-end;
  text-align:right;
}
.tvpakke-pris-label{
  font-size:.85rem;
  color:#2C3E50;
  opacity:.9;
  margin-bottom:2px;
}
.tvpakke-pris{
  font-size:1.05rem;
  font-weight:800;
  color:#FF9800;
  background:#fff;
  border:1px solid #FF9800;
  border-radius:8px;
  padding:3px 9px;
  line-height:1;
  display:inline-block;
  box-shadow:0 0 0 2px rgba(255,152,0,0.10);
}

.price-wrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-end;
}
.price-before{
  color:#9aa5b1;
  text-decoration:line-through;
  font-size:.8rem;
}
.price-now{
  font-size:1.05rem;
  font-weight:900;
  color:#D32F2F;
  background:#fff;
  border:1px solid #D32F2F;
  border-radius:8px;
  padding:3px 9px;
  box-shadow:0 0 0 3px rgba(211,47,47,.12);
}
.price-save{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#FFEBEE;
  color:#C62828;
  border:1px dashed #EF9A9A;
  padding:2px 7px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
}
.price-save .tag{
  background:#E53935;
  color:#fff;
  border-radius:999px;
  padding:1px 5px;
  font-size:.7rem;
}

.tvpakke-boks:hover .tvpakke-pris,
.tvpakke-boks:hover .price-now{
  box-shadow:0 0 0 4px rgba(211,47,47,.2);
}

/* CTA */
.tvpakke-kolonne.tvpakke-btn-wrapper{
  align-items:flex-end;
  text-align:right;
}
.cta-knap,
.cta-knap:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  background:#00B869;
  color:#fff!important;
  border:none;
  border-radius:999px;
  padding:10px 20px;
  font-size:.95rem;
  font-weight:700;
  text-decoration:none!important;
  letter-spacing:0.01em;

  box-shadow:0 8px 18px rgba(0,184,105,.35);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cta-knap:hover{
  background:#00A35D;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,184,105,.4);
}
.cta-knap:focus-visible{
  outline:2px solid #004A89;
  outline-offset:3px;
}
.cta-knap::after{
  content:"›";
  font-size:1.05em;
  line-height:1;
}
.tvpakke-reklamelink{
  font-size:9px;
  color:#888;
  margin-top:3px;
}

/* Accordion */
.tvpakke-accordion{
  flex-basis:100%;
  order:999;
  width:100%;
  padding:0 12px;
  margin-top:8px;
}
.tvpakke-accordion-btn{
  width:100%;
  background:#f2f5f8;
  color:#6b7a8f;
  font-size:.9rem;
  border:1px solid #E2E6EA;
  border-radius:8px;
  padding:8px 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.tvpakke-accordion-btn:focus-visible{
  outline:2px solid #004A89;
  outline-offset:2px;
}
.tvpakke-accordion-btn::after{
  content:"▼";
  font-size:1em;
  margin-left:12px;
  transition:transform .2s;
  color:#b0b7c3;
}
.tvpakke-accordion-btn.active::after{ transform:rotate(-180deg); }

.tvpakke-accordion-panel{
  border:1px solid #E2E6EA;
  border-top:none;
  border-radius:0 0 8px 8px;
  overflow:h