.wpag-app {
	max-width: 1200px;
	margin: 20px 0;

	h1 {
		margin-bottom: 16px;
	}
}

.wpag-settings-card {
	.components-card__body {
		display: grid;
		gap: 18px;
	}
}

.wpag-settings-section {
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
	padding: 18px;
}

.wpag-settings-section__header {
	border-bottom: 1px solid #edf0f2;
	margin-bottom: 16px;
	padding-bottom: 12px;

	h3 {
		margin: 0 0 6px;
	}

	p {
		color: #667085;
		margin: 0;
		max-width: 760px;
	}
}

.wpag-settings-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpag-settings-grid__full {
	grid-column: 1 / -1;
}

.wpag-settings-toggle-row,
.wpag-settings-email-box {
	background: #f6f7f7;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.wpag-settings-email-box {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr);
}

.wpag-fixer-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wpag-fixer-item {
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	padding: 10px 12px;
	text-transform: capitalize;
}

.wpag-premium-card {
	background:
		linear-gradient(135deg, rgba(17, 77, 90, 0.1), rgba(56, 88, 233, 0.08)),
		#fff;
	border: 1px solid #cfd7e6;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.wpag-premium-card__badge {
	background: #114d5a;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 8px 14px;
	text-transform: uppercase;
	width: max-content;
}

.wpag-premium-card__content {
	padding: 18px;

	h3 {
		margin: 0 0 8px;
	}

	p {
		color: #475467;
		margin: 0 0 16px;
		max-width: 760px;
	}
}

.wpag-premium-feature-preview {
	display: grid;
	filter: blur(0.2px);
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 18px;
	opacity: 0.72;

	span {
		background: rgba(255, 255, 255, 0.8);
		border: 1px dashed #b7c2d6;
		border-radius: 999px;
		color: #172033;
		font-weight: 700;
		padding: 10px 12px;
		text-align: center;
	}
}

.wpag-premium-form {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #dcdcde;
	border-radius: 10px;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	padding: 14px;

	.components-button {
		align-self: end;
		justify-content: center;
		width: max-content;
	}
}

.wpag-premium-notice {
	margin-top: 14px;
}

.wpag-settings-actions {
	background: #fff;
	border-top: 1px solid #dcdcde;
	bottom: 0;
	padding-top: 16px;
	position: sticky;
	z-index: 1;
}

.wpag-scans-page {
	display: grid;
	gap: 16px;
}

.wpag-scan-hero .components-card__body,
.wpag-schedule-card .components-card__body,
.wpag-latest-report-card .components-card__body {
	align-items: center;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
}

.wpag-scan-hero {
	background:
		radial-gradient(circle at top right, rgba(17, 77, 90, 0.13), transparent 38%),
		linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}

.wpag-scan-hero__copy h2 {
	font-size: 24px;
	line-height: 1.25;
	margin: 0;
	max-width: 680px;
}

.wpag-eyebrow {
	color: #114d5a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.wpag-scan-actions {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(23, 32, 51, 0.06);
	padding: 16px;
}

.wpag-scan-actions__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.wpag-schedule-card {
	border-left: 4px solid #3858e9;
}

.wpag-schedule-card strong,
.wpag-latest-report-card strong {
	display: block;
	line-height: 1.5;
}

.wpag-metric-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wpag-metric-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	padding: 16px;

	span {
		color: #667085;
		display: block;
		font-size: 12px;
		margin-bottom: 8px;
	}

	strong {
		color: #172033;
		display: block;
		font-size: 24px;
		line-height: 1;
	}

	small {
		color: #667085;
		display: block;
		margin-top: 8px;
	}
}

.wpag-metric-card--score strong,
.wpag-metric-card--success strong {
	color: #008a20;
}

.wpag-metric-card--warning strong {
	color: #b42318;
}

.wpag-card-heading {
	h2 {
		margin-bottom: 4px;
	}

	p {
		color: #667085;
		margin: 0;
	}
}

.wpag-table-wrap {
	overflow-x: auto;
}

.wpag-report-table,
.wpag-scan-table {
	td,
	th {
		vertical-align: middle;
	}
}

.wpag-row-actions {
	text-align: right;
	white-space: nowrap;

	.components-button + .components-button {
		margin-left: 6px;
	}
}

.wpag-url-cell {
	max-width: 420px;
	word-break: break-all;
}

.wpag-issue-pill,
.wpag-status-pill {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
}

.wpag-issue-pill {
	background: #eef7f1;
	color: #008a20;
}

.wpag-issue-pill.has-issues {
	background: #fff1f0;
	color: #b42318;
}

.wpag-status-pill {
	background: #eef2ff;
	color: #3858e9;
	text-transform: capitalize;
}

.wpag-status-pill--completed {
	background: #eef7f1;
	color: #008a20;
}

.wpag-status-pill--failed {
	background: #fff1f0;
	color: #b42318;
}

.wpag-detail-card {
	border-left: 4px solid #114d5a;
}

@media (max-width: 782px) {
	.wpag-settings-grid,
	.wpag-settings-email-box,
	.wpag-fixer-grid,
		.wpag-scan-hero .components-card__body,
		.wpag-schedule-card .components-card__body,
		.wpag-latest-report-card .components-card__body,
		.wpag-metric-grid,
		.wpag-premium-feature-preview,
		.wpag-premium-form {
		grid-template-columns: 1fr;
	}
}