/* =========================================================
   evnt.city - foglio di stile
   Direzione: cartografia. Carta, inchiostro, un solo colore
   forte riservato al segnaposto e alle azioni principali.
   ========================================================= */

/* Carattere incluso nel sito: nessuna chiamata a servizi esterni */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/red-hat-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/red-hat-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --paper:     #F2F5F4;   /* fondo: carta fredda, come un foglio di mappa */
  --sheet:     #FFFFFF;   /* superfici: schede, campi */
  --ink:       #343538;   /* testo: lo stesso scuro della scritta del logo */
  --ink-soft:  #5C6165;   /* testo secondario */
  --line:      #D2DAD8;   /* fili e bordi */
  --pin:       #007A85;   /* turchese del marchio */
  --pin-deep:  #00626B;   /* turchese premuto */
  --pin-text:      var(--pin);        /* v0.6.9: turchese per i testi (sui marchi chiari diventa più scuro) */
  --pin-text-deep: var(--pin-deep);
  --pin-wash:  #E0EEEF;   /* turchese molto chiaro, per gli sfondi */

  --error:     #B3261E;
  --error-bg:  #FBEAE8;
  --ok:        #2E6B2A;
  --ok-bg:     #E6F1E3;

  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1160px;
  --gutter: clamp(20px, 4vw, 40px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--pin-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--pin-text-deep); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Titoli ---------- */

.h1 {
  font-size: clamp(40px, 6.2vw, 78px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.h1__ask { display: block; font-weight: 500; color: var(--ink-soft); }
.h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}

/* ---------- Pulsanti ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid var(--pin);
  border-radius: 12px;
  background: var(--pin);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--pin-deep); border-color: var(--pin-deep); color: #fff; }

.btn--quiet {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn--light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn--danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn--danger:hover { background: #8E1E18; border-color: #8E1E18; color: #fff; }
.btn--quiet.btn--warn { border-color: var(--error); color: var(--error); }
.btn--quiet.btn--warn:hover { background: var(--error); border-color: var(--error); color: #fff; }

.btn--small { min-height: 40px; padding: 8px 16px; border-radius: 10px; font-size: 15px; }
.btn--full { width: 100%; }

/* ---------- Barra in alto ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.nav__logo { display: block; flex-shrink: 0; }
.nav__logo img { height: 34px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-weight: 700;
  font-size: 16px;
}
.nav__links a:not(.btn) { color: var(--ink); text-decoration: none; }
.nav__plus { display: none; width: 20px; height: 20px; }
.nav__go-short { display: none; }
.nav__links a[aria-current="page"]:not(.btn) { color: var(--pin-text); }
/* "Menu": compare solo su schermi stretti e contiene le voci che in alto non ci stanno */
.nav { position: relative; }
.nav__more { display: none; }
.nav__more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.nav__more summary::-webkit-details-marker { display: none; }
.nav__more summary svg { width: 20px; height: 20px; }
.nav__more[open] summary { background: var(--ink); color: #fff; }
.nav__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% - 6px);
  right: var(--gutter);
  display: grid;
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
  box-shadow: 0 18px 40px -18px rgba(20,40,45,.45);
}
.nav__panel a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 17px; }
.nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--pin-wash); }
.nav__links a:not(.btn):hover { color: var(--pin-text); }

/* ---------- Apertura: il foglio di mappa ---------- */

.hero { padding-bottom: clamp(28px, 4vw, 48px); }

.hero__sheet {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #E4EBE8;
}
/* la carta "sale" da sinistra per lasciare leggere il testo */
.hero__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 36%, rgba(242,245,244,.86) 50%, rgba(242,245,244,0) 68%);
  pointer-events: none;
}
.hero__stage { position: absolute; inset: 0; }
.hero__stage > svg { width: 100%; height: 100%; }

.hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 640px;
  padding: clamp(32px, 5.5vw, 72px);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* il link: la risposta alla domanda del titolo */
.linkbar {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet);
}
.linkbar__url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 16px;
}
.linkbar__url span { color: var(--ink-soft); font-weight: 500; }
.linkbar--static { padding: 14px 18px; }

/* il segnaposto sulla mappa e il cartellino dell'evento */
.place {
  position: absolute;
  left: 66%;
  top: 39%;
  z-index: 2;
  width: 74px;
  transform: translate(-50%, -100%);
}
.place__pin { position: relative; z-index: 1; width: 74px; height: auto; filter: drop-shadow(0 6px 5px rgba(20,40,45,.22)); }
.place__ground {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 30px;
  height: 10px;
  border-radius: 50%;
  background: rgba(20,40,45,.28);
  transform: translateX(-50%);
  filter: blur(3px);
}
.place__card {
  position: absolute;
  left: calc(100% + 16px);
  top: 4px;
  width: 248px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
  box-shadow: 0 10px 30px -12px rgba(20,40,45,.35);
  font-size: 15px;
  line-height: 1.4;
}
.place__card strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 800; line-height: 1.2; }
.place__card span { display: block; color: var(--ink-soft); }

/* Il segnaposto cade, e poi arriva il cartellino, quando la mappa è tutta dentro lo schermo: la pagina mette "is-in".
   Su computer succede all'apertura, su telefono quando ci si arriva scorrendo. Senza .motion è già tutto al suo posto. */
