/* Pages de connexion et d'inscription (login.html, signup.html), inspirées de Spotify :
   pas de header, une colonne centrée, logo en haut, grand titre, champs et boutons pleine largeur. */

.auth-page {
  display: flex;
  justify-content: center;          /* colonne centrée horizontalement */
  padding: 48px 16px;
}

.auth-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.auth-logo img {
  width: 72px;
  height: auto;
}

.auth-box h1 {
  margin: 16px 0 32px;
  font-size: 2.4rem;
  line-height: 1.15;
  color: #ffffff;
}

.auth-tagline {
  margin: -20px 0 32px;             /* sous-titre collé au titre (page d'inscription) */
  color: #b3b3b3;
  font-size: 1.1rem;
}

/* Formulaire */
.auth-form {
  display: flex;
  flex-direction: column;           /* champs les uns sous les autres */
  text-align: left;
}

.auth-form label {
  margin-bottom: 8px;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
  background-color: #0f1117;
  border: 1px solid #727272;
  border-radius: 6px;
  color: #ffffff;
  font-size: 1rem;
}

.auth-form input:hover {
  border-color: #ffffff;
}

.auth-form input:focus {
  outline: none;
  border-color: #eab711;            /* champ actif entouré de jaune */
  box-shadow: 0 0 0 1px #eab711;
}

/* Message d'erreur sous un champ (affiché / caché en JS avec hidden) */
.auth-form .field-error {
  margin: -10px 0 14px;             /* remonte sous le champ (qui a déjà 16px de marge en bas) */
  color: #ff6b6b;
  font-size: 0.85rem;
}

.label-row {
  display: flex;
  justify-content: space-between;   /* "Password" à gauche, "Forgot password?" à droite */
  align-items: baseline;
}

.small-link {
  font-size: 0.85rem;
  color: #12b5f0;
}

/* Cases à cocher : la case et son texte sur la même ligne */
.auth-form .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: normal;
  color: #b3b3b3;
  line-height: 1.4;
}

.auth-form .checkbox input {
  margin-top: 3px;
  accent-color: #eab711;            /* case cochée en jaune */
}

.auth-form .checkbox a {
  color: #ffffff;
}

/* Bouton principal : grande pilule jaune */
.auth-submit {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background-color: #eab711;
  color: #0f1117;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.auth-submit:hover {
  background-color: #f5c93a;
  transform: scale(1.02);           /* léger grossissement au survol */
}

/* Séparateur "or" */
.auth-or {
  margin: 24px 0;
  color: #ffffff;
}

/* Boutons Google / Apple : contour fin, icône à gauche, texte centré */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-btn {
  position: relative;
  width: 100%;
  padding: 14px;
  background-color: transparent;
  border: 1px solid #727272;
  border-radius: 999px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.social-btn:hover {
  border-color: #ffffff;
  background-color: transparent;
}

.social-btn svg {
  position: absolute;               /* icône collée à gauche, le texte reste centré */
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
}

/* Lien vers l'autre page (login <-> signup) */
.auth-switch {
  margin-top: 48px;
  color: #b3b3b3;
}

.auth-switch a {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.auth-switch a:hover {
  color: #eab711;
  text-decoration: underline;
}

/* Petits liens légaux tout en bas */
.auth-footer {
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
}

.auth-footer a {
  margin: 0 8px;
  color: #727272;
  text-decoration: none;
}

.auth-footer a:hover {
  color: #ffffff;
}


#confirm-delivery:disabled, .auth-submit:disabled {
  background-color: #727272;
}