/*=========================================================
 WorkBridge Africa
 business-signup.css
 Part 1
=========================================================*/


:root{

    --primary:#166534;

    --primary-hover:#14532d;

    --dark:#0f172a;

    --text:#475569;

    --light:#f8fafc;

    --border:#e2e8f0;

    --white:#ffffff;

    --radius:20px;

}


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    font-family:Inter,Arial,sans-serif;

    background:var(--light);

    color:var(--text);

    min-height:100vh;

}


a{

    text-decoration:none;

}



/*==============================
 HEADER
==============================*/


.site-header{

    height:80px;

    background:#fff;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 5%;

}


.logo{

    font-size:1.4rem;

    font-weight:800;

    color:var(--dark);

}


.login-link{

    color:var(--primary);

    font-weight:700;

}



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


.signup-page{

    width:min(1200px,92%);

    margin:60px auto;

}


.signup-wrapper{

    display:grid;

    grid-template-columns:1fr 500px;

    gap:60px;

    align-items:start;

}



/*==============================
 INFORMATION SIDE
==============================*/


.signup-info{

    padding-top:40px;

}


.signup-info h1{

    font-size:3rem;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:20px;

}


.signup-info p{

    font-size:1.1rem;

    max-width:520px;

    line-height:1.7;

    margin-bottom:30px;

}


.signup-info ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

}


.signup-info li{

    background:#fff;

    padding:15px 20px;

    border-radius:14px;

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

    font-weight:600;

    color:var(--dark);

}
/*==============================
 SIGNUP CARD
==============================*/


.signup-card{

    background:var(--white);

    padding:40px;

    border-radius:var(--radius);

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

    box-shadow:0 20px 50px rgba(15,23,42,.08);

}


.signup-card h2{

    color:var(--dark);

    font-size:1.8rem;

    margin-bottom:25px;

}



/*==============================
 FORM
==============================*/


#businessSignupForm{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.field{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.field label{

    font-size:.95rem;

    font-weight:700;

    color:var(--dark);

}


.field input,

.field textarea{

    width:100%;

    padding:14px 16px;

    border-radius:12px;

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

    outline:none;

    font-size:1rem;

    color:var(--dark);

    background:#fff;

    transition:.2s;

}


.field textarea{

    resize:vertical;

}


.field input:focus,

.field textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(22,101,52,.12);

}



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


.field input[type="file"]{

    padding:12px;

    background:#f8fafc;

    cursor:pointer;

}


.field input[type="file"]::file-selector-button{

    background:var(--primary);

    color:white;

    border:none;

    padding:9px 14px;

    border-radius:8px;

    cursor:pointer;

    margin-right:10px;

}



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


#signupButton{

    margin-top:10px;

    width:100%;

    height:55px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    font-size:1rem;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}


#signupButton:hover{

    background:var(--primary-hover);

}


#signupButton:disabled{

    opacity:.6;

    cursor:not-allowed;

}



/*==============================
 MESSAGE
==============================*/


#signupMessage{

    text-align:center;

    font-weight:700;

    min-height:25px;

}


.success{

    color:#15803d;

}


.error{

    color:#dc2626;

}



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


footer{

    text-align:center;

    padding:30px;

    color:#64748b;

}
/*==============================
 RESPONSIVE DESIGN
==============================*/


@media(max-width:1050px){


    .signup-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }


    .signup-info{

        text-align:center;

        padding-top:0;

    }


    .signup-info p{

        margin-left:auto;

        margin-right:auto;

    }


    .signup-info ul{

        max-width:500px;

        margin:auto;

    }


}



@media(max-width:600px){


    .site-header{

        height:70px;

        padding:0 20px;

    }


    .logo{

        font-size:1.1rem;

    }


    .login-link{

        font-size:.85rem;

    }


    .signup-page{

        width:94%;

        margin:30px auto;

    }


    .signup-info h1{

        font-size:2rem;

    }


    .signup-info p{

        font-size:1rem;

    }


    .signup-card{

        padding:25px 18px;

        border-radius:16px;

    }


    .signup-card h2{

        font-size:1.5rem;

    }


    .field input,

    .field textarea{

        padding:13px;

    }


    #signupButton{

        height:52px;

    }


}



@media(max-width:380px){


    .site-header{

        flex-direction:column;

        height:auto;

        gap:10px;

        padding:15px;

    }


    .signup-info h1{

        font-size:1.7rem;

    }


    }