/* DF GoFly Itinerary Timeline v1.0.5 */

.df-itinerary-title{
  margin: 0 0 14px 0;
}

.df-itinerary-wrap{
  --df-itinerary-accent: var(--e-global-color-primary, var(--primary-color, var(--theme-primary, #ff4d4d)));
  --df-itinerary-stop-bg: var(--e-global-color-secondary, var(--secondary-color, #0b1b39));
  --df-itinerary-line: color-mix(in srgb, var(--df-itinerary-accent) 55%, transparent);
  --df-itinerary-card: #ffffff;
  --df-itinerary-card-muted: rgba(0,0,0,.025);
  --df-itinerary-text: inherit;
  --df-itinerary-radius: 14px;
  --df-itinerary-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.df-itinerary-group-title{
  margin: 60px 0 20px 0;
}

.df-itinerary{
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 66px;
}

.df-itinerary:before{
  content: "";
  position: absolute;
  left: 30px;
  top: 4px;
  bottom: 4px;
  width: 8px;
  background:
    radial-gradient(circle, var(--df-itinerary-line) 2px, transparent 2.2px)
    center/10px 12px repeat-y;
}

.df-itinerary-step{
  position: relative;
  border-radius: var(--df-itinerary-radius);
  background: var(--df-itinerary-card);
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--df-itinerary-shadow);
}

.df-itinerary-step.df-type-journey{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.df-itinerary-summary{
  list-style: none;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Journey rows should read like “between stops” */
.df-itinerary-step.df-type-journey .df-itinerary-summary{
  cursor: default;
  padding-left: 0;
  opacity: .92;
}

.df-itinerary-step > summary::-webkit-details-marker{ display:none; }
.df-itinerary-step > summary{ list-style:none; }

.df-itinerary-icon{
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--df-itinerary-stop-bg);
  border: 0;
  margin-left: -78px; /* pull onto the timeline */
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  color: #fff;
}

.df-itinerary-step.df-type-journey .df-itinerary-icon{
  width: 32px;
  height: 32px;
  margin-left: -75px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
  color: var(--df-itinerary-accent);
}

.df-itinerary-icon svg{
  fill: currentColor;
  width: 20px;
  height: 20px;
}

.df-itinerary-step.df-type-journey .df-itinerary-icon svg{
  width: 18px;
  height: 18px;
}

.df-itinerary-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
}

.df-itinerary-label{
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.02rem;
}

.df-itinerary-label span{ display: inline-block; opacity: .85; }
.df-itinerary-label span strong{ display:block; opacity: 1; font-weight: 800; margin-top: 2px; }
.df-itinerary-label strong{ font-weight: 800; }

.df-itinerary-duration{
  font-size: 0.92em;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--df-itinerary-accent) 15%, transparent);
  color: color-mix(in srgb, var(--df-itinerary-accent) 88%, #000 12%);
  font-weight: 700;
}

.df-itinerary-step.df-type-journey .df-itinerary-head{
  display: grid;
  gap: 4px;
  justify-content: start;
}

.df-itinerary-step.df-type-journey .df-itinerary-label{
  font-size: 1.02rem;
  font-weight: 750;
}

.df-itinerary-step.df-type-journey .df-itinerary-duration{
  padding: 0;
  background: transparent;
  color: rgba(0,0,0,.65);
  font-weight: 600;
}

.df-itinerary-toggle{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  opacity: .7;
  margin-top: 2px;
}

.df-itinerary-toggle:before{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

details[open] > summary .df-itinerary-toggle:before{
  transform: rotate(45deg);
}

.df-itinerary-body{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .95;
}

/* Make stop descriptions feel like part of the timeline (closer to competitor look) */
.df-itinerary-body{
  font-size: 0.98rem;
  color: rgba(0,0,0,.78);
}

/* Journey rows: give a soft “pill” feel without being a full card */
.df-itinerary-step.df-type-journey{
  border-radius: 12px;
}
.df-itinerary-step.df-type-journey .df-itinerary-summary{
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--df-itinerary-accent) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--df-itinerary-accent) 35%, rgba(0,0,0,.10));
}

/* Mobile tweaks */
@media (max-width: 520px){
  .df-itinerary{ padding-left: 62px; gap: 12px; }
  .df-itinerary:before{ left: 28px; }
  .df-itinerary-icon{ margin-left: -76px; }
  .df-itinerary-step.df-type-journey .df-itinerary-icon{ margin-left: -73px; }
}



/* Start + end pins should use Elementor Primary */
.df-itinerary-step.is-start .df-itinerary-icon,
.df-itinerary-step.is-end .df-itinerary-icon{
  background: var(--df-itinerary-accent);
  border-color: var(--df-itinerary-accent);
  color: #fff;
}