/* "Liquid glass" search bar (Jobs & Gigs, Services, Volunteer pages).
   Glossy black capsule, white pill inputs, a green glass Search button, and
   on Jobs & Gigs a clear glass lens that slides over the selected tab.
   Loaded after each page's own styles, so these rules win. */

.search-card{
  background:linear-gradient(180deg, #1d1e22 0%, #0b0b0d 55%, #000 100%) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:34px !important;
  padding:12px !important;
  box-shadow:
    0 34px 60px -28px rgba(0,0,0,0.55),
    0 12px 24px -14px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.05) !important;
}

/* Tabs: a recessed track with a glass lens over the active tab */
.search-card .tabs{
  position:relative; display:inline-flex; gap:2px; padding:5px; margin-bottom:12px;
  border-radius:999px; background:rgba(255,255,255,0.06);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.search-card .tab{
  position:relative; z-index:1;
  background:transparent !important; box-shadow:none !important; opacity:1 !important;
  color:rgba(255,255,255,0.62) !important; font-weight:700 !important; font-size:14px !important;
  padding:10px 20px !important; border-radius:999px !important;
  transition:color .25s ease;
}
.search-card .tab:hover{ color:#fff !important; }
.search-card .tab.active{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.45); }
.search-card .tab:focus-visible{ outline:2px solid rgba(255,255,255,0.8); outline-offset:2px; }
/* Four tabs (All / Jobs / Gigs / Volunteer) fit a phone screen */
@media (max-width:420px){ .search-card .tab{ padding:10px 13px !important; } }

.search-card .glass-lens{
  position:absolute; top:-5px; bottom:-5px; left:0; width:0; z-index:0; pointer-events:none;
  border-radius:999px;
  /* Clear glass, like the reference: see-through with a bright rim */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.07) 48%, rgba(255,255,255,0.02) 100%),
    rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.18);
  backdrop-filter:blur(2px) saturate(180%) brightness(1.18);
  border:1.5px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.95),
    inset 0 -6px 12px rgba(255,255,255,0.18),
    inset 0 0 18px rgba(255,255,255,0.10),
    0 14px 28px -10px rgba(0,0,0,0.75);
  transition:left .5s cubic-bezier(.34,1.45,.64,1), width .5s cubic-bezier(.34,1.45,.64,1);
}
@media (prefers-reduced-motion: reduce){ .search-card .glass-lens{ transition:none; } }

/* Fields: clean white pills sitting in the black capsule */
.search-card .search-fields{ background:transparent !important; padding:0 !important; gap:10px !important; }
.search-card .search-field,
.search-card > input{
  background:#fff !important; border-radius:22px !important; border:none !important;
  box-shadow:inset 0 1px 2px rgba(20,21,26,0.10), 0 1px 0 rgba(255,255,255,0.35) !important;
}
.search-card > input{ padding:14px 20px !important; font-size:16px !important; }

/* Search button: green glass */
.search-card .search-btn{
  background:linear-gradient(180deg, #00a63d 0%, #00a63d 45%, #00a63d 100%) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  border-radius:20px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.18),
    0 10px 22px -8px rgba(0,166,61,0.7) !important;
  transition:transform .15s ease, filter .15s ease;
}
.search-card .search-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }