.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
}

/* Sizes */
/* Base modal sizes */
.modal-content.xl { max-width: 1000px; }
.modal-content.lg { max-width: 800px; }
.modal-content.md { max-width: 600px; }
.modal-content.sm { max-width: 400px; }
/* =========================
   Base modal size caps
   ========================= */
.modal-content.xl { max-width: 1000px; }
.modal-content.lg { max-width: 800px; }
.modal-content.md { max-width: 600px; }
.modal-content.sm { max-width: 400px; }

/* =========================
   Responsive behavior
   ========================= */

/* Desktop (≥1200px) - lots of breathing space */
@media (min-width: 1200px) {
  .modal-content.xl { width: calc(100% - 100px); }
  .modal-content.lg { width: calc(100% - 200px); }
  .modal-content.md { width: calc(100% - 400px); }
  .modal-content.sm { margin: 0 auto; } /* stays centered */
}

/* Tablets (≥768px and <1200px) - less margin */
@media (max-width: 1199.98px) {
  .modal-content.xl { width: calc(100% - 50px); }
  .modal-content.lg { width: calc(100% - 100px); }
  .modal-content.md { width: calc(100% - 200px); }
  .modal-content.sm { margin: 0 auto; }
}

/* Phones (<768px) - almost full screen */
@media (max-width: 767.98px) {
  .modal-content.xl,
  .modal-content.lg,
  .modal-content.md,
  .modal-content.sm {
    width: calc(95% - 2px);  /* leave ~1px on each side */
    max-width: none;          /* allow full fluid expansion */
    padding: 0px;
  }
}

/* Title */
h2.modal-title {
    border-bottom: 1px solid var(--bs-primary);
    margin-bottom: 1rem;
}

/* Small close "x" in top-right */
.modal-close-x {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
}

/* Footer close button */
.modal-footer {
    text-align: center;
    margin-top: 1.5rem;
}

.modal-close-btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
}

.modal-close-btn:hover {
    background: #e5e5e5;
}

/* Footer close button centered */
.modal-footer {
    text-align: center;
    margin-top: 1.5rem;
}