@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700;800;900&display=swap');
*{ box-sizing:border-box; margin:0; padding:0; }

:root{
    --primary:#183b56; --secondary:#2f80a8; --light:#f4f8fb;
    --text:#182230; --muted:#667085; --border:#e4e9ee; --white:#ffffff;
}
html{ scroll-behavior:smooth; }
body{ font-family:Arial, "Segoe UI", sans-serif, "Noto Sans Sinhala"; background:#f4f8fb; color:var(--text); overflow-x:hidden; }
button, input, textarea{ font-family:inherit; }

/* BUILDER NAVBAR */
.builder-navbar{ width:100%; height:76px; padding:0 6%; display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid #edf0f3; position:sticky; top:0; z-index:1000; }
.builder-logo{ text-decoration:none; font-size:25px; font-weight:900; color:#183b56; }
.builder-logo span{ color:#2f80a8; }
.builder-nav-right{ display:flex; align-items:center; gap:12px; }

/* NEW WHATSAPP BUTTON */
.wa-btn { text-decoration: none; padding: 10px 15px; border-radius: 8px; background: #25D366; color: white; font-size: 13px; font-weight: 700; transition: .2s; }
.wa-btn:hover { background: #1ebc59; transform: translateY(-1px); }

.home-btn{ text-decoration:none; padding:10px 17px; border:1px solid #ccd6df; border-radius:8px; color:#183b56; background:#ffffff; font-size:14px; font-weight:700; transition:.2s; }
.home-btn:hover{ background:#f4f8fb; }
.help-btn{ border:0; background:#183b56; color:white; padding:11px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:.2s; }
.help-btn:hover{ background:#2f80a8; transform:translateY(-1px); }

/* APP & EDITOR */
.app{ width:100%; display:grid; grid-template-columns:minmax(320px,430px) 1fr; align-items:start; }
.editor{ min-height:calc(100vh - 76px); padding:25px; background:#f4f8fb; border-right:1px solid #dfe6eb; }

.form-section{ margin-bottom:20px; padding:22px; background:white; border:1px solid #e4e9ee; border-radius:14px; box-shadow:0 4px 15px rgba(24,59,86,.04); }
.form-section h2{ margin-bottom:18px; color:#183b56; font-size:18px; }
.editor label{ display:block; margin-top:14px; margin-bottom:7px; font-size:13px; font-weight:700; color:#344054; }
.editor small{ display:block; margin-top:7px; color:#98a2b3; font-size:11px; }

.editor input, .editor textarea{ width:100%; padding:11px 12px; border:1px solid #d9e1e7; border-radius:8px; background:white; color:#182230; outline:none; font-size:13px; transition:.2s; }
.editor textarea{ min-height:90px; resize:vertical; line-height:1.5; }
.editor input:focus, .editor textarea:focus{ border-color:#2f80a8; box-shadow:0 0 0 3px rgba(47,128,168,.10); }
.large-textarea{ min-height:130px !important; }

/* PHOTO */
.photo-upload{ display:flex; align-items:center; gap:15px; padding-bottom:10px; }
.photo-preview{ width:80px; height:80px; flex-shrink:0; border:2px dashed #cbd5dc; border-radius:12px; background:#f7fafc; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#98a2b3; font-size:12px; }
.photo-preview img{ width:100%; height:100%; object-fit:cover; display:none; }

/* RESULTS FORM INPUT BOXES */
.results-box{ margin-top:18px; border:1px solid #e4e9ee; border-radius:10px; overflow:hidden; }
.result-heading{ display:grid; grid-template-columns:1fr 100px; background:#f4f8fb; padding:10px; font-size:11px; font-weight:800; color:#475467; }
.result-row{ display:grid; grid-template-columns:1fr 100px; gap:8px; padding:8px; border-top:1px solid #edf0f3; }
.result-row input{ margin:0; }

/* DYNAMIC CARDS */
.dynamic-card{ position:relative; margin-bottom:15px; padding:18px; background:#f8fafc; border:1px solid #e2e8ee; border-radius:12px; }
.dynamic-card h4{ color:#183b56; margin-bottom:12px; padding-right:70px; }
.remove-btn{ position:absolute; top:13px; right:13px; border:0; background:#fff0f0; color:#b42318; padding:6px 9px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; }
.remove-btn:hover{ background:#ffe0e0; }
.add-btn{ width:100%; margin-top:5px; padding:12px; border:1px dashed #aebdc8; background:#f7fafc; color:#183b56; border-radius:8px; font-weight:800; cursor:pointer; transition:.2s; }
.add-btn:hover{ background:#edf6fa; border-color:#2f80a8; }

/* THEMES & COLORS */
.theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.theme-btn{ min-height:65px; display:flex; align-items:center; gap:10px; border:1px solid #e1e7ec; border-radius:10px; background:white; color:#475467; padding:10px; font-weight:700; cursor:pointer; transition:.2s; }
.theme-btn:hover{ border-color:#2f80a8; }
.theme-btn.active{ border-color:#183b56; color:#183b56; background:#f1f7fa; box-shadow:0 0 0 2px rgba(24,59,86,.08); }
.theme-icon{ width:34px; height:43px; border-radius:3px; border:1px solid #d9e1e7; display:block; overflow:hidden; position:relative; }
.modern-icon{ background:linear-gradient(to right, #183b56 0 30%, white 30% 100%); }
.classic-icon{ background:linear-gradient(to bottom, #183b56 0 20%, white 20% 100%); }
.minimal-icon{ background:white; }
.minimal-icon::before{ content:""; position:absolute; left:6px; top:8px; width:20px; height:3px; background:#333; box-shadow:0 9px 0 #d5d9dd, 0 18px 0 #e7eaed; }
.elegant-icon{ background:linear-gradient(to right, #493267 0 15%, white 15% 100%); }
.corporate-icon{ background:linear-gradient(to bottom, #183b56 0 12%, white 12% 100%); }
.creative-icon{ background:linear-gradient(135deg, #7a3e48 0 35%, white 35% 100%); }

.color-options{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.color-btn{ width:32px; height:32px; border-radius:50%; border:3px solid white; outline:1px solid #d5dce2; cursor:pointer; }
.color-btn.active{ outline:2px solid #183b56; }
.custom-color{ margin:0 !important; display:flex !important; align-items:center; gap:8px; color:#475467 !important; }
.custom-color input{ width:35px !important; height:35px; padding:2px; cursor:pointer; }
.download-btn{ width:100%; padding:15px; border:0; border-radius:10px; background:#183b56; color:white; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(24,59,86,.18); transition:.2s; }
.download-btn:hover{ background:#2f80a8; transform:translateY(-1px); }

/* PREVIEW AREA */
.preview-area{ min-height:calc(100vh - 76px); padding:45px; background:radial-gradient(circle at 20% 20%, rgba(47,128,168,.08), transparent 30%), #eef3f6; display:flex; justify-content:center; align-items:flex-start; overflow:auto; position:sticky; top:76px; height:calc(100vh - 76px); }

/* CV BASE */
.cv{ --cv-primary:var(--primary); width:794px; min-height:1123px; background:white; display:grid; grid-template-columns:220px 1fr; box-shadow:0 20px 60px rgba(0,0,0,.14); overflow:hidden; flex-shrink:0; }

/* SIDEBAR */
.sidebar{ background:var(--cv-primary); color:white; padding:30px 22px; }
.profile-photo{ width:120px; height:120px; margin:0 auto 28px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.12); border:4px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.profile-photo img{ width:100%; height:100%; object-fit:cover; }

.side-section{ margin-top:25px; }
.side-section.is-empty{ display:none; }
.side-section h3{ font-size:11px; letter-spacing:1.8px; color:rgba(255,255,255,.7); padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.25); margin-bottom:10px; }

/* GLOBALLY SET TEXT SIZE TO 10PX WHERE APPLICABLE */
.side-section p, .side-section li, .cv-section > p, .dynamic-preview p, .education-meta span, .preview-meta span { 
    font-size:11px; 
    overflow-wrap:anywhere; /* Prevents long URLs from breaking the layout */
    line-height: 1.6; 
}
#socialSideSection p { margin-bottom: 4px; } /* Adds slight gap between links */

/* LIST STYLES FOR SKILLS & LANGUAGES */
.side-section ul { padding-left: 15px; margin: 0; }
.side-section li { margin-bottom: 5px; }

/* CV CONTENT */
.cv-content{ padding:45px 40px 35px; min-width:0; }
.cv-name{ padding-bottom:25px; border-bottom:2px solid #e8edf0; }
.cv-name h1{ color:var(--cv-primary); font-size:34px; line-height:1.1; font-weight:900; word-break:break-word; }
.cv-name h2{ color:#667085; font-size:13px; margin-top:8px; letter-spacing:1px; font-weight:700; }

.cv-section{ margin-top:28px; }
.cv-section.is-empty{ display:none; }
.cv-section > h3{ color:var(--cv-primary); font-size:11.1px; letter-spacing:1.4px; padding-bottom:8px; border-bottom:2px solid #edf0f2; margin-bottom:14px; }
.cv-section > p{ white-space:pre-line; font-size: 11px; }

.dynamic-preview{ margin-bottom:18px; }
.dynamic-preview h4{ color:#182230; font-size:13px; margin-bottom:7px; }
.preview-meta{ display:flex; flex-wrap:wrap; gap:7px; }
.preview-meta span{ color:#667085; padding-right:8px; border-right:1px solid #d5dbe0; }
.preview-meta span:last-child{ border-right:0; }
.dynamic-preview p{ margin-top:8px; color:#475467; white-space:pre-line; }

/* EDUCATION */
.education-block h4{ font-size:13px; color:#182230; margin-bottom:7px; }
.education-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.education-meta span{ color:#667085; font-size:11px; }
.education-meta span:not(:last-child)::after{ content:" •"; margin-left:8px; }

/* NEW UNIFIED GRID FOR A/L & O/L (2 COLUMNS) */
.results-table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; margin-top: 5px; }
.result-table-item { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid #edf0f2; font-size: 11px; }
.result-table-item span:last-child { font-weight: 600; color: var(--cv-primary); }

/* FOOTER */
.cv-footer{ margin-top:45px; padding-top:20px; border-top:1px solid #e5e9ec; }
.declaration p{ font-size:11px; color:#1b1b1b; line-height:1.7; }
.signature-area{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-top:50px; }
.footer-item{ width:130px; text-align:center; }
.footer-line{ border-top:1px solid #667085; margin-bottom:7px; }
.footer-item span{ color:#667085; font-size:11px; }

.feedback-btn {
    display: inline-block;
    margin: 20px auto;
    padding: 12px 24px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
}

.feedback-btn:hover {
    opacity: 0.9;
}

/* THEMES */
.cv.modern{ grid-template-columns:220px 1fr; }
.cv.modern .sidebar{ background:var(--cv-primary); }

.cv.classic{ display:block; }
.cv.classic .sidebar{ min-height:auto; display:grid; grid-template-columns:150px 1fr; align-items:center; gap:25px; padding:25px 40px; }
.cv.classic .sidebar-brand{ grid-column:1 / -1; margin:0; }
.cv.classic .profile-photo{ margin:0; width:100px; height:100px; }
.cv.classic .side-section{ display:none; }
.cv.classic .cv-content{ padding:35px 55px; }
.cv.classic .cv-name{ text-align:center; }
.cv.classic .cv-name h1{ font-family:Georgia,serif; }
.cv.classic .cv-section > h3{ border-bottom:1px solid #999; }

.cv.minimal{ display:block; }
.cv.minimal .sidebar{ display:none; }
.cv.minimal .cv-content{ padding:65px 70px; }
.cv.minimal .cv-name{ border-bottom:0; padding-bottom:10px; }
.cv.minimal .cv-name h1{ font-size:40px; color:var(--cv-primary); }
.cv.minimal .cv-name h2{ color:#777; }
.cv.minimal .cv-section > h3{ color:var(--cv-primary); border-bottom:2px solid var(--cv-primary); }

.cv.elegant{ grid-template-columns:190px 1fr; }
.cv.elegant .sidebar{ background:linear-gradient(180deg, var(--cv-primary), color-mix(in srgb, var(--cv-primary) 75%, black)); }
.cv.elegant .cv-name h1{ font-family:Georgia,serif; font-weight:700; }
.cv.elegant .cv-section > h3{ font-family:Georgia,serif; letter-spacing:2px; }

.cv.corporate{ grid-template-columns:200px 1fr; }
.cv.corporate .sidebar{ background:var(--cv-primary); }
.cv.corporate .cv-name{ border-bottom:4px solid var(--cv-primary); }
.cv.corporate .cv-section > h3{ background:#f1f4f6; padding:8px; border-left:4px solid var(--cv-primary); border-bottom:0; }

.cv.creative{ grid-template-columns:205px 1fr; }
.cv.creative .sidebar{ background:linear-gradient(160deg, var(--cv-primary), color-mix(in srgb, var(--cv-primary) 70%, #2f80a8)); }
.cv.creative .cv-name{ border-bottom:0; }
.cv.creative .cv-name h1{ font-size:38px; }
.cv.creative .cv-section > h3{ display:inline-block; background:var(--cv-primary); color:white; padding:6px 10px; border:0; border-radius:4px; }

/* MODAL */
.modal{ display:none; position:fixed; inset:0; background:rgba(10,25,35,.65); z-index:5000; padding:25px; overflow-y:auto; }
.modal.open{ display:flex; align-items:center; justify-content:center; }
.modal-box{ width:100%; max-width:650px; background:white; border-radius:18px; padding:35px; position:relative; max-height:90vh; overflow-y:auto; box-shadow:0 25px 70px rgba(0,0,0,.25); }
.close-modal{ position:absolute; top:15px; right:18px; border:0; background:#f0f2f4; width:34px; height:34px; border-radius:50%; font-size:23px; cursor:pointer; }
.modal-icon{ font-size:35px; }
.modal-box h2{ margin-top:12px; color:#183b56; font-size:25px; line-height:1.35; }
.modal-intro{ margin-top:8px; color:#667085; line-height:1.6; }
.instruction{ display:flex; gap:15px; margin-top:20px; padding:16px; border:1px solid #e4e9ee; border-radius:10px; }
.instruction-number{ width:30px; height:30px; flex-shrink:0; background:#183b56; color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-weight:900; }
.instruction h3{ color:#183b56; font-size:14px; }
.instruction p{ margin-top:5px; color:#667085; line-height:1.6; font-size:13px; }
.tip{ margin-top:20px; padding:15px; border-radius:9px; background:#fff7df; color:#68551d; font-size:13px; line-height:1.6; }
.modal-builder-btn{ width:100%; margin-top:20px; border:0; padding:14px; background:#183b56; color:white; border-radius:8px; font-weight:800; cursor:pointer; }

/* PRINT */
/* PRINT */
@media print{
    /* ආයෙත් margin 0 කරමු (Edge-to-edge යන්න) */
    @page{ size:A4; margin: 0; } 
    
    html, body{ margin:0 !important; padding:0 !important; background:white !important; }
    body{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
    .builder-navbar, .editor{ display:none !important; }
    .preview-area{ display:block !important; padding:0 !important; margin:0 !important; background:white !important; min-height:0 !important; position:static !important; height:auto !important; }
    .cv{ width:210mm !important; min-height:297mm !important; margin:0 !important; box-shadow:none !important; }
    .modal{ display:none !important; }
    
    /* කොටස් මැදින් කැඩිලා ඊළඟ පිටුවට යන එක වළක්වන්න */
    .cv-section, .cv-footer, .dynamic-preview, .education-block {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* ඊළඟ පිටුවට යන කොටස් වලට උඩින් පොඩි හිස්තැනක් තියන්න (Breathing room) */
    .cv-section, .cv-footer {
        padding-top: 45px !important;
        margin-top: 15px !important;
    }
}

/* RESPONSIVE */
@media(max-width:1050px){
    .app{ grid-template-columns:1fr; }
    .editor{ border-right:0; border-bottom:1px solid #dfe6eb; }
    .preview-area{ padding:30px 15px; overflow-x:auto; position:static; height:auto; }
}
@media(max-width:600px){
    .builder-navbar{ height:68px; padding:0 18px; }
    .builder-logo{ font-size:21px; }
    .builder-nav-right{ gap:7px; }
    .wa-btn { padding:9px 10px; font-size:11px; }
    .home-btn{ padding:9px 10px; font-size:11px; }
    .help-btn{ padding:9px 10px; font-size:11px; }
    .editor{ padding:15px; }
    .form-section{ padding:17px; }
    .theme-grid{ grid-template-columns:1fr 1fr; }
    .preview-area{ padding:20px 10px; justify-content:flex-start; overflow-x:hidden; }
    .cv{ width:794px; transform:scale(0.43); transform-origin:top left; margin-bottom:-640px; }
    .modal{ padding:10px; }
    .modal-box{ padding:25px 18px; }
    .modal-box h2{ font-size:20px; }
}