/* Ontwerpkeuze in de invulpagina en voorbeelden op de beheerpagina */
.design-preview { display: flex; justify-content: center; margin: 12px 0 18px; }
.design-preview svg { width: min(100%, 260px); height: auto; display: block; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.design-empty { width: 100%; padding: 28px 16px; text-align: center; color: var(--soft, #766a6f); border: 1.5px dashed var(--line, #e7dcd6); border-radius: 14px; }
.ont-title { font-size: 17px; margin: 22px 0 8px; }
.ont-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ont-bgs { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.ont-opt, .ont-bg {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border: 2px solid var(--line, #e7dcd6); border-radius: 12px;
  background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; min-width: 0;
}
.ont-opt svg { width: 56px; height: 56px; }
.ont-opt span, .ont-bg span { font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.ont-bg svg { width: 100%; height: auto; }
.ont-bg small { display: block; color: var(--soft, #766a6f); font-size: 12px; }
.ont-opt.on, .ont-bg.on { border-color: var(--primary, #6b1e2e); box-shadow: 0 0 0 2px var(--primary, #6b1e2e) inset; }
.ont-mini { width: 100%; }
.ont-mini svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.slider { display: grid; gap: 4px; margin: 8px 0; }
.slider span { font-size: 14px; }
.slider input { width: 100%; }
.hover-hide::placeholder { color: transparent; }
.preview-page svg { width: min(100%, 260px); height: auto; display: block; margin: 0 auto; border-radius: 14px; }

/* Voorbeeld van de pagina blijft bovenaan staan terwijl je ontwerp en foto-positie kiest */
.ont-sticky { position: sticky; top: 0; z-index: 5; background: var(--bg, #fbf3f1); padding: 6px 0 4px; box-shadow: 0 8px 10px -10px rgba(0,0,0,.35); }
.ont-sticky .design-preview { margin: 0; }
.ont-sticky .design-preview svg { width: min(100%, 130px); }

/* Achtergronden op telefoon: één rij die je opzij kunt vegen, zodat de pagina niet eindeloos lang wordt */
.ont-bgs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.ont-bgs .ont-bg { flex: 0 0 118px; scroll-snap-align: start; }
.ont-bg span { font-size: 12px; }

/* Foto direct verschuiven en zoomen */
.photo-editor { max-width: 260px; margin: 6px auto 10px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.photo-editor:active { cursor: grabbing; }
.photo-editor svg { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.12); pointer-events: none; }
.pe-buttons { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.pe-buttons .btn { flex: 0 0 auto; min-width: 56px; font-size: 20px; }
.pe-buttons .btn-ghost { font-size: 15px; }
.pe-buttons .btn { height: 44px; padding: 0 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin: 0; width: auto; }

/* Foto bijwerken: licht en kleur */
.adj { margin: 6px 0 14px; border: 1.5px solid var(--line, #e7dcd6); border-radius: 12px; padding: 0 12px; background: var(--surface, #fff); }
.adj summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.adj-hint { font-size: 14px; color: var(--soft, #766a6f); margin: 0 0 8px; }
.adj-group { margin-bottom: 10px; }
.adj-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--soft, #766a6f); margin: 8px 0 4px; }
.adj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 2.6em; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.adj-row input { width: 100%; min-width: 0; }
.adj-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft, #766a6f); }
.adj .btn { margin: 4px 0 12px; }
@media (max-width: 420px) { .adj-row { grid-template-columns: 1fr 2.6em; } .adj-row span { grid-column: 1 / -1; } }

/* Achtergrond van de foto weghalen */
.cut-box { margin: 4px 0 12px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.cut-box .hint { margin: 0; font-size: 14px; }
.cut-colors { display: flex; gap: 12px; justify-content: center; }
.cut-col { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line, #e7dcd6); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.cut-col.on { outline: 3px solid var(--primary, #6b1e2e); outline-offset: 2px; }

/* Het voorbeeld bovenaan is ook de foto die je verschuift; blijft in beeld bij alle keuzes en schuifjes */
.ont-sticky .pe-sticky { max-width: 180px; margin: 0 auto 6px; }
.ont-sticky .pe-buttons { margin-bottom: 2px; }
.ont-sticky .pe-buttons .btn { height: 36px; min-width: 48px; font-size: 18px; }
.ont-sticky .pe-buttons .btn-ghost { font-size: 14px; }
@media (min-width: 700px) { .ont-sticky .pe-sticky { max-width: 220px; } }