/* Silver Star Hero Slider Widget — base structural styles.
   Colours flow through var(--x, fallback) set on the Elementor wrapper.
   !important pairs only the colour/background/border properties on
   <a>/<button> elements (CTA, arrows, dots) with their matching Style-tab
   controls, since those are exactly what themes reset aggressively.
   Sizes/spacing/typography are left to Elementor's own selector
   specificity, which is high enough to win without it. */

.ssl-slider {
	position: relative;
	font-family: 'Manrope', sans-serif;
	overflow: hidden;
	background: var(--ssl-ink, #2B1D14);
}
.ssl-slider *,
.ssl-slider *::before,
.ssl-slider *::after {
	box-sizing: border-box;
}

.ssl-track {
	position: relative;
	height: min(88vh, 720px);
	min-height: 460px;
}

.ssl-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
}
.ssl-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.ssl-media {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #EDE0D2, #D8C4AC);
	overflow: hidden;
}
.ssl-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ssl-slide.is-active .ssl-media img.ssl-kenburns {
	animation: ssl-kenburns-anim var(--ssl-kb-duration, 8s) ease-in-out forwards;
}
.ssl-placeholder {
	position: absolute;
	inset: 14px;
	border: 1px dashed rgba(255, 253, 249, 0.55);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 253, 249, 0.75);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ssl-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--ssl-overlay-top, rgba(20,14,9,0.05)) 0%, var(--ssl-overlay-bottom, rgba(20,14,9,0.72)) 100%);
}

.ssl-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px 88px;
}
.ssl-slide.is-active .ssl-content > * {
	animation: ssl-rise 0.9s ease both;
}
.ssl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ssl-accent-light, #E0AD78);
	margin: 0 0 16px;
	animation-delay: 0.05s;
}
.ssl-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--ssl-accent-light, #E0AD78);
	display: inline-block;
}
.ssl-heading {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 500;
	color: var(--ssl-ivory, #FFFDF9);
	font-size: clamp(28px, 4.4vw, 52px);
	line-height: 1.22;
	margin: 0 0 26px;
	max-width: 640px;
	animation-delay: 0.15s;
}

a.ssl-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--ssl-accent-light, #E0AD78), var(--ssl-accent-deep, #8B5A2B)) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 14px 28px;
	border-radius: 999px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	animation-delay: 0.25s;
}
a.ssl-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(139, 90, 43, 0.35);
	color: #fff !important;
}
a.ssl-cta svg {
	width: 14px;
	height: 14px;
	stroke: #fff;
	fill: none;
	transition: transform 0.25s ease;
}
a.ssl-cta:hover svg {
	transform: translateX(3px);
}

/* Arrows */
button.ssl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.14) !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: rgba(255, 253, 249, 0.4) !important;
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background 0.25s ease, border-color 0.25s ease;
}
button.ssl-arrow:hover {
	background: rgba(255, 253, 249, 0.28) !important;
	border-color: var(--ssl-accent-light, #E0AD78) !important;
}
button.ssl-arrow svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
	fill: none;
}
.ssl-prev { left: 22px; }
.ssl-next { right: 22px; }
@media (max-width: 640px) {
	button.ssl-arrow { display: none; }
}

/* Dots */
.ssl-dots {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 10px;
}
button.ssl-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.4) !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
button.ssl-dot.is-active {
	background: linear-gradient(135deg, var(--ssl-accent-light, #E0AD78), var(--ssl-accent-deep, #8B5A2B)) !important;
	width: 26px;
	border-radius: 999px;
}

@keyframes ssl-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ssl-kenburns-anim {
	from { transform: scale(1); }
	to   { transform: scale(var(--ssl-kb-scale, 1.08)); }
}

@media (prefers-reduced-motion: reduce) {
	.ssl-slide,
	a.ssl-cta,
	button.ssl-arrow,
	button.ssl-dot,
	.ssl-media img {
		transition: none !important;
		animation: none !important;
	}
	.ssl-content > * {
		opacity: 1 !important;
		transform: none !important;
	}
}