/* ═══════════════════════════════════════════════════════════════════════════
   Tema delle app — Serrature Online Palermo

   Le tre PWA erano nate con tre palette diverse (indaco, verde, azzurro).
   Questo foglio si carica dopo il loro e riscrive le variabili, così tutte e
   tre parlano la lingua del marchio senza toccare una riga del loro CSS.

   Il rosso resta l'unica tinta viva: identifica l'azione da fare adesso.
   Tutto il resto è nero caldo e grigi, altrimenti il rosso non risalta più.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('theme.css');

:root {
  --primary:       #e30613;
  --primary-dark:  #b3050f;
  --primary-light: #f8bcc2;
  --accent:        #e30613;
  --dark:          #1d1b1b;

  --bg:            #f7f8fa;
  --surface:       #ffffff;
  --border:        #e2e8f0;
  --text:          #1d1b1b;
  --text-muted:    #64748b;
  --muted:         #64748b;

  --success:       #16a34a;
  --green:         #16a34a;
  --green-dk:      #15803d;
  --warning:       #b45309;
  --danger:        #e30613;
  --red:           #e30613;

  --radius:        16px;
  --shadow:        0 1px 2px rgba(29,27,27,.06), 0 8px 24px rgba(29,27,27,.05);
}

html, body {
  font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Intestazione scura ──────────────────────────────────────────────────────
   Il nero caldo in cima dà un appiglio: qualunque schermata si stia guardando,
   la fascia superiore è sempre la stessa e si capisce di essere nell'app. */

.spp-header, .app-header, header.pro-header, #app-header {
  background: var(--dark) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
.spp-header *, .app-header *, header.pro-header * { color: inherit; }

/* ── Barra di navigazione in basso ─────────────────────────────────────────
   Scura come l'intestazione: chiude la schermata in basso e stacca dalle
   schede chiare. Era bianca su fondo quasi bianco e spariva. */

.spp-nav, .bottom-nav, .pro-nav, #bottom-nav {
  background: var(--dark) !important;
  border-top: 0 !important;
}
.spp-nav .nav-item, .bottom-nav .nav-item, .pro-nav .nav-item { color: #9b9597 !important; }
.spp-nav .active, .bottom-nav .active, .pro-nav .active,
.spp-nav-item.active, .nav-item.active {
  color: #ffffff !important;
}

/* ── Pulsanti ────────────────────────────────────────────────────────────── */

.spp-btn-primary, .btn-primary, button.primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700;
}
.spp-btn-primary:hover, .btn-primary:hover { background: var(--primary-dark) !important; }

.spp-btn-secondary, .btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600;
}

/* ── Schermata di avvio ──────────────────────────────────────────────────── */

#splash {
  background: var(--dark) !important;
}
#splash h1 { color: #fff; }

/* ── Superfici ───────────────────────────────────────────────────────────── */

.spp-card, .card, .job-card, .request-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Campi ───────────────────────────────────────────────────────────────── */

.spp-input, .form-input, input, select, textarea {
  font-family: inherit;
}
.spp-input:focus, .form-input:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: transparent;
}

/* ── Interruttore disponibilità del professionista ───────────────────────── */

input:checked + .slider, .switch input:checked + span {
  background: var(--success) !important;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Avvisi in fondo allo schermo ────────────────────────────────────────────
   Sono nero caldo come la schermata d'accesso, e lì sopra sparivano: un filo
   di bordo chiaro li stacca da qualunque fondo. */

.toast, #toast {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Allineamento al sito (ottobre 2026)
   Il sito è passato dal blu notte al nero caldo con il rosso: le app seguono,
   così chi passa dal sito all'app non ha l'impressione di cambiare servizio.
   Il logo è lo stesso del sito, preso direttamente da WordPress.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --dark:          #1d1b1b;
  --text:          #1d1b1b;
  --bg:            #f7f6f6;
  --border:        #ebe7e7;
  --text-muted:    #6e6a6c;
  --muted:         #6e6a6c;
  --shadow:        0 1px 2px rgba(29,27,27,.06), 0 8px 24px rgba(29,27,27,.05);
  --sop-logo:      url('/wp-content/uploads/2026/10/Logo-Serrature-On-Line-moderno.png');
  --sop-sfondo:    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(227,6,19,.28), transparent 70%),
                   linear-gradient(165deg, #1d1b1b 0%, #151318 55%, #0d0c12 100%);
}

