/* 
  =========================================================================
  Fullscreen Overlay Alert Component Styles
  =========================================================================
  This CSS is used to create a modal-style alert that appears centered on 
  the screen with a dark translucent overlay behind it.

  .overlay-alert:
    - Covers the entire viewport with a semi-transparent black background.
    - Uses flexbox to center the alert box vertically and horizontally.
    - Positioned above all other elements using a high z-index.

  .alert-box:
    - The actual alert/message container.
    - Styled with dark background, padding, rounded corners, and shadow.
    - Limited to a maximum width for better readability.
    - Text is centered and styled for high contrast visibility.
*/

.overlay-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

.alert-box {
  background: rgb(33, 15, 15);
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: aliceblue;
}