/* app-shell.css — Interfaccia mobile (PWA_MOBILE_REDESIGN_PLAN.md, MOBILE_WEB_PLAN.md).
   Tutto è sotto html.is-app (messo da js/app-shell.js), che vale sia nell'app installata
   (html.is-standalone) sia nel browser del telefono con la v2 (html.is-web): le differenze
   tra i due sono le regole is-standalone / is-web. Desktop e tablet non cambiano.
   La parte "Mappa" vale solo per /app. */

.app-tabbar, .app-back { display: none; }

/* Barra in basso agganciata al fondo: su iPhone scende dentro la zona dell'indicatore home
   (safe-area − 14px), sugli altri telefoni resta a 8px dal bordo. */
html.is-app {
  --app-tb-b: max(8px, calc(env(safe-area-inset-bottom, 0px) - 14px));
  --app-tb-h: 62px;
  --app-tb-top: calc(var(--app-tb-b) + var(--app-tb-h));   /* bordo alto della barra dal fondo */
}

/* ── Guscio comune ─────────────────────────────────────────────────────────── */
html.is-app body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(var(--app-tb-top) + 24px) !important;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
/* Barra di stato iOS (status-bar black-translucent): fascia vetro sotto ora/batteria */
html.is-standalone body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  z-index: 960; pointer-events: none;
}
/* Nastro stagionale (D2), vecchia barra a 4 voci e foto flottante: via in entrambi i casi */
html.is-app #ss-tk-top,
html.is-app .bottom-nav,
html.is-app .fab-photo,
html.is-app #pwa-splash { display: none !important; }
/* Navbar e footer: via solo nell'app installata (nel browser testata sottile e footer, vedi in fondo) */
html.is-standalone .navbar,
html.is-standalone .footer-compact,
html.is-standalone footer { display: none !important; }

/* ── Barra in basso: ovale, vetro, flottante ───────────────────────────────── */
html.is-app .app-tabbar {
  display: flex; align-items: center; justify-content: space-around;
  position: fixed; z-index: 950;
  left: 10px; right: 10px; bottom: var(--app-tb-b);
  max-width: 520px; margin: 0 auto; height: var(--app-tb-h); padding: 0 5px;
  border-radius: 999px;
  /* Vetro: molto trasparente, sfocatura forte + saturazione, bordo e riflesso chiari */
  background: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(26px) saturate(200%); backdrop-filter: blur(26px) saturate(200%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 30px rgba(17,24,39,.16), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.is-app .app-tabbar { background: rgba(255,255,255,.94); }
}
html.is-app .at-item {
  flex: 1 1 0; min-width: 0; height: 50px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #1F2937; text-decoration: none; font-size: .64rem; font-weight: 600; letter-spacing: .01em;
  transition: color .15s, background .15s;
}
html.is-app .at-item.active { color: var(--brand); background: rgba(255,255,255,.55); }
html.is-app .at-item.active svg { stroke-width: 2.4; }
html.is-app .at-item:active { transform: scale(.94); }
html.is-app .at-add { flex: 0 0 auto; margin: 0 4px; text-decoration: none; }
html.is-app .at-add-c {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 14px rgba(0,122,56,.38);
  transition: transform .15s;
}
html.is-app .at-add:active .at-add-c { transform: scale(.9); }

/* ── Tasto indietro (pagine fuori dalla barra: scheda evento, mercatino…) ─── */
html.is-app .app-back {
  display: flex; align-items: center; justify-content: center;
  position: fixed; z-index: 955;
  top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.72); color: #111827;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 3px 12px rgba(17,24,39,.2); cursor: pointer;
}
html.is-app .app-back:active { transform: scale(.92); }
/* Contenuto della scheda un po' più giù, per non finire sotto il tasto indietro */
html.is-app.is-app-sub body { padding-top: calc(env(safe-area-inset-top, 0px) + 58px); }

/* ══ Mappa (/app) ═══════════════════════════════════════════════════════════ */
html.is-app body:has(#map-container) { padding-top: 0; padding-bottom: 0 !important; }
/* Sulla mappa niente fascia bianca sotto la barra di stato: la mappa arriva fino in cima,
   con una leggera sfumatura scura perché ora e batteria (bianche su iPhone) restino leggibili */
html.is-standalone body:has(#map-container)::before {
  height: calc(env(safe-area-inset-top, 0px) + 14px);
  background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,0));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Ricerca flottante in alto, sopra la mappa */
