/* WebP Converter (templates/webp/image_webap_converter.html) nello stile Signal.
   Tutto è limitato a #webp-app: il layout comune è in static/css/signal/. Le classi di stato
   (uploaded, compressing, completed, error, show-transition) le mette static/js/img-webp-converter.js. */

#webp-app .box{cursor:pointer}
#webp-app .box:hover{border-color:var(--lime)}
#webp-app #limit-info{font-size:12px;color:var(--mut)}

#webp-app .wp-quality{margin:0 0 10px;font-size:13px;color:var(--txt)}
#webp-app .form-range{accent-color:var(--lime)}
#webp-app .form-range::-webkit-slider-thumb{background:var(--lime);border-radius:0}
#webp-app .form-range::-moz-range-thumb{background:var(--lime);border-radius:0}
#webp-app .form-range::-webkit-slider-runnable-track{background:rgba(237,237,228,.15);border-radius:0}
#webp-app .wp-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}

#webp-app .wp-results{padding:0 var(--cell-pad) 24px}
#webp-app #process-table{display:none;margin:24px 0 0;table-layout:fixed}
#webp-app #process-table td{vertical-align:middle;padding:10px 12px;font-size:13px}
#webp-app .wp-counters td{color:var(--mut);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#webp-app .wp-counters strong{display:block;margin-top:4px;color:var(--txt);font-size:18px;letter-spacing:0;font-weight:500}
#webp-app .input-img{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
#webp-app .img-size{color:var(--mut)}
#webp-app .progress{height:24px;margin:0;border-radius:0;background:rgba(237,237,228,.08)}
#webp-app .process{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--bg);transition:background var(--t)}
#webp-app .process.uploaded{background:var(--mut)}
#webp-app .process.compressing{background:rgba(200,255,61,.55)}
#webp-app .process.completed{background:var(--lime)}
#webp-app .process.error{background:var(--org)}
#webp-app .compressed-img-size,#webp-app .download-img,#webp-app .reduced-percentage,#webp-app tfoot{visibility:hidden;opacity:0;transition:visibility 0s,opacity .6s linear}
#webp-app .show-transition{visibility:visible;opacity:1}
#webp-app .download-img a{color:var(--lime)}
#webp-app .reduced-percentage{color:var(--lime)}
#webp-app .wp-total td{color:var(--mut)}
#webp-app .wp-total strong{color:var(--txt)}

#webp-app .loader{display:none;padding:24px 0;text-align:center;color:var(--lime);font-size:28px}

@media (max-width:700px){
  #webp-app #process-table{table-layout:auto;display:none}
  #webp-app #process-table td{padding:8px 6px;font-size:12px}
  #webp-app .wp-counters strong{font-size:15px}
}