/*

 * Styles for the Galatic HOA Member Portal.  These rules provide a

 * base layout for dashboard cards, tables and modal dialogs.  You can

 * override these in your theme if desired.  All classes are prefixed

 * with mmp- to avoid conflicts with other plugins and themes.

 */



.mmp-dashboard,

.mmp-account-settings {

    max-width: 900px;

    margin: 0 auto;

    padding: 1em;

    background-color: #f7f9fc;

    border: 1px solid #ddd;

    border-radius: 4px;

}

.mmp-filter-tag,
.mmp-filter-tag:visited,
.mmp-filter-tag:active {
    color: #000 !important;
}

.mmp-filter-tag:hover {
    color: #000 !important;
    background: transparent !important;
}

.mmp-event-tag a {
    color: #000 !important;
}

.mmp-event-tag a:hover {
    color: #000 !important;
}


.mmp-dashboard h2,

.mmp-dashboard h3,

.mmp-account-settings h2,

.mmp-account-settings h3 {

    margin-top: 1em;

    margin-bottom: 0.5em;

}



.mmp-dashboard .mmp-quick-links a {

    margin-right: 1em;

}



.mmp-household {

    width: 100%;

    border-collapse: collapse;

    margin-top: 0.5em;

}



.mmp-household th,

.mmp-household td {

    padding: 0.5em;

    border-bottom: 1px solid #eee;

    text-align: left;

}



.mmp-events-list,

.mmp-news-list,

.mmp-archive-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mmp-events-list li,

.mmp-news-list li,

.mmp-archive-list li {

    margin-bottom: 0.5em;

}





/* Modal container and boxes */

#mmp-modal-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

}



.mmp-modal {

    background: #fff;

    padding: 1.5em;

    border-radius: 4px;

    width: 100%;

    max-width: 500px;

}



.mmp-modal form label {

    display: block;

    margin-bottom: 0.5em;

}



/* .mmp-modal button {

    margin-right: 0.5em;

} */

/* Account and email forms */

.mmp-profile-form label,

.mmp-password-form label,

.mmp-email-form label {

    display: block;

    margin-bottom: 0.5em;

}



.mmp-news-page article {

    /* margin-bottom: 2em;

    border-bottom: 1px solid #eee;

    padding-bottom: 1em; */

}



.mmp-news-thumb img {

    max-width: 100%;

    height: auto;

}



#mmp-members-table {

    width: 100%;

    border-collapse: collapse;

}



#mmp-members-table th,

#mmp-members-table td {

    border: 1px solid #eee;

    padding: 8px;

}



#mmp-members-table .button {

    margin-right: 6px;

}



#mmp-modal-container {

    position: fixed;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.4);

    display: none;

    padding: 40px;

    z-index: 9999;

}



.mmp-modal {

    background: #fff;

    padding: 20px;

    max-width: 600px;

    margin: 0 auto;

    border-radius: 6px;

}



.mmp-view-btn {

    display: inline-block;

    margin-left: 10px;

    padding: 6px 12px;

    background-color: #01C2CE;

    color: #fff !important;

    text-decoration: none;

    border-radius: 4px;

    font-size: 14px;

    transition: background-color 0.2s ease;

}



.mmp-view-btn:hover {

    background-color: #00A3AF;

}



.galatic-user-buttons {

    display: flex;

    justify-content: space-between;

    align-items: center;





}



.galatic-left-buttons,

.galatic-right-buttons {

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Common button styling */

.btn-login,

.btn-account,

.btn-pay-dues {

    display: inline-block;

    padding: 8px 15px;

    border: 1px solid #2E6F40;

    border-radius: 4px;

    text-decoration: none;

    font-weight: 500;



}



/* Left side buttons (Login, Account) */

.btn-login,

.btn-account {

    color: #2E6F40;

    background-color: transparent;

}



.btn-login:hover,

.btn-account:hover {

    background-color: #2E6F40;

    color: #ffffff;

}



/* Right side buttons (Pay Dues, Logout) */

.btn-pay-dues {

    color: #ffffff;

    background-color: #2E6F40;

}



.btn-pay-dues:hover{

    background-color: #0D6EFD !important;

    color: #ffffff;

}

/* Back to Dashboard button - left of Logout */
.btn-back-dashboard {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #01C2CE;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    color: #01C2CE;
    background-color: #fff;
    margin-right: 10px;
    line-height: 21px;
    text-align: center;
}

.btn-back-dashboard:hover {
    background-color: #01C2CE;
    color: #ffffff;
}

/* Username welcome display in navbar */
.galatic-user-welcome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    color: #2E6F40;
    font-weight: 600;
    font-size: 14px;
}

.galatic-user-welcome i {
    font-size: 16px;
    color: #2E6F40;
}

