.zarin-modal-bg{ position:fixed; inset:0; background:#00052a30; backdrop-filter:blur(1px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.25s; z-index:9999; } .zarin-modal-bg.active{ opacity:1; visibility:visible; } .zarin-modal{ background:#fff; width:92%; max-width:420px; border-radius:18px; padding:28px; text-align:center; transform:translateY(25px) scale(.95); transition:.25s; box-shadow:0 20px 60px rgba(0,0,0,.2); } .zarin-modal-bg.active .zarin-modal{ transform:translateY(0) scale(1); } .zarin-title{ font-size:20px; font-weight:600; margin-bottom:6px; } .zarin-desc{ font-size:14px; color:#666; margin-bottom:20px; } .zarin-desc a{ color:#6b5cff; text-decoration:none; font-weight:500; } .zarin-buttons{ display:flex; gap:10px; } .zarin-btn{ flex:1; padding:12px; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; } .zarin-add{ background:#111; color:#fff; } .zarin-cancel{ background:#f2f2f2; } .zarin-title { font-size: 19px; font-weight: 700; margin-bottom: 15px; margin-top: 10px; } .zarin-desc { background: #eff3f8; padding: 10px; font-weight: 400; font-size: 13px; color: #455067; border-radius: 8px; } .zarin-desc a { color: #0059ff; text-decoration: none; font-weight: 500; } button#zarinCancel { color: #455067; } button#zarinCancel:hover { background: #ececec!important; } button#zarinCancel { color: #455067; padding: 17px 10px; border-radius: 8px; } button#zarinAdd { background: #0064ff; box-shadow: 0 10px 20px rgba(30, 118, 255, 0.35); } .zarin-cancel-icon{ color:#455067 !important; } button#zarinAdd:hover { background: #0b60e3 !important; } button#zarinAdd:focus { background: #0b60e3 !important; }