/*
 * Ihaan OTT contact popup viewport fix
 * Load this file after style.css and responsive.css.
 */

/* Keep the Bootstrap overlay itself inside the visible viewport. */
#contactModal {
    padding: 0 !important;
    overflow: hidden;
}

#contactModal .modal-dialog {
    --popup-edge-space: 12px;

    display: flex;
    align-items: center;
    width: calc(100% - (var(--popup-edge-space) * 2));
    max-width: 940px;
    height: calc(100vh - (var(--popup-edge-space) * 2));
    height: calc(100dvh - (var(--popup-edge-space) * 2));
    min-height: 0 !important;
    margin: var(--popup-edge-space) auto;
}

/*
 * The popup itself becomes the scroll container. This works even when the
 * decorative header and form are both direct children of .modal-content.
 */
#contactModal .modal-content {
    width: 100%;
    max-height: 100%;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 28px;
    scrollbar-color: rgba(241, 89, 42, 0.55) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#contactModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#contactModal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

#contactModal .modal-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(241, 89, 42, 0.55);
}

/* Prevent a nested Bootstrap body from creating a second scrollbar. */
#contactModal .modal-body {
    min-height: 0;
    overflow: visible;
}

/* Never allow form controls or card content to force horizontal overflow. */
#contactModal input,
#contactModal select,
#contactModal textarea,
#contactModal button,
#contactModal .service-option,
#contactModal .contact-service-card {
    max-width: 100%;
}

#contactModal textarea {
    resize: vertical;
}

/* Short desktop and laptop screens. */
@media (min-width: 768px) and (max-height: 900px) {
    #contactModal .modal-dialog {
        --popup-edge-space: 8px;
    }

    #contactModal .modal-content {
        border-radius: 22px;
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    #contactModal .modal-dialog {
        max-width: 760px;
    }

    #contactModal .contact-fields-grid,
    #contactModal .contact-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile: use a stable bottom-sheet layout. */
@media (max-width: 767.98px) {
    #contactModal {
        overflow: hidden;
    }

    #contactModal .modal-dialog {
        --popup-edge-space: 0px;

        align-items: flex-end;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
    }

    #contactModal .modal-content {
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #contactModal .contact-services-grid,
    #contactModal .contact-service-grid,
    #contactModal .service-options,
    #contactModal .solution-options,
    #contactModal .contact-fields-grid,
    #contactModal .contact-form-grid {
        grid-template-columns: 1fr !important;
    }

    #contactModal input,
    #contactModal select {
        min-height: 52px;
    }

    #contactModal textarea {
        min-height: 120px;
    }

    #contactModal button[type="submit"] {
        width: 100%;
        min-height: 52px;
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    #contactModal .modal-content {
        border-radius: 20px 20px 0 0;
    }

    #contactModal input,
    #contactModal select,
    #contactModal textarea {
        font-size: 16px;
    }
}

/* Landscape phones and devices with very little height. */
@media (max-height: 560px) {
    #contactModal .modal-dialog {
        --popup-edge-space: 0px;

        align-items: stretch;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
    }

    #contactModal .modal-content {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #contactModal .modal-dialog,
    #contactModal .modal-content {
        scroll-behavior: auto;
    }
}