/* ── Admin ── */
.elpop-sl-admin { direction: rtl; }
.elpop-sl-admin .elpop-sl-section { background: #fff; border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
.elpop-sl-admin .elpop-sl-section h2 { margin-top: 0; font-size: 18px; }
.elpop-sl-admin ::-webkit-scrollbar { width: 10px; }
.elpop-sl-admin ::-webkit-scrollbar-track { background: #0a0e27; border-radius: 5px; }
.elpop-sl-admin ::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#a855f7,#00e5ff); border-radius: 5px; }
.elpop-sl-admin ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#9333ea,#06b6d4); }
.elpop-sl-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; margin-bottom: 15px; }
.elpop-sl-toggle input { width: 40px; height: 22px; }
.elpop-sl-field { margin: 10px 0; }
.elpop-sl-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; color: #555; }
.elpop-sl-callback { margin-top: 12px; padding: 10px; background: #f0f6ff; border-radius: 6px; font-size: 13px; }
.elpop-sl-callback code { display: block; margin-top: 4px; font-size: 12px; word-break: break-all; }

/* ── Popup Overlay ── */
.elpop-sl-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5,5,20,0.85); z-index: 99999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.elpop-sl-popup { border-radius: 20px; padding: 35px; width: 440px; max-width: 94vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); position: relative; direction: rtl; animation: elpopSlFadeIn 0.3s ease; }
@keyframes elpopSlFadeIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.elpop-sl-close { position: absolute; top: 12px; left: 16px; background: none; border: none; color: #888; font-size: 28px; cursor: pointer; line-height: 1; transition: 0.2s; z-index:2; }
.elpop-sl-close:hover { color: #fff; }
.elpop-sl-logo { text-align: center; margin-bottom: 20px; }
.elpop-sl-logo-icon { width: 60px; height: 60px; margin: 0 auto 10px; background: linear-gradient(135deg,#a855f7,#00e5ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.elpop-sl-logo h2 { color: #e8e8f0; margin: 0; font-size: 22px; }
.elpop-sl-logo p { color: #8888aa; margin: 6px 0 0; font-size: 14px; }

/* ── Skin: Modern (افتراضي / عتمة زرقاء بنفسجية) ── */
.elpop-sl-skin-modern { background: linear-gradient(145deg,#0f0f23,#1a1a35); border: 1px solid #2a2a5a; }
.elpop-sl-skin-modern .elpop-sl-input { background: #12122a; border-color: #2a2a5a; color: #e8e8f0; }
.elpop-sl-skin-modern .elpop-sl-email-tabs { background: #12122a; }

/* ── Skin: Classic (أبيض ناصع / زوايا حادة / ظل خفيف) ── */
.elpop-sl-skin-classic { background: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.elpop-sl-skin-classic .elpop-sl-logo h2 { color: #222; }
.elpop-sl-skin-classic .elpop-sl-logo p { color: #666; }
.elpop-sl-skin-classic .elpop-sl-input { background: #f5f5f5; border-color: #ddd; color: #333; }
.elpop-sl-skin-classic .elpop-sl-input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }
.elpop-sl-skin-classic .elpop-sl-email-tabs { background: #f0f0f0; }
.elpop-sl-skin-classic .elpop-sl-tab { color: #666; }
.elpop-sl-skin-classic .elpop-sl-tab.active { background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; }
.elpop-sl-skin-classic .elpop-sl-divider span { color: #999; }
.elpop-sl-skin-classic .elpop-sl-footer { color: #999; }
.elpop-sl-skin-classic .elpop-sl-close { color: #999; }
.elpop-sl-skin-classic .elpop-sl-close:hover { color: #333; }

/* ── Skin: Professional (كحلي غامق / خطوط ذهبية / فخامة) ── */
.elpop-sl-skin-professional { background: linear-gradient(135deg,#0c1322,#1a2335); border: 1px solid #c9a84c; box-shadow: 0 20px 60px rgba(201,168,76,0.15); }
.elpop-sl-skin-professional .elpop-sl-logo-icon { background: linear-gradient(135deg,#c9a84c,#f5d77d); }
.elpop-sl-skin-professional .elpop-sl-logo h2 { color: #f5d77d; }
.elpop-sl-skin-professional .elpop-sl-logo p { color: #8899bb; }
.elpop-sl-skin-professional .elpop-sl-input { background: #0d1522; border-color: #2a3a55; color: #d0d8e8; }
.elpop-sl-skin-professional .elpop-sl-input:focus { border-color: #c9a84c; box-shadow: 0 0 0 3px rgba(201,168,76,0.2); }
.elpop-sl-skin-professional .elpop-sl-submit { background: linear-gradient(135deg,#c9a84c,#a88520); }
.elpop-sl-skin-professional .elpop-sl-email-tabs { background: #0d1522; border: 1px solid #2a3a55; }
.elpop-sl-skin-professional .elpop-sl-tab.active { background: linear-gradient(135deg,#c9a84c33,#f5d77d22); color: #f5d77d; }
.elpop-sl-skin-professional .elpop-sl-divider span { color: #667799; }
.elpop-sl-skin-professional .elpop-sl-footer { color: #556688; }
.elpop-sl-skin-professional .elpop-sl-footer a { color: #c9a84c; }
.elpop-sl-skin-professional .elpop-sl-divider::before,
.elpop-sl-skin-professional .elpop-sl-divider::after { background: #2a3a55; }
.elpop-sl-skin-professional .elpop-sl-link { color: #c9a84c; }
.elpop-sl-skin-professional .elpop-sl-msg.success { background: #c9a84c22; color: #f5d77d; border-color: #c9a84c44; }

/* ── Skin: Minimal (شفاف / زجاجي / بلا حدود) ── */
.elpop-sl-skin-minimal { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.elpop-sl-skin-minimal .elpop-sl-logo h2 { color: #f0f0ff; }
.elpop-sl-skin-minimal .elpop-sl-logo p { color: rgba(255,255,255,0.5); }
.elpop-sl-skin-minimal .elpop-sl-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f0f0ff; }
.elpop-sl-skin-minimal .elpop-sl-input:focus { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }
.elpop-sl-skin-minimal .elpop-sl-email-tabs { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.elpop-sl-skin-minimal .elpop-sl-tab.active { background: rgba(168,85,247,0.15); color: #a855f7; }
.elpop-sl-skin-minimal .elpop-sl-divider span { color: rgba(255,255,255,0.3); }
.elpop-sl-skin-minimal .elpop-sl-divider::before,
.elpop-sl-skin-minimal .elpop-sl-divider::after { background: rgba(255,255,255,0.1); }
.elpop-sl-skin-minimal .elpop-sl-footer { color: rgba(255,255,255,0.3); }

/* ── Social Buttons ── */
.elpop-sl-social-btns { display: flex; flex-direction: column; gap: 10px; }
.elpop-sl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; color: #fff; font-family: inherit; }
.elpop-sl-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.elpop-sl-btn.google { background: #4285F4; }
.elpop-sl-btn.facebook { background: #1877F2; }
.elpop-sl-btn.twitter { background: #000; }
.elpop-sl-btn.youtube { background: #FF0000; }
.elpop-sl-btn.tiktok { background: linear-gradient(90deg,#00f2ea,#ff0050); }
.elpop-sl-btn.instagram { background: linear-gradient(135deg,#833AB4,#FD1D1D,#FCAF45); }

/* ── Divider ── */
.elpop-sl-divider { display: flex; align-items: center; margin: 20px 0; }
.elpop-sl-divider::before, .elpop-sl-divider::after { content: ''; flex: 1; height: 1px; background: #2a2a5a; }
.elpop-sl-divider span { padding: 0 15px; color: #8888aa; font-size: 13px; }

/* ── Tabs ── */
.elpop-sl-email-tabs { display: flex; gap: 0; margin-bottom: 15px; background: #12122a; border-radius: 10px; overflow: hidden; }
.elpop-sl-tab { flex: 1; padding: 12px; border: none; background: transparent; color: #888; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; font-family: inherit; }
.elpop-sl-tab.active { background: linear-gradient(135deg,#a855f733,#00e5ff22); color: #00e5ff; }
.elpop-sl-tab:hover { color: #fff; }

/* ── Forms ── */
.elpop-sl-form { display: flex; flex-direction: column; gap: 12px; }
.elpop-sl-input { padding: 14px 16px; border: 1px solid #2a2a5a; border-radius: 10px; background: #12122a; color: #e8e8f0; font-size: 15px; font-family: inherit; transition: 0.3s; }
.elpop-sl-input:focus { border-color: #a855f7; outline: none; box-shadow: 0 0 0 3px #a855f733; }
.elpop-sl-input::placeholder { color: #555577; }
.elpop-sl-submit { padding: 14px; border: none; border-radius: 12px; background: linear-gradient(135deg,#a855f7,#00e5ff); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.3s; font-family: inherit; }
.elpop-sl-submit:hover { filter: brightness(1.15); transform: translateY(-2px); }
.elpop-sl-link { background: none; border: none; color: #a855f7; cursor: pointer; font-size: 13px; font-family: inherit; text-decoration: underline; }
.elpop-sl-forgot { text-align: center; font-size: 13px; color: #a855f7; text-decoration: none; margin-top: 2px; }
.elpop-sl-forgot:hover { text-decoration: underline; }
.elpop-sl-footer { text-align: center; margin-top: 15px; font-size: 12px; color: #555577; }
.elpop-sl-footer a { color: #a855f7; text-decoration: none; }
.elpop-sl-msg { padding: 10px; border-radius: 8px; font-size: 13px; text-align: center; display: none; }
.elpop-sl-msg.success { display: block; background: #00e67622; color: #00e676; border: 1px solid #00e67644; }
.elpop-sl-msg.error { display: block; background: #ff174422; color: #ff1744; border: 1px solid #ff174444; }
.elpop-sl-msg.info { display: block; background: #00e5ff22; color: #00e5ff; border: 1px solid #00e5ff44; }

/* ── Header Buttons ── */
.elpop-sl-header-btns { display: inline-flex; gap: 6px; align-items: center; padding: 4px 8px; background: transparent; }
.elpop-sl-header-btn { padding: 5px 12px; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.elpop-sl-header-btn.login { background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; box-shadow: 0 4px 15px rgba(168,85,247,0.3); }
.elpop-sl-header-btn.register { background: linear-gradient(135deg,#00e5ff,#06b6d4); color: #000; box-shadow: 0 4px 15px rgba(0,229,255,0.3); }
.elpop-sl-header-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .elpop-sl-popup { padding: 25px 20px; }
  .elpop-sl-btn { padding: 12px; font-size: 14px; }
  .elpop-sl-header-btns { gap: 4px; padding: 2px 4px; }
  .elpop-sl-header-btn { padding: 4px 10px; font-size: 11px; }
}