/* Travel Packages — max-1300px centered container that escapes any narrow parent */
/*
 * On desktop: negative margin-left pulls the section left past the 645px parent constraint.
 * On mobile (≤700px): fall back to 100% width with no offset (parent fills viewport normally).
 */
body { overflow-x: hidden; } /* clip the desktop breakout from causing a scrollbar */
.wbtm-tp-section {
	box-sizing: border-box;
	width: min(100vw, 1300px) !important;
	max-width: none !important;
	margin-left: calc(50% - min(50vw, 650px)) !important;
	margin-right: 0 !important;
	margin-bottom: 40px;
	padding: 0 0 48px;
	overflow: hidden;
	--tp-olive: #6f7d5e; --tp-tan: #b59b73; --tp-gold: #a8842b; --tp-green: #4f8a3d;
}
/* Mobile: stop the breakout — section fills parent width naturally */
@media (max-width: 700px) {
	.wbtm-tp-section {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}
/* Inner text/filter/group get horizontal padding; bars (heading/group-heading) have none */
.wbtm-tp-intro-heading,
.wbtm-tp-promo-label,
.wbtm-tp-intro-text,
.wbtm-tp-empty { padding-left: 36px; padding-right: 36px; }
/* Filter and group manage their own horizontal spacing */
.wbtm-tp-filter { margin-left: 36px; margin-right: 36px; }
.wbtm-tp-group { padding-left: 36px; padding-right: 36px; }
.wbtm-tp-section *, .wbtm-tp-section *::before, .wbtm-tp-section *::after { box-sizing: border-box; }
@media (max-width: 700px) {
	.wbtm-tp-intro-heading, .wbtm-tp-promo-label, .wbtm-tp-intro-text, .wbtm-tp-empty { padding-left: 16px; padding-right: 16px; }
	.wbtm-tp-filter { margin-left: 16px; margin-right: 16px; }
	.wbtm-tp-group { padding-left: 16px; padding-right: 16px; }
}

.wbtm-tp-section { --tp-serif: "Forum", Georgia, "Times New Roman", serif; }

/* ── Intro area — pixel-perfect match of ferroviadeiparchi.it ── */

/* H2: Large thin gold serif — "SOGGIORNA IN ABRUZZO E VIAGGIA IN TRENO STORICO" */
.wbtm-tp-intro-heading {
	text-align: center;
	color: var(--tp-gold);
	font-family: var(--tp-serif);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 32px 0 16px;
	padding: 0;
}
@media (max-width: 900px) { .wbtm-tp-intro-heading { font-size: 28px; letter-spacing: 2px; margin: 20px 0 12px; } }
@media (max-width: 600px) { .wbtm-tp-intro-heading { font-size: 22px; letter-spacing: 1px; } }

/* H5: Bold small dark uppercase — "PRENOTARE ORA TI CONVIENE!" */
.wbtm-tp-promo-label {
	text-align: center;
	color: #111;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0 0 8px;
}
@media (max-width: 480px) { .wbtm-tp-promo-label { font-size: 12px; letter-spacing: .5px; } }

/* Subtitle: normal weight, with embedded <strong> date bold and uppercase */
.wbtm-tp-intro-text {
	text-align: center;
	color: #555;
	font-size: 14px;
	font-style: normal;
	line-height: 1.65;
	max-width: 680px;
	margin: 0 auto 30px;
}
.wbtm-tp-intro-text strong {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #222;
}
@media (max-width: 600px) { .wbtm-tp-intro-text { font-size: 13px; margin-bottom: 20px; } }

/* Olive full-width bar — spans the entire container, no side padding needed */
.wbtm-tp-heading {
	background: var(--tp-olive);
	color: #fff;
	text-align: center;
	font-family: var(--tp-serif);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	margin: 0 0 24px;
	padding: 20px 32px;
	border-radius: 0;
	line-height: 1.2;
}

/* Route/category group + its tan header bar (e.g. "PACCHETTI CON IL TRENO STORICO ...") */
.wbtm-tp-group { margin: 0; }
.wbtm-tp-group.is-hidden { display: none; }
.wbtm-tp-group-heading {
	background: var(--tp-tan);
	color: #fff;
	text-align: center;
	font-family: var(--tp-serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	/* negative margins cancel out the group's padding so bar spans full section width */
	margin: 36px -36px 22px;
	padding: 14px 36px;
	border-radius: 0;
	line-height: 1.2;
}
.wbtm-tp-group:first-of-type .wbtm-tp-group-heading { margin-top: 0; }
@media (max-width: 700px) {
	/* mirrors the group padding reduction at <=700px */
	.wbtm-tp-group-heading { margin: 24px -16px 16px; padding: 12px 16px; font-size: 14px; }
}

/* ---------------- Filter bar ---------------- */
.wbtm-tp-filter {
	background: #f4f5f2;
	border: 1px solid #e2e4dd;
	border-radius: 6px;
	padding: 0 0 18px;
	margin: 0 0 26px;
	overflow: hidden;
}
.wbtm-tp-filter-heading {
	background: var(--tp-olive);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 18px;
	margin: 0 0 16px;
}
.wbtm-tp-filter-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	align-items: flex-start;
	padding: 0 18px;
}
.wbtm-tp-filter-col { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; }
.wbtm-tp-filter-dates { flex-direction: row; gap: 14px; }
.wbtm-tp-filter-field { display: flex; flex-direction: column; gap: 4px; }
.wbtm-tp-filter-field > label { font-size: 12px; font-weight: 700; color: #555; }
.wbtm-tp-filter-field input {
	border: 1px solid #cfd2cb;
	border-radius: 4px;
	padding: 8px 10px;
	background: #fff;
	min-width: 130px;
	max-width: 100%;
	font-size: 13px;
	cursor: pointer;
	box-sizing: border-box;
}
/* Let the filter columns wrap on tablet/mobile so nothing overflows the box. */
@media (max-width: 1024px) {
	.wbtm-tp-filter-grid { flex-wrap: wrap; gap: 22px; }
	.wbtm-tp-filter-actions { margin-left: 0; }
}
.wbtm-tp-filter-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: #3b3b3b; }
.wbtm-tp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; line-height: 1.7; color: #444; }
.wbtm-tp-check input { margin: 0; }
.wbtm-tp-filter-actions { margin-left: auto; flex-direction: row; align-items: flex-end; gap: 8px; }
.wbtm-tp-btn {
	border: 0;
	border-radius: 4px;
	padding: 11px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	cursor: pointer;
	background: var(--tp-olive);
	color: #fff;
	transition: opacity .15s;
}
.wbtm-tp-btn.wbtm-tp-reset { background: #9aa093; }
.wbtm-tp-btn:hover { opacity: .9; }

/* ---------------- Grid — responsive column breakdowns ---------------- */
.wbtm-tp-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wbtm-tp-cols-1 { grid-template-columns: minmax(0, 1fr); }
.wbtm-tp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wbtm-tp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wbtm-tp-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wbtm-tp-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ── Breakpoints ── */
/* 1100–1300px: 4-col → 3-col */
@media (max-width: 1100px) {
	.wbtm-tp-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wbtm-tp-cols-5, .wbtm-tp-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 780–1100px: everything → 2-col */
@media (max-width: 780px) {
	.wbtm-tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wbtm-tp-grid.wbtm-tp-cols-1 { grid-template-columns: minmax(0, 1fr); }
}
/* <480px: single column */
@media (max-width: 480px) {
	.wbtm-tp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Mobile: reduce section bottom padding */
@media (max-width: 600px) { .wbtm-tp-section { padding-bottom: 24px; } }

/* ── Heading bars mobile ── */
@media (max-width: 700px) {
	.wbtm-tp-heading { font-size: 18px; letter-spacing: 1px; padding: 14px 16px; }
}

.wbtm-tp-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(0,0,0,.07);
	transition: box-shadow .2s, transform .2s;
}
.wbtm-tp-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.13); transform: translateY(-2px); }
.wbtm-tp-card.is-hidden { display: none !important; }
/* On mobile make cards touchable — no hover lift */
@media (max-width: 780px) {
	.wbtm-tp-card:hover { transform: none; }
}

/* ---------------- Gallery / carousel ---------------- */
.wbtm-tp-gallery { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #eceae6; }
@supports not (aspect-ratio: 1) { .wbtm-tp-gallery { height: 0; padding-bottom: 62.5%; } }
/* Taller gallery on very small single-column cards */
@media (max-width: 480px) { .wbtm-tp-gallery { aspect-ratio: 4 / 3; } }
.wbtm-tp-track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.wbtm-tp-track::-webkit-scrollbar { display: none; }
.wbtm-tp-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	padding: 0;
	border: 0;
	margin: 0;
	background: none;
	cursor: zoom-in;
	display: block;
}
.wbtm-tp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wbtm-tp-slide--empty { background: linear-gradient(135deg, #d8d4cc, #efece6); cursor: default; }
.wbtm-tp-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	color: #333;
	cursor: pointer;
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	box-shadow: 0 1px 5px rgba(0,0,0,.25);
	opacity: 0;
	transition: opacity .2s;
	z-index: 2;
}
.wbtm-tp-gallery:hover .wbtm-tp-nav { opacity: 1; }
/* Always show arrows on touch screens */
@media (hover: none), (max-width: 782px) { .wbtm-tp-nav { opacity: 1; } }
.wbtm-tp-prev { left: 7px; }
.wbtm-tp-next { right: 7px; }

/* ---------------- Card body ---------------- */
.wbtm-tp-body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; text-align: center; background: #f6f6f3; }
.wbtm-tp-title { font-size: 13px; margin: 0; line-height: 1.25; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; font-family: var(--tp-serif); color: var(--tp-gold); }
.wbtm-tp-title a { color: var(--tp-gold); text-decoration: none; }
.wbtm-tp-title a:hover { text-decoration: underline; }
.wbtm-tp-subtitle { font-size: 10px; font-weight: 700; color: #2e2e2e; line-height: 1.35; letter-spacing: .3px; text-transform: uppercase; }
.wbtm-tp-price { font-size: 12px; color: #444; padding-top: 2px; }
.wbtm-tp-old { color: #999; margin: 0 3px; text-decoration: line-through; font-size: 11px; }
.wbtm-tp-promo { font-weight: 700; color: #222; }
/* On single-column mobile, slightly larger card text */
@media (max-width: 480px) {
	.wbtm-tp-body { padding: 12px 14px 16px; }
	.wbtm-tp-title { font-size: 15px; }
	.wbtm-tp-subtitle { font-size: 11px; }
	.wbtm-tp-price { font-size: 13px; }
}

/* Date buttons */
.wbtm-tp-dates { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 7px; }
.wbtm-tp-date-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 0 0 auto;
	background: var(--tp-green);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2px;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 3px;
	text-decoration: none;
	transition: opacity .15s;
}
.wbtm-tp-date-btn:hover { color: #fff; opacity: .88; }
.wbtm-tp-date-btn .dashicons { font-size: 12px; width: 12px; height: 12px; }
/* Larger tap targets on mobile */
@media (max-width: 480px) {
	.wbtm-tp-date-btn { font-size: 11px; padding: 7px 12px; }
}
.wbtm-tp-empty { text-align: center; padding: 28px; color: #777; font-style: italic; }

/* ── Filter bar mobile ── */
@media (max-width: 768px) {
	.wbtm-tp-filter-grid { flex-wrap: wrap; gap: 14px; }
	.wbtm-tp-filter-dates { flex: 1 1 100%; flex-direction: row; gap: 10px; }
	.wbtm-tp-filter-dates .wbtm-tp-filter-field { flex: 1; }
	.wbtm-tp-filter-field input { min-width: 0; width: 100%; }
	.wbtm-tp-filter-col { flex: 1 1 45%; }
	.wbtm-tp-filter-actions { flex: 1 1 100%; flex-direction: row; gap: 10px; margin-left: 0; }
	.wbtm-tp-btn { flex: 1; padding: 12px 10px; font-size: 13px; }
}
@media (max-width: 480px) {
	.wbtm-tp-filter-col { flex: 1 1 100%; }
	.wbtm-tp-filter-dates { flex-direction: column; gap: 8px; }
}

/* ---------------- Lightbox ---------------- */
.wbtm-tp-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.9);
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
}
.wbtm-tp-lightbox.is-open { display: flex; }
.wbtm-tp-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.wbtm-tp-lb-close, .wbtm-tp-lb-nav {
	position: absolute;
	background: rgba(255,255,255,.12);
	border: 0;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
}
.wbtm-tp-lb-close { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 24px; }
.wbtm-tp-lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 26px; }
.wbtm-tp-lb-prev { left: 18px; }
.wbtm-tp-lb-next { right: 18px; }
.wbtm-tp-lb-close:hover, .wbtm-tp-lb-nav:hover { background: rgba(255,255,255,.25); }

/* jQuery UI datepicker sits above everything when used inside the filter */
.ui-datepicker { z-index: 1000000 !important; }
.ui-datepicker td.wbtm-tp-avail-day a { background: #e6f1e0; border-color: #cfe3c4; color: #2f6b22; font-weight: 700; }
.ui-datepicker td.wbtm-tp-avail-day a:hover { background: var(--tp-green, #4f8a3d); color: #fff; }

/* ── Datepicker mobile: fit the viewport instead of overflowing off-screen ──
   jQuery UI positions the popup with inline top/left/width at its desktop size,
   which clips the last column on phones. On small screens we pin it as a
   centred panel sized to the viewport, and force an even 7-column grid so every
   day cell stays visible. Doubled class + !important override the inline styles. */
@media (max-width: 600px) {
	.ui-datepicker.ui-datepicker {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		margin: 0 !important;
		transform: translate(-50%, -50%);
		width: 92vw !important;
		max-width: 340px !important;
		box-sizing: border-box;
		font-size: 15px;
	}
	.ui-datepicker.ui-datepicker .ui-datepicker-header { position: relative; padding: 6px 4px; }
	.ui-datepicker.ui-datepicker .ui-datepicker-title { display: flex; justify-content: center; gap: 6px; }
	.ui-datepicker.ui-datepicker .ui-datepicker-title select { max-width: 46%; padding: 2px; }
	.ui-datepicker.ui-datepicker .ui-datepicker-calendar {
		width: 100%;
		margin: 0;
		table-layout: fixed;
	}
	.ui-datepicker.ui-datepicker .ui-datepicker-calendar th,
	.ui-datepicker.ui-datepicker .ui-datepicker-calendar td {
		padding: 1px;
		text-align: center;
		word-break: normal;
	}
	.ui-datepicker.ui-datepicker .ui-datepicker-calendar td a,
	.ui-datepicker.ui-datepicker .ui-datepicker-calendar td span {
		display: block;
		padding: 9px 0;
		text-align: center;
	}
}