/* conversion-widgets.css
 * Owns: exit-intent modal + social-proof rail styles.
 * Does NOT own: page layout, nav, theme vars.
 */

/* ── Exit-intent Backdrop ─────────────────────────────────────── */
#rl-exit-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  animation: rl-fade-in 0.2s ease;
}
#rl-exit-backdrop.rl-visible {
  display: block;
}

/* ── Exit-intent Modal ────────────────────────────────────────── */
#rl-exit-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  padding: 40px 36px 36px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#rl-exit-modal.rl-visible {
  display: block;
  animation: rl-modal-in 0.22s ease forwards;
}
#rl-exit-modal.rl-exit-anim {
  animation: rl-modal-out 0.18s ease forwards;
}

@keyframes rl-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rl-modal-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
}

/* Dismiss X */
#rl-exit-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s;
}
#rl-exit-close:hover { color: #333; }

/* Modal label */
.rl-exit-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A961;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Modal headline */
.rl-exit-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1.22;
  color: #1A1A2E;
  margin: 0 0 10px;
  font-weight: 400;
}
.rl-exit-headline .rl-gold {
  color: #C9A961;
}

/* Modal subhead */
.rl-exit-sub {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 24px;
}

/* Email input + button */
.rl-exit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rl-exit-input-row {
  display: flex;
  gap: 8px;
}
.rl-exit-input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid #DDD;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #1A1A2E;
  outline: none;
  transition: border-color 0.15s;
}
.rl-exit-input:focus {
  border-color: #C9A961;
}
.rl-exit-input.rl-input-error {
  border-color: #d9534f;
}
.rl-exit-btn {
  height: 48px;
  padding: 0 22px;
  background: #C9A961;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}
.rl-exit-btn:hover { background: #b8934a; }
.rl-exit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.rl-exit-error-msg {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #d9534f;
  display: none;
}
.rl-exit-error-msg.rl-visible { display: block; }

/* Success state */
.rl-exit-success {
  display: none;
  text-align: center;
  padding: 8px 0 0;
}
.rl-exit-success.rl-visible { display: block; }
.rl-exit-success-icon {
  width: 44px;
  height: 44px;
  background: #f0ead7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.rl-exit-success-icon svg {
  width: 20px;
  height: 20px;
  stroke: #C9A961;
}
.rl-exit-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #1A1A2E;
  margin: 0 0 8px;
  font-weight: 400;
}
.rl-exit-success p {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #777;
  margin: 0;
}

/* Privacy note */
.rl-exit-privacy {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: #aaa;
  margin-top: 10px;
  text-align: center;
}

@keyframes rl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Social-proof Rail ───────────────────────────────────────── */
#rl-proof-rail {
  display: none; /* default hidden; shown by JS on desktop */
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 320px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #EDEDED;
  z-index: 100;
  padding: 14px 40px 14px 18px; /* right pad for dismiss X */
  transition: opacity 0.3s ease;
}
/* Shown only on desktop, never on mobile */
@media (min-width: 768px) {
  #rl-proof-rail {
    display: block;
  }
  #rl-proof-rail.rl-hidden {
    display: none;
  }
}

/* Dismiss X */
#rl-proof-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: color 0.15s;
}
#rl-proof-close:hover { color: #666; }

/* Message container with fade */
.rl-proof-inner {
  min-height: 52px;
  position: relative;
}
.rl-proof-msg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.rl-proof-msg.rl-active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

.rl-proof-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rl-proof-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: #4caf82;
  border-radius: 50%;
  margin-top: 5px;
}
.rl-proof-text-wrap {}
.rl-proof-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #1A1A2E;
  line-height: 1.45;
  font-weight: 500;
  margin: 0 0 2px;
}
.rl-proof-timestamp {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: #aaa;
  margin: 0;
}