/* Mail Deliverability Checker — front-end styles */

.mdc-wrapper {
	--mdc-primary: #2563eb;
	--mdc-primary-dark: #1d4ed8;
	--mdc-green: #16a34a;
	--mdc-red: #dc2626;
	--mdc-amber: #d97706;
	--mdc-bg: #f8fafc;
	--mdc-card-bg: #ffffff;
	--mdc-border: #e2e8f0;
	--mdc-text: #0f172a;
	--mdc-muted: #64748b;

	max-width: 880px;
	margin: 0 auto;
	padding: 32px 20px 56px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mdc-text);
	box-sizing: border-box;
}
.mdc-wrapper *, .mdc-wrapper *::before, .mdc-wrapper *::after { box-sizing: border-box; }

.mdc-hero { text-align: center; margin-bottom: 28px; }
.mdc-title { font-size: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.mdc-subtitle { font-size: 15px; color: var(--mdc-muted); margin: 0; }

/* Stat cards */
.mdc-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}
.mdc-stat-card {
	background: var(--mdc-card-bg);
	border: 1px solid var(--mdc-border);
	border-radius: 14px;
	padding: 20px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mdc-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.mdc-stat-icon { font-size: 22px; margin-bottom: 4px; }
.mdc-stat-value { font-size: 28px; font-weight: 800; line-height: 1; }
.mdc-stat-label { font-size: 12.5px; color: var(--mdc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }

.mdc-stat-tested .mdc-stat-value { color: var(--mdc-primary); }
.mdc-stat-delivered .mdc-stat-value { color: var(--mdc-green); }
.mdc-stat-undelivered .mdc-stat-value { color: var(--mdc-red); }

/* Form */
.mdc-form {
	display: flex;
	gap: 10px;
	background: var(--mdc-card-bg);
	border: 1px solid var(--mdc-border);
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.mdc-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--mdc-bg);
	color: var(--mdc-text);
}
.mdc-input:focus { box-shadow: 0 0 0 2px var(--mdc-primary); }

.mdc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--mdc-primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
	min-width: 190px;
}
.mdc-button:hover { background: var(--mdc-primary-dark); }
.mdc-button:disabled { opacity: 0.7; cursor: not-allowed; }

.mdc-btn-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mdc-spin 0.7s linear infinite;
}
.mdc-button.is-loading .mdc-btn-spinner { display: inline-block; }
.mdc-button.is-loading .mdc-btn-text { opacity: 0.8; }
@keyframes mdc-spin { to { transform: rotate(360deg); } }

.mdc-error {
	color: var(--mdc-red);
	background: #fef2f2;
	border: 1px solid #fecaca;
	padding: 12px 14px;
	border-radius: 10px;
	margin-top: 16px;
	font-size: 14px;
}

/* Results */
.mdc-results { margin-top: 32px; animation: mdc-fade-in 0.3s ease; }
@keyframes mdc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.mdc-score-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 28px;
}
.mdc-score-ring { position: relative; width: 160px; height: 160px; }
.mdc-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mdc-ring-bg { fill: none; stroke: var(--mdc-border); stroke-width: 10; }
.mdc-ring-fg {
	fill: none;
	stroke: var(--mdc-green);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 326.7;
	stroke-dashoffset: 326.7;
	transition: stroke-dashoffset 0.8s ease, stroke 0.4s ease;
}
.mdc-score-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.mdc-score-number { font-size: 32px; font-weight: 800; }
.mdc-score-status { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mdc-muted); margin-top: 2px; }
.mdc-score-domain { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--mdc-muted); }

.mdc-checks-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.mdc-check-card {
	background: var(--mdc-card-bg);
	border: 1px solid var(--mdc-border);
	border-radius: 12px;
	padding: 16px;
}
.mdc-check-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mdc-check-badge {
	width: 20px; height: 20px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.mdc-check-badge.pass { background: var(--mdc-green); }
.mdc-check-badge.fail { background: var(--mdc-red); }
.mdc-check-label { font-weight: 700; font-size: 14.5px; }
.mdc-check-detail { font-size: 13px; color: var(--mdc-muted); line-height: 1.5; margin: 0; }

@media (max-width: 640px) {
	.mdc-stats-row { grid-template-columns: 1fr; }
	.mdc-checks-grid { grid-template-columns: 1fr; }
	.mdc-form { flex-direction: column; }
	.mdc-button { width: 100%; }
}