/* Leo CF7 Pop - Million Dollar SaaS Toast UI */

/* Container */
.leo-cf7-pop-container {
  position: fixed;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
  box-sizing: border-box;
}
.leo-cf7-pop-container[data-position="bottom-right"] { right: 20px; bottom: 20px; }
.leo-cf7-pop-container[data-position="bottom-left"]  { left: 20px; bottom: 20px; }
.leo-cf7-pop-container[data-position="top-right"]    { right: 20px; top: 20px; }
.leo-cf7-pop-container[data-position="top-center"]   { left: 50%; top: 20px; transform: translateX(-50%); }

/* Base Toast */
.leo-cf7-pop-toast {
  --leo-success: #16a34a;
  --leo-error: #dc2626;
  --leo-radius: 14px;
  --leo-text: #0f172a;

  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: var(--leo-radius);
  font: 600 14px/1.5 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  position: relative;
  opacity: 0;
  letter-spacing: 0.2px;
}

.leo-cf7-pop-toast[data-type="success"] { border-left: 4px solid var(--leo-success); }
.leo-cf7-pop-toast[data-type="error"]   { border-left: 4px solid var(--leo-error); }
.leo-cf7-pop-toast[data-type="success"] .leo-cf7-pop-toast__icon svg { fill: var(--leo-success); }
.leo-cf7-pop-toast[data-type="error"]   .leo-cf7-pop-toast__icon svg { fill: var(--leo-error); }

.leo-cf7-pop-toast__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
}

.leo-cf7-pop-toast__text {
  margin: 0;
  flex: 1;
  color: var(--leo-text);
}

.leo-cf7-pop-toast__close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  font-size: 18px;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.leo-cf7-pop-toast__close:hover { opacity: 1; }

/* ===================================================== */
/* =============== DISTINCT PREMIUM PRESETS ============ */
/* ===================================================== */

/* 1. GLASS PRO (macOS / Linear inspired) */
.leo-cf7-pop-toast--glass {
  --leo-text: #0f172a;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 10px 30px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* 2. MINIMAL STRIPE (clean bordered, flat SaaS UI) */
.leo-cf7-pop-toast--minimal {
  --leo-text: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left-width: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 3. NEON CYBERPUNK (dark + glow edge) */
.leo-cf7-pop-toast--neon {
  --leo-text: #ecfeff;
  background: radial-gradient(circle at top left, #111827, #050505);
  border: 1px solid rgba(34,211,238,0.6);
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.5),
    0 0 25px rgba(34,211,238,0.4),
    0 10px 40px rgba(0,0,0,0.7);
}

.leo-cf7-pop-toast--neon .leo-cf7-pop-toast__icon svg {
  filter: drop-shadow(0 0 6px currentColor);
}

/* 4. DARK ELEVATED (Notion / Vercel dark UI) */
.leo-cf7-pop-toast--dark-mode {
  --leo-text: #f8fafc;
  background: #0f172a;
  border: 1px solid #1e293b;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* 5. SOFT NEUMORPHIC (subtle soft depth) */
.leo-cf7-pop-toast--soft-shadow {
  --leo-text: #1e293b;
  background: #f1f5f9;
  border: none;
  box-shadow:
    8px 8px 20px rgba(148,163,184,0.25),
    -8px -8px 20px rgba(255,255,255,0.8);
}

/* 6. PREMIUM GRADIENT EDGE (high-end SaaS marketing feel) */
.leo-cf7-pop-toast--classic-clean {
  --leo-text: #0f172a;
  background: #ffffff;
  border: 1px solid transparent;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.leo-cf7-pop-toast--classic-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--leo-radius);
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ===================================================== */
/* Animations (UNCHANGED) */
/* ===================================================== */

.leo-cf7-pop-enter-slide { animation: leoInSlide 0.26s ease-out forwards; }
.leo-cf7-pop-enter-fade  { animation: leoInFade  0.22s ease-out forwards; }
.leo-cf7-pop-enter-scale { animation: leoInScale 0.20s ease-out forwards; }
.leo-cf7-pop-exit        { animation: leoOut     0.22s ease-in forwards; }

@keyframes leoInSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes leoInFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes leoInScale { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes leoOut     { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }

/* Mobile (UNCHANGED) */
@media (max-width: 640px) {
  .leo-cf7-pop-container { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 95%; max-width: none; }
  .leo-cf7-pop-toast { font-size: 13px; padding: 12px 12px 10px; }
}