/* Itinerary connector — reusable route visualization component
 *
 * Usage:
 *   Horizontal (default):  .itinerary-connector > .itinerary-connector-dot-open + .itinerary-connector-dash + .itinerary-connector-dot-filled
 *   Vertical:              .itinerary-connector.itinerary-connector-vertical > …
 */

.itinerary-connector {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.itinerary-connector-vertical {
    flex-direction: column;
}

.itinerary-connector-dot-open {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    border: .1rem solid var(--bs-secondary-color);
    flex-shrink: 0;
}

.itinerary-connector-dot-filled {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--bs-secondary-color);
    flex-shrink: 0;
}

/* Horizontal dash (default) */
.itinerary-connector-dash {
    flex: 1;
    border-top: .1rem dotted var(--bs-border-color);
}

/* Travel method circle — centered on the connector line */
.itinerary-connector-method {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: .1rem solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Vertical dash */
.itinerary-connector-vertical .itinerary-connector-dash {
    border-top: none;
    border-left: .1rem dotted var(--bs-border-color);
    min-height: 1.5rem;
}