/* SciroccoMedia — guscio "app" del portale clienti (area-clienti, progetto, firma).
   Barra in alto sempre presente, tab bar in basso solo su mobile. */

:root{--pa-topbar-h:56px;--pa-bottomnav-h:60px}

body.pa-shell{background:var(--bg,#0e0c0b)}

.pa-topbar{position:fixed;top:0;left:0;right:0;z-index:200;
  height:calc(var(--pa-topbar-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(14,12,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);display:flex;align-items:center}
.pa-topbar-inner{width:100%;max-width:760px;margin:0 auto;padding:0 .6rem;
  display:flex;align-items:center;gap:.4rem;height:var(--pa-topbar-h)}
.pa-back{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border-radius:50%;color:var(--text-primary);font-size:1.4rem;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s}
.pa-back:active,.pa-back:hover{background:rgba(255,255,255,.08)}
.pa-topbar-spacer{width:38px;flex-shrink:0}
.pa-lang{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text-secondary);font-size:.72rem;font-weight:800;letter-spacing:.02em;
  text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .15s}
.pa-lang:active,.pa-lang:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.pa-topbar-brand{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5rem}
.pa-topbar-mark{width:24px;height:24px;border-radius:7px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pa-topbar-title{font-weight:700;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}

.pa-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;
  background:rgba(14,12,11,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.pa-bottomnav-inner{max-width:760px;margin:0 auto;display:flex}
.pa-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:.55rem 0 .5rem;color:var(--text-muted);text-decoration:none;font-size:.65rem;font-weight:600;
  letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.pa-bottomnav a .pa-icon{font-size:1.3rem;line-height:1;filter:grayscale(.4);opacity:.75;transition:opacity .15s,filter .15s}
.pa-bottomnav a.pa-attivo{color:var(--accent)}
.pa-bottomnav a.pa-attivo .pa-icon{filter:none;opacity:1}
.pa-bottomnav a:active{opacity:.7}

body.pa-shell #main,body.pa-shell main{padding-top:calc(var(--pa-topbar-h) + env(safe-area-inset-top))!important}

@media (max-width:760px){
  .pa-bottomnav{display:block}
  body.pa-shell #main,body.pa-shell main{padding-bottom:calc(var(--pa-bottomnav-h) + env(safe-area-inset-bottom) + 3rem)}
  .pa-shell .ac-esci,.pa-shell .footer{display:none}
}

/* --- Walkthrough al primo accesso --- */
.pa-walk{position:fixed;inset:0;z-index:400;background:rgba(6,5,4,.82);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;overflow-y:auto}
.pa-walk[hidden]{display:none!important}
.pa-walk-card{position:relative;width:100%;max-width:480px;background:var(--bg,#0e0c0b);border:1px solid var(--border);
  border-radius:20px;padding:2.4rem 1.6rem 2rem;margin:auto;
  text-align:center;animation:paWalkUp .3s ease}
@keyframes paWalkUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.pa-walk-close{position:absolute;top:.8rem;right:.8rem;width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.08);color:var(--text-secondary,#aaa);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.pa-walk-close:hover{background:rgba(255,255,255,.16);color:#fff}
.pa-walk-logo{width:56px;height:56px;border-radius:16px;margin-bottom:1rem}
.pa-walk-emoji{font-size:2.6rem;display:block;margin-bottom:.6rem}
.pa-walk-passo h2{font-size:1.25rem;margin:0 0 .6rem}
.pa-walk-passo p{color:var(--text-secondary);font-size:.92rem;line-height:1.55;margin:0}
.pa-walk-lang{display:flex;gap:.7rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.pa-walk-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1.6rem}
.pa-walk-dots{display:flex;gap:.4rem}
.pa-walk-dots i{width:6px;height:6px;border-radius:50%;background:var(--border);display:block;font-style:normal}
.pa-walk-dots i.pa-walk-dot-attivo{background:var(--accent);width:16px;border-radius:4px;transition:width .2s}

@media print{ .pa-topbar,.pa-bottomnav,.pa-walk{display:none!important} }

/* .btn-ghost e .btn-sm non erano mai stati definiti da nessuna parte nel CSS del sito: il
   reset globale "button{border:none;background:none}" li rendeva CLICCABILI ma del tutto
   invisibili (nessun bordo, nessuno sfondo), quasi indistinguibili da testo semplice. Usati
   qui per "Chiedo modifiche" e "Invia" (progetto.php) — segnalato da un utente reale che non
   capiva come mandare un commento, 2026-09-10. */
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-primary)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--text-secondary)}
.btn-sm{padding:.55rem 1.2rem;font-size:.85rem}