/* Passepartout Booking Box — Web Etica S.R.L. */

/* =====================================
   BOX DI RICERCA
   ===================================== */
.ppb-box {
	--ppb-primary: #1E4D43;
	--ppb-button: #C74C3E;
	--ppb-bg: #FCFCEE;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 20px;
	background: var(--ppb-bg);
}

.ppb-box *,
.ppb-box *::before,
.ppb-box *::after { box-sizing: border-box; }

.ppb-box .ppb-bar {
	display: flex;
	gap: 35px;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	padding: 15px 0;
	max-width: 1400px;
	margin: 0 auto;
}

.ppb-box .ppb-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 320px;
	min-width: 280px;
	max-width: 480px;
	margin: 0;
}

.ppb-box .ppb-field-small {
	flex: 0 1 140px;
	min-width: 120px;
}

.ppb-box .ppb-field-btn {
	flex: 1 1 300px;
	min-width: 260px;
}

.ppb-box .ppb-field label {
	display: block;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	margin: 0 0 10px 0;
	color: #333;
	line-height: 1.3;
}

.ppb-box .ppb-field input,
.ppb-box .ppb-field select {
	height: 58px;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	font-size: 18px;
	line-height: normal;
	color: #333;
	border: 1px solid #cfcfcf;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
}

.ppb-box .ppb-field input:focus,
.ppb-box .ppb-field select:focus {
	outline: none;
	border-color: var(--ppb-primary);
}

.ppb-box .ppb-field input.ppb-error { border-color: var(--ppb-button); }

.ppb-box .ppb-button {
	height: 58px;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	border: none;
	border-radius: 0;
	background: var(--ppb-button);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	transition: background 0.2s;
}

.ppb-box .ppb-button:hover,
.ppb-box .ppb-button:focus { background: #4b4440; color: #fff; }

.ppb-box .ppb-eta {
	max-width: 1400px;
	margin: 0 auto 10px;
	text-align: center;
}

.ppb-box .ppb-eta-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.ppb-box .ppb-eta-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.ppb-box .ppb-eta-row select {
	width: 70px;
	height: 40px;
	border: 1px solid #cfcfcf;
	background: #fff;
}

.ppb-box .ppb-msg {
	text-align: center;
	color: var(--ppb-button);
	font-weight: 600;
	min-height: 0;
}

.ppb-box .ppb-msg:not(:empty) { padding: 0 0 10px; }

/* =====================================
   CALENDARIO (solo quello del plugin)
   ===================================== */
.ui-helper-hidden-accessible {
	border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px;
}

#ui-datepicker-div.ppb-dp {
	--ppb-primary: #1E4D43;
	--ppb-button: #C74C3E;
	width: 340px !important;
	max-width: calc(100vw - 24px) !important;
	box-sizing: border-box !important;
	padding: 0 0 8px 0 !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18) !important;
	background: #fff !important;
	overflow: hidden;
	font-family: inherit !important;
	z-index: 99999 !important;
}

#ui-datepicker-div.ppb-dp * { box-sizing: border-box; }

#ui-datepicker-div.ppb-dp .ui-datepicker-header {
	position: relative;
	background: var(--ppb-primary) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 14px 10px !important;
}

#ui-datepicker-div.ppb-dp .ui-datepicker-prev,
#ui-datepicker-div.ppb-dp .ui-datepicker-next {
	position: absolute;
	top: 50% !important;
	transform: translateY(-50%);
	width: 32px !important;
	height: 32px !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.15) !important;
	cursor: pointer;
	overflow: hidden;
	text-indent: -9999px;
	transition: background 0.2s;
}

#ui-datepicker-div.ppb-dp .ui-datepicker-prev { left: 10px !important; }
#ui-datepicker-div.ppb-dp .ui-datepicker-next { right: 10px !important; }

#ui-datepicker-div.ppb-dp .ui-datepicker-prev:hover,
#ui-datepicker-div.ppb-dp .ui-datepicker-next:hover {
	background: rgba(255, 255, 255, 0.35) !important;
}

#ui-datepicker-div.ppb-dp .ui-datepicker-prev.ui-state-disabled { opacity: 0.35; cursor: default; }

