/* ==========================================================================
   Image Tools · cropper styles                                Version No.: 10
   Used by every cropper template (ratio and shape croppers). Loaded after imgt-core.css.
   The page shell, hero, About popup and info tips are in imgt-core.css.
   ========================================================================== */
.cpc-tool{
  /* The preview is as big as the middle pane allows. On a computer the pane is a fixed height, so the preview fills what is left
     under the Add Photo row. On small screens it is limited by the screen height instead. */
  --cpc-stage-h:clamp(260px, calc(100vh - 380px), 700px);

  --cpc-label-font:var(--imgt-font-body);
  --cpc-label-size:0.9rem;
  --cpc-label-weight:600;
  --cpc-label-color:var(--imgt-ink);

  --cpc-hint-font:var(--imgt-font-body);
  --cpc-hint-size:0.82rem;
  --cpc-hint-weight:400;
  --cpc-hint-color:var(--imgt-muted);

  --cpc-slider-track:var(--imgt-line);
  --cpc-slider-thumb:var(--imgt-accent);
  --cpc-slider-thumb-ring:#ffffff;

  --cpc-option-gap:16px;
  --cpc-label-gap:12px;
  --cpc-chip-gap:10px;
  --cpc-panel-dim-opacity:0.55;

  --cpc-btn-radius:var(--imgt-radius-pill);
  --cpc-btn-border-width:1px;
  --cpc-btn-padding:12px 22px;
  --cpc-btn-font-weight:600;
  --cpc-btn-font-size:0.95rem;

  width:100%;
}
@media (max-width:899px){
  .cpc-tool{ display:flex; flex-direction:column; }
  .cpc-tool > .imgt-pane-left,
  .cpc-tool > .imgt-pane-right{ border-top:1px solid var(--imgt-line); }
  .cpc-actions{ order:9; }
}
@media (min-width:900px){
  .cpc-stage-col{ --cpc-stage-h:var(--imgt-stage-h); }
}
.cpc-stage-col{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.cpc-single{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.cpc-single[hidden]{ display:none; }
.cpc-controls-left,
.cpc-controls-right{ display:flex; flex-direction:column; gap:20px; }
.cpc-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cpc-variant-row{ display:grid; grid-template-columns:repeat(var(--cpc-cols, 2), 1fr); gap:8px; }
.cpc-variant-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:0;
  padding:10px 4px;
  text-align:center;
  border:var(--cpc-btn-border-width) solid var(--imgt-line);
  border-radius:var(--imgt-radius-sm);
  background:var(--imgt-surface);
  color:var(--imgt-ink);
  font-family:inherit;
  line-height:1.2;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cpc-variant-btn:hover{ border-color:var(--imgt-ink); }
.cpc-variant-btn:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:2px; }
.cpc-variant-btn[aria-pressed="true"]{ background:var(--imgt-accent); border-color:var(--imgt-accent); color:#fff; }
.cpc-variant-name{ font-size:var(--cpc-label-size); font-weight:var(--cpc-label-weight); }
.cpc-action-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; align-self:flex-start; }

.cpc-download-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.cpc-download-caret{
  margin-left:8px;
  transition:transform 0.15s ease;
}
.cpc-download-wrap.cpc-download-open .cpc-download-caret{
  transform:rotate(180deg);
}
.cpc-download-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;
  right:0;
  max-height:min(70vh, 420px);
  overflow-y:auto;
  background:var(--imgt-surface);
  border:1px solid var(--imgt-line);
  border-radius:var(--imgt-radius-sm);
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:20;
}
.cpc-download-menu[hidden]{ display:none; }
.cpc-download-option{
  background:none;
  border:0;
  border-radius:calc(var(--imgt-radius-sm) - 4px);
  padding:9px 12px;
  font-family:var(--imgt-font-body);
  font-size:0.88rem;
  font-weight:600;
  color:var(--imgt-ink);
  text-align:left;
  cursor:pointer;
}
.cpc-download-option:hover,
.cpc-download-option:focus-visible{
  background:var(--imgt-paper);
  outline:none;
}
.cpc-download-divider{
  height:1px;
  background:var(--imgt-line);
  margin:4px 2px;
}
.cpc-download-custom{
  padding:6px 8px 4px;
}
.cpc-download-custom-label{
  font-family:var(--imgt-font-body);
  font-size:0.78rem;
  font-weight:600;
  color:var(--imgt-muted);
  white-space:nowrap;
}
.cpc-download-custom-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.cpc-download-custom-input{
  width:88px;
  padding:6px 8px;
  border:1px solid var(--imgt-line);
  border-radius:6px;
  background:var(--imgt-surface);
  color:var(--imgt-ink);
  font-family:var(--imgt-font-body);
  font-size:0.85rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
  -moz-appearance:textfield;
}
.cpc-download-custom-input::-webkit-outer-spin-button,
.cpc-download-custom-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cpc-download-custom-input,
.cpc-download-custom-input:focus,
.cpc-download-custom-input:focus-visible{
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.cpc-download-custom-go{
  background:var(--imgt-accent);
  color:#fff;
  border:0;
  border-radius:6px;
  padding:7px 14px;
  font-family:var(--imgt-font-body);
  font-size:0.82rem;
  font-weight:600;
  cursor:pointer;
}
.cpc-download-custom-go:hover{ background:var(--imgt-accent-dark); }
.cpc-download-custom-go:focus-visible{ outline:2px solid var(--imgt-focus); outline-offset:2px; }
.cpc-download-custom .cpc-value-limit-msg{ margin-top:6px; }
.cpc-download-option.cpc-download-option-last{ display:flex; justify-content:space-between; align-items:center; }
.cpc-download-option.cpc-download-option-last::after{ content:'✓'; color:var(--imgt-accent); }

.cpc-stage{
  position:relative;
  width:min(100%, calc(var(--cpc-stage-h) * var(--cpc-w) / var(--cpc-h)));
  aspect-ratio:var(--cpc-w) / var(--cpc-h);
  overflow:hidden;
  touch-action:pan-y;
  cursor:pointer;
}
.cpc-stage.cpc-has-image{ touch-action:none; cursor:grab; }
.cpc-stage.cpc-bg-light-outline{
  filter:drop-shadow(1px 0 0 var(--imgt-line)) drop-shadow(-1px 0 0 var(--imgt-line)) drop-shadow(0 1px 0 var(--imgt-line)) drop-shadow(0 -1px 0 var(--imgt-line));
}
.cpc-stage.cpc-dragging{ cursor:grabbing; }
.cpc-stage:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:3px; }
.cpc-stage canvas{
  width:100%;
  height:100%;
  display:block;
  background:#e3e3e3;
}
/* Shape croppers set --cpc-shape-clip (a polygon or ellipse); the preview, grid and small floating preview are all cut to it. */
.cpc-stage canvas, .cpc-grid, .cpc-pip canvas{ clip-path:var(--cpc-shape-clip, none); }
.cpc-grid{
  --cpc-grid-line:rgba(255,255,255,0.85);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.15s ease;
  filter:drop-shadow(0 0 1px rgba(0,0,0,0.55));
  background:
    linear-gradient(var(--cpc-grid-line), var(--cpc-grid-line)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--cpc-grid-line), var(--cpc-grid-line)) 66.667% 0 / 1px 100% no-repeat,
    linear-gradient(var(--cpc-grid-line), var(--cpc-grid-line)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(var(--cpc-grid-line), var(--cpc-grid-line)) 0 66.667% / 100% 1px no-repeat;
}
.cpc-stage.cpc-grid-on .cpc-grid{ opacity:1; }
.cpc-stage.cpc-has-image .cpc-drop-hint{ display:none; }

