/* RenderAI — il VESTITO NUOVO DELLE FINESTRE (2026-10-10 sera, richiesta dell'utente: «aggiorna al nuovo stile ogni pop up
   del sito, perfino quello dell'anteprima del render»). Lo stile è quello della finestra «crediti esauriti» (`.ce`, in
   crediti-esauriti.css) e dei tasti della home (`.hm-go`): superficie scura con angoli 22px, velo 0.72 con sfocatura, titolo
   Inter 800 in tondo, testi PIENI (mai sotto il 70%), il tasto che non impegna grigio a sinistra e quello che porta avanti
   d'ORO PIENO a destra, che l'oro chiaro riempie da sinistra (al tocco: tasti.js, classe .rt-go).
   È una PELLE: markup, id, apertura e chiusura delle finestre restano quelli di ogni pagina; larghezze, z-index e regole
   particolari di una singola finestra restano dove sono. Si carica nel <head> di ogni pagina che ha finestre.
   Le finestre nuove si scrivono `rai-dlg` + `rai-dlg-box` (+ `rai-dlg-title` / `-desc` / `-actions` / `-btn` /
   `-btn-primary` / `-btn-danger`) e nascono vestite. Le famiglie vecchie (sotto, per pagina) sono elencate QUI: una finestra
   nuova scritta in un altro modo va aggiunta alle liste.
   Restano fuori, perché sono già di questo stile: la finestra «crediti esauriti» (.ce), quelle del controllo immagine e
   l'avviso planimetria (.ci-dlg, controllo-immagine.css), la notifica del render (render-toast.js). E il pannello della
   Fonte Pianta (#pr-pannello), che è una .rai-dlg ma è uno spazio di lavoro, non una finestra. */

