/* LIQUID GLASS per i siti demo – tinta per ogni demo via body[data-g] */
body{--gt:255,255,255;--ga:.10;--gb:.22;--glow1:rgba(200,120,60,.25);--glow2:rgba(255,200,120,.2);--gtext:inherit}
body[data-g=osteria]{--gt:255,250,240;--ga:.45;--gb:.7;--glow1:rgba(196,98,45,.28);--glow2:rgba(232,180,90,.25)}
body[data-g=atelier]{--gt:255,255,255;--ga:.45;--gb:.8;--glow1:rgba(232,160,170,.35);--glow2:rgba(200,170,230,.25)}
body[data-g=studio]{--gt:255,255,255;--ga:.5;--gb:.8;--glow1:rgba(40,90,220,.22);--glow2:rgba(0,180,200,.18)}
body[data-g=nocturna]{--gt:255,255,255;--ga:.05;--gb:.14;--glow1:rgba(179,36,31,.30);--glow2:rgba(120,0,0,.22)}

body::before{content:"";position:fixed;inset:-15vmax;z-index:0;pointer-events:none;
  background:radial-gradient(38vmax 38vmax at 12% 30%,var(--glow1),transparent 60%),radial-gradient(34vmax 34vmax at 88% 75%,var(--glow2),transparent 60%);
  animation:gdF 22s ease-in-out infinite alternate}
@keyframes gdF{to{transform:translate3d(4vmax,-3vmax,0) scale(1.08)}}
body>*:not(nav):not(.demo-bar){position:relative;z-index:1}
nav{z-index:20 !important}
.demo-bar{z-index:9999 !important}

/* Superfici di vetro */
.card,.dish,.st,.ar,.form,.hours,.svc,.trust,.info .wrap>div,.menu>*{
  background:linear-gradient(135deg,rgba(var(--gt),calc(var(--ga) + .08)),rgba(var(--gt),var(--ga))) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,var(--gb)) !important;border-radius:22px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 14px 40px rgba(0,0,0,.14) !important;
  clip-path:none !important;outline:none !important}
body[data-g=nocturna] .st,body[data-g=nocturna] .ar,body[data-g=nocturna] .form{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 24px rgba(179,36,31,.10),0 18px 50px rgba(0,0,0,.6) !important}
.card:hover,.dish:hover,.st:hover,.ar:hover{transform:translateY(-3px);transition:.3s}

/* Fasce di sezione trasparenti per far vedere i bagliori */
.s.alt,.s.band,.s.book{background:transparent !important}

/* Menu a pillola di vetro */
nav{background:rgba(var(--gt),calc(var(--ga) + .05)) !important;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,var(--gb));border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px rgba(0,0,0,.18);
  margin:14px auto !important;width:min(1100px,calc(100% - 24px));padding:10px 22px !important}
body[data-g=nocturna] nav,body[data-g=osteria] nav{background:rgba(20,10,8,.35) !important}

/* Pulsanti in vetro */
.btn,.form button,.cta{border-radius:999px !important;clip-path:none !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(0,0,0,.2) !important;border:1px solid rgba(255,255,255,.3) !important;outline:none !important}
.btn.alt,.btn.l,.btn.g,.btn.f{background:rgba(255,255,255,.18) !important}

/* Campi del form */
.form input,.form select,.form textarea{background:rgba(var(--gt),.12) !important;border:1px solid rgba(255,255,255,var(--gb)) !important;border-radius:14px !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body[data-g=nocturna] .form input,body[data-g=nocturna] .form select,body[data-g=nocturna] .form textarea{background:rgba(0,0,0,.35) !important}

/* Avatar e icone */
.av,.ic{border-radius:50% !important;clip-path:none !important;transform:none !important;
  background:rgba(255,255,255,.12) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3) !important}
.av>*{transform:none !important}

@media(max-width:768px){nav{border-radius:22px;padding:10px 14px !important}}

/* Osteria: la fascia Info resta scura, vetro scuro sopra */
.info .wrap>div{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 40px rgba(0,0,0,.35) !important;border-color:rgba(255,255,255,.18) !important}

.dish{padding:14px 20px !important}
.card,.st,.ar,.svc,.hours,.trust{padding-left:max(20px,1em);padding-right:max(20px,1em)}
.info .wrap>div{padding:22px !important}