/**
 * Carousel Slider — frontend styles.
 * All colors / sizes come from per-instance CSS variables set inline.
 */

.cslider-wrap {
	--cs-container-bg: #2a91c8;
	--cs-text: #1a1a1a;
	--cs-title-size: 28px;
	--cs-desc-size: 16px;
	--cs-max-width: 700px;
	--cs-padding: 40px;
	--cs-speed: 600ms;
	--cs-arrow-size: 48px;
	--cs-arrow-bg: #fff;
	--cs-arrow-icon: #1a1a1a;
	--cs-arrow-border: #1a1a1a;
	--cs-arrow-hover-bg: #1a1a1a;
	--cs-arrow-hover-border: #1a1a1a;
	--cs-arrow-hover-icon: #fff;
	--cs-bullet-size: 14px;
	--cs-bullet-spacing: 10px;
	--cs-bullet-bg: #fff;
	--cs-bullet-active-bg: #1a1a1a;
	--cs-bullet-border: #1a1a1a;
	--cs-bullet-hover-bg: #1a1a1a;

	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	max-width: var(--cs-max-width);
}

.cslider-wrap *,
.cslider-wrap *::before,
.cslider-wrap *::after {
	box-sizing: border-box;
}

.cslider {
	position: relative;
	background: var(--cs-container-bg);
	color: var(--cs-text);
	padding: var(--cs-padding);
	border-radius: 4px;
	overflow: hidden;
}

/* Quote marks */
.cslider-quote {
	position: absolute;
	font-family: Georgia, "Times New Roman", serif;
	font-size: calc(var(--cs-title-size) * 2);
	line-height: 1;
	color: var(--cs-text);
	font-weight: 700;
	pointer-events: none;
	opacity: 0.95;
}

.cslider-quote-open {
	top: calc(var(--cs-padding) * 0.4);
	left: calc(var(--cs-padding) * 0.5);
}

.cslider-quote-close {
	bottom: calc(var(--cs-padding) * 0.2);
	right: calc(var(--cs-padding) * 0.5);
}

/* Viewport + track */
.cslider-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.cslider-track {
	display: flex;
	width: 100%;
	will-change: transform;
}

.cslider[data-animation="slide"] .cslider-track {
	transition: transform var(--cs-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.cslider-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	padding: 0 10px;
}

/* Fade mode: stack slides */
.cslider[data-animation="fade"] .cslider-track {
	display: block;
	position: relative;
}

.cslider[data-animation="fade"] .cslider-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cs-speed) ease, visibility var(--cs-speed) ease;
}

.cslider[data-animation="fade"] .cslider-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

/* Slide content */
.cslider-title {
	font-size: var(--cs-title-size);
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var(--cs-text);
	font-weight: 700;
}

.cslider-desc {
	font-size: var(--cs-desc-size);
	line-height: 1.6;
	color: var(--cs-text);
}

.cslider-desc p {
	margin: 0 0 1em;
}

.cslider-desc p:last-child {
	margin-bottom: 0;
}

.cslider-desc a {
	color: inherit;
	text-decoration: underline;
}

.cslider-desc ul,
.cslider-desc ol {
	margin: 0 0 1em 1.4em;
	padding: 0;
}

/* Arrows: top-left and bottom-right per reference */
.cslider-arrow {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cs-arrow-size);
	height: var(--cs-arrow-size);
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--cs-arrow-bg);
	border: 2px solid var(--cs-arrow-border);
	color: var(--cs-arrow-icon);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cslider-arrow svg {
	width: 55%;
	height: 55%;
	display: block;
}

.cslider-arrow:hover,
.cslider-arrow:focus-visible {
	background: var(--cs-arrow-hover-bg);
	border-color: var(--cs-arrow-hover-border);
	color: var(--cs-arrow-hover-icon);
	transform: scale(1.06);
	outline: none;
}

.cslider-arrow-prev {
	top: calc(var(--cs-padding) * 0.5);
	left: calc(var(--cs-padding) * 0.5);
}

.cslider-arrow-next {
	bottom: calc(var(--cs-padding) * 0.5);
	right: calc(var(--cs-padding) * 0.5);
}

/* Reserve vertical space so corner arrows don't overlap content.
   Applied unconditionally; harmless when arrows are hidden. */
.cslider-viewport {
	padding-top: calc(var(--cs-arrow-size) * 0.3);
	padding-bottom: calc(var(--cs-arrow-size) * 0.3);
}

/* Disabled arrow state (non-loop sliders at the ends) */
.cslider-arrow[disabled] {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* Bullets */
.cslider-bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--cs-bullet-spacing);
	margin-top: calc(var(--cs-padding) * 0.6);
	flex-wrap: wrap;
}

.cslider-bullet {
	width: var(--cs-bullet-size);
	height: var(--cs-bullet-size);
	padding: 0;
	border-radius: 50%;
	background: var(--cs-bullet-bg);
	border: 2px solid var(--cs-bullet-border);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cslider-bullet:hover {
	background: var(--cs-bullet-hover-bg);
}

.cslider-bullet.is-active {
	background: var(--cs-bullet-active-bg);
	transform: scale(1.1);
}

/* Grab cursor while swiping */
.cslider.is-dragging .cslider-track {
	transition: none;
	cursor: grabbing;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cslider-track,
	.cslider-slide,
	.cslider-arrow,
	.cslider-bullet {
		transition: none !important;
	}
}

/* Responsive */
@media (max-width: 600px) {
	.cslider-wrap {
		--cs-title-size: 22px;
		--cs-desc-size: 15px;
		--cs-arrow-size: 38px;
		--cs-padding: 24px;
	}

	.cslider-quote {
		font-size: calc(var(--cs-title-size) * 1.6);
	}
}

/* Admin preview empty state */
.cslider-preview-empty {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: #757575;
	font-style: italic;
}