/* Pagine fan: pre-save, link, termini SMS, e il modulo d'iscrizione (usato anche dal popup della home).
   Modello: le pagine di Jordan Rawson (co:brand e Linktree), coi caratteri e i colori di 23 TheMiracle.
   Le classi del modulo stanno tutte sotto .fan-form, cosi' nella home non toccano il resto del gioco. */

@font-face {
    font-family: 'Bebas Neue';
    src: url('../assets/fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --fan-bg: #000;
    --fan-text: #f4f1ec;
    --fan-muted: #a7a29b;
    --fan-faint: #6f6b66;
    --fan-card: rgba(28, 28, 28, 0.92);
    --fan-card-solid: #1c1c1c;
    --fan-field: #2a2a2a;
    --fan-field-border: #3a3a3a;
    --fan-line: rgba(255, 255, 255, 0.09);
    --fan-accent: #FF8C42;
    --fan-teal: #18868F;
    --fan-bad: #ff7a6b;
    --fan-spotify: #1ED760;
    --fan-spotify-text: #000;
    --fan-radius: 14px;
    --fan-radius-sm: 9px;
    --fan-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fan-display: 'Bebas Neue', 'Montserrat', sans-serif;
    color-scheme: dark;
}

/* ---------- pagina ---------- */
.fan-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fan-bg);
    color: var(--fan-text);
    font-family: var(--fan-font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.fan-page a { color: inherit; }
.fan-page *, .fan-page *::before, .fan-page *::after { box-sizing: border-box; }

/* Sfondo: copertina sfocata che sfuma nel nero, con grana (come la pagina di Jordan). */
.fan-backdrop {
    position: fixed;
    inset: 0 0 auto 0;
    height: 70vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fan-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(70px) saturate(1.15) brightness(0.8);
    transform: scale(1.3);
    opacity: 0.75;
}
.fan-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 45%, #000 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    mix-blend-mode: normal;
}

.fan-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 16px 40px;
}

/* ---------- pre-save ---------- */
.fan-presave {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.fan-cover-frame {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.fan-cover-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 13px;
}
.fan-artist {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 14px;
    font-weight: 700;
    font-size: 15px;
}
.fan-artist img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.fan-socials { list-style: none; margin: 0; padding: 0; }
.fan-socials a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--fan-line);
    text-decoration: none;
    color: var(--fan-muted);
    font-size: 13px;
    transition: color .15s ease;
}
.fan-socials li:last-child a { border-bottom: 0; }
.fan-socials a:hover, .fan-socials a:focus-visible { color: var(--fan-text); }
.fan-ico { width: 18px; height: 18px; flex: none; display: block; }
.fan-ico-sm { width: 15px; height: 15px; }
.fan-ico-btn { width: 22px; height: 22px; }

.fan-title {
    margin: 0 0 10px;
    font-size: clamp(30px, 4.2vw, 44px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.fan-desc {
    margin: 0 0 26px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #ddd8d1;
    max-width: 60ch;
}

.fan-card {
    background: var(--fan-card);
    border: 1px solid var(--fan-line);
    border-radius: var(--fan-radius);
    padding: 20px 16px 18px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fan-thanks { text-align: center; padding: 18px 6px 10px; }
.fan-thanks h2 { margin: 0 0 8px; font-family: var(--fan-display); font-weight: normal; font-size: 40px; letter-spacing: .02em; }
/* Sulle pagine fan i titoli sono come quello del pre-save: Montserrat grassetto, niente maiuscolo (capo 04/10). La home resta in Bebas. */
.fan-page .fan-thanks h2 { font-family: var(--fan-font); font-weight: 800; font-size: 30px; letter-spacing: -0.01em; }
.fan-thanks p { margin: 0 0 18px; color: #ddd8d1; line-height: 1.5; }
.fan-thanks a { color: var(--fan-accent); font-weight: 600; }
.fan-test-note { margin-top: 12px; font-size: 12px; color: var(--fan-accent); }

.fan-foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    text-align: center;
    padding: 10px 16px 36px;
    font-size: 12px;
    line-height: 2;
    color: var(--fan-faint);
}
.fan-foot a { color: var(--fan-faint); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.fan-foot a:hover { color: var(--fan-muted); }
.fan-foot .fan-dot { margin: 0 .45em; }

/* ---------- modulo ---------- */
/* Niente text-transform qui: nella home vale il maiuscolo globale voluto dal capo (main.css), sulle pagine fan no. */
.fan-form { display: flex; flex-direction: column; gap: 14px; font-family: var(--fan-font); }
.fan-form .fan-field { display: flex; flex-direction: column; gap: 7px; }
.fan-form label { font-size: 14.5px; font-weight: 700; color: var(--fan-text); text-align: left; }
.fan-form .fan-req { font-weight: 400; color: var(--fan-muted); }
.fan-form .fan-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 13px;
    background: var(--fan-field);
    border: 1px solid var(--fan-field-border);
    border-radius: var(--fan-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fan-form .fan-input:focus-within { border-color: #8a857f; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.fan-form .fan-field.is-bad .fan-input { border-color: var(--fan-bad); }
.fan-form input[type="tel"], .fan-form input[type="email"], .fan-form input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--fan-text);
    font: 500 16px/1.2 var(--fan-font);
}
.fan-form input::placeholder { color: #8d8882; opacity: 1; }
.fan-form .fan-tel { display: flex; gap: 0; }
/* Nome e cognome affiancati, come la mailing list di Jordan (due caselle con 8 di spazio). */
.fan-form .fan-nomi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fan-form .fan-country {
    position: relative;
    flex: none;
    width: 58px;
    background: #333;
    border: 1px solid var(--fan-field-border);
    border-right: 0;
    border-radius: var(--fan-radius-sm) 0 0 var(--fan-radius-sm);
}
.fan-form .fan-country-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    font-size: 18px;
}
.fan-form .fan-chev { width: 11px; height: 11px; color: var(--fan-muted); }
.fan-form .fan-country select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}
.fan-form .fan-country:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
/* min-width 0: senza, la casella non si stringe sotto la larghezza naturale del campo e nel popup stretto della home sbordava. */
.fan-form .fan-input-tel { flex: 1; min-width: 0; border-radius: 0 var(--fan-radius-sm) var(--fan-radius-sm) 0; }
.fan-form .fan-prefix { color: var(--fan-text); font-weight: 500; font-size: 16px; }
.fan-form .fan-tt-ico { color: var(--fan-muted); display: flex; }
.fan-form .fan-err { margin: 0; font-size: 12.5px; color: var(--fan-bad); text-align: left; }
.fan-form .fan-sep { border: 0; border-top: 1px solid var(--fan-line); margin: 4px 0 0; width: 100%; }
.fan-form .fan-consents { gap: 10px; }
.fan-form .fan-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--fan-muted);
    cursor: pointer;
}
.fan-form .fan-check input { flex: none; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--fan-accent); }
.fan-form .fan-check a { color: #cfcac4; }
.fan-form .fan-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fan-form .fan-turnstile:empty { display: none; }
.fan-form .fan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    font: 700 16.5px/1 var(--fan-font);
    transition: transform .12s ease, filter .15s ease, opacity .15s ease;
}
.fan-form .fan-btn-spotify { background: var(--fan-spotify); color: var(--fan-spotify-text); }
.fan-form .fan-btn-plain { background: #4a4a4a; color: var(--fan-text); }
.fan-form .fan-btn[aria-disabled="false"].fan-btn-plain { background: var(--fan-accent); color: #111; }
.fan-form .fan-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.fan-form .fan-btn[aria-disabled="false"]:hover { filter: brightness(1.06); }
.fan-form .fan-btn[aria-disabled="false"]:active { transform: scale(.985); }
.fan-form .fan-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fan-form .fan-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--fan-muted); text-align: center; }

