/**
 * Aparat Stories
 *
 * @package AparatFeed
 */

/* =========================================================
   Stories Wrapper
   ========================================================= */

.aparat-stories {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}


/* =========================================================
   Stories List
   ========================================================= */

.aparat-stories__list {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px 4px 10px;
	margin: 0;
	box-sizing: border-box;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.aparat-stories__list::-webkit-scrollbar {
	display: none;
}


/* =========================================================
   Story Item
   ========================================================= */

.aparat-stories__item {
	flex: 0 0 82px;
	width: 82px;
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	background: transparent;
	cursor: pointer;
	text-align: center;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.aparat-stories__item:focus {
	outline: none;
}

.aparat-stories__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 8px;
}


/* =========================================================
   Story Ring
   ========================================================= */

.aparat-stories__ring {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 82px;
	height: 82px;

	padding: 3px;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#F77737,
			#E1306C,
			#833AB4
		);

	box-sizing: border-box;

	transition:
		transform .2s ease,
		filter .2s ease,
		box-shadow .2s ease;

	will-change: transform;
}


/* Hover */

.aparat-stories__item:hover .aparat-stories__ring {
	transform: scale(1.05);
	filter: brightness(1.08);
}


/* Active / pressed */

.aparat-stories__item:active .aparat-stories__ring {
	transform: scale(.97);
}


/* =========================================================
   Story Image
   ========================================================= */

.aparat-stories__image {
	display: block;

	width: 100%;
	height: 100%;

	overflow: hidden;

	border-radius: 50%;

	background: #eee;
	border: 3px solid #fff;

	box-sizing: border-box;
}

.aparat-stories__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border: 0;
}


/* Placeholder */

.aparat-stories__placeholder {
	display: block;

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			135deg,
			#ddd,
			#f1f1f1
		);
}


/* =========================================================
   Story Title
   ========================================================= */

.aparat-stories__title {
	display: block;

	width: 100%;

	margin-top: 7px;

	overflow: hidden;

	font-size: 12px;
	line-height: 1.5;

	white-space: nowrap;
	text-overflow: ellipsis;

	box-sizing: border-box;
}


/* =========================================================
   Notice
   ========================================================= */

.aparat-stories__notice {
	width: 100%;

	padding: 16px;

	text-align: center;

	background: #f5f5f5;

	border-radius: 8px;

	box-sizing: border-box;
}


/* =========================================================
   Modal
   ========================================================= */

.aparat-stories-modal {
	position: fixed;

	inset: 0;

	z-index: 999999;

	display: none;

	align-items: center;
	justify-content: center;

	padding: 20px;

	box-sizing: border-box;

	background: rgba(0, 0, 0, .96);
}

.aparat-stories-modal.is-open {
	display: flex;
}


/* =========================================================
   Modal Backdrop
   ========================================================= */

.aparat-stories-modal__backdrop {
	position: absolute;

	inset: 0;

	background: rgba(0, 0, 0, .96);

	cursor: pointer;
}


/* =========================================================
   Modal Inner
   ========================================================= */

.aparat-stories-modal__inner {
	position: relative;

	z-index: 2;

	width: min(100%, 440px);
	height: min(92vh, 780px);

	display: flex;

	align-items: center;
	justify-content: center;
}


/* =========================================================
   Modal Content
   ========================================================= */

.aparat-stories-modal__content {
	position: relative;

	width: 100%;
	height: 100%;

	display: flex;

	align-items: center;
	justify-content: center;

	overflow: hidden;
}


/* =========================================================
   Player
   ========================================================= */

.aparat-stories-modal__player {
	position: relative;

	width: min(100%, 440px);
	height: 100%;

	max-height: 780px;

	overflow: hidden;

	border-radius: 16px;

	background: #000;

	box-sizing: border-box;
}

.aparat-stories-modal__player video,
.aparat-stories-modal__player iframe {
	display: block;

	width: 100%;
	height: 100%;

	border: 0;

	object-fit: contain;

	background: #000;
}


/* =========================================================
   Caption
   ========================================================= */

