/*
 * RAL Color Picker – front-end styles
 * Author: Łukasz Rostalski
 * Version: 1.0.0
 */

/* ── Custom properties ─────────────────────────────────────────── */
.ral-cp-wrap {
	--cp-accent:     #c8402a;         /* overridden per-instance via JS */
	--cp-accent-lt:  #f5e8e5;
	--cp-ink:        #1a1a1a;
	--cp-ink-muted:  #5a5a5a;
	--cp-ink-faint:  #9a9a9a;
	--cp-border:     #e0e0e0;
	--cp-surface:    #ffffff;
	--cp-surface-alt:#f5f4f0;
	--cp-radius:     6px;
	--cp-radius-lg:  12px;
	--cp-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cp-swatch-size: 72px;

	font-family:   var(--cp-font);
	color:         var(--cp-ink);
	box-sizing:    border-box;
}

.ral-cp-wrap *,
.ral-cp-wrap *::before,
.ral-cp-wrap *::after {
	box-sizing: inherit;
}

/* ── Title ─────────────────────────────────────────────────────── */
.ral-cp-title {
	font-size:     22px;
	font-weight:   700;
	line-height:   1.2;
	margin:        0 0 20px;
	color:         var(--cp-ink);
}

/* ── Toolbar (search + filters) ────────────────────────────────── */
.ral-cp-toolbar {
	display:        flex;
	flex-wrap:      wrap;
	gap:            10px;
	align-items:    center;
	margin-bottom:  18px;
}

/* Search */
.ral-cp-search-wrap {
	position:       relative;
	flex:           1 1 220px;
	min-width:      0;
	max-width:      360px;
}

.ral-cp-search-icon {
	position:       absolute;
	left:           11px;
	top:            50%;
	transform:      translateY(-50%);
	width:          16px;
	height:         16px;
	color:          var(--cp-ink-faint);
	pointer-events: none;
}

.ral-cp-search {
	width:          100%;
	padding:        9px 12px 9px 36px;
	border:         1.5px solid var(--cp-border);
	border-radius:  var(--cp-radius);
	font-family:    var(--cp-font);
	font-size:      14px;
	color:          var(--cp-ink);
	background:     var(--cp-surface);
	outline:        none;
	transition:     border-color .15s;
}

.ral-cp-search:focus {
	border-color: var(--cp-accent);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--cp-accent) 15%, transparent);
}

/* Filter buttons */
.ral-cp-filters {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.ral-cp-filter {
	padding:       7px 14px;
	border-radius: 20px;
	border:        1.5px solid var(--cp-border);
	background:    var(--cp-surface);
	font-family:   var(--cp-font);
	font-size:     13px;
	font-weight:   600;
	color:         var(--cp-ink-muted);
	cursor:        pointer;
	transition:    background .15s, border-color .15s, color .15s;
	white-space:   nowrap;
	line-height:   1;
}

.ral-cp-filter:hover {
	border-color: var(--cp-accent);
	color:        var(--cp-accent);
}

.ral-cp-filter.active {
	background:   var(--cp-accent);
	border-color: var(--cp-accent);
	color:        #fff;
}

/* ── Colour grid ───────────────────────────────────────────────── */
.ral-cp-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--cp-swatch-size), 1fr));
	gap:                   6px;
	margin-bottom:         20px;
}

/* Empty / no-results state */
.ral-cp-empty {
	grid-column:  1 / -1;
	text-align:   center;
	padding:      32px 16px;
	color:        var(--cp-ink-faint);
	font-size:    14px;
}

/* ── Individual swatch ─────────────────────────────────────────── */
.ral-cp-swatch {
	border-radius: var(--cp-radius);
	border:        2px solid transparent;
	cursor:        pointer;
	overflow:      hidden;
	transition:    transform .15s, border-color .15s, box-shadow .15s;
	background:    var(--cp-surface);
	outline:       none;
	padding:       0;
	/* reset button */
	appearance:    none;
	-webkit-appearance: none;
	font-family:   var(--cp-font);
	display:       block;
	width:         100%;
}

.ral-cp-swatch:hover {
	transform:    scale(1.06);
	border-color: var(--cp-accent);
	box-shadow:   0 2px 8px rgba(0,0,0,.18);
}

.ral-cp-swatch:focus-visible {
	outline:      3px solid var(--cp-accent);
	outline-offset: 2px;
}

.ral-cp-swatch.is-selected {
	border-color: var(--cp-accent);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--cp-accent) 30%, transparent);
	transform:    scale(1.06);
}

/* Colour face */
.ral-cp-swatch-color {
	width:       100%;
	aspect-ratio: 1;
	display:     block;
}

/* Text label below color */
.ral-cp-swatch-label {
	padding:     4px 3px 5px;
	font-size:   9.5px;
	line-height: 1.25;
	text-align:  center;
	color:       var(--cp-ink);
	background:  var(--cp-surface);
	display:     block;
}

.ral-cp-swatch-code {
	display:     block;
	font-weight: 700;
	font-size:   10px;
}

.ral-cp-swatch-name {
	display:     block;
	color:       var(--cp-ink-muted);
	font-size:   9px;
	margin-top:  1px;
	/* clamp long names */
	overflow:    hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width:   100%;
}

/* ── Selected colour banner ────────────────────────────────────── */
.ral-cp-selected {
	display:       flex;
	align-items:   center;
	gap:           16px;
	padding:       14px 18px;
	border-radius: var(--cp-radius-lg);
	border:        2px solid var(--cp-accent);
	background:    var(--cp-accent-lt);
	animation:     ralCpFadeIn .2s ease;
	flex-wrap:     wrap;
}

@keyframes ralCpFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ral-cp-selected-swatch {
	width:         52px;
	height:        52px;
	border-radius: 10px;
	border:        1px solid rgba(0,0,0,.12);
	flex-shrink:   0;
	transition:    background .2s;
}

.ral-cp-selected-info {
	display:       flex;
	flex-direction: column;
	gap:           2px;
	min-width:     0;
}

.ral-cp-selected-label {
	font-size:   12px;
	color:       var(--cp-ink-muted);
	font-weight: 500;
}

.ral-cp-selected-name {
	font-size:   17px;
	font-weight: 700;
	color:       var(--cp-ink);
	line-height: 1.2;
}

.ral-cp-selected-code {
	font-size:   13px;
	color:       var(--cp-ink-muted);
}

/* ── Responsive tweaks ─────────────────────────────────────────── */
@media (max-width: 480px) {
	.ral-cp-wrap {
		--cp-swatch-size: 60px;
	}

	.ral-cp-toolbar {
		flex-direction: column;
		align-items:    stretch;
	}

	.ral-cp-search-wrap {
		max-width: 100%;
	}

	.ral-cp-filters {
		gap: 5px;
	}

	.ral-cp-filter {
		padding:   6px 10px;
		font-size: 12px;
	}

	.ral-cp-title {
		font-size: 18px;
	}

	.ral-cp-selected {
		gap: 12px;
	}

	.ral-cp-selected-name {
		font-size: 15px;
	}

	.ral-cp-grid {
		gap: 4px;
	}
}

@media (max-width: 360px) {
	.ral-cp-wrap {
		--cp-swatch-size: 52px;
	}
}

/* ── Block editor wrapper (no impact on front) ─────────────────── */
.wp-block-ral-color-picker-picker .ral-cp-wrap {
	max-width: 100%;
}