/**
 * Reading Progress Bar styles
 *
 * @package FrontBlocks
 */

/* Add padding to body to prevent content overlap */
body.frbl-reading-progress-active {
	padding-right: 40px;
}

.frbl-reading-progress-bar {
	position: fixed;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 60%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.08);
	z-index: 9999;
	pointer-events: none;
	border-radius: 50px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.frbl-reading-progress-fill {
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, var(--wp--preset--color--primary, #3b82f6) 0%, var(--wp--preset--color--primary, #2563eb) 100%);
	transition: height 0.15s ease-out;
	border-radius: 50px;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* Smooth scroll transition */
@media (prefers-reduced-motion: no-preference) {
	.frbl-reading-progress-fill {
		transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* Accessibility: respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	.frbl-reading-progress-fill {
		transition: none;
	}
}

/* Mobile adjustments */
@media (max-width: 768px) {
	body.frbl-reading-progress-active {
		padding-right: 30px;
	}

	.frbl-reading-progress-bar {
		width: 6px;
		right: 12px;
		height: 50%;
	}
}

/* For RTL languages, position on the left */
body[dir="rtl"].frbl-reading-progress-active {
	padding-right: 0;
	padding-left: 40px;
}

[dir="rtl"] .frbl-reading-progress-bar {
	right: auto;
	left: 20px;
}

@media (max-width: 768px) {
	body[dir="rtl"].frbl-reading-progress-active {
		padding-left: 30px;
	}

	[dir="rtl"] .frbl-reading-progress-bar {
		left: 12px;
	}
}