/* ===================================================
   PaperPK CV Maker v2.0
   Fixes: layout, sidebar overflow, print/PDF blank,
          margins, padding, responsive breakpoints
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=Bebas+Neue&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ── RESET & TOKENS ── */
#paperpk-cv-app *, #paperpk-cv-app *::before, #paperpk-cv-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
:root {
  --pk-primary : #1a3c5e;
  --pk-accent  : #e8643a;
  --pk-teal    : #2a9d8f;
  --pk-light   : #f7f8fc;
  --pk-border  : #e2e6ef;
  --pk-text    : #2d3748;
  --pk-muted   : #718096;
  --pk-white   : #ffffff;
  --pk-radius  : 12px;
  --pk-shadow  : 0 4px 24px rgba(26,60,94,.10);
  --pk-shadow-lg: 0 12px 48px rgba(26,60,94,.16);
}

#paperpk-cv-app {
  font-family: 'DM Sans', sans-serif;
  color: var(--pk-text);
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ═══════════════════════════════════════════════════
   WIZARD SHELL
═══════════════════════════════════════════════════ */
.cv-wizard {
  background: var(--pk-white);
  border-radius: 20px;
  box-shadow: var(--pk-shadow-lg);
  border: 1px solid var(--pk-border);
}

/* ── HEADER / PROGRESS ── */
.wizard-header {
  background: linear-gradient(135deg, #1a3c5e 0%, #2a5298 100%);
  padding: 20px 28px 18px;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wizard-logo {
  color: #fff; font-size: 1rem;
  display: flex; align-items: center; gap: 8px; font-weight: 300;
}
.wizard-logo strong { font-weight: 700; }
.logo-icon { font-size: 1.25rem; color: var(--pk-accent); }

.wizard-steps {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  gap: 0;
}
.wizard-steps::-webkit-scrollbar { display: none; }

.step-item {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  opacity: .4; transition: opacity .3s;
}
.step-item.active, .step-item.done { opacity: 1; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.25);
  transition: all .3s;
}
.step-item.active .step-num { background: var(--pk-accent); border-color: var(--pk-accent); }
.step-item.done  .step-num  { background: var(--pk-teal);   border-color: var(--pk-teal); }
.step-label { color: rgba(255,255,255,.9); font-size: .68rem; font-weight: 500; white-space: nowrap; }
.step-line  { width: 18px; flex-shrink: 0; height: 1px; background: rgba(255,255,255,.2); margin: 0 3px; }

/* ── PANELS ── */
.wizard-panel { display: none; }
.wizard-panel.active { display: block; animation: panelIn .3s ease; }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.panel-inner { padding: 32px 36px 24px; }
.panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; color: var(--pk-primary); margin-bottom: 4px;
}
.panel-subtitle { color: var(--pk-muted); font-size: .87rem; margin-bottom: 22px; }

/* ── TEMPLATE GRID ── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.template-card {
  border: 2.5px solid var(--pk-border);
  border-radius: var(--pk-radius);
  padding: 13px 11px 11px;
  cursor: pointer; transition: all .22s;
  text-align: center; background: var(--pk-light);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.template-card input[type=radio] { display: none; }
.template-card:hover    { border-color: var(--pk-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232,100,58,.12); }
.template-card.selected { border-color: var(--pk-accent); background: #fff5f0; box-shadow: 0 0 0 3px rgba(232,100,58,.15); }

.template-thumb { width:100%; height:108px; border-radius:6px; overflow:hidden; border:1px solid var(--pk-border); background:#fff; }
.classic-thumb .tt-header     { height:22px; background:#1a3c5e; }
.classic-thumb .tt-body       { padding:7px 8px; }
.modern-thumb                 { display:flex; }
.modern-thumb .tt-sidebar     { width:34%; background:#2a9d8f; }
.modern-thumb .tt-content     { flex:1; padding:7px 8px; }
.minimal-thumb .tt-top-line   { height:3px; background:#222; }
.minimal-thumb .tt-body       { padding:9px 8px; }
.professional-thumb .tt-pro-header { height:18px; background:#1a3c5e; }
.professional-thumb .tt-two-col    { display:flex; gap:5px; padding:7px 8px; }
.professional-thumb .tt-left-col, .professional-thumb .tt-right-col { flex:1; }
.tt-line       { height:5px; border-radius:3px; background:#d0d6e2; margin-bottom:6px; }
.tt-line.long  { width:90%; } .tt-line.med { width:65%; } .tt-line.short { width:40%; }
.tt-divider    { height:1px; background:#d0d6e2; margin:7px 0; }
.template-name { font-weight:700; font-size:.9rem; color:var(--pk-primary); }
.template-desc { font-size:.71rem; color:var(--pk-muted); }

/* ── FORMS ── */
.form-grid { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.photo-upload-wrap { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:128px; }
.photo-preview {
  width:112px; height:132px;
  border:2px dashed var(--pk-border); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; position:relative; background:var(--pk-light);
  cursor:pointer; transition:border-color .2s;
  font-size:.71rem; color:var(--pk-muted); text-align:center; gap:5px;
}
.photo-preview:hover { border-color:var(--pk-accent); }
.photo-preview img   { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; display:none; }
.photo-placeholder   { pointer-events:none; }
.btn-upload {
  background:none; border:1.5px solid var(--pk-primary); color:var(--pk-primary);
  padding:6px 14px; border-radius:6px; font-size:.78rem;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s;
}
.btn-upload:hover { background:var(--pk-primary); color:#fff; }
.photo-hint { font-size:.68rem; color:var(--pk-muted); text-align:center; line-height:1.4; }

.form-fields { flex:1; min-width:280px; }
.form-row.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:.75rem; font-weight:600;
  color:var(--pk-primary); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.04em;
}
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--pk-border); border-radius:8px;
  font-size:.88rem; font-family:'DM Sans',sans-serif;
  color:var(--pk-text); background:var(--pk-light);
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color:var(--pk-accent);
  box-shadow:0 0 0 3px rgba(232,100,58,.11);
  background:#fff;
}
.form-group textarea { resize:vertical; min-height:88px; line-height:1.55; }

