/* ============================================
   Pixia - AI Photo Colorizer (colorize-image.html)

   Reuses the complete structural stylesheet
   css/enhance-studio.css (body.at-enhance scope) and
   only retints the amber accent to the colorizer's
   violet / magenta and adds a few colour-specific bits.
   Load AFTER css/enhance-studio.css.
   ============================================ */

body.at-colorize {
  --en-accent: #8b5cf6;
  --en-accent-2: #d946ef;
  --cv-accent-soft: rgba(139, 92, 246, .2);
  --en-shadow: 0 16px 34px -18px rgba(139, 92, 246, .8);
}

/* Accent re-tint (same specificity, later file wins) */
body.at-colorize .at-kicker { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
body.at-colorize .at-btn { background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: var(--en-shadow); }
body.at-colorize .at-btn-download { background: linear-gradient(135deg, #16a34a, #22c55e); color: #06210f; }

/* Studio components that hard-code the amber gradient */
body.at-colorize .en-drop-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(217, 70, 239, .22));
  color: #a855f7;
}
body.at-colorize .en-toggle input:checked ~ .en-switch { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
body.at-colorize .en-auto-btn.is-accent { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
body.at-colorize .en-view-btn.is-active { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
body.at-colorize .en-result-dl { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
body.at-colorize .en-progress-fill { background: linear-gradient(90deg, #8b5cf6, #d946ef); }

/* ---------- Colorizer-specific ---------- */

/* Preset chips get a small colour swatch above the label */
body.at-colorize .cv-swatch {
  align-self: stretch;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cv-sw, #8b5cf6), var(--cv-sw2, #d946ef));
  opacity: .55;
  transition: opacity .2s var(--en-ease);
}
body.at-colorize .en-preset:hover .cv-swatch,
body.at-colorize .en-preset.is-active .cv-swatch { opacity: 1; }

/* The colour-strength slider is the primary control: give it more presence */
body.at-colorize .cv-primary .en-slider-top label { color: var(--text-primary); }
body.at-colorize .cv-primary .en-range { height: 20px; }

/* Compare hint pill shown over the slider view */
body.at-colorize .cv-cmp-hint {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 600 11.5px/1 var(--font-primary);
  letter-spacing: .02em;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* Restore toggle row spacing inside its group */
body.at-colorize .cv-restore { margin-block-start: 14px; }
body.at-colorize .cv-restore + .en-hint { margin-block-start: 8px; }