/* BGL Site — modulo Targhetta.
   Computer: targhetta in basso a destra. Telefono: barra in fondo.
   Comparire/ritirarsi lo decide lo script con stili in linea. */

.bglt {
	--bglt-oro: #c9a45c;
	--bglt-fondo: rgba(8, 7, 10, .94);
	--bglt-filo: rgba(201, 164, 92, .45);
	--bglt-tenue: rgba(255, 255, 255, .62);

	position: fixed;
	right: 24px;
	bottom: 22px;
	z-index: 9990;
	visibility: hidden;
	transform: translateY(calc(100% + 40px));
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s;
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
}

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

/* ---------- Barra ---------- */

.bglt-barra {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .6rem .55rem 1.2rem;
	background: var(--bglt-fondo);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--bglt-filo);
	border-radius: 4px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

.bglt-nome {
	margin-right: .5rem;
	font-family: var(--global-heading-font-family, Georgia, serif);
	font-size: 1.05rem;
	letter-spacing: .03em;
	white-space: nowrap;
	color: #fff;
}

.bglt .bglt-tondo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}

.bglt .bglt-tondo:hover,
.bglt .bglt-tondo:focus-visible,
.bglt .bglt-tondo[aria-expanded="true"] { border-color: var(--bglt-oro); color: var(--bglt-oro); background: rgba(201, 164, 92, .08); }

.bglt-ico {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bglt .bglt-prenota {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: .35rem;
	min-height: 46px;
	padding: 0 1.5rem;
	border: 1px solid var(--bglt-oro);
	border-radius: 3px;
	background: var(--bglt-oro);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #0b0a0e;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.bglt .bglt-prenota:hover,
.bglt .bglt-prenota:focus-visible { background: transparent; color: var(--bglt-oro); }

.bglt a:focus-visible,
.bglt button:focus-visible,
.bglt textarea:focus-visible { outline: 1px dotted var(--bglt-oro); outline-offset: 3px; }

/* ---------- Nuvoletta di WhatsApp ---------- */

.bglt-chat {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	width: 340px;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	background: #0d0c10;
	border: 1px solid var(--bglt-filo);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
	animation: bglt-su .25s ease-out;
}

.bglt-chat[hidden] { display: none; }

@keyframes bglt-su {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.bglt-chat-testa {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .8rem .8rem .8rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: rgba(201, 164, 92, .07);
}

.bglt .bglt-chat-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; margin: 0; }

.bglt-chat-testa > div { flex: 1; min-width: 0; }

.bglt .bglt-chat-nome { margin: 0; font-family: var(--global-heading-font-family, Georgia, serif); font-size: 1rem; color: #fff; }

.bglt .bglt-chat-stato { margin: 0; font-size: .78rem; color: var(--bglt-tenue); }

.bglt-chat-stato::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: .4rem;
	border-radius: 50%;
	background: #4fbf73;
	vertical-align: 1px;
}

.bglt .bglt-chiudi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bglt-tenue);
	cursor: pointer;
}

.bglt .bglt-chiudi:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.bglt .bglt-chiudi .bglt-ico { width: 18px; height: 18px; }

.bglt-chat-corpo { padding: 1rem 1rem .4rem; }

.bglt .bglt-nuvola {
	position: relative;
	margin: 0;
	padding: .75rem .9rem;
	border-radius: 2px 12px 12px 12px;
	background: #1c1a21;
	font-size: .9rem;
	color: #f1ece2;
}

.bglt-nuvola::before {
	content: "";
	position: absolute;
	top: 0;
	left: -7px;
	border-top: 8px solid #1c1a21;
	border-left: 8px solid transparent;
}

.bglt-chat-form { padding: .6rem 1rem 1rem; }

.bglt .bglt-chat-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: .65rem .75rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: #16151a;
	font: inherit;
	font-size: .92rem;
	color: #fff;
	resize: vertical;
	min-height: 70px;
}

.bglt .bglt-chat-form textarea::placeholder { color: rgba(255, 255, 255, .4); }

.bglt .bglt-invia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	margin-top: .6rem;
	min-height: 46px;
	padding: 0 1rem;
	border: 1px solid var(--bglt-oro);
	border-radius: 8px;
	background: var(--bglt-oro);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #0b0a0e;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.bglt .bglt-invia:hover { background: transparent; color: var(--bglt-oro); }

.bglt .bglt-invia .bglt-ico { width: 18px; height: 18px; }

.bglt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Telefono: barra in fondo ---------- */

@media (max-width: 640px) {
	.bglt { left: 0; right: 0; bottom: 0; }

	.bglt-barra {
		justify-content: space-between;
		gap: .4rem;
		padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 0;
	}

	.bglt-nome { display: none; }

	.bglt .bglt-tondo { width: 44px; height: 44px; }

	.bglt .bglt-prenota { flex: 1; margin-left: .3rem; padding: 0 .8rem; }

	.bglt-chat { right: 8px; left: 8px; width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bglt, .bglt-chat { transition: none; animation: none; }
}

@media print {
	.bglt { display: none !important; }
}