:root{
  --su-auth-ink:#171717;
  --su-auth-muted:#6f6f6f;
  --su-auth-border:#dedede;
  --su-auth-accent:#4a2a1e;
  --su-auth-green:#233f32;
  --su-auth-bg:#fff;
}

html.su-passwordless-auth,
html.su-passwordless-auth body{
  width:100%;
  min-width:100%;
  min-height:100%;
  margin:0;
  background:var(--su-auth-bg);
}

body.su-passwordless-auth{
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--su-auth-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.su-passwordless-auth *{box-sizing:border-box}

/* Keep the site's existing Cherry loader but isolate it from auth layout. */
body.su-passwordless-auth .loader{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99999;
  animation:fadeOut .4s ease forwards;
  animation-delay:2.2s;
}
body.su-passwordless-auth .loader img{
  width:120px;
  height:120px;
  object-fit:contain;
  transform:scale(.1);
  opacity:0;
  animation:zoomInClean 2s ease forwards;
}

.su-auth-screen{
  position:relative;
  width:100%;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  background:#fff;
}

.su-auth-brand{
  position:absolute;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:90px;
  height:90px;
  z-index:2;
}
.su-auth-brand img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.su-auth-center{
  position:absolute;
  top:50%;
  left:50%;
  width:min(374px,calc(100vw - 58px));
  transform:translate(-50%,-43%);
}

.su-auth-stage{
  position:relative;
  width:100%;
}
.su-auth-step{
  width:100%;
  opacity:1;
  transform:translateX(0);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.su-auth-step[hidden]{display:none!important}
.su-auth-step.is-leaving{opacity:0;transform:translateX(-12px)}
.su-auth-step.is-entering{opacity:0;transform:translateX(12px)}

.su-auth-title{
  margin:0 0 7px;
  font-size:27px;
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.65px;
}
.su-auth-subtitle{
  margin:0 0 22px;
  max-width:420px;
  color:var(--su-auth-muted);
  font-size:16px;
  line-height:1.38;
}


.su-auth-google{
  width:100%;
  height:50px;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid #dedede;
  border-radius:14px;
  background:#fff!important;
  color:#171717!important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:600 14px/1 Arial,Helvetica,sans-serif;
  box-shadow:none!important;
  cursor:pointer;
  transform:none!important;
}
.su-auth-google:hover,
.su-auth-google:active,
.su-auth-google:focus{
  background:#fff!important;
  color:#171717!important;
  border-color:#dedede;
  box-shadow:none!important;
  transform:none!important;
}
.su-auth-google:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
}
.su-auth-google-icon{
  flex:0 0 18px;
  width:18px;
  height:18px;
  display:block;
}
.su-auth-divider{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  margin:16px 0;
  color:#8a8a8a;
  font:400 12px/1 Arial,Helvetica,sans-serif;
}
.su-auth-divider span{
  flex:1 1 auto;
  height:1px;
  background:#dedede;
}
.su-auth-divider em{
  margin:0;
  padding:0;
  font:inherit;
  font-style:normal;
}


.su-auth-email-field{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:50px;
  min-height:50px;
  border:1px solid #dedede;
  border-radius:14px;
  background:#fff;
  transition:border-color .16s ease;
}
#authEmailForm{
  width:100%;
  max-width:none;
  padding:0!important;
  margin:0;
  align-items:stretch;
}
.su-auth-email-field:focus-within{
  border:2px solid #111;
}
.su-auth-email-field label{
  position:absolute;
  z-index:1;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  color:#6f6f6f;
  font:400 14px/1 Arial,Helvetica,sans-serif;
  pointer-events:none;
  transform-origin:left top;
  transition:top .14s ease,transform .14s ease,font-size .14s ease,color .14s ease;
}
.su-auth-email-field input:not(:placeholder-shown) + label{
  top:8px;
  transform:none;
  color:#707070;
  font-size:11px;
}
.su-auth-email-field input{
  width:100%!important;
  max-width:none!important;
  min-width:0;
  height:48px!important;
  border:0!important;
  outline:0!important;
  border-radius:14px!important;
  padding:17px 44px 0 11px!important;
  margin:0!important;
  background:transparent!important;
  color:#111!important;
  font:400 14px/1.2 Arial,Helvetica,sans-serif!important;
  box-shadow:none!important;
}
/* Keep the empty-field caret vertically centered with the resting label.
   Once the user types, the existing top padding moves the typed text down
   while the label floats upward. */
