/* --------------------------------------------------------------
   Portale clienti F.lli Bergo — stile allineato al sito web.

   I colori e i caratteri sono ripresi da assets/site.css del sito
   nuovo, cosi' il portale non sembra un'applicazione diversa ma la
   prosecuzione naturale di bergoarredi.it.

   Questo foglio viene caricato DOPO lo stile incorporato nelle
   pagine, quindi ne sovrascrive i colori senza doverle riscrivere.
   -------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

:root {
  /* tavolozza del sito */
  --paper:       #f5f2ec;
  --paper-warm:  #ece8df;
  --paper-deep:  #e3ded2;
  --ink:         #16160f;
  --ink-soft:    #2e2c25;
  --stone:       #7d7668;
  --stone-light: #b4ae9f;
  --line:        #d4cfc1;
  --line-soft:   #e0dbcd;
  --accent:      #5a4a34;
  --accent-light:#8a7556;
  --brass:       #9a7a48;

  /* nomi usati dalle pagine del portale, riagganciati alla tavolozza */
  --oro:    var(--brass);
  --scuro:  var(--ink);
  --bordo:  var(--line);
  --tenue:  var(--stone);
  --verde:  #4a6b4f;
  --rosso:  #8a3b32;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Titoli e cifre nel carattere del sito: e' il tratto che si riconosce */
h1, h2, h3,
.titolo, .importo, .prezzo,
.intestazione h2, .riga-totale.finale {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .01em;
}
.intestazione h2 { font-size: 30px; font-weight: 500; }
.titolo { font-size: 18px; font-weight: 500; }
.importo, .prezzo { font-weight: 500; }
.riga-totale.finale { font-size: 22px; font-weight: 600; }

/* Marchio in testata, come sul sito */
header h1 {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
}

header { background: var(--paper); border-bottom: 1px solid var(--line); }

.scheda, .riquadro, .voce, .totali, form.assistenza, .riquadro-accesso {
  background: #fff;
  border-color: var(--line-soft);
}
a.scheda:hover { border-color: var(--brass); }

.stato { background: var(--paper-warm); color: var(--stone); }
.stato.confermato, .fase.fatta, .documento a { color: var(--accent); }
.stato.confermato { background: var(--paper-deep); }

.barra { background: var(--paper-deep); }
.barra div { background: var(--brass); }

button, .accetta { background: var(--ink); color: #fff; }
button:hover, .accetta:hover { background: var(--accent); }
.salva { background: #fff !important; color: var(--ink) !important;
         border: 1px solid var(--ink) !important; }
.salva:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

input:focus, select:focus, textarea:focus { border-color: var(--brass) !important; }
input:checked + .cursore { background: var(--brass); }
.cursore { background: var(--stone-light); }

.voce.opzionale { border-left: 3px solid var(--brass); }
.segno { background: var(--paper-deep); color: var(--stone); }
.fase.fatta .segno { background: var(--paper-warm); color: var(--accent); }
.fase { background: transparent; }
.fasi .fase { background: var(--paper-warm); color: var(--stone); }
.fasi .fase.fatta { background: var(--paper-deep); color: var(--accent); }

.avviso { background: var(--paper-warm); border-color: var(--line);
          color: var(--accent); }
.errore { background: #f7ecea; border-color: #e3cfca; color: var(--rosso); }

.aiuto a, .apri, header a:hover { color: var(--brass); }

footer { color: var(--stone); }

/* ---------------------------------------------------------------
   Intestazione e piede come sul sito: il portale deve sembrare una
   pagina di bergoarredi.it, non un'applicazione a parte.
   --------------------------------------------------------------- */
header.testata-sito {
  background: #14130e; border: 0; padding: 0 clamp(1rem, 4vw, 3rem);
  height: 74px; display: flex; align-items: center; gap: 24px;
  position: sticky; top: 0; z-index: 20;
}
.testata-sito .marchio { text-decoration: none; line-height: 1.1; flex: none; }
.testata-sito .nome { display: block; color: #fff; font-weight: 700;
  letter-spacing: .22em; font-size: 19px; }
.testata-sito .claim { display: block; color: var(--stone-light);
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; }
.testata-sito .menu { display: flex; gap: clamp(14px, 2vw, 30px);
  margin-left: auto; }
.testata-sito .menu a { color: #e8e4da; text-decoration: none; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.testata-sito .menu a:hover { color: var(--brass); }
.testata-sito .area { display: flex; align-items: center; gap: 16px;
  margin-left: auto; }
.testata-sito .area .chi { color: var(--stone-light); font-size: 12.5px; }
.testata-sito .area a { color: #e8e4da; text-decoration: none; font-size: 12.5px; }
.testata-sito .area a:hover { color: var(--brass); }
@media (max-width: 1080px) { .testata-sito .menu { display: none; } }
@media (max-width: 620px) {
  header.testata-sito { height: 62px; gap: 12px; }
  .testata-sito .area .chi { display: none; }
}

/* Barra del ritorno, subito sotto la testata */
.barra-ritorno {
  background: var(--paper-warm); border-bottom: 1px solid var(--line);
  padding: 0 clamp(1rem, 4vw, 3rem); position: sticky; top: 74px; z-index: 15;
}
.barra-ritorno a {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 0;
  color: var(--ink-soft); text-decoration: none; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}
.barra-ritorno a:hover { color: var(--brass); }
.barra-ritorno .freccia { font-size: 17px; line-height: 1; }
@media (max-width: 620px) {
  .barra-ritorno { top: 62px; }
  .barra-ritorno a { padding: 11px 0; font-size: 12px; }
}

footer.piede-sito {
  background: #14130e; color: var(--stone-light); margin-top: 60px;
  padding: 54px clamp(1rem, 4vw, 3rem) 26px; text-align: left;
  /* Nella pagina di accesso il body e' un flex con align-items:center, che
     NON allarga i figli: senza questa riga il piede resta stretto e centrato
     invece di toccare i bordi. Sulle altre pagine il body non e' flex e la
     regola viene semplicemente ignorata. */
  align-self: stretch;
  width: 100%;
  /* Senza questo, da telefono il piede non si restringe sotto la larghezza
     delle sue colonne (4 x 210px) e la pagina scorre in orizzontale. */
  min-width: 0;
}
.piede-sito .colonne { display: grid; gap: 34px;
  /* min(210px, 100%) invece di 210px secco: su schermi stretti la colonna
     puo' scendere sotto i 210px invece di far sbordare la pagina. */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  max-width: 1280px; margin: 0 auto; }
.piede-sito .marchio-piede { color: #fff; font-weight: 700; letter-spacing: .22em;
  font-size: 17px; margin-bottom: 10px; }
.piede-sito .motto { font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: 15px; color: var(--stone-light); margin: 0 0 10px; }
.piede-sito h4 { color: #fff; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 14px; font-weight: 600; }
.piede-sito a { display: block; color: var(--stone-light); text-decoration: none;
  font-size: 13.5px; padding: 4px 0; }
.piede-sito a:hover { color: var(--brass); }
.piede-sito .testo { font-size: 13px; line-height: 1.7; margin: 0 0 12px; }
.piede-sito .testo a { display: inline; padding: 0; }
.piede-sito .orari { font-size: 12px; opacity: .8; }
.piede-sito .chiusura { max-width: 1280px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid #2a2820; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; opacity: .6; }