/* Pubblica un articolo (/pubblica-un-articolo) — componenti pa-* (10/11/2026).
   Usa i token di services-public.css e i componenti gs-* di gestione-social.css. */

/* Hero */
.pa-hero-facts{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.pa-hero-facts li{display:flex; flex-direction:column; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--surface) 80%, transparent); min-width:120px;}
.pa-hero-facts strong{font-size:17px; color:var(--text);}
.pa-hero-facts span{font-size:12.5px; color:var(--text-dim);}
.pa-hero-art{position:relative; height:320px; max-width:360px;}
.pa-paper{position:absolute; inset:10px 30px 20px 10px; z-index:2; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); transform:rotate(-2deg);}
.pa-paper-back{z-index:1; inset:30px 10px 0 40px; transform:rotate(4deg); background:linear-gradient(150deg, color-mix(in srgb, var(--teal) 25%, var(--surface)), color-mix(in srgb, var(--accent) 18%, var(--surface)));}
.pa-paper-tag{align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); background:color-mix(in srgb, var(--accent) 14%, transparent); padding:4px 8px; border-radius:6px;}
.pa-paper-h{height:14px; border-radius:6px; background:var(--text); opacity:.85;}
.pa-paper-h.short{width:60%;}
.pa-paper-img{height:86px; border-radius:10px; background:linear-gradient(120deg, color-mix(in srgb, var(--teal) 40%, var(--surface)), color-mix(in srgb, var(--accent) 35%, var(--surface)));}
.pa-paper-l{height:8px; border-radius:4px; background:var(--border-2); position:relative;}
.pa-paper-l.short{width:45%;}
.pa-paper-l em{position:absolute; left:30%; top:-5px; font-style:normal; font-size:11px; font-weight:700; color:var(--link); background:var(--surface); padding:0 6px; text-decoration:underline;}

