/* Shared "filter bar" — the search / category / distance controls at the top of Events, Adopt and Pet Care Experts.
   Add class "fbar" to the wrapper that holds them; everything inside is restyled here so all pages match.
   Loaded after each page's own CSS, so these rules win. */

.fbar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.75rem;
  padding: 1.1rem;
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .35);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0 0 1.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* ── search ── */
.fbar .ev-search, .fbar .search-wrapper {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 1.1rem;
  padding: .3rem 1rem; box-shadow: none; position: relative;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fbar .ev-search:focus-within, .fbar .search-wrapper:focus-within {
  background: #fff; border-color: #00A36C; box-shadow: 0 0 0 4px rgba(0, 163, 108, .13);
}
.fbar .search-icon { position: static !important; transform: none !important; font-size: 1.1rem; opacity: .7; flex: none; }
.fbar .ev-search input, .fbar .search-input {
  flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: .75rem 0 !important; font: inherit; font-size: 1rem; color: #0f172a;
}
.fbar .ev-search input::placeholder, .fbar .search-input::placeholder { color: #94a3b8; }

/* ── dropdowns (species / breed / specialty) ── */
.fbar .dropdowns-row, .fbar .filters-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; width: 100%; }
.fbar .filters-row .search-wrapper { flex: 2 1 280px; width: auto; }
.fbar .filters-row .select-wrapper { flex: 1 1 200px; position: relative; }
.fbar .select-box {
  -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 1.1rem;
  padding: .85rem 2.4rem .85rem 1.1rem; font: inherit; font-size: .95rem; font-weight: 700; color: #0f172a;
  cursor: pointer; transition: border-color .15s, box-shadow .15s; box-shadow: none;
}
.fbar .dropdowns-row .select-box { flex: 1 1 200px; width: auto; }
.fbar .select-box:focus { outline: 0; border-color: #00A36C; box-shadow: 0 0 0 4px rgba(0, 163, 108, .13); background: #fff; }
.fbar .select-box:disabled { opacity: .55; cursor: not-allowed; }
.fbar .select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: #008f5e; font-weight: 900; }

/* ── category chips ── */
.fbar .category-scroll {
  display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; margin: 0; padding: .1rem .1rem .3rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fbar .category-scroll::-webkit-scrollbar { display: none; }
.fbar .category-btn {
  flex: none; white-space: nowrap; border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
  font: inherit; font-weight: 800; font-size: .88rem; padding: .55rem 1.15rem; border-radius: 999px;
  cursor: pointer; transition: all .15s; box-shadow: none;
}
.fbar .category-btn:hover { border-color: #00A36C; color: #008f5e; }
.fbar .category-btn.active {
  background: #00A36C; border-color: #00A36C; color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 163, 108, .75);
}

/* ── distance strip:  📍 Within  ———o———  [90 km]  ── */
.fbar .radius-container, .fbar .radius-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.1rem; row-gap: .4rem;
  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
  background: #ecfdf5; border: 1px solid #b7e6d1; border-radius: 1.1rem; padding: .85rem 1.2rem; box-shadow: none;
}
.fbar .radius-header, .fbar .rc-header { display: contents; }
.fbar .radius-label, .fbar .rc-label {
  grid-column: 1; grid-row: 1; font-size: .92rem; font-weight: 800; color: #0f172a; white-space: nowrap; margin: 0;
}
.fbar .rc-header > div:first-child { grid-column: 1; grid-row: 1; }
.fbar .rc-sub-row { margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fbar .rc-desc { display: none; }
.fbar .slider-labels { display: none; }
.fbar .radius-value, .fbar .rc-value {
  grid-column: 3; grid-row: 1; background: #00A36C; color: #fff; font-weight: 900; font-size: .9rem;
  min-width: 4.8rem; text-align: center; border-radius: 999px; padding: .38rem .95rem; box-shadow: 0 8px 16px -10px rgba(0, 163, 108, .9);
}
.fbar .radius-slider, .fbar .slider { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
.fbar input[type=range] {
  -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: #bfe9d6; outline: 0; cursor: pointer;
}
.fbar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #00A36C;
  border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); cursor: grab; transition: transform .15s;
}
.fbar input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.fbar input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #00A36C; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); cursor: grab;
}
.fbar input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: #bfe9d6; }

@media (max-width: 640px) {
  .fbar { padding: .9rem; border-radius: 1.4rem; }
  /* chips wrap onto a second line instead of being cut off at the screen edge */
  .fbar .category-scroll { flex-wrap: wrap; overflow: visible; padding: 0; }
  .fbar .category-btn { padding: .5rem 1rem; font-size: .84rem; }
  .section-header { flex-wrap: wrap; gap: .25rem .8rem; align-items: baseline; }
  .fbar .radius-container, .fbar .radius-card { grid-template-columns: 1fr auto; padding: .8rem 1rem; }
  .fbar .radius-slider, .fbar .slider { grid-column: 1 / -1; grid-row: 2; }
  .fbar .radius-value, .fbar .rc-value { grid-column: 2; }
  .fbar .filters-row .search-wrapper, .fbar .filters-row .select-wrapper { flex-basis: 100%; }
}

/* ── friendly "nothing here" card (events list) ── */
.ev-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 60%); border: 1px solid #b7e6d1; border-radius: 1.75rem;
  padding: 2.6rem 1.4rem; box-shadow: 0 14px 28px -20px rgba(0, 163, 108, .5);
}
.ev-empty-ic { width: 4.2rem; height: 4.2rem; border-radius: 1.3rem; background: #fff; border: 1px solid #b7e6d1; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 10px 20px -12px rgba(0, 163, 108, .6); }
.ev-empty h2 { margin: .4rem 0 0; font-size: 1.35rem; font-weight: 900; color: #0f172a; }
.ev-empty p { margin: 0; max-width: 30rem; color: #475569; font-size: .95rem; line-height: 1.55; }
.ev-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .9rem; }
.ev-empty-btns a, .ev-empty-btns button {
  border: 1.5px solid #00A36C; background: #fff; color: #008f5e; font: inherit; font-weight: 800; font-size: .9rem;
  padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; text-decoration: none; transition: all .15s;
}
.ev-empty-btns .p { background: #00A36C; color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 163, 108, .75); }
.ev-empty-btns a:hover, .ev-empty-btns button:hover { transform: translateY(-2px); }