/* =====================================================
   TRADEVEST AUTH SYSTEM
   FINAL AUTH CSS
===================================================== */


/* =====================================================
   AUTH PAGE
===================================================== */

.tv-auth-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px 18px;

    background:

        radial-gradient(
            circle at top left,
            rgba(59,130,246,.05),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f1f5f9 100%
        );
}


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

.tv-auth-card{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:400px;

    padding:30px;

    background:#fff;

    border:
        1px solid rgba(99,102,241,.08);

    border-radius:20px;

    box-shadow:var(--tv-shadow-lg);
}

.tv-auth-card::before{

    content:"";

    position:absolute;

    top:-100px;

    right:-100px;

    width:180px;

    height:180px;

    background:

        radial-gradient(
            circle,
            rgba(59,130,246,.08),
            transparent 70%
        );
}


/* =====================================================
   AUTH TITLE
===================================================== */

.tv-auth-card h2{

    text-align:center;

    margin-bottom:14px;

    color:var(--tv-text);

    font-size:28px;

    font-weight:800;

    line-height:1.1;
}

.tv-auth-title{

    text-align:center;

    margin-bottom:18px;
}


/* =====================================================
   AUTH SUBTITLE
===================================================== */

.tv-auth-sub{

    text-align:center;

    margin-bottom:32px;

    color:var(--tv-text-light);

    font-size:14px;

    line-height:1.7;
}


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

.tv-auth-card label{

    display:block;

    margin-bottom:7px;

    color:#1e293b;

    font-size:13px;

    font-weight:600;
}


/* =====================================================
   REQUIRED STAR
===================================================== */

.req{

    margin-left:4px;

    color:var(--tv-danger);

    font-weight:700;
}


/* =====================================================
   INPUTS
===================================================== */

.tv-auth-card input{

    width:100%;

    height:48px;

    padding:0 14px;

    margin-bottom:4px;

    background:#f8fbff;

    border:
        1px solid var(--tv-border);

    border-radius:12px;

    color:var(--tv-text);

    font-size:14px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.tv-auth-card input::placeholder{

    color:#94a3b8;
}

.tv-auth-card input:focus{

    outline:none;

    background:#fff;

    border-color:var(--tv-primary);

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);
}


/* =====================================================
   AUTH BUTTON
===================================================== */

.tv-auth-btn{

    width:100%;

    height:48px;

    margin-top:12px;

    border-radius:12px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 10px 20px rgba(37,99,235,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}

.tv-auth-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 28px rgba(37,99,235,.24);
}

.tv-auth-btn:active{

    transform:scale(.98);
}

.tv-auth-btn:disabled{

    opacity:.7;

    cursor:not-allowed;
}


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

.tv-auth-footer{

    text-align:center;

    margin-top:18px;

    color:var(--tv-text-light);

    font-size:13px;

    line-height:1.6;
}

.tv-auth-footer a{

    color:var(--tv-primary);

    font-weight:700;
}

.tv-auth-footer a:hover{

    text-decoration:underline;
}


/* =====================================================
   ERROR
===================================================== */

.tv-error{

    display:block;

    min-height:16px;

    margin-bottom:8px;

    color:var(--tv-danger);

    font-size:11px;

    font-weight:500;
}


/* =====================================================
   SUCCESS
===================================================== */

.tv-success{

    margin-bottom:16px;

    padding:12px 14px;

    background:#ecfdf5;

    border:
        1px solid #bbf7d0;

    border-radius:10px;

    color:#166534;

    font-size:12px;

    font-weight:600;
}


/* =====================================================
   FORGOT PASSWORD
===================================================== */

.tv-forgot-wrap{

    margin:
        6px 0 14px;

    text-align:left;
}

.tv-forgot-link{

    color:#4f46e5;

    font-size:14px;

    font-weight:600;

    transition:color .2s ease;
}

.tv-forgot-link:hover{

    color:#4338ca;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .tv-auth-page{

        padding:26px 14px;
    }

    .tv-auth-card{

        padding:24px 18px;

        border-radius:18px;
    }

    .tv-auth-card h2{

        font-size:24px;
    }
}

@media(max-width:480px){

    .tv-auth-card{

        padding:22px 16px;
    }

    .tv-auth-btn{

        height:46px;
    }
}


/* =====================================================
   VERIFY EMAIL
===================================================== */

.tv-verify-page{

    align-items:center;
}

.tv-verify-card{

    text-align:center;

    padding-top:42px;

    padding-bottom:42px;
}

.tv-verify-tick{

    width:62px;

    height:62px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#eff6ff;

    border:
        1px solid #bfdbfe;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563eb;

    font-size:28px;

    font-weight:700;

    line-height:1;
}

.tv-verify-card .tv-auth-title{

    margin-bottom:18px;
}

.tv-verify-card .tv-auth-sub{

    margin-bottom:0;

    font-size:15px;

    line-height:1.8;
}

/* =====================================================
   AUTH HELPERS
===================================================== */

.tv-center-text{

    text-align:center;
}

.tv-line-17{

    line-height:1.7;
}

.tv-mb-18{

    margin-bottom:18px;
}

.tv-mb-28{

    margin-bottom:28px;
}

.tv-mb-32{

    margin-bottom:32px;
}

.tv-inline-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    width:auto;

    min-width:140px;

    padding:0 20px;
}

/* =====================================================
   RESEND VERIFICATION
===================================================== */

#tv-resend-btn{

    width:auto;

    min-width:160px;

    height:42px;

    padding:0 20px;

    margin-top:16px;

    font-size:13px;

    display:inline-flex;

    align-items:center;

    justify-content:center;
}

/* =====================================================
   ACCESS RESTRICTED
===================================================== */

.tv-access-card{

    width:100%;

    max-width:400px;
}

.tv-access-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    line-height:1;

    margin-bottom:14px;
}

.tv-access-sub{

    margin-bottom:24px;
}

.tv-access-actions{

    display:flex;

    justify-content:center;

    align-items:center;
}

.tv-access-btn{

    width:auto;

    min-width:150px;

    height:42px;

    padding:0 20px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    margin-top:0;
}