/* Didit-style identity-verification modal. Standalone CSS so it isn't tied to
   the Tailwind build cycle (no rebuild needed when the wizard ships). */

.didit-modal { position: fixed; inset: 0; z-index: 9999; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.didit-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); }
.didit-panel {
  position: relative;
  width: min(620px, 100vw - 24px);
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, .25), 0 6px 18px rgba(15, 23, 42, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.didit-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
}
.didit-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: #14233c; }
.didit-brand-mark { width: 18px; height: 18px; color: #6c5ce7; }
.didit-close { background: none; border: 0; font-size: 22px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.didit-close:hover { color: #14233c; }

.didit-progress { height: 3px; background: #eef2f7; position: relative; }
.didit-progress-bar { height: 100%; background: linear-gradient(90deg, #6c5ce7, #22c55e); width: 0%; transition: width .25s ease-out; }

.didit-body { padding: 22px 22px 4px; overflow-y: auto; flex: 1; }
.didit-foot { padding: 14px 22px 18px; border-top: 1px solid #eef2f7; display: flex; justify-content: space-between; gap: 10px; }
.didit-foot .didit-btn:only-child { margin-left: auto; }

.didit-title { font-size: 20px; font-weight: 800; color: #14233c; margin: 0 0 4px; line-height: 1.25; }
.didit-sub   { font-size: 13.5px; color: #6b778c; margin: 0 0 14px; line-height: 1.5; }

.didit-hero { text-align: center; padding: 12px 0 6px; }
.didit-hero-icon {
  margin: 0 auto 10px; width: 64px; height: 64px;
  background: linear-gradient(135deg, #ede9fe, #dcfce7);
  color: #6c5ce7;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
}
.didit-hero .didit-title  { font-size: 22px; }
.didit-hero .didit-sub    { max-width: 380px; margin: 0 auto 16px; }

.didit-checks { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.didit-check  { display: flex; gap: 12px; align-items: flex-start; background: #f8fafe; border: 1px solid #eef2f7; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: #14233c; }
.didit-check-bullet { width: 22px; height: 22px; border-radius: 999px; background: #6c5ce7; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.didit-check .muted, .didit-fineprint, .muted { color: #94a3b8; font-size: 12px; }

.didit-fineprint { text-align: center; padding-top: 8px; }

.didit-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 14px; }
.didit-type {
  display: flex; gap: 12px; align-items: center;
  padding: 14px; border: 1.5px solid #e5ebf7; border-radius: 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
  background: #fff;
}
.didit-type:hover { border-color: #c4b5fd; background: #faf9ff; }
.didit-type.is-selected { border-color: #6c5ce7; background: #ede9fe; box-shadow: inset 0 0 0 1px #6c5ce7; }
.didit-type-icon { color: #6c5ce7; }
.didit-type-text { display: flex; flex-direction: column; line-height: 1.3; }
.didit-type-text strong { font-size: 13.5px; color: #14233c; }
.didit-type-text span   { font-size: 11.5px; color: #94a3b8; }

.didit-capture { display: flex; flex-direction: column; gap: 12px; align-items: center; margin: 4px 0 12px; }
.didit-frame {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 16 / 10;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.didit-frame.drop { cursor: pointer; }
.didit-frame.drop:hover { border-color: #6c5ce7; }
.didit-frame.has-img { border-style: solid; border-color: #6c5ce7; background: #fff; }
.didit-frame.has-img img { width: 100%; height: 100%; object-fit: cover; }
.didit-frame video { width: 100%; height: 100%; object-fit: cover; }
.didit-frame.face { aspect-ratio: 1 / 1; max-width: 320px; border-radius: 999px; }

.didit-frame-guide { color: #94a3b8; font-size: 13px; position: relative; padding: 24px; text-align: center; }
.didit-frame-guide .corner { position: absolute; width: 22px; height: 22px; border: 2.5px solid #6c5ce7; }
.didit-frame-guide .tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.didit-frame-guide .tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.didit-frame-guide .bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.didit-frame-guide .br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

.didit-face-oval { position: absolute; inset: 12% 18%; border: 3px dashed rgba(108, 92, 231, .8); border-radius: 50%; pointer-events: none; }
.didit-live-prompt {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 35, 60, .85); color: #fff; padding: 7px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  white-space: nowrap; max-width: 90%;
  transition: background .15s;
}
.didit-live-prompt.is-pulsing { background: rgba(108,92,231,.92); animation: didit-pulse 1.1s ease-in-out infinite; }
@keyframes didit-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }

.didit-capture-actions { display: flex; gap: 8px; }
.didit-shutter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: #6c5ce7; color: #fff; border: 0; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(108,92,231,.35); }
.didit-shutter:hover { background: #5b4bd1; }

.didit-pdf-pill { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #ede9fe; border-radius: 12px; color: #6c5ce7; font-weight: 600; }

.didit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font-weight: 700; font-size: 13.5px;
  padding: 11px 18px; cursor: pointer; border: 0; transition: background .12s, opacity .12s, transform .08s;
}
.didit-btn:active { transform: translateY(1px); }
.didit-btn[disabled] { opacity: .45; cursor: not-allowed; }
.didit-primary   { background: #6c5ce7; color: #fff; }
.didit-primary:hover  { background: #5b4bd1; }
.didit-secondary { background: #f1f5f9; color: #14233c; }
.didit-secondary:hover { background: #e2e8f0; }
.didit-ghost     { background: transparent; color: #475569; }
.didit-ghost:hover { background: #f1f5f9; }

.didit-liveness-status { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; min-height: 26px; }
.didit-tick { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; font-weight: 700; }

.didit-spinner {
  margin: 8px auto 14px; width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid #ede9fe;
  border-top-color: #6c5ce7;
  animation: didit-spin 0.9s linear infinite;
}
@keyframes didit-spin { to { transform: rotate(360deg); } }

.didit-result-ok, .didit-result-warn, .didit-result-bad {
  margin: 0 auto 10px; width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.didit-result-ok   { background: #dcfce7; color: #15803d; }
.didit-result-warn { background: #fef3c7; color: #b45309; }
.didit-result-bad  { background: #fee2e2; color: #b91c1c; }
.didit-pass { color: #15803d; font-weight: 700; }
.didit-fail { color: #b91c1c; font-weight: 700; }

.didit-cmp { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.didit-cmp th, .didit-cmp td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eef2f7; }
.didit-cmp th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; }
.didit-cmp td.muted, .didit-cmp .muted { color: #6b778c; }

.didit-flags { margin: 10px 0; padding: 10px 14px; background: #fef3c7; border-radius: 12px; }
.didit-flags ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: #92400e; }