/* app/css/58-push-home.css — estratto da app.css (2026-07, split senza build). */
/* ==========================================================
   W6 · Push notifications status card + iOS install banner
   ========================================================== */
/* Push status card · pattern banner tint sottile (allineato a .grace-box/.td-closed-banner),
   no border-left stripe per coerenza UI app cliente. Background varia per stato. */
.push-status-card {
  margin: 16px 14px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.push-status-card[data-state="subscribed"] { background: #ECFDF5; border-color: #BBF7D0; }
.push-status-card[data-state="default"],
.push-status-card[data-state="granted"] { background: var(--brand-soft); border-color: rgba(140,0,20,0.18); }
.push-status-card[data-state="denied"] { background: #FEE2E2; border-color: #FCA5A5; }
.push-status-card[data-state="ios-install"],
.push-status-card[data-state="ios-update"],
.push-status-card[data-state="http-required"] { background: #FEF3C7; border-color: #FCD34D; }
.push-status-card[data-state="unsupported"],
.push-status-card[data-state="loading"] { background: var(--bg); border-color: var(--line); }

.push-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.psc-body { flex: 1; min-width: 0; }
.psc-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.psc-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.psc-btn {
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  flex-shrink: 0;
  min-height: 44px;
}
.psc-btn:active { background: var(--brand-hover); }
.psc-btn[disabled] { opacity: 0.6; pointer-events: none; }
.push-status-card[data-state="subscribed"] .psc-btn { background: var(--bg); color: var(--ink-2); }
.push-status-card[data-state="subscribed"] .psc-btn:active { background: var(--line); }

/* iOS install steps · flat dentro la push-status-card (no background/border per
   evitare nested banner). Eredita colore ambra della card padre. */
.ios-install-banner {
  margin-top: 12px;
}
.iib-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.iib-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.iib-steps li { margin-bottom: 2px; }

/* --------------------------------------------------------------------------
 * W7 · WebAuthn passkey
 * -------------------------------------------------------------------------- */

/* Flash success banner (riusabile, prima istanza in sicurezza.html ?deleted=1) */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.flash .i { width: 18px; height: 18px; flex-shrink: 0; }
.flash--success {
  background: #DCFCE7;
  color: #166534;
}

/* Card singola passkey nella lista sicurezza.html (estende .menu-row pattern) */
.passkey-card {
  cursor: default;
}
.passkey-card:active { background: var(--surface); }
.passkey-card .ttl { padding-right: 8px; }
.passkey-delete-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.passkey-delete-btn:active { background: #FCE4E4; }

/* Empty state quando l'utente non ha ancora registrato nessuna passkey */
.passkey-empty-state {
  margin: 8px 18px 0;
  padding: 24px 16px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 14px;
  text-align: center;
}
.passkey-empty-state .ico {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.passkey-empty-state .ico .i { width: 24px; height: 24px; }
.passkey-empty-state .ttl {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.passkey-empty-state .sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* CTA "Aggiungi passkey" sotto la lista in sicurezza.html */
.passkey-add-cta .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.passkey-add-cta .btn-primary .i { width: 18px; height: 18px; }

/* Bottone "Accedi con passkey" su login.html — FALLBACK secondario, SOTTO il
   form magic link (redesign input-first 2026-07-09). Il path passkey primario è
   la Conditional UI (autofill sul campo email), questo è il ripiego esplicito. */
.passkey-login-block {
  margin-top: 28px;
  margin-bottom: 0;
}
.passkey-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}
.passkey-login-btn .i { width: 18px; height: 18px; }
.passkey-login-status {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
  min-height: 18px;
}

/* --------------------------------------------------------------------------
 * W8 fix · #labSwitchModal lab-row + search + locate-btn
 * -------------------------------------------------------------------------- */

.lab-search-bar {
  position: relative;
  margin-bottom: 10px;
}
.lab-search-bar .i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: var(--ink-3);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.lab-search-bar input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 16px;
  color: var(--ink);
  box-sizing: border-box;
}
.lab-search-bar input:focus {
  border-color: var(--brand);
  background: #fff;
  outline: none;
}

.locate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.locate-btn:active { background: #F8D7DD; }
.locate-btn .i { width: 18px; height: 18px; }

.lab-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lab-row:last-child { border-bottom: 0; }
.lab-row:active { background: var(--bg); }
/* "Le tue lavanderie" selezionabili: <button> dentro <form> reso come riga */
.lab-row-form { margin: 0; }
button.lab-row { width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; text-align: left; box-sizing: border-box; }
#lab-mine .lab-row-form:last-child button.lab-row { border-bottom: 0; }
.lab-row.active {
  background: var(--brand-soft);
}
.lab-row .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lab-row.active .ic {
  background: var(--brand);
  color: #fff;
}
.lab-row .body {
  flex: 1;
  min-width: 0;
}
.lab-row .body .nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.lab-row .body .ad {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.lab-row .bal {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
}
.lab-row .check {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex-shrink: 0;
}
.lab-mockup-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 2px;
}

/* Lab actions (Chiama / WhatsApp / Indicazioni) — variante card grande:
 * sostituisce il pattern compatto a 2 card piccole con 3 card icon+ttl+sub. */
.lab-actions--cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.lab-actions--cards a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  text-decoration: none;
}
.lab-actions--cards a:active { transform: scale(0.97); }
.lab-actions--cards a.call { background: var(--brand-soft); }
.lab-actions--cards a.wa { background: var(--brand-soft); }
.lab-actions--cards a.dir { background: var(--brand-soft); }
.lab-actions--cards a .ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
}
.lab-actions--cards a.call .ic { color: var(--brand); }
.lab-actions--cards a.wa .ic { color: var(--brand); }
.lab-actions--cards a.dir .ic { color: var(--brand); }
.lab-actions--cards a .ttl {
  font-size: 13px;
  font-weight: 800;
}
.lab-actions--cards a.call .ttl { color: var(--brand); }
.lab-actions--cards a.wa .ttl { color: var(--brand); }
.lab-actions--cards a.dir .ttl { color: var(--brand); }
.lab-actions--cards a .sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}

/* Card pricing dinamico (Acquista in cassa / costo zero) — tessera.html. */
.card-pricing-card {
  position: relative;
  margin: 8px 18px 0;
  padding: 16px 16px 16px 48px;
  background: var(--brand-soft);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.card-pricing-card .info-mark {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 22px;
  height: 22px;
  color: var(--brand);
}
.card-pricing-card .cpc-body strong { font-weight: 700; }
.card-pricing-card.has-promo {
  background: #FEF3C7;
  border: 1px solid #FBBF24;
}
.card-pricing-card .cpc-promo-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Geo banner soft-ask (ADR 0020 · W8 chunk 5 polish v2)
   Stato gestito da `data-state` (idle|loading|success|error) via JS lab-detect.js.
   Visibilita' iniziale = inline `style="display:none"` (JS la mette flex se eligible). */
.geo-banner {
  margin: 12px 18px 0;
  padding: 14px 16px;
  background: var(--brand-soft);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
}
.geo-banner[data-state] { display: flex; }
.geo-banner-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.geo-banner-icon svg { position: absolute; opacity: 0; transition: opacity .2s ease; }
.geo-banner[data-state="idle"]    .geo-icon-idle    { opacity: 1; }
.geo-banner[data-state="loading"] .geo-icon-loading { opacity: 1; animation: geo-spin 1s linear infinite; }
.geo-banner[data-state="success"] .geo-icon-success { opacity: 1; }
.geo-banner[data-state="error"]   .geo-icon-error   { opacity: 1; }
@keyframes geo-spin { to { transform: rotate(360deg); } }
.geo-banner-body { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.4; }
.geo-banner-title { display: block; }
.geo-banner-subtitle { color: var(--ink-3); font-size: 12px; }
.geo-banner[data-state="loading"] .geo-banner-title,
.geo-banner[data-state="success"] .geo-banner-title,
.geo-banner[data-state="error"]   .geo-banner-title,
.geo-banner[data-state="loading"] .geo-banner-subtitle,
.geo-banner[data-state="success"] .geo-banner-subtitle,
.geo-banner[data-state="error"]   .geo-banner-subtitle { display: none; }
.geo-banner[data-state="loading"] .geo-banner-status,
.geo-banner[data-state="success"] .geo-banner-status,
.geo-banner[data-state="error"]   .geo-banner-status {
  position: static; width: auto; height: auto; clip: auto;
  display: block; font-weight: 600;
}
.geo-banner-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.geo-banner[data-state="loading"] .geo-banner-actions,
.geo-banner[data-state="success"] .geo-banner-actions,
.geo-banner[data-state="error"]   .geo-banner-actions { display: none; }
.geo-banner-btn-primary {
  padding: 8px 14px; background: var(--brand); color: #fff;
  border-radius: 8px; font-size: 12px; font-weight: 700;
}
.geo-banner-btn-secondary {
  padding: 8px 14px; background: transparent; color: var(--ink-3);
  font-size: 12px; font-weight: 600;
}

/* Task E · distance pill nel public landing + sezione "Vicine a te" modal.
 * Visibile solo se active_lab ha coords + cookie user_lat presente. Tap apre
 * il modal `#labSwitchModal` con sezione `#nearbySection` popolata via
 * `window.fetchTopLabs(5)` (lab-detect.js). */
.distance-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #DBEAFE;
  color: var(--info-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
}
.distance-pill:active { opacity: 0.8; }
.distance-pill .i { width: 12px; height: 12px; }

.nearby-section {
  margin-bottom: 14px;
}
.nearby-section .section-title {
  padding: 8px 0;
}
.nearby-section .nearby-list {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.nearby-loading,
.nearby-error {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}
.nearby-error { color: var(--brand); }

/* Liste lazy del modale: skeleton a altezza stabile (titolo + 2 righe ~.lab-row)
   + cross-fade al settle htmx. Evita il salto di layout quando lo swap arriva
   mentre lo sheet sta ancora eseguendo slideUp. */
#lab-switch-lists { min-height: 132px; }
#lab-switch-lists .htmx-added { opacity: 0; }
#lab-switch-lists > * { transition: opacity 150ms ease; }
.lab-skel .skel-title { width: 40%; height: 14px; margin: 10px 0; border-radius: 7px; background: var(--bg); }
.lab-skel .skel-row { height: 48px; margin-bottom: 6px; border-radius: 12px; background: var(--bg); }

/* lab_switch_modal classi semantic (post-H follow-up · 2026-05-18) */
.locate-btn.locate-btn--modal { margin: 0 0 14px; width: 100%; border: 0; text-align: left; }
.btn-primary.locate-btn--modal { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; width: 100%; border: 0; }
.btn-primary.locate-btn--modal .i { width: 18px; height: 18px; flex-shrink: 0; }
.section-title.section-title--tight { padding: 8px 0; }
.section-title.section-title--mid { padding: 16px 0 8px; }
.lab-rows-container { background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.lab-rows-container.lab-rows-container--with-spacing { margin-bottom: 14px; }