/**
 * Frontend CSS for Harsh WP Security
 */

/* Additional styles that may be needed for frontend integration */
.harsh-wp-security-form {
    max-width: 400px;
    margin: 0 auto;
}

.harsh-wp-security-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: harsh-spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes harsh-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.harsh-wp-security-hidden {
    display: none;
}

.harsh-wp-security-error-shake {
    animation: harsh-shake 0.5s;
}

@keyframes harsh-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .harsh-login-container,
    .harsh-register-container {
        margin: 10px;
        max-width: none;
    }
}

/* Accessibility improvements */
.harsh-form-input:focus,
.harsh-login-button:focus,
.harsh-register-button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .harsh-login-container,
    .harsh-register-container {
        border: 2px solid #000;
    }
    
    .harsh-form-input {
        border: 2px solid #000;
    }
}

/* reCAPTCHA styling */
.harsh-recaptcha-info {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 12px;
    margin-top: 10px;
}

.harsh-recaptcha-info .description {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
    margin: 0;
}

.harsh-recaptcha-info a {
    color: #0073aa;
    text-decoration: none;
}

.harsh-recaptcha-info a:hover {
    text-decoration: underline;
}