/* Secret Sedux — iscrizione e profilo dell'iscritto (/iscriviti/). Si appoggia a base.css e app.css. */

body.page-join > .toasts {
  bottom: calc(22px + env(safe-area-inset-bottom));
}

.join-note {
  text-align: center;
}
.join-tabs {
  margin-bottom: 22px;
}
.join-names {
  grid-template-columns: 1fr 1fr;
}
.link-btn.link-inline {
  display: inline;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------- questionario */

.join {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px 0;
}
.join-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}
.join-progress {
  height: 2px;
  margin: 8px 0 34px;
  background: var(--line);
}
.join-progress > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(182, 0, 0, 0.8);
  transition: width 0.4s var(--ease);
}

.wz [hidden] {
  display: none !important;
}
.wz-step {
  display: grid;
  gap: 30px;
}
.wz-step > .eyebrow {
  margin: 0 0 -20px;
}
.wz-title {
  margin: 0;
  font: italic 500 clamp(40px, 10vw, 58px)/1 var(--serif);
  letter-spacing: -0.015em;
  outline: none;
}

.q {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.q-label {
  margin: 0;
  padding: 0;
  font: 600 17px/1.4 var(--sans);
  color: var(--text);
  text-wrap: pretty;
}
.q-label .opt {
  font-size: 13px;
}
.q-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.q .row2 {
  gap: 12px;
}
.q-emergency {
  padding: 16px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--red);
  background: rgba(182, 0, 0, 0.05);
}
.q-emergency .q-hint {
  margin: 0;
}

.person {
  display: grid;
  gap: 10px;
}
.person + .person {
  margin-top: 8px;
}
.person .row2 {
  grid-template-columns: 1fr 1fr;
}
.person-tag {
  margin: 0;
  font: 700 10.5px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-hi);
}

.ages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.age-input {
  position: relative;
  display: block;
}
.age-input .input {
  padding-right: 56px;
  font-size: 18px;
}
.age-input em {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font: 500 14px var(--sans);
  pointer-events: none;
}

/* scelte singole e multiple a riquadri */
.choices {
  display: grid;
  gap: 8px;
}
@media (min-width: 560px) {
  .choices.two {
    grid-template-columns: 1fr 1fr;
  }
}
.choice {
  position: relative;
  display: flex;
  min-width: 0;
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice span {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: #0b0505;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.choice span::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid #6b4646;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.choice input[type='radio'] + span::before {
  border-radius: 50%;
}
@media (hover: hover) {
  .choice span:hover {
    border-color: #5a2424;
    color: var(--text);
  }
}
.choice input:checked + span {
  border-color: var(--red);
  background: rgba(182, 0, 0, 0.1);
  color: var(--text);
}
.choice input[type='checkbox']:checked + span::before {
  border-color: var(--red);
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E");
}
.choice input[type='radio']:checked + span::before {
  border-color: var(--red);
  background: var(--red);
  box-shadow: inset 0 0 0 4px #1a0909;
}
.choice input:focus-visible + span {
  outline: 2px solid var(--red-hi);
  outline-offset: 2px;
}
.choice input[aria-invalid='true'] + span,
.seg input[aria-invalid='true'] + span {
  box-shadow: inset 0 0 0 1px var(--red-hi);
}
.q-other {
  margin-top: -2px;
}

.seg-yn {
  max-width: 280px;
}

.check.check-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px;
  line-height: 1.55;
}
.check.check-block input {
  margin-top: 2px;
  flex: none;
}
.check input[aria-invalid='true'] {
  border-color: var(--red-hi);
}

.wz-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--ink) 32%);
}
.wz-nav .btn-ghost[hidden] {
  display: none;
}
.wz-nav .form-error {
  flex: 1 0 100%;
  /* piena: il testo della domanda dietro non traspare */
  background: linear-gradient(rgba(182, 0, 0, 0.1), rgba(182, 0, 0, 0.1)), var(--ink);
}
/* telefoni: «Indietro» e il pulsante principale sempre sulla stessa riga; l'etichetta lunga va a capo dentro */
@media (max-width: 559px) {
  .wz-nav {
    gap: 8px;
  }
  .wz-nav .btn-ghost {
    padding-inline: 0.5em;
  }
  .wz-nav .btn-xl {
    flex-basis: 0;
    min-width: 0;
    padding-inline: 0.9em;
    white-space: normal;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-align: center;
  }
}
/* il campo da correggere non resta sotto la barra in basso */
@media (min-height: 521px) {
  html:has(.wz-nav) {
    scroll-padding-bottom: 200px;
  }
}
/* schermi bassi (telefono in orizzontale): la barra non resta fissa sopra le domande */
@media (max-height: 520px) {
  .wz-nav {
    position: static;
    padding-top: 6px;
    background: none;
  }
}

