/* ==========================================
   Notifications board styles
   A three-column layout to present the latest notices on the homepage.
   Each item includes a title, content snippet and publication date.  The
   design mirrors the clean, modern aesthetic of the Taubenbahn site.
*/
.notifications {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.notifications h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #e20613;
  border-bottom: 2px solid #e20613;
  padding-bottom: 0.5rem;
}
.notifications-board {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.notification-item {
  flex: 1 1 calc(33.333% - 0.67rem);
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
}
.notification-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e20613;
}
.notification-content {
  flex-grow: 1;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #333;
}
.notification-date {
  font-size: 0.75rem;
  color: #777;
  text-align: right;
}
@media (max-width: 768px) {
  .notification-item {
    flex: 1 1 100%;
  }
}
/*
 * Stylesheet for the Pigeon Rail route planner.
 *
 * The design loosely follows the look and feel of Deutsche
 * Bahn’s booking pages. Red highlights, clean typography and
 * generous spacing make the interface feel familiar while still
 * remaining lightweight.  Animations are used sparingly to
 * indicate state changes, such as expanding a connection card
 * to reveal details.
 */

/* Reset some basic styles */
html, body, div, span, h1, h2, h3, p, a, ul, li, header, footer, nav, section, form, input, label, button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #222;
  background-color: #f9f9f9;

  /* Start hidden until the page is ready.  A fade‑in is triggered
     by adding the .page-loaded class in scripts.js when all
     translations and data are loaded. */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Fade the page slightly when switching languages to provide a smoother
   visual transition.  This class is added and removed dynamically
   in scripts.js. */
body.lang-switching {
  opacity: 0.4;
}

/* When the DOM is ready and translations have been applied, the
   page receives this class to trigger the fade‑in. */
body.page-loaded {
  opacity: 1;
}

/* Top navigation bar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border-bottom: 2px solid #e20613;
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e20613;
  /* Reduce letter spacing for the Taubenbahn logo to improve aesthetics */
  letter-spacing: 0;
  line-height: 1;
}

.navbar .logo .tagline {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  color: #555;
  letter-spacing: 0;
  margin-top: -2px;
}

.navbar nav {
  display: flex;
  gap: 1.25rem;
}

.navbar nav a {
  text-decoration: none;
  color: #222;
  font-weight: 600;
  transition: color 0.2s;
}

.navbar nav a:hover {
  color: #e20613;
}

/* New navigation structure */
.logo-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.logo-area .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e20613;
  text-decoration: none;
  /* Use Microsoft YaHei for the logo to echo Chinese heritage while
     keeping it bold and modern.  If the font is unavailable, fall
     back to Segoe UI or sans-serif. */
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
}
.primary-nav {
  display: flex;
  gap: 1rem;
}
.primary-nav a {
  text-decoration: none;
  color: #222;
  font-weight: 600;
  transition: color 0.2s;
}
.primary-nav a:hover {
  color: #e20613;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-tagline {
  font-size: 0.95rem;
  color: #777;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.lang-toggle button {
  background: none;
  border: none;
  color: #e20613;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}
.lang-toggle button:hover {
  text-decoration: underline;
  color: #b80a10;
}

/* Hero section */
.hero {
  background-color: #f0f0f0;
  border-bottom: 2px solid #e20613;
  padding: 2rem 1rem;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #e20613;
  /* Align the hero heading with the search card by centering within
     the same max-width container. */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Search card wraps the search form to provide a clean container
   similar to Deutsche Bahn’s search panel.  It uses a white
   background, soft border and subtle shadow. */
.search-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin: 0 auto;
  max-width: 900px;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
}

.form-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: #555;
}

.form-field input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
}

.form-field input:focus {
  outline: none;
  border-color: #e20613;
  box-shadow: 0 0 0 2px rgba(226, 6, 19, 0.2);
}

.search-btn {
  grid-column: span 2;
  background-color: #e20613;
  color: #fff;
  border: none;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-btn:hover {
  background-color: #b80a10;
}

/* Suggestion dropdown */
.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  /* suggestions drop-down appears with a fade and slide animation */
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block;
}

