/*
 * Find a Reseller — STRUCTURAL / STATE CSS ONLY.
 *
 * Ships only the layout that isn't practical to do in the page builder (the
 * tab row, the results grid, the flag's circular crop, the loading-dim
 * state). All look-and-feel (colours, type, spacing, card design, tab/button
 * styling) is done in Impreza/WPBakery.
 *
 * Column count is exposed as a variable so it can be tuned from Impreza's
 * custom CSS box without editing the plugin: --bsc-reseller-cols (default 2).
 */

.bsc-reseller-finder {
	--bsc-reseller-cols: 2;
	--bsc-reseller-gap: 1.5rem;
}

.bsc-reseller-finder__tabs-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsc-reseller-finder__tab-item {
	list-style: none;
}

.bsc-reseller-finder__grid {
	display: grid;
	gap: var(--bsc-reseller-gap);
	grid-template-columns: repeat(var(--bsc-reseller-cols), minmax(0, 1fr));
	margin-top: var(--bsc-reseller-gap);
}

/* The empty state is rendered INSIDE .bsc-reseller-finder__grid, so it needs
   to span the grid; pagination and the promo row are siblings AFTER the grid
   (not grid items), so they get spacing instead. */
.bsc-reseller-finder__empty {
	grid-column: 1 / -1;
}

.bsc-reseller-finder__pagination,
.bsc-reseller-finder__promo {
	margin-top: var(--bsc-reseller-gap);
}

.bsc-reseller-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.bsc-reseller-card__titles {
	min-width: 0;
}

.bsc-reseller-card__flag {
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.bsc-reseller-card__address {
	white-space: normal;
}

/* Dim the results while an AJAX refresh is in flight. */
.bsc-reseller-finder.is-loading .bsc-reseller-finder__results {
	opacity: 0.5;
	pointer-events: none;
}

.bsc-reseller-finder__contact-btn:hover{
	color: #FFFFFF!important;
}

@media (max-width: 640px) {
	.bsc-reseller-finder {
		--bsc-reseller-cols: 1;
	}
}