/* Lead Popup Pro — Frontend Styles v3 */
:root { --lpp-color: #6366f1; }

/* ── Overlay ─────────────────────────────────────── */
#lpp-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:99998;opacity:0;transition:opacity .3s;display:none;
  backdrop-filter:blur(4px);
}
#lpp-overlay.lpp-show{display:block;opacity:1}

/* ── Popup shell ─────────────────────────────────── */
#lpp-popup {
  position:fixed;z-index:99999;background:#fff;
  border-radius:18px;box-shadow:0 28px 64px rgba(0,0,0,.18);
  width:92%;max-width:400px;direction:rtl;overflow:hidden;
  opacity:0;transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.45,.64,1);
}
#lpp-popup.lpp-center      {top:50%;left:50%;transform:translate(-50%,-50%) scale(.88)}
#lpp-popup.lpp-center.lpp-show{transform:translate(-50%,-50%) scale(1);opacity:1}
#lpp-popup.lpp-bottom-right{bottom:20px;right:20px;max-width:360px;transform:translateY(30px)}
#lpp-popup.lpp-bottom-right.lpp-show{transform:translateY(0);opacity:1}
#lpp-popup.lpp-bottom-left {bottom:20px;left:20px;max-width:360px;transform:translateY(30px)}
#lpp-popup.lpp-bottom-left.lpp-show{transform:translateY(0);opacity:1}