:is(html.is-app, html.is-appmap) #search-panel {
  display: flex !important; flex-direction: column; gap: .55rem;
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: transparent; border: 0; box-shadow: none;
  pointer-events: none;
}
:is(html.is-app, html.is-appmap) #search-panel > * { pointer-events: auto; }
/* In lista il contenuto scorre sotto: la ricerca prende il fondo vetro */
:is(html.is-app, html.is-appmap) body:not(.view-map) #search-panel {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 1px 0 rgba(17,24,39,.06);
}
:is(html.is-app, html.is-appmap) #search-panel .sp-row { flex-wrap: nowrap; }
:is(html.is-app, html.is-appmap) #search-panel .search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
:is(html.is-app, html.is-appmap) #search-panel #search {
  min-height: 50px; padding-right: 5.6rem;
  box-shadow: 0 4px 18px rgba(17,24,39,.16);
}
:is(html.is-app, html.is-appmap) #search-panel .search-clear { right: 3.2rem; }
:is(html.is-app, html.is-appmap) #sp-filter-btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; color: var(--text-1);
}
:is(html.is-app, html.is-appmap) #sp-filter-btn.has-filters { background: var(--brand); border-color: var(--brand); color: #fff; }
:is(html.is-app, html.is-appmap) #sp-filter-btn .af-dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #CE2B37; color: #fff; font-size: .62rem; font-weight: 800;
  line-height: 17px; text-align: center; border: 2px solid #fff;
}
:is(html.is-app, html.is-appmap) #sp-count-badge,
:is(html.is-app, html.is-appmap) #map-pills-overlay,
:is(html.is-app, html.is-appmap) #btn-map-next-weekend,
:is(html.is-app, html.is-appmap) #map-sheet { display: none !important; }

/* Pillole su una riga che scorre in orizzontale */
:is(html.is-app, html.is-appmap) .app-pills {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -12px; padding: 2px 12px 6px;
  -webkit-overflow-scrolling: touch;
}
:is(html.is-app, html.is-appmap) .app-pills::-webkit-scrollbar { display: none; }
:is(html.is-app, html.is-appmap) .app-pills .date-pill {
  flex: 0 0 auto; min-height: 38px; padding: .45rem .85rem;
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid rgba(17,24,39,.08); background: rgba(255,255,255,.94); color: var(--text-1);
  box-shadow: 0 2px 8px rgba(17,24,39,.14) !important; font-size: .82rem;
}
:is(html.is-app, html.is-appmap) .app-pills .date-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
:is(html.is-app, html.is-appmap) .app-pills .date-pill.active-geo { background: #4285F4; border-color: #4285F4; color: #fff; }
:is(html.is-app, html.is-appmap) #map-season-pills {
  display: contents; position: static; transform: none;
}
:is(html.is-app, html.is-appmap) #map-season-pills:empty { display: none; }
/* Storiche e temi stagionali: pillola con icona + nome (col solo pallino si confondevano coi pin) */
:is(html.is-app, html.is-appmap) .app-pills .sp-pill {
  flex: 0 0 auto; width: auto; height: 38px; padding: 0 .9rem 0 .7rem; gap: .35rem; border-radius: 999px;
  border: 0; font-size: .82rem; font-weight: 600; white-space: nowrap; filter: none;
  box-shadow: 0 2px 8px rgba(17,24,39,.2);
}
:is(html.is-app, html.is-appmap) .app-pills .sp-pill::after { content: attr(aria-label); }
:is(html.is-app, html.is-appmap) .app-pills .sp-pill.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
:is(html.is-app, html.is-appmap) .app-pills .sp-pill .sp-ck { top: -5px; right: -5px; }

/* Mappa a tutto schermo: sfondo anche sotto la ricerca e sotto la barra in vetro.
   style.css (mobile) fissa #view-map fra navbar e vecchia bottom-nav: qui va a inset 0. */
:is(html.is-app, html.is-appmap) #view-map { top: 0 !important; bottom: 0 !important; left: 0; right: 0; }
:is(html.is-app, html.is-appmap) .leaflet-bottom { bottom: calc(var(--app-tb-top) + 4px); }
:is(html.is-app, html.is-appmap) #view-list {
  padding-top: calc(var(--sp-h, 120px) + 6px);
  padding-bottom: calc(var(--app-tb-top) + 70px) !important;
}

