.zarin-file-wrap { background: #f1f5f9; border: 1px solid #dce1e7; border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .zarin-file-header { padding: 10px 12px; background: #e2e8f0; cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: space-between; } .zarin-file-body { padding: 12px; display: none; animation: fadeIn .3s ease; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } .zarin-file-body input { width: 100%; margin: 6px 0 10px 0; } .zarin-remove-btn { background: #d63031; color: white; padding: 6px 10px; border-radius: 6px; cursor: pointer; display: inline-block; margin-top: 5px; } #zarin-add-file-btn { background: #2563eb; color: #fff; padding: 10px 14px; border-radius: 8px; cursor: pointer; margin-top: 10px; display: inline-block; font-weight: 700; } .zarin-btn { display: inline-flex; align-items: center; gap: 8px; background: #09183F; color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: .25s; border: none; } .zarin-btn:hover { background: #0c2259; } .zarin-btn svg path, .zarin-btn svg rect { stroke: #fff !important; fill: #fff !important; } .zarin-btn-locked { background: #e5e7eb !important; color: #09183F !important; } .zarin-btn-locked svg path, .zarin-btn-locked svg rect { stroke: #09183F !important; fill: none !important; } .zarin-files-ui { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; font-family: 'Zarin-Font' !important; } .zarin-file-card { position: relative; display: flex; gap: 15px; background: #fff; border: 1px solid #e1e5eb; border-radius: 14px; padding: 14px; box-shadow: 0 4px 15px rgba(0,0,0,.05); align-items: center; overflow: hidden; } .zarin-card-locked::after { content: "برای دانلود وارد شوید یا محصول را خریداری کنید"; position: absolute; inset: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 14px; } .zarin-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; } .zarin-info { flex: 1; } .zarin-name { font-size: 15px; font-weight: 700; } .zarin-progress-box { width: 100%; height: 6px; background: #d1d5db; border-radius: 6px; overflow: hidden; margin-top: 8px; display: none; } .zarin-progress { width: 0%; height: 100%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .12s linear; } button.zarin-btn { flex: unset; width: 100px; } @media (max-width: 550px) { .zarin-thumb { display: none; } } button.zarin-btn:hover { background: #1c3166!important; } button.zarin-btn:focus { background: #1c3166!important; }