/* Activate suggestion list */
.suggestions.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.suggestions div {
  padding: 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.suggestions div:hover {
  background-color: #f5f5f5;
}

/* Static info section */
.info {
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ */
/* DB‑style search heading and multi‑row search form
   Inspired by Deutsche Bahn’s search panel layout.  The
   heading uses a red underline, and the search form is built
   from rows of grey input containers with embedded icons and
   clear/swap controls.  Each field is flexible, allowing the
   form to adapt to different screen sizes. */

/* Heading at top of search card */
.search-heading {
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.75rem;
  position: relative;
  display: inline-block;
}
.search-heading::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: #e20613;
  margin-top: 0.2rem;
}

/* Container for entire search form */
.db-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each row within the search form */
.db-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Generic container for input fields in the first row */
.db-field {
  position: relative;
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 3rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.db-field input {
  flex: 1;
  border: none;
  background: transparent;
  padding-left: 1.75rem;
  padding-right: 1.5rem;
  height: 100%;
  font-size: 1rem;
  color: #222;
}
.db-field input::placeholder {
  color: #888;
}
.db-field input:focus {
  outline: none;
}

/* Use embedded SVGs for start and destination icons to exactly match the look
   of Deutsche Bahn.  The icons are drawn via data URIs.  Override the
   pseudo-elements by hiding them and apply a background image instead. */
.from-field, .to-field {
  background-repeat: no-repeat;
  background-position: 0.5rem center;
  background-size: 14px 14px;
}
.from-field {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%227%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23666%22/%3E%3C/svg%3E");
}
.to-field {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8%201c-2.21%200-4%201.79-4%204%200%203.33%204%208.5%204%208.5s4-5.17%204-8.5c0-2.21-1.79-4-4-4z%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%225%22%20r%3D%221.5%22%20fill%3D%22%23666%22/%3E%3C/svg%3E");
}

/* Remove any background images applied via earlier styles.  Note: this declaration
   is intentionally left blank because we now apply our own icons via background images. */
/* .from-field, .to-field {
  background-image: none !important;
} */

/* Hide any pseudo-elements that were previously used to draw icons */
.from-field::before, .from-field::after, .to-field::before, .to-field::after {
  display: none !important;
}

/* Explicit icon elements for origin and destination fields: these are visible
   inline and not absolutely positioned.  The field container (.db-field) will
   arrange its children (icon, input, clear button) in a row using flexbox. */
.db-field {
  position: relative;
  display: flex;
  align-items: center;
}
.field-icon {
  /* Hide the legacy inline field icons.  We rely on
     background images applied directly to the field containers
     (.from-field and .to-field) to draw the departure and
     destination icons.  Keeping these spans in the DOM but
     hiding them prevents layout shifts. */
  display: none !important;
}
/* Departure/origin icon: circle with a dot */
.field-icon.from-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6'%20stroke='%23666'%20stroke-width='2'%20fill='none'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='3'%20fill='%23666'/%3E%3C/svg%3E");
}
/* Destination icon: map pin with a dot */
.field-icon.to-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Cpath%20d='M8%201c-2.76%200-5%202.24-5%205%200%203.5%205%209%205%209s5-5.5%205-9c0-2.76-2.24-5-5-5z'%20stroke='%23666'%20stroke-width='2'%20fill='none'/%3E%3Ccircle%20cx='8'%20cy='6'%20r='2'%20fill='%23666'/%3E%3C/svg%3E");
}
/* Rely on the inherent padding of the input fields rather than adding extra left padding. */

/* For better consistency with Deutsche Bahn, apply the origin and destination icons via
   background images directly on the field containers.  This ensures the icons are
   always visible even if additional DOM elements are inserted or removed. */
