/* Image Compressor — tool-specific styles. Most styling comes from toolkit.css.
   All selectors scoped under #trp-tool-root / prefixed .trp-ic- so nothing
   collides with Astra / Elementor / other tools. Uses shared tokens.
   Responsive: cards/controls stack on mobile, side-by-side on wider screens. */

#trp-tool-root .trp-ic-privacy{
  display:flex;align-items:center;gap:8px;margin:0 0 16px;
  padding:11px 14px;border-radius:var(--trp-r-md);
  background:var(--trp-accent-soft);color:var(--trp-ink-2);
  font-size:14px;font-weight:600;
}

#trp-tool-root .trp-ic-controls{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;
}
@media(min-width:600px){#trp-tool-root .trp-ic-controls{grid-template-columns:1fr 1fr;align-items:end;}}

#trp-tool-root .trp-ic-qfield .trpk-label{display:flex;align-items:center;gap:8px;}
#trp-tool-root .trp-ic-qval{font-weight:800;color:var(--trp-accent);font-variant-numeric:tabular-nums;}
#trp-tool-root .trp-ic-range{width:100%;accent-color:var(--trp-accent);cursor:pointer;height:32px;}
#trp-tool-root .trp-ic-range:focus-visible{outline:2px solid var(--trp-accent);outline-offset:3px;}
#trp-tool-root .trp-ic-sel{appearance:auto;min-height:46px;cursor:pointer;}

#trp-tool-root .trp-ic-actions{margin-top:16px;flex-wrap:wrap;}

#trp-tool-root .trp-ic-error{
  margin:14px 0 0;padding:11px 14px;border-radius:var(--trp-r-md);
  background:var(--trp-error-bg);color:var(--trp-error);font-size:14px;font-weight:500;
}
#trp-tool-root .trp-ic-note{
  margin:12px 0 0;padding:10px 14px;border-radius:var(--trp-r-md);
  background:var(--trp-surface-2);color:var(--trp-ink-2);font-size:13px;line-height:1.5;
}
#trp-tool-root .trp-ic-status{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--trp-ink-2);}
#trp-tool-root .trp-ic-status:empty{display:none;}

#trp-tool-root .trp-ic-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;}
@media(min-width:600px){#trp-tool-root .trp-ic-cards{grid-template-columns:1fr 1fr;}}
#trp-tool-root .trp-ic-card{
  background:var(--trp-surface);border:1px solid var(--trp-border);
  border-radius:var(--trp-r-lg);padding:16px;min-width:0;
}
#trp-tool-root .trp-ic-card-h{
  margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--trp-muted);
}
#trp-tool-root .trp-ic-card-name{
  margin:0 0 10px;font-size:14px;font-weight:700;color:var(--trp-ink);
  overflow-wrap:anywhere;word-break:break-word;
}
#trp-tool-root .trp-ic-card-meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;}
#trp-tool-root .trp-ic-card-meta dt{font-size:13px;color:var(--trp-muted);}
#trp-tool-root .trp-ic-card-meta dd{margin:0;font-size:13px;font-weight:600;color:var(--trp-ink);text-align:right;overflow-wrap:anywhere;}

#trp-tool-root .trp-ic-saved{
  margin:14px 0 0;padding:12px 16px;border-radius:var(--trp-r-md);text-align:center;
  font-size:16px;font-weight:800;background:var(--trp-accent-soft);color:var(--trp-accent);
}
#trp-tool-root .trp-ic-saved.is-larger{background:var(--trp-error-bg);color:var(--trp-error);}

#trp-tool-root .trp-ic-preview{margin:16px 0 0;text-align:center;}
#trp-tool-root .trp-ic-preview-img{
  max-width:100%;height:auto;border:1px solid var(--trp-border);border-radius:var(--trp-r-md);
  background:
    linear-gradient(45deg,var(--trp-surface-2) 25%,transparent 25%,transparent 75%,var(--trp-surface-2) 75%) 0 0/20px 20px,
    linear-gradient(45deg,var(--trp-surface-2) 25%,transparent 25%,transparent 75%,var(--trp-surface-2) 75%) 10px 10px/20px 20px;
}
#trp-tool-root .trp-ic-preview-cap{margin:8px 0 0;font-size:12px;color:var(--trp-muted);}

@media(max-width:480px){
  #trp-tool-root .trp-ic-actions .trpk-btn{flex:1 1 auto;}
}

/* feature/example lists in the content section (outside the widget root) */
.trp-ic-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.trp-ic-list li{
  background:var(--trp-surface);border:1px solid var(--trp-border);
  border-radius:var(--trp-r-md);padding:11px 14px;font-size:14px;color:var(--trp-ink-2);
}
.trp-ic-list li strong{color:var(--trp-ink);}