/* Premium Hero Slider Pro — front-end styles
   All per-slider tunables come in as CSS custom properties set inline
   on the .phsp-slider element (see class-phsp-render.php). Keeping this
   sheet static (no per-instance <style> blocks) lets it be cached hard. */

/* Defensive reset: many themes/page builders set global box-sizing,
   button, and ul/li styles that otherwise bleed into the slider (this
   is the #1 cause of "arrows are giant orange pills" / "row isn't
   centered" reports — a theme's own button/ul skin winning the CSS
   cascade). Scoping a hard reset to .phsp-slider keeps us isolated
   without needing a shadow DOM. */
.phsp-slider,
.phsp-slider *,
.phsp-slider *::before,
.phsp-slider *::after {
	box-sizing: border-box;
}

.phsp-slider ul,
.phsp-slider li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.phsp-slider button {
	font-family: inherit;
	font-size: 100%;
	line-height: 1;
	margin: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
}

.phsp-slider {
	position: relative;
	overflow: visible;
	isolation: isolate;
	width: 100%;
	max-width: 100%;
	margin: var(--phsp-margin, 0) auto;
	padding: var(--phsp-section-pt, 64px) 0 var(--phsp-section-pb, 64px);
	min-height: var(--phsp-height, 560px);
	display: flex;
	align-items: center;
	font-family: inherit;
	color: #fff;
}

.phsp-slider.phsp-rounded-section {
	border-radius: 28px;
	overflow: hidden;
}

.phsp-slider.phsp-section-shadow {
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35);
}

.phsp-slider.phsp-bg-solid {
	background: var(--phsp-bg-color, #0f172a);
}

.phsp-bg-gradient {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--phsp-bg-gradient, linear-gradient(135deg, #0f172a, #1e293b));
}

.phsp-bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(var(--phsp-bg-blur, 0px));
	transform: scale(1.05);
}

.phsp-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--phsp-bg-overlay, #000);
	opacity: var(--phsp-bg-overlay-opacity, .2);
}

/* Track / viewport */
/* Real positioning context for arrows: sized exactly to the visible
   card row, so arrows always center on the actual content — not on
   the outer section, which can be taller due to padding/min-height. */
.phsp-viewport-wrap {
	position: relative;
	width: 100%;
}

.phsp-track-viewport {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

/* "Boxed" section width option (Background tab) caps + centers the
   whole track; "Full" (default) lets it fill its parent container —
   important when the slider sits inside your own builder section. */
.phsp-slider.phsp-section-boxed .phsp-viewport-wrap {
	max-width: min(1200px, 100%);
	margin: 0 auto;
}

.phsp-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--phsp-gap, 24px);
	will-change: transform;
	transition: transform .55s cubic-bezier(.65,0,.35,1);
}

/* Single-hero mode: only the active slide is visible/interactive */
.phsp-mode-single .phsp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease, transform .6s ease;
}

.phsp-mode-single .phsp-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.phsp-mode-single .phsp-track {
	position: relative;
	min-height: var(--phsp-height, 560px);
}

/* Carousel mode: card width is calculated so exactly N cards (set on
   the Advanced tab for desktop, Responsive tab for tablet/mobile) fit
   the row with the configured gap — see PHSP_Render::card_width_calc().
   The Design tab's "Card width" acts as a cap on top of that, so a
   card never grows past your intended size when few slides are
   visible on a very wide screen. */
.phsp-mode-carousel .phsp-slide {
	flex: 0 0 auto;
	width: var(--phsp-card-width-desktop, 280px);
	max-width: var(--phsp-card-width, 380px);
}

/* Animation presets applied via [data-animation] on the section,
   read by JS which toggles a matching class on the incoming slide. */
.phsp-slide.phsp-anim-fade { animation: phsp-fade .5s ease both; }
.phsp-slide.phsp-anim-slide { animation: phsp-slide-in .5s cubic-bezier(.65,0,.35,1) both; }
.phsp-slide.phsp-anim-fade-slide { animation: phsp-fade-slide-in .6s cubic-bezier(.65,0,.35,1) both; }
.phsp-slide.phsp-anim-zoom { animation: phsp-zoom-in .6s cubic-bezier(.2,.8,.2,1) both; }

@keyframes phsp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes phsp-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes phsp-fade-slide-in { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes phsp-zoom-in { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.phsp-track,
	.phsp-slide,
	.phsp-slide.phsp-anim-fade,
	.phsp-slide.phsp-anim-slide,
	.phsp-slide.phsp-anim-fade-slide,
	.phsp-slide.phsp-anim-zoom {
		animation: none !important;
		transition: none !important;
	}
}

.phsp-slide-inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--phsp-gap, 24px);
}