/* Clickable tags styling */
a.mmp-clickable-tag {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a.mmp-clickable-tag:hover {
    background-color: #2E6F40;
    color: #ffffff;
}



/* Overlay container (dark background) */





/* Each modal box */



/* ===============================

   Galatic HOA News Card Styles

   =============================== */



.mmp-news-page {

    max-width: 1320px;

    margin: 0 auto;

    padding: 2em 0em;

}



.mmp-news-page h2 {

    text-align: left;

    color: #333;

    font-size: 35px

}



/* News Grid Layout */

.mmp-news-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5em;

    justify-items: center;

}



/* Each News Card */

.mmp-news-card {

    background: #fff;



    box-shadow: 0px 5px 33px 0px rgba(64, 92.00000000000006, 146, 0.25);

    overflow: hidden;

    display: flex;

    flex-direction: row;

    width: 100%;

}







/* Thumbnail Section */

.mmp-news-thumb {

    width: 35%;

    /* max-height: 240px;            */

    overflow: hidden;



}



.mmp-news-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* ensures image fills without distortion */

    object-position: center;

    /* centers the image nicely */

    transition: transform 0.3s ease;

    border-radius: 0px 0px 60px 0px;

}







/* Card Content */

.mmp-news-content {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



/* Title */



.mmp-news-content .mmp-news-title, .mmp-news-title a {

    font-size: 22px;

    height: 100px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;
    text-decoration: none!important;
    margin: 15px 0px 0px 0px;

}



.mmp-news-title a {



    color: #212529;

    font-weight: 500;



}







/* Meta Info (Date | Category) */

.mmp-news-meta{

    display: flex;

    flex-wrap: wrap;

    gap:10px;

}

.mmp-news-meta span{



    color: #fff;

    font-size: 14px;

    background-image: linear-gradient(180deg, #2C74FF 33%, #01C2CE 100%);

    padding: 4.2px 7.8px;

    border-radius: 10px 0px 10px 0px;

    text-align: center;

    font-weight: 500;

    max-width: fit-content !important;



}



/* Excerpt */

.mmp-news-excerpt {



    font-size: 19px;

    font-weight: 400;

    color: #021228D1;

    margin-bottom: 20px;

}









.mmp-back-container {

    max-width: 1320px;

    margin: 0 auto;

    /* center align with site content */

    padding: 0 20px;

}



.mmp-back-to-dashboard {

    text-align: right;

    margin: 20px 0;

}



.mmp-back-btn {

    display: inline-block;

    padding: 8px 16px;

    border: 1px solid #2f6b2f;

    color: #2f6b2f;

    border-radius: 6px;

    text-decoration: none;

    font-size: 15px;

    transition: all 0.2s ease-in-out;

    background-color: #fff;

}



.mmp-back-btn:hover,

.mmp-back-btn:focus {

    background-color: #01C2CE;

    color: #fff !important;

    text-decoration: none;

}



/* ===== Member Directory Page Styles ===== */

.mmp-directory-page {

    margin: 0px auto;



}



/* ---- Title ---- */

.mmp-directory-title {

    font-size: 35px !important;

    color: #0f1c2e;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

}



.mmp-directory-title i {

    color: #01C2CE;

    font-size: 25px;

}



/* ---- Filters ---- */

.mmp-directory-filters {

    display: flex;



    gap: 10px;

    margin-bottom: 20px;

    margin-bottom: 25px;

    background: #ffffff;

    padding: 16px 20px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    align-items: center;

}



.mmp-directory-filters input,

.mmp-directory-filters select {

    padding: 8px 10px;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    font-size: 16px;

    min-width: 180px;

    background-color: #fff;

    flex: 1;

}



.mmp-search-btn {

    background: #01C2CE;

    color: #fff;

    border: none;

    border-radius: 6px;

    padding: 8px 14px;

    cursor: pointer;

    font-size: 14px;

}



.mmp-search-btn:hover {

    background: #00A3AF;

}



/* ---- Table ---- */

#mmp-directory-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

}



#mmp-directory-table thead {

    background-color: #ffffff;

    border-bottom: 2px solid #cbd5e1;

}



#mmp-directory-table th,

#mmp-directory-table td {

    padding: 12px 10px;

    text-align: left;

}



#mmp-directory-table tr:nth-child(even) {

    background-color: #f9fafb;

}



#mmp-directory-table tr:hover {

    background-color: #eef2ff;

}



/* ---- View Button ---- */

.mmp-view-status {

    background: #01C2CE;

    color: #fff;

    border: none;

    border-radius: 6px;

    padding: 6px 10px;

    cursor: pointer;

    transition: background 0.3s ease;

}



.mmp-view-status:hover {

    background: #00A3AF;

}



/* ---- DataTable Controls ---- */

.dataTables_wrapper .dataTables_length {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

}



.dataTables_wrapper .dataTables_length label {

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

}



