/* =========================================
   FIXED FOOTER (no layout weird scroll)
========================================= */

:root{
  --footer-h: 34px; /* adjust if you change footer padding/font */
}

/* Make sure page can breathe under fixed footer */
body{
  padding-bottom: var(--footer-h);
}

/* Footer - compact horizontal layout */
.custom-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #133880;
  color: #fff;
  padding: 6px 10px;
  z-index: 9999;
  font-size: 0.75rem;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.custom-footer .footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.custom-footer .footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  margin: 0 3px;
}
.custom-footer .footer-links a:hover {
  color: #40aeee;
}

/* =========================================
   MODAL (single scroll only)
========================================= */

/* Overlay should NOT scroll */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  background-color: rgba(0,0,0,0.5);

  /* ✅ no overflow here */
  overflow: hidden;

  /* ✅ center modal-content nicely */
  padding: 48px 16px;
}

/* The ONLY scroll container is modal-content */
.modal-content {
  background-color: #fff;
  margin: 0 auto;
  padding: 44px 20px 20px 20px;
  border-radius: 10px;
  width: min(800px, 100%);
  max-height: calc(100vh - 96px); /* based on .modal padding */
  overflow-y: auto;               /* ✅ single scrollbar */
  position: relative;
}

/* Close button */
.modal-content .close {
  position: sticky;   /* stays visible while scrolling */
  top: 0;
  margin-left: auto;
  display: inline-block;

  float: right;       /* keeps it on the right */
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
}

.modal-content .close:hover {
  color: #ffcc00;
}

/* Optional: tighten modal on small screens */
@media (max-width: 640px){
  :root{ --footer-h: 38px; }
  .modal{ padding: 32px 12px; }
  .modal-content{ padding: 44px 16px 16px; }
}

/* =========================================
   BODY SCROLL LOCK (used by JS)
========================================= */
body.modal-open{
  overflow: hidden;
}