:root{
  --ink:#0F172A;
  --muted:#6B7280;
  --blue:#004A89;
  --bg:#F8F9FA;
  --border:#E2E6EA;
  --cta:#27AE60;
  --cta-dark:#1f8f50;
  --accent:#FF9800;
  --danger:#D81E5B;
  --sticky-top:12px; /* justér hvis du har sticky header */
}

/* Shell = 2 kolonner */
.mc-shell{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:980px){
  .mc-shell{grid-template-columns:1fr;}
}

/* Venstre sticky filter – position styres primært af JS (.is-fixed/.is-abs) */
.mc-left{
  position:relative;
  align-self:start;
  overflow:visible;
}
.mc-filter{
  position:relative; /* ikke sticky her, det klarer JS-klasserne */
  background:#fff;
  border:2px solid var(--blue);            /* BLÅ kant hele vejen rundt */
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.mc-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--blue);     /* matcher blå kant */
  font-weight:800;
  color:var(--ink);
}
.mc-filter-body{
  padding:10px 12px;
}
.mc-filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.mc-filter-group label{
  font-size:.9rem;
  color:var(--ink);
  display:flex;
  gap:8px;
  align-items:center;
}
.mc-filter-group .mc-label{
  font-size:.82rem;
  color:var(--muted);
  font-weight:700;
}
.mc-filter-group select{
  border:2px solid var(--cta);
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  font-size:.9rem;
  width:100%;
}
.mc-reset{
  background:#004A89;
  color:#fff;
  border:1px solid #004A89;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  cursor:pointer;
}

/* Højre kolonne */
.mc-right{min-width:0}

/* Topbar: count + sort */
.mc-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mc-count{
  font-size:.9rem;
  color:var(--ink);
}
.mc-sort-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.mc-sort-label{
  font-size:.8rem;
  color:var(--muted);
}

/* Sortér-felt med GRØN kant og pill look */
.mc-sort{
  border:2px solid var(--cta) !important;  /* GRØN kant */
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  padding:6px 14px;
  font-weight:700;
  font-size:.9rem;
}

/* Liste + kort (kompakt) */
.tvpakke-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tvpakke-boks{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 1px 8px rgba(44,62,80,.06);
  overflow:visible;
  padding:14px 0 0;
}
.tvpakke-boks:hover{
  border-color:var(--blue);
  box-shadow:0 6px 18px rgba(0,74,137,.12);
}
.tv-row{
  display:flex;
  align-items:center;
}
.tvpakke-kolonne{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 10px;
  min-height:44px;
  border-right:1px solid #ececec;
}
.tvpakke-kolonne:last-child{border-right:none}

.tvpakke-logo-navn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:92px;
}
.tvpakke-logo{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tvpakke-logo img{
  width:68px;
  height:auto;
  aspect-ratio:68/30;
  display:block;
}
.tvpakke-navn{
  font-size:.9rem;
  font-weight:800;
  color:var(--blue);
  background:#E9F2FA;
  border-radius:7px;
  padding:1px 8px;
}
.tvpakke-net{
  font-size:.75rem;
  color:#51607a;
  background:#eef3f7;
  border-radius:7px;
  padding:1px 6px;
  margin-top:2px;
}
.tv-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tv-label{
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
}
.tv-val{
  font-size:.9rem;
  font-weight:700;
  background:#fff;
  border:1px solid #e9edf1;
  padding:2px 8px;
  border-radius:8px;
}

.tvpakke-pris-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.tvpakke-pris-before{
  color:#64748b;
  text-decoration:none;
  font-weight:700;
  font-size:.72rem;
  display:flex;
  gap:6px;
  align-items:center;
}
.tvpakke-pris-before .price{
  color:#9aa0a6;
  text-decoration:line-through;
}
.tvpakke-pris{
  background:#fff;
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:900;
  font-size:1.05rem;
  padding:3px 10px;
  border-radius:10px;
  display:inline-block;
}
.tvpakke-pris.discounted{
  border-color:var(--danger);
  color:var(--danger);
}
.tvpakke-savings{
  display:inline-block;
  background:var(--danger);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:1px 8px;
  font-size:.72rem;
  font-weight:800;
  line-height:1.6;
  margin-top:1px;
  box-shadow:0 1px 6px rgba(216,30,91,.25);
}

.tv-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
}
.tv-badge{
  font-size:.7rem;
  padding:1px 6px;
  border-radius:999px;
  line-height:1.6;
}
.tv-badge.esim{
  color:#0f3f7a;
  background:#E9F2FA;
}
.tv-badge.fiveg{
  color:#065f46;
  background:#ecfdf5;
}

/* CTA-knap */
.cta-knap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  background:linear-gradient(180deg,var(--cta),var(--cta-dark));
  border:none;
  border-radius:12px;
  padding:8px 12px;
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(39,174,96,.28);
  color:#fff !important;                    /* hvid tekst */
}
.cta-knap::after{
  content:" →";
  font-weight:900;
}
.tvpakke-btn-wrapper{align-items:flex-end}
.tvpakke-reklamelink{
  font-size:10px;
  color:#888;
  margin-top:4px;
  text-align:right;
}

/* USP halvt ude */
.tvpakke-usps{
  position:absolute;
  top:-10px;
  left:12px;
  display:flex;
  gap:8px;
  z-index:5;
}
.tvpakke-usp{
  color:#fff;
  font-weight:700;
  font-size:.82rem;
  padding:4px 12px;
  border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.13);
  background:#FF9800;
}
.tvpakke-usp.gray{background:#333}
.tvpakke-usp.green{background:#27AE60}

/* Mobil */
@media (max-width:980px){
  .tv-row{
    flex-direction:column;
  }
  .tvpakke-kolonne{
    border-right:none;
    border-bottom:1px solid #ececec;
    padding:8px 12px;
  }
  .tvpakke-kolonne:last-child{border-bottom:none}
}

/* Vis mere */
.mc-loadmore-wrap{
  display:flex;
  justify-content:center;
  margin:14px 0;
}
.mc-loadmore{
  background:#004A89;
  color:#fff;
  border:1px solid #004A89;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.mc-loadmore:hover{filter:brightness(1.05)}

/* Accordion til inkluderede tjenester */
.mc-accordion{
  border-top:1px solid #ececec;
  margin-top:6px;
}
.mc-acc-head{
  width:100%;
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px;
  font-size:.82rem;
  font-weight:600;
  color:#004A89;
  cursor:pointer;
}
.mc-acc-icon{
  font-weight:900;
  font-size:.9rem;
  transition:transform .15s ease;
}
.mc-acc-body{
  display:none;
  padding:4px 12px 10px;
  font-size:.82rem;
  color:#333;
  line-height:1.4;
}
.mc-acc-body ul{
  margin:0;
  padding-left:18px;
}
.mc-accordion.mc-acc-open .mc-acc-body{
  display:block;
}
.mc-accordion.mc-acc-open .mc-acc-icon{
  transform:rotate(45deg); /* + bliver til et lille x */
}

/* Sticky fallback klasser (JS flytter filteret) */
.mc-filter.is-fixed{
  position:fixed !important;
  left:0;
  width:300px;
  max-height:70vh;
  overflow:auto;
  z-index:30;
}
.mc-filter.is-abs{
  position:absolute !important;
  left:0;
  width:100%;
}
@media (max-width:980px){
  .mc-filter.is-fixed,
  .mc-filter.is-abs{
    position:static !important;
    width:auto;
    max-height:none;
    overflow:visible;
  }
}