/*
  QXONI Search settings
  The settings surface intentionally owns its colours.  It must not inherit a
  light background with dark-theme text from the rest of Search.
*/
:root {
  --settings-bg: #fbfbfd;
  --settings-surface: #ffffff;
  --settings-text: #18181c;
  --settings-muted: #74747d;
  --settings-line: rgba(24, 24, 28, .09);
  --settings-soft: #f3f3f6;
  --settings-hover: #eeeeF2;
  --settings-shadow: -18px 0 54px rgba(20, 20, 28, .16);
}

[data-theme="dark"] {
  --settings-bg: #18191e;
  --settings-surface: #202126;
  --settings-text: #f5f5f7;
  --settings-muted: #b3b4bc;
  --settings-line: rgba(255, 255, 255, .10);
  --settings-soft: #2a2b32;
  --settings-hover: #303139;
  --settings-shadow: -18px 0 54px rgba(0, 0, 0, .45);
}

.panel-bd.on {
  background: rgba(7, 8, 12, .38) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.settings-panel {
  width: min(620px, 72vw) !important;
  max-width: 620px !important;
  background: var(--settings-bg) !important;
  color: var(--settings-text) !important;
  border-left: 1px solid var(--settings-line) !important;
  border-radius: 32px 0 0 32px !important;
  box-shadow: var(--settings-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.settings-panel .sp-head,
.settings-panel .sp-tabs,
.settings-panel .sp-body,
.settings-panel .sp-pane {
  background: var(--settings-bg) !important;
  color: var(--settings-text) !important;
  opacity: 1 !important;
}

.settings-panel .sp-head {
  padding: 24px 28px 12px !important;
  border-bottom: 1px solid var(--settings-line);
}

.settings-panel .sp-title,
.settings-panel .sp-about-name,
.settings-panel .sp-row-lbl,
.settings-panel .sp-link-lbl,
.settings-panel .sp-link-arr {
  color: var(--settings-text) !important;
  -webkit-text-fill-color: var(--settings-text) !important;
}

.settings-panel .sp-about-ver,
.settings-panel .sp-row-sub,
.settings-panel .sp-sec-title,
.settings-panel .sp-link-sub {
  color: var(--settings-muted) !important;
  -webkit-text-fill-color: var(--settings-muted) !important;
}

.settings-panel .sp-tabs {
  gap: 6px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--settings-line) !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.settings-panel .sp-tab {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--settings-muted) !important;
  -webkit-text-fill-color: var(--settings-muted) !important;
}

.settings-panel .sp-tab:hover,
.settings-panel .sp-tab:focus-visible {
  background: var(--settings-hover) !important;
  color: var(--settings-text) !important;
  -webkit-text-fill-color: var(--settings-text) !important;
}

.settings-panel .sp-tab.on,
.settings-panel .sp-tab.on:hover,
.settings-panel .sp-tab.on:focus-visible {
  background: var(--settings-text) !important;
  color: var(--settings-bg) !important;
  -webkit-text-fill-color: var(--settings-bg) !important;
}

.settings-panel .sp-body { padding: 16px 20px 28px !important; }
.settings-panel .sp-section {
  margin: 0 0 12px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--settings-line) !important;
  border-radius: 18px !important;
  background: var(--settings-surface) !important;
}

.settings-panel .sp-sec-title {
  margin: 0 !important;
  padding: 12px 15px !important;
  border-bottom: 1px solid var(--settings-line);
  background: var(--settings-soft) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.settings-panel .sp-row,
.settings-panel .sp-link {
  min-height: 68px;
  margin: 0 12px !important;
  padding: 13px 4px !important;
  border-bottom: 1px solid var(--settings-line) !important;
  background: transparent !important;
}

.settings-panel .sp-row:last-child,
.settings-panel .sp-link:last-child { border-bottom: 0 !important; }
.settings-panel .sp-row:hover,
.settings-panel .sp-link:hover { background: var(--settings-hover) !important; }

.settings-panel .sp-about {
  margin: 0 0 16px !important;
  padding: 16px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 18px !important;
  background: #0b0b0e !important;
}
.settings-panel .sp-about-name { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.settings-panel .sp-about-ver { color: #c6c6cd !important; -webkit-text-fill-color: #c6c6cd !important; }

.settings-panel .tog { background: #d6d6dc !important; border: 1px solid rgba(0, 0, 0, .08) !important; }
.settings-panel .tog.on { background: var(--settings-text) !important; border-color: var(--settings-text) !important; }
.settings-panel .tog::after { background: #fff !important; }

.settings-panel .sp-seg {
  border-color: var(--settings-line) !important;
  background: var(--settings-soft) !important;
}
.settings-panel .sp-seg .seg-btn { color: var(--settings-muted) !important; -webkit-text-fill-color: var(--settings-muted) !important; }
.settings-panel .sp-seg .seg-btn.on { background: var(--settings-text) !important; color: var(--settings-bg) !important; -webkit-text-fill-color: var(--settings-bg) !important; }
.settings-panel .sp-select {
  min-width: 150px;
  background: var(--settings-soft) !important;
  color: var(--settings-text) !important;
  border-color: var(--settings-line) !important;
  -webkit-text-fill-color: var(--settings-text) !important;
}
.settings-panel .sp-close { color: var(--settings-text) !important; }
.settings-panel .sp-close:hover { background: var(--settings-hover) !important; color: var(--settings-text) !important; }

[data-theme="dark"] .settings-panel .tog { background: #3a3b43 !important; border-color: rgba(255, 255, 255, .10) !important; }
[data-theme="dark"] .settings-panel .tog.on { background: #f5f5f7 !important; border-color: #f5f5f7 !important; }
[data-theme="dark"] .settings-panel .tog.on::after { background: #16171b !important; }

@media (max-width: 640px) {
  .settings-panel {
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(88dvh, 760px);
    border: 1px solid var(--settings-line) !important;
    border-bottom: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .20) !important;
    transform: translateY(110%);
  }
  .settings-panel.on { transform: translateY(0); }
  .settings-panel .sp-head { padding: 18px 18px 10px !important; }
  .settings-panel .sp-tabs { padding: 10px 14px !important; }
  .settings-panel .sp-body { padding: 14px 14px 24px !important; }
  .settings-panel .sp-row { min-height: 72px; }
  .settings-panel .sp-select { min-width: 130px; max-width: 42vw; }
}