.aparat-stories-modal__caption {
	position: absolute;

	right: 18px;
	left: 18px;
	bottom: 18px;

	z-index: 5;

	color: #fff;

	font-size: 14px;
	line-height: 1.7;

	text-align: right;

	text-shadow:
		0 1px 4px rgba(0, 0, 0, .8);

	pointer-events: none;
}


/* =========================================================
   Modal Top
   ========================================================= */

.aparat-stories-modal__top {
	position: absolute;

	top: 12px;
	right: 12px;
	left: 12px;

	z-index: 10;

	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 10px;
}


/* =========================================================
   Progress
   ========================================================= */

.aparat-stories-modal__progress {
	display: flex;

	gap: 4px;

	width: calc(100% - 46px);

	height: 3px;

	margin-top: 4px;
}

.aparat-stories-modal__progress-item {
	flex: 1;

	height: 3px;

	overflow: hidden;

	border-radius: 20px;

	background: rgba(255, 255, 255, .35);
}

.aparat-stories-modal__progress-item span {
	display: block;

	width: 0;
	height: 100%;

	background: #fff;

	border-radius: inherit;
}

.aparat-stories-modal__progress-item.is-complete span {
	width: 100%;
}

.aparat-stories-modal__progress-item.is-active span {
	transition: width linear;
}


/* =========================================================
   Close Button
   ========================================================= */

.aparat-stories-modal__close {
	width: 36px;
	height: 36px;

	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 36px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(0, 0, 0, .45);

	color: #fff;

	font-size: 28px;
	line-height: 1;

	cursor: pointer;

	transition:
		background .2s ease,
		transform .2s ease;
}

.aparat-stories-modal__close:hover {
	background: rgba(0, 0, 0, .7);
	transform: scale(1.05);
}

.aparat-stories-modal__close:focus {
	outline: none;
}


/* =========================================================
   Previous / Next
   ========================================================= */

.aparat-stories-modal__prev,
.aparat-stories-modal__next {
	position: absolute;

	z-index: 20;

	top: 50%;

	width: 44px;
	height: 64px;

	margin-top: -32px;

	padding: 0;

	border: 0;

	background: rgba(0, 0, 0, .25);

	color: #fff;

	font-size: 48px;
	line-height: 1;

	cursor: pointer;

	transition: background .2s ease;
}

.aparat-stories-modal__prev:hover,
.aparat-stories-modal__next:hover {
	background: rgba(0, 0, 0, .5);
}

.aparat-stories-modal__prev {
	left: calc(50% + 230px);

	border-radius: 10px 0 0 10px;
}

.aparat-stories-modal__next {
	right: calc(50% + 230px);

	border-radius: 0 10px 10px 0;
}

.aparat-stories-modal__prev[hidden],
.aparat-stories-modal__next[hidden] {
	display: none;
}


/* =========================================================
   Loading
   ========================================================= */

.aparat-stories-modal__player.is-loading::after {
	content: '';

	position: absolute;

	top: 50%;
	left: 50%;

	width: 38px;
	height: 38px;

	margin: -19px;

	border: 3px solid rgba(255, 255, 255, .3);

	border-top-color: #fff;

	border-radius: 50%;

	animation:
		aparatStoriesSpin .8s linear infinite;

	pointer-events: none;
}

@keyframes aparatStoriesSpin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   Error State
   ========================================================= */

.aparat-stories-modal__player.is-error::before {
	content: 'پخش این ویدیو امکان‌پذیر نیست';

	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 30;

	transform: translate(-50%, -50%);

	width: calc(100% - 40px);

	padding: 14px 18px;

	border-radius: 10px;

	background: rgba(0, 0, 0, .75);

	color: #fff;

	font-size: 14px;

	line-height: 1.8;

	text-align: center;

	box-sizing: border-box;
}


/* =========================================================
   Body Lock
   ========================================================= */

