/* ============================================
   RELAIS VECCHIO MASO - Custom Styles
   Colore accent: #ad4a49
   Palette: bianco / off-white (#fafaf8)
============================================ */

:root {
	--vm-accent: #ad4a49;
	--vm-accent-dark: #8f3c3b;
	--vm-ink: #232323;
	--vm-muted: #6b6b6b;
	--vm-footer-bg: #1a1a1a;
	--vm-footer-text: rgba(255,255,255,0.7);
	--vm-footer-heading: #f2ece9;
	--vm-cream: #fafaf8;
	--vm-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
}

/* -------- RIMOZIONE BORDO DI SELEZIONE SU TAP (mobile) --------
   Su alcuni browser mobile appare un riquadro di focus/selezione
   quando si tocca un link o pulsante (es. le icone della riga
   categorie in home): lo rimuoviamo al tap/click, mantenendo pero'
   l'indicatore di focus per la navigazione da tastiera
   (:focus-visible), per non compromettere l'accessibilita'. */
a, button {
	-webkit-tap-highlight-color: transparent;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* -------- REVEAL ON SCROLL -------- */
.vm-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.vm-reveal-active {
	opacity: 1;
	transform: translateY(0);
}

.vm-reveal-delay-1 { transition-delay: 0.12s; }
.vm-reveal-delay-2 { transition-delay: 0.24s; }
.vm-reveal-delay-3 { transition-delay: 0.36s; }
.vm-reveal-delay-4 { transition-delay: 0.48s; }
.vm-reveal-delay-5 { transition-delay: 0.6s; }

/* -------- HOVER SU SLIDER/CARD (.vm-tilt) --------
   Prima era un tilt 3D che seguiva il cursore via JS
   (perspective + rotateX/rotateY). Sostituito su
   richiesta con un effetto piu' semplice e pulito,
   puramente CSS: leggero sollevamento + ombra piu'
   marcata, uguale su tutti gli elementi del sito che
   usano questa classe (caroselli, foto editoriali,
   card pacchetto). Nessun JS necessario. */
.vm-tilt {
	transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}

@media (hover: hover) {
	/* Solo sui dispositivi con hover reale (mouse):
	   su touch l'effetto non si "incolla" dopo un tap */
	.vm-tilt:hover {
		transform: translateY(-7px);
		box-shadow: 0 22px 48px rgba(0,0,0,0.14);
	}

	.vm-package-card.vm-tilt:hover {
		box-shadow: 0 22px 48px rgba(173,74,73,0.16);
	}
}

/* ============================================
   HERO (immagine statica full-bleed)
   Il video scroll-scrubbing è stato messo in
   standby su richiesta: qui una foto aerea reale
   della proprietà, con leggero effetto Ken Burns
   in puro CSS (nessun JS, nessun lag).
============================================ */
.vm-hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	width: 100%;
	overflow: hidden;
	background-color: #1a1a1a;
}

.vm-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	animation: vm-kenburns 22s ease-in-out infinite alternate;
}

@keyframes vm-kenburns {
	0% { transform: scale(1); }
	100% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.vm-hero-img { animation: none; }
}

.vm-hero-overlay {
	position: absolute;
	inset: 0;
	/* Prima il gradiente era piu' chiaro proprio al centro (32%-62%),
	   esattamente dove sta il testo (.vm-hero-content e' centrato in
	   verticale) - con foto chiare/luminose il testo bianco diventava
	   illeggibile. Aggiunta una vignetta radiale scura concentrata sul
	   centro (dove sta sempre il blocco di testo) sopra al gradiente
	   verticale di base, cosi' il contrasto regge su qualsiasi foto. */
	background:
		radial-gradient(ellipse 70% 60% at 50% 52%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.22) 26%, rgba(0,0,0,0.34) 60%, rgba(0,0,0,0.64) 100%);
	pointer-events: none;
}

.vm-hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #ffffff;
	width: 90%;
	max-width: 800px;
	z-index: 2;
}

.vm-hero-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #f0d5d4;
	margin-bottom: 1.2rem;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 2px 16px rgba(0,0,0,0.5);
}

.vm-hero-title {
	font-family: var(--vm-serif);
	font-size: clamp(2.6rem, 6vw, 5.2rem);
	font-weight: 400;
	margin: 0 0 1rem 0;
	line-height: 1.1;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 6px 30px rgba(0,0,0,0.5);
}

.vm-hero-subtitle {
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	font-weight: 300;
	margin: 0 0 2.4rem 0;
	color: #f5f0ee;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.55;
	text-shadow: 0 1px 4px rgba(0,0,0,0.75), 0 3px 18px rgba(0,0,0,0.45);
}

