/* ==========================================================================
   COMPONENT / MODAL
   Figma: "Form Pop Up", "Annual Plan" (popup)
   Shared shell for both — behavior lives in
   assets/js/components/modal.js (openModal/closeModal), which expects
   exactly this markup contract (see the comment at the top of that
   file): #id.modal[hidden] > .modal-backdrop + .modal-panel.
   Each popup supplies its own content inside .modal-panel (form fields
   vs. plan/pricing content) — this file only styles the shared shell.
   z-index uses var(--z-modal).
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: var(--space-8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary-navy);
}

.modal-close:hover {
  background-color: rgba(0, 0, 128, 0.08);
}

body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   MODIFIER — Video modal
   Used for the "watch explainer video" YouTube popup (General Content
   hero). The iframe itself is injected/removed by JS on open/close
   (see assets/js/pages/general-content.js) so the video actually stops
   playing when the modal is dismissed — this file only styles the shell.
   ========================================================================== */
.modal-panel--video {
  max-width: 900px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #000;
  line-height: 0; /* avoid a stray gap under the iframe */
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-close--video {
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.45);
}

.modal-close--video:hover {
  background: rgba(0, 0, 0, 0.65);
}

@media (max-width: 599px) {
  .modal-panel--video {
    border-radius: var(--radius-md);
  }
}