@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

/* ================================================================
   DATEPICKER — tema elegante
   ================================================================ */
.ui-datepicker {
	width: 294px !important;
	box-sizing: border-box !important;
	z-index: 9999999 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	border: 1px solid #e0d8c8 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
	padding: 12px !important;
	background: #fff !important;
}
.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #f0ebe2 !important;
	border-radius: 0 !important;
	padding: 4px 0 8px !important;
	font-weight: 600 !important;
	color: #333 !important;
}
.ui-datepicker .ui-datepicker-title {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 6px !important;
	width: 24px !important; height: 24px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: #f5f0e8 !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: none !important; }
.ui-datepicker .ui-datepicker-prev::after { content: "‹"; font-size: 18px; color: #666; line-height: 24px; display: block; text-align: center; }
.ui-datepicker .ui-datepicker-next::after { content: "›"; font-size: 18px; color: #666; line-height: 24px; display: block; text-align: center; }
/* TABELLA: layout fisso con colonne uguali — unico modo sicuro */
.ui-datepicker table {
	width: 100% !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
	margin-top: 8px !important;
}
/* TH e TD: larghezza esplicitamente 1/7 — applicata sia a th che a td */
.ui-datepicker th,
.ui-datepicker td {
	width: 14.2857% !important;
	text-align: center !important;
	padding: 2px 0 !important;
	overflow: visible !important;
}
.ui-datepicker th {
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	color: #bbb !important;
	padding-bottom: 4px !important;
}
/* Giorno: cerchio centrato, dimensione sicura */
.ui-datepicker td a,
.ui-datepicker td span {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	text-align: center !important;
	border-radius: 50% !important;
	border: none !important;
	font-size: 12px !important;
	color: #333 !important;
	background: transparent !important;
	text-decoration: none !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	transition: background .15s !important;
}
.ui-datepicker td a:hover { background: #f5f0e8 !important; color: #333 !important; }
.ui-datepicker .ui-state-active { color: #fff !important; }
.ui-datepicker .ui-state-highlight { font-weight: 700 !important; }
.ui-datepicker .ui-state-disabled span { color: #ccc !important; }

@media (max-width: 600px) {
	.ui-datepicker { width: 294px !important; }
}


/* ================================================================
   BASE COMUNE
   ================================================================ */
.sbe-wrap {
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
}
/* Nascondi spinner number */
.sbe-wrap input[type='number'] { -moz-appearance: textfield; }
.sbe-wrap input::-webkit-outer-spin-button,
.sbe-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ================================================================
   LAYOUT: LINE
   ================================================================ */
.sbe-line-wrap {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;   /* Safari iOS: impedisce espansione oltre viewport */
}

.sbe-line {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;         /* iOS: non supera il viewport */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e0d8c8;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

/* Cella singola */
.sbe-line .sbe-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 14px;
	border-right: 1px solid #e0d8c8;
	flex: 1;
	min-width: 0;
	cursor: default;
	background: #fff;
	position: relative;
	z-index: 1;
}
/* Niente bordo sull'ultima cella prima del bottone */
.sbe-line .sbe-cell:last-of-type { border-right: none; }

.sbe-line .sbe-cell .sbe-cell-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #555;       /* era #aaa — ora grigio scuro leggibile */
	margin-bottom: 3px;
	white-space: nowrap;
	pointer-events: none;
}
.sbe-line .sbe-cell .sbe-cell-body {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sbe-line .sbe-cell .sbe-cell-icon {
	width: 15px; height: 15px;
	flex-shrink: 0;
	opacity: 0.7;  /* era 0.4 */
	pointer-events: none;
	fill: #444;
}
.sbe-line .sbe-cell .sbe-cell-icon svg { width: 15px; height: 15px; fill: #444; }

/* INPUT dentro la cella line — NESSUN bordo aggiuntivo */
.sbe-line .sbe-cell input[type="text"],
.sbe-line .sbe-cell input[type="number"] {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;  /* era 13px */
	font-weight: 500;
	color: #333;
	width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sbe-line .sbe-cell input::placeholder { color: #bbb; font-weight: 400; font-size: 13px; }
.sbe-line .sbe-cell input::-webkit-calendar-picker-indicator { display: none; }

/* Freccia tra date */
.sbe-line .sbe-arrow {
	display: flex;
	align-items: center;
	padding: 0 4px;
	color: #ccc;
	font-size: 16px;
	flex-shrink: 0;
	border-right: 1px solid #e0d8c8;
	pointer-events: none;
	z-index: 1;
}

/* Pulsante lente — cerchio colorato, non a filo con i bordi */
.sbe-line .sbe-btn-search {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	min-width: 64px;
	border: none;
	border-left: 1px solid #e0d8c8;
	cursor: pointer;
	transition: opacity .2s;
	z-index: 2;
	padding: 0;
	background: transparent;
}
/* Il cerchio colore viene applicato qui direttamente dal CSS dinamico PHP */
.sbe-line .sbe-btn-search-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	pointer-events: none;
	flex-shrink: 0;
}
.sbe-line .sbe-btn-search-circle svg {
	width: 18px; height: 18px; fill: #fff; pointer-events: none;
}
.sbe-line .sbe-btn-search:hover .sbe-btn-search-circle { opacity: 0.82; }

/* Powered-by sotto la barra */
.sbe-line-wrap .sbe-powered {
	display: block;
	text-align: center;
	margin-top: 6px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	color: var(--sbe-powered-color, #666);
	text-decoration: none;
	letter-spacing: 0.3px;
	line-height: 1.4;
}
.sbe-line-wrap .sbe-powered:hover { color: var(--sbe-powered-color, #666); opacity: 0.75; }

/* ================================================================
   OSPITI PICKER (dropdown inline per adulti/bambini in line/sticky)
   ================================================================ */
.sbe-guests-picker {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	background: #fff;
	border: 1px solid #e0d8c8;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 14px 16px;
	z-index: 99999;
	min-width: 200px;
	display: none;
	font-family: 'Montserrat', sans-serif;
}
.sbe-guests-picker.sbe-open { display: block; }
.sbe-guests-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	gap: 12px;
}
.sbe-guests-row:last-child { margin-bottom: 0; }
.sbe-guests-label { font-size: 12px; font-weight: 500; color: #555; }
.sbe-guests-ctrl {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sbe-guests-ctrl button {
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 1px solid #e0d8c8;
	background: #fff;
	font-size: 16px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #555;
	transition: background .15s;
	padding: 0;
	flex-shrink: 0;
}
.sbe-guests-ctrl button:hover { background: #f5f0e8; }
.sbe-guests-ctrl .sbe-guests-val {
	font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; color: #333;
}

/* ================================================================
   LAYOUT: WIDGET
   ================================================================ */
.sbe-widget {
	display: block;
	width: 100%;
	max-width: 280px;
	padding: 16px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e0d8c8;
	border-radius: 4px;
}
.sbe-widget .sbe-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e0d8c8;
	border-radius: 3px;
	padding: 8px 10px;
	margin-bottom: 8px;
	background: #fff;
	cursor: pointer;
}
.sbe-widget .sbe-cell-icon { width: 14px; height: 14px; opacity: 0.45; flex-shrink: 0; }
.sbe-widget .sbe-cell-icon svg { width: 14px; height: 14px; fill: #666; }
.sbe-widget .sbe-cell input {
	border: 0 !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; outline: 0 !important; box-shadow: none !important;
	font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500;
	color: #333; width: 100%; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.sbe-widget .sbe-cell input::placeholder { color: #ccc; font-weight: 400; font-size: 12px; }
.sbe-widget .sbe-cell input::-webkit-calendar-picker-indicator { display: none; }
.sbe-widget .sbe-btn-search {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 10px; border: none; border-radius: 3px;
	cursor: pointer; color: #fff; font-family: 'Montserrat', sans-serif;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
	transition: background .2s; gap: 8px; margin-top: 4px;
}
.sbe-widget .sbe-btn-search svg { width: 15px; height: 15px; fill: #fff; }
.sbe-widget .sbe-powered {
	display: block; text-align: center; margin-top: 10px;
	font-size: 9px; color: #bbb; text-decoration: none; letter-spacing: 0.3px;
	font-family: 'Montserrat', sans-serif;
}
.sbe-widget .sbe-powered:hover { color: #666; }

/* ================================================================
   LAYOUT: STICKY-TOP / STICKY-BOTTOM
   ================================================================ */
.sbe-sticky-top, .sbe-sticky-bottom {
	position: fixed; left: 0; width: 100%;
	z-index: 99999; border-radius: 0 !important;
	box-sizing: border-box; padding: 6px 14px;
	display: flex; align-items: center; gap: 0;
}
.sbe-sticky-top  { top: 0; }
.sbe-sticky-bottom { bottom: 0; }
.sbe-sticky-top .sbe-cell,
.sbe-sticky-bottom .sbe-cell {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: center;
	padding: 4px 10px; border-right: 1px solid rgba(255,255,255,0.2);
	cursor: pointer; position: relative;
}
.sbe-sticky-top .sbe-cell:last-of-type,
.sbe-sticky-bottom .sbe-cell:last-of-type { border-right: none; }
.sbe-sticky-top .sbe-cell .sbe-cell-label,
.sbe-sticky-bottom .sbe-cell .sbe-cell-label {
	font-size: 8px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.6px; color: rgba(255,255,255,0.65); margin-bottom: 1px;
}
.sbe-sticky-top .sbe-cell input,
.sbe-sticky-bottom .sbe-cell input {
	border: 0 !important; background: transparent !important; padding: 0 !important;
	margin: 0 !important; outline: 0 !important; box-shadow: none !important;
	font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
	color: #fff; width: 100%; cursor: pointer;
	-webkit-appearance: none; appearance: none; -moz-appearance: textfield;
}
.sbe-sticky-top .sbe-cell input::placeholder,
.sbe-sticky-bottom .sbe-cell input::placeholder { color: rgba(255,255,255,0.5); }
.sbe-sticky-top .sbe-cell input::-webkit-calendar-picker-indicator,
.sbe-sticky-bottom .sbe-cell input::-webkit-calendar-picker-indicator { display: none; }
.sbe-sticky-top .sbe-btn-search, .sbe-sticky-bottom .sbe-btn-search {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background .2s; margin-left: 8px;
}
.sbe-sticky-top .sbe-btn-search:hover, .sbe-sticky-bottom .sbe-btn-search:hover { background: rgba(255,255,255,0.32); }
.sbe-sticky-top .sbe-btn-search svg, .sbe-sticky-bottom .sbe-btn-search svg { width: 16px; height: 16px; fill: #fff; }
.sbe-sticky-top .sbe-powered, .sbe-sticky-bottom .sbe-powered { display: none; }

/* ================================================================
   LAYOUT: POPUP
   ================================================================ */
.sbe-popup-bar {
	position: fixed;
	bottom: 16px;               /* 16px dal basso — non copre il footer */
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 860px;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 28px;
	border: none;
	border-radius: 8px;         /* bordi arrotondati tutti e 4 */
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0,0,0,0.22);
	transition: opacity .2s, transform .2s;
	box-sizing: border-box;
}
.sbe-popup-bar:hover { opacity: 0.9; transform: translateX(-50%) translateY(-2px); }
.sbe-popup-bar svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }

/* Overlay */
.sbe-popup-overlay {
	display: none;
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 999999;
	align-items: center; justify-content: center;
}
.sbe-popup-overlay.sbe-open { display: flex; }

/* Box popup */
.sbe-popup-inner {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 48px 24px 24px;
	max-width: 380px;
	width: 94%;
	box-sizing: border-box;
	box-shadow: 0 12px 48px rgba(0,0,0,0.2);
	/* IMPORTANTE: pointer-events auto per ricevere i click */
	pointer-events: auto;
}
/* Riga titolo */
.sbe-popup-title {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #aaa;
	margin-bottom: 14px;
}
.sbe-popup-inner .sbe-cell {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid #e0d8c8; border-radius: 3px;
	padding: 10px 12px; margin-bottom: 8px; background: #fff;
	/* IMPORTANTE: pointer-events auto */
	pointer-events: auto;
	cursor: pointer;
}
.sbe-popup-inner .sbe-cell-icon { width: 14px; height: 14px; opacity: 0.45; flex-shrink: 0; }
.sbe-popup-inner .sbe-cell-icon svg { width: 14px; height: 14px; fill: #666; }
.sbe-popup-inner .sbe-cell input {
	border: 0 !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; outline: 0 !important; box-shadow: none !important;
	font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500;
	color: #333; width: 100%;
	cursor: pointer;
	-webkit-appearance: none; appearance: none;
	pointer-events: auto !important;
	position: relative; z-index: 1;
}
.sbe-popup-inner .sbe-cell input::placeholder { color: #ccc; font-weight: 400; font-size: 12px; }
.sbe-popup-inner .sbe-cell input::-webkit-calendar-picker-indicator { display: none; }
.sbe-popup-inner .sbe-cell input[type="number"] { -moz-appearance: textfield; }
.sbe-popup-inner .sbe-btn-search {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 12px; border: none; border-radius: 4px;
	cursor: pointer; color: #fff; font-family: 'Montserrat', sans-serif;
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
	transition: background .2s; gap: 8px; margin-top: 6px;
	pointer-events: auto;
}
.sbe-popup-inner .sbe-btn-search svg { width: 15px; height: 15px; fill: #fff; }
.sbe-popup-inner .sbe-powered {
	display: block; text-align: center; margin-top: 12px;
	font-size: 9px; color: #bbb; text-decoration: none; letter-spacing: 0.3px;
	font-family: 'Montserrat', sans-serif; pointer-events: auto;
}
.sbe-popup-inner .sbe-powered:hover { color: #666; }
.sbe-popup-close {
	position: absolute; top: 12px; right: 16px;
	background: transparent; border: none; font-size: 22px; line-height: 1;
	cursor: pointer; padding: 0; opacity: 0.35; color: #333;
	transition: opacity .2s; pointer-events: auto; z-index: 2;
}
.sbe-popup-close:hover { opacity: 0.8; }

/* ================================================================
   RESPONSIVE — line su mobile
   ================================================================ */
@media (max-width: 768px) {
	.sbe-line { flex-wrap: wrap; }
	.sbe-line .sbe-cell {
		flex: 1 1 calc(50% - 2px);
		border-bottom: 1px solid #e0d8c8;
	}
	.sbe-line .sbe-arrow { display: none; }
	.sbe-line .sbe-btn-search {
		flex: 1 1 100%; width: 100% !important;
		min-height: 44px; border-radius: 0 0 3px 3px;
		border-left: none; border-top: none; padding: 0;
	}
	.sbe-line .sbe-btn-search-circle {
		width: 100% !important; height: 44px !important;
		border-radius: 0 0 3px 3px !important;
		display: flex !important; align-items: center !important; justify-content: center !important;
	}
	.sbe-popup-bar { width: 92%; font-size: 13px; padding: 12px 18px; bottom: 12px; }
	/* datepicker ancora più stretto */
	.ui-datepicker { width: 280px !important; }
}

/* ================================================================
   iOS / Safari — fix viewport overflow quando si apre tastiera
   ================================================================ */
@supports (-webkit-touch-callout: none) {
	/* Solo Safari iOS */
	.sbe-line-wrap,
	.sbe-line {
		/* forza larghezza esatta del contenitore, ignora tastiera/zoom */
		width: -webkit-fill-available;
		max-width: 100vw;
	}
	.sbe-line .sbe-cell {
		min-width: 0;
		overflow: hidden;
	}
	.sbe-line .sbe-cell input {
		/* su iOS un input che riceve focus può forzare lo zoom:
		   font-size >= 16px lo impedisce */
		font-size: 16px !important;
	}
}

/* ================================================================
   GUESTS PICKER v2 — input number visibili e tappabili
   ================================================================ */
.sbe-guests-picker-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sbe-guests-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.sbe-guests-label {
	font-size: 12px;
	font-weight: 500;
	color: #444;    /* era #555, ora più leggibile */
	flex: 1;
}
.sbe-guests-ctrl {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sbe-guests-ctrl .sbe-gm,
.sbe-guests-ctrl .sbe-gp {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 18px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #444;
	transition: background .15s, border-color .15s;
	padding: 0; flex-shrink: 0;
	/* importante: tipo button evita submit accidentale */
	-webkit-tap-highlight-color: transparent;
}
.sbe-guests-ctrl .sbe-gm:hover,
.sbe-guests-ctrl .sbe-gp:hover { background: #f5f0e8; border-color: #bbb; }

/* Input number VISIBILE nel picker — editabile direttamente */
.sbe-guests-ctrl .sbe-guests-num {
	width: 36px;
	text-align: center;
	border: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
	/* su iOS: font-size >= 16px impedisce zoom automatico */
	font-size: 16px;
}
.sbe-guests-ctrl .sbe-guests-num::-webkit-outer-spin-button,
.sbe-guests-ctrl .sbe-guests-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* guests cell clickable */
.sbe-guests-cell { cursor: pointer; }

/* ================================================================
   NUM-CELL — celle adulti/bambini con input number diretto
   ================================================================ */
.sbe-num-cell {
	flex: 0 0 auto;
	min-width: 80px;
	max-width: 110px;
}
.sbe-num-cell input[type="number"] {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: textfield;
	cursor: text;
	/* iOS: min 16px per evitare zoom */
	font-size: 16px;
}
.sbe-num-cell input[type="number"]::-webkit-outer-spin-button,
.sbe-num-cell input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}