/* Hero Carousel Base Styles */
.elcogen-hero-carousel {
	width: 100%;
	position: relative;
	font-family: var(--font-family-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.elcogen-hero-carousel * {
	box-sizing: border-box;
}

/* ============================================
   THEME CLASSES - COLOR THEME SWITCHER
   ============================================ */
/* Theme-specific styling applied via .elcogen-hero-carousel--light or --dark classes.
   These theme classes provide default colors that can be overridden by Elementor style controls.
   The theme switcher in the Content tab changes between light (black text) and dark (white text) themes. */

/* Banner Styles */
.elcogen-hero-carousel__banner {
	width: 100%;
	background: linear-gradient(90deg, rgb(107, 229, 251) 35.363%, rgb(138, 252, 175) 59.253%, rgb(142, 255, 166) 82.424%, rgb(250, 251, 119) 103.57%);
}

.elcogen-hero-carousel__banner-container {
	max-width: var(--container-default);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.elcogen-hero-carousel__banner-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-baseline-08);
	text-decoration: none;
	color: inherit;
	transition: var(--transition-opacity);
}

.elcogen-hero-carousel__banner-link:hover {
	opacity: 0.8;
}

.elcogen-hero-carousel__banner-text {
	font-family: var(--font-family-body), sans-serif;
}

.elcogen-hero-carousel__banner-arrow {
	width: var(--spacing-baseline-16);
	height: var(--spacing-baseline-16);
	flex-shrink: 0;
}

/* Hero Section Styles */
.elcogen-hero-carousel__hero {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Slide Styles */
.elcogen-hero-carousel__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	z-index: 1;
}

.elcogen-hero-carousel__slide-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

.elcogen-hero-carousel__slide--active {
	opacity: 1;
	z-index: 2;
}

.elcogen-hero-carousel__hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 3;
}

.elcogen-hero-carousel__container {
	max-width: var(--container-default);
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 4;
}

.elcogen-hero-carousel__content {
	margin: 0 auto;
	text-align: center;
}

/* Visually Hidden Utility - Hides element visually but keeps it accessible for SEO and screen readers */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* H1 Styles */
.elcogen-hero-carousel__h1 {
	font-family: var(--text-headings-h1-family), sans-serif;
	font-size: var(--text-headings-h1-size);
	font-weight: var(--text-headings-h1-weight);
	line-height: var(--text-headings-h1-line-height);
	margin: 0 0 1.5rem 0;
	color: var(--color-text-primary);
}

/* Theme-based H1 color with !important to override Elementor's generated CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__h1 {
	color: #131317 !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__h1 {
	color: #FFFFFF !important;
}

/* H2 Styles - Styled like H1 using H1 design tokens */
.elcogen-hero-carousel__h2 {
	font-family: var(--text-headings-h1-family), sans-serif;
	font-size: var(--text-headings-h1-size);
	font-weight: var(--text-headings-h1-weight);
	line-height: var(--text-headings-h1-line-height);
	margin: 0 0 1.5rem 0;
	color: var(--color-text-primary);
}

/* Theme-based H2 color with !important to override Elementor's generated CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__h2 {
	color: #131317 !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__h2 {
	color: #FFFFFF !important;
}

/* Description Styles - Uses body-large tokens */
.elcogen-hero-carousel__description {
	font-family: var(--text-body-large-family), sans-serif;
	font-size: var(--text-body-large-size);
	font-weight: var(--text-body-large-weight);
	line-height: var(--text-body-large-line-height);
	margin: 0 0 2rem 0;
	color: var(--color-text-secondary);
}

/* Theme-based Description color with !important to override Elementor's generated CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__description {
	color: #131317 !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__description {
	color: #FFFFFF !important;
}

/* Button Styles */
.elcogen-hero-carousel__buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.elcogen-hero-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-baseline-08);
	text-decoration: none;
	border: var(--button-border-width) solid;
	transition: var(--transition-all);
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--font-family-body), sans-serif;
}

.elcogen-hero-carousel__button:hover {
	transform: translateY(-0.125rem);
}

/* Default Secondary Button (fallback) */
.elcogen-hero-carousel__button--secondary {
	background-color: transparent;
	border-color: var(--color-text-primary);
	color: var(--color-text-primary);
}

.elcogen-hero-carousel__button--secondary:hover {
	background-color: var(--color-text-primary);
	color: var(--color-white);
}

/* Default Primary Button (fallback) */
.elcogen-hero-carousel__button--primary {
	background-color: var(--color-dark-neutral);
	border-color: var(--color-dark-neutral);
	color: var(--color-white);
}

.elcogen-hero-carousel__button--primary:hover {
	background-color: var(--color-cobalt-blue-400);
	border-color: var(--color-cobalt-blue-400);
}

