.otsp-form-wrap, .otsp-listing-wrap {
	max-width: 640px;
	margin: 0 auto;
	font-size: 16px;
}

.otsp-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}
.otsp-notice-success { background: #eaf7ea; border: 1px solid #a8d8a8; }
.otsp-notice-warning { background: #fff6e5; border: 1px solid #f0d38a; }
.otsp-notice-error   { background: #fdeaea; border: 1px solid #eab0b0; }
.otsp-notice-error ul { margin: 8px 0 0 18px; }

.otsp-fieldset {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
}
.otsp-fieldset legend { font-weight: 600; padding: 0 6px; }

.otsp-field { margin-bottom: 14px; }
.otsp-field label { display: block; font-weight: 500; margin-bottom: 4px; }
.otsp-field input[type="text"],
.otsp-field input[type="tel"],
.otsp-field input[type="email"],
.otsp-field input[type="number"],
.otsp-field select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 16px; /* avoid iOS zoom-on-focus */
}

.otsp-school-results {
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 4px;
	max-height: 220px;
	overflow-y: auto;
}
.otsp-school-result-item { padding: 10px; cursor: pointer; }
.otsp-school-result-item:hover,
.otsp-school-result-item:focus { background: #f2f2f2; }

.otsp-not-listed-toggle { display: block; margin-top: 8px; font-weight: normal; }
.otsp-manual-field { margin-top: 8px; }
.otsp-manual-field .description { font-size: 13px; color: #666; margin: 4px 0 0; }

.otsp-consent-field label { font-weight: normal; display: flex; gap: 8px; align-items: flex-start; }

.otsp-submit-button, .otsp-whatsapp-button {
	display: inline-block;
	background: #1b7a3d;
	color: #fff;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
}
.otsp-submit-button:hover, .otsp-whatsapp-button:hover { background: #145c2e; color: #fff; }

.otsp-listing { list-style: none; margin: 0; padding: 0; }
.otsp-listing-item {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 12px;
}
.otsp-listing-schools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.otsp-listing-label { font-weight: 600; color: #555; }
.otsp-listing-arrow { margin: 0 4px; color: #999; }
.otsp-listing-meta { margin-top: 6px; color: #555; font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }

.otsp-badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 10px;
	font-weight: 500;
	vertical-align: middle;
}
.otsp-badge-linked  { background: #e6f4ea; color: #1b7a3d; }
.otsp-badge-manual  { background: #f0f0f0; color: #666; }
.otsp-badge-pending { background: #fff3e0; color: #a15c00; }

.otsp-admin-note { font-size: 12px; color: #b00; }

.otsp-match { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.otsp-match-direct  { background: #e6f4ea; color: #1b7a3d; }
.otsp-match-chain   { background: #eaf1fb; color: #1e4d8c; }
.otsp-match-partial { background: #fbf7e6; color: #7a5d00; }

.otsp-search-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.otsp-search-form input[type="text"] { flex: 1; min-width: 180px; padding: 10px; }

@media (max-width: 480px) {
	.otsp-form-wrap, .otsp-listing-wrap { font-size: 15px; }
	.otsp-search-form { flex-direction: column; }
}

/* --- Feature 2: Opportunity Dashboard cards --- */
.otsp-dashboard-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 10px 0;
}
.otsp-card {
	background: #f7f9f8;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 10px 6px;
	text-align: center;
}
.otsp-card-value { display: block; font-size: 22px; font-weight: 700; color: #1b7a3d; }
.otsp-card-label { display: block; font-size: 11px; color: #666; margin-top: 2px; }
@media (max-width: 480px) {
	.otsp-dashboard-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- Feature 3: Probability score --- */
.otsp-probability { margin: 10px 0; }
.otsp-probability-stars { color: #e0a800; font-size: 18px; letter-spacing: 2px; }
.otsp-probability-label { font-weight: 600; margin-left: 6px; }
.otsp-probability-reasons { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: #444; }
.otsp-probability-reasons li { margin-bottom: 2px; }

/* --- Feature 1: Teachers Wanting My School --- */
.otsp-wants-my-school { margin-top: 10px; font-size: 14px; }
.otsp-wants-my-school summary { cursor: pointer; font-weight: 600; }
.otsp-wants-list { list-style: none; margin: 8px 0 0; padding: 0; }
.otsp-wants-list li { padding: 6px 0; border-top: 1px solid #eee; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.otsp-whatsapp-button-small { padding: 4px 10px; font-size: 12px; }

/* --- Feature 4: School profile widget --- */
.otsp-school-widget { border: 1px solid #e2e2e2; border-radius: 8px; padding: 14px; margin: 14px 0; }
.otsp-school-widget h3 { margin-top: 0; }
.otsp-school-widget-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.otsp-school-widget-list li { padding: 4px 0; border-top: 1px solid #f0f0f0; display: flex; gap: 10px; flex-wrap: wrap; }
.otsp-school-widget-empty { color: #666; }

/* --- Features 6 & 7: stats table + rankings --- */
.otsp-province-stats-table { width: 100%; border-collapse: collapse; }
.otsp-province-stats-table th, .otsp-province-stats-table td { border: 1px solid #e2e2e2; padding: 8px; text-align: left; }
.otsp-ranking { margin: 14px 0; }
.otsp-ranking ol { padding-left: 20px; }
.otsp-ranking-meta { color: #888; font-size: 12px; margin-left: 4px; }

/* --- Feature 10: SEO page shell --- */
.otsp-seo-page { max-width: 800px; margin: 0 auto; padding: 20px 16px; }
.otsp-seo-breadcrumbs { margin-top: 16px; font-size: 13px; color: #666; }
.otsp-seo-breadcrumbs a { color: #1b7a3d; }