/* Combined compact Waxholmsbolaget + Stavsnäs Båttaxi widget. */
.ido-transport-compact {
  position: relative;
}

.ido-transport-compact-sources {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.ido-transport-compact .ido-boat-compact-times-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ido-transport-compact .ido-transport-time-pill {
  width: 100%;
  min-width: 0;
  min-height: 0px;
  padding: 2px 8px;
  background: var(--color_theme_lighter, #f1f5f2) !important;
  border: 1px solid var(--ido-border, rgba(30, 62, 82, 0.16));
  border-radius: 999px;
  color: var(--ido-blue, #1e3e52);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 600 !important;
  /* letter-spacing: -0.02em; */
  text-decoration: none !important;
}

.ido-transport-compact a.ido-transport-time-pill:hover,
.ido-transport-compact a.ido-transport-time-pill:focus {
  color: var(--ido-blue, #1e3e52);
  border-color: var(--ido-blue, #1e3e52);
  text-decoration: none !important;
}

.ido-transport-compact .ido-transport-time-pill.has-low-seats {
  border-style: dashed;
}

.ido-transport-compact-meta {
  min-height: 0;
  margin-top: 10px;
  color: var(--ido-muted, #5f6262);
  font-size: 13px;
  line-height: 1.35;
}

.ido-transport-compact-meta:empty {
  display: none;
}

.ido-transport-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ido-muted, #5f6262);
  font: inherit;
  font-weight: 400;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .ido-transport-compact .ido-boat-compact-times-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ido-transport-compact .ido-boat-compact-times-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .ido-transport-compact .ido-transport-time-pill {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 15px;
  }
}

/* Provider colors and progressive loading */
.ido-transport-compact .ido-transport-time-pill--battaxi {
  background: #ee193914 !important;
  border-color: #ee1939 !important;
  color: #000 !important;
}

.ido-transport-compact .ido-transport-time-pill--waxholm {
  background: #027bb70a !important;
  border-color: #027bb7 !important;
  color: #000 !important;
}

.ido-transport-compact a.ido-transport-time-pill--battaxi:hover,
.ido-transport-compact a.ido-transport-time-pill--battaxi:focus {
  background: #ee193924 !important;
  border-color: #ee1939 !important;
  color: #000 !important;
}

.ido-transport-provider-loading {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 36px;
  color: var(--ido-muted, #5f6262);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
}

.ido-transport-provider-loading .ido-boat-loader {
  margin-left: 4px;
}

.ido-transport-provider-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  color: var(--ido-muted, #5f6262);
  font-size: 12px;
  line-height: 1.35;
}

.ido-transport-provider-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ido-transport-provider-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
}

.ido-transport-provider-dot--waxholm {
  background: #027bb7;
}

.ido-transport-provider-dot--battaxi {
  background: #ee1939;
}


/* Provider information shown on separate rows */
.ido-transport-provider-info {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ido-transport-provider-info-row {
  padding-left: 10px;
  border-left: 2px solid transparent;
  color: var(--ido-muted, #5f6262);
  font-size: 12px;
  line-height: 1;
}

.ido-transport-provider-info-row strong {
  display: block;
  margin-bottom: 2px;
  color: #000;
  font-weight: 500;
}

.ido-transport-provider-info-row--waxholm {
  border-left-color: #027bb7;
}

.ido-transport-provider-info-row--battaxi {
  border-left-color: #ee1939;
}

.ido-transport-provider-price {
  display: block;
  margin-top: 2px;
  color: #000;
}

.ido-transport-provider-price[hidden],
.ido-transport-waxholm-loading[hidden] {
  display: none !important;
}

.ido-transport-waxholm-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--ido-muted, #5f6262);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
}


.ido-transport-provider-info {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ido-transport-provider-note {
    font-size: .92rem;
    color: var(--ido-muted,#5f6262);
    margin-top: 4px;
}

.ido-transport-provider-info-row {
    font-size: 1rem;
    line-height: 1.1;
}

.ido-boat-compact-card--waxholm,
.ido-boat-compact-card--stavsnas {
    height: auto;
}

.ido-transport-provider-info-row--waxholm {
    border: 1px solid #027bb7;
    border-left: 4px solid #027bb7;
    background: #eff3f5;
    padding: 5px 10px;
    border-radius: 4px;
}

.ido-transport-provider-info-row--battaxi {
    border: 1px solid #ee1939;
    border-left: 4px solid #ee1939;
    padding: 5px 10px;
    border-radius: 4px;
}

/* Combined transport: clean provider styling */
.ido-transport-compact .ido-transport-time-pill--waxholm,
.ido-transport-compact .ido-transport-time-pill--battaxi {
  background: none !important;
  border-color: transparent !important;
  position: relative;
  padding-left: 15px !important;
}
.ido-transport-compact .ido-transport-time-pill--waxholm:after,
.ido-transport-compact .ido-transport-time-pill--battaxi:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #027bb7 !important;
    border-radius: 999px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ido-transport-compact .ido-transport-time-pill--battaxi:after {
  background: #ee1939 !important;
}

.ido-transport-compact a.ido-transport-time-pill--battaxi:hover,
.ido-transport-compact a.ido-transport-time-pill--battaxi:focus {
  background: #fff3f5 !important;
  border-color: #ee1939 !important;
  color: #000 !important;
}

.ido-transport-provider-info {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.ido-transport-provider-info-row {
  padding: 8px 10px;
  border: 1px solid rgba(30, 62, 82, 0.14);
  border-left-width: 3px;
  border-radius: 4px;
  background: #fff;
  color: var(--ido-muted, #5f6262);
  font-size: 0.9rem;
  line-height: 1.3;
}

.ido-transport-provider-info-row strong {
  display: block;
  margin-bottom: 3px;
  color: #000;
  font-weight: 500;
}

.ido-transport-provider-info-row--waxholm {
  border-left-color: #027bb7;
}

.ido-transport-provider-info-row--battaxi {
  border-left-color: #ee1939;
}

.ido-transport-provider-price {
  display: block;
  margin-top: 4px;
  color: #000;
  font-size: 0.88rem;
  font-weight: 500;
}

.ido-transport-provider-note {
  margin: 0;
  color: var(--ido-muted, #5f6262);
  font-size: 0.85rem;
  line-height: 1.25;
}

.ido-transport-provider-note strong {
  color: #000;
  font-weight: 600;
}


.ido-transport-provider-info-row.ido-transport-provider-info-row--waxholm,
.ido-transport-provider-info-row.ido-transport-provider-info-row--battaxi {position: relative;}
/* .ido-transport-provider-info-row.ido-transport-provider-info-row--waxholm:before,
.ido-transport-provider-info-row.ido-transport-provider-info-row--battaxi:before {

    content: "";
    position: absolute;
    top: 13px;
    left: -3px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fdcb00 !important;
    border-radius: 999px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ido-transport-provider-info-row.ido-transport-provider-info-row--battaxi:before {
    background: #fff !important;
    border: 1px solid #222020;
    border-left: none;
} */

/* Combined header timetable */
#notification_header .ido-transport-hero-battaxi-time,
#notification_header .ido-transport-hero-waxholm-time {
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap;
}

#notification_header .ido-transport-hero-battaxi-time {
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(255, 255, 255, .55);
}

#notification_header .ido-transport-hero-battaxi-time:hover,
#notification_header .ido-transport-hero-battaxi-time:focus {
  color: inherit !important;
  border-bottom-color: currentColor;
  text-decoration: none !important;
}

#notification_header .ido-transport-hero [data-transport-hero-to],
#notification_header .ido-transport-hero [data-transport-hero-from] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1599.98px) {
  #notification_header .ido-transport-hero .ido-boat-hero-time--from {
    display: none !important;
  }
}


/* =========================================================
   Combined full timetable
   ========================================================= */
.ido-transport-full {
  --transport-waxholm: #027bb7;
  --transport-battaxi: #ee1939;
}

.ido-transport-full-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
}

.ido-transport-full-header h3 {
  margin-bottom: 5px;
}

.ido-transport-full-intro {
  margin: 0;
  max-width: 720px;
}

.ido-transport-full-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ido-transport-full-tabs .ido-boat-direction-tab {
  width: 100%;
  font-weight: 500;
}

.ido-transport-full-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.ido-transport-full-date-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: end;
}

.ido-transport-full-date-step {
  width: 38px;
  height: 48px;
  border: 1px solid var(--ido-border, rgba(30,62,82,.16));
  border-radius: 8px;
  background: #fff;
  color: var(--ido-blue, #1e3e52);
}

.ido-transport-full-date-step:hover {
  background: var(--color_theme_lighter, #eff3f5);
}

.ido-transport-full-control {
  position: relative;
  display: block;
}

.ido-transport-full-control > span {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: -7px;
  padding: 0 4px;
  background: #fff;
  color: var(--ido-muted, #5f6262);
  font-size: 12px;
  line-height: 1;
}

.ido-transport-full-control input,
.ido-transport-full-control select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--ido-border, rgba(30,62,82,.16));
  border-radius: 8px;
  background-color: #fff;
  padding: 11px 12px;
}

.ido-transport-full-control select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231e3e52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
}

.ido-transport-full-route {
  margin: 16px 0 8px;
  font-weight: 500;
}

.ido-transport-full-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
  color: var(--ido-muted, #5f6262);
}

.ido-transport-full-status[hidden] {
  display: none !important;
}

.ido-transport-full-results {
  display: grid;
  gap: 8px;
}

.ido-transport-full-departure {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(30,62,82,.12);
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: #fff;
}

.ido-transport-full-departure--waxholm {
  border-left-color: var(--transport-waxholm);
}

.ido-transport-full-departure--battaxi {
  border-left-color: var(--transport-battaxi);
}

.ido-transport-full-departure-time {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 600;
  color: #000;
}

.ido-transport-full-departure-provider {
  display: block;
  font-weight: 500;
}

.ido-transport-full-departure-meta {
  margin-top: 3px;
  color: var(--ido-muted, #5f6262);
  font-size: .9rem;
  line-height: 1.25;
}

.ido-transport-full-departure-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ido-transport-full-book {
  white-space: nowrap;
}

.ido-transport-full-source-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #027bb70a;
  border: 1px solid rgba(2,123,183,.35);
  color: #000;
  font-size: 12px;
  font-weight: 500;
}

.ido-transport-full-empty {
  margin: 0;
  padding: 14px 0;
}

.ido-transport-full-provider-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ido-transport-full-provider {
  padding: 12px 14px;
  border: 1px solid rgba(30,62,82,.12);
  border-radius: 8px;
  background: #fff;
}

.ido-transport-full-provider-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ido-transport-full-provider-title strong {
  font-weight: 500;
}

.ido-transport-full-provider-mark {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

.ido-transport-full-provider--waxholm .ido-transport-full-provider-mark {
  background: var(--transport-waxholm);
}

.ido-transport-full-provider--battaxi .ido-transport-full-provider-mark {
  background: var(--transport-battaxi);
}

.ido-transport-full-provider p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.35;
}

.ido-transport-full-fares {
  font-weight: 500;
  color: #000;
}

.ido-transport-full-fares[hidden] {
  display: none !important;
}

.ido-transport-full-note {
  margin: 8px 0 0;
  color: var(--ido-muted, #5f6262);
  font-size: .9rem;
}

@media (max-width: 767.98px) {
  .ido-transport-full-controls,
  .ido-transport-full-provider-info {
    grid-template-columns: 1fr;
  }

  .ido-transport-full-departure {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .ido-transport-full-departure-action {
    grid-column: 2;
    justify-content: flex-start;
  }

  .ido-transport-full-date-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .ido-transport-full-date-step {
    width: 34px;
  }
}


/* =========================================================
   Full combined – classic Waxholm layout
   Keep the original full-widget composition.
   ========================================================= */

.ido-transport-full.ido-boat-full {
  --transport-waxholm: #027bb7;
  --transport-battaxi: #ee1939;
}

.ido-transport-full .ido-transport-full-alert {
  background: var(--color_theme_lighter);
  border-color: transparent;
  color: inherit;
}

/* Reuse the original full widget form box: everything stacked cleanly. */
.ido-transport-full .ido-transport-full-form-box {
  display: block;
}

.ido-transport-full .ido-transport-full-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.ido-transport-full .ido-transport-full-tabs .ido-boat-tab {
  width: 100%;
  font-weight: 500;
}

/* Date stays on its own row with compact side arrows. */
.ido-transport-full .ido-transport-full-date-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 12px;
}

.ido-transport-full .ido-transport-full-date-row > button {
  width: 38px;
  min-width: 38px;
}

.ido-transport-full .ido-transport-full-date-row label {
  width: 100%;
  min-width: 0;
}

/* Pier selector gets its own full-width row, as in the old widget. */
.ido-transport-full .ido-transport-full-station-row {
  width: 100%;
  margin: 0;
}

.ido-transport-full .ido-transport-full-station-row label,
.ido-transport-full .ido-transport-full-station-row select {
  width: 100%;
}

.ido-transport-full .ido-transport-full-route {
  margin: 16px 0 8px;
  font-weight: 500;
}

/* Results remain inside the same main container. */
.ido-transport-full .ido-transport-full-results {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ido-transport-full .ido-transport-full-departure {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(30, 62, 82, .12);
  border-left: 3px solid transparent;
  border-radius: 7px;
  background: rgba(255,255,255,.55);
}

.ido-transport-full .ido-transport-full-departure--waxholm {
  border-left-color: var(--transport-waxholm);
}

.ido-transport-full .ido-transport-full-departure--battaxi {
  border-left-color: var(--transport-battaxi);
}

.ido-transport-full .ido-transport-full-departure-time {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
}

.ido-transport-full .ido-transport-full-departure-provider {
  font-weight: 500;
}

.ido-transport-full .ido-transport-full-departure-meta {
  margin-top: 3px;
  color: var(--ido-muted, #5f6262);
  font-size: .9rem;
  line-height: 1.25;
}

/* Provider information is still inside the same outer container,
   but visually lighter than the first full-version experiment. */
.ido-transport-full .ido-transport-full-provider-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}

.ido-transport-full .ido-transport-full-provider {
  padding: 10px 12px;
  border: 1px solid rgba(30,62,82,.12);
  border-radius: 7px;
  background: transparent;
}

.ido-transport-full .ido-transport-full-provider--waxholm {
  border-left: 3px solid var(--transport-waxholm);
}

.ido-transport-full .ido-transport-full-provider--battaxi {
  border-left: 3px solid var(--transport-battaxi);
}

.ido-transport-full .ido-transport-full-provider-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.ido-transport-full .ido-transport-full-provider-mark {
  display: none;
}

.ido-transport-full .ido-transport-full-provider p {
  margin: 0 0 8px;
  font-size: .95rem;
  line-height: 1.35;
}

.ido-transport-full .ido-transport-full-provider p:last-child {
  margin-bottom: 0;
}

.ido-transport-full .ido-transport-full-note {
  margin: 8px 0 0;
  color: var(--ido-muted, #5f6262);
  font-size: .9rem;
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-date-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .ido-transport-full .ido-transport-full-date-row > button {
    width: 34px;
    min-width: 34px;
  }

  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .ido-transport-full .ido-transport-full-departure-action {
    grid-column: 2;
    justify-content: flex-start;
  }
}


/* =========================================================
   Transport refinements v4
   ========================================================= */

/* Compact combined widget */
.ido-transport-compact {
  padding-bottom: 28px !important;
}

.ido-transport-compact-route {
  margin: 12px 0 8px;
  color: #000;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 500;
}

.ido-transport-provider-loading--waxholm {
  color: var(--ido-muted, #5f6262);
}

.ido-transport-provider-price {
  display: block;
  margin-top: 6px;
  color: #000;
  font-size: .92rem;
  line-height: 1.3;
}

/* Full widget route heading: closer to the original Waxholm table. */
.ido-transport-full .ido-transport-full-route-heading {
  margin: 22px 0 10px;
}

.ido-transport-full .ido-transport-full-route-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--ido-muted, #5f6262);
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 500;
}

.ido-transport-full .ido-transport-full-route-heading h4 {
  margin: 0;
  color: var(--ido-blue, #1e3e52);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.05;
  font-weight: 500;
}

/* One clean table shell instead of a colored border per row. */
.ido-transport-full .ido-transport-full-results {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 62, 82, .16);
  border-radius: 14px;
  background: #fff;
}

.ido-transport-full .ido-transport-full-departure,
.ido-transport-full .ido-transport-full-departure--waxholm,
.ido-transport-full .ido-transport-full-departure--battaxi {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: #fff;
}

.ido-transport-full .ido-transport-full-departure + .ido-transport-full-departure {
  border-top: 1px solid rgba(30, 62, 82, .12) !important;
}

.ido-transport-full .ido-transport-full-departure-time {
  display: inline-flex;
  align-items: flex-start;
  min-width: 0;
  color: var(--ido-blue, #1e3e52);
  font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  line-height: .92;
  font-weight: 600;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.ido-transport-full-departure-star {
  position: relative;
  top: -.15em;
  margin-left: 2px;
  font-size: .48em;
  line-height: 1;
}

.ido-transport-full-departure-provider-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ido-transport-full .ido-transport-full-departure-provider {
  min-width: 0;
  color: #000;
  font-weight: 500;
  line-height: 1.15;
}

/* Small flag inspired by the line-number flag reference image. */
.ido-transport-provider-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 46px;
  height: 30px;
  padding: 0 12px 0 9px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  color: #fff;
  font-size: .82rem;
  line-height: 1;
  font-weight: 600;
}

.ido-transport-provider-flag--waxholm {
  background: #027bb7;
}

.ido-transport-provider-flag--battaxi {
  background: #ee1939;
}

.ido-transport-full .ido-transport-full-departure-meta {
  margin-top: 5px;
  color: var(--ido-muted, #5f6262);
  font-size: .95rem;
  line-height: 1.25;
}

.ido-transport-full .ido-transport-full-source-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid rgba(2,123,183,.28);
  border-radius: 999px;
  background: #027bb70a;
  color: #000;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}

.ido-transport-full .ido-transport-full-book {
  white-space: nowrap;
}

.ido-transport-full-waxholm-loading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  min-height: 58px;
  padding: 14px 20px;
  border-top: 1px solid rgba(30, 62, 82, .12);
  color: var(--ido-muted, #5f6262);
  font-size: .95rem;
  font-weight: 400;
}

/* Provider cards below the main white timetable. */
.ido-transport-full-provider-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.ido-transport-full-provider {
  border: 1px solid rgba(30,62,82,.14) !important;
  border-left: 0 !important;
  border-radius: 10px;
  background: transparent;
  padding: 16px 18px;
}

.ido-transport-full-provider-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.ido-transport-full-provider-title .ido-transport-provider-flag {
  min-width: 42px;
  height: 27px;
  font-size: .75rem;
}

.ido-transport-full-price-note,
.ido-transport-full-fares {
  margin-top: 8px !important;
  color: #000;
  font-weight: 500;
}

@media (min-width: 600px) {
  .ido-transport-full-provider-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure,
  .ido-transport-full .ido-transport-full-departure--waxholm,
  .ido-transport-full .ido-transport-full-departure--battaxi {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 14px;
  }

  .ido-transport-full .ido-transport-full-departure-time {
    font-size: clamp(1.85rem, 10vw, 2.55rem);
  }

  .ido-transport-full .ido-transport-full-departure-action {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .ido-transport-full-departure-provider-line {
    align-items: flex-start;
    gap: 7px;
  }

  .ido-transport-provider-flag {
    min-width: 40px;
    height: 26px;
    padding-left: 7px;
    padding-right: 10px;
    font-size: .72rem;
  }
}


/* Header direction labels for combined timetable */
#notification_header .ido-transport-hero-direction-label {
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  white-space: nowrap;
  margin-right: 1px;
}

/* Slightly smaller full timetable times */
.ido-transport-full .ido-transport-full-departure-time {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure-time {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}


/* =========================================================
   v6 refinements
   ========================================================= */

/* Full route title/subtitle more compact */
.ido-transport-full .ido-transport-full-route-kicker {
  font-size: 1rem;
  line-height: 1.15;
}

.ido-transport-full .ido-transport-full-route-header h4,
.ido-transport-full [data-transport-full-route] {
  font-size: 1.15rem;
  line-height: 1.2;
}

/* Full timetable times smaller */
.ido-transport-full .ido-transport-full-departure-time {
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.02em;
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure-time {
    font-size: 1.4rem;
  }
}

/* Active "Till ön / Från ön" uses the lighter theme color */
.ido-transport-full .ido-boat-tab.is-active {
  background: var(--color_theme_lighter) !important;
  border-color: var(--color_theme_lighter) !important;
  color: var(--ido-blue, #1e3e52) !important;
}

.ido-transport-full .ido-boat-tab.is-active span strong,
.ido-transport-full .ido-boat-tab.is-active i {
  color: var(--ido-blue, #1e3e52) !important;
}

/* Båttaxi line dots.
   Send me the exact three colors and only these variables need changing. */
.ido-transport-full,
.ido-transport-full-provider-info {
  --btx-line-namdo: #444bdc;
  --btx-line-runmaro: #ffe500;
  --btx-line-bullero: #4b8c1e;
}

.ido-transport-line-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #9aa0a3;
}

.ido-transport-line-dot--namdo {
  background: var(--btx-line-namdo);
}

.ido-transport-line-dot--runmaro {
  background: var(--btx-line-runmaro);
}

.ido-transport-line-dot--bullero {
  background: var(--btx-line-bullero);
}

.ido-transport-line-dot--other {
  background: #9aa0a3;
}

.ido-transport-full-departure-provider-line .ido-transport-line-dot {
  margin-right: 2px;
}

.ido-transport-battaxi-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 6px;
  margin: 0px 0 10px;
  font-size: .95rem;
  line-height: 1.3;
}

.ido-transport-battaxi-lines > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* =========================================================
   v7 full timetable layout corrections
   ========================================================= */

.ido-transport-full .ido-transport-full-departure {
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  column-gap: 14px;
  align-items: center;
}

.ido-transport-full .ido-transport-full-departure-time {
  width: auto !important;
  min-width: 0 !important;
  font-size: 1.35rem !important;
  white-space: nowrap;
}

.ido-transport-full .ido-transport-full-departure-main {
  min-width: 0;
}

.ido-transport-full .ido-transport-full-departure-provider-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.ido-transport-full .ido-transport-full-departure-provider {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.ido-transport-full .ido-transport-full-departure-action {
  width: auto;
  min-width: max-content;
  justify-self: end;
}

.ido-transport-full-provider-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.ido-transport-full-provider-icons .ido-transport-line-dot {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 10px;
  }

  .ido-transport-full .ido-transport-full-departure-time {
    font-size: 1.25rem !important;
  }

  .ido-transport-full .ido-transport-full-departure-action {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
  }
}


/* v11: line dot belongs directly to the line name */
.ido-transport-full-line-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
  font-size: .9rem;
  line-height: 1.15;
  white-space: nowrap;
}

.ido-transport-full-line-name::before {
  content: "·";
  margin-right: 1px;
  color: currentColor;
}

.ido-transport-battaxi-lines > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
}

.ido-transport-battaxi-lines > a:hover {
  text-decoration: underline !important;
}


/* v12: both provider actions use the same compact badge treatment */
.ido-transport-full .ido-transport-full-source-link {
  cursor: pointer;
  text-decoration: none !important;
}

.ido-transport-full .ido-transport-full-source-link:hover {
  background: rgba(30,62,82,.05);
  color: #000 !important;
  text-decoration: none !important;
}

/* =========================================================
   v18 – compact provider lines + smaller full typography
   ========================================================= */

/* Share the three Stavsnäs line colors with the compact provider info too. */
.ido-transport-provider-info {
  --btx-line-namdo: #444bdc;
  --btx-line-runmaro: #ffe500;
  --btx-line-bullero: #4b8c1e;
}

.ido-transport-battaxi-lines--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  margin: 3px 0 4px;
  font-size: .92rem;
  line-height: 1.25;
}

.ido-transport-battaxi-lines--compact > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 400;
}

.ido-transport-battaxi-lines--compact > a:hover,
.ido-transport-battaxi-lines--compact > a:focus {
  text-decoration: underline !important;
}

.ido-transport-provider-booking-note {
  margin: 7px 0 0;
  color: var(--ido-muted, #5f6262);
  font-size: .88rem;
  line-height: 1.3;
}

/* Full widget: route is intentionally secondary to the "Till/Från Idöborg" kicker. */
.ido-transport-full [data-transport-full-route] {
  font-size: 1rem !important;
  line-height: 1.18 !important;
  margin-bottom: 0;
}

/* Full timetable provider + line text – tighter and quieter. */
.ido-transport-full .ido-transport-full-departure-provider,
.ido-transport-full .ido-transport-full-line-name {
  font-size: .82rem !important;
  line-height: 1.08 !important;
}

.ido-transport-full .ido-transport-full-departure-provider-line {
  gap: 6px !important;
  line-height: 1.08;
}

@media (max-width: 767.98px) {
  .ido-transport-full [data-transport-full-route] {
    font-size: .95rem !important;
  }

  .ido-transport-full .ido-transport-full-departure-provider,
  .ido-transport-full .ido-transport-full-line-name {
    font-size: .8rem !important;
  }
}


/* =========================================================
   v19 – final UI polish
   ========================================================= */

/* Full widget inputs */
.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-date],
.ido-transport-full [data-transport-full-station] {
  font-size: 1rem !important;
}

/* Smaller provider badges inside timetable + info cards */
.ido-transport-full .ido-transport-provider-flag {
  min-width: 25px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 3px !important;
  font-size: .58rem !important;
  line-height: 18px !important;
  color: #fff !important;
  letter-spacing: .01em;
}

.ido-transport-full .ido-transport-provider-flag--waxholm,
.ido-transport-full .ido-transport-provider-flag--battaxi {
  color: #fff !important;
}

/* Waxholm action in timetable becomes a compact FA-light info button */
.ido-transport-full-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(30, 62, 82, .22);
  border-radius: 50%;
  color: inherit !important;
  text-decoration: none !important;
  font-size: .9rem;
  line-height: 1;
}

.ido-transport-full-info-link:hover,
.ido-transport-full-info-link:focus {
  background: rgba(30, 62, 82, .05);
  color: inherit !important;
  text-decoration: none !important;
}

/* Shared prebooking note above the full-widget provider cards */
.ido-transport-full-booking-note {
  margin: 14px 0 8px;
  font-size: .9rem;
  line-height: 1.25;
}

/* Tighter provider-card headings */
.ido-transport-full-provider-title {
  line-height: 1.05 !important;
}

.ido-transport-full-provider-title strong {
  line-height: 1.05 !important;
}

/* Smaller SL CTA inside provider info card */
.ido-transport-full-provider--waxholm .btn_row .btn {
  min-height: 0 !important;
  padding: 6px 10px !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
}

.ido-transport-full-provider--waxholm .btn_row .btn i {
  font-size: .75rem !important;
}

/* Hitta hit section: more space before shared booking note */
.ido-transport-provider-booking-note {
  padding-top: 20px !important;
  margin-top: 0 !important;
}


/* =========================================================
   v20 – form + provider card polish
   ========================================================= */

/* Full widget form: same floating-label feeling as Hitta hit compact widget */
.ido-transport-full .ido-boat-form-box {
  display: block;
}

.ido-transport-full .ido-boat-date-picker,
.ido-transport-full .ido-boat-station-picker {
  position: relative;
}

.ido-transport-full .ido-boat-date-picker label,
.ido-transport-full .ido-boat-station-picker label {
  position: relative;
  display: block;
  width: 100%;
}

.ido-transport-full .ido-boat-date-picker label > span,
.ido-transport-full .ido-boat-station-picker label > span {
  position: absolute;
  z-index: 3;
  top: -7px;
  left: 12px;
  padding: 0 5px;
  background: #fff;
  color: var(--color_text, #181918);
  font-size: .72rem;
  line-height: 1;
  font-weight: 500;
  pointer-events: none;
}

.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(30, 62, 82, .18);
  border-radius: 7px;
  background-color: #fff;
  font-size: 1rem !important;
  line-height: 1.2;
}

.ido-transport-full .ido-boat-date-picker input:focus,
.ido-transport-full .ido-boat-station-picker select:focus {
  outline: none;
  border-color: rgba(30, 62, 82, .45);
  box-shadow: 0 0 0 2px rgba(30, 62, 82, .06);
}

.ido-transport-full .ido-transport-full-date-row {
  align-items: center;
}

.ido-transport-full .ido-transport-full-date-row > button {
  align-self: stretch;
  min-height: 48px;
}

/* Badges: slightly larger than v19, with better centering */
.ido-transport-full .ido-transport-provider-flag,
.ido-transport-provider-info-row .ido-transport-provider-flag {
  min-width: 29px !important;
  height: 20px !important;
  padding: 0 7px 0 6px !important;
  border-radius: 3px !important;
  font-size: .64rem !important;
  line-height: 20px !important;
  font-weight: 600;
  letter-spacing: .01em;
  box-sizing: border-box;
  text-align: center;
  color: #fff !important;
  position: relative;
}

/* Waxholmsbolaget look: blue with yellow accent on the left */
.ido-transport-provider-flag--waxholm {
  border-left: 3px solid #f3d521 !important;
}

/* Stavsnäs Båttaxi look: red badge, black outer edge + slim white inner edge */
.ido-transport-provider-flag--battaxi {
  border: 2px solid #111 !important;
  box-shadow: inset 0 0 0 1px #fff;
  line-height: 16px !important;
  padding-left: 6px !important;
  padding-right: 7px !important;
}

/* Full provider info text tighter */
.ido-transport-full-provider {
  line-height: 1.2;
}

.ido-transport-full-provider-title {
  line-height: 1 !important;
  margin-bottom: 6px;
}

.ido-transport-full-provider-title strong {
  line-height: 1 !important;
}

.ido-transport-full-provider p,
.ido-transport-full-provider .ido-transport-battaxi-lines {
  line-height: 1.22 !important;
}

/* Compact provider cards inspired by the full-widget cards */
.ido-transport-provider-info {
  gap: 8px;
}

.ido-transport-provider-info-row {
  padding: 9px 11px !important;
  border-radius: 7px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.55);
}

.ido-transport-provider-info-row--waxholm {
  border: 1px solid rgba(2,123,183,.22) !important;
  border-left: 3px solid #027bb7 !important;
  background: #027bb708 !important;
}

.ido-transport-provider-info-row--battaxi {
  border: 1px solid rgba(238,25,57,.20) !important;
  border-left: 3px solid #ee1939 !important;
  background: #ee193906 !important;
}

.ido-transport-provider-info-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  line-height: 1;
}

.ido-transport-provider-info-heading strong {
  font-size: .95rem;
  line-height: 1.05;
}

.ido-transport-provider-info-row > span,
.ido-transport-provider-info-row .ido-transport-provider-price {
  font-size: .85rem;
  line-height: 1;
}

.ido-transport-battaxi-lines--compact {
  gap: 5px 10px;
  margin-bottom: 6px;
  font-size: .88rem;
  line-height: 1.15;
}

.ido-transport-provider-info-actions {
  margin-top: 7px;
}

.ido-transport-provider-info-row .btn {
  min-height: 0 !important;
  padding: 5px 8px !important;
  font-size: .75rem !important;
  line-height: 1.05 !important;
}

.ido-transport-provider-info-row .btn i {
  font-size: .72rem !important;
}

.ido-transport-provider-mini-cta {
  padding-left: 9px !important;
  padding-right: 9px !important;
}

@media (min-width: 600px) {
  .ido-transport-provider-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   v21 – cleaner form + provider cards
   ========================================================= */

/* FULL FORM
   Match the simpler Hitta hit control style:
   label sits INSIDE the control, subtle background, no floating white chip.
*/
.ido-transport-full .ido-boat-date-picker label,
.ido-transport-full .ido-boat-station-picker label {
  position: relative;
  display: block;
  width: 100%;
}

.ido-transport-full .ido-boat-date-picker label > span,
.ido-transport-full .ido-boat-station-picker label > span {
  position: absolute !important;
  z-index: 2;
  top: 7px !important;
  left: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--color_text, #181918) !important;
  opacity: .7;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 500;
  pointer-events: none;
}

.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-date],
.ido-transport-full [data-transport-full-station] {
  width: 100%;
  min-height: 52px;
  padding: 21px 13px 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--color_theme_lighter) !important;
  box-shadow: none !important;
  color: var(--color_text, #181918) !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

.ido-transport-full .ido-boat-date-picker input:focus,
.ido-transport-full .ido-boat-station-picker select:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(30,62,82,.18) !important;
}

.ido-transport-full .ido-transport-full-date-row {
  align-items: center;
}

.ido-transport-full .ido-transport-full-date-row > button {
  min-height: 52px;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--color_theme_lighter) !important;
  color: inherit !important;
}

/* BTX badge: keep red badge, but only black accent on LEFT */
.ido-transport-provider-flag--battaxi {
  border: 0 !important;
  border-left: 2px solid #111 !important;
  box-shadow: inset 1px 0 0 #fff !important;
  line-height: 20px !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* Full info CTA for both providers: same compact style */
.ido-transport-full-provider .btn_row .btn {
  min-height: 0 !important;
  padding: 6px 10px !important;
  font-size: .78rem !important;
  line-height: 1.08 !important;
}

.ido-transport-full-provider .btn_row .btn i {
  font-size: .75rem !important;
}

/* Hitta hit provider cards:
   remove colored box treatment; let badges + line dots carry provider identity.
*/
.ido-transport-provider-info {
  gap: 10px !important;
}

.ido-transport-provider-info-row,
.ido-transport-provider-info-row--waxholm,
.ido-transport-provider-info-row--battaxi {
  padding: 10px 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ido-transport-provider-info-row + .ido-transport-provider-info-row {
  border-top: 1px solid rgba(30,62,82,.12) !important;
}

@media (min-width: 600px) {
  .ido-transport-provider-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px !important;
  }

  .ido-transport-provider-info-row + .ido-transport-provider-info-row {
    border-top: 0 !important;
    border-left: 1px solid rgba(30,62,82,.12) !important;
    padding-left: 20px !important;
  }
}

/* Compact card heading badge identical in principle to full widget */
.ido-transport-provider-info-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  line-height: 1;
}

.ido-transport-provider-info-heading .ido-transport-provider-flag--waxholm {
  border-left: 3px solid #f3d521 !important;
}

.ido-transport-provider-info-heading .ido-transport-provider-flag--battaxi {
  border: 0 !important;
  border-left: 2px solid #111 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-provider-info-heading strong {
  line-height: 1.05 !important;
}

/* Compact CTA/buttons */
.ido-transport-provider-info-actions {
  margin-top: 8px !important;
}

.ido-transport-provider-info-row .btn {
  padding: 5px 8px !important;
  font-size: .74rem !important;
  min-height: 0 !important;
  line-height: 1.05 !important;
}


/* =========================================================
   v22 – final cleanup
   ========================================================= */

/* Full form: use the site's input background variable exactly */
.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-date],
.ido-transport-full [data-transport-full-station],
.ido-transport-full .ido-transport-full-date-row > button {
  background: var(--color_input_bg, #fafafa) !important;
}

/* Form box should disappear visually; controls provide their own surfaces */
.ido-transport-full .ido-boat-form-box {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Clean timetable: no outside box, keep row separators only */
.ido-transport-full .ido-transport-full-results {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ido-transport-full .ido-transport-full-departure {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(30, 62, 82, .12) !important;
}

.ido-transport-full .ido-transport-full-departure:first-child {
  border-top: 1px solid rgba(30, 62, 82, .12) !important;
}

/* Provider line: no punctuation before the colored dot */
.ido-transport-full-line-name::before {
  content: none !important;
}

.ido-transport-full-line-name {
  gap: 5px;
}

/* Temporary Waxholmsbolaget line color.
   Easy to replace when you send the exact color. */
.ido-transport-line-dot--waxholm {
  background: #f3d521;
}

/* Provider labels in timetable a touch tighter */
.ido-transport-full .ido-transport-full-departure-provider,
.ido-transport-full .ido-transport-full-line-name {
  font-size: .88rem;
  line-height: 1.08;
}

/* Compact/full 17 badge consistency:
   yellow outer accent, subtle white inner separator */
.ido-transport-provider-flag--waxholm {
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

/* Ensure Hitta hit 17 badge inherits the same exact treatment */
.ido-transport-provider-info-heading .ido-transport-provider-flag--waxholm {
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}


/* =========================================================
   v23 – alignment + route heading + Waxholm line color
   ========================================================= */

.ido-transport-line-dot--waxholm {
  background: #08837b !important;
}

.ido-transport-full-route-kicker {
  display: none !important;
}

.ido-transport-full [data-transport-full-route] {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
  font-weight: 500;
}

.ido-transport-full .ido-transport-full-departure {
  grid-template-columns: 74px minmax(0, 1fr) max-content !important;
}

.ido-transport-full .ido-transport-full-departure-time {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 74px !important;
  min-width: 74px !important;
  white-space: nowrap;
}

.ido-transport-full-departure-time-value {
  display: inline-block;
}

.ido-transport-full-departure-star {
  position: relative;
  top: -0.1em;
  margin-left: 1px;
  font-size: .62em;
  line-height: 1;
}

.ido-transport-provider-info-heading .ido-transport-provider-flag--waxholm,
.ido-transport-full-provider-title .ido-transport-provider-flag--waxholm {
  background: #027bb7 !important;
  color: #fff !important;
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  .ido-transport-full .ido-transport-full-departure-time {
    width: 68px !important;
    min-width: 68px !important;
  }
}

.ido-transport-provider-booking-note {width: 100%;}

/* =========================================================
   Compact timetable provider badges
   ========================================================= */

/* Replace the old red/blue mini marker with the same 17 / BTX badges
   already used throughout the transport widgets. */
.ido-transport-compact .ido-transport-time-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding-left: 0 !important;
}

.ido-transport-compact .ido-transport-time-pill::after {
  content: none !important;
  display: none !important;
}

.ido-transport-compact .ido-transport-time-provider-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 29px !important;
  width: auto !important;
  height: 20px !important;
  padding: 0 7px 0 6px !important;
  border-radius: 3px !important;
  font-size: .64rem !important;
  line-height: 20px !important;
  font-weight: 600;
  letter-spacing: .01em;
  box-sizing: border-box;
  text-align: center;
  color: #fff !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--waxholm {
  background: #027bb7 !important;
  color: #fff !important;
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--battaxi {
  background: #ee1939 !important;
  color: #fff !important;
  border: 0 !important;
  border-left: 2px solid #111 !important;
  box-shadow: inset 1px 0 0 #fff !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.ido-transport-compact .ido-transport-time-value {
  display: inline-block;
  line-height: 1;
}


/* =========================================================
   v28 – compact timetable mini provider markers
   ========================================================= */

.ido-transport-compact .ido-transport-time-provider-badge {
  min-width: 14px !important;
  width: 14px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 2px !important;
  font-size: 0 !important;
  line-height: 16px !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--waxholm {
  background: #027bb7 !important;
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--battaxi {
  background: #ee1939 !important;
  border: 0 !important;
  border-left: 2px solid #111 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-compact .ido-transport-time-pill {
  gap: 6px !important;
}


/* =========================================================
   v29 – badge-shaped mini provider markers
   ========================================================= */

/* Wider + flatter: miniature silhouette of the full badges, without text. */
.ido-transport-compact .ido-transport-time-provider-badge {
  min-width: 20px !important;
  width: 20px !important;
  height: 11px !important;
  padding: 0 !important;
  border-radius: 2px !important;
  font-size: 0 !important;
  line-height: 11px !important;
  flex: 0 0 20px !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--waxholm {
  background: #027bb7 !important;
  border: 0 !important;
  border-left: 3px solid #f3d521 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--battaxi {
  background: #ee1939 !important;
  border: 0 !important;
  border-left: 2px solid #111 !important;
  box-shadow: inset 1px 0 0 #fff !important;
}

.ido-transport-compact .ido-transport-time-pill {
  gap: 6px !important;
}


/* =========================================================
   v30 – mini badge shape + full controls
   ========================================================= */

/* Mini provider marker: smaller, with a clearer triangular point on the right */
.ido-transport-compact .ido-transport-time-provider-badge {
  position: relative;
  min-width: 16px !important;
  width: 16px !important;
  height: 9px !important;
  flex: 0 0 16px !important;
  border-radius: 1px 0 0 1px !important;
  overflow: visible !important;
}

.ido-transport-compact .ido-transport-time-provider-badge::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  right: -5px;
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 5px solid currentColor;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--waxholm {
  color: #027bb7 !important;
}

.ido-transport-compact .ido-transport-time-provider-badge.ido-transport-provider-flag--battaxi {
  color: #ee1939 !important;
}

.ido-transport-compact .ido-transport-time-pill {
  gap: 10px !important;
}

/* Full widget station select: explicit dropdown chevron */
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-station] {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* Full widget date previous / next arrows slightly larger */
.ido-transport-full .ido-transport-full-date-row > button {
  font-size: 1.15rem !important;
}

.ido-transport-full .ido-transport-full-date-row > button i {
  font-size: 1.15rem !important;
}


/* =========================================================
   v31 – compact info line dot + full input weight + row borders
   ========================================================= */

/* Hitta hit info card:
   use the same green Line 17 dot treatment as the full-widget info. */
.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Hide the textual separator before "linje 17" visually by splitting with a pseudo dot.
   The markup text remains unchanged, so this is CSS-only. */
.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong {
  font-size: 0;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::before {
  content: "Waxholmsbolaget";
  font-size: .95rem;
  line-height: 1.05;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::after {
  content: "● linje 17";
  font-size: .95rem;
  line-height: 1.05;
  color: inherit;
}

/* Color only the circle via a dedicated overlay dot positioned before line text. */
.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading {
  position: relative;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::after {
  content: "linje 17";
  position: relative;
  padding-left: 13px;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong {
  position: relative;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong > * {
  display: none;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::marker {
  content: none;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong {
  --ido-line17-dot: #08837b;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::after {
  background:
    radial-gradient(circle at 4px 50%, var(--ido-line17-dot) 0 4px, transparent 4.5px)
    no-repeat;
}

/* Full widget field values */
.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-date],
.ido-transport-full [data-transport-full-station] {
  font-weight: 600 !important;
}

/* Full timetable:
   no outside/top/bottom border; separators only BETWEEN departure rows. */
.ido-transport-full .ido-transport-full-results {
  border: 0 !important;
}

.ido-transport-full .ido-transport-full-departure {
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--color_border_rgb), .3) !important;
}

.ido-transport-full .ido-transport-full-departure:first-child {
  border-top: 0 !important;
}

.ido-transport-full .ido-transport-full-departure:last-child {
  border-bottom: 0 !important;
}


/* =========================================================
   v32 – compact provider info
   ========================================================= */

/* Explicit line row replaces the previous CSS-generated "Waxholmsbolaget / linje 17". */
.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong {
  display: block !important;
  font-size: .95rem !important;
  line-height: 1.05 !important;
}

.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::before,
.ido-transport-provider-info-row--waxholm .ido-transport-provider-info-heading strong::after {
  content: none !important;
  display: none !important;
}

.ido-transport-provider-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 6px;
  font-size: .86rem;
  line-height: 1.1;
}

.ido-transport-provider-line-row .ido-transport-line-dot {
  flex: 0 0 auto;
}

/* Keep Båttaxi line list on its own row as well. */
.ido-transport-battaxi-lines,
.ido-transport-battaxi-lines--compact {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

/* Price summary: smaller and quieter. */
.ido-transport-provider-price--compact,
.ido-transport-provider-info-row .ido-transport-provider-price,
.ido-transport-full-price-note,
.ido-transport-full-fares {
  font-size: .82rem !important;
  line-height: 1.15 !important;
}

.ido-transport-provider-price--compact {
  margin-top: 5px !important;
}

/* Full timetable row separators only, now 15% border color. */
.ido-transport-full .ido-transport-full-departure {
  border-bottom: 1px solid rgba(var(--color_border_rgb), .15) !important;
}

.ido-transport-full .ido-transport-full-departure:first-child {
  border-top: 0 !important;
}

.ido-transport-full .ido-transport-full-departure:last-child {
  border-bottom: 0 !important;
}

/* Full provider line lists remain on their own row. */
.ido-transport-full-provider-title {
  flex-wrap: wrap;
}

.ido-transport-full-provider .ido-transport-battaxi-lines {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 3px;
}


/* =========================================================
   v33 – responsive provider lines + compact Waxholm info
   ========================================================= */

.ido-transport-full .ido-boat-date-picker input,
.ido-transport-full .ido-boat-station-picker select,
.ido-transport-full [data-transport-full-date],
.ido-transport-full [data-transport-full-station] {
  font-weight: 400 !important;
}

.ido-transport-provider-info-heading--stacked {
  align-items: flex-start !important;
}

.ido-transport-provider-info-heading-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ido-transport-provider-info-heading-text > strong {
  display: block !important;
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.05 !important;
}

.ido-transport-provider-info-heading-text .ido-transport-provider-line-row {
  width: auto !important;
  margin: 4px 0 0 !important;
  font-size: .86rem;
  line-height: 1;
}

.ido-transport-detailed-timetable-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: inherit !important;
  font-size: .86rem;
  line-height: 1.15;
  text-decoration: none !important;
}

.ido-transport-detailed-timetable-link:hover,
.ido-transport-detailed-timetable-link:focus {
  text-decoration: underline !important;
}

.ido-transport-detailed-timetable-link i {
  font-size: .9rem;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .ido-transport-full .ido-transport-full-departure-provider-line {
    flex-wrap: wrap;
    row-gap: 4px !important;
  }

  .ido-transport-full .ido-transport-full-line-name {
    flex-basis: 100%;
    width: 100%;
    margin-left: 35px;
  }
}


/* =========================================================
   v34 – full timetable responsive layout
   ========================================================= */

/* Base/mobile: company a little larger, line on its own row */
.ido-transport-full .ido-transport-full-departure-provider {
  font-size: .96rem !important;
  line-height: 1.05 !important;
}

.ido-transport-full .ido-transport-full-line-name {
  font-size: .84rem !important;
  line-height: 1.05 !important;
}

@media (max-width: 767.98px) {
  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  .ido-transport-full .ido-transport-full-departure-provider-line {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px !important;
  }

  .ido-transport-full .ido-transport-full-line-name {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0 !important;
  }

  .ido-transport-full .ido-transport-full-departure-action {
    grid-column: 2;
    margin-top: 6px;
  }
}

/* 768–1199:
   time gets its own row; content/action get full width below.
   This avoids the awkward half-width time column. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ido-transport-full .ido-transport-full-departure {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "time time"
      "main action";
    column-gap: 16px !important;
    row-gap: 7px !important;
    align-items: start;
  }

  .ido-transport-full .ido-transport-full-departure-time {
    grid-area: time;
    width: auto !important;
    min-width: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }

  .ido-transport-full .ido-transport-full-departure-main {
    grid-area: main;
    min-width: 0;
  }

  .ido-transport-full .ido-transport-full-departure-action {
    grid-area: action;
    align-self: center;
  }

  .ido-transport-full .ido-transport-full-departure-provider-line {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px !important;
  }

  .ido-transport-full .ido-transport-full-line-name {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0 !important;
  }
}

/* 1200–1699:
   classic three-column layout, but line name on its own row. */
@media (min-width: 1200px) and (max-width: 1699.98px) {
  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: 74px minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
  }

  .ido-transport-full .ido-transport-full-departure-provider-line {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px !important;
  }

  .ido-transport-full .ido-transport-full-line-name {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0 !important;
  }
}

/* 1700+:
   everything can sit naturally on one line again. */
@media (min-width: 1700px) {
  .ido-transport-full .ido-transport-full-departure {
    grid-template-columns: 74px minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
  }

  .ido-transport-full .ido-transport-full-departure-provider-line {
    flex-wrap: nowrap !important;
  }

  .ido-transport-full .ido-transport-full-line-name {
    flex-basis: auto !important;
    width: auto !important;
    margin-left: 0 !important;
  }
}


/* v35 – detailed timetable footer inside compact search box */
.ido-transport-compact .ido-transport-detailed-timetable-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 16px -20px -20px !important;
  padding: 13px 20px !important;
  border-top: 1px solid rgba(var(--color_border_rgb), .15);
  color: inherit !important;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none !important;
}

.ido-transport-compact .ido-transport-detailed-timetable-link:hover,
.ido-transport-compact .ido-transport-detailed-timetable-link:focus {
  background: rgba(var(--color_border_rgb), .035);
  text-decoration: none !important;
}

.ido-transport-compact .ido-transport-detailed-timetable-link > span {
  flex: 1 1 auto;
}

.ido-transport-compact .ido-transport-detailed-timetable-link > i {
  flex: 0 0 auto;
}

.ido-transport-compact .ido-transport-detailed-timetable-arrow {
  font-size: .8rem;
}


/* =========================================================
   v37 – fixed "Båtar idag", scroll only departures
   ========================================================= */

.ido-transport-hero {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: hidden !important;
}

.ido-transport-hero > .ido-boat-hero-label {
  position: relative;
  z-index: 2;
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* Only this part scrolls when the departures exceed available width. */
.ido-transport-hero-scroll {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  flex-flow: row nowrap !important;
  gap: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ido-transport-hero-scroll::-webkit-scrollbar {
  display: none;
}

.ido-transport-hero-scroll > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Prevent older responsive rules from stacking the two directions. */
.ido-transport-hero .ido-boat-hero-time {
  width: auto !important;
  min-width: max-content;
  flex: 0 0 auto !important;
}

.ido-transport-hero .ido-boat-hero-link {
  flex: 0 0 auto !important;
}

/* Useful on touch screens and desktop trackpads alike. */
.ido-transport-hero-scroll {
  touch-action: pan-x;
}


/* v38 – fade the last 30px of the swipeable header departures */
.ido-transport-hero-scroll {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  );
}


/* =========================================================
   v39 – show both directions everywhere + fixed CTA over fade
   ========================================================= */

/* Always show "från ön" now that departures can scroll horizontally. */
@media (max-width: 1599.98px) {
  #notification_header .ido-transport-hero .ido-boat-hero-time--from {
    display: inline-flex !important;
  }
}

/* Reserve a little room for the fixed arrow control. */
.ido-transport-hero {
  position: relative;
  padding-right: 34px;
}

/* Scroll/fade only the departure content, never the CTA arrow. */
.ido-transport-hero-scroll {
  padding-right: 30px;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 34px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 34px),
    transparent 100%
  );
}

/* Pull the final arrow out of the scroll flow visually and keep it fixed
   over the fade area. */
.ido-transport-hero .ido-boat-hero-link {
  position: absolute !important;
  z-index: 5;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

/* On very small screens give the fixed CTA a little more breathing room. */
@media (max-width: 767.98px) {
  .ido-transport-hero {
    padding-right: 32px;
  }

  .ido-transport-hero .ido-boat-hero-link {
    right: 4px;
    width: 24px;
    height: 24px;
  }
}


/* =========================================================
   v40 – fade then fixed arrow OUTSIDE scroll/mask
   ========================================================= */

.ido-transport-hero {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Båtar idag stays fixed. */
.ido-transport-hero > .ido-boat-hero-label {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* Only departures scroll and fade. */
.ido-transport-hero > .ido-transport-hero-scroll {
  position: relative;
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0;
  align-items: center;
  flex-flow: row nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-right: 18px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;

  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  ) !important;
}

.ido-transport-hero > .ido-transport-hero-scroll::-webkit-scrollbar {
  display: none;
}

/* Arrow is now a normal fixed flex item AFTER the fade. */
.ido-transport-hero > .ido-boat-hero-link {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 28px !important;
  height: 28px !important;
  margin-left: 5px !important;
  border-radius: 999px;

  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  transition: none !important;
}

/* Never move/fade the arrow on hover. */
.ido-transport-hero:hover > .ido-boat-hero-link,
.ido-transport-hero:focus > .ido-boat-hero-link,
.ido-transport-hero:focus-visible > .ido-boat-hero-link,
.ido-transport-hero > .ido-boat-hero-link:hover {
  position: static !important;
  transform: none !important;
  margin-left: 5px !important;
  opacity: 1 !important;
}

/* Both directions visible at every width. */
#notification_header .ido-transport-hero .ido-boat-hero-time--to,
#notification_header .ido-transport-hero .ido-boat-hero-time--from {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
  white-space: nowrap !important;
}

@media (max-width: 767.98px) {
  .ido-transport-hero > .ido-boat-hero-link {
    width: 24px !important;
    height: 24px !important;
    margin-left: 3px !important;
  }

  .ido-transport-hero:hover > .ido-boat-hero-link,
  .ido-transport-hero:focus > .ido-boat-hero-link {
    margin-left: 3px !important;
  }
}


/* v41 – mobile touch behavior */
.ido-transport-hero > .ido-transport-hero-scroll {
  touch-action: pan-y !important;
  cursor: grab;
}

.ido-transport-hero > .ido-transport-hero-scroll:active {
  cursor: grabbing;
}