:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.78);
  --text: #172033;
  --muted: #607089;
  --line: rgba(23, 32, 51, 0.08);
  --primary: #4d7dff;
  --primary-dark: #3055d4;
  --accent: #79c8ff;
  --shadow: 0 18px 60px rgba(25, 45, 86, 0.1);
  --shadow-soft: 0 12px 30px rgba(25, 45, 86, 0.07);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --builder-width: 1440px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(121, 200, 255, 0.18), transparent 25%),
    radial-gradient(circle at top right, rgba(77, 125, 255, 0.12), transparent 22%),
    var(--bg);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.builder-shell {
  width: min(calc(100% - 2rem), var(--builder-width));
  margin: 0 auto;
}

.builder-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  background: rgba(244, 247, 251, 0.72);
  border-bottom: 1px solid rgba(23, 32, 51, 0.05);
}

.builder-header__inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.builder-brand img {
  width: clamp(190px, 16vw, 260px);
  height: auto;
  object-fit: contain;
}

.builder-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0 2.5rem;
  align-items: start;
}

.builder-panel,
.preview-panel {
  min-width: 0;
}

.panel-card {
  background: var(--surface-soft);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}

.builder-panel {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 102px;
  align-self: start;
  max-height: calc(100vh - 118px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.35rem;
  scrollbar-gutter: stable;
}

.intro-card h1,
.section-top h2,
.preview-topbar h2 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.intro-card h1 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin-bottom: 0.9rem;
}

.intro-card p,
.intro-note,
.muted-text,
label span,
.cv-meta,
.cv-section p,
.cv-list,
.cv-timeline-item p,
.cv-sidebar .cv-meta-list,
.empty-state {
  color: var(--muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--primary-dark);
  background: rgba(77, 125, 255, 0.12);
  margin-bottom: 1rem;
}

.eyebrow--soft {
  margin-bottom: 0.7rem;
}

.form-stack {
  display: grid;
  gap: 1rem;
}

.form-section h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.section-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-grid {
  display: grid;
  gap: 0.95rem;
}

.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personal-grid > * {
  align-self: start;
}

.personal-grid .photo-upload-field {
  grid-column: 2;
  align-self: start;
}

.photo-upload-field {
  display: grid;
  gap: 0.65rem;
  align-self: start;
}