.phsp-position-below .phsp-slide-inner,
.phsp-position-mixed .phsp-slide-inner {
	flex-direction: column;
}

/* Media */
.phsp-slide-media {
	position: relative;
	aspect-ratio: var(--phsp-slide-ratio, 16/9);
	overflow: hidden;
	flex: 1;
}

.phsp-mode-single .phsp-slide-media {
	height: var(--phsp-height, 560px);
	aspect-ratio: auto;
}

.phsp-slide-image {
	width: 100%;
	height: 100%;
	display: block;
}

.phsp-fit-cover { object-fit: cover; }
.phsp-fit-contain { object-fit: contain; }

.phsp-image-style-flat { border-radius: 0; }
.phsp-image-style-rounded { border-radius: var(--phsp-radius, 24px); }
.phsp-image-style-pill { border-radius: 999px; }
.phsp-image-style-shadow {
	border-radius: var(--phsp-radius, 24px);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.phsp-image-style-glass {
	border-radius: var(--phsp-radius, 24px);
	box-shadow: 0 20px 45px -15px rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.35);
}

/* Thin hairline card border, toggled via the Design tab "card_border" option. */
.phsp-slide-media {
	border: var(--phsp-card-border, none);
	border-radius: var(--phsp-radius, 16px);
}

.phsp-slide-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Slide content (badge / heading / description / button) */
.phsp-slide-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: var(--phsp-content-width, 640px);
}

.phsp-slide-content-overlay {
	position: absolute;
	inset: 0;
	padding: clamp(20px, 4vw, var(--phsp-padding, 24px));
	display: flex;
	flex-direction: column;
	justify-content: var(--phsp-v-align, center);
	align-items: var(--phsp-h-align, flex-start);
	z-index: 2;
}

.phsp-align-left  .phsp-slide-content { align-items: flex-start; text-align: left; }
.phsp-align-center .phsp-slide-content { align-items: center; text-align: center; margin-inline: auto; }
.phsp-align-right .phsp-slide-content { align-items: flex-end; text-align: right; margin-inline-start: auto; }

/* Bottom-scrim "product card" text position (matches the reference: image
   fills the card, text + link sit over a soft gradient at the base). */
.phsp-position-bottom .phsp-slide-content-overlay {
	justify-content: flex-end;
	padding: 20px;
	gap: 6px;
}

.phsp-slide-scrim {
	background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%);
}

.phsp-subtitle {
	margin: 0;
	font-size: var(--phsp-subtitle-size, 12px);
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .75;
	font-weight: 500;
}

.phsp-content-shadow {
	text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.phsp-content-shadow .phsp-button,
.phsp-content-shadow .phsp-badge {
	backdrop-filter: blur(10px);
}

.phsp-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.3);
	backdrop-filter: blur(12px);
	width: fit-content;
}

.phsp-heading {
	font-size: var(--phsp-title-size, 42px);
	line-height: 1.1;
	font-weight: 700;
	margin: 0;
	letter-spacing: -.01em;
}

.phsp-description {
	font-size: var(--phsp-text-size, 16px);
	line-height: 1.6;
	opacity: .92;
	max-width: 46ch;
}

.phsp-description p {
	margin: 0 0 .6em;
}

.phsp-description p:last-child {
	margin-bottom: 0;
}

/* Force-inherit text color on every text node inside a slide. Page
   builders (Elementor Global Colors/Kit especially) frequently apply
   color directly to h1–h6 and p tags site-wide, which otherwise wins
   over inheriting our slide's configured color — even with the
   parent wrapper's own color forced via !important above, since
   inheritance never overrides a rule that targets the child element
   directly. Chained selectors + !important here beat that. */
.phsp-slider .phsp-slide-content .phsp-heading,
.phsp-slider .phsp-slide-content .phsp-subtitle,
.phsp-slider .phsp-slide-content .phsp-description,
.phsp-slider .phsp-slide-content .phsp-description p,
.phsp-slider .phsp-slide-content .phsp-badge {
	color: inherit !important;
}

/* Buttons */
.phsp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 12px;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
	width: fit-content;
}

.phsp-button:hover {
	transform: translateY(-2px);
}

.phsp-slider .phsp-button-solid {
	background: #fff !important;
	color: #111 !important;
}
.phsp-slider .phsp-button-solid:hover {
	background: #f2f2f2 !important;
}

.phsp-slider .phsp-button-outline {
	background: transparent !important;
	color: inherit !important;
	border: 1.5px solid currentColor;
}
.phsp-slider .phsp-button-outline:hover {
	background: rgba(255,255,255,.12) !important;
}

