/**
 * Article Tools Refsam - السلايدر والشريط الأخباري.
 * All classes start with: atr
 */

/* ===== السلايدر ===== */
.atr-slider {
	position: relative;
	max-width: 100%;
	margin: 4px 0;
	overflow: hidden;
}

.atr-slider-track {
	display: flex;
	transition: transform 0.5s ease;
}

.atr-slide {
	flex: 0 0 100%;
	display: block;
	margin: 0;
	text-decoration: none;
}

.atr-slide-media {
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--atr-h, 450px);
	overflow: hidden;
	background: var(--atr-media-bg, #f0f0f1);
}

.atr-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atr-slider--auto .atr-slide-media img {
	width: auto;
	max-width: 100%;
}

.atr-slide-title {
	display: block;
	position: relative;
	padding: 12px 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: start;
	color: #ffffff;
	background-color: #111827;
}

.atr-slide-title-long {
	display: inline;
}

.atr-slide-title-short {
	display: none;
}

.atr-slide-title-tooltip {
	position: absolute;
	left: 0.5%;
	right: 0.5%;
	bottom: calc(100% + 10px);
	z-index: 5;
	padding: 10px 12px;
	border-radius: 8px;
	text-align: center;
	color: var(--atr-tip-color, #ffffff);
	font-size: var(--atr-tip-size, 15px);
	font-weight: 700;
	line-height: 1.5;
	background: var(--atr-tip-bg, #111827);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.atr-slide-title-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: var(--atr-tip-bg, #111827);
}

.atr-slide-title:hover .atr-slide-title-tooltip,
.atr-slide-title:focus-within .atr-slide-title-tooltip {
	opacity: 1;
	visibility: visible;
}

.atr-slide-tip-title {
	display: block;
}

.atr-slide-tip-date {
	display: block;
	width: fit-content;
	margin: 6px auto 0;
	padding: 12px;
	color: var(--atr-tip-date-color, #ffffff);
	font-size: var(--atr-tip-date-size, 13px);
	background: var(--atr-tip-date-bg, transparent);
	border-radius: 4px;
}

.atr-slider-arrow {
	position: absolute;
	top: calc(var(--atr-h, 450px) / 2);
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.atr-slider-arrow:hover {
	background: rgba(0, 0, 0, 0.78);
}

.atr-slider-prev {
	inset-inline-start: 12px;
}

.atr-slider-next {
	inset-inline-end: 12px;
}

.atr-slider-dots {
	position: absolute;
	top: calc(var(--atr-h, 400px) - 22px);
	inset-inline: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.atr-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.atr-slider-dot.is-active {
	background: #ffffff;
}

/* ===== الشريط الأخباري ===== */
.atr-ticker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--atr-bg, #d43a3a);
}

.atr-ticker + .atr-slider,
.atr-slider + .atr-ticker {
	margin-top: 0;
}

.atr-ticker-label {
	flex: 0 0 auto;
	padding-inline-end: 12px;
	border-inline-end: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--atr-color, #ffffff);
	font-size: var(--atr-size, 15px);
	font-weight: 800;
}

.atr-ticker-viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.atr-ticker-track {
	display: flex;
	width: max-content;
	animation: atr-ticker-scroll var(--atr-dur, 30s) linear infinite;
}

.atr-ticker:hover .atr-ticker-track {
	animation-play-state: paused;
}

.atr-ticker[data-atr-ready] .atr-ticker-track {
	animation: none;
	will-change: transform;
}

.atr-ticker[data-dir="rtl"] .atr-ticker-track {
	animation-direction: reverse;
}

.atr-ticker-items {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.atr-ticker-item {
	white-space: nowrap;
	margin-inline-end: 18px;
	padding: 5px 14px;
	border-radius: 6px;
	background: var(--atr-item-bg, transparent);
	color: var(--atr-color, #ffffff);
	font-size: var(--atr-size, 15px);
	font-weight: 600;
	text-decoration: none;
}

.atr-ticker-item:hover {
	text-decoration: underline;
	color: inherit;
}

@keyframes atr-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.atr-ticker-track {
		animation: none;
	}

	.atr-ticker-viewport {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.atr-slide-media {
		height: var(--atr-h-mobile, 330px);
	}

	.atr-slider-arrow {
		top: calc(var(--atr-h-mobile, 330px) / 2);
	}

	.atr-slide-title-long {
		display: none;
	}

	.atr-slide-title-short {
		display: inline;
	}
}