/*==========================================================
    UMUEZE FAMILY UNION
    Authentication Stylesheet
    Powered by LegitDrops
==========================================================*/

/*==========================================================
    RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    font-family:var(--font-body);

    background:#eef3f1;

    color:var(--text);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

    overflow-x:hidden;

}

/*==========================================================
    BACKGROUND
==========================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(15,93,70,.10),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(201,162,39,.12),
        transparent 45%),

        linear-gradient(
            135deg,
            #eef3f1 0%,
            #f8fafb 100%
        );

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    top:-180px;

    right:-180px;

    background:rgba(15,93,70,.08);

    filter:blur(80px);

    z-index:-1;

}

/*==========================================================
    AUTH CONTAINER
==========================================================*/

.auth-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.membership-container{

    align-items:flex-start;

    padding:40px 0;

}

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

.auth-card{

    width:100%;

    max-width:520px;

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.08);

    border:1px solid rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    animation:fadeUp .5s ease;

}

.membership-card{

    max-width:900px;

}

/*==========================================================
    BRAND
==========================================================*/

.brand{

    text-align:center;

    margin-bottom:35px;

}

.brand h1{

    font-family:var(--font-heading);

    color:var(--primary);

    font-size:2rem;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:10px;

}

.brand p{

    color:var(--text);

    font-size:1rem;

    margin-bottom:8px;

}

.brand small{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(15,93,70,.08);

    color:var(--primary);

    font-weight:600;

    font-size:.85rem;

}

/*==========================================================
    TYPOGRAPHY
==========================================================*/

.auth-card h2{

    font-family:var(--font-heading);

    color:var(--heading);

    text-align:center;

    margin-bottom:15px;

}

.auth-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.auth-description{

    text-align:center;

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:30px;

}

/*==========================================================
    LAYOUT
==========================================================*/

form{

    width:100%;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.full-width{

    grid-column:1 / -1;

}

.section{

    margin-bottom:40px;

}

/*==========================================================
    ANIMATION
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .membership-card{

        max-width:100%;

    }

}

@media(max-width:768px){

    body{

        padding:20px 15px;

    }

    .auth-card{

        padding:30px 25px;

        border-radius:18px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .brand h1{

        font-size:1.6rem;

    }

}


/*==========================================================
    FORMS
==========================================================*/

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:var(--heading);

    font-size:.95rem;

    font-weight:600;

}

.form-group small{

    display:block;

    margin-top:8px;

    color:var(--text-light);

    font-size:.85rem;

    line-height:1.6;

}

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

input,
textarea,
select{

    width:100%;

    padding:15px 18px;

    border:2px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

    color:var(--heading);

    font-size:1rem;

    transition:.30s ease;

    outline:none;

}

textarea{

    resize:vertical;

    min-height:120px;

}

input::placeholder,
textarea::placeholder{

    color:#9CA3AF;

}

input:hover,
textarea:hover,
select:hover{

    border-color:#CBD5E1;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 5px rgba(15,93,70,.08);

}

/*==========================================================
    FILE INPUT
==========================================================*/

input[type=file]{

    padding:12px;

    cursor:pointer;

}

input[type=file]::file-selector-button{

    background:var(--primary);

    color:#fff;

    border:none;

    padding:10px 16px;

    border-radius:10px;

    margin-right:15px;

    cursor:pointer;

    transition:.3s;

}

input[type=file]::file-selector-button:hover{

    background:var(--primary-dark);

}

/*==========================================================
    CHECKBOX
==========================================================*/

.checkbox-group{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin:20px 0;

}

.checkbox-group input{

    width:18px;

    height:18px;

    margin-top:4px;

}

.checkbox-group label{

    flex:1;

    line-height:1.8;

    font-size:.94rem;

}

/*==========================================================
    REMEMBER ME
==========================================================*/

.form-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

    flex-wrap:wrap;

}

.remember{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.95rem;

}

.remember input{

    width:18px;

    height:18px;

}

.form-options a{

    color:var(--primary);

    font-weight:600;

}

.form-options a:hover{

    text-decoration:underline;

}

/*==========================================================
    BUTTONS
==========================================================*/

.login-btn,
.request-btn,
.submit-btn{

    width:100%;

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px 28px;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    transition:.35s ease;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    border:none;

    box-shadow:0 18px 40px rgba(15,93,70,.18);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 24px 50px rgba(15,93,70,.25);

}

.btn-outline{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

}

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

.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:35px 0;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}

.divider span{

    color:var(--text-light);

    font-size:.9rem;

    white-space:nowrap;

}

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

.auth-footer{

    text-align:center;

    margin-top:30px;

}

.auth-footer p{

    color:var(--text-light);

}

.auth-footer a{

    color:var(--primary);

    font-weight:700;

}

.auth-footer a:hover{

    text-decoration:underline;

}

