/* Directory search layout (Places and Magicians for Hire). 0.1.446. Phone first.
   Host element (.cnjrly-gd-shell): the Places header card, or the wrapper
   around GD's form on Magicians. States on the host:
   --filters       the Filters panel is open
   --has-criteria  a search is active (summary row shows)
   --editing       the form is open under the summary */

/* ---------- Replaced GD and older Conjurly controls ---------- */
.cnjrly-gd-shell .gd-search-field-search:has(.geodir_submit_search),
.cnjrly-gd-shell .gd-search-field-search:has(.geodir-show-filters),
.cnjrly-gd-shell .cnjrly-gd-header-filter,
.cnjrly-gd-shell .cnjrly-section-card__context,
.cnjrly-gd-shell .cnjrly-gd-apply-filters,
.cnjrly-gd-shell .geodir-more-filters .geodir_submit_search:not(.cnjrly-gd-search-go) {
  display: none !important;
}

/* A search is active and not being edited: only the summary row shows. */
.cnjrly-gd-shell.cnjrly-gd-shell--has-criteria:not(.cnjrly-gd-shell--editing) .cnjrly-gd-search-widget-slot,
.cnjrly-gd-shell.cnjrly-gd-shell--has-criteria:not(.cnjrly-gd-shell--editing) > form.geodir-listing-search {
  display: none !important;
}

/* ---------- Rows: Search for, Near, distance, actions ---------- */
.cnjrly-gd-shell .gd-search-field-search:has(input[name="s"]),
.cnjrly-gd-shell .gd-search-field-near,
.cnjrly-gd-shell .cnjrly-gd-distance-row,
.cnjrly-gd-shell .cnjrly-gd-search-actions {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.cnjrly-gd-shell .cnjrly-gd-search-actions {
  margin-bottom: 0 !important;
}

/* GD's suggestion list waits until the visitor types. */
.cnjrly-gd-shell .gd-search-field-search:has(input[name="s"]:placeholder-shown) .scrollbars-ios {
  display: none !important;
}

/* Distance: no visible label (every choice reads "Within ..." or "Anywhere"). */
.cnjrly-gd-shell .cnjrly-gd-distance-row .form-field-label,
.cnjrly-gd-shell .cnjrly-gd-distance-row > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---------- x inside Search for and Near ---------- */
.cnjrly-gd-shell .gd-search-field-search:has(input[name="s"]) .input-group-inside,
.cnjrly-gd-shell .gd-search-field-near .input-group-inside {
  position: relative;
}

.cnjrly-gd-shell input[name="s"],
.cnjrly-gd-shell input[name="snear"] {
  padding-right: 40px !important;
}

.cnjrly-gd-input-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cj-meta-color, #6b6e76);
  cursor: pointer;
}

.cnjrly-gd-input-clear:hover {
  background: rgba(0, 0, 0, 0.06);
}

.cnjrly-gd-shell--has-term .gd-search-field-search:has(input[name="s"]) .cnjrly-gd-input-clear,
.cnjrly-gd-shell--has-near .gd-search-field-near .cnjrly-gd-input-clear {
  display: inline-flex;
}

/* ---------- [Filters (n)] [Search] ---------- */
.cnjrly-gd-search-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cnjrly-gd-shell--filters .cnjrly-gd-search-actions .cnjrly-gd-search-go {
  display: none;
}

.cnjrly-gd-shell--filters .cnjrly-gd-search-actions {
  grid-template-columns: 1fr;
}

.cnjrly-gd-search-actions .cj-btn,
.cnjrly-gd-panel-foot .cj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
}

.cnjrly-gd-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cj-indigo-600, #4c187e);
  color: var(--cj-text-on-accent, #fff);
  font-size: 0.75rem;
  line-height: 1;
}

.cnjrly-gd-filters-count[hidden] {
  display: none;
}

/* ---------- Filters panel ---------- */
.cnjrly-gd-shell .geodir-more-filters,
.cnjrly-gd-shell .geodir-more-filters .customize_filter-in {
  margin: 0 !important;
  padding: 0 !important;
}

