/* Mount UI inside the viewer (optional).
   For the template/step cards we use the standard template button styling. */
.avpw-pc-viewer .avpw-pc-mount{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.avpw-pc-viewer .avpw-pc-mount-btn{border:1px solid #e6e9ef;background:#f7f9fc;border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer;font-family:inherit;}
.avpw-pc-viewer .avpw-pc-mount-btn.is-active{background:#fff;border-color:#9fb3d9;}
.avpw-pc-viewer{width:100%;}
.avpw-pc-board{position:relative;width:100%;height:100%;border:1px solid #e6e9ef;border-radius:14px;background:#fff;overflow:hidden;}
.avpw-pc-panelcolor-overlay2{position:absolute;pointer-events:none;z-index:0;border-radius:14px;display:none;}
.avpw-pc-preview-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:#fff;}
.avpw-pc-preview-layer svg{width:100%;height:100%;display:block;}
.avpw-pc-preview-layer.avpw-pc-preview-invert{filter:invert(1);}

/* Connector/Hole overlays: force monochrome for maximum contrast.
   - On light panels: black
   - On dark panels: white */
.avpw-pc-board .avpw-pc-placed-img{
  filter: brightness(0) saturate(100%) !important;
}
.avpw-pc-board.avpw-pc-panel-dark .avpw-pc-placed-img{
  filter: brightness(0) saturate(100%) invert(1) !important;
}
/* If a theme/plugin injects inline SVGs for overlays, enforce the same monochrome rule. */
.avpw-pc-board .avpw-pc-placed svg{
  filter: brightness(0) saturate(100%) !important;
}
.avpw-pc-board.avpw-pc-panel-dark .avpw-pc-placed svg{
  filter: brightness(0) saturate(100%) invert(1) !important;
}
.avpw-pc-board-inner{position:absolute;inset:0;z-index:2;}
.avpw-pc-slot{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:999px;border:1px dashed #cfd6e4;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;user-select:none}
.avpw-pc-slot.is-over{border-style:solid;}
.avpw-pc-slot.is-filled{border-style:solid;}
.avpw-pc-slot-hint{font-size:12px;opacity:.55}
.avpw-pc-overlay{max-width:40px;max-height:40px;display:block;}
.avpw-pc-slot-label{font-size:10px;line-height:1.1;text-align:center;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.avpw-pc-palette{border:1px solid #e6e9ef;border-radius:14px;padding:12px;background:#fff;}
.avpw-pc-palette-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.avpw-pc-tab{border:1px solid #e6e9ef;background:#f7f9fc;border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer;}
.avpw-pc-tab.is-active{background:#fff;border-color:#9fb3d9;}
.avpw-pc-palette-grid{display:grid;grid-template-columns:repeat(var(--avpw-cols,4), minmax(0,1fr));grid-auto-rows:minmax(var(--avpw-card-h,130px), auto);gap:10px;max-height:var(--avpw-grid-max-h,520px);overflow:auto;padding-right:6px;}
.avpw-pc-item{min-height:var(--avpw-card-h,130px);border:1px solid #e6e9ef;border-radius:12px;padding:10px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;}
.avpw-pc-item:hover{border-color:#9fb3d9;}
.avpw-pc-item img{max-width:56px;max-height:56px;display:block;}
.avpw-pc-item-label{font-size:16px;font-weight:800;text-align:center;line-height:1.2;margin-top:6px;max-width:100%;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.avpw-pc-summary{border:1px solid #e6e9ef;border-radius:14px;padding:12px;background:#fff;}
.avpw-pc-summary-title{font-weight:600;margin-bottom:8px;}
.avpw-pc-summary-list{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.avpw-pc-summary-list li{display:flex;align-items:center;gap:8px;border:1px solid #eef1f7;border-radius:12px;padding:8px 10px;}
.avpw-pc-remove{border:0;background:#eef1f7;border-radius:10px;width:28px;height:28px;cursor:pointer;font-size:16px;line-height:28px;}
.avpw-pc-empty{opacity:.6}
.avpw-pc-add{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:12px 16px;border:1px solid #9fb3d9;background:#0b5cff;color:#fff;font-weight:700;cursor:pointer;font-family:inherit;}
.avpw-pc-notice{border-radius:14px;padding:10px 12px;border:1px solid #e6e9ef;background:#fff;}
.avpw-pc-notice.avpw-error{border-color:#f1b3b3;background:#fff5f5;}
.avpw-pc-notice.avpw-success{border-color:#b7e0c2;background:#f5fff7;}
.avpw-pc-notice.avpw-info{border-color:#cfe0ff;background:#f5f9ff;}
.avpw-pc-loading,.avpw-pc-palette-empty{padding:14px;opacity:.7}


/* DXF layer */
.avpw-pc-board-inner{ position:relative; }
.avpw-pc-dxf-layer{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55; }
.avpw-pc-dxf-layer svg{ width:100%; height:100%; }
.avpw-pc-dxf-layer svg line,
.avpw-pc-dxf-layer svg path,
.avpw-pc-dxf-layer svg circle{ stroke: currentColor; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.avpw-pc-slot{ z-index:2; }


/* Rail placement layers */
.avpw-pc-holes-layer,.avpw-pc-items-layer{ position:absolute; inset:0; z-index:1; }
.avpw-pc-items-layer{ z-index:2; }
.avpw-pc-empty-hole{ pointer-events:none; }
.avpw-pc-placed-label{ line-height:1.1; }

.avpw-pc-rail-guide{ pointer-events:none; }

/* Snap helper lines (shown while dragging) */
.avpw-pc-snap-guide{ pointer-events:none; }
.avpw-pc-snap-line{ position:absolute; }
.avpw-pc-snap-line-x{ top:0; bottom:0; width:0; border-left:1px dashed rgba(11,92,255,.65); opacity:.9; }

/* Cart / checkout extras */
.avpw-pc-edit-link{ display:inline-block; margin-top:6px; font-weight:700; text-decoration:underline; }
.avpw-pc-bd{ margin-top:6px; }
.avpw-pc-bd summary{ cursor:pointer; font-weight:700; }
.avpw-pc-bd-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.avpw-pc-snap-line-y{ left:0; right:0; height:0; border-top:1px dashed rgba(11,92,255,.65); opacity:.9; }


/* Placed item remove button */
.avpw-pc-placed{ position:absolute; }
.avpw-pc-placed.is-invalid{ outline:2px solid #d63638; outline-offset:2px; border-radius:10px; }
.avpw-pc-placed-remove{
  position:absolute;
  top:-6px;
  right:-6px;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  font-size:12px;
  line-height:14px;
  padding:0;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.avpw-pc-placed-remove:hover{
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}


/* Show remove button only on hover/focus */
.avpw-pc-remove-btn{opacity:0; transform:scale(.92); pointer-events:none; transition:opacity .15s ease, transform .15s ease;}
.avpw-pc-placed:hover .avpw-pc-remove-btn,
.avpw-pc-placed:focus-within .avpw-pc-remove-btn{opacity:1; transform:scale(1); pointer-events:auto;}


/* Palette description */
.avpw-pc-item-desc{font-size:12px; opacity:.75; margin-top:4px; line-height:1.35;text-align:center;}
.avpw-pc-item-desc br{display:block; content:''; margin-top:4px;}
.avpw-pc-item-price{font-size:13px;font-weight:700;margin-top:6px;line-height:1.2;text-align:center;}
.avpw-pc-item-price .woocommerce-Price-amount{font-weight:700;}


/* No labels under placed items in viewer */
.avpw-pc-placed-label{display:none !important;}


/* Palette title (always visible) */
.avpw-pc-item-label{font-size:15px;font-weight:700;}


/* Palette card title */
.avpw-pc-item-title{font-size:16px !important;font-weight:800 !important;color:#111 !important;text-align:center;line-height:1.2;margin-top:8px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

.avpw-pc-item-desc{font-size:12px !important;opacity:.75;text-align:center;margin-top:4px;line-height:1.35;}

.avpw-pc-item-title, .avpw-pc-item-desc{display:block;}

.avpw-pc-item-title{display:block !important;}


/* Palette price */
.avpw-pc-item-price{font-size:14px;font-weight:700; text-align:center; margin-top:6px;}


/* Totals module */
.avpw-pc-totals{background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,0.05);}
.avpw-pc-totals-title{font-size:16px;font-weight:800;margin-bottom:10px;}
.avpw-pc-totals-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #eef1f5;}
.avpw-pc-totals-row:first-of-type{border-top:0;}
.avpw-pc-totals-total strong{font-size:18px;}

.avpw-pc-totals-totalwrap{display:flex;flex-direction:column;align-items:flex-end;}
.avpw-pc-totals-sum-secondary{font-size:12px;opacity:.7;margin-top:2px;}

/* VAT suffix label */
.avpw-pc-vat{font-size:12px;opacity:.65;margin-left:6px;white-space:nowrap;font-weight:400;}


/* Template selector module */
.avpw-pc-template{border:1px solid #e6e9ef;border-radius:14px;background:#fff;padding:14px;margin:0 0 14px;}
.avpw-pc-template-label{font-weight:700;margin-bottom:10px;}
.avpw-pc-template-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.avpw-pc-template-btn{
  border:1px solid #d7dbe5;
  background:#f7f8fb;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-family:inherit !important;
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  text-transform:none;
  letter-spacing:normal;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:44px;
  box-sizing:border-box;
}
.avpw-pc-template-btn.is-active{background:#1e73be !important;color:#fff !important;border-color:#1e73be !important;}
.avpw-pc-template-btn.avpw-suggest{animation:avpwPulse .9s ease-in-out 0s 3;}

/* Equal-width button groups (mount / mode / panel color).
   Explicit column counts prevent theme CSS from pushing the last button to a new row. */
.avpw-pc-mount-choice .avpw-pc-template-buttons{
  display:grid !important;
  gap:10px;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  width:100%;
  align-items:stretch;
}
.avpw-pc-mount.avpw-pc-template-buttons{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px;width:100%;align-items:stretch;}
.avpw-pc-mode-choice .avpw-pc-template-buttons{
  display:grid !important;
  gap:10px;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  width:100%;
  align-items:stretch;
}
.avpw-pc-mode.avpw-pc-template-buttons{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px;width:100%;align-items:stretch;}
.avpw-pc-color .avpw-pc-template-buttons{
  display:grid !important;
  gap:10px;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  width:100%;
  align-items:stretch;
}
.avpw-pc-color-buttons.avpw-pc-template-buttons{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px;width:100%;align-items:stretch;}
@media (max-width: 600px){
  /* Keep mode buttons on one row even on mobile (requested) */
  .avpw-pc-mode-choice .avpw-pc-template-buttons{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .avpw-pc-color .avpw-pc-template-buttons{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.avpw-pc-mount-choice .avpw-pc-template-buttons > button,
.avpw-pc-mode-choice .avpw-pc-template-buttons > button,
.avpw-pc-color .avpw-pc-template-buttons > button{
  width:100%;
  min-width:0;
  text-align:center;
  white-space:normal;
  /* Defensive: some themes apply grid-column:1/-1 to the last button; undo it. */
  grid-column:auto !important;
}
/* Mount buttons carry an extra class (avpw-pc-mount-btn) that used pill styling.
   When used inside template cards, match the standard button style. */
.avpw-pc-mount-btn.avpw-pc-template-btn{
  border-radius:10px;
  padding:8px 12px;
  background:#f7f8fb;
  border:1px solid #d7dbe5;
}

@keyframes avpwPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,115,190,0);}
  50%{transform:scale(1.03);box-shadow:0 0 0 6px rgba(30,115,190,.18);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,115,190,0);}
}
.avpw-pc-template-select{width:100%;padding:10px;border-radius:10px;border:1px solid #d7dbe5;background:#fff;}

/* Mount chooser inside template card */
.avpw-pc-template .avpw-pc-mount.avpw-pc-template-buttons{margin-bottom:0;}

/* === Monochrome placed overlays (holes + connectors) ===
   Requested: same contrast behavior as panel outline: black on light panels, white on dark panels.
   We normalize placed images to "solid" black and invert on dark panels. */
.avpw-pc-placed-img{
  filter: grayscale(1) contrast(10) brightness(0);
}
.avpw-pc-panel-dark .avpw-pc-placed-img{
  filter: grayscale(1) contrast(10) brightness(0) invert(1);
}

/* ============================
   AVPW - Standard Height Guide Lines (always visible helpers)
   ============================ */
.avpw-pc-height-guides{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  pointer-events:none;
  z-index:4; /* above dxf/holes, below draggable items */
}

.avpw-pc-height-guide-line{
  position:absolute;
  left:0; right:0;
  height:0;
  border-top:1px dashed rgba(0,0,0,.35);
  opacity:.9;
}

.avpw-pc-height-guide-handle{
  position:absolute;
  right:6px;
  top:-8px;
  width:38px;
  height:16px;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  font-size:11px;
  line-height:14px;
  text-align:center;
  color:rgba(0,0,0,.7);
  pointer-events:auto;
  cursor:ns-resize;
  user-select:none;
}

.avpw-pc-template-guides-ui{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.avpw-pc-template-guides-ui label{
  display:inline-flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  font-size:13px;
}

/* Move guides toggle into the viewer (top-right) */
.avpw-pc-viewer-guides-ui{
  position:absolute;
  top:12px;
  right:12px;
  z-index: 20;
  /* No separate "box" — keep it subtle */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.avpw-pc-viewer-guides-ui label{
  display:inline-flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  font-size: 13px;
  margin:0;
  padding: 4px 6px; /* clickable area */
  border-radius: 8px;
}

.avpw-pc-viewer-guides-ui label:hover{
  background: rgba(255,255,255,.55);
}

/* The old location (under the height card) is no longer used */
.avpw-pc-template-guides-ui{ display:none !important; }

/* ----------------------------
   Extras (vorm & tekst)
   ---------------------------- */
.avpw-pc-extras-layer{ position:absolute; inset:0; z-index:3; pointer-events:auto; }
.avpw-pc-extra{ box-sizing:border-box; }
.avpw-pc-extra.is-selected{ outline:2px solid rgba(11,92,255,.35); outline-offset:2px; border-radius:6px; }

/* Minimal controls: show a small toolbar OUTSIDE the field (prevents covering the content) */
.avpw-pc-extra-toolbar{
  position:absolute;
  top:50%;
  right:-28px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:4;
}
.avpw-pc-extra-toolbar .avpw-pc-extra-remove,
.avpw-pc-extra-toolbar .avpw-pc-extra-edit{
  position:static;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  font-size:13px;
  line-height:20px;
  padding:0;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* On touch devices there is no hover; show controls when selected */
.avpw-pc-extra.is-selected .avpw-pc-remove-btn{opacity:1; transform:scale(1); pointer-events:auto;}
.avpw-pc-extra:hover .avpw-pc-remove-btn,
.avpw-pc-extra:focus-within .avpw-pc-remove-btn{opacity:1; transform:scale(1); pointer-events:auto;}

.avpw-pc-extra-rect{ position:absolute; inset:0; border-radius:4px; }
.avpw-pc-extra-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 4px;
  white-space:pre-wrap;
  word-break:break-word;
  user-select:none;
}
.avpw-pc-extra-handle{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:10px;
  height:10px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.25);
  background:#fff;
  cursor:nwse-resize;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  opacity:0;
  pointer-events:none;
}
.avpw-pc-extra.is-selected .avpw-pc-extra-handle{ opacity:1; pointer-events:auto; }

.avpw-pc-item-extra .avpw-pc-extra-icon{
  width:56px;
  height:56px;
  border:1px solid #e6e9ef;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:28px;
  line-height:1;
  background:#f7f9fc;
}


/* View-only mode (order preview) */
.avpw-pc-view-only .avpw-pc-items-layer,
.avpw-pc-view-only .avpw-pc-holes-layer,
.avpw-pc-view-only .avpw-pc-extras-layer{
  pointer-events:none;
}
.avpw-pc-view-only .avpw-pc-summary .avpw-pc-remove{
  display:none !important;
}


/* Order details summary (customer + admin) */
.avpw-pc-order-summary{margin:6px 0 8px;}
.avpw-pc-order-line{margin:2px 0;}
.avpw-pc-view-link{display:inline-block;margin-top:4px;}

/* --- Dimension overlay (shown in step 4) --- */
.avpw-pc-dims{display:none;position:absolute;inset:0;pointer-events:none;z-index:50;}
/* Show dimension overlay in the final step. We support both mechanisms:
   1) body.avpw-step-4 (set by steps.js for the main flow)
   2) .avpw-show-dims on the viewer (set by conf.js on stepchange)
   The second one fixes cases where the body class isn't present (cached layouts / multiple flows).
*/
body.avpw-step-4 .avpw-pc-viewer .avpw-pc-dims,
.avpw-pc-viewer.avpw-show-dims .avpw-pc-dims{display:block;}
.avpw-pc-dim{position:absolute;font-size:12px;line-height:1;color:#111;z-index:2;}

/* CAD-style chain dimensions (SVG overlay) */
.avpw-pc-dims-chain{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}

/* Top (width) */
.avpw-pc-dim-top{left:52px;right:12px;top:8px;height:18px;display:flex;align-items:center;justify-content:center;}
.avpw-pc-dim-top:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(0,0,0,.55);}
.avpw-pc-dim-top:after{content:"";position:absolute;left:0;right:0;top:50%;height:12px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)) left center/1px 12px no-repeat,linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)) right center/1px 12px no-repeat;}
.avpw-pc-dim-top .avpw-pc-dim-val{position:relative;background:#fff;padding:2px 8px;}

/* Left (height) */
.avpw-pc-dim-left{left:8px;top:52px;bottom:12px;width:34px;display:flex;align-items:center;justify-content:center;}
.avpw-pc-dim-left:before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid rgba(0,0,0,.55);}
.avpw-pc-dim-left:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:12px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)) center top/12px 1px no-repeat,linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)) center bottom/12px 1px no-repeat;}
.avpw-pc-dim-left .avpw-pc-dim-val{position:relative;background:#fff;padding:2px 6px;transform:rotate(-90deg);white-space:nowrap;}

/* Debug/version badge (auto) */
.avpw-pc-board{position:relative;}
.avpw-pc-board .avpw-pc-version-badge{position:absolute;right:8px;bottom:6px;font-size:11px;line-height:1;padding:3px 6px;border-radius:10px;background:rgba(0,0,0,.45);color:#fff;z-index:999999;pointer-events:none;}