/* Modal wrapper */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;              /* 👈 MUST BE NONE */
  align-items: center;
  justify-content: center;
}

/* Overlay */
.auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Popup box */
.auth-box {
  position: relative;
  background: #F9F5EA;
  width: 600px;
  min-height:300px;
  max-height:550px;
  padding: 3em 3em;
  z-index: 2;
  overflow-y: auto;
  display: flex;
    flex-direction: column;
    align-items: center;
}
.auth-box h3{
margin: 0;
    font-size: 28px;
    line-height: 34px;
    }
    
.auth-box label{
text-align:left;
color:#000;
margin-bottom:8px;
font-size:16px;
line-height:18px;
width:100%
}

.auth-box input{
background:transparent;
border:0.8px solid #30303073 !important;
margin-bottom:1em;
color:#252525;
}
.forget{
text-align: right;
    color: #D49400;
    text-decoration: underline;
    text-underline-offset: 5px;
    font-family: "Lato" !important;
    display:flex;
    width:100%;
    justify-content:flex-end;
}
.auth-box button,.auth-box button:focus,.auth-box button:hover{
letter-spacing: 1px;
    background: #D49400;
    border: 1px solid #D49400;
    color: #fff;
    font-family: 'Lato';
    margin-top: 1em;
    font-weight: 700;
    border-radius:0 !important;
    }
 
.auth-box h6{
font-family:'Lato';
font-size:16px;
font-weight:400;
color:#252525;
margin-bottom:1.5em;
}
.auth-box p{
font-family:'Lato';
font-size:16px;
font-weight:400;
color:#252525;
margin:1em 0;
}
.auth-box a{
color:#D49400;
text-decoration: underline;
    text-underline-offset: 5px;
    }
/* Close button */
.auth-close {
  position: absolute;
  top: 0px;
  color:#000 !important;
  right: 12px;
  background: none !important;
  border: none !important;
  font-size: 35px !important;
  cursor: pointer !important;
  margin:0 !important;
  font-weight:400 !important;
}

/* Screens */
.auth-screen {
  display: none;
}

.auth-screen.active {
width:100%;
  display: flex;
  flex-direction:column;
  text-align:center;
  font-family:"EB Garamond", EB Garamond;
}

.auth-reset-submit {
  pointer-events: auto !important;
  cursor: pointer;
}

.password-field {
  position: relative;
  width: 100%;
}

.password-field input {
  width: 100%;
  padding-right: 45px;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 55%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 22px;
  height: 22px;
  background: url("https://staging.copperwood-x.com/wp-content/uploads/2026/01/eye.svg") center/contain no-repeat;
}
.sign .toggle-password{
top:40%
}

.toggle-password.active {
  background: url("https://staging.copperwood-x.com/wp-content/uploads/2026/01/hidden-eye.svg") center/contain no-repeat;
}

.social-login{
display:flex;
width:100%;
flex-direction:column;
justify-content:center;
gap:10px
}
.social-login button{
width:50%;
}
.social-meida{
display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #25252540 !important;
    color: #252525 !important;
    font-size: 14px !important;
    font-family: 'EB Garamond' !important;
    justify-content: center !important;
    font-weight:500 !important;
}
.social-meida img{
margin-right:10px;
}
.auth-message {
  display: none;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.auth-message.error {
  background: #fdecea;
  color: #b71c1c;
  border: 1px solid #f5c6cb;
}

.auth-message.success {
  background: #e6f4ea;
  color: #1b5e20;
  border: 1px solid #c3e6cb;
}
.field-error{
margin-top: -15px;
    text-align: left;
    margin-bottom: 1em;
    color: red;
    }
.password-strength {
  display: none; 
}
.password-strength {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 6px 0 12px;
  overflow: hidden;
}

.password-strength span {
  display: block;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength.weak span {
  width: 33%;
  background: #e53935; /* red */
}

.password-strength.medium span {
  width: 66%;
  background: #fb8c00; /* orange */
}

.password-strength.strong span {
  width: 100%;
  background: #43a047; /* green */
}

.regex{
font-size: 10px !important;
    text-align: left;
    margin-top: -1em;
    margin-bottom: 2em;
}
.g_id_signin{
margin-top:1em;
}
/* Prevent background scroll */
body.auth-open {
  overflow: hidden;
  height:100vh !important;
}

/* Ensure phone dropdown stays above modal 
.iti {
  width: 100% !important;
  margin-bottom:1em;
}

.iti__country-list {
  z-index: 99999 !important;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 6px;
}

 Prevent background scroll when dropdown open 


 Optional: smoother UI 
.iti__country {
  padding: 8px 12px;
  font-size: 14px;
}
*/

.phone-wrapper {
  position: relative;
  margin-bottom:1em;
}

.phone-wrapper .iti{
width:100%;
}

.phone-wrapper .iti__country-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100000;
}

.phone-wrapper .iti--container {
    top:0% !important;
    bottom: 0% !important;
    left: 0% !important;
    right: 0% !important;
    position: relative !important;
    width: 100% !important;
    }
    
    
    
    
@media(max-width:768px){
  .auth-modal{
  padding:0 1em;
  }
  .auth-box{
  padding:2.5em 1.5em;
  }
  .social-login{
  flex-direction: column;
    align-items: center;
    }
    .social-login button {
    width: 100%;
    margin-top: 0 !important;
}

}