/* ============================================================
   Post Slider Lite — slider.css
   ============================================================ */

:root {
	--psl-btn-color:  #e8192c;
	--psl-btn-hover:  #c0121f;
	--psl-btn-size:   44px;
	--psl-speed:      350ms;
	--psl-btn-radius: 50%;
	--psl-shadow:     0 2px 8px rgba(0,0,0,.22);
	--psl-shadow-hover: 0 4px 16px rgba(0,0,0,.30);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.psl-wrapper {
	position: relative;
}

/* ── Progress bar ────────────────────────────────────────── */
.psl-progress-bar {
	width: 100%;
	height: 3px;
	background: rgba(0,0,0,.08);
	border-radius: 2px;
	margin-bottom: 20px;
	overflow: hidden;
}
.psl-progress-fill {
	height: 100%;
	background: var(--psl-btn-color);
	border-radius: 2px;
	transition: width var(--psl-speed) ease;
}

/* ── Slide stage ─────────────────────────────────────────── */
.psl-slide-stage {
	position: relative;
	overflow: hidden;
}
.psl-slide { width: 100%; }

/* Slide transition */
.psl-wrapper[data-transition="slide"] .psl-slide-stage { display: flex; }
.psl-wrapper[data-transition="slide"] .psl-slide {
	flex: 0 0 100%;
	transition: transform var(--psl-speed) cubic-bezier(.4,0,.2,1);
}
.psl-wrapper[data-transition="slide"] .psl-slide--enter-right { transform: translateX(100%); }
.psl-wrapper[data-transition="slide"] .psl-slide--enter-left  { transform: translateX(-100%); }
.psl-wrapper[data-transition="slide"] .psl-slide--active      { transform: translateX(0); }
.psl-wrapper[data-transition="slide"] .psl-slide--exit-left   { transform: translateX(-100%); }
.psl-wrapper[data-transition="slide"] .psl-slide--exit-right  { transform: translateX(100%); }

/* Fade transition */
.psl-wrapper[data-transition="fade"] .psl-slide {
	opacity: 0;
	transition: opacity var(--psl-speed) ease;
	position: absolute; top: 0; left: 0;
	pointer-events: none;
}
.psl-wrapper[data-transition="fade"] .psl-slide--active {
	opacity: 1;
	position: relative;
	pointer-events: auto;
}

/* ── Navigation ──────────────────────────────────────────── */
.psl-nav { margin-top: 24px; }
.psl-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* ── Button base ─────────────────────────────────────────── */
.psl-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--psl-btn-size);
	height:          var(--psl-btn-size);
	border-radius:   var(--psl-btn-radius);
	background:      var(--psl-btn-color);
	color:           #fff;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	flex-shrink:     0;
	box-shadow:      var(--psl-shadow);
	transition:      background var(--psl-speed) ease,
	                 box-shadow  150ms ease,
	                 transform   150ms ease;
	user-select:     none;
	-webkit-user-select: none;
}
.psl-btn svg {
	display:    block;
	flex-shrink: 0;
	width:  calc(var(--psl-btn-size) * 0.44);
	height: calc(var(--psl-btn-size) * 0.44);
}
.psl-btn:hover,
.psl-btn:focus-visible {
	background: var(--psl-btn-hover);
	box-shadow: var(--psl-shadow-hover);
	transform:  scale(1.08);
	color:      #fff;
	outline:    none;
}
.psl-btn:focus-visible {
	outline:        3px solid var(--psl-btn-color);
	outline-offset: 3px;
}
.psl-btn:active { transform: scale(0.95); }

/* ── Disabled ────────────────────────────────────────────── */
.psl-btn--disabled {
	background:     #aaa !important;
	box-shadow:     none !important;
	cursor:         default;
	transform:      none !important;
	pointer-events: none;
}

/* ── Counter ─────────────────────────────────────────────── */
.psl-counter {
	font-size: 14px;
	color: #666;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.psl-counter__current { font-weight: 700; color: #222; }

/* ── Loading ─────────────────────────────────────────────── */
.psl-wrapper.psl-loading .psl-btn {
	opacity: .5;
	pointer-events: none;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.psl-btn,
	.psl-slide,
	.psl-progress-fill { transition: none !important; }
}