/* =========================================================
   SSE LOGO CAROUSEL — base structure (works with every style)
   ========================================================= */
.sse-carousel{
	position:relative;
	max-width:100%;
	margin:0 auto;
	overflow:hidden;
	border-radius:10px;
	box-sizing:border-box;
}
.sse-carousel-track-wrap{
	width:100%;
	height:100%;
	overflow:hidden;
}
.sse-carousel-track{
	display:flex;
	height:100%;
	transition:transform .5s ease;
	will-change:transform;
}
.sse-carousel-slide{
	flex-shrink:0;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:14px;
	box-sizing:border-box;
}
.sse-carousel-slide img{
	max-width:100%;
	max-height:70%;
	object-fit:contain;
	display:block;
}
.sse-carousel-slide a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	text-decoration:none;
}
.sse-carousel-name{
	font-weight:700;
	font-size:1.3rem;
	color:#fff;
	letter-spacing:.02em;
}

/* Arrows */
.sse-carousel-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:42px;
	height:42px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,.85);
	color:#111;
	font-size:1.5rem;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:5;
	transition:.2s ease;
}
.sse-carousel-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.sse-carousel-prev{ left:16px; }
.sse-carousel-next{ right:16px; }

/* Dots */
.sse-carousel-dots{
	position:absolute;
	bottom:14px;
	left:0;
	right:0;
	display:flex;
	justify-content:center;
	gap:8px;
	z-index:5;
}
.sse-carousel-dots button{
	width:9px;
	height:9px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,.5);
	cursor:pointer;
	padding:0;
}
.sse-carousel-dots button.is-active{ background:#fff; }

@media (max-width:900px){
	.sse-carousel[data-per-view]{ } /* per-view is recalculated in JS for smaller screens */
	.sse-carousel-arrow{ width:34px; height:34px; font-size:1.2rem; }
}

/* =========================================================
   STYLE 1 — Frosted Glass Cards (like the Smart Slider example:
   logo boxes with a soft translucent border sitting over a photo)
   ========================================================= */
.sse-carousel--glass .sse-carousel-slide > *{
	width:100%;
	height:100%;
}
.sse-carousel--glass .sse-carousel-slide{
	padding:10px;
}
.sse-carousel--glass .sse-carousel-slide a,
.sse-carousel--glass .sse-carousel-slide img{
	background:rgba(255,255,255,.08);
	border:1.5px solid rgba(255,255,255,.55);
	border-radius:10px;
	backdrop-filter:blur(2px);
}
.sse-carousel--glass .sse-carousel-slide img{ padding:24px; box-sizing:border-box; max-height:100%; }
.sse-carousel--glass .sse-carousel-name{ 
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.55); border-radius:10px;
}

/* =========================================================
   STYLE 2 — Minimal Row (plain logos, no boxes, subtle divider)
   ========================================================= */
.sse-carousel--minimal .sse-carousel-slide{
	border-right:1px solid rgba(0,0,0,.08);
}
.sse-carousel--minimal .sse-carousel-slide:last-child{ border-right:none; }
.sse-carousel--minimal .sse-carousel-name{ color:#16233a; }

/* =========================================================
   STYLE 3 — Bordered Boxes (thin outline cards)
   ========================================================= */
.sse-carousel--bordered .sse-carousel-slide{ padding:12px; }
.sse-carousel--bordered .sse-carousel-slide a,
.sse-carousel--bordered .sse-carousel-slide img,
.sse-carousel--bordered .sse-carousel-name{
	width:100%; height:100%; box-sizing:border-box;
	border:2px solid rgba(0,0,0,.15);
	border-radius:8px;
	display:flex; align-items:center; justify-content:center;
	background:#fff;
}
.sse-carousel--bordered .sse-carousel-slide img{ padding:18px; }
.sse-carousel--bordered .sse-carousel-name{ color:#16233a; }

/* =========================================================
   STYLE 4 — Dark Overlay Cards (bold, high contrast)
   ========================================================= */
.sse-carousel--dark-overlay .sse-carousel-slide{ padding:12px; }
.sse-carousel--dark-overlay .sse-carousel-slide a,
.sse-carousel--dark-overlay .sse-carousel-slide img,
.sse-carousel--dark-overlay .sse-carousel-name{
	width:100%; height:100%; box-sizing:border-box;
	background:rgba(10,15,25,.72);
	border-radius:8px;
	display:flex; align-items:center; justify-content:center;
}
.sse-carousel--dark-overlay .sse-carousel-slide img{ padding:20px; filter:brightness(0) invert(1); }
.sse-carousel--dark-overlay .sse-carousel-name{ color:#fff; }

/* =========================================================
   STYLE 5 — Rounded Pills (soft chip shape)
   ========================================================= */
.sse-carousel--pills .sse-carousel-slide{ padding:14px 8px; }
.sse-carousel--pills .sse-carousel-slide a,
.sse-carousel--pills .sse-carousel-slide img,
.sse-carousel--pills .sse-carousel-name{
	width:100%; height:100%; box-sizing:border-box;
	background:#fff;
	border-radius:999px;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.sse-carousel--pills .sse-carousel-slide img{ padding:16px 28px; }
.sse-carousel--pills .sse-carousel-name{ color:#16233a; padding:0 20px; }

/* =========================================================
   STYLE 6 — Grayscale → Color on hover
   ========================================================= */
.sse-carousel--grayscale .sse-carousel-slide img{
	filter:grayscale(100%);
	opacity:.65;
	transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
.sse-carousel--grayscale .sse-carousel-slide:hover img{
	filter:grayscale(0%);
	opacity:1;
	transform:scale(1.06);
}
.sse-carousel--grayscale .sse-carousel-name{
	color:#16233a; opacity:.65; transition:.3s ease;
}
.sse-carousel--grayscale .sse-carousel-slide:hover .sse-carousel-name{ opacity:1; }