.zarinfre-modal-overlay *, .zarinfre-modal-overlay *::before, .zarinfre-modal-overlay *::after { box-sizing: border-box; } .zarinfre-trigger-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; min-height: 46px; background-color: #f8f9fa; color: #333; border: 1px solid #eaeaea; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; direction: rtl; position: relative; } .zarinfre-trigger-btn:not(.loading):hover { background-color: #FFB900; color: #fff; border-color: #FFB900; } .zarinfre-loader { display: none; align-items: center; justify-content: center; gap: 5px; } .zarinfre-loader span { width: 6px; height: 6px; background-color: currentColor; border-radius: 50%; animation: zarinfre-bounce 1.4s infinite ease-in-out both; } .zarinfre-loader span:nth-child(1) { animation-delay: -0.32s; } .zarinfre-loader span:nth-child(2) { animation-delay: -0.16s; } @keyframes zarinfre-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .zarinfre-trigger-btn.loading .zarinfre-btn-text, .zarinfre-trigger-btn.loading .zarinfre-btn-icon { display: none; } .zarinfre-trigger-btn.loading .zarinfre-loader { display: flex; } .zarinfre-trigger-btn.loading { cursor: default; pointer-events: none; background-color: #f1f5f9; color: #64748b; } .zarinfre-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 999999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; direction: rtl; } .zarinfre-modal-overlay.active { opacity: 1; } .zarinfre-modal { background: #fff; width: 95%; max-width: 650px; border-radius: 16px; position: relative; transform: scale(0.95) translateY(20px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin: 15px; display: flex; flex-direction: column; max-height: 90vh; } .zarinfre-modal-overlay.active .zarinfre-modal { transform: scale(1) translateY(0); } .zarinfre-modal-close { position: absolute; top: 15px; left: 15px; background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: all 0.2s ease; z-index: 10; padding: 0; } .zarinfre-modal-close svg { width: 20px; height: 20px; display: block; } .zarinfre-modal-close:hover { background: #fee2e2; color: #ef4444; } .zarinfre-modal-content { padding: 30px; overflow-y: auto; } .zarinfre-modal-header { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-left: 40px; } .zarinfre-modal-icon img { width: 80px; height: 80px; border-radius: 14px; object-fit: contain; background-color: #f8fafc; border: 1px solid #e2e8f0; display: block; padding: 4px; } .zarinfre-modal-title-wrap h2 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.4; } .zarinfre-modal-cat { display: inline-flex; background: #f1f5f9; color: #64748b; font-size: 12px; padding: 4px 12px; border-radius: 20px; } .zarinfre-modal-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 25px; } .zarinfre-modal-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .zarinfre-modal-stat strong { font-size: 15px; color: #0f172a; } .zarinfre-modal-stat span { font-size: 12px; color: #64748b; } .zarinfre-modal-stat strong .mz-download-count { color: inherit; font-size: inherit; font-weight: inherit; } .zarinfre-modal-section { margin-bottom: 25px; position: relative; } .zarinfre-modal-section h3 { font-size: 15px; color: #1e293b; margin: 0 0 10px 0; position: relative; padding-right: 12px; font-weight: 700; } .zarinfre-modal-section h3::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; background: #FFB900; border-radius: 4px; } .zarinfre-modal-section p { font-size: 13.5px; color: #475569; line-height: 1.8; margin: 0; } .zarinfre-line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zarinfre-btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background-color: #8b5cf6; color: #fff; padding: 14px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s ease; } .zarinfre-btn-primary:hover { background-color: #7c3aed; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(139, 92, 246, 0.3); color: #fff; } @media (max-width: 600px) { .zarinfre-modal-content { padding: 20px; } .zarinfre-modal-header { padding-left: 0; margin-bottom: 20px; gap: 15px; } .zarinfre-modal-icon img { width: 70px; height: 70px; } .zarinfre-modal-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 400px) { .zarinfre-modal-header { flex-direction: column; text-align: center; } .zarinfre-modal-icon img { width: 90px; height: 90px; margin: 0 auto; } .zarinfre-modal-stats-grid { grid-template-columns: 1fr 1fr; } } .zarin-cat-badge { display: inline-flex; align-items: center; gap: 6px; background-color: #FFFDF0; color: #FFB900; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-family: inherit; font-weight: 600; text-decoration: none; transition: all 0.3s ease; direction: rtl; line-height: 1; border: 1px solid #FFF3C4; width: fit-content; } .zarin-cat-badge:hover { background-color: #FFF; color: #20c554; border-color: #20c554; } .zarin-cat-badge svg { width: 16px; height: 16px; display: block; } .maralarc-product-short-desc { font-size: 13px; line-height: 1.8em; color: #64748B; direction: rtl; text-align: right; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.8em * 2); }