/*********************************************
 * 2. GRUNDLÄGGANDE ELEMENT
 *********************************************/

html{
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;

  height: 100%;
  /*overflow-x: hidden;  Förhindrar horisontell scrollning */
}


/*********************************************
 * 3. NAVIGATION OCH MENY
 *********************************************/

.nav-meny {
  display: flex;
  justify-content: center; /* Centrerar innehållet horisontellt */
  align-items: center;
  height: var(--nav-height);
  padding: 0 20px;
  background-color: var(--nav-bg);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;                /* Menyn fastnar vid toppen av skärmen */
  z-index: 1000; /* Högre z-index för att säkerställa att nav ligger överst */
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* Begränsa bredden till 1200px */
  position: relative; /* Gör att absolut positionerade element håller sig inom denna */
}


#mainMenu {
  display: none;
  gap: 0.6rem;
}

#mainMenu.active {
  display: flex;
  flex-direction: column;
  width: 100%;
}


/* Hamburgermeny knap i mobilläget */
.hamburger {
  display: none;
  cursor: pointer;
  z-index: 990001;
  padding: 0px;
  border-radius: 5px;
  transition: all 0.3s ease;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
  /*background-color: yellow;*/
}

/* Lägg till den nya nav-icon stilen */
.nav-icon {
  width: 30px;
  height: 30px;
  position: relative;
  transition: .1s;
  margin: 5px 5px;
  cursor: pointer;
  display: inline-block;
  /*background-color: rgb(0, 255, 26);*/
}

.nav-icon span {
  width: 5px;
  height: 5px;
  background-color: var(--text-color); /* Använder din färgvariabel istället för #fff */
  display: block;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s ease;
}

.nav-icon:hover span{
  transform: scale(1.2);
  transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon span:nth-child(1){
  left: 0;
  top: 0;
}
.nav-icon span:nth-child(2){
  left: 12px;
  top: 0;
}
.nav-icon span:nth-child(3){
  right: 0;
  top: 0;
}
.nav-icon span:nth-child(4){
  left: 0;
  top: 12px;
}
.nav-icon span:nth-child(5){
  position: absolute;
  left: 12px;
  top: 12px;
}
.nav-icon span:nth-child(6){
  right: 0px;
  top: 12px;
}
.nav-icon span:nth-child(7){
  left: 0px;
  bottom: 0px;
}
.nav-icon span:nth-child(8){
  position: absolute;
  left: 12px;
  bottom: 0px;
}
.nav-icon span:nth-child(9){
  right: 0px;
  bottom: 0px;
}
.nav-icon.open{
  transform: rotate(180deg);
  cursor: pointer;
  transition: .2s cubic-bezier(.8, .5, .2, 1.4);
 
}
.nav-icon.open span{
  border-radius: 50%;
  transition-delay: 200ms;
  transition: .5s cubic-bezier(.8, .5, .2, 1.4);
}
.nav-icon.open span:nth-child(2) {
  left: 6px;
  top: 6px;
}
.nav-icon.open span:nth-child(4) {
  left: 6px;
  top: 18px;
}
.nav-icon.open span:nth-child(6) {
  right: 6px;
  top: 6px;
}
.nav-icon.open span:nth-child(8) {
  left: 18px;
  bottom: 6px;
}



/* Behållaren dör ikonerna för språk och färgtema ligger*/
.control-buttons {
  display: flex;
  gap: 1rem;
  /*background-color: yellowgreen;*/
}


/*********************************************
 * 4. DROPDOWN MENY
 *********************************************/

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  padding: 2px;
  background-color: var(--nav-bg);
  width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  z-index: 10;
  /*border-radius: 0 0 10px 10px;*/
  border-radius: 10px;
}

/* Knapp i dropdown */
.dropdown-content .button{
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--nav-bg);
  /*background-color: var(--dropdown-content);
  background-color:yellowgreen;*/
  color: var(--button-text);
  border: none;
  transition: all 0.3s ease;
  text-align: center;
  margin: 6px auto;
  /*width: calc(100% - 10px);  Justerar bredden för att ta hänsyn till padding på båda sidor */
  /*max-width: calc(100% - 10px);  Se till att max-bredd är dynamisk */
  width: 100%;
}

/* Stil för dropdown-pilen */
.dropdown-arrow {
  display: inline-block;
  margin-left: 10px;  /* Ökat margin lite för bättre spacing */
  will-change: transform;
  transition: transform 0.3s ease; /* Lägg till transition för smooth rotation */
  transform: rotate(0deg);
  width: 16px;       /*Explicit bredd */
  height: 16px;      /*Explicit höjd */
}

/* Justera dropdown-toggle knappen */
.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}



.nested-dropdown {
  position: relative;
  width: 100%;
}

.nested-dropdown-content {
  display: none;
  background-color: var(--nav-bg);
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  z-index: 2;
  border-radius: 10px;
  padding: 5px;
}

.nested-dropdown-content.show {
  display: flex !important;
  flex-direction: column;
}

