/* ═══════════════════════════════════════════════════════ SAMRA — Custom SweetAlert2 Theme | samra-alerts.css يتحمّل بعد sweetalert2 في الـ ═══════════════════════════════════════════════════════ */ /* ══ BACKDROP ══ backdrop-filter لازم يتطبق على .swal2-backdrop-show لأن SweetAlert بيرندر الـ overlay منفصل عن .swal2-container */ .swal2-backdrop-show { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* fallback لو الـ container اتحمل الكلاس */ .swal2-container.samra-backdrop { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* ══ POPUP BASE ══ */ .swal2-popup.samra-popup { font-family: Tajawal, "Segoe UI", sans-serif !important; border-radius: 20px !important; border: 1px solid rgba(200, 162, 122, 0.22) !important; padding: 2rem 1.75rem 1.75rem !important; position: relative !important; /* overflow: hidden شيلناها لأنها كانت بتقطع أيقونة الـ success */ } /* gold accent bar */ .swal2-popup.samra-popup::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #69452B 0%, #CF8855 50%, #69452B 100%) !important; border-radius: 20px 20px 0 0 !important; z-index: 1 !important; overflow: hidden !important; } /* ── dark (default) ── */ html[data-theme="dark"] .swal2-popup.samra-popup, html:not([data-theme]) .swal2-popup.samra-popup, body.admin-body .swal2-popup.samra-popup { background: #1C1C1C !important; color: #e2e8f0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(200, 162, 122, .1) !important; } /* ── light ── */ html[data-theme="light"] .swal2-popup.samra-popup { background: #ffffff !important; color: #1F2933 !important; box-shadow: 0 8px 40px rgba(105, 69, 43, .13), 0 0 0 1px rgba(200, 162, 122, .18) !important; } /* ══ ICON ══ بنستخدم scale بدل width/height لأن SweetAlert بيحسب positions الـ checkmark بناءً على الحجم الأصلي (~75px) تغيير الـ dimensions بيكسّر الـ absolute positioning الداخلي */ .swal2-popup.samra-popup .swal2-icon { transform: scale(0.78) !important; margin: -0.5rem auto 0.5rem !important; } /* success */ .swal2-popup.samra-popup .swal2-icon.swal2-success { border-color: rgba(76, 175, 80, .5) !important; background: rgba(76, 175, 80, .08) !important; } .swal2-popup.samra-popup .swal2-icon.swal2-success [class^=swal2-success-line] { background: #4caf50 !important; } .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(76, 175, 80, .25) !important; } .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-fix { background: transparent !important; } /* error */ .swal2-popup.samra-popup .swal2-icon.swal2-error { border-color: rgba(224, 82, 82, .5) !important; background: rgba(224, 82, 82, .08) !important; } .swal2-popup.samra-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background: #e05252 !important; } /* warning */ .swal2-popup.samra-popup .swal2-icon.swal2-warning { border-color: rgba(200, 162, 122, .5) !important; background: rgba(200, 162, 122, .1) !important; color: #C8A27A !important; } /* question */ .swal2-popup.samra-popup .swal2-icon.swal2-question { border-color: rgba(200, 162, 122, .5) !important; background: rgba(200, 162, 122, .1) !important; color: #C8A27A !important; } /* ══ TITLE ══ */ .swal2-popup.samra-popup .swal2-title { font-family: Tajawal, sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; padding: 0 !important; margin-bottom: .4rem !important; } html[data-theme="dark"] .swal2-popup.samra-popup .swal2-title, html:not([data-theme]) .swal2-popup.samra-popup .swal2-title, body.admin-body .swal2-popup.samra-popup .swal2-title { color: #eeeeee !important; } html[data-theme="light"] .swal2-popup.samra-popup .swal2-title { color: #1F2933 !important; } /* ══ CONTENT ══ */ .swal2-popup.samra-popup .swal2-html-container, .swal2-popup.samra-popup .swal2-content { font-family: Tajawal, sans-serif !important; font-size: .92rem !important; margin: 0 0 1.25rem !important; padding: 0 !important; line-height: 1.6 !important; } html[data-theme="dark"] .swal2-popup.samra-popup .swal2-html-container, html:not([data-theme]) .swal2-popup.samra-popup .swal2-html-container, body.admin-body .swal2-popup.samra-popup .swal2-html-container { color: rgba(255, 255, 255, .55) !important; } html[data-theme="light"] .swal2-popup.samra-popup .swal2-html-container { color: rgba(31, 41, 51, .55) !important; } /* ══ ACTIONS ══ */ .swal2-popup.samra-popup .swal2-actions { margin-top: 0 !important; gap: .6rem !important; width: 100% !important; justify-content: stretch !important; } /* ══ CONFIRM BUTTON ══ */ .swal2-popup.samra-popup .swal2-confirm { font-family: Tajawal, sans-serif !important; font-size: .9rem !important; font-weight: 700 !important; padding: .6rem 1.5rem !important; border-radius: 10px !important; box-shadow: none !important; flex: 1 !important; background: linear-gradient(231.82deg, #69452B 27.99%, #CF8855 102.97%) !important; border: none !important; color: #fff !important; transition: opacity .2s, transform .15s !important; } .swal2-popup.samra-popup .swal2-confirm:hover { opacity: .88 !important; transform: translateY(-1px) !important; background: linear-gradient(231.82deg, #69452B 27.99%, #CF8855 102.97%) !important; } .swal2-popup.samra-popup .swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(200, 162, 122, .4) !important; } /* danger */ .swal2-popup.samra-popup.samra-danger .swal2-confirm { background: linear-gradient(135deg, #c0392b 0%, #e05252 100%) !important; } .swal2-popup.samra-popup.samra-danger .swal2-confirm:hover { background: linear-gradient(135deg, #c0392b 0%, #e05252 100%) !important; } /* ══ CANCEL BUTTON ══ */ .swal2-popup.samra-popup .swal2-cancel { font-family: Tajawal, sans-serif !important; font-size: .9rem !important; font-weight: 600 !important; padding: .6rem 1.5rem !important; border-radius: 10px !important; box-shadow: none !important; flex: 1 !important; background: transparent !important; border: 1.5px solid rgba(200, 162, 122, .35) !important; color: #C8A27A !important; transition: background .2s, border-color .2s !important; } html[data-theme="light"] .swal2-popup.samra-popup .swal2-cancel { color: #9C6137 !important; border-color: rgba(156, 107, 46, .35) !important; } .swal2-popup.samra-popup .swal2-cancel:hover { background: rgba(200, 162, 122, .1) !important; border-color: rgba(200, 162, 122, .6) !important; } .swal2-popup.samra-popup .swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(200, 162, 122, .25) !important; } /* ══ TIMER PROGRESS BAR ══ */ .swal2-popup.samra-popup .swal2-timer-progress-bar-container { border-radius: 0 0 20px 20px !important; overflow: hidden !important; } .swal2-popup.samra-popup .swal2-timer-progress-bar { background: linear-gradient(90deg, #69452B, #CF8855) !important; height: 3px !important; } /* ══ LOADING SPINNER ══ */ .swal2-popup.samra-popup .swal2-loading { border-color: rgba(200, 162, 122, .2) !important; border-left-color: #C8A27A !important; } /* ══ RTL ══ */ [dir=rtl] .swal2-popup.samra-popup { direction: rtl !important; } /* ══ SUCCESS ICON FIX ══ */ html[data-theme="dark"] .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-fix, html:not([data-theme]) .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-fix, body.admin-body .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-fix { background: #1C1C1C !important; } html[data-theme="light"] .swal2-popup.samra-popup .swal2-icon.swal2-success .swal2-success-fix { background: #ffffff !important; }