/* V21.34 — the rider sign-up and sign-in card on a phone.
   Everything here is scoped to the account card so no other form shifts. */

/* The hint under a field was styled by where it sat, not by what it is: the name
   hint lives inside its <label> and inherited 12px/700, rendering at 10px bold,
   while the identical password hint outside the label rendered 12.5px/400. */
.auth-card--account .auth-password-rule{
  display:block;
  margin:7px 0 0;
  font:400 12.5px/1.6 Inter,Arial,sans-serif;
  letter-spacing:0;
  text-transform:none;
  color:#6f6862;
}

/* Even rhythm: label, field, hint, gap — the same for every field. */
.auth-card--account .auth-account-form>label{
  display:block;
  margin:0 0 18px;
}
.auth-card--account .auth-account-form>label>input{
  margin-top:8px;
}
.auth-card--account .auth-account-form>.auth-password-rule{
  margin:-12px 0 18px;
}
.auth-card--account .auth-account-form input{
  width:100%;
  min-height:52px;
  /* 16px keeps iOS from zooming the page in when a field takes focus. */
  font-size:16px;
}
/* The value stays in the brand weight; the placeholder is a hint, not a heading —
   at 700 it was wide enough to be clipped by the field on a 360px screen. */
.auth-card--account .auth-account-form input::placeholder{
  font-weight:400;
  color:#9a938a;
}

/* The active pill had square corners and a 20px top margin inherited from the
   generic button rule, so it sat low and pushed past the rounded track. */
.auth-card--account .auth-mode-tabs{
  gap:6px;
  padding:5px;
  border-radius:12px;
  align-items:stretch;
}
.auth-card--account .auth-mode-tabs button{
  margin:0;
  min-height:46px;
  border-radius:8px;
  font-size:14px;
  letter-spacing:.01em;
  transition:background .18s ease,color .18s ease;
}

/* The primary action of the whole page was set in 10px. */
.auth-card--account .auth-account-form>button{
  width:100%;
  min-height:52px;
  margin-top:4px;
  font-size:12px;
  letter-spacing:.16em;
}

.auth-card--account .auth-support-row{
  margin:-8px 0 16px;
}
.auth-card--account .auth-support-row a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

@media (max-width:640px){
  /* The sticky Booking / WhatsApp bar floats over the bottom of the page, so the
     submit button needs room to clear it instead of hiding behind it. */
  .auth-page--account{
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
  }
  .auth-card--account h1{
    font-size:32px;
    line-height:1.16;
    overflow-wrap:anywhere;
  }
  .auth-card--account>p{
    font-size:14px;
    line-height:1.6;
  }
  .auth-card--account .auth-mode-tabs{
    margin:20px 0 22px;
  }
}

@media (max-width:360px){
  .auth-card--account{padding-left:16px;padding-right:16px}
  .auth-card--account h1{font-size:29px}
  .auth-card--account .auth-mode-tabs button{font-size:13px}
}