/*
 * Creditor Directory Filter — creditor-filter.css
 * Used via [creditor_directory] shortcode dropped into an Elementor page.
 */

.cd-directory {
	--cdf-primary: #1a56db;
	--cdf-heading: #111827;
	--cdf-body:    #374151;
	--cdf-muted:   #6b7280;
	--cdf-border:  #e5e7eb;
	--cdf-bg:      #f9fafb;
	--cdf-radius:  8px;
	font-size: 16px;
}

/* --- Filter bar --- */
.cd-directory__filter {
	display:     flex;
	gap:         12px;
	flex-wrap:   wrap;
	align-items: flex-end;
	margin-bottom: 28px;
}

.cd-directory__search-wrap {
	flex:    1 1 240px;
	display: flex;
	flex-direction: column;
	gap:     4px;
}
.cd-directory__sector-wrap {
	flex:    0 1 200px;
	display: flex;
	flex-direction: column;
	gap:     4px;
}
.cd-directory__filter label {
	font-size:   13px;
	font-weight: 500;
	color:       var(--cdf-muted);
}

.cd-directory__search,
.cd-directory__sector {
	width:       100%;
	padding:     10px 14px;
	border:      1px solid var(--cdf-border);
	border-radius: var(--cdf-radius);
	font-size:   15px;
	color:       var(--cdf-heading);
	background:  #fff;
	appearance:  none;
	-webkit-appearance: none;
}
.cd-directory__search:focus,
.cd-directory__sector:focus {
	outline:      2px solid var(--cdf-primary);
	outline-offset: 1px;
	border-color: var(--cdf-primary);
}

.cd-directory__submit {
	padding:       10px 20px;
	background:    var(--cdf-primary);
	color:         #fff;
	border:        none;
	border-radius: var(--cdf-radius);
	font-size:     15px;
	font-weight:   500;
	cursor:        pointer;
	align-self:    flex-end;
	white-space:   nowrap;
}
.cd-directory__submit:hover { background: #1e40af; }

/* --- Card grid --- */
.cd-directory__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:                   16px;
}

.cd-directory__card {
	border:        1px solid var(--cdf-border);
	border-radius: var(--cdf-radius);
	padding:       16px;
	background:    #fff;
	display:       flex;
	flex-direction: column;
	gap:           8px;
	transition:    box-shadow 0.15s ease;
}
.cd-directory__card:hover {
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.cd-directory__card-logo {
	height:      32px;
	display:     flex;
	align-items: center;
}
.cd-directory__card-logo img {
	height:     100%;
	width:      auto;
	max-width:  120px;
	object-fit: contain;
}

.cd-directory__card-title {
	font-size:   15px;
	font-weight: 600;
	color:       var(--cdf-heading);
	margin:      0;
}
.cd-directory__card-title a {
	color:           inherit;
	text-decoration: none;
}
.cd-directory__card-title a:hover { color: var(--cdf-primary); }

.cd-directory__card-excerpt {
	font-size:  13px;
	color:      var(--cdf-muted);
	line-height: 1.5;
	margin:     0;
	flex:       1;
}

.cd-directory__card-link {
	font-size:       13px;
	color:           var(--cdf-primary);
	text-decoration: none;
	font-weight:     500;
}
.cd-directory__card-link:hover { text-decoration: underline; }

/* --- Loading spinner --- */
.cd-directory__loading {
	display:    none;
	text-align: center;
	padding:    40px;
	color:      var(--cdf-muted);
	font-size:  14px;
}
.cd-directory__loading.is-active { display: flex; justify-content: center; align-items: center; gap: 10px; }

.cd-directory__loading::before {
	content:       '';
	display:       block;
	width:         18px;
	height:        18px;
	border:        2px solid var(--cdf-border);
	border-top-color: var(--cdf-primary);
	border-radius: 50%;
	animation:     cd-spin 0.6s linear infinite;
	flex-shrink:   0;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* --- Empty state --- */
.cd-directory__empty {
	display:       none;
	text-align:    center;
	padding:       48px 24px;
	color:         var(--cdf-muted);
	background:    var(--cdf-bg);
	border-radius: var(--cdf-radius);
	border:        1px solid var(--cdf-border);
}
.cd-directory__empty.is-active { display: block; }

.cd-directory__empty-heading {
	font-size:   16px;
	font-weight: 600;
	color:       var(--cdf-heading);
	margin:      0 0 8px;
}
.cd-directory__empty p { margin: 0; font-size: 14px; }