/* TS Business Directory — front-end styles
   Every visual choice below is driven by a CSS custom property with a
   sensible default. The shortcode/Elementor widget only ever overrides
   the specific --tsbd-* variables a user actually changed (inline, on
   the .tsbd-directory wrapper), so anything left alone keeps this
   default look.

   NOTE ON !important: every declaration that reads a --tsbd-* variable
   below is marked !important. This is intentional, not sloppy: these
   are widget-style controls meant to always reflect what's set in the
   Elementor panel, and many themes ship global resets like
   `input[type="text"], select { border: ... }` that carry a *higher*
   CSS specificity than a single class selector such as .tsbd-input —
   without !important here, a theme's own form-field reset silently
   wins and the widget's color/font pickers appear to do nothing. */

.tsbd-directory {
	--tsbd-bg: #f4f2ec;

	--tsbd-title-color: #1a1a1a;
	--tsbd-title-font: inherit;
	--tsbd-title-size: 2.1rem;
	--tsbd-title-weight: 800;

	--tsbd-subtitle-color: #6b6b63;
	--tsbd-subtitle-font: inherit;
	--tsbd-subtitle-size: 1rem;

	--tsbd-label-color: #6b6b63;
	--tsbd-label-size: 0.75rem;
	--tsbd-input-bg: #ffffff;
	--tsbd-input-text: #1a1a1a;
	--tsbd-input-border: #e5e2d8;
	--tsbd-input-size: 0.95rem;
	--tsbd-accent: #3fae2a;

	--tsbd-card-bg: #ffffff;
	--tsbd-card-border-color: #e5e2d8;
	--tsbd-card-border-width: 1px;
	--tsbd-card-radius: 6px;
	--tsbd-card-padding: 20px;

	--tsbd-logo-width: 64px;
	--tsbd-logo-ratio: 1/1;
	--tsbd-logo-radius: 4px;
	--tsbd-logo-bg: #111111;

	--tsbd-name-color: #1a1a1a;
	--tsbd-name-font: inherit;
	--tsbd-name-size: 1.05rem;
	--tsbd-name-weight: 800;

	--tsbd-text-color: #1a1a1a;
	--tsbd-text-font: inherit;
	--tsbd-text-size: 0.9rem;

	--tsbd-icon-color: var(--tsbd-accent);
	--tsbd-icon-size: 1em;

	--tsbd-badge-bg: #eef3ea;
	--tsbd-badge-text: #3a6b2c;
	--tsbd-badge-font: inherit;
	--tsbd-badge-size: 0.75rem;
	--tsbd-badge-weight: 700;

	--tsbd-button-bg: #000000;
	--tsbd-button-text: #ffffff;
	--tsbd-button-radius: 999px;
	--tsbd-button-size: 0.9rem;

	--tsbd-pager-active-bg: #000000;
	--tsbd-pager-active-text: #ffffff;
	--tsbd-pager-text: #1a1a1a;

	--tsbd-radius: 6px;

	background: var(--tsbd-bg) !important;
	padding: 48px 24px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--tsbd-text-color) !important;
}

.tsbd-directory * {
	box-sizing: border-box;
}

.tsbd-directory .tsbd-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 32px;
}

.tsbd-directory .tsbd-title {
	font-family: var(--tsbd-title-font) !important;
	font-size: var(--tsbd-title-size) !important;
	font-weight: var(--tsbd-title-weight) !important;
	color: var(--tsbd-title-color) !important;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.tsbd-directory .tsbd-subtitle {
	font-family: var(--tsbd-subtitle-font) !important;
	font-size: var(--tsbd-subtitle-size) !important;
	color: var(--tsbd-subtitle-color) !important;
	margin: 0;
	line-height: 1.5;
}

/* Controls */
.tsbd-directory .tsbd-controls {
	max-width: 1200px;
	margin: 0 auto 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--tsbd-input-border);
	padding-bottom: 24px;
}