/* Justera nested-dropdown-toggle för att matcha andra knappar */
.nested-dropdown-toggle {
  /*background-color: var(--dropdown-content);*/
  background-color: yellowgreen;/* Samma färg som andra knappar i dropdown */
  width: calc(100% - 20px); /* Samma bredd som andra knappar, justerat för margin */
  margin: 6px; /* Samma margin som andra knappar */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Standardposition - pilen pekar nedåt */
.nested-dropdown .dropdown-arrow {
  transform: rotate(0deg);
}

/* När nested dropdown är aktiv - pilen pekar uppåt */
.nested-dropdown.active .dropdown-arrow {
  transform: rotate(180deg) !important; /* Viktig - Gör så pilen snurrar tillbaka i mobilläget */
}

/* När dropdown är aktiv - pilen pekar uppåt */
.nested-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.nested-dropdown-content .button{
  /*background: rgb(244, 117, 122);*/
  background-color: var(--nav-bg);
}



/*********************************************
 * 5. KNAPPAR OCH KONTROLLER
 *********************************************/
.button {
  padding: 10px 10px;
  border-radius: 5px;
  cursor: pointer;
  /*background-color: var(--button-bg);*/
  background-color: var(--button-nav-bg);
  color: var(--button-text);
  border: none;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.button:hover {
  background-color: var(--button-hover);
  color: var(--button-text-hover);
  transition: all 0.3s ease;
}

.button-side {
  padding: 10px 10px;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
  z-index: 99999;
  transition: all 0.3s ease;
}

.button-side:hover {
  padding: 10px 10px;
  background-color: var(--button-hover);
  transition: all 0.3s ease;
}


/* Loggan med knappfunktion i nav menyn */
/* Grundinställningar för logotyperna */
.site-logo {
  height: 47px; /* Justera efter din logos storlek */
  width: auto;
  display: none; /* Dölj som standard */
}

/* Visa ljus logotyp i ljust tema */
[data-theme="light"] .site-logo.light {
  display: block;
  transition: opacity 0.3s ease;
}
[data-theme="light"] .site-logo.dark {
  display: none;
  transition: opacity 0.3s ease;
}

/* Visa mörk logotyp i mörkt tema */
[data-theme="dark"] .site-logo.light {
  display: none;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] .site-logo.dark {
  display: block;
  transition: opacity 0.3s ease;
}

/* Stilar för logotyp-knappen */
.site-name-buttom {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}


/*********************************************
 * 6. Knapp/Icon för mörkt och ljust tema
 *********************************************/
.sun-container {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  padding: 12px;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
  /*background-color: rgb(0, 183, 255);*/
  border-radius: 5px;
}

.sun {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.sun.visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) rotate(180deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.sun-s {
  color: var(--text-color);
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(1.1); /* Ändra storlek på solen */
  width: 24px;
  height: 24px;
  background:
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 5px -6px/2px 6px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 5px 14px/2px 6px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat -8px 5px/6px 2px,
    linear-gradient(to bottom,
        currentColor 4px,transparent 0)
        no-repeat 14px 5px/6px 2px;
  border-radius: 100px;
  /*box-shadow: inset 0 0 0 2px;  Solens centrum i mitten blir en ring*/
  box-shadow: inset 0 0 0 6px;  /* Solens centrum blir en helt fyld cirkel */
  border: 6px solid transparent
}

.sun-s::after,
.sun-s::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 2px;
  border-right: 3px solid;
  border-left: 3px solid;
  left: -6px;
  top: 5px
}

.sun-s::before {
  transform: rotate(-45deg)
}

.sun-s::after {
  transform: rotate(45deg)
}
    
.moon {
  width: 50%;
  height: 50%;
  pointer-events: none;
  position: absolute;
  left: 12.5%;
  top: 18.75%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  box-shadow: 9px 3px 0px 0px #f0f0f0;
  opacity: 0;
  transform: scale(0.3) rotate(65deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.moon.visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.star {
  position: absolute;
  top: 25%;
  left: 5%;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid #f0f0f0;
  border-left: 7px solid rgba(0, 0, 0, 0);
  transform: scale(0.55) rotate(35deg);  
  opacity: 0;
  transition: all 0.2s ease-in 0.4s;
}

.star:before {
  border-bottom: 5px solid #f0f0f0;
  border-left: 3px solid rgba(0, 0, 0, 0);
  border-right: 3px solid rgba(0, 0, 0, 0);
  position: absolute;
  height: 0;
  width: 0;
  top: -3px;
  left: -5px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}

.star:after {
  position: absolute;
  display: block;
  color: red;
  top: 0px;
  left: -7px;
  width: 0px;
  height: 0px;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid #f0f0f0;
  border-left: 7px solid rgba(0, 0, 0, 0);
  transform: rotate(-70deg);
  content: '';
}

.moon.visible .star {
  opacity: .8;
/*   transform: rotate(35deg); */
}

.star.small {
  transform: scale(0.35) rotate(35deg);
  position: relative;
  top: 50%;
  left: 37.5%;
  opacity: 0;
  transition: all 0.2s ease-in 0.45s;
}

.moon.visible .star.small {
  opacity: .7;
  transform: scale(0.45) rotate(35deg);
}




/*********************************************
 * 8. SPRÅKVAL
 *********************************************/
 .language-dropdown {
  position: relative;
  display: inline-block;
}

.language-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;              /* Centrera relativt till knappen */
  transform: translateX(-50%);  /* Centrera relativt till knappen */
  background: transparent;
  /*background-color: #fff;*/
  /*border: 1px solid #ccc;*/
  
  border-radius: 4px;
  /*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
  /*filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));*/
  z-index: 1000;
  width: 100%;
  padding-top: 10px;
  margin: 0;
}

/* Ny klass för att visa menyn */
.language-dropdown-content.show {
  display: block;
}

.language-dropdown-content .flag-button {
  display: flex;  /* Ändra till flex */
  width: 100%;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  justify-content: center;  /* Centrera horisontellt */
  align-items: center;      /* Centrera vertikalt */
}

.language-dropdown-content .flag-button:hover {
  /*background-color: #f0f0f0;*/
  background: transparent;
}

.flag-button img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  display: block;  /* Se till att bilden beter sig som ett block-element */
  margin: 0 auto;  /* Extra centrering om det behövs */
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
  background-color: var(--button-bg);
  /*background-color: #fff;*/
  padding: 10px;
  border-radius: 50%;
}

.flag-button img:hover {
  background-color: var(--button-hover);
}

.language-dropdown-arrow {
  margin-left: 5px;
  color: #333; /* Lägger till färg på pilen */
  width: 16px; /* Specificera bredd */
  height: 16px; /* Specificera höjd */
  color: var(--button-text);
  transition: all 0.3s ease;
}

/* Rotera pilen när menyn är öppen */
.language-btn.active .language-dropdown-arrow {
  transform: rotate(180deg);
}

/* Styling för språkvalsknappen */
.language-btn {
  width: 70px;
  height: 40px;
  padding: 5px 8px; /* Lite mer padding för bättre utseende */
  background: transparent;
  /*border: 1px solid #ccc;*/
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /*background-color: rgb(255, 0, 247);*/
}

/* Se till att flaggan och pilen är korrekt alignerade */
.language-btn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}







#searchContainer {
  position: absolute; /* Placera relativt till .nav-container */
  top: 80px; /* Placera den 50px under övre kanten av skärmen */
  right: 0; /* Fäst den till höger inom .nav-container */
  background-color: var(--question-bg-color);
  padding: 20px 10px 10px;
  border-radius: 10px;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.8));
  border: 1px solid var(--red);
  z-index: 99999;
  color: var(--text-color);
  transition: all 0.3s ease;
  display: none;
  width: 350px;
  max-width: 100%; /* Anpassa vid små skärmar */
}

#searchContainer.visible {
  display: block;
}

.search-wrapper {
  position: relative;
}

.input-group {
  position: relative;
  display: flex;
  align-items: flex-end; /* Ändrat till flex-end för bättre alignment */
  margin-top: 10px; /* Lagt till margin-top */
}

#searchInput {
  width: calc(100% - 70px);
  padding: 10px;
  border: none;
  border-bottom: 2px solid #999;
  background: transparent;
  font-size: 16px;
  color: var(--text-color);
  outline: none;
}

