/*
 * <pcu-free-ticket-form> (protected/TS/src/ExtraComponents/Pcu/PcuFreeTicketForm.ts), the UUI
 * port of <pc-free-ticket-form>. Figma "Messen und Events 2026" 5244:2524. In 00_public: the
 * form sits on public fair pages for anonymous visitors. UUI tokens only (--uui-*).
 *

 */

pcu-free-ticket-form {
	display: block;
	inline-size: 100%;
	max-inline-size: 600px;
	margin-inline: auto;
}

.pcu-free-ticket-form {
	        background-image: var(--magenta-dashed-border) !important;
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-10);
	box-sizing: border-box;
	padding: var(--uui-spacing-16);

	background: var(--uui-bg-primary);
	color: var(--uui-text-primary);
	text-align: start;
}

/* ---------------------------------------------------------------- stepper */

.pcu-free-ticket-form__stepper {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-2);
}

.pcu-free-ticket-form__track {
	block-size: 4px;
	background: var(--uui-color-gray-200);
}

.pcu-free-ticket-form__bar {
	display: block;
	block-size: 100%;
	border-radius: var(--uui-radius-full);
	background: var(--pcu-free-ticket-form-accent);
	transition: width 0.3s ease;
}

.pcu-free-ticket-form__step-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uui-spacing-10);
	min-block-size: 20px;
}

.pcu-free-ticket-form__step-counter {
	margin-inline-start: auto;
	font-size: var(--uui-text-md-font-size);
	line-height: 19px;
}

/* ---------------------------------------------------------------- fields */

.pcu-free-ticket-form__content {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-6);
}

/* Figma draws the controls 320px wide on two parts; the form owns the width. */
.pcu-free-ticket-form uui-input-field,
.pcu-free-ticket-form uui-select,
.pcu-free-ticket-form .uui-input-field__root,
.pcu-free-ticket-form .uui-input-field__input,
.pcu-free-ticket-form .uui-select__root,
.pcu-free-ticket-form .uui-select__input,
.pcu-free-ticket-form .uui-checkbox__root,
.pcu-free-ticket-form .uui-checkbox__text-wrap {
	inline-size: 100% !important;
	max-inline-size: none !important;
	min-inline-size: 0 !important;
}

.pcu-free-ticket-form uui-input-field.pcu-free-ticket-form__field[size][type][destructive][state][interaction-mode] .uui-input-field__field,
.pcu-free-ticket-form uui-select.pcu-free-ticket-form__field[size][type][state][interaction-mode][menu-position] .uui-select__field {
	gap: var(--uui-spacing-4);
}

.pcu-free-ticket-form uui-input-field.pcu-free-ticket-form__field[size][type][destructive][state][interaction-mode] .uui-input-field__label,
.pcu-free-ticket-form uui-select.pcu-free-ticket-form__field[size][type][state][interaction-mode][menu-position] .uui-select__label,
.pcu-free-ticket-form__label {
	font-size: var(--uui-text-md-font-size);
	font-weight: var(--uui-font-weight-semibold);
	line-height: 19px;
	color: var(--uui-text-primary);
	white-space: normal;
}

/*
 * Library gap (2026-10-16, see PcuCmeSignupForm.css): the published input-field slice has no
 * hint rule for type=default with destructive=true, so the error text renders unstyled.
 */
.pcu-free-ticket-form uui-input-field[destructive="true"] .uui-input-field__hint,
.pcu-free-ticket-form uui-select.pcu-free-ticket-form__field--error[size][type][state][interaction-mode][menu-position] .uui-select__hint,
.pcu-free-ticket-form .pcu-free-ticket-form__field-error {
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-error-primary);
}

/* uui-select has no destructive axis; the trigger takes the error border by hand. */
.pcu-free-ticket-form uui-select.pcu-free-ticket-form__field--error[size][type][state][interaction-mode][menu-position] .uui-select__input {
	box-shadow: inset 0 0 0 1px var(--uui-border-error);
}

/* Radio groups: Figma 16px gap, 16px labels. */
.pcu-free-ticket-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-4);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/* The site stylesheet draws a rule under bare legends. */
.pcu-free-ticket-form .pcu-free-ticket-form__group legend {
	margin-block-end: var(--uui-spacing-4);
	padding: 0;
	border: 0;
	inline-size: auto;
}

