.dml-hidden { display: none !important; } .dml-hp-wrap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .dml-modal-overlay { position: fixed; inset: 0; background: rgba(20, 20, 30, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 99999; animation: dml-fade-in .15s ease; } @keyframes dml-fade-in { from { opacity: 0; } to { opacity: 1; } } .dml-modal-box { background: #fff; width: 360px; max-width: 92vw; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(15, 15, 25, .25); direction: rtl; /* TODO: vendor Vazirmatn WOFF2 into assets/fonts/ and @font-face it here — see +FONT rule. Currently relies on Vazirmatn being available site-wide (e.g. via a base theme) or falls back to system fonts. */ font-family: 'Vazirmatn', 'IRANSansX', Tahoma, Arial, sans-serif; box-sizing: border-box; animation: dml-pop-in .18s cubic-bezier(.2, .9, .3, 1); } .dml-modal-box * { box-sizing: border-box; } @keyframes dml-pop-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } } .dml-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #f1f1f4; } .dml-title { margin: 0; font-size: 16px; font-weight: 700; color: #23233a; } .dml-close { background: #f5f5f8; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; color: #7a7a85; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } /* ⚠ هاور فقط جایی معنا دارد که دستگاه واقعاً اشاره‌گر داشته باشد؛ صفحه‌ی لمسی رویدادِ hover ندارد ولی خیلی مرورگرهای موبایل روی تپ یک هاورِ «چسبنده» شبیه‌سازی می‌کنند که تا تپِ بعدی می‌ماند. همان شرطی که JS با matchMedia('(hover:hover)') می‌سنجد، اینجا. */ @media (hover: hover) and (pointer: fine) { .dml-close:hover { background: #ececf1; color: #23233a; } } .dml-modal-body { padding: 20px; } .dml-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: #f4f4f7; padding: 4px; border-radius: 12px; } .dml-mtab { flex: 1; padding: 9px 8px; border: none; border-radius: 9px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: #6c6c78; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .dml-mtab-active { background: #fff; color: var(--dml-primary); font-weight: 700; box-shadow: 0 2px 8px rgba(20, 20, 30, .08); } .dml-field-label { display: block; font-size: 12.5px; color: #5a5a64; margin: 0 0 7px; } .dml-input { width: 100%; box-sizing: border-box; height: 46px; border: 1.5px solid #e4e4ea; border-radius: 10px; padding: 0 14px; margin-bottom: 14px; font-size: 14px; background: #fbfbfd; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .dml-input:focus { border-color: var(--dml-primary); outline: none; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dml-primary) 12%, transparent); } .dml-boxes { display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px; width: 100%; } .dml-box { flex: 1 1 0; min-width: 0; width: auto; max-width: 48px; height: 50px; text-align: center; border: 1.5px solid #e4e4ea; border-radius: 10px; font-size: 18px; font-weight: 600; box-sizing: border-box; padding: 0; background: #fbfbfd; color: #23233a; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .dml-box:focus { border-color: var(--dml-primary); outline: none; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dml-primary) 12%, transparent); } .dml-error { color: #d33; font-size: 12px; min-height: 16px; margin-bottom: 8px; } .dml-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: var(--dml-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; position: relative; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; box-shadow: 0 6px 16px color-mix(in srgb, var(--dml-primary) 30%, transparent); } @media (hover: hover) and (pointer: fine) { .dml-btn:hover { filter: brightness(1.06); } } .dml-btn:active { transform: translateY(1px); } .dml-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; } .dml-loader { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: dml-spin .7s linear infinite; position: absolute; top: 50%; inset-inline-start: 16px; margin-top: -8.5px; } .dml-btn.dml-loading .dml-btn-text { visibility: hidden; } .dml-btn.dml-loading .dml-loader { display: inline-block; } @keyframes dml-spin { to { transform: rotate(360deg); } } .dml-otp-note { font-size: 13px; text-align: center; margin-bottom: 14px; color: #6c6c78; line-height: 1.7; } .dml-otp-row { display: flex; justify-content: space-between; margin-bottom: 14px; } /* .dml-link is now also used on