.cnjrly-gd-shell .geodir-more-filters .customize_filter_inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 12px 0 0 !important;
  padding: 14px !important;
  border: 1px solid var(--cj-border-light, #e6e7eb);
  border-radius: var(--cj-radius-card, 12px);
  background: var(--cj-surface-subtle, #f7f7f8) !important;
}

.cnjrly-gd-shell .geodir-more-filters .customize_filter_inner > * {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Empty GD wrappers take no space. */
.cnjrly-gd-shell .geodir-more-filters .customize_filter_inner > :empty {
  display: none !important;
}

/* 0.1.453: GD prints style="row-gap:0!important" on this panel, which no stylesheet
   can beat, so the vertical gap above never applied. Space the fields with margins. */
.cnjrly-gd-shell .geodir-more-filters .customize_filter_inner > * + * {
  margin-top: 12px !important;
}

/* Dropdown fields: no visible label; their first choice names them. */
.cnjrly-gd-shell .geodir-more-filters .geodir-filter-cat > label,
.cnjrly-gd-shell .geodir-more-filters .geodir-filter-cat .form-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.cnjrly-gd-shell .geodir-more-filters .form-check-label {
  color: var(--cj-text-primary, #2f3033) !important;
  opacity: 1 !important;
}

.cnjrly-gd-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cnjrly-gd-panel-head__title {
  font-family: var(--cj-heading-font-family, "IBM Plex Sans Condensed", sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cj-text-primary, #2f3033);
}

/* 0.1.450: Close, Edit search and Clear all are UI Core ghost buttons
   (cj-btn cj-btn-ghost cj-btn-sm); size, padding and hover come from its tokens. */
.cnjrly-gd-panel-close {
  margin-right: calc(var(--cj-btn-padding-x-sm, 12px) * -1);
}

.cnjrly-gd-panel-foot {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 0.1.451: air above [Clear filters] [Search]; the panel's child reset zeroed the old padding. */
.cnjrly-gd-shell .geodir-more-filters .customize_filter_inner > .cnjrly-gd-panel-foot {
  margin-top: 20px !important;
}

/* ---------- Summary row (a search is active) ---------- */
.cnjrly-gd-search-current {
  display: none;
  margin: 0 0 12px;
}

.cnjrly-gd-shell--has-criteria .cnjrly-gd-search-current {
  display: block;
}

/* 0.1.452: room between the last chip and the Search for box when editing. */
.cnjrly-gd-shell .cnjrly-gd-search-current {
  margin-bottom: 16px !important;
}

.cnjrly-gd-search-current__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.cnjrly-gd-search-current__label {
  font-size: var(--cj-meta-font-size, 0.9rem);
  color: var(--cj-meta-color, #6b6e76);
}

.cnjrly-gd-search-edit {
  margin-right: calc(var(--cj-btn-padding-x-sm, 12px) * -1);
}

.cnjrly-gd-search-current__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cnjrly-gd-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 34px;
  padding: 2px 4px 2px 12px;
  border-radius: 999px;
  background: var(--cj-indigo-50, #f1ecf7);
  color: var(--cj-indigo-600, #4c187e);
  font-size: 0.85rem;
  line-height: 1.2;
}

.cnjrly-gd-search-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnjrly-gd-search-chip__remove {
  /* 0.1.449: theme button padding stretched this into an oval; keep a true circle. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  cursor: pointer;
}

.cnjrly-gd-search-chip__remove:hover,
.cnjrly-gd-search-chip__remove:focus-visible {
  background: rgba(76, 24, 126, 0.14) !important;
  color: inherit !important;
}



.cnjrly-gd-input-clear:focus-visible,
.cnjrly-gd-search-chip__remove:focus-visible {
  outline: var(--cj-focus-outline-width, 2px) solid var(--cj-focus-outline-color, #4c187e);
  outline-offset: 2px;
}

/* 0.1.448: a little air between the header's summary line and Search for. */
.cnjrly-gd-shell .cnjrly-gd-search-heading-row {
  margin-bottom: 10px;
}

/* 0.1.455: Near / Search for suggestion lists. GD positions them with Popper, which
   sometimes measures from the page instead of the field (after the form has been
   folded away) and pushes the list far right and down. The list already sits inside
   the field's position-relative wrapper, so pin it under the field instead. */
.cnjrly-gd-shell .input-group-inside > .dropdown-menu.gd-sug {
  position: absolute !important;
  inset: 100% auto auto 0 !important;
  transform: none !important;
  margin: 2px 0 0 !important;
  z-index: 1060;
}

/* 0.1.456: shown under Near when Google can't place the location. */
.cnjrly-gd-shell .cnjrly-gd-near-note {
  flex-basis: 100%;
  width: 100%;
  margin: 6px 0 0 !important;
  color: var(--cj-meta-color, #666);
  font-size: var(--cj-meta-font-size, 0.92rem);
  line-height: 1.4;
}

/* 0.1.462: location buttons directly under Near. */
.cnjrly-gd-shell .cnjrly-gd-near-prompt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  width: 100%;
  margin: 8px 0 0 !important;
}
.cnjrly-gd-shell .cnjrly-gd-near-prompt[hidden] {
  display: none !important;
}
.cnjrly-gd-shell .cnjrly-gd-near-prompt .cj-btn {
  max-width: 100%;
}
.cnjrly-gd-shell .cnjrly-gd-near-prompt .cj-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 0.1.464: [Use my location] [Recent v] under Near. */
.cnjrly-gd-shell form[data-cnjrly-location-off] .cnjrly-gd-near-prompt__use {
  display: none !important;
}
.cnjrly-gd-shell .cnjrly-gd-near-recent {
  position: relative;
}
.cnjrly-gd-shell .cnjrly-gd-near-recent__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1061;
  min-width: 220px;
  max-width: min(320px, 90vw);
  margin: 0 !important;
  padding: 4px !important;
  list-style: none;
  background: var(--cj-surface-primary, #fff);
  border: 1px solid var(--cj-border-light, #e6e7eb);
  border-radius: var(--cj-radius-input, 10px);
  box-shadow: var(--cj-shadow-card, 0 6px 20px rgba(0, 0, 0, 0.12));
}
.cnjrly-gd-shell .cnjrly-gd-near-recent__menu[hidden] {
  display: none !important;
}
.cnjrly-gd-shell .cnjrly-gd-near-recent__menu li {
  margin: 0;
  padding: 0;
}
.cnjrly-gd-shell .cnjrly-gd-near-recent__item {
  display: block;
  width: 100%;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--cj-text-primary, #2f3033) !important;
  font-size: var(--cj-meta-font-size, 0.92rem);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cnjrly-gd-shell .cnjrly-gd-near-recent__item:hover,
.cnjrly-gd-shell .cnjrly-gd-near-recent__item:focus-visible {
  background: var(--cj-indigo-50, #f4f1f7) !important;
  color: var(--cj-indigo-600, #4c187e) !important;
}

/* 0.1.466: home state. Elementor blocks with class cnjrly-gd-home-only show only on a
   directory's first page with nothing searched. Always visible in the Elementor editor. */
body:not(.cnjrly-gd-home):not(.elementor-editor-active) .cnjrly-gd-home-only {
  display: none !important;
}
/* Optional card look, matching the search card: add class cnjrly-gd-home-card. */
.cnjrly-gd-home-card {
  margin: 0 0 var(--cj-gap-card, 24px);
  padding: var(--cj-space-card, 24px);
  border: 1px solid var(--cj-border-card, #e6e7eb);
  border-radius: var(--cj-radius-card, 12px);
  background: var(--cj-surface-primary, #fff);
  box-shadow: var(--cj-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.06));
}
.cnjrly-gd-home-card h2,
.cnjrly-gd-home-card .elementor-heading-title {
  margin: 0 0 12px;
}
.cnjrly-gd-home-card p:last-child {
  margin-bottom: 0;
}