/* ==========================================================================
   کامپوننت مستقل اشتراک‌گذاری و تولید QR Code (SmartQR Component)
   ========================================================================== */

.qr-comp-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.4s ease; font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
}
.qr-comp-overlay.show { opacity: 1; pointer-events: all; }

.qr-comp-modal {
    background: #ffffff; width: 90%; max-width: 380px; border-radius: 30px;
    padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); position: relative;
    border: 1px solid #D4AF37; transform: scale(0.9); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}
body.dark-mode .qr-comp-modal { background: #16211b; border-color: #1B5E20; }
.qr-comp-overlay.show .qr-comp-modal { transform: scale(1); }

.qr-comp-close {
    position: absolute; top: 15px; left: 20px; font-size: 1.5rem; color: #7f8c8d; cursor: pointer; transition: 0.3s;
}
.qr-comp-close:hover { color: #e74c3c; transform: rotate(90deg); }

.qr-comp-title { color: #1B5E20; margin-bottom: 10px; font-weight: 900; font-size: 1.3rem; }
body.dark-mode .qr-comp-title { color: #D4AF37; }

.qr-comp-desc { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 10px; }

.qr-comp-img-box {
    background: white; padding: 15px; border-radius: 20px; display: inline-block;
    margin: 20px 0; border: 2px solid rgba(0,0,0,0.1); box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.qr-comp-img-box img { display: block; margin: 0 auto; border-radius: 10px; }

.qr-comp-link {
    background: rgba(0,0,0,0.04); border: 1px dashed rgba(0,0,0,0.2);
    padding: 12px; border-radius: 12px; font-family: monospace; font-size: 0.85rem;
    color: #7f8c8d; margin-bottom: 20px; word-break: break-all; direction: ltr;
}
body.dark-mode .qr-comp-link { background: rgba(255,255,255,0.05); color: #a4b0be; border-color: rgba(255,255,255,0.2); }

.qr-comp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.qr-comp-btn {
    padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; border: none; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.3s; font-family: inherit;
}
.qr-btn-dl { background: rgba(41,128,185,0.1); color: #2980b9; }
.qr-btn-dl:hover { background: #2980b9; color: white; }
.qr-btn-copy { background: rgba(212,175,55,0.15); color: #b8860b; }
body.dark-mode .qr-btn-copy { color: #D4AF37; }
.qr-btn-copy:hover { background: #D4AF37; color: white; }
.qr-btn-share { background: #25D366; color: white; grid-column: span 2; box-shadow: 0 5px 15px rgba(37,211,102,0.3); }
.qr-btn-share:hover { background: #1ebe5d; transform: translateY(-2px); }