/* Popup Form Mobile Optimization */
@media (max-width: 768px) {
    /* Full screen popup on mobile */
    #requestPopup {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    #sidebarPanel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
        position: fixed !important;
        right: -100% !important;
        overflow: hidden !important;
    }

    #sidebarPanel.open {
        right: 0 !important;
    }

    /* Form layout mobile */
    #agencyForm {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Scrollable content area */
    #agencyForm > div:first-child {
        padding: 15px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 100px !important;
    }

    /* Single column layout on mobile */
    #agencyForm > div:first-child > div {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Fixed submit button at bottom */
    #agencyForm > div:last-child {
        padding: 15px !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        flex-shrink: 0 !important;
    }

    #agencyForm button[type="submit"] {
        font-size: 16px !important;
        padding: 14px !important;
    }

    /* Adjust header */
    #sidebarPanel > div:first-child {
        padding: 12px 20px !important;
    }

    #sidebarPanel h2 {
        font-size: 18px !important;
    }

    #sidebarPanel p {
        font-size: 12px !important;
    }

    /* Form fields mobile */
    #agencyForm input,
    #agencyForm select,
    #agencyForm textarea {
        font-size: 16px !important;
        padding: 10px !important;
    }

    #agencyForm h3 {
        font-size: 16px !important;
    }

    #agencyForm label span {
        font-size: 14px !important;
    }

    /* Modules grid 2x2 on mobile */
    #agencyForm div[style*="grid-template-columns: 1fr 1fr"]:first-of-type {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Success message mobile */
    #successMessage > div {
        margin: 60px 20px !important;
        padding: 32px 24px !important;
    }

    #successMessage h2 {
        font-size: 24px !important;
    }

    #successMessage p {
        font-size: 15px !important;
    }
}