html {background-size: cover;}

.result-payment-card-description {
  flex-grow: 1;
  font-size: 13px;
  color: #ffffff;
}

.DayPicker-Day.DayPicker-Day--availableDates {
  color: #c00074 !important;
  font-weight: bold;
}

.result-payment-card-line {
  display: none !important;
}

.result-summary-prices-dph {
  display: none;
}

/* ======================================== 
   CSS VARIABLES FOR UNIFIED STYLING
======================================== */
:root {
  --border-color: #e5e7eb;
  --border-width: 2px;
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --section-padding: 20px;
  --section-margin: 20px;
}

/* ======================================== 
   FLIGHT DETAILS PAGE - UNIFIED BORDERS
======================================== */

/* ALL Section Titles - Unified Style */
.result-information h3,
.change-ticket h3,
.result-summary-box h3,
.result-information > div > h3 {
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #6f6b6b !important;
}

/* ======================================== 
   FLUGINFO SECTION - UNIFIED BORDER
======================================== */

/* Fluginfo title - top border with rounded top corners */
.result-information > div:first-child {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: var(--section-padding) !important;
  padding-bottom: 10px !important;
  background: #ffffff !important;
  margin-bottom: 0 !important;
}

/* Flight details (.result-box) - left and right borders only */
.result-information > .result-box {
  border-left: var(--border-width) solid var(--border-color) !important;
  border-right: var(--border-width) solid var(--border-color) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px var(--section-padding) !important;
  background: #ffffff !important;
  margin-bottom: 0 !important;
}

/* Baggage/fare conditions - bottom border with rounded bottom corners */
.result-information > .result-box + div {
  border: var(--border-width) solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: 10px var(--section-padding) var(--section-padding) var(--section-padding) !important;
  background: #ffffff !important;
  margin-bottom: var(--section-margin) !important;
}

