:root {
    --bg-dark: #0f0f1a;
    --bg-light: #1a1a2e;
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b5;
    --border-color: rgba(255, 255, 255, 0.1);
    --accent-gradient: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    --accent-glow: rgba(45, 130, 255, 0.6);
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-primary);
    margin: 0;
    /* Styles for the dynamic background gradients */
    transition: background 0.5s ease-in-out;

}

.biodata-builder { display: grid; grid-template-columns: 450px 1fr; height: 100vh; }
.editor-pane { padding: 30px; background-color: rgba(15, 15, 26, 0.8); backdrop-filter: blur(10px); overflow-y: auto; }
.tool-header h1 { margin: 0; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem; }
.tool-header { text-align: center; margin-bottom: 30px; }
.tool-header p { color: var(--text-secondary); }
.form-section { background: var(--bg-light); padding: 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.form-section h2 { margin-top: 0; font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: var(--text-secondary); }
input, select, textarea { width: 100%; padding: 12px; margin-bottom: 10px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-primary); font-size: 1rem; box-sizing: border-box; }
textarea { min-height: 80px; resize: vertical; }
#download-pdf-btn { width: 100%; padding: 15px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; color: #fff; background: var(--accent-gradient); cursor: pointer; transition: all 0.3s ease; }
#download-pdf-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); }
.template-fields { display: none; }
.template-fields.active { display: block; }
.preview-pane { background: transparent; padding: 40px; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; }
.biodata-template { display: none; width: 210mm; min-height: 296mm; background: #fff; color: #333; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: 'Lora', serif; }
.biodata-template.active { display: block; }
.detail-item { display: flex; margin-bottom: 12px; font-size: 1.1rem; }
.detail-item .label { width: 150px; font-weight: 700; color: #555; flex-shrink: 0; }
.detail-item .value { flex-grow: 1; }
.section-break { margin: 20px 0; border-bottom: 1px dashed #ccc; }
.profile-photo { width: 120px; height: 150px; border: 3px solid; padding: 3px; object-fit: cover; }
.profile-photo-container { display: none; }
.profile-photo-container.photo-visible { display: block; }

/* All Template Styles remain the same */
#hindu-preview { border: 10px solid #d2b48c; border-image: linear-gradient(45deg, #b8860b, #daa520) 1; }
#hindu-preview .symbol { font-size: 2rem; color: #d2b48c; text-align: center; padding: 20px 0 10px 0; }
#hindu-preview .name { text-align: center; color: #8B4513; font-size: 2.5rem; font-weight: 700; padding-bottom: 20px; border-bottom: 2px solid #d2b48c; }
#hindu-preview .biodata-body { padding: 20mm; display: flex; gap: 20px; }
#hindu-preview .profile-photo { border-color: #d2b48c; }
#hindu-preview .detail-item .label { color: #8B4513; }
#muslim-preview { border-top: 15px solid #006400; }
#muslim-preview .bismillah { font-style: italic; text-align: center; padding: 20px; font-size: 1.2rem; }
#muslim-preview .name { text-align: center; color: #006400; font-size: 2.5rem; font-weight: 700; }
#muslim-preview .biodata-body { padding: 20mm; display: flex; gap: 20px; }
#muslim-preview .profile-photo { border-color: #006400; }
#muslim-preview .detail-item .label { color: #006400; }
#sikh-preview, #christian-preview, #modern-preview, #buddhist-preview { padding: 20mm; }
#sikh-preview .symbol, #christian-preview .symbol, #buddhist-preview .symbol { font-size: 2rem; text-align: center; padding-bottom: 10px; }
#sikh-preview .symbol { color: #00599C; }
#christian-preview .symbol { color: #555; }
#buddhist-preview .symbol { color: #FF9933; }
#modern-preview h1, #sikh-preview h1, #christian-preview h1, #buddhist-preview h1 { text-align: center; font-size: 2.5rem; font-weight: 700; padding-bottom: 20px; border-bottom: 2px solid; }
#modern-preview h1, #modern-preview .detail-item .label { color: #2c3e50; }
#sikh-preview h1, #sikh-preview .detail-item .label { color: #00599C; }
#christian-preview h1, #christian-preview .detail-item .label { color: #555; }
#buddhist-preview h1, #buddhist-preview .detail-item .label { color: #FF9933; }
#modern-preview h1, #sikh-preview h1, #christian-preview h1, #buddhist-preview h1 { border-bottom-color: currentColor; }
#modern-preview .biodata-body, #sikh-preview .biodata-body, #christian-preview .biodata-body, #buddhist-preview .biodata-body { display: flex; gap: 20px; padding: 20px 0 0 0; }
#modern-preview .profile-photo, #sikh-preview .profile-photo, #christian-preview .profile-photo, #buddhist-preview .profile-photo { border-color: currentColor; }

/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
    .biodata-builder {
        grid-template-columns: 1fr;
        height: auto;
    }

    .editor-pane {
        /* CHANGED: Show the editor form first */
        order: 1;
    }

    .preview-pane {
        /* CHANGED: Show the preview panel second (at the bottom) */
        order: 2;
        padding: 20px 10px;
    }

    .biodata-template {
        transform: scale(0.9);
        transform-origin: top center;
        min-height: auto;
    }
    .pdf-watermark {
    position: absolute; /* Position it relative to the .biodata-template container */
    bottom: 5px;       /* 10px from the bottom */
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 5px;    /* Small text */
    color: #888888;     /* Light grey color */
    font-family: sans-serif;
}
    
    
}
/* Add this CSS to your stylesheet */

/* This makes the main container a reference for absolute positioning */
.biodata-template {
    position: relative;
    /* Ensure there's some padding at the bottom for the watermark to sit in */
    padding-bottom: 30px; 
}

/* This styles the watermark itself */
.pdf-watermark {
    position: absolute; /* Position it relative to the .biodata-template container */
    bottom: 10px;       /* 10px from the bottom */
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;    /* Small text */
    color: #888888;     /* Light grey color */
    font-family: sans-serif;
}