/**
 * Deal Alarm — entry point and creation form (GT-638).
 *
 * Measured from Figma nodes 1574:19682 (mobile, 390 wide) and 1574:21106 /
 * 1574:21311 (desktop, 1440×852). Every number below comes from the design;
 * where a value looks arbitrary it is because the design says so.
 *
 * Desktop panel: 588×480 centred, radius 24, 32px side padding, scrim
 * rgba(5,7,69,.2) — derived from the frame render, not invented (the page
 * behind measures #f7f9fc undimmed and #c7c8d8 dimmed, which is the brand navy
 * at 20%). No drop shadow: the panel edge is a hard transition in the design.
 *
 * The theme owns the page, so everything here is scoped and reset — a stray
 * `button { }` rule from the theme must not reach a chip.
 */

.ut-da-entry,
.ut-da-overlay {
	--utda-bg: var(--background-accent-default, #f3f6fc);
	--utda-surface: #fff;
	--utda-blue-010: var(--border-default-secondary, #e7edfa);
	--utda-blue-020: var(--ut-blue-20, #cfdbf4);
	--utda-navy: var(--ut-blue-900, #050745);
	--utda-orange: #fc7d21;
	--utda-yellow: #fffae9;
	--utda-icon: var(--icon-primary, #1e2058);
	--utda-text: rgba(5, 7, 69, 0.9);
	--utda-text-2: rgba(5, 7, 69, 0.7);
	--utda-text-3: rgba(5, 7, 69, 0.6);
	--utda-text-toggle: #414755;
	--utda-text-budget: #1a2b4e;
	--utda-font: var(--ut-font-family, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

	font-family: var(--utda-font);
}

.ut-da-entry *,
.ut-da-entry *::before,
.ut-da-entry *::after,
.ut-da-overlay *,
.ut-da-overlay *::before,
.ut-da-overlay *::after {
	box-sizing: border-box;
}

/**
 * `display: flex` on these elements outranks the user-agent `[hidden]` rule, so
 * a closed overlay stayed laid out and kept swallowing clicks on the page under
 * it. Both the containers and everything inside them have to say it explicitly.
 */
.ut-da-entry[hidden],
.ut-da-overlay[hidden],
.ut-da-entry [hidden],
.ut-da-overlay [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ entry */

/**
 * Figma 1574:21715 — "Scroll Up" / "Scroll Down". A transparent bar pinned to
 * the bottom; only the button takes pointer events, so the bar never swallows
 * clicks on the page beneath.
 *
 * Expanded (Scroll Up): the "Deal Alarm erstellen" pill — centred on phones,
 * 24px up (1574:21088); bottom-right with 128px / 16px gutters on desktop
 * (1574:21510). Collapsed (Scroll Down): the 48px bell, bottom-right
 * (1574:20874, 1574:21709). "Smooth transition from big to small": the label
 * folds away while `right` + `transform` carry the phone pill from the centre
 * into the corner, so nothing jumps.
 */
.ut-da-entry {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2400;
	height: 96px;
	pointer-events: none;
	transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0s;
}

.ut-da-entry:not(.ut-da-entry--inline) .ut-da-entry__button {
	position: absolute;
	right: 50%;
	bottom: 24px;
	overflow: hidden;
	white-space: nowrap;
	transform: translateX(50%);
	transition: right 0.3s ease, transform 0.3s ease, padding 0.3s ease, gap 0.3s ease, background-color 0.2s ease;
}

.ut-da-entry__label {
	display: inline-block;
	max-width: 200px;
	overflow: hidden;
	transition: max-width 0.3s ease, opacity 0.2s ease;
}

.ut-da-entry.is-collapsed .ut-da-entry__button {
	right: 16px;
	gap: 0;
	padding: 8px 12px;
	transform: translateX(0);
}

.ut-da-entry.is-collapsed .ut-da-entry__label {
	max-width: 0;
	opacity: 0;
}

/* At the footer it steps aside completely — and out of the tab order. */
.ut-da-entry.is-hidden {
	visibility: hidden;
	opacity: 0;
	transform: translateY(120%);
	transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
}

@media (prefers-reduced-motion: reduce) {
	.ut-da-entry,
	.ut-da-entry:not(.ut-da-entry--inline) .ut-da-entry__button,
	.ut-da-entry__label {
		transition: none;
	}
}

/*
 * The header's navigation drawer sits in <ut-header>'s stacking context
 * (z-index 2000), under this bar; the header marks <html> while it is open.
 */
html.ut-header-menu-open .ut-da-entry:not(.ut-da-entry--inline) {
	visibility: hidden;
}

/*
 * "Zu den Benachrichtigungs Einstellungen" opens the header's notification
 * panel over this dialog; the panel lives in <ut-header>'s stacking context
 * (z-index 2000), and the header marks <html> while it is open. The script
 * leaves Escape and Tab to the panel meanwhile.
 */
html.ut-header-notifications-open .ut-da-overlay {
	z-index: 1999;
}

/* `[ut_deal_alarm]` drops the trigger into the flow instead of over the page. */
.ut-da-entry--inline {
	position: static;
	display: inline-flex;
	height: auto;
	padding: 0;
	transform: none;
	opacity: 1;
}

/* A shortcode label can be longer than the floating one, and never folds. */
.ut-da-entry--inline .ut-da-entry__label {
	max-width: none;
}

.ut-da-entry__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 48px;
	margin: 0;
	padding: 8px 24px;
	border: 0;
	border-radius: 99px;
	background: var(--utda-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
}

.ut-da-entry__button:hover,
.ut-da-entry__button:focus-visible {
	background: #0b1069;
	color: #fff;
}

.ut-da-entry__button svg {
	display: block;
	flex: none;
}

/* Desktop: always in the corner — only the width changes between the states. */
@media (min-width: 1024px) {
	.ut-da-entry {
		height: 80px;
	}

	.ut-da-entry:not(.ut-da-entry--inline) .ut-da-entry__button,
	.ut-da-entry.is-collapsed .ut-da-entry__button {
		right: 128px;
		bottom: 16px;
		transform: none;
	}
}

/* ----------------------------------------------------------------- shell */

/**
 * Scroll lock. `overflow: clip` rather than `hidden` — a `hidden` wrapper
 * computes to `overflow-y: auto`, which turns the page into a nested scroller
 * and eats the first touch on mobile.
 */
html.ut-da-locked,
html.ut-da-locked body {
	overflow: clip;
}

.ut-da-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	overflow: hidden;
	background: rgba(5, 7, 69, 0.2);
}

.ut-da-dialog {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--utda-bg);
}

.ut-da-dialog__header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	gap: 0;
	padding: 16px 24px;
	background: var(--utda-bg);
}

.ut-da-dialog__title {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	color: var(--utda-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1px;
	line-height: 20px;
	text-align: center;
	overflow-wrap: break-word;
}

.ut-da-iconbtn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--utda-navy);
	cursor: pointer;
}

.ut-da-iconbtn svg {
	display: block;
}

/* Mobile carries the back arrow only; the close is a desktop affordance. */
.ut-da-iconbtn--close {
	display: none;
}

.ut-da-iconbtn--spacer {
	pointer-events: none;
}

.ut-da-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 16px 32px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ut-da-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ----------------------------------------------------------------- cards */

.ut-da-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: 24px;
	background: var(--utda-surface);
}

.ut-da-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ut-da-card__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ut-da-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--utda-icon);
}