.dataTables_wrapper .dataTables_length select {

    padding: 4px 8px;

    border-radius: 6px;

    border: 1px solid #cbd5e1;

    background-color: #ffffff;

}



.dataTables_wrapper .dataTables_paginate {

    margin-top: 10px;

    display: flex;

    justify-content: flex-end;

    gap: 8px;

}



.dataTables_wrapper .dataTables_paginate .paginate_button {

    background-color: #00A3AF;

    color: #fff !important;

    border: none;

    border-radius: 5px;

    padding: 5px 10px;

    cursor: pointer;

    transition: background 0.3s ease;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    background-color: #00A3AF;

}



.dataTables_wrapper .dataTables_paginate .paginate_button.current {

    background-color: #01C2CE !important;

    color: #fff !important;

}



/* ---- Search + Pagination Section ---- */

.dataTables_filter input {

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    padding: 6px 10px;

    font-size: 14px;

    background-color: #fff;

}



.dataTables_filter {

    margin-bottom: 20px;

}



.dataTables_filter label {

    line-height: 30px;



}



/* === Modal Background Overlay === */

#mmp-member-info-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(17, 17, 17, 0.55);

    backdrop-filter: blur(5px);

    z-index: 9999;

    justify-content: center;

    align-items: center;

    overflow-y: auto;

    padding: 60px 20px;

}



body.mmp-modal-open {

    overflow: hidden;

}



#mmp-member-info-modal.show {

    display: flex;

}



/* === Modal Card === */

.mmp-modal {

    background: #ffffff;

    border-radius: 8px;

    width: 460px;

    max-width: 95%;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);

    padding: 25px 30px;

    position: relative;

    animation: fadeUp 0.3s ease;

}



/* Smooth fade-in animation */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* === Header === */

.mmp-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid #e6e6e6;

    margin-bottom: 15px;

    padding-bottom: 8px;

}



.mmp-modal-header h2 {

    font-size: 20px;

    color: #222;

    margin: 0;

    font-weight: 600;

}



/* === Close Button === */

.mmp-close-modal {

    font-size: 22px;

    font-weight: 600;

    color: #444;

    cursor: pointer;

    transition: color 0.2s ease;

}



.mmp-close-modal:hover {

    color: #000;

}



/* === Body === */

.mmp-modal-body p {

    margin: 10px 0;

    color: #333;

    font-size: 15px;

    line-height: 1.5;

}



.mmp-modal-body strong {

    display: inline-block;

    width: 90px;

    color: #111;

    font-weight: 600;

}



/* === Footer Buttons === */

.mmp-modal-footer {

    text-align: center;

    margin-top: 20px;

}



#mmp-send-email {

    background-color: #2E6F40;

    /* Green theme color */

    color: #ffffff;

    border: none;

    padding: 8px 18px;

    border-radius: 5px;

    font-size: 15px;

    cursor: pointer;

    transition: background 0.3s ease;

}



#mmp-send-email:hover {

    background-color: #245c35;

}



/* Optional close button next to it */

/* .mmp-modal-footer .button {

  margin-left: 10px;

  border: 1px solid #ccc;

} */



/* === Responsive === */

@media (max-width: 600px) {

    .mmp-modal {

        width: 95%;

        padding: 20px;

    }



    .mmp-modal-header h2 {

        font-size: 18px;

    }



    .mmp-modal-body strong {

        width: 80px;

    }

}





/* ===== Archive Section ===== */





.mmp-archive-title {

    font-size: 35px !important;

    font-weight: 500;

    color: #0f1c2e;

    margin-bottom: 30px

}



/* ===== 3-Column Grid ===== */

.mmp-archive-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.5rem;

}



/* ===== Individual Cards ===== */