.input-group label {
  position: absolute;
  left: 5px;
  top: 10px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
  font-size: 16px;
}

#searchInput:focus ~ label,
#searchInput:not(:placeholder-shown) ~ label {
  top: -20px;
  font-size: 12px;
  color:  var(--red);
}

#searchInput:focus {
  border-bottom: 2px solid  var(--red);
}

#executeSearch {
  padding: 10px 15px;
  margin-left: 10px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  height: fit-content; /* Lagt till för att matcha input height */
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}

#executeSearch:hover {
  background-color: var(--button-hover);
}

#searchResults {
  margin-top: 10px;
  padding-left: 0;
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
}

#searchResults li {
  margin: 5px 0;
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid rgba(123, 70, 153, 0.3);
  transition: background-color 0.3s ease;
}

#searchResults li:hover {
  background-color: var(--button-hover);
  color: var(--button-text-hover);
  transition: all 0.3s ease;
}

.searchResultsNone {
  font-weight: bold;
  color: rgb(149, 10, 10);
  font-size: 16px;
  text-align: center; /* Centrera texten */
}

/* Lägg till detta i din CSS-fil */
.search-highlight {
  background-color:  var(--red) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  color: whitesmoke !important;
  transition: all 0.3s ease; 
  display: inline !important;
  font-weight: normal !important;
  text-decoration: none !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.4) !important;
  transition: background-color 0.3s ease !important;
}

#searchButton .fas {
  margin-left: 12px;
  font-size: 23px;
  cursor: pointer;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* Responsiv stil för mindre skärmar */
@media (max-width: 768px) {
  #searchContainer {
    top: 60px; /* Placera den 50px under övre kanten av skärmen */
    padding: 20px 10px 10px;
    right: 0;
    width: calc(100% - 40px); /* Tar nästan hela bredden på mobilen */
    margin: 20px;
  }

}





/*********************************************
 * 9. BLURR EFFEKTER
 *********************************************/
.blur-background {
  background-color: rgba(0,0,0,0.4);
  filter: blur(2px) brightness(70%);
  /*filter: blur(2px) brightness(60%) contrast(120%);
  filter: blur(2px) brightness(50%);
  filter: blur(2px) brightness(70%) contrast(110%);
  filter: blur(2px) brightness(70%);
  filter: blur(2px);*/
  transition: filter 0.3s ease;
  pointer-events: none;
  z-index: -1;
}




/*********************************************
 * 10. INNEHÅLL OCH KORT
 *********************************************/

 #content {
  width: 100%;
  /*min-height: calc(100vh - footerHeight);  Justera footerHeight till din footers faktiska höjd */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* Förhindrar oönskad scrollning */
}

.page-content {
  display: none;
}

.page-content.active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* sid innehållet */
.content-card {
  /*background-color: var(--nav-bg);
  background-color: transparent;
  background: yellow;*/
  max-width: 1200px; /* Begränsa bredden */
  padding: 10px;
  border-radius: 8px;
  margin: 20px auto; /* Centrera horisontellt */
  transition: all 0.3s ease;
}

.content-card h1{
  color: var(--text-color);        /* Samma textfärg */
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
}

.content-card h2{
  color: var(--text-color);        /* Samma textfärg */
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
}

.content-card h3{
  color: var(--text-color);        /* Samma textfärg */
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  padding-top: 26px;
  transition: all 0.3s ease;
}

.content-card p{
  color: var(--text-color);        /* Samma textfärg */
  font-size: 16px;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
}

.content-card span{
  color: var(--text-color);        /* Samma textfärg */
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.content-card .homesite-logo{
  height: 250px;
  margin: 0 auto;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.2));/**/
}


/* Visa ljus logotyp i ljust tema */
[data-theme="light"] .homesite-logo.light {
  display: block;
  transition: opacity 0.3s ease;
}
[data-theme="light"] .homesite-logo.dark {
  display: none;
  transition: opacity 0.3s ease;
}

/* Visa mörk logotyp i mörkt tema */
[data-theme="dark"] .homesite-logo.light {
  display: none;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] .homesite-logo.dark {
  display: block;
  transition: opacity 0.3s ease;
}











.content-card-product{
  display: flex;
  align-items: center;
  max-width: 1200px; /* Begränsa bredden */
  margin: auto;
  /*background-color: yellowgreen;*/
  
}

.content-card-product img{
  margin: 20px;
  flex: 0 50%;
  max-width: 270px;
  height: auto;
  padding: 0px;
  transition: all 0.3s ease;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.6));/**/
}

/* Visa ljus logotyp i ljust tema */
[data-theme="light"] .content-card-product.light {
  display: block;
  transition: opacity 0.3s ease;
}
[data-theme="light"] .content-card-product.dark {
  display: none;
  transition: opacity 0.3s ease;
}

/* Visa mörk logotyp i mörkt tema */
[data-theme="dark"] .content-card-product.light {
  display: none;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] .content-card-product.dark {
  display: block;
  transition: opacity 0.3s ease;
}




.content-product h2 {
  color: var(--text-color);        
  font-weight: 600;
  font-size: 20px;
  padding: 10px;
  transition: all 0.3s ease;
  text-align: left; /* Justera texten till vänster */
}

.content-product p {
  color: var(--text-color);        
  font-size: 16px;
  margin: 0px 0px;
  transition: all 0.3s ease;
  text-align: left; /* Justera texten till vänster */
}

.content-product img{
  float: left;
  max-width: 38px;
  height: auto;
  box-shadow: none;
  margin: 4px;
  transition: all 0.3s ease;
}

/* Visa ljus logotyp i ljust tema */
[data-theme="light"] .content-product.light {
  display: block;
  transition: opacity 0.3s ease;
}
[data-theme="light"] .content-product.dark {
  display: none;
  transition: opacity 0.3s ease;
}

/* Visa mörk logotyp i mörkt tema */
[data-theme="dark"] .content-product.light {
  display: none;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] .content-product.dark {
  display: block;
  transition: opacity 0.3s ease;
}



@media only screen and (max-width: 50em){

  .content-card-product {
    flex-direction: column;
    width: 100%;
    padding: 20px;
  }

  .content-card-product img{
    flex: 0 100%;
    max-width: 90%;
    margin: 30px;
  }

  .content-product h2{
    font-weight: 600;
    font-size: 18px;
  }
  
  .content-product p{
    font-size: 14px;
  }

  .content-product img{
    max-width: 10%;
    height: auto;
    box-shadow: none;
    margin: 4px;
  }

}








