/* Base Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal.visible {
  display: block;
}

.modal-content {
  position: relative;
  margin: 5% auto;
  padding: 2rem;
  width: 90%;
  max-width: 800px;
  background: linear-gradient(135deg, #242424, #1c1c1c);
  border-radius: 15px;
  color: #ffffff;
  box-shadow: 0px 0px 30px 10px rgba(56, 239, 125, 0.7);
  border: 2px solid transparent;
  background-image:
    linear-gradient(#1c1c1c00, #1c1c1c),
    linear-gradient(45deg, #38ef7d, #11998e);
  background-origin: border-box;
  background-clip: content-box, border-box;
  overflow: hidden;
  animation: modalFadeIn 0.5s;
}

.modal-content {
  position: relative;
  margin: 5% auto;
  padding: 10px;
  width: 90%;
  max-width: 800px;
  background: linear-gradient(135deg, #242424, #1c1c1c);
  border-radius: 1px;
  color: #ffffff;
  box-shadow: 0px 0px 30px 10px rgba(56, 239, 125, 0.7);
  border: 2px solid #ffffff80;
  background-image:
    linear-gradient(#1c1c1c00, #1c1c1c),
    linear-gradient(45deg, #38ef7d, #11998e);
  background-origin: border-box;
  background-clip: content-box, border-box;
  overflow: hidden;
  animation: modalFadeIn 0.5s;
}

/* Close Button */
.close {
  color: #ffffffa6;
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
  z-index: 1005;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  background: linear-gradient(to right, #9575cd, #6c74ed);
  transition: color 0.3s ease;
}

.close:hover {
  color: #ffffff;
  border: 2px solid #ffffff2e;
  background: linear-gradient(to left, #9575cd, #6c74ed);
  transition: color 0.5s ease;
}


/* Modal Certificate Image */
.modal-certificate-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
  border: 5px solid #fbfbfb91;
}

.modal-certificate-container {
  position: relative;
  width: 100%;
  padding-top: 129.4%; /* aspect ratio (height/width * 100%) */
}

.modal-certificate-container img,
.modal-certificate-container .blur-overlay,
.modal-certificate-container .floating-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.modal-certificate-container img,
.modal-certificate-container .blur-overlay {
  width: 100%;
  height: 100%;
}

.modal-certificate-container .floating-btn {
  width: 40px;
  height: 40px;
  transform: translate(-25%, -25%); /* Center the buttons */
}

/* Floating Buttons on Modal */
.floating-btn {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #ff00be42, #ea00ff8f, #ff00f4a1);
  box-shadow: 0 0 35px 1px rgb(255 255 255);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1010;
}
.floating-btn.active,
.floating-btn:hover {
  transform: scale(1.2);
  border: 2px solid #fdff00;
  background: linear-gradient(135deg, #ebff0042, #ffe8008f, #94ff00a1);
  box-shadow: 0 0 35px 1px rgb(255 255 255);
}

/* Popup on certificate in modal */
.popup {
  display: flex;
  position: absolute;
  background: linear-gradient(135deg, #6c74ed, #9575cd);
  color: white;
  padding: 15px;
  border-radius: 10px;
  width: 250px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1020;
  animation: fadeIn 0.3s ease-out;
  opacity: 1; /* Fully visible by default */
  transition: opacity 0.3s ease;
  flex-direction: column;
}
.popup.hidden {
  visibility: hidden;
  opacity: 0;
}

.popup p {
  line-height: 1.3;
}


.popup-nav {
  margin-top: 0px;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  margin-bottom: -10px;
  margin-left: -8px;
  margin-right: -8px;
}
.popup-nav button {
  margin: 7px;
  padding: 5px 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: linear-gradient(to right, #9575cd, #6c74ed);
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}
.popup-nav button:hover {
  border: 1px solid white;
  background: linear-gradient(to right, #b389d4, #8885fa);
}

.popup-actions {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.popup-actions button {
  margin: 0px;
  padding: 0px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(to right, #9575cd, #6c74ed);
  color: #ede3ff;
  cursor: pointer;
  transition: background 0.3s ease;
}
.popup-actions button:hover {
  background: linear-gradient(to right, #b389d4, #8885fa);
  border: 1px solid white;
}
.popup-actions button svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Blur Overlay */
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1005;
  pointer-events: none;
}
.blur-overlay.hidden {
  display: none;
}
.blur-overlay svg {
  width: 100%;
  height: 100%;
}
.blur-overlay rect {
  /* No fill here; SVG provides fill */
}

/* Button Smooth Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}