/* BookFavignana - form di ricerca (pilota transfer) */

.bf-form-wrap {
	margin: 20px 0 30px;
	/* #header .img-holder e' position:absolute a copertura totale: senza questi
	   due il form finisce sotto l'immagine di sfondo e resta invisibile.
	   E' lo stesso accorgimento usato dal tema per #header .text-holder. */
	position: relative;
	z-index: 10;
}

.bf-form {
	background: #fff;
	border-radius: 6px;
	padding: 22px 24px 26px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	max-width: 980px;
	margin: 0 auto;
}

.bf-form__title {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.25;
	color: #006e95;
}

.bf-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.bf-form__field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
}

.bf-form__field[hidden] {
	display: none;
}

.bf-form__field label {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #333;
}

.bf-form__field label small {
	display: block;
	font-weight: 400;
	color: #777;
}

/* Selettori più specifici del necessario di proposito: il tema ha regole
   generiche su select e input che altrimenti sbiadiscono il testo. */
.bf-form .bf-form__field select,
.bf-form .bf-form__field input {
	height: 44px;
	padding: 0 10px;
	border: 1px solid #ccd6dd;
	border-radius: 4px;
	font-size: 15px;
	background-color: #fff;
	color: #222;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

/* Il tema sostituisce i select nativi con jQuery Custom Forms: il select vero
   resta nel DOM ma nascosto, e a schermo si vedono .jcf-select-text (il testo)
   e .jcf-select-opener (il pulsante freccia). Stilare "select" non ha quindi
   alcun effetto: vanno stilati questi. */
.bf-form .bf-form__field .jcf-select {
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid #ccd6dd;
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	width: 100%;
	box-sizing: border-box;
}

.bf-form .bf-form__field .jcf-select .jcf-select-text {
	/* il tema lo rende grigio corsivo: qui deve essere uguale agli altri campi */
	color: #222;
	font-style: normal;
	font-size: 15px;
	line-height: 42px;
	margin: 0 44px 0 10px;
}

.bf-form .bf-form__field .jcf-select .jcf-select-opener {
	/* il tema mette un fondo grigio pieno senza icona: qui fondo trasparente
	   e freccia disegnata nello stesso colore del pulsante di ricerca */
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23008ca8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 9px;
	width: 40px;
}

/* Tendina aperta: JCF la sposta in fondo al body, quindi non puo' essere
   annidata sotto .bf-form. Si usa una classe dedicata sul contenitore. */
.bf-form .bf-form__field .jcf-select .jcf-select-drop {
	left: -1px;
	right: -1px;
	width: auto;
}

.jcf-select-drop .jcf-option {
	color: #222;
	font-style: normal;
}

.bf-form .bf-form__field select:focus,
.bf-form .bf-form__field input:focus {
	outline: 2px solid #008ca8;
	outline-offset: 1px;
}

/* Il tema colora di rosso ogni select JCF al focus (.jcf-focus con !important):
   nel form dà l'impressione di un errore di compilazione. Qui il focus usa il
   colore del marchio, come per gli altri campi. */
.bf-form .bf-form__field .jcf-select.jcf-focus,
.bf-form .bf-form__field .jcf-select.jcf-focus * {
	border-color: #008ca8 !important;
}

.bf-form .bf-form__field .jcf-select.jcf-focus {
	outline: 2px solid #008ca8;
	outline-offset: 1px;
}

/* Rete di sicurezza: se il polyfill placeholder del tema riuscisse comunque ad
   agganciare un campo, il suo elemento finto non deve sovrapporsi alla label. */
.bf-form .input-placeholder-text {
	display: none;
}

.bf-form__row--trip {
	gap: 24px;
	margin-bottom: 18px;
}

.bf-form__radio {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	cursor: pointer;
}

.bf-form__field--pax {
	flex: 0 1 200px;
}

.bf-form__error {
	margin: 0 0 14px;
	padding: 9px 12px;
	background: #fdecea;
	border-left: 3px solid #d93025;
	color: #a4271c;
	font-size: 14px;
}

.bf-form__error[hidden] {
	display: none;
}

.bf-form__submit {
	background: #008ca8;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	padding: 13px 30px;
}

.bf-form__submit:hover,
.bf-form__submit:focus {
	background: #006e95;
}

.bf-form__fallback {
	text-align: center;
	padding: 18px;
}

@media (max-width: 767px) {
	.bf-form {
		padding: 18px 16px 22px;
	}

	.bf-form__field,
	.bf-form__field--pax {
		flex: 1 1 100%;
	}

	.bf-form__submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Calendario jQuery UI

   Il tema carica css/jquery-ui.css, che e' un tema giallo/arancione: qui si
   riporta ai colori del sito. jQuery UI usa un solo #ui-datepicker-div per
   tutta la pagina, quindi il JS gli aggiunge la classe .bf-datepicker solo
   mentre e' aperto uno dei nostri campi: gli altri datepicker del tema
   restano invariati.
   --------------------------------------------------------------------------- */

#ui-datepicker-div.bf-datepicker {
	border: 1px solid #ccd6dd;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	padding: 6px;
	font-family: inherit;
	font-size: 14px;
	z-index: 9999;
}

#ui-datepicker-div.bf-datepicker .ui-widget-header {
	background: #008ca8;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-weight: 700;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-title {
	color: #fff;
}

