/* Mobile Appointment Modal Fix - Ensure modals work on phone version */

@media (max-width: 768px) {
    /* Force appointment modal overlay to display correctly on mobile */
    .appointment-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 10000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }

    /* Ensure appointment modal is visible when marked as active */
    .appointment-modal-overlay[data-modal-active="true"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure iframe inside modal displays correctly */
    .appointment-modal-overlay iframe {
        width: 90% !important;
        height: 90vh !important;
        max-width: 500px !important;
        max-height: 90vh !important;
        min-height: 600px !important;
        border: none !important;
        border-radius: 16px !important;
        background: white !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        margin: auto !important;
        display: block !important;
    }

    /* Override any conflicting modal display rules */
    #appointmentModal {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #appointmentModal[data-modal-active="true"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden !important;
    }

    /* Mobile header buttons should remain clickable */
    .mobile-appointment-btn {
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
        visibility: visible !important;
    }
}

/* Additional protection against modal interference */
.appointment-modal-overlay[data-force-open="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}