/* Modal container styling */.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);display: flex;justify-content: center;align-items: flex-start;z-index: 1000;overflow: hidden;visibility: hidden;opacity: 0;}/* Modal content styling */.modal-content {background: white;width: 100%;max-width: 596px;display: flex;flex-direction: column;height: 100%;box-sizing: border-box;transform: translateY(100%); /* Start off-screen at bottom */transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}/* Show modal - Slide in from bottom */.modal.show-modal {visibility: visible;opacity: 1;}.modal.show-modal .modal-content {transform: translateY(0);}/* Slide out to the right when closing */.modal.hide-modal .modal-content {transform: translateX(100%);transition: transform 0.4s ease-in-out;}.modal.hide-modal {opacity: 0;visibility: hidden;transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;}/* Fixed top bar */.modal-top {position: sticky;top: 0;left: 0;width: 100%;z-index: 1001;}/* Fixed bottom bar */.modal-bottom {position: sticky;bottom: 0;left: 0;width: 100%;z-index: 1001;box-sizing: border-box;}/* Middle content area */.modal-body {overflow-y: auto; /* Allow scrolling if content overflows */flex-grow: 1; /* Fill remaining space between top and bottom bars */box-sizing: border-box;}/* Close button */.modal-close-btn {position: absolute;top: 10px;right: 10px;cursor: pointer;font-size: 24px;background: none;border: none;z-index:1002;}/* Modal button styling */.modal-button {padding: 10px 20px;font-size: 16px;margin-top: 10px;cursor: pointer;}/* Hide page scrollbar when modal is open */body.modal-open {overflow: hidden;}.modal-opening {pointer-events: none; /* Disable any interaction while animating */}.modal.show-modal {animation: slideIn 0.4s forwards;}@keyframes slideIn {0% {transform: translateY(100%);}100% {transform: translateY(0);}}