@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, 20px));
		height: var(--wsb-ui-icon-size, var(--wsb-icon-size, 20px));
		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.wsb-reset-modal__confirm { border-color: transparent; background: var(--wsb-cta-gradient, linear-gradient(115deg, var(--wsb-color-brand) 2%, var(--wsb-color-interaction) 98%)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--wsb-color-interaction) 18%, transparent); }
	.wsb-trip__action.wsb-reset-modal__confirm:hover:not(:disabled), .wsb-trip__action.wsb-reset-modal__confirm:focus-visible:not(:disabled) { border-color: transparent; background: var(--wsb-cta-gradient, linear-gradient(115deg, var(--wsb-color-brand) 2%, var(--wsb-color-interaction) 98%)); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--wsb-color-interaction) 24%, transparent); transform: translateY(-1px); }
	.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 4px 2px 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 color-mix(in srgb, var(--wsb-color-interaction) 22%, var(--wsb-color-border)); border-radius: var(--wsb-radius-full); background: color-mix(in srgb, var(--wsb-color-interaction) 72%, 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 { border-color: transparent; background: color-mix(in srgb, var(--wsb-color-interaction) 8%, transparent); color: var(--wsb-color-interaction); }
  .wsb-trip__types .wsb-trip__action[aria-checked="true"] { position: relative; bottom: 1px; border-color: transparent; border-radius: var(--wsb-radius-full); background: transparent; box-shadow: none; color: #fff; }
  .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--standard { color: var(--wsb-color-muted); font-size: var(--wsb-font-size-label, var(--wsb-font-label)); font-weight: var(--wsb-font-weight-medium, 500); line-height: 1.2; 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; min-width: max-content; flex-wrap: wrap; gap: 6px; }
	.wsb-place-field__input-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
	.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--google-new > .wsb-icon { display: none; }
	.wsb-place-field__input-shell > input[hidden] { display: none !important; }
	.wsb-place-field__input-shell > input { height: var(--wsb-place-control-height); min-height: var(--wsb-place-control-height); border-radius: var(--wsb-place-control-radius); padding: 8px 94px 8px 46px; }
	.wsb-place-field__input-shell > gmp-place-autocomplete { display: block; box-sizing: border-box; inline-size: 100%; width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0; height: var(--wsb-place-control-height); min-height: var(--wsb-place-control-height); border-radius: var(--wsb-place-control-radius); contain: inline-size; }
	.wsb-place-field__input-shell:focus-within, .wsb-place-field__input-shell--place-focused { border-radius: var(--wsb-place-control-radius); box-shadow: 0 0 0 4px var(--wsb-color-focus-ring); }
	gmp-place-autocomplete::part(focus-ring) { border-color: var(--wsb-color-brand-alt-soft); outline-color: transparent; box-shadow: none; }
	gmp-place-autocomplete::part(input) { height: var(--wsb-place-control-height); min-height: var(--wsb-place-control-height); border-radius: var(--wsb-place-control-radius); caret-color: var(--wsb-color-interaction); }
	/* Booking V4 owns the clear/current-location actions. Hide only Google's
	 * accessory button so it cannot overlap those controls. */
	gmp-place-autocomplete::part(clear-button), gmp-place-autocomplete::part(input-button) { display: none; }
	gmp-place-autocomplete:focus-within::part(input) { border-color: var(--wsb-color-brand-alt-soft); outline-color: transparent; box-shadow: none; }
	gmp-place-autocomplete::part(prediction-item-selected) { background: color-mix(in srgb, var(--wsb-color-interaction) 12%, white); color: var(--wsb-color-interaction); }
	.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__nearby { grid-column: 2 / -1; position: relative; z-index: 12; display: grid; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid #ded5e8; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(45,24,68,.13); }
	.wsb-place-field__nearby-option { display: flex !important; align-items: flex-start !important; flex-direction: column; gap: 3px; width: 100%; min-height: 52px !important; padding: 9px 12px !important; border: 0 !important; border-radius: 8px !important; background: #fff !important; color: #211a28 !important; text-align: left; }
	.wsb-place-field__nearby-option:hover, .wsb-place-field__nearby-option:focus-visible { outline: 2px solid #7b2cbf; outline-offset: -2px; background: #f7f0ff !important; }
	.wsb-place-field__nearby-option strong { font-size: 14px; font-weight: 500; }
	.wsb-place-field__nearby-option span { color: #6e6576; font-size: 12px; line-height: 1.35; }
	.wsb-place-field__popular { position: absolute; z-index: 14; top: calc(100% + 6px); right: 0; left: 0; display: none; gap: 2px; padding: 7px; border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-m); background: var(--wsb-color-surface); box-shadow: var(--wsb-shadow-low); }
	.wsb-place-field__popular[hidden] { display: none; }
	.wsb-place-field__input-shell:focus-within > .wsb-place-field__popular:not([hidden]) { display: grid; }
	.wsb-place-field__input-shell--place-focused > .wsb-place-field__popular:not([hidden]) { display: grid; }
	.wsb-place-field__popular-heading { padding: 4px 8px 2px; color: var(--wsb-color-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
	.wsb-place-field__popular-option { justify-content: flex-start !important; width: 100%; min-height: 42px !important; border: 0 !important; padding: 8px !important; background: transparent !important; color: var(--wsb-color-ink-strong) !important; text-align: left; }
	.wsb-place-field__popular-option:hover, .wsb-place-field__popular-option:focus-visible { background: color-mix(in srgb, var(--wsb-color-interaction) 8%, var(--wsb-color-surface)) !important; }
  .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-place-provider-runtime="1"] { display: block; color: var(--wsb-color-danger); line-height: 1.45; }
	.wsb-place-provider-retry { margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--wsb-color-interaction); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
	.wsb-place-provider-retry:focus-visible { outline: 2px solid var(--wsb-color-interaction); outline-offset: 3px; }
  .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-service-area-warning { display: flex; align-items: flex-start; gap: 9px; width: 100%; min-height: 42px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--wsb-color-danger); border-radius: 9px; background: var(--wsb-color-warning-softer); line-height: 1.45; }
  .wsb-service-area-warning .wsb-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
  .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-stop-duration__editor { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(120px, .35fr) minmax(220px, 1fr); align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--wsb-color-border); border-radius: var(--wsb-radius-s); background: var(--wsb-color-surface); }
	.wsb-stop-duration__label { color: var(--wsb-color-ink); font-size: 14px; font-weight: 400; }
	.wsb-stop-duration__control { position: relative; display: flex; align-items: center; min-height: 48px; border: 1px solid var(--wsb-color-border); border-radius: 10px; background: var(--wsb-color-surface); }
	.wsb-stop-duration__control > [data-icon] { width: 18px; height: 18px; margin-inline: 14px 0; color: var(--wsb-color-ink); pointer-events: none; }
	.wsb-stop-duration__control > [data-icon="chevron-down"] { position: absolute; inset-inline: auto 14px; margin: 0; }
	.wsb-stop-duration__select { width: 100%; min-height: 46px; padding: 0 44px 0 12px; border: 0; appearance: none; background: transparent; color: var(--wsb-color-ink); font: inherit; }
	.wsb-stop-duration__helper { grid-column: 1 / -1; margin: 0; color: var(--wsb-color-muted); font-size: 13px; line-height: 1.45; }
	.wsb-stop-duration__badge { min-width: max-content; min-height: 36px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--wsb-color-interaction) 35%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--wsb-color-interaction) 8%, white); color: var(--wsb-color-interaction); font-size: 13px; white-space: nowrap; }
	.wsb-stop-duration__badge [data-icon] { width: 16px; height: 16px; }
	@media (max-width: 640px) { .wsb-stop-duration__editor { grid-column: 1 / -1; grid-template-columns: 1fr; } .wsb-stop-duration__helper { grid-column: 1; } }
	.wsb-date--blocked { position: relative; pointer-events: auto !important; }
	.wsb-date--blocked .ui-state-default { color: var(--wsb-color-muted); opacity: .68; text-decoration: none; cursor: not-allowed; pointer-events: none; }
	.wsb-date--blocked:hover::after { content: attr(title); position: absolute; z-index: 100002; bottom: calc(100% + 7px); left: 50%; width: max-content; max-width: 13rem; border-radius: 7px; padding: 6px 8px; background: var(--wsb-color-ink-strong); color: var(--wsb-color-surface); box-shadow: var(--wsb-shadow-low); font-size: 12px; font-weight: 500; line-height: 1.35; text-align: center; transform: translateX(-50%); pointer-events: none; }
	.wsb-date--partial .ui-state-default { 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; }

.wsb-multiday-flex-helper{background:var(--wsb-color-success-softer,#ecfdf3);border-inline-start:3px solid var(--wsb-color-success,#15803d);border-radius:.4rem;color:var(--wsb-color-ink,#172033);font-size:.9rem;line-height:1.45;margin:.75rem 0;padding:.7rem .85rem}
.wsb-stayover-breakdown{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);display:grid;font-size:.78rem;font-weight:500;gap:.3rem;margin:.55rem 0 0;padding:.55rem 0 0}
.wsb-stayover-breakdown__line{display:flex;gap:.75rem;justify-content:space-between}.wsb-stayover-breakdown__line dt,.wsb-stayover-breakdown__line dd{margin:0}