@layer components {
	/* ── Base: Modal Sheet ───────────────────────── */

	.modal-sheet {
		border: none;
		padding: 0;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		z-index: var(--filter-input-modal-z);
		background: none;

		&::backdrop {
			background: rgba(0, 0, 0, 0.45);
		}
	}

	.modal-sheet-inner {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		background: var(--filter-input-bg);
		border-top-left-radius: var(--radius-4xl);
		border-top-right-radius: var(--radius-4xl);
		overflow: hidden;
		transform: translateY(100%);
		transition: transform 0.3s ease;

		.modal-sheet[open] & {
			transform: translateY(0);
		}
	}

	.modal-sheet-header {
		display: flex;
		align-items: center;
		gap: var(--gap-sm);
		padding: var(--padding-xs);
		padding-bottom: 0;
		flex-shrink: 0;
		position: sticky;
		top: 0;
		background: var(--filter-input-bg);
		z-index: 1;
	}

	.modal-sheet-header-title {
		flex: 1;
		font-size: var(--fs-lg);
		font-weight: var(--font-weight-bold);
	}

	.modal-sheet-close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: var(--size-10);
		height: var(--size-10);
		border: none;
		background: none;
		cursor: pointer;
		border-radius: var(--radius-full);
		transition: background-color 0.2s ease;
		margin-left: auto;

		svg {
			width: var(--size-8);
			height: var(--size-8);
		}

		&:focus-visible {
			outline-offset: -7px;
		}
	}

	.modal-sheet-back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		gap: var(--gap-sm);
		border: none;
		background: none;
		cursor: pointer;
		border-radius: var(--radius-full);
		transition: background-color 0.2s ease;

		svg {
			width: var(--size-6);
			height: var(--size-6);
		}
	}

	/* ── Mobile Filter ───────────────────────────── */

	.mobile-filter-inner {
		max-height: 90vh;
		display: flex;
		flex-direction: column;
	}

	.mobile-filter-screens {
		display: grid;
		overflow: hidden;
	}

	.mobile-filter-screen {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		height: 0;
		overflow: hidden;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		background: var(--filter-input-bg);

		&.is-active {
			height: auto;
			max-height: calc(90vh - 120px);
			overflow-y: auto;
			overflow-x: hidden;
			transform: translateX(0);
		}

		&.is-exiting {
			height: 0;
			overflow: hidden;
			transform: translateX(-30%);
		}
	}

	.mobile-filter-menu {
		list-style: none;
		flex: 1;
		overflow-y: auto;
		padding: var(--padding-xs);
	}

	.mobile-filter-menu-item {
		border-bottom: var(--border-xs) solid var(--filter-input-border-color);
	}

	.mobile-filter-menu-btn {
		display: flex;
		align-items: center;
		gap: var(--gap-sm);
		width: 100%;
		padding: var(--padding-xs) 0;
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--fs-sm);
		text-align: left;
		transition: background-color 0.15s ease;
	}

	.mobile-filter-menu-label {
		flex: 1;
		font-weight: var(--font-weight-medium);
	}

	.mobile-filter-menu-caret {
		display: flex;
		align-items: center;
		flex-shrink: 0;

		svg {
			width: var(--size-5);
			height: var(--size-5);
		}
	}

	.mobile-filter-screen .filter-input-list {
		flex: 1;
		overflow-y: auto;
		max-height: none;
		padding-top: var(--padding-xs);
	}

	.modal-sheet-inner .filter-input-actions {
		flex-shrink: 0;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
	}

	.mobile-filter-screen .filter-input-item-label {
		padding: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		svg,
		.filter-input-dropdown,
		.filter-input-modal-panel {
			transition: none;
		}
	}

	/* ── Toggle Button ──────────────────────── */
	.mobile-togglers {
		display: flex;
		justify-content: space-between;
	}

	.toggle-filter-modal {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap-sm);

		svg {
			width: var(--size-6);
			height: var(--size-6);
		}
	}

	/* ── Native Sort Select ─────────────────── */
	.filter-sort-select-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Gestaltet wie .toggle-filter-modal: Icon + Text, nativer Picker */
	@media (max-width: 991.999px) {
		.filter-sort-select {
			appearance: none;
			padding-left: var(--filter-sort-icon-space);
			cursor: pointer;
		}

		.filter-sort-icon {
			left: 0;
		}

		.filter-sort-caret {
			display: none;
		}
	}

	/* ── Hide Desktop ──────────────────────── */
	@media (min-width: 992px) {
		.modal-sheet,
		.toggle-filter-modal {
			display: none;
		}
	}
}