/* =========================================================
   App-level styles — top-level chrome only.
   The designer section layout/skin lives in css/designer.css
   (v0.6.7 redesign); engine internals come from cropper.css.
   ========================================================= */

* { box-sizing: border-box; }

/* ---------- Container ---------- */
.containerXl { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ---------- Generic button primitive ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: filter .15s ease, background .15s ease;
}
.button:hover { filter: brightness(0.96); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button i { pointer-events: none; }

/* ---------- Primary input ---------- */
.primaryInput {
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
.primaryInput:focus { outline: none; border-color: var(--pd-accent, #27BAAF); }

/* Bootstrap-select default width */
.selectpicker { width: 100%; }

/* ---------- Misc ---------- */
.clearfix { clear: both; }

/* Upload progress wrapper the engine toggles via .active */
.progress-box { display: none; margin-top: 10px; }
.progress-box.active { display: block; }