/* Twiliner travel advisor — A/B variant styles.
 *
 * Loaded together with travel-advisor.js. The modal is built from the site's own markup and
 * CSS; these are the only additions. Every rule is scoped to #travel-advisor-modal (the id
 * travel-advisor.js gives the modal), except the last two sections: the site's chat launcher
 * while the modal is open, and the hero wrapper holding the advisor CTA. Values come from the
 * site's variables (--color--*, --spacings--*, --font-sizes--*) wherever one fits.
 *
 * States, set by travel-advisor.js on the modal's content root:
 *   data-travel-advisor-mode="form"   before the first answer
 *   data-travel-advisor-mode="chat"   after it: form locked, submit hidden, composer pinned
 */

/* ── Layout ────────────────────────────────────────────────────────────────── */

/* The content root holds three rows: title (fixed), scroll area, composer (fixed). The root
 * itself no longer scrolls, and its side padding moves to the rows, so the scroll area's
 * scrollbar sits at the modal's edge instead of inside the content. The side padding is the
 * site's for .modal-inner.align-top: 64px, and 24px below 992px. */
#travel-advisor-modal .modal-inner.align-top {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
}

#travel-advisor-modal .travel-advisor-title-row,
#travel-advisor-modal .travel-advisor-scroll,
#travel-advisor-modal .travel-advisor-composer {
  width: 100%;
  padding-right: var(--spacings--xl-64px);
  padding-left: var(--spacings--xl-64px);
}

@media screen and (max-width: 991px) {
  #travel-advisor-modal .travel-advisor-title-row,
  #travel-advisor-modal .travel-advisor-scroll,
  #travel-advisor-modal .travel-advisor-composer {
    padding-right: var(--spacings--s-24px);
    padding-left: var(--spacings--s-24px);
  }
}

#travel-advisor-modal .travel-advisor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

#travel-advisor-modal .travel-advisor-composer {
  flex: 0 0 auto;
}

#travel-advisor-modal .travel-advisor-composer:empty {
  display: none;
}

/* In chat mode the composer is the last row; the site's 64px bottom padding would leave it
 * floating, so it gets the form's row gap above and the mobile padding below. */
#travel-advisor-modal [data-travel-advisor-mode="chat"].modal-inner.align-top {
  padding-bottom: var(--spacings--s-24px);
}

#travel-advisor-modal [data-travel-advisor-mode="chat"] .travel-advisor-composer {
  padding-top: var(--spacings--xs-16px);
}

#travel-advisor-modal .travel-advisor-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Title row: heading + voice input ──────────────────────────────────────── */

/* The heading's .xs spacing utility (margin-bottom: var(--spacings--xs-16px)) moves to the
 * row: inside the row it would push the heading off the voice button's centre line. */
#travel-advisor-modal .travel-advisor-title-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacings--xs-16px);
  margin-bottom: var(--spacings--xs-16px);
}

#travel-advisor-modal .travel-advisor-title-row .booking-heading.xs {
  margin-bottom: 0;
}

/* Outline circle in the style of the passenger stepper's .minus-plus-circle.white. */
#travel-advisor-modal .travel-advisor-voice {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color--white);
  border-radius: 100px;
  background-color: transparent;
  color: var(--color--white);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#travel-advisor-modal .travel-advisor-voice[hidden] {
  display: none;
}

#travel-advisor-modal .travel-advisor-voice svg {
  width: 22px;
  height: 22px;
}

#travel-advisor-modal .travel-advisor-voice:focus-visible {
  outline: 2px solid var(--color--white);
  outline-offset: 2px;
}

/* Listening: filled, with a slow pulse. */
#travel-advisor-modal .travel-advisor-voice[aria-pressed="true"] {
  background-color: var(--color--white);
  color: var(--color--brand-1);
  animation: travel-advisor-voice-pulse 1.4s ease-in-out infinite;
}

@keyframes travel-advisor-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* The second voice button, inside the description field: right edge, vertically centred,
 * in the field's purple on its white background. Its space is reserved in
 * .travel-advisor-description .form-field-content (see "Trip description"). */
#travel-advisor-modal .travel-advisor-voice-field {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--spacings--xs-16px);
  transform: translateY(-50%);
  border-color: var(--color--brand-1);
  color: var(--color--brand-1);
}

#travel-advisor-modal .travel-advisor-voice-field:focus-visible {
  outline-color: var(--color--brand-1);
}