/* Filtri e schede portali */
.pa-filters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 4px;}
.pa-filter{font:inherit; font-size:13.5px; padding:9px 15px; min-height:40px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all .16s ease;}
.pa-filter:hover{border-color:var(--accent-2); color:var(--text);}
.pa-filter.is-on{background:var(--text); border-color:var(--text); color:var(--surface); font-weight:600;}
.pa-empty{text-align:center; color:var(--text-dim);}
.pa-sites{display:grid; grid-template-columns:1fr; gap:16px; margin-top:22px;}
.pa-site{display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s;}
.pa-site[hidden]{display:none;}
.pa-site.is-picked{border-color:var(--teal); box-shadow:0 0 0 2px color-mix(in srgb, var(--teal) 45%, transparent), var(--shadow-sm);}
.pa-site header{display:flex; flex-direction:column; gap:3px;}
.pa-site-cat{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--link); background:color-mix(in srgb, var(--teal) 13%, transparent); padding:3px 8px; border-radius:6px;}
.pa-site h3{margin:6px 0 0; font-size:18px; color:var(--text);}
.pa-site-url{display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--link); text-decoration:none; overflow-wrap:anywhere;}
.pa-site-url:hover{text-decoration:underline;}
.pa-site-url .material-symbols-outlined{font-size:15px;}
.pa-site-desc{margin:0; font-size:14px; line-height:1.55; color:var(--text-dim);}
.pa-site-specs{margin:0; display:flex; flex-direction:column; gap:6px;}
.pa-site-specs div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; font-size:13px; line-height:1.45;}
.pa-site-specs dt{color:var(--text-mute); font-weight:600;}
.pa-site-specs dd{margin:0; color:var(--text);}
.pa-site-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.pa-site-chips li{display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:4px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);}
.pa-site-chips .material-symbols-outlined{font-size:15px; color:var(--teal);}
.pa-site footer{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--border);}
.pa-site-price strong{font-size:22px; color:var(--text);}
.pa-site-price span{font-size:12.5px; color:var(--text-mute); margin-left:4px;}
.pa-pick{position:relative; cursor:pointer;}
.pa-pick input{position:absolute; opacity:0; width:1px; height:1px;}
.pa-pick > span{display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:999px; font-weight:700; font-size:14px; border:1.5px solid var(--accent); color:var(--accent-2); background:var(--surface); transition:all .16s ease;}
.pa-pick:hover > span{background:color-mix(in srgb, var(--accent) 10%, var(--surface));}
.pa-pick input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}
.pa-pick-on{display:none;}
.pa-pick input:checked + span{background:var(--teal); border-color:var(--teal); color:#fff;}
.pa-pick input:checked + span .pa-pick-on{display:inline;}
.pa-pick input:checked + span .pa-pick-off{display:none;}

/* Prezzi */
.pa-plans{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px;}
.pa-plan{position:relative; padding:24px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);}
.pa-plan.is-featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow);}
.pa-plan-badge{position:absolute; top:-12px; left:22px; font-size:11.5px; font-weight:700; color:#fff; background:var(--accent-2); padding:4px 10px; border-radius:999px;}
.pa-plan h3{margin:0; font-size:18px; color:var(--text);}
.pa-plan-price{margin:10px 0 4px; font-size:14px; color:var(--text-dim);}
.pa-plan-price strong{font-size:28px; color:var(--text);}
.pa-plan-desc{margin:0 0 14px; font-size:14px; color:var(--text-dim);}
.pa-extras{max-width:760px; margin:24px auto 0; padding:20px 22px; border:1px dashed var(--border-2); border-radius:var(--radius-sm); background:var(--surface-2);}
.pa-extras h3{margin:0 0 10px; font-size:16px; color:var(--text);}
.pa-extras ul{list-style:none; margin:0; padding:0;}
.pa-extras li{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; color:var(--text);}
.pa-extras li:last-child{border-bottom:0;}
.pa-extras small{display:block; font-size:12.5px; color:var(--text-mute);}
.pa-extras strong{white-space:nowrap;}

/* Linee guida (riprende lr-deal di lavorare-da-remoto.css) */
.lr-deal{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px;}
.lr-deal-col{padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow:var(--shadow-sm);}
.lr-deal-col h3{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; color:var(--text);}
.lr-deal-col h3 .material-symbols-outlined{color:var(--accent);}
.pa-note-box{display:flex; gap:12px; align-items:flex-start; max-width:860px; margin:20px auto 0; padding:16px 18px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--teal) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--teal) 30%, var(--border));}
.pa-note-box .material-symbols-outlined{color:var(--teal); flex:none;}
.pa-note-box p{margin:0; font-size:14px; line-height:1.6; color:var(--text);}

/* Modulo */
.pa-form-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:24px; align-items:start;}
.pa-form-wrap[hidden]{display:none;}
.pa-form{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:26px 22px;}
.pa-fs{border:0; margin:0 0 22px; padding:0 0 18px; border-bottom:1px solid var(--border); min-width:0;}
.pa-fs legend{display:flex; align-items:center; gap:10px; padding:0; margin-bottom:14px; font-size:17px; font-weight:700; color:var(--text);}
.pa-fs legend span{width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:14px;}
.pa-form-sites{display:flex; flex-wrap:wrap; gap:8px;}
.lf-chip{position:relative; cursor:pointer;}
.lf-chip input{position:absolute; opacity:0; width:1px; height:1px;}
.lf-chip span{display:inline-flex; align-items:center; min-height:40px; padding:9px 14px; border-radius:999px; border:1px solid var(--border-2); background:var(--bg); font-size:13.5px; color:var(--text-dim); transition:all .16s ease; line-height:1.3; user-select:none;}
.lf-chip input:checked + span{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 15%, var(--surface)); color:var(--text); font-weight:600; box-shadow:0 0 0 1px var(--teal) inset;}
.lf-chip input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}
.lf-chip:hover span{border-color:var(--accent-2);}
.lf-form-panel{max-width:640px; margin:24px auto 0; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:32px 30px; text-align:center;}
.pa-hint{margin:8px 0 0; font-size:12.5px; color:var(--text-mute);}
.pa-opt{color:var(--text-mute); font-weight:400;}
.pa-mode{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.pa-mode-opt{position:relative; cursor:pointer;}
.pa-mode-opt input{position:absolute; opacity:0; width:1px; height:1px;}
.pa-mode-opt > span{display:flex; flex-direction:column; gap:2px; height:100%; padding:14px; border-radius:var(--radius-sm); border:1.5px solid var(--border-2); background:var(--surface); transition:all .16s ease;}
.pa-mode-opt strong{font-size:14.5px; color:var(--text);}
.pa-mode-opt small{font-size:12.5px; color:var(--text-dim);}
.pa-mode-opt input:checked + span{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset; background:color-mix(in srgb, var(--teal) 8%, var(--surface));}
.pa-mode-opt input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}
.pa-count{margin-top:6px; font-size:12.5px; color:var(--text-mute);}
.pa-count.is-short{color:var(--accent-2);}
.pa-form input[type=file]{padding:9px; background:var(--surface);}
.pa-link-row{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:8px; margin-bottom:8px;}
.pa-link-row input{width:100%;}
.pa-add-link{font:inherit; font-size:13.5px; font-weight:600; color:var(--link); background:none; border:0; padding:8px 0; min-height:40px; cursor:pointer;}
.pa-add-link:hover{text-decoration:underline;}
.pa-extra-opts{display:flex; flex-direction:column; gap:10px;}
.pa-extra-opts .qf-check{font-size:13.5px;}
.pa-extra-opts strong{color:var(--text);}
.pa-submit{width:100%; justify-content:center;}

