/* ===== CIMPLE – APM GRID v2.2 =========================== */

/* --- GRID & BOXAR -------------------------------------- */
.apm-grid{
  display:grid !important;                       /* tvinga grid */
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:20px;
  padding:20px 0;
}
.apm-box{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:14px;
  font:13px/1.4 'Inter',sans-serif;
  color:#fff;
  text-align:center;
  transition:.3s;
}
.apm-box:hover{
  transform:translateY(-4px);
  border-color:#895eff;
  box-shadow:0 6px 20px rgba(137,94,255,.2);
}
.apm-logo{height:80px;display:flex;align-items:center;justify-content:center;margin:8px auto 10px}
.apm-logo img{max-width:100px;max-height:60px;object-fit:contain}
.apm-title{font-size:.8rem;font-weight:500;margin-bottom:10px}
.apm-flags{display:flex;gap:10px;justify-content:center}
.apm-flags img,
.apm-filter-button img{width:18px;height:12px;border-radius:2px;object-fit:cover}

/* --- KANAL-IKONER -------------------------------------- */
.chip.online-icon,
.chip.onsite-icon{
  position:absolute;
  top:8px;
  padding:2px 6px;
  font-size:11px;
  border-radius:999px;
  background:#424242;
  color:#fff;
}
.chip.online-icon{right:38px}
.chip.onsite-icon{right:8px}

/* --- FILTERKNAPPAR ------------------------------------- */
.apm-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:20px 0 12px;
}

/* grundläge ------------------------------------------------*/
.apm-filters .apm-filter-button{
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;

  background:#241a3e !important;      /* platt färg */
  border:1px solid #3b2d61 !important;
  color:#fff !important;

  background-image:none !important;   /* dödar ev. gradient */
  box-shadow:none !important;         /* ingen skugga i viloläge */
  transition:background .25s, border .25s, box-shadow .25s;
}

/* hover (oavsett aktiv eller ej) ---------------------------*/
.apm-filters .apm-filter-button:hover{
  background:#33265b !important;              /* något ljusare */
  border-color:#443379 !important;
  box-shadow:0 0 0 2px #443379, 0 4px 12px rgba(0,0,0,.45) !important;
}

/* aktivt läge ---------------------------------------------*/
.apm-filters .apm-filter-button.active{
  background:#8f79ff !important;
  border-color:#8f79ff !important;
  box-shadow:0 0 0 2px #8f79ff, 0 4px 12px rgba(0,0,0,.45) !important;
}


/* --- RESPONSIVE / MOBIL -------------------------------- */
@media (max-width:1024px){
  .apm-filters{display:none}
}
@media (max-width:768px){
  .apm-grid{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    padding:10px 0 30px;
    -webkit-overflow-scrolling:touch;
  }
  .apm-box{
    flex:0 0 auto;
    width:75vw;
    scroll-snap-align:start;
  }
  .apm-flags{gap:6px}
  .carousel-dots{
    text-align:center;
    margin-top:-15px;
  }
  .carousel-dots span{
    display:inline-block;
    width:8px;height:8px;margin:0 4px;
    background:#aaa;border-radius:50%;opacity:.4;
  }
  .carousel-dots span.active{background:#fff;opacity:1}
}