body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
}

/* Print Specific Styles */
@media print {
    @page { margin: 0; size: A4; }
    body { background: white; }
    .no-print { display: none !important; }
    .print-area { 
        display: block !important; 
        width: 100%; 
        height: 100%;
        overflow: visible;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        background: white !important;
    }
    .cv-preview {
        box-shadow: none !important;
        margin: 0 !important;
        transform: scale(1) !important;
        -webkit-print-color-adjust: exact; /* For Chrome, Safari, etc. */
        print-color-adjust: exact; /* Standard property */
    }
    .h-screen { height: auto !important; }
}

.cv-preview {
    width: 210mm;
    min-height: 297mm;
    background: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    transform-origin: top center;
}

/* Template Thumbnail Styles */
.template-card {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.template-card.active {
    border-color: #2563eb;
    background-color: #eff6ff;
    ring: 2px solid #2563eb;
}

/* Mini Layout Previews using CSS */
.mini-layout { height: 80px; width: 100%; position: relative; background: white; border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }

/* Modern Mini */
.mini-modern .side { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #1e293b; }
.mini-modern .main { position: absolute; right: 0; top: 0; bottom: 0; width: 70%; padding: 4px; }
.mini-modern .line { height: 2px; background: #e2e8f0; margin-bottom: 2px; }

/* Minimal Mini */
.mini-minimal { padding: 4px; text-align: center; }
.mini-minimal .header { border-bottom: 1px solid #333; margin-bottom: 4px; padding-bottom: 2px; }
.mini-minimal .line { height: 2px; background: #e2e8f0; margin-bottom: 2px; width: 80%; margin-left: auto; margin-right: auto; }

/* Corporate Mini */
.mini-corporate { padding: 4px; }
.mini-corporate .header { border-bottom: 2px solid #111; margin-bottom: 4px; text-align: center; }
.mini-corporate .line { height: 2px; background: #e2e8f0; margin-bottom: 2px; }

/* Creative Mini */
.mini-creative { padding: 0; }
.mini-creative .top { height: 15px; background: #4f46e5; width: 100%; }
.mini-creative .card { background: white; border: 1px solid #ddd; margin: -5px auto 4px; width: 80%; height: 15px; position: relative; z-index: 2; border-radius: 2px; }
.mini-creative .body { padding: 4px; }

/* Professional Mini (New) */
.mini-professional { padding: 0; }
.mini-professional .header { height: 20px; background: #059669; width: 100%; }
.mini-professional .body { padding: 4px; display: flex; gap: 4px; }
.mini-professional .col { flex: 1; }

/* Elegant Mini (New) */
.mini-elegant { padding: 4px; border: 1px solid #d4af37; margin: 2px; height: 74px; position: relative;}
.mini-elegant .header { text-align: center; margin-bottom: 4px; border-bottom: 1px solid #d4af37; }

/* Tech Savvy Mini */
.mini-tech { background: #1f2937; padding: 4px; }
.mini-tech .header { height: 4px; width: 40%; background: #3b82f6; margin-bottom: 4px; }
.mini-tech .line { background: #4b5563; }

/* Compact Info Mini */
.mini-compact .main { position: absolute; left: 0; top: 0; bottom: 0; width: 65%; padding: 4px; }
.mini-compact .side { position: absolute; right: 0; top: 0; bottom: 0; width: 35%; background: #f9fafb; padding: 4px; border-left: 1px solid #e5e7eb; }
.mini-compact .line { height: 2px; background: #e2e8f0; margin-bottom: 2px; }

/* Monochrome Mini */
.mini-monochrome { padding: 4px; }
.mini-monochrome .line { margin-left: auto; margin-right: auto; }

/* Video Aspect Ratio Helper */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}