.motion .hero__stage:not(.is-in) .place__pin,
.motion .hero__stage:not(.is-in) .place__ground,
.motion .hero__stage:not(.is-in) .place__card { opacity: 0; }
.motion .hero__stage.is-in .place__pin { animation: pin-drop .7s cubic-bezier(.2,.9,.3,1.25) .15s both; }
.motion .hero__stage.is-in .place__ground { animation: ground-in .7s ease-out .15s both; }
.motion .hero__stage.is-in .place__card { animation: card-in .45s ease-out .75s both; }
@keyframes pin-drop { from { transform: translateY(-90px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ground-in { from { opacity: 0; transform: translateX(-50%) scale(.3); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes card-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Fasce di contenuto ---------- */

.band { padding-block: clamp(64px, 9vw, 120px); }
.band--ruled { border-top: 1px solid var(--line); }
/* il titolo di sezione prende tutta la riga e va a capo solo quando non ci sta */
.band__head { margin-bottom: clamp(36px, 5vw, 64px); }

/* Come funziona: una linea con tre fermate */
.route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  --route-gap: clamp(20px, 4vw, 56px);
  gap: var(--route-gap);
  counter-reset: stop;
}
/* la linea è fatta di due tratti: ogni fermata disegna quello che porta al centro della successiva */
.stop:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: calc(100% + var(--route-gap));
  height: 4px;
  background: var(--pin);
  transform-origin: left center;
  --line-from: scaleX(0);
}
.stop { position: relative; counter-increment: stop; padding-top: 64px; }
.stop::before {
  content: counter(stop);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 4px solid var(--pin);
  border-radius: 50%;
  background: var(--paper);
  color: var(--pin-text);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}
.stop:last-child::before { background: var(--pin); color: #fff; }
.stop p { margin-top: 8px; color: var(--ink-soft); max-width: 22em; }

/* Animazione di "Come funziona" (solo con la classe .motion, messa dalla pagina quando il movimento è gradito).
   1 si accende e arriva il testo, parte la linea e l'1 si spegne, si accende il 2... il 3 resta acceso. */
.motion .route:not(.is-playing) .stop > * { opacity: 0; }
.motion .route:not(.is-playing) .stop::after { transform: var(--line-from); }
.motion .route:not(.is-playing) .stop:last-child::before { background: var(--paper); color: var(--pin-text); }
.motion .route.is-playing .stop > * { animation: stop-text .35s ease-out both; }
.motion .route.is-playing .stop::after { animation: line-grow .4s ease-in-out both; }
.motion .route.is-playing .stop:nth-child(1)::before { animation: stop-flash .65s linear both; }
.motion .route.is-playing .stop:nth-child(1)::after { animation-delay: .5s; }
.motion .route.is-playing .stop:nth-child(2) > * { animation-delay: .9s; }
.motion .route.is-playing .stop:nth-child(2)::before { animation: stop-flash .65s linear .9s both; }
.motion .route.is-playing .stop:nth-child(2)::after { animation-delay: 1.4s; }
.motion .route.is-playing .stop:nth-child(3) > * { animation-delay: 1.8s; }
.motion .route.is-playing .stop:nth-child(3)::before { animation: stop-on .2s linear 1.8s both; }
@keyframes stop-text { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes line-grow { from { transform: var(--line-from); } to { transform: none; } }
@keyframes stop-flash {
  0%, 100% { background: var(--paper); color: var(--pin-text); }
  23%, 77% { background: var(--pin); color: #fff; }
}
@keyframes stop-on { from { background: var(--paper); color: var(--pin-text); } to { background: var(--pin); color: #fff; } }

/* Cosa vedono gli invitati */
.guests {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.guests__text { display: grid; gap: 22px; }

.legend { display: grid; gap: 14px; margin-top: 6px; }
.legend__row { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; }
.legend__key {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}
.legend__key svg { width: 17px; height: 17px; }

.guest {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: 0 30px 60px -40px rgba(20,40,45,.45);
}
/* la scheda di esempio arriva piano quando entra nello schermo */
.motion .guest { transition: opacity .6s ease-out, transform .6s ease-out; }
.motion .guest:not(.is-in) { opacity: 0; transform: translateY(24px); }
.guest__head { display: flex; align-items: center; gap: 16px; padding: 24px 26px 6px; }
.guest__logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #D9541E;
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .02em;
}
.guest__org { font-size: 14px; color: var(--ink-soft); }
.guest__title { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.guest__when { padding: 4px 26px 20px 96px; color: var(--ink-soft); font-size: 16px; }
.guest__map { position: relative; height: 230px; border-block: 1px solid var(--line); background: #E4EBE8; }
.guest__map > svg { width: 100%; height: 100%; }
.guest__marker {
  position: absolute;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #D9541E;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(20,40,45,.3);
  transform: translate(-50%, -50%);
}
.guest__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; font-size: 16px; }
.guest__made {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
}
.guest__made img { height: 15px; width: auto; }

/* Per chi + prezzo */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 88px);
}
.duo__col { display: grid; gap: 16px; align-content: start; }
.price { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }

/* Chiusura */
.closing { background: var(--pin); color: #fff; }
.closing__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: clamp(48px, 7vw, 88px);
}
.closing .h2 { max-width: 14em; }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  color: var(--ink-soft);
  font-size: 15px;
}
.foot img { height: 22px; width: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot__links a { color: var(--ink-soft); text-decoration: none; }
.foot__links a:hover { color: var(--pin-text); }

/* ---------- Moduli (login, registrazione, recupero password) ---------- */

.auth { display: grid; justify-items: center; padding-block: clamp(40px, 8vw, 96px) clamp(64px, 10vw, 120px); }
.auth__card { width: 100%; max-width: 420px; display: grid; gap: 22px; }
.auth__head { display: grid; gap: 8px; }
.auth__head p { color: var(--ink-soft); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 15px; font-weight: 700; }
.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid #AEB8B5;
  border-radius: 12px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
}
.input:focus { outline: 3px solid var(--pin); outline-offset: 1px; border-color: var(--pin); }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.check input { width: 20px; height: 20px; accent-color: var(--pin); }
.auth__links { display: grid; gap: 10px; justify-items: center; font-size: 16px; color: var(--ink-soft); }

.alert { padding: 12px 16px; border-radius: 12px; border: 1.5px solid; font-size: 16px; }
.alert--error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.alert--ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* ---------- Pagine che raccontano il servizio: Come funziona, Prezzi, Contatti ---------- */

.band__more { margin-top: clamp(28px, 4vw, 44px); font-weight: 700; }
.intro { display: grid; gap: 22px; padding-block: clamp(36px, 6vw, 84px) clamp(48px, 7vw, 96px); }
.intro .h1 { max-width: 13em; font-size: clamp(38px, 5.6vw, 70px); }
.intro__kicker { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pin-text); }
.intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.intro--center { justify-items: center; text-align: center; padding-bottom: clamp(28px, 4vw, 48px); }

/* tre riquadri affiancati */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.point { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); }
.point p { color: var(--ink-soft); }
.point__art { display: block; width: 100%; height: auto; margin-bottom: 8px; border-radius: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }

/* elenco di fatti: una riga in grassetto e la sua spiegazione */
.facts { display: grid; gap: 14px; margin-top: 22px; max-width: 34em; }
.facts li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border: 3px solid var(--pin); border-radius: 50%; }
.facts strong { color: var(--ink); font-weight: 800; }

/* la stessa pagina con i colori di tre aziende */
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--mt); box-shadow: 0 20px 40px -30px rgba(20,40,45,.45); }
.mini__band { display: flex; align-items: center; gap: 8px; padding: 14px 12px; background: var(--mb); }
.mini__logo { flex: none; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; background: var(--m); }
.mini__title { width: 62%; height: 9px; border-radius: 5px; background: var(--ink); opacity: .82; }
.mini__body { display: grid; gap: 8px; padding: 12px; }
.mini__line { height: 6px; border-radius: 3px; background: var(--ink); opacity: .22; }
.mini__line--short { width: 60%; }
.mini__map { height: 64px; border-radius: 8px; background: #DDE5E2; }
.mini__btn { justify-self: start; padding: 5px 10px; border-radius: 7px; background: var(--m); color: var(--mi); font-size: 11px; font-weight: 700; line-height: 1.2; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.tags li { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 700; }

/* tabelle di confronto (Come funziona e Prezzi) */
.vs__lead { max-width: 46em; margin-top: calc(-1 * clamp(16px, 3vw, 36px)); margin-bottom: 28px; }
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); }
.vs { width: 100%; border-collapse: collapse; font-size: 16px; }
.vs th, .vs td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs thead th { font-size: 15px; font-weight: 800; background: var(--paper); }
.vs tbody th { width: 34%; font-weight: 700; }
.vs td:last-child, .vs thead th:last-child { font-weight: 700; }
.vs--plans td, .vs--plans thead th:not(:first-child) { text-align: center; }
.vs--plans td:last-child { font-weight: 500; }
.vs .yes { color: var(--ok); font-weight: 800; }
.vs .no { color: var(--ink-soft); }

.faq__list { display: grid; gap: 10px; max-width: 46em; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.faq__item summary { padding: 16px 18px; font-weight: 700; cursor: pointer; }
.faq__item p { padding: 0 18px 18px; color: var(--ink-soft); }

/* Prezzi */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: clamp(64px, 9vw, 110px); }
.billing { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet); }
.billing__opt { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 18px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; }
.billing__opt small { font-size: 13px; font-weight: 700; color: var(--pin-text); }
#bill-monthly:checked ~ .billing .billing__opt--monthly,
#bill-yearly:checked ~ .billing .billing__opt--yearly { background: var(--ink); color: #fff; }
#bill-yearly:checked ~ .billing .billing__opt--yearly small { color: #fff; }
#bill-monthly:focus-visible ~ .billing .billing__opt--monthly,
#bill-yearly:focus-visible ~ .billing .billing__opt--yearly { outline: 3px solid var(--pin); outline-offset: 2px; }
#bill-monthly:checked ~ .plans .is-yearly,
#bill-yearly:checked ~ .plans .is-monthly { display: none; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); }
.plan--featured { border: 2px solid var(--pin); box-shadow: 0 24px 50px -34px rgba(0,122,133,.55); }
.plan__tag { min-height: 3em; color: var(--ink-soft); font-size: 16px; }
.plan__price { margin-top: 10px; color: var(--ink-soft); }
.plan__price strong { font-size: clamp(34px, 3.6vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.plan__per { font-size: 15px; color: var(--ink-soft); }
.plan .btn { margin-top: 14px; }
.pricing__note { text-align: center; color: var(--ink-soft); font-size: 15px; }
.pricing__h { margin-top: clamp(28px, 5vw, 56px); }

/* Contatti */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.contact__text { display: grid; gap: 14px; align-content: start; }
.contact__form { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); }
select.input { appearance: auto; }
textarea.input { resize: vertical; min-height: 140px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Telefono e tablet ---------- */

/* schermi medi: il cartellino scende sotto il segnaposto per non uscire dal foglio */
@media (max-width: 1140px) {
  .hero__text { max-width: 58%; }
  .place { left: 78%; top: 36%; }
  .place__card { left: 50%; top: calc(100% + 16px); width: max-content; max-width: 280px; transform: translateX(-50%); }
  @keyframes card-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } }
}

@media (max-width: 860px) {
  .hero__sheet { min-height: 0; border-radius: 22px; background: var(--paper); }
  .hero__sheet::before { display: none; }
  .hero__text { max-width: none; }
  .hero__stage { position: relative; inset: auto; height: 340px; border-top: 1px solid var(--line); background: #E4EBE8; }
  .place { left: 50%; top: 40%; width: 60px; }
  .place__pin { width: 60px; }

  .route { grid-template-columns: 1fr; --route-gap: 34px; }
  .stop:not(:last-child)::after { left: 18px; top: 20px; width: 4px; height: calc(100% + var(--route-gap)); transform-origin: center top; --line-from: scaleY(0); }
  .stop { padding-top: 0; padding-left: 64px; min-height: 40px; }
  .stop .h3 { padding-top: 6px; }

  .guests, .duo { grid-template-columns: 1fr; }
  .points, .plans, .contact { grid-template-columns: minmax(0, 1fr); }
  .plan__tag { min-height: 0; }
  /* le voci delle pagine non ci stanno più in alto: vanno dentro "Menu" */
  .nav__links .nav__page { display: none; }
  .nav__more { display: block; }
  /* area riservata: "Il tuo marchio" esce dal menù e compare come pulsante in "I tuoi eventi" (e resta a fondo pagina) */
  .nav__links .nav__brand, .nav__links .nav__acct { display: none; }
  .page__head .page__actions--narrow { display: flex; }   /* più specifica della regola di base, che nel file viene dopo */
  .guest__when { padding-left: 26px; }
}

@media (max-width: 560px) {
  /* poco spazio: chi non è entrato perde "Come funziona"; per chi è entrato "Nuovo evento" diventa un tondo con il + */
  .nav__new-text { display: none; }
  /* su telefono le tabelle di confronto si stringono per restare tutte visibili, senza scorrere di lato */
  .vs { font-size: 14px; table-layout: fixed; }
  .vs th, .vs td { padding: 12px 8px; overflow-wrap: break-word; }
  .vs th:first-child { padding-left: 14px; }
  /* con la tabella a larghezze fisse comanda la prima riga */
  .vs thead th:first-child { width: 32%; }
  .vs--plans thead th:first-child { width: 40%; }
  .vs--plans thead th { font-size: 13px; }
  .vs--plans td, .vs--plans thead th:not(:first-child) { padding-inline: 4px; }
  .intro__actions .btn { width: 100%; }
  .minis { gap: 8px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .nav__plus { display: block; width: 18px; height: 18px; }
  /* tondo da 34 px; la zona che risponde al dito resta di 44 px */
  .nav__new { position: relative; flex: none; width: 34px; min-height: 34px; padding: 0; border-radius: 50%; }
  .nav__new::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .nav__links { gap: 14px; }
  .nav__links a { white-space: nowrap; }
  .nav__logo img { height: 28px; }
  .hero__actions .btn { width: 100%; }
  .linkbar { width: 100%; }
  .linkbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .linkbar__url { font-size: 15px; text-align: center; }
  .guest__foot { flex-direction: column; align-items: flex-start; }
}

/* telefoni molto stretti */
@media (max-width: 360px) {
  .nav__logo img { height: 24px; }
  .nav__links { gap: 14px; font-size: 15px; }
}
/* da loggati, sulle pagine del sito, il pulsante "I miei eventi" è più largo di "Registrati":
   su telefono "Menu" resta con le sole tre righe */
@media (max-width: 440px) {
  .nav--member .nav__more-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav--member .nav__more summary { padding: 6px 9px; }
}
/* sotto i 380 px "Menu" resta solo con le tre righe: la parola non ci sta accanto a "Registrati" */
@media (max-width: 379px) {
  .nav__more-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__more summary { padding: 6px 9px; }
}
/* i più stretti di tutti (320 px): "Esci" resta solo a fondo pagina */
@media (max-width: 339px) {
  .nav__go-long { display: none; }
  .nav__go-short { display: inline; }
  .nav__links .nav__exit { display: none; }
}

[hidden] { display: none !important; }

/* =========================================================
   Pagine dell'applicazione
   ========================================================= */

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

.flash { display: grid; gap: 10px; padding-top: 6px; }
.wrap.flash--narrow { max-width: calc(760px + 2 * var(--gutter)); padding-top: 20px; }
.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }

.page { padding-block: clamp(28px, 5vw, 56px) clamp(64px, 9vw, 110px); }
.wrap.page--narrow { max-width: calc(680px + 2 * var(--gutter)); }
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.page__sub { margin-top: 6px; color: var(--ink-soft); }
.page__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page__actions--narrow { display: none; }   /* compare sotto gli 860 px, insieme alla sparizione della voce dal menù */
.page__back { margin-top: 24px; text-align: center; }

.btn--off,
.btn--off:hover {
  background: #DDE3E1;
  border-color: #DDE3E1;
  color: #6F7774;
  cursor: not-allowed;
}

/* ---------- Dashboard ---------- */

.quota {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
}
.quota__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.quota__track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--pin-wash); }
.quota__fill { height: 100%; border-radius: 4px; background: var(--pin); }
.quota__note { color: var(--ink-soft); font-size: 15px; }
.quota__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