.ut-da-card__icon svg {
	display: block;
}

.ut-da-card__title {
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 28px;
}

/* --------------------------------------------------------------- toggles */

.ut-da-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
}

.ut-da-toggle__label {
	padding-left: 12px;
	color: var(--utda-text-toggle);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.14px;
	line-height: 16px;
	white-space: nowrap;
}

.ut-da-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ut-da-toggle__track {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: flex-start;
	width: 44px;
	height: 24px;
	padding: 2px;
	border-radius: 9999px;
	background: var(--utda-blue-020);
	transition: background-color 0.15s ease;
}

.ut-da-toggle__knob {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: #fff;
	transition: transform 0.15s ease;
}

.ut-da-toggle__input:checked ~ .ut-da-toggle__track {
	background: var(--utda-navy);
}

.ut-da-toggle__input:checked ~ .ut-da-toggle__track .ut-da-toggle__knob {
	transform: translateX(20px);
}

.ut-da-toggle__input:focus-visible ~ .ut-da-toggle__track {
	outline: 2px solid var(--utda-orange);
	outline-offset: 2px;
}

/* ---------------------------------------------------------- travel types */

.ut-da-types {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/**
 * 62px tall, 78px pitch with the 16px gap — matching the Figma rows.
 *
 * The design's 2px stroke is drawn INSIDE the frame, so it overlaps the 2px
 * vertical padding instead of adding to it. Reproduced here by letting the
 * border stand in for that padding (0 top/bottom) and taking it out of the 8px
 * side padding; declaring `padding: 2px 8px` on top of the border made every
 * row 4px too tall.
 */
.ut-da-type {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0 6px;
	border: 2px solid var(--utda-blue-020);
	border-radius: 99px;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.ut-da-type[aria-pressed="true"] {
	border-color: var(--utda-navy);
	background: var(--utda-blue-010);
}

.ut-da-type__inner {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 8px;
	border-radius: 99px;
}

.ut-da-type__bubble {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 101.538px;
	background: var(--utda-surface);
	overflow: hidden;
}

/* The 24px icon box the glyph was drawn inside; the glyph keeps its own
   dimensions (the hotel mark is 22×15, flights+hotels 16×22). */
.ut-da-type__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--utda-icon);
}

