/* ===========================
   Keyline Studios Application
   styles.css
=========================== */

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f8;
    color:#222;
    line-height:1.6;
}

.container{
    max-width:1050px;
    margin:50px auto;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:50px;
}

.logo{
    max-width:180px;
    margin-bottom:25px;
}

.header{
    margin-bottom:40px;
}

.header h1{
    font-size:34px;
    margin-bottom:10px;
    font-weight:700;
}

.header p{
    color:#666;
    max-width:700px;
}

.section{
    margin-top:40px;
    padding-top:35px;
    border-top:1px solid #e5e5e5;
}

.section:first-of-type{
    border-top:none;
    padding-top:0;
}

.section h2{
    margin-bottom:10px;
    font-size:24px;
}

.subtitle{
    color:#666;
    margin-bottom:20px;
}

.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:7px;
    font-weight:600;
    font-size:14px;
}

input,
select,
textarea{

    width:100%;
    padding:13px 14px;

    border:1px solid #cfcfcf;
    border-radius:6px;

    font-size:15px;

    background:#fff;

    transition:.2s;
}

textarea{
    resize:vertical;
}

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

    outline:none;

    border-color:#111;

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

}

.checkbox-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:12px;

    margin-top:15px;
}

.checkbox-grid label{

    display:flex;

    align-items:center;

    gap:10px;

    border:1px solid #ddd;

    background:#fafafa;

    padding:12px;

    border-radius:6px;

    cursor:pointer;

    transition:.15s;
}

.checkbox-grid label:hover{
    background:#f2f2f2;
}

.checkbox-grid input{

    width:18px;
    height:18px;
}

.agreement{

    display:flex;

    gap:12px;

    margin-bottom:18px;

    align-items:flex-start;

    cursor:pointer;
}

.agreement input{

    width:18px;
    height:18px;
    margin-top:2px;
}

button{

    width:100%;

    margin-top:20px;

    padding:16px;

    background:#111;

    color:white;

    border:none;

    border-radius:6px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

button:hover{
    background:#2b2b2b;
}

button:disabled{

    opacity:.7;
    cursor:not-allowed;
}

.formMessage{

    margin-top:20px;

    padding:15px;

    border-radius:6px;

    display:none;

    font-weight:600;
}

.formMessage.success{

    display:block;

    background:#e9f8ee;

    color:#1d7a39;

    border:1px solid #7ecb97;
}

.formMessage.error{

    display:block;

    background:#fdeaea;

    color:#b32727;

    border:1px solid #ef9d9d;
}

/* Mobile */

@media(max-width:900px){

.row{
    grid-template-columns:1fr;
}

.checkbox-grid{
    grid-template-columns:1fr;
}

.container{

    margin:20px;

    padding:25px;
}

.header h1{

    font-size:28px;
}

}