.mmp-archive-card {

    background-image: linear-gradient(180deg, #00000000 0%, #E5EEFF 100%);

    border-radius: 0px 20px 0px 20px;

    border: 1px solid #2C74FF;

    padding: 30px 20px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    text-align: center;

    transition: all 0.5s ease-in;



}



.mmp-archive-card:hover {

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

    transform: translateY(-3px);

}



/* ===== Card Titles ===== */

.mmp-archive-card h3 {

    font-size: 25px;

    font-weight: 500;

    color: #212529;

    margin-bottom: 1rem;

}



/* ===== List Styling ===== */

.mmp-archive-list {

    list-style: none;

    margin: 0;

    padding: 0;

}







/* ===== View Button ===== */

.mmp-view-btn {

    display: inline-block;

    padding: 4px 15px;

    /* border: 1px solid #2E6F40;

    color: #2E6F40 !important; */

    border-radius: 20px;

    font-size: 14px;

    text-decoration: none;

    background-color: #fff;





}





.mmp-archive-modal {

    position: fixed;

    z-index: 99999;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(6px);

    justify-content: center;

    align-items: center;



    /* Hidden by default */

    opacity: 0;

     pointer-events: none;

    visibility: hidden;             /* add this */

    /* transition: opacity 0.25s ease, visibility 0s linear 0.25s;  */

}



.mmp-archive-modal.active {

    display: flex;

    opacity: 1;

    pointer-events: auto;

    visibility: visible;            /* show it */

    /* transition: opacity 0.25s ease, visibility 0s; */

}



.mmp-archive-modal-content {

    background: #fff;

    border-radius: 12px;

    width: 90%;

    max-width: 700px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

      transform: none;

    animation: none;

    /* transition: opacity 0.2s ease-in-out; */

    overflow: hidden;

}



.mmp-archive-modal-header {

    background: #01C2CE;

    color: #fff;

    padding: 16px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.mmp-archive-modal-close {

    cursor: pointer;

    font-size: 24px;

    font-weight: bold;

    color: #fff;

}



.mmp-archive-modal-body {

    padding: 20px;

    background: #fdfdfd;

    max-height: 60vh;

    overflow-y: auto;

}



.mmp-archive-modal-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 10px 16px;

    margin-bottom: 10px;

}



.mmp-doc-title {

    font-weight: 500;

}



.mmp-buttons {

    display: flex;

    gap: 8px;

}



.mmp-btn {

    padding: 5px 12px;

    border-radius: 20px;

    text-decoration: none;

    font-size: 14px;

}



.mmp-view-btn {

    background: #01C2CE;

    color: #fff;

}



.mmp-download-btn {

    background: #00A3AF;

    color: #fff;

}



@keyframes zoomIn {

    from {

        transform: scale(0.8);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



.mmp-dashboard-main {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}







.mmp-left-column,

.mmp-right-column {

    flex: 1;

    min-width: 320px;

}



.mmp-left-column>div,

.mmp-right-column>div {

    background: #fff;

    padding: 1.2rem;

    border-radius: 10px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    margin-bottom: 1.2rem;

}



.mmp-modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    justify-content: center;

    align-items: center;

    z-index: 1000;

}



.mmp-modal.active {

    display: flex;

}



.mmp-modal form {

    background: #fff;

    padding: 1.5rem;

    border-radius: 10px;

    width: 90%;

    max-width: 500px;

}



/* PAY DUES MODAL — Modern Dropdown Style */

#mmp-pay-dues {

    max-width: 550px;

    background: #fff;

    border-radius: 10px;

    padding: 24px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);

    font-family: system-ui, sans-serif;

}



#mmp-pay-dues h3 {

    display: flex;

    align-items: center;

    font-size: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e5e5e5;

    padding-bottom: 8px;

}



.mmp-field {

    display: flex;

    flex-direction: column;

    margin-bottom: 18px;

}



.mmp-field label {

    font-weight: 600;

    color: #222;

    margin-bottom: 6px;

}



.mmp-field select {

    padding: 10px 12px;

    border-radius: 8px;

    border: 1px solid #cfcfcf;

    font-size: 15px;

    background-color: #fff;

    transition: all 0.2s ease;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

}



.mmp-field select:focus {

    outline: none;

    border-color: #4a90e2;

    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);

}



.mmp-field-row {

    display: flex;

    justify-content: space-between;

    gap: 12px;

}



.mmp-field-row .mmp-field {

    flex: 1;

}



.mmp-secure-msg {

    display: flex;

    align-items: center;

    color: #444;

    font-size: 14px;

    margin: 16px 0;

}



.mmp-pay-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;

}



.mmp-pay-actions .button {

    padding: 8px 16px;

    border-radius: 6px;

    cursor: pointer;

    border: 1px solid #ccc;

    background: #f8f9fa;

    color: #333;

    font-weight: 500;

}



.mmp-pay-actions .button-primary {

    background-color: #2f6b3c;

    color: #fff;

    border: none;

    transition: background 0.2s ease;

}



.mmp-pay-actions .button-primary:hover {

    background-color: #215b2c;

}



/* PAY DUES MODAL STYLING */

#mmp-pay-dues {

    max-width: 550px;

    background: #fff;

    border-radius: 10px;

    padding: 24px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);

    font-family: system-ui, sans-serif;

}



#mmp-pay-dues h3 {

    display: flex;

    align-items: center;

    font-size: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e5e5e5;

    padding-bottom: 8px;

}



.mmp-field {

    display: flex;

    flex-direction: column;

    margin-bottom: 16px;

}



.mmp-field label {

    font-weight: 600;

    color: #222;

    margin-bottom: 6px;

}



.mmp-field select {

    padding: 10px;

    border-radius: 6px;

    border: 1px solid #ccc;

    font-size: 15px;

    background-color: #fff;



}



.mmp-field-row {

    display: flex;

    justify-content: space-between;

    gap: 12px;

}



.mmp-field-row .mmp-field {

    flex: 1;

}



