/* @import url('https://fonts.googleapis.com/css2?family=Lustria&display=swap'); */

body {
	--gap-space: 5px;
	--border-style: 1px solid color-mix(in srgb, var(--ct-card-color, #F6F7FB) 95%, black);;
	--border-style-hover: 2px solid var(--ct-primary);
	--radius: 5px;
	--mdi-font-family: "Material Design Icons";
}

body > div.wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.alert-top {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 770px;
	z-index: 10000;
}

.form-check-input:checked {
	background-color: var(--ct-primary);
	border-color: var(--ct-primary);
}

#booking-section h1,
#booking-section h2,
#booking-section h3,
#booking-section h4,
#booking-section h5 {
	font-weight: 400;
	font-style: normal;
	color: var(--ct-heading-color,#666);
	text-align: center;
}

.company_logo img {
	max-height:100px;
	max-width: 500px;
}

.company-excerpt {
	color: rgba(var(--ct-body-color-rgb, "49,58,70"),0.55);
}

.frontend-toolbar {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 1.25rem;
	display: flex;
	align-items: center;
}

/* ========== STEP NAVIGATOR ========== */

.step-navigator {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	gap: 0;
}

.step-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: default;
	min-width: 70px;
}

.step-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #e2e2e2;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
	transition: background .3s, color .3s;
}

.step-nav-item.active .step-circle {
	background: var(--ct-primary);
	color: #fff;
}

.step-nav-item.completed .step-circle {
	background: var(--ct-success);
	color: #fff;
}

.step-nav-item.completed .step-circle::after {
	content: "\F012C";
	font-family: var(--mdi-font-family);
	font-weight: normal;
	font-size: 14px;
}

.step-nav-item.completed .step-circle {
	font-size: 0;
}

.step-label {
	font-size: .75rem;
	color: #999;
	margin-top: 4px;
	text-align: center;
	white-space: nowrap;
}

.step-nav-item.active .step-label {
	color: var(--ct-primary);
	font-weight: 600;
}

.step-nav-item.completed .step-label {
	color: var(--ct-success);
	font-weight: 600;
}

.step-nav-line {
	flex: 1;
	height: 3px;
	background: #e2e2e2;
	margin: 0 6px;
	margin-bottom: 20px;
	transition: background .3s;
}

.step-nav-line.completed {
	background: var(--ct-success);
}

/* ========== STEP SLIDER ========== */

.step-slider-viewport {
	overflow: hidden;
	position: relative;
	transition: height .4s ease;
	margin-bottom: 3rem;
}

.step-slider-track {
	display: flex;
	align-items: flex-start;
	transition: transform .4s ease;
	will-change: transform;
}

.step-slide {
	width: 100%;
	flex-shrink: 0;
}

