.col {
    max-width: 100% !important;
}

#box-recommended {
  position: relative;
  padding-right: 40px; /* plads til badge til højre */
  border: 2px solid #007400; 
  background-color: #e6f5e6;
  border-radius: 6px;
}

#box-recommended .badge {
position: absolute;
    top: 10px;
    right: -20px;
    width: 120px;
    background-color: #007400;
    color: white;
    font-weight: 700;
    font-size: 14px;
    padding: 5px 0;
    transform: rotate(40deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    user-select: none;
    pointer-events: none;
    border-radius: 3px;
    text-align: center;
    z-index: 10;
}

.compare-flex {
    max-width: 900px;
    margin: auto;
    display: flex;
    gap: 1rem;
}

.compare-flex > div {
    flex: 1 1 30%;
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #ccc;
}

#box-recommended {
    border: 2px solid #007400;
    background-color: #e6f5e6;
}


.col select + select {
    margin-top: 0.7rem;   /* fx 10-12px luft – tilpas efter ønske */
}


.hidden {
    display: none;
}


.compare-flex {
    display: flex;
    gap: 2rem; /* afstand mellem kolonner */
    justify-content: space-between;
}

.compare-flex > div {
    flex: 1;
    background: #f9f9f9; /* evt. baggrund for kontrast */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}


.el-beregner-wrapper {
    font-family: Arial, sans-serif;
    max-width: 900px !important;
    width: 95%;
    margin: 2em auto;
    padding: 1.5em 2em;
    border: 1px solid #0a660a;
    border-radius: 10px;
    background-color: #fff !important;
    color: #0a660a;
    box-sizing: border-box;
    overflow-x: auto;
}
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Dette justerer børn til bund */
}

.top-row,
.dropdowns-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
    gap: 1em;
}
.forbrug-dropdown-wrapper {
  flex: 1 1 60%;  /* lidt bredere */
  min-width: 250px; /* for responsivitet */
}

.mit-forbrug-display {
  flex: 1 1 35%; /* den resterende del */
  min-width: 140px;
  text-align: right; /* hvis du vil have teksten til højre */
}


.forbrug-dropdown-wrapper,
.mit-forbrug-display,
select {
    flex: 1 1 45%;
    min-width: 200px;
width: 100%;       /* fyld wrapper */
}
span#mit-forbrug {
    font-size: 26px;
    font-weight: 600;
}

.slider-wrapper {
  max-width: 800px;
  width: 100%;
  margin: 2em auto;
  font-family: Arial, sans-serif;
  color: #0a660a;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

#forbrug-slider {
  flex-grow: 1;
  height: 6px;
  border-radius: 20px;
  background: #f9f9f9 !important;
  cursor: pointer;
  -webkit-appearance: none;
  /* Webkit styling for thumb */
  min-width: 100%;
}

#forbrug-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border: 3px solid #ffffff; 
  background: #0a660a;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  margin-top: 0px;
}
#forbrug-slider::-moz-range-thumb {
  width: 26px;
  border: 3px solid #ffffff; 
  height: 26px;
  background: #0a660a;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  /* Tilføj denne linje for centering */
  margin-top: 0px;
}


#forbrug-val {
  white-space: nowrap;
  min-width: 80px;
  font-weight: 600;
}

.slider-ticks {
  position: relative;
  width: 100%;
  height: 20px;
  margin-top: 6px;
  user-select: none;
  padding: 0 12px; /* Indryk ticks 12px fra hver side */
  box-sizing: border-box;
}

.slider-ticks .tick {
  position: absolute;
  top: 0;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

/* Første tick helt til venstre uden transform */
.slider-ticks .tick:first-child {
  left: 0;
  transform: none;
}

/* Sidste tick flyttes 12px ind fra højre kant */
.slider-ticks .tick:last-child {
  left: calc(100% - 12px);
  transform: translateX(-100%);
}

/* Mellemticks centreret */
.slider-ticks .tick:not(:first-child):not(:last-child) {
  transform: translateX(-50%);
}

/* Placering af mellemticks */
.slider-ticks .tick:nth-child(2) { left: 25%; }
.slider-ticks .tick:nth-child(3) { left: 50%; }
.slider-ticks .tick:nth-child(4) { left: 75%; }



select, input[type=range] {
    font-size: 1.1rem;
    padding: 0.5em 0.7em;
    border: 1.5px solid #0a660a;
    border-radius: 20px !important;
    color: #0a660a;
    background-color: #dcedd7;
    /* Fjern min-width her, så det ikke påvirker alle */
    box-sizing: border-box;
}

select:disabled {
    background-color: #a3bfa2;
    color: #555;
}

/* Fjern "knap"-look og lav det til tekst-link */
#toggle-beregning {
  all: unset;                 /* nulstil button-style */
  cursor: pointer;
  color: #0a660a;
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 1rem;
}

/* Hover-effekt */
#toggle-beregning:hover {
  text-decoration: underline;
}


#beregningsdetaljer p {
    margin: 0.3em 0;
    font-size: 1rem;
}

#beregningsdetaljer.hidden {
    display: none;
}

.aarlig-udgift-row {
    font-weight: 600;
    font-size: 1.35rem;
    text-align: center;
    margin-top: 1em;
    padding: 0.7em 0;
    border-top: 1px solid #0a660a;
}

.uvildig-data {
    margin-top: 1.3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.info-left {
    font-size: 0.9rem;
    color: #666;
    opacity: 0.8;
    flex: 1;
}

.info-right {
    flex-shrink: 0;
}

.info-right a {
    display: inline-block;
    text-decoration: none;
}

.info-right img {
    height: 40px;
    width: auto;
    transition: opacity 0.3s ease;
}

.info-right img:hover {
    opacity: 0.8;
}

/* gør slider 100% */
.slider-wrapper {
    width: 100%;
}

/* sammenligningsbokse i 2 kolonner */
.compare-columns {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.compare-columns .col {
    flex: 1 1 45%;
}

.el-sammeligner-col select + select {
    margin-top: 0.5rem;   /* juster afstand fx 8px */
}


@media (min-width: 320px) and (max-width: 480px) {
  .slider-ticks .tick {
    /* Brug :after pseudo-element til at skjule ' kWh' */
    /* Derfor laver vi en trick: skjul hele teksten og indsæt kun tallet uden 'kWh' */
    /* Alternativt kan vi bruge JavaScript, men det er lidt overkill */
    font-size: 0; /* Skjul hele teksten */
    position: relative;
  }
  .slider-ticks {
   max-width: 90%;
}

  .slider-ticks .tick::before {
    content: attr(data-value);
    font-size: 14px; /* eller ønsket størrelse */
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
  }
    .compare-flex {
    flex-direction: column !important; /* stacked vertically */
    max-width: 100% !important;
  }

  .compare-flex > div {
    flex: 1 1 100% !important;  /* fylder hele bredden */
    margin-bottom: 1rem;        /* lidt afstand mellem boksene */
  }

  /* Logo sektion responsivt */
  .uvildig-data {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .info-right img {
    height: 30px;
  }
}

/* responsiv stacking */
@media(max-width:600px){
  .compare-columns .col{
    flex-basis: 100%;
  }
  
  /* Logo sektion responsivt på tablets */
  .uvildig-data {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}


@media (max-width: 480px) {
    .top-row,
    .dropdowns-row {
        flex-direction: column;
    }
    select, input[type=range] {
        min-width: 100%;
    }
	.col {
    max-width: 100% !important;
}
}