:root {
  --sjfl-navy: #003B7A;
  --sjfl-blue: #40B3E5;
  --sjfl-pale: #E6F3FB;
  --sjfl-warm: #F7F5EF;
  --sjfl-green: #2E7D64;
  --sjfl-text: #17324d;
  --sjfl-border: #d6e3ee;
}

.sjfl-search-wrap,
.sjfl-directory-results,
.sjfl-category-explore {
  font-family: Lato, Arial, sans-serif;
  color: var(--sjfl-text);
}

.sjfl-search-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.sjfl-search-label {
  display: block;
  margin: 0 0 10px;
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  color: var(--sjfl-navy);
}

.sjfl-search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.sjfl-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.sjfl-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--sjfl-navy);
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}

.sjfl-search-input {
  width: 100%;
  min-height: 58px;
  border: 2px solid var(--sjfl-border);
  border-radius: 14px;
  background: #fff;
  padding: 12px 18px 12px 52px;
  font-size: 17px;
  color: #17324d;
  outline: none;
  box-shadow: 0 8px 28px rgba(0, 59, 122, 0.08);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sjfl-search-input:focus {
  border-color: var(--sjfl-blue);
  box-shadow: 0 8px 30px rgba(64, 179, 229, 0.18);
}

.sjfl-search-button {
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--sjfl-navy);
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.sjfl-search-button:hover {
  background: #002c5c;
}

.sjfl-search-suggestions {
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  overflow: hidden;
  border: 1px solid var(--sjfl-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(0, 40, 78, 0.18);
}

.sjfl-suggestion {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  color: var(--sjfl-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid #edf3f7;
}

.sjfl-suggestion:last-child { border-bottom: 0; }
.sjfl-suggestion:hover,
.sjfl-suggestion.is-active { background: var(--sjfl-pale); }

.sjfl-suggestion-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sjfl-pale);
  color: var(--sjfl-navy);
  font-weight: 800;
}

.sjfl-suggestion.category .sjfl-suggestion-icon {
  background: #eaf6ee;
  color: var(--sjfl-green);
}

.sjfl-suggestion-text strong {
  display: block;
  font-size: 15px;
  color: var(--sjfl-navy);
}

.sjfl-suggestion-text small {
  display: block;
  margin-top: 2px;
  color: #678095;
  font-size: 12px;
}

.sjfl-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 13px;
  font-size: 13px;
}

.sjfl-popular-label { font-weight: 700; color: #6a7d8f; }
.sjfl-popular a,
.sjfl-child-categories a {
  display: inline-block;
  border-radius: 999px;
  background: var(--sjfl-pale);
  color: var(--sjfl-navy) !important;
  padding: 7px 12px;
  text-decoration: none !important;
  font-weight: 700;
}

.sjfl-popular a:hover,
.sjfl-child-categories a:hover {
  background: var(--sjfl-blue);
  color: #fff !important;
}

.sjfl-results-heading {
  margin: 36px 0 18px;
}

.sjfl-results-heading h2 {
  margin: 0 0 5px;
  color: var(--sjfl-navy);
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
}

.sjfl-results-heading p {
  margin: 0;
  color: #647c91;
}

.sjfl-business-grid,
.sjfl-category-grid {
  display: grid;
  gap: 22px;
}

.sjfl-business-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sjfl-business-card {
  overflow: hidden;
  border: 1px solid var(--sjfl-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 59, 122, 0.07);
}

.sjfl-card-image-link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f7fa; }
.sjfl-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.sjfl-card-content { padding: 18px; }
.sjfl-card-cats { min-height: 18px; color: var(--sjfl-blue); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.sjfl-business-card h3 {
  margin: 4px 0 8px;
  font-family: Merriweather, Georgia, serif;
  font-size: 20px;
  line-height: 1.25;
}
.sjfl-business-card h3 a { color: var(--sjfl-navy) !important; text-decoration: none !important; }

.sjfl-rating {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0 0 8px;
  font-size: 13px;
  color: #6a7d8f;
}
.sjfl-rating > span:first-child { color: #d69c23; font-size: 17px; }
.sjfl-rating strong { color: var(--sjfl-text); }

.sjfl-business-card p { margin: 8px 0 14px; color: #526b7f; line-height: 1.55; }
.sjfl-card-link { color: var(--sjfl-navy) !important; font-weight: 800; text-decoration: none !important; }

.sjfl-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sjfl-category-card {
  display: block;
  min-height: 135px;
  padding: 22px;
  border: 1px solid var(--sjfl-border);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--sjfl-pale) 100%);
  text-decoration: none !important;
}
.sjfl-category-card strong {
  display: block;
  margin-bottom: 9px;
  color: var(--sjfl-navy);
  font-family: Merriweather, Georgia, serif;
  font-size: 21px;
}
.sjfl-category-card span { color: #5d778c; font-size: 13px; line-height: 1.5; }

.sjfl-child-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0 26px;
}

.sjfl-no-results {
  padding: 28px;
  border-radius: 16px;
  background: var(--sjfl-pale);
}
.sjfl-no-results h3 { margin-top: 0; color: var(--sjfl-navy); }

.sjfl-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.sjfl-pagination a,
.sjfl-pagination span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--sjfl-border);
  border-radius: 8px;
  text-decoration: none !important;
}
.sjfl-pagination .current {
  background: var(--sjfl-navy);
  color: #fff;
}

@media (max-width: 800px) {
  .sjfl-business-grid,
  .sjfl-category-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .sjfl-search-row { display: block; }
  .sjfl-search-button { width: 100%; margin-top: 9px; }
  .sjfl-business-grid,
  .sjfl-category-grid { grid-template-columns: 1fr; }
}