/*
 * NEXUS PRIME | MODULO ISOLATO — «CONTATTA IL SELLER» (11/10/2026, revisione)
 * Radice univoca: `.nx-nxp-matchmaking-section` (esiste SOLO in questa vista).
 *
 * PERCHÉ QUESTA REVISIONE. La prima stesura era approssimata, e il motivo era misurabile:
 *
 *   1. USO DI TOKEN INESISTENTI. Il modulo usava `--text-muted`, `--success`, `--danger` e `--nxp-radius`:
 *      verificato sui fogli davvero caricati, i primi tre NON esistono da nessuna parte e il quarto non è
 *      globale. `color: var(--text-muted)` non è «un colore sbagliato»: è una dichiarazione non valida, che
 *      il browser SCARTA. Risultato: testi secondari senza colore, messaggi di esito invisibili, raggi a
 *      caso. Qui si usano solo token verificati come globali e definiti in ENTRAMBI i temi:
 *      `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-dim`, `--border-subtle`, `--accent-gold`,
 *      `--accent-gold-rgb`, `--accent-success`, `--accent-error`. (Il tema scuro è il `base`; il chiaro lo
 *      sovrascrive: scegliendo questi, entrambi i temi sono corretti per costruzione.)
 *
 *   2. RITMO VERTICALE CONTESO. Intorno a questa sezione la casa ha tre `!important` in tre punti
 *      (`p`, `.nx-form-group`, `.btn-match-request`) più le regole di tre file globali caricati in cascata:
 *      gli spazi erano la somma di scontri, non una scala. Qui il modulo prende il controllo della sua area
 *      e impone UNA scala (16px fra i blocchi, 6px fra etichetta e campo). Dove la casa usa `!important`,
 *      il modulo lo usa a sua volta: a parità di peso vince chi è caricato dopo, e questo file è l'ultimo.
 *
 *   3. DUE CAMPI APPICCATI SUL TELEFONO. `.nx-form-row` è flex, ma la sua regola per gli schermi stretti
 *      imposta `grid-template-columns` — su un contenitore flex non fa nulla. Sul telefono i due campi
 *      restavano affiancati e stretti. Qui la riga è una griglia che diventa a una colonna sotto 720px.
 *
 * COSA NON SI TOCCA. Il bottone d'azione (`.nx-nxp-btn` / `.is-buy`) è già definito dalla casa (gradiente
 * oro `#ffa41c → #fa8914`, testo scuro, raggio 4px): il modulo non lo ristilizza, si limita a dagli aria
 * (`:focus-visible`) e a non combatterlo. I fogli degli altri moduli restano intatti.
 */

/* ── RITMO DEL MODULO + IL MODULO DI CONTATTO ───────────────────────────────────────────────── */

.nx-nxp-matchmaking-section .nx-node-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.nx-nxp-matchmaking-section .nx-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 720px) {
    .nx-nxp-matchmaking-section .nx-form-row {
        grid-template-columns: 1fr;
    }
}

/* I 1.5rem !important di casa sono sostituiti dal `gap` qui sopra: uno solo dei due deve vincere. */
.nx-nxp-matchmaking-section .nx-form-group,
.btn-match-request {
    margin: 0 !important;
}

.nx-nxp-matchmaking-section .nx-form-group label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.nx-nxp-matchmaking-section .nx-form-group input,
.nx-nxp-matchmaking-section .nx-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nx-nxp-matchmaking-section .nx-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.nx-nxp-matchmaking-section .nx-form-group input::placeholder,
.nx-nxp-matchmaking-section .nx-form-group textarea::placeholder {
    color: var(--text-dim);
}

.nx-nxp-matchmaking-section .nx-form-group input:focus,
.nx-nxp-matchmaking-section .nx-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb), 0.18);
}

/* L'esito dell'invio: col testo colorato E un segno a sinistra, così non dipende dal solo colore. */
.nx-nxp-matchmaking-section .nx-status-message {
    margin: 0 !important;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--border-subtle);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.nx-nxp-matchmaking-section .nx-status-message.is-success {
    color: var(--accent-success);
    border-left-color: var(--accent-success);
}

.nx-nxp-matchmaking-section .nx-status-message.is-error {
    color: var(--accent-error);
    border-left-color: var(--accent-error);
}

/* ── LINGUETTE ACCEDI / REGISTRATI ─────────────────────────────────────────────────────────── */

.nx-node-auth {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    text-align: center;
}

.nx-node-auth-tabs {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.nx-node-auth-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nx-node-auth-tab:hover {
    border-color: var(--accent-gold);
}

.nx-node-auth-tab:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.nx-node-auth-tab.is-active {
    background: rgba(var(--accent-gold-rgb), 0.14);
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

.nx-node-auth-panel {
    text-align: left;
}

.nx-node-auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.nx-node-auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nx-node-auth-input::placeholder {
    color: var(--text-dim);
}

.nx-node-auth-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb), 0.18);
}