/* ── Pannello filtri dal basso ─────────────────────────────────────────────── */
.app-sheet-backdrop { display: none; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 1300;
  background: rgba(17,24,39,.38); opacity: 0; pointer-events: none; transition: opacity .2s;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1310;
  max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: .5rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(17,24,39,.2);
  transform: translateY(105%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet.open { transform: translateY(0); }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: #D1D5DB; margin: .2rem auto .7rem; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: #F3F4F6; color: #111827;
  font-size: 1.1rem; cursor: pointer;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet h3 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 1rem 0 .5rem; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .af-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .af-chip {
  padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-1); cursor: pointer;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .af-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet #sp-advanced {
  max-height: none; opacity: 1; pointer-events: auto; overflow: visible; padding: 0; gap: .6rem;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet .sp-geo-row { display: flex !important; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet #sp-advanced .filter-clear { display: none; }
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-foot {
  display: flex; gap: .6rem; margin-top: 1.3rem; position: sticky; bottom: 0; background: #fff; padding-top: .5rem;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .app-sheet-foot button {
  flex: 1; min-height: 48px; border-radius: 14px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
:is(html.is-app, html.is-appmap, html.is-appsheet) .af-reset { background: #fff; border: 1.5px solid var(--border); color: var(--text-1); }
:is(html.is-app, html.is-appmap, html.is-appsheet) .af-apply { background: #111827; border: 0; color: #fff; }

/* ── Anteprima pin (sale dal basso, sopra la barra) ────────────────────────── */
#app-pin-preview { display: none; }
:is(html.is-app, html.is-appmap) #app-pin-preview {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  position: fixed; z-index: 945; left: 0; right: 0;
  bottom: calc(var(--app-tb-top) + 6px);
  padding: 6px 12px 10px;
  transform: translateY(calc(100% + 110px)); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
:is(html.is-app, html.is-appmap) #app-pin-preview::-webkit-scrollbar { display: none; }
:is(html.is-app, html.is-appmap) #app-pin-preview.open { transform: translateY(0); }
:is(html.is-app, html.is-appmap) .app-pv {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; gap: .8rem; align-items: stretch;
  background: #fff; border-radius: 20px; padding: 10px; text-decoration: none; color: var(--text-1);
  box-shadow: 0 10px 30px rgba(17,24,39,.25);
  position: relative;
}
:is(html.is-app, html.is-appmap) #app-pin-preview.multi .app-pv { flex-basis: 88%; }
:is(html.is-app, html.is-appmap) .app-pv-img {
  flex: 0 0 92px; height: 122px; border-radius: 14px; overflow: hidden; background: var(--green-pale, #E8F5EE);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
:is(html.is-app, html.is-appmap) .app-pv-img img { width: 100%; height: 100%; object-fit: cover; }
:is(html.is-app, html.is-appmap) .app-pv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; padding: 2px 22px 2px 0; }
:is(html.is-app, html.is-appmap) .app-pv-t { font-weight: 800; font-size: 1rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(html.is-app, html.is-appmap) .app-pv-m { font-size: .8rem; color: var(--text-2, #4B5563); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(html.is-app, html.is-appmap) .app-pv-d { font-size: .8rem; color: var(--text-muted); line-height: 1.35; margin-top: .1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(html.is-app, html.is-appmap) .app-pv-go { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--brand); }
:is(html.is-app, html.is-appmap) .app-pv-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: #F3F4F6; color: #374151; font-size: .9rem; line-height: 26px; padding: 0; cursor: pointer;
}

/* ══ Stessa mappa sul sito (esperienza v2, html.is-appmap da app.html) ══════════
   Le regole qui sopra valgono anche per is-appmap; queste adattano al sito: navbar del sito
   in alto (niente barra in basso), mappa sotto la navbar, ricerca a sinistra, anteprima centrata. */
html.is-appmap { --app-tb-top: 12px; }
html.is-appmap #view-list, html.is-appmap #split-handle { display: none !important; }
html.is-appmap #view-map { display: block !important; position: fixed; top: calc(var(--tk-h, 0px) + 68px + 62px); left: 0; right: 0; bottom: 0; width: auto !important; }
html.is-appmap #map-container, html.is-appmap #map { height: 100% !important; }
/* Barra in alto IDENTICA a quella di Esplora (home.html .top): fascia bianca sotto la navbar,
   stessa altezza e margini, selettore a sinistra, ricerca nello stesso punto e larga uguale;
   a destra della ricerca (dove Esplora ha la posizione) le pillole in linea. */
html.is-appmap #search-panel { top: calc(var(--tk-h, 0px) + 68px); left: 0; right: 0; min-height: 62px; flex-direction: row; align-items: center; gap: 1rem;
  padding: .55rem 1.4rem; background: #fff; border-bottom: 1px solid var(--border); box-shadow: none; pointer-events: auto; }
html.is-appmap #search-panel .ts-tabs { flex: 0 0 auto; }
html.is-appmap #search-panel .sp-row { flex: 1 1 auto; max-width: 520px; min-width: 260px; }
html.is-appmap #search-panel #search { min-height: 44px; box-shadow: 0 2px 10px rgba(0,146,70,.12); }
html.is-appmap #search-panel .app-pills { flex: 1 1 0; min-width: 0; margin: 0; padding: 4px 28px 4px 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
html.is-appmap .app-pills .date-pill { box-shadow: none !important; border: 1.5px solid var(--border); background: #fff; }
/* Chip «Dove» (dove.js) in fondo a destra; «Vicino a me» e la regione dei filtri stanno lì dentro */
html.is-appmap #search-panel .ts-dove { margin-left: auto; }
/* Menu laterale (☰) sopra la barra della mappa (900), l'anteprima (945) e i filtri (1310) */
html.is-appmap .nav-drawer-overlay { z-index: 1600; }
html.is-appmap .nav-drawer { z-index: 1601; }
/* Navbar (e le sue tendine: account, lingua…) sopra la barra della mappa: la barra sta a 900 */
html.is-appmap .navbar { z-index: 1000; }
/* «Vicino a me» torna anche qui come prima pillola (2026-10-17): spostata la mappa, riporta alla tua posizione */
html.is-appmap .app-sheet .sp-geo-row { display: none !important; }
html.is-appmap .app-pills .sp-pill { box-shadow: 0 1px 4px rgba(17,24,39,.18); }
/* Se le pillole non ci stanno: sotto 1280px Storiche/Halloween/Natale solo icona (nome nel tooltip) */
@media (min-width: 768px) and (max-width: 1280px) {
  html.is-appmap .app-pills .sp-pill { padding: 0; width: 38px; justify-content: center; }
  html.is-appmap .app-pills .sp-pill::after { content: none; }
}
html.is-appmap #app-pin-preview { left: 50%; right: auto; width: min(620px, calc(100% - 24px)); bottom: 18px;
  transform: translate(-50%, calc(100% + 110px)); }
html.is-appmap #app-pin-preview.open { transform: translate(-50%, 0); }
/* Pannello filtri stretto e centrato, uguale sulla mappa e in Esplora (is-appsheet) */
:is(html.is-appmap, html.is-appsheet) .app-sheet { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 105%); }
:is(html.is-appmap, html.is-appsheet) .app-sheet.open { transform: translate(-50%, 0); }
html.is-appmap .leaflet-top.leaflet-left { top: auto; bottom: 18px; }   /* zoom in basso a sinistra: in alto c'è la ricerca */
@media (max-width: 767px) {
  html.is-appmap #search-panel { top: calc(var(--tk-h, 0px) + 60px); padding: .5rem .7rem; }
  html.is-appmap #view-map { top: calc(var(--tk-h, 0px) + 60px + 108px); }
  html.is-appmap #search-panel .app-pills { padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
  html.is-appmap #search-panel { flex-wrap: wrap; }
  html.is-appmap #search-panel .sp-row { flex: 1 1 100%; }
  html.is-appmap #search-panel .app-pills { flex-basis: 100%; }
}

/* Voce Profilo da loggato: cerchio con l'iniziale al posto dell'omino (js/app-shell.js) */
html.is-app .at-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand, #009246); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; line-height: 1;
}
html.is-app .at-item.active .at-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand, #009246); }

/* ══ Scheda evento (event.html) ═════════════════════════════════════════════
   In alto a destra Salva, Segui (campanella, nascosta da event.html se la sagra non è seguibile)
   e Condividi, tondi in vetro come il tasto indietro.
   Calendario e indicazioni stanno nella card "Quando e dove" sotto la locandina;
   il fumetto ⓘ non si mostra in app. */
html.is-app .app-ev-actions {
  position: fixed; z-index: 955; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px;
  display: flex; gap: 8px; margin: 0;
}
html.is-app .app-ev-actions .btn-calendar,
html.is-app .app-ev-actions .btn-navigate,
html.is-app .app-ev-actions .info-tip-wrap { display: none !important; }
html.is-app .app-ev-actions .action-btn {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.72); color: #111827;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 3px 12px rgba(17,24,39,.2);
}
html.is-app .app-ev-actions .action-btn:hover { transform: none; }
html.is-app .ev-top-row:not(:has(.ev-kicker)) { margin-bottom: 0; }

html.is-app .app-ww-row { display: flex; font-size: .95rem; margin: .25rem 0; }
html.is-app .app-ww-row > span { display: inline-flex; align-items: flex-start; gap: .45rem; flex-wrap: wrap; }
html.is-app .app-ww-row .ui-icon { flex: 0 0 auto; margin-top: .15rem; }
html.is-app .app-ww-btns { display: flex; gap: .55rem; margin-top: .85rem; }
html.is-app .app-ww-btn {
  flex: 1 1 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 14px; border: 1.5px solid var(--border); background: #fff; color: var(--text-1);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
html.is-app .app-ww-btn:last-child { background: var(--brand); border-color: var(--brand); color: #fff; }
html.is-app .app-ww-btn:active { transform: scale(.97); }
html.is-app .app-verify p { margin: 0; font-size: .88rem; color: var(--text-2, #4B5563); line-height: 1.5; }

/* ── Notifiche: proposta dopo il ❤️ e avviso breve (js/push.js) ─────────────── */
html.is-app #push-offer { text-align: center; }
html.is-app .push-offer-ico { font-size: 2.4rem; line-height: 1; margin: .2rem 0 .5rem; }
html.is-app .push-offer-t { font-size: 1.25rem; font-weight: 800; margin: 0 0 .4rem; }
html.is-app .push-offer-p { font-size: .92rem; color: var(--text-2, #4B5563); line-height: 1.5; margin: 0 auto; max-width: 34ch; }
.push-notice {
  position: fixed; z-index: 1400; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--app-tb-top, 70px) + 16px); max-width: calc(100% - 32px);
  background: #111827; color: #fff; padding: .7rem 1.1rem; border-radius: 14px;
  font-size: .88rem; font-weight: 600; box-shadow: 0 8px 24px rgba(17,24,39,.3); transition: opacity .4s;
}
.push-notice.out { opacity: 0; }

/* ══ Browser del telefono (html.is-web, MOBILE_WEB_PLAN.md) ═════════════════
   Stessa interfaccia dell'app; in più una testata sottile in alto (☰ · logo · account:
   il resto del menu sta nel ☰, "Aggiungi" è il ＋ della barra) e il footer in fondo.
   Niente tasto indietro flottante: c'è quello del browser. */
html.is-web { --app-nav-h: 56px; }
html.is-web .navbar {
  position: sticky; top: 0; z-index: 940;
  height: var(--app-nav-h); min-height: 0; padding: 0 .55rem;
}
html.is-web :is(.navbar-menu, .navbar-add, .navbar-country, .navbar-lang, #navbar-view-btn, #navbar-search-btn) { display: none !important; }
/* Mappa a tutto schermo come nell'app: niente testata (la navigazione è nella barra in basso) */
html.is-web body:has(#map-container) .navbar { display: none !important; }
/* Elementi agganciati in alto: sotto la testata, non sopra */
html.is-web .app-ev-actions { top: calc(var(--app-nav-h) + 10px); }
html.is-app.is-web .xp-sbar { top: var(--app-nav-h); }

/* «Vicino a me» sulla mappa del telefono: solo la freccetta (la mappa parte già vicino a te) */
:is(html.is-app, html.is-appmap) .app-pills .date-pill.vic-ico { width: 38px; padding: 0; justify-content: center; flex: 0 0 38px; }