/**
 * Tykes and Teens - BlackBaud Donation Form Width Fix
 * Add this to your child theme's style.css
 */

/* Make BlackBaud form container full width */
#blackbaud-donation-form_b4bd71db-24cd-4cbb-aabe-1d0e34c614e1,
[id^="blackbaud-donation-form"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Target the BlackBaud iframe that loads inside */
#blackbaud-donation-form_b4bd71db-24cd-4cbb-aabe-1d0e34c614e1 iframe,
[id^="blackbaud-donation-form"] iframe {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 800px; /* Adjust based on your form height */
}

/* If using Elementor, make sure the widget container is full width */
.elementor-widget-html {
    width: 100% !important;
}

/* Make sure parent Elementor column is full width */
.elementor-column:has([id^="blackbaud-donation-form"]) {
    width: 100% !important;
    max-width: 100% !important;
}

/* Desktop specific - make form use more space */
@media (min-width: 768px) {
    #blackbaud-donation-form_b4bd71db-24cd-4cbb-aabe-1d0e34c614e1,
    [id^="blackbaud-donation-form"] {
        max-width: 1200px; /* Or whatever max width you prefer */
        margin: 0 auto; /* Center it */
        padding: 0 20px;
    }
}

/* Wider layout for large desktops */
@media (min-width: 1200px) {
    #blackbaud-donation-form_b4bd71db-24cd-4cbb-aabe-1d0e34c614e1,
    [id^="blackbaud-donation-form"] {
        max-width: 1400px;
    }
}

/* Remove any container constraints from Elementor */
.elementor-section:has([id^="blackbaud-donation-form"]) .elementor-container {
    max-width: 100% !important;
}

/* If the section itself is constrained */
.elementor-section:has([id^="blackbaud-donation-form"]) {
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 767px) {
    .elementor-section:has([id^="blackbaud-donation-form"]) {
        padding-left: 15px;
        padding-right: 15px;
    }
}