.phsp-slider .phsp-button-pill {
	background: #fff !important;
	color: #111 !important;
	border-radius: 999px;
}

.phsp-slider .phsp-button-soft {
	background: rgba(255,255,255,.16) !important;
	color: inherit !important;
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.25);
}
.phsp-slider .phsp-button-soft:hover {
	background: rgba(255,255,255,.26) !important;
}

.phsp-slider .phsp-button-modern {
	background: linear-gradient(135deg, #7c5cff, #22d3ee) !important;
	color: #fff !important;
	box-shadow: 0 10px 30px -8px rgba(124,92,255,.6);
}
.phsp-slider .phsp-button-modern:hover {
	box-shadow: 0 14px 34px -6px rgba(124,92,255,.75);
}

.phsp-slider .phsp-button-link {
	background: none !important;
	border: none;
	padding: 0;
	color: inherit !important;
	font-size: 13px;
	letter-spacing: .02em;
}

.phsp-button-link:hover {
	transform: none;
	opacity: .8;
}

.phsp-button-arrow {
	transition: transform .2s ease;
}

.phsp-button-link:hover .phsp-button-arrow {
	transform: translateX(4px);
}

/* Arrows — !important on the box-model/appearance properties is
   deliberate: many themes and page builders ship a global `button {}`
   skin (padding, background, border-radius) that otherwise wins the
   cascade over a plain single-class selector like .phsp-arrow, which
   is exactly what turns these into giant filled theme-colored pills. */
.phsp-arrow {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 5 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--phsp-arrow-size-desktop, 44px) !important;
	height: var(--phsp-arrow-size-desktop, 44px) !important;
	min-width: var(--phsp-arrow-size-desktop, 44px) !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: calc(var(--phsp-arrow-size-desktop, 44px) * .4) !important;
	color: var(--phsp-arrow-color, #fff) !important;
	background: rgba(255,255,255,.12) !important;
	border: 1px solid rgba(255,255,255,.25) !important;
	cursor: pointer !important;
	backdrop-filter: blur(10px);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.phsp-arrow:hover {
	color: var(--phsp-arrow-hover-color, #111) !important;
	background: #fff !important;
}

.phsp-arrow-prev { left: var(--phsp-arrow-offset-desktop, -22px) !important; }
.phsp-arrow-next { right: var(--phsp-arrow-offset-desktop, -22px) !important; }

.phsp-arrow-circle { border-radius: 999px !important; }
.phsp-arrow-rounded-square { border-radius: 12px !important; }
.phsp-arrow-minimal { background: transparent !important; border: none !important; backdrop-filter: none; }
.phsp-arrow-filled { background: var(--phsp-arrow-color, #fff) !important; color: #111 !important; }
.phsp-arrow-filled:hover { background: var(--phsp-arrow-hover-color, #111) !important; color: #fff !important; }
.phsp-arrow-outline { background: transparent !important; border: 1.5px solid currentColor !important; }

/* Glass: fully translucent frosted pill — just a border-radius shape,
   no solid fill, so the photo underneath always shows through. */
.phsp-arrow-glass {
	background: rgba(255, 255, 255, 0.5) !important;
	border: none !important;
	border-radius: 999px !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--phsp-arrow-color, #fff) !important;
}
.phsp-arrow-glass:hover {
	background: rgba(255, 255, 255, 0.7) !important;
	color: var(--phsp-arrow-hover-color, #111) !important;
}

@media (max-width: 1024px) {
	.phsp-arrow {
		width: var(--phsp-arrow-size-tablet, 36px) !important;
		height: var(--phsp-arrow-size-tablet, 36px) !important;
		min-width: var(--phsp-arrow-size-tablet, 36px) !important;
		font-size: calc(var(--phsp-arrow-size-tablet, 36px) * .4) !important;
	}
	.phsp-arrow-prev { left: var(--phsp-arrow-offset-tablet, -22px) !important; }
	.phsp-arrow-next { right: var(--phsp-arrow-offset-tablet, -22px) !important; }
}

@media (max-width: 640px) {
	.phsp-arrow {
		width: var(--phsp-arrow-size-mobile, 32px) !important;
		height: var(--phsp-arrow-size-mobile, 32px) !important;
		min-width: var(--phsp-arrow-size-mobile, 32px) !important;
		font-size: calc(var(--phsp-arrow-size-mobile, 32px) * .4) !important;
	}
	.phsp-arrow-prev { left: var(--phsp-arrow-offset-mobile, 8px) !important; }
	.phsp-arrow-next { right: var(--phsp-arrow-offset-mobile, 8px) !important; }
}

/* Dots — same !important hardening so a theme's default button skin
   can't inflate these into big pills. These are meant to read as tiny
   dots (≈8px), not buttons. */
.phsp-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px !important;
}

.phsp-dot {
	all: unset;
	box-sizing: border-box !important;
	display: block !important;
	width: 8px !important;
	height: 8px !important;
	min-width: 8px !important;
	max-width: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.4) !important;
	border: none !important;
	cursor: pointer !important;
	transition: background-color .2s ease, width .2s ease, max-width .2s ease;
}

.phsp-dot.is-active {
	background: #fff !important;
	width: 22px !important;
	max-width: 22px !important;
}

/* Progress bar */
.phsp-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255,255,255,.2);
	z-index: 5;
}

.phsp-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: #fff;
}

.phsp-empty-notice {
	padding: 24px;
	text-align: center;
	color: #6b7280;
}

/* Loop-padding clones (see the infinite-scroll implementation in
   class-phsp-render.php / frontend.js): the `inert` HTML attribute
   already handles this in modern browsers, this is just a CSS
   fallback for older ones so clones can't be clicked/focused. */
.phsp-slide-clone {
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Responsive overrides
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.phsp-slider {
		font-size: var(--phsp-tablet-font, 90%);
		padding-left: var(--phsp-tablet-padding, 20px);
		padding-right: var(--phsp-tablet-padding, 20px);
	}
	.phsp-mode-single .phsp-slide-media,
	.phsp-mode-single .phsp-track {
		height: var(--phsp-tablet-height, 460px);
	}
	.phsp-track {
		gap: var(--phsp-tablet-gap, 18px);
	}
	.phsp-mode-carousel .phsp-slide {
		width: var(--phsp-card-width-tablet, 45%);
	}
}

@media (max-width: 640px) {
	.phsp-slider {
		font-size: var(--phsp-mobile-font, 80%);
		padding-left: var(--phsp-mobile-padding, 16px);
		padding-right: var(--phsp-mobile-padding, 16px);
	}
	.phsp-mode-single .phsp-slide-media,
	.phsp-mode-single .phsp-track {
		height: var(--phsp-mobile-height, 360px);
	}
	.phsp-track {
		gap: var(--phsp-mobile-gap, 14px);
	}
	.phsp-mode-carousel .phsp-slide {
		width: var(--phsp-card-width-mobile, calc(100% - 40px));
	}
}

/* Hide arrows on mobile when requested (data attribute set server-side
   from the Navigation tab's "Hide arrows on mobile" setting). */
.phsp-slider[data-hide-arrows-mobile="1"] .phsp-arrow {
	display: none;
}
@media (min-width: 641px) {
	.phsp-slider[data-hide-arrows-mobile="1"] .phsp-arrow {
		display: inline-flex;
	}
}

/* Responsive tab: per-breakpoint text-alignment override. Deliberately
   higher-specificity + !important so it wins over a slide's own Text
   Alignment field at that breakpoint — that's the expected precedence
   for a responsive override (it targets a smaller-viewport special
   case; the per-slide value remains the default at other sizes). */
@media (max-width: 1024px) {
	.phsp-slider[data-align-tablet="left"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-tablet="left"] .phsp-slide-content { align-items: flex-start !important; text-align: left !important; }
	.phsp-slider[data-align-tablet="center"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-tablet="center"] .phsp-slide-content { align-items: center !important; text-align: center !important; margin-inline: auto !important; }
	.phsp-slider[data-align-tablet="right"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-tablet="right"] .phsp-slide-content { align-items: flex-end !important; text-align: right !important; }
}
@media (max-width: 640px) {
	.phsp-slider[data-align-mobile="left"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-mobile="left"] .phsp-slide-content { align-items: flex-start !important; text-align: left !important; }
	.phsp-slider[data-align-mobile="center"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-mobile="center"] .phsp-slide-content { align-items: center !important; text-align: center !important; margin-inline: auto !important; }
	.phsp-slider[data-align-mobile="right"] .phsp-slide-content-overlay,
	.phsp-slider[data-align-mobile="right"] .phsp-slide-content { align-items: flex-end !important; text-align: right !important; }
}

/* Graceful no-JS degradation: show first slide as static content */
.phsp-slider:not(.js-ready) .phsp-track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.phsp-slider:not(.js-ready) .phsp-slide {
	scroll-snap-align: start;
}
.phsp-slider:not(.js-ready) .phsp-arrow,
.phsp-slider:not(.js-ready) .phsp-dots,
.phsp-slider:not(.js-ready) .phsp-progress {
	display: none;
}