#travel-advisor-modal .travel-advisor-voice-field[aria-pressed="true"] {
  background-color: var(--color--brand-1);
  color: var(--color--white);
  animation-name: travel-advisor-voice-pulse-field;
}

@keyframes travel-advisor-voice-pulse-field {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70, 40, 140, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(70, 40, 140, 0); }
}

/* ── Trip-type toggle ──────────────────────────────────────────────────────── */

/* In the booking modal the toggle sits above the form and the site's .l spacing utility
 * (margin-bottom: var(--spacings--l-40px)) separates the two. Here it is a row inside
 * .booking-form, between destination and passengers, and the form's row gap spaces it like
 * the other rows — so the utility's margin is removed. */
#travel-advisor-modal .toggle-section.l {
  margin-bottom: 0;
}

/* On desktop the labels' line box (22px × 1.5 = 33px) is taller than the 30px track, which
 * adds 1.5px above and below the row. Matching the track height makes the row exactly as tall
 * as what is visible, so its gaps equal the other rows'. Below 768px the labels are already
 * shorter than the track, so nothing changes there. */
#travel-advisor-modal .toggle-option {
  line-height: 30px;
}

/* The track is widened from the site's 60px to 68px. The knob's travel inside it is
 * 68px − 2×1px border − 2×2px padding − 24px knob = 38px; centred is half of that, 19px. */
#travel-advisor-modal .toggle-outline {
  width: 68px;
}

/* On the site, IX2 actions a-154/a-155 move the knob and colour the labels. The knob move is
 * not bound to the advisor's copy of the toggle, but the label colours are applied page-wide
 * by class (on load, and on every click of the booking modal's toggle) — hence !important.
 * Both follow data-travel-advisor-trip-type, set by travel-advisor.js, using IX2's own values:
 *   ""          nothing selected — knob centred, both labels grey
 *   "roundtrip" knob left (its resting position), "Hin & zurück" white
 *   "oneway"    knob right, "Nur Hinfahrt" white */
#travel-advisor-modal .toggle-circle {
  transition: transform 0.3s ease-in-out;
}

#travel-advisor-modal [data-travel-advisor-trip-type=""] .toggle-circle {
  transform: translateX(19px) !important;
}

#travel-advisor-modal [data-travel-advisor-trip-type="roundtrip"] .toggle-circle {
  transform: translateX(0) !important;
}

#travel-advisor-modal [data-travel-advisor-trip-type="oneway"] .toggle-circle {
  transform: translateX(38px) !important;
}

#travel-advisor-modal [data-travel-advisor-toggle-label] {
  color: rgb(167, 167, 167) !important;
}

#travel-advisor-modal [data-travel-advisor-trip-type="roundtrip"] [data-travel-advisor-toggle-label="roundtrip"],
#travel-advisor-modal [data-travel-advisor-trip-type="oneway"] [data-travel-advisor-toggle-label="oneway"] {
  color: rgb(255, 255, 255) !important;
}

/* ── Trip description ──────────────────────────────────────────────────────── */

/* The site's pill radius (.form-field-bg: 100px) suits a one-line field; on this taller box it
 * would read as an oversized curve. 20px is the site's most common card radius. */
#travel-advisor-modal .travel-advisor-description .form-field-bg {
  border-radius: 20px;
}

#travel-advisor-modal .travel-advisor-description .form-field {
  cursor: text;
}

/* Room for the voice button on the right: its 16px inset + 40px width + an 8px gap. The
 * textarea — and its scrollbar, when the text overflows — ends before the button. */
#travel-advisor-modal .travel-advisor-description .form-field-content {
  padding-top: var(--spacings--xs-16px);
  padding-bottom: var(--spacings--xs-16px);
  padding-right: calc(var(--spacings--xs-16px) + 40px + var(--spacings--2xs-8px));
}

/* The textarea carries .form-field-text (line height, colours below). Browser form-control
 * defaults are reset; typed text uses the site's selected-value colour, the placeholder its
 * unselected grey.
 * Size: the button label's, var(--font-sizes--20px) at every width (20px desktop, 17px on
 * phones), for typed text and placeholder alike. .form-field-text alone would be 15.3px on
 * phones — the three rows would clip a larger placeholder, and iOS Safari zooms into fields
 * below 16px on focus. */