.vm-hero-ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.vm-hero-cta {
	display: inline-block;
	padding: 0.85rem 2.1rem;
	border-radius: 30px;
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	transition: all 0.35s ease;
}

.vm-hero-cta-ghost {
	border: 1.5px solid rgba(255,255,255,0.85);
	color: #ffffff;
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur(4px);
}

.vm-hero-cta-ghost:hover {
	background: #ffffff;
	color: var(--vm-ink);
}

.vm-hero-cta-solid {
	background: var(--vm-accent);
	border: 1.5px solid var(--vm-accent);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.vm-hero-cta-solid:hover {
	background: var(--vm-accent-dark);
	border-color: var(--vm-accent-dark);
	transform: translateY(-2px);
}

.vm-hero-scroll-hint {
	position: absolute;
	bottom: 2.2rem;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff;
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.85;
	animation: vm-bounce 2s infinite;
	z-index: 2;
}

@keyframes vm-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 10px); }
}

/* ============================================
   CATEGORY ROW (icone a linea, stile editoriale)
============================================ */
.vm-cat-row-section {
	background: #ffffff;
	padding: 3.2rem 1.5rem 2.6rem;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.vm-cat-row {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2.4rem 3.2rem;
	list-style: none;
	padding: 0;
}

.vm-cat-row a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--vm-ink);
	text-align: center;
	transition: color 0.3s ease;
}

.vm-cat-row a:hover { color: var(--vm-accent); }

.vm-cat-row .vm-cat-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vm-ink);
	transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.vm-cat-row a:hover .vm-cat-icon {
	border-color: var(--vm-accent);
	color: var(--vm-accent);
	transform: translateY(-3px);
}

.vm-cat-row .vm-cat-icon svg { width: 20px; height: 20px; }

.vm-cat-row span.vm-cat-label {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

@media (max-width: 900px) {
	/* Su mobile la riga categorie non va piu' a capo su piu' righe:
	   diventa un'unica riga scorrevole orizzontalmente, con le icone
	   che "sanguinano" fino al bordo dello schermo come il resto dei
	   contenuti della sezione. */
	.vm-cat-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 2rem;
		margin: 0 -1.5rem;
		padding: 0 0 0.5rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.vm-cat-row::-webkit-scrollbar { display: none; }

	/* Spaziatori iniziale/finale come veri elementi flex (invece che
	   con il solo padding del contenitore): alcuni browser mobile
	   ignorano/comprimono il padding "di partenza" di un contenitore
	   flex con overflow-x, lasciando la prima icona (Camere) incollata
	   al bordo dello schermo. Con uno spaziatore vero il margine e'
	   sempre garantito. */
	.vm-cat-row::before,
	.vm-cat-row::after {
		content: '';
		flex: 0 0 1.5rem;
	}

	.vm-cat-row li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ============================================
   ABOUT / PROPRIETA' (foto reale + statistiche)
============================================ */
.vm-about-section {
	padding: 6rem 2rem;
	background-color: var(--vm-cream);
}

.vm-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

@media (max-width: 900px) {
	.vm-about-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.2rem;
	}
}

.vm-eyebrow {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--vm-accent);
	margin-bottom: 1rem;
	font-weight: 600;
}

.vm-about-content h2,
.vm-cat-section h2 {
	font-family: var(--vm-serif);
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	font-weight: 400;
	color: #201f1f;
	margin: 0 0 1.2rem 0;
	line-height: 1.2;
}

.vm-about-content p,
.vm-cat-section p {
	color: #6f6f6f;
	font-size: 1.04rem;
	line-height: 1.75;
	margin-bottom: 1.4rem;
	max-width: 46ch;
}

