/* ============================================================
	ATTENTIQ AD SLOTS PAGE — asp-* + ase-* namespaces
	asp-* = ad slots page specific
	ase-* = ad slot editor (reusable component)
	All colours use CSS variables — WCAG AA — min 12px
	============================================================ */

/* ── Site-wide Performance Header ────────────────────────── */
.asp-perf-header {
	background: var(--hero-bg);
	border-radius: 12px;
	border: 1px solid var(--hero-border);
	padding: 24px 28px;
	margin: 0 2px 40px 0;
	position: relative;
	overflow: hidden;
}

.asp-perf-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient( ellipse at 100% -20%, rgba(147,205,32,0.08) 0%, transparent 50% ),
		radial-gradient( ellipse at 0%   120%, rgba(0,201,167,0.07)  0%, transparent 50% );
	pointer-events: none;
	border-radius: inherit;
}

.asp-perf-intro {
	margin-bottom: 20px;
}

.asp-perf-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--hero-text);
	margin-bottom: 3px;
}

.asp-perf-sub {
	font-size: 12px;
	color: var(--hero-text-sub);
}

.asp-perf-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.asp-perf-slot {
	background: var(--hero-surface);
	border: 1px solid var(--hero-border);
	border-radius: 10px;
	padding: 14px 16px;
	transition: border-color 0.15s;
}

.asp-perf-slot.is-best {
	border-color: var(--hero-mint-border);
	background: var(--hero-mint-bg);
}

.asp-perf-slot-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.asp-perf-slot-icon {
	color: var(--hero-text-dim);
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.asp-perf-slot.is-best .asp-perf-slot-icon { color: var(--hero-mint); }

.asp-perf-slot-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--hero-text-label);
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
}

.asp-best-badge {
	font-size: 12px;
	font-weight: 700;
	background: var(--hero-mint-bg);
	color: var(--hero-mint);
	padding: 1px 6px;
	border-radius: 5px;
	border: 1px solid var(--hero-mint-border);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.asp-perf-slot-score {
	font-size: 20px;
	font-weight: 800;
	font-family: var(--font-mono);
	line-height: 1;
	flex-shrink: 0;
}

.asp-perf-bar-track {
	height: 4px;
	background: rgba(255,255,255,0.08);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 10px;
}

.asp-perf-bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.6s ease;
}

.asp-perf-slot-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--hero-text-meta);
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.asp-pro-note {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--hero-text-dim);
	font-size: 12px;
}

.asp-perf-slot-count {
	font-size: 12px;
	color: var(--hero-text-dim);
}

/* ── Slots wrap (form container) ──────────────────────────── */
.asp-slots-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Reusable Slot Editor — ase-* ─────────────────────────── */
.ase-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ── Slot card ────────────────────────────────────────────── */
.ase-slot-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s;
}

.ase-slot-card.has-code {
	border-color: rgba(108,99,255,0.20);
}

.ase-slot-card.has-override {
	border-color: rgba(0,201,167,0.30);
}

.ase-slot-card.is-locked {
	opacity: 0.7;
}

/* ── Slot card header ─────────────────────────────────────── */
.ase-slot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	background: var(--bg);
	border-bottom: 1px solid var(--border-soft);
}

.ase-slot-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.ase-slot-icon {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--primary-soft);
	color: var(--primary-text);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ase-slot-card.has-code .ase-slot-icon {
	background: rgba(108,99,255,0.15);
	color: var(--primary-text);
}

.ase-slot-card.has-override .ase-slot-icon {
	background: var(--mint-10);
	color: var(--mint-text);
}

.ase-slot-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 2px;
}

.ase-slot-desc {
	font-size: 12px;
	color: var(--text-3-aa);
	line-height: 1.4;
}

/* ── Badges ───────────────────────────────────────────────── */
.ase-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	font-family: var(--font-mono);
}

.ase-badge--optional  { background: var(--surface-3); color: var(--text-3-aa); border: 1px solid var(--border); }
.ase-badge--pro       { background: var(--primary-soft); color: var(--primary-text); border: 1px solid rgba(108,99,255,0.20); }
.ase-badge--active    { background: var(--mint-10); color: var(--mint-text); border: 1px solid rgba(0,201,167,0.20); }
.ase-badge--override  { background: var(--mint-soft); color: var(--mint-text); border: 1px solid rgba(0,201,167,0.30); }