/* Riepilogo prezzo */
.pa-summary-in{padding:22px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);}
.pa-summary h3{margin:0 0 12px; font-size:16px; color:var(--text);}
.pa-summary ul{list-style:none; margin:0; padding:0;}
.pa-summary li, .pa-sum-disc{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--border);}
.pa-summary li strong, .pa-sum-disc strong{white-space:nowrap;}
.pa-sum-empty{color:var(--text-mute) !important; justify-content:flex-start !important;}
.pa-sum-disc{color:var(--link);}
.pa-sum-disc[hidden]{display:none;}
.pa-sum-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;}
.pa-sum-total span{font-weight:600; color:var(--text);}
.pa-sum-total strong{font-size:26px; color:var(--text);}
.pa-sum-vat{margin:2px 0 0; text-align:right; font-size:12.5px; color:var(--text-mute);}
.pa-sum-note{margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--text-mute);}
.pa-success h3{margin:8px 0; color:var(--text);}
.pa-success p{color:var(--text-dim);}

@media (min-width:700px){
  .pa-sites{grid-template-columns:repeat(2, minmax(0,1fr));}
  .lr-deal{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (min-width:980px){
  .pa-sites{grid-template-columns:repeat(3, minmax(0,1fr));}
  .pa-plans{grid-template-columns:repeat(3, minmax(0,1fr));}
  .pa-form-wrap{grid-template-columns:minmax(0,1fr) 320px;}
  .pa-summary{position:sticky; top:96px;}
  .pa-form{padding:30px 28px;}
}
@media (max-width:560px){
  .pa-link-row{grid-template-columns:1fr;}
  .pa-link-row{padding-bottom:8px; border-bottom:1px dashed var(--border);}
  .pa-mode{grid-template-columns:1fr;}
  .pa-hero-art{display:none;}
  .pa-site-specs div{grid-template-columns:1fr; gap:0;}
}
@media (prefers-reduced-motion:reduce){
  .pa-site, .pa-pick > span, .lf-chip span, .pa-filter, .pa-mode-opt > span{transition:none;}
}

/* Scelta di un portale dalla scheda → scroll al modulo (10/11/2026) */
#pa-form{scroll-margin-top:96px;}
@keyframes pa-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,102,0,0);} 30%{box-shadow:0 0 0 4px rgba(255,102,0,.45);}}
.lf-chip.pa-flash{animation:pa-flash 1.4s ease-out 2;}
@media (prefers-reduced-motion: reduce){ .lf-chip.pa-flash{animation:none; outline:2px solid #ff6600;} }