.photo-dropzone {
  min-height: 124px;
  border: 1.5px dashed rgba(77, 125, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.photo-dropzone strong {
  display: block;
  margin-bottom: 0.25rem;
}

.photo-dropzone small {
  color: var(--muted);
}

.photo-dropzone:hover,
.photo-dropzone:focus-visible,
.photo-dropzone.is-dragover {
  border-color: rgba(77, 125, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(77, 125, 255, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.photo-upload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.photo-upload-meta span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

label {
  display: grid;
  gap: 0.45rem;
}

label span {
  font-size: 0.95rem;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 0.95rem 1rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  border-color: rgba(77, 125, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(77, 125, 255, 0.1);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.builder-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.builder-button:hover,
.builder-button:focus-visible,
.template-chip:hover,
.template-chip:focus-visible,
.remove-item:hover,
.remove-item:focus-visible {
  transform: translateY(-1px);
}

.builder-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #6b9bff);
  box-shadow: 0 12px 26px rgba(77, 125, 255, 0.28);
}

.builder-button--ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}

.builder-button--pdf {
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(77, 125, 255, 0.22);
  box-shadow: 0 8px 18px rgba(77, 125, 255, 0.08);
}

.small-button {
  min-height: 40px;
  padding-inline: 0.9rem;
}

.template-switch {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.template-chip,
.remove-item {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.9rem;
}

.template-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}


.form-bottom-actions {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}

.back-to-top-button {
  width: 100%;
  min-height: 50px;
}

.dynamic-list {
  display: grid;
  gap: 0.9rem;
}

.item-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

.item-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.item-card__title {
  margin: 0;
  font-size: 1rem;
}

.preview-panel {
  --preview-scale: 0.72;
  --page-width: 794px;
  --page-height: 1122px;
  position: sticky;
  top: 102px;
  align-self: start;
  justify-self: start;
  width: calc((var(--page-width) * var(--preview-scale)) + 18px);
  max-width: 100%;
  max-height: calc(100vh - 118px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.04rem;
  scrollbar-gutter: stable;
}

.cv-preview-pages {
  display: grid;
  gap: 0.02rem;
  justify-content: start;
}

.cv-page-frame {
  width: calc(var(--page-width) * var(--preview-scale));
  height: calc(var(--page-height) * var(--preview-scale));
  min-height: calc(var(--page-height) * var(--preview-scale));
  overflow: hidden;
}

.cv-page {
  width: var(--page-width);
  height: var(--page-height);
  min-height: var(--page-height);
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  overflow: hidden;
  margin: 0;
  position: relative;
}


.cv-page.is-measure {
  transform: none;
  box-shadow: none;
}

.cv-page.is-measure .cv-page-number {
  display: none;
}

.cv-paper {
  background: #fff;
  border: 1px solid rgba(23, 32, 51, 0.08);
  box-shadow: var(--shadow);
  border-radius: 28px;
  overflow: hidden;
  min-height: 1122px;
}

.cv-paper.template-classic {
  padding: 2rem;
}

.cv-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}

.cv-header-main {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding-left: 1rem;
}

.cv-header-main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 5px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.cv-header-main--no-title::before {
  height: 66px;
}

.cv-name {
  margin: 0;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.cv-title {
  margin: 0;
  margin-left: 0.08rem;
  color: var(--primary-dark);
  font-size: 1.1rem;
  font-weight: 700;
}

.cv-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cv-meta-list li {
  border-radius: 999px;
  background: rgba(77, 125, 255, 0.08);
  color: var(--text);
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.cv-photo,
.cv-photo-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 26px;
  flex-shrink: 0;
}

.cv-photo {
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(23, 32, 51, 0.08);
}

.cv-photo-placeholder {
  background: linear-gradient(135deg, rgba(77, 125, 255, 0.16), rgba(121, 200, 255, 0.24));
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  font-size: 0.92rem;
  font-weight: 700;
}

.cv-body {
  display: grid;
  gap: 0.82rem;
  padding-top: 0.95rem;
}

.cv-section {
  display: grid;
  gap: 0.46rem;
}

.cv-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.04rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cv-section-title::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.cv-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.cv-experience-pair,
.cv-item-copy {
  min-width: 0;
}

.cv-paragraph,
.cv-list,
.cv-timeline-item p,
.cv-item-title,
.cv-item-subtitle,
.cv-item-period,
.cv-meta-list li,
.cv-pill-list li {
  margin: 0;
  line-height: 1.62;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cv-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.cv-timeline {
  display: grid;
  gap: 0.8rem;
}

.cv-timeline-item {
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 18px;
  padding: 0.68rem;
}

.cv-item-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.cv-item-head > * {
  min-width: 0;
}

.cv-item-title {
  margin: 0;
  font-size: 1rem;
}

.cv-item-subtitle,
.cv-item-period {
  color: var(--muted);
  font-size: 0.94rem;
}

.cv-item-subtitle {
  font-weight: 600;
}

.cv-list {
  padding-left: 1.25rem;
}

.cv-list li + li {
  margin-top: 0.35rem;
}

.cv-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cv-pill-list li {
  padding: 0.52rem 0.82rem;
  border-radius: 999px;
  background: rgba(77, 125, 255, 0.08);
  font-weight: 600;
}

.cv-paper.template-sidebar {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
}

.cv-sidebar {
  background: linear-gradient(180deg, #eaf2ff 0%, #f4f8ff 100%);
  padding: 1.85rem 1.4rem;
  border-right: 1px solid rgba(23, 32, 51, 0.08);
  display: grid;
  align-content: start;
  gap: 1.15rem;
}

.cv-sidebar .cv-name {
  font-size: 1.9rem;
}

.cv-sidebar-main {
  padding: 2rem;
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 0.95rem;
}


.cv-project-item {
  padding: 0.56rem 0.68rem;
}

.cv-project-item .cv-item-head {
  margin-bottom: 0.18rem;
}

.cv-project-item .cv-list li + li {
  margin-top: 0.18rem;
}

.template-sidebar .cv-sidebar-main .cv-section {
  gap: 0.42rem;
}

.template-sidebar .cv-sidebar-main .cv-timeline-item {
  padding: 0.62rem 0.68rem;
}

.cv-sidebar .cv-meta-list {
  display: grid;
  gap: 0.52rem;
}

.cv-sidebar .cv-meta-list li {
  background: rgba(255, 255, 255, 0.72);
  padding-block: 0.48rem;
}

.empty-state {
  padding: 1rem;
  border: 1px dashed rgba(23, 32, 51, 0.16);
  border-radius: 16px;
  font-style: italic;
}



.cv-measure-sandbox {
  position: absolute;
  left: -99999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  width: var(--page-width, 794px);
  height: auto;
  overflow: hidden;
  z-index: -1;
}

.cv-page-number {
  position: absolute;
  right: 2rem;
  bottom: 1.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.cv-page.template-classic .cv-body,
.cv-sidebar-main {
  padding-bottom: 1.4rem;
}


@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .builder-header,
  .builder-panel {
    display: none !important;
  }

  .builder-shell,
  .builder-layout,
  .preview-panel,
  .cv-preview-pages {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    gap: 0;
  }

  .preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .cv-page-frame {
    width: auto;
    height: auto;
    min-height: auto;
    overflow: visible;
    break-after: auto;
    page-break-after: auto;
  }

  .cv-page-frame:not(:last-child) {
    break-after: page;
    page-break-after: always;
  }

  .cv-page {
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cv-photo-placeholder {
    display: none !important;
  }

  .cv-page-number {
    right: 12mm;
    bottom: 10mm;
  }
}


.intro-note {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(77, 125, 255, 0.08);
  border: 1px solid rgba(77, 125, 255, 0.12);
  line-height: 1.65;
}

#cvPreviewExport,
#cvPreviewExport .cv-page-frame,
#cvPreviewExport .cv-page {
  break-after: auto !important;
  page-break-after: auto !important;
}

/* Header CV template */
.cv-paper.template-header {
  padding: 0;
}

.template-header .cv-body {
  padding: 1.35rem 2rem 1.9rem;
}

.cv-header-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(210px, 0.8fr);
  align-items: center;
  gap: 1.35rem;
  padding: 1.7rem 2rem;
  background: linear-gradient(135deg, #eaf2ff 0%, #f7fbff 100%);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}

.cv-header-band .cv-photo {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(25, 45, 86, 0.10);
}

.cv-header-band__photo:empty {
  display: none;
}

.cv-header-band .cv-name {
  font-size: 2.45rem;
}

.cv-header-band .cv-title {
  margin-top: 0.45rem;
}

.cv-header-band__meta {
  justify-content: flex-end;
}

.cv-header-band__meta li {
  background: rgba(255, 255, 255, 0.76);
}

.cv-header-info-grid {
  gap: 0.95rem;
}

.template-header .cv-timeline-item {
  padding: 0.64rem 0.72rem;
}

.template-header .cv-project-item {
  padding: 0.54rem 0.66rem;
}

.template-header .cv-section {
  gap: 0.42rem;
}

@media (max-width: 900px) {
  .cv-header-band {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cv-header-band__meta {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .template-header .cv-body,
  .cv-header-band {
    padding: 1.25rem;
  }
}

/* Stability fixes: keep Header compact and prevent Sidebar content from disappearing */
.cv-sidebar {
  overflow: hidden;
}

.template-sidebar .cv-sidebar .cv-section {
  gap: 0.38rem;
}

.template-sidebar .cv-sidebar .cv-section-title {
  font-size: 0.94rem;
}

.template-sidebar .cv-sidebar .cv-paragraph,
.template-sidebar .cv-sidebar .cv-list,
.template-sidebar .cv-sidebar .cv-pill-list li,
.template-sidebar .cv-sidebar .cv-meta-list li {
  font-size: 0.86rem;
  line-height: 1.48;
}

.cv-header-band {
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, 0.72fr);
  gap: 1rem;
  padding: 1.25rem 1.75rem;
}

.cv-header-band .cv-photo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
}

.cv-header-band .cv-name {
  font-size: 2.05rem;
}

.cv-header-band .cv-title {
  margin-top: 0.25rem;
  font-size: 1rem;
}

.cv-header-band__meta {
  gap: 0.45rem;
}

.cv-header-band__meta li {
  padding: 0.42rem 0.68rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.template-header .cv-body {
  padding: 1rem 1.75rem 1.65rem;
  gap: 0.7rem;
}


/* Template chooser: keep text on top and buttons underneath, so extra templates fit cleanly */
.template-panel .template-panel__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.template-panel .template-switch {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.template-panel .template-chip {
  width: 100%;
  min-width: 0;
  padding-inline: 0.75rem;
}

.pro-template-note {
  margin-top: -0.35rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary-dark);
}

@media (max-width: 640px) {
  .template-panel .template-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Pro templates: Balans & Studio — stable, image-free A4 templates */
.template-chip--pro {
  position: relative;
  overflow: hidden;
}

.template-chip--pro::after {
  content: "PRO";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.38rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
  background: rgba(77, 125, 255, 0.10);
}

.template-chip--pro.is-active::after {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.cv-paper.template-balance,
.cv-paper.template-studio {
  border-radius: 28px;
  background: #ffffff;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, 0.08);
  box-shadow: var(--shadow);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Balans: header + middle divider + bottom bar */
.cv-paper.template-balance {
  padding: 0;
}

.cv-balance-header {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "identity identity photo"
    "meta meta meta";
  gap: 0.62rem 0.55rem;
  padding: 1.25rem 1.75rem 1.05rem;
  color: #ffffff;
  background: linear-gradient(135deg, #16223a 0%, #29456f 58%, #4d7dff 100%);
}

.cv-balance-identity { grid-area: identity; min-width: 0; align-self: center; }
.cv-balance-header .cv-photo {
  grid-area: photo;
  justify-self: center;
  align-self: center;
  width: 94px;
  height: 94px;
  border-radius: 22px;
  border: 3px solid rgba(255,255,255,0.72);
  box-shadow: 0 12px 26px rgba(11, 22, 42, 0.18);
  object-fit: cover;
  object-position: center 18%;
}
.cv-balance-header .cv-name { color: #ffffff; font-size: 2.48rem; line-height: 1.08; padding-bottom: 0.04em; max-width: 13ch; }
.cv-balance-header .cv-title { color: rgba(255,255,255,0.88); margin-top: 0.25rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cv-balance-meta { grid-area: meta; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.cv-balance-meta li { background: rgba(255,255,255,0.14); color: #ffffff; border: 1px solid rgba(255,255,255,0.18); text-align: center; }

.cv-balance-header--has-photo .cv-photo {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  align-self: center;
  justify-self: center;
}

/* Balans PDF/mobile fix: voorkom een vierkante render-rand rond de foto.
   Alleen Balans wordt geraakt; andere templates behouden hun bestaande foto-styling. */
.template-balance .cv-balance-header .cv-photo,
.template-balance .cv-balance-header .cv-photo-placeholder {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

.template-balance .cv-balance-header .cv-photo {
  -webkit-appearance: none;
  background: transparent !important;
}
.cv-balance-meta-spacer {
  visibility: hidden;
  pointer-events: none;
}
.cv-balance-footer--with-location {
  gap: 1.05rem;
}

.cv-balance-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 1.05rem;
  padding: 1.1rem 1.72rem 4.55rem;
  min-height: 852px;
}

.cv-balance-divider { width: 1px; min-height: 100%; background: linear-gradient(180deg, transparent, rgba(77,125,255,0.42), transparent); }
.cv-balance-column { display: grid; align-content: start; gap: 0.72rem; min-width: 0; }
.template-balance .cv-section { gap: 0.38rem; }
.template-balance .cv-section-title { font-size: 0.88rem; letter-spacing: 0.11em; }
.template-balance .cv-section-title::before { width: 10px; height: 10px; }
.template-balance .cv-timeline-item { padding: 0.62rem 0.68rem; border-radius: 16px; background: #ffffff; }
.template-balance .cv-paragraph,
.template-balance .cv-list,
.template-balance .cv-timeline-item p,
.template-balance .cv-item-subtitle,
.template-balance .cv-item-period,
.template-balance .cv-pill-list li { font-size: 0.86rem; line-height: 1.45; }
.template-balance .cv-item-title { font-size: 0.94rem; }
.template-balance .cv-pill-list { gap: 0.38rem; }
.template-balance .cv-pill-list li { padding: 0.38rem 0.58rem; }
.cv-balance-footer { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0 5.6rem 0 1.75rem; color: #ffffff; background: linear-gradient(90deg, #16223a, #4d7dff, #79c8ff); font-size: 0.86rem; font-weight: 800; line-height: 1.25; overflow: hidden; }
.cv-balance-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-balance .cv-page-number { bottom: 1.18rem; background: rgba(255,255,255,0.90); border: 1px solid rgba(23,32,51,0.08); border-radius: 999px; padding: 0.2rem 0.44rem; }

/* Studio: rustige premium template zonder zware effecten */
/* Studio PDF/mobile fix: volledig witte achtergrond zodat preview en PDF overeenkomen. */
.cv-paper.template-studio { padding: 0; background: #ffffff; }
.cv-studio-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  min-height: 148px;
  padding: 1.45rem 1.75rem;
  border-bottom: 1px solid rgba(23,32,51,0.08);
  background: #ffffff;
}
.cv-studio-photo-wrap {
  position: absolute;
  left: 50%;
  top: 1.08rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 126px;
  height: 126px;
  z-index: 2;
  pointer-events: none;
}
.cv-studio-photo-wrap:empty { display: none !important; }
.cv-studio-photo-wrap::before {
  content: "";
  position: absolute;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: linear-gradient(135deg, #172033 0%, #3055d4 52%, #79c8ff 100%);
  box-shadow: none;
  z-index: 0;
}
.cv-studio-header .cv-photo {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 4px solid #ffffff;
  background: #ffffff;
  box-shadow: none;
  flex-shrink: 0;
}
.cv-studio-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr);
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.cv-studio-header--has-photo .cv-studio-header-row {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr);
  gap: 1.25rem;
}
.cv-studio-main {
  position: relative;
  display: grid;
  gap: 0.34rem;
  min-width: 0;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 0.35rem;
  text-align: left;
}
.cv-studio-main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.06rem;
  width: 5px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.cv-studio-main--no-title::before {
  height: 52px;
}
.cv-studio-label { display: none !important; }
.template-studio .cv-name { font-size: 2.28rem; line-height: 1.03; overflow-wrap: anywhere; word-break: normal; max-width: 100%; }
.template-studio .cv-title { margin-top: 0.14rem; }
.cv-studio-meta { justify-content: end; align-content: center; display: grid; gap: 0.45rem; min-width: 0; }
.cv-studio-header--has-photo .cv-studio-main { max-width: 286px; }
.cv-studio-meta li { width: 100%; text-align: center; background: #ffffff; border: 1px solid rgba(77,125,255,0.14); }
.cv-studio-continuation { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.75rem; border-bottom: 1px solid rgba(23,32,51,0.08); background: #ffffff; color: var(--muted); }
.cv-studio-continuation strong { color: var(--text); }
.cv-studio-body { display: grid; gap: 0.72rem; padding: 1.05rem 1.75rem 1.9rem; }
.template-studio .cv-section { padding: 0.74rem 0.82rem; border: 1px solid rgba(23,32,51,0.07); border-radius: 18px; background: #ffffff; }
.template-studio .cv-section-title { font-size: 0.92rem; }
.template-studio .cv-timeline-item { border-radius: 15px; padding: 0.6rem 0.68rem; background: #ffffff; }
.template-studio .cv-paragraph,
.template-studio .cv-list,
.template-studio .cv-timeline-item p,
.template-studio .cv-item-subtitle,
.template-studio .cv-item-period,
.template-studio .cv-pill-list li { font-size: 0.88rem; line-height: 1.48; }
.template-studio .cv-item-title { font-size: 0.96rem; }
.template-studio .cv-page-number { background: rgba(255,255,255,0.90); border: 1px solid rgba(23,32,51,0.08); border-radius: 999px; padding: 0.2rem 0.44rem; }
.template-studio,
.template-studio .cv-studio-header,
.template-studio .cv-studio-continuation,
.template-studio .cv-studio-body { background-color: #ffffff; }

@media (max-width: 900px) {
  /* Alleen preview-context; PDF/print roots worden apart gelockt */
  .cv-preview-pages .cv-page .cv-balance-header,
  .cv-preview-pages .cv-page .cv-studio-header { grid-template-columns: inherit; }
}

/* Credit system feedback */
.credit-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 0.9rem;
  border-radius: 999px;
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(77, 125, 255, 0.18);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.credit-status-badge:hover,
.credit-status-badge:focus-visible {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(77, 125, 255, 0.12);
}



/* Global feedback toast */
.credit-message {
  position: fixed;
  left: 50%;
  bottom: 1.35rem;
  z-index: 1000;
  width: max-content;
  max-width: min(92vw, 560px);
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  padding: 0.95rem 1.15rem;
  border-radius: 18px;
  color: #ffffff;
  background: rgba(23, 32, 51, 0.94);
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.22);
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.credit-message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.72rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(23, 32, 51, 0.06);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.autosave-status.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.autosave-status.is-fading {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 1.5s ease;
}

.autosave-status[data-type="success"] {
  color: var(--primary-dark);
  background: rgba(77, 125, 255, 0.08);
  border-color: rgba(77, 125, 255, 0.12);
}

@media (max-width: 640px) {
  .credit-message {
  position: fixed;
  left: 50%;
  bottom: 1.35rem;
  z-index: 100;
  max-width: min(92vw, 520px);
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  padding: 0.95rem 1.15rem;
  border-radius: 18px;
  color: #ffffff;
  background: rgba(23, 32, 51, 0.94);
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.22);
  font-weight: 800;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.credit-message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
}

@media (max-width: 640px) {
  .credit-status-badge {
    width: 100%;
    justify-content: center;
  }
}

/* ================================
   Mobile friendly polish — builder
   Preview stays A4-shaped visually; PDF export and pagination remain untouched.
   ================================ */
html,
body {
  overflow-x: hidden;
}

.builder-button,
.template-chip,
.remove-item,
.photo-dropzone,
.credit-status-badge {
  touch-action: manipulation;
}

@media (max-width: 1200px) {
  .builder-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .builder-panel,
  .preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .preview-panel {
    --preview-scale: 0.78;
    width: 100%;
    display: grid;
    justify-content: center;
  }

  .cv-preview-pages {
    justify-content: center;
  }

  .cv-page-frame {
    width: calc(var(--page-width) * var(--preview-scale));
    height: calc(var(--page-height) * var(--preview-scale));
    min-height: calc(var(--page-height) * var(--preview-scale));
    overflow: hidden;
  }

  .cv-page {
    width: var(--page-width);
    height: var(--page-height);
    min-height: var(--page-height);
    transform: scale(var(--preview-scale));
    transform-origin: top left;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .builder-header {
    background: rgba(244, 247, 251, 0.94);
  }

  .builder-header__inner {
    min-height: auto;
    padding: 0.85rem 0;
    align-items: stretch;
  }

  .builder-brand img {
    width: clamp(142px, 42vw, 210px);
  }

  .builder-actions {
    width: 100%;
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-actions .builder-button,
  .builder-actions .credit-status-badge {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .builder-actions .credit-status-badge {
    grid-column: 1 / -1;
  }

  .panel-card {
    padding: 1.15rem;
    border-radius: 20px;
  }

  .section-top,
  .item-card__top {
    gap: 0.75rem;
  }

  .section-top .builder-button,
  .item-card__top .remove-item {
    width: 100%;
  }

  .template-panel .template-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-panel {
    --preview-scale: 0.62;
  }
}

@media (max-width: 640px) {
  .builder-shell {
    width: min(calc(100% - 0.9rem), var(--builder-width));
  }

  .builder-layout {
    padding-top: 0.8rem;
  }

  .builder-header__inner,
  .cv-header,
  .item-card__top,
  .section-top {
    flex-direction: column;
    align-items: stretch;
  }

  .builder-actions {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .builder-button,
  .template-chip,
  .remove-item {
    min-height: 46px;
  }

  .intro-card h1 {
    font-size: 2rem;
  }

  .form-grid.two-col,
  .personal-grid,
  .template-panel .template-switch {
    grid-template-columns: 1fr;
  }

  .photo-upload-meta {
    align-items: stretch;
  }

  .photo-upload-meta .builder-button {
    width: 100%;
  }

  .photo-dropzone {
    min-height: 112px;
  }

  textarea {
    min-height: 108px;
  }

  .preview-panel {
    --preview-scale: 0.43;
  }

  .cv-preview-pages {
    gap: 0.55rem;
  }

  .cv-page-frame {
    border-radius: 16px;
  }

  .cv-paper {
    border-radius: 28px;
  }

  

.credit-message {
    bottom: 0.8rem;
    padding: 0.82rem 0.95rem;
  }
}

@media (max-width: 380px) {
  .preview-panel {
    --preview-scale: 0.40;
  }

  .panel-card,
  .item-card {
    padding: 1rem;
  }
}



/* Pro template: Executive — premium donker/clean, A4-stabiel */
.template-panel .template-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .template-panel .template-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cv-paper.template-executive {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: #ffffff;
  overflow: hidden;
}

.cv-executive-sidebar {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.45rem;
  display: grid;
  align-content: start;
  gap: 1.12rem;
  color: rgba(255, 255, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.00) 100%),
    linear-gradient(180deg,
      #3d4651 0%,
      #59636d 58%,
      #66727c 72%,
      #76828c 86%,
      #8c98a2 100%
    );
}

.cv-executive-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 7%, rgba(255, 255, 255, 0.18), transparent 27%);
  pointer-events: none;
}

.cv-executive-sidebar > * {
  position: relative;
  z-index: 1;
}

.cv-executive-photo-wrap {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0 0.55rem;
}

.template-executive .cv-photo,
.template-executive .cv-photo-placeholder {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 34px rgba(23, 32, 51, 0.25);
  background-color: rgba(255, 255, 255, 0.86);
}

.template-executive .cv-photo-placeholder {
  color: #3d4651;
  background: linear-gradient(135deg, #f3f6fb, #dfe8f5);
}

.cv-executive-identity {
  text-align: center;
  padding-bottom: 0.4rem;
}

.template-executive .cv-executive-sidebar .cv-name {
  max-width: 100%;
  font-size: 1.72rem;
  line-height: 1.02;
  color: #ffffff;
  letter-spacing: -0.035em;
}

.template-executive .cv-executive-sidebar .cv-title {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.template-executive .cv-executive-sidebar .cv-section {
  gap: 0.42rem;
}

.template-executive .cv-executive-sidebar .cv-section-title {
  color: #ffffff;
  font-size: 0.92rem;
}

.template-executive .cv-executive-sidebar .cv-section-title::before {
  background: rgba(255, 255, 255, 0.92);
}

.template-executive .cv-executive-sidebar .cv-meta-list {
  display: grid;
  gap: 0.48rem;
}

.template-executive .cv-executive-sidebar .cv-meta-list li,
.template-executive .cv-executive-sidebar .cv-pill-list li {
  color: #172033;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.5rem 0.72rem;
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: none;
}

.template-executive .cv-executive-sidebar .cv-paragraph,
.template-executive .cv-executive-sidebar .cv-list {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  line-height: 1.48;
}

/* Executive sidebar: witte waas onderin fors verminderd.
   Tekst blijft in de oorspronkelijke Executive-kleur en volledig dekkend. */

.cv-executive-main {
  padding: 2.05rem 2rem 1.8rem;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 0.92rem;
}

.template-executive .cv-executive-main .cv-section-title {
  color: #303944;
}

.template-executive .cv-executive-main .cv-section-title::before {
  background: linear-gradient(135deg, #3d4651, #8b96a3);
}

.template-executive .cv-executive-main .cv-timeline-item {
  border-radius: 15px;
  border: 1px solid rgba(23, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  padding: 0.72rem 0.78rem;
}

.template-executive .cv-executive-main .cv-item-title {
  color: #172033;
}

.template-executive .cv-executive-main .cv-item-subtitle,
.template-executive .cv-executive-main .cv-item-period,
.template-executive .cv-executive-main .cv-paragraph,
.template-executive .cv-executive-main .cv-list,
.template-executive .cv-executive-main .cv-timeline-item p {
  color: #607089;
}

.template-executive .cv-page-number {
  color: #607089;
}

/* Mobile Executive fix: behoud de echte Executive sidebar-layout ook op mobiel.
   De preview/PDF mag niet overschakelen naar één kolom, anders ontstaan onnodige pagina's. */
@media (max-width: 900px) {
  .cv-paper.template-executive {
    display: grid !important;
    grid-template-columns: 275px minmax(0, 1fr) !important;
  }
}

@media print {
  .cv-paper.template-executive {
    display: grid !important;
    grid-template-columns: 275px minmax(0, 1fr) !important;
  }
}

body.print-export-page .print-paper-root .cv-paper.template-executive,
body.print-export-page .print-export-root .cv-paper.template-executive {
  display: grid !important;
  grid-template-columns: 275px minmax(0, 1fr) !important;
}

/* Stabiliteit lange tekst: breek lange woorden/URL's pas wanneer nodig,
   zodat de CV-layout niet wordt uitgerekt of onleesbaar wordt. */
.cv-page,
.cv-page * {
  min-width: 0;
  max-width: 100%;
}

.cv-name,
.cv-title,
.cv-paragraph,
.cv-list,
.cv-list li,
.cv-timeline-item,
.cv-timeline-item p,
.cv-item-title,
.cv-item-subtitle,
.cv-item-period,
.cv-meta-list li,
.cv-pill-list li,
.cv-section-title,
.cv-sidebar,
.cv-sidebar *,
.cv-pro-content,
.cv-pro-content *,
.cv-executive-sidebar,
.cv-executive-sidebar * {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.cv-item-head {
  min-width: 0;
}

.cv-item-head > * {
  min-width: 0;
  max-width: 100%;
}

.cv-meta-list li,
.cv-pill-list li {
  overflow: hidden;
}











/* =========================================================
   GOEDKOOPCV CLEAN STABILITY LAYER — 2026-05-06
   Eén waarheid voor A4:
   - De CV zelf blijft altijd 794x1122 px.
   - Alleen de wrapper/preview schaalt op schermen.
   - PDF/print roots krijgen nooit mobiele layout-regels.
   ========================================================= */
.preview-panel,
.print-export-root,
.print-paper-root,
#cvPdfExportRoot,
#pdf-root,
.cv-measure-sandbox {
  --page-width: 794px;
  --page-height: 1122px;
}

.preview-panel {
  --preview-scale: 0.72;
  width: calc((var(--page-width) * var(--preview-scale)) + 18px);
}

.cv-preview-pages,
.print-export-root {
  display: grid;
  gap: 0.9rem;
  justify-content: start;
}

.cv-page-frame {
  position: relative;
  width: calc(var(--page-width) * var(--preview-scale));
  height: calc(var(--page-height) * var(--preview-scale));
  min-height: calc(var(--page-height) * var(--preview-scale));
  overflow: hidden;
}

.cv-page {
  width: var(--page-width);
  min-width: var(--page-width);
  max-width: var(--page-width);
  height: var(--page-height);
  min-height: var(--page-height);
  max-height: var(--page-height);
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  overflow: hidden;
  margin: 0;
  position: relative;
}

.cv-paper {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.cv-page .cv-header { flex-direction: row; align-items: flex-start; }
.cv-page .cv-grid-two,
.cv-page .cv-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-page .cv-paper.template-sidebar { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.cv-page .cv-paper.template-executive { display: grid; grid-template-columns: 275px minmax(0, 1fr); }
.cv-page .cv-sidebar { border-right: 1px solid rgba(23, 32, 51, 0.08); border-bottom: 0; }
.cv-page .cv-header-band { grid-template-columns: auto minmax(0, 1fr) minmax(190px, 0.72fr); align-items: center; }
.cv-page .cv-header-band__meta { justify-content: flex-end; }
.cv-page .cv-balance-body { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
.cv-page .cv-studio-header-row { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr); }
.cv-page .cv-studio-header--has-photo .cv-studio-header-row { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr); }

.cv-page.is-measure,
.cv-measure-sandbox .cv-page,
#cvPdfExportRoot .cv-page,
#pdf-root .cv-page,
.print-paper-root .cv-page {
  transform: none !important;
}

.cv-measure-sandbox,
#cvPdfExportRoot,
#pdf-root,
.print-paper-root {
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
}

.cv-measure-sandbox .cv-page-frame,
.cv-measure-sandbox .cv-page,
#cvPdfExportRoot .cv-page-frame,
#cvPdfExportRoot .cv-page,
#pdf-root .cv-page-frame,
#pdf-root .cv-page,
.print-paper-root .cv-page-frame,
.print-paper-root .cv-page {
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  height: 1122px !important;
  min-height: 1122px !important;
  max-height: 1122px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#cvPdfExportRoot .cv-paper,
#pdf-root .cv-paper,
.print-paper-root .cv-paper,
.cv-measure-sandbox .cv-paper {
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  height: 1122px !important;
  min-height: 1122px !important;
  max-height: 1122px !important;
  box-shadow: none !important;
}

#cvPdfExportRoot .cv-paper.template-sidebar,
#pdf-root .cv-paper.template-sidebar,
.print-paper-root .cv-paper.template-sidebar,
.cv-measure-sandbox .cv-paper.template-sidebar {
  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
}


#cvPdfExportRoot .cv-paper.template-executive,
#pdf-root .cv-paper.template-executive,
.print-paper-root .cv-paper.template-executive,
.cv-measure-sandbox .cv-paper.template-executive {
  display: grid !important;
  grid-template-columns: 275px minmax(0, 1fr) !important;
}


@media screen and (max-width: 1200px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-panel,
  .preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .preview-panel {
    width: calc(var(--page-width) * var(--preview-scale));
    max-width: calc(100vw - 1rem);
    justify-self: center;
  }
  .cv-preview-pages { justify-content: center; }
}

@media screen and (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .builder-shell { width: min(calc(100% - 1rem), var(--builder-width)); }
  .builder-header__inner,
  .item-card__top,
  .section-top { flex-direction: column; align-items: stretch; }
  .builder-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .builder-actions .builder-button,
  .builder-actions .credit-status-badge { width: 100%; }
  .form-grid.two-col,
  .personal-grid { grid-template-columns: 1fr; }
  .personal-grid .photo-upload-field { grid-column: auto; }
  .template-panel .template-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-panel {
    --preview-scale: min(0.38, calc((100vw - 2rem) / 794));
    width: calc(var(--page-width) * var(--preview-scale));
    max-width: calc(100vw - 2rem);
    margin: 0.75rem auto 1.25rem;
  }
  .cv-preview-pages { width: calc(var(--page-width) * var(--preview-scale)); }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
  .builder-shell { width: min(calc(100% - 0.75rem), var(--builder-width)); }
  .builder-layout { grid-template-columns: minmax(280px, 1fr) minmax(180px, auto); gap: 0.75rem; }
  .builder-panel { position: static; }
  .preview-panel {
    --preview-scale: min(0.26, calc((100vw - 340px) / 794), calc((100vh - 1.5rem) / 1122));
    position: sticky;
    top: 0.75rem;
    justify-self: end;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
  }
}

/* Dedicated PDF-save page: small preview on screen, real A4 root for print. */
.print-export-page { background: #f4f7fb; overflow-x: hidden; }
.print-export-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  background: rgba(244, 247, 251, 0.94);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}
.print-export-root {
  --print-preview-scale: 0.34;
  width: calc(794px * var(--print-preview-scale));
  max-width: calc(100vw - 24px);
  margin: 1rem auto 2rem;
}
.print-export-root .cv-page-frame {
  width: calc(794px * var(--print-preview-scale)) !important;
  height: calc(1122px * var(--print-preview-scale)) !important;
  min-height: calc(1122px * var(--print-preview-scale)) !important;
  overflow: hidden !important;
}
.print-export-root .cv-page {
  width: 794px !important;
  height: 1122px !important;
  transform: scale(var(--print-preview-scale)) !important;
  transform-origin: top left !important;
}
.print-paper-root {
  display: block !important;
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.print-export-toolbar .builder-button:disabled { opacity: 0.65; cursor: wait; }
.print-export-page:not(.is-print-ready) .print-export-root { opacity: 0.25; }

@media (max-width: 900px) { .print-export-root { --print-preview-scale: 0.30; } }
@media (max-width: 480px) { .print-export-root { --print-preview-scale: 0.28; } }
@media (orientation: landscape) and (max-height: 520px) { .print-export-root { --print-preview-scale: 0.22; } }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body, body.print-export-page {
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .builder-header,
  .builder-panel,
  .credit-status-badge,
  .credit-message,
  .print-export-toolbar { display: none !important; }
  body.print-export-page > *:not(.print-paper-root) { display: none !important; }
  body.print-export-page .print-paper-root {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.print-export-page .print-paper-root,
  body.print-export-page .print-paper-root * { visibility: visible !important; }
  .preview-panel,
  .cv-preview-pages,
  .cv-page-frame,
  .cv-page,
  .cv-paper,
  body.print-export-page .print-paper-root .cv-page-frame,
  body.print-export-page .print-paper-root .cv-page,
  body.print-export-page .print-paper-root .cv-paper {
    width: 210mm !important;
    min-width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .cv-page-frame,
  body.print-export-page .print-paper-root .cv-page-frame {
    break-after: page !important;
    page-break-after: always !important;
  }
  .cv-page-frame:last-child,
  body.print-export-page .print-paper-root .cv-page-frame:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}


/* Preview watermark: zichtbaar in builder-preview, nooit in PDF/export */
.cv-page-frame {
  position: relative;
}

body:not(.pdf-export-mode):not(.print-export-page) .cv-preview-pages .cv-page-frame::before {
  content: "Gemaakt met GoedkoopCV";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  transform: translate(-50%, -50%) rotate(-24deg);
  width: 92%;
  text-align: center;
  color: rgba(48, 85, 212, 0.075);
  font-size: clamp(1.15rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

body:not(.pdf-export-mode):not(.print-export-page) .cv-preview-pages .cv-page-frame::after {
  content: "Watermerk verdwijnt na download";
  position: absolute;
  left: clamp(10px, 2.2%, 18px);
  bottom: clamp(8px, 1.8%, 16px);
  z-index: 31;
  padding: 0.28rem 0.48rem;
  border-radius: 999px;
  color: rgba(48, 85, 212, 0.38);
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(77, 125, 255, 0.12);
  font-size: clamp(0.48rem, 1vw, 0.68rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

@media print {
  .cv-preview-pages .cv-page-frame::before,
  .cv-preview-pages .cv-page-frame::after,
  #cvPdfExportRoot .cv-page-frame::before,
  #cvPdfExportRoot .cv-page-frame::after,
  #pdf-root .cv-page-frame::before,
  #pdf-root .cv-page-frame::after {
    display: none !important;
    content: none !important;
  }
}

/* =========================================================
   DESKTOP PREVIEW FULL-PAGE FIX — 2026-05-06
   Het article-element heeft tegelijk .cv-page en .cv-paper.
   Daarom moet de CV zelf altijd exact A4 px blijven; alleen de frame schaalt.
   Dit voorkomt een halve/ingekorte desktop-preview.
   ========================================================= */
.cv-page.cv-paper {
  width: var(--page-width, 794px) !important;
  min-width: var(--page-width, 794px) !important;
  max-width: var(--page-width, 794px) !important;
  height: var(--page-height, 1122px) !important;
  min-height: var(--page-height, 1122px) !important;
  max-height: var(--page-height, 1122px) !important;
}

.cv-preview-pages .cv-page.cv-paper {
  transform: scale(var(--preview-scale)) !important;
  transform-origin: top left !important;
}

.cv-measure-sandbox .cv-page.cv-paper,
#cvPdfExportRoot .cv-page.cv-paper,
#pdf-root .cv-page.cv-paper,
.print-paper-root .cv-page.cv-paper {
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  height: 1122px !important;
  min-height: 1122px !important;
  max-height: 1122px !important;
  transform: none !important;
}


/* =========================================================
   DESKTOP BROWSER ZOOM STABILITY — 2026-05-06
   Browser-zoom verkleint CSS viewport pixels. Op desktop willen we dan
   geen mobiele layout forceren, maar de builder stabiel houden met scroll.
   PDF/export/A4 blijven onaangeraakt.
   ========================================================= */
@media screen and (hover: hover) and (pointer: fine) {
  html,
  body {
    overflow-x: auto !important;
  }

  .builder-shell {
    min-width: 1180px;
  }

  .builder-layout {
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .builder-panel {
    position: sticky !important;
    top: 102px !important;
    max-height: calc(100vh - 118px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0.35rem !important;
  }

  .preview-panel {
    position: sticky !important;
    top: 102px !important;
    justify-self: start !important;
    width: calc((var(--page-width) * var(--preview-scale)) + 18px) !important;
    max-width: none !important;
    max-height: calc(100vh - 118px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    display: block !important;
  }

  .cv-preview-pages {
    justify-content: start !important;
  }

  .builder-header__inner {
    flex-direction: row !important;
    align-items: center !important;
  }

  .builder-actions {
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-end !important;
  }

  .builder-actions .builder-button,
  .builder-actions .credit-status-badge {
    width: auto !important;
    white-space: nowrap !important;
  }

  .form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .personal-grid .photo-upload-field {
    grid-column: 2 !important;
  }

  .template-panel .template-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   BLUE SCROLLBAR RESTORE — 2026-05-06
   Alleen visuele scrollbar-styling voor builder + preview.
   Geen invloed op A4, pagination, PDF of CV-data.
   ========================================================= */
.builder-panel,
.preview-panel {
  scrollbar-width: thin;
  scrollbar-color: #4d9cff rgba(77, 156, 255, 0.16);
}

.builder-panel::-webkit-scrollbar,
.preview-panel::-webkit-scrollbar {
  width: 10px;
}

.builder-panel::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7cc7ff, #4d9cff);
  border-radius: 999px;
}

.builder-panel::-webkit-scrollbar-thumb:hover,
.preview-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66b9ff, #2f86ff);
}

.builder-panel::-webkit-scrollbar-track,
.preview-panel::-webkit-scrollbar-track {
  background: rgba(77, 125, 255, 0.10);
  border-radius: 999px;
}


/* Logo fix: voorkom dat het logo in de builder-header verticaal wordt samengedrukt. */
.builder-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.builder-brand img {
  height: auto !important;
  max-height: 58px;
  object-fit: contain;
}

/* =========================================================
   Mobile landscape fix — builder and preview stay side-by-side
   Alleen voor mobiel horizontaal. Header/logo styling blijft ongemoeid;
   de header is hier bewust niet sticky en beide kolommen scrollen apart.
   ========================================================= */
@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 560px) {
  html,
  body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .builder-header {
    position: static;
    top: auto;
  }

  .builder-layout {
    height: calc(var(--builder-vh, 100dvh) - var(--builder-header-height, 84px));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, 49vw) minmax(220px, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.75rem 0;
    overflow: hidden;
  }

  .builder-panel,
  .preview-panel {
    position: static;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .builder-panel {
    display: grid;
    align-content: start;
    padding-right: 0.35rem;
  }

  .preview-panel {
    --preview-scale: min(0.50, calc((100vw - 330px) / 794));
    width: 100%;
    max-width: 100%;
    margin: 0;
    justify-self: stretch;
    display: block;
    padding-right: 0.25rem;
  }

  .cv-preview-pages {
    width: calc(var(--page-width) * var(--preview-scale));
    justify-content: start;
  }
}

/* =========================================================
   Mobile landscape patch v2 — compact header + stable A4 preview
   Doel: alleen mobiel horizontaal fixen. CV/PDF templates blijven A4.
   ========================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.cv-preview-pages .cv-page {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Voorkom dat viewport-media queries de inhoud van de geschaalde A4-preview veranderen. */
@media screen and (max-width: 900px) {
  .cv-preview-pages .cv-paper.template-header .cv-header-band {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, 0.72fr) !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 1.75rem !important;
  }

  .cv-preview-pages .cv-paper.template-header .cv-body {
    padding: 1rem 1.75rem 1.65rem !important;
  }

  .cv-preview-pages .cv-paper.template-header .cv-header-band__meta {
    justify-content: flex-end !important;
  }

  .cv-preview-pages .cv-paper.template-sidebar {
    display: grid !important;
    grid-template-columns: 290px minmax(0, 1fr) !important;
  }

  .cv-preview-pages .cv-paper.template-executive {
    display: grid !important;
    grid-template-columns: 275px minmax(0, 1fr) !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas: "identity identity photo" "meta meta meta" !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    height: 190px !important;
    min-height: 190px !important;
    overflow: hidden !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-identity {
    grid-area: identity !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header .cv-photo {
    grid-area: photo !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--has-photo .cv-photo {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 24px !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .cv-preview-pages .cv-paper.template-studio .cv-studio-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: relative !important;
  }

  .cv-preview-pages .cv-paper.template-studio .cv-studio-header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr) !important;
  }

  .cv-preview-pages .cv-paper.template-studio .cv-studio-header--has-photo .cv-studio-header-row {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr) !important;
  }

  .cv-preview-pages .cv-grid-two,
  .cv-preview-pages .cv-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 950px) and (orientation: landscape) and (max-height: 560px) {
  html,
  body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .builder-header {
    position: static !important;
    top: auto !important;
    z-index: 1;
  }

  .builder-header__inner {
    min-height: 46px !important;
    padding: 0.28rem 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
  }

  .builder-brand img {
    width: clamp(112px, 18vw, 150px) !important;
    max-height: 38px !important;
  }

  .builder-actions {
    width: auto !important;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .builder-actions::-webkit-scrollbar {
    display: none;
  }

  .builder-actions .builder-button,
  .builder-actions .credit-status-badge {
    width: auto !important;
    min-width: max-content;
    min-height: 34px !important;
    padding: 0.35rem 0.58rem !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .builder-layout {
    height: calc(var(--builder-vh, 100dvh) - var(--builder-header-height, 46px)) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 49vw) minmax(220px, 1fr) !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    padding: 0.65rem 0 !important;
    overflow: hidden !important;
  }

  .builder-panel,
  .preview-panel {
    position: static !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .builder-panel {
    display: grid !important;
    align-content: start !important;
    padding-right: 0.35rem !important;
  }

  .preview-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    display: block !important;
    padding-right: 0.25rem !important;
  }

  .cv-preview-pages {
    width: calc(var(--page-width) * var(--preview-scale)) !important;
    justify-content: start !important;
  }
}

/* AI helper panel — small, controlled layer above the existing CV data flow */
.ai-panel {
  display: grid;
  gap: 0.75rem;
}

.ai-panel > .eyebrow {
  width: fit-content;
  max-width: max-content;
  align-self: start;
  padding-inline: 0.78rem;
}

.ai-panel h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.ai-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.ai-actions .builder-button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.ai-actions .builder-button:disabled {
  opacity: 0.68;
  cursor: wait;
  transform: none;
}

.ai-status {
  min-height: 1.2rem;
  margin: 0;
  opacity: 1;
  transition: opacity 1.5s ease;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.ai-status[data-type="success"] {
  color: #16834d;
}

.ai-status.is-fading {
  opacity: 0;
}

.ai-status[data-type="error"] {
  color: #c2410c;
}

@media (max-width: 640px) {
  .ai-actions {
    grid-template-columns: 1fr;
  }
}


/* Optionele CV-secties: Ambities en Hobby's kunnen uit de preview/PDF worden gehaald zonder tekst te wissen. */
.optional-text-section .section-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.optional-text-section .optional-section-removed-note {
  display: none;
  margin: 0;
}

.optional-text-section.is-removed label {
  display: none;
}

.optional-text-section.is-removed .optional-section-removed-note {
  display: block;
}

/* GoedkoopCV polish: stable AI status area + mobile spacing for add buttons */
.ai-panel {
  align-self: start;
}

.ai-status {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.mobile-add-button {
  margin-top: 0.95rem;
  justify-self: start;
}

@media (max-width: 640px) {
  .ai-status {
    min-height: 3.15rem;
  }

  .mobile-add-button {
    margin-top: 1rem;
  }
}


/* Laatste polish: compactere vervolgpagina's voor Header, Sidebar en Executive. */
.cv-header-continuation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.75rem 0.85rem;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}

.cv-header-continuation__photo:empty {
  display: none;
}

.cv-header-continuation__photo .cv-photo,
.cv-header-continuation__photo .cv-photo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(25, 45, 86, 0.08);
}

.cv-header-continuation__main {
  min-width: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(23, 32, 51, 0.16);
}

.cv-header-continuation .cv-name {
  font-size: 1.55rem;
}

.cv-header-continuation .cv-title {
  margin-top: 0.16rem;
  font-size: 0.86rem;
}

.cv-sidebar > .cv-photo,
.cv-sidebar > .cv-photo-placeholder {
  justify-self: center;
}

.cv-sidebar > div:first-of-type {
  text-align: center;
}

.cv-sidebar > .cv-section {
  margin-top: 0.125rem;
}

.cv-sidebar--compact {
  gap: 1rem;
}

.cv-sidebar--compact > .cv-section ~ .cv-section {
  display: none;
}

.cv-executive-sidebar--compact {
  gap: 1rem;
}

.cv-executive-sidebar--compact .cv-executive-photo-wrap {
  margin-bottom: 0.35rem;
}

.cv-executive-sidebar--compact .cv-section:not(.cv-executive-contact) {
  display: none;
}

.cv-executive-sidebar--compact .cv-photo,
.cv-executive-sidebar--compact .cv-photo-placeholder {
  width: 112px;
  height: 112px;
  border-width: 7px;
}

/* GoedkoopCV polish: stabiele 2-koloms opleidingen + veilige tekstafbreking */
.cv-education-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 0.75rem;
}

.cv-item-copy {
  min-width: 0;
}

.cv-item-title,
.cv-item-subtitle,
.cv-item-period,
.cv-timeline-item p,
.cv-list,
.cv-list li {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.cv-item-period {
  justify-self: end;
  max-width: 100%;
  text-align: right;
}

.cv-timeline-item {
  min-width: 0;
  overflow: hidden;
}

.cv-executive-sidebar--compact {
  align-content: start;
  gap: 0;
  padding-top: 1.9rem;
}

.cv-executive-sidebar--compact .cv-executive-identity {
  text-align: left;
  padding-bottom: 0;
}

.cv-executive-sidebar--compact .cv-name {
  font-size: 1.45rem;
}

.cv-executive-sidebar--compact .cv-title {
  margin-left: 0;
}

.cv-executive-sidebar--compact .cv-executive-photo-wrap,
.cv-executive-sidebar--compact .cv-executive-contact,
.cv-executive-sidebar--compact .cv-section {
  display: none !important;
}


/* Laat Sidebar vervolgpagina's net als Executive alleen naam + functietitel tonen. */
.cv-sidebar--compact {
  align-content: start;
  gap: 0;
  padding-top: 1.9rem;
}

.cv-sidebar--compact .cv-name {
  font-size: 1.54rem;
}

.cv-sidebar--compact .cv-title {
  margin-left: 0;
  font-size: 1.17rem;
}

.cv-sidebar--compact .cv-photo,
.cv-sidebar--compact .cv-photo-placeholder,
.cv-sidebar--compact .cv-section {
  display: none !important;
}

/* Balans stability polish: keep category items grouped and prevent long names from changing A4 pagination */
.cv-balance-header {
  height: 190px;
  min-height: 190px;
  grid-template-rows: auto auto;
  align-content: center;
  overflow: hidden;
}

.cv-balance-header .cv-name {
  max-width: 470px;
  font-size: 2.28rem;
  line-height: 1.05;
  padding-bottom: 0.05em;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-balance .cv-section-experience .cv-timeline-item + .cv-timeline-item,
.template-balance .cv-section-education .cv-timeline-item + .cv-timeline-item,
.template-balance .cv-section-projects .cv-timeline-item + .cv-timeline-item {
  margin-top: 0.52rem;
}

/* Balans vervolgpagina: rustige header met alleen naam + functie centraal */
.cv-balance-header--continuation {
  grid-template-columns: 1fr;
  grid-template-areas: "identity";
  place-items: center;
  padding: 1.35rem 2rem;
  text-align: center;
}

.cv-balance-header--continuation .cv-balance-identity {
  grid-area: identity;
  align-self: center;
  justify-self: center;
  max-width: 620px;
  padding: 0 1rem;
}

.cv-balance-header--continuation .cv-name {
  max-width: 100%;
  margin-inline: auto;
  font-size: 2.55rem;
  line-height: 1.04;
}

.cv-balance-header--continuation .cv-title {
  margin-top: 0.35rem;
  margin-left: 0;
  font-size: 1.12rem;
}

.cv-balance-header--continuation .cv-balance-meta,
.cv-balance-header--continuation .cv-photo {
  display: none !important;
}

/* Mobile preview fix: algemene Balans-locks hierboven gebruiken !important.
   Herhaal daarom de vervolgpagina-regels ook met !important, zodat pagina 2
   op portrait én landscape mobile gecentreerd blijft zonder de PDF-flow te wijzigen. */
@media screen and (max-width: 900px) {
  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation {
    grid-template-columns: 1fr !important;
    grid-template-areas: "identity" !important;
    place-items: center !important;
    padding: 1.35rem 2rem !important;
    text-align: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation .cv-balance-identity {
    grid-area: identity !important;
    align-self: center !important;
    justify-self: center !important;
    max-width: 620px !important;
    width: 100% !important;
    padding: 0 1rem !important;
    text-align: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation .cv-name {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation .cv-title {
    margin-left: 0 !important;
    text-align: center !important;
  }

  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation .cv-balance-meta,
  .cv-preview-pages .cv-paper.template-balance .cv-balance-header--continuation .cv-photo {
    display: none !important;
  }
}
/* ==========================================================
   GoedkoopCV SCROLLBAR LOCK — V1.0.0.1
   Eén vaste lichtblauwe scrollbar-stijl, overal hetzelfde.
   Visueel-only: geen invloed op A4, preview, PDF, data of pagination.
   ========================================================== */
html,
body,
body * {
  scrollbar-width: thin !important;
  scrollbar-color: #4d9cff rgba(77, 156, 255, 0.16) !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
  background: rgba(77, 156, 255, 0.16) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
  min-height: 56px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7cc7ff 0%, #4d9cff 100%) !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66b9ff 0%, #2f86ff 100%) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
  background: rgba(77, 156, 255, 0.16) !important;
}


/* Autosave naast credit saldo, zonder knoppen telkens te verschuiven */
.builder-actions {
  align-items: center;
}

.autosave-status {
  min-width: 228px;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: none;
}

.autosave-status.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .autosave-status {
    width: 100%;
    min-width: 0;
  }
}

/* Mobile portrait extra preview onder template-keuze.
   Gebruikt dezelfde HTML als de normale preview; PDF/pagination blijft onaangeraakt. */
.mobile-preview-panel {
  display: none;
  --preview-scale: 0.36;
  --page-width: 794px;
  --page-height: 1122px;
  overflow: hidden;
}

.mobile-preview-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.mobile-preview-panel__top .eyebrow {
  margin-bottom: 0;
}

.mobile-preview-panel__top strong {
  color: var(--text);
  font-size: 0.95rem;
}

.mobile-preview-pages {
  justify-content: center;
  gap: 0.45rem;
}

.mobile-preview-panel .cv-page-frame {
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(25, 45, 86, 0.08);
}

@media screen and (max-width: 760px) and (orientation: portrait) {
  .mobile-preview-panel {
    display: block;
  }
}

@media screen and (max-width: 360px) and (orientation: portrait) {
  .mobile-preview-panel {
    --preview-scale: 0.32;
  }
}

/* Autosave links naast het credit saldo zonder de headerknoppen uit hun plek te duwen. */
.builder-actions {
  position: relative;
}

.builder-actions > .autosave-status {
  position: absolute;
  right: calc(100% + 0.65rem);
  top: 50%;
  width: max-content;
  min-width: 0;
  max-width: min(320px, 36vw);
  transform: translateY(-50%);
}

.builder-actions > .autosave-status.is-visible {
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  .builder-actions > .autosave-status {
    position: static;
    order: -2;
    width: 100%;
    max-width: none;
    justify-content: center;
    transform: none;
  }

  .builder-actions > .autosave-status.is-visible {
    transform: none;
  }
}

/* Timing fix: autosave blijft 1.5s staan en fade daarna 1.5s weg. */
.autosave-status.is-fading {
  visibility: visible;
  opacity: 0 !important;
  transform: none;
  transition: opacity 1.5s ease !important;
}


/* Mobile vertical: compact header, hide autosave */
@media (max-width: 640px) and (orientation: portrait){
  #saveCvButton,
  #saveLetterButton,
  .autosave-status{
    display:none !important;
  }

  .builder-header__inner{
    min-height:60px !important;
  }

  .builder-actions{
    gap:0.4rem !important;
  }

  .builder-button{
    min-height:40px !important;
    padding:0 0.8rem !important;
    font-size:0.9rem !important;
  }

  .builder-brand img{
    width:150px !important;
  }
}