.cpc-drop-hint{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:var(--cpc-hint-pad, 20px);
  color:var(--imgt-muted);
  pointer-events:none;
}
.cpc-drop-hint svg{ color:var(--imgt-accent); margin-bottom:4px; }
.cpc-drop-hint p{ margin:0; font-size:0.92rem; }
.cpc-drop-hint-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:14px 18px;
}

.cpc-add-photo-alert{
  margin-top:4px;
  padding:6px 14px;
  border-radius:8px;
  background:#fdecea;
  color:#c1121f;
  font-size:0.8rem;
  font-weight:600;
  border:1px solid #f3b4b0;
}
.cpc-stage.cpc-alert{
  box-shadow:0 0 0 4px rgba(193,18,31,0.35);
  transition:box-shadow 0.15s ease;
}



.cpc-pip{
  position:fixed;
  right:16px;
  bottom:86px;
  width:calc(90px * min(1, var(--cpc-w) / var(--cpc-h)));
  aspect-ratio:var(--cpc-w) / var(--cpc-h);
  overflow:hidden;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.28));
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transform:scale(0.85);
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:60;
}
.cpc-pip canvas{ width:100%; height:100%; display:block; }
.cpc-stage.cpc-has-image ~ .cpc-pip.cpc-pip-visible{ opacity:1; transform:scale(1); pointer-events:auto; }

.cpc-text-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:4px 2px;
  background:none;
  border:none;
  border-radius:0;
  color:var(--imgt-ink);
  font-family:inherit;
  font-weight:700;
  font-size:0.95rem;
  line-height:normal;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.cpc-text-action:hover{ color:var(--imgt-accent-dark); }
