/* 🧩 Tab "AISA SEO" in Elementor — palette IDENTICA alla tab flottante (aisa-style-tab).
   Scoped sotto #aisa-el-content così batte il tema dell'editor Elementor. */

/* Selettore CON l'id del nav: quello di Elementor (#…-navigation .tab) altrimenti vince
   e il logo finisce a bandiera sinistra (bug segnalato da Paolo 2026-07-16). */
.aisa-el-navtab,
#elementor-panel-elements-navigation .aisa-el-navtab { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Logo AISA (wordmark senza payoff) al posto della scritta nella tab */
.aisa-el-navtab svg { height: 20px; width: auto; display: block; margin: 0 auto; }
.aisa-el-navtab .aisaTabL { fill: #262626; }             /* lettere: scure su pannello chiaro */
.eps-theme-dark .aisa-el-navtab .aisaTabL,
body.eps-theme-dark .aisa-el-navtab .aisaTabL { fill: #e8e8f0; } /* editor dark di Elementor */

#aisa-el-content { background: #0f0f1a; color: #e8e6f0; }
.aisa-el { padding: 15px; }

/* 🧩 UN SOLO PANNELLO: nelle Impostazioni pagina il pannello (#aisa-el-content)
   viene SPOSTATO nel mount — qui solo il raccordo col layout dei controlli. */
#aisa-el-ps-mount { margin: -10px -20px; }
#aisa-el-ps-mount #aisa-el-content { display: block; }

/* Logo AISA anche nella tab delle Impostazioni pagina (label sostituito via JS) */
.aisa-el-pstab { display: inline-flex; align-items: center; justify-content: center; }
.aisa-el-pstab svg, .aisa-el-pstab a svg { height: 18px; width: auto; display: block; margin: 0 auto; }
.aisa-el-pstab .aisaTabL { fill: #262626; }
.eps-theme-dark .aisa-el-pstab .aisaTabL,
body.eps-theme-dark .aisa-el-pstab .aisaTabL { fill: #e8e8f0; }

/* ✨ Genera con AI — gradiente oro (come la tab) */
.aisa-el-gen { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#aisa-el-content .aisa-el-do-gen { background: linear-gradient( 135deg, #e2c97e, #c9a84c ); color: #0f0f1a; border: 0; font-weight: 700; }
.aisa-el-genst { font-size: 12px; }
.aisa-el-genst.is-ok { color: #7ee0a0; }
.aisa-el-genst.is-err { color: #ff8a8a; }

/* Opzioni di generazione (slug URL / AI Search Context): riga sotto il pulsante. */
.aisa-el-genopts { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 14px; }
.aisa-el-genopt { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.4; color: #c9c7dd; cursor: pointer; }
.aisa-el-genopt:hover { color: #e8e6f0; }
.aisa-el-genopt input { margin: 0; flex: 0 0 auto; }
.aisa-el-ctxst { font-size: 11px; font-weight: 600; }
.aisa-el-ctxst.is-ok { color: #7ee0a0; }
.aisa-el-ctxst.is-err { color: #ff8a8a; }
.aisa-el-slugrow[hidden] { display: none; }

/* Anteprima SERP — resta su bianco come Google */
.aisa-el-serp { border: 1px solid #2a2a4a; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; background: #fff; }
.aisa-el-serp-title { color: #1a0dab; font-size: 16px; line-height: 1.3; white-space: normal; word-break: break-word; }
.aisa-el-serp-url { color: #006621; font-size: 12px; margin: 2px 0; }
.aisa-el-serp-desc { color: #545454; font-size: 12px; line-height: 1.4; }

/* Campi */
.aisa-el-row { display: block; margin-bottom: 12px; }
.aisa-el-row > span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9a9ac0; margin-bottom: 5px; }
#aisa-el-content .aisa-el-row input,
#aisa-el-content .aisa-el-row textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #2a2a4a; border-radius: 6px; background: #1a1a2e; color: #e8e6f0; font-size: 13px; font-family: inherit; }
.aisa-el-c { font-weight: 400; color: #9a9ac0; text-transform: none; letter-spacing: 0; }

/* Salva */
.aisa-el-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.aisa-el-status { font-size: 12px; }
.aisa-el-status.is-ok { color: #7ee0a0; }
.aisa-el-status.is-err { color: #ff8a8a; }

/* 🔁 Varianti — chip stile tab (viola), attiva evidenziata */
.aisa-el-vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
#aisa-el-content .aisa-el-do-vars { background: #1e1a3a; border: 1px solid #3a3060; color: #a090d8; font-weight: 600; }
.aisa-el-varst { font-size: 12px; }
.aisa-el-varst.is-ok { color: #7ee0a0; }
.aisa-el-varst.is-err { color: #ff8a8a; }
.aisa-el-vlist { margin: 4px 0 10px; }
.aisa-el-vlist:empty { margin: 0; }
.aisa-el-vcap { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9a9ac0; margin-bottom: 5px; }
#aisa-el-content .aisa-el-vchip { font-size: 12px; line-height: 1.4; padding: 6px 9px; border: 1px solid #3a3060; border-radius: 6px; margin-bottom: 5px; background: #1e1a3a; color: #b0a0e8; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
#aisa-el-content .aisa-el-vchip:hover { border-color: #6b54b8; color: #c4b5fd; }
#aisa-el-content .aisa-el-vchip.is-active { background: #2d1f5e; border-color: #5b3fa8; color: #c4b5fd; font-weight: 600; }
.aisa-el-vnote { font-size: 11px; line-height: 1.4; color: #9a9ac0; background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 6px; padding: 7px 9px; margin-bottom: 10px; }

/* ── Pillole variabili (page title, separatore, sitename…) → inseriscono il token ── */
.aisa-el-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: -2px 0 10px; }
.aisa-el-plab { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9a9ac0; margin-right: 2px; }
#aisa-el-content .aisa-el-pill { font-size: 11px; line-height: 1; padding: 5px 9px; border: 1px solid #3a3060; border-radius: 999px; background: #1e1a3a; color: #b0a0e8; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
#aisa-el-content .aisa-el-pill:hover { border-color: #6b54b8; color: #c4b5fd; background: #241d47; }

/* ── Varianti rotazione editabili (aggiungi/rimuovi a mano) ── */
.aisa-el-vwrap { margin: 4px 0 10px; }
.aisa-el-vr { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 5px; }
#aisa-el-content .aisa-el-vi { flex: 1; box-sizing: border-box; padding: 7px 9px; border: 1px solid #2a2a4a; border-radius: 6px; background: #1a1a2e; color: #e8e6f0; font-size: 12px; font-family: inherit; }
#aisa-el-content textarea.aisa-el-vi { resize: vertical; }
#aisa-el-content .aisa-el-vdel, #aisa-el-content .aisa-el-vuse { flex: none; width: 30px; height: 32px; align-self: flex-start; border-radius: 6px; cursor: pointer; display: grid; place-items: center; line-height: 1; }
#aisa-el-content .aisa-el-vdel { border: 1px solid #3a2a3a; background: #241a24; color: #d88a8a; font-size: 16px; }
#aisa-el-content .aisa-el-vdel:hover { border-color: #a05050; color: #ff8a8a; }
#aisa-el-content .aisa-el-vuse { border: 1px solid #2a3a30; background: #172417; color: #7ec89a; }
#aisa-el-content .aisa-el-vuse:hover { border-color: #4a8060; color: #a0e0b8; }
#aisa-el-content .aisa-el-vuse svg { width: 14px; height: 14px; }
#aisa-el-content .aisa-el-add { font-size: 11px; padding: 5px 11px; border: 1px dashed #3a3060; border-radius: 6px; background: transparent; color: #a090d8; cursor: pointer; }
#aisa-el-content .aisa-el-add:hover { border-color: #6b54b8; color: #c4b5fd; background: #1e1a3a; }

/* Contatore rosso quando la lunghezza REALE (variabili risolte) supera il consigliato */
#aisa-el-content .aisa-el-c.over { color: #ff8a8a; font-weight: 600; }

/* ── Campi SEO title/description a PILLOLE (contenteditable) ── */
#aisa-el-content .aisa-el-ce { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 10px; border: 1px solid #2a2a4a; border-radius: 6px; background: #1a1a2e; color: #e8e6f0; font-size: 13px; line-height: 1.7; outline: none; overflow-wrap: anywhere; }
#aisa-el-content .aisa-el-ce.aisa-el-ce-multi { min-height: 62px; }
#aisa-el-content .aisa-el-ce:focus { border-color: #6b54b8; }
#aisa-el-content .aisa-el-chip { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 4px; background: #2d1f5e; color: #c4b5fd; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; user-select: none; cursor: default; }
#aisa-el-content .aisa-el-chip.is-unknown { background: #3a2a2a; color: #e0a0a0; }