.step-slide .slide-inner{
	box-sizing: border-box;
	background: var(--ct-card-color, #F6F7FB);
	border: var(--border-style);
	border-radius: var(--radius);
  padding: 10px;
	min-height:400px;
}

.step-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.step-actions .btn-prev {
	margin-right: auto;
}

.step-actions .btn-next,
.step-actions .btn-confirm-booking {
	margin-left: auto;
}

/* ========== STILE DATEPICKER ========== */

.datepicker-inline {
	width: auto !important;
}

.datepicker table {
	width: 100%;
}

.datepicker-days table {

	& {
		display: grid;
		grid-template-areas: "header" "calendar" "footer";
	}

	& tbody {
		display: grid;
		gap: var(--gap-space);
	}

	& tbody tr,
	& thead tr {
		display: grid;
		gap: var(--gap-space);
		grid-template-columns: repeat(7, 1fr);
	}

	& thead tr:nth-child(2) {
		grid-template-columns: 1fr 5fr 1fr;
	}

	& tr td,
	& tr th {
		align-items: center;
		display: flex;
		justify-content: center;
		text-align: center;
		width: auto;
		height: auto;
		font-size: 1rem;
		border-radius: unset;
	}

	& thead tr:nth-child(2) th {
		height: 60px;
	}

	& tr td.day {
		aspect-ratio: 5/3;
		border: var(--border-style);
		background-color: white;
		border-radius: var(--radius);
		position: relative;
	}

	& tr td.day.new,
	& tr td.day.old {
		border: 0 !important;
		visibility: hidden;
		height:0;
	}

	& tr td.day:hover {
		cursor: pointer;
		border: var(--border-style-hover)
	}

	& tr td.active.active {
		background-color: var(--ct-primary) !important;
		color: white;
	}

	& tr td.day.today:not(.active),
	& tr td.day.today:not(.active):hover {
		background-color: var(--ct-secondary) !important;
		color: white;
	}

	& tr td.day.disabled,
	& tr td.day.disabled:hover {
		cursor: not-allowed;
		opacity: 0.6;
		border: 0 !important;
	}

	& tr th.datepicker-switch {
		grid-column: 2/3;
		width: auto;
		height: auto;
		pointer-events: none !important;
	}

	& tr td.day.has-recurring::before,
	& tr td.day.has-event::after {
		content: "";
		position: absolute;
		bottom: 7px;
		line-height:14px;
		text-shadow: 0 0 0 2px white;
	}

	& tr td.day.today.has-recurring::before,
	& tr td.day.today.has-event::after,
	& tr td.day.active.has-recurring::before,
	& tr td.day.active.has-event::after {
		color: white;
	}
	
	& tr td.day.has-recurring::before {
		content: "\F0765";
		font-family: "Material Design Icons";
		color: var(--ct-secondary);
		left: calc(50% - 10px);
		font-size:9px;
	}

	& tr td.day.has-event::after {
		content: "\F04CE";
		font-family: "Material Design Icons";
		color: var(--ct-primary);
		right: calc(50% - 12px);
		font-size: 14px;
	}

	& tr td.day.has-recurring:not(.has-event)::before {
		left: calc(50% - 3.5px);
	}

	& tr td.day.has-event:not(.has-recurring)::after {
		right: calc(50% - 3.5px);
	}

	& tr td.day.blocked {
		border-bottom: 3px solid var(--ct-danger) !important;
	}

	& tr td.day.exception {
		border-bottom: 3px solid var(--ct-warning) !important;
	}

	& tr td.day.override::after {
		content: "\F05D6";
		font-family: "Material Design Icons";
		position: absolute;
		color: var(--ct-warning);
		top: 2px;
		right: 4px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		pointer-events: none;
	}

	@media (max-width: 991px) {
		& tr td.day {
			font-size: .85rem;
		}
		& tr td.day.has-recurring::before {
			font-size:7px;
			bottom: 2px;
		}
		& tr td.day.has-event::after {
			font-size:10px;
			bottom: 2px;
		}
		& tr td.day {
			aspect-ratio: 1/1;
		}
	}

}

.datepicker-months .month,
.datepicker-years .year,
.datepicker-decades .decade,
.datepicker-centuries .century {
	border: 1px solid #dedede;
}


/* ========== CALENDAR LEGEND ========== */

.calendar-legend {
	display: flex;
	justify-content: start;
	gap: 1.5rem;
	font-size: .8rem;
	color: #999;
	padding: 10px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.legend-dot.dot-recurring {
	background: var(--ct-primary);
}

.legend-dot.dot-event {
	background: var(--ct-danger);
}

/* ========== SELECTED SERVICE BANNER (Step 3) ========== */

.selected-service-banner {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
	border: 2px solid var(--ct-primary);
	border-radius: var(--radius);
	background: #f9fbfd;
}

.selected-service-banner .service-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ct-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #fff;
	flex-shrink: 0;
}

.selected-service-banner .service-info {
	flex: 1;
	min-width: 0;
}

.selected-service-banner .service-info h6 {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	color: var(--ct-secondary);
	text-align: left;
}

.selected-service-banner .service-info p {
	margin: 2px 0 0;
	font-size: .8rem;
	color: #999;
	text-align: left;
}

/* ========== SERVICES LIST (Step 1) ========== */

@keyframes fadeSlideIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

#services-list {
	animation: fadeSlideIn .3s ease;
}

/* Service cards */
.service-card {
	border: 2px solid var(--ct-light);
	border-radius: var(--radius);
	padding: .85rem 1rem;
	margin-bottom: .65rem;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	display: flex;
	align-items: center;
	gap: .75rem;
	background-color: white;
}

.service-card:hover {
	border-color: var(--ct-primary);
	background: #f9fbfd;
}

.service-card.selected {
	border-color: var(--ct-primary);
	background: white;
}

.service-card .service-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ct-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #666;
	flex-shrink: 0;
}

.service-card.selected .service-icon {
	background: var(--ct-primary);
	color: #fff;
}

.service-card .service-info {
	flex: 1;
	min-width: 0;
}