.vm-about-stats {
	display: flex;
	gap: 2.6rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	/* Come la riga categorie: su mobile non va a capo su piu'
	   righe ma scorre in orizzontale in un'unica riga. */
	.vm-about-stats {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		margin-left: -2rem;
		margin-right: -2rem;
		padding: 0 2rem 0.5rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.vm-about-stats::-webkit-scrollbar { display: none; }

	.vm-about-stat {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

@media (max-width: 600px) {
	/* Sotto i 600px il padding orizzontale di .vm-about-section
	   scende da 2rem a 1.2rem (vedi RESPONSIVE SECTION PADDING
	   piu' in basso). Il margine negativo di .vm-about-stats deve
	   restare uguale e opposto a quel padding per continuare a
	   "sanguinare" esattamente fino al bordo della sezione: se
	   resta fisso a -2rem, sfora di 0.8rem oltre il bordo reale
	   e causa scroll orizzontale indesiderato su tutta la pagina. */
	.vm-about-stats {
		margin-left: -1.2rem;
		margin-right: -1.2rem;
		padding: 0 1.2rem 0.5rem;
	}
}

.vm-about-stat {
	display: flex;
	flex-direction: column;
}

.vm-about-stat .stat-number {
	font-family: var(--vm-serif);
	font-size: 2.3rem;
	font-weight: 400;
	color: var(--vm-accent);
	line-height: 1;
}

.vm-about-stat .stat-label {
	font-size: 0.82rem;
	color: #9a9a9a;
	margin-top: 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vm-about-image {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	height: 480px;
}

.vm-about-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.vm-about-image { height: 320px; }
}

/* ============================================
   SEZIONI CATEGORIA (Camere, Spa Private,
   Pacchetti Regalo, Wellness, Ristorante)
   Layout editoriale alternato testo/immagine.
   NOTA: non esistono ancora foto reali per queste
   categorie (l'unico materiale disponibile è il
   drone esterno usato per hero/about): invece di
   usare foto stock generiche o immagini rotte,
   mostriamo un pannello curato con l'icona della
   categoria e un'etichetta onesta "Foto in arrivo".
   Andrà sostituito con vere foto appena disponibili.
============================================ */
.vm-cat-section {
	padding: 5.5rem 2rem;
	background-color: #ffffff;
}

.vm-cat-section:nth-of-type(even) {
	background-color: var(--vm-cream);
}

.vm-cat-grid {
	display: grid;
	/* minmax(0, 1fr) invece di 1fr: senza il minimo a 0 i figli
	   (in particolare .vm-spa-carousel) possono forzare la colonna
	   a espandersi fino alla loro larghezza "naturale" di contenuto,
	   allargando tutta la sezione oltre lo schermo su mobile. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4.5rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

.vm-cat-grid.vm-cat-reverse .vm-cat-text { order: 2; }
.vm-cat-grid.vm-cat-reverse .vm-cat-visual { order: 1; }

@media (max-width: 900px) {
	.vm-cat-grid,
	.vm-cat-grid.vm-cat-reverse .vm-cat-text,
	.vm-cat-grid.vm-cat-reverse .vm-cat-visual {
		grid-template-columns: minmax(0, 1fr);
		order: initial;
	}
	.vm-cat-grid { gap: 2.2rem; }
}

.vm-cat-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--vm-ink);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	border-bottom: 1.5px solid var(--vm-accent);
	padding-bottom: 3px;
	transition: color 0.3s ease, gap 0.3s ease;
}

.vm-cat-link:hover {
	color: var(--vm-accent);
	gap: 0.8rem;
}

.vm-cat-visual {
	position: relative;
	height: 460px;
	border-radius: 4px;
	overflow: hidden;
	will-change: transform;
	background: linear-gradient(135deg, #efe3e1 0%, #f7f1ee 55%, #efe3e1 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 40px rgba(0,0,0,0.07);
}

.vm-cat-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(173,74,73,0.05) 0px, rgba(173,74,73,0.05) 2px, transparent 2px, transparent 26px);
}

.vm-cat-visual-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	color: var(--vm-accent-dark);
	text-align: center;
}

.vm-cat-visual-inner .vm-cat-visual-icon {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(255,255,255,0.65);
	border: 1px solid rgba(173,74,73,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vm-cat-visual-inner .vm-cat-visual-icon svg {
	width: 32px;
	height: 32px;
}

.vm-cat-visual-inner .vm-cat-visual-label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9a6a68;
	font-weight: 600;
}

@media (max-width: 900px) {
	.vm-cat-visual { height: 320px; }
}

.vm-cat-visual-photo {
	background: none;
}

.vm-cat-visual-photo::before {
	display: none;
}

.vm-cat-visual-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================
   CTA BAND (fascia finale prima del footer)
============================================ */
.vm-cta-band {
	position: relative;
	padding: 6.5rem 2rem;
	text-align: center;
	overflow: hidden;
	background-color: #1a1a1a;
}

.vm-cta-band-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	opacity: 0.55;
}

.vm-cta-band-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26,26,26,0.75) 0%, rgba(26,26,26,0.88) 100%);
}

