/* 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. */

#authWidget { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; }

.authBtn {
  background: #0a0a0a; color: #fff; border: none; border-radius: 999px;
  padding: .55rem 1.05rem; font-size: .8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; font-family: inherit;
}
.authBtn:hover { opacity: .88; }

.authDropdown { position: relative; }
.authTrigger {
  background: #fff; border: 1px solid #e5e8ee; border-radius: 999px;
  padding: .5rem 1rem; font-size: .8rem; font-weight: 700; color: #14161a;
  cursor: pointer; display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-family: inherit;
}
.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,10,10,.55); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.authOverlay.open { display: flex; }
.authModal {
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto;
  padding: 1.4rem 1.3rem 1.6rem; position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.authClose {
  position: absolute; top: .7rem; right: .8rem; background: none; border: none;
  font-size: 1.3rem; line-height: 1; color: #6b7280; cursor: pointer; padding: .2rem .5rem;
}
.authClose:hover { color: #14161a; }

.authTabs { display: flex; gap: .4rem; margin: .2rem 0 1.1rem; }
.authTab {
  flex: 1; background: #f5f6f8; border: none; border-radius: 999px; padding: .55rem 0;
  font-size: .82rem; font-weight: 700; color: #6b7280; cursor: pointer; font-family: inherit;
}
.authTab.active { background: #0a0a0a; color: #fff; }

.authGoogleBtn {
  width: 100%; background: #fff; border: 1px solid #e5e8ee; border-radius: 10px;
  padding: .65rem 0; font-size: .82rem; font-weight: 700; color: #14161a; cursor: pointer;
  font-family: inherit;
}
.authGoogleBtn:hover { border-color: #6b7280; }
.authGoogleBtn::before {
  content: 'G'; display: inline-block; margin-right: .5rem; font-weight: 800;
  color: #4285F4; font-family: Georgia, serif;
}

.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;
}
.authInput:focus { outline: none; border-color: #ff8d36; }

.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;
}
.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: #ff8d36; color: #fff; border: none; border-radius: 10px;
  padding: .7rem 0; font-size: .85rem; font-weight: 700; cursor: pointer; margin-top: .2rem;
  font-family: inherit;
}
.authSubmit:hover { background: #e06a1a; }
.authSubmit:disabled { opacity: .6; cursor: default; }

.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 h4 { margin: 0 0 .5rem; font-size: 1rem; 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; }
}