/* ======= BASE STYLES ======= */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f4f6f9;
  color: #333;
}
header {
  text-align: center;
  padding: 14px 10px;
  background: #0a3d62;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.main-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}
.form-container, .preview-container {
  background: #fff;
  border-radius: 0;
  padding: 18px;
  flex: 1 1 400px;
  max-width: 600px;
  box-shadow: 0 6px 18px rgba(12,24,48,0.06);
}
h2 { 
  color: #0a3d62;
  font-size: 14px;
  margin-top: 18px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
input, textarea, select {
  width: 100%;
  padding: 8px;
  margin: 6px 0 10px;
  border: 1px solid #d0d7df;
  border-radius: 6px;
  font-size: 13px;
}
textarea { 
  height: 60px; 
  resize: vertical; 
}
.add-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.add-btn:hover {
   background: #005bb5; 
}

#preview {
  background: #fff;
  padding: 0;
  border-radius: 0;
  min-height: 420px;
  overflow: auto;
}

/* ===== TEMPLATE 1 ===== */
.template1-neutral {
  font-family: 'Poppins', sans-serif;
  color: #222;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  background: #fff;
  box-shadow: none;
}

.template1-neutral .top-section {
  display: flex;
  min-height: 600px;
}

/* LEFT SIDE */
.template1-neutral .left-side {
  width: 40%;
  background: #f4f4f4;
  color: #111;
  padding: 35px 25px;
  border-right: 1px solid #ddd;

}

.template1-neutral .left-top-border {
  border-top: 8px solid #111;
  margin-bottom: 25px;
}

.template1-neutral .photo-name {
  text-align: center;
}

.template1-neutral .left-side img {
  width: 130px;
  height: 130px;
  border-radius: 6px; /* square */
  border: 2px solid #999999;
  object-fit: cover;
  margin-bottom: 18px;
}

.template1-neutral .left-side h1 {
  font-size: 20px;
  margin: 5px 0;
}

.template1-neutral .left-side h2 {
  font-size: 14px;
  color: #555;
  margin-bottom: 25px;
}

.template1-neutral .left-side h3 {
  font-size: 14px;
  margin-top: 25px;
  border-bottom: 1px solid #999;
  padding-bottom: 4px;
  color: #000; /* black headings */
}

.template1-neutral .left-side p {
  font-size: 13px;
  margin: 6px 0;
}

.template1-neutral .left-side ul {
  font-size: 13px;
  padding-left: 15px;
  margin-top: 5px;
}

.template1-neutral .left-side i {
  margin-right: 6px;
  color: #000;
}

/* RIGHT SIDE */
.template1-neutral .right-side {
  width: 60%; /* reduced from 65% */
  background: #fff;
  padding: 45px 40px;
}

.template1-neutral .right-side h2 {

  font-size: 15px;
  font-weight: 700;
  color: #000;
  border-bottom: 2px solid #999;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.template1-neutral .right-side p, 
.template1-neutral .right-side li {
  font-size: 13px;
  line-height: 1.6;
  margin: 5px 0;
}

.template1-neutral .job, .template1-neutral .edu {
  margin-bottom: 15px;
}

.template1-neutral .job-date, .template1-neutral .edu-date {
  float: right;
  font-size: 12px;
  color: #555;
}

.template1-neutral ul {
  list-style-type: disc;
  margin-left: 20px;
}



/* Responsive layout */
@media (max-width: 768px) {
  .template1-neutral .top-section {
    flex-direction: column;
  }
  .template1-neutral .left-side, 
  .template1-neutral .right-side {
    width: 100%;
    padding: 25px;
  }
}

/* ===== TEMPLATE 2 ===== */
.template2 {
  max-width: 100%;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}
.template2 .top {
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start; border-bottom:1px solid #e6eef8; padding-bottom:10px;
}
.template2 .contacts h1 { font-size: 20px; margin:0; color:#0a3d62; font-weight:700; }
.template2 .contacts h2 { font-size: 16px; margin:2px 0; font-weight:500; }
.template2 .photo { width:120px; height:120px; border-radius:6px; border:2px solid #0059ff; object-fit:cover; }
.template2 .section { margin-top:6px; background:#fbfdff; border-radius:6px; padding:8px 10px; }
.template2 .section h2 { font-size:14px; padding:6px 10px; border-radius:4px; }
.template2 .section p, .template2 .section ul { font-size:13px; margin:0; padding-left:12px; }

/* ===== TEMPLATE 3 ===== */
.template3-colored {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

/* ===== TOP ROW ===== */
.template3-colored .top-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  border-bottom: 3px solid #eee;
}

.template3-colored .profile-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #0a3d62;
  border-radius: 6px; 
}

.template3-colored .name-section h1 {
  margin: 0;
  font-size: 24px;
  color: #0a3d62;
}

.template3-colored .name-section h2 {
  margin: 5px 0 0;
  font-size: 16px;
  color: #555;
}

/* ===== SECTIONS ===== */
.template3-colored .section {
  padding: 18px 25px;
  border-bottom: 1px solid #eee;
}

.template3-colored .section h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
}

/* colored heading bars */
.template3-colored .contact-bg h3 { background: #0a3d62; }
.template3-colored .summary-bg h3 { background: #0a3d62; }
.template3-colored .skills-bg h3 { background: #0a3d62; }
.template3-colored .experience-bg h3 { background: #0a3d62; }
.template3-colored .education-bg h3 { background: #0a3d62; }
.template3-colored .certificate-bg h3 { background: #0a3d62; }
.template3-colored .references-bg h3 { background: #0a3d62; }

.template3-colored p,
.template3-colored li {
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0;
}

.template3-colored ul {
  padding-left: 18px;
  margin: 6px 0;
}

/* ===== EXPERIENCE / EDUCATION ===== */
.template3-colored .job, .template3-colored .edu {
  margin-bottom: 10px;
}

.template3-colored .job h4, .template3-colored .edu h4 {
  font-size: 14px;
  margin: 0 0 3px;
  font-weight: 600;
  color: #000;
}

.template3-colored .job span, .template3-colored .edu span {
  float: right;
  font-size: 12px;
  color: #555;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .template3-colored .top-row {
    flex-direction: column;
    text-align: center;
  }
  .template3-colored .profile-photo {
    margin-bottom: 10px;
  }
}

/* ===== TEMPLATE 4 ===== */
.template4 {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.template4 .top { background:#0a3d62; color:#fff; padding:20px 25px; display:flex; justify-content:space-between; flex-wrap:wrap; }
.template4 .top .names h1 { font-size:20px; margin:0; }
.template4 .top .names h2 { font-size:16px; margin:2px 0; }
.template4 .top .contacts { font-size:12px; line-height:1.4; }
.template4 .section { background:#fff; padding:15px 20px; margin:0; }
.template4 .section h2 { font-size:13px; color:#0a3d62; margin-bottom:4px; }
.template4 .section hr { height:1px; background:#0a3d62; margin-bottom:6px; }

/* ===== TEMPLATE 5 ===== */
.template5 {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Header */
.template5 .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  background: #f7f7f7;
  border-bottom: 2px solid #ddd;
}

.template5 .header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: bold;
}

.template5 .header h2 {
  margin: 5px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  color: #555;
}

.template5 .header .date {
  font-size: 14px;
  color: #777;
}

/* Contact Info */
.template5 .contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 30px;
  font-size: 14px;
  color: #555;
  border-bottom: 2px solid #ddd;
}

.template5 .contacts div {
  flex: 1;
  min-width: 200px;
}

.template5 .contacts i {
  margin-right: 6px;
  color: #007bff;
}

/* Sections */
.template5 section {
  padding: 20px 30px;
  border-bottom: 2px solid #ddd;
}

.template5 section:last-child {
  border-bottom: none;
}

.template5 section h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
}

.template5 section h3 i {
  margin-right: 8px;
  color: #007bff;
}

.template5 section p {
  margin: 0;
  line-height: 1.6;
}

.template5 section ul {
  margin: 0;
  padding-left: 20px;
}

.template5 section ul li {
  margin-bottom: 6px;
}

/* Experience & Education */
.template5 .job, 
.template5 .edu {
  margin-bottom: 15px;
}

.template5 .job strong,
.template5 .edu strong {
  font-weight: 600;
}

.template5 .job span,
.template5 .edu span {
  float: right;
  font-size: 12px;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .template5 .header,
  .template5 .contacts,
  .template5 section {
    padding: 15px 20px;
  }
  .template5 .contacts div {
    flex: 100%;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .main-content { padding:14px; 
    flex-direction:column; 
  }
  .form-container, .preview-container { 
    max-width:100%;
  }
  .template1 .content, .template3, .template4, .template5 {
     flex-direction:column; 
  }
  .template3 .left, .template3 .right { 
    width:100%; 
    padding:15px; 
    text-align:center; 
  }
  .template3 .right .section { 
    text-align:left; 
  }
}