/* FMCR Popup — side modal, no overlay lock, inherits site font
   -------------------------------------------------------------- */

/* = Box model reset (scoped) */
.fmcr-popup-root, .fmcr-popup-root * {
  box-sizing: border-box;
}

/* = Typography: inherit Divi/child theme font */
.fmcr-popup-root,
.fmcr-popup-root * {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* = Viewport container (does not block scroll outside) */
.fmcr-popup-root {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  z-index: 2147483647;      /* por encima del header fijo del theme */
  pointer-events: none;     /* solo el dialog recibe eventos */

  /* safe areas + padding vertical base */
  --fmcr-safe-top: max(env(safe-area-inset-top), 0px);
  --fmcr-safe-bottom: max(env(safe-area-inset-bottom), 0px);
  --fmcr-vpad: 16px;

  /* colores de marca */
  --fmcr-accent: #9b4dff;
  --fmcr-accent-press: #803be6;
}

/* (Optional) overlay — transparente a propósito */
.fmcr-popup-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/* = Card / Dialog (lado izq + centrado vertical) */
.fmcr-popup-dialog {
  position: fixed;
  left: 20px;
  top: 52%;
  transform: translateY(-50%);
  margin: 0;

  pointer-events: auto;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  width: clamp(300px, 90vw, 420px);

  /* altura máx segura en pantallas bajas (usa 100dvh) */
  max-height: min(90vh, calc(100dvh - (var(--fmcr-vpad)*2)));
  overflow: auto;

  /* entrada sutil (sin CLS) */
  opacity: 0;
  translate: 0 10px;
  animation: fmcr-in .25s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes fmcr-in { to { opacity: 1; translate: 0 0; } }

/* = Inner layout */
.fmcr-popup-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 20px 22px;
}

/* = Optional hero/media */
.fmcr-media { width: 100%; border-radius: 12px; overflow: hidden; margin: 4px 0 14px; }
.fmcr-media img { display: block; width: 100%; height: auto; }

/* = Title + subtitle */
.fmcr-title {
  font-weight: 800;
  font-style: normal;
  line-height: 1.2;
  margin: 4px 0 10px;
}
.fmcr-popup-dialog em { font-style: normal; }  /* por si acaso */
.fmcr-subtitle {
  margin: 0 0 12px;
  color: #475569;
}

/* = Code + copy button */
.fmcr-codewrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
}
.fmcr-code {
  display: inline-block;
  padding: 10px 14px;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  background: #F8FAFC;
  font-weight: 700;
  letter-spacing: .5px;
  margin: 0;
}

/* = Buttons */
.fmcr-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  min-height: 44px;                 /* a11y touch target */
}
.fmcr-btn:focus-visible {
  outline: 2px solid #0000;         /* limpia estilos del theme */
  box-shadow: 0 0 0 3px rgba(155,77,255,.35);
}
.fmcr-btn-primary, .fmcr-btn-secondary {
  background: var(--fmcr-accent);
  color: #fff;
}
.fmcr-btn-primary:hover, .fmcr-btn-secondary:hover {
  background: var(--fmcr-accent-press);
}
.fmcr-btn-ghost {
  background: transparent;
  color: #475569;
  font-weight: 600;
  padding: 8px 10px;
}

/* Copy feedback */
.fmcr-copy-msg {
  display: inline-block;
  min-height: 1em;
  margin-left: 4px;
  font-size: .9rem;
  color: #16a34a;
}

/* = Close button (siempre visible) */
.fmcr-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  color: #0f172a;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}
.fmcr-popup-close:hover { background: #f8fafc; }

/* = Terms & Conditions (alineado izq, compacto, bullets)
   —— título, items y fechas comparten EXACTAMENTE el mismo estilo —— */
.fmcr-terms{
  text-align: left;
  align-self: stretch;          /* ocupa todo el ancho del dialog */
  width: 100%;
  color: #6b7280;               /* tono base sutil para el bloque */
  line-height: 1.4;

  /* fuente del título y que heredan items + fechas */
  --terms-color: #64748b;
  --terms-size: 0.78rem;
  --terms-weight: 700;
  --terms-lh: 1.45;
  --terms-letter: .01em;
}
.fmcr-terms-title{
  margin: 6px 0 4px;
  color: var(--terms-color);
  font-size: var(--terms-size);
  font-weight: var(--terms-weight);
  line-height: var(--terms-lh);
  letter-spacing: var(--terms-letter);
}
.fmcr-terms-list{
  margin: 0;
  padding-left: 1.1rem;         /* indent bullets */
  list-style: disc;
}
.fmcr-terms-list li{
  margin: 4px 0;
  color: var(--terms-color);
  font-size: var(--terms-size);
  font-weight: var(--terms-weight);
  line-height: var(--terms-lh);
  letter-spacing: var(--terms-letter);
}
.fmcr-terms time{
  /* SIN chips: mismas propiedades que el título */
  color: var(--terms-color);
  font-size: var(--terms-size);
  font-weight: var(--terms-weight);
  line-height: var(--terms-lh);
  letter-spacing: var(--terms-letter);
  white-space: nowrap;          /* evita cortes raros de fechas */
}

/* = Responsive (width) */
@media (max-width: 480px) {
  .fmcr-popup-dialog {
    left: 12px;
    right: 12px;                /* ancho fluido en pantallas pequeñas */
    width: auto;
  }
  .fmcr-terms-title{ font-size: .74rem; }
}

/* = Responsive (height) — FIX laptops/pantallas bajas */
@media (max-height: 760px) {
  .fmcr-popup-dialog{
    top: calc(var(--fmcr-safe-top) + 12px);
    bottom: calc(var(--fmcr-safe-bottom) + 12px);
    transform: none;
    max-height: calc(100dvh - var(--fmcr-safe-top) - var(--fmcr-safe-bottom) - 24px);
  }
}

/* Alturas muy bajas: compactar y ocultar hero */
@media (max-height: 560px) {
  .fmcr-media{ display: none; }
  .fmcr-popup-body{ padding: 16px; }
  .fmcr-title{ font-size: 20px; }
}

@media (min-width: 480px) {
  .fmcr-popup-body { padding: 22px 22px 24px; }
  .fmcr-title { font-size: 22px; }
}
@media (min-width: 768px) {
  .fmcr-title { font-size: 24px; }
}

/* = Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fmcr-popup-dialog { animation: none; opacity: 1; translate: 0 0; }
}