.social-popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-popup-overlay.active {
opacity: 1;
visibility: visible;
} .social-popup {
background: #ffffff;
border-radius: 20px;
width: 100%;
max-width: 500px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
transform: translateY(30px) scale(0.95);
transition: transform 0.4s ease;
}
.social-popup-overlay.active .social-popup {
transform: translateY(0) scale(1);
} .popup-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px 30px;
text-align: center;
position: relative;
}
.popup-header h3 {
margin: 0 0 8px 0;
font-size: 26px;
font-weight: 700;
}
.popup-header p {
margin: 0;
opacity: 0.9;
font-size: 16px;
}
.popup-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.popup-close:hover {
background: rgba(255, 255, 255, 0.3);
} .popup-content {
padding: 30px;
} .social-icons-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.social-icon-link {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
border-radius: 12px;
text-decoration: none;
color: white;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.social-icon-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.social-icon-link i {
font-size: 20px;
margin-right: 12px;
}
.social-icon-link.facebook { background: #1877f2; }
.social-icon-link.twitter { background: #1da1f2; }
.social-icon-link.instagram { background: linear-gradient(45deg, #405de6, #833ab4, #c13584, #e1306c); }
.social-icon-link.youtube { background: #ff0000; } .confirmation-box {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid #667eea;
}
.confirm-checkbox {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-weight: 500;
color: #333;
user-select: none;
}
.confirm-checkbox input[type="checkbox"] {
width: 22px;
height: 22px;
accent-color: #10b981;
cursor: pointer;
} .popup-actions {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.popup-button {
flex: 1;
padding: 18px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.popup-button.confirm {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
}
.popup-button.confirm:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.popup-button.cancel {
background: #f1f5f9;
color: #475569;
}
.popup-button.cancel:hover {
background: #e2e8f0;
}
.popup-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.small-note {
text-align: center;
font-size: 14px;
color: #64748b;
margin: 0;
} .social-download-wrapper {
margin: 30px 0;
}
.social-download-container {
text-align: center;
padding: 40px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
max-width: 600px;
margin: 0 auto;
}
.download-title {
color: #1e293b;
font-size: 28px;
margin-bottom: 15px;
font-weight: 700;
}
.download-description {
color: #64748b;
font-size: 16px;
margin-bottom: 25px;
line-height: 1.6;
}
.social-download-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 18px 45px;
font-size: 18px;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.social-download-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.5);
}
.social-download-button:active {
transform: translateY(-1px);
}
.social-download-button.downloading {
background: #64748b;
cursor: not-allowed;
}
.social-download-button.downloading i {
animation: spin 1s linear infinite;
}
.file-info {
margin-top: 20px;
padding: 12px;
background: #f8fafc;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 14px;
} @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { 
opacity: 0;
transform: translateY(40px);
}
to { 
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 768px) {
.social-download-container {
padding: 30px 20px;
}
.download-title {
font-size: 24px;
}
.social-download-button {
padding: 16px 30px;
font-size: 16px;
width: 100%;
justify-content: center;
}
.popup-content {
padding: 25px 20px;
}
.social-icons-grid {
grid-template-columns: 1fr;
}
.popup-header {
padding: 20px 25px;
}
.popup-header h3 {
font-size: 22px;
}
.popup-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.social-download-container {
padding: 25px 15px;
}
.popup-header {
padding: 20px;
}
}