/* ---------------------------------------------------------------- profilo */

.join-hello {
  margin: -8px 0 22px;
  text-align: center;
  font: italic 500 clamp(36px, 9vw, 48px)/1.05 var(--serif);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.status-card {
  padding: 18px 18px 18px 20px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--warn);
  background: rgba(255, 255, 255, 0.02);
}
.status-card .label {
  margin: 0 0 8px;
  color: var(--warn);
}
.status-card p:last-child {
  margin: 0;
  color: var(--text-2);
}
.status-card.s-approvato {
  border-left-color: var(--ok);
}
.status-card.s-approvato .label {
  color: var(--ok);
}
.status-card.s-respinto {
  border-left-color: var(--muted);
}
.status-card.s-respinto .label {
  color: var(--text-2);
}
.status-card.s-bloccato {
  border-left-color: var(--red-hi);
}
.status-card.s-bloccato .label {
  color: var(--red-hi);
}
.page-join .danger-zone {
  margin-top: 26px;
}
/* su computer e tablet la pagina dell'iscritto si allarga: serate, foto e galleria non restano in una colonna da
   telefono (member/shell.js, `wide`). Accesso e iscrizione restano a 400px. */
@media (min-width: 720px) {
  .auth-wide .auth-card {
    max-width: 600px;
  }
}

/* La pagina (member/profile.js): lo stato; la colonna principale (serate, «Costruisci il tuo evento», galleria); la
   colonna accanto («Da fare»); sotto, impostazioni e i tuoi dati (.m-foot). Sul telefono una colonna sola, in
   quest'ordine. */
.m-home,
.m-main,
.m-side,
.m-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 30px;
}
.m-foot {
  margin-top: 30px;
}
.m-home > *,
.m-main > *,
.m-side > *,
.m-foot > *,
.m-foot > .danger-zone {
  margin: 0;
}
/* dai 1024px, con le serate (`columns`), due colonne: a destra stato e «Da fare». Lo stato parte alla riga della prima
   scheda, sotto l'etichetta «Le serate», e scorre con la pagina; «Da fare» (.m-side) resta a vista mentre si scorrono
   le serate (in alto se ci sta nella finestra, altrimenti quando se ne vede il fondo: --side-top, da
   member/profile.js). Impostazioni e dati restano fuori dalla colonna (che così non supera le serate): una riga a
   tutta larghezza sotto, con le stesse due colonne e i pulsanti del profilo in fila. */
@media (min-width: 1024px) {
  .auth-cols .auth-card {
    max-width: 1040px;
  }
  .auth-cols .m-home {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'main status'
      'main side';
    gap: 24px 48px;
  }
  .auth-cols .status-card {
    grid-area: status;
    margin-top: calc(var(--fs-label) * 1.2 + 12px);
  }
  .auth-cols .m-main {
    grid-area: main;
  }
  .auth-cols .m-side {
    grid-area: side;
    align-self: start;
    position: sticky;
    top: var(--side-top, 24px);
  }
  .auth-cols .m-foot {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px 48px;
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
  }
  .auth-cols .m-foot > .danger-zone {
    align-content: start;
    padding-top: 0;
    border-top: 0;
  }
  .auth-cols .m-foot > .danger-zone > .label {
    margin: 0 0 4px;
  }
  .auth-cols .m-set-acts {
    display: flex;
    flex-wrap: wrap;
  }
  .auth-cols .m-set-acts > .btn-block {
    width: auto;
  }
}

/* «Da fare»: le richieste di socio e le foto, con quante voci sono fatte. Una sola azione rossa per voce da fare;
   le voci fatte restano (il PDF, le foto), più quiete. */
