/* ═══════════════════════════════════════════════════════════════════════════
   PDP inline Personalize — modal + CTA chrome for the SVG engine
   (public/admin/js/svg-design-studio.js embedded on the public PDP).

   The engine's own stylesheets (public/admin/css/svg-design-studio.css +
   admin-design-studio.css) consume the admin token set (--bg-card, --accent,
   --text-muted, …) which the public shell doesn't define — the bridge below
   maps them onto Inkgility's public tokens, scoped to the personalize DOM
   only so nothing leaks into the page.
   ═══════════════════════════════════════════════════════════════════════════ */

#pdModalOverlay,
#pd-personalize-src {
  --font: 'DM Sans', sans-serif;
  --accent: var(--purple, #8E21CA);
  --accent-hover: #7a1bb0;
  --accent-dim: rgba(142, 33, 202, .14);
  --danger: #E74C3C;
  --bg-primary: var(--bg-warm, #FFF7FA);
  --bg-card: #ffffff;
  --bg-card-hover: #faf5fc;
  --bg-input: #ffffff;
  --border: rgba(58, 43, 95, .16);
  --border-hover: rgba(142, 33, 202, .45);
  --text-primary: var(--text-heading, #1A0F2A);
  --text-secondary: var(--text-body, #4a3f5c);
  --text-muted: var(--text-caption, #7a6e85);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  /* The engine's derived tokens are declared on :root (svg-design-studio.css),
     where the public page defines no admin tokens — so they collapse to their
     dark fallbacks (#fff text on the light modal). Re-declare them here so
     they re-resolve against the bridged values; the dark block below only
     overrides the underlying tokens and these follow automatically. */
  --ic-accent: var(--accent);
  --ic-border: var(--border);
  --ic-card: var(--bg-card);
  --ic-text: var(--text-primary);
  --ic-muted: var(--text-muted);
}
[data-theme="dark"] #pdModalOverlay,
[data-theme="dark"] #pd-personalize-src {
  --bg-primary: #150d22;
  --bg-card: #1e1430;
  --bg-card-hover: #271a3d;
  --bg-input: #150d22;
  --border: rgba(243, 235, 239, .14);
  --text-primary: var(--text-heading, #F3EBEF);
  --text-secondary: var(--text-body, #cfc4da);
  --text-muted: var(--text-caption, #9b8fa8);
}

/* ── Modal shell ───────────────────────────────────────────────────────── */
.pd-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 5, 20, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 9999; display: none;
  align-items: center; justify-content: center;
  padding: 30px 20px 20px;
}
.pd-modal-overlay.open { display: flex; }
.pd-modal {
  width: 100%; max-width: 1200px; max-height: calc(100vh - 50px);
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  font-family: var(--font);
}
.pd-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: var(--bg-card); flex-shrink: 0;
}
.pd-modal-title { display: flex; align-items: center; gap: 10px; }
.pd-modal-title svg { width: 20px; height: 20px; color: var(--accent); }
.pd-modal-title h3 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: 20px; letter-spacing: -.01em; margin: 0;
  color: var(--text-primary);
}
.pd-modal-card-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-primary); padding: 3px 10px; border-radius: 100px;
  border: 1px solid var(--border);
}
.pd-modal-actions { display: flex; align-items: center; gap: 10px; }
.pd-modal-save {
  padding: 10px 22px; border-radius: 60px;
  background: var(--btn-gradient, var(--accent)); color: #fff; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 6px; transition: all .2s;
  box-shadow: 0 6px 18px rgba(142, 33, 202, .30);
}
.pd-modal-save:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(142, 33, 202, .40); }
.pd-modal-save svg { width: 16px; height: 16px; }
.pd-modal-close {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .2s;
}
.pd-modal-close:hover { border-color: rgba(231, 76, 60, .4); color: #fb7185; background: rgba(231, 76, 60, .06); }
.pd-modal-close svg { width: 18px; height: 18px; }
.pd-modal-body { flex: 1; overflow-y: auto; padding: 24px; position: relative; }

/* ── Loading veil — covers the editor until the template fetch and engine
     boot settle (pdp-personalize.js toggles [hidden]) ─────────────────── */
.pd-modal-loading {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--bg-primary);
}
.pd-modal-loading[hidden] { display: none; }
.pd-modal-loading p { font-size: 14px; font-weight: 600; color: var(--text-muted); margin: 0; }
.pd-modal-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--accent-dim); border-top-color: var(--accent);
  animation: pdSpin .8s linear infinite;
}
@keyframes pdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pd-modal-spinner { animation-duration: 1.6s; } }
.pd-modal-canvas-col { display: flex; flex-direction: column; gap: 24px; }

