/* ── Job Alerts block ─────────────────────────────────────────────────────── */
.wcb-job-alerts {
	background: var(--wcb-on-primary, #ffffff );
	border: 1px solid var(--wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-xl, 12px );
	padding: var( --wcb-space-2xl, 1.5rem );
	max-width: 480px;
	font-family: inherit;
}

.wcb-ja-title,
.wcb-ja-list-title {
	font-size: var( --wcb-text-md );
	font-weight: var( --wcb-font-bold, 700 );
	color: var(--wcb-contrast, #0f172a );
	margin: 0 0 var( --wcb-space-xs );
}

.wcb-ja-desc {
	font-size: var( --wcb-text-base, 0.875rem );
	color: var( --wcb-text-secondary, #6b7280 );
	margin: 0 0 var( --wcb-space-lg );
}

/* ── Frequency picker ────────────────────────────────────────────────────── */
.wcb-ja-frequency {
	display: flex;
	gap: var( --wcb-space-lg, 1rem );
	margin-bottom: var( --wcb-space-lg, 1rem );
}

.wcb-ja-freq-label {
	display: flex;
	align-items: center;
	gap: var( --wcb-space-xs );
	font-size: var( --wcb-text-base, 0.875rem );
	font-weight: var( --wcb-font-medium, 500 );
	color: var(--wcb-contrast, #0f172a );
	cursor: pointer;
}

/* ── Alerts list ─────────────────────────────────────────────────────────── */
.wcb-ja-list-wrap {
	display: none;
	margin-top: var( --wcb-space-2xl, 1.5rem );
	border-top: 1px solid var(--wcb-surface, #f1f5f9 );
	padding-top: var( --wcb-space-lg, 1rem );
}

.wcb-ja-list-wrap.wcb-shown {
	display: block;
}

.wcb-ja-list {
	list-style: none;
	margin: var( --wcb-space-md ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --wcb-space-sm, 0.5rem );
}

.wcb-ja-alert-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --wcb-space-sm ) var( --wcb-space-md );
	background: var( --wcb-bg-subtle, #f8fafc );
	border: 1px solid var(--wcb-border, #e2e8f0 );
	border-radius: var( --wcb-radius-md, 8px );
	font-size: var( --wcb-text-base, 0.875rem );
	color: var(--wcb-contrast, #0f172a );
	min-width: 0;
}

.wcb-ja-delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	background: none;
	border: none;
	color: var( --wcb-text-secondary, #6b7280 );
	cursor: pointer;
	font-size: var( --wcb-text-base, 0.875rem );
	padding: var( --wcb-space-xs ) var( --wcb-space-xs );
	border-radius: var( --wcb-radius-sm, 4px );
	transition: color var( --wcb-transition-fast, 0.12s ), background var( --wcb-transition-fast, 0.12s );
	flex-shrink: 0;
}

.wcb-ja-delete-btn:hover {
	color: var( --wcb-danger, #dc2626 );
	background: var( --wcb-danger-bg, #fee2e2 );
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.wcb-ja-empty {
	font-size: var( --wcb-text-base, 0.875rem );
	color: var( --wcb-text-secondary, #6b7280 );
	text-align: center;
	padding: var( --wcb-space-2xl, 1.5rem ) 0;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.wcb-ja-loading {
	display: none;
	font-size: var( --wcb-text-base, 0.875rem );
	color: var( --wcb-text-secondary, #6b7280 );
	margin: 0;
}

.wcb-ja-loading.wcb-shown {
	display: block;
}

/* ── Subscribe success ───────────────────────────────────────────────────── */
.wcb-ja-subscribed {
	display: none;
	margin: var( --wcb-space-md ) 0 0;
	padding: var( --wcb-space-sm ) var( --wcb-space-md );
	font-size: var( --wcb-text-base, 0.875rem );
	color: var( --wcb-success-fg, #047857 );
	background: var( --wcb-success-bg-soft, #d1fae5 );
	border-radius: var( --wcb-radius-md, 8px );
}

.wcb-ja-subscribed.wcb-shown {
	display: block;
}

/* ── Shared button tokens ────────────────────────────────────────────────── */
.wcb-cbtn {
	display: inline-flex;
	align-items: center;
	padding: var( --wcb-space-sm ) var( --wcb-space-xl );
	border-radius: var( --wcb-radius-md, 8px );
	font-size: var( --wcb-text-base, 0.875rem );
	font-weight: var( --wcb-font-semibold, 600 );
	text-decoration: none;
	cursor: pointer;
	border: none;
	font-family: inherit;
	transition: background var( --wcb-transition-fast, 0.12s );
}

.wcb-cbtn--primary {
	background: var(--wcb-primary, #2563eb );
	color: var(--wcb-on-primary, #ffffff );
}

.wcb-cbtn--primary:hover:not( :disabled ) {
	background: var(--wcb-primary-dark, #1d4ed8 );
}

.wcb-cbtn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}