/*!
 * Sentio for Elementor - slideshow widget
 * Extracted from frontend.css during Batch 7 mechanical extraction (2026-04-19)
 */

/* =========================================================================
   Slideshow Widget
   ========================================================================= */

/* Wrapper */
.sentio-slideshow {
	position: relative;
	overflow: hidden;
}

.sentio-slideshow .swiper-slide {
	position: relative;
	overflow: hidden;
}

/* Background Layer */
.sentio-slideshow__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Overlay */
.sentio-slideshow__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Ken Burns */
.sentio-slideshow__ken-burns {
	transition: none;
}

.sentio-slideshow__ken-burns--in {
	transform: scale(1);
}

.sentio-slideshow__ken-burns--in.sentio-slideshow__ken-burns--active {
	animation: sentio-kb-in 10s ease-out forwards;
}

.sentio-slideshow__ken-burns--out {
	transform: scale(1.2);
}

.sentio-slideshow__ken-burns--out.sentio-slideshow__ken-burns--active {
	animation: sentio-kb-out 10s ease-out forwards;
}

@keyframes sentio-kb-in {
	from { transform: scale(1); }
	to   { transform: scale(1.2); }
}

@keyframes sentio-kb-out {
	from { transform: scale(1.2); }
	to   { transform: scale(1); }
}

