/* Fade keyframes */
@keyframes rk-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rk-fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

/* Animation-klasser med kort fade-out */
.rejsekalender-item.fade-in  { animation: rk-fadeIn 0.4s ease forwards; }
.rejsekalender-item.fade-out { animation: rk-fadeOut 0.2s ease-out forwards; }

/* Sørg for transitions på hover altid virker */
.rejsekalender-item {
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

/* Udsolgt: halvtransparent + hover-effekt */
.rejsekalender-item.udsolgt {
  opacity: 0.35;
}
.rejsekalender-item.udsolgt:hover {
  opacity: 1;
  transform: scale(1.01);
}

/* Resten af jeres CSS er uændret… */
.rejsekalender-wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 1rem;
}

/* Container for månedsblokke */
.rejsekalender-month-block { margin-bottom: 2rem; }

/* Måned-separator */
.rejsekalender-month-separator {
  font-size: 24px;
  font-weight: bold;
  margin: 2rem 0 1rem 1rem;
}
.rejsekalender-month-separator .month-name { color: var(--global-palette1); }
.rejsekalender-month-separator .month-year {
  font-size: 16px; color: #000; margin-left: 0.5rem;
}

/* Toggle-wrapper */
.rejsekalender-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    border-radius: 4em;
    padding: 0.5em 1em;
    margin: 2.2em auto -2.5em auto;
    width: fit-content;
    position: relative; /* Tilføjet */
    z-index: 1000; /* Højere værdi */
}
.rejsekalender-toggle-wrapper .toggle-text {
  font-size: 16px; color: #333;
}

/* Toggle-switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px; height: 24px;
}
.toggle-switch .toggle-input    { display: none; }
.toggle-switch .toggle-label {
  position: absolute; top: 0; left: 0;
  width: 40px; height: 24px;
  background-color: #E0E0E0;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  top: 2px; left: 2px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}
.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #4CAF50;
}
.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* Rejse-item “pill” */
.rejsekalender-item {
  display: grid;
  grid-template-columns: 1.5fr .8fr .8fr .8fr .8fr .8fr;
  gap: 1rem;
  align-items: center;
  background: #fff;
  border-radius: 99em;
  padding: 1rem 1.5rem 1rem 3rem;
  margin-bottom: 1rem;
  transition: all 150ms ease-in-out !important;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.rejsekalender-item:hover { transform: scale(1.01); }
.rejsekalender-item.udsolgt {
  opacity: 0.35;
}
.rejsekalender-item.udsolgt {
    opacity: 0.35 !important;
  transition: all 150ms ease-in-out !important;
}
.rejsekalender-item.udsolgt:hover { 
    opacity: 1 !important; 
    transform: scale(1.01) !important;
}

/* Felter */
.rejsekalender-item__dato,
.rejsekalender-item__hjemrejse,
.rejsekalender-item__titel,
.rejsekalender-item__varighed,
.rejsekalender-item__pris,
.rejsekalender-item__knap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 16px;
}

/* Label */
.label {
  font-weight: bold;
  margin-bottom: 0.3em;
  color: var(--global-palette1);
  font-size: 14px;
}

/* Badge */
.rejsekalender-badge-inline {
  display: inline-block;
  background-color: var(--global-palette1);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 0 0.6em;
  border-radius: 1em;
  vertical-align: text-top;
  margin-top: -0.5em;
}

/* Knapper */
.knap-ledig,
.knap-udsolgt {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  border-radius: 99em;
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 16px);
  white-space: nowrap;
  text-transform: uppercase;
  padding: 0.8em 2em;
  text-decoration: none;
}
.knap-ledig {
  background-color: #089f41;
}
.knap-ledig:hover,
.knap-ledig:active,
.knap-ledig:focus {
  background-color: #066b2c;
  color: #fff;
}
.knap-udsolgt {
  background-color: var(--global-palette1);
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .rejsekalender-item {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "titel      titel      titel"
      "dato       hjem       varighed"
      "pris       pris       knap";
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .rejsekalender-item__titel     { grid-area: titel; }
  .rejsekalender-item__dato      { grid-area: dato; }
  .rejsekalender-item__hjemrejse { grid-area: hjem; }
  .rejsekalender-item__varighed  { grid-area: varighed; }
  .rejsekalender-item__pris      { grid-area: pris; }
  .rejsekalender-item__knap {
    grid-area: knap;
    justify-self: end;
  }
  .rejsekalender-badge-inline { grid-column: 1 / -1; }
}

/* Mobil (≤767px) */
@media (max-width: 767px) {
  .rejsekalender-wrapper { padding: 0.5rem; }
  .rejsekalender-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .rejsekalender-item__titel,
  .rejsekalender-item__dato,
  .rejsekalender-item__hjemrejse,
  .rejsekalender-item__varighed,
  .rejsekalender-item__pris {
    flex-direction: row;
    justify-content: space-between;
  }
  .rejsekalender-item__knap { margin-top: 0.5rem; }

.rejsekalender-toggle-wrapper {
    margin: 2.2em auto -1em auto;
}
}

.entry-content.single-content {
	background: #fff !important;
}