/* Karusell på mobil/tablet for #karusell-pa-mobil
   Lar Avada styre column-bredder helt. Vi gjør kun den YTRE row scrollbar. */

@media (max-width: 1200px) {
  #karusell-pa-mobil > .fusion-builder-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #karusell-pa-mobil > .fusion-builder-row::-webkit-scrollbar {
    display: none;
  }

  #karusell-pa-mobil > .fusion-builder-row > .fusion-layout-column {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* Mindre spacing inni hvert kort */
  #karusell-pa-mobil .fusion-title {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  #karusell-pa-mobil .fusion-text {
    margin-bottom: 10px !important;
  }

  #karusell-pa-mobil .fusion-text ul,
  #karusell-pa-mobil .fusion-text ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #karusell-pa-mobil .fusion-separator {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Mindre padding nederst i kortet */
  #karusell-pa-mobil > .fusion-builder-row > .fusion-layout-column {
    --awb-padding-bottom: 15px !important;
    margin-bottom: 0 !important;
  }

  /* Mindre luft under selve karusell-containeren */
  #karusell-pa-mobil {
    --awb-padding-bottom: 20px !important;
  }
}

/* Dots / pagination — ligger UTENFOR karusell-containeren i DOM */
.karusell-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  width: 100%;
  list-style: none;
}

@media (max-width: 1200px) {
  .karusell-dots {
    display: flex !important;
  }
}

.karusell-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  flex: 0 0 auto;
}

.karusell-dot:hover {
  background: rgba(0, 0, 0, 0.5);
}

.karusell-dot.is-active {
  background: #ec6517;
  transform: scale(1.2);
}

.karusell-dot:focus-visible {
  outline: 2px solid #ec6517;
  outline-offset: 2px;
}