#sab-booking-form {
	margin: 20px 0;
	max-width: 420px;
}

#sab-booking-form .sab-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

#sab-booking-form input#sab-date-range {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	background: #fff;
	cursor: pointer;
}

#sab-booking-form .sab-summary {
	margin-top: 14px;
	padding: 12px 14px;
	background: #f7f7f7;
	border-radius: 4px;
}

#sab-booking-form .sab-summary .sab-total-row {
	font-size: 1.1em;
	margin-top: 4px;
}

#sab-booking-form .sab-error {
	margin-top: 10px;
	font-weight: 600;
}

#sab-booking-form .sab-discount-note {
	margin: 4px 0 0;
	color: #2a7a2a;
	font-size: 0.9em;
	font-weight: 600;
}

#sab-booking-form #sab-submit-btn {
	margin-top: 14px;
}

#sab-booking-form #sab-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Varatut päivät punaisella kalenterissa.
 * Lisätty erikseen oman (sab-booked-day) luokan kautta, koska flatpickrin
 * oma "disabled"-tyyli on oletuksena vaalean harmaa - tämä ohittaa sen.
 */
.flatpickr-day.sab-booked-day {
	background: #fde8e8 !important;
	color: #b32d2e !important;
	border-color: #f7c6c6 !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

.flatpickr-day.sab-booked-day:hover {
	background: #fde8e8 !important;
	color: #b32d2e !important;
}

/* Pieni selite kalenterin alle (käytetään sekä varauslomakkeessa että [sab_availability]-lyhytkoodissa) */
.sab-legend {
	margin-top: 8px;
	font-size: 0.85em;
	color: #666;
}

.sab-legend .sab-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: #fde8e8;
	border: 1px solid #f7c6c6;
	margin-right: 4px;
	vertical-align: middle;
}

/*
 * [sab_availability] -lyhytkoodin lukukalenteri: pelkkä visuaalinen näkymä,
 * ei interaktiota - estetään klikkaukset, jotta se ei näytä turhaan
 * "valittavalta" vierailijalle.
 */
.sab-availability-calendar {
	max-width: 640px;
	margin: 16px auto;
	text-align: center;
}

.sab-availability-calendar-inner {
	pointer-events: none;
	display: inline-block;
}

.sab-availability-calendar .flatpickr-calendar {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}