.tsbd-directory .tsbd-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	flex: 1 1 auto;
}

.tsbd-directory .tsbd-field {
	display: flex;
	flex-direction: column;
	min-width: 140px;
}

.tsbd-directory .tsbd-field label,
.tsbd-directory .tsbd-sort label {
	font-size: var(--tsbd-label-size) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
	color: var(--tsbd-label-color) !important;
}

.tsbd-directory .tsbd-input,
.tsbd-directory .tsbd-sort-select {
	border: 1px solid var(--tsbd-input-border) !important;
	/* Longhand background-color, NOT the "background" shorthand. The
	   shorthand implicitly resets background-image/-repeat/-position/-size
	   to their initial values on every element it matches — including the
	   <select> elements below, which rely on a SEPARATE rule to draw their
	   custom arrow via background-image. Two "!important" rules touching
	   the same element for related-but-different background properties can
	   end up depending on stylesheet order to resolve correctly; using the
	   longhand here removes that dependency entirely so the arrow rule
	   below always wins on its own terms, regardless of rule order. */
	background-color: var(--tsbd-input-bg) !important;
	border-radius: var(--tsbd-radius);
	padding: 10px 12px;
	font-size: var(--tsbd-input-size) !important;
	color: var(--tsbd-input-text) !important;
	min-width: 140px;
}

.tsbd-directory .tsbd-input:focus,
.tsbd-directory .tsbd-sort-select:focus {
	outline: none;
	border-color: var(--tsbd-accent) !important;
	box-shadow: 0 0 0 2px rgba(63, 174, 42, 0.15);
}

.tsbd-directory .tsbd-select,
.tsbd-directory .tsbd-sort-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b6b63'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 16px !important;
	padding-right: 32px;
	cursor: pointer;
	min-width: 190px;
}

.tsbd-directory .tsbd-select::-ms-expand {
	display: none;
}

.tsbd-directory .tsbd-field-clear {
	justify-content: flex-end;
}

.tsbd-directory .tsbd-clear-btn {
	background: transparent;
	border: 1px solid var(--tsbd-input-border) !important;
	border-radius: var(--tsbd-radius);
	padding: 10px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--tsbd-text-color) !important;
}

.tsbd-directory .tsbd-clear-btn:hover {
	background: var(--tsbd-input-border);
}

.tsbd-directory .tsbd-sort {
	display: flex;
	flex-direction: column;
}

.tsbd-directory .tsbd-status {
	max-width: 1200px;
	margin: 0 auto 12px;
	min-height: 1.2em;
	font-size: 0.85rem;
	color: var(--tsbd-label-color) !important;
}

/* Grid */
.tsbd-directory .tsbd-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.tsbd-directory .tsbd-grid[data-columns="1"] { grid-template-columns: 1fr; }
.tsbd-directory .tsbd-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.tsbd-directory .tsbd-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.tsbd-directory .tsbd-grid,
	.tsbd-directory .tsbd-grid[data-columns="3"],
	.tsbd-directory .tsbd-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tsbd-directory { padding: 32px 16px; }
	.tsbd-directory .tsbd-grid,
	.tsbd-directory .tsbd-grid[data-columns="2"],
	.tsbd-directory .tsbd-grid[data-columns="3"],
	.tsbd-directory .tsbd-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
	.tsbd-directory .tsbd-controls { flex-direction: column; align-items: stretch; }
	.tsbd-directory .tsbd-filters { flex-direction: column; }
	.tsbd-directory .tsbd-field { min-width: 0; }
}

