/* ============================================
   Praia do Norte — Custom Login Page
   ============================================ */

/* ------------------------------------------
   1. Background — Ocean gradient
   ------------------------------------------ */
body.login {
    background: linear-gradient(160deg, #001d3d 0%, #003566 50%, #0066cc 100%) !important;
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------
   2. Logo — Replace WP logo with NQ SVG
   ------------------------------------------ */
#login h1 a,
.login h1 a {
    background-image: url('../images/imagem-grafica-nq-white-name.svg') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 280px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    padding: 0 !important;
    outline: none;
}

/* ------------------------------------------
   3. Form Card
   ------------------------------------------ */
.login form,
#loginform,
#registerform,
#lostpasswordform {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 2rem 1.75rem !important;
    margin-top: 0 !important;
}

/* ------------------------------------------
   4. Labels
   ------------------------------------------ */
.login form .forgetmenot label,
.login label {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #343a40 !important;
}

/* ------------------------------------------
   5. Inputs
   ------------------------------------------ */
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"],
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 0.65rem 0.85rem !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    color: #343a40 !important;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
    outline: none !important;
}

/* ------------------------------------------
   6. Submit Button
   ------------------------------------------ */
.login form .submit input[type="submit"],
.login .button-primary,
#wp-submit {
    background-color: #0066cc !important;
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.7rem 1.5rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

.login form .submit input[type="submit"]:hover,
.login .button-primary:hover,
#wp-submit:hover {
    background-color: #003566 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 53, 102, 0.3) !important;
}

.login form .submit input[type="submit"]:focus,
.login .button-primary:focus,
#wp-submit:focus {
    background-color: #003566 !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc !important;
    outline: none !important;
}

.login form .submit input[type="submit"]:active,
.login .button-primary:active,
#wp-submit:active {
    transform: translateY(0) !important;
}

/* ------------------------------------------
   7. Remember Me Checkbox
   ------------------------------------------ */
.login form .forgetmenot {
    margin-bottom: 0.5rem !important;
}

.login form input[type="checkbox"] {
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
}

.login form input[type="checkbox"]:checked {
    background-color: #0066cc !important;
    border-color: #0066cc !important;
}

/* ------------------------------------------
   8. Links (over dark background)
   ------------------------------------------ */
.login #nav,
.login #backtoblog {
    padding: 0.75rem 0 0 !important;
    text-align: center !important;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
}

/* Pipe separator between links */
.login #nav {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ------------------------------------------
   9. Error / Success Messages
   ------------------------------------------ */
.login .message,
.login .success,
#login_error {
    border-radius: 8px !important;
    border: none !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.login .message,
.login .success {
    background: #e8f4f8 !important;
    border-left: 4px solid #0066cc !important;
    color: #003566 !important;
}

#login_error {
    background: #fef2f2 !important;
    border-left: 4px solid #dc2626 !important;
    color: #991b1b !important;
}

#login_error a {
    color: #dc2626 !important;
}

/* ------------------------------------------
   10. Language Selector
   ------------------------------------------ */
.language-switcher {
    text-align: center !important;
    margin-top: 1rem !important;
}

.language-switcher .button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.8rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.language-switcher .button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.language-switcher select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.8rem !important;
}

.language-switcher select option {
    background: #001d3d !important;
    color: #ffffff !important;
}

/* ------------------------------------------
   11. Privacy Policy Link
   ------------------------------------------ */
.login .privacy-policy-page-link {
    text-align: center !important;
    margin-top: 0.5rem !important;
}

/* ------------------------------------------
   12. Container Width & Centering
   ------------------------------------------ */
#login {
    width: 340px !important;
    padding: 6vh 0 3vh !important;
}

/* ------------------------------------------
   13. Mobile Responsive
   ------------------------------------------ */
@media (max-width: 480px) {
    #login {
        width: 90% !important;
        padding: 4vh 0 2vh !important;
    }

    #login h1 a,
    .login h1 a {
        width: 220px !important;
        height: 60px !important;
    }

    .login form,
    #loginform,
    #registerform,
    #lostpasswordform {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ------------------------------------------
   14. WordPress Admin Bar (logged-in)
   ------------------------------------------ */
.login #login_error + form,
.login .message + form {
    margin-top: 0 !important;
}

/* Hide "Powered by WordPress" in login footer */
.login .clear + .clear {
    display: none;
}