/**
 * Horizontal Timeline Nested — Stili Frontend
 *
 * Struttura HTML (output del widget):
 *   .elementor-widget-horizontal-timeline
 *     └ .htl-timeline
 *         ├ .htl-track-wrapper
 *         │    ├ button.htl-nav-btn.htl-nav-prev
 *         │    ├ .htl-track [role=tablist]
 *         │    │    └ button.htl-trigger.e-n-tab-title [data-tab-index, aria-selected]
 *         │    │         ├ span.htl-bullet
 *         │    │         └ span.htl-label
 *         │    └ button.htl-nav-btn.htl-nav-next
 *         └ .htl-panels
 *              └ .e-con [data-tab-index, role=tabpanel]  ← Container Elementor
 */

/* ==========================================================================
   Reset base widget
   ========================================================================== */
.elementor-widget-horizontal-timeline {
	width: 100%;
}

/* ==========================================================================
   Wrapper timeline
   ========================================================================== */
.htl-timeline {
	width: 100%;
	position: relative;
}

/* ==========================================================================
   Track wrapper (frecce nav + track)
   ========================================================================== */
.htl-track-wrapper {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 6px;
}

/* Frecce di navigazione */
.htl-nav-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: none;
    border: none;
	cursor: pointer;
	color: #333333; /* default, sovrascrivibile da Elementor */
	font-size: 16px; /* default, sovrascrivibile dallo slider Elementor */
	line-height: 1;
	padding: 0;
	transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	position: relative;
	top: -4px;
	outline: none;
}

.htl-nav-btn:hover,
.htl-nav-btn:focus-visible,.htl-nav-btn:focus {
    border:none;
	opacity: 1;
	background: transparent;
}

.htl-nav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Track orizzontale
   ========================================================================== */
.htl-track {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	padding-bottom: 8px;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	flex: 1 1 0;
	min-width: 0;
}

.htl-track::-webkit-scrollbar {
	display: none;
}

/* Linea orizzontale che collega i bullet */
.htl-trigger::before {
	content: '';
	position: absolute;
	top: 10px; /* centro verticale del bullet */
	left: 0;
	right: 0;
	height: 2px;
	background-color: #cccccc;
	z-index: -1;
}

/* ==========================================================================
   Trigger (bottone singolo item)
   ========================================================================== */
.htl-trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 0 250px;
	padding: 0 8px;
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 1;
	white-space: nowrap;
	outline: none;
	/* reset stili Elementor .e-n-tab-title che potrebbe ereditare */
	border-radius: 0;
	border-style: none;
	height: auto;
}

.htl-trigger:hover, .htl-trigger:active , .htl-trigger:focus-visible, .htl-trigger[aria-selected="true"], .htl-trigger:focus{
	background: transparent;
}

.htl-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Bullet
   ========================================================================== */
.htl-bullet {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid #cccccc;
	margin-bottom: 10px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
	flex-shrink: 0;
}

/* Bullet attivo */
.htl-trigger[aria-selected="true"] .htl-bullet,
.htl-trigger:hover .htl-bullet {
	background-color: #e05270;
	border-color: #e05270;
}

/* ==========================================================================
   Label (testo data/periodo)
   ========================================================================== */
.htl-label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #333333;
	text-align: center;
	transition: color 0.25s ease;
	line-height: 1.2;
	white-space: normal;
}

.htl-trigger[aria-selected="true"] .htl-label,
.htl-trigger:hover .htl-label {
	color: #e05270;
}

/* ==========================================================================
   Pannelli contenuto
   ========================================================================== */

/*
 * I pannelli partono nascosti.
 * Il JS usa slideDown/slideUp quindi imposta display inline (non !important).
 * Usiamo display:none senza !important così jQuery può sovrascrivere.
 */
.htl-panels {
	width: 100%;
	overflow: hidden;
}

.htl-panels > .e-con {
	display: none;
	width: 100%;
	box-sizing: border-box;
}

/* Il pannello aperto (classe aggiunta/rimossa dal JS) */
.htl-panels > .e-con.htl-is-open {
	display: flex;
}

/* Editor Elementor: mostra solo il pannello attivo (htl-is-open), come nel frontend */
.elementor-editor-active .htl-panels > .e-con.htl-is-open {
	display: flex;
}

/* ==========================================================================
   Mobile — scroll orizzontale
   ========================================================================== */
@media (max-width: 767px) {
	.htl-trigger {
		flex-basis: 150px;
	}
}
/* =============================================================
   Horizontal Timeline - HTN Plugin
   Stessa struttura HTML delle NestedTabs di Elementor
   (.e-n-tabs, .e-n-tabs-heading, .e-n-tabs-content, .e-active)
   ma con intestazione a pallini + date.
   ============================================================= */

.htn-timeline {
--htn-bullet-size: 16px;
}

/* Track (heading) */
.htn-timeline .htn-timeline-track {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
position: relative;
padding: 0;
margin: 0 0 32px 0;
border: none;
background: none;
gap: 0;
}

/* Linea orizzontale */
.htn-timeline .htn-timeline-track::before {
content: '';
position: absolute;
top: calc(var(--htn-bullet-size) / 2);
left: 0;
right: 0;
height: 2px;
background-color: #d6d6d6;
z-index: 0;
pointer-events: none;
}

/* Item button */
.htn-timeline .htn-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
position: relative;
z-index: 1;
font-family: inherit;
border-radius: 0;
}

.htn-timeline .htn-item:focus-visible {
outline: 2px solid #e63e6d;
outline-offset: 2px;
}

/* Pallino */
.htn-timeline .htn-bullet {
display: block;
width: var(--htn-bullet-size);
height: var(--htn-bullet-size);
border-radius: 50%;
border: 2px solid #aaaaaa;
background-color: #ffffff;
transition: background-color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}

.htn-timeline .htn-bullet.htn-bullet-filled {
background-color: #e63e6d;
border-color: #e63e6d;
}

.htn-timeline .htn-item[aria-selected=true] .htn-bullet {
background-color: #e63e6d;
border-color: #e63e6d;
}

/* Data */
.htn-timeline .htn-date {
display: block;
font-size: 14px;
font-weight: 600;
color: #222222;
white-space: nowrap;
transition: color 0.2s ease;
line-height: 1.2;
}

.htn-timeline .htn-item[aria-selected=true] .htn-date {
color: #e63e6d;
}

/* Pannelli */
.htn-timeline .htn-panels-wrapper {
width: 100%;
}

.htn-timeline .htn-panels-wrapper > .e-con {
display: none;
}

.htn-timeline .htn-panels-wrapper > .e-con.e-active {
display: flex;
}

/* Editor: mostra tutti i pannelli */
.elementor-editor-active .htn-timeline .htn-panels-wrapper > .e-con {
margin-bottom: 12px;
outline: 1px dashed #c8ccd0;
min-height: 80px;
}

/* Mobile */
@media (max-width: 767px) {
.htn-timeline .htn-timeline-track {
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.htn-timeline .htn-timeline-track::before {
display: none;
}
.htn-timeline .htn-item {
flex: 0 0 auto;
min-width: 60px;
}
}