/* IRT PIN Code Data - shared styles for the search box and widget, using
   the theme's own tokens (ir-tokens.css) so this reads as part of the site,
   not a bolted-on plugin widget. */

.irt-pincode-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 13.5px;
}

.irt-pincode-table th,
.irt-pincode-table td {
	text-align: left;
	padding: 0.5em 0.75em;
	border-bottom: 1px solid var(--surface-2, #f5f5f5);
	color: var(--ink, #1a1a1a);
}

.irt-pincode-table th {
	background: var(--surface-2, #f5f5f5);
	color: var(--ink-2, #666);
}

.irt-pincode-sub {
	color: var(--ink-3, #757575);
}

.irt-pincode-search-form {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.irt-pincode-term {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0.6em 0.75em;
	border: 1px solid var(--surface-2, #ddd);
	border-radius: var(--radius-xs, 6px);
}

/* Real button chrome - the theme resets every <button> to
   border:none;background:none (ir-home.css) with no ".button" class filling
   it back in, so without this these render as bare text. Same visual
   recipe as the site's own .ir-list-search-btn (district/list search box). */
.irt-pincode-submit,
.irt-pincode-page {
	padding: 0 20px;
	background: var(--brand, #1976d2);
	color: var(--on-brand, #fff);
	border-radius: var(--radius-xs, 6px);
	font-weight: 600;
	font-size: 14px;
	min-height: 44px;
	white-space: nowrap;
}

.irt-pincode-submit:hover,
.irt-pincode-page:hover {
	background: var(--brand-hover, #125ea8);
}

.irt-pincode-page {
	padding: 0 14px;
	min-height: 38px;
}

.irt-pincode-page-current,
.irt-pincode-page-current:hover {
	background: var(--ink-disabled, #999);
	cursor: default;
}

.irt-pincode-no-results,
.irt-pincode-loading {
	color: var(--ink-3, #757575);
	font-style: italic;
}

.irt-pincode-view-all a {
	color: var(--brand-text, #1565c0);
	font-weight: 600;
}

.irt-pincode-pagination {
	display: flex;
	gap: 0.25em;
	flex-wrap: wrap;
	margin-top: 0.75em;
}

.irt-pincode-widget {
	max-width: 420px;
}

.irt-pincode-locator {
	background: var(--surface-2, #f5f5f5);
	border-radius: var(--radius-xs, 6px);
	padding: 1em;
	margin-bottom: 1em;
}

.irt-pincode-locator-row {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
	align-items: end;
}

.irt-pincode-locator-row label {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-size: 12.5px;
	color: var(--ink-2, #666);
	flex: 1 1 160px;
	min-width: 0; /* a native <select> won't shrink below its content's intrinsic width in a flex item otherwise - overflowed past the container on long district names before this. */
}

.irt-pincode-locator-row select {
	width: 100%;
	min-width: 0;
	padding: 0.6em 0.5em;
	border: 1px solid var(--surface-2, #ddd);
	border-radius: var(--radius-xs, 6px);
	background: var(--surface, #fff);
	color: var(--ink, #1a1a1a);
	font: inherit;
	box-sizing: border-box;
}

.irt-pincode-locator-row select:disabled {
	color: var(--ink-disabled, #999);
}

.irt-pincode-hint {
	margin: 0.6em 0 0;
	font-size: 12.5px;
	color: var(--ink-3, #757575);
}

.irt-pincode-or {
	font-size: 12.5px;
	color: var(--ink-3, #757575);
	margin: 0 0 0.5em;
}

.irt-pincode-popular {
	margin-top: 1.5em;
}

.irt-pincode-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.irt-pincode-chip {
	display: inline-block;
	padding: 0.4em 0.9em;
	background: var(--surface-2, #f5f5f5);
	color: var(--brand-text, #1565c0);
	border-radius: 999px;
	font-size: 13px;
	text-decoration: none;
	font-weight: 600;
}

.irt-pincode-chip:hover {
	background: var(--brand-tint-100, #bbdefb);
}

#irt-pincode-sync-status {
	margin-left: 0.75em;
	font-weight: 600;
}

#irt-pincode-sync-status.irt-pincode-ok {
	color: var(--success, #1a7d1a);
}

#irt-pincode-sync-status.irt-pincode-error {
	color: var(--danger, #b32d2e);
}