/**
 * Fix for GiveWP Modal Positioning Issue
 * 
 * ROOT CAUSE:
 * The GiveWP plugin's CSS file (embed-form.css) has this styling:
 * 
 * .give-embed-form-wrapper.modal .modal-content {
 *     position: absolute;
 *     top: 6%;
 *     // NO 'left' property set!
 * }
 * 
 * When position:absolute is used WITHOUT a 'left' value, the element
 * defaults to left:auto which positions it at the left edge or inherits
 * the parent's positioning. The top:6% pushes it down slightly.
 * 
 * This breaks the parent's flexbox centering (align-items:center, 
 * justify-content:center) because position:absolute removes the element
 * from flex flow.
 * 
 * SOLUTION:
 * Remove position:absolute and let the parent's flexbox handle centering,
 * OR add proper absolute centering with left:50% + transform.
 */

/* 
 * Fix the modal-content positioning
 * Remove absolute positioning and let flexbox center it properly
 */
.give-embed-form-wrapper.modal .modal-content {
    position: relative !important;  /* Changed from absolute to relative */
    top: auto !important;            /* Remove the problematic top: 6% */
    left: auto !important;
    min-height: auto !important;     /* Remove min-height: 100vh */
    min-width: 60vw !important;      /* Use viewport width - 60% of screen width */
    width: 60vw !important;          /* Force width to 60% viewport */
    max-width: 1200px !important;    /* Max width for very large screens */
}

/* Ensure iframe inside has proper width */
.give-embed-form-wrapper.modal .modal-content iframe,
.give-embed-form-wrapper.modal iframe,
iframe[name="give-embed-form"] {
    min-width: 60vw !important;
    width: 60vw !important;
    max-width: 1200px !important;
}

/* Override GiveWP's default iframe width constraint */
.give-embed-form-wrapper iframe {
    min-width: 60vw !important;
    width: 60vw !important;
    max-width: 1200px !important;
}

/* Ensure proper stacking */
.give-embed-form-wrapper.modal {
    z-index: 999998 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .give-embed-form-wrapper.modal .modal-content {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
}