.events { display: grid; gap: 12px; }
.event {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
}
.event__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.event__mark img { width: 100%; height: 100%; object-fit: cover; }
.event__body { flex: 1; min-width: 0; }
.event__title { font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.event__meta { color: var(--ink-soft); font-size: 15px; overflow-wrap: anywhere; }
.event__actions { display: flex; flex-shrink: 0; gap: 8px; }

.empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(40px, 8vw, 80px) 20px;
  border: 1.5px dashed #AEB8B5;
  border-radius: 22px;
  text-align: center;
}
.empty img { width: 44px; }
.empty p { color: var(--ink-soft); max-width: 26em; }

/* ---------- Modulo evento e registrazione ---------- */

.form--wide { gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label small, .field__label small { font-weight: 500; color: var(--ink-soft); }
.field__label { font-size: 15px; font-weight: 700; }
.field__hint { font-size: 14px; color: var(--ink-soft); }
.field-error { font-size: 14px; font-weight: 700; color: var(--error); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }

.address-row { display: flex; gap: 10px; }
.address-row .input { flex: 1; min-width: 0; }
.geocode-status { min-height: 24px; font-size: 15px; color: var(--ink-soft); }
.geocode-status[data-state="error"] { color: var(--error); font-weight: 700; }
.geocode-status[data-state="success"] { color: var(--ok); }

.map-box {
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #E4EBE8;
}

fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field[hidden] { display: none; }
fieldset.field legend { padding: 0; margin-bottom: 9px; font-size: 15px; font-weight: 700; }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches__gap { align-self: center; width: 1px; height: 30px; margin: 0 4px; background: var(--line); }
.swatches__hint { margin-top: 10px; }
.swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--line);
  cursor: pointer;
}
.swatch input, .emoji input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--ink); }
.swatch:has(input:focus-visible), .emoji:has(input:focus-visible), .choice:has(input:focus-visible), .upload:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1.5px solid #AEB8B5;
  border-radius: 14px;
  background: var(--sheet);
  font-weight: 700;
  cursor: pointer;
}
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--pin); }
.choice:has(input:checked) { border-color: var(--pin); box-shadow: 0 0 0 1.5px var(--pin); }
.choice img { width: 36px; height: 36px; margin-left: auto; border-radius: 50%; object-fit: cover; }

.emojis { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.emoji:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }

.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1.5px dashed #AEB8B5;
  border-radius: 16px;
  background: var(--sheet);
  cursor: pointer;
}
.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload__preview {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}
.upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.upload__preview img[src=""] { display: none; }
.upload__text { display: grid; gap: 2px; min-width: 0; }
.upload__text span { font-size: 14px; color: var(--ink-soft); }

/* foto nel modulo evento: un'unica lista, riordinabile trascinando (v0.5.5) */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; padding: 0; list-style: none; }
.photos__hint { margin-top: -4px; }
.photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.photo:focus { outline: none; }
.photo:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; }
.photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo.is-removed img { opacity: .25; }
.photo.is-cover { border: 2px solid var(--pin); }
.photo.is-moved { animation: photo-moved .7s ease-out; }
@keyframes photo-moved { from { box-shadow: 0 0 0 6px var(--pin-wash); } to { box-shadow: 0 0 0 0 transparent; } }

.photo__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--pin);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.photo.is-cover .photo__badge { display: block; }

.photo__grip {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(20,40,45,.3);
  cursor: grab;
  touch-action: none;
}
.photo__grip::after { content: ""; position: absolute; inset: -6px; }
.photo__grip svg { width: 20px; height: 20px; fill: currentColor; }
.can-sort .photo__grip { display: grid; }
.can-sort .photo { cursor: grab; }
.is-sorting, .is-sorting * { cursor: grabbing !important; }

.photo__tools {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.photo__btn {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20,40,45,.3);
}
.photo__btn svg { width: 18px; height: 18px; }
.photo__btn--wide { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
.photo__btn:hover { background: #fff; color: var(--pin-text); }
.photo__btn--remove:hover { color: var(--error); }
.photo.is-cover .photo__cover { display: none; }
.photo__undo { display: none; }
.photo.is-removed .photo__cover { display: none; }
.photo.is-removed .photo__btn--remove { flex: 1 1 auto; padding: 0 6px; }
.photo.is-removed .photo__btn--remove svg { display: none; }
.photo.is-removed .photo__undo { display: inline; }
.photo.is-removed .photo__btn--remove:hover { color: var(--pin-text); }

/* durante il trascinamento */
.photo.is-ghost { opacity: .35; border-style: dashed; border-color: var(--pin); }
.photo.is-dragging { opacity: .95 !important; box-shadow: 0 12px 28px rgba(20,40,45,.28); transform: rotate(-2deg); }

/* orari a quarti d'ora */
.time-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.time-pick__sep { font-weight: 700; color: var(--ink-soft); }

/* conferma di eliminazione */
.confirm { display: grid; gap: 18px; padding: 22px 24px; border: 1.5px solid var(--error); border-radius: 18px; background: var(--sheet); }
.confirm__name { font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.confirm__list { display: grid; gap: 6px; padding-left: 20px; list-style: disc; color: var(--ink-soft); }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Pagina pubblica dell'evento ---------- */

.evp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: calc(760px + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) 32px;
}
.evp__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
}
.evp__owner div { display: flex; flex-wrap: wrap; gap: 8px; }
.evp__head { display: flex; align-items: center; gap: 18px; }
.evp__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  font-size: 36px;
  line-height: 1;
}
.evp__mark img { width: 100%; height: 100%; object-fit: cover; }
.evp__org { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.evp__title {
  font-size: clamp(32px, 5.4vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
  overflow-wrap: anywhere;
}
.evp__subtitle { margin-top: 8px; max-width: 34em; font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; opacity: .86; }
.evp__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 18px; line-height: 1.4; }
.evp__facts dt { color: var(--ink-soft); }
.evp__facts dd { font-weight: 700; }
.evp__desc { max-width: 38em; font-size: 18px; overflow-wrap: anywhere; }
.evp__map {
  height: 400px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #E4EBE8;
}
.evp__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
}
.evp__where p { max-width: 30em; }
/* scelta dell'app per le indicazioni: riquadri uguali, con il nome scritto */
.dir { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.dir__title { font-size: 15px; color: var(--ink-soft); }
.dir__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.dir__list > li { display: flex; }
.dir__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.dir__opt:hover { border-color: var(--pin); color: var(--pin-text-deep); }
.dir__opt:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; }
.dir__opt svg { flex: none; width: 20px; height: 20px; }
.evp__share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }

.evp__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* striscia di foto: una sola riga che scorre in orizzontale, frecce su computer e pollice su telefono */
.strip { position: relative; }
.gal {
  --strip-h: 200px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal::-webkit-scrollbar { display: none; }
.gal > li { flex: none; scroll-snap-align: start; }
.gal__item { display: block; overflow: hidden; height: var(--strip-h); aspect-ratio: 1; border-radius: 12px; background: #E4EBE8; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gal__item:hover img { transform: scale(1.04); }
.gal__item:focus-visible { outline: 3px solid var(--pin); outline-offset: -3px; }
.strip__btn {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(52,53,56,.18);
  cursor: pointer;
  transform: translateY(-50%);
}
.strip__btn[hidden] { display: none; }
.strip__btn:hover { background: var(--pin); border-color: var(--pin); color: #fff; }
.strip__btn:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; }
.strip__btn svg { width: 22px; height: 22px; }
.strip__btn--prev { left: -14px; }
.strip__btn--next { right: -14px; }
/* dove si usa il dito le frecce non servono */
@media (hover: none), (pointer: coarse) { .strip__btn { display: none; } }

/* foto a tutto schermo */
.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(24,26,28,.96);
  color: #fff;
}
.lb::backdrop { background: rgba(24,26,28,.96); }
.lb__stage { display: grid; place-items: center; width: 100%; height: 100%; }
/* misure esplicite: la foto resta sempre intera, con lo spazio per i pulsanti ai lati e il contatore sotto */
.lb__img { display: block; width: auto; height: auto; max-width: calc(100vw - 160px); max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); border-radius: 6px; }
.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
}
.lb__btn:hover { background: rgba(255,255,255,.28); }
.lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb__btn svg { width: 24px; height: 24px; }
.lb__close { top: 12px; right: 12px; }
.lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 15px; font-weight: 700; }

.copyrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet);
}
.copyrow__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }

.embed summary { font-weight: 700; cursor: pointer; }
.embed__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; margin-top: 12px; }
.embed__code {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}

.made { padding: 8px 20px 36px; text-align: center; font-size: 14px; }
.made a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-decoration: none; }
.made img { height: 16px; width: auto; }

/* ---------- Colori del cliente sulla pagina dell'evento ----------
   La classe "th" e i colori (--brand, --accent, --band-bg, --tint-bg e i rispettivi testi) arrivano dall'identità
   salvata in "Il tuo marchio" (Brand_model::theme). Senza quella classe la pagina resta com'era. */