/* ── Close button ────────────────────────────────── */
.lpp-close-btn{
  position:absolute;top:10px;left:10px;
  background:rgba(255,255,255,.22);border:none;color:#fff;
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .15s;line-height:1;z-index:1;
}
.lpp-close-btn:hover{background:rgba(255,255,255,.38)}
.lpp-close-dark{background:rgba(0,0,0,.07);color:#555}
.lpp-close-dark:hover{background:rgba(0,0,0,.14)}
.lpp-close-light{background:rgba(255,255,255,.15);color:#fff}

/* ════════════════════════════════════════════════════
   TEMPLATE 1 — Classic (gradient header)
════════════════════════════════════════════════════ */
.lpp-tpl-classic{
  background:linear-gradient(140deg,var(--lpp-color) 0%,color-mix(in srgb,var(--lpp-color),#000 30%) 100%);
  padding:28px 22px 22px;position:relative;text-align:center;
}
.lpp-tpl-classic::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════
   TEMPLATE 2 — Dark (deep night)
════════════════════════════════════════════════════ */
.lpp-tpl-dark{
  background:linear-gradient(135deg,#0f0f1a 0%,#1e1040 100%);
  padding:28px 22px 22px;position:relative;text-align:center;
  border-bottom:2px solid rgba(255,255,255,.08);
}
.lpp-tpl-dark-badge{
  display:inline-block;background:linear-gradient(90deg,#f59e0b,#ef4444);
  color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;
  margin-bottom:10px;font-family:Tahoma,sans-serif;
}
.lpp-popup-body-dark{background:#111827}
.lpp-popup-body-dark .lpp-form-group input{
  background:#1f2937;border-color:#374151;color:#f9fafb;
}
.lpp-popup-body-dark .lpp-form-group input::placeholder{color:#6b7280}
.lpp-popup-body-dark .lpp-form-group label{color:#9ca3af}
.lpp-popup-body-dark .lpp-privacy{color:#4b5563}

/* ════════════════════════════════════════════════════
   TEMPLATE 3 — Minimal (clean white)
════════════════════════════════════════════════════ */
.lpp-tpl-minimal{
  background:#fff;padding:28px 22px 16px;position:relative;text-align:center;
}
.lpp-tpl-minimal-line{
  width:48px;height:4px;border-radius:2px;margin:0 auto 16px;
}
.lpp-title-dark{color:#111827!important}
.lpp-desc-dark{color:#6b7280!important}

/* ════════════════════════════════════════════════════
   TEMPLATE 4 — Gradient (aurora)
════════════════════════════════════════════════════ */
.lpp-tpl-gradient{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 40%,#f093fb 100%);
  padding:28px 22px 22px;position:relative;text-align:center;
}
.lpp-tpl-gradient-stars{
  font-size:12px;color:rgba(255,255,255,.6);letter-spacing:4px;margin-bottom:10px;
  font-family:monospace;
}

/* ════════════════════════════════════════════════════
   TEMPLATE 5 — Card (light boxed)
════════════════════════════════════════════════════ */
.lpp-tpl-card{
  background:#fafafa;padding:32px 22px 16px;position:relative;text-align:center;
  border-bottom:1px solid #f3f4f6;
}
.lpp-tpl-card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;border:2px solid;
  font-size:26px;margin-bottom:12px;background:#fff;
}

/* ── Shared header text ──────────────────────────── */
.lpp-popup-icon  {font-size:32px;margin-bottom:8px;position:relative}
.lpp-popup-title {
  color:#fff;font-size:16px;font-weight:700;line-height:1.5;
  margin:0;font-family:Tahoma,'Vazir',sans-serif;position:relative;
}
.lpp-popup-desc  {
  color:rgba(255,255,255,.8);font-size:12px;margin:8px 0 0;
  line-height:1.7;position:relative;font-family:Tahoma,sans-serif;
}

/* ── Body / Form ─────────────────────────────────── */
.lpp-popup-body  {padding:20px 22px 22px}
.lpp-form-group  {margin-bottom:12px}
.lpp-form-group label{
  display:block;font-size:12px;color:#555;margin-bottom:5px;
  font-family:Tahoma,sans-serif;font-weight:600;
}
.lpp-form-group input{
  width:100%;padding:10px 13px;border:2px solid #e5e7eb;border-radius:10px;
  font-size:13px;font-family:Tahoma,sans-serif;direction:rtl;
  transition:border-color .2s;outline:none;box-sizing:border-box;
}
.lpp-form-group input:focus{border-color:var(--lpp-color)}
.lpp-form-group input.lpp-error{border-color:#ef4444}

.lpp-submit-btn{
  width:100%;padding:12px;
  background:var(--lpp-color);
  color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;
  font-family:Tahoma,sans-serif;cursor:pointer;transition:opacity .2s,transform .1s;
  margin-top:4px;
}
.lpp-submit-btn:hover{opacity:.9}
.lpp-submit-btn:active{transform:scale(.98)}
.lpp-submit-btn:disabled{opacity:.6;cursor:not-allowed}

.lpp-privacy{
  text-align:center;font-size:10px;color:#aaa;margin-top:8px;
  font-family:Tahoma,sans-serif;
}

/* ── Success state ───────────────────────────────── */
.lpp-success-box{text-align:center;padding:28px 20px;display:none}
.lpp-success-icon{font-size:44px;margin-bottom:10px}
.lpp-success-box h3{font-family:Tahoma,sans-serif;color:#1a1a2e;margin:0 0 6px;font-size:16px}
.lpp-success-box p {font-family:Tahoma,sans-serif;color:#666;font-size:12px}
.lpp-video-btn{
  display:inline-block;margin-top:14px;padding:10px 28px;
  border-radius:8px;text-decoration:none;color:#fff!important;
  font-family:Tahoma,sans-serif;font-size:13px;font-weight:700;
}

/* ── Telegram mode ───────────────────────────────── */
.lpp-telegram-wrap { text-align: center; padding: 4px 0 8px; }
.lpp-tg-desc {
  font-size: 13px; color: #555; font-family: Tahoma, sans-serif;
  line-height: 1.7; margin: 0 0 14px;
}
.lpp-tg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px;
  border-radius: 10px; color: #fff !important; text-decoration: none;
  font-size: 15px; font-weight: 700; font-family: Tahoma, sans-serif;
  transition: opacity .2s, transform .1s;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.lpp-tg-btn:hover  { opacity: .92; }
.lpp-tg-btn:active { transform: scale(.98); }

/* ── Telegram footer banner (زیر همه پاپ‌آپ‌ها) ── */
.lpp-tg-footer-banner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(90deg, #0088cc, #29a8e0);
  color: #fff !important; text-decoration: none;
  font-size: 11px; font-weight: 600; font-family: Tahoma, sans-serif;
  padding: 8px 16px; border-radius: 0 0 18px 18px;
  transition: opacity .15s;
  letter-spacing: .01em;
}
.lpp-tg-footer-banner:hover { opacity: .9; }
.lpp-tg-footer-banner svg { flex-shrink: 0; }