/* ─────────────────────────────────────────────
   registration.css  —  styles specific to registration.html
   ───────────────────────────────────────────── */

body { min-height: 100vh; }

/* Scroll lock while poster is open (no position:fixed on body — breaks Safari) */
html.poster-modal-open,
html.poster-modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Invitation poster modal (cross-browser overlay) ── */
.poster-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
}
.poster-modal.is-open {
  display: flex;
}
.poster-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.92);
  -webkit-tap-highlight-color: transparent;
}
.poster-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 22rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  flex-shrink: 0;
}
.poster-modal.is-open .poster-modal__dialog {
  animation: poster-modal-in 0.25s ease-out;
}
.poster-modal__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: #0f172a;
}
.poster-modal__close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  background: #1e293b;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.poster-modal__close:hover {
  background: #334155;
}
.poster-modal__close:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.poster-modal__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes poster-modal-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .poster-modal.is-open .poster-modal__dialog {
    animation: none;
  }
}
@media print {
  .poster-modal {
    display: none !important;
  }
}

/* Anti-bot honeypot — hidden off-screen */
.hidden-field-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── Form inputs ── */
.form-input {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #0f172a;
  border-radius: .75rem;
  padding: .75rem 1rem;
  width: 100%;
  font-size: .9rem;
  transition: all .2s ease;
  outline: none;
}
.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.form-input::placeholder { color: #94a3b8; }
.form-input option       { background: #fff; color: #0f172a; }

/* ── Organisation combobox (single control: search + list) ── */
.agency-field {
  margin-bottom: 0.25rem;
}
.agency-combo {
  border: 1.5px solid #e2e8f0;
  border-radius: .75rem;
  background: #fff;
  position: relative;
}
.agency-selected-pill {
  display: none;
  margin: .5rem .75rem 0;
  padding: .4rem .65rem;
  background: #eff6ff;
  border-radius: .5rem;
  font-size: .8rem;
  color: #1e40af;
}
.agency-combo-search {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .75rem 1rem;
  font-size: .9rem;
  color: #0f172a;
  outline: none;
  border-radius: .75rem;
}
.agency-combo-search:focus {
  box-shadow: none;
}
.agency-combo-search[readonly] {
  cursor: pointer;
  color: #64748b;
}
.agency-combo:not(.agency-combo--open) .agency-combo-search {
  border-radius: .75rem;
}
.agency-combo--open .agency-combo-search {
  border-radius: .75rem .75rem 0 0;
}
.agency-combo-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  border-top: 1px solid #e2e8f0;
  -webkit-overflow-scrolling: touch;
}
.agency-combo--open .agency-combo-list {
  display: block;
}
.agency-combo-item {
  padding: .55rem 1rem;
  font-size: .85rem;
  color: #334155;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.agency-combo-item:hover {
  background: #eff6ff;
}
.agency-combo-item.is-selected {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
}
.agency-combo-item[hidden] {
  display: none;
}

/* ── Step indicators ── */
.step-active  { background: #2563eb; border-color: #2563eb; color: #fff; }
.step-done    { background: #16a34a; border-color: #16a34a; color: #fff; }
.step-idle    { background: transparent; }

/* ── QR pass card ── */
#pass-card {
  border: 2px solid #e2e8f0;
}

/* ── Print: one A4 page entry pass ── */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .no-print,
  nav,
  footer,
  #form-section,
  #form-error,
  .reg-page-hero,
  .poster-modal {
    display: none !important;
  }

  #qr-section {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #pass-card {
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  #pass-card .text-center.mb-4 {
    margin-bottom: 0.35rem !important;
    font-size: 8pt !important;
  }

  #pass-card #qrcode {
    padding: 0.25rem !important;
    margin: 0 auto 0.35rem !important;
  }
  #pass-card #qrcode img,
  #pass-card #qrcode canvas {
    width: 38mm !important;
    height: 38mm !important;
    max-width: 38mm !important;
    max-height: 38mm !important;
    object-fit: contain !important;
  }

  #pass-card #attendee-name {
    padding: 0.35rem 0.5rem !important;
    font-size: 11pt !important;
  }

  #pass-card #attendee-details > div.flex {
    padding: 0.2rem 0.45rem !important;
  }

  #pass-card #attendee-details {
    font-size: 8pt !important;
  }

  #pass-card .rounded-xl.p-3 {
    padding: 0.25rem 0.35rem !important;
    margin-bottom: 0 !important;
    font-size: 7.5pt !important;
  }

  .card {
    box-shadow: none !important;
  }
}