/* =========================================================
   CRX Trials CTA — auto-rotating "See open trials" carousel
   ========================================================= */

.crx-trials-cta {
	position: relative;
	display: flex;
	width: 100%;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.crx-trials-cta-viewport {
	width: 75%;
	overflow: hidden;
	border-radius: 10px;
}

.crx-trials-cta-track {
	display: flex;
	width: 100%;
	transition: transform 0.5s ease;
}


.crx-trials-cta-dots .crx-trials-cta-dot{
	width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    border: none;
    padding: 0px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
}

.crx-trials-cta-dots .crx-trials-cta-dot.is-active{
	background: #35d0a0;
}
.crx-trials-cta-slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	/* padding: 18px 24px; */
	/* background: #10233f; */
	text-decoration: none;
	cursor: pointer;
}

.crx-trials-cta-text {
	color: #35d0a0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-color: #35d0a0;
	text-underline-offset: 4px;
}

.crx-trials-cta-arrow {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: #35d0a0;
	transition: transform 0.15s ease;
}

.crx-trials-cta-slide:hover .crx-trials-cta-arrow,
.crx-trials-cta-slide:focus-visible .crx-trials-cta-arrow {
	transform: translateX( 4px );
}

.crx-trials-cta-slide:focus-visible {
	outline: 2px solid #35d0a0;
	outline-offset: -4px;
}

/* --- Dots --------------------------------------------------- */
.crx-trials-cta-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* margin-top: 12px; */
}

.crx-trials-cta-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 16, 35, 63, 0.25 );
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.crx-trials-cta-dot:hover {
	background: rgba( 16, 35, 63, 0.5 );
}

.crx-trials-cta-dot.is-active {
	background: #10233f;
	transform: scale( 1.2 );
}

/* --- Responsive ---------------------------------------------- */
@media ( max-width: 600px ) {
	.crx-trials-cta-slide {
		padding: 14px 18px;
		min-height: 56px;
	}

	.crx-trials-cta-text {
		font-size: 16px;
	}

	.crx-trials-cta-arrow {
		width: 18px;
		height: 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.crx-trials-cta-track {
		transition: none;
	}
}