/* ===================
   Invita amici + Programma influencer - vista social, vivace.
   (public/assets/css/invite.css)

   Dove si usa: la pagina /invita e il pannello "Invita amici" del Creator Hub.
   La vista e' la stessa (assets/js/mood-invite.js), quindi lo stile e' lo stesso.

   Perche' un file a parte: le classi nuove sono tutte `.iv-*` e le poche regole
   sui pezzi gia' esistenti sono legate a `#stInviteBody` / `#mvInfluencer`, cosi'
   il resto del Creator Hub non cambia aspetto. I colori sono i token del sito
   (--mood-primary, --mood-accent) e i toni dello studio (--st-*), quindi se un
   giorno si fara' il tema scuro basta cambiare i token.
   ================= */

/* ---------- pagina /invita: sfondo con due aloni morbidi ------------------- */
.iv-page {
    background-color: var(--st-bg, #f0f2f5);
    background-image:
        radial-gradient(900px 420px at 8% -8%, rgba(108, 92, 231, .18), transparent 60%),
        radial-gradient(760px 380px at 100% 0%, rgba(0, 206, 201, .16), transparent 62%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.iv-page .st-container { max-width: 1080px; }

/* ---------- pastiglie di etichetta --------------------------------------- */
.iv-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .32);
    padding: 5px 10px; border-radius: 999px;
}
.iv-kicker--plain { color: var(--mood-primary); background: rgba(108, 92, 231, .1); border-color: rgba(108, 92, 231, .22); }
.iv-kicker svg { width: 14px; height: 14px; }

/* ---------- blocco-locandina (hero) -------------------------------------- */
.iv-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
    gap: 18px; align-items: center;
    padding: 22px; border-radius: 22px; color: #fff;
    background: linear-gradient(135deg, var(--mood-primary) 0%, #8b7cf0 58%, var(--mood-accent) 125%);
    box-shadow: 0 14px 34px rgba(108, 92, 231, .28);
}
.iv-hero::after {                       /* luce morbida in alto a destra */
    content: ''; position: absolute; top: -140px; right: -60px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 62%);
    pointer-events: none;
}
.iv-hero__txt { position: relative; z-index: 1; }
.iv-hero h2 { margin: 10px 0 6px; font-size: 1.55rem; line-height: 1.18; font-weight: 800; color: #fff; }
.iv-hero p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .92); max-width: 46ch; }
.iv-hero__acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.iv-hero__sponsor {
    display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0;
    padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
}
.iv-hero__sponsor svg { width: 15px; height: 15px; }
.iv-hero__sponsor a { color: #fff; font-weight: 800; }

/* ---------- il codice come un biglietto ---------------------------------- */
.iv-ticket {
    position: relative;
    z-index: 1;
    background: var(--background-background);
    color: var(--st-text, #050505);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: 0 10px 26px rgba(16, 16, 36, .22);
}
.iv-ticket::before, .iv-ticket::after {   /* i due intagli del biglietto */
    content: ''; position: absolute; top: 50%; width: 15px; height: 15px;
    border-radius: 50%; transform: translateY(-50%);
}
.iv-ticket::before { left: -8px; background: var(--mood-primary); }
.iv-ticket::after  { right: -8px; background: var(--mood-accent); }
.iv-ticket__label {
    display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--st-text-3, #8a8d91);
}
.iv-ticket code {
    display: block; margin: 6px 0 10px;
    font-family: var(--st-mono); font-size: 1.4rem; font-weight: 700; letter-spacing: .12em;
    color: var(--mood-primary-dark, #5A4BD1); word-break: break-all;
}
.iv-ticket__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iv-ticket__hint { font-size: 12px; color: var(--st-text-2, #65676b); }

/* ---------- blocchi bianchi della vista ---------------------------------- */
.iv-block {
    background: var(--st-surface, #fff);
    border: 1px solid var(--st-border-soft, #e4e6eb);
    border-radius: 18px;
    padding: 16px;
    margin-top: 14px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(16, 16, 36, .05);
}
/* La testata parte dallo STESSO bordo del contenuto: il rientro lo da' il padding della scheda.
   Prima la testata aveva un rientro suo (23px) mentre contenuti e pulsanti stavano a filo del
   bordo (0px): meta' cose rientrate e meta' appiccicate - la segnalazione del titolare (15/09/2026). */
.iv-block__head {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin: 0 0 14px;border-bottom: 1px solid var(--border-color);padding-bottom: 11px;}
.iv-block__head h4 { margin: 0; font-size: 1.02rem; font-weight: 800; }
/* La testata che apre una SECONDA parte dello stesso blocco (es. "Cosa potresti promuovere"):
   stacco piu' largo dal pezzo sopra, cosi' non sembra attaccata ai pulsanti. */
.iv-block__head--dopo { margin-top: 22px; }
.iv-block__head .iv-hint { margin-left: auto; }
.iv-hint { font-size: 12.5px; color: var(--st-text-2, #65676b); margin: 0; line-height: 1.5; }
.iv-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
}
.iv-dot svg { width: 18px; height: 18px; }

/* ---------- riga del link invito ----------------------------------------- */
.iv-link { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-link input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--st-mono);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--st-border, #d7dbe0);
    background: var(--bg-button);
    color: rgba(255, 255, 255, .92);
}
.iv-link input:focus { outline: 2px solid rgba(108, 92, 231, .35); outline-offset: 1px; }

/* ---------- pastiglie di condivisione ------------------------------------ */
.iv-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.iv-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--st-border, #d7dbe0);
    background: var(--st-btn);
    color: var(--st-text, #050505);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.iv-chip svg { width: 16px; height: 16px; }
.iv-chip--primary {
    border: 0; color: #fff;
    background: linear-gradient(135deg, var(--mood-primary), #8b7cf0);
    box-shadow: 0 6px 16px rgba(108, 92, 231, .3);
}
a.iv-chip:hover { transform: translateY(-2px); }
a.iv-chip[href*="wa.me"]:hover  { border-color: #25d366; box-shadow: 0 8px 18px rgba(37, 211, 102, .22); }
a.iv-chip[href*="t.me"]:hover   { border-color: #2aabee; box-shadow: 0 8px 18px rgba(42, 171, 238, .22); }
a.iv-chip[href^="mailto"]:hover { border-color: var(--mood-primary); box-shadow: 0 8px 18px rgba(108, 92, 231, .18); }

/* ---------- QR ----------------------------------------------------------- */
.iv-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; }
.iv-qr__box {
    padding: 10px; background: #fff; border-radius: 16px;
    border: 1px solid var(--st-border-soft, #e4e6eb);
    box-shadow: 0 6px 18px rgba(16, 16, 36, .07);
}
.iv-qr__box svg { display: block; width: 150px; height: 150px; }
.iv-qr__txt b { display: block; font-size: .95rem; margin-bottom: 4px; }
.iv-qr__txt span { display: block; font-size: 12.5px; color: var(--st-text-2, #65676b); line-height: 1.45; }
.iv-qr__url {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 9px;
    font-family: var(--st-mono);
    font-size: 11.5px;
    color: var(--st-text-2, #65676b);
    background: var(--bg-color);
    border-radius: 8px;
    word-break: break-all;
}

/* ---------- numeri: le tre card dei conteggi -----------------------------
   La classe `.st-kpi` e' quella che usa gia' la vista (e che i controlli
   cercano): qui cambia solo l'aspetto, e solo dentro #stInviteBody. */
#stInviteBody .st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
#stInviteBody .st-kpi {
    background: var(--st-btn);
    border: 1px solid var(--st-border-soft, #e4e6eb);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(16, 16, 36, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}
#stInviteBody .st-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(108, 92, 231, .14); }
#stInviteBody .st-kpi b {
    display: block; font-size: 1.65rem; line-height: 1.1; font-weight: 800;
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
#stInviteBody .st-kpi span {
    display: block; margin-top: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--st-text-3, #8a8d91);
}
#stInviteBody .st-kpi.is-muted b { background: none; color: var(--st-text-3, #8a8d91); }

/* ---------- elenco delle persone arrivate grazie a te -------------------- */
.iv-people { display: flex; flex-direction: column; gap: 8px; }
.iv-person {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px;
    background: #f8f9fc; border: 1px solid transparent;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.iv-person:hover { background: #fff; border-color: var(--st-border-soft, #e4e6eb); transform: translateX(2px); }
.iv-av {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; font-size: 15px;
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
}
.iv-av img, .iv-av video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-person__who { min-width: 0; flex: 1 1 auto; }
.iv-person__who b { display: block; font-size: .95rem; }
.iv-person__who b a { color: inherit; text-decoration: none; }
.iv-person__who b a:hover { color: var(--mood-primary); }
.iv-person__who span { display: block; font-size: 12px; color: var(--st-text-2, #65676b); }
.iv-person time {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--st-green, #00a400); background: var(--st-green-soft, #e3f6e3);
    padding: 4px 9px; border-radius: 999px;
}

/* ---------- stato vuoto, amichevole -------------------------------------- */
.iv-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(108, 92, 231, .06), rgba(0, 206, 201, .07));
    border: 1px dashed rgba(108, 92, 231, .3);
    font-size: 13px; color: var(--st-text-2, #65676b);
}
.iv-empty svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--mood-primary); }

/* =================
   Programma influencer (#mvInfluencer) - stessa vista dentro /invita e hub
   ================= */

/* Anche questa sezione e' una colonna: 18px fra un blocco e l'altro (come i pannelli), e il primo
   blocco non aggiunge il suo margine: lo spazio lo decide la colonna. */
#mvInfluencer { display: flex; flex-direction: column; gap: 18px; }
#mvInfluencer > .iv-block { margin-top: 0; }

/* ---------- riga di stato: "ti ha invitato", "in attesa", "sei approvato" -- */
#stInviteBody .st-invite-sponsor {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding: 10px 12px;
    font-size: 13px; border-radius: 14px; color: var(--st-text, #050505);
    background: linear-gradient(135deg, rgba(108, 92, 231, .1), rgba(0, 206, 201, .1));
    border: 1px solid rgba(108, 92, 231, .2);
}
#mvInfluencer .st-invite-sponsor {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 12px 14px;
    font-size: 13.5px; font-weight: 600; border-radius: 14px;
    color: var(--st-text, #050505); border: 1px solid var(--st-border-soft, #e4e6eb); background: #f8f9fc;
}
#mvInfluencer .st-invite-sponsor.is-ok {
    color: #0a6b2d; border-color: rgba(0, 164, 0, .25);
    background: linear-gradient(135deg, rgba(0, 164, 0, .1), rgba(0, 206, 201, .12));
}
#mvInfluencer .st-invite-sponsor.is-wait {
    color: #8a4b00; border-color: rgba(247, 147, 30, .28);
    background: linear-gradient(135deg, rgba(247, 147, 30, .12), rgba(247, 147, 30, .04));
}
#mvInfluencer .st-invite-sponsor.is-off {
    color: var(--st-text-middle);
    border-color: rgba(250, 62, 62, .25);
    background: linear-gradient(135deg, rgba(250, 62, 62, .1), rgba(250, 62, 62, .03));
}
#mvInfluencer .st-invite-sponsor svg { width: 18px; height: 18px; flex: 0 0 auto; }
#mvInfluencer .st-invite-sponsor img.cert-badge { flex: 0 0 auto; }
.iv-code-chip {
    font-family: var(--st-mono); font-size: 12.5px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(0, 164, 0, .3); color: #0a6b2d;
}

/* ---------- i tre passi --------------------------------------------------- */
.iv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.iv-step {
    padding: 12px 12px 12px 14px;
    background: #f8f9fc; border: 1px solid var(--st-border-soft, #e4e6eb);
    border-radius: 14px; font-size: 12.5px; color: var(--st-text-2, #65676b); line-height: 1.45;
}
.iv-step__n {
    width: 26px; height: 26px; border-radius: 50%; margin-bottom: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--mood-primary), var(--mood-accent));
    box-shadow: 0 4px 10px rgba(108, 92, 231, .28);
}
.iv-step b { display: block; font-size: .92rem; color: var(--st-text, #050505); margin-bottom: 2px; }
.iv-step.is-on {
    background: #fff; border-color: rgba(108, 92, 231, .45);
    box-shadow: 0 8px 18px rgba(108, 92, 231, .12); color: var(--st-text-2, #65676b);
}
.iv-step.is-on b { color: var(--mood-primary); }

/* ---------- bottoni della vista ------------------------------------------ */
.iv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
    font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.iv-btn svg { width: 17px; height: 17px; }
.iv-btn--primary {
    color: #fff; background: linear-gradient(135deg, var(--mood-primary), #8b7cf0);
    box-shadow: 0 8px 20px rgba(108, 92, 231, .32);
}
.iv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108, 92, 231, .38); }
.iv-btn--ghost {background: var(--st-btn);color: white;border-color: var(--st-border, #d7dbe0);}
.iv-btn--ghost:hover { border-color: var(--mood-primary); color: var(--mood-primary); }
.iv-btn--quiet {
    background: transparent; color: var(--st-text-2, #65676b);
    border: 1px solid var(--st-border-soft, #e4e6eb); padding: 8px 14px; font-weight: 700;
}
.iv-btn--quiet:hover { color: var(--st-red, #fa3e3e); border-color: rgba(250, 62, 62, .3); }
.iv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* campo "perche' vuoi partecipare" */
#mvJoinNote {
    width: 100%; margin: 8px 0; padding: 11px 12px; border-radius: 12px;
    border: 1px solid var(--st-border, #d7dbe0); background: #f7f8fb;
    font: inherit; font-size: 13.5px; resize: vertical; color: var(--st-text, #050505);
}
#mvJoinNote:focus { outline: 2px solid rgba(108, 92, 231, .35); outline-offset: 1px; }

/* ---------- LA LISTA LUNGA: ricerca, categoria, conto, «Mostra altri» ----------------
   Titolare (07/10/2026): «se abbiamo 1000 prodotti .. ?? la lista come e' gestita !!».
   Con la vetrina a 1000 prodotti servono tre cose, e questa e' la loro veste:
     1) il CAMPO per cercare e la TENDINA della categoria (riga `.iv-filtri`),
     2) il CONTO scritto (`.iv-conta`), perche' un elenco tagliato in silenzio e' una bugia,
     3) «Mostra altri 24» (e' un `.iv-btn--ghost`, dentro `.iv-actions`: nessuno stile nuovo).
   I filtri stanno FUORI dal blocco che si ridisegna (`#ivFiltri` contro `#ivProdotti`): mentre si
   scrive, il cursore non salta. Su un telefono i due campi vanno uno sotto l'altro, a tutta
   larghezza e alti abbastanza da toccarli (46px, la stessa misura dei moduli). */
.iv-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.iv-cerca { position: relative; display: flex; align-items: center; flex: 1 1 190px; }
.iv-cerca svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--st-text-2, #65676b); pointer-events: none; }
.iv-cerca input, .iv-tendina {
    width: 100%; box-sizing: border-box; min-height: 40px;
    padding: 9px 12px; border-radius: 999px;
    border: 1px solid var(--st-border, #d7dbe0); background: var(--st-surface, #fff);
    color: var(--st-text, #050505); font: inherit; font-size: 13.5px;
}
.iv-cerca input { padding-left: 34px; }
.iv-cerca input:focus, .iv-tendina:focus { outline: 2px solid rgba(108, 92, 231, .35); outline-offset: 1px; border-color: var(--mood-primary); }
.iv-cerca input::placeholder { color: var(--st-text-2, #65676b); opacity: .75; }
.iv-tendina { flex: 0 1 210px; }
.iv-conta { margin: 0 0 8px; font-size: 12.5px; color: var(--st-text-2, #65676b); }
.iv-conta b { color: var(--st-text, #050505); }
@media (max-width: 560px) {
    .iv-cerca, .iv-tendina { flex: 1 1 100%; }
    .iv-cerca input, .iv-tendina { min-height: 46px; font-size: 16px; }   /* 16px: il telefono non ingrandisce la pagina da solo */
}

/* ---------- vetrina prodotti: card social -------------------------------- */
.iv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.iv-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-color-dark);
    border: 1px solid var(--st-border-soft, #e4e6eb);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(16, 16, 36, .05);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.iv-card:hover { transform: translateY(-3px); border-color: rgba(108, 92, 231, .35); box-shadow: 0 14px 28px rgba(108, 92, 231, .16); }
.iv-card__img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #ede9fb, #dff7f6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px 19px 5px 5px;
}
.iv-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 19px 19px 5px 5px;
}
/* IL COLLEGAMENTO E' LA FOTO (07/10/2026), non tutta la finestrella: cosi' il bollino della quota
   resta fuori dal `<a>` e toccarlo non porta via dalla pagina. Riempie la foto (che ha gia' la sua
   altezza) e tiene la lettera-segnaposto al centro, come faceva il contenitore prima. */
.iv-card__foto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.iv-card__img span { font-size: 2rem; font-weight: 800; color: var(--mood-primary); opacity: .5; }
/* IL LUCCHETTO DELLA SCHEDA, IN TRASPARENZA SULLA FOTO (04/10/2026).
   Titolare, sulla scheda del prodotto: «questo dovrebbe essere un lucchetto chiuso se non e' stato
   prenotato dall'influencer ... e nell'immagine il lucchetto in trasparenza e' anche nell'immagine».
   Prima qui c'era un TONDINO BIANCO PIENO da 28px coll'icona grigia da 15px dentro: era un timbro
   appoggiato sulla foto, non un lucchetto. Ora il lucchetto e' il disegno e basta - nessun cerchio,
   nessun fondo - e si vede ATTRAVERSO la foto.
   Tre cose imparate, che chi tocca questa regola non deve reimparare:
   1) L'OMBRA SERVE A LEGGERE. Sotto c'e' una foto qualsiasi: un lucchetto bianco su un prodotto chiaro
      sparisce, e uno scuro sparisce su un prodotto scuro. Il bianco velato coll'ombra morbida sotto
      tiene su tutt'e due (nella prima scheda cade sul bianco del letto: misurato).
   2) `pointer-events: none` perche' sotto c'e' la FOTO, che quando il link e' attivo e' il
      collegamento: il lucchetto e' una dichiarazione, non un tasto, e non deve rubare il tocco.
   3) In alto a DESTRA, dove stava il tondino: in alto a SINISTRA c'e' il bollino della quota.
   Il colore ha una riga anche in `opportunity.css`: la' `.op-page .iv-card__img span` vira gli span
   al blu chiaro, e il lucchetto e' uno span (senza quella riga diventerebbe blu su foto chiara). */
.iv-card__lock {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8);
    filter: drop-shadow(0 2px 5px rgba(10, 15, 31, .55));
    pointer-events: none; font-size: 0;
}
.iv-card__lock svg { width: 30px; height: 30px; stroke-width: 2; }
/* ---------- il bollino della quota, SULLA FOTO ---------------------------
   La percentuale che spetta a chi promuove QUEL prodotto: e' il numero che si scrive in
   admin -> Marketplace, campo "Quota a chi promuove (%)". Sta dove i negozi mettono il
   cartellino del prezzo - sulla foto - cosi' chi guarda la scheda sa quanto ricava prima
   di aprirla. In alto a SINISTRA perche' in alto a destra c'e' gia' `.iv-card__lock`.
   Due cose imparate, che chi viene dopo non deve reimparare:
   1) IL FONDO E' PIENO E SCURO. Sotto c'e' una foto qualsiasi: un velo colorato su un
      prodotto chiaro non si legge, e questo e' un numero, non una decorazione. Il blu e'
      #2b4ed0: il bianco sopra sta a 6,7:1 (lo stesso blu "due toni piu' giu'" della
      pillola del prezzo su /opportunity), e il contrasto si MISURA (una prova lo fa).
   2) IL BOLLINO NON E' UN SEGNAPOSTO. Sopra questa foto c'e' una regola larga,
      `.iv-card__img span { font-size: 2rem; opacity: .5 }`, che serve alla lettera
      disegnata quando la card NON ha foto. Quella regola pesca ogni span della foto:
      senza `font-size` e `opacity` scritti qui, il bollino diventerebbe gigante e
      sbiadito. Vale anche per il colore: su /opportunity un'altra regola vira gli span
      al blu chiaro, e li' c'e' la riga che lo rimette a posto (opportunity.css). */
.iv-card__img .iv-card__quota {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 800; line-height: 1.15;
    opacity: 1;
    color: #fff;
    background: #2b4ed0;
    box-shadow: 0 4px 12px rgba(10, 15, 31, .32), 0 0 0 1px rgba(255, 255, 255, .18);
    cursor: help;   /* si puo' chiedere: col puntatore si passa sopra, col dito si tocca */
}
.iv-card__img .iv-card__quota svg { width: 14px; height: 14px; stroke-width: 2.3; color: #fff; }
/* Si vede da dove si e' arrivati, quando si arriva da tastiera. */
.iv-card__img .iv-card__quota:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- IL CONSIGLIO DELLA QUOTA, APERTO DAL DITO (07/10/2026) ----------
   Il titolare: «da mobile se si clicca su percentuale non deve partire verso il link ... desktop
   e' semplice con hover da mobile e' piu' difficile». Su un telefono il `title` non si apre mai:
   il tocco sul numero adesso apre questa frase, e il bollino non sta piu' dentro il collegamento
   (il collegamento e' la foto: `a.iv-card__foto`).

   DUE SCELTE, e il perche'.
   1) STA NELLA SCHEDA, APPENA SOTTO IL BOLLINO: `top: 34px` sono gli 8px del bollino + i suoi 24px
      + 2px d'aria. NON dentro la foto, e non e' un dettaglio: la foto e' alta sedici decimi della
      larghezza, e in una scheda stretta (due colonne, o il pannello del Creator Hub) la frase -
      tre o quattro righe - non ci sta e verrebbe TAGLIATA dal `overflow: hidden` della foto. La
      scheda invece e' alta abbastanza. E la frase non esce lo stesso: anche la scheda ritaglia.
      La prova misura che il bollino non e' coperto e che la frase resta dentro la scheda.
   2) IL FONDO E' PIENO E SCURO. Sotto la frase c'e' la foto (che puo' essere bianca) e poi il
      testo della scheda: il nero a .93 sopra un fondo bianco da' ~rgb(27, 33, 47), cioe' un
      contrasto col bianco di ~13:1, MISURATO sul caso peggiore. */
.iv-card__quota-frase {
    position: absolute; top: 34px; left: 8px; right: 8px; z-index: 4;
    margin: 0; padding: 7px 9px; border-radius: 8px;
    font-size: 11.5px; font-weight: 600; line-height: 1.35;
    opacity: 1;
    color: #fff;
    background: rgba(10, 15, 31, .93);
    box-shadow: 0 6px 18px rgba(10, 15, 31, .35), 0 0 0 1px rgba(255, 255, 255, .14);
}
/* Sul telefono la frase e' il testo piu' importante della scheda in quel momento: si legge. E il
   bollino cresce un po' (il dito non e' un cursore): la frase scende con lui, se no lo coprirebbe. */
@media (max-width: 560px) {
    .iv-card__img .iv-card__quota { padding: 7px 11px; font-size: 13px; }
    .iv-card__quota-frase { top: 42px; font-size: 12.5px; }
}
.iv-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px; flex: 1 1 auto; }
.iv-card__body b {
    font-weight: 200;
    position: relative;
    max-height: 53px;      /* o l'altezza che vuoi */
    overflow: hidden;
}

.iv-card__body b::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
          /* copre il testo sotto */
    padding-left: 4px;
}
.iv-card__price {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--mood-primary-light);
    background: rgba(108, 92, 231, .1);
}
.iv-card__meta { font-size: 12px; color: var(--st-text-2, #65676b); }
/* I TASTI DELLA SCHEDA SONO SOLO ICONE, colla nuvoletta (titolare, 10/10/2026: «usiamo solo icona
   con tips»). Prima erano una colonna di pillole a tutta larghezza coll'icona E il nome su una o
   due righe: la scheda era alta il doppio e sotto la foto ci stava un muro di scritte.
   Ora e' una fila di quadratini tondi. Con `flex-wrap` la fila si spezza invece di sbordare: sulle
   schede strette del telefono (`minmax(146px, 1fr)` -> a 390px la fila ha 139px utili, la scheda 161)
   quattro tasti non ci stanno di fianco, e senza il ritorno a capo la scheda spingeva la pagina di
   lato. Misurato: a 390px e a 360px vanno due per riga, a 1440px tutti e quattro di fianco, e la
   pagina non sborda mai (0px). */
.iv-card__acts {display: flex;gap: 6px;margin-top: auto;padding-top: 4px;flex-wrap: wrap;align-items: center;}
.iv-card__acts .iv-btn {flex: 0 0 auto;width: 38px;height: 38px;padding: 0;gap: 0;}

/* ---------- nota onesta / avviso ---------------------------------------- */
.iv-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 12px; padding: 11px 13px; border-radius: 14px;
    font-size: 12.5px; line-height: 1.5; color: #8a4b00;
    background: rgba(247, 147, 30, .1); border: 1px solid rgba(247, 147, 30, .22);
}
.iv-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
/* Nota informativa: tinta CHIARA del viola di Mood, testo leggibile.
   Non lo sfondo pieno `--mood-primary`: con il testo grigio sopra non si leggeva, e la barra
   scura a filo del bordo sembrava un elemento fuori dalla scheda (misurato prima della correzione:
   sfondo rgb(108,92,231) con testo rgb(101,103,107)). */
.iv-note--info {color: var(--st-text-2, #65676b);background: rgba(108, 92, 231, .07);border-color: rgba(108, 92, 231, .22);}
.iv-note--info svg { color: var(--mood-primary); }

/* ---------- LA NUOVOLETTA DEI TASTI ("tips") ----------------------------
   E' la nuvoletta del pannello (`.adm-tip` in `admin-grafici.css`), rifatta qui perche' le
   pagine pubbliche non caricano `admin.css`: stesso scuro, stesso velo, stessa comparsa.
   Sta `fixed` e non dentro la scheda: le schede con `overflow: hidden` la taglierebbero, e una
   nuvoletta tagliata a meta' non spiega niente. `pointer-events: none` perche' chi legge deve
   poter restare fermo col mouse sul tasto senza che la nuvoletta gli rubi il puntatore. */
.iv-tip {
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    max-width: 17rem;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    background: rgb(16 16 30 / 92%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: #f5f5fa;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}
.iv-tip.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* Chi ha la nuvoletta lo fa capire al mouse: il tasto si tocca, quindi la manina.
   E col DITO non si seleziona niente: il nome si legge tenendo premuto (vedi `agganciaNuvoletta`
   in `mood-invite.js`), e la selezione del telefono — colla lente e col suo menu — coprirebbe
   proprio la nuvoletta. `user-select: none` vale anche in `adm-tip` (pannello). */
[data-iv-tip] { cursor: pointer; -webkit-touch-callout: none; user-select: none; }

@media (prefers-reduced-motion: reduce) { .iv-tip { transition: none; } }

/* ---------- telefono ---------------------------------------------------- */
@media (max-width: 760px) {
    .iv-hero { grid-template-columns: 1fr; padding: 18px; border-radius: 18px; }
    .iv-hero h2 { font-size: 1.3rem; }
    .iv-qr { grid-template-columns: 1fr; }
    .iv-qr__box { justify-self: start; }
    .iv-cards { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
    .iv-card__body { padding: 10px; gap: 5px; }
    .iv-card__body b { font-size: .88rem; }
    .iv-card__acts { flex-wrap: wrap; }
    .iv-card__acts .iv-btn { width: 42px; height: 42px; min-height: 42px; padding: 0; }
    .iv-block { padding: 14px; border-radius: 16px; }
    .iv-ticket code { font-size: 1.2rem; }
}

/* ---------- movimento (solo se il sistema lo consente) ------------------ */
@media (prefers-reduced-motion: no-preference) {
    .iv-hero, .iv-block { animation: iv-up .32s ease both; }
    .iv-block:nth-of-type(2) { animation-delay: .04s; }
    .iv-block:nth-of-type(3) { animation-delay: .08s; }
    @keyframes iv-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =================
   LE DUE LINGUETTE DELLA PAGINA ("Invita amici" - "Programma influencer")
   ---------------
   Richiesta del titolare (14/09/2026): "/opportunity a linguette" - un blocco per volta, cosi'
   la pagina non diventa un muro e ognuno trova subito la sua parte.
   ================= */
.iv-pane[hidden] { display: none; }
/* Il pannello e' una COLONNA: lo spazio fra i blocchi lo decide lui (18px, lo stesso delle
   linguette nuove), non i margini dei singoli blocchi. Cosi' le quattro linguette respirano uguale. */
.iv-pane { display: flex; flex-direction: column; gap: 18px; }
.iv-pane > .iv-block { margin-top: 0; }

/* Le linguette usano lo STANDARD del sito (`st-seg`, lo stesso del Creator Hub): non se ne inventa
   uno nuovo (regola sez.4-septies) - e usano la classe di stato `is-active`, come tutto il resto.
   Qui sotto c'e' solo quello che serve a QUESTA pagina.
   Segnalazione del titolare (14/09/2026): "non e' ok per mobile ma anche su desktop". Il problema:
   due linguette con etichette lunghe - sul telefono si stringevano o scorrevano di lato, su un
   monitor la pill larga tutta la pagina sembrava un altro elemento. Quindi: sul telefono due meta'
   uguali (niente scorrimento, niente parole tagliate), su schermo grande la pill si stringe sul
   suo contenuto invece di allargarsi. */
[data-iv-tabs] { margin: 0 0 18px; }   /* lo stesso passo dei blocchi: 18px */
[data-iv-tabs] .st-seg-btn { min-height: 44px; }

@media (max-width: 560px) {
    /* 16/09/2026 - con QUATTRO etichette lunghe questa striscia stava su una riga sola e scorreva
       di lato (misurato: 624px dentro 340px, la terza linguetta tagliata a meta' parola). Le
       linguette erano due quando questo blocco e' stato scritto (14/09); adesso sono cinque, e una
       striscia che scorre di lato su un telefono non si usa. Quindi: vanno a capo, due per riga. */
    [data-iv-tabs] {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        overflow-x: visible;
        border-radius: 16px;
    }
    [data-iv-tabs] .st-seg-btn {
        flex: 1 1 calc(50% - 2px);
        justify-content: center;
        min-width: 0;
        gap: 5px;
        padding: 9px 10px;
        font-size: .82rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
        border-radius: 12px;
        min-height: 44px;   /* il dito ci sta: era `initial`, cioe' 32px misurati */
    }
    [data-iv-tabs] .st-seg-btn svg { width: 15px; height: 15px; }
}
/* Sui telefoni piu' stretti restano le parole, che sono l'importante. */
@media (max-width: 360px) {
    [data-iv-tabs] .st-seg-btn svg { display: none; }
}

/* =================
   LA SCHEDA DEL PRODOTTO (dentro /opportunity, sotto la card)
   ---------------
   Richieste del titolare (14/09/2026): "il prodotto che apre una tab con tutti i dettagli .. le
   regole d'ingaggio, i riferimenti" e "gli allegati .. non devono aprire altre finestra .. ci
   vuole icona download .. deve indicare quante volte e' stato scaricato".
   Quindi: si apre QUI dentro la pagina; un blocco per volta, largo, testo che respira; gli
   allegati si scaricano col pulsante (nessuna scheda nuova) e dicono quante volte sono stati presi.
   ================= */
.iv-scheda-tenuta { margin: -6px 0 18px; }
.iv-scheda {
    display: flex; flex-direction: column; gap: 26px;
    padding: 22px 20px;
    border: 1px solid var(--mood-border, rgba(255,255,255,.12));
    border-radius: 20px;
    background: var(--mood-bg-card, rgba(255,255,255,.03));
    animation: iv-scheda-su .3s ease both;
}
@keyframes iv-scheda-su { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.iv-scheda__testata {display: flex;align-items: flex-start;gap: 16px;flex-direction: column;}
.iv-scheda__foto {
    width: 108px; height: 108px; object-fit: cover; border-radius: 16px; flex: 0 0 auto;
    background: rgba(255,255,255,.05);
}
.iv-scheda__chi { min-width: 0; }
.iv-scheda__chi h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.iv-scheda__dove { font-size: 13px; opacity: .7; }

.iv-scheda__blocco { display: flex; flex-direction: column; gap: 10px; }
.iv-scheda__capo { display: flex; align-items: center; gap: 8px; }
.iv-scheda__capo svg { width: 16px; height: 16px; opacity: .75; }
.iv-scheda__capo h4 { margin: 0; font-size: 15px; letter-spacing: .2px; }
.iv-scheda__testo { font-size: 15px; line-height: 1.65; opacity: .92; }

/* Gli allegati: una riga per file, col pulsante e il numero di volte che e' stato preso. */
.iv-allegati { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iv-allegato {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: rgba(255,255,255,.04);
}
.iv-allegato__detto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.iv-allegato__titolo { font-size: 15px; }
.iv-allegato__nome { font-size: 12px; opacity: .6; overflow-wrap: anywhere; }
.iv-allegato__desc { font-size: 13px; opacity: .8; }
.iv-allegato__conto { font-size: 12.5px; opacity: .7; white-space: nowrap; }
.iv-scarica { flex: 0 0 auto; }
.iv-scarica svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
    .iv-scheda { padding: 18px 15px; gap: 22px; }
    .iv-scheda__testata { flex-direction: column; }
    .iv-scheda__foto { width: 100%; height: 170px; }
    .iv-allegato__conto { white-space: normal; }
    .iv-scarica { width: 100%; justify-content: center; }
}

}
/* La scheda del prodotto VIVE DENTRO LA LASTRA a tutto schermo (regola sez.0): li' non serve il
   riquadro con bordo e ombra - la lastra e' gia' il contenitore. Il contenuto resta una colonna
   leggibile al centro: su un monitor grande le righe non si allungano, sul telefono e' piena. */
.mood-lastra .iv-scheda {
    border: 0; border-radius: 0; background: transparent; padding: 0;
    max-width: 900px; margin: 0 auto; animation: none;
}
.mood-lastra .iv-scheda__foto { width: 100%; height: 200px; }

@media (min-width: 900px) {
    .mood-lastra .iv-scheda__testata { flex-direction: row; align-items: flex-start; }
    .mood-lastra .iv-scheda__foto { width: 140px; height: 140px; }
}


/* ==================
   INFLUENCER DISPONIBILI (terza linguetta di /opportunity)
   ------------------
   "Influencer disponibili chi sono .. in cosa sono esperti e cosa possono fare .. i profili social
   dove ha gia' i propri follower .. importantissimo .. se e' gia' un prodotto o sponsor" (14/09/2026).
   Stile landing: schede larghe, testo che respira, un blocco per volta.
   ================== */
.iv-disp { display: flex; flex-direction: column; gap: 14px; }
.iv-disp__card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px; border-radius: 18px;
    border: 1px solid var(--mood-border, rgba(255,255,255,.12));
    background: var(--mood-bg-card, rgba(255,255,255,.03));
}
.iv-disp__chi { display: flex; align-items: center; gap: 12px; }
.iv-disp__foto {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    background: rgba(255,255,255,.06);
}
/* Un video dell'avatar: come la foto, ma senza lo spazio di base dell'elemento in linea. */
video.iv-disp__foto { display: block; }
.iv-disp__foto--lettera {
    display: grid; place-items: center; font-weight: 700; font-size: 20px;
    color: var(--mood-text-muted, #9a9ab0);
}
.iv-disp__testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-disp__nome { font-size: 17px; }
.iv-disp__dove { font-size: 13px; opacity: .7; }
.iv-disp__bio { font-size: 13px; opacity: .75; }
.iv-disp__stato { font-size: 12.5px; opacity: .7; }
/* Il verde di stato: sul fondo CHIARO il verde "da schermo scuro" (#2e9e5b) dava 3,4:1 -
   sotto la soglia di leggibilita' (4,5:1). Misurato il 15/09/2026 sulla pagina viva. */
.iv-disp__stato.is-disponibile { color: #1f7a45; opacity: 1; }          /* chiaro: 5,3:1 */
[data-theme="dark"] .iv-disp__stato.is-disponibile { color: #4cd07d; }  /* scuro:  9,1:1 */
.iv-disp__esperto { margin: 0; font-size: 14.5px; line-height: 1.6; }
.iv-disp__esperto.is-vuoto { opacity: .6; font-style: italic; }
/* Il markdown delle presentazioni (titolare, 15/09/2026: "la parte esperta ... andrebbe formattato
   come markdown"): elenchi con i segni al posto giusto, e le righe singole che RESTANO righe. */
.iv-md {margin: 4px 0 0;padding-left: 20px;border-radius: 10px;}
.iv-md li {margin: 3px 0px;padding: 5px 10px 8px 13px;border-radius: 0px 10px 10px 0px;}
.iv-md li::marker {color: var(--mood-primary, #6C5CE7);background: var(--background-color);}
.iv-md li::before {
    content:"";
    min-width: 28px;
    background: var(--mood-save-soft);
    margin-left: -35px;
    padding: 8px 13px 11px 10px;
    display: math;
    position: relative;
    z-index: 0;
    border-radius: 10px 0px 0px 10px;
    }

.iv-md__riga { display: block; }
.iv-md__titolo { display: block; margin-top: 8px; }
.iv-disp__esperto a { color: var(--mood-primary, #6C5CE7); font-weight: 600; }
.iv-disp__esperto code, .iv-hint code {
    font-family: var(--st-mono, ui-monospace, Menlo, monospace); font-size: .92em;
    padding: 1px 5px; border-radius: 6px;
    background: var(--st-accent-soft, rgba(108, 92, 231, .12));
}
.iv-disp__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.iv-disp__etich {
    font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; margin-right: 2px;
}
.iv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--mood-border, rgba(255,255,255,.12));
    font-size: 12.5px;
    /* color: inherit; */
}
.iv-chip--social { background: rgba(255,255,255,.04); }
.iv-chip--sponsor { border-color: #c9a227; color: #c9a227; }
.iv-chip svg { width: 14px; height: 14px; }
.iv-disp__prodotti {list-style: none;margin: 0 0 10px;padding: 0;display: flex;flex-direction: column;gap: 8px;}
.iv-disp__prodotto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--st-border);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.iv-disp__prodotto-titolo {
    flex: 1 1 220px;
    font-size: 0.8rem;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    /* gap: 10px; */
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    appearance: none;
    border: none;
    background: transparent;
    flex-direction: column;
}

/* Il modulo della candidatura: i dati del profilo si MOSTRANO, il resto si sceglie.
   Ritmo a GRUPPI (titolare, 15/09/2026: "testi appiccicati ... il contesto non si distingue"):
   il titolo e "chi sei" stanno VICINI (10px), le parti del modulo distano 18px, la chiusura
   (pulsante + stato) 14px. Prima erano 14px tutti uguali: misurato `[14, 14, 14, 14, 14, 24]` -
   niente da cui l'occhio capisce dove finisce una cosa e comincia l'altra. */
.iv-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 18px 16px;
    border-radius: 18px;
    border: 2px solid #ffb020;
    background: var(--mood-bg-card, #ffb020e6);
}
.iv-form > * + * { margin-top: 18px; }
.iv-form__capo + .iv-form__profilo { margin-top: 10px; }
.iv-form > .iv-actions { margin-top: 14px; }
.iv-form__capo { display: flex; flex-direction: column; gap: 4px; }
.iv-form__capo b:not(.iv-form .iv-hint b) {font-size: 16px;padding: 6px 0px 9px 0px;}
/* I dati del profilo: righe IMPILATE (come nelle schede) e su un fondo proprio, cosi' non si
   confondono col modulo. Prima il contenitore non aveva regola e nome, @nomeutente e bio
   scorrevano su UNA riga sola appiccicati: misurato, tutti e tre fra 696,9 e 714,9 (stessa riga). */
.iv-form__profilo {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--st-accent-soft, rgba(108, 92, 231, .10));
}
.iv-form__profilo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-form__campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px;
}
label span{
    padding-left: 13px;
}
/* Dentro il modulo lo spazio dei suggerimenti lo da' la colonna (7px): il margine proprio no,
   altrimenti la stessa coppia etichetta+aiuto distava 6, 10 o 16px a seconda del contenitore. */
.iv-form .iv-hint { margin: 0; }
.iv-form__campo > span:first-child { font-weight: 600; font-size: 13.5px; }

/* I CAMPI - una regola per TUTTI i tipi: input, select e textarea.
   Prima era vestito il solo `textarea`. Misurato dal vivo il 16/09/2026, nel modulo "Prenota la
   collaborazione": input alto **19px**, raggio 0, imbottitura 0, bordo 2px rgb(118,118,118);
   select 17px, bordo 1px rgb(118,118,118) - cioe' il vestito di Chrome, uguale su scrivania e su
   telefono. Un campo del browser ha GIA' un bordo: "c'e' una linea" sembrava "c'e' uno stile", e
   guardando non se ne accorge nessuno. Su un telefono, 19px non si toccano.
   Una regola sola (non tre) perche' il tipo di campo che si aggiungera' domani non resti nudo.
   Le caselle di spunta sono ESCLUSE (`:not`): dentro questo contenitore ci sono anche le categorie
   di prodotto, e una regola larga le avrebbe gonfiate a riquadri larghi quanto la scheda. */
.iv-form__campo input:not([type="checkbox"]):not([type="radio"]),
.iv-form__campo select, .iv-form__campo textarea,
.iv-sociale__nuovo input, .iv-sociale__nuovo select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid #F44336;
    background: var(--st-surface, #fff);
    color: var(--st-text, #050505);
    font: inherit;
    font-size: 14.5px;
    line-height: 1.4;
}
/* Dove si sta scrivendo si deve VEDERE: due segnali (anello e bordo), non uno. */
.iv-form__campo input:focus, .iv-form__campo select:focus, .iv-form__campo textarea:focus,
.iv-sociale__nuovo input:focus, .iv-sociale__nuovo select:focus {
    outline: 2px solid rgba(108, 92, 231, .35); outline-offset: 1px;
    border-color: var(--mood-primary);
}
/* Il suggerimento serve a capire cosa scrivere: si legge, ma non si confonde col testo scritto. */
.iv-form__campo input::placeholder, .iv-form__campo textarea::placeholder {
    color: var(--st-text-2, #65676b); opacity: .75;
}
.iv-form__scelte { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-form__scelta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.iv-form__quanti { opacity: .6; font-size: 12px; }
.iv-form__sociali { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iv-sociale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.iv-sociale.is-vuoto { opacity: .6; font-style: italic; }
.iv-sociale__nuovo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iv-sociale__nuovo input, .iv-sociale__nuovo select { flex: 1 1 130px; width: auto; }
.iv-form__disponibile { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.iv-form__errore { margin: 0; font-size: 13.5px; color: #e0554a; }

@media (max-width: 700px) {
    .iv-disp__card, .iv-form { padding: 14px 13px; }
    .iv-disp__prodotto-titolo { flex: 1 1 100%; }
    .iv-sociale__nuovo input, .iv-sociale__nuovo select { flex: 1 1 100%; }
    .iv-sociale__nuovo .iv-btn { width: 100%; justify-content: center; }
    /* Sul telefono i campi si toccano: 16px di misura - sotto i 16 il telefono ingrandisce la
       pagina al primo tocco e il modulo "salta" sotto il dito - e 46px di altezza, la stessa
       lezione dei 44px delle linguette. Il pulsante in fondo e' la fine del modulo: si tocca
       senza mirare. */
    .iv-form__campo input:not([type="checkbox"]):not([type="radio"]),
    .iv-form__campo select, .iv-form__campo textarea { font-size: 16px; min-height: 46px; }
    .iv-form__campo textarea { min-height: 108px; }
    .iv-form > .iv-actions .iv-btn { min-height: 46px; }
}


/* ==================
   LE "STORIE" DEGLI INFLUENCER DISPONIBILI, e le viste (persona / candidatura)
   ------------------
   Richiesta del titolare (14/09/2026): "tipo banner social .. tipo le storie ma piu' piccole ....
   con avatar nome .. e poi aggiungi la tua candidatura sempre come banner.. verticale .. e
   cliccando sul singolo influencer ci sono i dati che ha fornito .. quando clicchi su aggiungi la
   tua candidatura si apre in modo landing page.. sopra la parte hero.. e sotto i dati".
   ================== */
.iv-storie {
    display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px;
    /* Ogni tessera e' alta quanto il suo contenuto: cosi' il banner della candidatura puo'
       essere VERTICALE davvero, invece di allinearsi alle storie. */
    align-items: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.iv-storie::-webkit-scrollbar { display: none; }
.iv-storia {
    flex: 0 0 auto; width: 86px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 4px 0; margin: 0;
    color: inherit; cursor: pointer; font: inherit;
}
.iv-storia__cerchio {
    flex: 0 0 auto;
    width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: rgba(255,255,255,.06);
    border: 2px solid transparent;
}
.iv-storia__cerchio img, .iv-storia__cerchio video { width: 100%; height: 100%; object-fit: cover; }
.iv-storia__cerchio b { font-size: 24px; opacity: .8; }
.iv-storia__cerchio.is-disponibile { border-color: #2e9e5b; }
.iv-storia__nome {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 30px; margin-top: 2px;
    font-size: 12px; line-height: 1.25; text-align: center;
}
.iv-storia__stato {font-size: 11px;opacity: .6;text-align: center;line-height: 13px;}
/* La TUA storia: la MATITA dice che si tocca per modificare i tuoi dati (titolare, 15/09/2026:
   "sul proprio iv-storia ci deve essere icona matita per editare aggiornare .... i dati").
   Il cerchio tiene `overflow: hidden` (la foto e' tonda): la matita sta FUORI dal cerchio,
   dentro un contenitore suo che non taglia niente. */
.iv-storia__foto { position: relative; display: flex; }
.iv-storia__matita {
    position: absolute; right: -3px; bottom: -3px;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mood-primary, #6C5CE7); color: #fff;
    box-shadow: 0 0 0 2px var(--st-surface, #fff);
}
.iv-storia__matita svg { width: 12px; height: 12px; }
.iv-storia:hover .iv-storia__cerchio { transform: translateY(-2px); }

/* Il banner VERTICALE della candidatura: piu' alto delle persone, cosi' si distingue. */
.iv-storia--candidatura { width: 92px; }
.iv-storia--candidatura .iv-storia__cerchio {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px dashed var(--mood-border, rgba(255,255,255,.28));
}
.iv-storia--candidatura .iv-storia__nome {font-weight: 600;font-size: 12px;}
.iv-storia__cerchio--piu svg { width: 26px; height: 26px; opacity: .75; }

/* Le viste: "Torna all'elenco" e la scheda in stile landing (hero sopra, blocchi sotto). */
.iv-torna {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px;
    min-height: 44px; padding: 10px 2px;   /* dito comodo */
    background: transparent; border: 0;
    color: inherit; cursor: pointer; font: inherit; font-size: 13.5px; opacity: .8;
}
.iv-torna svg { width: 16px; height: 16px; }
/* La vista e' una COLONNA leggibile al centro: su un monitor grande il testo non si stende. */
.iv-vista {display: flex;flex-direction: column;gap: 20px;width: 100%;max-width: 680px;margin: 0 auto 2rem auto;}
.iv-vista__hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 10px 0 2px;
}
.iv-vista__foto {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgb(3 169 244 / 24%);
    box-shadow: 0px 0px 1px 3px #3F51B5;
}
.iv-vista__foto img, .iv-vista__foto video { width: 100%; height: 100%; object-fit: cover; }
.iv-vista__foto b { font-size: 34px; opacity: .8; }
.iv-vista__chi { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.iv-vista__nome { margin: 0; font-size: 22px; line-height: 1.2; }
.iv-vista__dove { font-size: 13.5px; opacity: .7; }
.iv-vista__bio { margin: 0; font-size: 15px; line-height: 1.6; opacity: .9; text-align: center; }
.iv-vista__blocco { display: flex; flex-direction: column; gap: 10px; }
.iv-vista__blocco h4 {
    margin: 0; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; opacity: .55;
}

@media (max-width: 700px) {
    .iv-vista__foto { width: 88px; height: 88px; }
    .iv-storia { width: 78px; }
    .iv-storia__cerchio { width: 52px; height: 52px; }
    .iv-storia--candidatura { width: 84px; }
    .iv-storia--candidatura .iv-storia__cerchio {width: 52px;height: 51px;}
}


/* ==================
   I SUOI GUADAGNI (quarta linguetta): hero + linguette interne + tavola
   ------------------
   "un vero e proprio mini gestionale .. intuitivo sempre in stile landing page.. sopra hero.. e sotto
   le linguette con le singole aree" (titolare, 14/09/2026).
   ================== */
.iv-aree { margin-bottom: 18px; max-width: 100%; }
.iv-aree__corpo { display: flex; flex-direction: column; gap: 14px; max-width: 100%; overflow-x: auto; }
.iv-resoconto { width: 100%; border-collapse: collapse; font-size: 14px; }
.iv-resoconto th {
    padding: 10px 12px; text-align: left; white-space: nowrap;
    font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; opacity: .55;
    border-bottom: 1px solid var(--mood-border, rgba(255,255,255,.12));
}
.iv-resoconto td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.iv-resoconto tr:last-child td { border-bottom: 0; }
.iv-resoconto td.is-vuoto { opacity: .45; }

@media (max-width: 700px) {
    /* Sei colonne non stanno in un telefono: la tavola scorre di lato DENTRO il suo riquadro,
       invece di spingere tutta la pagina. */
    .iv-resoconto { min-width: 500px; }
}


/* ==================
   LE DUE LINGUETTE NUOVE: niente blocchi appiccicati, icone a misura
   ------------------
   Segnalazione del titolare (14/09/2026): "in alcuni punti i testi sono disallineati .. margini
   appiccicati ... mancano diverse classi css".
   Misurato: fra hero e storie lo spazio era ZERO, e le icone (lucide) dentro i testi non avevano
   regola di misura - restavano 24px dentro righe da 12-13px, spostando il testo. Qui si sistema.
   ================== */
/* Uno spazio uguale fra i blocchi del pannello: il pannello e' la colonna. */
#ivDisponibili, #ivGuadagni { display: flex; flex-direction: column; gap: 18px; }
/* I figli NON aggiungono il loro margine: la colonna ha gia' il suo passo di 18px. Senza queste
   righe gli spazi veri erano 32px (18 di colonna + 14 di margine) e 36px (18 + 18 della linguetta
   interna): misurato - "alcuni appiccicati, altri distanti" (titolare, 15/09/2026). */
#ivDisponibili > .iv-block, #ivGuadagni > .iv-block { margin-top: 0; }
#ivGuadagni > .iv-aree { margin-bottom: 0; }

/* Le icone dentro i testi nuovi: la MISURA la decide la classe, non il disegno di default. */
.iv-storia__nome svg { width: 13px; height: 13px; vertical-align: -2px; opacity: .8; }
/* Le icone dei social: sono MARCHI (disegni pieni, 24x24), non icone a tratto, e non stanno in
   lucide: la misura e il colore li decide questa classe (fill: currentColor). */
.iv-marco {
    width: 13px; height: 13px; flex: 0 0 auto;
    fill: currentColor; vertical-align: -2px; opacity: .9;
}
.iv-chip--social .iv-marco { width: 14px; height: 14px; opacity: 1; }   /* come le altre icone della pastiglia */
.iv-sociale .iv-marco { width: 15px; height: 15px; vertical-align: -3px; }
.iv-vista__nome svg  { width: 18px; height: 18px; vertical-align: -3px; opacity: .85; }
.iv-vista__blocco h4 svg { width: 14px; height: 14px; vertical-align: -2px; }
.iv-disp__prodotto-titolo svg { width: 15px; height: 15px; vertical-align: -3px; }
.iv-aree svg { width: 15px; height: 15px; }

/* I testi partono dal bordo INTERNO della scheda: il rientro lo da' il `padding: 16px` di
   `.iv-block`, uno solo per tutti (testate comprese).
   Prima qui c'era anche `.iv-block { padding-inline: 0 }`: azzerava il rientro dei CONTENUTI
   (pulsanti, card e note a filo del bordo) lasciando le testate rientrate di 23px - da li' "i
   margini appiccati" e la nota in fondo che sembrava uscire dalla scheda (titolare, 15/09/2026). */
.iv-aree__corpo { padding-inline: 0; }

/* =================
   LE PREVISIONI (dentro /opportunity, terza linguetta)
   ---------------
   Richiesta del titolare (15/09/2026): "una sorta di previsioni su quanto e chi portera' e entro
   quanto tempo ... la stima ci permette di tutelare l'influencer". E la sua regola: stile landing,
   pochi dati. Quindi: i numeri in quattro riquadri in cima, le schede raggruppate per periodo,
   il modulo CHIUSO finche' non serve (si apre con "Aggiungi un previsto").
   I colori dei livelli di fiducia sono tre e si distinguono a colpo d'occhio: grigio, verde,
   pieno. Nessun colore nuovo inventato: si usano le variabili del sito, che cambiano col tema.
   ================= */
.pr-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pr-tot__cella {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-btn);
}
.pr-tot__eti { font-size: 12px; color: var(--st-text-2, #65676b); }
.pr-tot__cella b { font-size: 1.15rem; font-weight: 800; }
.pr-tot__dopo { font-size: 11.5px; color: var(--st-text-2, #65676b); }

.pr-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pr-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border: 1px solid var(--st-border); border-radius: 16px; background: var(--st-surface);
}
.pr-card__testa { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pr-card__testa b { font-size: 1rem; font-weight: 800; }
.pr-card__riga { font-size: 13px; color: var(--st-text-2, #65676b); }
.pr-card__numeri {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: 13px; color: var(--st-text-2, #65676b);
}
.pr-card__numeri b { font-size: 1.05rem; color: var(--st-text); }
.pr-card__azioni { margin-top: auto; }

.pr-pill {
    font-size: 11.5px; font-weight: 700; padding: 4px 9px;
    border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.pr-pill--probabile { color: var(--st-text-2, #65676b); background: rgba(101, 103, 107, .12); }
.pr-pill--probabile_piu { color: #2f6d4f; background: rgba(47, 109, 79, .14); border-color: rgba(47, 109, 79, .22); }
.pr-pill--quasi_sicuro { color: #fff; background: var(--mood-primary); }

.pr-form {
    margin: 14px 0 0;
    padding: 14px;
    border: 1px solid var(--st-border);
    border-radius: 16px;
    background: var(--st-btn);
    box-shadow: 0 0 1px 5px rgb(58 135 241);
}
.pr-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pr-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--st-text-2, #65676b); }
.pr-campo--largo { grid-column: 1 / -1; }
.pr-campo input, .pr-campo select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 12px;
    background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .9rem;
}
.pr-campo input:focus, .pr-campo select:focus {
    outline: 2px solid rgba(108, 92, 231, .35); outline-offset: 1px; border-color: var(--mood-primary);
}
.pr-errore {
    display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 9px 12px;
    border-radius: 12px; font-size: 13px; color: #8a1f1f;
    background: rgba(250, 62, 62, .1); border: 1px solid rgba(250, 62, 62, .25);
}
.pr-errore svg { width: 15px; height: 15px; }

/* ---- Il pezzo (b): cosa ha detto la PERSONA, e il link da mandare ----
   La dichiarazione della persona e' la cosa che protegge, quindi si vede subito e si distingue:
   verde quando ha confermato, rosso quando ha detto di no. `non_confermato` NON e' un errore
   dell'influencer: e' una risposta arrivata, e va letta come un'informazione, non come una punizione. */
.pr-stato {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.35;
}
.pr-stato svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.pr-stato--si { color: #2f6d4f; background: rgba(47, 109, 79, .12); border: 1px solid rgba(47, 109, 79, .22); }
.pr-stato--no { color: #8a1f1f; background: rgba(250, 62, 62, .1); border: 1px solid rgba(250, 62, 62, .22); }

.pr-link {
    display: flex; flex-direction: column; gap: 8px; margin-top: 2px;
    padding: 12px; border: 1px solid var(--st-border); border-radius: 14px; background: var(--st-btn);
}
.pr-link__testa { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.pr-link__testa svg { width: 15px; height: 15px; }
.pr-link__url {
    width: 100%; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 12px;
    background: var(--st-surface); color: var(--st-text); font: inherit; font-size: .85rem;
    text-overflow: ellipsis;
}
.pr-link .iv-hint { margin: 0; }

@media (max-width: 560px) {
    .pr-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-griglia { grid-template-columns: minmax(0, 1fr); }
    /* Il link si legge su un telefono: riga alta e carattere leggibile (sotto i 16px il telefono
       ingrandisce la pagina da solo, e si finisce a leggere un link mezzo tagliato). */
    .pr-link__url { min-height: 46px; font-size: .9rem; }
}


/* ====================== PRENOTA LA COLLABORAZIONE ======================
   "se uno vuole prenotare un influencer ... deve inviare la richiesta a NOI ... il prenota e' una scheda
   in stile landing page che chiede i dati di chi sta chiedendo ... e una scheda intervista, sui motivi
   e prodotti" (titolare, 16/09/2026). Prefisso `iv-`, lo stesso della linguetta in cui vive:
   e' la sezione "Influencer disponibili".
   ====================================================================== */

/* La porta: in fondo alla scheda di una persona, sempre visibile. */
.iv-prenota {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    margin-top: 16px; padding: 16px 18px; border-radius: 18px;
    border: 1px solid var(--st-border); background: var(--st-surface);
}
.iv-prenota__testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iv-prenota__testo b { font-size: 16px; }
.iv-prenota__testo span { font-size: 13px; color: var(--st-text-2, #65676b); }
.iv-prenota__btn { flex: 0 0 auto; }
.iv-nota { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--st-text-2, #65676b); }

/* Dove va a finire la richiesta, detto PRIMA di scrivere: arriva a Mood, non all'influencer. */
.iv-hint--prenota {
    margin: 14px 0 0; padding: 12px 14px; border-radius: 14px;
    background: rgba(108, 92, 231, .08); border: 1px solid rgba(108, 92, 231, .22);
    font-size: 13px; line-height: 1.55; color: var(--st-text-2, #65676b);
}

/* Due campi affiancati - e uno solo quando lo spazio non c'e' (niente campi larghi 150px). */
.iv-form__due { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Fatto: la conferma prende il posto del modulo (il modulo e' servito, non si ricompila a vuoto). */
.iv-fatto {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    margin-top: 16px; padding: 20px; border-radius: 18px;
    border: 1px solid rgba(46, 158, 91, .35); background: rgba(46, 158, 91, .08);
}
.iv-fatto svg { width: 26px; height: 26px; color: #2e9e5b; }
.iv-fatto b { font-size: 17px; }
.iv-fatto span { font-size: 13.5px; line-height: 1.55; color: var(--st-text-2, #65676b); }

/* Le mie richieste di collaborazione, in fondo all'elenco. */
.iv-richieste {
    display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
    padding: 16px 18px; border-radius: 18px;
    border: 1px solid var(--st-border); background: var(--st-surface);
}
.iv-richieste__capo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.iv-richieste__capo b { font-size: 16px; }
.iv-richiesta {
    display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--st-border); border-left-width: 3px;
    background: rgba(255, 255, 255, .03);
}
.iv-richiesta__chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-richiesta__stato {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 13px; font-weight: 600;
}
.iv-richiesta__risposta { font-weight: 400; font-style: italic; color: var(--st-text-2, #65676b); }
/* A che punto e', senza aggiungere una parola: una riga di colore a sinistra. */
.iv-richiesta--inviata         { border-left-color: #c9a227; }
.iv-richiesta--presa_in_carico { border-left-color: #6C5CE7; }
.iv-richiesta--confermata      { border-left-color: #2e9e5b; }
.iv-richiesta--rifiutata       { border-left-color: #e0554a; }
.iv-richiesta--annullata       { border-left-color: var(--st-border); opacity: .65; }

/* Sul telefono: una colonna e il dito comodo (44px) - la lezione delle linguette del 16/09. */
@media (max-width: 560px) {
    .iv-prenota { flex-direction: column; align-items: stretch; }
    .iv-prenota__btn { min-height: 44px; justify-content: center; }
    .iv-richiesta { flex-direction: column; align-items: flex-start; }
}


/* ====================== PRENOTA UN PRODOTTO DELLA VETRINA ======================
   "Prodotti in vetrina dice libero ma non e' prenotabile .. manca la parte di prenotazione .. e sempre
   una landing page con intervista .. su come pensa di orientarsi .. per la promozione" (titolare,
   16/09/2026). E' lo stesso blocco qui sopra con l'oggetto cambiato - il prodotto - e una differenza:
   il bollino diventa una PORTA. "libero" da solo non portava da nessuna parte.
   =============================================================================== */

/* La riga del prodotto: ora e' un PULSANTE. Si tocca la riga intera, non una parolina in fondo. */
.iv-disp__prodotto {background: transparent; }
.iv-disp__prodotto-vai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    appearance: none;
    border: none;
    background: transparent;
}
.iv-disp__prodotto-vai:hover { border-color: var(--mood-primary); background: rgba(108, 92, 231, .10); }
.iv-disp__prodotto-vai:focus-visible { outline: 2px solid rgba(108, 92, 231, .5); outline-offset: 2px; }
.iv-disp__prodotto-azione {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--mood-primary);
}
.iv-disp__prodotto-azione svg { width: 15px; height: 15px; }
/* "In valutazione": c'e' una richiesta aperta su quel prodotto. Non e' "gia' di qualcuno" (non e' deciso)
   e non e' nemmeno "libero": dirlo com'e' evita due richieste per lo stesso prodotto. */
.iv-chip--attesa { border-color: rgba(108, 92, 231, .45); color: #6C5CE7; }

/* La testata: la foto del prodotto ha gli angoli (e' una merce, non una faccia) e un filo neutro
   invece dell'anello delle storie - stessa misura dell'avatar, cosi' la scheda si legge come quella
   di una persona. */
.iv-vista__hero--prodotto .iv-vista__foto { border-radius: 18px; }
.iv-vista__foto--prodotto { box-shadow: 0 0 0 1px var(--st-border); }

/* La porta della candidatura: chi non e' nel programma non compila un modulo che non porta a niente. */
.iv-prenota--porta { flex-direction: column; align-items: stretch; gap: 14px; }

/* Le mie richieste di promozione: stesso blocco delle altre, con un filo di colore diverso perche'
   scorrendo si capisca che sono un'altra cosa (un prodotto, non una persona). */
.iv-richieste--vetrina { border-left: 3px solid var(--mood-primary); }

/* Sul telefono: una colonna e il dito comodo (44px) - la lezione delle linguette del 16/09. */
@media (max-width: 560px) {
    .iv-disp__prodotto-vai { min-height: 44px; }
    .iv-disp__prodotto-azione { flex: 1 1 100%; }
    .iv-prenota--porta .iv-prenota__btn { min-height: 44px; }
}

.iv-hint {display: block;margin: 10px 0 0px;padding-left: 14px;padding-right: 14px;}