.vm-cta-band-content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.vm-cta-band .vm-eyebrow { color: #f0d5d4; }

.vm-cta-band h2 {
	font-family: var(--vm-serif);
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 400;
	color: #ffffff;
	margin: 0 0 1rem 0;
}

.vm-cta-band p {
	color: rgba(255,255,255,0.72);
	font-size: 1.05rem;
	line-height: 1.65;
	margin-bottom: 2.2rem;
}

.vm-cta-band .vm-hero-cta-solid {
	padding: 0.95rem 2.6rem;
}

/* -------- RESPONSIVE SECTION PADDING -------- */
@media (max-width: 600px) {
	.vm-about-section,
	.vm-cat-section,
	.vm-cta-band {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	.vm-about-section, .vm-cat-section { padding-top: 3.6rem; padding-bottom: 3.6rem; }
	.vm-cta-band { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}

/* ============================================
   HEADER (nuovo design, sostituisce i blocchi
   WordPress nativi: bottoni/nav custom, niente
   blocco Navigation nativo per evitare il bug
   di duplicazione dei contenuti nel menu mobile)
============================================ */
/* Il vero elemento sticky deve essere il wrapper <header
   class="wp-block-template-part"> che WordPress genera
   automaticamente intorno alla nostra template part
   "header" (contiene il nostro .vm-header, che e' un
   secondo tag <header> annidato dentro). Senza questa
   regola lo sticky sul solo .vm-header non ha alcun effetto
   visibile: il wrapper esterno e' alto esattamente quanto il
   suo contenuto, quindi non c'e' "spazio" perche' lo sticky
   funzioni durante lo scroll e la barra scompare subito. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.vm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,0.97);
	backdrop-filter: saturate(180%) blur(8px);
	/* Prima l'header si "comprimeva" allo scroll (padding e logo che
	   si rimpicciolivano insieme all'ombra): l'insieme di piu'
	   proprieta' animate contemporaneamente dava una sensazione
	   macchinosa/a scatti. Ora resta un'unica transizione, leggera,
	   solo sull'ombra: l'header non cambia piu' dimensione. */
	transition: box-shadow 0.4s ease, border-color 0.4s ease;
	border-bottom: 1px solid transparent;
}

.vm-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	border-bottom-color: rgba(0,0,0,0.05);
}

.vm-header-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.1rem 2rem;
}

.vm-logo {
	display: inline-flex;
}

.vm-logo img {
	height: 46px;
	width: auto;
	display: block;
}