:root {
    --fn-surface:#13131c; --fn-surface-2:#1a1a25;
    --fn-line:rgba(255,255,255,.10); --fn-line-2:rgba(255,255,255,.16);
    --fn-ink:#f4efe6; --fn-ink-2:#d6cfc3; --fn-ink-3:#aba295;
    --fn-gold:#c9a84c; --fn-gold-hi:#f0d070; --fn-on-gold:#3a2808;
    --fn-gold-grad:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%);
    --fn-sweep:linear-gradient(110deg,#f2d88a,#fff3cc 55%,#f5dc90);
    --fn-sweep-grigio:linear-gradient(110deg,#d8d2c6,#f6f2ea 55%,#e4ded2);
    --fn-sweep-rosso:linear-gradient(110deg,#e05252,#f87171 60%,#e86060);
    --fn-ease:cubic-bezier(.2,.8,.2,1);
}
@keyframes fnVelo { from { opacity:0; } to { opacity:1; } }
@keyframes fnSale { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes fnZoom { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

/* ── la base di .rai-dlg anche nelle pagine che non la definiscono (guidata, Plastico 3D, archsketch) ── */
.rai-dlg { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; }
.rai-dlg.visible, .rai-dlg.show { display:flex; }
.rai-dlg-box { display:flex; flex-direction:column; width:360px; max-width:90vw; text-align:left; box-sizing:border-box; }
.rai-dlg-actions { display:flex; }
.rai-dlg-actions > .rai-dlg-btn, .rai-dlg-actions > .rai-dlg-btn-danger { flex:1; }
.rai-dlg-actions > .rai-dlg-btn-primary { flex:1.4; }
/* «La lettura è compresa, il render no» (pianta-render.js): due scelte di pari peso, testi lunghi → tasti larghi uguali */
#pr-crediti-render .rai-dlg-actions > * { flex:1 1 0 !important; padding-left:10px !important; padding-right:10px !important; }
/* sopra la barra in basso da telefono (vnav z 4900) e sopra la barra della guidata (5100): qualche pagina le teneva sotto */
#luma-fallback-modal, #confirm-modal, .modal-bg, #account-settings-modal { z-index:100000 !important; }
.rai-dlg-icon, .rai-dlg-icon-neutral { display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.rai-dlg-icon svg, .rai-dlg-icon i { width:22px !important; height:22px !important; }

/* ═════════ IL VELO ═════════ */
.rai-dlg:not(#pr-pannello),
#pr-seg-modal, #pr-tutta-modal, #pr-vuota-modal, #arr-doppio-modal, #pr-sost-modal, #pr-stanze-modal,   /* guidata */
#lim-dlg, #luma-fallback-modal, #confirm-modal, #account-settings-modal, .modal-bg,                       /* tutte */
#reset-confirm-modal, #segnala-modal, #lettura-modal {                                                     /* Plastico 3D */
    background:rgba(4,4,8,.72) !important;
    -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
    padding:16px;
}
:is(.rai-dlg:not(#pr-pannello), #pr-seg-modal, #pr-tutta-modal, #pr-vuota-modal, #arr-doppio-modal, #pr-sost-modal, #pr-stanze-modal,
    #lim-dlg, #reset-confirm-modal, #segnala-modal, #lettura-modal):is(.visible, .show),
:is(#luma-fallback-modal, #confirm-modal):not(.hidden), #account-settings-modal.open, .modal-bg.open { animation:fnVelo .22s ease both; }

/* ═════════ LA SCATOLA ═════════ */
.rai-dlg:not(#pr-pannello) > .rai-dlg-box,
#pr-seg-box, #pr-tutta-box, #pr-vuota-box, #arr-doppio-box, #pr-sost-box, #pr-stanze-box,
#lim-box, #luma-fallback-modal .modal-box, #confirm-modal .confirm-box, .acct-modal-box, .modal-bg .modal-box,
#reset-confirm-box, #segnala-box, #lettura-box, #pr-guida .pr-guida-box {
    background:var(--fn-surface) !important;
    border:1px solid var(--fn-line) !important;
    border-radius:22px !important;
    box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04) !important;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--fn-ink);
    animation:fnSale .35s var(--fn-ease) both !important;
}
.rai-dlg:not(#pr-pannello) > .rai-dlg-box, #lim-box, #luma-fallback-modal .modal-box, #confirm-modal .confirm-box, .modal-bg .modal-box,
#reset-confirm-box, #segnala-box, #lettura-box { padding:28px 28px 22px !important; gap:16px; }
#pr-seg-box, #pr-tutta-box, #pr-vuota-box, #arr-doppio-box, #pr-sost-box, #pr-stanze-box { padding:26px 24px 20px !important; }
#luma-fallback-modal .modal-box { display:flex; flex-direction:column; text-align:left !important; }

/* ═════════ ICONA, TITOLO, TESTO ═════════ */
.rai-dlg-icon, .scm-icon, .zah-icon, #confirm-modal .confirm-icon.info {
    width:48px !important; height:48px !important; border-radius:14px !important;
    background:#1e1a11 !important; border:1px solid rgba(201,168,76,.38) !important; color:var(--fn-gold-hi) !important;
}
.rai-dlg-icon-neutral, .rcm-icon {
    width:48px !important; height:48px !important; border-radius:14px !important;
    background:var(--fn-surface-2) !important; border:1px solid var(--fn-line-2) !important;
}
#confirm-modal .confirm-icon:not(.info) { width:48px !important; height:48px !important; border-radius:14px !important; background:#2a1414 !important; border:1px solid rgba(240,90,90,.45) !important; color:#fca5a5 !important; }
.rai-dlg-title, .rcm-title, .scm-title, .zah-title, .pr-seg-titolo, #lim-titolo, #confirm-title, .modal-bg .modal-box h3,
#luma-fallback-modal h3, .acct-modal-hdr h3, .acct-modal-hdr h2 {
    font-family:'Inter',sans-serif !important; font-size:19px !important; font-weight:800 !important;
    letter-spacing:-.02em !important; line-height:1.25 !important; color:var(--fn-ink) !important; text-transform:none !important;
}
.acct-modal-hdr h3, .acct-modal-hdr h2 { font-size:17px !important; }
.rai-dlg-desc, .rcm-desc, .scm-desc, .zah-desc, .pr-seg-desc, #lim-testo, #confirm-text, .modal-bg .modal-box p, #luma-fallback-text {
    font-family:'Inter',sans-serif !important; font-size:14px !important; line-height:1.55 !important; color:var(--fn-ink-2) !important;
    letter-spacing:0 !important; text-transform:none !important;
}
.rai-dlg-actions, .rcm-actions, .scm-actions, #confirm-modal .confirm-actions, .modal-bg .modal-actions { gap:10px !important; margin-top:6px !important; }
#confirm-modal .confirm-actions > *, .modal-bg .modal-actions > * { flex:1; }

/* ═════════ I TASTI: grigio che non impegna · oro che porta avanti · rosso che distrugge ═════════
   In tondo, Inter 700, alti almeno 48. Le tre liste: */
.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn.cancel, .modal-bg .btn-cancel,
#luma-fallback-modal .rai-dlg-btn,
.rai-dlg-btn-primary, .scm-btn-continue, .zah-btn-ok, #lim-ok, #confirm-modal .confirm-btn.ok.gold, .modal-bg .btn-save,
#segnala-box .rcm-btn-confirm, #lettura-box .rcm-btn-confirm,
.rai-dlg-btn-danger, .rcm-btn-confirm, #confirm-modal .confirm-btn.ok:not(.gold), .modal-bg .btn-danger {
    position:relative; isolation:isolate; overflow:hidden;
    min-height:48px; padding:12px 18px !important; border-radius:14px !important;
    font-family:'Inter',sans-serif !important; font-size:14.5px !important; font-weight:700 !important;
    letter-spacing:-.005em !important; text-transform:none !important; line-height:1.3;
    cursor:pointer; filter:none !important;
    transition:color .35s, border-color .35s, box-shadow .35s, transform .12s !important;
    -webkit-tap-highlight-color:transparent;
}
/* grigio */
.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn.cancel, .modal-bg .btn-cancel {
    background:rgba(255,255,255,.04) !important; border:1px solid var(--fn-line-2) !important; color:var(--fn-ink-2) !important;
}
/* oro */
.rai-dlg-btn-primary, .scm-btn-continue, .zah-btn-ok, #lim-ok, #confirm-modal .confirm-btn.ok.gold, .modal-bg .btn-save,
#segnala-box .rcm-btn-confirm, #lettura-box .rcm-btn-confirm {
    background:var(--fn-gold-grad) !important; background-size:100% 100% !important; border:0 !important; color:var(--fn-on-gold) !important;
    box-shadow:0 10px 28px rgba(201,168,76,.26), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
/* rosso */
.rai-dlg-btn-danger, .rcm-btn-confirm:not(#segnala-box *):not(#lettura-box *), #confirm-modal .confirm-btn.ok:not(.gold), .modal-bg .btn-danger {
    background:rgba(220,50,50,.12) !important; border:1px solid rgba(240,90,90,.45) !important; color:#fca5a5 !important;
}
/* lo sweep da sinistra: avorio sul grigio, oro chiaro sull'oro, rosso sul rosso */
.rai-dlg-btn::before, .rcm-btn-cancel::before, .scm-btn-cancel::before, #confirm-modal .confirm-btn::before, .modal-bg .btn-cancel::before,
.rai-dlg-btn-primary::before, .scm-btn-continue::before, .zah-btn-ok::before, #lim-ok::before, .modal-bg .btn-save::before,
.rai-dlg-btn-danger::before, .rcm-btn-confirm::before, .modal-bg .btn-danger::before {
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--fn-ease);
    background:var(--fn-sweep-grigio);
}
.rai-dlg-btn-primary::before, .scm-btn-continue::before, .zah-btn-ok::before, #lim-ok::before, #confirm-modal .confirm-btn.ok.gold::before,
.modal-bg .btn-save::before, #segnala-box .rcm-btn-confirm::before, #lettura-box .rcm-btn-confirm::before { background:var(--fn-sweep); }
.rai-dlg-btn-danger::before, .rcm-btn-confirm:not(#segnala-box *):not(#lettura-box *)::before, #confirm-modal .confirm-btn.ok:not(.gold)::before,
.modal-bg .btn-danger::before { background:var(--fn-sweep-rosso); }
@media (hover:hover) {
    :is(.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn, .modal-bg .btn-cancel, .rai-dlg-btn-primary, .scm-btn-continue,
        .zah-btn-ok, #lim-ok, .modal-bg .btn-save, .rai-dlg-btn-danger, .rcm-btn-confirm, .modal-bg .btn-danger):not(:disabled):hover::before { transform:scaleX(1); }
    :is(.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn.cancel, .modal-bg .btn-cancel):not(:disabled):hover { color:#3a2808 !important; border-color:transparent !important; }
    :is(.rai-dlg-btn-danger, .rcm-btn-confirm:not(#segnala-box *):not(#lettura-box *), #confirm-modal .confirm-btn.ok:not(.gold), .modal-bg .btn-danger):not(:disabled):hover { color:#1a0505 !important; border-color:transparent !important; }
    :is(.rai-dlg-btn-primary, .scm-btn-continue, .zah-btn-ok, #lim-ok, #confirm-modal .confirm-btn.ok.gold, .modal-bg .btn-save, #segnala-box .rcm-btn-confirm, #lettura-box .rcm-btn-confirm):not(:disabled):hover {
        transform:none !important; box-shadow:0 16px 40px rgba(201,168,76,.40), inset 0 1px 0 rgba(255,255,255,.35) !important; }
}
:is(.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn, .modal-bg .btn-cancel, .rai-dlg-btn-primary, .scm-btn-continue,
    .zah-btn-ok, #lim-ok, .modal-bg .btn-save, .rai-dlg-btn-danger, .rcm-btn-confirm, .modal-bg .btn-danger):is(.rt-go, :focus-visible)::before { transform:scaleX(1); }
:is(.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn.cancel, .modal-bg .btn-cancel):is(.rt-go, :focus-visible) { color:#3a2808 !important; border-color:transparent !important; }
:is(.rai-dlg-btn-danger, .rcm-btn-confirm:not(#segnala-box *):not(#lettura-box *), #confirm-modal .confirm-btn.ok:not(.gold), .modal-bg .btn-danger):is(.rt-go, :focus-visible) { color:#1a0505 !important; border-color:transparent !important; }
:is(.rai-dlg-btn, .rcm-btn-cancel, .scm-btn-cancel, #confirm-modal .confirm-btn, .modal-bg .btn-cancel, .rai-dlg-btn-primary, .scm-btn-continue,
    .zah-btn-ok, #lim-ok, .modal-bg .btn-save, .rai-dlg-btn-danger, .rcm-btn-confirm, .modal-bg .btn-danger):not(:disabled):active { transform:scale(.975) !important; }
:is(.rai-dlg-btn-primary, .scm-btn-continue, .zah-btn-ok, .modal-bg .btn-save):disabled { background:#2a2620 !important; color:#b9ae98 !important; box-shadow:none !important; cursor:not-allowed; }
#lim-ok { align-self:stretch !important; }
/* l'oro un po' più largo del grigio, come nella Pro Suite (in Plastico 3D erano uguali e il testo lungo andava a capo) */
#segnala-box .rcm-btn-confirm, #lettura-box .rcm-btn-confirm { flex:1.6 !important; }

/* ═════════ DA TELEFONO: la finestra sale dal basso, i tasti uno sopra l'altro con l'oro in cima (pollice) ═════════ */
@media (max-width:560px) {
    .rai-dlg:not(#pr-pannello), #lim-dlg, #luma-fallback-modal, #confirm-modal, .modal-bg,
    #reset-confirm-modal, #segnala-modal, #lettura-modal { align-items:flex-end !important; padding:0 !important; }
    .rai-dlg:not(#pr-pannello) > .rai-dlg-box, #lim-box, #luma-fallback-modal .modal-box, #confirm-modal .confirm-box, .modal-bg .modal-box,
    #reset-confirm-box, #segnala-box, #lettura-box {
        width:100% !important; max-width:100% !important; border-radius:22px 22px 0 0 !important; margin:0 !important;
        padding:24px 20px calc(18px + env(safe-area-inset-bottom,0px)) !important; max-height:92vh; overflow:auto;
    }
    .rai-dlg-actions, .rcm-actions, .scm-actions, #confirm-modal .confirm-actions, .modal-bg .modal-actions { flex-direction:column-reverse !important; }
    :is(.rai-dlg-actions, .rcm-actions, .scm-actions, #confirm-modal .confirm-actions, .modal-bg .modal-actions) > * { flex:0 0 auto !important; width:100%; }
}

/* ═════════ L'ANTEPRIMA DEL RENDER (Cronologia, #lightbox) ═════════
   Il render a tutto schermo: velo scuro con sfocatura, l'immagine che si avvicina, la ✕ e le frecce nei cerchi della home
   (scuri col bordo, d'oro al passaggio), il contatore in una pillola. */
#lightbox { background:rgba(4,4,8,.92) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#lightbox:not(.hidden) { animation:fnVelo .22s ease both; }
#lightbox:not(.hidden) #lightbox-img { animation:fnZoom .4s var(--fn-ease) both; }
#lightbox-img { border-radius:16px !important; box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) !important; max-width:min(92vw,1600px) !important; max-height:86vh !important; }
#lightbox-close, .lightbox-nav {
    position:absolute; isolation:isolate; overflow:hidden;
    background:#16151b !important; border:1px solid var(--fn-line-2) !important; color:var(--fn-ink) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.5); transition:color .3s, border-color .3s, transform .12s !important;
}
#lightbox-close { width:46px !important; height:46px !important; top:18px !important; right:18px !important; }
.lightbox-nav { width:54px !important; height:54px !important; }
#lightbox-close::before, .lightbox-nav::before {
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--fn-gold-grad);
    transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--fn-ease);
}
@media (hover:hover) {
    #lightbox-close:hover::before, .lightbox-nav:not([disabled]):hover::before { transform:scaleX(1); }
    #lightbox-close:hover, .lightbox-nav:not([disabled]):hover { color:var(--fn-on-gold) !important; border-color:transparent !important; }
}
#lightbox-close:active, .lightbox-nav:not([disabled]):active { transform:scale(.94) !important; }
.lightbox-nav#lightbox-prev:active, .lightbox-nav#lightbox-next:active { transform:translateY(-50%) scale(.94) !important; }
.lightbox-nav[disabled] { opacity:1 !important; color:#5e584f !important; border-color:var(--fn-line) !important; }
#lightbox-counter { font-family:'Inter',sans-serif !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important;
    color:var(--fn-ink) !important; background:#16151b !important; border:1px solid var(--fn-line-2); padding:7px 14px !important; border-radius:999px !important; }

@media (prefers-reduced-motion:reduce) {
    .rai-dlg.visible, .rai-dlg.show, .rai-dlg-box, #lim-box, .confirm-box, .modal-box, .acct-modal-box, #lightbox, #lightbox-img,
    #pr-seg-box, #pr-tutta-box, #pr-vuota-box, #arr-doppio-box, #pr-sost-box, #pr-stanze-box, .pr-guida-box { animation:none !important; }
}
