/**
 * assets/css/components.css
 * Styles for the plugin's own widgets.
 *
 * Every value is a var(). No raw hex, no raw px for anything a designer would
 * want to change. The tokens themselves live in the child theme
 * (assets/css/tokens.css) because they are presentation and the theme owns
 * presentation — which means a reskin is a change to one file in the theme and
 * touches no plugin code and no data.
 *
 * Fallbacks are given inline (var(--izoom-x, 1rem)) so the widgets still render
 * sanely if the plugin is ever used with a theme that ships no tokens.
 */

/* ------------------------------------------------------------------ blocks */

.izoom-block {
	margin-block-end: var(--izoom-space-lg, 1.5rem);
}

.izoom-block__heading {
	font-size: var(--izoom-font-h3, 1.125rem);
	font-weight: var(--izoom-weight-bold, 600);
	color: var(--izoom-text, #1d2327);
	margin-block-end: var(--izoom-space-sm, 0.5rem);
}

/* ------------------------------------------------------------------- links */

.izoom-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.izoom-links__item {
	padding-block: var(--izoom-space-2xs, 0.25rem);
}

.izoom-links__link {
	color: var(--izoom-link, #2271b1);
	text-decoration: none;
}

.izoom-links__link:hover,
.izoom-links__link:focus {
	text-decoration: underline;
}

.izoom-links__count {
	color: var(--izoom-text-muted, #545860);
	font-size: var(--izoom-font-sm, 0.8125rem);
}

.izoom-links--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--izoom-space-sm, 0.5rem);
}

.izoom-links--inline .izoom-links__item::after {
	content: "·";
	color: var(--izoom-border, #dcdcde);
	margin-inline-start: var(--izoom-space-sm, 0.5rem);
}

.izoom-links--inline .izoom-links__item:last-child::after {
	content: none;
}

/* ------------------------------------------------------ G2 city list */

/*
 * The column count is a CSS-only multi-column layout rather than a grid with a
 * fixed child count. Every city is in the source order regardless of how it
 * wraps, which keeps the rendered HTML identical to what a crawler reads.
 */
.izoom-city-list__grid {
	column-count: var(--izoom-columns, 3);
	column-gap: var(--izoom-space-lg, 1.5rem);
}

.izoom-city-list__grid .izoom-links__item {
	break-inside: avoid;
}

@media (max-width: 782px) {
	.izoom-city-list__grid {
		column-count: 1;
	}
}

/* ------------------------------------------------------------ related list */

.izoom-related__address {
	display: block;
	color: var(--izoom-text-muted, #545860);
	font-size: var(--izoom-font-sm, 0.8125rem);
}

/* --------------------------------------------------------- sponsored slots */

.izoom-sponsored__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.izoom-sponsored__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--izoom-space-xs, 0.375rem) var(--izoom-space-sm, 0.5rem);
	padding-block: var(--izoom-space-xs, 0.375rem);
}

.izoom-sponsored__item + .izoom-sponsored__item {
	border-block-start: 1px solid var(--izoom-border, #dcdcde);
}

.izoom-sponsored__link {
	font-weight: var(--izoom-weight-bold, 600);
	text-decoration: none;
	color: var(--izoom-link, #2271b1);
}

.izoom-sponsored__link:hover,
.izoom-sponsored__link:focus {
	text-decoration: underline;
}

.izoom-sponsored__badge {
	font-size: var(--izoom-font-xs, 0.6875rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--izoom-text-muted, #545860);
	border: 1px solid var(--izoom-border, #dcdcde);
	border-radius: 2px;
	padding: 0 0.35em;
}

.izoom-sponsored__address {
	flex-basis: 100%;
	color: var(--izoom-text-muted, #545860);
	font-size: var(--izoom-font-sm, 0.8125rem);
}

/* ------------------------------------------------------------------- hours */

.izoom-hours__table {
	width: 100%;
	border-collapse: collapse;
}

.izoom-hours__row + .izoom-hours__row {
	border-block-start: 1px solid var(--izoom-border, #dcdcde);
}

.izoom-hours__day,
.izoom-hours__time {
	padding-block: var(--izoom-space-xs, 0.375rem);
	text-align: start;
	font-weight: var(--izoom-weight-normal, 400);
}

.izoom-hours__day {
	color: var(--izoom-text-muted, #545860);
	width: 40%;
}

.izoom-hours__status {
	font-weight: var(--izoom-weight-bold, 600);
	margin-block-end: var(--izoom-space-sm, 0.5rem);
}

.izoom-hours__status--open {
	color: var(--izoom-success, #007017);
}

.izoom-hours__status--closed {
	color: var(--izoom-text-muted, #545860);
}

.izoom-hours__special {
	list-style: none;
	margin: var(--izoom-space-sm, 0.5rem) 0 0;
	padding: var(--izoom-space-sm, 0.5rem) 0 0;
	border-block-start: 1px solid var(--izoom-border, #dcdcde);
	font-size: var(--izoom-font-sm, 0.8125rem);
}

.izoom-hours__note {
	color: var(--izoom-text-muted, #545860);
}

/* ----------------------------------------------------------------- actions */

.izoom-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--izoom-space-sm, 0.5rem);
}

.izoom-actions__button {
	display: inline-flex;
	align-items: center;
	gap: var(--izoom-space-2xs, 0.25rem);
	padding: var(--izoom-space-xs, 0.375rem) var(--izoom-space-md, 1rem);
	border: 1px solid var(--izoom-border, #dcdcde);
	border-radius: var(--izoom-radius, 4px);
	background: var(--izoom-surface, #fff);
	color: var(--izoom-link, #2271b1);
	text-decoration: none;
	/* 44px is the minimum comfortable touch target; most of this directory's
	   traffic is a phone in someone's hand looking for a phone number. */
	min-height: var(--izoom-tap-target, 44px);
}

.izoom-actions__button--call {
	background: var(--izoom-accent, #2271b1);
	border-color: var(--izoom-accent, #2271b1);
	color: var(--izoom-on-accent, #fff);
}

.izoom-actions__button:hover,
.izoom-actions__button:focus {
	border-color: var(--izoom-accent, #2271b1);
}

/* ------------------------------------------------------------------ filter */

.izoom-filter {
	padding: var(--izoom-space-md, 1rem);
	border: 1px solid var(--izoom-border, #dcdcde);
	border-radius: var(--izoom-radius, 4px);
	background: var(--izoom-surface-alt, #f6f7f7);
}

.izoom-filter__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--izoom-space-md, 1rem);
}

.izoom-filter__header,
.izoom-filter__footer,
.izoom-filter-drawer-toggle,
.izoom-filter-backdrop,
.izoom-filter-trigger {
	display: none;
}

.izoom-filter__field {
	margin: 0;
}

.izoom-filter__label {
	display: block;
	font-size: var(--izoom-font-sm, 0.8125rem);
	color: var(--izoom-text-muted, #545860);
	margin-block-end: var(--izoom-space-2xs, 0.25rem);
}

.izoom-filter__features {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--izoom-space-sm, 0.5rem);
}

.izoom-filter__check label {
	margin-inline-start: var(--izoom-space-2xs, 0.25rem);
}

.izoom-filter__count {
	color: var(--izoom-text-muted, #545860);
	font-size: var(--izoom-font-sm, 0.8125rem);
}

.izoom-filter__actions {
	display: flex;
	gap: var(--izoom-space-sm, 0.5rem);
	margin: 0;
}

.izoom-filter__submit,
.izoom-filter__reset {
	min-height: var(--izoom-tap-target, 44px);
	padding-inline: var(--izoom-space-md, 1rem);
	border-radius: var(--izoom-radius, 4px);
	border: 1px solid var(--izoom-accent, #2271b1);
	cursor: pointer;
}

.izoom-filter__submit {
	background: var(--izoom-accent, #2271b1);
	color: var(--izoom-on-accent, #fff);
}

.izoom-filter__reset {
	background: transparent;
	border-color: var(--izoom-border, #dcdcde);
	color: var(--izoom-text-muted, #545860);
}

/* ------------------------------------------------------------------- crumbs */

.izoom-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 var(--izoom-space-md, 1rem);
	padding: 0;
	font-size: var(--izoom-font-sm, 0.8125rem);
}

/*
 * The link colour has to be stated. Without it the host theme's own anchor
 * colour wins, which puts a colour the token layer never approved on the page —
 * and in dark mode Hello Elementor's default failed contrast outright. Any
 * anchor this plugin renders sets its colour from a token.
 */
.izoom-breadcrumbs__link {
	color: var(--izoom-link, #2271b1);
}

.izoom-breadcrumbs__sep {
	color: var(--izoom-text-muted, #545860);
}

.izoom-breadcrumbs__current {
	color: var(--izoom-text-muted, #545860);
}

/* ---------------------------------------------------------------------- map */

.izoom-map__canvas {
	border: 1px solid var(--izoom-border, #dcdcde);
	border-radius: var(--izoom-radius, 4px);
	overflow: hidden;
}

/*
 * The idle state is sized identically to the loaded map so the tiles arriving
 * shift nothing on the page — an unreserved map slot is one of the easiest
 * ways to fail Cumulative Layout Shift.
 */
.izoom-map__canvas--idle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--izoom-surface-alt, #f6f7f7);
}

.izoom-map__placeholder {
	text-align: center;
	padding: var(--izoom-space-md, 1rem);
}

.izoom-map__address {
	color: var(--izoom-text-muted, #545860);
	margin-block-end: var(--izoom-space-sm, 0.5rem);
}

.izoom-map__load {
	min-height: var(--izoom-tap-target, 44px);
	padding-inline: var(--izoom-space-md, 1rem);
	border: 1px solid var(--izoom-accent, #2271b1);
	border-radius: var(--izoom-radius, 4px);
	background: var(--izoom-accent, #2271b1);
	color: var(--izoom-on-accent, #fff);
	cursor: pointer;
}

.izoom-map__directions {
	display: inline-block;
	margin-inline-start: var(--izoom-space-sm, 0.5rem);
	color: var(--izoom-link, #2271b1);
}