/*
 * photo-watermark.css - styles for the in-browser photo watermark remover widget.
 * Single source of truth: BOTH the PHP partial (_include/photo-watermark-widget.php) and the dev
 * stand (_dev/pwm-test.html) link this file, so what we screenshot is what ships. Do not inline a
 * second copy anywhere - that is how the stand ended up lying about the layout once already.
 * Layout mirrors the video widget: media column left, actions + desktop upsell right.
 */

/* The JS toggles panels with the [hidden] attribute. Our own `display:flex/grid` rules below would
   otherwise OVERRIDE it and leave Download / brush buttons visible on an untouched page (they did).
   This must stay above them. */
[hidden] { display: none !important; }

/* The widget is built by JS, so the mount is empty until the script runs - the page would reflow
   under the reader (layout shift, and a CWV hit). Reserve the space up front: roughly the height of
   the two-column layout. */
[data-pwm] { min-height: 520px; }
@media (max-width: 900px) { [data-pwm] { min-height: 900px; } }   /* columns stack */

.pwm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .pwm-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- media column ---- */
.pwm-stage {
  background: #0f1115;
  border-radius: .75rem;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
}
.pwm-stage img,
.pwm-stage canvas { max-width: 100%; height: auto; display: block; border-radius: .35rem; }
.pwm-stage canvas { cursor: crosshair; touch-action: none; }

.pwm-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* While a fill is running every button is disabled (no double-Remove racing two fills over the
   same canvas) - make that visible instead of silently dead. */
.pwm-grid button[disabled],
.pwm-grid .pwm-upsell a[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
[data-pwm].is-busy .pwm-stage canvas { cursor: progress; }

/* ---- actions column ---- */
.pwm-drop {
  border: 2px dashed #4aa3ff;
  border-radius: .75rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
  background: #f5f9ff;
  transition: background .15s;
}
.pwm-drop.is-over { background: #e2f0ff; border-color: #2f9bff; }
.pwm-drop-title { font-weight: 700; font-size: 1.2rem; margin-bottom: .4rem; }
.pwm-drop-hint { color: #6b7280; font-size: .9rem; margin-bottom: 1.25rem; }

.pwm-progress { margin-top: 1.25rem; }
.pwm-bar { background: #e5e7eb; border-radius: 999px; height: 8px; overflow: hidden; }
.pwm-bar span { display: block; height: 100%; width: 0; background: #2f9bff; transition: width .25s ease; }
.pwm-status { font-size: .9rem; color: #4b5563; margin-top: .6rem; }

/* Result actions. gap handles BOTH axes, so Download/New photo never touch each other or the
   note below them (they did, in the first screenshot). */
.pwm-done {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.pwm-honest {
  flex-basis: 100%;
  margin: .25rem 0 0;
  font-size: .875rem;
  color: #6b7280;
}

/* ---- desktop upsell ---- */
.pwm-upsell {
  margin-top: 1.75rem;          /* clear breathing room from the buttons above */
  background: #f5f9ff;
  border: 1px solid #dbeafe;
  border-radius: .75rem;
  padding: 1.5rem;
}
.pwm-upsell-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.pwm-upsell-head strong { font-size: 1.05rem; }
.pwm-upsell p { margin: 0 0 1rem; color: #4b5563; }

.pwm-benefits { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pwm-benefits li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  font-weight: 600;
  line-height: 1.4;
}
.pwm-benefits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f9bff;
  font-weight: 700;
}