/*
Custom StyleSheet for your NiceTheme
--------------

Instructions:

Include your custom CSS in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your need.

Add your custom CSS Below */

/* The dark semi-transparent overlay */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 1000; /* Layered on top of everything else */
  justify-content: center;
  align-items: center;
}

/* The actual white modal content box */
.modal-box {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Close button positioning */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Helper class to display the modal */
.modal-overlay.is-active {
  display: flex;
}