.m-todo {
  padding: 16px 16px 2px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
}
.m-todo[hidden],
.todo-group[hidden] {
  display: none;
}
.todo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.todo-head .label {
  margin: 0;
}
.todo-count {
  color: var(--warn);
  font: 700 var(--fs-label)/1.2 var(--sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.m-todo.is-done .todo-count {
  color: var(--ok);
}
.todo-bar {
  height: 2px;
  margin: 10px 0 2px;
  background: var(--line);
}
.todo-bar > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(182, 0, 0, 0.8);
  transition: width 0.8s var(--velvet);
}
.m-todo.is-done .todo-bar > i {
  background: var(--ok);
  box-shadow: none;
}
.todo-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 14px 0;
}
.todo-item + .todo-item,
.todo-group:not([hidden]) ~ .todo-group .todo-item {
  border-top: 1px solid var(--line);
}
/* lo stato della voce, non una casella da toccare: un cerchio tratteggiato da fare, pieno di verde con la spunta fatta
   (le caselle del questionario sono quadrate). Le foto, facoltative, hanno l'icona e l'etichetta «Facoltative» al
   posto dello stato, e non contano nel «0 di 2». */
.todo-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px dashed var(--line-3);
  border-radius: 50%;
}
.todo-item.is-done .todo-mark {
  border: 0;
  background: var(--ok);
  color: #03140a;
}
.todo-mark .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}
.todo-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--muted);
}
.todo-icon .i {
  width: 18px;
  height: 18px;
}
.todo-item.is-done .todo-icon {
  color: var(--ok);
}
.todo-what .todo-tag {
  height: 18px;
  margin-left: 2px;
  padding: 0 6px;
  vertical-align: 2px;
  color: var(--muted);
}
.todo-what {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.todo-what b {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.todo-who {
  font-weight: 500;
  color: var(--text-2);
}
.todo-what small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.todo-item.is-done .todo-what b {
  color: var(--text-2);
}
.todo-what small.adm-ok {
  color: var(--ok);
}
.todo-acts,
.todo-item > .ph-grid,
.todo-item > .form-error {
  grid-column: 2;
}
.todo-item > .form-error {
  margin: 0;
}
.todo-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* le foto: i tre posti, piccoli; quelli liberi tratteggiati (anche nel foglio della richiesta) */
.todo-item > .ph-grid {
  grid-template-columns: repeat(3, minmax(0, 92px));
  margin: 2px 0 0;
}
.ph-grid > .ph-add,
.ph-grid > .ph-slot {
  border-style: dashed;
  cursor: pointer;
  transition: border-color 0.2s;
}
.ph-grid > .ph-slot {
  background: none;
}
/* mentre la foto sale, i posti liberi non riaprono la scelta */
.ph-grid:has(> .ph-add[aria-busy='true']) > .ph-slot {
  pointer-events: none;
}
@media (hover: hover) {
  .ph-grid > .ph-add:hover,
  .ph-grid > .ph-slot:hover {
    border-color: var(--red);
  }
}

/* impostazioni e i tuoi dati, in fondo (sul computer in una riga a tutta larghezza) */
.m-set > .label {
  margin: 0 0 12px;
}
.m-set-acts {
  gap: 8px;
}

/* ---------------------------------------------------------------- serate */

.m-events > .label {
  margin: 0 0 12px;
}
.m-ev-list {
  display: grid;
  gap: 10px;
}
.m-ev {
  grid-template-columns: 76px minmax(0, 1fr);
}
@media (max-width: 374px) {
  .m-ev {
    grid-template-columns: 66px minmax(0, 1fr);
  }
}
/* 280px (schermo esterno dei pieghevoli): «Chiedi di partecipare» va a capo dentro la scheda */
@media (max-width: 299px) {
  .m-ev .ev-actions .btn {
    max-width: 100%;
    height: auto;
    min-height: var(--h);
    padding-block: 6px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}
/* «Ritira la richiesta» (e «Modifica» della valutazione): bordati, con la ×, allineati alla riga dello stato: si vede
   che si toccano, un gradino sotto le azioni rosse */
.m-ev .ev-actions .btn-ghost {
  border-color: var(--line-3);
}
.m-ev .ev-actions .btn-ghost .i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
@media (hover: hover) {
  .m-ev .ev-actions .btn-ghost:hover {
    border-color: var(--red);
  }
}

/* il biglietto della prossima serata con l'invito (member/events.js: ticket): richiama l'invito, con gli spigoli
   tagliati e il filo rosso, la data e quanto manca; sotto la linea tratteggiata il QR, il codice e «Apri l'invito» */
.m-ticket {
  --corner: 20px;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(182, 0, 0, 0.24), transparent 65%),
    linear-gradient(180deg, rgba(17, 8, 8, 0.94), rgba(5, 2, 2, 0.97));
  clip-path: polygon(0 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% 100%, var(--corner) 100%, 0 calc(100% - var(--corner)));
}
.m-ticket::before,
.m-ticket::after {
  content: '';
  position: absolute;
  width: var(--corner);
  height: var(--corner);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--red) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}
.m-ticket::before {
  top: 0;
  right: 0;
}
.m-ticket::after {
  bottom: 0;
  left: 0;
}
/* se non ci stanno sulla riga, il cartellino va sotto invece di spezzare il titoletto */
.m-ticket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 28px 0 16px;
}
.m-ticket-head .label {
  margin: 0;
  color: var(--red-hi);
}
/* quanto manca: un cartellino tagliato come la lama (-17°); stasera pieno, col velluto che si muove */
.m-ticket-when {
  flex: none;
  padding: 5px 14px;
  background: rgba(182, 0, 0, 0.2);
  color: var(--text);
  font: 700 var(--fs-micro)/1.2 var(--sans);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.m-ticket-when.is-tonight {
  background: linear-gradient(135deg, #e01b1b 0%, #b60000 45%, #7a0000 100%);
  background-size: 220% 220%;
  color: #fff;
  animation: liquid 7s var(--silk) infinite alternate;
}
.m-ticket-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  padding: 14px 16px 16px 0;
}
.m-ticket .ev-date {
  padding-block: 6px;
  border-right-color: rgba(182, 0, 0, 0.45);
  background: none;
}
.m-ticket-body {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-left: 16px;
}
.m-ticket-name {
  margin: 0;
  font: italic 500 30px/1.02 var(--serif);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
/* la parte da staccare: linea tratteggiata e due mezzelune ai lati, come un biglietto */
.m-ticket-stub {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 16px 20px 22px;
  border-top: 1px dashed rgba(182, 0, 0, 0.5);
}
.m-ticket-stub::before,
.m-ticket-stub::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--ink);
}
.m-ticket-stub::before {
  left: -9px;
}
.m-ticket-stub::after {
  right: -9px;
}
/* il QR dell'invito, piccolo da riconoscere (si tocca e si apre l'invito, dove è grande), cerchiato come lì */
.m-ticket-qr {
  display: block;
  width: 88px;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 0 5px rgba(0, 0, 0, 0.9),
    0 0 0 6px rgba(182, 0, 0, 0.5),
    0 0 30px 2px rgba(182, 0, 0, 0.3);
}
.m-ticket-qr img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.m-ticket-pass {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}
.m-ticket-pass p {
  margin: 0;
}
.m-ticket-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
  font: 700 var(--fs-label)/1.2 var(--sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.m-ticket-ok::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.7);
}
.m-ticket-code {
  font: 600 19px/1 var(--mono);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.m-ticket-code span {
  margin-right: 6px;
  color: var(--muted);
  font: 700 var(--fs-micro)/1 var(--sans);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  vertical-align: 3px;
}
.m-ticket-code i {
  margin: 0 0.1em;
  color: var(--red);
  font-style: normal;
}
.m-ticket-pass .btn {
  margin-top: 2px;
}
/* dai 720px (la pagina larga 600px) il biglietto si stende: la parte da staccare a destra, dietro la linea
   tratteggiata in verticale */
@media (min-width: 720px) {
  .m-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'head stub'
      'main stub';
  }
  .m-ticket-head {
    grid-area: head;
    padding-right: 18px;
  }
  .m-ticket-main {
    grid-area: main;
  }
  .m-ticket-stub {
    grid-area: stub;
    padding: 18px 30px 18px 24px;
    border-top: 0;
    border-left: 1px dashed rgba(182, 0, 0, 0.5);
  }
  .m-ticket-stub::before,
  .m-ticket-stub::after {
    left: -9px;
    right: auto;
  }
  .m-ticket-stub::after {
    top: auto;
    bottom: -9px;
  }
}
/* telefoni stretti (320px): QR più piccolo, il codice non allarga la scheda */
@media (max-width: 359px) {
  .m-ticket-main {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .m-ticket-body {
    padding-left: 12px;
  }
  .m-ticket-name {
    font-size: 26px;
  }
  .m-ticket-stub {
    gap: 14px;
    padding-inline: 18px 12px;
  }
  .m-ticket-qr {
    width: 72px;
  }
  .m-ticket-code {
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  .m-ticket-pass .btn {
    padding-inline: 0.8em;
    letter-spacing: 0.08em;
  }
}

.ev-state {
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line-2);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.ev-state.t-ok {
  border-left-color: var(--ok);
  color: var(--text);
}
.ev-state.t-wait {
  border-left-color: var(--warn);
}
.ev-state.t-no {
  color: var(--muted);
}
/* da pagare: contributo e istruzioni, sotto lo stato e sulla stessa riga gialla */
.ev-pay {
  display: grid;
  gap: 8px;
  margin-top: -7px;
  padding: 10px 12px 11px 10px;
  border-left: 2px solid var(--warn);
  background: rgba(255, 255, 255, 0.03);
}
.ev-pay p {
  margin: 0;
}
.ev-pay-amt {
  color: var(--text-2);
  font-size: 13.5px;
}
.ev-pay-amt b {
  color: var(--text);
  font-weight: 700;
}
.ev-pay-text {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ev-pay-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
/* entro quando pagare (scadenza della serata) */
.ev-pay-by {
  color: var(--warn);
  font-size: 13px;
  line-height: 1.45;
}

/* voci del prezzo: contributo, early bird, last minute, codice sconto */
.ev-pay-lines {
  display: grid;
  gap: 3px;
  margin: -2px 0 0;
  font-size: 13px;
}
.ev-pay-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ev-pay-lines dt {
  color: var(--muted);
}
.ev-pay-lines dd {
  margin: 0;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ev-pay-code {
  color: var(--text-2);
  font-size: 13px;
}
.ev-code summary {
  width: fit-content;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  list-style: none;
}
.ev-code summary::-webkit-details-marker {
  display: none;
}
.ev-code[open] summary {
  margin-bottom: 8px;
}
.ev-code-form {
  display: flex;
  gap: 8px;
}
.ev-code-form .input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  text-transform: uppercase;
}

/* --------------------------------------------- valutazione delle serate */

.rate-form {
  display: grid;
}
.rate-form > .sheet-text {
  margin-bottom: 8px;
}
.rate-form [hidden] {
  display: none !important;
}
.rate {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.rate-set {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rate-name {
  padding: 0;
  color: var(--text);
  font: 600 15.5px/1.3 var(--sans);
}
.rate-word {
  margin-left: 10px;
  color: var(--red-hi);
  font-size: 13px;
  font-weight: 600;
}
.rate-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stars {
  display: flex;
  margin-left: -6px;
}
.star {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.star input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star .i {
  width: 30px;
  height: 30px;
  color: #6b4646;
  fill: transparent;
  transition:
    color 0.15s,
    fill 0.15s,
    transform 0.15s var(--ease);
}
.star.on .i {
  color: var(--red-hi);
  fill: var(--red);
}
.star:active .i {
  transform: scale(0.88);
}
.star input:focus-visible + .i {
  outline: 2px solid var(--red-hi);
  outline-offset: 3px;
}
/* anteprima del voto sotto il puntatore (solo dove c'è) */
@media (hover: hover) {
  .stars:hover .star .i {
    color: #6b4646;
    fill: transparent;
  }
  .stars .star:hover .i,
  .stars .star:has(~ .star:hover) .i {
    color: var(--red-hi);
    fill: rgba(182, 0, 0, 0.55);
  }
}
.rate-note-btn {
  justify-self: start;
  font-size: 13px;
}
/* al dito: pulsanti dell'iscritto alti 44px, la X delle foto toccabile su 44px, la X del voto staccata dalle stelle */
@media (pointer: coarse) {
  .page-join .btn-sm {
    --h: 44px;
    font-size: 11px;
  }
  .page-join .ph-del::before {
    content: '';
    position: absolute;
    inset: -7px;
  }
  .rate-clear {
    margin-left: 10px;
  }
  .link-btn.link-inline {
    padding: 12px 4px;
    margin: 0 -4px;
  }
}
.rate-note.textarea {
  min-height: 64px;
}
.rate-improve {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------- costruisci il tuo evento */

.idea-cta {
  --corner: 18px;
  padding: 20px 18px 18px;
  border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 100% 0%, rgba(182, 0, 0, 0.24), transparent 62%), var(--ink-1);
  clip-path: polygon(0 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% 100%, 0 100%);
}
.idea-cta > .label {
  margin: 0 0 8px;
  color: var(--red-hi);
}
.idea-cta-title {
  margin: 0;
  font: italic 500 30px/1.05 var(--serif);
  letter-spacing: -0.01em;
}
.idea-cta > p:not(.label) {
  margin: 10px 0 16px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
/* «Costruite la vostra serata»: facoltativa, un gradino sotto le azioni rosse della pagina (chiedere di partecipare,
   firmare la richiesta di socio): bordata, larga quanto il testo. Se non sta in una riga va a capo invece di allargare
   la scheda. */
.idea-cta .btn {
  max-width: 100%;
  height: auto;
  min-height: var(--h);
  padding-block: 10px;
  border-color: var(--line-3);
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.idea-cta .btn .i {
  color: var(--red-hi);
}
@media (hover: hover) {
  .idea-cta .btn:hover {
    border-color: var(--red);
  }
}
@media (max-width: 359px) {
  .idea-cta {
    padding-inline: 14px;
  }
  .idea-cta .btn {
    padding-inline: 0.8em;
    letter-spacing: 0.07em;
  }
}
.idea-list {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.idea-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.idea-row:last-child {
  border-bottom: 0;
}
/* telefoni stretti: titolo e stato su tutta la riga, i pulsanti sotto a destra */
@media (max-width: 419px) {
  .idea-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .idea-info {
    flex: 1 0 100%;
  }
  .idea-row > .btn {
    margin-left: auto;
  }
}
.idea-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.idea-info b {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.idea-info small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.idea-info small.t-ok {
  color: var(--ok);
}
.idea-info small.t-wait {
  color: var(--warn);
}
.idea-intro {
  margin: -14px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}
.idea-builder .wz-step > .fine {
  margin: -10px 0 0;
}
/* tante scelte brevi: due colonne anche sul telefono */
.idea-builder .choices {
  grid-template-columns: 1fr 1fr;
}
.idea-builder .choice span {
  min-height: 48px;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.idea-builder .choice span::before {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------- collabora con noi */

.collab .auth-card {
  max-width: 600px;
}
.collab .auth-brand {
  margin-bottom: 26px;
}
.collab-sec {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.collab-sec + .collab-sec,
#collabFields {
  margin-top: 26px;
}
.collab-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.collab-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--red);
  color: var(--red-hi);
  font: 700 13px/1 var(--sans);
  transform: skewX(-8deg);
}
.collab-step h2 {
  margin: 2px 0 0;
  font: italic 500 26px/1.1 var(--serif);
}
.collab-step p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}
.kind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kind-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 560px) {
  /* tre sopra e due sotto, larghi uguali */
  .kind-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .kind-grid > * {
    grid-column: span 2;
  }
  .kind-grid > :nth-child(n + 4),
  .kind-grid > :last-child:nth-child(odd) {
    grid-column: span 3;
  }
}
.kind-card {
  position: relative;
  display: flex;
  min-width: 0;
}
.kind-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kind-in {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 10px 14px;
  border: 1px solid var(--line-2);
  background: #0b0505;
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.kind-in .i {
  width: 26px;
  height: 26px;
  color: var(--muted);
  transition: color 0.2s;
}
.kind-in b {
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .kind-in:hover {
    border-color: #5a2424;
    color: var(--text);
  }
}
.kind-card input:checked + .kind-in {
  border-color: var(--red);
  background: rgba(182, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px var(--red);
  color: var(--text);
}
.kind-card input:checked + .kind-in .i {
  color: var(--red-hi);
}
.kind-card input:focus-visible + .kind-in {
  outline: 2px solid var(--red-hi);
  outline-offset: 2px;
}
.collab-end {
  gap: 14px;
}
.collab-fine {
  margin: 0;
  text-align: center;
}
/* campo trappola per i bot: fuori dallo schermo, non nascosto con display */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- movimento */

/* Le schermate arrivano a strati (app.css); il saluto prende fiato. */
.page-join .auth-card > .join-hello {
  animation: exhale 1.5s 0.1s var(--silk) backwards;
}
/* quello che arriva dopo (serate, biglietto, «Da fare», foto, idee, galleria) si posa senza scatti */
.m-ev-list,
.m-ticket,
.m-todo,
.m-gal,
.idea-list,
.ph-grid {
  animation: drift-in 0.8s var(--velvet) backwards;
}

/* «Costruisci il tuo evento»: il bagliore del riquadro respira */
.idea-cta {
  position: relative;
  isolation: isolate;
}
.idea-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(80% 70% at 100% 0%, rgba(255, 56, 56, 0.18), transparent 65%);
  animation: ember 6s var(--silk) infinite alternate;
}
@keyframes ember {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* Percorsi a passi (questionario e «Costruisci il tuo evento»): a ogni passo le domande arrivano una dopo
   l'altra e il titolo prende fiato. */
.wz-step > * {
  animation: drift-in 0.8s var(--velvet) backwards;
}
.wz-step > :nth-child(2) {
  animation: exhale 1.2s 0.05s var(--silk) backwards;
}
.wz-step > :nth-child(3) {
  animation-delay: 0.14s;
}
.wz-step > :nth-child(4) {
  animation-delay: 0.22s;
}
.wz-step > :nth-child(5) {
  animation-delay: 0.3s;
}
.wz-step > :nth-child(6) {
  animation-delay: 0.38s;
}
.wz-step > :nth-child(n + 7) {
  animation-delay: 0.46s;
}

/* scegliere: il riquadro si accende con un'onda di luce, la spunta sboccia */
.choice input:checked + span {
  animation: bloom 0.7s var(--silk);
}
.choice input:checked + span::before {
  animation: tick-in 0.45s var(--velvet);
}
@keyframes tick-in {
  from {
    transform: scale(0.3) rotate(-25deg);
  }
}

/* stelle: ognuna si accende con un piccolo bacio di luce, una dopo l'altra */
.star.on .i {
  filter: drop-shadow(0 0 3px rgba(255, 56, 56, 0.35));
  animation: star-kiss 0.6s var(--velvet) backwards;
}
.star:nth-child(2).on .i {
  animation-delay: 0.05s;
}
.star:nth-child(3).on .i {
  animation-delay: 0.1s;
}
.star:nth-child(4).on .i {
  animation-delay: 0.15s;
}
.star:nth-child(5).on .i {
  animation-delay: 0.2s;
}
@keyframes star-kiss {
  from {
    transform: scale(0.55) rotate(-14deg);
    filter: drop-shadow(0 0 0 rgba(255, 56, 56, 0));
  }
  55% {
    transform: scale(1.22);
    filter: drop-shadow(0 0 9px rgba(255, 56, 56, 0.85));
  }
}
.rate-word:not(:empty) {
  animation: exhale 0.7s var(--silk);
}

/* fogli della pagina dell'iscritto: il titolo prende fiato, il contenuto arriva a strati */
.page-join .sheet-title {
  animation: exhale 1s 0.05s var(--silk) backwards;
}
.page-join .sheet-body > * {
  animation: drift-in 0.7s var(--velvet) backwards;
}
.page-join .sheet-body > :nth-child(2) {
  animation-delay: 0.08s;
}
.page-join .sheet-body > :nth-child(n + 3) {
  animation-delay: 0.16s;
}
.page-join .rate-form > .rate {
  animation: drift-in 0.7s var(--velvet) backwards;
}
.page-join .rate-form > :nth-child(3) {
  animation-delay: 0.1s;
}
.page-join .rate-form > :nth-child(4) {
  animation-delay: 0.15s;
}
.page-join .rate-form > :nth-child(5) {
  animation-delay: 0.2s;
}
.page-join .rate-form > :nth-child(6) {
  animation-delay: 0.25s;
}
.page-join .rate-form > :nth-child(7) {
  animation-delay: 0.3s;
}
.page-join .rate-form > :nth-child(n + 8) {
  animation-delay: 0.35s;
}

/* IT · EN in alto a destra nelle schermate d'accesso (member/shell.js). La lingua scelta è sottolineata appena sotto
   la scritta, non in fondo al pulsante alto 40px: lì la riga finiva accanto al marchio e sembrava un tratto perso. */
.auth-card {
  position: relative;
}
.auth-lang {
  position: absolute;
  top: -10px;
  right: -6px;
}
.auth-lang .lang-switch > [aria-pressed='true'] {
  box-shadow: none;
  text-decoration: underline 1px var(--red);
  text-underline-offset: 5px;
}

/* --------------------------------------------- galleria: Lingerie, Workshop, Eventi */

/* nella pagina dell'iscritto: i riquadri che aprono le pagine, solo quelli con foto o video (uno, due o tre, larghi
   uguali sulla riga) */
.m-gal > .label {
  margin: 0 0 12px;
}
.m-gal-links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
.m-gal-link {
  position: relative;
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: 92px;
  padding: 12px 12px 11px;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(182, 0, 0, 0.18), transparent 70%), var(--ink-1);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.2s,
    transform 0.4s var(--ease);
}
.m-gal-link .i {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  color: var(--red-hi);
}
.m-gal-name {
  font: italic 500 19px/1.1 var(--serif);
  overflow-wrap: anywhere;
}
.m-gal-n {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
@media (hover: hover) {
  .m-gal-link:hover {
    border-color: var(--red);
    transform: translateY(-2px);
  }
}
.m-gal-link:focus-visible {
  outline: 2px solid var(--red-hi);
  outline-offset: 2px;
}
/* 280-359px: i riquadri uno sotto l'altro */
@media (max-width: 359px) {
  .m-gal-links {
    grid-auto-flow: row;
  }
  .m-gal-link {
    min-height: 0;
  }
}

/* la pagina di una sezione: più larga del profilo, per la griglia */
.join.gal-page {
  max-width: 1040px;
  padding-bottom: 32px;
}
.gal-page .join-head {
  margin-bottom: 18px;
}
.gal-page .join-head .auth-lang {
  position: static;
}
.gal-page .eyebrow {
  margin: 0 0 10px;
}
.gal-page .eyebrow .link-btn {
  text-decoration: none;
}
.gal-title {
  margin: 0;
  font: italic 500 clamp(40px, 9vw, 64px)/1 var(--serif);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.gal-intro {
  margin: 10px 0 0;
  color: var(--text-2);
}
.gal-sections {
  margin-top: 18px;
}
.chip[aria-current='page'] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
a.chip {
  text-decoration: none;
}
.gal-respect {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}
.gal-respect .i {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.gal-list {
  display: grid;
  gap: 30px;
  margin-top: 26px;
}
.gal-sec .gal-grid {
  margin-top: 12px;
}
.gal-list .empty .i {
  width: 26px;
  height: 26px;
}
/* il visore: la foto o il video interi, la didascalia sotto */
.gal-figure {
  margin: 0;
}
.gal-viewer .gal-view {
  touch-action: pan-y;
}

/* richiesta di ammissione a socio: il modulo (le voci, una per persona, stanno in «Da fare») */
.adm-form .adm-text {
  font-size: 14px;
  line-height: 1.55;
}
.adm-form .adm-text p {
  margin: 0 0 8px;
}
.adm-form .adm-text ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.adm-cf {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* il riquadro della firma: un foglio bianco, l'inchiostro blu */
.adm-pad {
  position: relative;
  border: 1px solid var(--line-2);
  background: #fff;
}
.adm-pad canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  touch-action: none;
  cursor: crosshair;
}
.adm-pad canvas[aria-invalid='true'] {
  outline: 2px solid var(--red-hi);
  outline-offset: 2px;
}
.adm-pad::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22%;
  border-bottom: 1px dashed #b9b2c4;
  pointer-events: none;
}
.adm-pad-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8a8496;
  font-size: 14px;
  pointer-events: none;
}
.adm-pad-hint[hidden] {
  display: none;
}
.adm-pad-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}