/* ── Lazy load toggle ─────────────────────────────────────── */
.ase-lazy-wrap {
	flex-shrink: 0;
}

.ase-lazy-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.ase-lazy-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ase-lazy-track {
	position: relative;
	width: 36px;
	height: 20px;
	background: var(--default-toggle-bg);
	border-radius: 99px;
	border: 1px solid var(--border);
	transition: background 0.2s, border-color 0.2s;
	flex-shrink: 0;
}

.ase-lazy-label input:checked ~ .ase-lazy-track {
	background: var(--primary);
	border-color: var(--primary);
}

.ase-lazy-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	background: var(--surface);
	border-radius: 50%;
	transition: transform 0.2s;
}

.ase-lazy-label input:checked ~ .ase-lazy-track .ase-lazy-thumb {
	transform: translateX(16px);
}

.ase-lazy-text {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-3-aa);
	white-space: nowrap;
}

.ase-lazy-label:hover .ase-lazy-text { color: var(--text); }

/* ── Slot body ────────────────────────────────────────────── */
.ase-slot-body {
	padding: 0;
}

/* ── Device tabs ──────────────────────────────────────────── */
.ase-pane--hidden {
	display: none;
}
.ase-device-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 10px 18px 0;
	border-bottom: 1px solid var(--border-soft);
}

.ase-device-tab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--text-3-aa);
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 7px 7px 0 0;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	margin-bottom: -1px;
}

.ase-device-tab:hover { color: var(--text); background: var(--surface-3); }

.ase-device-tab.is-active {
	color: var(--primary-text);
	background: var(--surface);
	border-color: var(--border);
	border-bottom-color: var(--surface);
	font-weight: 700;
}

.ase-device-tab.has-code::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mint);
	display: inline-block;
	margin-left: 3px;
}

.ase-fallback-note {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-3-aa);
}

/* ── Panes ────────────────────────────────────────────────── */
.ase-pane {
	padding: 16px 18px;
}

.ase-pane[hidden] { display: none; }

/* ── Override bar (post mode) ─────────────────────────────── */
.ase-override-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 7px;
	margin-bottom: 10px;
	font-size: 12px;
	background: var(--surface-3);
	border: 1px solid var(--border-soft);
}

.ase-override-status {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--text-3-aa);
}

.ase-override-status.is-on {
	color: var(--mint-text);
}

.ase-override-clear {
	font-size: 12px;
	font-weight: 600;
	color: var(--red-text);
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	transition: background 0.15s;
	font-family: var(--font-body);
	white-space: nowrap;
}

.ase-override-clear:hover { background: var(--red-soft); }

/* ── Textarea ─────────────────────────────────────────────── */
.ase-textarea {
	width: 100%;
	font-size: 12px;
	font-family: var(--font-mono);
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 10px 12px;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	line-height: 1.6;
}

.ase-textarea:focus {
	border-color: rgba(108,99,255,0.40);
	box-shadow: 0 0 0 3px rgba(108,99,255,0.08);
}

/* ── Mobile note ──────────────────────────────────────────── */
.ase-mob-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-3-aa);
	margin-bottom: 10px;
	padding: 8px 12px;
	background: var(--surface-3);
	border-radius: 6px;
	border: 1px solid var(--border-soft);
}

/* ── Alignment row ────────────────────────────────────────── */
.ase-align-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.ase-align-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-3-aa);
	white-space: nowrap;
	flex-shrink: 0;
}

.ase-align-tabs {
	display: flex;
	gap: 3px;
	background: var(--surface-3);
	border-radius: 7px;
	padding: 2px;
}

.ase-align-tab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 5px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-3-aa);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	font-family: var(--font-body);
	white-space: nowrap;
}

.ase-align-tab input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ase-align-tab:hover { color: var(--text); }

.ase-align-tab.is-active {
	background: var(--surface);
	color: var(--primary-text);
	border-color: var(--border);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}

/* ── Locked slot ──────────────────────────────────────────── */
.ase-slot-locked {
	padding: 20px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 960px ) {
	.asp-perf-slots { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 782px ) {
	.asp-perf-header { padding: 16px; border-radius: 8px 8px 0 0; }
	.asp-perf-slots  { grid-template-columns: 1fr; }

	.ase-slot-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ase-lazy-wrap { align-self: flex-start; }

	.ase-device-tabs { padding: 8px 12px 0; }
	.ase-pane        { padding: 12px; }

	.ase-align-row { flex-wrap: wrap; }
}