.scroll-effect {
  opacity: 0;
  scale: 0.9;
  transform: translateY(30px); /* Standard: Kommer nerifrån */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Kommer in från vänster */
.scroll-effect.from-left {
  transform: translateX(-50px) translateY(30px);
}

/* Kommer in från höger */
.scroll-effect.from-right {
  transform: translateX(50px) translateY(30px);
}

/* När JavaScript aktiverar den */
.scroll-effect.visible {
  opacity: 1;
  scale: 1;
  transform: translateX(0) translateY(0);
}










.body-buttoncontact-place{
	height: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: green;*/
}

.body-effect-contact-button {
  position: relative;
  z-index: 3;
  background-color: var(--background-color);
  color: var(--text-color);
  width: 160px;
  height: 60px;
  border: 2px solid var(--red);
  margin: 10px;
  border-radius: 30px;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.6));/**/
}

.body-effect-contact-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
  border-radius: 30px;
}

.body-effect-contact-button span {
  position: relative;
  z-index: 2;
}

/* Desktop hover effekt */
@media (min-width: 768px) {
  .body-effect-contact-button:hover::before {
    transform: scaleX(1);
  }

  .body-effect-contact-button:hover {
    color: white;
    border: none;
  }
}

/* Mobil version */
@media (max-width: 767px) {
  .body-effect-contact-button {
    font-size: 18px;
    width: 130px;
    height: 50px;
  }

  .body-effect-contact-button.active::before {
    transform: scaleX(1);
  }

  .body-effect-contact-button.active {
    color: white;
    border: none;
  }
}








/*--------------------------------------------
Grundläggande layout för flip-card-container 
--------------------------------------------*/
.flip-card-container {
  display: flex;
  justify-content: space-around; /* Jämnt mellanrum mellan korten */
  flex-wrap: wrap; /* Flexibel placering av korten */
  padding: 20px;
  gap: 50px; /* Avstånd mellan korten */
  z-index: 5;
  max-width: 900px; /* Vid 3st kort 1200px */
  margin: 0 auto;
}


.flip-card {
  width: 290px;
  height: 290px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  border-radius: 50%; /* Gör kortet runt */
  overflow: hidden; /* Se till att innehållet inte sticker ut ur den runda formen */
  filter: drop-shadow(3px 3px 20px rgba(29, 18, 29, 0.8)); /* Skugga */
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: #333;
  color: white;
  border-radius: 50%; /* Gör även framsidan och baksidan rund */
}

/* Lägg till bakgrundsbild på framsidan */
.flip-card-front {
  transform: rotateY(0deg);
}

.flip-card-front::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  border-radius: 50%;

  background: var(--circle);
  opacity: 0.5;
  transition: var(--transition-dark-light);
}

/* Lägg till bakgrundsbild på baksidan */
.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-back::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #0a0a0a;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  border-radius: 50%;
}

/* Hover-effekt på desktop */
@media (min-width: 768px) {

  .flip-card {
    width: 310px;
    height: 310px;
  }

  .flip-card:hover .flip-card-front {
      transform: rotateY(-180deg);
  }

  .flip-card:hover .flip-card-back {
      transform: rotateY(0deg);
  }


}





/****** Mobile max-width: 330px ******/
@media (max-width: 330px) {
  .flip-card {
    width: 250px;
    height: 250px;
  }

  .inner h3 {
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 600;

  }
  
  .inner h2 {
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: 600;
  }
  
  .inner p {
    font-size: 12px;
    font-weight: 300;
  }


}


/* Mobil-läge: vändning vid klick */
.flip-card.flipped .flip-card-front {
  transform: rotateY(-180deg);
}

.flip-card.flipped .flip-card-back {
  transform: rotateY(0deg);
}

.flip-card-front .inner, .flip-card-back .inner {
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  z-index: 2;
  filter: drop-shadow(5px 5px 20px rgba(8, 5, 8, 0.9)); /* Skugga */
}

.flip-card-front .inner img{
  /*filter: drop-shadow(5px 5px 10px rgba(8, 6, 5, 0.9));  Skugga Logo centrum */
  filter: drop-shadow(3px 3px 15px rgba(19, 13, 2, 0.951));/**/
}

.inner h3 {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  filter: drop-shadow(5px 5px 10px rgba(8, 6, 8, 0.9)); /* Skugga */
}

.inner h2 {
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  filter: drop-shadow(6px 6px 10px rgba(26, 25, 26, 0.9)); /* Skugga */
}

.inner p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  padding: 3px 6px;
  margin: 3px 10px;
  filter: drop-shadow(5px 5px 10px rgba(8, 5, 8, 0.9)); /* Skugga */
}

/* Den befintliga bilden */
.flip-card-front img, .flip-card-back img {
  width: 35%;  /* Justera storleken på bilden */
  height: 35%;  /* Justera storleken på bilden */
  border-radius: 50%; /* Gör även bilderna runda */
  filter: drop-shadow(2px 2px 10px rgba(8, 5, 8, 0.4)); /* Skugga */
}

/* Kort 1 - Bakgrundsbild Upplevelser */
.card-1 {
  background-image: url('../image/galleri.png');
  background-size: cover;
  background-position: center;
}

/* Kort 2 - Bakgrundsbild Galleri */
.card-2 {
  background-image: url('../image/upplevelse.png');
  background-size: cover;
  background-position: center;
}






/*--------------------------------------------
Grundstil för knappen i 3d kortet 
--------------------------------------------*/
.effect-button {
  background-color: transparent;
  color: white; /* Vit text som standard */
  padding: 10px 16px;
  border: 2px solid  white;
  border-radius: 20px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  filter: drop-shadow(5px 5px 20px rgba(8, 5, 8, 0.7)); /* Skugga */
}

/* Pseudo-element för att skapa mörkare effekt */
.effect-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.2);*/
  background-color: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
  border-radius: 20px;
}

/* Texten på knappen ska ligga ovanför pseudo-elementet */
.effect-button span {
  position: relative;
  z-index: 2;
}

/* För desktop: Effekten vid hover */
.effect-button:hover::before {
  transform: scaleX(1);
}

.effect-button:hover {
  color: black; /* Vit text som standard */
  /*color: white;  Texten ändras till blå när du hovrar */
  /*border-color: #3498db;  Valfritt, ändrar kantlinjen till blå på hover*/
  border: none;
  padding: 12px 18px; 
}

/* Responsiv stil för mindre skärmar */
@media (max-width: 768px) {
  /* När användaren klickar */
  .effect-button.clicked::before {
      transform: scaleX(1);
  }

  /* Ändrar textfärg till blå vid klick på mobila enheter */
  .effect-button.clicked {
    color: black; /* Vit text som standard */
    /*color: white;  Texten ändras till blå när du hovrar */
    /*border-color: #3498db;  Valfritt, ändrar kantlinjen till blå på hover */
    border: none;
    padding: 12px 18px;
  }
}










