/* Carosello moto — allineato AL TEMA "Libermoto" (valori esatti dallo style.css del tema):
   verde brand #43d941 (secondary), blu brand #243676 (primary),
   schede come .card-trip (#f5f6f5, raggio 20px), frecce come lo swiper (60px, bordo 2px verde).
   I pulsanti usano le classi del tema (btn btn--bg-secondary / btn--bg-primary). */

:root {
	--lmb-green: #43d941;   /* secondary (verde brand) */
	--lmb-blue:  #243676;   /* primary (blu brand) */
	--lmb-card-bg: #f5f6f5;
	--lmb-radius: 20px;
}

.lmb-carosello {
	margin: 2.75rem 0 1.75rem;
	font-family: inherit;
	color: inherit;
	font-size: 1rem;
	line-height: 1.4;
}
/* Riga verde: dentro il .container del TEMA -> stessa identica larghezza degli altri separatori. */
.lmb-carosello .lmb-carosello__sepwrap { margin: 0 auto 2.25rem; }
.lmb-carosello .lmb-carosello__sep { border-top: 2px solid var(--lmb-green); }
.lmb-carosello *,
.lmb-carosello *::before,
.lmb-carosello *::after { box-sizing: border-box; }

/* Larghezza piena: titolo/frecce/schede a tutta larghezza; la riga verde resta
   alla larghezza del contenitore del tema (.lmb-carosello__sepwrap.container). */
.lmb-carosello--full {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}
.lmb-carosello.lmb-carosello--full .lmb-carosello__head {
	padding-left: clamp( 16px, 5vw, 64px );
	padding-right: clamp( 16px, 5vw, 64px );
}
/* Spazio a inizio/fine della riga che scorre (stesso inset del titolo).
   Il padding sul lato INIZIALE (sinistra) di un contenitore con overflow-x
   è sempre rispettato dai browser: la prima scheda parte staccata dal bordo
   e allineata al titolo, mantenendo lo scroll a tutta larghezza. */
.lmb-carosello.lmb-carosello--full .lmb-rail {
	padding-left: clamp( 16px, 5vw, 64px );
	padding-right: clamp( 16px, 5vw, 64px );
	scroll-padding-left: clamp( 16px, 5vw, 64px );
}

.lmb-carosello .lmb-carosello__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin: 0 0 1.1rem;
}
/* Titolo: classi del tema (title title--l) -> stesso stile identico. */
.lmb-carosello .lmb-carosello__title { margin: 0; padding: 0; }