.pcu-free-ticket-form uui-checkbox[type="radio"][size][checked][text][state][interaction-mode] .uui-checkbox__label {
	font-size: var(--uui-text-md-font-size);
	font-weight: var(--uui-font-weight-regular);
	line-height: 19px;
	color: var(--uui-text-primary);
}

/* Checkbox rows whose text carries links (uui-checkbox's label is plain text). */
.pcu-free-ticket-form__consent {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-2);
}

.pcu-free-ticket-form__check {
	display: flex;
	align-items: flex-start;
	gap: var(--uui-spacing-4);
}

.pcu-free-ticket-form__check uui-checkbox {
	flex: none;
	inline-size: auto !important;
}

.pcu-free-ticket-form__check .uui-checkbox__root {
	inline-size: auto !important;
}

.pcu-free-ticket-form__check-text {
	font-size: var(--uui-text-md-font-size);
	line-height: 19px;
	cursor: pointer;
}

.pcu-free-ticket-form__check-text a {
	color: var(--uui-text-brand-secondary);
	text-decoration: underline;
}

/* Extra participant: the panel paints no surface (by design); only its heading is restyled. */
.pcu-free-ticket-form__extra .uui-expandable-panel__heading {
	font-size: var(--uui-text-md-font-size);
	font-weight: var(--uui-font-weight-semibold);
	line-height: 19px;
	color: var(--uui-text-primary);
}

.pcu-free-ticket-form__extra-fields {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-6);
	padding-block-start: var(--uui-spacing-6);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.pcu-free-ticket-form__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ---------------------------------------------------------------- actions */

.pcu-free-ticket-form__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--uui-spacing-6);
}

.pcu-free-ticket-form__alert {
	align-self: stretch;
}

/* The alert's text column must be allowed to wrap (flex item default min-inline-size: auto). */
.pcu-free-ticket-form__alert .uui-alert__root,
.pcu-free-ticket-form__alert .uui-alert__text-and-supporting-text,
.pcu-free-ticket-form__alert .uui-alert__content {
	inline-size: 100% !important;
	min-inline-size: 0;
}

/* Figma's pill button: height 40, padding 0 24, 16/21 semibold. */
.pcu-free-ticket-form uui-button.pcu-free-ticket-form__submit[size][hierarchy][state][icon-only][interaction-mode] > .uui-button__control,
.pcu-free-ticket-form uui-button.pcu-free-ticket-form__cta[size][hierarchy][state][icon-only][interaction-mode] > .uui-button__control {
	min-block-size: 40px;
	padding: 0 var(--uui-spacing-6);
	border-radius: var(--uui-radius-full);
	--uui-stroke-radius: var(--uui-radius-full);
}

.pcu-free-ticket-form uui-button.pcu-free-ticket-form__submit[size][hierarchy][state][icon-only][interaction-mode] .uui-button__label,
.pcu-free-ticket-form uui-button.pcu-free-ticket-form__cta[size][hierarchy][state][icon-only][interaction-mode] .uui-button__label {
	font-size: var(--uui-text-md-font-size);
	line-height: 21px;
}

/* ---------------------------------------------------------------- done states */

.pcu-free-ticket-form__done {
	gap: var(--uui-spacing-6);
	align-items: center;
	text-align: center;
}

.pcu-free-ticket-form__done-title,
.pcu-free-ticket-form__offer-title {
	margin: 0;
	font-size: 22px;
	font-weight: var(--uui-font-weight-bold);
	line-height: 29px;
	color: var(--uui-text-primary);
}

.pcu-free-ticket-form__done-text {
	margin: 0;
	font-size: var(--uui-text-md-font-size);
	line-height: 19px;
}

.pcu-free-ticket-form__offer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--uui-spacing-4);
	padding-block-start: var(--uui-spacing-6);
	border-block-start: 1px solid var(--uui-border-secondary);
	align-self: stretch;
}

.pcu-free-ticket-form__offer-title b {
	color: var(--pcu-free-ticket-form-accent);
}

@media (max-width: 800px) {
	.pcu-free-ticket-form {
		padding: var(--uui-spacing-6);
		gap: var(--uui-spacing-8);
	}
}