#travel-advisor-modal [data-travel-advisor-description] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-weight: inherit;
  font-size: var(--font-sizes--20px);
  line-height: 1.2;
  color: var(--color--brand-1);
  resize: none;
}

#travel-advisor-modal [data-travel-advisor-description]::placeholder {
  color: var(--color--mediumgrey);
  opacity: 1;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

/* The site animates .button-hover-bg with IX2 (a-185 in / a-186 out: slide in from the left,
 * 0.3s ease-in-out). That interaction is bound per element at page load and never reaches the
 * advisor's copies of the button, so it is recreated here for all of them. */
#travel-advisor-modal .travel-advisor-button .button-hover-bg {
  opacity: 1;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

@media (hover: hover) {
  #travel-advisor-modal .travel-advisor-button:hover .button-hover-bg {
    transform: translateX(0);
  }
}

/* Submit: the copy is the booking modal's secondary-full button (white, purple label). None of
 * the site's button variants stands out on the purple modal — primary-full is purple itself —
 * so the CTA takes the warm part of the site's twilight gradient
 * (.section-wrapper.gradient-2-bg: brand-8 yellow → brand-7 orange → brand-6 pink). The label
 * stays the variant's purple (brand-1); contrast 5.2:1 at the pink end, 7.1:1 at the yellow
 * end. On hover the same gradient slides in reversed, so the colours visibly travel. */
#travel-advisor-modal [data-travel-advisor-submit] .button-bg {
  background-color: var(--color--brand-7);
  background-image: linear-gradient(90deg, var(--color--brand-8), var(--color--brand-7) 50%, var(--color--brand-6));
}

#travel-advisor-modal [data-travel-advisor-submit] .button-hover-bg {
  background-image: linear-gradient(90deg, var(--color--brand-6), var(--color--brand-7) 50%, var(--color--brand-8));
}

/* ── Chat mode: locked form ────────────────────────────────────────────────── */

#travel-advisor-modal [data-travel-advisor-mode="chat"] .travel-advisor-submit-item {
  display: none;
}

/* The form keeps showing the selections the conversation is based on, disabled in the site's
 * own style (hardDisable: opacity 0.4, no pointer events). */
#travel-advisor-modal [data-travel-advisor-mode="chat"] .booking-form > .booking-form-item,
#travel-advisor-modal [data-travel-advisor-mode="chat"] .booking-form > .toggle-section {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Conversation ──────────────────────────────────────────────────────────── */

#travel-advisor-modal .travel-advisor-thread {
  display: flex;
  flex-direction: column;
  gap: var(--spacings--s-24px);
  margin-top: var(--spacings--m-32px);
}

#travel-advisor-modal .travel-advisor-thread:empty {
  display: none;
}

@media screen and (max-width: 479px) {
  #travel-advisor-modal .travel-advisor-thread {
    margin-top: var(--spacings--s-24px);
  }
}

#travel-advisor-modal .travel-advisor-message {
  font-size: var(--font-sizes--20px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#travel-advisor-modal .travel-advisor-message p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Advisor: full width, left aligned, directly on the modal. */
#travel-advisor-modal .travel-advisor-message-advisor {
  display: flex;
  flex-direction: column;
  gap: var(--spacings--xs-16px);
  width: 100%;
  color: var(--color--white);
}

/* The site styles strong as uppercase weight 500 and em as bold (its headline conventions).
 * In conversational text that turns an emphasised phrase into shouting, so replies use plain
 * bold and italic. */
#travel-advisor-modal .travel-advisor-message strong {
  font-weight: 700;
  text-transform: none;
}

#travel-advisor-modal .travel-advisor-message em {
  font-style: italic;
  font-weight: inherit;
}

#travel-advisor-modal .travel-advisor-note {
  color: var(--color--mediumgrey);
}

/* The site's form error style; its display:none default is for the form's error line only. */
#travel-advisor-modal .travel-advisor-message .error-message-form {
  display: block;
  font-size: inherit;
}

/* Traveller: right aligned on a light surface, at most 80% of the width. */
#travel-advisor-modal .travel-advisor-message-user {
  align-self: flex-end;
  max-width: 80%;
  padding: var(--spacings--2xs-8px) var(--spacings--xs-16px);
  border-radius: 20px;
  background-color: var(--color--lightgrey);
  color: var(--color--brand-1);
}