/* Suggerimenti della casella «City» (js/fan/citta.js, elenco di GeoNames): pannello scuro sotto la casella, righe alte
   almeno 44 per il dito, città in chiaro e regione e paese in grigio; in fondo la citazione che chiede la licenza. */
.fan-form .fan-citta { position: relative; }
.fan-form .fan-citta-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--fan-card-solid);
    border: 1px solid var(--fan-field-border);
    border-radius: var(--fan-radius-sm);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.fan-form .fan-citta-panel[hidden] { display: none; }
.fan-form .fan-citta-lista { list-style: none; margin: 0; padding: 4px; }
.fan-form .fan-citta-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 7px;
    min-height: 44px;
    padding: 11px 10px;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
}
.fan-form .fan-citta-lista li[aria-selected="true"] { background: #303030; }
.fan-form .fan-citta-nome { font-size: 15px; font-weight: 600; color: var(--fan-text); }
.fan-form .fan-citta-alt { font-size: 13px; color: var(--fan-text); opacity: .75; }
.fan-form .fan-citta-coda { font-size: 13px; color: var(--fan-muted); }
.fan-form .fan-citta-fonte { margin: 0; padding: 7px 14px 9px; border-top: 1px solid var(--fan-line); font-size: 11px; color: var(--fan-faint); text-align: left; }
.fan-form .fan-citta-fonte a { color: var(--fan-muted); text-decoration: none; }

/* ---------- link ---------- */
/* Misure della pagina di Jordan da computer (lette il 04/10): colonna 580, rettangoli 524 (28 di margine per lato).
   Il riquadro scorre con la pagina e porta il suo fondo; «isolation» tiene la foto in cima (strati sotto zero) dentro il riquadro. */
.fan-links {
    max-width: 580px; margin: 0 auto; padding: 0; position: relative; z-index: 1; isolation: isolate;
    min-height: 100vh; min-height: 100lvh;
    background: linear-gradient(to bottom, #141414 0%, #0b0b0b 100%);
}
@media (min-width: 620px) { .fan-links .fan-list { padding: 0 28px; } }
/* Da computer, come la pagina di Jordan: la colonna e' un riquadro staccato 40 dall'alto, angoli da 24 e la sua ombra,
   sopra la foto sfocata. Da telefono resta a tutta pagina, come la sua. */
.fan-links-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
.fan-links-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) brightness(0.38) saturate(1.1); transform: scale(1.25); }
@media (min-width: 620px) {
    .fan-links { margin: 40px auto 0; min-height: calc(100vh - 40px); min-height: calc(100lvh - 40px); border-radius: 24px 24px 0 0; box-shadow: 0 24px 32px rgba(0,0,0,0.15); }
}
/* La foto in cima, montata come quella di Jordan (letta dal codice della sua pagina il 04/10/2026):
   - il blocco e' alto quanto la colonna meno 80 (da telefono 310 su 390, da computer 500), la foto e' quadrata e ci sta dietro;
   - sopra la foto nitida c'e' una copia sfocata che si vede solo ai bordi, e tutta la foto sfuma nel fondo (le due maschere sono le sue);
   - scorrendo, links.js fa scendere il blocco di 100, lo fa sparire e lo ingrandisce dell'1%, e la copia sfocata sale di 50 e ingrandisce del 10%. */