/*==========================================================
    ALERTS
==========================================================*/

.alert{

    display:none;

    padding:16px 20px;

    border-radius:14px;

    margin-bottom:25px;

    font-size:.95rem;

    line-height:1.7;

}

.alert-success{

    display:block;

    background:#ECFDF5;

    color:#065F46;

    border-left:5px solid #10B981;

}

.alert-error{

    display:block;

    background:#FEF2F2;

    color:#991B1B;

    border-left:5px solid #EF4444;

}

.alert-warning{

    display:block;

    background:#FFFBEB;

    color:#92400E;

    border-left:5px solid #F59E0B;

}

.alert-info{

    display:block;

    background:#EFF6FF;

    color:#1E40AF;

    border-left:5px solid #3B82F6;

}

#message{

    margin-top:20px;

}


/*==========================================================
    MEMBERSHIP WIZARD
==========================================================*/

.form-step{

    display:none;

    animation:fadeSlide .45s ease;

}

.form-step.active{

    display:block;

}

/*==========================================================
    PROGRESS BAR
==========================================================*/

.progress-wrapper{

    margin:35px 0;

}

.progress-bar{

    width:100%;

    height:12px;

    background:#E5E7EB;

    border-radius:100px;

    overflow:hidden;

    position:relative;

}

.progress-fill{

    width:16.666%;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:width .4s ease;

    border-radius:100px;

}

.progress-text{

    margin-top:12px;

    text-align:right;

    color:var(--text-light);

    font-weight:600;

}

/*==========================================================
    REVIEW CARDS
==========================================================*/

.review-section{

    margin-bottom:25px;

}

.review-section h4{

    margin-bottom:12px;

    color:var(--primary);

}

.review-card,

.review-box{

    background:#ffffff;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:22px;

    box-shadow:0 10px 25px rgba(0,0,0,.04);

    transition:.30s;

}

.review-card:hover,

.review-box:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

/*==========================================================
    UPLOAD CONTROLS
==========================================================*/

.upload-box{

    border:2px dashed #CBD5E1;

    border-radius:18px;

    background:#F8FAFC;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.upload-box:hover{

    border-color:var(--primary);

    background:#F0FDF4;

}

.upload-box i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:15px;

}

.upload-box p{

    margin-bottom:10px;

}

.upload-preview{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:20px;

}

.upload-preview img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:14px;

    border:3px solid #fff;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

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

.submit-card{

    background:linear-gradient(
        135deg,
        #ffffff,
        #F9FAFB
    );

    border-radius:20px;

    padding:30px;

    border:1px solid #E5E7EB;

    margin-bottom:30px;

}

.submit-card h3,

.submit-card h4{

    color:var(--primary);

    margin-bottom:20px;

}

/*==========================================================
    TIMELINE
==========================================================*/

.timeline{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:25px;

}

.timeline-item{

    display:flex;

    align-items:center;

    gap:18px;

}

.timeline-item span{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

}

.timeline-item p{

    margin:0;

}

/*==========================================================
    WORKFLOW
==========================================================*/

.workflow{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

}

.workflow-item{

    background:#fff;

    border-radius:16px;

    border:1px solid #E5E7EB;

    padding:20px;

    text-align:center;

    transition:.30s;

}

.workflow-item:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.workflow-item span{

    width:48px;

    height:48px;

    border-radius:50%;

    margin:auto;

    margin-bottom:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    font-size:1.1rem;

}

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

.success-box,

.notice{

    background:#ECFDF5;

    border-left:5px solid #16A34A;

    padding:22px;

    border-radius:14px;

    margin:25px 0;

}

.success-box h3,

.notice h4{

    color:#166534;

    margin-bottom:12px;

}

.notice ul{

    padding-left:18px;

    list-style:disc;

}

.notice li{

    margin-bottom:10px;

}

/*==========================================================
    WIZARD BUTTONS
==========================================================*/

.wizard-buttons{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-top:40px;

}

.wizard-buttons .btn{

    min-width:180px;

}

/*==========================================================
    STEP ANIMATION
==========================================================*/

@keyframes fadeSlide{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

.submit-btn{

    animation:pulse 2.5s infinite;

}

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

@media(max-width:992px){

    .workflow{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .wizard-buttons{

        flex-direction:column;

    }

    .wizard-buttons .btn{

        width:100%;

    }

    .workflow{

        grid-template-columns:1fr;

    }

    .timeline-item{

        align-items:flex-start;

    }

    .upload-preview{

        justify-content:center;

    }

    .review-card,

    .review-box{

        padding:18px;

    }

    .submit-card{

        padding:22px;

    }

}

@media(max-width:480px){

    .progress-text{

        text-align:center;

    }

    .timeline-item{

        flex-direction:column;

        text-align:center;

    }

    .timeline-item span{

        margin-bottom:8px;

    }

}