.ut-da-type__icon svg {
	display: block;
	flex: none;
}

.ut-da-type__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--utda-text);
}

.ut-da-type__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1px;
	line-height: 20px;
}

.ut-da-type__hint {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1px;
	line-height: 20px;
}

/* ----------------------------------------------------------------- chips */

.ut-da-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

/* Reisezeitraum stacks its ranges instead of wrapping them. */
.ut-da-chips--stacked {
	flex-direction: column;
	gap: 16px;
}

.ut-da-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	max-width: 100%;
	margin: 0;
	padding: 6px 16px;
	border: 0;
	border-radius: 40px;
	background: var(--utda-blue-010);
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1px;
	line-height: 20px;
	overflow: hidden;
}

.ut-da-chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-da-chip__remove {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--utda-navy);
	cursor: pointer;
}

.ut-da-chip__remove svg,
.ut-da-chip__plus svg {
	display: block;
}

.ut-da-chip--add {
	border: 1px dashed var(--utda-orange);
	background: none;
	color: var(--utda-text-2);
	cursor: pointer;
}

.ut-da-chip__plus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--utda-orange);
	transform: rotate(45deg);
}

.ut-da-chip--add:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- budget */

.ut-da-budget__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ut-da-budget__label {
	color: var(--utda-text-budget);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.ut-da-budget__value {
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.ut-da-slider {
	display: flex;
	align-items: center;
	height: 24px;
}

.ut-da-slider__input {
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ut-da-slider__input::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 8px;
	background: var(--utda-blue-020);
}

.ut-da-slider__input::-moz-range-track {
	height: 8px;
	border-radius: 8px;
	background: var(--utda-blue-020);
}

.ut-da-slider__input::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -8px;
	border: 4px solid #fff;
	border-radius: 12px;
	background: var(--utda-icon);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	-webkit-appearance: none;
	appearance: none;
}

.ut-da-slider__input::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 4px solid #fff;
	border-radius: 12px;
	background: var(--utda-icon);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ut-da-budget__scale {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color: var(--utda-text-3);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.ut-da-infobox {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
	background: var(--utda-yellow);
	overflow: hidden;
}

.ut-da-infobox__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding-top: 2px;
}

.ut-da-infobox__icon svg {
	display: block;
}

.ut-da-infobox__text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: var(--utda-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

/* --------------------------------------------------------- notifications */

/* Figma 2624:6747 (case 1), 2624:6234 (case 2), 2624:6293 (case 3). */
.ut-da-card--notify {
	gap: 14px;
}

.ut-da-notify {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-radius: 8px;
	background: #fff;
}

.ut-da-notify__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.ut-da-notify__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.ut-da-notify__label {
	color: var(--utda-navy);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

.ut-da-notify__sublabel {
	margin: 0;
	color: rgba(5, 7, 69, 0.7);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}

.ut-da-notify__divider {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--utda-blue-010);
}

/* Cases 2 and 3 — the account gate is closed one way or the other. */
.ut-da-notify__box {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
}

.ut-da-notify__box--blue {
	background: var(--utda-blue-010);
}

.ut-da-notify__box--yellow {
	background: #fef3d3;
}

.ut-da-notify__box-icon {
	display: inline-flex;
	flex: none;
	width: 18px;
	height: 18px;
}

.ut-da-notify__box-icon svg {
	display: block;
}

.ut-da-notify__box-col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ut-da-notify__box-text {
	margin: 0;
	color: rgba(5, 7, 69, 0.9);
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
}

.ut-da-notify__box-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0d49c7;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.ut-da-notify__box-link svg {
	display: block;
	flex: none;
}

/* Case 3, and case 1 when the account's switch goes on here: the consent. */
.ut-da-notify__consent {
	margin: 0;
	color: rgba(5, 7, 69, 0.65);
	font-size: 11px;
	font-weight: 400;
	line-height: 17px;
}

/* Figma 2624:6809 — "Wie oft per E-Mail?" under the Email toggle */

.ut-da-frequency {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: 12px;
	background: #f4f6ff;
}

.ut-da-frequency[hidden] {
	display: none !important;
}

.ut-da-frequency__label {
	margin: 0;
	color: rgba(5, 7, 69, 0.75);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

.ut-da-segmented {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 64px;
	background: #fff;
}

.ut-da-segmented__option {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 64px;
	background: transparent;
	color: #050745;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
}

.ut-da-segmented__option.is-active {
	background: #050745;
	color: #fff;
}

/* "Wöchentlich" needs the room on a phone. */
@media (max-width: 480px) {
	.ut-da-segmented__option {
		padding-inline: 4px;
	}
}

.ut-da-segmented__option:focus-visible {
	outline: 2px solid #050745;
	outline-offset: 2px;
}

.ut-da-frequency__hint {
	margin: 0;
	color: rgba(5, 7, 69, 0.7);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}

/* ---------------------------------------------------------------- submit */

.ut-da-dialog__footer {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
}

.ut-da-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 24px;
	background: var(--utda-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
	overflow: hidden;
}

.ut-da-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.ut-da-submit__mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.ut-da-submit__mark svg {
	display: block;
}

/* ---------------------------------------------------------------- errors */

.ut-da-error {
	margin: 0;
	color: #c00f0c;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* --------------------------------------------------------------- pickers */

/**
 * Reiseziel / Abflughafen / Reisezeitraum sheets — Figma 1574:20036, 1574:20257
 * and 1574:20125. Search, the chips already chosen, then full-width option
 * pills under plain headings.
 */
.ut-da-picker {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	min-height: 0;
	padding: 0 16px 24px;
}

.ut-da-search {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 99px;
	background: var(--utda-surface);
}

.ut-da-search__input {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ut-da-search__input::placeholder {
	color: var(--utda-text-3);
}

/* The magnifier sits at the END of the field in the design, not the start. */
.ut-da-search__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	order: 2;
	color: var(--utda-navy);
}

.ut-da-search__icon svg {
	display: block;
}

.ut-da-picker__chips:empty {
	display: none;
}

.ut-da-picker__list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ut-da-picker__level {
	padding: 8px 8px 0;
	color: var(--utda-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.ut-da-picker__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 99px;
	background: var(--utda-surface);
	color: var(--utda-text-2);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.ut-da-picker__option:hover,
.ut-da-picker__option:focus-visible {
	border-color: var(--utda-navy);
}

.ut-da-picker__option[aria-pressed="true"] {
	background: var(--utda-blue-010);
}

.ut-da-picker__option[aria-pressed="true"]::after {
	content: "";
	flex: none;
	width: 8px;
	height: 14px;
	border: solid var(--utda-navy);
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
}

.ut-da-picker__empty {
	padding: 24px 8px;
	color: var(--utda-text-3);
	font-size: 14px;
	line-height: 20px;
}

/* ------------------------------------------------------- period: the tabs */

/* Figma 1574:20131 — the ACTIVE tab is a white pill, not a filled navy one. */
.ut-da-tabbar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 6px 4px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 40px;
	background: var(--utda-blue-010);
	overflow: hidden;
}

.ut-da-tabbar__tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 40px;
	background: none;
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1px;
	line-height: 20px;
	cursor: pointer;
}

.ut-da-tabbar__tab.is-active {
	border: 1.5px solid var(--utda-blue-010);
	background: #fff;
	font-weight: 600;
	letter-spacing: normal;
}

/* ----------------------------------------------------- period: the months */

/* Figma 1574:20137 */
.ut-da-monthpicker {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 16px;
	border: 2px solid var(--utda-blue-010);
	border-radius: 16px;
	background: var(--utda-surface);
	overflow: hidden;
}

.ut-da-monthpicker__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 16px;
}

.ut-da-monthpicker__nav {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--utda-navy);
	cursor: pointer;
}

.ut-da-monthpicker__nav svg {
	display: block;
}

.ut-da-monthpicker__nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.ut-da-monthpicker__year {
	color: var(--utda-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.ut-da-monthpicker__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 0 16px;
}

.ut-da-month {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-width: 0;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 99px;
	background: var(--utda-surface);
	color: var(--utda-text-2);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
	overflow: hidden;
}

/* A month already gone by cannot be alarmed on. */
.ut-da-month:disabled {
	border-color: #f2f2f5;
	color: rgba(5, 7, 69, 0.3);
	cursor: not-allowed;
}

.ut-da-month[aria-pressed="true"] {
	background: var(--utda-blue-010);
}

/* -------------------------------------------------------- period: by date */

.ut-da-period {
	display: flex;
	flex: none;
	gap: 16px;
	min-width: 0;
}

.ut-da-period__field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.ut-da-period__label {
	color: var(--utda-text-2);
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
}

/**
 * `min-width` matters as much as the width here: a native date input has an
 * intrinsic minimum size, and without this the second field is pushed off the
 * side of the sheet instead of sharing the row.
 */
.ut-da-picker--period .ut-da-period input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--utda-blue-020);
	border-radius: 99px;
	background: var(--utda-surface);
	color: var(--utda-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.ut-da-submit--period {
	margin-top: auto;
}

/* ------------------------------------------------ steps (phones: one form) */

/**
 * The wizard's wrappers are layout-neutral on phones: the cards stay one long
 * form, spaced by .ut-da-cards, exactly as before the desktop steps existed.
 */
.ut-da-step,
.ut-da-picker__top {
	display: contents;
}

.ut-da-steps,
.ut-da-next,
.ut-da-picker__footer,
.ut-da-card__icon--wide {
	display: none;
}

.ut-da-steps__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The search and the chosen chips moved out of .ut-da-picker (for the desktop
   band); on phones they keep the spacing they had inside it. */
.ut-da-dialog--list .ut-da-search,
.ut-da-dialog--list .ut-da-picker__chips {
	margin: 0 16px 16px;
}

/* ------------------------------------------- tablet + desktop: the steps */

/**
 * "Desktop View V2" (Figma 2480:15332): a 590px panel, 24px padding, 18px
 * between its parts — head, "Schritt N" bar, the step's cards, the button.
 * Measured from 2480:15486 (step 1), 2480:15563 (2), 2480:15450 (3) and the
 * picker 2480:16543. Figma draws strokes inside, so a bordered box's padding
 * here is the design's minus the border.
 */
@media (min-width: 768px) {
	.ut-da-overlay {
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	/* A picker takes the panel's place instead of stacking on it. */
	.ut-da-overlay.is-behind {
		visibility: hidden;
	}

	.ut-da-dialog {
		flex: none;
		gap: 18px;
		width: 590px;
		max-width: 100%;
		max-height: 100%;
		padding: 24px;
		border-radius: 24px;
		background: #eef1fb;
		filter: drop-shadow(0 12px 16px rgba(5, 8, 69, 0.18));
		overflow: hidden;
	}

	.ut-da-dialog__header {
		position: static;
		padding: 0;
		background: none;
	}

	.ut-da-iconbtn--close {
		display: inline-flex;
	}

	.ut-da-dialog__header .ut-da-iconbtn--spacer {
		display: none;
	}

	/* Nothing to go back to on the first step (the design's arrow is empty). */
	.ut-da-dialog[data-step="1"] [data-ut-da-back] {
		visibility: hidden;
	}

	/* ------------------------------------------------ step indicator */

	.ut-da-steps {
		display: flex;
		flex: none;
		flex-direction: column;
		gap: 6px;
	}

	.ut-da-steps__labels {
		display: flex;
	}

	.ut-da-steps__label {
		flex: 1 1 0;
		min-width: 0;
		color: rgba(5, 7, 69, 0.6);
		font-size: 12px;
		font-weight: 500;
		line-height: 18px;
		text-align: center;
		visibility: hidden;
	}

	.ut-da-steps__label.is-current {
		visibility: visible;
	}

	.ut-da-steps__bar {
		display: flex;
		gap: 6px;
	}

	.ut-da-steps__bar span {
		flex: 1 1 0;
		height: 4px;
		border-radius: 2px;
		background: var(--utda-blue-020);
	}

	.ut-da-steps__bar span.is-done {
		background: var(--utda-navy);
	}

	/* ------------------------------------------------------- the form */

	.ut-da-form {
		gap: 18px;
		padding: 0;
	}

	.ut-da-cards {
		gap: 18px;
	}

	.ut-da-dialog[data-step="1"] .ut-da-step:not([data-ut-da-step="1"]),
	.ut-da-dialog[data-step="2"] .ut-da-step:not([data-ut-da-step="2"]),
	.ut-da-dialog[data-step="3"] .ut-da-step:not([data-ut-da-step="3"]) {
		display: none;
	}

	.ut-da-card__title {
		font-size: 14px;
	}

	.ut-da-card__icon--phone {
		display: none;
	}

	.ut-da-card__icon--wide {
		display: inline-flex;
	}

	.ut-da-toggle__label {
		font-size: 12px;
	}

	/* Figma 2480:15503 "field-card": 123px, children at 17px — here the 1px
	   border sits outside the 16px padding. */
	.ut-da-card--types {
		gap: 12px;
		padding: 16px;
		border: 1px solid var(--utda-blue-010);
		border-radius: 16px;
	}

	/* The three travel types as one row of text pills (2480:15509). More types
	   (the Reisearten setting takes any number) wrap into further rows: a pill
	   never gets narrower than its label, which does not wrap. With equal
	   shares in one row (flex-basis 0) three types still look as designed. */
	.ut-da-types {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px 16px;
		padding: 4px;
	}

	.ut-da-type {
		flex: 1 1 0;
		justify-content: center;
		min-width: max-content;
		padding: 9px;
		border-width: 1px;
		border-color: var(--utda-blue-020);
		border-radius: 999px;
		background: #fff;
	}

	.ut-da-type[aria-pressed="true"] {
		border-color: #0d49c7;
		background: var(--utda-blue-010);
	}

	.ut-da-type__inner {
		justify-content: center;
		gap: 0;
		padding: 0;
	}

	.ut-da-type__bubble,
	.ut-da-type__hint {
		display: none;
	}

	.ut-da-type__text {
		flex: none;
		align-items: center;
	}

	/* Figma's "normal" for this label is a 21px line: the pill is 41px tall. */
	.ut-da-type__name {
		color: var(--utda-navy);
		font-size: 12.5px;
		letter-spacing: 0;
		line-height: 21px;
		white-space: nowrap;
	}

	.ut-da-chip {
		padding: 4px 12px;
		font-size: 14px;
	}

	.ut-da-chip--add {
		padding: 4px 11px;
	}

	.ut-da-chip--add .ut-da-chip__label {
		font-size: 12px;
	}

	/* The plus is orange in V2 (the exported glyph carries its own grey stroke). */
	.ut-da-chip__plus svg [stroke] {
		stroke: var(--utda-orange);
	}

	/* One travel period: its chip and "Hinzufügen" share the row. */
	.ut-da-chips--stacked {
		flex-direction: row;
		gap: 12px;
	}

	.ut-da-budget__label,
	.ut-da-budget__value,
	.ut-da-notify__label {
		font-size: 14px;
	}

	.ut-da-budget__scale {
		font-size: 12px;
	}

	/* The track is the 8px row the design spaces around; the thumb overhangs. */
	.ut-da-slider,
	.ut-da-slider__input {
		height: 8px;
	}

	/* ------------------------------------------------------ the buttons */

	.ut-da-next {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 13px 24px;
		border: 0;
		border-radius: 999px;
		background: var(--utda-navy);
		color: #fff;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 21px;
		cursor: pointer;
	}

	.ut-da-next:hover,
	.ut-da-next:focus-visible {
		background: #0b1069;
	}

	/* Only the stepped dialog: the period picker's "Übernehmen" is a .ut-da-submit too. */
	.ut-da-dialog[data-step="3"] .ut-da-next,
	.ut-da-dialog[data-step]:not([data-step="3"]) .ut-da-submit {
		display: none;
	}

	/* -------------------------------------------- picker (2480:16543) */

	.ut-da-dialog--picker {
		padding: 24px;
	}

	/* Band and list are one block; only the button sits 18px below. */
	.ut-da-dialog--list {
		gap: 0;
		height: 661px;
		padding: 0 0 24px;
	}

	.ut-da-picker__top {
		display: flex;
		flex: none;
		flex-direction: column;
		padding: 24px;
		background: #f7f9fd;
	}

	.ut-da-dialog--list .ut-da-dialog__header {
		padding: 16px 0;
		background: var(--utda-bg);
	}

	.ut-da-dialog--list .ut-da-search {
		min-width: 300px;
		height: auto;
		margin: 8px 16px;
		padding: 8px 14px;
		border-width: 2px;
		border-radius: 64px;
	}

	.ut-da-dialog--list .ut-da-search__input {
		font-size: 14px;
	}

	.ut-da-dialog--list .ut-da-search__icon svg {
		width: 24px;
		height: 24px;
	}

	.ut-da-dialog--list .ut-da-picker__chips {
		margin: 0;
		padding: 16px;
		filter: drop-shadow(0 2px 5.3px rgba(5, 7, 69, 0.1));
	}

	.ut-da-picker__chips .ut-da-chip {
		padding: 6px 16px;
	}

	.ut-da-dialog--list .ut-da-picker {
		padding: 16px 24px;
		background: #fff;
	}

	.ut-da-dialog--list .ut-da-picker__list {
		gap: 16px;
	}

	.ut-da-dialog--list .ut-da-picker__option {
		padding: 0 15px;
		font-weight: 500;
	}

	.ut-da-picker__footer {
		display: block;
		flex: none;
		margin-top: 18px;
		padding: 0 24px;
	}

	/* Reisezeitraum keeps its own content in the same panel. */
	.ut-da-picker--period {
		padding: 0;
	}
}