.zarinam-snapppay-box { position: relative; display: flex; align-items: center; gap: 15px; background-color: #EFF3F8; padding: 16px 20px; margin: 0; border-radius: 16px; font-family: inherit; border: none; } .zarinam-snapppay-badge { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; background-color: #00d170; border-radius: 50%; box-shadow: 0 0 0 rgba(0, 209, 112, 0.4); animation: zarinamPulse 2s infinite; } @keyframes zarinamPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 209, 112, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 209, 112, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 209, 112, 0); } } .zarinam-snapppay-badge-red { background-color: #ff3b3b; box-shadow: 0 0 0 rgba(255, 59, 59, 0.4); animation: zarinamPulseRed 2s infinite; } @keyframes zarinamPulseRed { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); } } .zarinam-snapppay-logo img { width: 50px; height: auto; display: block; } .zarinam-snapppay-text { display: flex; flex-direction: column; gap: 8px; } .zarinam-snapppay-title { font-size: 15px; font-weight: 600; color: #333; } .zarinam-snapppay-title-red { color: #ff3b3b; } .zarinam-snapppay-desc { font-size: 14px; color: #666; line-height: 1.6; } .zarinam-snapppay-price { font-weight: bold; color: #018EFA; } .zarinam-snapppay-disabled .zarinam-snapppay-desc { font-size: 13px; color: #777; } @media (max-width: 480px) { .zarinam-snapppay-box { padding: 12px 15px; gap: 12px; border-radius: 12px; } .zarinam-snapppay-logo img { width: 38px; } .zarinam-snapppay-title { font-size: 13px; } .zarinam-snapppay-desc { font-size: 12px; } .zarinam-snapppay-disabled .zarinam-snapppay-desc { font-size: 11px; } }