/* ── DYNAMIC ITEMS ── */
.dynamic-list { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.dynamic-item {
  border:1.5px solid var(--pk-border); border-radius:var(--pk-radius);
  padding:18px 20px; background:var(--pk-light); position:relative;
  animation:itemIn .28s ease;
}
@keyframes itemIn { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;} }
.dynamic-item .item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.dynamic-item .item-title  { font-weight:700; font-size:.93rem; color:var(--pk-primary); }
.btn-remove {
  background:none; border:1px solid #e53e3e; color:#e53e3e;
  font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:6px;
  cursor:pointer; transition:all .2s;
}
.btn-remove:hover { background:#fff0f0; }

/* ── SKILLS / LANGUAGES ── */
.skills-section { margin-bottom:10px; }
.section-sub-title {
  font-size:.9rem; font-weight:700; color:var(--pk-primary);
  margin-bottom:12px; padding-bottom:5px;
  border-bottom:2px solid var(--pk-accent); display:inline-block;
}
.skill-input-row { display:flex; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.skill-input-row input {
  flex:1; min-width:160px; padding:9px 13px;
  border:1.5px solid var(--pk-border); border-radius:8px;
  font-size:.87rem; font-family:'DM Sans',sans-serif;
  background:var(--pk-light); outline:none;
}
.skill-input-row input:focus { border-color:var(--pk-accent); background:#fff; }
.skill-input-row select {
  padding:9px 11px; border:1.5px solid var(--pk-border);
  border-radius:8px; font-size:.83rem;
  background:var(--pk-light); font-family:'DM Sans',sans-serif; outline:none; cursor:pointer;
}
.btn-add-inline {
  background:var(--pk-accent); color:#fff; border:none;
  padding:9px 18px; border-radius:8px; font-size:.85rem; font-weight:700;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s;
}
.btn-add-inline:hover { background:#d4562e; }

.tags-container { display:flex; flex-wrap:wrap; gap:7px; }
.skill-tag {
  background:var(--pk-primary); color:#fff;
  padding:5px 12px; border-radius:20px; font-size:.77rem;
  display:flex; align-items:center; gap:7px;
}
.skill-tag .tag-level {
  font-size:.65rem; opacity:.72;
  background:rgba(255,255,255,.18); padding:1px 6px; border-radius:10px;
}
.skill-tag .tag-remove { cursor:pointer; opacity:.65; font-size:.73rem; transition:opacity .2s; }
.skill-tag .tag-remove:hover { opacity:1; }
.lang-tag { background:var(--pk-teal); }

/* ── NAV BUTTONS ── */
.btn-add {
  background:none; border:2px dashed var(--pk-accent); color:var(--pk-accent);
  padding:10px 22px; border-radius:8px; font-size:.88rem; font-weight:700;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-add:hover { background:#fff5f0; }

.wizard-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 36px 26px;
  border-top:1px solid var(--pk-border);
}
.btn-nav {
  padding:11px 28px; border-radius:8px;
  font-size:.92rem; font-weight:700;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s; border:none;
}
.btn-nav.next { background:var(--pk-accent); color:#fff; margin-left:auto; }
.btn-nav.next:hover { background:#d4562e; }
.btn-nav.prev { background:var(--pk-light); color:var(--pk-primary); border:1.5px solid var(--pk-border); }
.btn-nav.prev:hover { background:var(--pk-border); }

/* ── PREVIEW PANEL ── */
.preview-controls {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:20px; flex-wrap:wrap; gap:10px;
}
.export-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.btn-export {
  padding:10px 20px; border-radius:8px;
  font-size:.86rem; font-weight:700;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  border:none; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.btn-export.pdf        { background:var(--pk-accent); color:#fff; }
.btn-export.pdf:hover  { background:#d4562e; }
.btn-export.print      { background:var(--pk-primary); color:#fff; }
.btn-export.print:hover{ background:#0f2848; }
.btn-export:disabled   { opacity:.6; cursor:wait; }

#cv-preview-container {
  border:1px solid var(--pk-border);
  border-radius:var(--pk-radius);
  overflow:hidden;
  box-shadow:var(--pk-shadow);
}

/* ── CV PAGE BASE ── */
.cv-page {
  width:100%;
  background:#fff;
  font-family:'Lato', Georgia, serif;
  font-size:13px; line-height:1.55; color:#333;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .panel-inner  { padding:22px 16px 16px; }
  .wizard-nav   { padding:12px 16px 20px; }
  .form-row.two-col { grid-template-columns:1fr; }
  .form-grid    { flex-direction:column; align-items:stretch; }
  .photo-upload-wrap { flex-direction:row; align-items:flex-start; gap:14px; }
}
@media (max-width: 480px) {
  .wizard-header { padding:16px 16px 14px; }
  .step-label { display:none; }
  .btn-nav { padding:10px 18px; font-size:.82rem; }
  .panel-title { font-size:1.35rem; }
}