/* iziWEDD Editor — mobile variant (index-mobile.html), portrait phone screens.
   Standalone stylesheet: the mobile page links ONLY this file, never app.css,
   so the desktop editor (index.html + app.css) is untouched byte for byte.
   Same palette and component language as app.css; the layout is re-arranged
   for a vertical screen:
     single top bar: [Dovratak] [category buttons] [Opcije] [Dovrši]
     -> shared slot (#content): the category examples (#library) or the
        element options (#props), swapped via .opts-mode
     -> design canvas (center, auto-fit, never scrolls)
   The order wizard is one full-screen column that follows the dynamic
   viewport (100dvh), so the on-screen keyboard never hides the actions.
   Touch-first: :hover effects are replaced by :active / .selected states. */

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh; /* dynamic viewport: follows the on-screen keyboard */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #3a3532;
  background: #f7f4ef;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font-family: inherit; }

/* 16px on form controls: iOS Safari zooms in on focus for anything
   smaller; the id rules below re-size individual controls. */
input, select, textarea { font-size: 16px; }

/* The `hidden` attribute must always win over display rules below
   (same reason as in app.css: admin topbar buttons would leak). */
[hidden] { display: none !important; }

/* ---------- topbar (single compact row) ----------
   [Dovratak] [ Tekst · Ilustracije · Ikone · Predlošci · Učitaj · Papir ]
   [Opcije] [Dovrši]
   The old title/zoom rows are gone: the zoom is automatic (JS fitZoom,
   the stage never scrolls) and the category buttons share this bar.
   The red edge buttons mark the entry/exit of the flow.
   the rail buttons take min-width 0, so they compress (a few px at
   390px) instead of wrapping or scrolling. */

#topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  padding: 6px;
  background: #ffffff;
  border-bottom: 1px solid #e5ded3;
  flex: none;
}

/* red edge buttons: Dovratak (left) and Dovrši (right) */
.btn-top {
  flex: none;
  background: #6b2633;
  color: #fff;
  border: 1px solid #6b2633;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-top:active { background: #7d3040; }

.admin-badge {
  flex: none;
  background: #6b2633;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- workspace column ---------- */

#workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* shared slot under the bar: the category examples (#library) or the
   element options (#props). JS toggles .opts-mode on this container;
   the visible child scrolls inside the slot's height cap. */
#content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fcfaf6;
}

/* #content wraps the library, the props and the stage (the DOM order —
   the props sit in the SAME top slot as the library). The library and
   the props are FIXED to the same height: #stage — flex 1, always last —
   therefore keeps one constant box in every state (any category shown,
   options shown, nothing shown), so the design sits at the bottom and
   never moves or rescales when the user switches panels.
   overflow-y stays as a scroll fallback for very short viewports. */
#content #library {
  flex: 0 0 auto;
  min-height: 0;
  height: 30vh;
  height: 30dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
}
#content #props { display: none; }

#content.opts-mode #library { display: none; }
#content.opts-mode #props {
  flex: 0 0 auto;
  min-height: 0;
  height: 30vh;
  height: 30dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
}

/* ---------- category strip (inside the topbar, no scroll) ---------- */

#rail {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
  -webkit-user-select: none;
  user-select: none;
}

/* compressed buttons: they share the free space between the red edge
   buttons; no horizontal scroll, ever */
