/**
 * Bottom category sheet + action button styles
 * (extends mobile-app.css mobile block)
 */

.osram-cat-sheet {
	display: none;
}

@media (max-width: 849px) {
	.osram-bottom-nav__item--action {
		appearance: none;
		-webkit-appearance: none;
	}

	.osram-bottom-nav__item--action.is-open,
	.osram-bottom-nav__item--action[aria-expanded="true"] {
		color: var(--color-accent);
	}

	.osram-bottom-nav__item--action.is-open .osram-bottom-nav__label,
	.osram-bottom-nav__item--action[aria-expanded="true"] .osram-bottom-nav__label {
		font-weight: 600;
	}

	.osram-cat-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 10000;
		pointer-events: none;
		visibility: hidden;
	}

	.osram-cat-sheet.is-open {
		pointer-events: auto;
		visibility: visible;
	}

	.osram-cat-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: color-mix(in srgb, var(--color-text-primary) 42%, transparent);
		opacity: 0;
		transition: opacity 280ms ease;
	}

	.osram-cat-sheet.is-open .osram-cat-sheet__backdrop {
		opacity: 1;
	}

	.osram-cat-sheet__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: min(78vh, 640px);
		display: flex;
		flex-direction: column;
		background: var(--color-surface);
		border-radius: 16px 16px 0 0;
		border-top: 1px solid var(--color-border);
		padding-bottom: var(--osram-bottom-nav-offset);
		transform: translateY(110%);
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		box-shadow: 0 -8px 32px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
	}

	.osram-cat-sheet.is-open .osram-cat-sheet__panel {
		transform: translateY(0);
	}

	.osram-cat-sheet__handle {
		width: 36px;
		height: 4px;
		margin: 10px auto 0;
		border-radius: 999px;
		background: var(--color-border);
		flex-shrink: 0;
	}

	.osram-cat-sheet__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px 10px;
		border-bottom: 1px solid var(--color-border);
		flex-shrink: 0;
	}

	.osram-cat-sheet__title {
		margin: 0;
		font-family: var(--font-main);
		font-size: 17px;
		font-weight: 600;
		color: var(--color-text-primary);
		letter-spacing: -0.01em;
	}

	.osram-cat-sheet__close {
		appearance: none;
		border: 0;
		background: var(--color-section-soft);
		color: var(--color-text-primary);
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.osram-cat-sheet__body {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 0 calc(12px + var(--osram-bottom-nav-safe));
		overscroll-behavior: contain;
	}

	.osram-cat-sheet__all {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4px 12px 10px;
		padding: 14px 16px;
		border-radius: var(--radius-medium);
		background: var(--color-section-soft);
		color: var(--color-text-primary);
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
	}

	.osram-cat-sheet__all:hover,
	.osram-cat-sheet__all:focus {
		color: var(--color-text-primary);
		background: var(--color-background);
	}

	.osram-cat-sheet__list,
	.osram-cat-sheet__sublist {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.osram-cat-sheet__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px;
		color: var(--color-text-primary);
		text-decoration: none;
		font-size: 15px;
		font-weight: 500;
		border-bottom: 1px solid var(--color-border);
		-webkit-tap-highlight-color: transparent;
	}

	.osram-cat-sheet__link:hover,
	.osram-cat-sheet__link:focus {
		background: var(--color-section-soft);
		color: var(--color-text-primary);
	}

	.osram-cat-sheet__link--child {
		padding-left: 36px;
		font-size: 14px;
		font-weight: 400;
		color: var(--color-text-secondary);
		border-bottom-color: transparent;
	}

	.osram-cat-sheet__item.has-children > .osram-cat-sheet__link {
		border-bottom: 0;
	}

	.osram-cat-sheet__sublist {
		background: var(--color-background);
		border-bottom: 1px solid var(--color-border);
	}

	.osram-cat-sheet__count {
		min-width: 28px;
		text-align: right;
		font-size: 12px;
		font-weight: 500;
		color: var(--color-text-secondary);
	}

	.osram-cat-sheet__empty {
		margin: 24px 20px;
		text-align: center;
		color: var(--color-text-secondary);
		font-size: 14px;
	}

	body.osram-cat-sheet-open {
		overflow: hidden;
	}

	/* Keep FABs above sheet? No — hide under overlay; sheet is primary */
	body.osram-cat-sheet-open .fab-container {
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms ease;
	}
}

@media (min-width: 850px) {
	.osram-cat-sheet {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.osram-cat-sheet__backdrop,
	.osram-cat-sheet__panel {
		transition: none;
	}
}