/* ============================================================
   W2D Events Explorer — Top Controls
   File: explorer-controls.css
   ============================================================ */

/* ---------------------------
   Top bar wrapper
--------------------------- */

.w2d-explorer__topbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(920px, calc(100% - 24px));
  pointer-events: none;

  --w2d-glass-bg: rgba(12, 14, 18, .78);
  --w2d-glass-bg-soft: rgba(12, 14, 18, .66);
  --w2d-glass-brd: rgba(255, 255, 255, .10);
  --w2d-glass-shadow: 0 18px 46px rgba(0, 0, 0, .32);

  --w2d-glass-hover-bg: rgba(255, 255, 255, .06);
  --w2d-glass-hover-brd: rgba(255, 255, 255, .14);
  --w2d-glass-hover-shadow: 0 18px 46px rgba(0, 0, 0, .40);

  --w2d-glass-active-bg: rgba(255, 255, 255, .085);
  --w2d-glass-active-brd: rgba(255, 255, 255, .16);
}

.w2d-explorer__topbarInner {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: none;
}

/* ---------------------------
   Theme reset
--------------------------- */

.w2d-explorer__topbar button,
.w2d-explorer__topbar input {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  filter: none;
}

/* ---------------------------
   Shared top controls
--------------------------- */

.w2d-pillSearch,
.w2d-pillBtn,
.w2d-countChip {
  background: var(--w2d-glass-bg);
  border: 1px solid var(--w2d-glass-brd);
  box-shadow: var(--w2d-glass-shadow);
}

.w2d-pillSearch,
.w2d-pillBtn,
.w2d-pillIcon,
.w2d-countChip,
.w2d-filterActions .w2d-btnLike {
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease,
    color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------
   Search pill
--------------------------- */

.w2d-pillSearch {
  pointer-events: auto;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 44px;
  min-width: 44px;
  width: 44px;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
}

.w2d-pillSearch.is-open {
  width: min(560px, calc(100vw - 190px));
}

.w2d-pillIcon {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .10);
  background: transparent;
  cursor: pointer;
}

.w2d-pillIcon > * {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.w2d-pillIcon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  flex: 0 0 18px !important;
  pointer-events: none !important;
}

.w2d-pillIcon svg path,
.w2d-pillBtn svg path {
  fill: rgba(255, 255, 255, .92) !important;
}

.w2d-pillInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100%;
  height: 44px;
  margin: 0 !important;
  padding: 0 14px 0 10px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  box-shadow: none !important;
}

.w2d-pillInput::placeholder {
  color: rgba(255, 255, 255, .60);
}

.w2d-pillSearch input {
  min-width: 0 !important;
}

/* ---------------------------
   Pill buttons
--------------------------- */

.w2d-pillBtn {
  pointer-events: auto;
  height: 44px;
  padding: 0 18px;
  margin: 0;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.w2d-pillBtn[data-w2d-filter-toggle] {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.w2d-pillBtn[data-w2d-calendar-toggle] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
}

.w2d-pillBtn[data-w2d-calendar-toggle] > * {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.w2d-pillBtn[data-w2d-calendar-toggle] svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  flex: 0 0 18px !important;
  pointer-events: none !important;
}

/* ---------------------------
   Count chips
--------------------------- */

.w2d-countChips {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.w2d-countChip {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .90);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2px;
  background: var(--w2d-glass-bg-soft);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .26);
}

/* ---------------------------
   Hover / focus / active
--------------------------- */

@media (hover:hover) and (pointer:fine) {
  .w2d-pillBtn:hover,
  .w2d-pillIcon:hover,
  .w2d-countChip:hover {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32) !important;
    transform: none;
  }

  .w2d-pillSearch:hover {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32);
  }
}

.w2d-pillBtn:active,
.w2d-pillIcon:active,
.w2d-countChip:active {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  transform: none;
}

.w2d-pillBtn:focus-visible,
.w2d-pillIcon:focus-visible,
.w2d-pillInput:focus-visible {
  outline: none;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .40),
    0 0 0 3px rgba(37, 99, 235, .30) !important;
  border-color: rgba(37, 99, 235, .55) !important;
}

/* ---------------------------
   Filter action buttons
--------------------------- */

.w2d-filterActions .w2d-btnLike {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  font-weight: 950;
  color: rgba(255, 255, 255, .90);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.w2d-filterActions .w2d-btnLike.primary {
  background: rgba(37, 99, 235, .92);
  border-color: rgba(37, 99, 235, .92);
  color: #fff;
}

.w2d-filterActions .w2d-btnLike:hover,
.w2d-filterActions .w2d-btnLike:focus-visible {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
  outline: none;
}

.w2d-filterActions .w2d-btnLike.primary:hover,
.w2d-filterActions .w2d-btnLike.primary:focus-visible {
  background: rgba(37, 99, 235, .88);
  border-color: rgba(37, 99, 235, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
  outline: none;
}

.w2d-filterActions .w2d-btnLike:active {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(0);
}

.w2d-filterActions .w2d-btnLike.primary:active {
  background: rgba(37, 99, 235, .84);
  border-color: rgba(37, 99, 235, .84);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(0);
}

/* ---------------------------
   Filter / calendar popovers
--------------------------- */

.w2d-floatBubble {
  border-radius: 22px;
  overflow: hidden;
}

/* ---------------------------
   Mobile
--------------------------- */

@media (max-width: 520px) {
  .w2d-pillSearch.is-open {
    width: min(560px, calc(100vw - 150px));
  }
}