/* Note: Use async/await with alertBox to handle its Promise (returns true for Cancel, false for OK) */

/*  link includes
    for same folder as caller
    <link rel="stylesheet" href="myAlertBox.css">
    <script src="myAlertBox.js"></script> 
     
     for NOT same folder
     <link rel="stylesheet" href="https://red3z.site/drRayLMS/components/myAlertBox.css">
     <script src="https://red3z.site/drRayLMS/components/myAlertBox.css"></script> 
     
*/     
        
        .alertBox {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 40%;
            width: fit-content;
            height: auto;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 1000;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .alertBox div {
            margin-bottom: 20px;
            white-space: pre-wrap;
        }

        .alertBox button {
            display: inline-block;
            padding: 8px 16px;
            cursor: pointer;
            margin: 5px;
        }

        /* Optional shared class for multiple alerts */
        .myNewClass {
            background-color: #f0f0f0;
            border-color: #333;
        }

        /* Warning alert styling (red/yellow) */
        #warningAlert {
            background-color: #ffebee;
            border-color: #d32f2f;
            color: #d32f2f;
        }

        /* Soft alert styling (light blue/green) */
        #softAlert {
            background-color: #e0f7fa;
            border-color: #4caf50;
            color: #4caf50;
        }

        /* Responsive button stacking for smaller screens */
        @media (max-width: 600px) {
            .alertBox button {
                display: block;
                width: 100%;
                margin: 5px 0;
            }
        }