/* ==== MODAL OVERLAY ==== */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(12,22,38, 0.93);
  backdrop-filter: blur(2.5px);
  transition: background 0.3s;
}

.modal.show {
  display: block;
  animation: tronModalFadeIn 0.24s cubic-bezier(.47,1.64,.41,.99);
}

@keyframes tronModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==== MODAL BOX ==== */
.pink-modal {
  background: linear-gradient(135deg, #141b26 80%, #122942 100%);
  margin: 60px auto;
  border-radius: 22px;
  border: 2.5px solid #40f8ff;
  box-shadow:
    0 0 44px #40f8ff44,
    0 0 0 5px #40f8ff15 inset,
    0 4px 34px #151d3e66;
  max-width: 560px;
  width: 95vw;
  min-height: 200px;
  padding: 0 0 32px 0;
  position: relative;
  animation: tronModalPopIn 0.33s cubic-bezier(.61,.02,.5,1.15);
}

@keyframes tronModalPopIn {
  0%   { transform: scale(0.95) translateY(56px); opacity: 0; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

/* ==== HEADER ==== */
.pink-modal-header {
  border-bottom: 1.5px solid #40f8ff55;
  background: linear-gradient(90deg, #131d2c 85%, #183957 100%);
  padding: 24px 36px 15px 36px;
  border-radius: 22px 22px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px #40f8ff22;
}

.pink-modal-header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==== MODAL TITLE ==== */
.modal-header-question {
  font-size: 1.52em;
  font-family: 'Montserrat', 'Questrial', 'Varela', sans-serif;
  color: #40f8ff;
  text-shadow: 0 0 10px #40f8ff44;
  letter-spacing: 2px;
  font-weight: 700;
  padding-right: 8px;
}

/* ==== CLOSE BUTTON ==== */
.close-button {
  cursor: pointer;
  margin-left: 26px;
  user-select: none;
  border-radius: 99px;
  outline: none;
  transition: box-shadow 0.16s;
  padding: 0;
}
.close-button:focus, .close-button:hover {
  box-shadow: 0 0 0 2px #40f8ffcc, 0 0 12px #40f8ff;
}
.exit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5px;
}
.exit-title {
  font-size: 0.79em;
  color: #40f8ff;
  letter-spacing: 1px;
  margin-top: 1.5px;
  font-family: 'Montserrat', 'Questrial', 'Varela', sans-serif;
}
.close-button img {
  filter: drop-shadow(0 0 8px #40f8ffcc);
  transition: transform 0.14s, filter 0.12s;
  border-radius: 40%;
}
.close-button:hover img, .close-button:focus img {
  transform: scale(1.12) rotate(9deg);
  filter: drop-shadow(0 0 19px #40f8ffcc) brightness(1.18);
}

/* ==== MODAL BODY ==== */
.pink-modal-body {
  padding: 18px 36px 0 36px;
  /* Make the body scrollable if it gets too tall */
  max-height: 56vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.pink-modal-body-two {
  font-family: 'Montserrat', 'Questrial', 'Varela', sans-serif;
  font-size: 1.13em;
  color: #e3f6fb;
  margin-top: 10px;
  line-height: 1.66;
  text-shadow: 0 1px 6px #22304044;
}
.pink-modal-body-two a.client {
  color: #92eaff;
  background: none;
  padding: 3px 0;
  border-bottom: 1px solid #40f8ff22;
  display: inline-block;
  transition: color 0.17s, border 0.17s;
  text-decoration: none;
}
.pink-modal-body-two a.client:hover {
  color: #40f8ff;
  border-bottom: 1.6px solid #40f8ff;
  text-shadow: 0 0 9px #40f8ff;
}

/* ==== SCROLLBAR ==== */
.pink-modal ::-webkit-scrollbar {
  width: 8px;
  background: #101b2a;
}
.pink-modal ::-webkit-scrollbar-thumb {
  background: #40f8ff44;
  border-radius: 4px;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 600px) {
  .pink-modal { max-width: 99vw; padding: 0 0 18px 0;}
  .pink-modal-header, .pink-modal-body { padding: 14px 5vw 9px 5vw; }
  .modal-header-question { font-size: 1.08em; }
  .pink-modal-body { padding: 13px 7vw 0 7vw;}
  .pink-modal-body {
  max-height: 69vh;
  padding: 13px 7vw 0 7vw;
}
}
.pink-modal-body ul,
.pink-modal-body li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Explicitly hide the list marker for all modern browsers */
.pink-modal-body li::marker {
  content: "";
}
.pink-modal-body li {
  display: block;
  margin-bottom: 10px;
  text-align: center;
}