/**
 * Lumenare Search Block - Editor-only Styles
 *
 * These styles are only loaded in the block editor.
 *
 * @package LumenareSearch
 */

.lumenare-search-block {
	// Indicate this is a preview in the editor
	.lumenare-search-form--preview {
		position: relative;

		// Disabled state styling for preview
		.lumenare-search-input:disabled {
			background-color: #f9f9f9;
			cursor: default;
			opacity: 1; // Override default disabled opacity
		}

		// Subtle indicator that this is a preview
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			border: 1px dashed transparent;
			border-radius: 4px;
			transition: border-color 0.2s ease;
		}
	}

	// Show dashed border when block is selected
	&.is-selected .lumenare-search-form--preview::after {
		border-color: var(--wp-admin-theme-color, #007cba);
	}

	// Match the existing plugin input styles for consistency
	.lumenare-search-input {
		width: 100%;
		padding: 0.75em 1em;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: inherit;
		line-height: 1.5;
		box-sizing: border-box;

		&::placeholder {
			color: #999;
		}

		&.lumenare-search-input-with-icon {
			padding-right: 3em;
		}
	}

	.lumenare-search-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	.lumenare-search-icon {
		position: absolute;
		right: 0.5em;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5em;
		border: none;
		background: transparent;
		color: #666;
		cursor: pointer;

		&:hover {
			color: #333;
		}
	}
}

.lumenare-search-filters-block {
	.lumenare-search-filters {
		border: 1px dashed #dcdcde;
		border-radius: 6px;
		background: #fff;
		padding: 1rem;
	}

	.widget {
		margin: 0;
	}

	.widget-title,
	.lumenare-filter-section h4 {
		margin: 0 0 0.75rem;
	}

	.lumenare-filter-form--preview {
		display: grid;
		gap: 1rem;
	}

	.lumenare-filter-label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0 0 0.5rem;
		font-size: 13px;
	}

	.lumenare-filter-count {
		color: #757575;
	}

	input[type="date"] {
		flex: 1;
		min-width: 0;
	}

	.lumenare-filter-submit.button {
		width: auto;
	}

	.lumenare-search-filters-block__actions {
		display: grid;
		gap: 0.75rem;
	}

	.lumenare-search-filters-block__note {
		margin: 0;
		color: #50575e;
		font-size: 12px;
		line-height: 1.5;
	}

	.lumenare-filter-accordion {
		border: 1px solid #dcdcde;
		border-radius: 6px;
	}

	.lumenare-filter-accordion__summary {
		display: grid;
		gap: 0.25rem;
		cursor: default;
		list-style: none;
		padding: 0;
	}

	.lumenare-filter-accordion__summary::-webkit-details-marker {
		display: none;
	}

	.lumenare-filter-accordion__eyebrow {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #757575;
	}

	.lumenare-filter-accordion__title {
		font-size: 15px;
		font-weight: 600;
	}

	.lumenare-filter-accordion__panel {
		margin-top: 1rem;
	}
}

.lumenare-search-terms-block {
	.lumenare-search-terms {
		border: 1px dashed #dcdcde;
		border-radius: 6px;
		padding: 1rem;
	}

	.lumenare-search-terms__empty {
		color: #757575;
		font-size: 13px;
	}
}

// Block variation styles in inserter
.block-editor-block-variation-picker {
	.lumenare-search-variation {
		// Custom styling for variation icons if needed
	}
}