/* Background Style Options for Certificates and ID Cards */

/* ===== CERTIFICATE BACKGROUND STYLES ===== */

/* Style 1: Elegant Marble */
.certificate-bg-marble {
    background: 
        linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%),
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
    background-blend-mode: overlay;
}

/* Style 2: Royal Gold */
.certificate-bg-royal {
    background: 
        linear-gradient(135deg, #f4e4bc 0%, #f9f2e8 50%, #f4e4bc 100%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212, 175, 55, 0.1) 10px, rgba(212, 175, 55, 0.1) 20px);
}

/* Style 3: Modern Gradient */
.certificate-bg-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Style 4: Watercolor */
.certificate-bg-watercolor {
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 182, 193, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(173, 216, 230, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 224, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* Style 5: Geometric Pattern */
.certificate-bg-geometric {
    background: 
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23d4af37" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23d4af37" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="%23d4af37" opacity="0.1"/><circle cx="10" cy="50" r="1" fill="%23d4af37" opacity="0.1"/><circle cx="90" cy="50" r="1" fill="%23d4af37" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

/* Style 6: Professional Blue */
.certificate-bg-professional {
    background: 
        linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #e8f5e8 100%),
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(26, 79, 160, 0.05) 20px, rgba(26, 79, 160, 0.05) 40px);
}

/* Style 7: Warm Cream */
.certificate-bg-cream {
    background: 
        linear-gradient(135deg, #fff8e1 0%, #fffde7 50%, #fff8e1 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255, 152, 0, 0.1) 0%, transparent 50%);
}

/* Style 8: Elegant White */
.certificate-bg-elegant {
    background: 
        linear-gradient(135deg, #ffffff 0%, #fafafa 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="elegant" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M0 0h50v50H0z" fill="none"/><circle cx="25" cy="25" r="1" fill="%23d4af37" opacity="0.1"/><path d="M0 0l50 50M50 0l-50 50" stroke="%23d4af37" stroke-width="0.5" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23elegant)"/></svg>');
}

/* ===== ID CARD BACKGROUND STYLES ===== */

/* Style 1: Modern Blue Gradient */
.id-card-bg-modern-blue {
    background: linear-gradient(135deg, #dde2c1 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Style 2: Corporate Dark */
.id-card-bg-corporate {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c3e50 50%, #34495e 75%, #2c3e50 100%);
}

/* Style 3: Tech Purple */
.id-card-bg-tech {
    background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 25%, #9c27b0 50%, #7b1fa2 75%, #4a148c 100%);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
}

/* Style 4: Professional Green */
.id-card-bg-professional-green {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 25%, #388e3c 50%, #2e7d32 75%, #1b5e20 100%);
}

/* Style 5: Elegant Gold */
.id-card-bg-elegant-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 25%, #f7dc6f 50%, #f4d03f 75%, #d4af37 100%);
    background-size: 200% 200%;
    animation: gradientShift 12s ease infinite;
}

/* Style 6: Modern Red */
.id-card-bg-modern-red {
    background: linear-gradient(135deg, #c62828 0%, #d32f2f 25%, #e53935 50%, #d32f2f 75%, #c62828 100%);
}

/* Style 7: Ocean Blue */
.id-card-bg-ocean {
    background: linear-gradient(135deg, #0277bd 0%, #0288d1 25%, #03a9f4 50%, #0288d1 75%, #0277bd 100%);
    background-size: 250% 250%;
    animation: gradientShift 15s ease infinite;
}

/* Style 8: Sunset Orange */
.id-card-bg-sunset {
    background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 25%, #ffa000 50%, #ff8f00 75%, #ff6f00 100%);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

/* Style 9: Royal Gold */
.id-card-bg-royal-gold {
    background: 
        linear-gradient(135deg, #d4af37 0%, #f4d03f 25%, #f7dc6f 50%, #f4d03f 75%, #d4af37 100%),
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(212, 175, 55, 0.15) 8px, rgba(212, 175, 55, 0.15) 16px),
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 223, 0, 0.2) 0%, transparent 50%);
    background-blend-mode: overlay;
    background-size: 200% 200%, 16px 16px, 100% 100%, 100% 100%;
    animation: gradientShift 12s ease infinite;
}

/* ===== ANIMATIONS ===== */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== BACKGROUND SELECTOR STYLES ===== */

.background-selector {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.background-selector h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.background-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.bg-option {
    position: relative;
    height: 80px;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.bg-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.bg-option.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.bg-option-label {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
}

/* Certificate background options */
.bg-option.certificate-bg-marble { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.bg-option.certificate-bg-royal { background: linear-gradient(135deg, #f4e4bc 0%, #f9f2e8 50%, #f4e4bc 100%); }
.bg-option.certificate-bg-modern { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%); }
.bg-option.certificate-bg-watercolor { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); }
.bg-option.certificate-bg-geometric { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.bg-option.certificate-bg-professional { background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #e8f5e8 100%); }
.bg-option.certificate-bg-cream { background: linear-gradient(135deg, #fff8e1 0%, #fffde7 50%, #fff8e1 100%); }
.bg-option.certificate-bg-elegant { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); }

/* ID Card background options */
.bg-option.id-card-bg-modern-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%); }
.bg-option.id-card-bg-corporate { background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c3e50 50%, #34495e 75%, #2c3e50 100%); }
.bg-option.id-card-bg-tech { background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 25%, #9c27b0 50%, #7b1fa2 75%, #4a148c 100%); }
.bg-option.id-card-bg-professional-green { background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 25%, #388e3c 50%, #2e7d32 75%, #1b5e20 100%); }
.bg-option.id-card-bg-elegant-gold { background: linear-gradient(135deg, #d4af37 0%, #f4d03f 25%, #f7dc6f 50%, #f4d03f 75%, #d4af37 100%); }
.bg-option.id-card-bg-modern-red { background: linear-gradient(135deg, #c62828 0%, #d32f2f 25%, #e53935 50%, #d32f2f 75%, #c62828 100%); }
.bg-option.id-card-bg-ocean { background: linear-gradient(135deg, #0277bd 0%, #0288d1 25%, #03a9f4 50%, #0288d1 75%, #0277bd 100%); }
.bg-option.id-card-bg-sunset { background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 25%, #ffa000 50%, #ff8f00 75%, #ff6f00 100%); }
.bg-option.id-card-bg-royal-gold { background: linear-gradient(135deg, #d4af37 0%, #f4d03f 25%, #f7dc6f 50%, #f4d03f 75%, #d4af37 100%); }

/* Responsive design */
@media (max-width: 768px) {
    .background-options {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
    
    .bg-option {
        height: 60px;
    }
    
    .bg-option-label {
        font-size: 0.6rem;
        padding: 2px 4px;
    }
}