.vm-nav {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-nav a {
	position: relative;
	color: var(--vm-ink);
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 500;
	padding-bottom: 6px;
}

.vm-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--vm-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

.vm-nav a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.vm-header-actions {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.vm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	padding: 0.65rem 1.3rem;
	border-radius: 2px;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.vm-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.vm-btn-ghost {
	color: var(--vm-accent);
	border: 1.5px solid var(--vm-accent);
	background: transparent;
}

.vm-btn-ghost:hover {
	background: var(--vm-accent);
	color: #fff;
}

.vm-btn-solid {
	background: var(--vm-accent);
	color: #fff;
	border: 1.5px solid var(--vm-accent);
	box-shadow: 0 4px 14px rgba(173,74,73,0.28);
}

.vm-btn-solid:hover {
	background: var(--vm-accent-dark);
	border-color: var(--vm-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(173,74,73,0.35);
}

.vm-burger {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.vm-burger span,
.vm-burger::before,
.vm-burger::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 1.5px;
	background: var(--vm-ink);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.vm-burger::before { transform: translateY(-7px); }
.vm-burger::after { transform: translateY(7px); }
.vm-burger.is-open::before { transform: translateY(0) rotate(45deg); }
.vm-burger.is-open::after { transform: translateY(0) rotate(-45deg); }
.vm-burger.is-open span { opacity: 0; }

.vm-mobile-panel {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: auto;
	background: #fff;
	z-index: 150;
	box-shadow: -12px 0 40px rgba(0,0,0,0.15);
	padding: 6.5rem 2rem 2.5rem;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
	flex-direction: column;
	gap: 2.2rem;
	overflow-y: auto;
}

.vm-mobile-panel.is-open { transform: translateX(0); }

.vm-panel-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vm-ink);
	border-radius: 50%;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.vm-panel-close svg { width: 20px; height: 20px; }

.vm-panel-close:hover {
	background: var(--vm-accent);
	color: #fff;
	transform: rotate(90deg);
}

.vm-mobile-panel a {
	color: var(--vm-ink);
	text-decoration: none;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.vm-mobile-panel .vm-nav-mobile {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-mobile-panel .vm-nav-mobile a {
	display: block;
	position: relative;
	padding-left: 0;
}

.vm-mobile-panel .vm-nav-mobile a:hover,
.vm-mobile-panel .vm-nav-mobile a:focus-visible {
	color: var(--vm-accent);
	padding-left: 8px;
}

.vm-mobile-panel .vm-header-actions {
	flex-direction: column;
	align-items: stretch;
	margin-top: auto;
	padding-top: 1rem;
}

.vm-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 140;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.vm-scrim.is-open { display: block; opacity: 1; }

@media (max-width: 900px) {
	.vm-nav, .vm-header-actions.desktop-only { display: none; }
	.vm-burger { display: flex; }
	.vm-mobile-panel { display: flex; }
}

/* ============================================
   PAGINA SOGGIORNI (specifiche rapide camera:
   letto, bagno, balcone, capienza - piccola riga
   di tag con icona sotto la descrizione di ogni
   tipologia di camera)
============================================ */
.vm-room-specs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	gap: 0.7rem;
	margin: 0.4rem 0 1.8rem 0;
	padding-bottom: 0.2rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.vm-room-specs::-webkit-scrollbar { display: none; }

.vm-room-spec {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: #6f6f6f;
	background: rgba(0,0,0,0.035);
	border: 1px solid rgba(0,0,0,0.07);
	padding: 0.5rem 0.9rem;
	border-radius: 30px;
	white-space: nowrap;
	flex-shrink: 0;
	scroll-snap-align: start;
}

.vm-room-spec svg {
	width: 16px;
	height: 16px;
	color: var(--vm-accent);
	flex-shrink: 0;
}

/* ============================================
   PAGINA CONTATTI (form moderno + info di
   contatto + mappa)
============================================ */
.vm-contact-section {
	padding: 6rem 2rem;
	background-color: #ffffff;
}

.vm-contact-heading {
	text-align: center;
	max-width: 650px;
	margin: 0 auto 3.5rem auto;
}

.vm-contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3.5rem;
	max-width: 1160px;
	margin: 0 auto;
	align-items: start;
}

@media (max-width: 900px) {
	.vm-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.vm-contact-form {
	background: var(--vm-cream);
	padding: 2.6rem;
	border-radius: 4px;
	position: relative;
}

@media (max-width: 560px) {
	.vm-contact-form { padding: 1.8rem; }
}

.vm-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

@media (max-width: 560px) {
	.vm-form-row { grid-template-columns: 1fr; gap: 0; }
}

.vm-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.3rem;
}

.vm-form-group label {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: #6f6f6f;
}

.vm-form-group input,
.vm-form-group textarea {
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--vm-ink);
	background: #ffffff;
	border: 1.5px solid rgba(0,0,0,0.12);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vm-form-group textarea {
	resize: vertical;
	min-height: 130px;
	font-family: inherit;
}

.vm-form-group input:focus,
.vm-form-group textarea:focus {
	outline: none;
	border-color: var(--vm-accent);
	box-shadow: 0 0 0 3px rgba(173,74,73,0.12);
}

.vm-form-privacy {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.6rem;
	font-size: 0.85rem;
	color: #6f6f6f;
	line-height: 1.5;
}

.vm-form-privacy input { margin-top: 0.2rem; }

.vm-contact-form .vm-btn {
	width: 100%;
	justify-content: center;
	border: none;
	cursor: pointer;
	font-size: 0.85rem;
}

.vm-form-success {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding: 2.5rem 1rem;
}

.vm-form-success.is-visible { display: flex; }

.vm-contact-form.is-submitted form { display: none; }

.vm-form-success-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(173,74,73,0.08);
	border: 1px solid rgba(173,74,73,0.25);
	color: var(--vm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vm-form-success-icon svg { width: 26px; height: 26px; }

.vm-form-success h3 {
	font-family: var(--vm-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: #201f1f;
	margin: 0;
}

.vm-form-success p {
	color: #767676;
	font-size: 0.95rem;
	margin: 0;
	max-width: 340px;
}

.vm-contact-info-list {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	margin-bottom: 2.2rem;
}

.vm-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.vm-contact-info-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vm-cream);
	border: 1px solid rgba(173,74,73,0.2);
	color: var(--vm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.vm-contact-info-icon svg { width: 20px; height: 20px; }

.vm-contact-info-text .vm-contact-info-label {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: #9a9a9a;
	margin-bottom: 0.3rem;
}

.vm-contact-info-text a,
.vm-contact-info-text p {
	color: var(--vm-ink);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

.vm-contact-info-text a:hover { color: var(--vm-accent); }

.vm-contact-map {
	border-radius: 4px;
	overflow: hidden;
	height: 260px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.vm-contact-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ============================================
   FOOTER (nuovo design, sfondo scuro coerente
   con la hero, icone al posto dei link testuali)
============================================ */
.vm-footer {
	background: var(--vm-footer-bg);
	color: var(--vm-footer-text);
	padding: 4.5rem 2rem 0;
}

.vm-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
}

.vm-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr;
	gap: 3rem;
	padding-bottom: 3.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.09);
}

@media (max-width: 900px) {
	.vm-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}

@media (max-width: 560px) {
	.vm-footer-grid { grid-template-columns: 1fr; }
}

.vm-footer-brand img {
	height: 40px;
	margin-bottom: 1.2rem;
	filter: brightness(0) saturate(100%) invert(1);
	opacity: 0.92;
}

.vm-footer-brand p {
	font-size: 0.92rem;
	line-height: 1.7;
	max-width: 320px;
	color: rgba(255,255,255,0.55);
}

.vm-footer h4 {
	font-family: var(--vm-serif);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--vm-footer-heading);
	margin: 0 0 1.3rem 0;
	letter-spacing: 0.02em;
}

.vm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.vm-footer ul a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	font-size: 0.92rem;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.vm-footer ul a:hover { color: #fff; padding-left: 4px; }

.vm-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.6);
	line-height: 1.5;
}

.vm-contact-item svg {
	flex-shrink: 0;
	margin-top: 3px;
	width: 15px;
	height: 15px;
	color: var(--vm-accent);
}

.vm-contact-item a { color: inherit; text-decoration: none; }
.vm-contact-item a:hover { color: #fff; }

.vm-social-row { display: flex; gap: 0.7rem; margin-top: 0.3rem; }

.vm-social-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.75);
	transition: all 0.3s ease;
}

.vm-social-icon svg { width: 16px; height: 16px; }

.vm-social-icon:hover {
	background: var(--vm-accent);
	border-color: var(--vm-accent);
	color: #fff;
	transform: translateY(-3px);
}

.vm-footer-bottom {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	padding: 1.6rem 0;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.4);
}

.vm-footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.2rem; }
.vm-footer-bottom a:hover { color: #fff; }
.vm-footer-legal a:first-child { margin-left: 0; }

/* ============================================
   PAGINA SPA PRIVATE
   Riusa hero/eyebrow/CTA della home. Qui solo i
   componenti nuovi: feature card, intro, tab +
   carosello Amarena/Fragola, pacchetti prezzo.
============================================ */

/* -------- 3 FEATURE CARD -------- */
.vm-features-section {
	padding: 5rem 2rem 2rem;
	background-color: #ffffff;
}

.vm-features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* Pallini indicatori sotto la riga scroll delle feature card
   (mobile): compaiono solo quando seguono direttamente una
   .vm-features-grid--scroll-mobile, per far capire che la riga
   si puo' scorrere in orizzontale. Nascosti di default/desktop. */
.vm-features-scroll-dots {
	display: none;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.4rem auto 0 auto;
}

.vm-features-scroll-dots .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(0,0,0,0.15);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.vm-features-scroll-dots .dot.is-active {
	background: var(--vm-accent);
	transform: scale(1.3);
}

@media (max-width: 900px) {
	.vm-features-grid { grid-template-columns: minmax(0, 1fr); }

	/* Variante opt-in (per ora solo pagina Wellness e Soggiorni): invece di
	   impilare le 3 card a tutta larghezza, le mette in riga con
	   scorrimento orizzontale, come la riga categorie e le
	   statistiche in Home. */
	.vm-features-grid.vm-features-grid--scroll-mobile {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 1.2rem;
		margin: 0 -2rem;
		padding: 0 2rem 0.5rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.vm-features-grid.vm-features-grid--scroll-mobile::-webkit-scrollbar { display: none; }

	.vm-features-grid.vm-features-grid--scroll-mobile .vm-feature-card {
		flex: 0 0 82%;
		max-width: 340px;
		scroll-snap-align: start;
	}

	.vm-features-grid.vm-features-grid--scroll-mobile + .vm-features-scroll-dots {
		display: flex;
	}
}

.vm-feature-card {
	text-align: center;
	padding: 2.6rem 1.8rem;
	background: var(--vm-cream);
	border-radius: 4px;
}

.vm-feature-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgba(173,74,73,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.4rem auto;
	color: var(--vm-accent);
}

.vm-feature-icon svg { width: 24px; height: 24px; }

.vm-feature-card h3 {
	font-family: var(--vm-serif);
	font-size: 1.3rem;
	font-weight: 400;
	color: #201f1f;
	margin: 0 0 0.7rem 0;
}

.vm-feature-card p {
	color: #767676;
	font-size: 0.96rem;
	line-height: 1.6;
	margin: 0;
}

/* -------- INTRO SPA (testo centrato) -------- */
.vm-spa-intro-section {
	padding: 4rem 2rem;
	background-color: #ffffff;
	text-align: center;
}

.vm-spa-intro-section .vm-eyebrow { text-align: center; }

.vm-spa-intro-section h2 {
	font-family: var(--vm-serif);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 400;
	color: #201f1f;
	max-width: 760px;
	margin: 0 auto 1.4rem auto;
	line-height: 1.25;
}

.vm-spa-intro-section p {
	max-width: 720px;
	margin: 0 auto 1rem auto;
	color: #6f6f6f;
	font-size: 1.02rem;
	line-height: 1.75;
}

.vm-spa-intro-section p strong { color: #2a2a2a; font-weight: 600; }

/* -------- TABS AMARENA / FRAGOLA -------- */
.vm-spa-tabs {
	display: flex;
	justify-content: center;
	gap: 2.6rem;
	margin: 2.6rem 0 2rem 0;
}

.vm-spa-tab-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0 0 0.9rem 0;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: #9a9a9a;
	position: relative;
	transition: color 0.3s ease;
}

.vm-spa-tab-btn::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--vm-accent);
	transform: scaleX(0);
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

.vm-spa-tab-btn.is-active {
	color: var(--vm-ink);
}

.vm-spa-tab-btn.is-active::after { transform: scaleX(1); }

/* -------- CAROSELLO -------- */
.vm-spa-carousel-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Un po' di respiro quando il carosello segue direttamente un paragrafo
   di testo (es. galleria Wellness) invece dei tab Amarena/Fragola */
.vm-spa-intro-section p + .vm-spa-carousel-wrap {
	margin-top: 2.5rem;
}

.vm-spa-carousel {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	height: 560px;
	background: #1a1a1a;
	box-shadow: 0 20px 50px rgba(0,0,0,0.12);
	transition: box-shadow 0.35s ease;
	will-change: transform;
}

.vm-spa-carousel:hover {
	box-shadow: 0 28px 64px rgba(0,0,0,0.2);
}

.vm-spa-carousel[hidden] { display: none; }

.vm-spa-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.vm-spa-carousel-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.vm-spa-carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vm-spa-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.85);
	color: var(--vm-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: background 0.3s ease, transform 0.3s ease;
}