/*********************************************
 * 11. CANVAS OCH ANIMATIONER
 *********************************************/
canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

#snowCanvas,
#heartCanvas,
#leafCanvas,
#fireworkCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
}

.control-buttons {
  z-index: 10000;
  display: flex;
  gap: 10px;
  align-items: center; /* Lägg till denna rad */
}

#snowToggle,
#heartToggle,
#leafToggle,
#fireworkToggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  writing-mode: vertical-rl;
  cursor: pointer;
  z-index: 10000;
}










/*********************************************
 * 12. Kontakt sidan
 *********************************************/

.contact-form {
  /*background: #fff;*/
  padding: 0;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  padding-bottom: 20px;
  margin: 0 auto; /* Centrera horisontellt */
}

.content-card .contact-form h1{
  font-size: 30px;
  text-align: center;
  padding-top: 10px;
}

.content-card .contact-form p{
  font-size: 16px;
  text-align: center;
  padding: 10px;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}
.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px 10px 10px 5px;
  display: block;
  border: none;
  border-bottom: 2px solid #999;
  background: none;
  outline: none;
  font-size: 16px;
}
.form-group label {
  color: #999;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}
.form-group input:focus ~ label, 
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label, 
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -20px;
    font-size: 12px;
    color:  var(--red);
}
.form-group input:focus, 
.form-group textarea:focus {
  border-bottom: 2px solid  var(--red);
}
.contact-form button {
  background-color: var(--red);
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s ease;
  width: 100%;
  text-align: center;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}
.contact-form button:hover {
  background-color: var(--button-hover);
  /*background: #284ab9;*/
}


.contact-form .error { 
  color: rgb(149, 10, 10);
  background-color: var(--contact-text-error-bg);
  /*background: #e3b2b2;*/
  border-radius: 5px;
  display: none; /* Döljer felmeddelandet som standard */
  margin-top: 20px;
  margin-bottom: 40px;
  font-size: 24px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}

.contact-form .error-field { 
  color: #7b4699; 
  border-radius: 5px;
  border: 2px solid #7b4699;
  display: none; /* Döljer felmeddelandet som standard */
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}

.contact-form .success { 
  color: green; 
  background: #b6ecc2;
  border-radius: 5px;
  display: none; /* Döljer godkännande som standard */
  margin-bottom: 40px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 24px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}





/* Support Question Box Container */
.support-question-box {
  position: fixed;
  bottom: 50px;
  right: 50px;
  background-color: var(--question-bg-color);
  padding: 10px;
  border-radius: 10px;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.8));
  width: 260px;
  z-index: 1000;
  max-width: 100%;
  border: 1px solid var(--red);
  transition: all 0.3s ease;
  
  /* Uppdaterade transitions */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s ease;
}

/* Title Styling */
.support-question-title {
  color: var(--button-text);
  font-size: 1.3em;
  margin-bottom: 10px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
}

/* Dold state */
.support-question-box.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
}

/* Visad state */
.support-question-box.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Form Content Container */
.support-question-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Minskat från 20px */
}

/* Form Group Styling */
.support-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Minskat från 8px */
  margin-bottom: 10px; /* Minskat från 15px */

}

/* Uppdaterad styling för supportform-groups och inputs */
.supportform-group {
  position: relative;
  margin-bottom: 20px;
}

.supportform-group input,
.supportform-group textarea {
  width: 100%;
  padding: 10px 10px 10px 5px;
  display: block;
  border: none;
  border-bottom: 2px solid #999;
  background: none;
  outline: none;
  font-size: 16px;
  background-color: transparent;
}

.supportform-group label {
  color: #999;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}

.supportform-group input:focus ~ label, 
.supportform-group input:not(:placeholder-shown) ~ label,
.supportform-group textarea:focus ~ label, 
.supportform-group textarea:not(:placeholder-shown) ~ label {
  top: -20px;
  font-size: 12px;
  color: var(--red);
}

.supportform-group input:focus, 
.supportform-group textarea:focus {
  border-bottom: 2px solid var(--red);
}

/* Button Group */
.support-button-group {
  display: flex;
  gap: 8px; /* Minskat från 12px */
  justify-content: center;
  margin-top: 15px; /* Minskat från 20px */
}

/* Button Styling */
.support-submit-btn,
.support-close-btn {
    padding: 10px 20px;
    width: 100%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
    text-align: center; /* Centrera knapptext */
    display: inline-flex; /* Lägg till för bättre centrering */
    align-items: center; /* Vertikalt centrera texten */
    justify-content: center; /* Horisontellt centrera texten */
}

.support-submit-btn {
    background-color: var(--red);
    color: white;
    transition: all 0.3s ease;
}

.support-close-btn {
    background-color: #795b61;
    color: white;
    transition: all 0.3s ease;
}

.support-submit-btn:hover,
.support-close-btn:hover {
    /*transform: translateY(-1px);*/
    background-color: var(--button-hover);
}

 /*.support-submit-btn:active,
.support-close-btn:active {
    transform: translateY(1px);
}*/


.support-question-error { 
  color: rgb(149, 10, 10);
  background-color: var(--contact-text-error-bg);
  /*background: #e3b2b2;*/
  border-radius: 5px;
  display: none; /* Döljer felmeddelandet som standard */
  margin: 4px;
  padding: 4px;
  font-size: 1.2em; 
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.1));
  text-align: center; /* Centrera knapptext */
  display: inline-flex; /* Lägg till för bättre centrering */
  align-items: center; /* Vertikalt centrera texten */
  justify-content: center; /* Horisontellt centrera texten */
  transition: all 0.3s ease;
}



.support-question-success { 
  color: green; 
  background: #b6ecc2;
  border-radius: 5px;
  display: none; /* Döljer godkännande som standard */
  margin: 2px;
  padding: 6px;
  font-weight: 500;
  font-size: 1.2em; 
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.1));
  text-align: center; /* Centrera knapptext */
  display: inline-flex; /* Lägg till för bättre centrering */
  align-items: center; /* Vertikalt centrera texten */
  justify-content: center; /* Horisontellt centrera texten */
  transition: all 0.3s ease;
}