.su-auth-email-field input:placeholder-shown{
  padding:0 44px 0 11px!important;
}
.su-auth-email-field input::placeholder{color:transparent!important;opacity:0!important}
.su-auth-email-field input:focus{box-shadow:none!important}

.su-auth-arrow{
  position:absolute;
  z-index:2;
  right:5px;
  top:0;
  width:38px!important;
  max-width:38px!important;
  height:48px;
  margin:0!important;
  padding:0!important;
  border:0;
  border-radius:0;
  background:transparent!important;
  color:#111!important;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:none!important;
  transition:opacity .12s ease;
}
.su-auth-arrow:hover,
.su-auth-arrow:active,
.su-auth-arrow:focus-visible{
  transform:none;
  background:transparent!important;
  color:#111!important;
  box-shadow:none!important;
}
.su-auth-arrow:focus-visible{outline:1px solid #bdbdbd;outline-offset:-8px;border-radius:10px}
.su-auth-arrow:disabled{opacity:.45;cursor:default;transform:none}
.su-auth-arrow svg{width:18px;height:18px;display:block}
.su-auth-arrow svg path{stroke-width:1.7}
.su-auth-arrow.is-busy svg{animation:suArrowPulse .8s ease-in-out infinite alternate}
@keyframes suArrowPulse{to{transform:translateX(2px);opacity:.55}}

.su-auth-terms-line{
  margin:31px 0 0;
  text-align:center;
  color:#7b7b7b;
  font-size:13px;
  line-height:1.45;
}
.su-auth-text-button{
  border:0;
  padding:0;
  margin:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.su-auth-text-button:hover{color:#333}

.su-auth-message{
  display:none;
  margin:12px 2px 0;
  font-size:13px;
  line-height:1.4;
}
.su-auth-message.is-visible{display:block}
.su-auth-message.is-error{color:#a12f2f}
.su-auth-message.is-success{color:#285f42}

.su-auth-code-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
  margin:0 0 21px;
  color:#777;
  font-size:14px;
  line-height:1.35;
}
.su-auth-code-meta strong{
  max-width:290px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:400;
  color:#777;
}
.su-auth-change{
  border:0;
  padding:0;
  background:none;
  color:var(--su-auth-accent);
  font:500 14px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.su-auth-change:hover{text-decoration:underline;text-underline-offset:2px}

.su-auth-code-grid{
  display:grid;
  grid-template-columns:repeat(6,54px);
  gap:8px;
  width:max-content;
  max-width:100%;
}
.su-auth-code-input{
  width:54px!important;
  height:66px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--su-auth-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#1a1a1a!important;
  text-align:center!important;
  font:500 24px/1 Arial,Helvetica,sans-serif!important;
  outline:0!important;
  box-shadow:none!important;
  caret-color:var(--su-auth-accent);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.su-auth-code-input:focus{
  border:2px solid var(--su-auth-accent)!important;
  box-shadow:none!important;
}
.su-auth-code-input:disabled{background:#fafafa!important;color:#777!important}

.su-auth-code-actions{
  min-height:22px;
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:15px;
  color:#737373;
  font-size:13px;
}
.su-auth-resend{
  border:0;
  padding:0;
  background:none;
  color:var(--su-auth-accent);
  font:500 13px/1.3 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.su-auth-resend[hidden]{display:none}
.su-auth-resend:hover{text-decoration:underline;text-underline-offset:2px}

.su-auth-privacy{
  position:absolute;
  left:50%;
  bottom:max(23px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  border:0;
  background:none;
  padding:8px 10px;
  color:var(--su-auth-green);
  font:400 14px/1.2 Arial,Helvetica,sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:none;
}
.su-auth-privacy:hover,
.su-auth-privacy:active,
.su-auth-privacy:focus{
  color:var(--su-auth-green);
  background:none;
  text-decoration:none;
  transform:translateX(-50%);
}
.su-auth-privacy:focus-visible{outline:1px solid #9aa8a1;outline-offset:2px}

/* Legal modal patterned after the clean account flow, with Sucesso copy. */
.su-legal-modal{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.su-legal-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease;
}
.su-legal-card{
  position:relative;
  width:min(520px,100%);
  max-height:min(82svh,760px);
  overflow:hidden;
  border-radius:17px;
  background:#fff;
  box-shadow:0 18px 55px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:transform .24s cubic-bezier(.2,.75,.25,1),opacity .2s ease;
}
.su-legal-modal.is-open .su-legal-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
.su-legal-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:19px 20px 13px;
  background:#fff;
}
.su-legal-head h2{
  margin:0;
  font:700 20px/1.2 Arial,Helvetica,sans-serif;
}
.su-legal-close{
  position:relative;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.su-legal-close:before,.su-legal-close:after{
  content:"";
  position:absolute;
  top:14px;
  left:6px;
  width:18px;
  height:1px;
  background:#666;
}
.su-legal-close:before{transform:rotate(45deg)}
.su-legal-close:after{transform:rotate(-45deg)}
.su-legal-scroll{
  max-height:calc(min(82svh,760px) - 62px);
  overflow:auto;
  padding:7px 20px 23px;
  scrollbar-width:thin;
}
.su-legal-scroll h3{
  margin:17px 0 7px;
  font:700 13px/1.35 Arial,Helvetica,sans-serif;
  text-transform:uppercase;
}
.su-legal-scroll p,.su-legal-scroll li{
  margin:0 0 11px;
  color:#2f2f2f;
  font:400 13px/1.42 Arial,Helvetica,sans-serif;
}
.su-legal-scroll ul{margin:0 0 11px;padding-left:19px}
.su-legal-scroll a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Country control remains available, but does not disturb the centered auth card. */
body.su-passwordless-auth .su-country-button{
  z-index:20;
  bottom:max(18px,env(safe-area-inset-bottom));
}

@media (max-width:600px){
  .su-auth-screen{min-height:480px}
  .su-auth-brand{top:25px;width:80px;height:80px}
  .su-auth-center{
    top:47%;
    width:min(374px,calc(100vw - 58px));
    max-width:374px;
    transform:translate(-50%,-40%);
  }
  .su-auth-title{font-size:23px;letter-spacing:-.45px;margin-bottom:7px}
  .su-auth-subtitle{font-size:14px;line-height:1.38;margin-bottom:20px}
  .su-auth-google{height:50px;font-size:14px;border-radius:14px}
  .su-auth-divider{margin:14px 0;gap:11px}
  .su-auth-email-field{height:50px;min-height:50px;border-radius:14px}
  .su-auth-email-field input{height:48px!important;font-size:14px!important}
  .su-auth-arrow{right:5px;width:38px!important;height:48px;border-radius:0}
  .su-auth-arrow svg{width:18px;height:18px}
  .su-auth-terms-line{margin-top:26px;font-size:12px}
  .su-auth-code-meta{font-size:12px;gap:6px 10px;margin-bottom:18px}
  .su-auth-code-meta strong{max-width:235px}
  .su-auth-code-grid{
    width:100%;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
  }
  .su-auth-code-input{
    width:100%!important;
    height:59px!important;
    border-radius:11px!important;
    font-size:21px!important;
  }
  .su-auth-privacy{bottom:max(13px,env(safe-area-inset-bottom));font-size:13px}
  .su-legal-modal{padding:14px}
  .su-legal-card{max-height:84svh;border-radius:15px}
  .su-legal-head{padding:17px 16px 11px}
  .su-legal-head h2{font-size:18px}
  .su-legal-scroll{padding:6px 16px 20px;max-height:calc(84svh - 58px)}
  body.su-passwordless-auth .su-country-button{
    left:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    transform:scale(.88);
    transform-origin:left bottom;
  }
}

@media (max-width:370px){
  .su-auth-center{width:calc(100vw - 38px);max-width:374px}
  .su-auth-code-grid{gap:5px}
  .su-auth-code-input{height:54px!important}
}

@media (max-height:620px){
  .su-auth-brand{top:16px;width:64px;height:64px}
  .su-auth-center{top:49%;transform:translate(-50%,-43%)}
  .su-auth-terms-line{margin-top:19px}
  .su-auth-privacy{bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .su-auth-step,.su-auth-arrow,.su-legal-modal,.su-legal-card{transition:none!important;animation:none!important}
}