.vm-spa-carousel-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.08); }
.vm-spa-carousel-arrow.prev { left: 1.2rem; }
.vm-spa-carousel-arrow.next { right: 1.2rem; }
.vm-spa-carousel-arrow svg { width: 20px; height: 20px; }

.vm-spa-carousel-dots {
	position: absolute;
	bottom: 1.2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	z-index: 3;
}

.vm-spa-carousel-dots .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.vm-spa-carousel-dots .dot.is-active {
	background: #ffffff;
	transform: scale(1.3);
}

@media (max-width: 700px) {
	.vm-spa-carousel { height: 360px; }
	.vm-spa-carousel-arrow { width: 36px; height: 36px; }
	/* Il carosello non deve aggiungere un suo margine laterale extra
	   sopra quello gia' dato dalla sezione che lo contiene: cosi'
	   resta allineato a testo/titoli sopra di lui invece di risultare
	   piu' rientrato. */
	.vm-spa-carousel-wrap { padding: 0; }
}

/* -------- CAROSELLO "MENU DEL GIORNO" (card PDF scaricabili,
   stesso componente slider/frecce/pallini del carosello foto,
   ma con card testuali al posto delle immagini) -------- */
.vm-spa-carousel--menu {
	background: var(--vm-cream);
	height: auto;
	min-height: 420px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.07);
}