.service-card .service-info h6 {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	color: var(--ct-heading-color, #666);
	text-align: left;
}

.service-card.event .service-info h6 {
	color: var(--ct-heading-color, #666);
}

.service-card .service-info p {
	margin: 2px 0 0;
	font-size: .8rem;
	color: rgba(var(--ct-body-color-rgb, "49,58,70"),0.65);
}

.service-card.waitlist::after {
	content: 'Sold out';
	font-size: 9px;
	background: red;
	color: white;
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	flex-shrink: 0;
}

.service-card.external-link {
	cursor: default;
}

/* Timeslot grid nel pannello laterale */
.timeslot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: var(--gap-space);
}

.timeslot-grid .slot {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	border: var(--border-style);
	border-radius: var(--radius);
	cursor: pointer;
	padding: 10px 8px;
	font-size: 1.05em;
	transition: background .2s, color .2s;
}

.timeslot-grid .slot:hover {
	background-color: var(--ct-secondary);
	color: white;
}

.timeslot-grid .slot.selected {
	background-color: var(--ct-primary);
	color: #fff;
}

.timeslot-grid .slot.disabled {
	opacity: .5;
	cursor: not-allowed;
}

@keyframes slot-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-4px); }
	40%       { transform: translateX(4px); }
	60%       { transform: translateX(-3px); }
	80%       { transform: translateX(3px); }
}

.timeslot-grid .slot.shake {
	animation: slot-shake .4s ease;
}

.timeslot-grid .slot.wl_slot {
	color: #000;
	background: #fff1c8;
}

.timeslot-grid .slot.wl_slot.selected {
	background: #ffbf00;
	color: #000;
}

/* ========== STEP 4: RIEPILOGO ========== */

.booking-summary-card {
	border: 2px solid var(--ct-light);
	border-radius: 8px;
	padding: 1.5rem;
	background: #fafafa;
}

.booking-summary-card .summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: var(--border-style)
}

.booking-summary-card .summary-row:last-child {
	border-bottom: none;
}

.booking-summary-card .summary-label {
	color: #999;
	font-size: .9rem;
}

.booking-summary-card .summary-value {
	font-weight: 600;
	color: #333;
	font-size: .95rem;
}

/* ========== FEEDBACK ========== */

.feedback-title {
	font-size: 1rem;
	color: #666;
	font-weight: 500;
	margin-bottom: .75rem;
}

.feedback-faces {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

.feedback-face {
	background: none;
	border:0;
	padding:0;
	cursor: pointer;
	line-height: 1;
	transition: border-color .2s, transform .15s;
	color: #aaa;
}

.feedback-face i {
	font-size: 2.4rem;
	display: block;
}

.feedback-face:hover {
	transform: scale(1.15);
}

.feedback-face[data-vote="1"]:hover,
.feedback-face[data-vote="1"].selected {
	color: var(--ct-danger);
	border-color: var(--ct-danger);
}

.feedback-face[data-vote="2"]:hover,
.feedback-face[data-vote="2"].selected {
	color: #f0ad00;
	border-color: #f0ad00;
}

.feedback-face[data-vote="3"]:hover,
.feedback-face[data-vote="3"].selected {
	color: var(--ct-success);
	border-color: var(--ct-success);
}

.feedback-face.selected {
	transform: scale(1.2);
}

#privacy,
#terms-conditions {

	& .form-check-input {
		width: 20px;
		height: 20px;
		margin-left: -2em;
	}

	& .form-check {
		padding-left: 2em;
	}

}

.stripe-wrapper {
	border: 1px solid #ced4da;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	background-color: #fff;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.stripe-wrapper:focus-within {
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.stripe-wrapper.invalid {
	border-color: #dc3545;
}

.reservation .badge {
	vertical-align: middle;
}

.reservation-name .badge {
	font-size: 0.75rem;
}

/* ========== PEOPLE PICKER ========== */

.people-picker-wrapper {
	padding: 1.5rem 0;
}

.people-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.people-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 80px;
	text-align: center;
}

.people-display span {
	font-size: 4rem;
	font-weight: 700;
	color: var(--ct-primary);
	line-height: 1;
}

.people-display small {
	color: #999;
	font-size: .9rem;
	margin-top: 6px;
}

.people-ctrl {
	width: 52px;
	height: 52px;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	flex-shrink: 0;
	background: var(--ct-light);
}

.people-ctrl:hover {
	border: var(--border-style-hover);
	color: var(--ct-primary)
}

/* ========== RESPONSIVE STEP 2 ========== */

@media (max-width: 767px) {
	.step-label {
		font-size: .65rem;
	}

	.step-circle {
		width: 32px;
		height: 32px;
		font-size: .85rem;
	}
}