/**
 * AttentIQ Paragraph Heatmap
 * Component styles — Electric Daylight design system
 * Enqueue via: wp_enqueue_style( 'attentiq-heatmap', ... )
 */

/* ── Container ─────────────────────────────────────────────────────────────── */
.iq-heatmap {
	background: #ffffff;
	border: 1.5px solid #e8eaf0;
	border-radius: 14px;
	padding: 20px 24px 16px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	color: #3b2b54;
	box-shadow: 0 1px 3px rgba(108, 99, 255, 0.08), 0 1px 2px rgba(108, 99, 255, 0.06);
	position: relative;
}

.iq-heatmap--empty {
	padding: 28px 24px;
}

/* ── Controls row (device toggle + slots toggle) ───────────────────────────── */
.iq-heatmap__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

/* ── Device toggle ─────────────────────────────────────────────────────────── */
.iq-heatmap__toggle {
	display: inline-flex;
	align-items: center;
	background: #f7f8fc;
	border: 1.5px solid #e8eaf0;
	border-radius: 50px;
	padding: 3px;
	gap: 2px;
}

/* When inside controls, margin is on the controls wrapper */
.iq-heatmap__controls .iq-heatmap__toggle {
	margin-bottom: 0;
}

.iq-heatmap__toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	border-radius: 50px;
	border: none;
	background: transparent;
	color: #6b5a8a;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	line-height: 1;
	white-space: nowrap;
}

.iq-heatmap__toggle-btn:hover {
	color: #6c63ff;
}

.iq-heatmap__toggle-btn.active {
	background: #ffffff;
	color: #6c63ff;
	box-shadow: 0 1px 4px rgba(108, 99, 255, 0.15);
}

.iq-heatmap__toggle-btn svg {
	flex-shrink: 0;
}

/* ── Summary strip ─────────────────────────────────────────────────────────── */
.iq-heatmap__summary {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.iq-heatmap__summary-chip {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: #f7f8fc;
	border: 1px solid #e8eaf0;
	border-radius: 8px;
	padding: 7px 12px;
	min-width: 90px;
}

.iq-heatmap__summary-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #6b5a8a;
	line-height: 1;
}

.iq-heatmap__summary-val {
	font-family: 'DM Mono', 'Courier New', monospace;
	font-size: 15px;
	font-weight: 500;
	color: #6c63ff;
	line-height: 1.3;
	transition: opacity 0.2s;
}