.vm-spa-carousel--menu .vm-spa-carousel-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
}

.vm-menu-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 380px;
}

.vm-menu-card-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(173,74,73,0.08);
	border: 1px solid rgba(173,74,73,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vm-accent);
	flex-shrink: 0;
}

.vm-menu-card-icon svg { width: 26px; height: 26px; }

.vm-menu-card-day {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--vm-accent);
}

.vm-menu-card-title {
	font-family: var(--vm-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: #201f1f;
	margin: 0;
}

.vm-menu-card-text {
	color: #767676;
	font-size: 0.98rem;
	line-height: 1.65;
	margin: 0;
}

.vm-menu-card-placeholder .vm-menu-card-icon {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.12);
	color: #9a9a9a;
}

.vm-menu-card-placeholder .vm-menu-card-day { color: #9a9a9a; }

.vm-spa-carousel--menu .vm-spa-carousel-arrow {
	background: rgba(255,255,255,0.9);
}

@media (max-width: 700px) {
	.vm-spa-carousel--menu { min-height: 400px; }
	.vm-menu-card-title { font-size: 1.3rem; }
}

/* -------- PACCHETTI -------- */
.vm-packages-section {
	padding: 5.5rem 2rem;
	background-color: var(--vm-cream);
}

.vm-packages-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 3rem auto 0 auto;
}

@media (max-width: 900px) {
	.vm-packages-grid { grid-template-columns: minmax(0, 1fr); }
}

