/* =====================================================
   TinyToolWeb - image-watermark.css
   ===================================================== */

.tool-image-watermark .tool-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.tool-image-watermark canvas {
  max-width: 100%;
  height: auto;
  border: 2px dashed var(--border);
  background: var(--bg-body);
  border-radius: var(--radius-sm);
}

/* Inputs et selects */
.tool-image-watermark input,
.tool-image-watermark select {
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--text-dark);
}

/* File upload button */
.tool-image-watermark .file-upload input[type="file"] {
  display: none;
}

.tool-image-watermark .file-btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: white;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  user-select: none;
}

.tool-image-watermark .file-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Range & Color inputs */
.tool-image-watermark input[type="range"],
.tool-image-watermark input[type="color"] {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  padding: 0;
  height: 42px; /* pour color input */
}

/* Grids responsive */
.panel.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.panel.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
}