/**
 * Exit intent popup styling.
 *
 * Reads the Don't Flock theme's CSS variables when present (var(--df-x, fallback))
 * so the popup matches the site automatically. Falls back to the same palette
 * hard-coded so it still looks correct if this plugin runs without the theme.
 */

.dfei-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(22,41,60,.62);
  animation:dfei-fade .18s ease-out;
}
.dfei-overlay[hidden]{display:none}
body.dfei-locked{overflow:hidden}

@keyframes dfei-fade{from{opacity:0}to{opacity:1}}

.dfei-card{
  position:relative;width:100%;max-width:420px;
  background:var(--df-paper, #F4EDDF);
  border:1px solid var(--df-line, rgba(22,41,60,.16));
  border-top:4px solid var(--df-orange, #CF5B18);
  border-radius:4px;
  padding:30px 28px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  animation:dfei-pop .2s ease-out;
}
@keyframes dfei-pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.dfei-close{
  position:absolute;top:10px;right:12px;
  background:none;border:0;font-size:26px;line-height:1;
  color:var(--df-slate, #67788A);cursor:pointer;padding:6px;
}
.dfei-close:hover{color:var(--df-ink, #16293C)}

.dfei-headline{
  margin:0 0 10px;font-size:1.35rem;line-height:1.25;
  font-family:var(--df-display, "Archivo", system-ui, -apple-system, sans-serif);
  font-stretch:112%;font-weight:800;color:var(--df-ink, #16293C);
  padding-right:20px;
}
.dfei-subhead{
  margin:0 0 20px;font-size:14.5px;line-height:1.55;
  color:var(--df-ink-2, #2C4A69);
  font-family:var(--df-body, "Public Sans", system-ui, -apple-system, sans-serif);
}

.dfei-form{display:flex;flex-direction:column;gap:12px}

.dfei-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.dfei-input{
  width:100%;box-sizing:border-box;
  padding:12px 14px;font-size:15px;
  border:1px solid var(--df-line, rgba(22,41,60,.16));
  border-radius:3px;background:#FFFCF5;color:var(--df-ink, #16293C);
  font-family:var(--df-body, "Public Sans", system-ui, -apple-system, sans-serif);
}
.dfei-input:focus{outline:2px solid var(--df-orange, #CF5B18);outline-offset:1px}

.dfei-consent{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;line-height:1.5;color:var(--df-slate, #67788A);
  cursor:pointer;
}
.dfei-consent input{margin-top:2px;flex:0 0 auto}

.dfei-notice{
  margin:0;padding:9px 12px;font-size:13px;line-height:1.5;
  background:rgba(178,58,42,.10);color:var(--df-supports, #B23A2A);
  border-left:3px solid var(--df-supports, #B23A2A);border-radius:2px;
}

.dfei-success{
  margin:4px 0 0;padding:12px 14px;font-size:14.5px;line-height:1.5;
  background:rgba(46,107,78,.10);color:var(--df-opposes, #2E6B4E);
  border-left:3px solid var(--df-opposes, #2E6B4E);border-radius:2px;
}

.dfei-submit{
  margin-top:2px;
  background:var(--df-orange, #CF5B18);color:#FFFFFF;border:0;
  padding:13px 20px;border-radius:3px;cursor:pointer;
  font-family:var(--df-display, "Archivo", system-ui, -apple-system, sans-serif);
  font-stretch:112%;font-weight:800;font-size:15px;
}
.dfei-submit:hover{background:var(--df-orange-lift, #E56F28)}
.dfei-submit:disabled{opacity:.6;cursor:default}

.dfei-dismiss{
  display:block;width:100%;margin-top:12px;
  background:none;border:0;text-align:center;
  font-size:13px;color:var(--df-slate, #67788A);cursor:pointer;
  text-decoration:underline;
}
.dfei-dismiss:hover{color:var(--df-ink, #16293C)}

@media(max-width:480px){
  .dfei-card{padding:24px 20px 20px}
  .dfei-headline{font-size:1.2rem}
}

/* v1.1.0 - phone field + post-signup state */
.dfei-phone{margin-top:10px}
.dfei-phone[hidden]{display:none}
.dfei-success{
  margin:0 0 16px;padding:14px 16px;
  border-left:3px solid var(--df-orange, #CF5B18);
  background:var(--df-paper-2, #EBE2CF);
  color:var(--df-ink, #16293C);
  font-size:15px;line-height:1.55;font-weight:600;
}