/* =====================================================
   GLOBAL AUTH WRAPPER
===================================================== */

.auth-ui{
    width:100%;
}

/* Typography reset inside auth only */
.auth-ui,
.auth-ui *{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
}

/* =====================================================
   CARD
===================================================== */

.auth-card{
    background:#f7f7f7;
    padding:42px;
    border-radius:26px;
    border:1px solid #eaeaea;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.auth-card.center{
    text-align:center;
}

/* =====================================================
   HEADINGS + TEXT
===================================================== */

.auth-card h2{
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
    color:#111;
}

.auth-card p{
    color:#666;
    margin-bottom:24px;
    line-height:1.5;
    font-size:15px;
}

/* =====================================================
   LABELS
===================================================== */

.auth-card label{
    font-size:14px;
    color:#444;
    display:block;
    margin-bottom:6px;
    font-weight:500;
}

/* =====================================================
   INPUTS (FINAL POLISHED)
===================================================== */

.auth-card input{
    width:100%;
    height:56px;
    border-radius:16px;
    border:1px solid #e3e3e3;
    padding:0 18px;
    font-size:15px;
    background:#ffffff;
    color:#111;
    margin-bottom:18px;
    transition:all .2s ease;
}

.auth-card input::placeholder{
    color:#aaa;
}

.auth-card input:hover{
    border-color:#d0d0d0;
}

.auth-card input:focus{
    outline:none;
    border-color:#ff2a7f;
    box-shadow:0 0 0 3px rgba(255,42,127,.15);
}

/* =====================================================
   GRID ROWS
===================================================== */

.auth-row{
    display:flex;
    gap:16px;
}

.auth-col{
    flex:1;
}

/* =====================================================
   PHONE INPUT (EDITABLE COUNTRY CODE)
===================================================== */

.auth-phone{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.auth-phone input:first-child{
    width:90px;
}

.auth-phone input:last-child{
    flex:1;
}

/* =====================================================
   BUTTON (FINAL BRAND GRADIENT)
===================================================== */

.auth-gradient-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:999px;
    font-size:16px;
    font-weight:600;
    color:white;
    cursor:pointer;

    background:linear-gradient(
        90deg,
        #ff2a7f 0%,
        #ff3fc7 50%,
        #48b04f 100%
    );

    box-shadow:0 12px 30px rgba(255,50,150,.28);

    transition:all .2s ease;
}

.auth-gradient-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 36px rgba(255,50,150,.35);
}

.auth-gradient-btn:active{
    transform:translateY(0);
}

/* =====================================================
   DIVIDER OR
===================================================== */

.auth-divider{
    text-align:center;
    margin:28px 0;
    position:relative;
}

.auth-divider:before,
.auth-divider:after{
    content:'';
    position:absolute;
    width:42%;
    height:1px;
    background:#e4e4e4;
    top:50%;
}

.auth-divider:before{ left:0; }
.auth-divider:after{ right:0; }

.auth-divider span{
    background:#f7f7f7;
    padding:0 12px;
    color:#777;
    font-size:14px;
}

/* =====================================================
   LINKS (FIX ELEMENTOR OVERRIDES)
===================================================== */

.auth-ui a,
.auth-card a{
    color:#ff2a7f;
    text-decoration:none;
    cursor:pointer;
    font-weight:600;
}

.auth-ui a:hover,
.auth-card a:hover{
    text-decoration:underline;
    opacity:.9;
}

/* =====================================================
   OTP BOXES
===================================================== */

.auth-otp-row{
    display:flex;
    justify-content:space-between;
    margin:26px 0;
}

.otp-box{
    width:56px;
    height:56px;
    border-radius:14px;
    border:1px solid #ddd;
    text-align:center;
    font-size:22px;
    background:white;
    transition:.2s ease;
}

.otp-box:focus{
    outline:none;
    border-color:#ff2a7f;
    box-shadow:0 0 0 3px rgba(255,42,127,.15);
}

/* =====================================================
   TIMER
===================================================== */

.auth-timer{
    font-size:14px;
    color:#555;
    margin-bottom:18px;
}

/* =====================================================
   PASSWORD FIELD + EYE
===================================================== */

.auth-pass-wrap{
    position:relative;
}

.pass-eye{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    opacity:.6;
}

.pass-eye:hover{
    opacity:1;
}

/* =====================================================
   SUCCESS ICON BLOCK
===================================================== */

.auth-success-icon{
    width:56px;
    height:56px;
    margin:0 auto 18px;

    background:linear-gradient(
        135deg,
        #ff2a7f,
        #48b04f
    );

    border-radius:16px;
}

/* =====================================================
   FOOTER TEXT
===================================================== */

.auth-bottom-text{
    text-align:center;
    font-size:14px;
    color:#666;
}

/* =====================================================
   RESEND TEXT
===================================================== */

.auth-resend-text{
    margin-top:18px;
    font-size:14px;
    color:#777;
}

.auth-resend-text a{
    color:#ff2a7f;
    font-weight:600;
    cursor:pointer;
}

.auth-error{
    background:#ffe9ef;
    border:1px solid #ffb6c6;
    color:#c40030;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    margin-bottom:14px;
}
.auth-success{
    background:#e6ffed;
    border:1px solid #8de19c;
    color:#2d7a36;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    margin-bottom:14px;
}


.wc-auth-header-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 35px;
    border: none;
    border-radius: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #000;
    cursor: pointer;
    transition: filter .2s ease, transform .08s ease-in-out;
    background: linear-gradient(90deg, #fd2153, #fd23d4 55%, #20f844);
    box-shadow: 0 10px 28px rgba(106, 253, 46, .25), inset 0 0 0 1px rgba(255, 255, 255, .18);
    text-decoration: none;
}