/* Mobilanpassning */
@media screen and (max-width: 480px) {
  .support-question-box {
    width: calc(100% - 60px); /* Tar nästan hela bredden på mobilen */
    /*width: 220px;  Något mindre på surfplattor */
    /*width: 100%;  Tar nästan hela bredden på mobilen */
    padding: 10px; /* Mindre padding på mobil */
    right: 0;
    margin: 30px;
  }

  .support-question-title {
      font-size: 1.1em;
      margin-bottom: 12px;
  }

  .support-input-field,
  .support-textarea-field {
      font-size: 14px; /* Bättre storlek för mobila tangentbord */
  }

  /* Förhindra zoom på input på iOS */
  .support-input-field,
  .support-textarea-field {
      font-size: 14px !important;
  }
}

/* Surfplatta/mindre skärmar */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .support-question-box {
      width: 250px; /* Något mindre på surfplattor */
      right: 25px;
      bottom: 25px;
  }
}

/* Säkerställ att formuläret inte blockerar innehåll på mindre skärmar */
@media screen and (max-height: 600px) {
  .support-question-box {
      max-height: 90vh; /* Maxhöjd på mindre skärmar */
      overflow-y: auto; /* Möjliggör scrollning om innehållet är för långt */
  }

  .support-textarea-field {
      min-height: 60px; /* Mindre textarea på låga skärmar */
  }
}





/* Lägg till dessa styles i din CSS-fil */
/* Uppdatera din CSS med dessa nya styles */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--red);
  color: white;
  border: none;
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.8));
  cursor: pointer;
  z-index: 999;
  transition: transform 0.2s ease, background-color 0.2s ease;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  opacity: 1;
  overflow: visible; /* Lägg till denna för att säkerställa att pseudo-elementet syns */
}

/* Uppdaterat pseudo-element */
.mobile-fab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--red);
  z-index: -1;
  opacity: 0.5;
}

/* Se till att ikonen syns */
.mobile-fab i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* Öka z-index för att säkerställa att ikonen är överst */
}

.mobile-fab.fade-in {
  animation: questionfadeIn 0.5s ease forwards;
  display: flex; /* Lägg till denna för att säkerställa att knappen visas */
}

