/* Overlay som täcker hela fönstret */
.loading-area {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255,255,255,0.9); /* ändra vid behov */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Behållaren för SVG:n */
.loading-pic {
  width: 96px;   /* justera storlek här */
  height: 96px;
  position: relative;
}

/* Viktigt: scope:a till loadern så annan SVG på sajten inte påverkas */
.loading-pic svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;             /* hindrar att stroke skärs av */
  transform-origin: center;      /* exakt centrum */
  transform-box: fill-box;       /* säkrare bbox för transform */
  animation: loader-rotate 2s linear infinite;
}

/* Själva ringen */
.loading-pic svg circle {
  fill: none;
  stroke: #000;                  /* #fff om mörk bakgrund */
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 260;         /* justera känsla */
  stroke-dashoffset: 260;
  animation: loader-dash 1.5s ease-in-out infinite;
}

/* Rotation för hela SVG:n */
@keyframes loader-rotate {
  100% { transform: rotate(360deg); }
}

/* Rörelse i strecket (progress-känsla) */
@keyframes loader-dash {
  0%   { stroke-dashoffset: 260; }
  50%  { stroke-dashoffset: 80;  transform: rotate(45deg); }
  100% { stroke-dashoffset: 260; transform: rotate(360deg); }
}

/* —————— STÄDA BORT GAMMAL TRIANGEL-LOGIK —————— */
/* Om gammal CSS finns kvar någonstans: neutralisera den */
svg polygon { display: none !important; animation: none !important; }
/* Om du tidigare hade något som detta — ta bort eller nolla: */
/* svg { animation: rotate 2s linear infinite; } */