.rail-btn {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e3dbce;
  background: #fff;
  border-radius: 8px;
  padding: 7px 2px;
  cursor: pointer;
  color: #6d645c;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.rail-btn:active { background: #faf6f0; color: #3a3532; }
.rail-btn.active { background: #f3e9e6; border-color: #6b2633; color: #6b2633; font-weight: 600; }

.rail-label { font-size: 9px; line-height: 1.15; text-align: center; }

/* ---------- library (examples, inside the shared #content slot) ---------- */

.lib-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lib-head h2 { margin: 0; font-size: 14px; font-weight: 600; flex: none; }

/* the mobile grids are swiped, not filtered: the search is desktop-only
   (the elements stay in the DOM for the shared app.js wiring) */
#libSearchWrap { display: none; }
#libSearch {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #ddd4c6;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
}

.lib-panel { display: none; }
.lib-panel.active { display: block; }

.lib-sub {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8178;
}
.lib-sub:first-child { margin-top: 0; }

/* one-row swipable card strip */
.card-grid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.card-grid::-webkit-scrollbar { height: 4px; }
.card-grid::-webkit-scrollbar-thumb { background: #d8cdbd; border-radius: 99px; }

.card-grid > .lib-card { flex: 0 0 auto; width: 72px; }

/* fonts: the two stacked rows share ONE horizontal scrollbar — the panel
   itself scrolls and the rows just flow inside it (no per-row scroll) */
#libText {
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#libText::-webkit-scrollbar { height: 4px; }
#libText::-webkit-scrollbar-thumb { background: #d8cdbd; border-radius: 99px; }
#libText .card-grid { overflow: visible; }

#textGridRegular { margin-top: 8px; }

/* ilustracije and ikone: two rows (column-first grid) that share one
   horizontal scrollbar — one swipe moves both rows together */
#ilcGrid, #iconGrid {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: 76px;
  overflow-x: auto;
  overflow-y: hidden;
}
#ilcGrid .lib-card, #iconGrid .lib-card { width: 100%; }

.lib-card {
  border: 1px solid #e3dbce;
  background: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  -webkit-user-select: none;
  user-select: none;
}
/* touch: press feedback instead of the desktop sticky hover */
.lib-card:active { border-color: #b9a48f; box-shadow: 0 2px 8px rgba(90, 70, 50, .10); }

.lib-card img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  background:
    linear-gradient(45deg, #f6f2ea 25%, transparent 25%, transparent 75%, #f6f2ea 75%),
    linear-gradient(45deg, #f6f2ea 25%, #fff 25%, #fff 75%, #f6f2ea 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

.lib-card .card-name {
  font-size: 9.5px;
  color: #8a8178;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-card .font-sample {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  overflow: hidden;
  line-height: 1.1;
  padding: 4px;
}

/* paper picker: every paper on one row, no scroll — the cards share the
   width (flex 1) and the swatch is small */
.paper-grid {
  display: flex;
  gap: 8px;
  overscroll-behavior: contain;
}

.paper-card {
  flex: 1 1 0;
  min-width: 0;
  border: 2px solid #e3dbce;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paper-card img { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; }
.paper-card .paper-name { font-size: 10.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.paper-card .paper-tag { font-size: 9.5px; color: #8a8178; text-align: center; line-height: 1.2; }
.paper-card.selected { border-color: #6b2633; }

/* compact upload box: it shares the fixed slot height with the other
   category panels, so the note and button stay small (no scroll) */
.upload-box {
  border: 2px dashed #d8cdbd;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  background: #fff;
}
.upload-box p { margin: 6px 0; line-height: 1.4; font-size: 12.5px; }
.upload-box .btn-primary { padding: 8px 16px; font-size: 13px; }
.upload-title { font-weight: 600; }
.upload-msg { min-height: 16px; color: #6b2633; font-size: 12.5px; }
.upload-msg.error { color: #b3261e; }

.empty-note {
  border: 1px solid #e3dbce;
  background: #fff;
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.empty-note p { margin: 6px 0; line-height: 1.45; }
.muted { color: #8a8178; font-size: 12.5px; }

/* ---------- templates ---------- */

.tpl-admin { margin-bottom: 12px; }
#tplSaveForm { margin-top: 10px; }

.tpl-save-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tpl-save-row .btn-ghost { flex: none; }
#tplName {
  flex: 1;
  min-width: 0;
  border: 1px solid #ddd4c6;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
}
#tplName::placeholder { color: #a89e92; }

.tpl-card { position: relative; }
/* templates stay on one row, with slightly bigger thumbnails */
#tplGrid > .tpl-card { width: 88px; }
.tpl-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 665;
  object-fit: cover;
  border-radius: 7px;
  background: #f6f2ea;
}
.tpl-card .card-name {
  font-size: 10.5px;
  color: #4a4238;
  padding: 2px 2px 0;
}
.tpl-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  line-height: 24px;
  padding: 0;
  border: 1px solid #e3dbce;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #6b2633;
  font-size: 14px;
  cursor: pointer;
}
.tpl-del:active { background: #6b2633; color: #fff; border-color: #6b2633; }

/* ---------- buttons ---------- */

.btn-primary {
  background: #6b2633;
  color: #fff;
  border: 1px solid #6b2633;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}
.btn-primary:active:not(:disabled) { background: #7d3040; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-primary.btn-big { font-size: 15px; padding: 13px 16px; }

.btn-ghost {
  background: #fff;
  border: 1px solid #ddd4c6;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: #4a443f;
  cursor: pointer;
}
.btn-ghost:active:not(:disabled) { border-color: #b9a48f; background: #faf6f0; }
.btn-ghost:disabled { opacity: .45; cursor: default; }
.btn-ghost.active-state { border-color: #6b2633; color: #6b2633; background: #f3e9e6; }

.btn-danger {
  background: #fff;
  border: 1px solid #d3a9a3;
  color: #8c3a32;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
}
.btn-danger:active { background: #fbf1ef; border-color: #8c3a32; }

.btn-ico { width: 14px; height: 14px; flex: none; }
.btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }

/* ---------- stage (design canvas, center) ---------- */

#stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: #ece7df;
  display: flex;
  align-items: center;
  justify-content: center;
  /* auto-fit (JS fitZoom) keeps the whole design visible — no scroll */
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
}

#stageInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* no margin:auto — #stageInner's layout box (480x665) is larger than
     #stage, and auto margins top-align it (the shell then hangs below the
     stage and the design clips). The flex parent centers the overflow
     equally on both axes instead. */
}

#canvasShell {
  position: relative;
  box-shadow: 0 10px 30px rgba(70, 50, 35, .25);
  border-radius: 3px;
  overflow: hidden;
  /* zoom <= 100%: CSS scale on the whole shell (as on desktop);
     zoom > 100%: the canvas element grows instead */
  transform-origin: center center;
}

/* fabric owns these canvases; keep browser gestures (page scroll,
   double-tap zoom) from fighting object dragging */
#canvasShell canvas { touch-action: none; }
#paperCanvas { display: block; background: #fff; }

/* sheet-edge depth (same presentational overlay as the desktop) */
#paperEdge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 1px 0 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(70, 50, 35, 0.22),
    inset -1px 0 0 rgba(70, 50, 35, 0.28);
}

/* dashed outline of the layer under the cursor (mouse-only; on touch the
   app self-cleans it on touchend — see app.js evalHover) */
#hoverBox {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px dashed rgba(107, 38, 51, 0.5);
  border-radius: 3px;
  opacity: 0.6;
}

/* ---------- props (element options, in the shared #content slot) ----------
   The desktop right column, squeezed into the shared slot that swaps
   with the category examples. The sloj buttons and the text-content
   field are hidden in the mobile HTML (text is edited directly on the
   canvas). Rows are compact; the three text sliders share one row. */

/* the empty hint is vertically centered in the fixed slot */
.props-empty {
  color: #8a8178;
  text-align: center;
  padding: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  margin: auto 0;
}

/* the panel context is obvious (the Opcije button highlights) — the
   section titles are hidden so the options fit the fixed slot height
   without scrolling */
.props-group h3 { display: none; }

.props-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}
.props-row label { font-size: 10px; color: #6d645c; }
.props-row .val { color: #3a3532; font-weight: 600; }

/* the font label and the dropdown share one compact row */
.props-font-row { flex-direction: row; align-items: center; gap: 8px; }

.props-row input[type="range"] { width: 100%; height: 22px; accent-color: #6b2633; }

/* the three text sliders share one row, end to end */
.props-sliders3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.slider-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slider-cell label { font-size: 9.5px; white-space: nowrap; }

/* color picker + swatches in one row */
.props-color-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#fontColor {
  flex: none;
  width: 52px;
  height: 28px;
  border: 1px solid #ddd4c6;
  border-radius: 8px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}

/* five compact text-format chips in one row */
.props-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.props-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.props-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.props-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* compact action buttons: icon + short label */
#props .btn-ghost {
  font-size: 9.5px;
  line-height: 1.2;
  padding: 6px 2px;
  text-align: center;
}
#props .btn-danger { font-size: 9.5px; line-height: 1.2; padding: 6px 2px; text-align: center; }

#fontSelect {
  width: 100%;
  border: 1px solid #ddd4c6;
  border-radius: 8px;
  font-size: 13px;
  padding: 3px;
  background: #fff;
}
#fontSelect option { font-size: 14px; padding: 2px 6px; }

.swatch-row { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ddd4c6;
  cursor: pointer;
}

.lib-card-info { align-items: flex-start !important; justify-content: flex-start !important; color: #8a6d5a; padding: 12px; border-style: dashed; }

/* ---------- wizard (one full-screen column) ---------- */

#wizardOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; /* shrinks with the virtual keyboard */
  background: rgba(43, 34, 29, .55);
  backdrop-filter: blur(2px);
  z-index: 50;
}
#wizardOverlay[hidden] { display: none; }

/* main + side stacked in a single scroll flow */
#wizard {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fdfbf8;
  border-radius: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* pinned to the top of the wizard scroll flow */
.wizard-close {
  position: sticky;
  top: 10px;
  width: 36px;
  height: 36px;
  margin: 0 10px 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: #fff;
  border: 1px solid #ddd4c6;
  border-radius: 50%;
  font-size: 14px;
  color: #4a443f;
  padding: 0;
}

#wizardMain { padding: 14px 14px 8px; }

/* step pills: single row, swipe horizontally if they overflow */
#wizardSteps {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  margin: 8px 0 16px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#wizardSteps::-webkit-scrollbar { display: none; }
#wizardSteps li {
  flex: none;
  font-size: 11.5px;
  color: #8a8178;
  background: #f0eae0;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
#wizardSteps li.current { background: #6b2633; color: #fff; font-weight: 600; }
#wizardSteps li.done { background: #e4ded2; color: #4a443f; }

.wz-step { display: none; }
.wz-step.active { display: block; }
.wz-step h2 { margin: 0 0 6px; font-size: 18px; }

.wz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
/* primary action stretches to full width; ghost "Nazad" stays compact */
.wz-actions .btn-primary { flex: 1; min-width: 0; }
.wz-actions .btn-ghost { flex: none; }
.wz-actions-center { justify-content: center; margin-top: 14px; }

/* envelope picker: 3 shapes / 4 colors per row */
.env-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
#shapeGrid { grid-template-columns: repeat(3, 1fr); }
#colorGrid { grid-template-columns: repeat(4, 1fr); }

.env-card {
  border: none;
  border-radius: 10px;
  background: #f6f2ea;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 1px 4px rgba(70, 50, 35, .10);
  transition: box-shadow .15s ease;
}
.env-card img { width: 100%; height: 84px; object-fit: contain; background: transparent; border-radius: 6px; }
.env-card .env-swatch { width: 100%; height: 84px; border-radius: 6px; border: 1px solid rgba(70, 50, 35, 0.12); }
.env-card .env-name { font-size: 11px; font-weight: 600; text-align: center; }
.env-card .env-code { font-size: 10px; color: #8a8178; text-align: center; }
.env-card.selected { box-shadow: 0 0 0 2px #6b2633, 0 3px 10px rgba(70, 50, 35, .18); }

/* touch replacement for the desktop 1.5x hover zoom: a press gives a
   1.15x peek, the tapped (selected) card stays slightly enlarged, since
   touch has no hover to fall back on */
#wzShape .env-card, #wzColor .env-card {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
#wzShape .env-card:active, #wzColor .env-card:active {
  transform: scale(1.15);
  z-index: 30;
  box-shadow: 0 12px 30px rgba(30, 20, 15, .28);
}
#wzShape .env-card.selected, #wzColor .env-card.selected { transform: scale(1.08); z-index: 30; }

.qty-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
#qtyInput {
  width: 130px;
  border: 1px solid #ddd4c6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  background: #fff;
}
.qty-price { flex: 1; min-width: 0; }
.qty-price div { margin: 2px 0; font-size: 13px; }
#qtyUnit { font-weight: 600; }

.field-error { color: #8c3a32; font-size: 12px; min-height: 16px; margin-top: 4px; }

/* form: one column on a phone */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field.field-wide { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; }
.field .req { color: #8c3a32; }
.field input, .field textarea {
  border: 1px solid #ddd4c6;
  border-radius: 9px;
  padding: 10px 12px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid rgba(107, 38, 51, .35); border-color: #6b2633; }
.field .field-error { min-height: 14px; }

/* review: design + envelope stacked */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.review-card {
  border: 1px solid #e3dbce;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
}
.review-card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b2633; }
.review-card img { max-width: 100%; max-height: 260px; display: block; margin: 0 auto; box-shadow: 0 4px 14px rgba(70, 50, 35, .15); }

.accept-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: 13.5px;
  cursor: pointer;
  line-height: 1.45;
}
.accept-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: #6b2633; }
.accept-row.accept-prominent {
  justify-content: center;
  margin: 22px 0 14px;
  padding: 13px 16px;
  background: #f6f1e8;
  border: 1px solid #e3dbce;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
}
.accept-row.accept-prominent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }

#submitMsg { max-width: 100%; }
#btnSubmit { width: 100%; }

.done-box { text-align: center; padding: 30px 12px; }
.done-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #4b6b4b;
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.done-box h2 { margin: 0 0 12px; font-size: 20px; }
.done-box p { margin: 8px auto; max-width: 520px; line-height: 1.6; }
#btnBackSite { display: block; width: 100%; margin: 18px auto 10px; }

/* ---------- wizard side (stacked below main) ---------- */

#wizardSide {
  border-left: 0;
  border-top: 1px solid #e5ded3;
  background: #fff;
  padding: 16px 14px 20px;
}
#wizardSide h3 { margin: 0 0 12px; font-size: 14px; }

.side-preview { margin-bottom: 14px; }
#sideDesign { width: 100%; max-width: 130px; display: block; margin: 0 auto 10px; box-shadow: 0 4px 14px rgba(70, 50, 35, .15); }
.side-meta { display: flex; flex-direction: column; gap: 4px; }
.side-meta .m-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #4a443f; }
.side-meta .m-line b { font-weight: 600; }
.side-meta .env-thumb { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.side-meta .env-thumb img { width: 40px; height: 30px; object-fit: contain; background: #f6f2ea; border-radius: 4px; }

.price-list { margin: 0; }
.price-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #eee6d9; font-size: 13px; }
.price-list dt { color: #6d645c; }
.price-list dd { margin: 0; font-weight: 600; }
.price-list .pl-total { border-bottom: 0; margin-top: 4px; }
.price-list .pl-total dt { font-size: 15px; color: #3a3532; }
.price-list .pl-total dd { font-size: 17px; color: #6b2633; }

.cjenik { margin-top: 18px; background: #faf7f2; border: 1px solid #ece5d8; border-radius: 12px; padding: 12px 14px; }
.cjenik h4 { margin: 0 0 8px; font-size: 12px; }
.cjenik dl { margin: 0; }
.cjenik > dl > div { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.cjenik dt { color: #6d645c; }
.cjenik dd { margin: 0; font-weight: 600; }

/* ---------- scrolling ---------- */

#library::-webkit-scrollbar, #props::-webkit-scrollbar, #wizard::-webkit-scrollbar { width: 6px; }
#library::-webkit-scrollbar-thumb, #props::-webkit-scrollbar-thumb, #wizard::-webkit-scrollbar-thumb {
  background: #d8cdbd;
  border-radius: 99px;
}