/* ============================================================
   CorfuDiscovery  -  the search bar of the home page and the directory pages
   One bar: the kind of place on top as pills, then "what", "where" and the Search button side by side in a single rounded row.
   (Loaded after styles.css, which holds the basic version.)
   ============================================================ */

.searchbar {
  background: var(--tc-search-fffffff0,rgba(255, 255, 255, .94)); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--tc-search-ffffffbf,rgba(255, 255, 255, .75)); border-radius: 30px; box-shadow: 0 34px 80px var(--tc-search-0614206b,rgba(6, 20, 32, .42)), inset 0 1px 0 var(--tc-search-ffffffe6,rgba(255, 255, 255, .9));
  margin-top: 36px; max-width: min(1000px, 100%); padding: 12px 12px 12px; position: relative; z-index: 3;
}

.hero:has(.searchbar .cdf-suggest:not([hidden])) { z-index: 3; }

/* ---- the kind of place: pills */
.searchbar .search-tabs { gap: 6px; padding: 2px 6px 12px; }
.searchbar .search-tabs button {
  background: transparent; border: 1.5px solid transparent; border-radius: 999px; color: var(--body, #44515d); font-size: 14px; font-weight: 700; gap: 8px; padding: 9px 17px;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.searchbar .search-tabs button svg { color: var(--coral, #e5503a); height: 17px; width: 17px; transition: color .18s; }
.searchbar .search-tabs button:hover:not(.active) { background: var(--sand-2, #f3ece2); border-color: var(--line, #e8dfd2); color: var(--ink, #1a242e); }
.searchbar .search-tabs button.active { background: var(--navy, #0f2a3b); border-color: var(--navy, #0f2a3b); box-shadow: 0 6px 16px var(--tc-search-0f2a3b47,rgba(15, 42, 59, .28)); color: var(--tc-search-ffffff,#fff); }
.searchbar .search-tabs button.active svg { color: var(--tc-search-ffb4a6,#ffb4a6); }
.searchbar .search-tabs button:focus-visible { outline: 3px solid var(--coral, #e5503a); outline-offset: 2px; }

/* ---- the row: what | where | Search */
.searchbar .search-fields {
  background: var(--tc-search-ffffff,#fff); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 22px; box-shadow: 0 1px 2px var(--tc-search-0f2a3b0d,rgba(15, 42, 59, .05));
  gap: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; overflow: visible; transition: border-color .18s, box-shadow .18s;
}
.searchbar .search-fields:focus-within { border-color: var(--coral, #e5503a); box-shadow: 0 0 0 5px var(--tc-search-e5503a24,rgba(229, 80, 58, .14)); }
.searchbar .field { background: transparent; border: 0; border-radius: 0; gap: 14px; padding: 15px 22px; position: relative; transition: background-color .18s; }
.searchbar .field:first-child { border-radius: 20px 0 0 20px; }
.searchbar .field:has(.cdf-suggest:not([hidden])) { z-index: 1; }
.searchbar .field + .field::before { background: var(--line, #e8dfd2); bottom: 16px; content: ''; left: 0; position: absolute; top: 16px; width: 1.5px; }
.searchbar .field:hover { background: var(--sand, #faf6f0); }
.searchbar .field:focus-within { background: var(--sand, #faf6f0); border: 0; box-shadow: none; }
.searchbar .field .fi { align-items: center; background: var(--coral-soft, #fcebe5); border-radius: 50%; box-sizing: content-box; color: var(--coral, #e5503a); height: 18px; padding: 9px; width: 18px; }
.searchbar .field .field-label { color: var(--muted, #768591); font-size: 11px; letter-spacing: .09em; }
.searchbar .field input, .searchbar .field select { color: var(--ink, #1a242e); font-size: 16px; font-weight: 700; padding: 3px 0 1px; }
.searchbar .field input::placeholder { color: var(--tc-search-98a4ae,#98a4ae); font-weight: 500; }
.searchbar .field select { background: none; text-overflow: ellipsis; }

.searchbar .search-go { display: grid; padding: 6px; }
.searchbar .search-go .btn { border-radius: 16px; box-shadow: 0 10px 22px var(--tc-search-e5503a57,rgba(229, 80, 58, .34)); font-size: 16px; font-weight: 800; gap: 10px; height: 100%; letter-spacing: .02em; min-height: 54px; padding: 0 32px; transition: transform .15s, box-shadow .15s, background-color .15s; }
.searchbar .search-go .btn:hover { box-shadow: 0 14px 28px var(--tc-search-e5503a6b,rgba(229, 80, 58, .42)); transform: translateY(-1px); }
.searchbar .search-go .btn svg { height: 19px; width: 19px; }

/* ---- the popular shortcuts under the bar */
.hero-quick a { backdrop-filter: blur(8px); transition: background-color .18s, color .18s, transform .18s, border-color .18s; }
.hero-quick a:hover { transform: translateY(-1px); }

@media (max-width: 860px) {
  .searchbar { border-radius: 24px; margin-top: 28px; padding: 10px; }
  .searchbar .search-tabs { flex-wrap: nowrap; margin: 0 -4px; overflow-x: auto; padding: 2px 4px 10px; scrollbar-width: none; }
  .searchbar .search-tabs::-webkit-scrollbar { display: none; }
  .searchbar .search-tabs button { flex: none; padding: 9px 14px; }
  .searchbar .search-fields { border-radius: 18px; grid-template-columns: 1fr; }
  .searchbar .field + .field::before { bottom: auto; height: 1.5px; left: 16px; right: 16px; top: 0; width: auto; }
  .searchbar .field { padding: 13px 16px; }
  .searchbar .field:first-child { border-radius: 16px 16px 0 0; }
  .searchbar .search-go { padding: 8px; }
  .searchbar .search-go .btn { min-height: 52px; width: 100%; }
}