/* Selora mobile — v5: logo right, full-width inline search. */
.mobile-header,
.mobile-bottom-nav,
.mobile-bottom-nav__spacer {
	display: none;
}

@media (max-width: 768px) {
	body:has([data-selora-mobile-header]) .site-header {
		display: none !important;
	}

	.mobile-header,
	.mobile-bottom-nav {
		--mobile-brand: #2a39c6;
		--mobile-ink: #171a24;
		--mobile-muted: #626b7d;
		font-family: inherit;
	}

	.mobile-header,
	.mobile-header *,
	.mobile-bottom-nav,
	.mobile-bottom-nav * {
		box-sizing: border-box;
	}

	/* Symmetric safe-area padding keeps the brand at viewport center. */
	.mobile-header {
		position: sticky;
		top: 0;
		z-index: 2000;
		display: block;
		width: 100%;
		margin: 0;
		padding: max(12px, env(safe-area-inset-top, 0px))
			max(
				18px,
				env(safe-area-inset-left, 0px),
				env(safe-area-inset-right, 0px)
			)
			12px;
		color: var(--mobile-ink);
		background: rgba(255, 255, 255, 0.85);
		border: 0;
		border-bottom: 1px solid rgba(30, 40, 70, 0.06);
		box-shadow: none;
		-webkit-backdrop-filter: blur(24px) saturate(130%);
		backdrop-filter: blur(24px) saturate(130%);
	}

	.mobile-header .mobile-header__row {
		display: flex;
		align-items: center;
		direction: rtl;
		gap: 12px;
		width: 100%;
		min-width: 0;
	}
	.mobile-header .mobile-header__logo {
		display: block;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		object-fit: contain;
	}
	.mobile-header .mobile-search {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 0;
	}

	.mobile-header .mobile-search__box {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0 3px 0 12px;
		border: 1px solid rgba(48, 60, 92, 0.09);
		border-radius: 12px;
		background: rgba(237, 240, 248, 0.5);
		box-shadow: none;
		transition:
			border-color 0.18s ease,
			background-color 0.18s ease;
	}

	.mobile-header .mobile-search__box:focus-within {
		border-color: rgba(42, 57, 198, 0.45);
		background: rgba(255, 255, 255, 0.68);
	}

	.mobile-header .mobile-search__submit {
		display: grid;
		place-items: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background: transparent;
		color: var(--mobile-muted);
		cursor: pointer;
	}

	.mobile-header .mobile-search__box:focus-within .mobile-search__submit {
		color: var(--mobile-brand);
	}

	.mobile-header .mobile-search__submit svg {
		width: 20px;
		height: 20px;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
	}

	.mobile-header .mobile-search input {
		display: block;
		flex: 1;
		width: 100%;
		min-width: 0;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		outline: 0;
		background: transparent;
		color: var(--mobile-ink);
		font-family: inherit;
		font-size: 16px !important;
		font-weight: 400;
		text-align: right;
		box-shadow: none;
	}

	.mobile-header .mobile-search input::placeholder {
		color: #747c8d;
		font-size: 12px;
		opacity: 1;
	}

	/* Edge-to-edge glass bar: four equal touch targets, no floating card. */
	.mobile-bottom-nav {
		position: fixed;
		inset: auto 0 0;
		z-index: 1990;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
		width: 100%;
		min-height: calc(78px + env(safe-area-inset-bottom, 0px));
		margin: 0;
		padding: 5px max(10px, env(safe-area-inset-right, 0px))
			calc(7px + env(safe-area-inset-bottom, 0px))
			max(10px, env(safe-area-inset-left, 0px));
		border: 0;
		border-top: 1px solid rgba(42, 57, 198, 0.09);
		border-radius: 0;
		background: rgba(255, 255, 255, 0.85);
		box-shadow: 0 -8px 30px rgba(25, 35, 80, 0.035);
		-webkit-backdrop-filter: blur(24px) saturate(130%);
		backdrop-filter: blur(24px) saturate(130%);
	}

	.mobile-bottom-nav .mobile-bottom-nav__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		min-height: 66px;
		margin: 0;
		padding: 5px 2px 2px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--mobile-muted);
		font: inherit;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.18s ease;
	}

	.mobile-bottom-nav .mobile-bottom-nav__icon {
		position: relative;
		display: grid;
		place-items: center;
		width: 52px;
		height: 33px;
		border-radius: 11px;
		background: transparent;
		color: inherit;
		box-shadow: none;
		transform: none;
		transition:
			background-color 0.18s ease,
			transform 0.18s ease;
	}

	.mobile-bottom-nav .mobile-bottom-nav__icon svg {
		width: 23px;
		height: 23px;
		stroke: currentColor;
		stroke-width: 1.65;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.mobile-bottom-nav .mobile-bottom-nav__label {
		color: inherit;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.65;
		white-space: nowrap;
	}

	.mobile-bottom-nav .mobile-bottom-nav__item[aria-current="page"] {
		background: transparent;
		color: var(--mobile-brand);
	}

	.mobile-bottom-nav .mobile-bottom-nav__item[aria-current="page"]::before {
		content: "";
		position: absolute;
		top: -5px;
		left: 50%;
		width: 24px;
		height: 3px;
		border-radius: 0 0 4px 4px;
		background: var(--mobile-brand);
		transform: translateX(-50%);
	}

	.mobile-bottom-nav
		.mobile-bottom-nav__item[aria-current="page"]
		.mobile-bottom-nav__icon {
		color: var(--mobile-brand);
		background: rgba(42, 57, 198, 0.11);
		box-shadow: none;
		transform: none;
	}

	.mobile-bottom-nav .mobile-bottom-nav__item[aria-current="page"] svg {
		stroke-width: 2;
	}

	.mobile-bottom-nav
		.mobile-bottom-nav__item[aria-current="page"]
		.mobile-bottom-nav__label {
		font-weight: 700;
	}

	.mobile-bottom-nav
		.mobile-bottom-nav__item:active
		.mobile-bottom-nav__icon {
		transform: scale(0.94);
		background: rgba(42, 57, 198, 0.14);
	}

	.mobile-bottom-nav .mobile-bottom-nav__badge {
		position: absolute;
		top: -3px;
		right: 0;
		display: grid;
		place-items: center;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border: 2px solid #f9faff;
		border-radius: 20px;
		background: var(--mobile-brand);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.mobile-bottom-nav .mobile-bottom-nav__badge[hidden] {
		display: none;
	}

	.mobile-bottom-nav__spacer {
		display: block;
		height: calc(92px + env(safe-area-inset-bottom, 0px));
	}

	.mobile-bottom-nav .mobile-bottom-nav__item:focus-visible,
	.mobile-header .mobile-search__submit:focus-visible {
		outline: 2px solid var(--mobile-brand);
		outline-offset: 2px;
	}

	@supports not (
		(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
	) {
		.mobile-header,
		.mobile-bottom-nav {
			background: #f9faff;
		}
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.mobile-header .mobile-search__box,
	.mobile-bottom-nav .mobile-bottom-nav__item,
	.mobile-bottom-nav .mobile-bottom-nav__icon {
		transition: none;
	}
}