.from-field {
  /* Apply a custom SVG as the origin icon.  The icon is a ring
     with a dot, matching the Deutsche Bahn design.  Use
     !important to override earlier declarations. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6'%20stroke='%23666'%20stroke-width='2'%20fill='none'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='3'%20fill='%23666'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: 0.6rem center;
  background-size: 16px 16px;
}
.to-field {
  /* Apply a custom SVG as the destination icon.  This map pin
     with a dot matches Deutsche Bahn.  Use !important to
     override earlier declarations. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Cpath%20d='M8%201c-3%200-5.5%202.5-5.5%205.5%200%203.8%205.5%209.5%205.5%209.5s5.5-5.7%205.5-9.5C13.5%203.5%2011%201%208%201z'%20stroke='%23666'%20stroke-width='2'%20fill='none'/%3E%3Ccircle%20cx='8'%20cy='5.5'%20r='2.5'%20fill='%23666'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: 0.6rem center;
  background-size: 16px 16px;
}


/* Clear button inside input fields */
.clear-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.clear-btn:hover {
  color: #e20613;
}

/* Swap button between from and to fields */
/* Swap button between origin and destination.  Rendered as a small
   grey box containing a double arrow. */
.swap-btn {
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.swap-btn:hover {
  background-color: #eaeaea;
  color: #e20613;
}

/* Primary search button */
.db-search-btn {
  background-color: #e20613;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 1rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.db-search-btn:hover {
  background-color: #b80a10;
}

/* Second row of search form */
.db-date-time,
.db-return,
.db-passengers,
.db-class-toggle {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 2.5rem;
  padding: 0 0.5rem;
  gap: 0.25rem;
}

/* New layout for the second row of the search form, inspired by
   Deutsche Bahn’s connection search.  Each item (date, return,
   travellers) is a flexible container with an icon, two lines of
   text and a chevron arrow to indicate it can be expanded or
   edited.  The hidden form inputs reside inside these containers
   and are not visible to the user. */
.db-row.row2 {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.db-item {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  height: 3rem;
  position: relative;
}

/* When there are only two items in the second row (date and return),
   distribute them evenly across the available width.  The gap from the
   parent .db-row controls spacing. */
.db-row.row2 > .db-item {
  flex: 1 1 calc(50% - 0.25rem);
}
.db-item .icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  margin-right: 0.4rem;
}
/* Calendar icon: simple square with two rows representing dates */
/* Override default pseudo‑elements for calendar and return icons so they do not render */
.calendar-icon::before,
.calendar-icon::after,
.return-icon::before,
.return-icon::after {
  display: none !important;
}

/* Assign custom SVG backgrounds to the calendar and return icons to match the Deutsche Bahn style */
.calendar-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Crect%20x='1'%20y='3'%20width='14'%20height='12'%20rx='2'%20ry='2'%20stroke='%23666'%20stroke-width='2'%20fill='none'/%3E%3Cline%20x1='1'%20y1='7'%20x2='15'%20y2='7'%20stroke='%23666'%20stroke-width='2'/%3E%3Ccircle%20cx='5'%20cy='10'%20r='1.5'%20fill='%23666'/%3E%3Ccircle%20cx='8'%20cy='10'%20r='1.5'%20fill='%23666'/%3E%3Ccircle%20cx='11'%20cy='10'%20r='1.5'%20fill='%23666'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.return-icon {
  /* Replace the rough return symbol with a high‑quality arrow icon.
     The SVG is stored in the assets folder (return-icon.svg) and
     originates from the Bootstrap Icons library.  Using an
     external file instead of an inline data URI makes it easier to
     manage and ensures crisp rendering across devices. */
  background-image: url("assets/return-icon.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
/* Travellers icon: simplified person symbol */
.travellers-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.travellers-icon::after {
  content: '\1F464'; /* unicode bust in silhouette */
  font-size: 1.1rem;
  line-height: 1;
  color: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.db-item .texts {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.db-item .primary-text {
  font-size: 0.9rem;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-item .secondary-text {
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-item .arrow {
  /* Ensure the arrow does not intercept clicks on the entire item so that
     attachPopup handlers on the container still fire for date and return
     selection popups. */
  pointer-events: none;
  margin-left: auto;
  color: #e20613;
  font-size: 1.2rem;
  line-height: 1;
}

/* Date and time inputs inside date-time container */
.db-date-time input[type="date"],
.db-date-time input[type="time"] {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: #222;
}
.db-date-time input[type="date"]::-webkit-calendar-picker-indicator,
.db-date-time input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}
.db-date-time input[type="date"]:focus,
.db-date-time input[type="time"]:focus {
  outline: none;
}

/* Return toggle: style like a link */
.db-return .return-toggle {
  background: none;
  border: none;
  color: #e20613;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  text-decoration: underline;
}
.db-return .return-toggle:hover {
  color: #b80a10;
}

/* Passengers input; hide spinners for number input */
.db-passengers input[type="number"] {
  border: none;
  background: transparent;
  width: 3rem;
  font-size: 0.9rem;
  -moz-appearance: textfield;
  text-align: center;
}
.db-passengers input[type="number"]::-webkit-inner-spin-button,
.db-passengers input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Class toggle buttons */
.db-class-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.db-class-toggle .class-btn {
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.db-class-toggle .class-btn.active {
  background-color: #303030;
  color: #fff;
  border-color: #303030;
}
.db-class-toggle .class-btn:hover {
  background-color: #e6e6e6;
}

.info h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #e20613;
}

.info ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.info li {
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.info li:hover {
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Promotional section */
.promo {
  background-color: #ffffff;
  border-top: 1px solid #eee;
  border-bottom: 2px solid #e20613;
  padding: 2rem 1rem;
  margin-top: 2rem;
}
.promo-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.promo-content h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: #e20613;
}
.promo-content p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #444;
}
.promo-btn {
  background-color: #e20613;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s;
  text-decoration: none;
}
.promo-btn:hover {
  background-color: #b80a10;
}

/* Results page styles */
.results-header {
  background-color: #f0f0f0;
  padding: 1rem;
  border-bottom: 2px solid #e20613;
}

/* Back home link */
.back-home {
  margin-bottom: 0.5rem;
}
.back-home a {
  color: #e20613;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.back-home a:hover {
  text-decoration: underline;
}

.results-header form {
  /* Override the default grid layout for the results page search form.
     Use the same layout as the homepage: a block-level form with
     two flexbox rows.  The parent .db-row classes inside will
     control the alignment and spacing of the individual fields.
     Keep the same max‑width and centering as the home search card. */
  display: block;
  max-width: 900px;
  margin: 0 auto;
}

.results-container {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  /* Make this container a positioning context for the loading overlay */
  position: relative;
}

.result-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid #e20613;
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
  /* Fade and slide in animation for newly loaded results */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlideIn 0.5s ease forwards;
}

/* Mark return journey cards: insert a label before the station names when the
   card has the "return" class.  The label is supplied via a data
   attribute on the stations element. */
.result-card.return .summary-main .stations::before {
  content: attr(data-return-label);
  font-weight: 700;
  color: #e20613;
  margin-right: 0.5rem;
  font-size: 0.95rem;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Summary row: display two columns (main and right) separated by a gap. */
.result-summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
}

/* Main part of summary: timespan and stations */
.summary-main {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-main .timespan {
  font-size: 1.25rem;
  font-weight: bold;
  color: #e20613;
}

.summary-main .stations {
  /* Slightly larger station names for better readability */
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

/* New summary elements */
.summary-main .duration {
  /* Reduce the prominence of the total journey time relative to station names */
  font-size: 1.15rem;
  font-weight: 700;
  color: #e20613;
}
.summary-main .arrival-est {
  /* Increase arrival time text slightly to balance the larger station names */
  font-size: 1.0rem;
  color: #555;
}

/* Info row below the route bar showing transfer and stop counts */
.summary-main .info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.2rem;
}
/* Ensure info row spans the full width of the main column */
.summary-main .info-row span {
  white-space: nowrap;
}

/* Return toggle button per card */
.return-toggle {
  background: none;
  border: none;
  color: #e20613;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}
.return-toggle:hover {
  color: #b80a10;
}

/* Additional info inside summary: duration, transfers, stops, route codes and badges */
.summary-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #555;
}

.summary-info .badge {
  background-color: #e20613;
  color: #fff;
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.badge.fastest {
  background-color: #007bff;
}

.badge.fewest {
  background-color: #009688;
}

/* Share button inside result card */
.share-btn {
  background-color: transparent;
  color: #e20613;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0.25rem 0.5rem;
}

.share-btn:hover {
  text-decoration: none;
}

/* Return journey toggle button */
.return-btn {
  margin-top: 0.75rem;
  background-color: #e20613;
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.return-btn:hover {
  background-color: #b80a10;
}

/* Summary toggle now consists of a button containing an arrow icon and a text label.  Align items
   horizontally and allow only the arrow to rotate on expansion. */
.summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  /* Increase font size to align with arrival text (0.95rem) and provide
     a slightly lower vertical position.  The larger font improves
     readability and matches the prominence of the arrival estimate on
     the left. */
  font-size: 0.95rem;
  padding: 0;
  /* Add a small top margin so the "Show details" label and arrow sit
     slightly lower relative to the main summary line.  This aligns
     the baseline with the arrival estimate for a more balanced look. */
  margin-top: 0.25rem;
}
/* Arrow icon rotates when the card is expanded */
.summary-toggle .arrow-icon {
  /* Increase the arrow icon slightly to harmonise with the larger
     toggle label. */
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.result-card.expanded .summary-toggle .arrow-icon {
  transform: rotate(180deg);
}
.summary-toggle .toggle-label {
  /* Match the label size to the main toggle font for consistency */
  font-size: 0.95rem;
  color: #555;
}

/* Container on the right of the summary row to hold return toggle and arrow */
.summary-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Return button inside summary controls */
.summary-controls .return-toggle {
  background-color: #e20613;
  color: #fff;
  border: none;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.summary-controls .return-toggle:hover {
  background-color: #b80a10;
}

/* Hide the per‑result return toggle and its pop‑up completely.  The return
   journey selection should be made only via the global search form. */
.summary-controls .return-toggle,
.summary-controls .return-popup {
  display: none !important;
}

/* Highlight the return journey section in the results list.  When the
   return results container has content (i.e. the user has added a
   return journey), apply a red border and some padding to draw
   attention.  The border uses the Deutsche Bahn red (#e20613) but
   leaves the interior transparent. */
#return-results-container:not(:empty) {
  border: 2px solid #e20613;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}

/* Style for the return journey summary line in the results header.  When
   a return connection is present, the second line in the #results-info
   element (containing the return date/time) is wrapped in a span with
   class .return-info by the script.  Apply a red border and slight
   padding to this span to emphasise the return journey without filling
   the background.  Display inline-block ensures the border surrounds
   only the return text. */
#results-info .return-info {
  display: inline-block;
  border: 2px solid #e20613;
  border-radius: 0.25rem;
  padding: 0.1rem 0.4rem;
  margin-left: 0.3rem;
  font-size: inherit;
}

/* Right-hand column within a result summary.  This column holds
   additional information and controls on two rows and is
   separated from the main summary by a vertical line. */
.summary-right {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 1rem;
  border-left: 1px solid #ddd;
}

/* Layout for info and controls inside the right-hand column */
.summary-right .summary-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.summary-right .summary-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background-color: #fafafa;
  border-top: 1px solid #eee;
}

/* Horizontal route bar displayed in result summary.  Each segment
   represents one leg of the journey and is colour‑coded according
   to the route. */
.route-bar {
  display: flex;
  width: 100%;
  margin-top: 0.4rem;
}
.route-bar .route-segment {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  height: 18px;
  line-height: 18px;
  /* Add a small gap between segments.  This margin visually
     separates adjacent codes without breaking the sense of a single bar. */
  margin-right: 4px;
  /* Remove the internal border between segments since the margin creates the separation */
  border-right: none;
  text-transform: uppercase;
  /* remove default padding so segments align neatly */
  padding: 0;
}
.route-bar .route-segment:last-child {
  /* Remove margin on the last segment to align flush with the right edge */
  margin-right: 0;
}
.route-bar .route-segment:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.route-bar .route-segment:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Route code badges inside summary info */
.route-code-badge {
  background-color: #ececec;
  color: #333;
  border: 1px solid #ccc;
}

/* Full route name next to code in details */
.route-fullname {
  font-size: 1rem;
  color: #333;
  margin-left: 0.4rem;
  font-weight: 600;
  font-style: normal;
}

/* About page projects table styling */
.about .projects {
  width: 100%;
  max-width: 600px;
  margin-top: 1rem;
  border-collapse: collapse;
}
.about .projects th,
.about .projects td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  font-size: 0.9rem;
}
.about .projects th {
  background-color: #f0f0f0;
  font-weight: 600;
  text-align: left;
}
.about .projects tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.result-card.expanded .details {
  /* A sufficiently large max-height to allow content to show. */
  max-height: 1000px;
}

.details .segment {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-start;
}

.details .segment:last-child {
  border-bottom: none;
}

.segment-line {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 0.75rem;
}

.segment-line .circle {
  /* Hide the circles in the segment header to avoid duplicated markers.
     The timeline bullets are rendered separately via the stops list.
  */
  display: none;
}

.segment-line .line {
  flex: 1;
  width: 2px;
  background-color: #999;
}

.segment-content {
  flex: 1;
}

.segment-content .segment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

/* The route code and full name sit on the left and expand, while the
   time range aligns to the right. */
.segment-content .segment-header .route-code {
  margin-right: 0.5rem;
}
.segment-content .segment-header .route-fullname {
  flex: 1;
}
.segment-content .segment-header .segment-time {
  margin-left: auto;
  font-size: 0.85rem;
  color: #666;
}

.segment-content .segment-header .route-code {
  font-weight: bold;
  color: #fff;
  background-color: #e20613;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

.segment-content .segment-header .segment-time {
  font-size: 0.85rem;
  color: #555;
  font-weight: 600;
}

.segment-content .segment-stops {
  /* no longer used */
}

/* Stops list in details */
.stops-list {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
}

.stops-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  color: #333;
}

.stops-list li .stop-bullet {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  /* Use a neutral grey for the timeline bullets to align with DB’s
     subdued itinerary line styling. */
  background-color: #999;
}

.stops-list li .stop-time {
  font-weight: bold;
  margin-right: 0.5rem;
}

.stops-list li .stop-name {
  color: #333;
}

/* Platform indicator shown after stop name */
.stop-platform {
  font-size: 0.75rem;
  color: #777;
  margin-left: 0.35rem;
}

/* Walk row inserted between legs in the itinerary.  Displays a
   coloured bullet and walking duration. */
.walk-row {
  display: flex;
  align-items: center;
  margin-left: 1.8rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: #666;
}
.walk-row .walk-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #e20613;
  display: inline-block;
  margin-right: 0.6rem;
}

/* Itinerary heading within details */
.itinerary-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e20613;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid #eee;
  background-color: #f9f9f9;
}

/* Results info block for selected departure time */
.results-info {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #e20613;
}

/* About page styles */
.about {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.about h1 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #e20613;
}
.about p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Passengers field styling */
.form-field.passengers-field label {
  display: block;
}

/* Return journey section */
#return-fields {
  display: none;
  margin-top: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

#return-fields.active {
  display: grid;
}

/* Loading overlay shown during searches.  It covers the entire viewport
   with a semi-transparent background and displays a spinning loader
   in the centre.  The overlay becomes visible when the .active
   class is applied. */
.loading-overlay {
  /* Cover only the results area rather than the entire viewport.  Use
     absolute positioning so it can live inside the results container. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use a solid white background to avoid showing underlying content */
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.spinner {
  border: 4px solid #ccc;
  border-top: 4px solid #e20613;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* Heading for return results section to distinguish it from the outbound results */
.results-return-heading {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: #e20613;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .search-btn {
    grid-column: span 1;
  }
  .results-header form {
    grid-template-columns: 1fr;
  }
  .result-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .summary-info {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Improve navigation layout on small screens.  Stack elements vertically
     to avoid overflow and hide the tagline to save space. */
  .navbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .logo-area, .nav-right {
    width: 100%;
    justify-content: space-between;
  }
  .primary-nav {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    gap: 1rem;
  }
  .nav-right {
    justify-content: center;
    margin-top: 0.5rem;
  }
  .nav-tagline {
    display: none;
  }
}

/* Advertisement section on the home and search pages.  Presents a row
   of promotional banners styled similarly to DB’s site. */
.ads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.ads .ad-item {
  position: relative;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* Make the third advertisement span two columns on wider screens to
   emphasise the ICE line construction message.  On small screens
   (mobile) the grid collapses to one column so the rule has no
   effect. */
.ads .ad-item:nth-child(3) {
  grid-column: span 2;
}
.ads .ad-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}
.ads .ad-item .ad-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  z-index: 2;
}
.ads .ad-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.ads .ad-item p {
  font-size: 0.9rem;
}

/* Pop‑up panels for selecting date/time on both home and results pages.
   These panels are positioned relative to their parent .db-item so
   they appear directly below the summary row when activated. */
.date-popup,
.return-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  min-width: 200px;
}
.date-popup input,
.return-popup input {
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.9rem;
}
.date-popup button,
.return-popup button {
  background-color: #e20613;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.date-popup button:hover,
.return-popup button:hover {
  background-color: #b80a10;
}

/* Warning message below the search form on the results page.  This text
   informs the user about the imprecision of timing due to varying train
   frequencies and the absence of waiting time calculations. */
.results-warning {
  margin-top: 0.5rem;
  /* Reduce warning text size so it does not dominate the results page */
  font-size: 0.9rem;
  color: #444;
  line-height: 1.3;
}

/*
 * Custom sizing and layout adjustments for the search results page.
 * The station names should not overpower the journey duration, and the
 * total duration should stand out relative to the arrival estimate.
 * These rules override earlier definitions for the summary section.
 */
.summary-main .stations {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

/* Combined row for total duration and estimated arrival.  Display the
   duration and arrival on a single line with appropriate spacing. */
.summary-main .duration-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Total duration styling: make the number larger and bold to emphasise
   the overall journey time. */
.summary-main .duration-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e20613;
}

/* Estimated arrival styling: slightly smaller and muted to provide
   secondary emphasis next to the total duration. */
.summary-main .arrival-est {
  font-size: 0.95rem;
  color: #555;
}