/* auth.css — widget account in header + modale login/registrazione,
   condiviso da index.html / prodotto.html / personalizza.html / account.html.
   Valori di colore propri (non var(--...) di pagina): le 3 pagine del sito
   usano ognuna una propria palette di custom properties con nomi diversi
   (--orange vs --brand vs --brand con tonalità diverse), quindi qui si usano
   colori letterali per garantire lo stesso aspetto ovunque sia incluso. */

/* i due widget vanno sempre in coppia (cart poi auth) nell'header: il margine
   automatico che li spinge a destra sta sul primo dei due (cartWidget), cosi'
   restano adiacenti tra loro indipendentemente dagli altri elementi header. */
#cartWidget { flex-shrink: 0; display: flex; align-items: center; margin-left: auto; }
#authWidget { flex-shrink: 0; display: flex; align-items: center; margin-left: .6rem; }

/* Tasto WhatsApp (29/08/2026, richiesta cliente finale) — sempre in alto a
   destra dell'header, su ogni pagina (la home la eredita dallo stesso
   header condiviso). Numero/messaggio ancora segnaposto, in attesa che
   Kevin li fornisca: il testo del link cambia, non serve toccare altro. */
.waBtn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  background: #25D366; color: #fff; text-decoration: none; border-radius: 999px;
  padding: .5rem .85rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
  margin-left: .6rem; transition: filter .15s, transform .1s;
}
.waBtn:hover { filter: brightness(1.06); }
.waBtn:active { transform: scale(.96); }
.waBtn svg { flex-shrink: 0; width: 16px; height: 16px; }
.waBtn .waBtnLabel { display: inline; }
@media (max-width: 640px) { .waBtn .waBtnLabel { display: none; } .waBtn { padding: .5rem .6rem; } }

/* Telefono cliccabile accanto a WhatsApp (09/10/2026, lavoro conversioni
   Google Ads: un numero da chiamare in vista rassicura chi arriva da un
   annuncio). Stesso numero di WhatsApp. Su telefono resta solo l'icona,
   come il bottone WhatsApp, per non far andare a capo l'header. */