.cpc-text-action:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:2px; }
.cpc-text-action:disabled{ opacity:0.45; cursor:not-allowed; text-decoration:underline; }


.cpc-status{ min-height:1.2em; font-size:0.85rem; color:var(--imgt-muted); margin:0; }

input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:var(--imgt-radius-pill);
  background:var(--cpc-slider-track);
  margin-top:0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--cpc-slider-thumb);
  border:3px solid var(--cpc-slider-thumb-ring);
  box-shadow:0 0 0 1px var(--cpc-slider-thumb);
  cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--cpc-slider-thumb);
  border:3px solid var(--cpc-slider-thumb-ring);
  box-shadow:0 0 0 1px var(--cpc-slider-thumb);
  cursor:pointer;
}
input[type="range"]:focus-visible{ outline:none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:3px solid var(--imgt-focus); outline-offset:2px; }
input[type="range"]:disabled{ opacity:0.4; }

.cpc-controls-left.cpc-no-image input[type="range"],
.cpc-controls-left.cpc-no-image input[type="number"]{
  opacity:0.45;
  cursor:not-allowed;
}

.cpc-hint{
  font-family:var(--cpc-hint-font);
  font-size:var(--cpc-hint-size);
  font-weight:var(--cpc-hint-weight);
  color:var(--cpc-hint-color);
  margin:0;
}

