/* gör så att textlänkar följer css regler  */
a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    padding: 20px;
    -webkit-text-size-adjust: 100%;
    background-color: #2f2e4e !important;
    background-image: linear-gradient(180deg, #0f0d11, #201127, #58285a, #b46c8c) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    /* Add bottom space for player at start.php so content isn't hidden behind the sticky player */
    padding-bottom: 170px; 

}

.container {
    max-width: 850px;
    margin: auto;
}
/* CONTAINER 1 START */
.soundwiz-container {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 35px;            /* textens padding */
  margin-bottom: 20px;
  border: 0.5px solid #000;
  border-radius: 12px;
  overflow: hidden;     /* klipp bort spill utanför hörnen */
  box-shadow: 0 -2px 7px rgba(0,0,0,0.8);     /* diffus mörk symetrisk spridning rgba(0,0,0,0.8); */
  /* box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.15), 0 8px 10px rgba(0, 0, 0, 0.7);  lite skarpare skugga och ljus uppe  */
  line-height: 1.5;
}

/* Fadad ram runt soundwiz-container */
.soundwiz-container::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 20px;                        /* tjockleken på fade-ramen */
  border-radius: 12px;                /* matcha container följer rundade hörn */
  background: linear-gradient(-180deg, #523f64, #5b5188, #4d3755, #5d3c54); /* -135 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}

/* Den tunna färgade ramen på insidan */
.soundwiz-container::after {
  content: "";
  position: absolute;
  inset: 18px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;           /* solid linje 111 nästan svart, lila 8d4576*/
  border-radius: 7px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}
/* CONTAINER 2 START */
.soundwiz-container2 {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 35px;            /* textens padding */
  margin-bottom: 20px;
  border: 0.5px solid #000;
  border-radius: 12px;
  overflow: hidden;     /* klipp bort spill utanför hörnen */
  box-shadow: 0 -2px 7px rgba(0,0,0,0.8);     /* diffus mörk symetrisk spridning rgba(0,0,0,0.8); */
  /* box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.15), 0 8px 10px rgba(0, 0, 0, 0.7);  lite skarpare skugga och ljus uppe  */
  line-height: 1.5;
}
/* CONTAINER 2  */
/* Fadad ram runt soundwiz-container */
.soundwiz-container2::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 20px;                        /* tjockleken på fade-ramen */
  border-radius: 12px;                /* matcha container följer rundade hörn */
  background: linear-gradient(-180deg, #5c3c53, #79436a, #534065, #534065);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}
/* CONTAINER 2  */
/* Den tunna färgade ramen på insidan */
.soundwiz-container2::after {
  content: "";
  position: absolute;
  inset: 18px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;           /* solid linje 111 nästan svart, lila 8d4576*/
  border-radius: 7px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}
/* CONTAINER 3 START */
.soundwiz-container3 {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 35px;            /* textens padding */
  margin-bottom: 20px;
  border: 0.5px solid #000;
  border-radius: 12px;
  overflow: hidden;     /* klipp bort spill utanför hörnen */
  box-shadow: 0 -2px 7px rgba(0,0,0,0.8);     /* diffus mörk symetrisk spridning rgba(0,0,0,0.8); */
  /* box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.15), 0 8px 10px rgba(0, 0, 0, 0.7);  lite skarpare skugga och ljus uppe  */
  line-height: 1.5;
}
/* CONTAINER 3  */
/* Fadad ram runt soundwiz-container */
.soundwiz-container3::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 20px;                        /* tjockleken på fade-ramen */
  border-radius: 12px;                /* matcha container följer rundade hörn */
  background: linear-gradient(-180deg, #523f64, #5b5188, #4d3755, #442047);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}
/* CONTAINER 3  */
/* Den tunna färgade ramen på insidan */
.soundwiz-container3::after {
  content: "";
  position: absolute;
  inset: 18px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;           /* solid linje 111 nästan svart, lila 8d4576*/
  border-radius: 7px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}


/* VOTED flytaNde bilden */
.container { position: relative; }
.voted-bilden-container {
    position: absolute;
    top: 90px; /* Anpassa för att justera höjden i linje med loggan */
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    height: 140px; /* Justera höjden */
    width: auto; 
    
  }





/* spelarens pop-up fönster */
.media-popup {
    display: none; 
    position: fixed; 
    top: 20%; 
    left: 50%; 
    transform: translateX(-50%);
    background: #232235; 
    padding: 20px; 
    border-radius: 10px; 
    border: 2px solid #8d4576;
    box-shadow: 0 0 12px gray; 
    z-index: 1000;
    color: #d8d2dc;
    width: 400px; 
    
}

/* spelarens knapp vid pop-up */
.media-popup-button {
    background-color: #3a3958;
    color: #d8d2dc; /* textfärg */
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    border-radius: 5px;
    padding: 6px; 
    border: 0.5px solid #E08E45;
    margin-top: 10px;
    cursor: pointer;
    }
.media-popup-button:hover {
  background-color: #7042ca !important;
  color: #d8d2dc !important;
}
    

/* alla knappar i navigeringen */
.nav-button {
    background-color: #2e2d45;
    color: #d8d2dc; /* textfärg */
    padding: 6px 12px;
    margin: 0 0px 0 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;      
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 20;   /* över ::before (1) och ::after (2) */
    position: relative;
}

.nav-button:first-child{ margin-left:20px; }   /* första knappen 10px från vänster */
.nav-button + .nav-button{ margin-left:3px; } /* avstånd mellan knappar */

.nav-button:hover {
    background-color: #7042ca;
    color: #d8d2dc;
    /* border: 1px solid #232235; */
}

/* Färgen byter långsamt vid hover på alla button knappar*/
button {
    transition: background-color 0.5s ease, color 0.5s ease;
}

button:hover {
    background-color: #7042ca !important;
    color: #d8d2dc !important;
}

/* kod för hamburgare menyn ---------------  */
/* Bas: nav-wrapper över ramen/skuggan */
.nav-wrapper{
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 0px;
    margin-top: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;       /* tillåt radbrytning */

}

.nav-wrapper .valkommen-text{
  flex-basis: 100%;      /* lägg texten på egen rad */
  order: -1;             /* placera före hamburgaren/länkarna */
  margin-bottom: 6px;    /* lite luft under */
  padding-left: 12px; 
}

/* Länkarna (behåll dina .nav-button-stilar) */
.nav-links{ display: flex; gap: 5px; }

/* Hamburger-knapp (dold på desktop) */
.nav-toggle{
  display: none;
  background: none;
  border: none; /* border runt strecken 2px solid #E08E45; */
  padding: 10px;
  cursor: pointer;
  margin-bottom: 0px;
  position: relative;
}
.nav-toggle .bar{
  display: none;
  width: 22px; height: 2px;
  background: #E08E45;
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* Uniform look for the small "Language: ..." label på index player*/
.lang-label { font-size:12px; opacity:.9; margin-top:4px; color:#E08E45; }



/*  bilder för progressbar */
.progressbar-img1 {
  width: 100px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img2 {
  width: 300px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img3 {
  width: 100px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img4 {
  width: 100px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img-badge {
  width: 90px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

.logo-desktop {
    display: block;
    max-width: 250px; /* eller mer om du vill */
    height: auto;
    margin: 0px 0px 20px 20px; /* top right bottom left */
}
.logo-mobile  { display:none; }


.media-box {
    border: 1px solid #8d4576; 
    border-radius: 8px; 
    padding: 15px; 
    margin-bottom: 15px;
    color: #d8d2dc;
    background: #232235;
}


.media-display {
    display: flex; 
    align-items: center; 
    gap: 10px;
}


select option.locked {
    color: #999;
    font-style: italic;
}

/* Tunn svart ram runt flaggor */
.flagga {
  height: 20px;           /* gör flaggan lagom liten */
  width: 25px;            /* behåller proportioner */
  border: 0.6px solid #ccc; 
  border-radius: 4px;     /* lite rundade hörn */
  box-sizing: border-box;
  display: inline-block;
  margin-right: 2px;      /* lite luft mellan flaggor */
}

.flagga-fot {
  height: 15px;           /* gör flaggan lagom liten */
  width: 20px;            /* behåller proportioner */
  border: 0.6px solid #ccc; 
  border-radius: 4px;     /* lite rundade hörn */
  box-sizing: border-box;
  display: inline-block;
  margin-right: 2px;      /* lite luft mellan flaggor */
}

/* Vill du ha ännu tunnare? Avkommentera nästa rad och byt 1px ovan till 0.5px i moderna webbläsare */
/* .flagga { border: 0.5px solid #000; } */


    
/* Välkommen fornamn när inloggad color: #4285f4 blå*/
.valkommen-text {
    font-weight: bold;
    color: #d8d2dc;
    margin-left: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}


.container,
.logo-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
}

.logo-wrapper a {
    text-decoration: none;
    outline: none;
}

.flagg-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    padding-left: 1px;  
    margin-top: -10px;
    overflow-x: auto;
    white-space: nowrap;
}

.flaggor {
    
    display: inline-block;
    margin-left: 1px;
    padding-left: 5px;
    vertical-align: middle;
}

/* subscription page */
.utbildning-info-subscribe{
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc; 
  line-height: 1.3;
  margin-top: 5px;
  margin-bottom: 8px;
  width: 650px; /* bredden på normala texten */
}

.utbildning-info {
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc; 
  line-height: 1.3;
  margin-top: 5px;
  width: 650px; /* bredden på normala texten */
}

.utbildning-info.klar {
    color: green;
    margin-top: 10px;
}

.utbildning-info.fel {
    color: red;
    margin-top: 10px;
}

.utbildning-info-link {
  font-size: 11px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc; 
  line-height: 1.5;
  margin-top: 5px;
}


h1 {
    font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc;
  line-height: 1.3;
  margin-top: 10px;
  margin-bottom: 15px !important;
}

h2 {
font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc;
  line-height: 1.2;
  margin-top: 10px;
  margin-bottom: 4px !important;
}

h3 {
    font-family: "Segoe UI", sans-serif;
    font-size: 15px;
    color: #E08E45;
    margin-top: 10px;
    margin-bottom: 8px !important;
    line-height: 1.2;
    
    .utbildning-info {
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc; 
  line-height: 1.3;
  margin-top: 5px;
  width: 650px; /* bredden på normala texten */
}


}

h4 {
    font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc;
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 0px;
    
    }

h5 {
    font-size: 15px;
    font-family: "Segoe UI", sans-serif;
    color: #E08E45;
    margin-bottom: 0px;
    margin-top: 15px;

    }

    

p {
    font-size: 14px;
    color: #d8d2dc;
    margin: 5px 0;
}

.divider {
    border-top: 1px solid #8d4576; 
    margin: 20px 0;
}

/* Sätter footer */
.footer {
    font-size: 14px;
    color: #d8d2dc;
    font-family: "Segoe UI", sans-serif;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.footer a {
  text-decoration: none;
  color: inherit; /* eller inherit om du vill ha samma som textfärg */
}

/* === DROPDOWN FÖR KATEGORIER & KURSER === */
form {
    width: 100%; /* Formuläret tar hela bredden av container, men fälten styrs separat */
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    /* display: block; */
    margin-bottom: 5px;
    color: #d8d2dc;
}

/* informationstext i spelarrutan indexsidan */ 
.lang-label {
    font-size:12px;
    opacity:.9;
    /* margin-top:4px; */ 
    color: #E08E45;
    font-family: "Segoe UI", sans-serif;
    }

    /* informationstext i spelarrutan indexsidan */ 
.category-label {
    font-size:12px;
    opacity:.9;
    /* margin-top:4px; */ 
    color: #E08E45;
    font-family: "Segoe UI", sans-serif;
    }

.form-container select {
    margin-bottom: 12px;  /* samma som input */
    
}

.dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    max-width: 600px;
    width: 50%; 
    border: 2px solid #232235; 

    
}

.dropdown {
    flex: 1 1 100%;
}

/* dash sidan */
.sub-actions { 
    margin: 8px 0 20px; 
    font-size: 14px; 
    font-weight: bold;
    font-family: "Segoe UI", sans-serif;
}



/* knappar på sidorna */
.form-button {
  background-color: #464569; /* #454468; */
  color: #d8d2dc; /* textfärg */
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;                 /* gör knapparna bold */
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  display: inline-block;
}

/* extra säkerhetsbälte om något skulle överstyra */
.soundwiz-container .form-button,
.sub-actions .form-button {
  font-weight: 700;
}

/* === REGISTRERA FORMULÄR === */
.form-container {
  max-width: 450px;
  width: 100%;
  margin: 20px 0;
  padding: 0;                /* bara yttre .soundwiz-container ger luft */
}

.form-container button {
    padding: 8px 12px;
    background-color: #464569;
    color: #d8d2dc; /* textfärg */
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    width: auto;           /* Lägg till detta */
    display: inline-block; /* Säkerställ att den inte sträcker sig över hela raden */
}

.form-container .fel {
    color: red;
    margin-bottom: 10px;
}

.form-container .klar {
    color: green;
    margin-bottom: 10px;
}

.form-container .utbildning-info.klar,
.form-container .utbildning-info.fel {
  text-align: left !important;
}


.visa-losenord {
    display: flex;
    flex-direction: row; /* fortfarande horisontell layout på checkbox + text */
    width: 100%; /* så den tar hela bredden och hamnar under input */
    margin-top: 5px;
    align-items: center;
    font-size: 14px;
    margin: 2px 0 15px 5px;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
}

.visa-losenord input[type="checkbox"] {
  margin: 0 !important;
padding: 0 !important;
  vertical-align: text-bottom;
  transform: translateY(-1px);
  width: 16px;
  height: 16px;
}

/* === REGISTRERA FORMULÄR SLUTAR HÄR === */

/* === LOGIN FORMULÄR === */

/* === LOGIN FORMULÄR SLUTAR HÄR === */

.faq-section {
    margin-top: 0px;
    margin-bottom: 20px;
    border-bottom: 1px #8d4576; 
    padding-bottom: 10px;
}

.faq-section:last-child {
    border-bottom: none;
}

.logout-link {
    position: absolute;
    top: -4px;
    right: 45px;
    font-size: 12px;
    font-family: "Segoe UI", sans-serif;
    z-index: 1000;
    text-decoration: none;
    color: #d8d2dc;
}

/* Inputfälten & textareas i formulären */
    .form-container input:not([type="checkbox"]):not([type="radio"]),
    .form-container textarea,
    .form-container select {
    width: 300px;
    max-width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 8px;
    /* border: 2px solid #E08E45; */
    border: 1px solid rgba(224, 142, 69, 1.0); /* lite transparensy sätt under 0.9 */
    font-size: 14px;
    font-family: "Segoe UI", sans-serif;
    color: #d2dcd5;
    background-color: #2E2D45;
    box-sizing: border-box;
    }

/* Fokus-stil (gäller även inputs, inte bara select) */
.form-container input:not([type="checkbox"]):not([type="radio"]):focus,
.form-container textarea:focus,
.form-container select:focus {
  outline: none;
  border-color: #8d4576;
  box-shadow: none;
}

.fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.fade.show {
    opacity: 1;
}

.pris-ruta {
    background-color: #f4f4f4;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #4285f4;
    width: 75px;
    margin: 10px 0;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

/* Varje label på egen rad */
.checkbox-container {
  display: block;            /* inte flex */
  margin-bottom: 20px;
}

/* Labeln är block så den radbryts, innehållet linjeras snyggt */
.checkbox-label {
  display: flex;             /* för att centrera input + text */
  align-items: center;       /* vertikal centrering */
  gap: 5px;                  /* avstånd mellan knapp och text */
  margin: 6px 0;             /* lite luft mellan raderna */
  font-weight: normal;
  white-space: normal;       /* tillåt radbrytning i texten om den är lång */
}

/* === ENHETLIGT UTSEENDE FÖR RADIO + CHECKBOX (desktop + mobil) === */
input[type="radio"],
input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #E08E45;
  border-radius: 3px;            /* fyrkantig stil även för radio */
  background-color: #2E2D45;     /* mörk när ej vald */
  cursor: pointer;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
}


input[type="radio"]:checked,
input[type="checkbox"]:checked{
  background-color: #E08E45;     /* orange när vald */
  border-color: #E08E45;
}

/* EN enda bock överallt: ljus, centrerad */
input[type="radio"]:checked::after,
input[type="checkbox"]:checked::after{
  content: "✔";
  color: #d8d2dc;
  font-size: 13px;               /* 13px hamnar oftast snyggast i 16x16 */
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  pointer-events: none;
}


/* ruta runt subscription i dash */
.abonnemangs-block  {
border: 0.8px solid #8d4576; 
padding: 10px; 
margin-bottom: 15px; 
border-radius: 5px;

}


/* spelarens knapp */
    .audio-button {
        background-color: #d8d2dc;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: background-color 0.5s ease, color 0.5s ease; /* Färgen byter långsamt vid hover */
    }
    .audio-button .icon {
        color: #7042ca;
        font-size: 15px;
    }

    /* Hover: gör knappen lila och all text ljus */
.audio-button:hover {
    background-color: #7042ca !important;
    color: #d8d2dc !important; /* texten i knappen */
    
}

/* play och pause iconen i playknappen */
.audio-button .pp {
        color: #7042ca;
        font-size: 15px;
    }

/* tiden i playknappen */
    .audio-button .tid {
        margin-left: auto;
        font-size: 13px;
        color: #7043cb;
    }

/* Se till att ikon och tid också byter färg */
.audio-button:hover .icon,
.audio-button:hover .pp,
.audio-button:hover .tid {
    color: #d8d2dc !important;
}

/* Smidig övergång även på ikon/tid */
.audio-button .icon,
.audio-button .tid {
    transition: color 0.5s ease;
}

    .audio-button .lock {
        margin-left: 10px;
        font-size: 15px;
        color: #999;
    }

/* infotext i spelarrutan indexsidan */
.locked-text {      
        color: #999;
        font-style: italic;
         /* opacity: .9;  */
        font-size: 12px;
        font-family: "Segoe UI", sans-serif;
        line-height: 1.5;
        margin-top: 4px;
    }

/* "No audio available yet" text i spelarrutan */ 
.lock { 
        color: #999;
        /* font-style: italic;*/
         /* opacity: .9;  */
        font-size: 12px;
        font-family: "Segoe UI", sans-serif;
        line-height: 1.5;
        margin-top: 4px;
    }


/* Enhetlig stil för infotext i spelarrutan samma som locked-text indexsidan */
    .media-box p.utbildning-info {
        font-style: italic;
        color: #999;
        font-size: 12px;
        font-family: "Segoe UI", sans-serif;
        line-height: 1.5;
        margin-top: 4px;
        /* använd samma färg som i .locked-text */
        /* opacity: .9;  */
        }



/* === SELECT (clean & minimal) =============================== */
.form-container select,
.dropdowns select {   
    width: 300px;
    max-width: 100%;
  background-color: #2E2D45;          /* mörk bakgrund */
  color: #979797;                     /* ljus text även mobil */
  border: 1px solid #E08E45;          /* orange kant default */
  border-radius: 8px;
  padding: 10px 34px 10px 10px;       /* plats för pilen */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23E08E45' height='16' width='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  box-shadow: none;                   /* ta bort ful skugga */
}


.form-container select:focus,
.dropdowns select:focus {
  outline: none;                      /* ta bort blå ring */
  border-color: #8d4576;              /* din fokusfärg */
  box-shadow: none;                   /* ingen extra glow */
}

/* Option-listans färger (begränsat stöd i vissa browsers) */
.form-container select option,
.dropdowns select option {
  background-color: #2E2D45;          /* mörk lista */
  color: #d8d2dc;                     /* ljus text */
}

/* När browsern tillåter: hover/vald option */
.form-container select option:hover,
.dropdowns select option:hover,
.form-container select option:checked,
.dropdowns select option:checked {
  background-color: #3A3954;          /* lite ljusare markerad */
  color: #d8d2dc;
}

/* "Remove from list" knapp inuti spelaren */
    .queue-remove-button {
    background-color: #464569; /* #454468; */
    color: #d8d2dc; /* textfärg */
    padding: 10px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;                 /* gör knapparna bold */
    font-family: "Segoe UI", sans-serif;
    font-size: 13px;
    display: inline-block;
    }

/* queue-lang är den lilla språkväljaren inne i spelaren */
.queue-lang {
width: 100px;
/* max-width: 100%; */
  background-color: #2E2D45;          /* mörk bakgrund */
  color: #d8d2dc;                     /* ljus text */
  border: 0.5px solid #E08E45;          /* orange kant default */
  border-radius: 5px;
  font-size: 12px;
font-family: "Segoe UI", sans-serif;
padding: 4px; 

   } 

.queue-lang:focus {
  outline: none;                      /* ta bort blå ring */
  border-color: #8d4576;              /* din fokusfärg */
  box-shadow: none;                   /* ingen extra glow */
}

/* Option-listans färger (begränsat stöd i vissa browsers) */
.queue-lang option {
  background-color: #2E2D45;          /* mörk lista */
  color: #d8d2dc;                     /* ljus text */
}

/* När browsern tillåter: hover/vald option */
.queue-lang option:hover,
.queue-lang option:checked {
  background-color: #3A3954;          /* lite ljusare markerad */
  color: #d8d2dc;
}


/* ===== DASH sidan (customer portal) ===== */
        .utbildning-info .dash-label{font-weight:600}

        .dash-pref,
        .dash-nick{margin:14px 0}

        .dash-inline-form{
        display:flex;align-items:center;gap:12px;flex-wrap:wrap
        }
        
        .dash-inline-form .form-button{margin:0}

        .dash-field-row{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        }
        .dash-field-row input[type="text"]{
        min-width: 220px;
        border: 1px solid #E08E45;
        border-radius: 8px;
        padding: 8px;
        font-size: 14px;
        background-color: #2E2D45;
        color: #d8d2dc; /* textfärg */
        }

        .dash-help{
        opacity: .8;
        font-size: 12px;
        }

        .dash-actions-row{
        display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 20px
        }
        .dash-actions-row form{margin:0}

/* ===== DASH: justeringar för radios + nickname ===== */

/* Radion: label + knappar på samma rad, men knapp "Save" under */
            .dash-inline-form{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
            .dash-pref .dash-label{ font-weight:600; }

/* Sätt själva radion visuellt (färg, storlek, check-ikon) – gäller bara i dash-pref */
          



/* "Save" under radion */
            .dash-actions-col{ display:block; margin-top:8px; }

/* Nickname i kolumn: label, input, hjälptext, Save (i den ordningen) */
            .dash-field-col{
            display:flex; flex-direction:column; align-items:flex-start; gap:8px;
            }
            .dash-field-col .dash-label{ font-weight:600; }
            .dash-field-col input[type="text"]{
            min-width:220px;
            border:1px solid #E08E45;
            border-radius:8px;
            padding:8px;
            font-size:14px;
            background-color:#2E2D45;
            color:#d8d2dc;
            }
            .dash-help{ opacity:.8; font-size:12px; }

/* Knapprad (om du senare vill lägga flera knappar på samma rad) */
            .dash-actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 20px; }
            .dash-actions-row form{ margin:0; }

/* 1) index sidan Reset + stil för frågetecken-knappen (kundens hjälpikon) */
.help-q {
  appearance: none;
  -webkit-appearance: none;
  background: #2E2D45;                 /* bakgrund */
  border: 1.5px dotted #E08E45;        /* kant */
  color: #d8d2dc;                      /* textfärg */
  width: 14px;                         /* lite mindre än 16px */
  height: 14px;
  display: inline-flex;                /* centrera ? */
  align-items: center;
  justify-content: center;
  font-size: 11px;                     /* storlek på ? */
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;                          /* ta bort default padding */
  vertical-align: middle;
  margin-left: 8px;                    /* lite avstånd från text/dropdown */
  transform: translateY(-1px);         /* liten optisk justering uppåt */
  -webkit-tap-highlight-color: transparent;
}

/* 2) Egen hover/focus (tar bort lila global hover/focus) */
.help-q:hover,
.help-q:focus,
.help-q:focus-visible {
  background: #3a3958;                 /* din önskade hover */
  border-color: #E08E45;
  color: #ffffff;
  outline: none;
  box-shadow: none;                    /* dödar ev. purple focus glow */
}

/* Om du har en global button:hover som sätter lila – neutralisera specifikt: */
button.help-q:hover,
button.help-q:focus {
  background: #3a3958 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Tryck ut hjälpikonen längst till höger i samma rad (om du vill) */
.dropdown > .help-q { 
  margin-left: auto;                   /* gör att ? flyttas mot höger i flex-raden */
}

/* 4) Hjälprutan under varje dropdown */
.help-box {
  font: 13px/1.3 "Segoe UI", sans-serif;
  color: #979797;
  margin-top: 6px;
  background: #232235;                 /* diskret mörk bakgrund */
  border: 1px solid #8d4576;
  border-radius: 8px;
  max-width: 282px;
  padding-top: 0px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
  
}


/* (Valfritt) liten pil på hjälprutan */
.help-box::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-bottom-color: #E08E45;
  margin-left: 10px;
  transform: translateY(-14px);
}

/* Preview infotext rutan under select course */
.course-preview-box {
  font: 13px/1.3 "Segoe UI", sans-serif;
  color: #979797;
  margin-top: 6px;
  background: #232235;                 /* diskret mörk bakgrund */
  border: 1px solid #8d4576;
  padding: 0px 8px; /*topp/bottom left/right */
  border-radius: 8px;
  max-width: 282px;
}
.course-preview-box p{
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.course-preview-box div{
  color: inherit;
}


/* (Valfritt) liten pil på hjälprutan */
.course-preview-box::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-bottom-color: #E08E45;
  margin-left: 10px;
  transform: translateY(-14px);
}

/* skiptext inuti playknappen */
    .audio-button { display: inline-flex; align-items: center; gap: 8px; }
    .audio-button .tid { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
    .audio-button .skip {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 10px;
    color: inherit;
    opacity: .9;
    cursor: pointer;
    }
    .audio-button .skip:hover { opacity: 1; text-decoration: underline; }
    .audio-button .skip:focus { outline: none; text-decoration: underline; }


/* Samma look för knapparna på index */
.queue-remove-button,
button.add-to-queue {
  background-color: #464569;
  color: #d8d2dc;
  padding: 9px 8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  display: inline-block;
}



/* ---------------------------------------Gameification-------------------------------------------------------------     */

/* --- Gamification text-only (kompakt) --- */
:root{
  --sw-fill:#e08e45;   /* orange */
  --sw-stroke:#8d4576; /* lila */
}

#gamification-dev{ background:#232235; overflow:visible; }

/* Dölj ALL eventuell grafik som råkar ligga i denna container (failsafe) */
#gamification-dev img,
#gamification-dev .gami-bar,
#gamification-dev .gami-ring,
#gamification-dev .gami-streak,
#gamification-dev .progressbar-img1,
#gamification-dev .progressbar-img2,
#gamification-dev .progressbar-img3,
#gamification-dev .progressbar-img4{ display:none !important; }

.gami-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px,1fr));
  gap:12px;
}
.gami-card{
  border:1px solid;
  border-color:#8d4576;
  border-radius:12px;
  padding:12px;
  background:#2e2d45;
  text-align:center;        /* ← lägg till denna rad */
}

.gami-label{
    font-size:12px; 
    letter-spacing:.2px; 
    opacity:.8; 
    color: #e08e45; /* color:var(--sw-stroke) */
    margin-bottom:4px;
    text-align: center;
}
.gami-big{
    font-size:26px; font-weight:700; 
    color: #8d4576;
    line-height:1.2; 
    word-break:break-word; 
    text-wrap:balance;
    text-align: center;

}
.gami-sub{ 
    font-size:12px; 
    letter-spacing:.2px; 
    opacity:.8;
    color: #e08e45;
    text-align: center;

 }

.gami-span2{ grid-column: span 2; }



/* ===== Global mini player ===== */

#global-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #1c102f; /* mörk lila / bakgrund */
  color: #ffffff;
  padding: 8px 12px;
  padding-top: 16px;
  padding-bottom:16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  display: none; /* visas via JS */
  font-size: 20px;
}

#global-player-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

#global-player-meta {
  flex: 1;
  min-width: 0;
}

#global-player-meta h4 {
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#global-player-meta #gp-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#global-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gp-icon-btn,
.gp-play-btn {
  border: none;
  outline: none;
  cursor: pointer;
  background: #2b1848;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.gp-play-btn {
  font-size: 16px;
  padding: 6px 14px;
}

.gp-icon-btn:hover,
.gp-play-btn:hover {
  background: #1c102f;
}

#gp-time {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Play-knapp i kurskort / spellista */
.audio-button .pp {
  font-weight: 500;
}
/* accentfärg när playing är bortkommenterad
.audio-button.is-playing .pp {
  color: #E08E45; 
}
*/


/* === Category cover art (under Play/Remove) === */
.sw-cover-slot{
  display:none;
  margin-top: 10px;
}

.sw-cover-img{
  width: 100%;
  max-width: 193px;      /* desktop-begränsning */
  height: auto;
  border-radius: 10px;
  border: 1px solid #8d4576;
  display: block;
  pointer-events: none;  /* går inte att klicka */
  user-select: none;
  -webkit-user-select: none;
}

.audio-button.is-playing{
  background-color: #7042ca;  /* din lila */
  color: #d8d2dc;
}
/* tvingar textfärgen */
.audio-button.is-playing .pp,
.audio-button.is-playing .tid,
.audio-button.is-playing .icon{
  color: #d8d2dc !important;
}

/* === Landing hero (additions only) === */

.lp-hero{
  margin-top: 0px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(46, 45, 69, 0.55);
  border: 1px solid rgba(112, 66, 202, 0.35);
}

.lp-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .3px;
  color:#e18e45;
  margin-bottom: 8px;
  font-weight: 700;
}

.lp-title{
  margin: 0 0 10px;
  line-height: 1.25;
  color:#e18e45;
}

.lp-lead{
  margin: 0 0 14px;
  color: #d8d2dc;
  opacity: .95;
}

.lp-points{
  display:grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.lp-point{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(35, 34, 53, 0.55);
  border: 1px solid #582a5c;
  color: #d8d2dc;
  font-size: 14px;
  margin-top: 10px;
  
}

.lp-cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.lp-btn-main,
.lp-btn-alt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(225, 142, 69, 1.0);
  background: #2E2D45;
  color: #d8d2dc;
}

.lp-btn-main{
  background: #7042ca;
  border-color: #7042ca;
}

.lp-btn-main:hover,
.lp-btn-alt:hover{
  background-color: #7042ca !important;
  color: #d8d2dc !important;
}

.lp-note{
  margin-top: 12px;
  font-size: 12px;
  color: #979797;
}

.lp-hero-title{
    color: #e18e44;
}


/* Hide Scope UI (Universal/Country + Country dropdown) above dropdowns without removing functionality */
.scope-ui-hidden {
    display: none !important;
}

/* Style för spelare på start.php */

/* START.PHP – Short previews (unique classes to avoid conflicts) */
  .lp-short-wrap { margin-top: 10px; }
  .lp-short-title { font-size: 14px; color: #d8d2dc; margin-bottom: 4px; }
  .lp-short-sub { opacity: .85; margin-bottom: 10px; font-size: 0.95rem; }

  
  

.lp-short-list { display: grid; gap: 10px; margin-top: 10px; }

.lp-short-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
}

.lp-short-item:active { transform: translateY(1px); }
.lp-short-item:hover { background: rgba(0,0,0,.24); }

.lp-short-play {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  
}

.lp-short-text { display: grid; gap: 4px; }
.lp-short-name { color:#ffffff; font-weight: 700; line-height: 1.2; }
.lp-short-meta { color:#ccc; font-size: 12px; opacity: .85; }
.lp-short-desc { color:#ccc; font-size: 10px; opacity: .9; line-height: 1.35; }


/* Sticky player bar */
.lp-short-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 10px 12px env(safe-area-inset-bottom);
  background-color: #1c0f2f;
  /* border-top: 1px solid rgba(255,255,255,.14); */
  backdrop-filter: blur(10px);
}

.lp-short-player-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
  
}

.lp-short-now-title { color:#ccc; font-size: 11px; font-weight: 700; }
.lp-short-now-meta { color:#ccc; opacity: .85; font-size: 11px; }

.lp-short-audio { 
  width: 100%; 
  margin-bottom: 10px;
  }

.lp-short-cta {
  max-width: 900px;
  margin: 8px auto 0;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 8px;
}

.lp-short-cta-text {
  font-size: 0.95rem;
  opacity: .9;
  line-height: 1.35;
}

/* Slut Style för spelare på start.php */



/* ----------------------------------------------------------------------------------------------------     */


@media (max-width:900px){
  .gami-grid{ grid-template-columns: 1fr 1fr; }
  .gami-span2{ grid-column: span 2; }
  
}

/* ----------------------------------------------------------------------------------------------------     */


@media (min-width: 701px){
  .nav-toggle{ display: none !important; }
  .nav-links{ display: flex !important; }

/* Texten i dropdown fälten */
.form-container select,
  .dropdowns select {
    font-size: 14px;       
    line-height: 1.2;
  }
  
}

/* ----------------------------------------------------------------------------------------------------     */

/* Responsiv design */
@media (max-width: 700px) {
    
body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    padding: 12px;
    -webkit-text-size-adjust: 100%;
    background-color: #2f2e4e !important;
/* background-image: linear-gradient(135deg, #2f2e4e 0%, #6a4a7f 55%, #8d4576 100%) !important;  */
    background-image: linear-gradient(180deg, #0f0d11, #58285a, #b46c8c) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    padding-bottom: 210px; /* plats för sticky audio player på start.php så   */

 
}

.container {
        max-width: 100%;
        margin: auto;
    }
/* CONTAINER 1 START */
.soundwiz-container {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 22px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
  border: 1px solid #000;
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0,0,0,0.9);
  line-height: 1.5;
}
/* CONTAINER 1  */
/* Fadad ram runt soundwiz-container */
.soundwiz-container::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 17px;                        /* tjockleken på fade-ramen */
  border-radius: 9px;                  /* följer rundade hörn */
  background: linear-gradient(-180deg, #523f64, #5b5188, #4d3755, #5d3c54);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}
/* CONTAINER 1  */
/* Den tunna ramen på insidan */
.soundwiz-container::after {
  content: "";
  position: absolute;
  inset: 15px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;              /* nästan svart solid linje är #111 eller 000, lila 8d4576 */
  border-radius: 6px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}



/* CONTAINER 2 START */
.soundwiz-container2 {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 22px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
  border: 1px solid #000;
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0,0,0,0.9);
  line-height: 1.5;
}
/* CONTAINER 2  */
/* Fadad ram runt soundwiz-container */
.soundwiz-container2::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 17px;                        /* tjockleken på fade-ramen */
  border-radius: 9px;                  /* följer rundade hörn */
  background: linear-gradient(-180deg,  #5c3c53, #79436a, #534065, #534065);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}
/* CONTAINER 2  */
/* Den tunna ramen på insidan */
.soundwiz-container2::after {
  content: "";
  position: absolute;
  inset: 15px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;              /* nästan svart solid linje är #111 eller 000, lila 8d4576 */
  border-radius: 6px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}

/* CONTAINER 3 START */
.soundwiz-container3 {
  position: relative;                  /* viktigt för pseudo-elementet */
  background: #232235;                 /* bakgrund på själva rutan */
  padding: 22px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
  border: 1px solid #000;
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0,0,0,0.9);
  line-height: 1.5;
}
/* CONTAINER 3  */
/* Fadad ram runt soundwiz-container */
.soundwiz-container3::before {
  content: "";
  position: absolute;
  inset: 0;                            /* täcker hela containern */
  padding: 17px;                        /* tjockleken på fade-ramen */
  border-radius: 9px;                  /* följer rundade hörn */
  background: linear-gradient(-180deg, #523f64, #5b5188, #4d3755, #442047);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;                /* så att den inte blockar klick */
  z-index: 1;
}
/* CONTAINER 3  */
/* Den tunna ramen på insidan */
.soundwiz-container3::after {
  content: "";
  position: absolute;
  inset: 15px;                          /* flyttar in lite så den hamnar innanför */
  border: 2px solid #000;              /* nästan svart solid linje är #111 eller 000, lila 8d4576 */
  border-radius: 6px;                  /* något mindre så den syns innanför */
  pointer-events: none;
  z-index: 2;
}

/* Hamburgaremenyn ---------------- */

/* Radlayout: text vänster, hamburgare höger */
.nav-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  padding-left: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  
}


  /* Du är inlogga som... */
  .nav-wrapper .valkommen-text{
    flex: 0 1 auto;        /* ingen fullbredd */
    order: 0;              /* normal position */
    margin: 0;
    margin-left: 10px;
    padding: 0;
    white-space: nowrap;   /* håll texten på en rad */
    /* Om namnet kan bli långt döljer vi delar */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 52px);  /* sparar plats för hamburgaren */
    
  }

  .nav-toggle{
    order: 1;
    margin-left: auto;     /* tryck hamburgaren till höger */
    display: block;
    transform: translateY(5px);  /* flyttar hamburgaren nedåt */
    padding: 0 10px;
  }

  
  /* Öppna menyn under hamburgaren, högerjusterad */
  .nav-links{
    display: none;
  }

  .nav-links.open{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;               /* <-- förankra mot höger */
    left: auto;             /* stäng av vänsterförankring */
    top: calc(100% + 10px); /* avstånd under raden */
    background: #232235;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 5px 20px 10px rgba(0,0,0,.6); /* höger, nedåt, blur */
    z-index: 100;
    gap: 0px;
    min-width: 120px;
    
  }

  .nav-toggle .bar{
    display: block;
    width: 22px; height: 2px;
    background:#8d4576;      /* säkerställ rätt färg på burgarens streck orange E08E45 */
    margin: 5px 7px; /* första är upp/ner andra är höger/vänster */
    transition: transform .2s ease, opacity .2s ease;
    border: 0.5px solid #8d4576;
  }

  

/* Stäng av hover-styling på hamburgaren */
        .nav-toggle,
        .nav-toggle:hover,
        .nav-toggle:focus {
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
        }

/* Se till att strecken inte ändrar sig vid hover */
        .nav-toggle:hover .bar,
        .nav-toggle:focus .bar {
        background: #E08E45;       /* samma färg som vanligt */
        }

        .nav-button{
            width: 100%; text-align: left;
            margin: 0;                    /* vi använder gap i stället */
            padding: 8px 10px;
            font-size: 14px;
            border-radius: 6px;
            background-color: #232235;
            
        }

.nav-button:first-child{ margin-left:0px; }   /* första knappen px från vänster */
.nav-button + .nav-button{ margin-left:0px; } /* avstånd mellan knappar */


  .nav-button:hover {
      background-color: #7042ca; /* orange #E08E45 */
      color: #d8d2dc;
  }

    .logo-mobile {
        display: block;
        max-width: 200px;
        height: auto;
        margin: 0 0 10px 10px;
    }
    .logo-desktop { display:none; }
    

    .container,
    .logo-wrapper {
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
        text-align: left;
    }



.flagg-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    padding: 10px 0;
    padding-left: 0px;  /* Flytta flaggorna åt höger */
    margin-top: -10px;
    overflow-x: auto;
    white-space: nowrap;
}

.flagga {
  height: 14px;
  width: 19px;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 3px;
}

    

    h1 { font-size: 15px; line-height: 1.3; }
    h2 { font-size: 15px; line-height: 1.3; }
    h3 { font-size: 15px; line-height: 1.3; }
    h4 { font-size: 15px; line-height: 1.3; }
    h5 { font-size: 15px; line-height: 1.3; }
    p  { font-size: 14px;  }

.utbildning-info {
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  color: #d8d2dc;
  line-height: 1.4;
  margin-top: 5px;
  width: 100%;

}

.utbildning-info.klar {
    color: green;
    margin-top: 10px;
}

.utbildning-info.fel {
    color: red;
    margin-top: 10px;
}

    .footer {
        font-size: 14px;
        color: #d8d2dc;
        font-family: "Segoe UI", sans-serif;
        line-height: 1.5;
        margin: 0;
        text-align: center;
        
    }

    .footer a {
  text-decoration: none;
  color: inherit; /* eller inherit om du vill ha samma som textfärg */
}

    

    .play-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        display: inline-block;
    }

    .play-button:hover svg circle {
        fill: #d8d2dc; 
    }

    
.dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    max-width: 600px;
    width: 90%; /* sätter bredden på drop-downs indexsidan */
    border: 2px solid #232235; 
    color: #979797; 
  
    
}

form {
    margin-bottom: 20px;
    width: 100%; 
}

/* === REGISTRERA FORMULÄR === */
.form-container {
    max-width: 100%;
    width: 100%;             /* full bredd */
    padding: 0;              /* ingen extra sidopadding */
  }


  .form-container .utbildning-info.klar,
.form-container .utbildning-info.fel {
  text-align: left !important;
}

  .visa-losenord {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 2px 0 15px 5px;
    gap: 3px;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
}

.visa-losenord input[type="checkbox"] {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: text-bottom;
    transform: translateY(-1px);
    width: 16px;
    height: 16px;
}

.visa-losenord::before,
.visa-losenord::after {
    display: none;
}

/* === REGISTRERA FORMULÄR SLUTAR HÄR === */

.g-recaptcha {
    transform: scale(0.80);
    transform-origin: 0 0;
    max-width: 100%;
}

.logout-link {
    position: absolute;
    top: -4px;
    right: 10px;
    font-size: 12px;
    font-family: "Segoe UI", sans-serif;
    z-index: 1000;
    text-decoration: none;
    color: #d8d2dc;
}


/* Endast fält – inte radio/checkbox – ska vara ~90% på mobil */
.form-container input:not([type="checkbox"]):not([type="radio"]),
.form-container textarea,
.form-container select {
  width: 90%;
  max-width: 90%;
}

/* Säkerställ att radio/checkbox förblir små fyrkanter på mobil */
input[type="radio"],
input[type="checkbox"]{
  width: 16px;
  height: 16px;
  display: inline-block;
}


/* temporära bilder för progressbar */
.progressbar-img1 {
  width: 70px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
  margin-left: 10px;
}

.progressbar-img2 {
  width: 170px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}
.progressbar-img3 {
  width: 80px;   /* lurar lila */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img4 {
  width: 80px;   /* lurar */
  height: auto;   /* auto håller proportionerna */
}

.progressbar-img-badge {
  width: 80px;   /* ändra efter behov */
  height: auto;   /* auto håller proportionerna */
}

/* 1) index sidan Reset + stil för frågetecken-knappen (kundens hjälpikon) */
.help-q {
  appearance: none;
  -webkit-appearance: none;
  background: #2E2D45;                 /* bakgrund */
  border: 1.5px dotted #E08E45;        /* kant */
  color: #d8d2dc;                      /* textfärg */
  width: 14px;                         /* storlek */
  height: 14px;
  display: inline-flex;                /* centrera ? */
  align-items: center;
  justify-content: center;
  font-size: 11px;                     /* storlek på ? */
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;                          /* ta bort default padding */
  vertical-align: middle;
  margin-left: 0px;                    /* lite avstånd från text/dropdown */
  transform: translateY(-1px);         /* liten optisk justering uppåt */
  -webkit-tap-highlight-color: transparent;
}

/* 2) Egen hover/focus (tar bort lila global hover/focus) */
.help-q:hover,
.help-q:focus,
.help-q:focus-visible {
  background: #3a3958;                 /* din önskade hover */
  border-color: #E08E45;
  color: #ffffff;
  outline: none;
  box-shadow: none;                    /* dödar ev. purple focus glow */
}

/* Om du har en global button:hover som sätter lila – neutralisera specifikt: */
button.help-q:hover,
button.help-q:focus {
  background: #3a3958 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.dropdown > .help-q{
    flex: 0 0 auto;      /* ? tecken stannar på första raden */
    margin-left: 8px;
  }

.dropdown .help-box{
    flex: 1 1 100%;                  /* läggs på egen rad under */
    order: 2;
    margin-top: 6px;                 /* lite luft under select-raden */

  }


/* --- MOBIL: håll select + ? på samma rad, lägg help-box under --- */
.dropdowns .dropdown{
  display: grid;
  grid-template-columns: 1fr auto; /* fältet tar plats, ? får sin */
  align-items: center;
  column-gap: 8px;
  max-width: 500px;
width: 100%; 
}

.dropdowns .dropdown select{
  min-width: 0;                 /* tillåt krympning */
  box-sizing: border-box;       /* räkna in padding + border i bredden */
  width: 100%;                  /* fyll kolumnen 1fr (inte hela skärmen) */
}

.dropdowns .dropdown > .help-q{
  grid-column: 2 / 3;           /* ? stannar till höger */
}

.dropdowns .dropdown .help-box{
  grid-column: 1 / -1;          /* hjälp-ruta på egen rad under */
  margin-top: 6px;
  width: 88%;              /* <-- samma som du kör på course-preview-box */
  max-width: 95%;
  box-sizing: border-box;
  justify-self: start;      /* vänsterjustera rutan i grid */
}

/* Säkerställ att radio + text inte bryts (Universal/Country) */
.dropdowns .dropdown label{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* bredd på media pop-up mobil */
.media-popup {
    width: 220px; 
}

/* Dash sidan – lägg label överst och Yes/No på samma rad under */
.dash-inline-form{
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}
.dash-inline-form .dash-label{
  grid-column: 1 / -1;                /* label tar hela första raden */
  justify-content: start;
}
.dash-inline-form label{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;                 /* håll Yes/No på samma rad */
  margin: 0; 
}

    
/* Voted bilden små skärmar */
.voted-bilden-container {
    position: absolute;  /* behåll absolut */
    top: 12px;           /* mindre offset */
    right: 5px;
    height: 70px;        /* mindre storlek */
    width: auto;
  }


  /* ---------------------------------------Gameification-------------------------------------------------------------     */

/* --- Gamification text-only (kompakt) --- */
:root{
  --sw-fill:#e08e45;   /* orange */
  --sw-stroke:#8d4576; /* lila 8d4576 */
}

#gamification-dev{ background:#232235; overflow:visible; }

/* Dölj ALL eventuell grafik som råkar ligga i denna container (failsafe) */
#gamification-dev img,
#gamification-dev .gami-bar,
#gamification-dev .gami-ring,
#gamification-dev .gami-streak,
#gamification-dev .progressbar-img1,
#gamification-dev .progressbar-img2,
#gamification-dev .progressbar-img3,
#gamification-dev .progressbar-img4{ display:none !important; }

.gami-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(100px,1fr));
  gap:12px;
}
.gami-card{
  border:1px solid;
  border-color:#8d4576;
  border-radius:12px;
  padding:12px;
  background:#2e2d45;
  text-align:center;        /* ← lägg till denna rad */
}

.gami-label{
    font-size:12px; 
    letter-spacing:.2px; 
    opacity:.8; 
    color: #e08e45; /* color:var(--sw-stroke) */
    margin-bottom:4px;
    text-align: center;
}
.gami-big{
    font-size:22px; font-weight:700; 
    color: #8d4576;
    line-height:1.2; 
    word-break:break-word; 
    text-wrap:balance;
    text-align: center;
}
.gami-sub{ 
    font-size:12px; 
    letter-spacing:.2px; 
    opacity:.8;
    color: #e08e45;
    text-align: center;

 }

.gami-span2{ grid-column: span 2; }



/* ===== Global mini player ===== */

  #global-player-inner {
    gap: 4px;
  }

  #global-player-meta h4 {
    font-size: 13px;
  }

  #global-player-meta #gp-sub {
    font-size: 11px;
  }

  #global-player-controls {
    gap: 3px;
  }

  .gp-icon-btn,
  .gp-play-btn {
    padding: 4px 8px;
  }

  #gp-time {
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

 /* Global mini player – stäng av färgskifte på mobil */
  #global-player .gp-icon-btn,
  #global-player .gp-play-btn {
    background: #2b1848;
    -webkit-appearance: none;
  }

  #global-player .gp-icon-btn:hover,
  #global-player .gp-play-btn:hover,
  #global-player .gp-icon-btn:active,
  #global-player .gp-play-btn:active,
  #global-player .gp-icon-btn:focus,
  #global-player .gp-play-btn:focus {
    background: #2b1848 !important; /* samma som normal */
  }

