* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

html,
body {
  /*height: 100%;*/
  /*display: grid;*/
  /*place-items: center;*/
  background-color: #EAF5F6;
}

.container-otp {
  width: 400px;
  padding: 50px;
  background-color: #ffffff;
  border-radius: 0.5rem;}

h3.title {
  font-size: 20px;
  font-weight: 700;
  color: #093030;
  margin-bottom: 25px;
}

p.sub-title {
  color: #B5BAB8;
  font-size: 14px;
  margin-bottom: 25px;
}

p span.phone-number {
    color: #E1AB42;
    font-weight: 400;
    display: inline;
}

.wrapper {
  width: 100%;
  justify-items: center;
    
}

.wrapper input.fieldotp {
  line-height: 75px;
  font-size: 32px;
  border: none;
  background-color: #EAF5F6;
  border-radius: 5px;
  text-transform: uppercase;
  color: #093030;
  margin-bottom: 25px;
}

.wrapper input.fieldotp:focus {
  outline: none;
}


button.resend i {
  margin-left: 5px;
}


div#login-modal {
    text-align: right;
    margin-bottom: 20px;

}

div#otp-modal {
    text-align: right;
}

.phone-wrapper{
        width: 100%;
    display: block;
}

input#phonef {
    width: 100%;
    line-height: 75px;
    font-size: 32px;
    border: none;
    background-color: #EAF5F6;
    border-radius: 5px;
    text-transform: uppercase;
    color: #093030;
    margin-bottom: 25px;

}

.woocommerce-Addresses {
    position: relative;
    padding-top: 60px; /* فاصله برای هدر خارج از باکس اصلی */
}


.woocommerce-Address .woocommerce-Address-title h2 {
    position: absolute;
    top: 20px; /* بالا بردن هدر به بیرون از باکس اصلی */
    left: 0;
    right: 0;
    text-align: right;
    padding: 10px;
    border-radius: 5px;
}

button.resend {
    border: none;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    width: 100%;
    background: #E1AB42;
    border-radius: 0.20rem;
}

button.resend:hover {
    color: #fff;
    background: #054F49;
}

div#login-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F3F8F8;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    background-image: url(https://losheh.com/wp-content/uploads/2023/11/Losheh-Vorood-1-min.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-left: 280px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background: conic-gradient(#25b09b 25%,#f03355 0 50%,#514b82 0 75%,#ffa516 0);
  animation: l22 2s infinite linear;
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   margin: 15%;
   border-radius: 50%;
   background: inherit;
   animation: inherit;
}
.loader::after {
   margin: 25%;
   animation-duration: 3s;
}
@keyframes l22 {
  100% {transform: rotate(1turn)}
}

.otp-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #3e3e3e52;
    z-index: 99999999;
}

div#otpHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}

button#otpBack {
    background: unset;
    padding: 0px;
    color: #d1b000;
}

@media only screen and (max-width: 600px) {
  div#login-wrapper{
    padding:unset;
    margin: auto auto;
    justify-content: center;
    background-position: top;
    background-image: url('https://losheh.com/wp-content/uploads/2024/11/IMG_4074.png');
    background-color: #174D43;
    background-size: 90%;
  }

    .container-otp {
        width: 350px;
        padding: 30px;
        background-color: #fff;
        border-radius: .5rem
    }
    
    div#login-modal {
    text-align: right;
    margin-bottom: 0px;
    margin-top: 250px;
}
.woocommerce-MyAccount-content {
    max-width: 100% !important;

}
}


.wd-sub-menu li.woocommerce-MyAccount-navigation-link a {
    padding: 8px 0px !important;
}



@media only screen and (min-width: 600px) {
.woocommerce-MyAccount-content {
    max-width: 55% !important;

}
}


.background-click-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 47%; /* پهنای منطقه قابل کلیک */
    height: 100%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0); /* شفاف */
}

@media only screen and (max-width: 600px) {
    .background-click-area {
width: 100% !important;
    height: 30% !important;}
}