/* ── Customer editor chrome overrides (transparent workspace) ─────────────
   The shared studio CSS paints the canvas surround dark (admin workspace);
   inside the customer modal it must stay transparent so the modal surface
   shows through. Scoped to .ic-customer-editor — the admin builder keeps
   its dark workspace untouched. */
.ic-customer-editor .ic-canvas-wrap,
.ic-customer-editor .pd-editor-canvas-wrap { background: transparent; }
.ic-customer-editor .ic-zoombar--overlay {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ic-customer-editor .ic-zoombar--overlay .ic-zoom-label { color: var(--text-secondary); }

/* QR note + link field (customer-only additions to the QR panel) */
.pd-edt-qr-note {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(142, 33, 202, .05); border: 1px solid rgba(142, 33, 202, .10);
  margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; line-height: 1.5; color: var(--text-secondary);
}
.pd-edt-qr-note svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); margin-top: 1px; }
.pd-edt-input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-primary); font-family: var(--font); font-size: 13px;
}
.pd-edt-input:focus { outline: none; border-color: var(--border-hover); }
.pd-group-swatches-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ── Personalize CTA trigger (prototype .ink-pz-* contract) ──────────────
   Lives inside the calculator (injected before the production group) on
   calculator products, or inline in the buy box on ladder products. */
