/**
 * WRITA Custom Login Styles
 * Scoped to wp-login.php
 */

body.login {
    background-color: #f5f5f5;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Custom Logo */
#login h1 a,
.login h1 a {
    background-image: url('https://wordpress-writa-u30385.vm.elestio.app/wp-content/uploads/2025/12/writa200x60.png');
    height: 60px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

/* Form Container */
#login {
    width: 350px;
    padding: 8% 0 0;
}

#loginform {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    padding: 26px 24px 34px;
}

/* Gold Accent Bar at top of form */
#loginform::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #DAA520 0%, #B8860B 100%);
    margin: -26px -24px 26px;
    border-radius: 12px 12px 0 0;
}

/* Form Labels */
.login label {
    font-weight: 600;
    color: #333;
}

/* Input Fields */
.login input[type="text"],
.login input[type="password"] {
    border-radius: 6px;
    border: 1px solid #ddd;
    padding: 10px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #DAA520;
    box-shadow: 0 0 0 1px #DAA520;
}

/* Primary Button (Log In) */
.login .button-primary {
    background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%) !important;
    border-color: #8B0000 !important;
    border-radius: 8px !important;
    padding: 6px 20px !important;
    height: auto !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 8px rgba(139, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    width: 100%;
}

.login .button-primary:hover {
    background: linear-gradient(135deg, #6B0000 0%, #8B0000 100%) !important;
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.3) !important;
    transform: translateY(-1px);
}

/* Links below form */
.login #nav a,
.login #backtoblog a {
    color: #8B0000 !important;
    font-weight: 600;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #DAA520 !important;
}

/* Error Messages */
.login .message,
.login #login_error {
    border-left: 4px solid #DAA520;
    border-radius: 4px;
}