/* ============================================================
   POPUP PLUGIN — Estilos base
   Personaliza mediante las variables CSS o sobreescribiendo
   las clases en tu tema / Additional CSS de WordPress.
   ============================================================ */

/* ── Variables globales ─────────────────────────────────────── */
:root {
  --popup-overlay-bg    : rgba(0, 0, 0, 0.55);
  --popup-width         : 560px;
  --popup-max-width     : 95vw;
  --popup-bg            : #ffffff;
  --popup-radius        : 12px;
  --popup-padding       : 2rem;
  --popup-shadow        : 0 8px 40px rgba(0, 0, 0, 0.2);
  --popup-close-size    : 1.6rem;
  --popup-close-color   : #555;
  --popup-close-hover   : #000;
  --popup-z             : 99999;
  --popup-anim-duration : 0.25s;

  /* Botón trigger (puedes dejarlo sin tocar y estilizarlo desde tu tema) */
  --popup-trigger-bg      : #0073aa;
  --popup-trigger-color   : #fff;
  --popup-trigger-radius  : 6px;
  --popup-trigger-padding : 0.6em 1.4em;

  /* Botón interno del popup */
  --popup-btn-bg      : #0073aa;
  --popup-btn-color   : #fff;
  --popup-btn-radius  : 6px;
  --popup-btn-padding : 0.55em 1.3em;
}

/* ── Overlay ────────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: var(--popup-overlay-bg);
  z-index: var(--popup-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;

  /* Oculto con visibility para que CF7 pueda inicializar el form en el DOM */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity    var(--popup-anim-duration) ease,
    visibility var(--popup-anim-duration) ease;
}

.popup-overlay.popup-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ── Caja del popup ─────────────────────────────────────────── */
.popup-box {
  position: relative;
  background: var(--popup-bg);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow);
  padding: var(--popup-padding);
  width: var(--popup-width);
  max-width: var(--popup-max-width);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;

  transform: translateY(-20px) scale(0.97);
  transition:
    transform var(--popup-anim-duration) ease,
    opacity   var(--popup-anim-duration) ease;
  opacity: 0;
}

.popup-overlay.popup-visible .popup-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Botón cerrar (X) ───────────────────────────────────────── */
.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  background: none;
  border: none;
  font-size: var(--popup-close-size);
  line-height: 1;
  color: var(--popup-close-color);
  cursor: pointer;
  padding: 0.15em 0.3em;
  transition: color 0.15s, transform 0.15s;
}

.popup-close:hover,
.popup-close:focus-visible {
  color: var(--popup-close-hover);
  transform: rotate(90deg);
  outline: none;
}

/* ── Contenido ──────────────────────────────────────────────── */
.popup-content {
  margin-top: 0.5rem;
}

.popup-block {
  margin-bottom: 1rem;
}

.popup-block:last-child {
  margin-bottom: 0;
}

/* ── Bloque texto ───────────────────────────────────────────── */
.popup-block-text {
  line-height: 1.6;
}

/* ── Bloque botón ───────────────────────────────────────────── */
.popup-block-button {
  display: flex;
  justify-content: center;
}

.popup-btn {
  display: inline-block;
  background: var(--popup-btn-bg);
  color: var(--popup-btn-color);
  border-radius: var(--popup-btn-radius);
  padding: var(--popup-btn-padding);
  text-decoration: none;
  font-weight: 600;
  transition: filter 0.15s;
}

.popup-btn:hover,
.popup-btn:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

/* ── Bloque link ────────────────────────────────────────────── */
.popup-block-link a.popup-link {
  color: var(--popup-btn-bg);
  text-decoration: underline;
}

/* ── Botón trigger ──────────────────────────────────────────── */
button.popup-trigger {
  background: var(--popup-trigger-bg);
  color: var(--popup-trigger-color);
  border: none;
  border-radius: var(--popup-trigger-radius);
  padding: var(--popup-trigger-padding);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: filter 0.15s;
}

button.popup-trigger:hover,
button.popup-trigger:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

a.popup-trigger {
  color: var(--popup-trigger-bg);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --popup-padding : 1.25rem;
    --popup-radius  : 8px;
  }

  .popup-box {
    max-height: 88vh;
  }
}

/* ── Bloquear scroll del body cuando el popup está abierto ──── */
body.popup-open {
  overflow: hidden;
}