.cpc-control-label{
  margin-bottom:var(--cpc-label-gap);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.cropper-subheading{
  font-family:var(--cpc-label-font);
  font-size:var(--cpc-label-size);
  font-weight:var(--cpc-label-weight);
  line-height:1.3;
  color:var(--cpc-label-color);
  margin:0;
}
.cropper-heading{
  font-family:var(--cpc-label-font);
  font-size:17px;
  font-weight:var(--cpc-label-weight);
  line-height:1.3;
  color:var(--cpc-label-color);
  margin:0;
}
.cpc-heading-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.cpc-value-input{
  width:58px;
  padding:2px 4px;
  border:1px solid var(--imgt-line);
  border-radius:6px;
  background:var(--imgt-surface);
  color:var(--imgt-ink);
  font-family:var(--imgt-font-body);
  font-size:0.78rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
  -moz-appearance:textfield;
}
.cpc-value-input::-webkit-outer-spin-button,
.cpc-value-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cpc-value-input,
.cpc-value-input:focus,
.cpc-value-input:focus-visible{
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.cpc-value-limit-msg{
  margin:6px 0 0;
  color:#c1121f;
  font-size:0.76rem;
  font-weight:600;
  display:inline-block;
}
.cpc-value-limit-msg[hidden]{
  display:none;
}

.cpc-tool-section{
  border-top:1px solid var(--imgt-line);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cpc-controls-right .cpc-tool-section:first-child{
  border-top:none;
  padding-top:0;
}
.cpc-checkbox{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
}
.cpc-checkbox input[type="checkbox"]{
  width:20px; height:20px;
  accent-color:var(--imgt-accent);
  cursor:pointer;
  margin:0;
}
.cpc-checkbox input[type="checkbox"],
.cpc-checkbox input[type="checkbox"]:focus,
.cpc-checkbox input[type="checkbox"]:focus-visible{
  outline:none !important;
}
.cpc-checkbox input[type="checkbox"]::-moz-focus-inner{
  border:0 !important;
}
.cpc-border-options,
.cpc-bg-options{ display:flex; flex-direction:column; gap:var(--cpc-option-gap); }
.cpc-border-options.cpc-panel-dim,
.cpc-bg-options.cpc-panel-dim{
  opacity:var(--cpc-panel-dim-opacity);
  transition:opacity 0.15s ease;
}
.cpc-control-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cpc-select{
  width:100%;
  padding:10px 12px;
  margin-top:0;
  border:1px solid var(--imgt-line);
  border-radius:8px;
  background:var(--imgt-surface);
  color:var(--imgt-ink);
  font-family:var(--imgt-font-body);
  font-size:0.92rem;
  cursor:pointer;
}
.cpc-color-input{
  -webkit-appearance:none;
  appearance:none;
  width:56px; height:36px;
  margin-top:0;
  padding:0;
  border:1px solid var(--imgt-line);
  border-radius:8px;
  background:none;
  cursor:pointer;
}
.cpc-color-input::-webkit-color-swatch-wrapper{ padding:3px; }
.cpc-color-input::-webkit-color-swatch{ border:none; border-radius:5px; }
.cpc-color-input::-moz-color-swatch{ border:none; border-radius:5px; }

.cpc-gradient-inputs .cpc-color-input,
.cpc-gradient-inputs .cpc-color-input:focus,
.cpc-gradient-inputs .cpc-color-input:focus-visible{
  outline:none !important;
}
.cpc-gradient-inputs .cpc-color-input::-moz-focus-inner{
  border:0 !important;
}

.cpc-gradient-inputs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--cpc-chip-gap);
  margin-top:0;
}
.cpc-swatch-btn{
  -webkit-appearance:none;
  appearance:none;
  width:36px; height:36px;
  padding:0;
  border:1px solid var(--imgt-line);
  border-radius:8px;
  background-color:transparent;
  background-image:linear-gradient(var(--cpc-swatch), var(--cpc-swatch));
  cursor:pointer;
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.cpc-swatch-btn:hover{ transform:scale(1.06); }
.cpc-swatch-btn:active{ transform:scale(0.96); }
.cpc-swatch-btn:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:2px; }

.cpc-color-reset{
  background:none;
  border:0;
  margin:0;
  padding:0;
  font-family:var(--imgt-font-body);
  font-size:0.8rem;
  font-weight:600;
  line-height:1.3;
  color:#c1121f;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
}
.cpc-color-reset:hover{ color:#8a0d16; }
.cpc-color-reset:focus-visible{ outline:2px solid var(--imgt-focus); outline-offset:2px; }
.cpc-color-reset.cpc-color-reset-inactive{
  visibility:hidden;
  pointer-events:none;
}

.cpc-btn{
  padding:var(--cpc-btn-padding);
  border-radius:var(--cpc-btn-radius);
  font-weight:var(--cpc-btn-font-weight);
  font-size:var(--cpc-btn-font-size);
  cursor:pointer;
  border:var(--cpc-btn-border-width) solid transparent;
  transition:transform 0.1s ease, background 0.15s ease;
}
.cpc-btn:active{ transform:scale(0.98); }
/* WL Primary Button — uniform look for Compress, Download and Choose photos. */
.wl-btn-primary:disabled{ background:var(--imgt-accent); color:#fff; opacity:0.45; cursor:not-allowed; transform:none; }
.cpc-btn:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:2px; }

.cpc-stage.cpc-just-loaded{ animation:cpcSettle 0.4s ease; }
@keyframes cpcSettle{ from{ transform:scale(0.96); opacity:0.6; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .cpc-stage.cpc-just-loaded{ animation:none; }
  .cpc-btn, .cpc-pip, .cpc-grid, .cpc-variant-btn{ transition:none; }
}

/* WL Button Pulse Glow — add class "wl-btn-pulse" to a button; apply only while idle. */
[data-wlcustom-dm="dark"] .cpc-stage canvas{
  background:#212a3d;
}
[data-wlcustom-dm="dark"] .cpc-add-photo-alert{
  background:rgba(255,107,107,0.14);
  color:#ff9c9c;
  border-color:rgba(255,107,107,0.35);
}
[data-wlcustom-dm="dark"] .cpc-value-limit-msg,
[data-wlcustom-dm="dark"] .cpc-color-reset{
  color:#ff6b6b;
}
[data-wlcustom-dm="dark"] .cpc-color-reset:hover{
  color:#ffb3b3;
}
[data-wlcustom-dm="dark"] .cpc-download-menu{
  box-shadow:0 4px 14px rgba(0,0,0,0.55);
}
[data-wlcustom-dm="dark"] .cpc-pip{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
[data-wlcustom-dm="dark"] .cpc-border-options.cpc-panel-dim,
[data-wlcustom-dm="dark"] .cpc-bg-options.cpc-panel-dim{
  opacity:1;
}
[data-wlcustom-dm="dark"] .cpc-panel-dim > :not(#cpcSolidColorRow):not(#cpcBgSolidRow),
[data-wlcustom-dm="dark"] .cpc-panel-dim > #cpcSolidColorRow > .cpc-control-label,
[data-wlcustom-dm="dark"] .cpc-panel-dim > #cpcBgSolidRow > .cpc-control-label,
[data-wlcustom-dm="dark"] .cpc-panel-dim .cpc-color-swatch-row > :not([data-color="#ffffff"]){
  opacity:var(--cpc-panel-dim-opacity);
  transition:opacity 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
[data-wlcustom-dm="dark"] .cpc-tool input[type="range"]:not(#cpc-dm-boost){
  background-color:var(--cpc-slider-track) !important;
}
.cpc-value-wrap{
  display:flex;
  align-items:center;
  gap:4px;
}
.cpc-value-unit{
  font-size:0.78rem;
  font-weight:600;
  color:var(--imgt-muted);
}