html {
  /* Den samme gradient som på body::before. 
     Dette sikrer, at Safari's UI i iOS 26 bliver farvet korrekt med gradienten. */
  background: radial-gradient(ellipse at center, #4c1d95 0%, #3b0764 60%, #2d054d 100%);
  height: 100%;
  overflow: hidden;
}

body {
  /* Gøres gennemsigtig så pseudo-elementet kan ses */
  background-color: transparent;
  overflow-x: hidden;
  position: relative; /* Nødvendigt for at placere pseudo-elementet korrekt */
  height: 100%;
  overflow-y: auto; /* Tillad scroll på body for indhold der er længere end skærmen */
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* dækker hele viewporten */
  background: radial-gradient(ellipse at center, #4c1d95 0%, #3b0764 60%, #2d054d 100%);
  z-index: -1; /* Placerer baggrunden bag body-indholdet */
}

/* Fjerner spinner-knapper på nummer-inputs i Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* Fjerner spinner-knapper på nummer-inputs i Chrome, Safari, Edge og Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#map-container {
  z-index: 10;
  pointer-events: none;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  overflow: visible;
}

@media (max-width: 768px) {
  #map-container {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }
}

#map-container .sticky {
  position: sticky;
  top: var(--map-top-distance);
  height: calc(100vh - var(--map-top-distance));
  display: flex;
  align-items: center;
  justify-content: center;
}

#map-container object,
#map-container img {
  pointer-events: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

#openstreetmap {
  z-index: 20;
  min-height: 400px;
}

.suggestion-list {
  position: absolute;
  z-index: 50;
  background-color: rgba(15, 14, 71, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  max-height: 12rem;
  overflow-y: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.suggestion-list li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s ease;
}

.suggestion-list li:hover {
  background-color: rgba(139, 92, 246, 0.4);
}

.text-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Gendannet for at venstrestille logoet */
  text-align: left; /* Sikrer at tekst-align også er venstrestillet */
}

.logo-top {
  margin-bottom: 0; /* Øget afstand til "RUNDT" */
  width: 100%;
}

.logo-bottom {
  margin-top: -0.2em;
  width: 100%;
}



.logo-dk {
  margin-left: -0.5em;
  margin-bottom: 0.1em;
  font-size: 0.875rem; /* 14px */
}



/* Denmark map responsive styling */
#denmark-map {
  transition: all 0.3s ease;
  transform: translateX(-10%);
}

#search-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#search-button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -15px;
  transition: 0.5s;
}

#search-button:hover span {
  padding-right: 15px;
}

#search-button:hover span:after {
  opacity: 1;
  right: 0;
}

#custom-date-picker {
  width: 300px;
}

.weekday-header {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  text-align: center;
  padding: 4px 0;
  background-color: transparent;
}

#calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background-color: transparent;
  padding: 4px;
}

#calendar-grid button {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  font-size: 0.9rem;
}

#calendar-grid button:hover:not(:disabled) {
  background-color: rgba(139, 92, 246, 0.2);
  border-radius: 50%;
}

#calendar-grid button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#calendar-grid button.selected {
  background-color: rgba(139, 92, 246, 0.4);
  border-radius: 50%;
}

#calendar-grid button.today {
  font-weight: bold;
}

#calendar-grid button.today::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #f472b6;
  border-radius: 50%;
}

#compressed-search {
  transition: all 0.3s ease;
}

#compressed-search:hover {
  background-color: rgba(107, 70, 193, 0.6);
}

#compressed-search i {
  transition: transform 0.3s ease;
}

#compressed-search:hover i {
  transform: translateY(2px);
}

#search-form, #compressed-search {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#search-form.hidden, #compressed-search.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

#search-form:not(.hidden), #compressed-search:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.highlight-trip {
  box-shadow: 0 0 0 4px rgba(235, 226, 255, 0.5) !important;
  transform: scale(1.05) !important;
  transition: all 0.3s ease-in-out !important;
}