/* Fondi scuri con lo stesso bagliore rosso del sito */
.splash, #splash, #splash-screen, #page-auth {
  background: var(--sop-sfondo) !important;
}

/* Barra in basso: nero caldo con un filo rosso in cima, come l'header del sito */
.spp-nav, .bottom-nav, .pro-nav, #bottom-nav {
  background: linear-gradient(180deg, #1f1c1d, #141217) !important;
  box-shadow: 0 -1px 0 rgba(227,6,19,.45), 0 -10px 30px -12px rgba(0,0,0,.35) !important;
}

/* ── Logo del sito al posto del lucchetto ───────────────────────────────── */
.splash-icon, .auth-logo, #splash .icon {
  width: 220px !important;
  max-width: 70vw;
  height: 74px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--sop-logo) center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 18px rgba(227,6,19,.45));
  font-size: 0 !important;
  color: transparent !important;
}
.splash-icon svg, .auth-logo svg, #splash .icon svg { display: none !important; }

/* Nella schermata d'accesso il logo sta su una scheda bianca: il testo del
   logo è bianco, quindi gli si dà una targhetta scura come l'header del sito. */
.auth-logo {
  width: 240px !important;
  height: 86px !important;
  border-radius: 18px !important;
  background: var(--sop-logo) center / 80% auto no-repeat,
              radial-gradient(ellipse 70% 90% at 30% 50%, rgba(227,6,19,.35), transparent 70%),
              linear-gradient(165deg, #1d1b1b, #0d0c12) !important;
  box-shadow: 0 12px 30px -14px rgba(13,12,18,.7) !important;
  filter: none;
}

/* Il nome è già scritto nel logo: resta per i lettori di schermo, sparisce a video */
.splash-logo h1, #splash h1, #page-auth .auth-container > h1 {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.splash-logo p, #splash p { color: rgba(255,255,255,.75) !important; }

/* ── "Quando ti serve?": la scelta fatta deve vedersi ───────────────────── */
.date-preset.selected {
  border-color: var(--primary) !important;
  background: rgba(227,6,19,.05) !important;
  box-shadow: 0 0 0 4px rgba(227,6,19,.12) !important;
}
.date-preset.selected .date-preset-icon {
  background: linear-gradient(135deg, #e30613, #ff5a36) !important;
  color: #fff !important;
  filter: none !important;
}


/* ── "Quando ti serve?": le tre scelte su un'unica riga ─────────────────────
   Una sola riga si legge a colpo d'occhio e lascia "Continua" subito sotto.
   Sul telefono le schede diventano compatte: icona e titolo, senza sottotitolo. */
#date-presets {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px !important;
}
#date-presets .date-preset {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 8px;
  height: 100%;
}
#date-presets .date-preset-text { flex: none; }
@media (max-width: 520px) {
  #date-presets .date-preset-sub { display: none; }
  #date-presets .date-preset-icon { width: 40px; height: 40px; }
  #date-presets .date-preset-title { font-size: 13px; line-height: 1.25; }
}


/* ── Logo che riporta al sito ──────────────────────────────────────────────
   In cima alla schermata principale (cliente e professionista): una fascia
   scura con il logo del sito; toccandola si torna a serratureonlinepalermo.it. */
.sop-vai-sito {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; padding: 10px 16px; border-radius: 16px; text-decoration: none !important;
  background: radial-gradient(ellipse 60% 120% at 20% 50%, rgba(227,6,19,.35), transparent 70%),
              linear-gradient(165deg, #1d1b1b, #0d0c12);
  box-shadow: 0 10px 26px -14px rgba(13,12,18,.7);
  transition: transform .25s, box-shadow .25s;
}
.sop-vai-sito:hover, .sop-vai-sito:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(227,6,19,.55); }
.sop-vai-logo { width: 150px; height: 44px; background: var(--sop-logo) left center / contain no-repeat; }
.sop-vai-testo { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: .9; }
a.auth-logo { display: block; cursor: pointer; }