/*
|--------------------------------------------------------------------------
| SafariOrCity Authentication
|--------------------------------------------------------------------------
*/

:root{

    --soc-primary:#0B5D1E;
    --soc-primary-light:#16A34A;

    --soc-background:#F5F8F6;
    --soc-card:#FFFFFF;

    --soc-text:#1F2937;
    --soc-muted:#6B7280;

    --soc-border:#E5E7EB;

    --soc-radius:18px;

    --soc-shadow:
        0 15px 40px rgba(0,0,0,.08);

}

.soc-auth-wrapper{

    max-width:650px;

    margin:60px auto;

    padding:20px;

}

.soc-auth-banner{

    text-align:center;

    margin-bottom:40px;

}

.soc-auth-banner img{

    width:140px;

    margin-bottom:20px;

}

.soc-auth-banner h1{

    font-size:42px;

    margin-bottom:10px;

    color:var(--soc-primary);

}

.soc-auth-banner p{

    color:var(--soc-muted);

    font-size:18px;

}

.soc-auth-card{

    background:white;

    border-radius:24px;

    padding:50px;

    box-shadow:var(--soc-shadow);

}

.soc-auth-card h2{

    margin-top:0;

    margin-bottom:10px;

}

.soc-auth-card p{

    color:var(--soc-muted);

    margin-bottom:30px;

}

.soc-auth-card input{

    width:100%;

    padding:15px 18px;

    margin-bottom:18px;

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

    border-radius:14px;

    font-size:15px;

}

.soc-auth-card input:focus{

    outline:none;

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

}

.soc-primary-button{

    width:100%;

    border:none;

    border-radius:14px;

    padding:15px;

    background:var(--soc-primary);

    color:white;

    font-size:16px;

    cursor:pointer;

}

.soc-primary-button:hover{

    background:var(--soc-primary-light);

}

.soc-google-button{

    width:100%;

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

    background:white;

    border-radius:14px;

    padding:15px;

    cursor:pointer;

    margin-top:15px;

}

.soc-or{

    text-align:center;

    margin:25px 0;

    color:var(--soc-muted);

}

.soc-auth-links{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

}

.soc-auth-links a{

    text-decoration:none;

    color:var(--soc-primary);

    font-weight:600;

}

@media(max-width:768px){

    .soc-auth-card{

        padding:30px;

    }

    .soc-auth-banner h1{

        font-size:30px;

    }

    .soc-auth-links{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

}
/* Final auth form sizing: keep fields and primary action inside the card. */
.soc-auth-card #soc-email-login,
.soc-auth-card .soc-auth-form,
.soc-auth-card form[id*="login"] {
    width:100%;
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
}
.soc-auth-card #soc-email-login input,
.soc-auth-card #soc-email-login .soc-primary-button {
    display:block;
    width:100%;
    max-width:460px;
    box-sizing:border-box;
}
.soc-danger-zone{margin-top:36px;padding:22px;border:1px solid #f1caca;border-radius:16px;background:#fff8f8}
.soc-danger-zone h3{margin:0 0 8px;color:#a11a1a;font-size:18px}
.soc-danger-zone p{margin:0 0 16px;color:#6b4b4b}
.soc-danger-button{border:1px solid #c62828;background:#c62828;color:#fff;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}
.soc-danger-button:hover{background:#a91f1f}

/* Login form is rendered directly by [soc_auth]; do not require a card wrapper. */
#soc-email-login {
    width: min(100%, 460px);
    max-width: 460px;
    margin: 0 auto;
}
#soc-email-login input[type="email"],
#soc-email-login input[type="password"] {
    display: block;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
}
#soc-email-login button.soc-primary-button {
    display: block;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
}

/* Definitive login-page layout: the login template uses .soc-auth-screen. */
.soc-auth-screen {
    width: min(100% - 32px, 520px);
    margin: 48px auto;
    padding: 32px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(11, 93, 30, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}

.soc-auth-screen #soc-email-login {
    width: 100%;
    max-width: none;
    margin: 0;
}

.soc-auth-screen #soc-email-login input[type="email"],
.soc-auth-screen #soc-email-login input[type="password"],
.soc-auth-screen #soc-email-login button.soc-primary-button {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 54px;
    margin: 0 0 14px;
    box-sizing: border-box;
}

.soc-auth-screen #soc-email-login input[type="email"],
.soc-auth-screen #soc-email-login input[type="password"] {
    padding: 15px 18px;
    border: 1px solid #d9dee3;
    border-radius: 12px;
    background: #ffffff;
}

.soc-auth-screen #soc-email-login button.soc-primary-button {
    margin-top: 4px;
    margin-bottom: 0;
    border-radius: 12px;
}

.soc-auth-screen .soc-or {
    margin: 24px 0;
    text-align: center;
}

.soc-auth-screen > .soc-google-button {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 54px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .soc-auth-screen {
        width: calc(100% - 24px);
        margin: 24px auto;
        padding: 22px;
        border-radius: 18px;
    }
}