.telBtn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: #14161a; text-decoration: none; border-radius: 999px;
  border: 1px solid #e5e8ee; padding: .45rem .8rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
  margin-left: .6rem; transition: border-color .15s, transform .1s;
}
.telBtn:hover { border-color: #ff8d36; }
.telBtn:active { transform: scale(.96); }
.telBtn svg { flex-shrink: 0; width: 15px; height: 15px; color: #e06a1a; }
.telBtn + .waBtn { margin-left: .4rem; }
@media (max-width: 1100px) { .telBtn .telBtnLabel { display: none; } .telBtn { padding: .45rem .55rem; } }

.cartTrigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid #e5e8ee; background: linear-gradient(165deg, #fff, #fbfbfd);
  text-decoration: none; font-size: 1.05rem; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.cartTrigger:hover { border-color: #ff8d36; box-shadow: 0 4px 12px rgba(255,141,54,.16); }
.cartTrigger:active { transform: scale(.94); }
.cartBadge {
  position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #ffab66, #ff8d36); color: #fff;
  font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
  box-shadow: 0 2px 6px rgba(255,141,54,.4); border: 1.5px solid #fff;
}

.authBtn {
  background: #0a0a0a; color: #fff; border: none; border-radius: 999px;
  padding: .55rem 1.05rem; font-size: .82rem; font-weight: 600; letter-spacing: -.005em; cursor: pointer;
  white-space: nowrap; font-family: var(--font-display, inherit);
}
.authBtn:hover { opacity: .88; }

.authDropdown { position: relative; }
.authTrigger {
  background: linear-gradient(165deg, #fff, #fbfbfd); border: 1px solid #e5e8ee; border-radius: 999px;
  padding: .5rem 1rem; font-size: .82rem; font-weight: 600; letter-spacing: -.005em; color: #14161a;
  cursor: pointer; display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-family: var(--font-display, inherit); transition: border-color .15s, box-shadow .15s;
}
.authTrigger:hover { border-color: #ff8d36; box-shadow: 0 4px 12px rgba(255,141,54,.16); }
.authTrigger .caret { font-size: .65rem; color: #6b7280; }
.authMenu {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff;
  border: 1px solid #e5e8ee; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  min-width: 180px; padding: .4rem; display: none; flex-direction: column; z-index: 60;
}
.authMenu.open { display: flex; }
.authMenu a, .authMenu button {
  display: block; text-decoration: none; text-align: left; background: none; border: none;
  padding: .55rem .6rem; border-radius: 8px; font-size: .82rem; color: #14161a;
  cursor: pointer; font-family: inherit;
}
.authMenu a:hover, .authMenu button:hover { background: #f5f6f8; }
.authMenu button { color: #f0384f; }

.authOverlay {
  position: fixed; inset: 0; background: rgba(10,7,4,.62); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(2px);
}
.authOverlay.open { display: flex; animation: authFade .18s ease; }
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes authPop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.authModal {
  background: #fff; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(10,7,4,.28), 0 2px 8px rgba(10,7,4,.08);
  width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto;
  position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  animation: authPop .22s cubic-bezier(.2,.8,.3,1);
}
.authHeader {
  display: flex; align-items: center; gap: .75rem; padding: 1.3rem 1.3rem 1.1rem;
  background: linear-gradient(135deg, #0a0a0a 0%, #262119 55%, #a1541c 100%);
  border-radius: 20px 20px 0 0; position: relative; overflow: hidden;
}
.authHeader::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120px 90px at 88% -10%, rgba(255,141,54,.55), transparent 70%);
}
.authHeader img {
  height: 34px; width: auto; display: block; border-radius: 8px; background: #fff;
  padding: 4px; position: relative; z-index: 1;
}
.authHeaderText { position: relative; z-index: 1; }
.authHeaderText strong { display: block; color: #fff; font-family: var(--font-display, inherit); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.authHeaderText span { display: block; color: rgba(255,255,255,.72); font-size: .74rem; margin-top: .1rem; }

.authBody { padding: 1.2rem 1.3rem 1.5rem; }

.authClose {
  position: absolute; top: .65rem; right: .7rem; background: rgba(0,0,0,.28); border: none;
  color: #fff; width: 26px; height: 26px; border-radius: 999px; line-height: 1;
  font-size: 1.05rem; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.authClose:hover { background: rgba(0,0,0,.45); }

.authTabs { display: flex; gap: .3rem; margin: 0 0 1.15rem; background: #f5f6f8; border-radius: 999px; padding: .25rem; }
.authTab {
  flex: 1; background: transparent; border: none; border-radius: 999px; padding: .55rem 0;
  font-size: .82rem; font-weight: 600; letter-spacing: -.005em; color: #6b7280; cursor: pointer;
  font-family: var(--font-display, inherit); transition: background .15s, color .15s;
}
.authTab.active { background: linear-gradient(135deg, #ff8d36, #e06a1a); color: #fff; box-shadow: 0 3px 10px rgba(255,141,54,.35); }

.authGoogleBtn {
  width: 100%; background: #fff; border: 1px solid #dadce0; border-radius: 10px;
  padding: .6rem 0; font-size: .84rem; font-weight: 600; color: #3c4043; cursor: pointer;
  font-family: "Google Sans", Roboto, -apple-system, Arial, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  transition: box-shadow .15s, background .15s;
}
.authGoogleBtn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60,64,67,.15); }
.authGoogleBtn svg { flex-shrink: 0; }

.authSep { display: flex; align-items: center; gap: .6rem; margin: .9rem 0; }
.authSep::before, .authSep::after { content: ''; flex: 1; height: 1px; background: #e5e8ee; }
.authSep span { font-size: .7rem; color: #6b7280; white-space: nowrap; }

.authInput {
  width: 100%; padding: .65rem .8rem; border: 1px solid #e5e8ee; border-radius: 10px;
  font-size: .85rem; margin-bottom: .55rem; font-family: inherit; background: #fff; color: #14161a;
  transition: border-color .15s, box-shadow .15s;
}
.authInput:focus { outline: none; border-color: #ff8d36; box-shadow: 0 0 0 3px rgba(255,141,54,.14); }

.authTypeToggle { display: flex; gap: .4rem; margin-bottom: .7rem; }
.authTypeToggle button {
  flex: 1; background: #f5f6f8; border: 1px solid #e5e8ee; border-radius: 10px;
  padding: .45rem 0; font-size: .78rem; font-weight: 700; color: #6b7280; cursor: pointer;
  font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.authTypeToggle button.active { background: #fff3e8; border-color: #ff8d36; color: #e06a1a; }

.authMsg { color: #f0384f; font-size: .78rem; min-height: 1.1em; margin-bottom: .3rem; }

.authSubmit {
  width: 100%; background: linear-gradient(135deg, #ff8d36, #e06a1a); color: #fff; border: none; border-radius: 10px;
  padding: .7rem 0; font-size: .88rem; font-weight: 600; letter-spacing: -.005em; cursor: pointer; margin-top: .2rem;
  font-family: var(--font-display, inherit); box-shadow: 0 3px 10px rgba(255,141,54,.22); transition: filter .15s, transform .1s, box-shadow .15s;
}
.authSubmit:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(255,141,54,.28); }
.authSubmit:active { transform: translateY(1px); }
.authSubmit:disabled { opacity: .6; cursor: default; box-shadow: none; }

.authResend { font-size: .76rem; color: #6b7280; margin-top: .6rem; text-align: center; }
.authResend button {
  background: none; border: none; color: #e06a1a; font-weight: 700; cursor: pointer;
  font-size: .76rem; padding: 0; font-family: inherit;
}

.authSuccess { text-align: center; padding: 1rem 0; }
.authSuccess .authSuccessIcon {
  width: 52px; height: 52px; border-radius: 999px; margin: 0 auto .8rem;
  background: linear-gradient(135deg, #ff8d36, #e06a1a); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,141,54,.3);
}
.authSuccess h4 { margin: 0 0 .5rem; font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: #14161a; }
.authSuccess p { margin: 0; font-size: .84rem; color: #6b7280; }

@media (max-width: 640px) {
  .authTrigger span:not(.caret) { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Con il telefono in più, logo+carrello+account+telefono+WhatsApp a 390px
   mandavano WhatsApp a capo: su schermi stretti spazi ridotti. */
@media (max-width: 640px) {
  body > header { gap: .5rem; }
  .telBtn, .telBtn + .waBtn { margin-left: 0; }
}