/* ============================================================
   DUNONG ARCHIVE - Terms & Privacy Modal Styles (v1.2.3)
   ------------------------------------------------------------
   Extracted from the terms modal JS (which previously injected
   these styles inline at runtime) into a dedicated CSS file so
   the modal's appearance is easier to find and adjust.

   v1.2.3: File renamed from TermsModal.css to
           TermsAndConditionAndPrivacyPolicy.css to match the
           renamed JS file.

   Design:
     • Header uses the SAME dark-blue gradient as the sidebar
       (linear-gradient(180deg, #1A365D 0%, #1E3A5F 100%)).
     • Header title and close button are white.
     • Modal body text is black (#1A202C / var(--text)) for
       maximum readability.
   ============================================================ */

/* ── Overlay (full-screen backdrop) ── */
.terms-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  opacity: 0;
  animation: termsFadeIn 0.2s ease forwards;
}

.terms-modal-overlay.terms-modal-closing {
  animation: termsFadeOut 0.2s ease forwards;
}

/* ── Card ── */
.terms-modal-card {
  background: #fff;
  border-radius: 12px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.95);
  animation: termsCardIn 0.25s ease 0.05s forwards;
}

.terms-modal-card.terms-modal-card-closing {
  animation: termsCardOut 0.2s ease forwards;
}

/* ── Header ──
   Uses the sidebar's dark-blue gradient so the modal header
   visually ties to the rest of the system's dark headers
   (teacher modals, notification dropdown, sidebar, etc.). */
.terms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #1A365D 0%, #1E3A5F 100%);
  border-radius: 12px 12px 0 0;
}

.terms-modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 600;
}

.terms-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #fff;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

.terms-modal-close:hover {
  color: #ffcccc;
}

/* ── Body ──
   Black text (var(--text) = #1A202C) for maximum readability. */
.terms-modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 0.88rem;
  color: #1A202C;
  line-height: 1.65;
}

.terms-modal-body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A202C;
  margin: 16px 0 6px;
}

.terms-modal-body h4:first-child {
  margin-top: 0;
}

.terms-modal-body p {
  margin: 6px 0;
}

.terms-modal-body ul {
  margin: 6px 0 6px 20px;
  padding: 0;
}

.terms-modal-body li {
  margin: 3px 0;
}

.terms-modal-body a {
  color: #2B6CB0;
  text-decoration: underline;
}

.terms-modal-body strong {
  font-weight: 700;
  color: #1A202C;
}

.terms-modal-body table {
  margin: 8px 0;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
}

/* ── Animations ── */
@keyframes termsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes termsCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes termsCardOut {
  from { opacity: 1; transform: scale(1)    translateY(0);    }
  to   { opacity: 0; transform: scale(0.95) translateY(10px); }
}