/* ============================================================
   NasrTech Image Compressor — gap widgets only.
   Layered on /blog/assets/blog.css + /docflow/tools/tools.css
   (same "cheerful tech" theme). Only styles the compressor-specific
   widgets that the shared stylesheets don't already provide, using
   the same design tokens (--orange / --coral / --teal / --brand …).
   ============================================================ */

/* Language toggle in the nav */
.ic-lang{font-family:inherit;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text);font-weight:700;font-size:.82rem;border-radius:999px;padding:.42rem .9rem;line-height:1;transition:.15s}
.ic-lang:hover{border-color:var(--orange);color:var(--orange)}

/* Dropzone extras */
.ic-formats{margin-top:.6rem;font-size:.76rem;color:var(--text-muted);font-weight:600}

/* Number inputs inside .opt (tools.css only styles text inputs) */
.opt input[type=number]{width:100%;font-family:inherit;font-size:.92rem;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .7rem}
.opt input[type=number]:focus{outline:none;border-color:var(--orange)}
.opt .range-wrap .x{color:var(--text-muted);font-weight:700}
.opt.collapsed{display:none}

/* Target-size field */
.ic-target{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ic-target-fields{display:flex;align-items:center;gap:.4rem}
.ic-target-fields.collapsed{display:none}
.ic-target-fields input[type=number]{max-width:96px}
.ic-target-fields select{font-family:inherit;font-size:.9rem;color:var(--text);background:var(--surface);
  border:1.5px solid var(--border);border-radius:10px;padding:.5rem .55rem}

/* Toggle switches (keep-aspect / remove-metadata / target) */
.ic-toggles{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;margin-top:var(--sp-md)}
.ic-switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text)}
.ic-switch input{position:absolute;opacity:0;width:0;height:0}
.ic-switch .ic-track{width:40px;height:23px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);
  position:relative;transition:background .16s,border-color .16s;flex:0 0 auto}
.ic-switch .ic-track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-sm);transition:transform .16s}
.ic-switch input:checked + .ic-track{background:var(--orange);border-color:var(--orange)}
.ic-switch input:checked + .ic-track::after{transform:translateX(17px)}
[dir=rtl] .ic-switch input:checked + .ic-track::after{transform:translateX(-17px)}
.ic-switch input:focus-visible + .ic-track{outline:2px solid var(--orange);outline-offset:2px}

/* Action bar — success (download) button. border:none clears the UA
   default outset border on filled buttons (.btn-ghost keeps its own). */
.btn-primary, .btn-success{border:none}
.btn-success{background:var(--teal);color:#fff;box-shadow:var(--sh-md)}
.btn-success:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* Stats summary */
.ic-stats{display:none;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-lg)}
.ic-stats.on{display:flex}
.ic-stat{flex:1 1 140px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.8rem 1rem;box-shadow:var(--sh-sm)}
.ic-stat .ic-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700}
.ic-stat .ic-v{font-size:1.25rem;font-weight:800;margin-top:.1rem}
.ic-stat.saved{background:var(--brand-soft);border-color:transparent}
.ic-stat.saved .ic-v{color:var(--coral)}

/* File rows — compression info (layered onto tools.css .fileitem) */
.filelist .fileitem{flex-wrap:wrap}
.fileitem .meta .sz{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;margin-top:.18rem}
.ic-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700}
.ic-status .ic-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted)}
.ic-status[data-s=compressing]{color:var(--orange)}
.ic-status[data-s=compressing] .ic-dot{background:var(--orange);animation:icpulse 1s infinite}
.ic-status[data-s=completed]{color:#0e9f6e}
.ic-status[data-s=completed] .ic-dot{background:var(--teal)}
.ic-status[data-s=error]{color:var(--coral)}
.ic-status[data-s=error] .ic-dot{background:var(--coral)}
@keyframes icpulse{0%,100%{opacity:1}50%{opacity:.3}}
.ic-conv{font-size:.64rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:.12rem .42rem;
  border-radius:6px;background:var(--bg-2);color:var(--text-muted)}
.ic-from{color:var(--text-muted)}
.ic-to{font-weight:800;color:var(--text)}
.ic-saved{font-weight:800;color:#0e9f6e;background:#e7f9f1;padding:.1rem .5rem;border-radius:999px;font-size:.74rem}
.ic-saved.neg{color:var(--text-soft);background:var(--bg-2)}
.ic-bar{width:100%;height:5px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:.45rem}
.ic-bar>i{display:block;height:100%;width:0;background:var(--brand);transition:width .25s}
.ic-err{flex-basis:100%;color:var(--coral);font-size:.78rem;font-weight:600;margin-top:.25rem}
.iconbtn.dl{background:var(--teal);border-color:var(--teal);color:#fff}
.iconbtn.dl:hover{filter:brightness(.96);color:#fff;border-color:var(--teal)}
.fileitem .ops .iconbtn svg{width:16px;height:16px}

/* Per-image quality control (wraps to its own line in the file row) */
.perq{flex-basis:100%;display:none;align-items:center;gap:.7rem;margin-top:.5rem;padding-top:.55rem;border-top:1px dashed var(--border)}
.perq.on{display:flex}
.perq label{font-size:.72rem;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.03em}
.perq input[type=range]{flex:1;max-width:240px;accent-color:var(--orange)}
.ic-qval{font-weight:700;font-size:.85rem;min-width:3ch}

/* Empty state */
.ic-empty{text-align:center;color:var(--text-muted);padding:2.2rem 1rem;border:1.5px dashed var(--border);
  border-radius:var(--radius-sm);background:var(--bg);margin-top:var(--sp-lg)}
.ic-empty svg{width:38px;height:38px;opacity:.4;margin-bottom:.4rem}

/* Format chips row (Supported formats) */
.ic-fmt-note{max-width:var(--measure);margin:var(--sp-md) auto 0;text-align:center;color:var(--text-soft)}

/* Before / after modal */
.ic-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(45,49,66,.55);backdrop-filter:blur(3px)}
.ic-modal.on{display:flex}
.ic-modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  width:min(760px,96vw);max-height:92vh;overflow:auto;box-shadow:var(--sh-lg)}
.ic-modal-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}
.ic-modal-top h3{font-size:1.05rem;font-weight:800}
.ic-ba{position:relative;width:100%;background:repeating-conic-gradient(var(--bg-2) 0% 25%,#fff 0% 50%) 50%/22px 22px;
  overflow:hidden;user-select:none;touch-action:none}
.ic-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ic-after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}
.ic-after-wrap img{width:auto;height:100%}
.ic-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--orange);transform:translateX(-50%);cursor:ew-resize}
.ic-handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--orange);box-shadow:var(--sh-md);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 5L3 10l4 5M13 5l4 5-4 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
.ic-ba-labels{display:flex;justify-content:space-between;padding:.6rem 1.2rem;font-size:.8rem;font-weight:800;color:var(--text-soft)}
.ic-ba-labels .after-l{color:var(--orange)}
.ic-modal-stats{display:flex;gap:1.2rem;flex-wrap:wrap;padding:0 1.2rem 1.2rem;font-size:.86rem;color:var(--text-soft)}
.ic-modal-stats b{color:var(--text)}

/* Toast success variant (tools.css provides .toast + .toast.err) */
.toast.ok{background:var(--teal)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}