body.aparat-stories-modal-open {
	overflow: hidden;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

	.aparat-stories__list {
		gap: 12px;

		padding-right: 4px;
		padding-left: 4px;
	}

	.aparat-stories__item {
		flex: 0 0 72px;
		width: 72px;
	}

	.aparat-stories__ring {
		width: 72px;
		height: 72px;
	}

	.aparat-stories__title {
		font-size: 11px;
		margin-top: 6px;
	}


	/* Modal */

	.aparat-stories-modal {
		padding: 0;
	}

	.aparat-stories-modal__inner {
		width: 100%;
		height: 100%;
	}

	.aparat-stories-modal__content {
		width: 100%;
		height: 100%;
	}

	.aparat-stories-modal__player {
		width: 100%;
		height: 100%;

		max-height: none;

		border-radius: 0;
	}


	/* Navigation areas */

	.aparat-stories-modal__prev,
	.aparat-stories-modal__next {
		width: 35%;
		height: 70%;

		top: 15%;

		margin: 0;

		background: transparent;

		font-size: 0;
	}

	.aparat-stories-modal__prev {
		right: 0;
		left: auto;
	}

	.aparat-stories-modal__next {
		left: 0;
		right: auto;
	}

	.aparat-stories-modal__prev:hover,
	.aparat-stories-modal__next:hover {
		background: transparent;
	}


	/* Caption */

	.aparat-stories-modal__caption {
		right: 18px;
		left: 18px;
		bottom: 30px;
	}


	/* Top */

	.aparat-stories-modal__top {
		top: 10px;
		right: 10px;
		left: 10px;
	}
}


/* =========================================================
   Very Small Screens
   ========================================================= */

@media (max-width: 380px) {

	.aparat-stories__list {
		gap: 10px;
	}

	.aparat-stories__item {
		flex-basis: 66px;
		width: 66px;
	}

	.aparat-stories__ring {
		width: 66px;
		height: 66px;
	}

	.aparat-stories__title {
		font-size: 10px;
	}
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.aparat-stories__ring,
	.aparat-stories-modal__close,
	.aparat-stories-modal__prev,
	.aparat-stories-modal__next {
		transition: none;
	}

	.aparat-stories-modal__player.is-loading::after {
		animation: none;
	}

	.aparat-stories-modal__progress-item.is-active span {
		transition: none;
	}
}




.aparat-stories-modal__prev {
	position: absolute;
	top: 50%;
	left: calc(50% + 230px);
	right: auto;
	transform: translateY(-50%);
}

.aparat-stories-modal__next {
	position: absolute;
	top: 50%;
	right: calc(50% + 230px);
	left: auto;
	transform: translateY(-50%);
}


@media (max-width: 767px) {

	.aparat-stories-modal__prev {
		right: 12px;
		left: auto;
	}

	.aparat-stories-modal__next {
		left: 12px;
		right: auto;
	}
}


.aparat-stories__viewport {
	position: relative;
	width: 100%;
}

.aparat-stories__list {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--aparat-stories-gap, 14px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}

.aparat-stories__list::-webkit-scrollbar {
	display: none;
}

.aparat-stories__list.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.aparat-stories__scroll-button {
	position: absolute;
	top: 50%;
	z-index: 20;

	width: 38px;
	height: 38px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.72);
	color: #fff;

	font-size: 32px;
	font-family: Arial, sans-serif;
	line-height: 1;

	transform: translateY(-50%);

	cursor: pointer;

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);

	transition:
		opacity .2s ease,
		background .2s ease,
		transform .2s ease;
}

.aparat-stories__scroll-button:hover {
	background: rgba(0, 0, 0, 0.9);
}

.aparat-stories__scroll-button:active {
	transform: translateY(-50%) scale(.92);
}

.aparat-stories__scroll-button[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* قبلی = راست */
.aparat-stories__scroll-button--prev {
	right: 4px;
	left: auto;
}

/* بعدی = چپ */
.aparat-stories__scroll-button--next {
	left: 4px;
	right: auto;
}

/*
 * روی موبایل کاربر با swipe کار می‌کند،
 * بنابراین فلش‌های نوار را مخفی می‌کنیم.
 */
@media (max-width: 767px) {
	.aparat-stories__scroll-button {
		display: none;
	}
}