/*
 * Success Stories — global table component.
 * Theme via CSS custom properties scoped to `.ts-stories`.
 * Mobile-first.
 */

.ts-stories {
	--ts-stories-bg: rgba(25, 24, 23, 0.4);
	--ts-stories-border: rgba(116, 116, 116, 0.5);
	--ts-stories-radius: 12px;
	--ts-stories-blur: 35px;
	--ts-stories-divider: linear-gradient(
		270deg,
		rgba(116, 116, 116, 0.5),
		rgba(116, 116, 116, 0.5)
	);

	--ts-stories-head-color: #8b827c;
	--ts-stories-head-size: 1rem;
	--ts-stories-cell-color: #e3e0e0;
	--ts-stories-cell-size: 1rem;

	--ts-stories-amount-bg: rgba(88, 198, 58, 0.1);
	--ts-stories-amount-color: #58c63a;

	--ts-stories-cta-bg: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
	--ts-stories-cta-color: #141313;
	--ts-stories-cta-radius: 12px;
	--ts-stories-cta-shadow: 0 2px 21.2px rgba(243, 152, 31, 0.39);
	--ts-stories-cta-shadow-hover: 0 0 15px rgba(243, 152, 31, 0.4);

	--ts-stories-flag-bg: #fefefe;
	--ts-stories-scrollbar-thumb: #242323;
	--ts-stories-scrollbar-track: #161514;

	position: relative;
	background: var(--ts-stories-bg);
	border-radius: var(--ts-stories-radius);
	backdrop-filter: blur(var(--ts-stories-blur));
	-webkit-backdrop-filter: blur(var(--ts-stories-blur));
	overflow: hidden;
}

.ts-stories::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--ts-stories-border);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

.ts-stories__scroll {
	width: 100%;
	overflow-x: auto;
	scrollbar-color: var(--ts-stories-scrollbar-thumb)
		var(--ts-stories-scrollbar-track);
	scrollbar-width: thin;
}

.ts-stories__scroll::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.ts-stories__scroll::-webkit-scrollbar-track {
	background: var(--ts-stories-bg);
	border-radius: 10px;
}

.ts-stories__scroll::-webkit-scrollbar-thumb {
	background-color: var(--ts-stories-scrollbar-thumb);
	border-radius: 10px;
}

.ts-stories__table {
	margin: 0;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.ts-stories__hide-sm {
	display: none;
}

.ts-stories__head,
.ts-stories__cell {
	background: transparent;
	vertical-align: middle;
}

.ts-stories__head {
	border: 0;
	padding: 30px 6px;
	font-weight: 400;
	font-size: var(--ts-stories-head-size);
	line-height: 1.19;
	text-align: center;
	color: var(--ts-stories-head-color);
}

.ts-stories__cell {
	border: 0;
	padding: 10px 6px;
	font-weight: 500;
	font-size: var(--ts-stories-cell-size);
	line-height: 1.19;
	color: var(--ts-stories-cell-color);
}

.ts-stories__row {
	background-image: var(--ts-stories-divider);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: top;
}

.ts-stories__head:first-child,
.ts-stories__cell:first-child {
	padding-left: 10px;
}

.ts-stories__head:last-child,
.ts-stories__cell:last-child {
	padding-right: 20px;
}

.ts-stories__head--user {
	width: 100px;
}

/* User cell */
.ts-stories__user {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	color: var(--ts-stories-cell-color);
}

.ts-stories__user-media {
	position: relative;
	width: 54px;
	flex-shrink: 0;
	margin-inline: auto;
}

.ts-stories__user-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.ts-stories__user-flag {
	position: absolute;
	top: -3px;
	right: -4px;
	width: 20px;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--ts-stories-flag-bg);
	border-radius: 50%;
	z-index: 2;
}

.ts-stories__user-name {
	font-weight: 500;
}

/* Total amount pill */
.ts-stories__amount {
	display: block;
	width: fit-content;
	padding: 4px 6px;
	margin-inline: auto;
	background: var(--ts-stories-amount-bg);
	color: var(--ts-stories-amount-color);
	border-radius: var(--ts-stories-radius);
	word-break: break-all;
}

/* CTA */
.ts-stories .ts-stories__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 11px;
	background: var(--ts-stories-cta-bg);
	color: var(--ts-stories-cta-color);
	border: 0;
	border-radius: var(--ts-stories-cta-radius);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: var(--ts-stories-cta-shadow);
	transition: box-shadow 0.3s ease;
	white-space: nowrap;
}

.ts-stories .ts-stories__cta:hover,
.ts-stories .ts-stories__cta:focus-visible,
.ts-stories .ts-stories__cta:active {
	color: var(--ts-stories-cta-color);
	box-shadow: var(--ts-stories-cta-shadow-hover);
	text-decoration: none;
}

.ts-stories__cta-arrow {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
}

/* Tablet */
@media (min-width: 576px) {
	.ts-stories__hide-sm {
		display: table-cell;
	}

	.ts-stories__head {
		padding: 12px;
		text-align: left;
	}

	.ts-stories__head--user {
		width: 156px;
		text-align: center;
	}

	.ts-stories__head--total {
		width: 140px;
	}

	.ts-stories__head--cta {
		width: 220px;
	}

	.ts-stories__cell {
		padding: 12px;
	}

	.ts-stories__head:first-child,
	.ts-stories__cell:first-child {
		padding-left: 16px;
	}

	.ts-stories__head:last-child,
	.ts-stories__cell:last-child {
		padding-right: 30px;
	}

	.ts-stories__amount {
		padding-inline: 12px;
		margin-inline: 0;
	}

	.ts-stories .ts-stories__cta {
		padding: 9px 13px;
		font-size: 1rem;
		line-height: 1.19;
	}
}

@media (min-width: 768px) {
	.ts-stories .ts-stories__cta {
		padding: 13px 15px;
	}
}

@media (min-width: 992px) {
	.ts-stories__head--user {
		width: 255px;
		text-align: left;
	}

	.ts-stories__user {
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		text-align: left;
	}

	.ts-stories__user-media {
		width: 80px;
		margin-inline: 0;
	}

	.ts-stories__user-flag {
		width: 30px;
	}
}

@media (min-width: 1200px) {
	.ts-stories__user {
		gap: 16px;
	}
}