/* =========================================================
   Product Icon System — Lucide / outline / currentColor
   ========================================================= */

:root {
	--icon-size-xs: 16px;
	--icon-size-sm: 18px;
	--icon-size-md: 24px;
	--icon-size-lg: 28px;
	--icon-size-xl: 32px;

	--icon-color-default: var(--text, #1f2430);
	--icon-color-muted: var(--muted, #7b8090);
	--icon-color-primary: var(--primary, #4f46e5);
	--icon-color-on-brand: #ffffff;
	--icon-stroke-width: 2;
}

.app-icon {
	display: block;
	width: var(--icon-size, var(--icon-size-md));
	height: var(--icon-size, var(--icon-size-md));
	flex: 0 0 auto;
	color: inherit;
	stroke: currentColor;
	fill: none;
	stroke-width: var(--icon-stroke-width);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.app-icon--xs { --icon-size: var(--icon-size-xs); }
.app-icon--sm { --icon-size: var(--icon-size-sm); }
.app-icon--md { --icon-size: var(--icon-size-md); }
.app-icon--lg { --icon-size: var(--icon-size-lg); }
.app-icon--xl { --icon-size: var(--icon-size-xl); }

.app-icon--muted { color: var(--icon-color-muted); }
.app-icon--primary { color: var(--icon-color-primary); }
.app-icon--on-brand { color: var(--icon-color-on-brand); }

.app-icon--module {
	color: var(--module-main, var(--module-color, var(--icon-color-primary)));
}

/* Module tile — tinted surface with clearer module color */
.service-badge {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	padding: 0;
	margin: 0 auto 10px;
	display: grid;
	place-items: center;
	position: relative;
	overflow: visible;
	isolation: isolate;
	background:
		radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--module-soft, var(--module-main, var(--module-color, var(--primary)))) 62%, #ffffff) 0%, transparent 58%),
		linear-gradient(
			145deg,
			color-mix(in srgb, var(--module-soft, var(--module-main, var(--module-color, var(--primary)))) 66%, #ffffff) 0%,
			color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 52%, #ffffff) 100%
		);
	border: 1px solid color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 46%, transparent);
	box-shadow:
		0 4px 10px color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 28%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.68);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.24s ease,
		background 0.24s ease,
		border-color 0.24s ease;
}

.service-badge::before {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 46%);
	pointer-events: none;
	z-index: 0;
}

/* فضا برای pill «به زودی» / «نیاز به مجوز» بالای tile */
.service-item:has(.coming-soon-pill) {
	padding-top: 13px;
}

.coming-soon-pill {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
	box-sizing: border-box;
	pointer-events: none;
	color: #fff;
	background: color-mix(in srgb, var(--module-main, var(--module-color, #4338ca)) 84%, #111827 16%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--module-main, var(--module-color, #4338ca)) 34%, transparent);
}

.service-badge::after {
	display: none;
}

.service-badge .app-icon {
	position: relative;
	z-index: 1;
	color: color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 94%, #0f172a 6%);
	filter: saturate(1.18) contrast(1.06);
	--icon-stroke-width: 2.15;
}

.service-badge .app-icon :is(path, rect, circle, line, polyline, polygon) {
	fill: none;
	stroke: currentColor;
}

.service-badge.is-coming-soon .app-icon {
	opacity: 0.42;
	color: var(--icon-color-muted);
	filter: none;
}

.service-item.is-disabled .service-badge,
.submodule-item.is-disabled .service-badge {
	opacity: 0.82;
	box-shadow: none;
}

.service-item:hover .service-badge {
	transform: translateY(-2px);
	box-shadow:
		0 12px 24px color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 32%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.service-item:hover .service-badge::before {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.34) 0%, transparent 46%);
}

.service-item:hover .service-badge .app-icon {
	transform: scale(1.04);
	transition: transform 0.24s ease;
}

html[data-bs-theme="dark"] .service-badge {
	background:
		radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--module-soft, var(--module-main, var(--module-color, var(--primary)))) 52%, var(--card, #111827)) 0%, transparent 58%),
		linear-gradient(
			145deg,
			color-mix(in srgb, var(--module-soft, var(--module-main, var(--module-color, var(--primary)))) 56%, var(--card, #111827)) 0%,
			color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 46%, var(--card, #111827)) 100%
		);
	border-color: color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 50%, transparent);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.36),
		0 0 0 1px color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 22%, transparent);
}

html[data-bs-theme="dark"] .service-badge::before {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, transparent 46%);
}

html[data-bs-theme="dark"] .service-badge .app-icon {
	color: color-mix(in srgb, var(--module-main, var(--module-color, var(--primary))) 90%, #f8fafc 10%);
	filter: saturate(1.16) contrast(1.08);
}

/* Bottom navigation — Lucide tiles aligned with landing icon system */
.app-bottom-nav__icon {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--app-muted, var(--icon-color-muted));
	background: color-mix(in srgb, var(--app-text, #1f2430) 4%, transparent);
	border: 1px solid color-mix(in srgb, var(--app-border, rgba(15, 23, 42, 0.1)) 80%, transparent);
	transition:
		background 0.22s ease,
		color 0.22s ease,
		border-color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.app-bottom-nav__link .app-icon,
.app-bottom-nav__button .app-icon {
	margin: 0;
	--icon-size: 22px;
}

.app-bottom-nav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.68rem;
	font-weight: 650;
	line-height: 1.2;
	color: var(--app-muted, var(--icon-color-muted));
	transition: color 0.22s ease, font-weight 0.22s ease;
}

.app-bottom-nav__link.is-active .app-bottom-nav__icon,
.app-bottom-nav__button.is-active .app-bottom-nav__icon {
	color: var(--app-primary-strong, var(--icon-color-primary));
	background: color-mix(in srgb, var(--app-primary, var(--primary, #4f46e5)) 16%, transparent);
	border-color: color-mix(in srgb, var(--app-primary, var(--primary, #4f46e5)) 28%, transparent);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--app-primary, var(--primary, #4f46e5)) 18%, transparent);
}

.app-bottom-nav__link.is-active .app-bottom-nav__label,
.app-bottom-nav__button.is-active .app-bottom-nav__label {
	color: var(--app-primary-strong, var(--icon-color-primary));
	font-weight: 800;
}

@media (hover: hover) {
	.app-bottom-nav__link:hover .app-bottom-nav__icon,
	.app-bottom-nav__button:hover .app-bottom-nav__icon {
		color: var(--app-primary-strong, var(--icon-color-primary));
		background: color-mix(in srgb, var(--app-primary, var(--primary, #4f46e5)) 12%, transparent);
		border-color: color-mix(in srgb, var(--app-primary, var(--primary, #4f46e5)) 22%, transparent);
	}

	.app-bottom-nav__link:hover .app-bottom-nav__label,
	.app-bottom-nav__button:hover .app-bottom-nav__label {
		color: var(--app-primary-strong, var(--icon-color-primary));
	}
}

.app-bottom-nav__link.is-active::after,
.app-bottom-nav__button.is-active::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--app-primary-strong, var(--icon-color-primary));
	opacity: 0.9;
}

.app-bottom-nav__brand {
	background: transparent !important;
}

.app-bottom-nav__brand::after {
	display: none;
}

.app-bottom-nav__brand-shell {
	width: 44px;
	height: 44px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--app-primary, #3b82f6) 14%, #fff), #fff);
	border: 1px solid color-mix(in srgb, var(--app-primary, #3b82f6) 24%, transparent);
	box-shadow:
		0 10px 24px color-mix(in srgb, var(--app-primary, #3b82f6) 22%, transparent),
		0 2px 6px rgba(15, 23, 42, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.app-bottom-nav__brand-logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 8px;
}

html[data-bs-theme="dark"] .app-bottom-nav__icon {
	background: color-mix(in srgb, var(--app-surface-soft, #1e293b) 88%, transparent);
	border-color: color-mix(in srgb, var(--app-border, rgba(226, 232, 240, 0.14)) 90%, transparent);
}

html[data-bs-theme="dark"] .app-bottom-nav__brand-shell {
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--app-primary, #3b82f6) 22%, #111827), #111827);
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.34),
		0 0 0 1px color-mix(in srgb, var(--app-primary, #3b82f6) 18%, transparent);
}

html[data-bs-theme="dark"] .app-bottom-nav__brand-logo {
	filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.24));
}

@media (hover: hover) {
	.app-bottom-nav__brand:hover .app-bottom-nav__brand-shell {
		transform: translateY(-2px);
		box-shadow:
			0 14px 28px color-mix(in srgb, var(--app-primary, #3b82f6) 26%, transparent),
			0 4px 10px rgba(15, 23, 42, 0.1);
	}
}

.app-bottom-nav__menu-icon {
	width: 36px;
	height: 36px;
	margin: 0;
}

.app-bottom-nav__menu-icon .app-icon {
	--icon-size: 22px;
}

@media (max-width: 359px) {
	.app-bottom-nav__icon,
	.app-bottom-nav__menu-icon {
		width: 36px;
		height: 36px;
		border-radius: 11px;
	}

	.app-bottom-nav__link .app-icon,
	.app-bottom-nav__button .app-icon,
	.app-bottom-nav__menu-icon .app-icon {
		--icon-size: 20px;
	}

	.app-bottom-nav__brand-shell {
		width: 46px;
		height: 46px;
		border-radius: 16px;
	}

	.app-bottom-nav__brand-logo {
		width: 30px;
		height: 30px;
	}

	.app-bottom-nav__label {
		font-size: 0.64rem;
	}
}

/* Spotlight strips */
.spot-action__icon .app-icon,
.spot-slide__icon .app-icon {
	margin: 0 auto;
}

.spot-action--primary .spot-action__icon .app-icon {
	color: var(--icon-color-on-brand);
}

.spot-action--muted .spot-action__icon .app-icon,
.spot-action--muted .spot-action__icon {
	opacity: 0.85;
}

.spot-slide__icon .app-icon {
	color: var(--icon-color-on-brand);
}

@media (max-width: 390px) {
	.service-badge {
		width: 54px;
		height: 54px;
		border-radius: 15px;
	}

	.service-badge .app-icon {
		--icon-size: 22px;
	}
}

@media (min-width: 640px) {
	.service-badge .app-icon {
		--icon-size: 26px;
	}
}