/* ==========================================================================
   Equalza — Image Editor Tool CSS
   Matches Cropper / Compressor design system.
   ========================================================================== */

/* ---------- CSS Variables (same as other tools) ---------- */
:root{
  --bg:#f5f6f8;--surface:#fff;--border:#e2e5ea;--border2:#c8cdd6;
  --accent:#2563eb;--accent-h:#1d4ed8;--accent-light:#eff6ff;--accent-mid:#bfdbfe;
  --text:#111827;--text2:#4b5563;--text3:#9ca3af;
  --green:#059669;--green-bg:#ecfdf5;
  --red:#dc2626;--red-bg:#fef2f2;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --r:8px;--rl:12px;--rxl:16px;
}

/* ---------- Tool Card Shell ---------- */
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rxl);box-shadow:var(--sh);overflow:hidden}

/* ---------- Hidden utility ---------- */
.hidden{display:none!important}

/* ---------- Drop Zone ---------- */
.drop-zone{border:2px dashed var(--border2);border-radius:var(--rl);margin:20px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg)}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light)}
.dz-icon{width:52px;height:52px;background:var(--accent-light);border:1px solid var(--accent-mid);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.dz-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dz-title{font-size:16px;font-weight:700;margin-bottom:6px}
.dz-sub{font-size:13px;color:var(--text2);margin-bottom:14px}
.btn-dz{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-weight:600;font-size:13px;font-family:inherit;padding:9px 20px;border-radius:var(--r);border:none;cursor:pointer}
.btn-dz:hover{background:var(--accent-h)}
.fmt-pills{display:flex;gap:5px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.fmt-pill{padding:2px 9px;border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;background:var(--surface)}

/* ---------- Editor Area ---------- */
.ime-editor{display:flex;flex-direction:column;gap:14px;padding:20px}

/* ---------- Preview ---------- */
.ime-preview{position:relative;display:flex;justify-content:center;align-items:center;background:#1a1a2e;border-radius:var(--rl);border:1px solid var(--border);overflow:hidden;min-height:260px;max-height:480px}
.ime-preview canvas{max-width:100%;max-height:480px;display:block;object-fit:contain}

/* ---------- Tabs ---------- */
.ime-tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:3px}
.ime-tab{flex:1;padding:8px 14px;background:transparent;border:none;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .15s;font-family:inherit}
.ime-tab.active{background:var(--accent);color:#fff}
.ime-tab:hover:not(.active){color:var(--text);background:var(--accent-light)}

/* ---------- Panels ---------- */
.ime-panel{display:flex;flex-direction:column;gap:14px}

/* ---------- Slider Groups ---------- */
.ime-slider-group label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:2px}
.ime-val{font-weight:700;font-size:13px;color:var(--accent);min-width:36px;text-align:right}
.ime-slider-group input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer}
.ime-slider-group input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ime-slider-group input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.ime-slider-group input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer}

/* ---------- Filter Grid ---------- */
.ime-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
.ime-filter-btn{padding:10px 8px;background:var(--bg);border:2px solid transparent;border-radius:var(--r);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;font-family:inherit}
.ime-filter-btn:hover{border-color:var(--border2);color:var(--text)}
.ime-filter-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

/* ---------- Export Row ---------- */
.ime-export-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text2)}
.ime-export-row .fmt-group,.ime-export-row .quality-group{display:flex;align-items:center;gap:8px}
.ime-export-row .preset-label{color:var(--text2);font-weight:600;font-size:12px}
.ime-fmt-btn{padding:5px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:6px;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.ime-fmt-btn.active,.ime-fmt-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.ime-export-row input[type="range"]{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.ime-export-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer}
.ime-export-row input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer}
.ime-export-row .q-val{color:var(--accent);font-weight:700;min-width:32px}
.ime-export-row .est-size b{color:var(--accent)}

/* ---------- Action Row ---------- */
.action-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 0;border-top:1px solid var(--border)}
.btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-weight:600;font-size:13px;font-family:inherit;padding:8px 18px;border-radius:var(--r);border:none;cursor:pointer;transition:all .15s}
.btn-primary:hover{opacity:.88}
.btn-primary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--bg);color:var(--text2);font-weight:600;font-size:13px;font-family:inherit;padding:8px 18px;border-radius:var(--r);border:1px solid var(--border2);cursor:pointer;transition:all .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.btn-ghost svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Privacy Banner ---------- */
.ime-privacy{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;font-size:12px;color:var(--text3)}
.ime-privacy svg{opacity:.5;flex-shrink:0;stroke:var(--text3)}

/* ---------- Comparing (original overlay) ---------- */
.ime-preview.comparing canvas#ime-canvas{display:none}
.ime-preview.comparing canvas#ime-original{display:block!important}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .ime-filter-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
  .ime-export-row{flex-direction:column;align-items:flex-start}
  .ime-preview{min-height:200px;max-height:360px}
  .ime-preview canvas{max-height:360px}
  .ime-editor{padding:14px}
}

/* ---------- RTL ---------- */
[dir="rtl"] .ime-val{text-align:left}
[dir="rtl"] .ime-slider-group label{flex-direction:row-reverse}