/* ==========================================
   Karachi Law Help
   Signup Page
========================================== */

:root{

    --bg:#F6F5F1;
    --surface:#FFFFFF;
    --ink:#16213E;

    --text:#232320;
    --text-secondary:#6E6C60;
    --text-muted:#A3A192;

    --border:#E4E1D4;
    --border-strong:#CFCBB8;

    --primary:#A9812F;
    --primary-dark:#8C6A22;

    --success:#2E7D32;
    --danger:#C62828;

    --radius:10px;

    --font-serif:'Lora',serif;
    --font-sans:'Inter',sans-serif;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

}

body{

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

    background:var(--bg);

    color:var(--text);

}

.signup-container{

    display:flex;

    min-height:100vh;

}

/* ===========================
   LEFT PANEL
=========================== */

.left-panel{

    flex:1.05;

    background:var(--ink);

    color:#fff;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    position:relative;

    overflow:hidden;

}

.left-panel::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

    repeating-linear-gradient(
    45deg,
    #fff 0,
    #fff 1px,
    transparent 1px,
    transparent 28px
    );

}

.branding{

    position:relative;

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

    font-size:28px;

    font-weight:600;

}

.branding span{

    color:var(--primary);

}

.website{

    position:relative;

    margin-top:8px;

    color:#B4BDD4;

    font-size:13px;

}

.hero{

    position:relative;

    max-width:450px;

}

.hero h2{

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

    font-size:36px;

    line-height:1.3;

    margin-bottom:20px;

}

.hero p{

    color:#C4CBDD;

    font-size:16px;

    line-height:1.8;

}

.trial-box{

    position:relative;

    display:inline-block;

    background:rgba(255,255,255,.08);

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

    border-radius:12px;

    padding:22px;

    line-height:2;

    font-size:15px;

    backdrop-filter:blur(12px);

}

/* ==========================================
   RIGHT PANEL
========================================== */

.right-panel{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;

    background:var(--bg);

}

.signup-card{

    width:100%;

    max-width:560px;

    background:var(--surface);

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

    border-radius:16px;

    padding:42px;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.signup-card h1{

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

    font-size:30px;

    color:var(--ink);

    margin-bottom:8px;

}

.subtitle{

    color:var(--text-secondary);

    margin-bottom:28px;

    line-height:1.7;

}

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

.form-group{

    margin-bottom:18px;

}

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:var(--text-secondary);

}

.required{

    color:#d32f2f;

}

input{

    width:100%;

    height:48px;

    padding:0 15px;

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

    border-radius:8px;

    background:#fff;

    font-size:14px;

    color:var(--text);

    transition:.25s;

}

input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(169,129,47,.10);

}

input::placeholder{

    color:#b0aea4;

}

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

.password-box{

    position:relative;

}

.password-box input{

    padding-right:48px;

}

.toggle-password{

    position:absolute;

    right:0;

    top:0;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    color:#666;

    font-size:18px;

}

.toggle-password:hover{

    color:var(--primary);

}

.password-strength{

    display:block;

    margin-top:8px;

    font-size:12px;

    font-weight:600;

}


/* ==========================================
   TERMS
========================================== */

.terms{

    margin:24px 0;

    font-size:14px;

    color:var(--text-secondary);

}

.terms label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    line-height:1.6;

    cursor:pointer;

    font-weight:400;

}

.terms input[type="checkbox"]{

    width:18px;

    height:18px;

    margin-top:2px;

    accent-color:var(--primary);

    flex-shrink:0;

}

.terms a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.terms a:hover{

    text-decoration:underline;

}

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

.btn-primary{

    width:100%;

    height:52px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-1px);

    box-shadow:0 8px 20px rgba(169,129,47,.25);

}

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

.alert{

    padding:14px 16px;

    border-radius:8px;

    margin-bottom:22px;

    font-size:14px;

    line-height:1.6;

}

.alert.error{

    background:#FDECEC;

    color:#B42318;

    border:1px solid #F6C7C7;

}

.alert.success{

    background:#EDF9F0;

    color:#1E7A37;

    border:1px solid #BFE8C8;

}

/* ==========================================
   LOGIN LINK
========================================== */

.login-link{

    text-align:center;

    margin-top:26px;

    font-size:14px;

    color:var(--text-secondary);

}

.login-link a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.login-link a:hover{

    text-decoration:underline;

}

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

.copyright{

    text-align:center;

    margin-top:25px;

    font-size:12px;

    color:var(--text-muted);

    line-height:1.8;

}

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

@media(max-width:1100px){

    .signup-container{

        flex-direction:column;

    }

    .left-panel{

        min-height:380px;

        padding:40px;

    }

    .right-panel{

        padding:35px 20px;

    }

}

@media(max-width:768px){

    .signup-card{

        padding:30px 24px;

    }

    .hero h2{

        font-size:28px;

    }

    .grid-2{

        grid-template-columns:1fr;

        gap:0;

    }

}

@media(max-width:480px){

    .left-panel{

        padding:30px;

    }

    .hero h2{

        font-size:24px;

    }

    .signup-card{

        padding:24px 18px;

        border-radius:12px;

    }

    .signup-card h1{

        font-size:24px;

    }

}