/* Inner - positioning wrapper */
.sentio-slideshow__inner {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	z-index: 2;
	padding: 30px;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

/* Horizontal Positioning - Global (prefix classes) */
.sentio-slideshow--h-left .sentio-slideshow__inner   { justify-content: flex-start; }
.sentio-slideshow--h-center .sentio-slideshow__inner  { justify-content: center; }
.sentio-slideshow--h-right .sentio-slideshow__inner   { justify-content: flex-end; }

/* Vertical Positioning - Global (prefix classes) */
.sentio-slideshow--v-top .sentio-slideshow__inner     { align-items: flex-start; }
.sentio-slideshow--v-middle .sentio-slideshow__inner   { align-items: center; }
.sentio-slideshow--v-bottom .sentio-slideshow__inner   { align-items: flex-end; }

/* Per-Slide Horizontal Overrides */
.sentio-slideshow__inner--h-left   { justify-content: flex-start !important; }
.sentio-slideshow__inner--h-center { justify-content: center !important; }
.sentio-slideshow__inner--h-right  { justify-content: flex-end !important; }

/* Per-Slide Vertical Overrides */
.sentio-slideshow__inner--v-top    { align-items: flex-start !important; }
.sentio-slideshow__inner--v-middle { align-items: center !important; }
.sentio-slideshow__inner--v-bottom { align-items: flex-end !important; }

/* Content */
.sentio-slideshow__content {
	max-width: 66%;
	text-align: center;
}

/* Title */
.sentio-slideshow__title {
	font-size: 2em;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
	color: #fff;
}

/* Description */
.sentio-slideshow__description {
	font-size: 1em;
	margin: 0 0 20px;
	line-height: 1.6;
	color: #fff;
}

/* Button */
.sentio-slideshow__button {
	display: inline-block;
	padding: 10px 28px;
	border: 2px solid #fff;
	border-radius: 3px;
	color: #fff;
	background: transparent;
	text-decoration: none;
	font-size: 0.9em;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sentio-slideshow__button:hover {
	background-color: #fff;
	color: #333;
}

/* Navigation Arrows */
.sentio-slideshow__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	font-size: 25px;
	color: rgba(255, 255, 255, 0.9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.sentio-slideshow__arrow:hover {
	color: #fff;
}

.sentio-slideshow__arrow--prev {
	left: 10px;
}

.sentio-slideshow__arrow--next {
	right: 10px;
}

.sentio-slideshow__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

/* Arrow Styles — Circle */
.sentio-slideshow--arrows-circle .sentio-slideshow__arrow {
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
}

.sentio-slideshow--arrows-circle .sentio-slideshow__arrow:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

/* Arrow Styles — Square */
.sentio-slideshow--arrows-square .sentio-slideshow__arrow {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.3);
}

.sentio-slideshow--arrows-square .sentio-slideshow__arrow:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

/* Pagination — Shared */
.sentio-slideshow__pagination {
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	z-index: 10;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Pagination — Dots (Bullets) */
.sentio-slideshow__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.sentio-slideshow__dot--active {
	background-color: #fff;
	transform: scale(1.2);
}

/* Pagination — Fraction */
.sentio-slideshow__pagination--fraction {
	font-size: 16px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.08em;
	gap: 4px;
	padding: 6px 16px;
	border-radius: 4px;
	line-height: 1;
	width: auto;
	left: 50%;
	transform: translateX(-50%);
}

.sentio-slideshow__pagination--fraction .swiper-pagination-current {
	color: #fff;
	font-size: 1.2em;
}

.sentio-slideshow__pagination--fraction .swiper-pagination-total {
	font-size: 0.9em;
}

/* Fraction position variants — P1 polish 2026-04-21.
 * Override the default (bottom-center) anchor when user picks a different one
 * via the `fraction_position` control (prefix_class: sentio-slideshow--fraction-pos-).
 * Each variant resets top/right/bottom/left/transform so the pill anchors cleanly.
 */
.sentio-slideshow--fraction-pos-top-left .sentio-slideshow__pagination--fraction {
	top: 15px; left: 15px; right: auto; bottom: auto; transform: none;
}
.sentio-slideshow--fraction-pos-top-center .sentio-slideshow__pagination--fraction {
	top: 15px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
}
.sentio-slideshow--fraction-pos-top-right .sentio-slideshow__pagination--fraction {
	top: 15px; right: 15px; left: auto; bottom: auto; transform: none;
}
.sentio-slideshow--fraction-pos-middle-left .sentio-slideshow__pagination--fraction {
	top: 50%; left: 15px; right: auto; bottom: auto; transform: translateY(-50%);
}
.sentio-slideshow--fraction-pos-middle-center .sentio-slideshow__pagination--fraction {
	top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
}
.sentio-slideshow--fraction-pos-middle-right .sentio-slideshow__pagination--fraction {
	top: 50%; right: 15px; left: auto; bottom: auto; transform: translateY(-50%);
}
.sentio-slideshow--fraction-pos-bottom-left .sentio-slideshow__pagination--fraction {
	bottom: 15px; left: 15px; top: auto; right: auto; transform: none;
}
/* bottom-center is the base default — re-declare for explicit match only */
.sentio-slideshow--fraction-pos-bottom-center .sentio-slideshow__pagination--fraction {
	bottom: 15px; left: 50%; top: auto; right: auto; transform: translateX(-50%);
}
.sentio-slideshow--fraction-pos-bottom-right .sentio-slideshow__pagination--fraction {
	bottom: 15px; right: 15px; top: auto; left: auto; transform: none;
}

/* Pagination — Progress Bar */
.sentio-slideshow__pagination--progressbar {
	bottom: 0;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.2);
	display: block;
	overflow: hidden;
}

.sentio-slideshow__pagination--progressbar .swiper-pagination-progressbar-fill {
	background-color: #fff;
	transition: transform 0.3s ease;
	height: 100%;
}

/* Progress Bar — Top Position */
.sentio-slideshow--progressbar-top .sentio-slideshow__pagination--progressbar {
	bottom: auto;
	top: 0;
}

/* Slide Counter */
.sentio-slideshow__counter {
	position: absolute;
	z-index: 10;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 3px;
	letter-spacing: 0.05em;
	line-height: 1;
	pointer-events: none;
}

.sentio-slideshow__counter--top-left     { top: 15px; left: 15px; }
.sentio-slideshow__counter--top-right    { top: 15px; right: 15px; }
.sentio-slideshow__counter--bottom-left  { bottom: 40px; left: 15px; }
.sentio-slideshow__counter--bottom-right { bottom: 40px; right: 15px; }

/* Content Animation — Base */
.sentio-slideshow__content--animate-up {
	animation: sentio-slide-content-up 0.6s ease-out both;
}

.sentio-slideshow__content--animate-down {
	animation: sentio-slide-content-down 0.6s ease-out both;
}

.sentio-slideshow__content--animate-left {
	animation: sentio-slide-content-left 0.6s ease-out both;
}

.sentio-slideshow__content--animate-right {
	animation: sentio-slide-content-right 0.6s ease-out both;
}

.sentio-slideshow__content--animate-zoom {
	animation: sentio-slide-content-zoom 0.6s ease-out both;
}

/* Content Animation — Stagger */
.sentio-slideshow__content--stagger .sentio-slideshow__title {
	animation: inherit;
	animation-delay: 0s;
}

.sentio-slideshow__content--stagger .sentio-slideshow__description {
	animation: inherit;
	animation-delay: 0.15s;
	opacity: 0;
}

.sentio-slideshow__content--stagger .sentio-slideshow__button {
	animation: inherit;
	animation-delay: 0.3s;
	opacity: 0;
}

@keyframes sentio-slide-content-up {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sentio-slide-content-down {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sentio-slide-content-left {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes sentio-slide-content-right {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes sentio-slide-content-zoom {
	from { opacity: 0; transform: scale(0.8); }
	to   { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 767px) {
	.sentio-slideshow__content {
		max-width: 90%;
	}

	.sentio-slideshow__title {
		font-size: 1.4em;
	}

	.sentio-slideshow__arrow {
		font-size: 18px;
		width: 36px;
		height: 36px;
	}
}