#calendar-container {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.calendar-backdrop {
  background: linear-gradient(
    135deg, 
    rgba(139, 92, 246, 0.1), 
    rgba(91, 33, 182, 0.1)
  );
}

.swap-out {
    animation: swapOut 0.15s ease-in forwards;
}

.swap-in {
    animation: swapIn 0.3s ease-out forwards;
}

.rotate-animation {
    animation: rotateIcon 0.45s ease-in-out forwards;
}

.rotate-animation-calendar {
    animation: rotateIconCalendar 0.45s ease-in-out forwards;
}

@keyframes swapOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes swapIn {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rotateIcon {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(180deg);
    }
}

@keyframes rotateIconCalendar {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

#swap-button, #location-button {
    transition: color 0.2s ease;
}

#swap-button:hover, #location-button:hover {
    color: white;
}

#swap-button i, #location-button i {
    display: inline-block;
    transition: transform 0.2s ease;
}

#swap-button:hover i, #location-button:hover i {
    transform: scale(1.1);
}

@keyframes fadeOutIn {
    0% {
        opacity: 1;
        transform: translateY(-50%);
    }
    50% {
        opacity: 0;
        transform: translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.fade-out-in {
    animation: fadeOutIn 0.6s ease-in-out forwards;
}

input[type="time"],
input[type="date"] {
    cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.time-input-container,
.date-input-container {
    position: relative;
}

.fa-clock,
.fa-calendar-alt {
    cursor: pointer;
    transition: color 0.2s ease;
}

.fa-clock:hover,
.fa-calendar-alt:hover {
    color: white;
}

/* Kalender styling */
::-webkit-calendar-picker-indicator {
    background-color: transparent;
    cursor: pointer;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type-="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: white;
}

/* Kalender popup styling */
::-webkit-calendar-picker {
    background-color: rgba(15, 14, 71, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.5rem;
    color: white;
    padding: 0.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

::-webkit-calendar-picker-popup {
    background: rgba(15, 14, 71, 0.95);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

::-webkit-calendar-picker thead {
    background-color: rgba(139, 92, 246, 0.2);
}

::-webkit-calendar-picker th {
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
    padding: 0.5rem;
}

::-webkit-calendar-picker td {
    padding: 0.25rem;
    text-align: center;
    color: white;
}

::-webkit-calendar-picker tbody td:hover {
    background-color: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    cursor: pointer;
}
.background-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  color: rgba(255, 255, 255, 0.05);
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-input-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  padding: 0.75rem; /* Matcher display padding */
  margin: 0;
  background: transparent;
  color: white;
  font-weight: 100; /* font-thin */
  z-index: 1; /* Sikrer at input er over display elementet */
}

/* Desktop: Vis native inputs */
@media (min-width: 769px) {
  .custom-input-native {
    opacity: 1; /* Synlig på desktop */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .custom-input-display {
    opacity: 0; /* Skjul custom display på desktop */
    pointer-events: none;
  }
}

/* Mobil: Skjul native inputs, vis custom display */
@media (max-width: 768px) {
  .custom-input-native {
    opacity: 0; /* Usynlig på mobil */
    -webkit-appearance: none; /* Fjern iOS-specifik styling */
    -moz-appearance: none;
    appearance: none;
  }
  
  .custom-input-display {
    opacity: 1; /* Synlig på mobil */
    pointer-events: none; /* Sikrer at klik går igennem til det native input */
  }
}

.custom-input-display {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.75rem; /* py-3, px-3 */
  color: white;
  min-height: 50px; /* Svarer ca. til de andre inputfelter */
  line-height: 1.5rem;
  white-space: nowrap;
  pointer-events: none; /* Sikrer at klik går igennem til det native input */
  cursor: pointer; /* Viser at elementet er klikbart */
}

@media (max-width: 768px) {
  .background-line-group {
    transform: translate(0, 350px) rotate(-10deg);
  }

  .foreground-line-group {
    transform: translateY(-150px);
  }
}

/* ===== RESPONSIVE LOGO SYSTEM ===== */
/* CSS Custom Properties for præcis proportionering */
:root {
  /* Desktop (>768px) - optimeret for perfekt kvadrat */
  --logo-billigt-size: 2.8rem; /* Reduceret fra 3rem for bedre proportion */
  --logo-rundt-size: 2.95rem;  /* Justeret ned for bedre balance */
  --logo-dk-size: 1.25rem;     /* text-xl (20px) på md+ breakpoint */
  --logo-letter-spacing: 0em; /* Reduceret for T-alignment */
  --logo-rundt-offset: -0.25em; /* Justeret for tættere placering */
  --logo-dk-offset: -0.2em;     /* margin-left */
  
  /* Tablet (641px-768px) */
  --tablet-logo-billigt-size: 2.05rem;  /* Reduceret for kvadrat-formation */
  --tablet-logo-rundt-size: 2.2rem;     /* Justeret ned for bedre balance */
  --tablet-logo-dk-size: 1rem;
  --tablet-logo-letter-spacing: 0.1em; /* Reduceret for T-alignment */
  --tablet-logo-rundt-offset: -0.18em;   /* Finere justering */
  --tablet-logo-dk-offset: -0.4em;
  
  /* Mobil (≤640px) */
  --mobile-logo-billigt-size: 2.0rem;   /* Justeret til +25% */
  --mobile-logo-rundt-size: 2.12rem;     /* Justeret til +25% */
  --mobile-logo-dk-size: 1.1rem;        /* Justeret til +25% */
  --mobile-logo-letter-spacing: 0.0em; /* Bevaret for T-alignment */
  --mobile-logo-rundt-offset: -0.5em;  /* Skaleret for justering */
  --mobile-logo-dk-offset: -0.2em;      /* Skaleret for justering */
}

/* Desktop styling (>768px) - Tailwind klasser gælder som baseline */
@media (min-width: 769px) {
  .logo-top {
    font-size: var(--logo-billigt-size);
    letter-spacing: var(--logo-letter-spacing);
    line-height: 1;
    font-weight: 800; /* Samme tykkelse som RUNDT - extrabold */
  }
  
  .logo-bottom > span:first-child {
    font-size: var(--logo-rundt-size);
    letter-spacing: var(--logo-letter-spacing);
    line-height: 1;
    font-weight: 800; /* Samme tykkelse som BILLIGT - extrabold */
  }
  
  .logo-bottom {
    margin-top: var(--logo-rundt-offset);
  }
  
  .logo-dk {
    font-size: var(--logo-dk-size);
    margin-left: var(--logo-dk-offset);
  }
}

/* Tablet styling (641px-768px) */
@media (min-width: 641px) and (max-width: 768px) {
  .logo-top {
    font-size: var(--tablet-logo-billigt-size) !important;
    letter-spacing: var(--tablet-logo-letter-spacing) !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important; /* Samme tykkelse som RUNDT - extrabold */
  }
  
  .logo-bottom > span:first-child {
    font-size: var(--tablet-logo-rundt-size) !important;
    letter-spacing: var(--tablet-logo-letter-spacing) !important;
    line-height: 1 !important;
    font-weight: 800 !important; /* Samme tykkelse som BILLIGT - extrabold */
  }
  
  .logo-bottom {
    margin-top: var(--tablet-logo-rundt-offset) !important;
  }
  
  .logo-dk {
    font-size: var(--tablet-logo-dk-size) !important;
    margin-left: var(--tablet-logo-dk-offset) !important;
    margin-bottom: 0.05em !important;
  }
  
  .logo-container {
    margin-top: 0.5rem;
  }
}

/* Mobil styling (≤640px) */
@media (max-width: 640px) {
  body header .custom-heading {
    margin-top: 1.5vh !important;
  }

  .logo-top {
    font-size: var(--mobile-logo-billigt-size) !important;
    letter-spacing: var(--mobile-logo-letter-spacing) !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important; /* Samme tykkelse som RUNDT - extrabold */
  }
  
  .logo-bottom > span:first-child {
    font-size: var(--mobile-logo-rundt-size) !important;
    letter-spacing: var(--mobile-logo-letter-spacing) !important;
    line-height: 1 !important;
    font-weight: 800 !important; /* Samme tykkelse som BILLIGT - extrabold */
  }
  
  .logo-bottom {
    margin-top: var(--mobile-logo-rundt-offset) !important;
  }
  
  .logo-dk {
    font-size: var(--mobile-logo-dk-size) !important;
    margin-left: var(--mobile-logo-dk-offset) !important;
    margin-bottom: 0.06em !important;
    font-weight: 500 !important;
  }
  
  .logo-container {
    margin-top: 0;
    /* Fjernet transform scale for at undgå blur-effekt */
    /* Optimeret til mobile enheder for skarphed */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
}

/* Transportmiddel checkboxes styling */

.transport-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.transport-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 80px;
  text-align: center;
}

.transport-icon {
  font-size: 20px;
  color: rgba(139, 92, 246, 0.7);
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.transport-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  transition: all 0.3s ease;
}

.transport-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: rgba(139, 92, 246, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.transport-check i {
  font-size: 8px;
  color: white;
}

.transport-checkbox:checked + .transport-label {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.transport-checkbox:checked + .transport-label .transport-icon {
  color: rgba(139, 92, 246, 1);
  transform: scale(1.1);
}

.transport-checkbox:checked + .transport-label .transport-text {
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.transport-checkbox:checked + .transport-label .transport-check {
  opacity: 1;
  transform: scale(1);
}

.transport-label:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

/* Disabled transport option styling */
.transport-option-disabled .transport-label {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.15);
  cursor: not-allowed;
  opacity: 0.6;
}

.transport-option-disabled .transport-icon {
  color: rgba(139, 92, 246, 0.4);
}

.transport-option-disabled .transport-text {
  color: rgba(255, 255, 255, 0.5);
}

.transport-option-disabled .transport-check {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.transport-label-disabled:hover {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  transform: none !important;
}

/* Coming soon tooltip */
.coming-soon-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.coming-soon-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 30, 0.95);
}

.transport-option-disabled:hover .coming-soon-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Disable animations for disabled transport option */
.transport-option-disabled.animate-in {
  opacity: 0.6 !important;
}

.transport-option-disabled .transport-icon,
.transport-option-disabled .transport-text {
  transition: none;
}

/* Responsive justering for transport options */
@media (max-width: 640px) {
  .transport-label {
    padding: 10px 6px;
    min-height: 70px;
  }
  
  .transport-icon {
    font-size: 18px;
  }
  
  .transport-text {
    font-size: 11px;
  }
}

/* Udvidet søgning animations */
#advanced-search-options {
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

#advanced-search-options.show {
  max-height: 500px; /* Øget til 500px for at rumme offentlig transport sektion */
  opacity: 1;
  transform: translateY(0);
}

/* Sikrer at input elementer har nok plads og ikke klippes */
.advanced-search-item {
  margin: 0 2px; /* Lille margin for at forhindre clipping i siderne */
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-search-item input[type="number"] {
  box-sizing: border-box; /* Sikrer korrekt størrelse */
  width: calc(100% - 4px); /* Lille justering for at undgå clipping */
  margin: 0 2px;
}

/* Sikrer at focus ring ikke klippes */
.advanced-search-item input[type="number"]:focus {
  outline: none; /* Tailwind håndterer focus styling */
  margin: 0 1px; /* Mindre margin når focused for at give plads til ring */
  width: calc(100% - 2px);
}

.advanced-search-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.advanced-search-item:nth-child(1) {
  transition-delay: 0.1s;
}

.advanced-search-item:nth-child(2) {
  transition-delay: 0.2s;
}

.advanced-search-item:nth-child(3) {
  transition-delay: 0.25s;
}

.transport-option {
  position: relative;
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transport-option.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Individual transport option delays */
.transport-option:nth-child(1) { transition-delay: 0.3s; }
.transport-option:nth-child(2) { transition-delay: 0.35s; }
.transport-option:nth-child(3) { transition-delay: 0.4s; }
.transport-option:nth-child(4) { transition-delay: 0.45s; }

/* Elegant entrance for labels */
.advanced-search-label {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.05s;
}

.advanced-search-label.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Smooth chevron rotation */
#advanced-search-toggle i {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Særlig justering for at undgå blur på mobile enheder */
@media (max-width: 640px) {
  body header .custom-heading {
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden; /* Undgå flicker */
    perspective: 1000px; /* Optimér 3D rendering */
  }
  
  /* Reducerede animationer på mobil for bedre performance */
  .advanced-search-item,
  .transport-option {
    transition-duration: 0.3s;
  }
}

/* Offentlig transport sektion styling */
.public-transport-section {
  padding: 16px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.public-transport-section:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}

.info-icon-wrapper {
  position: relative;
}

.info-tooltip {
  position: absolute;
  top: -45px;
  right: 0;
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 200px;
  white-space: normal;
}

.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 15px;
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 30, 0.95);
}

.info-icon-wrapper:hover .info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-2px);
}

/* Toggle switch styling */
.public-transport-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.public-transport-checkbox {
  position: absolute;
  opacity: 0;
  cursor: not-allowed;
}

.public-transport-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: not-allowed;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.public-transport-checkbox:checked + .public-transport-label .toggle-slider {
  background: rgba(139, 92, 246, 0.8);
}

.public-transport-checkbox:checked + .public-transport-label .toggle-knob {
  transform: translateX(20px);
  background: white;
}

.toggle-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.coming-soon-badge {
  padding: 3px 8px;
  background: rgba(255, 165, 0, 0.2);
  border: 1px solid rgba(255, 165, 0, 0.3);
  border-radius: 12px;
  font-size: 10px;
  color: rgba(255, 165, 0, 0.9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hover effect for disabled state */
.public-transport-label:hover {
  opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .public-transport-section {
    padding: 12px;
  }
  
  .info-tooltip {
    right: -20px;
    max-width: 180px;
  }
  
  .toggle-text {
    font-size: 13px;
  }
}

/* Større bredde til h1 på desktop for at undgå line wrapping med engelsk tekst */
@media (min-width: 768px) {
  #search-form-container h1 {
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  /* Sørg for at første linje ikke wrapper */
  #search-form-container h1 > span:first-child {
    white-space: nowrap;
    display: inline-block;
  }
  
  /* Engelsk version: Gør teksten mere kvadratisk */
  html[lang="en"] #search-form-container h1 > span:first-child {
    word-spacing: -0.15em; /* Reducer mellemrum mellem CONNECTING og YOU */
    letter-spacing: 0.02em; /* Lidt øget afstand mellem bogstaver for at kompensere */
  }
  
  html[lang="en"] #search-form-container h1 > span.inline-block {
    letter-spacing: 0.05em; /* Mindre letter-spacing på WITH DENMARK */
  }
}

/* Juster font-størrelse på mellemstørrelse skærme for at undgå wrapping */
@media (min-width: 768px) and (max-width: 1023px) {
  #search-form-container h1 {
    font-size: 3.5rem; /* Lidt mindre end md:text-6xl */
  }
}

@media (min-width: 1024px) {
  #search-form-container h1 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  
  /* Engelsk version: Justeret letter-spacing på større skærme */
  html[lang="en"] #search-form-container h1 > span.inline-block {
    letter-spacing: 0.07em;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  #search-form-container h1 {
    font-size: 4.5rem; /* Lidt mindre end lg:text-7xl */
  }
}

@media (min-width: 1280px) {
  /* Engelsk version: Justeret letter-spacing på meget store skærme */
  html[lang="en"] #search-form-container h1 > span.inline-block {
    letter-spacing: 0.08em;
  }
}