.mmp-secure-msg {

    display: flex;

    align-items: center;

    color: #444;

    font-size: 14px;

    margin: 16px 0;

}



.mmp-pay-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;

}



.mmp-pay-actions .button {

    padding: 8px 16px;

    border-radius: 6px;

    cursor: pointer;

    border: none;

    background: #f5f5f5;

    color: #333;

    font-weight: 500;

}



.mmp-pay-actions .button-primary {

    background-color: #2f6b3c;

    color: #fff;

    transition: background 0.2s;

}



.mmp-pay-actions .button-primary:hover {

    background-color: #215b2c;

}





/* === Email Preferences Card Layout === */

.mmp-email-preferences {



    background-image: linear-gradient(180deg, #00000000 0%, #E5EEFF 100%);

    border-radius: 0px 20px 0px 20px;

    border: 1px solid #2C74FF;

    padding: 30px 20px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.5s ease-in;

}



/* === Heading === */

.mmp-email-preferences h2 {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 1.5rem;

    font-weight: 600;

    color: #0f1c2e;

    margin-bottom: 1.5rem;

}



/* === Form Labels and Inputs === */

.mmp-email-form label {



    align-items: center;

    line-height: 30px;

    margin-bottom: 12px;

    font-size: 19px;

    color: #212529;

}



.mmp-email-form input[type="email"] {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 15px;

    color: #111827;

    background-color: #fff;

    transition: border-color 0.2s ease-in-out;

}



.mmp-email-form input[type="email"]:focus {

    border-color: #2E6F40;

    outline: none;

}



/* === Checkbox Styling === */

.mmp-email-form input[type="checkbox"] {

    accent-color: #0d6efd;

    width: 18px;

    height: 18px;

    cursor: pointer;

}



/* === Save Button === */

.mmp-email-form .button-primary {

    display: inline-block;

    background-color: #2E6F40;

    color: #fff;

    border: none;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 19px;

    cursor: pointer;



    margin-top: 10px;

}



.mmp-email-form .button-primary:hover {

    background-color: #00A3AF !important;

    transform: translateY(-1px);

}



.mmp-email-form {

    line-height: 10px;

}



/* === Subtext (unsubscribe note) === */

.mmp-email-preferences p {

    margin-top: 16px;

    font-size: 14px;

    color: #374151;

    display: flex;

    align-items: center;

    gap: 6px;

}



/* Optional: Add small icon style */

.mmp-email-preferences p::before {

    content: "⚠️";

    font-size: 15px;

}



.mmp-directory-preview {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 15px;

}







.mmp-directory-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    object-fit: cover;

}



.mmp-directory-info strong {

    font-size: 1.05rem;

    display: block;

    margin-bottom: 4px;

}



.mmp-directory-info div {

    font-size: 0.9rem;

    color: #555;

    display: flex;

    align-items: center;

    gap: 6px;

}





.mmp-account-title {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 35px !important;

    font-weight: 500;

    color: #0f1c2e;

    margin-bottom: 30px;

}



.mmp-account-title i {

    color: #01C2CE;

    font-size: 25px;

}



.mmp-account-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}



.mmp-profile-card,

.mmp-security-card {

    flex: 1 1 45%;

    background-image: linear-gradient(180deg, #00000000 0%, #E5EEFF 100%);

    border-radius: 10px;

    border: 1px solid #2C74FF;

    padding: 20px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.5s ease-in;

}



.mmp-form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 15px;

}



.mmp-form-group label {

    margin-bottom: 6px;

    font-weight: 500;

    font-size: 18px;

}



.mmp-form-group input {

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 6px;

}



.mmp-btn-primary {

    border: none;

    border-radius: 20px;

    cursor: pointer;

    background-color:  #01C2CE;

    color: #ffffff;

    padding: 8px 15px;



}



.mmp-btn-primary:hover {

    background: #00A3AF;

}





.mmp-single-blog {

    max-width: 800px;

    margin: 50px auto;

    padding: 0 20px;

}



.mmp-single-blog-thumb img {

    width: 100%;

    height: auto;

    border-radius: 10px;

    margin-bottom: 20px;

}



.mmp-blog-categories a {

    color: #0073aa;

    text-decoration: none;

    font-weight: 500;

}



.mmp-blog-categories a:hover {

    text-decoration: underline;

}



.mmp-blog-title {

    font-size: 2em;

    margin: 10px 0 20px;

}



.mmp-blog-body {

    font-size: 1.1em;

    line-height: 1.6;

}



.archive-section {

  background-image: linear-gradient(180deg, #00000000 0%, #E5EEFF 100%);

    border-radius: 12px;

    border: 1px solid #2C74FF;

    padding: 30px;

    margin-top: 30px;

}



.archive-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 25px;

}



.archive-subtitle {

    color: #01C2CE;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0 0 4px 0;

}