html.th { --pin: var(--accent); --pin-deep: var(--accent-deep); --pin-text: var(--accent-text, var(--accent)); --pin-text-deep: var(--accent-text-deep, var(--accent-deep)); }   /* v0.6.9: testi colorati sempre leggibili */
html.th body { background: var(--tint-bg); }
html.th .btn:not(.btn--light):not(.btn--quiet),
html.th .btn:not(.btn--light):not(.btn--quiet):hover,
html.th .strip__btn:hover { color: var(--accent-ink); }
html.th .dir__opt:hover { color: var(--ink); }
html.th .evp__mark { border: 3px solid #fff; box-shadow: 0 2px 10px rgba(20,40,45,.2); }
/* fascia in alto, da bordo a bordo: chiara (colore attenuato, il logo risalta) oppure piena */
html.th-chiara .evp:not(.evp--owner), html.th-piena .evp:not(.evp--owner) { padding-top: 0; }
html.th-chiara .evp__head, html.th-piena .evp__head { padding-block: clamp(24px, 4.5vw, 44px); clip-path: inset(0 -100vmax); }
html.th-chiara .evp__head { background: var(--band-bg); color: var(--band-ink); box-shadow: 0 0 0 100vmax var(--band-bg); }
html.th-chiara .evp__org { color: var(--band-ink); }
html.th-piena .evp__head { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 100vmax var(--brand); }
html.th-piena .evp__org { color: var(--brand-ink); }

/* ---------- Il tuo marchio ---------- */
.wrap.page--wide { max-width: calc(1480px + 2 * var(--gutter)); }
.brand { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.brand__form { display: grid; gap: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); }
.brand__logo { display: flex; align-items: center; gap: 14px; }
.brand__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: repeating-conic-gradient(#EEF1F0 0 25%, #fff 0 50%) 0 0 / 12px 12px;   /* scacchi: fa vedere le parti trasparenti */
}
.brand__thumb img { width: 100%; height: 100%; object-fit: contain; }
.brand__pick { position: relative; cursor: pointer; }
.brand__pick:has(input:focus-visible), .brand__style:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.brand__found { display: flex; flex-wrap: wrap; gap: 8px; }
.brand__sw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 12px 4px 6px;
  border: 1.5px solid #AEB8B5;
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}
.brand__sw i { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.brand__sw:hover { border-color: var(--ink); }
.brand__color { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.brand__color input[type="color"] { flex: none; width: 50px; height: 50px; padding: 3px; border: 1.5px solid #AEB8B5; border-radius: 12px; background: var(--sheet); cursor: pointer; }
.input.brand__hex { width: 8.2em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; text-transform: uppercase; }
.brand__styles { display: grid; gap: 8px; }
.brand__style { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid #AEB8B5; border-radius: 14px; background: var(--sheet); cursor: pointer; }
.brand__style input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pin); }
.brand__style span { display: grid; gap: 2px; }
.brand__style strong { font-size: 16px; font-weight: 700; }
.brand__style small { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.brand__style:has(input:checked) { border-color: var(--pin); box-shadow: 0 0 0 1.5px var(--pin); }
.brand__read { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 14px; line-height: 1.45; }
.brand__read:empty { display: none; }
.brand__read b { font-weight: 800; }
.brand__read .is-low { color: var(--error); font-weight: 700; }
/* "Salva" resta sempre a portata di mano mentre si scorre il modulo */
.brand__save { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; justify-items: center; margin: 0 -22px -22px; padding: 14px 22px 18px; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; background: var(--sheet); font-size: 15px; }
.brand__stage { position: sticky; top: 16px; display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 24px; align-items: start; }
.brand__cap { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.brand__cap small { font-weight: 500; }
.brand__shot { overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 20px 50px -30px rgba(20,40,45,.5); }
.brand__shot--tel { width: 390px; max-width: 100%; height: min(760px, calc(100vh - 110px)); min-height: 480px; border-radius: 28px; }
.brand__shot--tel iframe { display: block; width: 100%; height: 100%; border: 0; }
.brand__shot--pc { position: relative; height: min(760px, calc(100vh - 110px)); min-height: 480px; border-radius: 14px; }
.brand__shot--pc iframe { position: absolute; left: 0; top: 0; width: 1280px; border: 0; transform-origin: 0 0; }
@media (max-width: 1320px) {
  .brand__stage { grid-template-columns: minmax(0, 1fr); }
  .brand__dev--pc { display: none; }
  .brand__shot--tel { margin-inline: auto; }
}
@media (max-width: 860px) {
  .brand { grid-template-columns: minmax(0, 1fr); }
  .brand__stage { position: static; }
  .brand__save { position: static; }
}

/* segnaposto sulle mappe vere (Leaflet): goccia con il logo nella testa, punta sull'indirizzo (v0.5.7) */
.mk-icon { background: none; border: 0; }
.mk { position: relative; width: 48px; height: 58px; }
/* Leaflet dà z-index 200 a ogni svg dentro la mappa: senza questa regola la goccia coprirebbe il logo */
.mk .mk__drop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(20,40,45,.38));
}
.mk__drop path { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.mk--light .mk__drop path { stroke: #5C6165; stroke-width: 2.5; }
.mk-logo {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 7px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
}
.mk-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk__glyph {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
}
.leaflet-marker-draggable { cursor: grab; }
.alert a { color: inherit; font-weight: 700; }

@media (max-width: 860px) {
  .choices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .address-row { flex-direction: column; }
  .event { flex-wrap: wrap; }
  .event__actions { width: 100%; flex-wrap: wrap; }   /* v0.7.2: quattro pulsanti, due per riga */
  .event__actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding-inline: 8px; }
  .page__head .btn { width: 100%; }
  .page__actions { width: 100%; }
  .evp__head { align-items: flex-start; }
  .evp__mark { width: 60px; height: 60px; font-size: 28px; }
  .evp__map { height: 320px; border-radius: 16px; }
  .evp__where .btn { width: 100%; }
  .dir__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .evp__facts { grid-template-columns: 1fr; gap: 0; }
  .evp__facts dd { margin-bottom: 8px; }
  /* su telefono la striscia arriva fino al bordo dello schermo: la foto tagliata fa capire che continua */
  .gal { --strip-h: 168px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .lb__img { max-width: 100vw; max-height: calc(100vh - 144px); max-height: calc(100dvh - 144px); border-radius: 0; }
  .lb__prev, .lb__next { top: auto; bottom: 8px; transform: none; }
  .confirm__actions .btn { width: 100%; }
}

/* ---------- Testo formattato e agenda (v0.5.9) ---------- */

/* testo formattato nella pagina pubblica (descrizione e voci dell'agenda) */
.rt-out > * + * { margin-top: .6em; }
.rt-out h3 { font-size: 1.12em; font-weight: 800; line-height: 1.3; }
.rt-out * + h3 { margin-top: 1em; }
.rt-out ul, .rt-out ol { padding-left: 1.3em; }
.rt-out ul, .rt__area ul, .agenda-row__text ul { list-style: disc; }
.rt-out ol, .rt__area ol, .agenda-row__text ol { list-style: decimal; }
.rt-out li + li { margin-top: .25em; }
.rt-out ul li::marker { color: var(--pin-text); }
.rt-out ol li::marker { color: var(--pin-text-deep); font-weight: 700; }
.rt-out strong { font-weight: 800; }
div.evp__desc { display: grid; gap: 0; }

/* editor nel modulo */
.rt { display: grid; gap: 8px; }
.rt__bar { display: flex; flex-wrap: wrap; gap: 6px; }
.rt__btn {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.rt__btn svg { width: 20px; height: 20px; fill: currentColor; }
.rt__btn em { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; }
.rt__h { font-size: 14px; font-weight: 700; }
.rt__btn:hover:not(:disabled) { border-color: var(--pin); color: var(--pin-text); }
.rt__btn[aria-pressed="true"] { border-color: var(--pin); background: var(--pin-wash); color: var(--pin-text-deep); }
.rt__btn:disabled { opacity: .45; cursor: default; }
.rt__btn:focus-visible { outline: 3px solid var(--pin); outline-offset: 1px; }
.rt__area { min-height: 130px; line-height: 1.5; overflow-wrap: anywhere; cursor: text; }
.rt__area:focus { outline: 3px solid var(--pin); outline-offset: 1px; border-color: var(--pin); }
.rt__area > * + *, .agenda-row__text > * + * { margin-top: .5em; }
.rt__area ul, .rt__area ol, .agenda-row__text ul, .agenda-row__text ol { padding-left: 1.3em; }
.rt__area h3 { font-size: 1.1em; font-weight: 800; }
.rt__area strong, .agenda-row__text strong, .rt__area b, .agenda-row__text b { font-weight: 800; }
.rt__area.is-empty::before, .agenda-row__text.is-empty::before {
  content: attr(data-placeholder);
  position: absolute;
  color: #7C8487;
  pointer-events: none;
}
.rt__area, .agenda-row__text { position: relative; }
.rt__area.is-empty::before { top: 12px; left: 15px; right: 15px; }
.agenda-row__text.is-empty::before { top: 10px; left: 13px; right: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* agenda nel modulo */
.agenda-edit { gap: 10px; }
.rt--shared .rt__bar { position: sticky; top: 8px; z-index: 3; padding: 6px; margin: -6px; border-radius: 12px; background: var(--paper); }
.agenda-rows { display: grid; gap: 8px; padding: 0; list-style: none; }
.agenda-row {
  display: grid;
  grid-template-columns: 30px 9.5em minmax(0, 1fr) 40px;
  align-items: start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet);
}
.agenda-row--day { grid-template-columns: 30px minmax(0, 1fr) 40px; background: var(--pin-wash); }
.agenda-row .input { min-height: 44px; padding: 9px 12px; }
.agenda-row__time { font-variant-numeric: tabular-nums; }
.agenda-row__day { font-weight: 700; }
.agenda-row__text { min-height: 44px; line-height: 1.45; overflow-wrap: anywhere; cursor: text; }
.agenda-row__text:focus { outline: 3px solid var(--pin); outline-offset: 1px; border-color: var(--pin); }
.agenda-row__grip {
  position: relative;
  display: none;
  place-items: center;
  height: 44px;
  color: var(--ink-soft);
  cursor: grab;
  touch-action: none;
}
.agenda-row__grip::after { content: ""; position: absolute; inset: -6px -4px; }
.agenda-row__grip svg { width: 20px; height: 20px; fill: currentColor; }
.can-sort .agenda-row__grip { display: grid; }
.agenda-edit:not(.can-sort) .agenda-row { grid-template-columns: 9.5em minmax(0, 1fr) 40px; }
.agenda-edit:not(.can-sort) .agenda-row--day { grid-template-columns: minmax(0, 1fr) 40px; }
.agenda-row__remove {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.agenda-row__remove svg { width: 20px; height: 20px; }
.agenda-row__remove:hover { background: var(--error-bg); color: var(--error); }
.agenda-row.is-check { border-color: #C77700; box-shadow: 0 0 0 2px #F6D9A8; }
.agenda-row.is-bad .agenda-row__time { border-color: var(--error); background: var(--error-bg); }
.agenda-row.is-ghost { opacity: .35; border-style: dashed; border-color: var(--pin); }
.agenda-row.is-dragging { opacity: .95 !important; box-shadow: 0 12px 28px rgba(20,40,45,.28); }
.agenda-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-edit__msg:empty { display: none; }
.agenda-edit__msg { font-size: 15px; color: var(--ink-soft); }
.agenda-paste { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: var(--sheet); }
.agenda-paste label { font-size: 15px; font-weight: 700; }
.agenda-paste textarea { min-height: 170px; }

/* agenda nella pagina pubblica: tabella con i colori del marchio */
.evp__agenda { display: grid; gap: 12px; }
.agenda-days { display: grid; gap: clamp(18px, 3vw, 28px); }
.agenda { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); font-size: 16px; }
.agenda th, .agenda td { padding: 9px 16px; text-align: left; vertical-align: top; }
.agenda__item + .agenda__item > * { border-top: 1px solid var(--line); }
.agenda__text.rt-out > * + * { margin-top: .35em; }
.agenda__time {
  width: 8.5em;
  white-space: nowrap;
  color: var(--pin-text-deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-right: 3px solid var(--pin);
}
.agenda__to { color: inherit; font-weight: inherit; }   /* v0.13.2: l'ora di fine come quella di inizio */
.agenda__dash { margin: 0 .25em; color: var(--ink-soft); font-weight: 600; }
.agenda__text { line-height: 1.5; overflow-wrap: anywhere; }
.agenda__day th {
  padding-block: 10px;
  background: var(--band-bg, var(--pin-wash));
  color: var(--band-ink, var(--ink));
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
html.th-piena .agenda__day th { background: var(--brand); color: var(--brand-ink); }

@media (max-width: 560px) {
  .agenda-row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .agenda-row--item .agenda-row__text { grid-column: 1 / -1; grid-row: 2; }
  .agenda-row--item .agenda-row__remove { grid-column: -2; grid-row: 1; }
  .agenda-edit:not(.can-sort) .agenda-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .agenda { font-size: 15.5px; }
  .agenda, .agenda thead, .agenda tbody, .agenda tr, .agenda th, .agenda td { display: block; }
  .agenda th, .agenda td { padding: 9px 14px; }
  .agenda .agenda__time { width: auto; padding-bottom: 0; border-right: 0; }
  .agenda .agenda__item .agenda__text { padding-top: 2px; border-top: 0; }
  .agenda__item .agenda__time:empty { display: none; }
}

/* ---------- Logo completo (v0.5.11) ---------- */
.evp__brandlogo { display: none; }
.evp__head--full { display: grid; justify-items: start; gap: clamp(14px, 2.4vw, 22px); }
.evp__head--full .evp__brandlogo { display: inline-flex; align-items: center; max-width: 100%; }
.evp__head--full .evp__mark, .evp__head--full .evp__org { display: none; }
.evp__brandlogo img { display: block; width: auto; height: auto; max-width: min(100%, 420px); max-height: 88px; object-fit: contain; }
/* targhetta: logo con fondo pieno sempre; logo scuro su fascia piena scura; logo chiaro su fondi chiari */
.evp__brandlogo--opaque,
html.th-piena.th-brand-dark .evp__brandlogo--dark,
.evp__brandlogo--light {
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20,40,45,.14);
}
.evp__brandlogo--opaque, html.th-piena.th-brand-dark .evp__brandlogo--dark { background: #fff; }
.evp__brandlogo--light { background: var(--ink); }
html.th-piena.th-brand-dark .evp__brandlogo--light { padding: 0; background: none; box-shadow: none; }

/* "Il tuo marchio": riquadro del logo completo */
.brand__full { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.brand__fullthumb {
  display: grid;
  place-items: center;
  min-width: 160px;
  max-width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: repeating-conic-gradient(#EEF2F1 0% 25%, #fff 0% 50%) 0 0 / 14px 14px;
}
.brand__fullthumb img { display: block; max-width: 240px; max-height: 56px; width: auto; height: auto; }
.brand__fullnone { font-size: 14px; color: var(--ink-soft); }
.brand__fullremove { font-size: 15px; }

@media (max-width: 560px) {
  .evp__brandlogo img { max-width: min(100%, 280px); max-height: 56px; }
}

/* ---------- Esempi (v0.5.13) ---------- */
.intro--short { padding-bottom: clamp(28px, 4vw, 48px); }
.esempi__note { font-size: 15px; color: var(--ink-soft); }
.esempi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(18px, 2.6vw, 28px); padding-bottom: clamp(56px, 8vw, 104px); }
.ecard {
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(20,40,45,.05);
}
.ecard__head { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 18px 20px; background: var(--paper); }
.ecard--chiara .ecard__head { background: var(--band-bg); color: var(--band-ink); }
.ecard--piena .ecard__head  { background: var(--brand); color: var(--brand-ink); }
.ecard--base .ecard__head   { background: var(--tint-bg); }
.ecard__mark { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; font-size: 24px; box-shadow: 0 2px 8px rgba(20,40,45,.18); }
.ecard__mark img { width: 100%; height: 100%; object-fit: cover; }
.ecard__org { font-weight: 800; font-size: 16px; }
.ecard__logo { display: inline-flex; align-items: center; max-width: 100%; }
.ecard__logo img { display: block; width: auto; height: auto; max-width: min(100%, 260px); max-height: 56px; object-fit: contain; }
.ecard__logo.is-plate, .ecard__logo.is-plate-dark { padding: 8px 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,40,45,.14); }
.ecard__logo.is-plate { background: #fff; }
.ecard__logo.is-plate-dark { background: var(--ink); }
.ecard__cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #E4EBE8; }
.ecard__cover img, .ecard__cover > svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ecard:hover .ecard__cover img, .ecard:hover .ecard__cover > svg { transform: scale(1.03); }
.ecard__pin { position: absolute; left: 50%; top: 50%; width: 40px; height: 48px; margin: -46px 0 0 -20px; filter: drop-shadow(0 3px 5px rgba(20,40,45,.38)); }
.ecard__cover img ~ .ecard__pin { display: none; }
.ecard__pin svg { width: 100%; height: 100%; }
.ecard__pin path { fill: var(--pin-color); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.ecard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 22px; }
.ecard__title { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.ecard__title a { color: inherit; text-decoration: none; }
.ecard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ecard__sub { color: var(--ink-soft); line-height: 1.4; }
.ecard__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-bottom: 8px; font-size: 15px; }
.ecard__facts dt { color: var(--ink-soft); }
.ecard__facts dd { font-weight: 700; overflow-wrap: anywhere; }
.ecard__btn { margin-top: auto; background: var(--accent, var(--pin)); border-color: var(--accent, var(--pin)); color: var(--accent-ink, #fff); }
.ecard__btn:hover { background: var(--accent-deep, var(--pin-deep)); border-color: var(--accent-deep, var(--pin-deep)); color: var(--accent-ink, #fff); }
.esempi__end { display: grid; gap: 16px; justify-items: start; }
@media (prefers-reduced-motion: reduce) { .ecard__cover img, .ecard__cover > svg { transition: none; } }

/* ---------- Home rivista (v0.5.14) ---------- */
.hero__free { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.band__head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.band__link { font-weight: 700; color: var(--pin-text); }
.band .esempi { padding-bottom: 0; }
.band .esempi + .esempi__note { margin-top: 18px; }
.guests__vs { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--pin); color: var(--ink-soft); line-height: 1.5; }

/* ---------- Il tuo account (v0.5.15) ---------- */
.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.account__box > * { min-width: 0; }
.account__box { display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); }
.account__box--danger { border: 1.5px solid var(--error); }
.account__box--danger .h3 { color: var(--error); }
.account .form { gap: 16px; }
.account .btn { justify-self: start; }

/* ---------- Come arrivare (v0.5.16) ---------- */
/* punti sulla mappa: tondo con una lettera, nei colori del testo */
.mkp-icon { background: none; border: 0; }
.mkp { display: grid; place-items: center; width: 30px; height: 30px; border: 2.5px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(20,40,45,.35); }
.mkp__small { font-size: 10.5px; letter-spacing: -.02em; }

/* modulo */
.arrive-edit { gap: 10px; }
.arrive-rows { display: grid; gap: 8px; padding: 0; list-style: none; }
.arrive-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; align-items: start; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.arrive-edit:not(.can-sort) .arrive-row { grid-template-columns: minmax(0, 1fr) 40px; }
.arrive-edit.can-sort .arrive-row__grip { display: grid; }
.arrive-row__body { display: grid; gap: 8px; min-width: 0; }
.arrive-row__line { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 8px; }
.arrive-row__line:nth-child(2) { grid-template-columns: minmax(0, 1fr) auto; }
.arrive-row .input { min-height: 44px; padding: 9px 12px; }
.arrive-row__name { font-weight: 700; }
.arrive-row__state { font-size: 14px; color: var(--ink-soft); }
.arrive-row__state:empty { display: none; }
.arrive-row__state[data-state="ok"] { color: #1E7A3C; }
.arrive-row__state[data-state="warn"] { color: #9A5B00; }
.arrive-row__state[data-state="error"] { color: var(--error); }

/* pagina pubblica */
.evp__arrive { display: grid; gap: 14px; }
.arrive { display: grid; gap: 8px; }
.arrive__title { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.arrive__list { display: grid; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); overflow: hidden; }
.arrive__item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; }
.arrive__item + .arrive__item { border-top: 1px solid var(--line); }
.arrive__badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; }
.arrive__badge--small { font-size: 10.5px; }
.arrive__text { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.arrive__addr, .arrive__note { font-size: 15px; color: var(--ink-soft); }
.arrive__go { font-size: 15px; font-weight: 700; color: var(--pin-text); white-space: nowrap; }
.arrive__extra { color: var(--ink-soft); }

@media (max-width: 560px) {
  .arrive-row__line, .arrive-row__line:nth-child(2) { grid-template-columns: minmax(0, 1fr); }
  .arrive-row__find { justify-self: start; }
  .arrive__item { grid-template-columns: 30px minmax(0, 1fr); }
  .arrive__go { grid-column: 2; }
}

/* ---------- v0.5.17: occhio nei campi password ---------- */
.pw { position: relative; display: block; }
.pw .input { padding-right: 52px; }
.pw__eye { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; transform: translateY(-50%); }
.pw__eye svg { width: 22px; height: 22px; }
.pw__eye:hover { color: var(--ink); }
.pw__eye:focus-visible { outline: 3px solid var(--pin); outline-offset: -2px; }
.pw__eye[aria-pressed="true"] { color: var(--pin-text); }
/* Edge mostra già un suo occhio: lo togliamo per non averne due */
.pw input::-ms-reveal, .pw input::-ms-clear { display: none; }

/* ---------- v0.5.17: parcheggi e fermate trovati da soli ---------- */
.arrive-auto { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.arrive-auto__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.arrive-auto__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1.5px solid #AEB8B5; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; user-select: none; }
.arrive-auto__toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--pin); }
.arrive-auto__toggle:has(input:checked) { border-color: var(--pin); background: rgba(0,122,133,.07); }
.arrive-auto__state { font-size: 14px; color: var(--ink-soft); }
.arrive-auto__state:empty { display: none; }
.arrive-auto__state[data-state="ok"] { color: #1E7A3C; }
.arrive-auto__state[data-state="error"] { color: var(--error); }
.arrive-auto__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.arrive-auto__actions .btn[hidden] { display: none; }
.arrive-edit__manual { margin-top: 4px; }
.mkp-pop { display: grid; gap: 2px; min-width: 150px; max-width: 230px; font-size: 14px; line-height: 1.35; }
.mkp-pop strong { font-size: 15px; }
.mkp-pop__kind { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }   /* v0.7.7 */
.mkp-pop__lines { font-weight: 700; color: var(--pin-text); }
.mkp-pop__addr, .mkp-pop__note { color: var(--ink-soft); }
.mkp-pop__go { margin-top: 4px; font-weight: 700; color: var(--pin-text); }
.mkp-pop__off { justify-self: start; margin-top: 6px; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--error); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mkp-tip { font-size: 13px; font-weight: 700; }

/* ---------- v0.5.18: colori dei punti di "Come arrivare" ---------- */
.mkp--car, .arrive__badge--car { background: #1565C0; }
.mkp--rail, .arrive__badge--rail { background: #C62828; }
.mkp--local, .arrive__badge--local { background: #FFA94D; color: #111; }
.mkp--local { border: 2px solid #9A3412; }
.arrive__badge--local { box-shadow: inset 0 0 0 2px #9A3412; }
.mkp--other, .arrive__badge--other { background: var(--ink); }
.mkp { transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .mkp { transition: none; } }
/* l'icona disegnata può essere scostata: si tocca lei, non il riquadro rimasto al posto originale */
.leaflet-marker-icon.mkp-icon.leaflet-interactive { pointer-events: none; }
.leaflet-marker-icon.mkp-icon.leaflet-interactive .mkp { pointer-events: auto; cursor: pointer; }

/* ---------- v0.5.19: ricerca indirizzi dal server ---------- */
.geo-credit { margin: 0; font-size: 13px; text-align: right; }
.geo-credit a { color: var(--ink-soft); }
.geo-check { display: grid; gap: 4px 0; margin: 20px 0; }
.geo-check dt { margin-top: 12px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.geo-check dd { margin: 0; font-size: 17px; }
.geo-check dd[data-ok="1"] { color: #1E7A3C; }
.geo-check dd[data-ok="0"] { color: var(--error); }
.geo-check small { display: block; color: var(--ink-soft); }

/* ---------- v0.6.0: documenti legali ---------- */
.legal { padding-bottom: 48px; }
.legal__kicker { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pin-text); }
.legal__date { margin: 6px 0 22px; font-size: 15px; color: var(--ink-soft); }
.legal h2 { margin: 30px 0 8px; font-size: 20px; line-height: 1.3; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--pin-text); }
.legal code { font-size: 15px; padding: 1px 6px; border-radius: 6px; background: rgba(52,53,56,.07); overflow-wrap: anywhere; }
.legal__table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.legal__table th, .legal__table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__table th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.legal__table tbody tr:nth-child(odd) { background: rgba(255,255,255,.6); }
.legal__links { margin-top: 32px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table thead { display: none; }
  .legal__table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .legal__table td { padding: 2px 4px; border: 0; }
  .legal__table td:first-child { font-weight: 700; }
}
.legal-ok { display: grid; gap: 10px; }
.check--top { align-items: flex-start; font-size: 15px; line-height: 1.45; }
.check--top input { flex: none; margin-top: 1px; }
.check--top a { color: var(--pin-text); }
.legal-note a { color: var(--pin-text); }
.made__legal { margin: -6px 0 22px; text-align: center; font-size: 12px; }
.made__legal a { color: inherit; opacity: .7; }
.ended { padding-top: 40px; padding-bottom: 64px; }
.ended__cta { display: grid; gap: 12px; justify-items: start; margin-top: 26px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
.ended__more { color: var(--pin-text); font-weight: 700; }

/* ---------- v0.6.1: piè di pagina a colonne ---------- */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px 32px;
  margin-top: 24px;
  padding-block: 40px 28px;
  border-top: 1px solid var(--line);
}
.foot__brand { display: grid; gap: 10px; justify-items: start; }
.foot__claim { margin: 0; max-width: 18em; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.foot__col .foot__links { display: grid; gap: 8px; }
.foot__col .foot__links a { padding-block: 2px; }
.foot__bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.foot__owner { margin: 0; color: var(--ink-soft); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot__legal a { color: var(--ink-soft); text-decoration: none; }
.foot__legal a:hover, .foot__col .foot__links a:hover { color: var(--pin-text); }
@media (max-width: 640px) {
  .foot { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-block: 32px 24px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ---------- v0.6.1: il tuo piano e durata degli eventi ---------- */
.myplan { display: grid; gap: 10px; }
.myplan__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.myplan__label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.myplan__name { font-size: 20px; color: var(--pin-text); }
.myplan__link { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--pin-text); }
.myplan__lines { display: grid; gap: 4px; margin: 0; padding-left: 20px; list-style: disc; font-size: 16px; line-height: 1.45; }
.myplan__legal { margin: 0; font-size: 14px; color: var(--ink-soft); }
.myplan__legal a { color: var(--pin-text); }
.myplan--account .myplan__head .h3 { margin: 0; }
.event__expiry { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.event__expiry a { color: var(--pin-text); font-weight: 700; }
.event__expiry.is-soon { padding: 4px 10px; border-radius: 8px; background: #FFF1E0; color: #8A4300; }
.event__expiry.is-soon strong { color: #8A4300; }
@media (max-width: 560px) { .myplan__link { margin-left: 0; } }

/* ---------- v0.6.2: fascia turchese e piè di pagina sulla mappa ---------- */
/* fascia: il turchese pieno domina, la mappa si intuisce appena */
.closing { background: var(--pin) url(../img/mappa-turchese.svg) center / cover no-repeat; }
.closing .h2 { max-width: none; }
@media (min-width: 1000px) { .closing .h2 { white-space: nowrap; } }

/* piè di pagina: a tutta larghezza, mappa quasi bianca, niente linee */
.foot { display: block; margin-top: 0; padding: 0; border-top: 0; background: var(--paper) url(../img/mappa-chiara.svg) center / cover no-repeat; }
.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px 32px;
  padding-block: 48px 26px;
  color: var(--ink-soft);
  font-size: 15px;
}
.foot .foot__logo { width: auto; height: 44px; }
.foot__brand { gap: 12px; }
.foot__claim { font-size: 14px; }
.foot__col { gap: 8px; }
.foot__col .foot__links { gap: 3px; }
.foot__col .foot__links a { padding-block: 0; line-height: 1.5; }
.foot__bar { border-top: 0; padding-top: 10px; }
@media (max-width: 640px) {
  .foot__in { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-block: 36px 22px; }
  .foot .foot__logo { height: 38px; }
  /* sul telefono le voci restano comode da toccare col dito */
  .foot__col .foot__links { gap: 0; }
  .foot__col .foot__links a { display: block; padding-block: 8px; }
}

/* ---------- v0.6.3: una sola mappa, continua dalla fascia turchese al piè di pagina ----------
   Stessa immagine alla stessa scala (2400 px di larghezza, 1440 di altezza) e centrata: la fascia
   ne mostra la parte che finisce a 560 px dall'alto, il piè di pagina riparte da lì.
   Sopra, un velo di colore: turchese al 94% nella fascia, carta al 75% nel piè di pagina. */
.closing {
  background:
    linear-gradient(rgba(0,122,133,.94), rgba(0,122,133,.94)),
    url(../img/mappa-fondo.svg) center bottom -880px / 2400px auto no-repeat,
    var(--pin);
}
.foot {
  background:
    linear-gradient(rgba(242,245,244,.75), rgba(242,245,244,.75)),
    url(../img/mappa-fondo.svg) center top -560px / 2400px auto no-repeat,
    var(--paper);
}
/* logo largo quanto la riga del claim */
.foot__brand { display: grid; width: max-content; max-width: 100%; justify-items: stretch; }
.foot .foot__logo { width: 0; min-width: 100%; height: auto; }   /* non allarga il riquadro: lo decide il claim */
.foot__claim { white-space: nowrap; max-width: none; }
@media (max-width: 640px) { .foot .foot__logo { height: auto; } }

/* ---------- v0.6.5: fascia turchese nel piè di pagina ---------- */
.closing--foot { margin-top: clamp(40px, 6vw, 72px); }
.closing--quiet .closing__in { justify-content: flex-start; }

/* ---------- v0.6.6: mappa da incorporare (iframe) ---------- */
html:has(.emb-body), .emb-body { height: 100%; }
.emb-body { margin: 0; background: var(--paper); }
.emb { position: relative; height: 100vh; min-height: 300px; overflow: hidden; }
.emb__map { position: absolute; inset: 0; }
.emb__card {
  position: absolute; left: 12px; bottom: 12px; z-index: 500;
  width: min(380px, calc(100% - 24px));
  display: grid; gap: 12px; padding: 14px 16px;
  border-top: 4px solid var(--brand, var(--pin)); border-radius: 14px;
  background: #fff; box-shadow: 0 10px 30px -12px rgba(20, 40, 45, .45);
}
.emb__top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.emb__mark { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; font-size: 22px; }
.emb__mark img { width: 100%; height: 100%; object-fit: cover; }
.emb__txt { display: grid; gap: 2px; min-width: 0; }
.emb__org { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.emb__title { margin: 0; font-size: 18px; line-height: 1.25; }
.emb__title a { color: var(--ink); text-decoration: none; }
.emb__title a:hover { text-decoration: underline; }
.emb__when { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.emb__addr { margin: 0; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.emb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.emb__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--accent, var(--pin)); color: var(--accent-ink, #fff); font-size: 15px; font-weight: 700; text-decoration: none; }
/* v0.6.8: "Apri la pagina" è un pulsante come "Indicazioni" (classe emb__btn) */
.emb__made { margin-left: auto; font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.emb--off { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: var(--ink-soft); }
.emb--off a { color: var(--pin-text); }
@media (max-width: 560px) {
  .emb__card { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 12px 14px; gap: 10px; }
  .emb__title { font-size: 16px; }
}
/* scelta dell'altezza nel riquadro "Incorpora nel tuo sito" */
.embed__hint { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.embed__sizes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; font-size: 15px; }
.embed__size { display: inline-flex; align-items: center; gap: 6px; }
.embed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* v0.6.8: "Guarda l'anteprima" è un pulsante come "Copia link" (classi btn btn--small) */
/* v0.6.7: anteprima dell'embed in pagina e immagine per la newsletter */
.embed__frame { justify-self: stretch; width: 100%; }
.embed__frame iframe { display: block; width: 100%; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.nl__shot { justify-self: stretch; max-width: 600px; }
.nl__shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
/* v0.6.9: messaggio di stato in un riquadro, testo sempre scuro (mai nel colore del marchio) */
.nl__state { display: flex; align-items: center; gap: 10px; justify-self: stretch; max-width: 600px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; }
.nl__state:empty { display: none; }
.nl__state::before { content: ""; flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; }
.nl__state[data-state="loading"]::before { border: 3px solid var(--line); border-top-color: var(--ink); animation: evnt-spin .8s linear infinite; }
.nl__state[data-state="ok"]::before { content: "\2713"; display: grid; place-items: center; background: var(--accent, var(--pin)); color: var(--accent-ink, #fff); font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.nl__state[data-state="warn"] { border-color: #F2C98A; background: #FFF4E5; color: #7A4100; }
.nl__state[data-state="warn"]::before { content: "!"; display: grid; place-items: center; background: #7A4100; color: #fff; font-weight: 800; font-size: 14px; }
.nl__state[data-state="error"] { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.nl__state[data-state="error"]::before { content: "!"; display: grid; place-items: center; background: var(--error); color: #fff; font-weight: 800; font-size: 14px; }
/* pulsante e immagine mentre si crea l'immagine */
.spin { display: inline-block; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: evnt-spin .8s linear infinite; }
#nl-make:disabled { cursor: progress; opacity: 1; }
.nl__shot { position: relative; }
.nl__shot img { transition: opacity .2s; }
.nl__shot.is-busy img { opacity: .35; }
.nl__shot.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; box-sizing: border-box; border: 4px solid rgba(255,255,255,.9); border-top-color: var(--ink); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.6); animation: evnt-spin .8s linear infinite; }
@keyframes evnt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin, .nl__shot.is-busy::after, .nl__state[data-state="loading"]::before { animation-duration: 2.4s; } }
.nl__old { margin: 0; padding: 10px 14px; border-radius: 10px; background: #FFF4E5; color: #7A4100; font-size: 15px; }
.nl__credit { margin: 0; font-size: 13px; color: var(--ink-soft); }
/* v0.7.0: statistiche dell'evento (solo per chi l'ha creato). Testi sempre nei colori del testo, mai nel colore del marchio. */
.st__body { justify-items: stretch; }
.st__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st__tile { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.st__tile strong { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.st__tile span { font-size: 14px; color: var(--ink-soft); }
.st__chart { margin: 4px 0 0; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.st__chart figcaption { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.st__bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 110px; border-bottom: 1px solid var(--line); }
.st__bar { position: relative; flex: 1 1 0; min-width: 0; height: max(var(--h), 2px); border-radius: 4px 4px 0 0; background: var(--pin-text); outline: none; }
.st__bar.is-zero { background: var(--line); }
.st__bar::before { content: ""; position: absolute; inset: -110px -1px 0; }   /* area di tocco alta quanto il grafico */
.st__bar:hover, .st__bar:focus-visible { background: var(--pin-text-deep); }
.st__bar:hover::after, .st__bar:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 5px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.st__bar:first-child:hover::after, .st__bar:first-child:focus-visible::after { left: 0; transform: none; }
.st__bar:last-child:hover::after, .st__bar:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.st__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.st__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.st__h { margin: 6px 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.st__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.st__list li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.st__list--hosts li { grid-template-columns: minmax(0, 1fr) auto; }
.st__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.st__track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.st__track span { display: block; height: 100%; border-radius: 4px; background: var(--pin-text); }
.st__num { min-width: 2.5em; text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.st__note { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.event__views a { font-weight: 700; }
@media (max-width: 560px) {
  .st__tiles { grid-template-columns: 1fr; }
  .st__tile { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
  .st__tile strong { font-size: 24px; }
  .st__cols { grid-template-columns: 1fr; }
  .st__list li { grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr) auto; }
}
/* v0.7.0: domande facoltative nella registrazione */
.signup-q { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.signup-q legend { padding: 0; margin-bottom: 4px; }
.signup-q label { margin-top: 4px; font-size: 15px; }
/* v0.7.1: area amministrazione */
.adm { padding-block: clamp(24px, 4vw, 44px); }
.adm__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.adm__head .h2 { margin: 0; }
.adm__note { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.adm__sec { margin-top: 32px; }
.adm__sec > .h3 { margin: 0 0 12px; }
.adm__count { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.adm__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.adm__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.adm__card { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.adm__card .st__h { margin: 0; }
.adm__big { margin: 0; font-size: 15px; color: var(--ink-soft); }
.adm__big strong { font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm__meter { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.adm__meter span { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--pin-text); }
.adm__meter.is-warn span { background: #B45309; }
.adm__warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: #FFF4E5; color: #7A4100; font-size: 14px; font-weight: 700; }
.adm__chart { margin-top: 6px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.adm__chart .st__bars { height: 80px; }
.adm__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.adm__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm__table th, .adm__table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.adm__table tbody tr:last-child td { border-bottom: 0; }
.adm__table th { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; background: var(--paper); }
.adm__table th button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.adm__table th button::after { content: "↕"; margin-left: 4px; opacity: .45; }
.adm__table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.adm__table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.adm__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm__table td { color: var(--ink); }
.adm__table tr.is-internal td { background: rgba(0,0,0,.025); }
.adm__mail { display: block; font-size: 13px; color: var(--ink-soft); }
.adm__muted { color: var(--ink-soft); font-size: 13px; }
.adm__tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.adm__tag--use { margin: 0 2px 4px 0; color: var(--ink); }
.nav__admin { font-weight: 700; }
@media (max-width: 760px) { .adm__cols { grid-template-columns: 1fr; } }
/* v0.7.2: bozze ed eventi conclusi */
.alert--info { background: var(--pin-wash); border-color: var(--line); color: var(--ink); }
.form-hint { margin: 0 0 8px; }
.form-actions { display: grid; gap: 10px; }
.form-actions__note { margin: 0; text-align: center; }
.badge { display: inline-block; vertical-align: middle; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }
.badge--draft { border-color: #F2C98A; background: #FFF4E5; color: #7A4100; }
.badge--done { border-color: var(--line); background: var(--sheet); color: var(--ink-soft); }
.input[readonly], .input:disabled { background: var(--paper); color: var(--ink-soft); cursor: not-allowed; }
.evp__draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid #F2C98A; border-radius: 14px; background: #FFF4E5; color: #7A4100; font-size: 15px; }
.evp__draft strong { font-weight: 800; }
.event--draft { border-style: dashed; }
.event__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.event__actions form { display: contents; }
.evp__done { margin: 8px 0 0; }
.emb__done { font-weight: 700; color: var(--ink-soft); }
/* v0.7.6: ricerca di parcheggi e fermate - rotellina e punti che compaiono */
.arrive-auto__state[data-state="loading"] { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.arrive-auto__state[data-state="loading"]::before { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: evnt-spin .8s linear infinite; }
.leaflet-marker-icon.mkp-in > * { animation: evnt-pop .45s ease-out both; }
@keyframes evnt-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }   /* "scale", non "transform": l'icona spostata (icone sovrapposte) resta spostata */
@media (prefers-reduced-motion: reduce) { .leaflet-marker-icon.mkp-in > * { animation-duration: .01s; } .arrive-auto__state[data-state="loading"]::before { animation-duration: 2.4s; } }

/* v0.7.7: legenda delle icone sulla mappa (solo i tipi presenti); v0.8.1: una voce per riga, testo più piccolo */
.mkp-legend { display: flex; flex-direction: column; gap: 4px; padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,.94); box-shadow: 0 1px 5px rgba(20,40,45,.25); color: #1f2a2e; font-size: 11px; font-weight: 700; line-height: 1; transition: opacity .15s ease; }
.mkp-legend[hidden] { display: none; }
.mkp-legend.is-under { opacity: .08; pointer-events: none; }   /* v0.8.1: un nome o un fumetto ci passa sotto */
.mkp-legend__item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mkp-legend__dot { display: grid; place-items: center; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #fff; border-radius: 50%; color: #fff; font-size: 8.5px; font-weight: 800; line-height: 1; }
.mkp-legend__dot.mkp--local { border-color: #9A3412; color: #111; }   /* lettera nera, come sulle icone */
.mkp-legend__dot .mkp__small { font-size: 6.5px; }
@media (prefers-reduced-motion: reduce) { .mkp-legend { transition: none; } }

/* v0.9.0: Post per LinkedIn */
.li__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.li__tab { min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.li__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.li__tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.li__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.li__text { display: block; width: 100%; max-width: 640px; box-sizing: border-box; min-height: 300px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.li__text:focus { outline: 3px solid var(--ink); outline-offset: 1px; }
.li__meta { display: flex; justify-content: space-between; gap: 12px; max-width: 640px; margin: 6px 0 10px; color: var(--ink-soft); font-size: 13px; }
.li__meta .is-over { color: var(--error); font-weight: 700; }
.li__preview { margin-top: 14px; color: var(--ink-soft); font-size: 14px; }
.li__preview p { margin: 0 0 8px; }
.li__preview img { display: block; width: 300px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
/* v0.9.1: immagine d'anteprima di ogni post (ritagliata 1,91:1 come la mostra LinkedIn) */
.li__pick-title { margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.li__pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; max-width: 640px; }
.li__opt { position: relative; display: grid; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.li__opt img, .li__opt-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 6px; background: var(--sheet, #F2F4F3); color: var(--ink-soft); font-size: 13px; text-align: center; }
.li__opt-cap { padding: 0 4px 2px; }
.li__opt[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.li__opt[aria-checked="true"]::after { content: "\2713"; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
.li__opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.li__pick-note { margin: 8px 0 10px; color: var(--ink-soft); font-size: 14px; }
.li__preview { min-width: 0; width: 100%; max-width: 640px; box-sizing: border-box; }
.li__pick { width: 100%; }
.li__opt { min-width: 0; }
.li__opt img { max-width: 100%; }

/* ======================= v0.10.0: pagina dell'evento a sezioni ======================= */
.evp__hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 6px; }
.evp__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 10px; border: 0; border-radius: 12px; background: var(--accent, var(--pin)); color: var(--accent-ink, #fff); font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(20,40,45,.18); transition: transform .12s ease, box-shadow .12s ease; }
.evp__tile svg { width: 28px; height: 28px; flex: none; }
.evp__tile:hover { color: var(--accent-ink, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,40,45,.22); }
.evp__tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.evp__hub--tools { margin-top: 14px; }
.evp__hubtitle { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink); font-size: 15px; font-weight: 800; }
.evp__hubtitle small { color: var(--ink-soft); font-weight: 600; }
.evp__tile--tool { min-height: 76px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); box-shadow: none; font-size: 15px; }
.evp__tile--tool:hover { color: var(--ink); border-color: var(--ink); }
@media (min-width: 760px) { .evp__hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* barra della sezione: senza JavaScript fa da titolo, con le sezioni sta in alto con la freccia */
.evp__bar { display: flex; align-items: center; gap: 6px; margin: 30px 0 12px; }
.evp__bartitle { margin: 0; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.2; }
.evp__bartitle:focus { outline: none; }
.evp__back { display: none; }
.evp--tabs [hidden].evp__panel, .evp--tabs .evp__home[hidden] { display: none !important; }
.evp--tabs .evp__bar { position: sticky; top: 0; z-index: 30; justify-content: center; min-height: 54px; margin: 0 0 18px; padding: 6px 54px; border-radius: 12px; background: var(--accent, var(--pin)); color: var(--accent-ink, #fff); box-shadow: 0 2px 8px rgba(20,40,45,.18); }
.evp--tabs .evp__bartitle { color: inherit; font-size: 18px; text-align: center; }
.evp--tabs .evp__back { position: absolute; left: 6px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border-radius: 10px; color: inherit; }
.evp--tabs .evp__back svg { width: 24px; height: 24px; }
.evp--tabs .evp__back:hover { background: rgba(255,255,255,.16); color: inherit; }
.evp--tabs .evp__back:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.evp--tabs .evp__panel > details.embed { margin-top: 0; border: 0; padding: 0; }
.evp--tabs .evp__panel > details.embed > summary { display: none; }
.evp__panel { min-width: 0; }

/* Come arrivare: mappa grande e collegamenti alle app */
.evp__map--big { height: 62vh; min-height: 320px; max-height: 620px; }
.evp__go { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 14px 0 6px; }
.evp__goplace { flex: 1 0 100%; margin: 0; color: var(--ink); }
.evp__golink { color: var(--pin-text, var(--ink)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.evp--tabs #come-arrivare .evp__arrive { margin-top: 10px; }
.arrive__note--lines { color: var(--ink); font-weight: 700; }

/* Contatti utili e Condividi */
.evp__contacts { display: grid; gap: 10px; max-width: 640px; font-size: 17px; }
.evp__contact { margin: 0; }
.evp__contact span { display: inline-block; min-width: 86px; color: var(--ink-soft); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.evp__contact a { color: var(--pin-text, var(--ink)); font-weight: 700; word-break: break-word; }
.evp__contacttext { color: var(--ink); line-height: 1.55; }
.evp__sharebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Programma: ogni riga si "accende" da sinistra a destra, una dopo l'altra */
@keyframes evnt-lit {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes evnt-glow {
  0%   { text-shadow: 0 0 0 transparent; }
  45%  { text-shadow: 0 0 14px var(--accent, var(--pin)); }
  100% { text-shadow: 0 0 0 transparent; }
}
.evp--tabs .agenda__item.is-lit > * {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.12) 60%); mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.12) 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  animation: evnt-lit .9s cubic-bezier(.3,.7,.3,1) both, evnt-glow 1.1s ease-out both;
  animation-delay: calc(var(--i, 0) * 150ms), calc(var(--i, 0) * 150ms);
}
@media (prefers-reduced-motion: reduce) {
  .evp--tabs .agenda__item.is-lit > * { animation: none; -webkit-mask-image: none; mask-image: none; }
  .evp__tile { transition: none; }
}
.arrive__dist { margin-left: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.evp__go .evp__golink { display: inline-flex; align-items: center; width: auto; min-height: 40px; margin: 0; padding: 6px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.evp__go .evp__golink:hover { border-color: var(--ink); color: var(--ink); }

/* v0.10.1: l'apertura ha lo stesso ritmo di prima (24 px tra i blocchi) e più respiro intorno a Inizio/Fine/Dove */
.evp__home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.evp__home > .evp__facts { margin: 12px 0; }   /* 24 + 12 = 36 px sopra e sotto */
.evp__home > .evp__hub { margin: 0; }
.evp__home > .evp__hub--tools { margin-top: 4px; }
@media (max-width: 560px) { .evp__home > .evp__facts { margin: 4px 0; } .evp__home > .evp__facts dd:last-child { margin-bottom: 0; } }   /* 28 px sul telefono */

/* v0.10.1: "Indietro" scritto accanto alla freccia, nel colore della barra */
.evp__backtxt { display: none; }
.evp--tabs .evp__back { width: auto; min-width: 44px; padding: 0 10px 0 4px; grid-auto-flow: column; gap: 2px; text-decoration: none; }
.evp--tabs .evp__backtxt { display: inline; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.evp--tabs .evp__bar { padding-left: 104px; padding-right: 104px; }
@media (max-width: 400px) { .evp--tabs .evp__bar { padding-left: 96px; padding-right: 12px; justify-content: flex-start; } .evp--tabs .evp__bartitle { text-align: left; } }
/* v0.10.2: piano modificabile in /admin */
.adm__plan { display: flex; align-items: center; gap: 6px; margin: 0; }
.adm__planSel { min-height: 34px; padding: 2px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
/* v0.10.3: esito del cambio di piano accanto alla tendina */
.adm__plan { flex-wrap: wrap; }
.adm__planMsg { font-size: 13px; font-weight: 700; }
.adm__planMsg[data-state="ok"] { color: #1E7A3C; }
.adm__planMsg[data-state="busy"] { color: var(--ink-soft); }
.adm__planMsg[data-state="error"] { flex-basis: 100%; min-width: 230px; max-width: 300px; color: var(--error); font-weight: 600; line-height: 1.35; }

/* v0.11.0: orari di ogni giornata (modulo) e riepilogo sotto il titolo */
.day-hours .check { margin-bottom: 6px; }
.day-hours__rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.day-hours__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 8px; }
.day-hours__day { font-size: 15px; font-weight: 700; }
.day-hours__sep { font-weight: 700; color: var(--ink-soft); }
.day-hours__row.is-bad .time-pick:last-child select { border-color: var(--error); }
.day-hours__row .input { min-height: 44px; padding: 9px 6px 9px 10px; }
.day-hours__row .time-pick { gap: 4px; }
@media (max-width: 560px) {
  .day-hours__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 6px; }
  .day-hours__row .input { padding: 8px 2px 8px 6px; font-size: 16px; }
  .day-hours__day { grid-column: 1 / -1; }
}
.evp__days { list-style: none; margin: 0; padding: 0; }
.evp__days li + li { margin-top: 2px; }
.evp__days-more summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--pin-text); margin-top: 4px; }
.evp__days-more[open] summary { margin-bottom: 2px; }
.evp__when-days:has(.evp__days-more[open]) > .evp__days { display: none; }   /* aperto: l'elenco completo prende il posto delle prime due righe */

/* v0.14.0: /admin, siti autorizzati del widget */
.adm__wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.adm__doms { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.adm__dom { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.adm__dom code { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.adm__dom .adm__copy { grid-column: 2; grid-row: 1; }
.adm__dom > form:last-child { grid-column: 3; grid-row: 1; }
.adm__dom > form:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
.adm__dom.is-todo { border-color: #E0A100; background: #FFF8E1; }
.adm__inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.adm__todo { font-size: 13px; font-weight: 700; color: #8A5A00; white-space: nowrap; }
.adm__ok { font-size: 13px; font-weight: 700; color: #1E7A3C; white-space: nowrap; }
.adm__addDom { display: flex; gap: 8px; }
.adm__addDom .input { flex: 1; min-width: 0; }