/* Light Theme - Secondary Buttons with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__button--secondary {
	background-color: transparent !important;
	border-color: #131317 !important;
	color: #131317 !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__button--secondary:hover {
	background-color: #131317 !important;
	color: #FFFFFF !important;
}

/* Dark Theme - Secondary Buttons with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__button--secondary {
	background-color: transparent !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__button--secondary:hover {
	background-color: #FFFFFF !important;
	color: #131317 !important;
}

/* Light Theme - Primary Button using design system tokens */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__button--primary {
	background-color: var(--elcogen-button-primary-bg, #0c28c4) !important;
	border-color: var(--elcogen-button-primary-bg, #0c28c4) !important;
	color: var(--elcogen-button-primary-text, #FFFFFF) !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__button--primary:hover {
	background-color: var(--elcogen-button-primary-hover-bg, #091c8f) !important;
	border-color: var(--elcogen-button-primary-hover-bg, #091c8f) !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__button--primary:active {
	background-color: var(--elcogen-button-primary-active-bg, #061561) !important;
	border-color: var(--elcogen-button-primary-active-bg, #061561) !important;
}

/* Dark Theme - Primary Button using design system tokens */
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__button--primary {
	background-color: var(--elcogen-button-primary-bg) !important;
	border-color: var(--elcogen-button-primary-bg) !important;
	color: var(--elcogen-button-primary-text, #FFFFFF) !important;
}
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__button--primary:hover {
	background-color: var(--elcogen-button-primary-hover-bg, #091c8f) !important;
	border-color: var(--elcogen-button-primary-hover-bg, #091c8f) !important;
}
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__button--primary:active {
	background-color: var(--elcogen-button-primary-active-bg, #061561) !important;
	border-color: var(--elcogen-button-primary-active-bg, #061561) !important;
}


.elcogen-hero-carousel__button-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Carousel Controls */
.elcogen-hero-carousel__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-baseline-24);
	margin-top: 7rem;
}

.elcogen-hero-carousel__pagination {
	display: flex;
	gap: 0.1875rem;
	align-items: center;
}

.elcogen-hero-carousel__dot {
	width: var(--spacing-baseline-24) !important;
	height: var(--spacing-baseline-08);
	border: 1px solid var(--color-text-primary);
	background-color: transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: var(--transition-all);
	padding: 0;
}

.elcogen-hero-carousel__dot--active {
	width: var(--spacing-baseline-48) !important;
	background-color: var(--color-text-primary);
	border-color: var(--color-text-primary);
}

.elcogen-hero-carousel__dot:hover:not(.elcogen-hero-carousel__dot--active) {
	background-color: rgba(19, 19, 23, 0.3);
}

/* Light Theme - Pagination Dots with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__dot {
	border: 1px solid #131317 !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__dot--active {
	background-color: #131317 !important;
	border: 1px solid #131317 !important;
}

/* Dark Theme - Pagination Dots with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__dot {
	border: 1px solid #FFFFFF !important;
}

.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__dot--active {
	background-color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
}

/* Light Theme - Pagination Dots Hover */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__dot:hover:not(.elcogen-hero-carousel__dot--active) {
	background-color: rgba(19, 19, 23, 0.3) !important;
	border: 1px solid #131317 !important;
}

/* Dark Theme - Pagination Dots Hover */
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__dot:hover:not(.elcogen-hero-carousel__dot--active) {
	background-color: rgba(255, 255, 255, 0.3) !important;
	border: 1px solid #FFFFFF !important;
}

.elcogen-hero-carousel__play-pause {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-opacity);
	color: var(--color-text-primary);
}

/* Light Theme - Play/Pause Button with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--light .elcogen-hero-carousel__play-pause {
	color: #131317 !important;
}

/* Dark Theme - Play/Pause Button with !important to override Elementor CSS */
.elcogen-hero-carousel.elcogen-hero-carousel--dark .elcogen-hero-carousel__play-pause {
	color: #FFFFFF !important;
}

.elcogen-hero-carousel__play-pause:hover {
	opacity: 0.7;
	background-color: transparent !important;
}

/* Decorative Shape */
.elcogen-hero-carousel__shape {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 3;
	pointer-events: none;
	aspect-ratio: 1920 / 150;
}

/* Desktop Ribbon - SVG as CSS ::after pseudo-element */
.elcogen-hero-carousel__shape::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='1920' height='150' viewBox='0 0 1920 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1920 143H0V104H1514.58L1575.86 53.2002L1607.78 26.6021L1639.7 0.00390625V0H1920V104H1920V143Z' fill='url(%23paint0_linear_41845_22181)'/%3E%3Cpath d='M1920 150H0V110H1516.79L1578.04 59.2002L1641.85 6H1920V150Z' fill='%230C28C4'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_41845_22181' x1='0' y1='123.5' x2='1913.03' y2='123.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230099CC'/%3E%3Cstop offset='0.613954' stop-color='%238EFFA6'/%3E%3Cstop offset='1' stop-color='%23FAFB77'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-position: bottom;
	background-repeat: no-repeat;
}

/* Responsive Styles */
@media (max-width: 48rem) {
	.elcogen-hero-carousel__buttons {
		flex-direction: column;
		align-items: stretch;
		max-width: 18rem;
		margin: 0 auto;
		a.elcogen-button {
			width: 100%;
		}
	}

	.elcogen-hero-carousel__button {
		width: 100%;
	}
}

/* Mobile Ribbon - Switch to mobile SVG on screens < 480px */
@media (max-width: 30rem) { /* 480px */
	.elcogen-hero-carousel__shape {
		aspect-ratio: 390 / 79;
	}

	.elcogen-hero-carousel__shape::after {
		background-image: url("data:image/svg+xml,%3Csvg width='390' height='79' viewBox='0 0 390 79' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M390 75.2324H0V50.1543H241L286 0.000976562L389.999 0L390 75.2324Z' fill='url(%23paint0_linear_41848_22349)'/%3E%3Cpath d='M390 78.3652H0V53.2871H243.001L265.813 27.7959L287.695 3.13379L389.999 3.13281L390 78.3652Z' fill='%230C28C4'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_41848_22349' x1='0' y1='37.6162' x2='388.583' y2='37.6162' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0721154' stop-color='%230099CC'/%3E%3Cstop offset='0.548077' stop-color='%238EFFA6'/%3E%3Cstop offset='1' stop-color='%23FAFB77'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	}
}