/* IRO Find a Barrister widget. Scoped under .iro-bs to avoid clashing with Divi. */
.iro-bs { --iro-accent: #00558c; --iro-edge: #00adbb; --iro-edge-dark: #008a95; --iro-border: #d9dee3; --iro-muted: #55606a; }
.iro-bs * { box-sizing: border-box; }

.iro-bs__intro { margin: 0 0 1.25em; max-width: 70ch; }

.iro-bs__form {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
	padding: 1.25em;
	background: #f4f6f8;
	border: 1px solid var(--iro-border);
	border-radius: 8px;
	margin-bottom: 1.25em;
}
.iro-bs__field { display: flex; flex-direction: column; flex: 1 1 280px; min-width: 0; }
.iro-bs__field--search { flex: 3 1 320px; }
.iro-bs__field--reset { flex: 0 0 auto; }

.iro-bs__field label {
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 0.35em;
	color: var(--iro-muted);
}
.iro-bs__field input {
	font-size: 1rem;
	padding: 0.6em 0.75em;
	border: 1px solid var(--iro-border);
	border-radius: 6px;
	background: #fff;
	width: 100%;
	line-height: 1.3;
}
.iro-bs__field input:focus,
.iro-bs__reset:focus,
.iro-bs__page-btn:focus,
.iro-bs a:focus {
	outline: 3px solid #ffb703;
	outline-offset: 2px;
}

.iro-bs__reset {
	font-size: 0.95rem;
	padding: 0.6em 1.1em;
	border: 1px solid var(--iro-edge);
	background: #fff;
	color: var(--iro-edge);
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.iro-bs__reset:hover { background: var(--iro-edge); color: #fff; }

.iro-bs__count { font-weight: 600; margin: 0 0 1em; }

.iro-bs__results,
.iro-bs ul.iro-bs__results,
.iro-bs ul#iro-bs-results { padding-left: 0; }

.iro-bs__card { list-style-type: none; list-style: none; }
.iro-bs .iro-bs__card::marker,
.iro-bs .iro-bs__results > li::marker { content: ""; }

/* One column on small screens, two on tablet, three on desktop. */
.iro-bs__results {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.iro-bs__results { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
	.iro-bs__results { grid-template-columns: repeat(3, 1fr); }
}

.iro-bs__card {
	border: 1px solid var(--iro-border);
	border-left: 4px solid rgb(0, 173, 187);
	border-radius: 8px;
	padding: 0.9em 1.1em;
	background: #fff;
	line-height: 1.35;
}
.iro-bs__name { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.iro-bs__chambers { margin: 0.25em 0 0; color: var(--iro-muted); }

.iro-bs__pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1em; margin: 1.5em 0 0; }
.iro-bs__page-btn {
	font-size: 1rem; padding: 0.6em 1.4em; border: 1px solid var(--iro-edge);
	background: var(--iro-edge); color: #fff; border-radius: 6px; cursor: pointer;
}
.iro-bs__page-btn:hover:not(:disabled) { background: var(--iro-edge-dark); border-color: var(--iro-edge-dark); }
.iro-bs__page-btn:disabled { opacity: 0.45; cursor: default; }

/* A class selector such as .iro-bs__pager{display:flex} overrides the browser's
   built-in [hidden]{display:none}, so hiding the pager needs saying twice. */
.iro-bs__pager[hidden] { display: none !important; }
.iro-bs__page-status { font-weight: 600; color: var(--iro-muted); }
.iro-bs__noscript { padding: 1em; background: #fff4e5; border: 1px solid #ffcc80; border-radius: 6px; }

@media (max-width: 520px) {
	.iro-bs__form { padding: 1em; }
	.iro-bs__field, .iro-bs__field--search { flex-basis: 100%; }
	.iro-bs__field--reset { flex-basis: 100%; }
	.iro-bs__reset { width: 100%; }
	.iro-bs__pager { gap: 0.6em; }
	.iro-bs__pager .iro-bs__page-status { order: 3; flex-basis: 100%; text-align: center; }
	.iro-bs__page-btn { flex: 1 1 auto; }
}