/* checkin-kyc-premium.css — Couche « expérience app premium » du KYC check-in.
   ⛔ PRÉPARÉ, NON DÉPLOYÉ (gated GO owner). Additif : ne redéfinit AUCUN style
   existant de checkin.css, ne touche pas à l'intelligence de détection.
   Charte : DM Sans corps + Cormorant Garamond titres, corail #E8623D, navy/ink,
   sobre premium (jamais d'or). Réutilise les tokens --ci-* de checkin.css. */

/* ── Stepper de progression KYC (Document → Selfie → Vérification) ───────── */
.kyp-steps {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 18px; padding: 0 2px;
}
.kyp-steps__seg {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--ci-border, #e8e2d8);
  overflow: hidden; position: relative;
}
.kyp-steps__seg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ci-coral, #E8623D); border-radius: 999px;
  transform: translateX(-101%);
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
.kyp-steps__seg.is-done::after { transform: translateX(0); }
.kyp-steps__seg.is-active::after {
  transform: translateX(-45%);
  animation: kyp-seg-pulse 1.8s ease-in-out infinite;
}
@keyframes kyp-seg-pulse {
  0%, 100% { opacity: .75; } 50% { opacity: 1; }
}
.kyp-steps__label {
  font: 500 12px/1.3 'DM Sans', sans-serif;
  color: var(--ci-muted, #7a7369); letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Pill de feedback temps réel (cadrage caméra) ────────────────────────── */
.kyp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  font: 500 13px/1.2 'DM Sans', sans-serif;
  background: rgba(27, 38, 59, .82); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  transition: background .25s ease, transform .25s ease;
  transform: translateY(0);
}
.kyp-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; opacity: .85;
}
.kyp-pill--searching .kyp-pill__dot { animation: kyp-dot-blink 1.1s ease-in-out infinite; }
.kyp-pill--ok        { background: rgba(22, 122, 74, .92); }
.kyp-pill--ok .kyp-pill__dot { animation: none; }
.kyp-pill--warn      { background: rgba(178, 108, 14, .92); }
.kyp-pill--hold      { background: var(--ci-coral, #E8623D); }
@keyframes kyp-dot-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Overlay « analyse en cours » (post-capture) ─────────────────────────── */
.kyp-analyzing {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 34px 22px 30px;
  animation: kyp-fade-in .35s ease both;
}
@keyframes kyp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.kyp-analyzing__doc {
  position: relative; width: 128px; height: 92px;
  border-radius: 12px; overflow: hidden;
  border: 2px solid var(--ci-border-s, #d9d2c6);
  background: var(--ci-bg, #faf7f3);
  margin-bottom: 22px;
}
.kyp-analyzing__doc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kyp-analyzing__beam {
  position: absolute; left: -10%; right: -10%; height: 34%;
  background: linear-gradient(to bottom,
    rgba(232, 98, 61, 0) 0%, rgba(232, 98, 61, .16) 45%,
    rgba(232, 98, 61, .38) 50%, rgba(232, 98, 61, .16) 55%, rgba(232, 98, 61, 0) 100%);
  border-top: 1px solid rgba(232, 98, 61, .5);
  animation: kyp-beam 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes kyp-beam { 0% { top: -34%; } 50% { top: 100%; } 100% { top: -34%; } }

.kyp-analyzing__title {
  font: 600 21px/1.25 'Cormorant Garamond', serif;
  color: var(--ci-ink, #1B263B); margin-bottom: 6px;
}
.kyp-analyzing__sub {
  font: 400 13.5px/1.5 'DM Sans', sans-serif;
  color: var(--ci-muted, #7a7369); max-width: 300px; margin-bottom: 20px;
}

/* Checklist progressive (netteté → document → lisibilité) */
.kyp-checklist { display: flex; flex-direction: column; gap: 10px; text-align: left; min-width: 230px; }
.kyp-checklist__item {
  display: flex; align-items: center; gap: 10px;
  font: 500 13.5px/1.3 'DM Sans', sans-serif;
  color: var(--ci-muted, #7a7369);
  opacity: .45; transition: opacity .3s ease, color .3s ease;
}
.kyp-checklist__item.is-active { opacity: 1; }
.kyp-checklist__item.is-done   { opacity: 1; color: var(--ci-ink, #1B263B); }
.kyp-checklist__badge {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.6px solid var(--ci-border-s, #d9d2c6);
  background: #fff; position: relative;
}
.kyp-checklist__item.is-active .kyp-checklist__badge {
  border-color: var(--ci-coral, #E8623D);
}
.kyp-checklist__item.is-active .kyp-checklist__badge::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; border: 2px solid rgba(232, 98, 61, .35);
  border-top-color: var(--ci-coral, #E8623D);
  animation: kyp-spin .9s linear infinite;
}
@keyframes kyp-spin { to { transform: rotate(360deg); } }
.kyp-checklist__item.is-done .kyp-checklist__badge {
  border-color: var(--ci-green, #167a4a); background: var(--ci-green-l, #e9f6ef);
}
.kyp-checklist__badge svg { display: none; }
.kyp-checklist__item.is-done .kyp-checklist__badge svg { display: block; }

/* ── Résultat : check animé (succès) / sablier (revue) / retry ───────────── */
.kyp-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px; animation: kyp-fade-in .35s ease both; }
.kyp-result__ring {
  width: 84px; height: 84px; margin-bottom: 18px;
}
.kyp-result__ring circle.kyp-ring-track { stroke: var(--ci-border, #e8e2d8); }
.kyp-result__ring circle.kyp-ring-fill {
  stroke: var(--ci-green, #167a4a); stroke-linecap: round;
  stroke-dasharray: 232; stroke-dashoffset: 232;
  transform: rotate(-90deg); transform-origin: center;
  animation: kyp-ring .7s cubic-bezier(.3, .7, .4, 1) forwards;
}
.kyp-result__ring path.kyp-ring-check {
  stroke: var(--ci-green, #167a4a); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: kyp-check .45s ease-out .55s forwards;
}
.kyp-result--review .kyp-result__ring circle.kyp-ring-fill,
.kyp-result--review .kyp-result__ring path.kyp-ring-check { stroke: var(--ci-amber, #b26c0e); }
@keyframes kyp-ring  { to { stroke-dashoffset: 0; } }
@keyframes kyp-check { to { stroke-dashoffset: 0; } }
.kyp-result__title { font: 600 22px/1.25 'Cormorant Garamond', serif; color: var(--ci-ink, #1B263B); margin-bottom: 6px; }
.kyp-result__sub   { font: 400 13.5px/1.55 'DM Sans', sans-serif; color: var(--ci-muted, #7a7369); max-width: 320px; }

/* ── Bloc consentement RGPD ──────────────────────────────────────────────── */
.kyp-gdpr {
  /* marge basse : respiration avant le CTA « Continuer » (retour owner 11/07, iPhone) */
  margin: 16px 0 18px; padding: 14px 16px;
  border: 1px solid var(--ci-border, #e8e2d8);
  border-radius: var(--ci-radius, 12px);
  background: var(--ci-bg, #faf7f3);
  display: flex; gap: 11px; align-items: flex-start;
  text-align: left;
}
.kyp-gdpr__ico { flex: 0 0 auto; color: var(--ci-coral, #E8623D); margin-top: 1px; }
.kyp-gdpr__txt {
  font: 400 12px/1.55 'DM Sans', sans-serif;
  color: var(--ci-muted, #7a7369);
}
.kyp-gdpr__txt a { color: var(--ci-coral, #E8623D); text-decoration: underline; text-underline-offset: 2px; }
.kyp-gdpr__txt strong { color: var(--ci-ink, #1B263B); font-weight: 600; }

/* ── Upgrade premium du statut caméra existant (#frame-status) ───────────────
   Appliqué UNIQUEMENT quand checkin.js pose la classe .kyp-on sur .ci-kyc-fs
   (flag ?kycv2=1). UN SEUL indicateur live : on garde les textes précis par mode
   d'échec de checkin.js (déjà niveau Onfido) et on n'upgrade QUE l'habillage —
   zéro logique touchée, zéro second message concurrent. */
.kyp-on #frame-status {
  background: rgba(15, 23, 42, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  font-weight: 500;
  letter-spacing: .015em;
  transition: background .3s ease, transform .25s cubic-bezier(.22, .8, .3, 1);
}
.kyp-on #frame-status.ci-frame-status--ok {
  background: rgba(16, 185, 129, .78);
  border-color: rgba(255, 255, 255, .22);
  transform: translateX(-50%) scale(1.04);
}
.kyp-on #frame-status.ci-frame-status--bad {
  background: rgba(220, 38, 38, .82);
  border-color: rgba(255, 255, 255, .18);
}
.kyp-on #frame-status::before { transition: background .3s ease, box-shadow .3s ease; }

/* Déclencheur manuel : halo doux quand le cadre est bon (invite au geste sans
   texte supplémentaire — l'auto-capture reste le chemin principal) */
.kyp-on .ci-kyc-fs__capture:not(:disabled) {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .35);
  animation: kyp-capture-halo 2.2s ease-out infinite;
}
@keyframes kyp-capture-halo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .30); }
  60%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Stepper dans le bandeau blanc de capture : compact, au-dessus de la rangée */
.ci-kyc-banner .kyp-steps { margin: 0 0 10px; }

/* ── Accessibilité : réduire les animations si demandé ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kyp-steps__seg::after { transition: none; animation: none; }
  .kyp-analyzing__beam, .kyp-pill--searching .kyp-pill__dot,
  .kyp-checklist__item.is-active .kyp-checklist__badge::after { animation: none; }
  .kyp-result__ring circle.kyp-ring-fill, .kyp-result__ring path.kyp-ring-check {
    animation: none; stroke-dashoffset: 0;
  }
  .kyp-analyzing, .kyp-result { animation: none; }
  .kyp-on .ci-kyc-fs__capture:not(:disabled) { animation: none; }
}

/* Mobile ergonomie : zones tactiles + marges compactes */
@media (max-width: 480px) {
  .kyp-analyzing { padding: 26px 14px 22px; }
  .kyp-checklist { min-width: 0; width: 100%; max-width: 280px; }
}