/**
 * Color Space Converter Block Frontend Styles
 *
 * @package NegarityWP
 */

/* Ensure proper spacing and layout */
.negarity-converter-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Smooth transitions for interactive elements */
.negarity-converter-submit,
.negarity-channel-input,
.negarity-illuminant-select,
.negarity-observer-select {
    transition: all 0.2s ease-in-out;
}

/* Focus states for accessibility */
.negarity-channel-input:focus,
.negarity-illuminant-select:focus,
.negarity-observer-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Color Channel Visualizer (when inputStyle uses visualizer) */
.negarity-converter-ccv-container .negarity-ccv {
  --ccv-track-h: 24px;
  --ccv-thumb-size: 20px;
  --ccv-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}
.negarity-converter-ccv-container .negarity-ccv__preview {
  width: 48px;
  height: 48px;
  border-radius: var(--ccv-radius);
  border: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.negarity-converter-ccv-container .negarity-ccv__sliders { flex: 1; min-width: 0; width: 100%; }
.negarity-converter-ccv-container .negarity-ccv-slider { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.negarity-converter-ccv-container .negarity-ccv-slider__label { width: 20px; flex-shrink: 0; font-weight: 600; }
.negarity-converter-ccv-container .negarity-ccv-slider__track-wrap { position: relative; flex: 1; height: var(--ccv-track-h); min-width: 80px; }
.negarity-converter-ccv-container .negarity-ccv-slider__track { position: absolute; inset: 0; border-radius: var(--ccv-radius); cursor: pointer; }
.negarity-converter-ccv-container .negarity-ccv-slider__thumb { position: absolute; width: var(--ccv-thumb-size); height: var(--ccv-thumb-size); border-radius: 50%; background: #fff0; border: 2px solid #666; cursor: grab; top: 50%; transform: translateY(-50%); }
.negarity-converter-ccv-container .negarity-ccv-slider__value { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.negarity-converter-ccv-container .negarity-ccv--layout-vertical { display: flex; flex-direction: column; }
.negarity-converter-ccv-container .negarity-ccv--with-preview { display: flex; align-items: flex-start; gap: 16px; }
.negarity-converter-ccv-container .negarity-ccv-slider__track-circular { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; cursor: pointer; }
.negarity-converter-ccv-container .negarity-ccv-slider--circular .negarity-ccv-slider__track-wrap,
.negarity-converter-ccv-container .negarity-ccv-slider--circularDependent .negarity-ccv-slider__track-wrap { width: 120px; height: 70px; margin: 0 auto; flex: 0 0 auto; overflow: hidden; position: relative; }
.negarity-converter-ccv-container .negarity-ccv-slider--circular .negarity-ccv-slider__track-wrap { height: 120px; }
.negarity-converter-ccv-container .negarity-ccv-slider--circular .negarity-ccv-slider__track,
.negarity-converter-ccv-container .negarity-ccv-slider--circularDependent .negarity-ccv-slider__track { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.negarity-converter-ccv-container .negarity-ccv-slider--dependent2 .negarity-ccv-slider__track,
.negarity-converter-ccv-container .negarity-ccv-slider--dependent3 .negarity-ccv-slider__track { background: #e0e0e0; background-image: linear-gradient(to right,#808080,#c0c0c0); }

/* When both visualizer and dropdown: hide CCV range inputs, use number inputs for control */
.wp-block-negarity-wp-color-space-converter[data-input-style="both"] .negarity-ccv-slider__input {
    display: none;
}

/* Color details in More Information */
.negarity-color-details {
    margin-bottom: 1rem;
}
.negarity-source-color-details {
    margin-top: 1.5rem;
}
.negarity-color-details .negarity-color-details-item:last-child {
    margin-bottom: 0;
}

/* Print styles */
@media print {
    .negarity-converter-actions,
    .negarity-converter-loading {
        display: none;
    }
    
    .negarity-converter-results {
        break-inside: avoid;
    }
}