/**
 * Tracked-changes pre-flight popup.
 *
 * Mirrors the WOPI editor unsaved-changes modal
 * (web/modules/custom/lc_wopi_editor/css/wopi-editor.css) so the two
 * confirmation surfaces look identical. Uses v2 design tokens from
 * themes/custom/legalconnect/css/v2-design-system.css; each token has a
 * literal fallback so the popup still looks right on pages that do not
 * load the v2 stylesheet.
 */

.lc-preflight-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 16, 22, 0.5);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font, 'Roboto', system-ui, -apple-system, sans-serif);
}

.lc-preflight-modal {
  background: var(--v2-surface-white, #ffffff);
  border-radius: var(--v2-radius-modal, 24px);
  box-shadow:
    var(--v2-shadow-dropdown, 0 0 16px -4px rgba(16, 24, 40, 0.15)),
    0 4px 6px -2px rgba(16, 24, 40, 0.05);
  width: 480px;
  max-width: 90vw;
  overflow: hidden;
}

/* ---------- Header ---------- */

.lc-preflight-modal__header {
  padding: var(--v2-space-6, 24px) var(--v2-space-6, 24px) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v2-space-3, 12px);
}

.lc-preflight-modal__header h3 {
  margin: 0;
  font-size: var(--v2-text-heading-sm, 20px);
  line-height: var(--v2-lh-heading-lg, 28px);
  font-weight: var(--v2-fw-semibold, 600);
  color: var(--v2-text-1, #0e1016);
  font-family: inherit;
}

.lc-preflight-modal__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--v2-text-2, #737987);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -4px -4px 0 0;
  transition: background 0.15s ease;
}

.lc-preflight-modal__close:hover,
.lc-preflight-modal__close:focus {
  background: var(--v2-surface-secondary, #e8ecf4);
  color: var(--v2-text-1, #0e1016);
  outline: none;
}

/* ---------- Body ---------- */

.lc-preflight-modal__body {
  padding: var(--v2-space-3, 12px) var(--v2-space-6, 24px) var(--v2-space-5, 20px);
}

.lc-preflight-modal__body p {
  margin: 0;
  font-size: var(--v2-text-sm, 14px);
  color: var(--v2-text-2, #737987);
  font-family: inherit;
  line-height: var(--v2-lh-base, 24px);
}

/* ---------- Footer ---------- */

.lc-preflight-modal__footer {
  padding: var(--v2-space-3, 12px) var(--v2-space-6, 24px) var(--v2-space-6, 24px);
  display: flex;
  justify-content: flex-end;
  gap: var(--v2-space-2, 8px);
}

.lc-preflight-modal__footer .v2-btn-primary,
.lc-preflight-modal__footer .v2-btn-secondary {
  white-space: nowrap !important;
}

/* Button fallbacks for pages that do not load the v2 button styles. The
   real v2 rules in v2-design-system.css win when that stylesheet is
   present because it loads later in the cascade. */
.lc-preflight-modal .v2-btn-primary,
.lc-preflight-modal .v2-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 45px;
  padding: 0 20px;
  border-radius: 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
}

.lc-preflight-modal .v2-btn-primary {
  background: #47b171;
  color: #ffffff;
}

.lc-preflight-modal .v2-btn-primary:hover,
.lc-preflight-modal .v2-btn-primary:focus {
  background: #2c854f;
  outline: none;
}

.lc-preflight-modal .v2-btn-secondary {
  background: #e8ecf4;
  color: #0e1016;
}

.lc-preflight-modal .v2-btn-secondary:hover,
.lc-preflight-modal .v2-btn-secondary:focus {
  background: #d4d9e2;
  outline: none;
}