@keyframes questionfadeIn {
  from { 
    opacity: 0;
    transform: translateY(22px) scale(0.8);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mobile-fab.hidden {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-fab:not(.hidden) {
    display: flex;
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.mobile-fab.pulse::before {
  animation: pulse 2s infinite;
}

.mobile-fab:hover {
  transform: scale(1.1);
  background-color: var(--button-hover);
}

.mobile-fab:active {
  transform: scale(0.95);
}











/*********************************************
 * 13. FOOTER
 *********************************************/
 .footer {
  position: relative;
  width: 100%;
  color: var(--text-color);
  font-size: 10px;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease;
  padding-bottom: 30px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0; /* Lägg till padding istället för margin */
}

.logo-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em;
  transition: all 0.3s ease;
}


.logo-footer img{
  cursor: pointer;
  width: 150px;
  height: 100%;/**/
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

.button-footer {
  padding: 10px 20px;
  margin: 4px;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--button-nav-bg);
  color: var(--button-text);
  border: none;
  transition: all 0.3s ease;
  text-align: center;
  font-size: 14px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.button-footer:hover {
  background-color: var(--button-hover);
  color: var(--button-text-hover);
  transition: all 0.3s ease;
}

/* Annimerin av fotter vid första uppladdningen */
.footer {
  animation: fadeIn 1.2s ease-in-out;
}





/*********************************************
 * 14. Åldersverifieringslager
 *********************************************/
 .age-verification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.age-verification-content {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  /*filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));*/
  filter: drop-shadow(3px 3px 15px rgba(8, 5, 8, 0.8));
  width: 300px;
}

.age-verification-content h1 {
  font-size: 20px;
  margin-bottom: 28px;
  font-weight: 600;
}

.age-verification-content p {
  font-size: 16px;
  margin-bottom: 20px;
}

.age-verification-content .button {
  margin: 10px;
  width: 100px;
  background-color: var(--button-bg);
  color: var(--text-color);
}

.age-verification-content .button:hover {
  background-color: var(--button-hover);
  color: var(--button-text-hover);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}










/*********************************************
 * 15. adventseffekt
 *********************************************/
.holder {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin: auto 0;
  height: 140px;
  position: relative;
  padding: 5px;

}

.candle {
  position: relative;
}

.holder .candle *, .holder .candle *:before, .holder .candle *:after {
  position: absolute;
  content: "";
}

.candle {
  bottom: 0;
  width: 27.5px;
  height: 100px;
  border-radius: 27.5px / 10px;
  box-shadow:
    0 10px 20px 0 rgba(50, 0, 50, 0.25),
    inset 10px -15px 25px 0 rgba(0, 0, 0, 0.4),
    inset -10px 0 25px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(
    to bottom,
    #ffc1c1 0%,     /* ljusrosa-röd */
    #ff7f7f 25%,    /* ljusröd */
    #e53935 50%,    /* mellanröd */
    #b71c1c 70%,    /* mörkröd */
    #7f0000 100%    /* djup röd */
  );
}

.candle:before {
  width: 100%;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #ff7f7f;
  background: radial-gradient(#ffc1c1, #e53935 45%, #ff7f7f 80%);
}

.candle:after {
  width: 8.5px;
  height: 2.5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 3.5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {
  width: 1.5px;
  height: 9px;
  top: -4.25px;
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  transform: translateX(-50%);
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 6px;
  height: 25px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 7.5px 0 rgba(247, 93, 0, .4), 0 -3px 2px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes enlargeFlame {
  0%, 100% {
    height: 25px;
  }
  50% {
    height: 30px;
  }
}

.flame1 .flame {
  animation-delay: 0s, 0s;
  animation-duration: 6s, 5s;
}

.flame2 .flame {
  animation-delay: 1s, 0.5s;
  animation-duration: 5.5s, 4.5s;
  transform: translateX(-50%) scaleX(0.95);
}

.flame3 .flame {
  animation-delay: 0.3s, 0.8s;
  animation-duration: 6.5s, 5.2s;
  transform: translateX(-50%) scaleY(0.9);
}

.flame4 .flame {
  animation-delay: 1.2s, 0.2s;
  animation-duration: 5.8s, 4.8s;
  transform: translateX(-50%) rotate(1deg);
}

.glow {
  width: 6.5px;
  height: 15px;
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow:
    0 -20px 15px 0 #dc8a0c,
    0 20px 25px 0 #dc8a0c,
    inset 1.5px 0 1px 0 rgba(0, 133, 255, .6),
    inset -1.5px 0 1px 0 rgba(0, 133, 255, .6);
}

.glow:before {
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
  width: 25px;
  height: 45px;
  left: 50%;
  top: -13.75%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  filter: blur(15px);
  animation: blinkIt .1s infinite;
}

@keyframes blinkIt {
  50% { opacity: .8; }
}

.candle.off .flame,
.candle.off .blinking-glow,
.candle.off .glow {
  display: none !important;
}

.candle.off {
  opacity: 0.3;
}

/* Två ljus – kortare först */
.holder.two-lit .candle.flame1 { height: 75px; }
.holder.two-lit .candle.flame2 { height: 100px; }
.holder.two-lit .candle.flame3,
.holder.two-lit .candle.flame4 { height: 100px; }

/* Tre ljus – trappa */
.holder.three-lit .candle.flame1 { height: 62.5px; }
.holder.three-lit .candle.flame2 { height: 81.25px; }
.holder.three-lit .candle.flame3 { height: 100px; }
.holder.three-lit .candle.flame4 { height: 100px; }

/* Fyra ljus – adventstrappa */
.holder.four-lit .candle.flame1 { height: 55px; }
.holder.four-lit .candle.flame2 { height: 70px; }
.holder.four-lit .candle.flame3 { height: 85px; }
.holder.four-lit .candle.flame4 { height: 100px; }








/*********************************************
 * 16. MEDIA QUERIES
 *********************************************/
/****** Mobile max-width: 767px ******/
@media (max-width: 767px) {
  .nav-meny {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
  }


  .site-logo {
    height: 44px; /* Justera efter din logos storlek */
  }

  .control-buttons {
    order: 2; /* Placera kontrollknapparna sist i flexboxen */
  }

  .site-name {
    order: 1; /* Placera webbplatsnamnet först i flexboxen */
  }

  .hamburger {
    order: 3; /* Placera hamburgermenyn sist i flexboxen */
  }

  /* Lägg till denna nya CSS för dropdown */
  .dropdown {
    width: 100%;          /* Full bredd */
    display: flex;        /* Använd flexbox */
    flex-direction: column; /* Stapla innehållet vertikalt */
    align-items: center;  /* Centrera allt innehåll */
  }

  /* Uppdatera dropdown-toggle */
  .dropdown-toggle {
    width: 100%;         /* Full bredd */
    text-align: center;  /* Centrera text */

    /*background-color: var(--button-bg);*/
    background-color: var(--button-nav-bg);
    transition: background-color 0.3s ease; /* Lägg till övergång för färgändring */
  }

  .button {
    padding: 8px 2px;
  }

  #mainMenu {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width:px calc(100% - 80px); /* Justerar bredden för att ta hänsyn till padding på båda sidor */
    max-width: calc(100% - 80px); /* Se till att max-bredd är dynamisk */
    background-color: var(--nav-bg);/**/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 10000;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);
    padding: 8px;

    max-height: calc(100vh - 120px); /* Begränsa maxhöjd */
    overflow-y: auto; /* -- Gör menyn scrollbar -- */
  }

  #mainMenu.active {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .hamburger {
    display: block;
  }

  .button:hover{
    background: none;
    color: var(--button-text);
  }

  .dropdown-content {
    position: static;  /* Ändra från absolute till static */
    display: none;
    width: 100%;              /* Full bredd i mobil */
    text-align: center;       /* Centrera innehåll */
    border-radius: 0 0 10px 10px;
    margin-top: 0;
    margin-bottom: 5px;
    /*border-right: 2px solid yellowgreen;
    border-left: 2px solid yellowgreen;
    border-bottom: 2px solid yellowgreen;*/
    border-right: 1px solid var(--button-hover);
    border-left: 1px solid var(--button-hover);
    border-bottom: 1px solid var(--button-hover);
    padding: 8px;
  }

  .dropdown-content.show {
    display: flex !important;
    flex-direction: column;
    align-items: center;    /* Centrera knapparna horisontellt */
    width: 100%;          /* Säkerställ full bredd */
  }

  /* Om knapparna behöver full bredd men centrerat innehåll */
  .dropdown-content .button {
    /*background-color:yellowgreen;*/
    /*background-color:var(--button-hover);*/
    background-color:transparent;
    width: 100%;           /* Full bredd */
    text-align: center !important;
    justify-content: center !important;
    padding: 10px 20px;         /* Behåll konsekvent padding */
    margin: 6px;
  }

  .dropdown:hover .dropdown-content {
    display: none;
  }

  /* Säkerställ att pilen roterar korrekt på mobil */
  .dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
  }

  .button-themelight {
    padding: 10px 10px;
  }

  .control-buttons {
    gap: 0px; /* Minska gap om det behövs */
  }
 

  .nested-dropdown-content {
    position: static;
    width: 100%;
    text-align: center !important;
    justify-content: center !important;
    padding: 10px;
    padding-left: 0;
    border-radius: 0 0 10px 10px;
    margin-top: -10px;
    margin-bottom: 5px;
    /*border-right: 2px solid rgb(244, 117, 122);
    border-left: 2px solid rgb(244, 117, 122);
    border-bottom: 2px solid rgb(244, 117, 122);*/
    border-right: 1px solid var(--button-hover);
    border-left: 1px solid var(--button-hover);
    border-bottom: 1px solid var(--button-hover);
  }

  /* Knapparna i 2:e undermenyn */
  .nested-dropdown-content .button {
    /*width: calc(96.5% - 10px);  Justerar bredden för att ta hänsyn till padding på båda sidor */
    /*max-width: calc(96.5% - 10px);  Se till att max-bredd är dynamisk */
    width: 100%;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px;         /* Behåll konsekvent padding */
    margin: 6px;
    /*background-color:rgb(244, 117, 122);
    background-color:var(--button-hover);*/
    background-color: transparent;
  }

  .nested-dropdown-toggle {
    /*width: 100%;          Full bredd */
    text-align: center;  /* Centrera text */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 5px;  /* Samma margin som andra knappar */
    background-color: var(--nav-bg); /* Ursprunglig färg */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* Standardläge - pilen pekar nedåt */
  .nested-dropdown-toggle .dropdown-arrow {
    transition: transform 0.3s ease; /* Lägg till transition för smooth rotation */
    transform: rotate(0deg);
  }

  /* Justera container för nested dropdown */
  .nested-dropdown {
    width: 100% !important;    /* Ändra till full bredd */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Standardläge - pilen pekar nedåt */
  .nested-dropdown .dropdown-arrow {
    transform: rotate(0deg) !important;
  }

  /* När dropdown är aktiv - pilen pekar uppåt */
  .nested-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* När dropdown är aktiv */
  .dropdown.active .dropdown-toggle {
    /*background-color: yellowgreen;  Samma färg som dropdown-content knapparna */
    background-color: var(--button-hover); 
    border-radius: 10px 10px 0 0; /* runda övre hörn och kantiga till start på undermeny*/
  }

  /* När nested dropdown är aktiv */
  .nested-dropdown.active .nested-dropdown-toggle {
    background-color: var(--button-hover); /* Samma färg som nested dropdown-content knapparna */
    /*background-color: rgb(244, 117, 122);  Samma färg som nested dropdown-content knapparna */
    border-radius: 10px 10px 0 0; /* runda övre hörn och kantiga till start på undermeny*/
  }

  /* Standardläge - pilen pekar nedåt för nested dropdown */
  .nested-dropdown-toggle .dropdown-arrow {
    transition: transform 0.3s ease; /* Lägg till transition för smooth rotation */
    transform: rotate(0deg);
  }

  /* När nested dropdown är aktiv - pilen pekar uppåt */
  .nested-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* Uppdatera pilarnas transition för att inkludera färgändring */
  .dropdown-arrow,
  .nested-dropdown-toggle .dropdown-arrow {
    transition: transform 0.3s ease;
  }

  /* Se till att pilen syns mot den nya bakgrundsfärgen */
  .dropdown.active .dropdown-arrow,
  .nested-dropdown.active .dropdown-arrow {
    color: var(--button-text); /* eller någon annan kontrastfärg som passar din design */
  }

  .language-dropdown-arrow {
      display: none;
  }

  .language-btn {
    width: 50px;
    height: 42px;
    gap: 0px;
  }

  .flag-button img {
    width: 39px;
    height: 39px;
    padding: 8px;
  }

  .sun-container {
    width: 40px;
    height: 40px;
  }


  .content-card h1{
    font-weight: 700;
    font-size: 25px;
    padding: 8px;
  }
  
  .content-card h2{
    font-weight: 600;
    font-size: 18px;
    padding: 8px;
  }
  
  .content-card h3{
    font-weight: 600;
    font-size: 16px;
    padding-top: 26px;
  }
  
  .content-card p{
    font-size: 14px;
    padding: 8px;
  }
  
  .content-card span{
    font-size: 16px;
    font-weight: 500;
  }

  .content-card .homesite-logo{
    height: 200px;
  }


  .logo-footer img{
    width: 120px;
    padding-left: 4px;
    padding-right: 4px;
  }
}



/****** Mobile max-width: 370px ******/
@media (max-width: 370px) {
  .nav-meny {
    padding: 0 8px;
  }

  .language-btn {
    width: 46px;
  }

  .flag-button img {
    width: 38px;
    height: 38px;
    padding: 7px;
  }

  #searchButton .fas {
    margin-left: 6px;
    font-size: 20px;

  }

  .sun-container {
    width: 40px;

  }

  .content-card h1{
    font-weight: 700;
    font-size: 20px;
    padding: 6px;
  }
  
  .content-card h2{
    font-weight: 600;
    font-size: 16px;
    padding: 6px;
  }

  .content-card .homesite-logo{
    height: 150px;
  }

  .button-footer {
    padding: 8px 14px;
    font-size: 14px;
  }

  .card {
    width: 100%; /* Justera bredden efter behov */
    height: 100%;
  }

}


/****** Mobile max-width: 330px ******/
@media (max-width: 330px) {
  #mainMenu {
    width:px calc(100% - 40px); /* Justerar bredden för att ta hänsyn till padding på båda sidor */
    max-width: calc(100% - 40px); /* Se till att max-bredd är dynamisk */
  }

  .site-logo {
    height: 38px; /* Justera efter din logos storlek */

  }

  .sun-container {
    width: 28px;
  }

  #searchButton .fas {
    margin-right: 4px;
    font-size: 18px;
  }

  .button {
    font-size: 16px;
  }

  .content-card .homesite-logo{
    height: 130px;
  }

  .button-footer {
    padding: 8px 12px;
    font-size: 14px;
  }

}

/****** Mobile max-width: 330px ******/
@media (max-width: 300px) {
  .site-logo {
    height: 35px; /* Justera efter din logos storlek */
  }
}



/****** Desktop ******/
@media (min-width: 768px) {
  #mainMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
  }

  .button,
  .dropdown {
    width: auto;
  }

  .dropdown-content .button {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
  }

  /* Grundläggande dropdown-inställningar */
  .dropdown-content {
    min-width: 160px;
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    padding-top: 5px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    opacity: 0;
    transform: translateY(-18px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    display: flex !important; /* Viktigt för att animationen ska fungera */
    flex-direction: column;
    pointer-events: none;
    /*border: 1px solid yellowgreen;*/
    border: 1px solid var(--button-hover);
  }

  /* Animation för huvuddropdown när den visas */
  .dropdown:hover .dropdown-content {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto;
  }

  /* Skapa ett osynligt område som förhindrar att menyn stängs */
  .dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    /*background-color: #5264AE;*/
    transition: all 0.3s ease;
  }

  /* Nested dropdown-inställningar */
  .nested-dropdown-content {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 14px;
    border-radius: 10px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(-14px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    display: flex !important; /* Viktigt för att animationen ska fungera */
    flex-direction: column;
    pointer-events: none;
    /*border: 1px solid rgb(244, 117, 122);*/
    border: 1px solid var(--button-hover);
  }

  .nested-dropdown-content .button{
    padding: 10px;
    margin: 4px;
  }

  /* Animation för nested dropdown när den visas */
  .nested-dropdown:hover .nested-dropdown-content {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto;
  }

  /* Skapa ett osynligt område för den kapslade menyn */
  .nested-dropdown-content::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 100%;
    background: transparent;
    /*background-color: #5264AE;*/
  }

  /* Pilrotation */
  .dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }

  .nested-dropdown:hover .nested-dropdown-toggle .dropdown-arrow,
  .nested-dropdown.active .nested-dropdown-toggle .dropdown-arrow {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease;
  }

  /* Färgändringar vid hover */
  .dropdown:hover .dropdown-toggle {
    /*background-color: yellowgreen;*/
    background-color: var(--button-hover);
  }

  .nested-dropdown:hover .nested-dropdown-toggle {
    /*background-color: rgb(244, 117, 122);*/
    background-color: var(--button-hover);
  }

  /* Inaktivera hover när klassen .disable-hover är aktiv */
  .disable-hover .dropdown:hover .dropdown-content,
  .disable-hover .nested-dropdown:hover .nested-dropdown-content {
    display: none !important;
  }

  /* Inaktivera pilrotation vid hover i disable-hover läge */
  .disable-hover .dropdown:hover .dropdown-arrow,
  .disable-hover .nested-dropdown:hover .nested-dropdown-toggle .dropdown-arrow {
    transform: none !important;
  }

  #languageSelect {
    color: var(--button-text);
  }
}