@import url('partials/_colors.css');
@import url('partials/_base.css');
@import url('partials/_input-radio.css');
@import url('partials/_separators.css');
@import url('partials/_switch.css');

#mmp-plugin-container {
    background-color: #F0F0F1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    margin: -.02em; padding: 0;

}
.mmp-masthead, #mmp-admin-footer {
    background-color: var(--mmp-red);
    margin: 0 0 0 -20px; padding: .2em; 
    color: var(--mmp-offwhite);
}
.mmp-masthead .notice, .mmp-masthead div.error, .mmp-masthead div.updated {
    color: var(--mmp-blue);
}
.mmp-masthead a, #mmp-admin-footer a {
    color: var(--mmp-offwhite);
    font-weight: 800;
    text-decoration: none;
    box-sizing: border-box;
    border-bottom: 4px solid var(--mmp-red);
    padding: 0 3px;
}
.mmp-masthead a:hover, #mmp-admin-footer a:hover {
    color: var(--mmp-offwhite);
    border-bottom: 4px solid var(--mmp-blue);
    background-color: var(--mmp-red-dark);
}

.mmp-masthead .logo-container a:hover, #mmp-admin-footer .logo-container a:hover {
    color: var(--mmp-offwhite);
    border-bottom: none;
    background-color: var(--mmp-red);
}

.mmp-masthead {
    position: sticky;
    top: 32px;
    z-index: 1000;
    /* Optional: background color to ensure the text is readable over underlying content */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads out the child elements */
    padding: 10px; /* Adds some padding around the inner content */
    box-sizing: border-box;
    border-bottom: 3px solid var(--mmp-red-dark);
}
.mmp-masthead h1 {
    color: var(--mmp-offwhite);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
}

#mmp-admin-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-top: 3px solid var(--mmp-red-dark);
    z-index: 1000;
}

.logo-container img {
    border-radius: 50%; /* Makes the logo round */
    width: 100%; /* Adjust based on your logo's size */
    max-width: 100px;
    height: auto; /* Keeps the aspect ratio */
}

.title-container {
    flex-grow: 1; /* Allows the container to grow and fill available space */
    padding: 0 20px; /* Adds some spacing around the text */
    text-align: left; /* Center the text, adjust as needed */
}

.title-container > h2  {
    color: var(--mmp-offwhite); /* Adjust the color as needed */
}

.title-container > h2 > span {
    font-size: 12px;
}

.save-container button {
    padding: .6em 1.4em;

}

#mmp-plugin-container > div.mmp-settings > form > h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 1em 0 1em;
    padding: 1.4em 0 .3em .2em;
    box-sizing: border-box;
    border-bottom: 3px solid var(--mmp-blue);
    color: var(--mmp-red);
}
/* 
form > p.submit {
    position: sticky;
    bottom: 0; 
    z-index: 1000;
    width: 100%;
    background-color: white; 
    box-sizing: border-box;
    border-top: 1px solid hsl(0, 0%, 83%);
    margin: 0 0 0 -20px; padding: .2em; 
    padding: 10px
} 
*/
 .wp-core-ui #mmp-plugin-container .button-primary {
    vertical-align: baseline;
    font-weight: 600;
    font-size: 1.2em;
    color: var(--mmp-red);
    background: var(--mmp-offwhite);
    border-radius: 6px;
}
.field-addendum {
    margin: 5px;
    display: block;
    color: var(--silver);
    font-size: 0.9em;
}
#footer-left, #footer-thankyou, #footer-upgrade {
    display: none;
}


@media (max-width: 991px) {
    .mmp-masthead {
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        top: 0;
        padding-bottom: 0;
        padding: 0 10px;
    }

    .logo-container {
        flex: 0 0 16%; /* Logo takes up no more than 20% of the width */
        max-width: 16%; /* Confirms the maximum width allocation */
        align-items: center; /* Center vertically, if needed */
        justify-content: center;
        margin-left: 15px;
    }

    .title-container {
        flex: 1; /* Allows the title to take up the remaining space */
        font-size: 1.4em;
    }
    .title-container p {
        display: none;
    }

    .save-container {
        width: 100%; /* Forces the save container to take full width, wrapping to the next line */
        order: 2; /* Ensure this is always last, even if the HTML order changes */
        text-align: center; /* Center-align the button if desired */
        padding: 0; /* Adds some space above the save button */
        display: flex;
        align-items: center; /* Center vertically, if needed */
        justify-content: center;
        margin: 0;
    }
    .save-container .submit {
        margin: 2px 0 ; padding: 0;
        width: 80%;
    }

    .wp-core-ui #mmp-plugin-container .button-primary {
        width: 100%
    }
}