/* Card */
.tsbd-directory .tsbd-card {
	background: var(--tsbd-card-bg) !important;
	border: var(--tsbd-card-border-width) solid var(--tsbd-card-border-color) !important;
	border-radius: var(--tsbd-card-radius) !important;
	padding: var(--tsbd-card-padding) !important;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.tsbd-directory .tsbd-grid.tsbd-card-shadow .tsbd-card {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.tsbd-directory .tsbd-card-logo {
	flex: 0 0 var(--tsbd-logo-width) !important;
	width: var(--tsbd-logo-width) !important;
	aspect-ratio: var(--tsbd-logo-ratio) !important;
	height: auto;
	border-radius: var(--tsbd-logo-radius) !important;
	overflow: hidden;
	/* Shows through behind a transparent-background logo (a PNG with no
	   background fill, for example) — themable via the "Thumbnail
	   Background Color" control. */
	background-color: var(--tsbd-logo-bg) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsbd-directory .tsbd-card-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsbd-directory .tsbd-card-logo-fallback {
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
}

.tsbd-directory .tsbd-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.tsbd-directory .tsbd-card-name {
	font-family: var(--tsbd-name-font) !important;
	font-size: var(--tsbd-name-size) !important;
	font-weight: var(--tsbd-name-weight) !important;
	color: var(--tsbd-name-color) !important;
	margin: 0 0 10px;
	line-height: 1.3;
}

.tsbd-directory .tsbd-card-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.tsbd-directory .tsbd-category-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--tsbd-badge-bg) !important;
	color: var(--tsbd-badge-text) !important;
	font-family: var(--tsbd-badge-font) !important;
	font-size: var(--tsbd-badge-size) !important;
	font-weight: var(--tsbd-badge-weight) !important;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
}

.tsbd-directory .tsbd-card-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--tsbd-text-font) !important;
	font-size: var(--tsbd-text-size) !important;
	line-height: 1.4;
	color: var(--tsbd-text-color) !important;
}

.tsbd-directory .tsbd-card-row:last-child {
	margin-bottom: 0;
}

.tsbd-directory .tsbd-card-row a {
	color: var(--tsbd-text-color) !important;
	text-decoration: none;
}

.tsbd-directory .tsbd-card-row a:hover {
	text-decoration: underline;
}

.tsbd-directory .tsbd-icon {
	flex: 0 0 auto;
	color: var(--tsbd-icon-color) !important;
	font-size: var(--tsbd-icon-size) !important;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
}

.tsbd-directory .tsbd-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Empty state */
.tsbd-directory .tsbd-empty {
	max-width: 1200px;
	margin: 40px auto;
	text-align: center;
	color: var(--tsbd-label-color) !important;
}

/* Pagination — Load More button */
.tsbd-directory .tsbd-pagination-wrap {
	max-width: 1200px;
	margin: 36px auto 0;
	text-align: center;
}

.tsbd-directory .tsbd-load-more {
	background: var(--tsbd-button-bg) !important;
	color: var(--tsbd-button-text) !important;
	border: none;
	border-radius: var(--tsbd-button-radius) !important;
	padding: 14px 32px;
	font-size: var(--tsbd-button-size) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.tsbd-directory .tsbd-load-more:hover {
	opacity: 0.85;
}

.tsbd-directory .tsbd-load-more:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Pagination — numbered pager */
.tsbd-directory .tsbd-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.tsbd-directory .tsbd-pager-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--tsbd-input-border) !important;
	background: var(--tsbd-input-bg) !important;
	color: var(--tsbd-pager-text) !important;
	border-radius: var(--tsbd-radius);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.tsbd-directory .tsbd-pager-btn:hover:not(:disabled):not(.tsbd-pager-active) {
	background: var(--tsbd-input-border);
}

.tsbd-directory .tsbd-pager-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.tsbd-directory .tsbd-pager-active {
	background: var(--tsbd-pager-active-bg) !important;
	border-color: var(--tsbd-pager-active-bg) !important;
	color: var(--tsbd-pager-active-text) !important;
}

.tsbd-directory .tsbd-pager-ellipsis {
	padding: 0 4px;
	color: var(--tsbd-pager-text);
	opacity: 0.6;
}

.tsbd-directory.tsbd-is-loading .tsbd-grid {
	opacity: 0.6;
}