/* Frecce IDENTICHE allo swiper del tema (stesso SVG, stesse misure). */
.lmb-carosello .lmb-carosello__nav { display: flex; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.lmb-carosello .lmb-arrow {
	position: relative;
	width: 60px; height: 60px; min-width: 60px; border-radius: 50%;
	border: 2px solid var(--lmb-green); background: rgba(0,0,0,0);
	cursor: pointer; padding: 0; font-size: 0;
	transition: all .3s ease-out;
}
.lmb-carosello .lmb-arrow::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 22px; height: 15px; transform: translate( -50%, -50% );
	background: url("data:image/svg+xml;charset=utf8,%3Csvg width%3D%2222%22 height%3D%2215%22 viewBox%3D%220 0 22 15%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M20.4456 7.5h-19m19 0-6 6m6-6-6-6%22 stroke%3D%22%2343D941%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
	transition: all .3s ease-out;
}
.lmb-carosello .lmb-arrow[data-dir="-1"]::after { transform: translate( -50%, -50% ) rotate( 180deg ); }

.lmb-carosello .lmb-rail {
	display: flex; gap: 22px; overflow-x: auto; margin: 0; padding: 6px 4px 16px;
	list-style: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.lmb-carosello .lmb-rail::-webkit-scrollbar { display: none; }

/* Scheda: come .card-trip. */
.lmb-carosello .lmb-card {
	flex: 0 0 340px; width: 340px; margin: 0; scroll-snap-align: start;
	background: var(--lmb-card-bg); border: 2px solid transparent; border-radius: var(--lmb-radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: border-color .15s ease;
	cursor: pointer; /* tutta la scheda è cliccabile per selezionare */
}
/* Le condizioni di noleggio NON selezionano: cursore/hover propri */
.lmb-carosello .lmb-cond-trigger { cursor: pointer; }
/* Bordino BLU interno alla scheda selezionata (non si taglia sulla prima a sx). */
.lmb-carosello .lmb-card.is-selected { border-color: var(--lmb-blue); }

.lmb-carosello .lmb-card__photo {
	position: relative;
	aspect-ratio: 5 / 3; background: #e8e9e8;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* Info "i" in alto a destra sulla foto -> apre il popup condizioni. */
.lmb-carosello .lmb-info {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	width: 30px; height: 30px; border-radius: 50%; border: none;
	background: #fff; color: var(--lmb-blue);
	font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 17px;
	line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 5px rgba(0,0,0,.28);
	transition: background .15s, color .15s;
}
.lmb-carosello .lmb-info:hover { background: var(--lmb-blue); color: #fff; }

/* Scritta "i Condizioni di noleggio" cliccabile, sopra il prezzo (a sinistra). */
.lmb-carosello .lmb-cond-link {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: none; padding: 0; margin: 0;
	color: var(--lmb-blue); font-family: inherit; font-size: .85rem; font-weight: 500;
	cursor: pointer; line-height: 1.2;
	transition: color .15s;
}
.lmb-carosello .lmb-cond-link__i {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; border-radius: 50%;
	border: 1.5px solid currentColor;
	font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 11px; line-height: 1;
}
.lmb-carosello .lmb-cond-link__t { text-decoration: underline; text-underline-offset: 2px; }
.lmb-carosello .lmb-cond-link:hover { color: var(--lmb-green); }

/* Spazio riservato dove NON ci sono condizioni, per allineare i prezzi su tutte le schede. */
.lmb-carosello .lmb-cond-spacer { height: 17px; }

/* Blocco in basso alla scheda: Condizioni -> Prezzo -> pulsante. Il gap dà un po' d'aria
   tra condizioni e prezzo e tra prezzo e pulsante. */
.lmb-carosello .lmb-card__cta { display: flex; flex-direction: column; gap: 12px; }
.lmb-carosello .lmb-card__img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; }
.lmb-carosello .lmb-card__noimg { font-size: .9rem; color: #b3b3b3; }

.lmb-carosello .lmb-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* Nome + caratteristiche: assorbe lo spazio libero della scheda, così il blocco
   condizioni/prezzo/pulsante resta compatto in basso (niente spazio che si infila tra i due). */
.lmb-carosello .lmb-card__top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.lmb-carosello .lmb-card__name {
	margin: 0; padding: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25;
	color: inherit; text-transform: none; letter-spacing: normal;
}

.lmb-carosello .lmb-card__specs {
	margin: 0; padding: 0; font-size: .95rem; line-height: 1.45;
	color: #555; color: color-mix( in srgb, currentColor 65%, transparent );
}

.lmb-carosello .lmb-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.lmb-carosello .lmb-card__price-val { font-size: 1.3rem; font-weight: 700; line-height: 1.1; color: inherit; }
.lmb-carosello .lmb-card__price-val--nocost { font-size: 1.05rem; }
.lmb-carosello .lmb-card__price-note {
	font-size: .85rem;
	color: #888; color: color-mix( in srgb, currentColor 55%, transparent );
}

/* Pulsante "Seleziona": classi del tema (btn btn--bg-secondary). Da selezionato il JS
   mette btn--bg-primary (blu, testo bianco) e cambia il testo in "Selezionato". */
.lmb-carosello .lmb-card__select { margin: 0; }
.lmb-carosello .lmb-select-btn { width: 100%; justify-content: center; text-align: center; cursor: pointer; }

/* Popup condizioni di noleggio. */
.lmb-modal-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0,0,0,.5);
	display: none; align-items: center; justify-content: center; padding: 20px;
	font-family: "Poppins", inherit;
}
.lmb-modal-overlay.is-open { display: flex; }
.lmb-modal {
	position: relative; background: #fff; color: #000;
	border-radius: 12px; max-width: 640px; width: 100%; max-height: 85vh; overflow: auto;
	padding: 32px 32px 28px;
}
.lmb-modal__close {
	position: absolute; top: 12px; right: 12px;
	width: 40px; height: 40px; border: none; border-radius: 8px;
	background: var(--lmb-blue); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.lmb-modal__title { margin: 0 0 16px; padding-right: 40px; font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.lmb-modal__body { font-size: 1rem; line-height: 1.6; }
.lmb-modal__body p { margin: 0 0 1em; }
.lmb-modal__body p:last-child { margin-bottom: 0; }
.lmb-modal__body ul, .lmb-modal__body ol { margin: 0 0 1em; padding-left: 1.2em; }

@media (max-width: 600px) {
	.lmb-carosello .lmb-rail { gap: 16px; }
	.lmb-carosello .lmb-card { flex-basis: 86%; width: 86%; }
	.lmb-carosello .lmb-arrow { width: 50px; height: 50px; min-width: 50px; }
	/* Testo del titolo SOPRA le frecce (impilati, in due aree diverse). */
	.lmb-carosello .lmb-carosello__head { flex-direction: column; align-items: stretch; gap: 14px; }
	.lmb-carosello .lmb-carosello__nav { margin-left: 0; justify-content: flex-end; }
	/* Riga verde a tutta larghezza su mobile. */
	.lmb-carosello .lmb-carosello__sepwrap { max-width: none; padding-left: 0; padding-right: 0; margin-left: calc( 50% - 50vw ); margin-right: calc( 50% - 50vw ); margin-bottom: 1.9rem; }
}

/* Quota di noleggio pagata alla prenotazione ("di cui" del prezzo, non un extra) */
.lmb-card__price-antic {
	display: block;
	font-size: .82em;
	color: #777;
	line-height: 1.3;
	margin-top: 2px;
}