/**
 * 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 {
        -moz-column-break-inside: avoid;
             break-inside: avoid;
    }
}

/**
 * Color Visualizer Block Frontend Styles
 *
 * @package NegarityWP
 */

.wp-block-negarity-wp-color-visualizer {
    /* Base styles - theme will override with Tailwind */
}

/* Info Roller - Frontend styles */

.wp-block-negarity-wp-info-roller.negarity-info-roller {
    overflow: hidden;
    padding: 0;
    position: relative;
}

.negarity-info-roller__track {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease-out;
}

.negarity-info-roller__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.4s ease-out, background-color 0.4s ease-out;
}

.negarity-info-roller__item--active {
    opacity: 1;
}

.negarity-info-roller__item:not(.negarity-info-roller__item--active) {
    opacity: 0.35;
}

/* Info Roller Child - Frontend styles */

.negarity-info-roller__item {
    width: 100%;
    box-sizing: border-box;
}

/**
 * Multiple Colors Block Frontend Styles
 *
 * @package NegarityWP
 */

.wp-block-negarity-wp-multiple-colors {
	display: block;
}

.negarity-multiple-colors__inner {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

/* Horizontal alignment (default): colors in a row */
.wp-block-negarity-wp-multiple-colors.negarity-multiple-colors--layout-horizontal .negarity-multiple-colors__inner {
	flex-direction: row;
}

/* Vertical alignment: colors in a column */
.wp-block-negarity-wp-multiple-colors.negarity-multiple-colors--layout-vertical .negarity-multiple-colors__inner {
	flex-direction: column;
}

/* Grid layout: controlled by inline grid-template-columns from block attributes */
.wp-block-negarity-wp-multiple-colors.negarity-multiple-colors--layout-grid .negarity-multiple-colors__inner {
	display: grid;
	flex-direction: unset;
}

.negarity-multiple-colors__cell {
	flex: 1;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
}

/* Vertical layout: cells stack and share height equally */
.negarity-multiple-colors--layout-vertical .negarity-multiple-colors__cell {
	min-height: 0;
}

.negarity-multiple-colors__cell .wp-block-negarity-wp-single-color {
	height: 100%;
}

.negarity-multiple-colors__cell .negarity-single-color__swatch {
	min-height: 100%;
}

/**
 * Single Color Block Frontend Styles
 *
 * @package NegarityWP
 */

.wp-block-negarity-wp-single-color {
	display: block;
}

.negarity-single-color__swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}

.negarity-single-color__value {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25em;
	padding: 0.25em 0.5em;
	font-family: inherit;
	font-size: 0.875em;
	line-height: 1.4;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.92);
	color: #1a1a1a;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	word-break: break-all;
	max-width: 90%;
}

.negarity-single-color__value .negarity-copy-value,
.negarity-single-color__swatch .negarity-copy-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	padding: 0 0.5rem;
	color: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
	vertical-align: middle;
}

.negarity-single-color__value .negarity-copy-value-icon,
.negarity-single-color__swatch .negarity-copy-value-icon {
	display: inline-flex;
	width: 1rem;
	height: 1rem;
}

.negarity-single-color__value .negarity-copy-value-icon svg,
.negarity-single-color__swatch .negarity-copy-value-icon svg {
	width: 100%;
	height: 100%;
}

.negarity-single-color__value .negarity-copy-value-feedback,
.negarity-single-color__swatch .negarity-copy-value-feedback {
	font-size: 0.7rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.15s;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.negarity-single-color__value .negarity-copy-value-feedback.negarity-copy-value-feedback-visible,
.negarity-single-color__swatch .negarity-copy-value-feedback.negarity-copy-value-feedback-visible {
	opacity: 1;
	max-width: 5rem;
}

.negarity-single-color__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.negarity-single-color__link:hover {
	opacity: 1;
}

.negarity-single-color__link svg {
	width: 1rem;
	height: 1rem;
}

/**
 * Text Box Block – Front end
 *
 * @package NegarityWP
 */

.wp-block-negarity-wp-text-box.negarity-text-box {
    box-sizing: border-box;
}

.negarity-text-box__text {
    text-align: center;
}

/* Property Extractor block – read-only slider */
.wp-block-negarity-wp-property-extractor.negarity-property-extractor {
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

.negarity-property-extractor__header {
  margin-bottom: 0.125rem;
}

.negarity-property-extractor__title {
  font-weight: 600;
  font-size: var(--negarity-pe-title-font-size, 0.875rem);
  text-transform: capitalize;
}

.negarity-property-extractor__slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.negarity-property-extractor__min,
.negarity-property-extractor__max {
  font-size: var(--negarity-pe-minmax-font-size, 0.75rem);
  color: var(--negarity-muted, #666);
  min-width: 2ch;
  flex-shrink: 0;
}

.negarity-property-extractor__track {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--negarity-track-bg, #e5e7eb);
  border-radius: 3px;
  overflow: visible;
  padding-bottom: 0.6em;
}

.negarity-property-extractor__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--negarity-slider-color, #3b82f6);
  border-radius: 3px 0 0 3px;
  pointer-events: none;
}

.negarity-property-extractor__thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: translateY(-50%);
  background: var(--negarity-slider-color, #1d4ed8);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Value and label at thumb position (below slider) */
.negarity-property-extractor__value-at-thumb {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  font-size: var(--negarity-pe-value-font-size, 0.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--negarity-muted, #666);
  pointer-events: none;
}

.negarity-property-extractor__value-at-thumb .negarity-property-extractor__value-num {
  font-variant-numeric: tabular-nums;
}

.negarity-property-extractor__value-at-thumb .negarity-property-extractor__value-label {
  color: var(--negarity-muted, #555);
}


/*# sourceMappingURL=frontend.css.map*/