#travel-advisor-modal .travel-advisor-message-user p {
  white-space: pre-wrap;
}

/* Loading: three dots, one after the other. */
#travel-advisor-modal .travel-advisor-typing {
  display: inline-flex;
  gap: 6px;
  padding: var(--spacings--2xs-8px) 0;
}

#travel-advisor-modal .travel-advisor-typing > span {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background-color: var(--color--white);
  animation: travel-advisor-typing 1.2s ease-in-out infinite;
}

#travel-advisor-modal .travel-advisor-typing > span:nth-child(2) {
  animation-delay: 0.15s;
}

#travel-advisor-modal .travel-advisor-typing > span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes travel-advisor-typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  #travel-advisor-modal .travel-advisor-scroll {
    scroll-behavior: auto;
  }

  #travel-advisor-modal .travel-advisor-typing > span,
  #travel-advisor-modal .travel-advisor-voice[aria-pressed="true"] {
    animation: none;
  }

  #travel-advisor-modal .travel-advisor-typing > span {
    opacity: 0.6;
  }
}

/* ── Connection cards ──────────────────────────────────────────────────────── */

/* Compact: the site's 18px text size, tight row gaps, and the total sharing its row with the
 * booking button. */
#travel-advisor-modal .travel-advisor-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacings--3xs-4px);
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.06);
  font-size: var(--font-sizes--18px);
  line-height: 1.4;
}

#travel-advisor-modal .travel-advisor-card-header,
#travel-advisor-modal .travel-advisor-card-leg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--spacings--xs-16px);
}

#travel-advisor-modal .travel-advisor-card-route {
  font-weight: 700;
}

#travel-advisor-modal .travel-advisor-card-detail,
#travel-advisor-modal .travel-advisor-card-leg-label,
#travel-advisor-modal .travel-advisor-card-total-label {
  color: var(--color--mediumgrey);
}

/* A leg is a heading line (label left, price right — round trips only) above its schedule. */
#travel-advisor-modal .travel-advisor-card-leg {
  display: flex;
  flex-direction: column;
}

#travel-advisor-modal .travel-advisor-nowrap {
  white-space: nowrap;
}

#travel-advisor-modal .travel-advisor-card-leg + .travel-advisor-card-leg {
  margin-top: var(--spacings--3xs-4px);
}

#travel-advisor-modal .travel-advisor-card-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Footer: total (label and price together) left, booking button right; the button wraps
 * below on narrow cards. */
#travel-advisor-modal .travel-advisor-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacings--2xs-8px) var(--spacings--xs-16px);
  margin-top: var(--spacings--3xs-4px);
  padding-top: var(--spacings--2xs-8px);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

#travel-advisor-modal .travel-advisor-card-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacings--2xs-8px);
}

#travel-advisor-modal .travel-advisor-card-total .travel-advisor-card-price {
  font-weight: 700;
}

/* The site's button, one size down to fit the compact card: 8px vertical padding instead of
 * 12px, and the card's 18px text. */
#travel-advisor-modal .travel-advisor-book {
  min-width: 0;
  padding-top: var(--spacings--2xs-8px);
  padding-bottom: var(--spacings--2xs-8px);
}

#travel-advisor-modal .travel-advisor-book .button-text {
  font-size: var(--font-sizes--18px);
}

/* ── Site chat launcher ────────────────────────────────────────────────────── */

/* While the advisor modal is open, the site's n8n chat launcher (bottom right) would sit on
 * the composer. Only the launcher is hidden, never the chat window: twiliner-chat.js derives
 * the chat's open state — and its analytics — from the window's visibility. */
body:has(#travel-advisor-modal.active) #n8n-chat .chat-window-toggle {
  display: none;
}

/* ── Hero CTAs ─────────────────────────────────────────────────────────────── */

/* The experiment adds the advisor CTA next to the hero's "Twiliner buchen". The site's
 * .logo-overlay-form-button-wrapper lays out one button, so it gets a gap; on phones (the
 * site's 767px breakpoint) the two stack, at equal width. Only a wrapper holding our CTA is
 * affected. */
.logo-overlay-form-button-wrapper:has([open-travel-advisor="open"]) {
  gap: var(--spacings--2xs-8px);
}

@media screen and (max-width: 767px) {
  .logo-overlay-form-button-wrapper:has([open-travel-advisor="open"]) {
    flex-direction: column;
    align-items: stretch;
  }
}