/* Custom styles for the container */
.custom-login-container {
    width: 350px;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 5px 5px 40px #000;
    position: relative;
    text-align: center; /* Center content inside */
 }
 
 /* Custom message styles */
 .custom-login-message {
    position: absolute;
    top: -1px;  /* Adjust this value to control vertical position */
    left: 50%;
    margin-top: 30px;
    transform: translateX(-50%);  /* Horizontally center */
    background-color: #573b8a;
    color: #fff;
    font-size: 1.3em;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-weight: bold;
    z-index: 10;
 }
 

 

 /* Hide the default WordPress logo */
 .login h1 {
     display: none;
 }
 
 /* Add custom logo styling */
 .custom-login-logo img {
     max-width: 100px; /* Adjust the size of the logo */
     height: auto;
     margin: 0 auto 20px; /* Center and add spacing below the logo */
     display: block;
     border-radius: 100%;
     margin-top: 10px;
 }
 
 /* Retain and style the custom form */
 .login form {
     background: none;
     box-shadow: none;
     padding: 0;
     border: none;
     text-align: left;
 }
 
 .login form label {
     font-weight: bold;
     color: #fff;
 }
 
 .login form input[type="text"],
 .login form input[type="password"] {
     width: 80%;
     height: 40px !important;
     justify-content: center;
     display: flex;
     margin: 20px auto;
     padding: 10px !important;
     border: 1px solid #24243e !important;
     border-radius: 5px !important;
     box-sizing: border-box;
 }
 
 .login .button.wp-hide-pw .dashicons{
     color: #24243e !important;
 }

 .wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-core-ui .button:focus{
    border-color: #24243e !important;
 }

 .login .button.wp-hide-pw{
    right: 35px;
 }
 
 .login form input[type="submit"] {
     width: 100%;
     background: #24243e !important;
     color: #fff;
     border-radius: 5px;
     cursor: pointer;
     font-weight: bold;
     text-transform: uppercase;
     
 }

 
 .login form input[type="submit"]:hover {
     background: #24243e;
 }



 
 /* Center the login page content */
 body.login {
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     font-family: 'Jost', sans-serif;
     background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
 }
 
 body.login #login {
     position: relative auto;
     width: 100%;
     height: 500px;
     background: #eee;
     border-radius: 50% / 10%;
     transform: translateY(25px);
     transition: 0.8s ease-in-out;
 }
 
 /* Hide "Register | Lost your password?" and footer links */
 .login #nav, 
 .login #backtoblog {
     display: none;
 }
 
 /* Replace form styles */
 .login form {
     background: none !important;
     box-shadow: none !important;
     padding: 0;
     border: none !important;
 }
 
 .login form label {
     display: none;
 }
 
 .login .forgetmenot label {
     display: contents;
     color: #573b8a;
     font-size: 1.3em;
     display: block;
     float: right;
     flex-direction: row;
     margin: 0 -30px -5px;
     font-weight: bold;
     cursor: default;
 }
 
 .login form input[type=checkbox]{
     margin: 5px 38px;
 }
 
 #login form .submit .button{
     width: 60%;
     height: 40px;
     margin: 20px 40px;
     justify-content: center;
     display: block;
     color: #fff;
     background: #302B63 !important;
     font-size: 1em;
     font-weight: bold;
     margin-top: 20px;
     outline: none;
     border: none;
     border-radius: 5px;
     transition: 0.2s ease-in;
     cursor: pointer;
 }
 
 #login form .submit .button:hover{
     background: #6d44b8 !important;
 }

 

 
 /* Style for custom title */
 #login .custom-login-title {
     color: #573b8a;
     font-size: 2.3em !important;
     justify-content: center;
     display: flex;
     font-weight: bold !important;
     cursor: default;
     margin-bottom: -15px;
 }
 
 /* Placeholder styles */
 .login form input::placeholder {
     font-size: 14px; /* Set your desired font size */
     color: #555; /* Optional: Set placeholder text color */
     padding: 0 0 15px 3px;
 }
 

 /* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    /* Adjust container width */
    .custom-login-container {
    width: 300px;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 5px 5px 40px #000;
    position: relative;
    text-align: center; /* Center content inside */
    margin: 5px;
    margin-top: 50px;
    }

    /* Adjust custom message styles */
    .custom-login-message {
        font-size: 1em; /* Reduce font size for smaller screens */
        padding: 8px 15px; /* Adjust padding */
        margin-top: 10px; /* Reduce margin */
        max-width: 90%; /* Ensure the message fits within the screen */
        word-wrap: break-word; /* Prevent text from overflowing */
    }



    /* Adjust submit button */
    #login form .submit .button {
        width: 60%;
        height: 40px;
        margin: 20px 40px auto;
        padding-bottom: 10px !important;
        justify-content: center;
        display: block;
        color: #fff;
        background: #302B63 !important;
        font-size: 1em;
        font-weight: bold;
        margin-top: 20px;
        outline: none;
        border: none;
        border-radius: 5px;
        transition: 0.2s ease-in;
        cursor: pointer;
        
    }

    /* Adjust custom title */
    #login .custom-login-title {
        font-size: 1.8em; /* Scale down the title font size */
    }
    .login .forgetmenot label {
        display: contents;
        color: #573b8a;
        font-size: 1.3em;
        display: block;
        float: right;
        flex-direction: row;
        margin: 5px -30px 5px;
        font-weight: bold;
        cursor: default;
    }
 

   }
 


.dismiss-message {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.dismiss-message:hover {
    color: #ddd;
}


/* Add this to your plugin's CSS file (e.g., assets/css/styles.css) */

@media (max-width: 480px) {
    #upload_logo_button,
    #upload_fallback_logo_button {
        margin-top: 10px;
    }
}