/* Responsive Modal Styling */

/* Mobile: Bottom Sheet Style (Default for Bootstrap Offcanvas but enhanced for Modals too) */
@media (max-width: 767.98px) {
    /* Make standard modals look like bottom sheets on mobile */
    .modal-dialog-bottom-sheet {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        margin: 0;
    }
    
    .modal-dialog-bottom-sheet .modal-content {
        border-radius: 1.5rem 1.5rem 0 0;
        border: none;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    }

    /* Adjust offcanvas height on mobile */
    .offcanvas-bottom {
        height: auto !important;
        max-height: 85vh !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
    }
}

/* Desktop: Right Side Drawer Style */
@media (min-width: 768px) {
    /* For Modals that should slide from right on desktop */
    .modal.fade .modal-dialog {
        transition: transform 0.3s ease-out;
        transform: translateX(100%);
    }
    
    .modal.show .modal-dialog {
        transform: translateX(0);
    }

    .modal-dialog-end {
        position: fixed;
        right: 0;
        margin: 0;
        height: 100%;
        max-width: 450px; /* Or whatever width fits content */
        width: 100%;
        display: flex;
        align-items: stretch; /* Full height */
    }

    .modal-dialog-end .modal-content {
        border-radius: 0;
        border-left: 1px solid rgba(0,0,0,0.1);
        height: 100%;
        overflow-y: auto;
    }

    /* Convert Bootstrap Offcanvas (bottom) to Right Side on Desktop */
    /* Note: Bootstrap offcanvas usually has placement classes. 
       If we want "offcanvas-bottom" to become "offcanvas-end" on desktop, we might need JS or tricky CSS.
       Easier approach: Use Modals for everything complex, Offcanvas for simple menus.
       Or force offcanvas-bottom to behave like offcanvas-end on desktop.
    */
    .offcanvas-bottom-desktop-end {
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        width: 400px;
        height: 100% !important;
        max-height: 100% !important;
        border-top: none;
        border-left: 1px solid rgba(0,0,0,.2);
        transform: translateX(100%);
    }
    
    .offcanvas-bottom-desktop-end.show {
        transform: translateX(0);
    }
}