.ink-pz-cta { margin: 18px 0 22px; padding: 0; }
.ink-pz-trigger {
  width: 100%; padding: 18px 22px;
  border: 2px solid transparent; border-radius: 12px;
  background:
    linear-gradient(var(--bg-warm, #FFF7FA), var(--bg-warm, #FFF7FA)) padding-box,
    var(--btn-gradient) border-box;
  cursor: pointer; display: flex; align-items: center; gap: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--purple, #8E21CA);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(142, 33, 202, .10);
}
.ink-pz-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(142, 33, 202, .20); }
.ink-pz-trigger svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--purple, #8E21CA); }
.ink-pz-trigger > span:first-of-type {
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px;
  font-weight: 500; color: var(--text-heading, #1A0F2A);
}
.ink-pz-hint {
  margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-caption, #7a6e85); font-weight: 600;
  text-align: right;
}
[data-theme="dark"] .ink-pz-trigger {
  background:
    linear-gradient(#1A0F2A, #1A0F2A) padding-box,
    var(--btn-gradient) border-box;
  color: var(--text-heading);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .30);
}
[data-theme="dark"] .ink-pz-trigger:hover { box-shadow: 0 6px 18px rgba(142, 33, 202, .45); }
[data-theme="dark"] .ink-pz-trigger > span:first-of-type { color: var(--text-heading); }

/* Saved-design preview card (appears after Save & Continue) */
.ink-pz-preview { display: none; }
.ink-pz-preview.on {
  margin-top: 10px; padding: 14px;
  border: 1px solid var(--border, rgba(58, 43, 95, .18));
  border-radius: 10px; background: rgba(142, 33, 202, .04);
  display: flex; align-items: center; gap: 12px;
}
[data-theme="dark"] .ink-pz-preview.on {
  background: rgba(142, 33, 202, .14);
  border-color: rgba(243, 235, 239, .18);
}
.ink-pz-preview-img {
  width: 92px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border, rgba(58, 43, 95, .18)); background: #fff;
}
.ink-pz-preview-img img { display: block; width: 100%; height: auto; }
.ink-pz-preview-info { min-width: 0; }
.ink-pz-preview-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #27ae60;
}
.ink-pz-preview-label svg { width: 13px; height: 13px; }
.ink-pz-preview-name {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text-heading, #1A0F2A); margin: 4px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ink-pz-preview-actions { display: flex; gap: 8px; }
.ink-pz-preview-actions button {
  padding: 6px 14px; border-radius: 60px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--purple, #8E21CA);
  background: transparent; color: var(--purple, #8E21CA);
  transition: all .2s;
}
.ink-pz-preview-actions button:hover { background: rgba(142, 33, 202, .08); }
.ink-pz-preview-actions .ink-pz-reset {
  border-color: var(--border, rgba(58, 43, 95, .25)); color: var(--text-caption, #7a6e85);
}
[data-theme="dark"] .ink-pz-preview-name { color: var(--text-heading); }

/* ── Engine bottom-bar secondary Personalize button (prototype parity) ─── */
#config-section .ink-bar-personalize {
  padding: 11px 20px; border-radius: 8px;
  background: transparent; border: 1.5px solid var(--purple, #8E21CA);
  color: var(--purple, #8E21CA);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
#config-section .ink-bar-personalize:hover { background: rgba(142, 33, 202, .08); }
[data-theme="dark"] #config-section .ink-bar-personalize:hover { background: rgba(142, 33, 202, .18); }
@media (max-width: 720px) {
  #config-section .ink-bar-personalize { display: none; }
}

/* ── Responsive modal ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-modal-overlay { padding: 30px 0 0; align-items: stretch; overflow: hidden; }
  .pd-modal { max-width: 100%; max-height: calc(100vh - 30px); border-radius: 0; height: calc(100vh - 30px); width: 100%; overflow: hidden; }
  .pd-modal-header { padding: 12px 16px; position: sticky; top: 0; z-index: 10; }
  .pd-modal-body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pd-modal-save { padding: 8px 14px; font-size: 12px; }
  .pd-modal-title h3 { font-size: 16px; }
  .pd-modal-card-label { display: none; }
}
@media (max-width: 520px) {
  .pd-modal-header { padding: 10px 12px; gap: 6px; overflow: hidden; }
  .pd-modal-title { min-width: 0; overflow: hidden; }
  .pd-modal-title svg { display: none; }
  .pd-modal-body { padding: 10px; }
  .pd-modal-save { padding: 7px 10px; font-size: 11px; }
  .pd-modal-save svg { width: 14px; height: 14px; }
  .pd-modal-close { width: 30px; height: 30px; flex-shrink: 0; }
  .pd-modal-close svg { width: 16px; height: 16px; }
  .ink-pz-hint { display: none; }
}

/* ── Selection balloon ────────────────────────────────────────────────────
   The engine hardcodes the balloon's dark chrome (#1b1b27 bar, white-tinted
   hovers and input fills) while its glyphs follow --ic-text — with the
   bridge active that meant dark icons on a dark bar in light mode. Rescope
   the chrome to bridge tokens so the bar follows the theme; the dark block
   above flips the same tokens, so no separate dark overrides are needed. */
#pdModalOverlay .ic-balloon,
#pdModalOverlay .ic-balloon::after,
#pdModalOverlay .ic-bln-pop {
  background: var(--bg-card);
}
#pdModalOverlay .ic-balloon { box-shadow: 0 10px 30px rgba(20, 8, 35, .28); }
#pdModalOverlay .ic-bln-btn:hover:not(:disabled) { background: var(--accent-dim); }
#pdModalOverlay .ic-bln-btn.active,
#pdModalOverlay .ic-bln-btn.active:hover { background: var(--accent); color: #fff; }
#pdModalOverlay .ic-bln-btn.ic-bln-danger:hover { background: #ef4444; color: #fff; }
#pdModalOverlay .ic-bln-select,
#pdModalOverlay .ic-bln-num,
#pdModalOverlay .ic-bln-pop-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
#pdModalOverlay .ic-bln-pop-btn:hover { background: var(--accent); color: #fff; }
#pdModalOverlay .ic-bln-swatch { border-color: var(--border); }