/* LA RIGA DEL CONSENSO. È un `<label>` che contiene la casella e il testo: con `display: flex` la casella
   resta ancorata alla prima riga di testo invece di ballare a metà paragrafo quando il testo va a capo. */
label.nx-node-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

label.nx-node-auth-note input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--accent-gold);
    cursor: pointer;
}

.nx-node-auth-status {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--border-subtle);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.nx-node-auth-status.is-success {
    color: var(--accent-success);
    border-left-color: var(--accent-success);
}

.nx-node-auth-status.is-error {
    color: var(--accent-error);
    border-left-color: var(--accent-error);
}

/* Le note e l'avviso legale: stesso colore (un token che esiste, in entrambi i temi) e stesso respiro. */
.nx-node-auth-note,
.nx-nxp-contact-note,
.nx-nxp-match-disclaimer {
    margin: 0 !important;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.nx-nxp-match-disclaimer {
    margin-top: 14px !important;
    text-align: center;
}

p.nx-node-auth-note {
    margin-top: 14px !important;
    text-align: center;
}

/* Il campo civetta dell'accesso: invisibile a chi guarda, presente per chi prova a fare il robot. */
.nx-node-auth-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* L'icona (i): un pulsante tondo, non un riquadro. */
.nx-node-auth-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.nx-node-auth-info svg,
.nx-node-auth-info i {
    width: 13px;
    height: 13px;
}

.nx-node-auth-info:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(var(--accent-gold-rgb), 0.12);
}

.nx-node-auth-info:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SECONDA PASSATA (11/10/2026) — MARGINI, RIEMPIMENTI, LARGHEZZE, DISPOSIZIONE
   Misurato prima di scrivere:
     · `.nx-node-contact-widget` NON aveva alcuna regola: nessun riempimento, nessun bordo, nessuno sfondo.
       Il modulo galleggiava nudo sulla pagina (ed è questo che si vedeva come «disposizione approssimata»).
     · la classe `is-marketplace-style`, presente nel markup, non esiste in NESSUN foglio: modificatore morto.
     · il titolo di sezione è di casa ma con un rosso FISSO (#cc0c39): sullo scuro è poco leggibile.
     · gli spazi verticali erano tre `!important` di casa che si sommavano, non una scala.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* IL BLOCCO DEL TITOLO: stacca il titolo (e la sua nota) dal modulo sottostante. */
.nx-nxp-matchmaking-section .nx-nxp-section-title-wrap {
    margin-bottom: 1.25rem;
}

/* IL TITOLO: il rosso di casa diventa il token di casa, che è chiaro sullo scuro e scuro sul chiaro.
   (La regola di casa è `.nx-nxp-section-title`; questa ha un selettore più specifico e vince senza
   bisogno di `!important`.) */
.nx-nxp-matchmaking-section .nx-nxp-section-title {
    color: var(--accent-crimson);
}

/* LA SCHEDA DEL MODULO. Prima non esisteva: ora il modulo ha un corpo, con la stessa misura di respiro
   in tutti e quattro i lati e i token di superficie di casa (scuro: quasi nero / chiaro: grigio). */
.nx-nxp-matchmaking-section .nx-node-contact-widget {
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

/* Dentro la scheda i paragrafi non devono più prendere i 1.5rem di casa: il respiro lo decide il modulo.
   (Il selettore con `p` è meno specifico della regola della nota più sotto: quella vince su `margin-top`.) */
.nx-nxp-matchmaking-section .nx-node-contact-widget p {
    margin: 0 !important;
}

/* Il contenitore del bottone d'invio: esplicito, così la larghezza non dipende da chi lo contiene. */
.nx-nxp-matchmaking-section .btn-match-request {
    width: 100%;
}

/* IL BLOCCO ACCEDI / REGISTRATI: staccato dall'avviso legale e allineato alla stessa larghezza. */
.nx-nxp-matchmaking-section .nx-node-auth {
    margin-top: 1.25rem;
}

/* Le linguette restano due metà esatte anche su schermi molto stretti. */
.nx-nxp-matchmaking-section .nx-node-auth-tab span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    /* Sul telefono la scheda respira meno, il modulo resta a filo e i bottoni a tutta larghezza. */
    .nx-nxp-matchmaking-section .nx-node-contact-widget {
        padding: 1.1rem;
    }

    .nx-nxp-matchmaking-section .nx-nxp-section-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 420px) {
    .nx-node-auth-tab {
        padding: 0.62rem 0.5rem;
        font-size: 0.76rem;
    }

    .nx-nxp-matchmaking-section .nx-node-contact-widget {
        padding: 0.9rem;
    }
}