/* Frecce mese: il tema le disegna con uno sprite, qui si usano caratteri per
   non dipendere da immagini esterne.

   Lo span contiene il testo "Prev"/"Next", che jQuery UI nasconde con
   text-indent e overflow: va lasciato nascosto, non ripristinato, altrimenti
   compare accanto alla freccia e sborda. La freccia si disegna sull'ancora,
   che conserva il proprio attributo title come nome accessibile. */
#ui-datepicker-div.bf-datepicker .ui-datepicker-prev,
#ui-datepicker-div.bf-datepicker .ui-datepicker-next {
	background: transparent;
	border: 0;
	cursor: pointer;
	top: 3px;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	overflow: hidden;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-prev { left: 4px; }
#ui-datepicker-div.bf-datepicker .ui-datepicker-next { right: 4px; }

/* jQuery UI sposta di 1px le frecce al passaggio del mouse: qui darebbe
   solo un tremolio, visto che non c'e' un bordo che cambia. */
#ui-datepicker-div.bf-datepicker .ui-datepicker-prev-hover {
	top: 3px;
	left: 4px;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-next-hover {
	top: 3px;
	right: 4px;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.bf-datepicker .ui-datepicker-next span {
	display: none;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-prev:before,
#ui-datepicker-div.bf-datepicker .ui-datepicker-next:before {
	display: block;
	color: #fff;
	font-size: 22px;
	line-height: 26px;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-prev:hover:before,
#ui-datepicker-div.bf-datepicker .ui-datepicker-next:hover:before {
	color: #cfeaf1;
}

#ui-datepicker-div.bf-datepicker .ui-datepicker-prev:before { content: '\2039'; }
#ui-datepicker-div.bf-datepicker .ui-datepicker-next:before { content: '\203A'; }

#ui-datepicker-div.bf-datepicker th {
	color: #006e95;
	font-weight: 700;
}

#ui-datepicker-div.bf-datepicker td a,
#ui-datepicker-div.bf-datepicker td span {
	background: #fff;
	border: 1px solid #e6ecf0;
	color: #222;
	text-align: center;
	border-radius: 3px;
}

#ui-datepicker-div.bf-datepicker td a:hover {
	background: #e3f2f6;
	border-color: #008ca8;
	color: #006e95;
}

#ui-datepicker-div.bf-datepicker td a.ui-state-active,
#ui-datepicker-div.bf-datepicker td a.ui-state-highlight {
	background: #008ca8;
	border-color: #008ca8;
	color: #fff;
}

#ui-datepicker-div.bf-datepicker .ui-state-disabled span {
	color: #b7c2c8;
	background: #f7f9fa;
}

/* ---------------------------------------------------------------------------
   Tab dei servizi
   --------------------------------------------------------------------------- */

.bf-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 980px;
	margin: 0 auto;
}

.bf-tab {
	background: rgba(255, 255, 255, .82);
	border: 0;
	border-radius: 6px 6px 0 0;
	color: #006e95;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 22px;
	line-height: 1.2;
}

.bf-tab:hover {
	background: rgba(255, 255, 255, .95);
}

.bf-tab.is-active {
	background: #fff;
	color: #008ca8;
}

/* I pannelli sono impilati nella stessa cella della griglia, non nascosti con
   display:none: cosi' il contenitore prende l'altezza del pannello piu' alto e
   cambiare tab non fa saltare l'altezza della pagina.
   visibility:hidden, a differenza di opacity:0, toglie anche i campi dei
   pannelli inattivi dall'ordine di tabulazione. */
.bf-pannelli {
	display: grid;
}

.bf-pannello {
	grid-area: 1 / 1;
	visibility: hidden;
}

.bf-pannello.is-active {
	visibility: visible;
}

.bf-search .bf-form {
	border-radius: 0 6px 6px 6px;
}

@media (max-width: 767px) {
	.bf-tab {
		flex: 1 1 auto;
		font-size: 14px;
		padding: 10px 12px;
		text-align: center;
	}
}