/**
 * Floating labels w SPA rezerwacji — układ jak storefront (.lssf-field--float).
 * Nakładka JS: Dt/Rk + label.ls-input-label → .ls-field--float bez przebudowy booking.js.
 */

#lakesystem-booking-root {
	color-scheme: dark;
	--ls-input-bg: rgba(15, 23, 42, 0.6);
	--ls-input-bg-focus: rgba(26, 42, 70, 0.86);
	--ls-input-autofill: rgba(19, 31, 54, 0.95);
}

/* Ukryj etykiety nad polem po upgrade (Dt/Rk) */
#lakesystem-booking-root .ls-float-upgraded > label.ls-float-source-label,
#lakesystem-booking-root .ls-float-upgraded > label[for]:not(.ls-checkbox) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#lakesystem-booking-root .ls-field--float {
	position: relative;
	display: block;
	min-width: 0;
	gap: 0;
}

#lakesystem-booking-root .ls-field--float .ls-field__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform: translateY(-50%);
	color: var(--ls-text-muted);
}

#lakesystem-booking-root .ls-field--float.ls-field--textarea .ls-field__icon {
	top: 14px;
	transform: none;
}

#lakesystem-booking-root .ls-field--float input,
#lakesystem-booking-root .ls-field--float textarea,
#lakesystem-booking-root .ls-field--float select,
#lakesystem-booking-root .ls-field--float .ls-input {
	width: 100% !important;
	min-width: 0;
	min-height: 44px !important;
	height: auto !important;
	padding: 16px 12px 10px 40px !important;
	margin: 0 !important;
	border-radius: 8px;
	border: 1px solid var(--ls-border) !important;
	background: var(--ls-input-bg) !important;
	color: var(--ls-text) !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}

#lakesystem-booking-root .ls-field--float.ls-field--textarea textarea {
	min-height: 9rem !important;
	padding-top: 18px !important;
	resize: vertical;
}

#lakesystem-booking-root .ls-field--float.ls-field--select select {
	appearance: none;
	padding-right: 36px !important;
	background-image: linear-gradient(45deg, transparent 50%, var(--ls-text-dim) 50%),
		linear-gradient(135deg, var(--ls-text-dim) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

#lakesystem-booking-root .ls-field--float.ls-field--code input {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#lakesystem-booking-root .ls-field--float > label {
	position: absolute;
	left: 40px;
	right: 12px;
	top: 50%;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ls-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

#lakesystem-booking-root .ls-field--float.ls-field--textarea > label {
	top: 14px;
	transform: none;
}

#lakesystem-booking-root .ls-field--float:focus-within > label,
#lakesystem-booking-root .ls-field--float:has(input:not(:placeholder-shown)) > label,
#lakesystem-booking-root .ls-field--float:has(textarea:not(:placeholder-shown)) > label,
#lakesystem-booking-root .ls-field--float.has-value > label,
#lakesystem-booking-root .ls-field--float.is-focused > label,
#lakesystem-booking-root .ls-field--float:has(select option:checked:not([value=""])) > label {
	opacity: 0;
	visibility: hidden;
}

#lakesystem-booking-root .ls-field--float input:focus,
#lakesystem-booking-root .ls-field--float textarea:focus,
#lakesystem-booking-root .ls-field--float select:focus {
	outline: none;
	background: var(--ls-input-bg-focus) !important;
	border-color: rgba(34, 211, 238, 0.55) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 0 0 2px rgba(34, 211, 238, 0.14);
}

#lakesystem-booking-root .ls-field--float.has-value input,
#lakesystem-booking-root .ls-field--float.has-value textarea,
#lakesystem-booking-root .ls-field--float:has(input:not(:placeholder-shown)) input,
#lakesystem-booking-root .ls-field--float:has(textarea:not(:placeholder-shown)) textarea {
	background: var(--ls-input-bg) !important;
	color: var(--ls-text) !important;
}

/* Chrome autofill — bez białego tła (jak storefront 0.2.17) */
#lakesystem-booking-root .ls-field--float input:-webkit-autofill,
#lakesystem-booking-root .ls-field--float input:-webkit-autofill:hover,
#lakesystem-booking-root .ls-field--float input:-webkit-autofill:focus,
#lakesystem-booking-root .ls-field--float input:-webkit-autofill:active,
#lakesystem-booking-root .ls-field--float textarea:-webkit-autofill,
#lakesystem-booking-root .ls-field--float textarea:-webkit-autofill:hover,
#lakesystem-booking-root .ls-field--float textarea:-webkit-autofill:focus,
#lakesystem-booking-root .ls-field--float textarea:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ls-text) !important;
	caret-color: var(--ls-text);
	border-color: var(--ls-border) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--ls-input-autofill) inset !important;
	box-shadow: 0 0 0 1000px var(--ls-input-autofill) inset !important;
	transition: background-color 600000s 0s, color 600000s 0s;
}

@media (max-width: 480px) {
	#lakesystem-booking-root .ls-field--float > label {
		font-size: 12px;
	}
}