/**
 * FitActive Elementor Extender - Palinsesto widget
 * Desktop: griglia colonne con intestazione sfumata e celle attività
 * Mobile: accordion (solo titolo colonna + prima riga, click per espandere/chiudere)
 */

/* ---- Contenitore ---- */
.fitactive-palinsesto {
	width: 100%;
	overflow-x: auto;
	padding: 0;
	box-sizing: border-box;
}

.fitactive-palinsesto-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	min-width: min-content;
	box-sizing: border-box;
}

/* ---- Colonna ---- */
.fitactive-palinsesto-column {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
}

/* Altezza fissa: applicata a .fitactive-palinsesto-column-items; le righe interne si allineano in base all'altezza */
.fitactive-palinsesto-has-fixed-height .fitactive-palinsesto-column-items {
	height: var(--palinsesto-column-height);
	min-height: var(--palinsesto-column-height);
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

/* ---- Intestazione colonna (riga arancione sfumata) ---- */
.fitactive-palinsesto-header-cell {
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: default;
	box-sizing: border-box;
	flex-shrink: 0;
}

/* ---- Celle attività (sotto l'intestazione) ---- */
.fitactive-palinsesto-column-items {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.fitactive-palinsesto-cell {
	box-sizing: border-box;
	flex-shrink: 0;
}

.fitactive-palinsesto-cell-time {
	font-size: 0.9em;
	opacity: 0.9;
	margin-bottom: 0.15em;
}

.fitactive-palinsesto-cell-activity {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---- Mobile: accordion (classe .fitactive-palinsesto-mobile applicata via JS in base a breakpoint) ---- */
.fitactive-palinsesto-mobile .fitactive-palinsesto-grid {
	flex-direction: column;
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-column {
	flex: none;
	width: 100%;
	margin-bottom: 0.5rem;
	border-radius: 6px;
	overflow: hidden;
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 2.5em;
	text-align: left;
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell::after {
	content: "";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid currentColor;
	opacity: 0.9;
	transition: transform 0.2s ease;
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-column.fitactive-palinsesto-expanded .fitactive-palinsesto-header-cell::after {
	transform: translateY(-50%) rotate(180deg);
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell:hover,
.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell:focus {
	outline: none;
}

/* Collapsed: mostra solo prima riga (prima attività) sotto l'header - SOLO accordion, non slider/carousel */
.fitactive-palinsesto-mobile:not(.fitactive-palinsesto-slider) .fitactive-palinsesto-column:not(.fitactive-palinsesto-expanded) .fitactive-palinsesto-cell:nth-child(n+2) {
	display: none;
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-column-items .fitactive-palinsesto-cell {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fitactive-palinsesto-mobile .fitactive-palinsesto-column.fitactive-palinsesto-expanded .fitactive-palinsesto-header-cell + .fitactive-palinsesto-column-items {
	border-top: none;
}

/* ---- Mobile CAROUSEL: una slide = una tabella (giorno), frecce + pallini, tutte le righe visibili ---- */
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile {
	overflow: visible;
	overflow-x: visible;
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel {
	position: relative;
	width: 100%;
	overflow: visible;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel-viewport.swiper {
	overflow: hidden;
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
	/* Lascia a Swiper lo swipe orizzontale; scroll verticale possibile */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel-viewport.swiper .fitactive-palinsesto-grid {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column.swiper-slide {
	flex-shrink: 0;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 0;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Con Offset lati "Entrambi" la larghezza è impostata via JS (--palinsesto-slide-width-px) per mostrare un pezzo delle colonne adiacenti */
	width: var(--palinsesto-slide-width-px, 100%);
	max-width: var(--palinsesto-slide-width-px, 100%);
	text-align: center;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 0;
	/* Colonne a destra e sinistra (non centrate) con opacity ridotta */
	opacity: 0.7;
	transition: opacity 0.2s ease;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column.swiper-slide-active {
	opacity: 1;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column .fitactive-palinsesto-header-cell {
	width: 100%;
	box-sizing: border-box;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column .fitactive-palinsesto-column-items {
	width: 100%;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column .fitactive-palinsesto-cell {
	text-align: center;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-cell-time,
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-cell-activity {
	text-align: center;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell {
	cursor: default;
	padding-right: 1em;
	padding-left: 1em;
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column .fitactive-palinsesto-cell {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-cell-time,
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-cell-activity {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Tutte le righe visibili: la colonna si espande in altezza con il contenuto */
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column-items {
	flex: 1 1 auto;
	min-height: auto;
	display: flex;
	flex-direction: column;
}

.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-header-cell::after {
	display: none;
}

/* Frecce: visibili solo se il widget ha la classe has-arrows */
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-prev,
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-next {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-prev:hover,
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-next:hover {
	background: rgba(0, 0, 0, 0.75);
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-prev {
	left: 4px;
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-next {
	right: 4px;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel.fitactive-palinsesto-carousel-has-arrows .fitactive-palinsesto-carousel-prev,
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel.fitactive-palinsesto-carousel-has-arrows .fitactive-palinsesto-carousel-next {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Pallini: visibili solo se il widget ha la classe has-dots */
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	flex-wrap: wrap;
}
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-carousel.fitactive-palinsesto-carousel-has-dots .fitactive-palinsesto-carousel-dots {
	display: flex;
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-dot {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-dot:hover {
	background: rgba(255, 255, 255, 0.7);
}
.fitactive-palinsesto-slider .fitactive-palinsesto-carousel-dot[aria-selected="true"] {
	background: #fff;
	transform: scale(1.2);
}

/* Fallback: se JS non ha ancora applicato la classe, usa 768px */
@media (max-width: 768px) {
	.fitactive-palinsesto .fitactive-palinsesto-grid {
		flex-direction: column;
	}
	.fitactive-palinsesto .fitactive-palinsesto-column {
		flex: none;
		width: 100%;
		margin-bottom: 0.5rem;
		border-radius: 6px;
		overflow: hidden;
	}
	.fitactive-palinsesto .fitactive-palinsesto-header-cell {
		cursor: pointer;
		padding-right: 2.5em;
		text-align: left;
	}
	.fitactive-palinsesto .fitactive-palinsesto-header-cell::after {
		content: "";
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 8px solid currentColor;
		opacity: 0.9;
	}
	.fitactive-palinsesto 	.fitactive-palinsesto-column.fitactive-palinsesto-expanded .fitactive-palinsesto-header-cell::after {
		transform: translateY(-50%) rotate(180deg);
	}
	.fitactive-palinsesto:not(.fitactive-palinsesto-slider) .fitactive-palinsesto-column:not(.fitactive-palinsesto-expanded) .fitactive-palinsesto-cell:nth-child(n+2) {
		display: none;
	}
}

/* Carousel: tutte le celle sempre visibili (override eventuali regole accordion) */
.fitactive-palinsesto-slider.fitactive-palinsesto-mobile .fitactive-palinsesto-column .fitactive-palinsesto-cell {
	display: flex !important;
}

/* ---- Countdown widget ---- */
/* Layout orizzontale blocchi: scoped al widget per vincere su tema/Elementor in frontend */
.elementor-widget-fitactive-countdown .fitactive-countdown,
.fitactive-countdown {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif;
}

.elementor-widget-fitactive-countdown .fitactive-countdown-blocks,
.fitactive-countdown-blocks {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-justify-content: center;
	justify-content: center;
	gap: 12px;
}

/* Forza layout orizzontale in frontend se tema/Elementor sovrascrivono (Chrome/Safari) */
.elementor-widget-fitactive-countdown .fitactive-countdown-blocks {
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-direction: row !important;
	flex-direction: row !important;
}

.elementor-widget-fitactive-countdown .fitactive-countdown-block,
.fitactive-countdown-block {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	min-width: 4rem;
	padding: 0.75rem 1rem;
	background: #f0f2f5;
	border-radius: 8px;
	box-sizing: border-box;
}

.fitactive-countdown-placeholder {
	padding: 1rem;
	text-align: center;
	color: #5c6370;
	font-size: 0.9375rem;
}

.fitactive-countdown-number {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1a1d21;
}

.fitactive-countdown-label {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #5c6370;
}

.fitactive-countdown-text {
	text-align: center;
	font-size: 1rem;
	color: #1a1d21;
}

.fitactive-countdown-text-before {
	margin-bottom: 0;
}

.fitactive-countdown-text-after {
	margin-top: 0;
}

@media (max-width: 480px) {
	.elementor-widget-fitactive-countdown .fitactive-countdown-blocks,
	.fitactive-countdown-blocks {
		gap: 8px;
	}
	.elementor-widget-fitactive-countdown .fitactive-countdown-block,
	.fitactive-countdown-block {
		min-width: 3.25rem;
		padding: 0.5rem 0.65rem;
	}
	.fitactive-countdown-number {
		font-size: 1.35rem;
	}
	.fitactive-countdown-label {
		font-size: 0.65rem;
	}
}