#ui-datepicker-div.ppb-dp .ui-datepicker-prev span,
#ui-datepicker-div.ppb-dp .ui-datepicker-next span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background: none !important;
	width: 9px !important;
	height: 9px !important;
	margin: -4px 0 0 -5px !important;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	text-indent: 0;
	font-size: 0;
}

#ui-datepicker-div.ppb-dp .ui-datepicker-prev span { transform: rotate(-135deg); margin-left: -3px !important; }
#ui-datepicker-div.ppb-dp .ui-datepicker-next span { transform: rotate(45deg); }

#ui-datepicker-div.ppb-dp .ui-datepicker-title {
	display: flex;
	justify-content: center;
	margin: 0 44px !important;
	line-height: normal !important;
	color: #fff;
}

#ui-datepicker-div.ppb-dp select.ui-datepicker-month,
#ui-datepicker-div.ppb-dp select.ui-datepicker-year {
	width: 48% !important;
	max-width: none !important;
	margin: 0 1% !important;
	height: 34px !important;
	padding: 4px 6px !important;
	border: none !important;
	border-radius: 8px !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	color: var(--ppb-primary) !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: normal !important;
	cursor: pointer;
}

#ui-datepicker-div.ppb-dp table {
	table-layout: fixed !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 6px 0 0 0 !important;
	padding: 0 6px !important;
	border: none !important;
	border-collapse: separate !important;
	border-spacing: 2px !important;
	font-size: 15px !important;
	background: transparent !important;
}

#ui-datepicker-div.ppb-dp table tr,
#ui-datepicker-div.ppb-dp table thead,
#ui-datepicker-div.ppb-dp table tbody {
	border: none !important;
	background: transparent !important;
}

#ui-datepicker-div.ppb-dp th,
#ui-datepicker-div.ppb-dp td {
	width: 14.28% !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	text-align: center !important;
	line-height: normal !important;
	vertical-align: middle;
}

#ui-datepicker-div.ppb-dp th {
	padding: 8px 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: #999 !important;
	overflow: hidden;
}

#ui-datepicker-div.ppb-dp td span,
#ui-datepicker-div.ppb-dp td a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 40px;
	height: 40px;
	margin: 0 auto;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #333 !important;
	font-size: 16px !important;
	font-weight: 400;
	text-decoration: none !important;
	text-align: center !important;
	transition: background 0.15s, color 0.15s;
}

#ui-datepicker-div.ppb-dp td a:hover {
	background: #E8F0EE !important;
	color: var(--ppb-primary) !important;
}

#ui-datepicker-div.ppb-dp td a.ui-state-highlight {
	background: #FCF3D9 !important;
	color: var(--ppb-primary) !important;
	font-weight: 600;
}

#ui-datepicker-div.ppb-dp td a.ui-state-active {
	background: var(--ppb-button) !important;
	color: #fff !important;
	font-weight: 600;
}

#ui-datepicker-div.ppb-dp td.ui-state-disabled span,
#ui-datepicker-div.ppb-dp td.ui-datepicker-unselectable span { color: #ccc !important; }

/* =====================================
   RESPONSIVE
   ===================================== */
@media (max-width: 768px) {
	.ppb-box .ppb-bar { gap: 20px; }

	.ppb-box .ppb-field,
	.ppb-box .ppb-field-btn {
		flex: 1 1 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.ppb-box .ppb-field-small {
		flex: 1 1 calc(50% - 10px);
		min-width: calc(50% - 10px);
	}

	.ppb-box .ppb-field label { text-align: left; }

	.ppb-box .ppb-field input,
	.ppb-box .ppb-field select,
	.ppb-box .ppb-button { height: 52px; }
}

@media (max-width: 480px) {
	#ui-datepicker-div.ppb-dp {
		width: calc(100vw - 24px) !important;
		max-width: 340px !important;
		left: 12px !important;
	}

	#ui-datepicker-div.ppb-dp td span,
	#ui-datepicker-div.ppb-dp td a {
		height: 38px;
		font-size: 15px !important;
	}
}