.wei-login-wrapper {
    min-height:100vh;
      display:grid;
      grid-template-columns:minmax(520px, 44%) 1fr;
      overflow:hidden;
}

.right-content{
      position:relative;
      min-height:100vh;
      background-image:
        linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.38) 8%,rgba(255,255,255,0) 20%),
        url("/wp-content/uploads/2026/07/login-bg.webp");
      background-size:cover;
      background-position:center;
      z-index: 1;
    }

.container{
    width: 100% !important;
    max-width:100% !important;
}
.left-content {
    padding: 55px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 650px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,102,0,.05), transparent 36%),
        linear-gradient(180deg,#fff 0%,#fff 72%,#fffaf6 100%);
    margin-left:2rem;
}

.custom-logo {
    width: 330px;
    margin-bottom: 45px;
}

h1 {
    font-size: 48px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

h1 span {
    color: #ff6600;
}

.subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 25px;
}

.login-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    max-width: 540px;
    margin-bottom: 25px;
}

.login-box h2 {
    font-size: 24px;
    margin-bottom: 22px;
}

.form-group {
    margin-bottom: 18px;
    position: relative;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.input-wrap {
    position: relative;
}

.input-wrap input {
    width: 100%;
    height: 48px;
    border: 1px solid #d7dce2;
    border-radius: 8px;
    padding: 0 42px !important;
    font-size: 14px;
    outline: none;
}

.input-wrap span {
    position: absolute;
    left: 14px;
    top: 42%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.forgot {
    display: block;
    text-align: right;
    font-size: 14px;
    color: #ff6600;
    text-decoration: none;
    margin-bottom: 15px;
}

.btn-login {
    width: 100%;
    height: 50px;
    border: none !important;
    border-radius: 8px !important;
    background: #ff6600 !important;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.divider {
    display: flex;
    align-items: center;
    margin: 22px 0;
    color: #9ca3af;
    font-size: 13px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider span {
    padding: 0 15px;
}

.social-login .social-networks{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.social-login .social-networks a .apsl-icon-block{
    height: 44px;
    border: 1px solid #d7dce2;
    border-radius: 8px;
    background: white;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#9ca3af;
    margin: 0;
}
.social-login .social-networks a .apsl-icon-block:hover{
 color: #000;
}

/* .social-login button{
    height: 44px;
    border: 1px solid #d7dce2;
    border-radius: 8px;
    background: white;
    font-weight: 600;
    cursor: pointer;
} */

.main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 540px;
    margin-bottom: 50px;
}

.main-actions a {
    height: 60px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.main-actions a:hover {
 color: #000;
}

.outline {
    border: 2px solid #ff6600;
    color: #ff6600;
    background: #fff;
}

.filled {
    background: #ff6600;
    color: #fff;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width: calc(100vw - 140px);
    max-width: 1250px;
    position: relative;
    z-index: 2;
}

.feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.feature-icon {
    font-size: 34px;
    color: #ff6600;
}

.feature h3 {
    font-size: 15px;
    margin-bottom: 6px;
}

.feature p {
    font-size: 13px;
    line-height: 1.45;
    color: #4b5563;
}

.wei-login-error {
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #fff3f3;
    border: 1px solid #ffcaca;
    border-radius: 6px;
    color: #c10000;
    font-size: 14px;
}
.wei-login-success {
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #f0fff4;
    border: 1px solid #b7ebc6;
    border-radius: 6px;
    color: #177245;
    font-size: 14px;
}



.wei-password-wrap {
    position: relative;
}


.wei-password-wrap input {
    padding-right: 80px !important;
}

.wei-toggle-password {
    position: absolute;
    top: 45%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
}

.wei-toggle-password svg {
    display: block;
}

.wei-icon-hide {
    display: none;
}

.wei-toggle-password.active .wei-icon-show {
    display: none;
}

.wei-toggle-password.active .wei-icon-hide {
    display: block;
}


@media (max-width:1100px){
    .wei-login-wrapper{
    grid-template-columns:minmax(490px,52%) 1fr;
    }

    .left-content{
    padding:34px 30px 24px;
    }

    .hero-copy h1{
    font-size:48px;
    }

    .features{
    grid-template-columns:1fr;
    }
}

@media (max-width: 1000px) {

    .left-content {
    padding: 35px 25px;
    }

    .custom-logo {
    width: 250px;
    }

    h1 {
    font-size: 38px;
    }

    .features {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:820px){
    .wei-login-wrapper{
        display:block;
        min-height:100vh;
        background:
            linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.96)),
        url("/wp-content/uploads/2026/07/login-bg.webp") center/cover fixed;
    }
    

    .right-content{
        display:none;
    }

    .left-content{
        min-height:100vh;
        padding:26px 18px 30px;
        background:transparent;
        margin:auto;
    }

    .features{
    grid-template-columns:repeat(1,minmax(0,1fr));
    }
}
@media (max-width: 600px) {
    .main-actions,
    .social-login .social-networks,
    .features {
    grid-template-columns: 1fr;
    }
}

@media (min-width: 1493px) {
    .left-content{margin:auto;}
}