/* =========================================================================
   notice.css — the "IMPORTANT NOTICE" pop-up only.
   Everything is scoped to .nt-* / #notice-overlay, so nothing here can reach
   the certificate page, the verification form, the header or the footer.
   Sizes measured from the reference screenshots at 392 CSS px.
   ========================================================================= */

#notice-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0, 0, 0, 0.45);
  padding: 10px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
}

#notice-overlay.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.nt-card {
  position: relative;
  width: calc(100% - 6px);
  max-width: 388px;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* ---- Size and slide-in ----
   Variant one (QR code / verification link) sits on the certificate page,
   which lays out at 523 CSS px and is zoomed out by the phone to fit its
   6.8 cm screen. The 1.053 scale is what makes the card measure 5.0 cm wide
   and 9.8 cm tall once it has settled.
   Variant two sits on the form view, which is already 1:1, so it keeps the
   size taken from the reference screenshot.
   Both slide down by 0.5 cm — 40.6 CSS px zoomed out, 28.8 CSS px at 1:1. */

/* Variant one sits against the left edge: 0.1 cm of screen on its left,
   1.7 cm of screen on its right. 8.1 CSS px zoomed out = 0.1 cm. */
#notice-overlay.is-outside {
  justify-content: flex-start;
  padding-left: 8.1px;
  /* Settles 3.7 cm below the top edge of the screen. The status bar and the
     address bar take up the first 1.82 cm of that, so 1.88 cm is left inside
     the page itself — 152.5 CSS px at the zoomed-out scale. That leaves 2 cm
     of screen under the card. */
  padding-top: 152.5px;
}

#notice-overlay.is-outside .nt-card {
  transform-origin: top left;
  transform: scale(1.053);
  animation: nt-slide-outside 0.4s ease-out;
}

#notice-overlay.is-inside .nt-card {
  animation: nt-slide-inside 0.4s ease-out;
}

@keyframes nt-slide-outside {
  from { transform: translateY(-40.6px) scale(1.053); }
  to   { transform: translateY(0) scale(1.053); }
}

@keyframes nt-slide-inside {
  from { transform: translateY(-28.8px); }
  to   { transform: translateY(0); }
}

/* ---- Close button ---- */

.nt-close {
  position: absolute;
  top: 6px;
  right: 10px;
  /* Sits above the brand block, which would otherwise swallow the tap. */
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: #9aa0a6;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.nt-close:active {
  color: #5f6368;
}

/* ---- Brand ---- */

.nt-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 20px 0;
}

.nt-brand img {
  width: auto;
  height: 58px;
  object-fit: contain;
}

.nt-brand-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #0b3d1e;
}

.nt-brand-sub {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #6f7378;
}

/* ---- The three short dashes under the brand ---- */

.nt-dashes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 0;
}

.nt-dashes span {
  display: block;
  width: 34px;
  height: 4px;
  background: #0b3d1e;
  border-radius: 2px;
}

/* ---- Headings and text ---- */

.nt-title {
  margin: 22px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #0b3d1e;
}

.nt-body {
  margin: 22px 0 0;
  padding: 0 16px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: #16191d;
}

.nt-rule {
  margin: 28px 40px 0;
  border: none;
  border-top: 1px solid #e2e2e2;
}

.nt-urdu-title {
  margin: 24px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  color: #16191d;
  direction: rtl;
}

.nt-urdu {
  margin: 14px 0 0;
  padding: 0 16px;
  font-size: 17px;
  line-height: 33px;
  text-align: center;
  color: #16191d;
  direction: rtl;
}

/* ---- Green copyright strip at the bottom of the card ---- */

.nt-copyright {
  margin: 24px 0 0;
  padding: 8px 16px;
  background: #0b3d1e;
  color: #d8e6dc;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}