/*This CSS code is for the styling of the popup newsletter form*/


/* 1. TARGET THE MAIN CONTAINER ID
   This kills the white box once and for all */
#mp_form_popup6 {
    background-color: #4c1d95 !important; /* Premium Purple */
    border-radius: 40px !important;
    padding: 0px !important; /* Resetting padding here */
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* 2. THE INNER FORM AREA */
#mp_form_popup6 .mailpoet_form {
    background-color: transparent !important; /* Removes inner white background */
    padding: 40px !important;
    border-radius: 40px !important;
}

/* 3. STYLE THE CLOSE ICON (The SVG "X") */
#mp_form_popup6 .mailpoet_form_close_icon {
    color: #ffffff !important;
    filter: brightness(0) invert(1); /* Forces a black SVG icon to be white */
    top: 25px !important;
    right: 25px !important;
    width: 20px !important;
    opacity: 0.8 !important;
}

/* 4. HEADLINE STYLING */
#mp_form_popup6 .mailpoet-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    line-height: 1.1 !important;
}

/* 5. SUBTEXT STYLING */
#mp_form_popup6 .mailpoet_form_paragraph {
    color: #d8b4fe !important; /* purple-200 */
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* 6. GLASS INPUT FIELDS */
#mp_form_popup6 .mailpoet_text {
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    color: #ffffff !important;
    font-size: 15px !important;
}

/* 7. CHECKBOXES */
#mp_form_popup6 .mailpoet_checkbox_label {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

#mp_form_popup6 .mailpoet_checkbox {
    accent-color: #fbbf24 !important;
}

/* 8. THE AMBER BUTTON */
#mp_form_popup6 .mailpoet_submit {
    width: 100% !important;
    height: 55px !important;
    background-color: #fbbf24 !important;
    color: #2e1065 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 16px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

#mp_form_popup6 .mailpoet_submit:hover {
    background-color: #f59e0b !important;
    transform: scale(1.02) !important;
}


/* 9. MOBILE RESPONSIVE FIXES
   Overrides MailPoet's "bottom-stick" behavior */
@media (max-width: 600px) {
    /* Force the popup to stay in the center of the screen */
    #mp_form_popup6 {
        width: 80% !important;
        max-width: 380px !important; /* Prevents it from being too wide on small tablets */
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important; /* Prevents it from sticking to the bottom */
        transform: translate(-50%, -50%) !important; /* Perfect mathematical centering */
        border-radius: 25px !important;
        max-height: 90vh !important; /* Ensures it doesn't go off-screen on short phones */
        overflow-y: auto !important; /* Adds a scroll inside if the phone is very small */
    }

    /* Reduce internal padding so inputs aren't squished */
    #mp_form_popup6 .mailpoet_form {
        padding: 35px 25px 25px !important; 
        border-radius: 25px !important;
    }

    /* Shrink the Headline for mobile */
    #mp_form_popup6 .mailpoet-heading {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    /* Shrink the Subtext for mobile */
    #mp_form_popup6 .mailpoet_form_paragraph {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    /* Make inputs and buttons a bit shorter for better fit */
    #mp_form_popup6 .mailpoet_text {
        padding: 14px 16px !important;
        margin-bottom: 10px !important;
    }

    #mp_form_popup6 .mailpoet_submit {
        height: 50px !important;
        font-size: 14px !important;
    }

    /* Adjust the "X" Close icon so it's not in the way */
    #mp_form_popup6 .mailpoet_form_close_icon {
        top: 15px !important;
        right: 15px !important;
        width: 16px !important;
    }
}

/*End of the pop up styling */




/* --- FOOTER DESIGN SYSTEM --- */

/* Social Icons */
.sol-social-icon {
    width: 40px;
    height: 40px;
    background-color: #1e293b; /* Slate 800 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.sol-social-icon:hover {
    background-color: #7e22ce !important; /* Brand Purple */
    transform: translateY(-3px);
}

/* BuddyBoss Footer Bottom Bar Styling */
.footer-bottom {
    border-top: 1px solid #1e293b !important;
    padding-top: 30px !important;
    margin-top: 40px !important;
}

/* Ensure Column 3 header doesn't get standard theme styling */
.footer-widget-3 p {
    margin-top: 0 !important;
}

/* 1. MATCH BACKGROUND COLORS 
   This forces the Slate 900 color on both the Widget area and the Bottom bar */
.footer-widget-area.bb-footer, 
.footer-bottom.bb-footer {
    background-color: #f5f5f5 !important; /* Slate 900 */
}

/* 2. BORDER REFINEMENT
   BuddyBoss usually has a light border here. We change it to a very subtle Slate 800 
   to match the redesign code. */
.footer-bottom.bb-footer {
    border-top: 1px solid #1e293b !important; /* Slate 800 */
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0px !important;
}

/* 3. REMOVE REDUNDANCY
   In your code, we put Social Icons and Legal Links in the WIDGETS.
   BuddyBoss is currently also showing them in the BOTTOM BAR. 
   We hide the bottom ones to avoid having them twice. */

/* Hide BuddyBoss default socials in bottom bar */
.footer-bottom .footer-socials {
    display: none !important;
}

/* Hide BuddyBoss default description/legal links in bottom bar */
.footer-bottom .footer-desc {
    display: none !important;
}

/* 4. STYLE THE REMAINING TEXT
   Styling the copyright and tagline in the bottom bar */
.footer-bottom .copyright, 
.footer-bottom .footer-tagline {
    color: #64748b !important; /* Muted Slate */
    font-size: 12px !important;
}

.footer-bottom .footer-tagline {
    margin-left: 10px !important;
    border-left: 1px solid #1e293b;
    padding-left: 10px;
}

/* 5. FIX PADDING FOR WIDGETS
   Ensures the top part of the footer isn't too cramped */
.footer-widget-area.bb-footer {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
}




/* --- MOBILE & TABLET RESPONSIVENESS (Below 991px) --- */

@media (max-width: 991px) {
    
    /* 1. Center all text in the widget area and bottom bar */
    .footer-widget-area.bb-footer, 
    .footer-bottom.bb-footer {
        text-align: center !important;
    }

    /* 2. Force BuddyBoss grid to stack into a single column */
    .footer-widget-area .bb-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* 3. Column 1: Center the Social Icons */
    .footer-col-1 div[style*="display: flex"] {
        justify-content: center !important;
        margin-top: 15px !important;
    }

    /* 4. Column 2: Center the Navigation Grid */
    /* If you used the 2-column grid for links, this centers it on mobile */
    .footer-widget.area-2 div[style*="display: grid"] {
        grid-template-columns: 1fr !important; /* Stack links in 1 column on mobile */
        justify-items: center !important;
        gap: 10px !important;
    }

    /* 5. Column 3: Reset the Right-Alignment to Center */
    .footer-widget.area-3 div {
        text-align: center !important;
    }

    /* 6. Footer Bottom Bar: Stack Copyright and Tagline */
    .footer-bottom .container.flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .footer-bottom-left, 
    .footer-bottom-right {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Remove the vertical line between copyright and tagline on mobile */
    .footer-bottom .footer-tagline {
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
        display: block !important; /* Forces it to a new line */
    }

    /* 7. Spacing adjustments */
    .footer-widget-area.bb-footer {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
}

/* --- SMALL PHONE SPECIFIC FIXES (Below 480px) --- */
@media (max-width: 480px) {
    .footer-col-1 div:first-child {
        font-size: 18px !important; /* Slightly smaller branding for small phones */
    }
    
    .footer-widget-area.bb-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
.wrap .wp-heading-inline+.page-title-action{
	color: #fff;
}