/* Template Customizer modal — scoped under .pcz- so it can't collide with the
   host page's styles. */
.pcz-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(20, 16, 45, .55); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.pcz-overlay.open { display: flex; }
.pcz-modal {
  background: #fff; border-radius: 16px; width: min(1100px, 96vw); height: min(760px, 92vh);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  box-shadow: 0 24px 80px rgba(20, 16, 45, .35); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.pcz-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e2eef7; }
.pcz-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #121D36; }
/* All button rules use !important: this CSS is injected onto the host theme,
   whose global button{} styling (a teal fill) otherwise bleeds into ours. */
.pcz-close { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; font-size: 26px; line-height: 1; color: #7b7394 !important; cursor: pointer; padding: 0 6px !important; }
.pcz-close:hover { color: #121D36 !important; }
.pcz-body { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; }
.pcz-controls { padding: 22px; border-right: 1px solid #e2eef7; display: flex; flex-direction: column; gap: 18px; }
.pcz-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: #4a4565; }
.pcz-field input[type=file] { font-size: 13px; }
.pcz-field input[type=color] { width: 56px; height: 38px; border: 1px solid #cfe0ee; border-radius: 8px; padding: 2px; cursor: pointer; background: #fff; }
.pcz-hint { font-weight: 400; color: #9b94b0; font-size: 11px; }
.pcz-reset { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; text-transform: none !important; color: #037CD2 !important; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; padding: 0 !important; }
.pcz-reset:hover { text-decoration: underline; }
.pcz-spacer { flex: 1; }
.pcz-save { background: #037CD2 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; width: 100% !important; border-radius: 10px !important; padding: 13px 16px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; font-family: inherit; }
.pcz-save:hover { background: #0269b3 !important; }
.pcz-preview { position: relative; background: #EDF6FB; display: flex; align-items: stretch; }
.pcz-frame { border: 0; width: 100%; height: 100%; background: #fff; }
.pcz-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #7b7394; font-size: 14px; }
/* lead gate */
.pcz-gate { position: absolute; inset: 0; background: rgba(255,255,255,.86); display: flex; align-items: center; justify-content: center; }
.pcz-gate[hidden] { display: none; }
.pcz-gate-card { background: #fff; border: 1px solid #e2eef7; border-radius: 14px; padding: 26px; width: min(420px, 90%); box-shadow: 0 18px 50px rgba(20,16,45,.22); }
.pcz-gate-card h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #121D36; }
.pcz-gate-card p { margin: 0 0 16px; font-size: 13px; color: #7b7394; }
.pcz-gate-card input { width: 100%; box-sizing: border-box; border: 1px solid #cfe0ee; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px; }
.pcz-error { color: #e0245e; font-size: 12px; margin: 2px 0 8px; }
.pcz-gate-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.pcz-gate-cancel { background: #fff !important; border: 1px solid #cfe0ee !important; box-shadow: none !important; text-transform: none !important; width: auto !important; border-radius: 10px !important; padding: 11px 16px !important; font-size: 13px !important; font-weight: 600 !important; color: #4a4565 !important; cursor: pointer; }
.pcz-gate-submit { background: #037CD2 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; width: auto !important; border-radius: 10px !important; padding: 11px 18px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer; font-family: inherit; }
.pcz-gate-submit:hover { background: #0269b3 !important; }
.pcz-gate-submit:disabled { opacity: .6 !important; cursor: default; }
/* Injected trigger button — solid Pabau blue to match the Download button.
   All !important so the host theme's button/anchor styling can't bleed in. */
.pcz-trigger {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: #037CD2 !important; color: #fff !important;
  border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
  padding: 14px 22px !important; margin-left: 12px !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
  line-height: 1 !important; text-decoration: none !important; text-transform: none !important;
  vertical-align: middle !important; cursor: pointer !important;
}
.pcz-trigger:hover { background: #0269b3 !important; color: #fff !important; text-decoration: none !important; }
@media (max-width: 720px) {
  .pcz-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pcz-controls { border-right: 0; border-bottom: 1px solid #e2eef7; }
}