/* face-manyao SDK - Selfie Widget Styles */
/* Replicando estilos exactos de /05 */
:root {
  --fm-primary: #10b981;
  --fm-primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --fm-error: #ef4444;
  --fm-warning: #f59e0b;
  --fm-bg: #000;
  --fm-text: #fff;
  --fm-text-muted: rgba(255,255,255,0.5);
  --fm-radius: 12px;
  --fm-font: "Inter", system-ui, sans-serif;
}

/* Container — flex column, el consumidor controla la altura */
.fm-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Video wrapper — flex:1 sin max-height (el padre controla) */
.fm-video-wrap {
  position: relative;
  flex: 1;
  background: #000;
  overflow: hidden;
}

.fm-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fm-video.fm-mirror { transform: scaleX(-1); }

/* Oval overlay — cubre todo el video */
.fm-oval-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Checks bar — top-left como /05 */
.fm-checks {
  position: absolute;
  top: 6px; left: 8px;
  display: flex; gap: 0.4rem;
  background: rgba(0,0,0,0.6);
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  z-index: 5;
}
.fm-check {
  display: flex; align-items: center; gap: 0.2rem;
  font-family: var(--fm-font);
  font-size: 0.5625rem; font-weight: 500;
  color: var(--fm-text-muted);
  transition: color 0.3s;
  white-space: nowrap;
}
.fm-check.fm-ok { color: var(--fm-primary); }
.fm-check-icon {
  font-size: 0.625rem; width: 14px; text-align: center;
}

/* Mode badge — top-right como /05 */
.fm-mode-badge {
  position: absolute;
  top: 6px; right: 8px;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-family: var(--fm-font);
  font-size: 0.5rem; font-weight: 600;
  cursor: pointer; user-select: none;
  z-index: 5;
  transition: all 0.3s;
}
.fm-mode-active {
  background: rgba(16,185,129,0.2);
  color: var(--fm-primary);
  border: 1px solid rgba(16,185,129,0.3);
}
.fm-mode-fallback {
  background: rgba(245,158,11,0.2);
  color: var(--fm-warning);
  border: 1px solid rgba(245,158,11,0.3);
}
.fm-mode-manual {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Hint — bottom center dentro del video */
.fm-hint {
  position: absolute; bottom: 0.75rem;
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: var(--fm-text); z-index: 3;
  padding: 0.375rem 0.75rem;
  border-radius: 15px;
  font-family: var(--fm-font);
  font-size: 0.8125rem; font-weight: 500;
  white-space: nowrap;
}

/* Countdown overlay */
.fm-countdown {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  justify-content: center; z-index: 10;
  background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transition: all 0.2s;
}
.fm-countdown.fm-visible {
  opacity: 1; visibility: visible;
}
.fm-countdown-num {
  font-family: var(--fm-font);
  font-size: 6rem; font-weight: 700;
  color: var(--fm-text);
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: fm-pulse 1s ease infinite;
}
@keyframes fm-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.1); opacity:0.8; }
}

/* Capture button — fuera del video, en su propia sección */
.fm-capture-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 4px solid var(--fm-primary);
  background: transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin: 0;
  padding: 0;
}
.fm-capture-btn:hover { transform: scale(1.05); }
.fm-capture-btn:active { transform: scale(0.95); }
.fm-capture-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.fm-capture-btn::after {
  content: ""; 
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--fm-primary-gradient);
}

/* Loading */
.fm-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--fm-primary);
  animation: fm-spin 0.8s linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }