@layer wsb-v4-components {
  .wsb-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background: currentColor; mask: center / contain no-repeat; }
	/* Unified Icon System V1. Components select semantics through the shared
	 * registry; this layer owns SVG presentation and keeps artwork independent
	 * from the interaction target. */
	.wsb-ui-icon {
		display: inline-block;
		width: var(--wsb-ui-icon-size, var(--wsb-icon-size, 1.5rem));
		height: var(--wsb-ui-icon-size, var(--wsb-icon-size, 1.5rem));
		flex: 0 0 auto;
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align: -0.2em;
	}
	.wsb-ui-icon--monochrome {
		background-color: currentColor;
		background-image: none;
		-webkit-mask-image: var(--wsb-ui-icon-url);
		mask-image: var(--wsb-ui-icon-url);
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.wsb-ui-icon--duotone {
		background-color: transparent;
		background-image: var(--wsb-ui-icon-url);
		-webkit-mask-image: none;
		mask-image: none;
	}
	.wsb-ui-icon[data-icon-missing] {
		outline: 1px dashed #b42318;
	}
	.wsb-trip__action { display: inline-flex; min-height: var(--wsb-target-min); align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-s); padding: 9px 12px; background: var(--wsb-color-surface); color: var(--wsb-color-ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--wsb-motion-fast) ease, background var(--wsb-motion-fast) ease, color var(--wsb-motion-fast) ease; }
	.wsb-trip__action:hover, .wsb-trip__action[aria-pressed="true"] { border-color: var(--wsb-color-interaction); background: color-mix(in srgb, var(--wsb-color-interaction) 6%, var(--wsb-color-surface)); color: var(--wsb-color-interaction); }
  .wsb-trip__action:disabled { opacity: .42; cursor: not-allowed; }
  .wsb-trip__action--icon { width: var(--wsb-target-min); padding: 0; }
  .wsb-trip__types { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: min(100%, 720px); min-height: 58px; border: 1px solid var(--wsb-color-border-subtle); border-radius: var(--wsb-radius-full); padding: 4px; background: var(--wsb-color-canvas); isolation: isolate; }
  .wsb-trip__type-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-full); background: var(--wsb-color-surface); box-shadow: var(--wsb-shadow-low); transition: transform var(--wsb-motion-medium) ease; }
  .wsb-trip__types[data-selected-type="return"] .wsb-trip__type-indicator { transform: translateX(calc(100% + 4px)); }
  .wsb-trip__types[data-selected-type="charter"] .wsb-trip__type-indicator { transform: translateX(calc(200% + 8px)); }
  .wsb-trip__types .wsb-trip__action { z-index: 1; border-color: transparent; border-radius: var(--wsb-radius-full); background: transparent; color: var(--wsb-color-muted); font-size: 15px; font-weight: 600; }
  .wsb-trip__types .wsb-trip__action:hover,
  .wsb-trip__types .wsb-trip__action[aria-checked="true"] { position: relative; bottom: 1px; border-color: transparent; border-radius: var(--wsb-radius-full); background: var(--wsb-color-surface-raised); box-shadow: none; color: var(--wsb-color-interaction); }
  .wsb-field, .wsb-place-field { display: grid; align-content: start; gap: 0px; min-width: 0; color: var(--wsb-color-muted); font-size: var(--wsb-font-label); font-weight: 500; }
  .wsb-field__label { position: relative; top: 10px; left: 8px; z-index: 1; display: flex; width: fit-content; min-height: 18px; margin: 0; align-items: center; gap: 0px; padding: 0 10px; background: var(--wsb-color-surface); font-size: var(--wsb-font-label); font-weight: 500; letter-spacing: .02em; }
  .wsb-field__label .wsb-icon { width: 17px; height: 17px; color: var(--wsb-color-icon-resting); }
	.wsb-field__info { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--wsb-color-border); border-radius: 50%; color: var(--wsb-color-interaction); font-size: 12px; line-height: 1; cursor: help; }
	.wsb-field__control { position: relative; display: block; }
	.wsb-field__control > .wsb-icon { position: absolute; top: 50%; left: 14px; z-index: 1; color: var(--wsb-color-icon-resting); transform: translateY(-50%); pointer-events: none; }
	.wsb-field__control > select { min-height: var(--wsb-control-height); padding-left: 46px; font-size: 16px; font-weight: 500; }
  .wsb-field--check { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: var(--wsb-control-height); border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-s); padding: 12px 14px; background: var(--wsb-color-surface); }
  .wsb-field--check .wsb-field__label { grid-column: 2; grid-row: 1; }
  .wsb-field--check input { grid-column: 1; grid-row: 1; }
	.wsb-place-field__controls { display: flex; flex-wrap: wrap; gap: 6px; }
	.wsb-place-field__input-shell { position: relative; display: block; }
	.wsb-place-field__input-shell > .wsb-icon { position: absolute; top: 50%; left: 14px; z-index: 1; color: var(--wsb-color-icon-resting); transform: translateY(-50%); pointer-events: none; }
	.wsb-place-field__input-shell > input { padding-right: 94px; padding-left: 46px; }
	.wsb-place-field__inside-actions { position: absolute; top: 50%; right: 6px; display: flex; gap: 2px; transform: translateY(-50%); }
	.wsb-place-field__inside-actions .wsb-trip__action { width: var(--wsb-target-min); min-height: var(--wsb-target-min); border-color: transparent; background: transparent; }
	.wsb-place-field__clear { font-size: 20px; line-height: 1; }
  .wsb-place-field__status { min-height: 18px; color: var(--wsb-color-muted); font-size: 12px; font-weight: 400; opacity: 1; transition: opacity 220ms ease; }
  .wsb-place-field__status[data-success-phase="fading"] { opacity: 0; }
  .wsb-place-field__status[data-state="confirmed"] { color: var(--wsb-color-success); }
  .wsb-place-field__status[data-state="stale"], .wsb-place-field__status[data-state="rejected"], .wsb-place-field__status[data-state="manual_review"], .wsb-place-field__status[data-state="network_error"] { color: var(--wsb-color-danger); }
  .wsb-place-field input[data-place-state="confirmed"] { border-color: var(--wsb-color-success-border); background: var(--wsb-color-success-softer); }
  .wsb-booking-app .wsb-place-field input[data-place-state="confirmed"]:focus,
  .wsb-booking-app .wsb-place-field input[data-place-state="confirmed"]:focus-visible { border-color: var(--wsb-color-brand-alt-soft); box-shadow: 0 0 0 4px var(--wsb-color-focus-ring); }
  @media (prefers-reduced-motion: reduce) {
    .wsb-place-field__status { transition: none; }
  }
  .wsb-place-field input[data-place-state="stale"], .wsb-place-field input[aria-invalid="true"], .wsb-field input[aria-invalid="true"] { border-color: var(--wsb-color-danger); background: var(--wsb-color-warning-softer); }
  .wsb-field-error { color: var(--wsb-color-danger); font-size: 12px; font-weight: 500; }
  .wsb-date-time-field { position: relative; }
  .wsb-date-time-field > input,
  .wsb-date-time-field > .clock-timepicker > input { width: 100%; padding-right: 52px; text-align: left; cursor: pointer; }
  .wsb-date-time-field > .clock-timepicker { width: 100%; }
	.wsb-date-time-field__icon, .wsb-date-time-field__period { position: absolute; top: calc(18px + (var(--wsb-control-height) / 2)); right: 14px; z-index: 2; color: var(--wsb-color-icon-resting); transform: translateY(-50%); pointer-events: none; }
	.wsb-date-time-field__icon--leading { right: auto; left: 14px; color: var(--wsb-color-icon-resting); }
	.wsb-date-time-field:has(.wsb-date-time-field__icon--leading) > input,
  .wsb-date-time-field:has(.wsb-date-time-field__icon--leading) > .clock-timepicker > input { padding-left: 46px; }
  .wsb-date-time-field__period { color: var(--wsb-color-ink); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
	.wsb-field__hint { color: var(--wsb-color-muted); font-size: 12px; font-weight: 400; }
	.wsb-route-add-stop { border-color: color-mix(in srgb, var(--wsb-color-interaction) 35%, var(--wsb-color-border)); border-radius: 999px; color: var(--wsb-color-interaction); }
	.wsb-date--blocked a { opacity: .38; text-decoration: line-through; }
	.wsb-date--partial a { box-shadow: inset 0 -.2rem var(--wsb-color-warning); }
}

