/*
 * PWeditor v0.10.0
 * Copyright (c) ponderWoods
 * Licensed under Creative Commons Attribution 4.0 International (CC BY 4.0):
 * https://creativecommons.org/licenses/by/4.0/
 * You may share and adapt this work, including commercially, if you give credit to ponderWoods.
 *
 * PWeditor styles. Self-contained: nothing here depends on the host site's theme.
 * Re-theme by overriding the --pwe-* variables on .PWeditor (or any ancestor).
 */
.PWeditor {
  --pwe-accent: #087e80;
  --pwe-accent-dark: #075f62;
  --pwe-accent-light: #25a3a1;
  --pwe-slider-accent: var(--pwe-accent);
  --pwe-accent-text: #fffaf2;
  --pwe-panel-bg: rgba(23, 54, 59, .97);
  --pwe-panel-text: #fff7eb;
  --pwe-panel-divider: rgba(229, 139, 42, .3);
  --pwe-border: #ddcdb9;
  --pwe-box-bg: rgba(255, 250, 242, .72);
  --pwe-font: inherit;
  --pwe-heading-font: inherit;
  box-sizing: border-box;
  font-family: var(--pwe-font);
}
.PWeditor *, .PWeditor *::before, .PWeditor *::after { box-sizing: border-box; }

.pwe-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .55rem 1rem; border-radius: 6px;
  background: linear-gradient(135deg, var(--pwe-accent-light), var(--pwe-accent));
  color: var(--pwe-accent-text);
  border: 1px solid var(--pwe-accent-dark);
  box-shadow: 0 1px 2px rgba(23, 54, 59, .16);
}
.pwe-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f1a64d, #df8120);
  border-color: #bd6818;
  color: #17363b;
}
.pwe-btn:focus-visible, .pwe-url:focus-visible, .pwe-logo-url:focus-visible {
  outline: 3px solid rgba(37, 163, 161, .38);
  outline-offset: 2px;
}
.pwe-btn:disabled { opacity: .45; cursor: not-allowed; }

.pwe-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .pwe-row { grid-template-columns: 2fr 1fr; align-items: start; } }
.pwe-img-col, .pwe-logo-col { min-width: 0; }

.pwe-form, .pwe-logo-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.pwe-url, .pwe-logo-url {
  flex: 1;
  padding: .6rem .75rem;
  font: inherit;
  color: #2d3b3d;
  background: #fffdf9;
  border: 1px solid #d5c6b3;
  border-radius: 6px;
}
.pwe-url::placeholder, .pwe-logo-url::placeholder { color: #788283; }
.pwe-url:focus, .pwe-logo-url:focus { border-color: var(--pwe-accent); }
.pwe-url { min-width: 240px; }
.pwe-logo-url { min-width: 140px; }
.pwe-msg, .pwe-logo-msg { margin: .75rem 0; min-height: 1.2em; }

.pwe-box, .pwe-logo-box {
  position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 0; overflow: hidden;
  border: 2px dashed var(--pwe-border); border-radius: 10px; background: var(--pwe-box-bg);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.pwe-box.pwe-over, .pwe-logo-box.pwe-over {
  border-color: #e58b2a;
  background-color: rgba(229, 139, 42, .07);
}
.pwe-placeholder, .pwe-logo-placeholder { padding: 1rem; opacity: .7; }
.pwe-out { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pwe-out:not([hidden]) { cursor: zoom-in; }
.pwe-logo-preview { max-width: 100%; max-height: 100%; object-fit: contain; }
.pwe-vig { position: absolute; pointer-events: none; }

.pwe-box.fs {
  position: fixed; inset: 0; z-index: 3000;
  width: 100vw; height: 100vh; aspect-ratio: auto;
  border: 0; border-radius: 0; background: #000;
}
.pwe-box.fs .pwe-out { cursor: zoom-out; }
.pwe-box:fullscreen { background: #000; }

.pwe-logo-out {
  position: absolute; z-index: 2; cursor: grab; touch-action: none; user-select: none;
  background-color: #fff; transition: background-color .08s linear;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}
.pwe-logo-out.dragging { cursor: grabbing; }
.pwe-logo-ctl { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.pwe-logo-ctl input[type=range] { width: 120px; }

.pwe-panel {
  position: fixed; top: 120px; right: 24px; z-index: 2000;
  width: 230px; max-width: calc(100vw - 16px);
  background: var(--pwe-panel-bg); color: var(--pwe-panel-text);
  border: 1px solid var(--pwe-accent-dark); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(23, 54, 59, .28);
  font-size: .78rem; line-height: 1.2;
}
.pwe-handle {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .6rem; cursor: grab; user-select: none; touch-action: none;
  font-family: var(--pwe-heading-font); letter-spacing: .06em; color: #f2ad5b;
  border-bottom: 1px solid var(--pwe-panel-divider);
}
.pwe-panel.dragging .pwe-handle { cursor: grabbing; }
.pwe-toggle {
  background: none; border: 0; color: var(--pwe-accent-light); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.pwe-body { padding: .5rem .6rem .6rem; }
.pwe-panel.collapsed .pwe-body { display: none; }
.pwe-panel.collapsed .pwe-handle { border-bottom: 0; }

.pwe-controls { display: flex; flex-direction: column; gap: .15rem; }
.pwe-controls hr { border: 0; border-top: 1px solid var(--pwe-panel-divider); margin: .35rem 0; width: 100%; }
.pwe-controls label { display: flex; align-items: center; gap: .4rem; }
.pwe-controls label span { width: 4.6rem; flex-shrink: 0; }
.pwe-controls label output { width: 2.6rem; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pwe-controls input[type=range] { flex: 1; min-width: 0; height: 14px; accent-color: var(--pwe-slider-accent); }
.pwe-auto-row { display: flex; justify-content: flex-end; gap: .35rem; }
.pwe-auto-row .pwe-btn, .pwe-buttons .pwe-btn { padding: .2rem .8rem; font-size: .68rem; letter-spacing: .06em; }
.pwe-buttons { display: flex; gap: .35rem; margin-top: .55rem; }
.pwe-buttons .pwe-btn { flex: 1; padding: .3rem .4rem; }