/* account-popups.css
   Account pop-ups (log in, create account, verify, reset, settings, legal) in the Signal look:
   a white sheet on a dimmed navy page, square corners, 2px periwinkle-grey field edges, orange action button.
*/

/* ---- account pop-ups ---- */
.consent-overlay{
  background:rgba(15,26,23,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.consent-overlay .consent-modal{
  position:relative;
  width:min(600px,calc(100vw - 36px));
  padding:34px clamp(20px,4vw,36px) 26px;
  border:1px solid #cad3cd;
  border-top:6px solid var(--ember);
  border-radius:0;
  color:#0f1a17;
  background:#ffffff;
  box-shadow:0 30px 70px rgba(15,26,23,.45);
  scrollbar-width:thin;
}
.consent-overlay.active .consent-modal{animation:authPop .32s cubic-bezier(.2,.8,.2,1) both;}
#legalModal .consent-modal{width:min(760px,calc(100vw - 36px));}
.consent-overlay .consent-modal h2{
  font-family:var(--display-font);
  font-size:clamp(28px,5vw,39px);
  font-weight:420;
  
  letter-spacing:-.015em;
  line-height:1.06;
  color:#0f1a17;
}
.consent-overlay .consent-modal p{font-size:15px;line-height:1.5;color:#44524c;margin-top:8px;}
.consent-overlay .consent-fields{gap:14px;margin-top:20px;padding:0;background:none;}
.consent-overlay .consent-fields label,
.consent-overlay .password-reset-panel label{
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:#0f1a17;
  margin-bottom:6px;
}
.consent-overlay .consent-fields input,
.consent-overlay .consent-fields select,
.consent-overlay .password-reset-panel input{
  min-height:50px;
  padding:12px 14px;
  border:2px solid #cad3cd;
  border-radius:0;
  font-size:16px;
  color:#0f1a17;
  background:#ffffff;
  box-shadow:none;
  transition:border-color .15s ease;
}
.consent-overlay .consent-fields select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background:
    linear-gradient(45deg,transparent 50%,#44524c 50%) calc(100% - 19px) 52%/6px 6px no-repeat,
    linear-gradient(-45deg,transparent 50%,#44524c 50%) calc(100% - 14px) 52%/6px 6px no-repeat,
    #ffffff;
}
.consent-overlay .consent-fields input:hover,
.consent-overlay .consent-fields select:hover,
.consent-overlay .password-reset-panel input:hover{border-color:#6f8d80;}
.consent-overlay .consent-fields input:focus,
.consent-overlay .consent-fields select:focus,
.consent-overlay .password-reset-panel input:focus{
  outline:3px solid var(--ember-edge);
  outline-offset:2px;
  border-color:#0f1a17;
}
.consent-overlay .consent-fields input::placeholder,
.consent-overlay .password-reset-panel input::placeholder{color:#66756e;}
.consent-overlay .password-toggle{border-radius:0;color:#44524c;}
.consent-overlay .password-toggle:hover,
.consent-overlay .password-toggle:focus-visible{background:#f1f3ee;color:#0f1a17;}
.consent-overlay .consent-check{
  margin-top:0;
  padding:12px 0;
  border-radius:0;
  border-top:1px solid #d6ddd8;
  background:none;
  font-size:14.5px;
  line-height:1.45;
  color:#0f1a17;
}
.consent-overlay .consent-check:first-of-type{margin-top:18px;}
.consent-overlay .consent-check input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:0;
  accent-color:#f2b33d;
}
.consent-overlay .consent-check a,
.consent-overlay .consent-modal p a,
.consent-overlay .subtle-link{color:var(--signal-on-paper);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.consent-overlay .login-only{margin-top:14px;}
.consent-overlay .btn-row{gap:10px;margin-top:20px;flex-wrap:wrap;}
.consent-overlay .btn{
  min-height:50px;
  border:2px solid #0f1a17!important;
  border-radius:0;
  padding:12px 22px;
  font-weight:600;
  font-size:16px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .2s ease;
}
.consent-overlay .btn-primary{
  background:#f2b33d;
  border-color:var(--ember-edge)!important;
  color:#0f1a17;
}
.consent-overlay .btn-primary:not(:disabled):hover{background:#ffc966;box-shadow:0 6px 20px rgba(242,179,61,.3);}
.consent-overlay .btn-ghost{
  background:transparent!important;
  color:#0f1a17!important;
}
.consent-overlay .btn-ghost:not(:disabled):hover{background:#0f1a17!important;color:#f1f3ee!important;}
.consent-overlay .btn:not(:disabled):active{transform:translateY(1px);}
.consent-overlay .btn:disabled{opacity:.45;cursor:not-allowed;}
.consent-overlay .auth-status:not(:empty),
.consent-overlay .signup-note:not(:empty){
  display:block;
  margin-top:14px;
  padding:12px 14px;
  border-radius:0;
  border-left:4px solid #6f8d80;
  font-size:14px;
  line-height:1.45;
  font-weight:500;
  color:#0f1a17;
  background:#f5f7f3;
  box-shadow:none;
}
.consent-overlay .captcha-panel{
  border:1px solid #d6ddd8;
  border-radius:0;
  background:#f5f7f3;
  box-shadow:none;
}
.consent-overlay .password-reset-panel{
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.consent-overlay .password-reset-panel .btn-row{margin-top:6px;}
.consent-overlay .legal-copy{
  border:1px solid #d6ddd8;
  border-radius:0;
  padding:18px 20px;
  background:#f5f7f3;
  box-shadow:none;
  color:#24362f;
}
.consent-overlay .legal-copy h3{color:#0f1a17;font-weight:700;}
/* verification states */
.consent-overlay .verification-panel{padding:10px 0 4px;}
.consent-overlay .verification-mail,
.consent-overlay .verification-check{
  width:84px;
  height:84px;
  margin-bottom:16px;
  font-size:40px;
  border:2px solid #0f1a17;
  border-radius:0;
  box-shadow:none;
}
.consent-overlay .verification-mail{
  background:#dce5df;
  color:#1d6e55;
  animation:authFloat 2.6s ease-in-out infinite;
}
.consent-overlay .verification-check{
  background:#f2b33d;
  color:#0f1a17;
  text-shadow:none;
  animation:authCheckPop .4s cubic-bezier(.2,.8,.2,1) both;
}
.consent-overlay .verification-panel h3{font-size:22px;font-weight:700;color:#0f1a17;}
.consent-overlay .verification-panel .btn-row{justify-content:center;}
@keyframes authPop{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
@keyframes authFloat{50%{transform:translateY(-5px);}}
@keyframes authCheckPop{
  0%{transform:scale(.4);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .consent-overlay.active .consent-modal,
  .consent-overlay .verification-mail,
  .consent-overlay .verification-check{animation:none;}
}
@media (max-width:620px){
  .consent-overlay .consent-modal{padding:28px 16px 18px;border-radius:0;width:100%;}
  .consent-overlay .btn{width:100%;}
}