/* ── Chart rows ────────────────────────────────────────────────────────────── */
.iq-heatmap__chart {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.iq-heatmap__row {
	display: grid;
	grid-template-columns: 28px 1fr 44px 18px;
	align-items: center;
	gap: 8px;
	min-height: 26px;
}

.iq-heatmap__row--top .iq-heatmap__label {
	color: #6c63ff;
	font-weight: 700;
}

/* Paragraph label */
.iq-heatmap__label {
	font-family: 'DM Mono', 'Courier New', monospace;
	font-size: 11px;
	font-weight: 500;
	color: #6b5a8a;
	text-align: right;
	line-height: 1;
	flex-shrink: 0;
}

/* Bar track */
.iq-heatmap__bar-track {
	background: #f7f8fc;
	border-radius: 5px;
	height: 24px;
	overflow: hidden;
	position: relative;
}

/* Bar fill */
.iq-heatmap__bar {
	height: 100%;
	border-radius: 5px;
	width: 0%;                          /* animated from JS */
	transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	position: relative;
	min-width: 0;
	overflow: hidden;
}

/* Color variants */
.iq-heatmap__bar--high {
	background: linear-gradient(90deg, #6c63ff, #00c9a7);
}

.iq-heatmap__bar--mid {
	background: linear-gradient(90deg, #6c63ff, #b8b2ff);
}

.iq-heatmap__bar--low {
	background: #b8b2ff;
}

.iq-heatmap__bar--dim {
	background: #e8eaf0;
}

/* % share label inside bar */
.iq-heatmap__bar-label {
	font-family: 'DM Mono', 'Courier New', monospace;
	font-size: 11px;
	font-weight: 600;
	color: #ffffff;
	padding-left: 8px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s 0.4s;  /* fade in after bar grows */
	flex-shrink: 0;
}

.iq-heatmap__bar--dim .iq-heatmap__bar-label {
	color: #6b5a8a;
}

/* Show label once bar has grown */
.iq-heatmap__bar[style*="width: 0%"] .iq-heatmap__bar-label,
.iq-heatmap__bar[style*="width:0%"]  .iq-heatmap__bar-label {
	opacity: 0;
}

.iq-heatmap__bar:not([style*="width: 0%"]):not([style*="width:0%"]) .iq-heatmap__bar-label {
	opacity: 1;
}

/* Time column */
.iq-heatmap__time {
	font-family: 'DM Mono', 'Courier New', monospace;
	font-size: 11px;
	color: #6b5a8a;
	text-align: right;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Pin column */
.iq-heatmap__pin {
	font-size: 13px;
	line-height: 1;
	flex-shrink: 0;
}
.iq-heatmap__pin.peak-paragraph {
	color: var(--primary-text);
}

.iq-heatmap__pin-spacer {
	display: inline-block;
	width: 18px;
}

/* Top row highlight */
.iq-heatmap__row--top .iq-heatmap__bar-track {
	box-shadow: 0 0 0 1.5px rgba(108, 99, 255, 0.25);
	border-radius: 6px;
}

/* ── Legend ────────────────────────────────────────────────────────────────── */
.iq-heatmap__legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e8eaf0;
}

.iq-heatmap__legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: #6b5a8a;
	font-weight: 500;
}

.iq-heatmap__legend-item--pro {
	margin-left: auto;
	color: #6c63ff;
	font-weight: 600;
}

.iq-heatmap__legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
}

.iq-heatmap__legend-dot.high {
	background: linear-gradient(135deg, #6c63ff, #6c63ff);
}

.iq-heatmap__legend-dot.mid {
	background: linear-gradient(135deg, #6c63ff, #b8b2ff);
}

.iq-heatmap__legend-dot.low {
	background: #b8b2ff;
}

.iq-heatmap__legend-dot.dim {
	background: #e8eaf0;
	border: 1px solid #d0d3e0;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.iq-heatmap__empty {
	text-align: center;
	color: #6b5a8a;
	font-size: 13px;
	padding: 8px 0;
	line-height: 1.6;
}

/* ── Hide tabs state ───────────────────────────────────────────────────────────── */
.iq-heatmap--no-tabs .iq-heatmap__toggle {
	display: none !important;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.iq-heatmap {
		padding: 16px 16px 14px;
	}

	.iq-heatmap__row {
		grid-template-columns: 24px 1fr 38px 18px;
		gap: 5px;
	}

	.iq-heatmap__bar-track {
		height: 20px;
	}

	.iq-heatmap__summary {
		gap: 6px;
	}

	.iq-heatmap__summary-chip {
		flex: 1;
		min-width: 70px;
	}

	.iq-heatmap__legend-item--pro {
		margin-left: 0;
	}
}

/* ── Admin meta box context ────────────────────────────────────────────────── */
.postbox .iq-heatmap {
	border-radius: 8px;
	box-shadow: none;
	border-color: #e8eaf0;
}

/* Demo lock label inside bar */
.iq-heatmap__bar-label--demo {
	padding-left: 6px;
	font-size: 11px;
	opacity: 0.8;
}

/* Time column locked state */
.iq-heatmap__time--locked {
	color: #c4bcd8;
	cursor: default;
}

/* Demo upgrade badge */
.iq-heatmap__demo-badge {
	margin-top: 10px;
	padding: 8px 12px;
	background: rgba(108,99,255,0.07);
	border: 1px dashed rgba(108,99,255,0.3);
	border-radius: 8px;
	font-size: 12px;
	color: #6c63ff;
	font-weight: 600;
	text-align: center;
}
/* ── Frontend heatmap overlay: panel + badge ───────────────────────────────── */
.aiq-hm-panel {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9992;
	background: rgba(15, 12, 30, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(108, 99, 255, 0.30);
	border-radius: 12px;
	padding: 12px 16px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	color: #fff;
	min-width: 220px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(108,99,255,0.10);
	pointer-events: none;
}

.aiq-hm-panel__brand {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 12px;
	color: #b8b2ff;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}

.aiq-hm-panel__brand svg {
	opacity: 0.8;
	flex-shrink: 0;
	stroke: #6c63ff;
}

.aiq-hm-panel__scale {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.aiq-hm-panel__scale-lbl {
	font-size: 10px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.aiq-hm-panel__scale-bar {
	flex: 1;
	height: 6px;
	border-radius: 99px;
	background: linear-gradient(90deg,
		rgba(184,178,255,0.5) 0%,
		#6c63ff 45%,
		#00c9a7 100%
	);
}

.aiq-hm-panel__stat {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* ── Floating badge ────────────────────────────────────────────────────────── */
.aiq-hm-badge {
	position: fixed;
	z-index: 9993;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(15, 12, 30, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--badge-color, #6c63ff);
	border-radius: 8px;
	padding: 5px 10px;
	font-family: 'DM Mono', 'Courier New', monospace;
	font-size: 11px;
	color: #fff;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s, transform 0.2s;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

.aiq-hm-badge.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.aiq-hm-badge__num {
	color: var(--badge-color, #6c63ff);
	font-weight: 700;
}

.aiq-hm-badge__sep {
	color: rgba(255, 255, 255, 0.25);
}

.aiq-hm-badge__time {
	color: #fff;
	font-weight: 600;
}

.aiq-hm-badge__share {
	color: rgba(255, 255, 255, 0.55);
}

/* ── Ad Slots toggle button ────────────────────────────────────────────────── */
.iq-heatmap__slots-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 50px;
	border: 1.5px solid #e8eaf0;
	background: #f7f8fc;
	color: #6b5a8a;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1;
	white-space: nowrap;
	margin-left: auto;
}

.iq-heatmap__slots-btn:hover {
	color: #c87000;
	border-color: rgba(200, 120, 0, 0.35);
}

.iq-heatmap__slots-btn.active {
	background: rgba(255, 150, 0, 0.08);
	color: #c87000;
	border-color: rgba(200, 120, 0, 0.35);
}

/* ── Ad slot divider lines in chart ────────────────────────────────────────── */
.iq-heatmap__slot-divider {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
	color: rgba(180, 105, 0, 0.55);
}

.iq-heatmap__slot-divider::before,
.iq-heatmap__slot-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: currentColor;
}

.iq-heatmap__slot-divider-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: inherit;
}