/* Search layout, input, Prussian-blue segmented control and matching action button. */

.search-shell {
  --search-control-width: 72px;
  --search-control-height: 35px;

  width: min(760px, 100%);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 17px;
}

.search-providers {
  position: relative;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(3, var(--search-control-width));
  align-items: center;
  gap: 3px;
  padding: 3px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.038);
  touch-action: none;
  user-select: none;
}

.search-provider {
  position: relative;
  z-index: 2;
  width: var(--search-control-width);
  min-width: var(--search-control-width);
  height: var(--search-control-height);
  min-height: var(--search-control-height);
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: rgba(224, 231, 239, 0.64);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1;
  transition: color 150ms ease, background 150ms ease;
}

.search-provider:hover {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.055);
}

.search-provider.active {
  color: rgba(255, 255, 255, 0.98);
  background: transparent;
  box-shadow: none;
  cursor: grab;
  font-weight: 570;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}

.search-providers.dragging .search-provider.active {
  cursor: grabbing;
}

.search-selection {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: auto;
  z-index: 1;
  width: var(--search-control-width);
  height: var(--search-control-height);
  pointer-events: none;
  transform: translate3d(3px, 0, 0);
  transform-origin: center;
  border: 1px solid rgba(119, 194, 235, 0.40);
  border-radius: 10px;
  background:
    radial-gradient(circle at 34% 8%, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(145deg, rgba(48, 111, 151, 0.90), rgba(var(--prussian-rgb), 0.98));
  -webkit-backdrop-filter: blur(10px) saturate(155%) brightness(0.92);
  backdrop-filter: blur(10px) saturate(155%) brightness(0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 13px rgba(0, 18, 31, 0.29),
    0 0 18px rgba(41, 132, 183, 0.12);
  transition:
    transform 390ms cubic-bezier(0.20, 0.82, 0.28, 1.06),
    width 220ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  will-change: transform;
}

.search-selection::before,
.search-selection::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.search-selection::before {
  inset: 1px;
  border-radius: 9px;
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 26%,
      rgba(255, 255, 255, 0.25) 48%,
      rgba(255, 255, 255, 0.07) 68%,
      transparent 100%
    );
  background-size: 190% 100%;
  background-position: 8% 0;
  mix-blend-mode: screen;
  opacity: 0.76;
}

.search-selection::after {
  left: 15%;
  right: 15%;
  top: 2px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
  opacity: 0.76;
}

.search-selection.no-transition,
.search-providers.dragging .search-selection {
  transition:
    transform 0s,
    width 0s,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.search-providers.dragging .search-selection {
  border-color: rgba(142, 211, 247, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.17),
    0 5px 15px rgba(0, 18, 31, 0.31),
    0 0 22px rgba(50, 149, 201, 0.16);
}

.search-providers.is-flowing .search-selection::before {
  animation: search-thumb-sheen 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes search-thumb-sheen {
  0% { background-position: 8% 0; opacity: 0.62; }
  48% { background-position: 92% 0; opacity: 1; }
  100% { background-position: 38% 0; opacity: 0.76; }
}

.search-input-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px 0 8px;
}

.search-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: rgba(206, 216, 227, 0.60);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-input-wrap input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  outline: 0;
  color: rgba(255, 255, 255, 0.96);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 430;
  letter-spacing: 0;
  line-height: 1.35;
}

.search-input-wrap input::placeholder {
  color: rgba(203, 213, 225, 0.44);
  font-weight: 400;
}

.search-submit {
  width: var(--search-control-width);
  min-width: var(--search-control-width);
  height: var(--search-control-height);
  min-height: var(--search-control-height);
  padding: 0;
  border: 1px solid rgba(119, 194, 235, 0.40);
  border-radius: 10px;
  color: #ffffff;
  background:
    radial-gradient(circle at 34% 8%, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(145deg, rgba(48, 111, 151, 0.90), rgba(var(--prussian-rgb), 0.98));
  -webkit-backdrop-filter: blur(10px) saturate(155%) brightness(0.92);
  backdrop-filter: blur(10px) saturate(155%) brightness(0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 13px rgba(0, 18, 31, 0.29),
    0 0 18px rgba(41, 132, 183, 0.12);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 570;
  letter-spacing: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.search-submit:hover {
  border-color: rgba(142, 211, 247, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.31),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 5px 15px rgba(0, 18, 31, 0.31),
    0 0 22px rgba(50, 149, 201, 0.16);
  filter: brightness(1.04);
}

.search-submit:active {
  filter: brightness(0.96);
}

html[data-theme="light"] .search-providers {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.17);
}

html[data-theme="light"] .search-provider {
  color: rgba(32, 49, 65, 0.62);
}

html[data-theme="light"] .search-provider.active {
  color: #ffffff;
}

html[data-theme="light"] .search-selection {
  border-color: rgba(0, 49, 83, 0.30);
  background:
    radial-gradient(circle at 34% 8%, rgba(255, 255, 255, 0.38), transparent 44%),
    linear-gradient(145deg, rgba(52, 116, 155, 0.92), rgba(var(--prussian-rgb), 0.98));
  -webkit-backdrop-filter: blur(9px) saturate(145%) brightness(1.01);
  backdrop-filter: blur(9px) saturate(145%) brightness(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 13px rgba(27, 62, 84, 0.20),
    0 0 18px rgba(0, 49, 83, 0.09);
}

html[data-theme="light"] .search-input-wrap input {
  color: rgba(22, 34, 45, 0.94);
}

html[data-theme="light"] .search-input-wrap input::placeholder {
  color: rgba(48, 66, 83, 0.47);
}

html[data-theme="light"] .search-icon {
  stroke: rgba(42, 60, 78, 0.56);
}

@media (max-width: 700px) {
  .search-shell {
    grid-template-columns: 1fr auto;
    gap: 6px;
    border-radius: 15px;
  }

  .search-providers {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
  }
}