.login-wrapper {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: auto;

  padding: 100px 0px;

    opacity: 0.8;

background: linear-gradient(180deg, #FFF1F8 0%, #FFF 100%);

}



.login-card {

  width: 100%;

  max-width: 550px;

  padding: 50px 55px 33px;

 border-radius: 20px;

background: #FFF;

margin: auto;

box-shadow: 0 40px 60px 0 rgba(177, 104, 132, 0.20);

}



.login-card h1 {

  text-align: center;

color: #000;

font-family: Figtree;

font-size: 38px;

font-style: normal;

font-weight: 700;

line-height: 44px; /* 115.789% */

  margin-bottom: 30px;

}



a.forgot-password {

    color: #DB1C4B;

    font-family: Figtree;

    font-size: 14px;

    font-style: normal;

    font-weight: 300;

    line-height: 24px;

    text-decoration: underline !important;

}

a.forgot-password:hover {

   color: #000;

}

.form-group {

  margin-bottom: 15px;

}

.login-card form.login {

    text-align: inherit;

    border: 0;

    padding: 0;

    margin: 0;

}

.form-group input {

  width: 100%;

  padding: 17px 20px 16px 20px; 

color: #000;

font-family: Figtree;

font-size: 14px;

font-style: normal;

font-weight: 300;

line-height: 24px; /* 171.429% */

  outline: none;

  border-radius: 12px;

border: 1px solid #F9D9E1;

background: #FFF;

}



.form-group input::placeholder {

  color: #555;

}



.password-field {

  position: relative;

}



.password-field .eye {

  position: absolute;

  right: 16px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 16px;

  opacity: 1;

  cursor: pointer;
  
  color: #000 !important;

}



.remember {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    font-weight: 300;

    margin: 25px 0 25px;

}



.remember input {

  accent-color: #f07aa0;

}

.woocommerce-error {

    box-shadow: 0px 10px 60px 0px #423B1D24;

    background: #FFFFFF;

    border-radius: 20px;

    border-top: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    margin: 0;

    bottom: -70px;

    z-index: 9;

}



.login-btn {

    border: none;

    padding: 10px 31px;

    background: #EF82AB;

    border-radius: 30px;

    color: #fff;

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    gap: 12px;

    text-transform: uppercase;

}

.login-btn:hover {

  background: #DB1C4B;

}



.login-btn span {

  font-size: 18px;

}



.divider {

  height: 1px;

  background: #f1d2dc;

  margin: 28px 0 20px;

}



.footer-links {

  display: flex;

  justify-content: space-between;

}



.footer-links a {

  color: #000;

  text-decoration: none;

}



.footer-links .forgot {

color: #DB1C4B;

font-family: Figtree;

font-size: 14px;

font-style: normal;

font-weight: 300;

line-height: 24px; /* 171.429% */

text-decoration-line: underline !important;

text-decoration-style: solid;

text-decoration-skip-ink: auto;

text-decoration-thickness: auto;

text-underline-offset: auto;

text-underline-position: from-font;

}

.footer-links .forgot:hover{

  color: #000;

}



.footer-links span {

color: #000;

font-family: Figtree;

font-size: 14px;

font-style: normal;

font-weight: 300;

line-height: 24px; /* 171.429% */

}



.footer-links span .signup{

  color: #121212;

font-family: Figtree;

font-size: 14px;

font-style: normal;

font-weight: 500;

line-height: 24px;

text-decoration-line: underline !important;

text-decoration-style: solid;

text-decoration-skip-ink: auto;

text-decoration-thickness: auto;

text-underline-offset: auto;

text-underline-position: from-font;

}

.footer-links span .signup:hover{

  color: #DB1C4B;

}



@media (max-width: 767px) {

  .login-card {

    background: #ffffff;

    padding: 30px 28px 31px;

  }

  .divider {

    height: 1px;

    background: #f1d2dc;

    margin: 20px 0 22px;

}

.footer-links {

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.login-wrapper{

  padding: 70px 0px;

}

}





/* lost password */





.woocommerce-lost-password .login-form {

    border-radius: 20px;

    background: #FFF;

    box-shadow: 0 40px 60px 0 rgba(66, 59, 29, 0.15);

    padding: 50px 81px 50px 73px;

    max-width: 550px;

    margin: 0 auto;

    text-align: left;

    font-family: "League Spartan", sans-serif;

}



.woocommerce-lost-password .login-form h2 {

    color: #000;

    font-family: Figtree;

    font-size: 38px;

    font-style: normal;

    font-weight: 700;

    line-height: 44px; /* 115.789% */

    margin-bottom: 30px;

}



.woocommerce-lost-password .woocommerce-ResetPassword.lost_reset_password{

    color: #000;

    font-weight: 300;

    font-size: 14px;

    line-height: 20px;

    letter-spacing: 0px;

}



.woocommerce-lost-password .login-section {

  padding:  100px 0px;

}





@media (max-width:767px) {

.woocommerce-lost-password .login-form {

    padding: 30px 28px 30px 30px;

}  

}

@media (max-width: 380px) {

  .woocommerce-lost-password .login-form {

    padding: 30px 20px 30px 20px;

  }

  .login-btn span

 {

    font-size: 16px;

}

}





input[type="checkbox"] {

    appearance: none;

    width: 16px;

    height: 16px;

    border: 2px solid #F9D9E1;

    border-radius: 4px;

    cursor: pointer;

    position: relative;

}



input[type="checkbox"]:checked {

    background-color: #F9D9E1;

}



input[type="checkbox"]:checked::after {

    content: "✔";

    position: absolute;

    font-size: 14px;

    left: 1px;

    top: -5px;

    color: white;

}



.login-btn span.text{

  color: #FFF;

font-family: Figtree;

font-size: 12px;

font-style: normal;

font-weight: 700;

line-height: normal;

letter-spacing: 2.4px;

text-transform: uppercase;

}



/* 02-02-2026 */



.mac-os  .login-card h1{

  font-weight: 600;

}

.mac-os .login-btn{

  font-weight: 600;

}



.mac-os .woocommerce-lost-password .login-form h2 {

  font-weight: 600;

}

.form-group.password-field:has(input[type="text"]) .eye-icon svg path {

    stroke: #000;

}

.login-card {
    padding: 50px 58px 33px;
}

.login-btn {
    padding: 10px 33px;
}

.form-group input::placeholder {
  color:#000 !important;
}

@media(max-width:575px) {
  .login-card h1 {
    font-size: 30px;
    margin-bottom: 20px;
}
}