.vm-package-card {
	background: #ffffff;
	border-radius: 4px;
	padding: 2.4rem 2rem;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.vm-package-card.is-featured {
	box-shadow: 0 20px 50px rgba(173,74,73,0.16);
	border: 1px solid rgba(173,74,73,0.25);
}

.vm-package-card h3 {
	font-family: var(--vm-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: #201f1f;
	margin: 0 0 0.9rem 0;
}

.vm-package-card p.vm-package-desc {
	color: #767676;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 1.4rem 0;
	flex-grow: 1;
}

.vm-package-price {
	font-family: var(--vm-serif);
	font-size: 1.7rem;
	color: var(--vm-accent);
	margin-bottom: 0.2rem;
}

.vm-package-price .price-from {
	font-size: 0.75rem;
	color: #9a9a9a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: block;
	margin-bottom: 0.3rem;
}

.vm-package-duration {
	font-size: 0.85rem;
	color: #9a9a9a;
	margin-bottom: 1.6rem;
}

.vm-package-actions {
	display: flex;
	gap: 0.7rem;
	justify-content: center;
	flex-wrap: wrap;
}

.vm-package-actions .vm-btn {
	padding: 0.7rem 1.4rem;
}

/* ============================================
   PULSANTE WHATSAPP FLOTTANTE (sitewide)
   Sempre visibile in basso a destra su ogni pagina
   del sito (iniettato via hook wp_footer, vedi
   vecchio-maso-whatsapp.php). Icona ufficiale
   WhatsApp su sfondo verde brand, con un anello
   che pulsa piano per farsi notare e un effetto
   hover di sollevamento + ombra piu' marcata.
============================================ */
.vm-whatsapp-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(0,0,0,0.28);
	z-index: 9999;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}

.vm-whatsapp-float svg {
	width: 30px;
	height: 30px;
	fill: #ffffff;
	position: relative;
	z-index: 1;
}

.vm-whatsapp-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25d366;
	opacity: 0.55;
	animation: vm-wa-pulse 2.6s ease-out infinite;
}

@keyframes vm-wa-pulse {
	0% { transform: scale(1); opacity: 0.55; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (hover: hover) {
	.vm-whatsapp-float:hover {
		transform: translateY(-4px) scale(1.08);
		box-shadow: 0 14px 32px rgba(0,0,0,0.38);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vm-whatsapp-pulse { animation: none; }
}

@media (max-width: 600px) {
	.vm-whatsapp-float {
		width: 52px;
		height: 52px;
		right: 1.1rem;
		bottom: 1.1rem;
	}
	.vm-whatsapp-float svg { width: 26px; height: 26px; }
}

/* ============================================
   SELETTORE LINGUA (Polylang, header)
   Iniettato dinamicamente da vecchio-maso-i18n.php
   dentro al gruppo azioni dell'header (desktop e
   pannello mobile). Bandiere semplici, quella attiva
   evidenziata, le altre leggermente spente finche'
   non ci si passa sopra.
============================================ */
.vm-lang-switch {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-right: 0.9rem;
	padding-right: 0.9rem;
	border-right: 1px solid rgba(0,0,0,0.1);
}

.vm-lang-link {
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	opacity: 0.45;
	filter: grayscale(35%);
	transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.vm-lang-link.is-active {
	opacity: 1;
	filter: none;
}

@media (hover: hover) {
	.vm-lang-link:hover {
		opacity: 1;
		filter: none;
		transform: translateY(-2px);
	}
}

/* Pannello mobile: restano le bandierine, ma centrate sulla riga
   (prima erano allineate a sinistra). */
.vm-mobile-panel .vm-lang-switch {
	margin-right: 0;
	padding-right: 0;
	border-right: none;
	gap: 0.6rem;
	margin-bottom: 1rem;
	justify-content: center;
}

.vm-mobile-panel .vm-lang-link {
	font-size: 1.3rem;
}

/* -------- SELETTORE LINGUA A TENDINA (desktop) --------
   Sostituisce la riga di bandierine su desktop: un pulsante con la
   bandiera della lingua corrente + freccia, che apre un piccolo menu
   con tutte le lingue disponibili. Apertura/chiusura gestita in
   vecchio-maso-scripts.js (aggiunge/toglie la classe .is-open). */
.vm-lang-dropdown {
	position: relative;
}

.vm-lang-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.3rem 0.1rem;
	color: var(--vm-ink);
}

.vm-lang-current-flag {
	font-size: 1.15rem;
	line-height: 1;
}

.vm-lang-caret {
	width: 13px;
	height: 13px;
	color: var(--vm-muted);
	transition: transform 0.25s ease;
}

.vm-lang-dropdown.is-open .vm-lang-caret {
	transform: rotate(180deg);
}

.vm-lang-dropdown-menu {
	position: absolute;
	top: calc(100% + 1rem);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 14px 34px rgba(0,0,0,0.16);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 0.4rem;
	display: flex;
	flex-direction: column;
	min-width: 155px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 200;
}

.vm-lang-dropdown.is-open .vm-lang-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.vm-lang-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
	border-radius: 4px;
	text-decoration: none;
	color: var(--vm-ink);
	font-size: 0.86rem;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.vm-lang-option:hover {
	background: rgba(173,74,73,0.08);
}

.vm-lang-option.is-active {
	color: var(--vm-accent);
	font-weight: 600;
}

.vm-lang-option-flag {
	font-size: 1.05rem;
	line-height: 1;
}