.fan-hero { position: relative; width: 100%; height: calc(min(100vw, 580px) - 80px); transform-origin: 50% 50%; will-change: transform, opacity; }
.fan-hero-foto {
    position: absolute; top: 0; left: 0; right: 0; z-index: -1; aspect-ratio: 1 / 1; background: #000;
    -webkit-mask: radial-gradient(110.26% 96% at 50% 0%, #000 50%, rgba(0,0,0,0.99) 54.68%, rgba(0,0,0,0.97) 58.79%, rgba(0,0,0,0.94) 62.4%, rgba(0,0,0,0.90) 65.61%, rgba(0,0,0,0.85) 68.52%, rgba(0,0,0,0.79) 71.2%, rgba(0,0,0,0.72) 73.75%, rgba(0,0,0,0.65) 76.25%, rgba(0,0,0,0.57) 78.8%, rgba(0,0,0,0.48) 81.48%, rgba(0,0,0,0.39) 84.39%, rgba(0,0,0,0.30) 87.6%, rgba(0,0,0,0.20) 91.21%, rgba(0,0,0,0.10) 95.32%, rgba(0,0,0,0) 100%);
    mask: radial-gradient(110.26% 96% at 50% 0%, #000 50%, rgba(0,0,0,0.99) 54.68%, rgba(0,0,0,0.97) 58.79%, rgba(0,0,0,0.94) 62.4%, rgba(0,0,0,0.90) 65.61%, rgba(0,0,0,0.85) 68.52%, rgba(0,0,0,0.79) 71.2%, rgba(0,0,0,0.72) 73.75%, rgba(0,0,0,0.65) 76.25%, rgba(0,0,0,0.57) 78.8%, rgba(0,0,0,0.48) 81.48%, rgba(0,0,0,0.39) 84.39%, rgba(0,0,0,0.30) 87.6%, rgba(0,0,0,0.20) 91.21%, rgba(0,0,0,0.10) 95.32%, rgba(0,0,0,0) 100%);
}
@media (min-width: 620px) { .fan-hero-foto { overflow: hidden; border-radius: 24px 24px 0 0; } }
.fan-hero-nitida { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; }
.fan-hero-sfocata {
    position: absolute; inset: 0; z-index: -1; will-change: transform;
    -webkit-mask: radial-gradient(110.26% 96% at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.01) 64.72%, rgba(0,0,0,0.03) 68.55%, rgba(0,0,0,0.07) 71.65%, rgba(0,0,0,0.12) 74.13%, rgba(0,0,0,0.18) 76.15%, rgba(0,0,0,0.25) 77.82%, rgba(0,0,0,0.33) 79.3%, rgba(0,0,0,0.41) 80.7%, rgba(0,0,0,0.50) 82.18%, rgba(0,0,0,0.59) 83.85%, rgba(0,0,0,0.67) 85.87%, rgba(0,0,0,0.76) 88.35%, rgba(0,0,0,0.85) 91.45%, rgba(0,0,0,0.93) 95.28%, #000 100%);
    mask: radial-gradient(110.26% 96% at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.01) 64.72%, rgba(0,0,0,0.03) 68.55%, rgba(0,0,0,0.07) 71.65%, rgba(0,0,0,0.12) 74.13%, rgba(0,0,0,0.18) 76.15%, rgba(0,0,0,0.25) 77.82%, rgba(0,0,0,0.33) 79.3%, rgba(0,0,0,0.41) 80.7%, rgba(0,0,0,0.50) 82.18%, rgba(0,0,0,0.59) 83.85%, rgba(0,0,0,0.67) 85.87%, rgba(0,0,0,0.76) 88.35%, rgba(0,0,0,0.85) 91.45%, rgba(0,0,0,0.93) 95.28%, #000 100%);
}
.fan-hero-sfocata img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fan-hero-text { position: relative; z-index: 1; margin-top: 0; padding: 0 16px; text-align: center; }
.fan-hero-text h1 { margin: 0; font-family: var(--fan-font); font-weight: 800; font-size: clamp(30px, 8.5vw, 38px); line-height: 1.05; letter-spacing: -0.01em; }
/* Testi come quelli di Jordan, letti sulla sua pagina il 04/10 (capo: testata più grassetta, rettangoli meno):
   riga sotto il nome 16 punti, spessore 500, bianca; testi dei rettangoli 16 punti, spessore 500, grigio chiaro, lettere strette di 0,2;
   riga piccola sotto il titolo 12 punti, spessore normale. */
.fan-hero-text p { margin: 10px auto 0; max-width: 34ch; font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; }
.fan-list { position: relative; z-index: 1; list-style: none; margin: 30px 0 0; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
/* Fra due rettangoli piccoli 28, come Jordan (capo 04/10/2026: «28 come jordan»; misurato sulla sua pagina il 04/10:
   28 fra i piccoli, 14 sotto quelli grandi con la foto). 16 di spazio della lista + 12 qui. */
.fan-list > .fan-li-piccolo + .fan-li-piccolo { margin-top: 12px; }
.fan-tile {
    display: block;
    width: 100%;
    background: var(--fan-card-solid);
    border: 1px solid var(--fan-line);
    border-radius: var(--fan-radius);
    color: #d9d9d9;
    text-decoration: none;
    font: 500 16px/1.2 var(--fan-font);
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
/* «.fan-page a» passa il colore della pagina ai collegamenti e scavalcherebbe il grigio di Jordan: qui lo si rimette più forte. */
.fan-page .fan-tile { color: #d9d9d9; }
.fan-tile:hover { border-color: rgba(255,255,255,0.22); background: #222; }
.fan-tile:active { transform: scale(.99); }
.fan-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Misure dei rettangoli con la foto di Jordan da computer (lette il 04/10 sulla sua pagina): 14 di margine intorno alla foto,
   foto 16:9 con angoli da 6, fascia della scritta da 64 (58 da telefono). Rettangolo con la copertina piccola: alto 64, copertina 48. */
.fan-tile-big { padding: 13px 13px 0; text-align: center; } /* 13 + 1 di bordo = i 14 di Jordan: foto 496x279 */
.fan-tile-big img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin: 0; }
.fan-tile-big > span { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 12px; }
@media (max-width: 619px) { .fan-tile-big > span { height: 58px; } }
.fan-tile-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; height: 64px; padding: 8px; text-align: center; }
.fan-tile-row img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.fan-tile-row .fan-ico { width: 26px; height: 26px; margin: 0 auto; }
.fan-tile-sub { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-weight: 400; font-size: 12px; line-height: 18px; color: #d9d9d9; }
.fan-tile-sub .fan-ico { width: 13px; height: 13px; margin: 0; }
/* Tasto per condividere, come quello di Jordan (letto sulla sua pagina il 04/10): quadrato da 40 con angoli da 16, fondo scuro
   sfocato (sfocatura 16 e luminosita' 0,72 di quello che c'e' dietro, piu' un velo nero al 16%), bordo bianco al 15%, icona da 20,
   a 14 dall'alto e da destra. Da telefono resta fermo in alto, da computer sta nell'angolo del riquadro. */
.fan-links-barra { position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
@media (min-width: 620px) { .fan-links-barra { position: absolute; } }
.fan-links-condividi {
    position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 16px; outline: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.16); color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(16px) brightness(0.72); backdrop-filter: blur(16px) brightness(0.72);
    transition: transform .3s ease-out; pointer-events: auto;
}
.fan-links-condividi:active { transform: scale(0.95); }
.fan-links-condividi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fan-links-condividi svg { width: 20px; height: 20px; }
.fan-links-avviso { padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .2s ease; }
.fan-links-avviso.is-visibile { opacity: 1; }
.fan-links-avviso:empty { display: none; }

/* Il rettangolo che trema, come quello dei biglietti di Jordan: l'animazione «buzz» di Linktree copiata dal codice della sua pagina
   il 04/10/2026 (3 secondi, scosse nel primo quarto, poi fermo); si ferma mentre lo premi, come da lui. */
@keyframes fan-buzz {
    0% { transform: translateX(3px) rotate(1deg); }
    2.5% { transform: translateX(-3px) rotate(-1deg); }
    5% { transform: translateX(3px) rotate(1deg); }
    7.5% { transform: translateX(-3px) rotate(-1deg); }
    10% { transform: translateX(2px) rotate(1deg); }
    12.5% { transform: translateX(-2px) rotate(-1deg); }
    15% { transform: translateX(2px) rotate(1deg); }
    17.5% { transform: translateX(-2px) rotate(-1deg); }
    20% { transform: translateX(1px) rotate(1deg); }
    22.5% { transform: translateX(-1px) rotate(-1deg); }
    25% { transform: translateX(0px) rotate(0deg); }
}
.fan-buzz { animation: fan-buzz 3s linear infinite; }
.fan-buzz:active { animation: none; }
/* Icone in fondo come quelle di Jordan: spazio da 48 a icona, attaccate, disegno da 26,7 (il suo 32 con il disegno a 20 su 24;
   i marchi di Simple Icons riempiono tutto il quadrato, quindi qui 26,7). */
.fan-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 30px 0 4px; }
.fan-social-row a { color: var(--fan-text); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 8px; }
.fan-social-row .fan-ico { width: 26.67px; height: 26.67px; }

/* ---------- link, le parti prese da Groover ----------
   Dalla pagina di Deeps su Groover (groover.me/deepsinmyfeels, guardata il 04/10/2026; capo: «una cosa che unisca quella che
   già abbiamo con questa»): Listen e Follow sulla foto, la barra delle icone, le file che scorrono di lato (Video e Brani,
   schede da 264 con la miniatura da 64) e il video grande. Il vetro dei tasti e' lo stesso del tasto per condividere. */
.fan-links-tasti { position: absolute; top: 14px; left: 14px; right: 62px; z-index: 40; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.fan-links-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px; margin: 0;
    border: 0; border-radius: 16px; outline: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.16);
    font: 600 14px/1 var(--fan-font); letter-spacing: -0.2px; text-decoration: none; cursor: pointer; pointer-events: auto;
    -webkit-backdrop-filter: blur(16px) brightness(0.72); backdrop-filter: blur(16px) brightness(0.72);
    transition: transform .3s ease-out;
}
.fan-page .fan-links-pill { color: #fff; }
.fan-links-pill[hidden] { display: none; }
.fan-links-tasti > .fan-links-pill:last-child { margin-left: auto; } /* Follow resta a destra anche se Listen e' nascosto */
.fan-links-pill:active { transform: scale(0.95); }
.fan-links-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fan-links-pill .fan-ico { width: 16px; height: 16px; }

.fan-piattaforme {
    position: relative; z-index: 1; display: flex; justify-content: space-around; align-items: center;
    height: 52px; margin: 22px 16px 0; padding: 0 4px; border-radius: 16px;
    background: rgba(255,255,255,0.05); outline: 1px solid rgba(255,255,255,0.10); outline-offset: -1px;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (min-width: 620px) { .fan-piattaforme { margin: 22px 28px 0; } }
.fan-piattaforme a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: var(--fan-text); transition: background .15s ease, transform .12s ease; }
.fan-piattaforme a:hover { background: rgba(255,255,255,0.08); }
.fan-piattaforme a:active { transform: scale(0.92); }
.fan-piattaforme a:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.fan-piattaforme .fan-ico { width: 24px; height: 24px; }

.fan-fila { position: relative; z-index: 1; margin: 38px 0 0; }
.fan-fila[hidden] { display: none; }
.fan-fila-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0 16px; }
@media (min-width: 620px) { .fan-fila-testa { padding: 0 28px; } }
.fan-fila-testa h2 { margin: 0; font: 800 22px/1.2 var(--fan-font); letter-spacing: -0.02em; color: var(--fan-text); }
.fan-fila-testa h2 a { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.fan-fila-testa h2 .fan-ico { width: 18px; height: 18px; color: var(--fan-muted); }
.fan-page .fan-fila-tutti { flex: none; font-size: 13px; font-weight: 600; color: var(--fan-muted); text-decoration: none; }
.fan-fila-tutti:hover { color: var(--fan-text); }
/* «Show all» e il titolo dei Brani sono tasti (aprono il foglio nella pagina), vestiti come i collegamenti. */
button.fan-fila-tutti, .fan-fila-titolo-tasto { margin: 0; padding: 0; border: 0; background: none; font-family: var(--fan-font); cursor: pointer; }
.fan-fila-titolo-tasto { display: inline-flex; align-items: center; gap: 2px; color: inherit; font: inherit; letter-spacing: inherit; }
button.fan-fila-tutti:focus-visible, .fan-fila-titolo-tasto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
/* Il foglio di Show all dei brani, come quello di Groover (guardato sul suo sito il 04/10/2026): sale dal basso, parte a un
   quinto dello schermo, largo quanto la colonna, fondo #121111, angoli da 12 solo in alto, niente titolo e niente X (si chiude
   toccando fuori o con Esc); le schede una sotto l'altra con 6 di spazio. */
.fan-ascolta.fan-brani-foglio {
    inset: 20vh 0 0 0; inset: 20dvh 0 0 0; width: 100%; max-width: 580px; height: auto; margin: 0 auto;
    border: 0; border-radius: 12px 12px 0 0; background: #121111;
}
.fan-brani-foglio .fan-ascolta-corpo { padding: 12px 12px 28px; }
.fan-brani-foglio[open] { animation: fan-sale .34s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fan-brani-foglio.is-chiude { animation: fan-scende .24s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes fan-sale { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fan-scende { from { transform: none; } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .fan-brani-foglio[open], .fan-brani-foglio.is-chiude { animation: none; } }
.fan-brani-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fan-brani-elenco .fan-schedina { width: 100%; }
.fan-fila-scorre {
    display: flex; gap: 12px; margin: 0; padding: 0 16px 6px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fan-fila-scorre::-webkit-scrollbar { display: none; }
@media (min-width: 620px) { .fan-fila-scorre { padding: 0 28px 6px; scroll-padding: 0 28px; } }
.fan-schedina {
    flex: none; position: relative; display: flex; align-items: center; gap: 12px; width: 264px; min-height: 88px; padding: 12px;
    scroll-snap-align: start; background: var(--fan-card-solid); border: 1px solid var(--fan-line); border-radius: var(--fan-radius);
    transition: border-color .15s ease, background .15s ease;
}
.fan-schedina:hover { border-color: rgba(255,255,255,0.22); background: #222; }
/* Da computer la colonna e' larga 524: due schede da 232 lasciano vedere l'inizio della terza, che dice «si scorre». */
@media (min-width: 620px) { .fan-schedina { width: 232px; } }
/* Una scheda sola (oggi la fila dei video, capo 04/10 sera: «gli shorts levali») prende tutta la larghezza, come da Groover. */
.fan-fila-scorre > .fan-schedina:only-child { width: 100%; }
.fan-schedina-img { position: relative; flex: none; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: #2a2a2a; }
.fan-schedina-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Il collegamento copre tutta la scheda (la sua ::after), tranne il tasto della copertina che gli sta sopra. */
.fan-page .fan-schedina-testo { position: static; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--fan-text); text-decoration: none; }
.fan-schedina-testo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fan-schedina-testo:focus-visible { outline: none; }
.fan-schedina:has(.fan-schedina-testo:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.fan-schedina-titolo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; }
.fan-schedina-sotto { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--fan-muted); }
.fan-schedina-sotto .fan-ico { width: 13px; height: 13px; }

/* Brani: la copertina e' un tasto che suona l'anteprima (un solo brano alla volta), col tondo play/pausa in basso a destra
   come Groover e una linea che avanza sul fondo della copertina. */
.fan-brano-play { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.fan-brano-play .fan-schedina-img { width: 64px; height: 64px; }
.fan-brano-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fan-brano-tondo {
    position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; color: #fff; background: rgba(0,0,0,0.45); outline: 1px solid rgba(255,255,255,0.25); outline-offset: -1px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s ease, background .15s ease;
}
.fan-brano-tondo svg { width: 12px; height: 12px; }
.fan-brano-play:hover .fan-brano-tondo { transform: scale(1.08); }
.fan-brano-play[aria-pressed="true"] .fan-brano-tondo { background: var(--fan-spotify); color: #000; outline-color: transparent; }
.fan-brano-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .2s ease; }
.fan-brano-barra i { display: block; width: 100%; height: 100%; background: var(--fan-spotify); transform-origin: 0 50%; transform: scaleX(0); }
.fan-brano-play[aria-pressed="true"] .fan-brano-barra { opacity: 1; }

/* Il video grande: prima la miniatura col titolo e il tasto play; al tocco al suo posto entra il riproduttore di YouTube
   (www.youtube-nocookie.com), cosi' YouTube non riceve niente finche' il fan non lo fa partire. */
.fan-video-grande { position: relative; z-index: 1; margin: 38px 16px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fan-radius); background: #000; outline: 1px solid var(--fan-line); outline-offset: -1px; }
.fan-video-grande[hidden] { display: none; }
@media (min-width: 620px) { .fan-video-grande { margin: 38px 28px 0; } }
.fan-video-facciata { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: #fff; cursor: pointer; }
.fan-video-facciata img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fan-video-facciata:hover img { transform: scale(1.02); }
.fan-video-facciata::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.25) 100%); }
.fan-video-titolo { position: absolute; z-index: 2; top: 12px; left: 14px; right: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font: 700 14px/1.3 var(--fan-font); letter-spacing: -0.2px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.fan-video-tondo {
    position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0,0,0,0.45); outline: 1px solid rgba(255,255,255,0.3); outline-offset: -1px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s ease;
}
.fan-video-tondo svg { width: 22px; height: 22px; margin-left: 2px; }
.fan-video-facciata:hover .fan-video-tondo { transform: scale(1.08); }
.fan-video-facciata:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.fan-video-grande iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* La finestra dei video della fila (capo 04/10 sera, come Groover): il riproduttore al centro sulla pagina scurita,
   orizzontale per i video, verticale per gli Shorts (alto al massimo quanto lo schermo meno i margini). */
.fan-video-finestra {
    width: min(calc(100vw - 32px), 640px); max-width: none; max-height: none; margin: auto; padding: 0;
    border: 0; background: transparent; overflow: visible; color: #fff;
}
.fan-video-finestra::backdrop { background: rgba(0,0,0,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fan-video-finestra[open] { animation: fan-video-entra .22s ease-out; }
@keyframes fan-video-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.fan-video-cornice { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fan-radius); background: #000; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.fan-video-finestra.is-verticale { width: min(calc(100vw - 32px), calc((100vh - 120px) * 9 / 16), 420px); width: min(calc(100vw - 32px), calc((100dvh - 120px) * 9 / 16), 420px); }
.fan-video-finestra.is-verticale .fan-video-cornice { aspect-ratio: 9 / 16; }
.fan-video-cornice iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fan-video-chiudi {
    position: absolute; top: -52px; right: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 16px; outline: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer;
}
.fan-video-chiudi:focus-visible { outline: 2px solid #fff; }
.fan-video-chiudi .fan-ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .fan-video-finestra[open] { animation: none; } }

/* finestra del modulo sulla pagina dei link */
.fan-dialog {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--fan-line);
    border-radius: var(--fan-radius);
    background: var(--fan-card-solid);
    color: var(--fan-text);
}
.fan-dialog::backdrop { background: rgba(0,0,0,0.7); }
.fan-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px; }
.fan-dialog-head h2 { margin: 0; font-family: var(--fan-font); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.fan-dialog-close { background: none; border: 0; color: var(--fan-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.fan-dialog-body { padding: 8px 16px 18px; }

/* Finestra «Listen on» dello STREAM, come quella di Jordan (misure lette sulla sua pagina il 04/10/2026):
   foglio bianco con angoli da 32, da telefono a 16 dall'alto e dal basso e 14 dai lati, da computer al centro (largo 524,
   alto il 90% fino a 900); testata alta 80; contenuto con 24 di margine; copertina con angoli da 24; righe da 50 col bordo
   grigio chiaro e angoli da 8 (tutte subito: il suo «Show more» da noi non c'e', capo 04/10); in fondo il tasto nero
   «Open in …» e i due tondi bianchi da 48. ⭐ Dal 04/10/2026 sera SCURO come i fogli della mailing list e dei pre-save (capo:
   «quello dello stream e dell'enquiries lo farei scuro»): fondo #1c1c1c, righe chiare al 3%, «Open in Spotify» verde, tondi scuri. */
.fan-ascolta {
    position: fixed; inset: 16px 14px; width: auto; height: auto; max-width: none; max-height: none; margin: 0;
    padding: 0; border: 1px solid var(--fan-line); border-radius: 32px; background: var(--fan-card-solid); color: var(--fan-text); overflow: hidden;
    font-family: var(--fan-font);
}
.fan-ascolta[open] { display: flex; flex-direction: column; }
@media (min-width: 768px) {
    .fan-ascolta { inset: 0; margin: auto; width: min(524px, calc(100vw - 32px)); height: min(90vh, 900px); }
}
.fan-ascolta::backdrop { background: rgba(0, 0, 0, 0.5); animation: fan-sfuma 0.2s ease; }
@keyframes fan-sfuma { from { opacity: 0; } to { opacity: 1; } }
html.fan-ascolta-aperta { overflow: hidden; }
.fan-ascolta-testa { flex: none; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 64px; text-align: center; }
.fan-ascolta-t1 { font-size: 14px; font-weight: 500; line-height: 16.8px; letter-spacing: -0.2px; }
.fan-ascolta-t2 { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 18px; letter-spacing: -0.2px; color: var(--fan-muted); }
.fan-ascolta-t2 .fan-ico { width: 13px; height: 13px; }
.fan-ascolta-corpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 24px 96px; scrollbar-width: none; }
.fan-ascolta-corpo::-webkit-scrollbar { display: none; }
.fan-ascolta-cop { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.fan-ascolta h2 { margin: 16px 0 0; font-size: 20px; font-weight: 600; line-height: 32px; letter-spacing: -0.32px; text-align: center; }
.fan-ascolta-artista { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; text-align: center; }
.fan-ascolta-su { margin: 24px 0 16px; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.32px; color: var(--fan-muted); }
.fan-ascolta-lista { list-style: none; margin: 0; padding: 0; }
.fan-ascolta-lista li { margin: 0 0 12px; }
.fan-page .fan-ascolta-riga {
    display: flex; align-items: center; gap: 16px; min-height: 50px; padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--fan-text); text-decoration: none; transition: background .15s ease;
}
.fan-ascolta-riga:hover, .fan-ascolta-riga:focus-visible { background: rgba(255,255,255,0.08); }
.fan-ascolta-riga:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fan-ascolta-marchio { display: flex; flex: none; width: 24px; height: 24px; }
.fan-ascolta-marchio .fan-ico { width: 24px; height: 24px; }
.fan-ascolta-nome { flex: 1; font-size: 14px; font-weight: 600; line-height: 21px; }
.fan-ascolta-esci { width: 16px; height: 16px; color: var(--fan-muted); }
.fan-ascolta-barra { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.fan-ascolta-barra > * { pointer-events: auto; }
.fan-ascolta-spazio { flex: 1; pointer-events: none; }
.fan-page .fan-ascolta-apri {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; min-width: 128px; max-width: 100%;
    padding: 12px 29.6px 12px 20px; border-radius: 24px; background: var(--fan-spotify); color: #000; text-decoration: none;
    font-size: 14px; font-weight: 600; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.3);
}
.fan-ascolta-apri .fan-ico { width: 20px; height: 20px; }
.fan-ascolta-tondo {
    display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; background: #2a2a2a; color: var(--fan-text); cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.3); transition: background .15s ease, transform .1s ease;
}
.fan-ascolta-tondo:hover { background: #333; }
.fan-ascolta-tondo:active { transform: scale(0.95); }
.fan-ascolta-tondo .fan-ico { width: 20px; height: 20px; }
.fan-ascolta-tondo.is-copiato { background: #1ED760; color: #000; }

/* ENQUIRIES (js/fan/contatti.js), come quella di Jordan (capo 04/10/2026; misure del suo modulo lette sulla sua pagina il
   04/10): lo stesso foglio bianco degli store, titolo in alto, caselle alte 48 con angoli da 8 su fondo chiaro, messaggio
   alto 80 col conto dei caratteri, 20 fra un campo e l'altro, la riga su chi riceve i dati centrata e il tasto «Send» a
   pillola alto 48, grigio finche' nome ed email non sono buoni. Caratteri da 16 nelle caselle: sotto, l'iPhone ingrandisce.
   ⭐ Dal 04/10/2026 sera SCURO (capo): caselle come quelle della mailing list, «Send» arancio come il suo «Sign Up». */
.fan-contatti h2.fan-ascolta-t1 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.2px; outline: none; }
.fan-contatti-form { display: flex; flex-direction: column; gap: 20px; }
.fan-contatti-campo { display: flex; flex-direction: column; gap: 6px; }
.fan-contatti-form input, .fan-contatti-form textarea, .fan-contatti-form select {
    display: block; width: 100%; margin: 0; border: 1px solid var(--fan-field-border); border-radius: 8px; background-color: var(--fan-field); color: var(--fan-text);
    font: 400 16px/1.4 var(--fan-font); outline: none; transition: border-color .15s ease, background-color .15s ease;
}
.fan-contatti-form input { height: 48px; padding: 0 16px; }
.fan-contatti-form textarea { height: 80px; min-height: 80px; padding: 12px 16px; resize: none; }
.fan-contatti-form select {
    height: 48px; padding: 0 44px 0 16px; -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a7a29b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 18px;
}
.fan-contatti-form select.is-vuoto { color: #8d8882; }
.fan-contatti-form select option { background: #1c1c1c; color: var(--fan-text); }
.fan-contatti-form input::placeholder, .fan-contatti-form textarea::placeholder { color: #8d8882; opacity: 1; }
.fan-contatti-form input:focus, .fan-contatti-form textarea:focus, .fan-contatti-form select:focus { border-color: #8a857f; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.fan-contatti-campo.is-bad input { border-color: var(--fan-bad); }
.fan-contatti-err { margin: 0; font-size: 12.5px; color: var(--fan-bad); text-align: left; }
.fan-contatti-conta { margin: 0; font-size: 12px; line-height: 20px; color: var(--fan-muted); text-align: left; }
.fan-contatti-privacy { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--fan-muted); text-align: center; }
.fan-page .fan-contatti-privacy a { color: var(--fan-text); font-weight: 600; text-decoration: none; }
.fan-contatti-form .fan-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fan-contatti-turnstile:empty { display: none; }
.fan-contatti-invia {
    width: 100%; height: 48px; border: 0; border-radius: 64px; background: var(--fan-accent); color: #111; cursor: pointer;
    font: 600 16px/24px var(--fan-font); transition: background .15s ease, transform .1s ease;
}
.fan-contatti-invia[aria-disabled="true"] { background: #4a4a4a; color: var(--fan-muted); cursor: default; }
.fan-contatti-invia[aria-disabled="false"]:active { transform: scale(.985); }
.fan-contatti-invia:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fan-contatti-stato { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--fan-muted); text-align: center; }
.fan-contatti-grazie { padding: 32px 8px; text-align: center; }
.fan-contatti-grazie h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.fan-contatti-grazie p { margin: 0; font-size: 15px; line-height: 1.5; color: #ddd8d1; }

/* ---------- termini ---------- */
.fan-legal { max-width: 720px; margin: 0 auto; padding: 48px 16px 30px; position: relative; z-index: 1; line-height: 1.6; color: #ddd8d1; }
.fan-legal h1 { font-family: var(--fan-display); font-weight: normal; font-size: 46px; letter-spacing: .02em; margin: 0 0 6px; color: var(--fan-text); }
.fan-legal h2 { font-size: 17px; margin: 30px 0 8px; color: var(--fan-text); }
.fan-legal .fan-updated { color: var(--fan-faint); font-size: 13px; margin: 0 0 24px; }
.fan-legal a { color: var(--fan-accent); text-decoration: none; }
.fan-legal a:hover, .fan-legal a:focus-visible { color: #ffb07a; }
/* Termini SMS: sfondo e testo come il sito e le pagine del negozio (capo 04/10/2026), cioe' #121212 col testo #EAE6DF al 75%
   come il corpo delle pagine legali di store.23themiracle.com (colori letti dal suo tema). Le altre pagine fan restano nere. */
html:has(body.fan-sms), body.fan-sms { --fan-bg: #121212; --fan-text: #EAE6DF; background: #121212; }
.fan-sms .fan-legal { color: rgba(234, 230, 223, 0.75); }
.fan-sms .fan-foot a { text-decoration: none; }
.fan-sms .fan-foot a:hover, .fan-sms .fan-foot a:focus-visible { color: var(--fan-muted); }

/* ---------- tour (tour.html), come la «Presale» di Jordan Rawson (misure lette sulla sua pagina il 04/10/2026) ----------
   Ogni data e' un riquadro largo quanto la colonna, 12 di margine, angoli 16, una sfumatura chiara dall'alto (16% -> 4%),
   8 fra l'uno e l'altro; dentro il quadrato scuro da 72 con angoli 12 (mese e anno 11 punti al 60%, giorno 28), il nome
   della citta' col locale (13), la riga sotto (12 al 60%) e il tasto «Tickets» alto 34 con angoli 10. In fondo la riga
   «Don't see your city?» col bordo al 12% e il tasto «Sign Up» alto 40. Il colore del tasto e' il nostro arancio. */
.fan-tour-esempio { margin: -14px 0 18px; font-size: 12.5px; color: var(--fan-accent); }
.fan-tour-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fan-tour-data {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px;
    background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}
.fan-tour-giorno {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 12px; background: rgba(0, 0, 0, 0.72); text-align: center;
}
.fan-tour-mese, .fan-tour-anno { font-size: 11px; line-height: 13px; letter-spacing: 0.07px; color: rgba(255, 255, 255, 0.6); }
.fan-tour-gg { font-size: 28px; line-height: 34px; letter-spacing: -0.5px; font-weight: 500; color: #fff; }
.fan-tour-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.fan-tour-testo strong { font-size: 13px; line-height: 18px; letter-spacing: -0.08px; font-weight: 600; color: #fff; }
.fan-tour-testo span { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.6); }
.fan-page .fan-tour-biglietti {
    flex: none; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px;
    border-radius: 10px; background: var(--fan-accent); color: #111; font-size: 13px; font-weight: 600; text-decoration: none;
    transition: filter .15s ease, transform .1s ease;
}
.fan-tour-biglietti:hover { filter: brightness(1.06); }
.fan-tour-biglietti:active { transform: scale(.97); }
.fan-tour-biglietti:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fan-tour-riga {
    display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 12px 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
}
.fan-tour-lista + .fan-tour-riga { margin-top: 8px; }
.fan-tour-iscriviti {
    flex: none; height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
    background: #000; color: #fff; font: 600 13px/18px var(--fan-font); cursor: pointer; transition: background .15s ease;
}
.fan-tour-iscriviti:hover { background: #151515; }
.fan-tour-iscriviti:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Foglio SCURO con la foto in alto (js/fan/foglio.js, foglioScuro): MAIL LIST e PRESAVES della pagina dei link, «Sign Up»
   del tour. Come quella del «Sign Up» di Jordan: la X in alto a destra, la foto, il titolo e la riga sotto, una linea, poi il
   modulo. E' lo stesso foglio degli store e di Enquiries (stessa misura, stesso effetto d'apertura dal rettangolo, capo
   04/10/2026: «la larghezza dei riquadri sempre uguale»), solo scuro. */
.fan-foglio-scuro { background: var(--fan-card-solid); color: var(--fan-text); border: 1px solid var(--fan-line); }
.fan-foglio-scuro .fan-ascolta-corpo { padding: 28px 16px 24px; }
.fan-foglio-x { position: absolute; top: 10px; right: 12px; z-index: 2; }
.fan-foglio-scuro .fan-dialog-testa h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: normal; text-align: center; }
.fan-dialog-testa { text-align: center; }
/* Con la classe della testata davanti, perche' da telefono la regola della foto grande della pagina (.fan-cover-frame a 250)
   non deve valere qui dentro. */
.fan-dialog-testa .fan-dialog-ritratto { width: min(180px, 52vw); margin: 0 auto 14px; }
.fan-dialog-testa h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.fan-dialog-testa p { margin: 0; font-size: 13px; color: var(--fan-muted); }
.fan-dialog-sep { border: 0; border-top: 1px solid var(--fan-line); width: 100%; margin: 16px 0; }
@media (max-width: 760px) {
    .fan-tour-esempio { text-align: center; }
}

/* ---------- telefono ---------- */
@media (max-width: 760px) {
    .fan-wrap { padding-top: 36px; }
    .fan-presave { grid-template-columns: minmax(0, 1fr); gap: 0; text-align: center; }
    .fan-cover-frame { width: min(250px, 72vw); margin: 0 auto; }
    .fan-artist { justify-content: center; margin: 18px 0 12px; }
    .fan-socials { display: flex; justify-content: center; gap: 22px; margin-bottom: 26px; }
    .fan-socials a { padding: 0; border: 0; color: var(--fan-text); }
    .fan-socials a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .fan-socials .fan-ico { width: 22px; height: 22px; }
    .fan-title { text-align: center; }
    .fan-desc { margin-left: auto; margin-right: auto; text-align: center; }
    .fan-card { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .fan-page *, .fan-form * { transition: none !important; }
    .fan-buzz { animation: none; }
}