/* spelarens knapp */
    .audio-button {
        background-color: #d8d2dc;
        border: none;
        border-radius: 8px;
        padding: 7px 8px;
        font-size: 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: background-color 0.5s ease, color 0.5s ease; /* Färgen byter långsamt vid hover */
    }

  .audio-button.is-playing{
  background-color: #7042ca;  /* din lila */
  color: #d8d2dc;
}

/* tvingar textfärgen */
.audio-button.is-playing .pp,
.audio-button.is-playing .tid,
.audio-button.is-playing .icon{
  color: #d8d2dc !important;
}


    /* --- MOBIL: preview-rutan ska ligga på egen rad under select --- */
.dropdowns .dropdown .course-preview-box{
  grid-column: 1 / -1;     /* full bredd i grid */
  margin-top: 6px;
  max-width: 95%;         /* inte 280px på mobil */
  width: 88%; /* bredden på preview boxen */
  box-sizing: border-box;
}

.course-preview-box {
  font: 13px/1.3 "Segoe UI", sans-serif;
  color: #979797;
  margin-top: 6px;
  background: #232235;                 /* diskret mörk bakgrund */
  border: 1px solid #8d4576;
  padding: 0px 8px; /*topp/bottom left/right */
  border-radius: 8px;
  max-width: 100%;
}

/* Om din preview-text ligger i ett <p> (vilket den gör hos dig) */
.course-preview-box p{
  margin-bottom: 5;               /* ta bort global p-marginal som kan stöka */
}

/* Texten i dropdown fälten */
.form-container select,
  .dropdowns select {
    font-size: 14px;       
    line-height: 1.2;
  }

/* Texten i den öppna selecten */
.form-container select option,
  .dropdowns select option {
    font-size: 14px;
  }

/* Cover art bilderna */
.sw-cover-img{
    max-width: 188px;
    border-radius: 9px;
  }

  

/* === Landing hero (additions only) === */
  .lp-btn-main, .lp-btn-alt{ width:100%; }


.lp-hero{
  margin-top: 0px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(46, 45, 69, 0.55);
  border: 1px solid rgba(112, 66, 202, 0.35);
}

/* Style för spelare på start.php */
  
    .lp-short-item { grid-template-columns: 32px 1fr; }
    .lp-short-play { width: 32px; height: 32px; }


/* Slut Style för spelare på start.php */


}