/* =========================================================================
   Agriturismo Valle Martina - CSS custom (superficie unica)
   File: wp-content/uploads/vm-custom/vm-custom.css
   Caricato dopo gli stili del tema (enqueue dep + priorita' 9999).
   Tutte le regole sono scoped sotto .vm-contactbar per non sporcare il tema,
   eccetto il padding-bottom su body (intenzionale, per non coprire i contenuti).

   Trattamento ripreso al 100% dalla sticky-bar di Studio Caputo Vellotti
   (riscontro: Elite Drive): barra chiara translucida, pill centrate
   content-width con bordo+testo colorati e riempimento (fill) su hover.
   Colori bottoni: Chiama blu camere #003580 (header price-card camere),
   Email oro brand #cd9540, WhatsApp verde universale #25d366.
   ========================================================================= */

/* ---- Barra contatti fissa in fondo al viewport (tutti i dispositivi) ----
   Sfondo chiaro translucido come Caputo: rgba(255,255,255,.82) + blur. */
.vm-contactbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 10px 16px;
	background-color: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(18px) saturate(1.8);
	backdrop-filter: blur(18px) saturate(1.8);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 -6px 24px rgba(14, 34, 54, 0.06);
	font-family: inherit;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Fallback: senza backdrop-filter usa un bianco quasi pieno per la leggibilita'. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.vm-contactbar {
		background-color: rgba(255, 255, 255, 0.97);
	}
}

.vm-contactbar * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* ---- Bottoni: pill content-width, separati (no divisori, no full-bleed) ---- */
.vm-contactbar .vm-cb-btn {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	border: 2px solid currentColor;
	border-radius: 999px;
	background-color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Chiama: blu delle camere (#003580). Ripreso dall'header delle price-card
   camere ("Camere Deluxe" / "Appartamento x 4") e dal testo dettagli camera:
   e' il colore identitario delle stanze sul sito. Testo+bordo blu su bianco. */
.vm-contactbar .vm-cb-call {
	color: #003580;
	border-color: #003580;
}

/* Email: "primary" brand VM (oro): testo oro profondo leggibile (#8f6414, ~5.2:1)
   + bordo oro brand (#cd9540). */
.vm-contactbar .vm-cb-email {
	color: #8f6414;
	border-color: #cd9540;
}

/* WhatsApp: stessi valori di Caputo (testo verde scuro, bordo verde brillante). */
.vm-contactbar .vm-cb-wa {
	color: #128c7e;
	border-color: #25d366;
}

/* ---- Hover / focus: riempimento (fill) col colore del bottone, testo bianco ----
   come la sticky-bar di Caputo (background pieno + ombra morbida). */
.vm-contactbar .vm-cb-call:hover,
.vm-contactbar .vm-cb-call:focus {
	background-color: #003580;
	border-color: #003580;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(14, 34, 54, 0.10), 0 2px 6px rgba(14, 34, 54, 0.06);
	outline: none;
}

.vm-contactbar .vm-cb-email:hover,
.vm-contactbar .vm-cb-email:focus {
	background-color: #cd9540;
	border-color: #cd9540;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(14, 34, 54, 0.10), 0 2px 6px rgba(14, 34, 54, 0.06);
	outline: none;
}

.vm-contactbar .vm-cb-call:active {
	background-color: #002a66;
	border-color: #002a66;
	color: #ffffff;
}

.vm-contactbar .vm-cb-email:active {
	background-color: #b07d1a;
	border-color: #b07d1a;
	color: #ffffff;
}

.vm-contactbar .vm-cb-wa:hover,
.vm-contactbar .vm-cb-wa:focus {
	background-color: #25d366;
	border-color: #25d366;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(14, 34, 54, 0.10), 0 2px 6px rgba(14, 34, 54, 0.06);
	outline: none;
}

.vm-contactbar .vm-cb-wa:active {
	background-color: #1da851;
	border-color: #1da851;
	color: #ffffff;
}

/* Visibilita' focus da tastiera (anello brand sopra al fill). */
.vm-contactbar .vm-cb-btn:focus-visible {
	-webkit-box-shadow: 0 0 0 3px rgba(205, 149, 64, 0.45);
	box-shadow: 0 0 0 3px rgba(205, 149, 64, 0.45);
}

/* Chiama: anello focus blu coerente col bottone (override dopo la regola brand). */
.vm-contactbar .vm-cb-call:focus-visible {
	-webkit-box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.45);
	box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.45);
}

/* ---- Icone (SVG inline): mostrate accanto alla label come in Caputo ---- */
.vm-contactbar .vm-cb-icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-block;
	fill: currentColor;
}

.vm-contactbar .vm-cb-label {
	display: inline-block;
}

/* =========================================================================
   Spazio per non coprire i contenuti: padding-bottom su body = altezza barra
   ========================================================================= */
body {
	padding-bottom: 64px;
}

/* ---- Schermi medio-piccoli: riduci leggermente font/padding ---- */
@media (max-width: 600px) {
	.vm-contactbar {
		gap: 8px;
		padding: 9px 12px;
	}
	.vm-contactbar .vm-cb-btn {
		font-size: 13px;
		padding: 9px 14px;
		gap: 6px;
	}
	.vm-contactbar .vm-cb-icon {
		width: 17px;
		height: 17px;
	}
	body {
		padding-bottom: 60px;
	}
}

/* ---- Telefoni molto stretti: collassa le etichette in icone (pill icona) ---- */
@media (max-width: 360px) {
	.vm-contactbar .vm-cb-btn {
		padding: 10px 14px;
	}
	/* etichetta visivamente nascosta ma disponibile per screen reader */
	.vm-contactbar .vm-cb-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.vm-contactbar .vm-cb-icon {
		width: 20px;
		height: 20px;
	}
	body {
		padding-bottom: 64px;
	}
}