.wsb-tooltip { position: fixed; z-index: 1000000; max-width: 240px; border-radius: 7px; padding: 7px 9px; background: CanvasText; color: Canvas; box-shadow: 0 7px 20px color-mix(in srgb, CanvasText 22%, transparent); font: 500 12px/1.35 system-ui, sans-serif; pointer-events: none; }

.ui-datepicker { display: none; }
.ui-datepicker.wsb-booking-v4-picker {
  z-index: 100000;
  width: min(340px, calc(100vw - 24px));
  border: 1px solid var(--wsb-picker-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--wsb-picker-surface);
  box-shadow: var(--wsb-picker-shadow);
  color: var(--wsb-picker-ink);
  font: 400 14px/1.4 "Poppins", system-ui, sans-serif;
}
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-header { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; border: 0; border-radius: 10px; padding: 2px; background: var(--wsb-picker-surface); color: var(--wsb-picker-ink); font-weight: 500; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-title { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev,
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next { position: static; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wsb-picker-ink); cursor: pointer; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev { grid-column: 1; grid-row: 1; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next { grid-column: 3; grid-row: 1; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev:hover,
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next:hover { background: color-mix(in srgb, var(--wsb-picker-interaction) 9%, var(--wsb-picker-surface)); }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev .ui-icon,
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev::before,
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next::before { font-size: 22px; line-height: 1; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-prev::before { content: "‹"; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-next::before { content: "›"; }
.ui-datepicker.wsb-booking-v4-picker th { padding: 8px 4px; color: var(--wsb-picker-muted); font-size: 12px; font-weight: 500; }
.ui-datepicker.wsb-booking-v4-picker td { padding: 1px; }
.ui-datepicker.wsb-booking-v4-picker td a,
.ui-datepicker.wsb-booking-v4-picker td span { display: grid; min-width: 36px; min-height: 36px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wsb-picker-ink); text-align: center; }
.ui-datepicker.wsb-booking-v4-picker td a:hover { background: color-mix(in srgb, var(--wsb-picker-interaction) 12%, var(--wsb-picker-surface)); color: var(--wsb-picker-interaction); }
.ui-datepicker.wsb-booking-v4-picker td.ui-datepicker-today a { box-shadow: inset 0 0 0 2px var(--wsb-picker-today); }
.ui-datepicker.wsb-booking-v4-picker td .ui-state-active,
.ui-datepicker.wsb-booking-v4-picker td.ui-datepicker-today .ui-state-active { background: var(--wsb-picker-success); color: var(--wsb-picker-surface); box-shadow: none; }
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-other-month a,
.ui-datepicker.wsb-booking-v4-picker .ui-datepicker-other-month span { color: var(--wsb-picker-muted); opacity: .55; }
.ui-datepicker.wsb-booking-v4-picker .ui-state-disabled span { color: var(--wsb-picker-disabled); opacity: .62; }