.archive-title {

    font-size: 24px;

    font-weight: 700;

    color: #0c1b2a;

    margin: 0 0 8px 0;

}



.archive-description {

    color: #444;

    font-size: 15px;

    line-height: 1.5;

    margin: 0;

}



.archive-header-right .button-outline {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: 1px solid #01C2CE;

    color: #01C2CE;

    background: transparent;

    padding: 8px 14px;

    border-radius: 30px;

    font-weight: 500;

    text-decoration: none;

    transition: 0.2s;

}



.archive-header-right .button-outline:hover {

    background: #01C2CE;

    color: #fff;

}



.mmp-archive-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}



/* .mmp-archive-card {

    background: #fff;

    border: 1px solid #e1e5e8;

    border-radius: 10px;

    padding: 20px;

    text-align: center;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    transition: all 0.2s ease;

} */



.mmp-archive-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);

}



.mmp-archive-card h4 {

    margin: 0 0 10px 0;

    font-size: 22px;

    color: #0c1b2a;

}



.mmp-archive-card .button-secondary {

 border:1px solid #01C2CE!important;

	color:#01C2CE!important;

	background-color:transparent!important;

    padding: 6px 15px;

    text-decoration: none;

    transition: 0.2s;

}



.mmp-archive-card .button-secondary:hover {

    background: #01C2CE;

    color:#fff;

}



/* Directory Section Styling */

.directory-section {

    background-image: linear-gradient(180deg, #00000000 0%, #E5EEFF 100%);

    border-radius: 12px;

    border: 1px solid #2C74FF;

    padding: 30px;

}



.directory-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 25px;

}



.directory-subtitle {

    color:  #01C2CE;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0 0 4px 0;

}



.directory-title {

    font-size: 24px;

    font-weight: 700;

    color: #0c1b2a;

    margin: 0 0 8px 0;

}



.directory-description {

    color: #444;

    font-size: 15px;

    line-height: 1.5;

    margin: 0;

}



.directory-header-right .button-outline {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: 1px solid  #01C2CE;

    color:  #01C2CE;

    background: transparent;

    padding: 8px 14px;

    border-radius: 30px;

    font-weight: 500;

    text-decoration: none;

    transition: 0.2s;

}



.directory-header-right .button-outline:hover {

    background: #00A3AF;

    color: #fff;

}



.mmp-directory-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

}



.mmp-directory-card {

    background: #fff;

    border: 1px solid #e1e5e8;

    border-radius: 16px;

    padding: 20px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    transition: all 0.2s ease;

}



.mmp-directory-card-inner {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;

}



.mmp-directory-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);

}



.mmp-directory-avatar img {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    object-fit: cover;

}



.mmp-directory-info {

    flex: 1;

    font-size: 14px;

    color: #333;

}



.mmp-directory-info strong {

    font-size: 16px;

    font-weight: 600;

    color: #0c1b2a;

}



.mmp-role {

    color: #01C2CE;

    font-weight: 400;

}



.mmp-directory-meta i {

    color: #01C2CE;

    width: 18px;

    margin-right: 6px;

}



.mmp-directory-meta div {

    margin-bottom: 6px;

    display: flex;

    align-items: center;

}



.mmp-events-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mmp-event-item {

    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eaeaea;

}



.mmp-event-title {

    font-weight: 600;

    color: #0c1b2a;

    text-decoration: none;

    display: inline-block;

}



.mmp-event-title:hover {

    color: #2a7049;

}

 



/* Container for all tags */

.mmp-event-tags {

  display: flex;

  flex-wrap: wrap;           /* Allows wrapping on small screens */

  gap: 8px;                  /* Space between tags */

  margin-top: 8px;

}



/* Individual tag style */

.mmp-event-tag {

  border: 1px solid #01C2CE;

  border-radius: 4px;        /* Slight rounding for a cleaner look */

  padding: 4px 10px;

  font-size: 14px;

  color: #01C2CE;

  background-color: #fff;

  white-space: nowrap;       /* Keep text on one line */

}
.mmp-event-tag:hover{
    background-color:#01C2CE;
    color: #fff;
}




.mmp-news-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mmp-news-item {

    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eaeaea;

}



.mmp-news-title {

    font-weight: 600;

    color: #0c1b2a;

    text-decoration: none;

    display: inline-block;

}



.mmp-news-title:hover {

    color: #2a7049;

}

.mmp-meetCat {

  display: flex;

  justify-content: space-between; /* Push left & right */

  align-items: center;            /* Vertically align */

  gap: 12px;                      /* Optional space between (use any px you like) */

  margin-bottom: 8px;             /* Optional spacing below */

}



.mmp-news-category {

    display: block;

    font-size: 14px;

    color: #2a7049;

    font-weight: 500;

}



.mmp-blogs-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mmp-blog-item {

    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eaeaea;

}



