/**
 * Clerk Login Styles
 * 
 * Styles for the "Login with Clerk" button on wp-login.php
 */

/* Button container */
.clerk-login-button-container {
    margin: 24px 0 0 0;
    text-align: center;
}

/* Divider with "or" text */
.clerk-login-divider {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.clerk-login-divider::before,
.clerk-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #c3c4c7;
}

.clerk-login-divider span {
    padding: 0 12px;
    color: #787c82;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Login button */
.clerk-login-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #2271b1;
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

.clerk-login-button:hover {
    background: #135e96;
    color: #fff !important;
}

.clerk-login-button:focus {
    background: #135e96;
    color: #fff !important;
    box-shadow: 0 0 0 2px #2271b1;
    outline: none;
}

/* Hide WordPress form when Clerk is forced */
body.login-action-login.force-clerk-login #loginform,
body.login-action-login.force-clerk-login #nav,
body.login-action-login.force-clerk-login #backtoblog {
    display: none;
}