/* account.css - area cliente (?p=account/*) e scheda clienti dell'admin.
   Si carica SOLO su quelle pagine, dopo site.css: da li' arrivano le
   variabili (--teal, --mango, ...) e le classi comuni (.container, .btn,
   .card-panel, .alert). Qui dentro c'e' solo cio' che quelle pagine
   aggiungono. site.css non va toccato: appartiene al sito pubblico.
   Mobile-first: si parte da una colonna, le griglie compaiono da 640px. */

/* ---------- Impalcatura ---------- */

.account-stretto {
  width: min(560px, 100% - 2.5rem);
}

.account-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--bordo);
}

.account-nav > a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  padding: .45rem .8rem;
  border-radius: 999px;
  line-height: 1.2;
}

.account-nav > a:hover { background: var(--bg-alt); color: var(--ink); }

.account-nav > a.is-attiva {
  background: var(--teal-chiaro);
  color: var(--teal);
}

.account-esci { margin: 0 0 0 auto; }

.account-flash-cta { margin: -.4rem 0 1rem; }

.account-nota {
  color: var(--ink-soft);
  font-size: .9rem;
  margin: .35rem 0;
}

.account-alt {
  text-align: center;
  margin: 1rem 0 2rem;
}

.account-etichetta {
  display: block;
  color: var(--ink-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Form (accesso, registrazione, profilo) ---------- */

.account-form {
  margin-bottom: 1.2rem;
}

.account-form h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.account-form label {
  display: block;
  font-weight: 600;
  margin-bottom: .8rem;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="tel"],
.account-form input[type="password"] {
  width: 100%;
  margin-top: .3rem;
  padding: .7rem .8rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
}

.account-form input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.account-form input:disabled {
  background: var(--bg-alt);
  color: var(--ink-soft);
}

.account-form .check-label { margin: .8rem 0 1rem; }

.account-form-2 { display: grid; gap: 0; }

@media (min-width: 640px) {
  .account-form-2 {
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }
}

.account-riepilogo p { margin: .4rem 0; }

/* ---------- Ordini ---------- */

.ordini-lista {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.ordine-card { margin-bottom: 1rem; }

.ordine-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  flex-wrap: wrap;
}

.ordine-codice {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.ordine-head .account-nota { margin-top: .1rem; }

.ordine-stati { display: flex; gap: .35rem; flex-wrap: wrap; }

.ordine-badge {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-alt);
  color: var(--ink-soft);
}

.ordine-badge.stato-nuovo     { background: #dbeafe; color: #1e40af; }
.ordine-badge.stato-completed { background: #d1fae5; color: #065f46; }
.ordine-badge.stato-annullato { background: #fee2e2; color: #991b1b; }
.ordine-badge.stato-pronto    { background: var(--mango-chiaro); color: #92400e; }

.ordine-dati {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: .9rem 0;
  padding: .7rem 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}

.ordine-righe {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ordine-righe > li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .35rem 0;
}

.ordine-righe .riga-qta { color: var(--ink-soft); font-weight: 700; }
.ordine-righe .riga-nome { flex: 1; }
.ordine-righe .riga-tot { font-weight: 700; white-space: nowrap; }

.ordine-ingredienti {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: .87rem;
}

.ordine-ingredienti strong { color: var(--ink); font-weight: 600; }

.ordine-note { margin: .8rem 0 0; }

.ordine-azioni { margin-top: 1rem; }

.ordine-azioni .btn { width: 100%; }

@media (min-width: 640px) {
  .ordine-azioni .btn { width: auto; }
}

/* ---------- Punti ---------- */

.punti-saldo { text-align: center; position: relative; }

/* Cuore ufficiale che saluta (ELEMENTI SITO), come nella schermata profilo
   del PDF: accostato al saldo, mai sopra i numeri. */
.punti-cuore {
  width: clamp(70px, 18%, 130px); height: auto;
  position: absolute; right: 4%; top: 50%;
  transform: translateY(-50%) rotate(6deg);
}
@media (max-width: 560px) { .punti-cuore { display: none; } }

/* Claim promo in Instrument Serif Italic (nota Marco 11/08, come nel PDF
   della schermata profilo "Piu' punti, piu' promozioni"). */
.punti-claim {
  margin: 1.6rem 0 .4rem;
  color: var(--amore-rosso, #DC0C21);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.05;
}

.punti-numero {
  margin: 0;
  font-size: clamp(3rem, 14vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
}

.punti-label {
  margin: .2rem 0 .8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  font-weight: 700;
}

.punti-regola {
  margin: 0 auto .4rem;
  max-width: 32rem;
}

.punti-titolo { margin: 1.6rem 0 .8rem; font-size: 1.2rem; }

.movimenti {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
}

.movimento {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  margin-bottom: .5rem;
  background: var(--bg);
}

.mov-delta {
  flex: 0 0 3.4rem;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  padding: .25rem 0;
  border-radius: 999px;
}

.mov-delta.is-piu  { background: #d1fae5; color: #065f46; }
.mov-delta.is-meno { background: #fee2e2; color: #991b1b; }

.mov-testo { flex: 1; min-width: 0; }
.mov-testo strong { display: block; font-weight: 600; }
.mov-testo .account-nota { margin: 0; }

.mov-saldo {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Il checkout NON carica questo foglio (e' una pagina pubblica): l'invito
   "Accedi per accumulare punti" usa apposta solo classi di site.css. */

/* ---------- Admin: scheda clienti (dentro il layout admin) ---------- */

.clienti-admin .clienti-ricerca { margin-bottom: 1rem; }
.clienti-admin .clienti-ricerca input[type="text"] { max-width: 22rem; }

.clienti-admin .riga-attiva { background: #ecfdf5; }

.clienti-admin .saldo-admin { font-size: 1.1rem; }
.clienti-admin .saldo-admin strong { font-size: 1.6rem; color: #0f766e; }

.clienti-admin .rettifiche {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

@media (min-width: 720px) {
  .clienti-admin .rettifiche { grid-template-columns: 1fr 1fr; }
}

.clienti-admin .rettifica-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: .8rem 1rem 1rem;
}

.clienti-admin .rettifica-box h3 { margin: 0 0 .4rem; font-size: 1rem; }

.clienti-admin .rettifica-box select {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
}

.clienti-admin .nota-limite {
  border-left: 3px solid #d1d5db;
  padding-left: .8rem;
  font-size: .88rem;
}