.mmp-blog-title {

    font-weight: 600;

    color: #0c1b2a;

    text-decoration: none;

    display: inline-block;

}



.mmp-blog-title:hover {

    color: #2a7049;

}



.mmp-blog-category {

    display: block;

    font-size: 14px;

    color: #2a7049;

    font-weight: 500;

}



.mmp-no-results {

    text-align: center;

    margin-top: 10px;

    color: #888;

    font-style: italic;

}



.mmp-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid #eee;

    padding-bottom: 10px;

    margin-bottom: 15px;

}



.mmp-close-icon {

    background: none;

    border: none;

    font-size: 20px;

    cursor: pointer;

    color: #555;

}



.mmp-close-icon:hover {

    color: #000;

}



.mmp-modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 15px;

    border-top: 1px solid #eee;

    margin-top: 15px;

}





/* ===== Responsive Adjustments ===== */

@media (max-width: 767px) {

    .mmp-archive-grid {

        grid-template-columns: 2fr;

    }

}



@media (max-width: 1024px) {

    .mmp-archive-grid {

        grid-template-columns: 1fr 1fr;

    }

}





@media (max-width: 1024px) {

    .mmp-news-title {

        font-size: 1.3em;

    }



    /* .mmp-news-grid {

    grid-template-columns: repeat(2, 1fr);

  } */

    .mmp-news-card {

        max-width: 100%;

        flex-direction: column;

    }



    .mmp-news-thumb {

        width: 100%;

        max-height: 240px;

        overflow: hidden;

    }

}



@media(max-width:767px) {

    .mmp-news-grid {

        grid-template-columns: 1fr;

    }

}



/* Optional: center modal content better on large screens */

@media (max-width: 768px) {

    .mmp-modal {

        margin-top: 8%;

    }



    .mmp-news-page {

        padding: 1.5em 0px;

    }





    .mmp-directory-card {

        flex: 1 1 100%;

    }







    .mmp-news-title {

        font-size: 1.1em;

    }



    .mmp-directory-filters {

        flex-direction: column;

        align-items: stretch;

    }



    .mmp-directory-filters input,

    .mmp-directory-filters select,

    .mmp-search-btn {

        width: 100%;

    }

}



/* Close button styling */

/* only applies to the header close icon */

.mmp-close-icon {

    position: absolute;

    top: 10px;

    right: 12px;

    background: none;

    border: none;

    font-size: 20px;

    color: #666;

    cursor: pointer;

}



.mmp-close-icon:hover {

    color: #000;

}



.mmp-close-modal:hover {

    color: #000;

}



/* Simple fade animation */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}





/* === Global Background Override === */

body {

    background-color: #f7f9fc !important;

}



/* Keep navbar white */

.mmp-front-nav {

    background-color: #fff !important;

}



/* Make Address and Confirm Password share one row */



/* WooCommerce Register Form Layout Reorder */

form.register {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



/* Force visual order of fields */

#reg_first_name,

#reg_last_name {

    order: 1;

}



#reg_email,

#reg_password {

    order: 2;

}



#reg_confirm_password {

    order: 3;

}



#reg_billing_phone,

#reg_billing_address_1 {

    order: 4;

}



/* Adjust widths for side-by-side fields */

.form-row-first,

.form-row-last {

    width: 48%;

}



.form-row-wide {

    width: 100%;

}



#reg_billing_address_1,

#reg_confirm_password {

    width: 48%;

    display: inline-block;

    vertical-align: top;

}



#reg_billing_address_1 {

    margin-right: 4%;

}



.mmp-single-event,

.mmp-single-blog,

.mmp-single-news {

    max-width: 1320px;

    padding: 70px 20px 50px 20px;

    margin: 0 auto;



}



@media(max-width:1024px) {



    .mmp-single-event,

    .mmp-single-blog,

    .mmp-single-news {

        padding: 30px 20px 50px 20px;

    }

}



