/* ── Theme tokens (matched to amazing theme: primary #B6E30C, secondary #002864) ── */
:root {
	--tssn-primary: #B6E30C;
	--tssn-primary-hover: #c8f02a;
	--tssn-bg: #091C37;          /* secondary_091 */
	--tssn-bg-2: #1a2333;        /* dark_black   */
	--tssn-border: rgba(182, 227, 12, 0.22);
	--tssn-text: #ffffff;
	--tssn-muted: #a3a3a3;       /* white_a3     */
	--tssn-cta-text: #001330;    /* secondary_001 */
}

#tssn-toast {
	position: fixed;
	bottom: 80px; /* clear the site's fixed bottom navigation bar */
	left: 50%;
	transform: translateX(-50%) translateY(calc(100% + 120px));
	width: calc(100% - 24px);
	max-width: 420px;
	background: linear-gradient(180deg, var(--tssn-bg) 0%, #00112b 100%);
	border: 1px solid var(--tssn-border);
	border-radius: 16px;
	box-shadow:
		0 12px 36px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(182, 227, 12, 0.08),
		0 0 24px rgba(182, 227, 12, 0.12);
	z-index: 99999;
	overflow: hidden;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	will-change: transform;
	direction: rtl;
	font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, -apple-system, BlinkMacSystemFont, sans-serif;
}

#tssn-toast.tssn-visible {
	transform: translateX(-50%) translateY(0);
}

/* Subtle top accent bar in the theme primary color */
#tssn-toast::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--tssn-primary), transparent);
	opacity: 0.9;
}

/* ── Inner layout ─────────────────────────────────────────── */

.tssn-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 12px 16px;
}

.tssn-img-wrap {
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	border-radius: 12px;
	background: var(--tssn-bg-2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tssn-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tssn-text {
	flex: 1;
	min-width: 0;
	text-align: right;
}

.tssn-label {
	font-size: 11px;
	color: var(--tssn-primary);
	margin: 0 0 5px;
	letter-spacing: 0.02em;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tssn-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--tssn-text);
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.tssn-price {
	font-size: 13px;
	color: var(--tssn-muted);
	margin: 0;
	font-weight: 500;
}

/* ── CTA button ──────────────────────────────────────────── */

.tssn-cta {
	display: block;
	margin: 0 16px 16px;
	padding: 12px 14px;
	background: var(--tssn-primary);
	color: var(--tssn-cta-text) !important;
	text-align: center;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
	border-radius: 10px;
	letter-spacing: 0.02em;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 4px 14px rgba(182, 227, 12, 0.25);
}

.tssn-cta:hover,
.tssn-cta:active {
	background: var(--tssn-primary-hover);
	box-shadow: 0 6px 18px rgba(182, 227, 12, 0.35);
	transform: translateY(-1px);
}

/* ── Divider ─────────────────────────────────────────────── */

.tssn-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(182, 227, 12, 0.18), transparent);
	margin: 0 16px 14px;
}

/* ── Close button ────────────────────────────────────────── */

.tssn-close {
	position: absolute;
	top: 10px;
	left: 10px; /* physical left = logical end in RTL — standard close position */
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	cursor: pointer;
	color: var(--tssn-muted);
	font-size: 18px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	z-index: 2;
}

.tssn-close:hover {
	background: rgba(182, 227, 12, 0.12);
	border-color: rgba(182, 227, 12, 0.4);
	color: var(--tssn-primary);
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	#tssn-toast {
		transition: none;
	}
	.tssn-cta {
		transition: none;
	}
}