/*
 * Kojano Business Directory — front-end styles.
 * Uses CSS custom properties so you can restyle the whole directory
 * to match your theme by overriding these variables in your theme's
 * own stylesheet — no need to edit this file directly.
 */
:root{
  --kbd-ink: #1c1c1c;
  --kbd-muted: #666;
  --kbd-border: #e2e2e2;
  --kbd-accent: #b8412f;
  --kbd-bg: #fff;
  --kbd-radius: 6px;
}

.kbd-directory,
.kbd-single-main,
.kbd-archive-main{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--kbd-ink);
  font-family: inherit;
}

.kbd-archive-header{ padding: 40px 0 8px; }
.kbd-archive-title{ font-size: 32px; margin: 0 0 8px; }
.kbd-archive-sub{ color: var(--kbd-muted); margin: 0; }

/* Filter bar */
.kbd-filters{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 10px;
  margin: 28px 0;
}
.kbd-input{
  padding: 11px 12px;
  border: 1px solid var(--kbd-border);
  border-radius: var(--kbd-radius);
  font-size: 14px;
  background: var(--kbd-bg);
  color: var(--kbd-ink);
}
.kbd-btn{
  padding: 11px 20px;
  border: none;
  border-radius: var(--kbd-radius);
  background: var(--kbd-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.kbd-btn:hover{ opacity: .9; }
.kbd-btn-outline{
  background: transparent;
  color: var(--kbd-ink);
  border: 1px solid var(--kbd-border);
}
@media (max-width: 780px){
  .kbd-filters{ grid-template-columns: 1fr; }
}

/* Results grid */
.kbd-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px){ .kbd-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .kbd-grid{ grid-template-columns: 1fr; } }

.kbd-card{
  border: 1px solid var(--kbd-border);
  border-radius: var(--kbd-radius);
  overflow: hidden;
  background: var(--kbd-bg);
  display: flex;
  flex-direction: column;
}
.kbd-card-thumb img{ width: 100%; height: 170px; object-fit: cover; display:block; }
.kbd-card-body{ padding: 18px; flex: 1; display: flex; flex-direction: column; }
.kbd-card-tag{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--kbd-accent);
  font-weight: 700;
}
.kbd-card-title{ font-size: 18px; margin: 8px 0 10px; }
.kbd-card-title a{ color: var(--kbd-ink); text-decoration: none; }
.kbd-card-meta{ font-size: 13px; color: var(--kbd-muted); margin: 2px 0; }
.kbd-card-link{
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbd-accent);
  text-decoration: none;
}
.kbd-empty{ color: var(--kbd-muted); padding: 40px 0; text-align: center; }

.kbd-loadmore-wrap{ text-align: center; margin: 30px 0; }

/* Single listing */
.kbd-single{ max-width: 860px; margin: 0 auto; padding: 40px 0 80px; }
.kbd-single-thumb img{ width: 100%; border-radius: var(--kbd-radius); margin-bottom: 24px; }
.kbd-single-header h1{ font-size: 32px; margin: 8px 0 0; }
.kbd-single-content{ margin: 24px 0; line-height: 1.7; }
.kbd-single-details{
  border-top: 1px solid var(--kbd-border);
  padding-top: 24px;
  margin-top: 24px;
}
.kbd-detail-list{ list-style: none; margin: 12px 0 0; padding: 0; }
.kbd-detail-list li{ padding: 8px 0; border-bottom: 1px solid var(--kbd-border); font-size: 14.5px; }
.kbd-map{ margin-top: 20px; height: 280px; border-radius: var(--kbd-radius); background: #f2f2f2; }

/* Submission form */
.kbd-submit-form{ max-width: 560px; }
.kbd-submit-form .kbd-label{ display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.kbd-submit-form .kbd-input{ width: 100%; }
.kbd-submit-form .kbd-btn{ margin-top: 22px; }
.kbd-success{ background: #e9f6ec; border: 1px solid #bfe3c8; padding: 12px 14px; border-radius: var(--kbd-radius); }
.kbd-error{ background: #fdecea; border: 1px solid #f3b8b3; padding: 12px 14px; border-radius: var(--kbd-radius); }