.body-outer-sec {

    width: 100%;

    background-image: linear-gradient(180deg, #FFFFFF 0%, #E5EEFF 100%);

}



.mmp-single-event article,

.mmp-single-blog article,

.mmp-single-news article {

    display: grid;

    grid-template-columns: repeat(1, 1fr);

    gap: 30px;

}



@media(min-width:1024px) {



    .mmp-single-event article,

    .mmp-single-blog article,

    .mmp-single-news article {

        grid-template-columns: repeat(2, 1fr);

        gap: 50px;

    }

}



.mmp-single-event-image img,

.mmp-single-news-image img {

    width: 100%;

    border-radius: 0px 0px 70px 0px;

}



.mmp-single-event-categories {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    ;

}



.mmp-single-event-categories a,

.mmp-single-news-categories a {

    padding: 5px 5px 5px 5px;

    background-image: linear-gradient(180deg, #2C74FF 33%, #01C2CE 100%);

    border-radius: 10px 0px 10px 0px;

    font-family: "Outfit", Sans-serif;

    font-size: 12px;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #FFFFFF !important;

    max-width: fit-content;

}



@media(min-width:1024px) {



    .mmp-single-event-categories a,

    .mmp-single-news-categories a {

        padding: 5px 20px 5px 20px;

        font-size: 16px;

    }

}



.mmp-single-event-title,

.mmp-single-news-title {

    font-size: 40px;

    font-weight: 500;

    line-height: 50px;

    color: #000000;

    margin: 20px 0px;



}



.mmp-single-event-content p,

.mmp-single-news-content p {

    font-size: 19px;

    font-weight: 400;

    color: #021228D1;

}



.table-responsive {

    width: 100%;

    overflow-x: auto;

}

.mmp-single-event-meta a{

    color: #00A3AF;

}

.mmp-meet-type span{

    border: 1px solid #01C2CE;

    border-radius: 4px;

    padding: 4px 10px;

    font-size: 14px;

    color: #01C2CE;

    background-color: #fff;

    white-space: nowrap;

}

.mmp-edit-field {

    cursor: pointer;

    margin-left: 8px;

    color: #0073aa;

}

.mmp-edit-input {

    width: 90%;

    padding: 4px;

}

.mmp-save-btn {

    margin-left: 6px;

}

.mmp-modal-overlay {

    position: fixed;

    top: 0; left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0,0,0,0.55);

    backdrop-filter: blur(6px);

    z-index: 99999;

    display: none;

    justify-content: center;

    align-items: center;

}



/* .mmp-modal-box {

    background: #fff;

    width: 460px;

    max-width: 95%;

    border-radius: 10px;

    padding: 30px 35px;

    animation: fadeUp .25s ease;

    left: 50%;

    top: 50%;

    position: relative;

    transform: translate(-50%, -50%);



} */
.pac-container {
    z-index: 999999999 !important;
}
#mmp-member-info-modal .mmp-modal-body p{
	display:flex;
	align-items:center;
    gap:5px;
}
.mmp-save-btn{
background: #01C2CE;
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 10px;
}
.mmp-save-btn:hover{
    background: #01C2CE!important;
}
.mmp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.mmp-modal-overlay.show {
    display: flex;
}


#mmp-member-info-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(17, 17, 17, 0.55) !important;
    backdrop-filter: blur(5px);
    z-index: 99999 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}

.mmp-modal-box {
    position: relative !important;
    left: 0 !important;
    top: 20% !important;
    transform: none !important;
}
.mmp-modal {
    display:none;
    position:fixed;
    z-index:99999;
    top:0; left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
}

.mmp-modal-content {
    background:#fff;
    width:400px;
    margin:10% auto;
    padding:20px;
    border-radius:10px;
}

/* Card Validation Error Styles */
.mmp-field-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

.mmp-error-message {
    color: #dc3545;
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

.mmp-update-card-form input:focus {
    outline: none;
    border-color: #2E6F40;
    box-shadow: 0 0 0 2px rgba(46, 111, 64, 0.2);
}

.mmp-field-error { border-color: #dc3545; }
.mmp-error-message { color: #dc3545; font-size: 12px; }
.eventHeader, .newsHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.view-all-btn a{
    background-color: #00A066;
    font-family: "Roboto", Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    fill: #FFFFFF;
    color: #FFFFFF;
    border:2px  solid #00A066;
    border-radius: 8px;
    padding: 7px 15px;
}
.mmp-top-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mmp-news-date{
font-size: 12px!important;
}

/* ================================
   SIDEBAR STYLES
================================ */
#galaticSidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: #ffffff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

#galaticSidebar .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

.galatic-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.galatic-sidebar-user i {
    font-size: 32px;
    color: #2E6F40;
}

.galatic-sidebar-user span {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.galatic-sidebar-logout,
.galatic-sidebar-login {
    padding: 15px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.btn-sidebar-logout,
.btn-sidebar-login {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-sidebar-logout {
    background: #dc3545;
    color: #fff;
}

.btn-sidebar-logout:hover {
    background: #c82333;
    color: #fff;
}

.btn-sidebar-login {
    background: #2E6F40;
    color: #fff;
}

.btn-sidebar-login:hover {
    background: #245533;
    color: #fff;
}

.open-sidebar-btn {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9998;
    background: #2E6F40;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* Show hamburger on mobile */
@media (max-width: 768px) {
    .open-sidebar-btn {
        display: block;
    }
}

/* Responsive menu inside sidebar */
#galaticSidebar .responsive-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#galaticSidebar .responsive-menu li {
    margin: 0;
}

#galaticSidebar .responsive-menu li a {
    display: block;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s;
}

#galaticSidebar .responsive-menu li a:hover {
    color: #2E6F40;
}