/* Remove borders from outbound/inbound flight containers inside .result-box */
.result-box-flights > div {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Baggage and fare conditions - no separate border */
.result-box-additional {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 15px !important;
  background: transparent !important;
}

/* ======================================== 
   TICKET-EIGENSCHAFTEN SECTION
======================================== */
.change-ticket {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* ======================================== 
   KONTAKTANGABEN & INFORMATIONEN ZUR RECHNUNG - UNIFIED BORDER
======================================== */

/* Reisende - Erwachsener (div:nth-child(0)) - separate border */
.result-information > div:nth-child(7) > div:nth-child(1) {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* Vielfliegerprogramm/Kundennummer (div:nth-child(1)) - separate border */
.result-information > div:nth-child(7) > div:nth-child(2) {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* Hide "Informationen zur Rechnung" title */
.result-information > div:nth-child(7) > div:nth-child(4) > h3 {
  display: none !important;
}

/* Kontaktangaben - top border with rounded top corners, no bottom border */
.result-information > div:nth-child(7) > div:nth-child(3) {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: var(--section-padding) !important;
  padding-bottom: 5px !important;
  background: #ffffff !important;
  margin-bottom: 0 !important;
}

/* Kontaktangaben - remove bottom margin from all child divs */
.result-information > div:nth-child(7) > div:nth-child(3) > div {
  margin-bottom: 0 !important;
}

/* Informationen zur Rechnung - left, right, and bottom borders with rounded bottom corners, no top border */
.result-information > div:nth-child(7) > div:nth-child(4) {
  border-left: var(--border-width) solid var(--border-color) !important;
  border-right: var(--border-width) solid var(--border-color) !important;
  border-bottom: var(--border-width) solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: 5px var(--section-padding) var(--section-padding) var(--section-padding) !important;
  background: #ffffff !important;
  margin-bottom: var(--section-margin) !important;
}

/* Informationen zur Rechnung - remove top margin from all child divs */
.result-information > div:nth-child(7) > div:nth-child(4) > div {
  margin-top: 0 !important;
}

/* Other sections (Zahlung und Zustellung, Bemerkungen) - separate borders */
.result-information > div:nth-child(7) > div:nth-child(5),
.result-information > div:nth-child(7) > div:nth-child(6) {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* ======================================== 
   ZUSAMMENFASSUNG & RABATT SECTIONS
======================================== */
.result-summary-box {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* ======================================== 
   EXISTING STYLES (PRESERVED)
======================================== */

/* Deutlicher Border für die Suchmaschine - Flugsuche */
.header-search-form {
  border: 3px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 20px !important;
}

.container .header-search-form {
  border: 3px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Border für die Tarif-Tabs (ECONOMY, ECONOMY FLEX, etc.) */
.flight-offer-brand {
  border: 2px solid #ffffff !important;
  border-radius: 6px 6px 0 0 !important;
  margin-right: 5px !important;
  transition: all 0.3s ease !important;
}

.flight-offer-brand:hover {
  border-color: #9ca3af !important;
  background-color: #f9fafb !important;
}

.flight-offer-brand.active {
  border-color: #c00074 !important;
  border-bottom: 2px solid #ffffff !important;
  background-color: #ffffff !important;
}

/* Mobile Optimierung */
@media (max-width: 800px) {
  .header-search-form {
    border: 2px solid #e5e7eb !important;
    padding: 15px !important;
  }
  
  .container .header-search-form {
    border: 2px solid #e5e7eb !important;
  }
  
  .flight-offer-brand {
    border: 1px solid #ffffff !important;
  }
}

/* Border für Flugkarten (einzelne Flugangebote) */
.flights-sorting-item {
  border: 3px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  background: #ffffff !important;
}

/* Border für Filter-Navigation */
.result-filter-btn-container.result-filter-btn-container.result-filter-btn-container {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  padding: 15px !important;
  background: #ffffff !important;
}

/* Border für Sortierbuttons (Billigste Flüge, Kürzeste Flugdauer) - kleiner und kompakter */
.flights-sorting-item {
  border: 2px solid #e5e7eb !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  padding: 10px 14px !important;
  margin-bottom: 15px !important;
  margin-right: 10px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
}

.flights-sorting-item:hover {
  border-color: #9ca3af !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.flights-sorting-item.selected {
  border-color: #c00074 !important;
  background-color: #fef2f8 !important;
  box-shadow: 0 3px 8px rgba(234, 1, 129, 0.15) !important;
}

/* Grauen Hintergrund der Sortierbuttons entfernen */
.flights-sorting-wrapper {
  background: transparent !important;
  padding: 0 !important;
}

/* Borders für einzelne Flugkarten (gesamte Flugkarte mit allen Tarifen) */
div.container[id^="flight-"] {
  border: 3px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  background: #ffffff !important;
}

/* Mobile Optimierung für neue Borders */
@media (max-width: 800px) {
  .flights-sorting-item {
  border: 2px solid #e5e7eb !important;
    padding: 12px !important;
  }
  
  .result-sorting-buttons button,
  .result-sorting-buttons > div > button {
    border: 2px solid #ffffff !important;
    padding: 10px 15px !important;
  }
  
  .result-filter-btn-container.result-filter-btn-container.result-filter-btn-container {
  border: 2px solid #e5e7eb !important;
    padding: 12px !important;
  }
}

/* Borders für Startseiten-Container */

/* Von/Nach und Datums-Felder Container */
.header-search-form-inner {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 15px !important;
  background: #ffffff !important;
  margin-bottom: 15px !important;
  max-width: 1000px !important;
  width: 100% !important;
}

/* Optionen-Container (Nur Direktflüge, Fluggesellschaften, etc.) */
.header-search-form-additional {
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 15px !important;
  background: #f9fafb !important;
}

/* Einzelne Eingabefelder innerhalb des Containers */
.header-search-form-inner-field {
  margin-bottom: 10px !important;
}

/* Mobile Optimierung für Startseiten-Container */
@media (max-width: 800px) {
  .header-search-form-inner,
  .header-search-form-additional {
    border: 1px solid #ffffff !important;
    padding: 12px !important;
  }
}

/* Border für die große Filternavigation links */
.filters {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  padding: 15px !important;
}

/* ======================================== 
   BOOKING CONFIRMATION SECTION (Checkbox + Button)
======================================== */
.result-box.result-confirmation.result-box.result-confirmation {
  border: var(--border-width) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--box-shadow) !important;
  padding: var(--section-padding) !important;
  margin-bottom: var(--section-margin) !important;
  background: #ffffff !important;
}

/* ======================================== 
   TRIP TYPE BUTTONS (Hinflug, Hin/Rückflug, Multicity)
======================================== */
/* Container for trip type buttons */
.header-search-form-tab-flight-container {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* Individual trip type tabs - unified style with other sections */
.header-search-form-tab {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #6f6b6b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Icon inside trip type tabs */
.header-search-form-tab .header-search-form-tab-ico {
  width: 20px !important;
  height: auto !important;
  margin-right: 8px !important;
}

/* Hover state */
.header-search-form-tab:hover {
  border-color: #c00074 !important;
  background: #fef2f8 !important;
  box-shadow: 0 2px 4px rgba(234, 1, 129, 0.12) !important;
}

/* Active/Selected state */
.header-search-form-tab.active,
.header-search-form-tab[aria-selected="true"] {
  border-color: #c00074 !important;
  background: #c00074 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(234, 1, 129, 0.2) !important;
}

/* Text inside tabs should also be white when active */
.header-search-form-tab.active .header-search-form-tab-text-ellipsis,
.header-search-form-tab[aria-selected="true"] .header-search-form-tab-text-ellipsis {
  color: #ffffff !important;
}

/* Mobile optimization - keep buttons side by side with smaller borders */
@media (max-width: 800px) {
  .header-search-form-tab-flight-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  
  /* All buttons get their natural width - no flex shrinking */
  .header-search-form-tab {
    padding: 4px 8px !important;
    border-width: 1px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide icon on mobile to save space */
  .header-search-form-tab .header-search-form-tab-ico {
    display: none !important;
  }
}




/* ======================================== MULTI-CITY FLIGHT BUTTONS (Entfernen, Ein anderer Flug) ======================================== */
/* Container for the flight action buttons */
.header-search-form-multiple-add {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

/* Individual buttons (Entfernen, Ein anderer Flug) */
.header-search-form-multiple-add-inner-container-minus,
.header-search-form-multiple-add-inner-container-plus {
  margin-right: 10px !important;
  margin-left: 0 !important;
}










/* ======================================== 
   PLUS/MINUS BUTTONS - MODERN DESIGN #c00074
   ======================================== */
/* Modern, beautiful icons with gradient, shadow, and ring effect */
img[src*="ico-minus"] {
  content: url('data:image/svg+xml,%3Csvg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="pinkGradient" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23d4007f;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23c00074;stop-opacity:1" /%3E%3C/radialGradient%3E%3Cfilter id="innerShadow"%3E%3CfeGaussianBlur in="SourceAlpha" stdDeviation="1"/%3E%3CfeOffset dx="0" dy="1" result="offsetblur"/%3E%3CfeFlood flood-color="%23000000" flood-opacity="0.15"/%3E%3CfeComposite in2="offsetblur" operator="in"/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in="SourceGraphic"/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx="14" cy="14" r="13" fill="white" opacity="0.3"/%3E%3Ccircle cx="14" cy="14" r="12" fill="url(%23pinkGradient)" filter="url(%23innerShadow)"/%3E%3Crect x="7" y="12.5" width="14" height="3" rx="1.5" fill="%23ffffff" opacity="0.95"/%3E%3C/svg%3E') !important;
  width: 28px !important;
  height: 28px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

img[src*="ico-plus"] {
  content: url('data:image/svg+xml,%3Csvg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="pinkGradient" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23d4007f;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23c00074;stop-opacity:1" /%3E%3C/radialGradient%3E%3Cfilter id="innerShadow"%3E%3CfeGaussianBlur in="SourceAlpha" stdDeviation="1"/%3E%3CfeOffset dx="0" dy="1" result="offsetblur"/%3E%3CfeFlood flood-color="%23000000" flood-opacity="0.15"/%3E%3CfeComposite in2="offsetblur" operator="in"/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in="SourceGraphic"/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx="14" cy="14" r="13" fill="white" opacity="0.3"/%3E%3Ccircle cx="14" cy="14" r="12" fill="url(%23pinkGradient)" filter="url(%23innerShadow)"/%3E%3Crect x="7" y="12.5" width="14" height="3" rx="1.5" fill="%23ffffff" opacity="0.95"/%3E%3Crect x="12.5" y="7" width="3" height="14" rx="1.5" fill="%23ffffff" opacity="0.95"/%3E%3C/svg%3E') !important;
  width: 28px !important;
  height: 28px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Hover effect - scale up slightly */
img[src*="ico-minus"]:hover,
img[src*="ico-plus"]:hover {
  transform: scale(1.1) !important;
  opacity: 0.9 !important;
  cursor: pointer !important;
}

/* Active/Click effect - scale down */
img[src*="ico-minus"]:active,
img[src*="ico-plus"]:active {
  transform: scale(0.95) !important;
}

/* ======================================== 
   CHECKBOX ICONS - MODERN DESIGN #c00074
   ======================================== */
/* Modern, beautiful checkbox icons with gradient, shadow, and ring effect */

/* Checked checkbox - with checkmark */
img[src*="ico-checkbox-checked"] {
  content: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="pinkGradientCheck" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23d4007f;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23c00074;stop-opacity:1" /%3E%3C/radialGradient%3E%3Cfilter id="innerShadowCheck"%3E%3CfeGaussianBlur in="SourceAlpha" stdDeviation="0.8"/%3E%3CfeOffset dx="0" dy="1" result="offsetblur"/%3E%3CfeFlood flood-color="%23000000" flood-opacity="0.15"/%3E%3CfeComposite in2="offsetblur" operator="in"/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in="SourceGraphic"/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect x="1" y="1" width="22" height="22" rx="5" fill="white" opacity="0.3"/%3E%3Crect x="2" y="2" width="20" height="20" rx="4" fill="url(%23pinkGradientCheck)" filter="url(%23innerShadowCheck)"/%3E%3Cpath d="M7 12 L10.5 15.5 L17 8.5" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.95"/%3E%3C/svg%3E') !important;
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Unchecked checkbox - empty */
img[src*="ico-checkbox-unchecked"] {
  content: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="grayGradient" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23e5e7eb;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23d1d5db;stop-opacity:1" /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x="1" y="1" width="22" height="22" rx="5" fill="white" opacity="0.3"/%3E%3Crect x="2" y="2" width="20" height="20" rx="4" fill="url(%23grayGradient)"/%3E%3Crect x="3.5" y="3.5" width="17" height="17" rx="3" fill="%23ffffff"/%3E%3C/svg%3E') !important;
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease !important;
}

/* Hover effect for checkboxes */
img[src*="ico-checkbox"]:hover {
  transform: scale(1.08) !important;
  opacity: 0.9 !important;
  cursor: pointer !important;
}

/* Active/Click effect for checkboxes */
img[src*="ico-checkbox"]:active {
  transform: scale(0.95) !important;
}

/* Hover effect for unchecked - slight pink tint */
img[src*="ico-checkbox-unchecked"]:hover {
  filter: brightness(0.98) hue-rotate(300deg) !important;
}

/* ======================================== 
   CLOCK/TIME ICONS - MODERN DESIGN #c00074
   ======================================== */
/* Modern, beautiful clock icons with gradient, shadow, and ring effect */

/* Clock icon for flight time, transfer time, etc. */
img[src*="ico-clock"],
img[src*="clock-icon"],
img[src*="time-icon"] {
  content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="pinkGradientClock" cx="30%25" cy="30%25"%3E%3Cstop offset="0%25" style="stop-color:%23d4007f;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23c00074;stop-opacity:1" /%3E%3C/radialGradient%3E%3Cfilter id="innerShadowClock"%3E%3CfeGaussianBlur in="SourceAlpha" stdDeviation="0.6"/%3E%3CfeOffset dx="0" dy="0.5" result="offsetblur"/%3E%3CfeFlood flood-color="%23000000" flood-opacity="0.15"/%3E%3CfeComposite in2="offsetblur" operator="in"/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in="SourceGraphic"/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx="10" cy="10" r="9.5" fill="white" opacity="0.3"/%3E%3Ccircle cx="10" cy="10" r="8.5" fill="url(%23pinkGradientClock)" filter="url(%23innerShadowClock)"/%3E%3Ccircle cx="10" cy="10" r="1.2" fill="%23ffffff" opacity="0.95"/%3E%3Cpath d="M10 10 L10 5.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.95"/%3E%3Cpath d="M10 10 L13.5 10" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.95"/%3E%3C/svg%3E') !important;
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Hover effect for clock icons */
img[src*="ico-clock"]:hover,
img[src*="clock-icon"]:hover,
img[src*="time-icon"]:hover {
  transform: scale(1.1) !important;
  opacity: 0.9 !important;
  cursor: pointer !important;
}

/* Active/Click effect for clock icons */
img[src*="ico-clock"]:active,
img[src*="clock-icon"]:active,
img[src*="time-icon"]:active {
  transform: scale(0.95) !important;
}




/* ======================================== 
   CLOCK/TIME ICONS - REPLACE EXISTING ICONS WITH #c00074
   ======================================== */
/* Replace "Flugzeit:" icon with pink version */
.flight-detail-duration {
  background-image: url('data:image/svg+xml,%3Csvg width="12px" height="13px" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23c00074"%3E%3Cpath d="M5.8378906,0.92578125 C7.4511799,0.92578125 8.8274683,1.49543701 9.9667969,2.63476562 C11.1061255,3.77409424 11.6757812,5.14582531 11.6757812,6.75 C11.6757812,8.35417469 11.1061255,9.72590576 9.9667969,10.8652344 C8.8274683,12.004563 7.4511799,12.5742188 5.8378906,12.5742188 C4.2246013,12.5742188 2.848313,12.004563 1.7089844,10.8652344 C0.5696558,9.72590576 0,8.35417469 0,6.75 C0,5.14582531 0.5696558,3.77409424 1.7089844,2.63476562 C2.848313,1.49543701 4.2246013,0.92578125 5.8378906,0.92578125 Z M5.8378906,11.4257812 C7.1230533,11.4257812 8.2213496,10.9700566 9.1328125,10.0585938 C10.0442754,9.1471309 10.5,8.0442773 10.5,6.75 C10.5,5.4557227 10.0442754,4.35286914 9.1328125,3.44140625 C8.2213496,2.52994336 7.1230533,2.07421875 5.8378906,2.07421875 C4.5527279,2.07421875 3.4544316,2.52994336 2.5429688,3.44140625 C1.6315059,4.35286914 1.1757812,5.4557227 1.1757812,6.75 C1.1757812,8.0442773 1.6315059,9.1471309 2.5429688,10.0585938 C3.4544316,10.9700566 4.5527279,11.4257812 5.8378906,11.4257812 Z M6.125,3.82421875 L6.125,6.8867188 L8.75,8.4453125 L8.3125,9.1835938 L5.25,7.3242188 L5.25,3.82421875 L6.125,3.82421875 Z"/%3E%3C/g%3E%3C/svg%3E') !important;
}

/* Replace "Umsteigezeit:" icon with pink version */
.flight-detail-one-way-transfer {
  background-image: url('data:image/svg+xml,%3Csvg width="12px" height="13px" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23c00074"%3E%3Cpath d="M8.2988281,4.27539062 C8.9824253,4.95898819 9.3242188,5.78384934 9.3242188,6.75 C9.3242188,7.71615066 8.9824253,8.54101181 8.2988281,9.22460938 C7.615231,9.90820694 6.7903694,10.25 5.8242188,10.25 C4.8580681,10.25 4.0377638,9.90364948 3.3632812,9.21093750 L5.8242188,6.75 L5.8242188,3.25 C6.7903694,3.25 7.615231,3.59179306 8.2988281,4.27539062 Z M5.8378906,0.92578125 C7.4511799,0.92578125 8.8274683,1.49543701 9.9667969,2.63476562 C11.1061255,3.77409424 11.6757812,5.14582531 11.6757812,6.75 C11.6757812,8.35417469 11.1061255,9.72590576 9.9667969,10.8652344 C8.8274683,12.004563 7.4511799,12.5742188 5.8378906,12.5742188 C4.2246013,12.5742188 2.848313,12.004563 1.7089844,10.8652344 C0.5696558,9.72590576 0,8.35417469 0,6.75 C0,5.14582531 0.5696558,3.77409424 1.7089844,2.63476562 C2.848313,1.49543701 4.2246013,0.92578125 5.8378906,0.92578125 Z M5.8378906,11.4257812 C7.1230533,11.4257812 8.2213496,10.9700566 9.1328125,10.0585938 C10.0442754,9.1471309 10.5,8.0442773 10.5,6.75 C10.5,5.4557227 10.0442754,4.35286914 9.1328125,3.44140625 C8.2213496,2.52994336 7.1230533,2.07421875 5.8378906,2.07421875 C4.5527279,2.07421875 3.4544316,2.52994336 2.5429688,3.44140625 C1.6315059,4.35286914 1.1757812,5.4557227 1.1757812,6.75 C1.1757812,8.0442773 1.6315059,9.1471309 2.5429688,10.0585938 C3.4544316,10.9700566 4.5527279,11.4257812 5.8378906,11.4257812 Z"/%3E%3C/g%3E%3C/svg%3E') !important;
}

/* ======================================== 
   LOADING ICON - SIMPLE AIRPLANE #c00074
   ======================================== */
/* Simple, clean airplane icon - no animation - LARGER */
img[src*="ico-loading"] {
  content: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" fill="%23c00074" stroke="%23ffffff" stroke-width="0.5" stroke-linejoin="round"/%3E%3C/svg%3E') !important;
  width: 64px !important;
  height: 64px !important;
}

/* ========================================
   HINREISE/RÜCKREISE BUTTONS - ACTIVE STATE INDICATOR
   ======================================== */

/* Container for Hinreise/Rückreise buttons */
.result-filter-btn-container > div:first-child {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 15px !important;
}

/* Individual Hinreise/Rückreise buttons - default state */
.result-filter-btn-container > div:first-child > button {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #6f6b6b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Hover state */
.result-filter-btn-container > div:first-child > button:hover {
  border-color: #c00074 !important;
  background: #fef2f8 !important;
  box-shadow: 0 2px 4px rgba(234, 1, 129, 0.12) !important;
}

/* Active/Selected state - pink background with white text */
.result-filter-btn-container > div:first-child > button.active,
.result-filter-btn-container > div:first-child > button[aria-selected="true"] {
  border-color: #c00074 !important;
  background: #c00074 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(234, 1, 129, 0.2) !important;
}

/* ========================================
HINREISE/RÜCKREISE FILTER TABS - ACTIVE STATE INDICATOR
======================================== */

/* Container for Hinreise/Rückreise filter tabs */
.filter-box-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 15px !important;
}

/* Individual filter tabs (Hinreise/Rückreise) - default state */
.filter-tab {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  background: #ffffff !important;
  color: #6f6b6b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Hover state */
.filter-tab:hover {
  border-color: #c00074 !important;
  background: #fef2f8 !important;
  box-shadow: 0 2px 4px rgba(234, 1, 129, 0.12) !important;
}

/* Active/Selected state - pink background with white text */
.filter-tab-active,
.filter-tab.active {
  border-color: #c00074 !important;
  background: #c00074 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(234, 1, 129, 0.2) !important;
}

/* Active state hover - keep pink background */
.filter-tab-active:hover,
.filter-tab.active:hover {
  border-color: #c00074 !important;
  background: #c00074 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(234, 1, 129, 0.2) !important;
}









/* ======================================== 
ZEITFILTER SLIDER - WEISSER HINTERGRUND MIT DUNKLEM TEXT
======================================== */

/* Slider-Container mit weißem Hintergrund und dunklem Text */
.filter-range-box,
.filter-range-box.filter-tab-active {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Text in den Slidern - dunkle Farbe für Lesbarkeit */
.filter-range-box *,
.filter-range-box.filter-tab-active *,
.filter-range-box b,
.filter-range-box span,
.filters-range-description,
.filters-range-description b,
.filters-range-description span {
  color: #333333 !important;
}

/* ======================================== 
MOBILE FILTER BUTTON - BORDER, SHADOW UND HINTERGRUND ENTFERNEN (NUR MOBILE)
======================================== */

/* Entferne Border, Box-Shadow und Hintergrund vom mobilen Filter-Button Container - NUR in der mobilen Ansicht */
@media (max-width: 800px) {
  .result-filter-btn-container.result-filter-btn-container.result-filter-btn-container {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* ======================================== 
MOBILE FILTER ICON - PINKE STREIFEN (NUR MOBILE)
======================================== */

/* Ersetze das mobile Filter-Icon (3 Streifen) mit pinker Version - NUR in der mobilen Ansicht */
@media (max-width: 800px) {
  .result-filter-icon-item,
  img[src*="ico-parameters"] {
    content: url('data:image/svg+xml,%3Csvg width="17" height="12" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23c00074"%3E%3Crect x="0" y="0" width="17" height="2" rx="1"/%3E%3Crect x="0" y="5" width="17" height="2" rx="1"/%3E%3Crect x="0" y="10" width="17" height="2" rx="1"/%3E%3C/g%3E%3C/svg%3E') !important;
    width: 17px !important;
    height: 12px !important;
  }
}

/* ======================================== 
MOBILE FILTER CLOSE ICON - PINKES X (NUR MOBILE)
======================================== */

/* Ersetze das orange X-Icon (Close-Button) mit pinker Version - NUR in der mobilen Ansicht */
@media (max-width: 800px) {
  /* Target the span with class icon-type--cross */
  .icon-type--cross svg path,
  .icon-color--dark-orange svg path,
  span[class*="icon-type--cross"] svg path {
    fill: #c00074 !important;
  }
  
  /* Also target any img elements with cross/close in src */
  .result-filter-close-btn img,
  img[src*="cross"],
  img[src*="close"] {
    content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg stroke="%23c00074" stroke-width="2.5" stroke-linecap="round"%3E%3Cline x1="4" y1="4" x2="16" y2="16"/%3E%3Cline x1="16" y1="4" x2="4" y2="16"/%3E%3C/g%3E%3C/svg%3E') !important;
    width: 20px !important;
    height: 20px !important;
  }
}

/* ======================================== 
MOBILE TARIFBEDINGUNGEN - LINKSBÜNDIG (NUR MOBILE)
======================================== */

/* Tarifbedingungen linksbündig ausrichten wie Gepäckinfos - NUR in der mobilen Ansicht */
@media (max-width: 800px) {
  .flight-additional-info-mobile-links {
    justify-content: flex-start !important;
  }
}

/* ======================================== 
MOBILE GEPÄCKDETAILS - LINKSBÜNDIG (NUR MOBILE)
======================================== */

/* Gepäckdetails linksbündig ausrichten - NUR in der mobilen Ansicht */
@media (max-width: 800px) {
  .flight-additional-info-icon {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* ========================================
   HIDE TICKET-EIGENSCHAFTEN AND BEDINGUNGEN SECTIONS
   ======================================== */

/* Hide Ticket-Eigenschaften section completely */
.change-ticket {
  display: none !important;
}

/* Hide Bedingungen für Ticketänderung section completely */
.result-information > div:nth-child(7) > div:nth-child(6) {
  display: none !important;
}

/* ========================================
   FOOTER LOGOS - HOVER ILLUMINATION EFFECT
   ======================================== */

/* Airline Partner Logos - Hover Effect */
footer img[src*="Swiss"],
footer img[src*="Cathay"],
footer img[src*="singapore"],
footer img[src*="Emirates"],
footer img[src*="Turkish"],
footer img[src*="Ethiopian"],
footer img[src*="Etihad"] {
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

footer img[src*="Swiss"]:hover,
footer img[src*="Cathay"]:hover,
footer img[src*="singapore"]:hover,
footer img[src*="Emirates"]:hover,
footer img[src*="Turkish"]:hover,
footer img[src*="Ethiopian"]:hover,
footer img[src*="Etihad"]:hover {
  opacity: 1 !important;
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(192, 0, 116, 0.4)) !important;
  transform: scale(1.05) !important;
}

/* Certification Logos - Hover Effect */
footer img[src*="iata"],
footer img[src*="reisegarantie"],
footer img[src*="srv"] {
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

footer img[src*="iata"]:hover,
footer img[src*="reisegarantie"]:hover,
footer img[src*="srv"]:hover {
  opacity: 1 !important;
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(192, 0, 116, 0.4)) !important;
  transform: scale(1.05) !important;
}

/* ========================================
   HIDE CEE SYSTEMS COPYRIGHT
   ======================================== */
/* Hide CEE Systems copyright text in footer */
.footer-rights {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* ========================================
   FIX BOOKING CONFIRMATION SECTION LAYOUT
   ======================================== */
/* Optimize "Buchung abschließen" section for better display on web and mobile */
.result-confirmation {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
  padding: 15px 20px !important;
  flex-wrap: wrap !important;
}

/* Hide the mobile-only line break that causes spacing issues */
.result-confirmation .only-mobile {
  display: none !important;
}

/* Optimize checkbox and text container */
.result-confirmation .flex.items-center {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Optimize button styling */
.result-confirmation .button-result-finish {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Mobile-specific optimizations */
@media (max-width: 800px) {
  .result-confirmation {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 15px !important;
  }
  
  .result-confirmation .button-result-finish {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ======================================== 
   TERMS AND CONDITIONS - REMOVE DUPLICATE TEXT
   ======================================== */

/* Hide the first span text "Ich stimme den Allgemeinen Geschäftsbedingungen zu" */
.result-confirmation .flex.items-center > span:first-of-type {
  display: none !important;
}

/* Make the link text more descriptive */
.result-confirmation .flex.items-center > span.link::before {
  content: "Ich stimme den " !important;
  color: #333333 !important;
  font-weight: normal !important;
  text-decoration: none !important;
  cursor: default !important;
}

.result-confirmation .flex.items-center > span.link::after {
  content: " zu" !important;
  color: #333333 !important;
  font-weight: normal !important;
  text-decoration: none !important;
  cursor: default !important;
}

/* Keep the link itself clickable and underlined */
.result-confirmation .flex.items-center > span.link {
  color: #c00074 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* Mobile optimization for Terms and Conditions */
@media (max-width: 768px) {
  /* Ensure proper text wrapping on mobile */
  .result-confirmation .flex.items-center {
    flex-wrap: wrap !important;
    word-break: break-word !important;
  }
  
  /* Ensure the link and surrounding text display inline */
  .result-confirmation .flex.items-center > span.link {
    display: inline !important;
  }
  
  /* Adjust font size for better readability on mobile */
  .result-confirmation .flex.items-center > span.link::before,
  .result-confirmation .flex.items-center > span.link,
  .result-confirmation .flex.items-center > span.link::after {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}