/* Scandlines – helpers for the progressive layer (app/js/page.js).
   Their 12 CSS files are not edited: every rule below is scoped to an sl-* hook class
   that page.js adds next to their own (hashed) class names.

   Important: their base is html { font-size: 10px }, so all sizes here use their scale
   (body text is 1.6rem, 1.8rem from 1024px up) instead of plain 1rem. */

.sl-hidden {
  display: none !important;
}

/* selection lists inside an open step (vehicle, people, time of day) */
.sl-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  padding: 0;
  list-style: none;
}

.sl-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-white);
  color: var(--color-dark-blue);
  border: 1px solid var(--color-mid-grey);
  border-radius: var(--radii-8);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.sl-choice:hover,
.sl-choice:focus-visible {
  border-color: var(--color-blue);
  outline: none;
}

.sl-choice.sl-active {
  border: 2px solid var(--color-blue);
  background: var(--color-pastel);
  padding: calc(var(--spacing-12) - 1px) calc(var(--spacing-16) - 1px);
}

.sl-choice-hint {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-dark-blue-60);
}

.sl-subtitle {
  display: block;
  margin: var(--spacing-16) 0 var(--spacing-8);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
}

.sl-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  align-items: flex-end;
  margin: 0 0 var(--spacing-16);
}

.sl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
}

.sl-field-label {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}

.sl-input {
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-mid-grey);
  border-radius: var(--radii-8);
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--color-dark-blue);
  background: var(--color-white);
}

.sl-hint {
  margin: 0 0 var(--spacing-8);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-dark-blue-60);
}

/* feedback under "Find tickets" */
.sl-notice {
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-12) var(--spacing-16);
  border-left: 4px solid var(--color-blue);
  background: var(--color-pastel);
  color: var(--color-dark-blue);
  font-size: 1.6rem;
  line-height: 1.5;
}

.sl-notice.sl-error {
  border-left-color: var(--color-red);
  background: var(--color-white-10);
}

/* the folded "Select route" step: flag – harbour – arrow – harbour – flag (their markup),
   it sits on the blue background, so the extra line uses their translucent white */
.sl-route-value {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.sl-value-extra {
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-white-70);
}

/* their progress bar in the blue header: where the guest is and what is done */
.sl-step-active {
  opacity: 1 !important;
  text-decoration: underline;
}

.sl-step-done {
  opacity: 1 !important;
}

.sl-step-done::before {
  content: "\2713\00a0";
}

/* the selected trip type: page.js also swaps their own yellow/blue button themes */
.sl-active {
  font-weight: 700;
}

@media only screen and (min-width: 1024px) {
  .sl-choice,
  .sl-subtitle,
  .sl-notice,
  .sl-input {
    font-size: 1.8rem;
  }

  .sl-choice-hint {
    font-size: 1.4rem;
  }

  .sl-field-label,
  .sl-hint {
    font-size: 1.6rem;
  }
}

/* ---------------------------------------------------------------------------
   the "Select time" screen: their sailingLegStep markup, only these helpers
   are ours (their CSS paints the cards, the divider and the price column)
   --------------------------------------------------------------------------- */

/* the screen arrives instead of the accordion - a short fade, nothing else */
.sl-leg-screen {
  animation: sl-arrive 0.35s ease-out both;
}

@keyframes sl-arrive {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* the crossing between two screens: their brand blue, their own #Boat glyph
   (the wavy waterline is part of the symbol) rocking on the waves */
.sl-sailing-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-40);
  min-height: 45vh;
  padding: var(--spacing-40) var(--spacing-16);
  background-color: var(--color-blue);
}

.sl-sailing-boat {
  display: block;
  color: var(--color-white, #fff);
  transform-origin: 50% 70%;
  animation: sl-rock 2.4s ease-in-out infinite;
}

.sl-sailing-caption {
  margin: 0;
  color: var(--color-white, #fff);
  font-weight: 700;
}

@keyframes sl-rock {

  0%,
  100% {
    transform: translateY(0.35rem) rotate(-2.5deg);
  }

  50% {
    transform: translateY(-0.35rem) rotate(2.5deg);
  }
}

/* the sailing the guest has chosen */
.sl-sailing.sl-active {
  box-shadow: 0 0 0 2px var(--color-blue);
}

/* the "Select ticket" screen: their cards, the chosen-marker is ours */
.sl-fare-card {
  cursor: pointer;
}

.sl-fare-card.sl-selected {
  box-shadow: 0 0 0 3px var(--color-blue);
}

/* the cheap bucket is limited: say so under the price that is actually bookable */
.sl-sold-out {
  color: var(--color-red);
  text-align: right;
  margin: 0;
}

/* the "Choose add-ons" screen: their cards, their round + button in the corner.
   Their CSS has no "chosen" state for an add-on, so the ring is ours, and so is the
   little line that says how the price is counted. */
.sl-addon-card {
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.sl-addon-card.sl-addon-on {
  box-shadow: 0 0 0 3px var(--color-blue);
}

.sl-addon-note {
  margin: var(--spacing-8) 0 0;
  color: var(--color-dark-blue-60);
}

@media (prefers-reduced-motion: reduce) {

  .sl-leg-screen,
  .sl-sailing-boat {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   the "Payment" step: the Nets terminal (snapshot 20261006075742322). Their
   formInput_*, their rows and their yellow button paint the fields – these few
   rules are only the frame the Nets page brings along (hidden postback fields
   and the small statements line at the foot)
   --------------------------------------------------------------------------- */

.sl-nets-hidden {
  display: none;
}

.sl-nets-error-codes {
  display: none;
}

.sl-nets-statements {
  margin: var(--spacing-24) 0 var(--spacing-40);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-dark-blue-60);
}

.sl-nets-link {
  color: var(--color-dark-blue);
  text-decoration: underline;
}

@media only screen and (min-width: 1024px) {
  .sl-nets-statements {
    font-size: 1.4rem;
  }
}

/* ---------------------------------------------------------------------------
   the one-hour offer of the owner (9.10.2026): 10 % off every route fare, the
   promise on their "Your trip" step and the crossed-out list price everywhere
   --------------------------------------------------------------------------- */

/* the banner sits inside their blue hero, so it is painted like their own
   translucent boxes – white text, their border colour of the sheet */
.sl-offer {
  margin: var(--spacing-8) 0 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radii-8);
  background: var(--color-white-10);
  color: var(--color-white, #fff);
}

.sl-offer_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-12);
}

.sl-offer-icon {
  flex: none;
  color: inherit;
}

.sl-offer-text {
  margin: 0;
  font-weight: 700;
  color: inherit;
}

/* the hour that is left: their money font is tabular, so the counter does not jump */
.sl-offer-timer {
  padding: 2px var(--spacing-8);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radii-8);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.sl-offer-note {
  margin: var(--spacing-4) 0 0;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--color-white-70);
}

.sl-offer.sl-offer-over {
  opacity: 0.72;
}

.sl-offer.sl-offer-over .sl-offer-timer {
  text-decoration: line-through;
}

/* the list price the offer was cut from, crossed out next to the price that counts */
.sl-price-was {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark-blue-60);
  text-decoration: line-through;
}

/* price and the struck one of it, kept together in one column of their line */
.sl-price-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--spacing-4) var(--spacing-8);
}

@media only screen and (min-width: 1024px) {
  .sl-price-was {
    font-size: 1.5rem;
  }
}