/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --findbar-border-radius: 8px;
  --findbar-separation: 4px;
  --findbar-offset: 12px;
  --uc-findbar-color: var(--toolbar-color, var(--arrowpanel-color, currentColor));

  /* Crisp, defined outline for both light and dark backgrounds */
  --_fb-border: 1px solid light-dark(
    rgba(0, 0, 0, 0.22),
    rgba(255, 255, 255, 0.25)
  );
  --_fb-bg-color: var(--lwt-accent-color, var(--arrowpanel-background, -moz-Dialog));
  --_fb-bg-image: linear-gradient(var(--toolbar-bgcolor, transparent),
                   var(--toolbar-bgcolor, transparent)),
                  var(--toolbar-bgimage, none);
}

/* ── Split-view checkbox visibility ────────────────────────────────────── */
.split-view-panel .findbar-container > checkbox {
  display: inline-flex !important;
}

/* ── Floating Overlay Grid Layout (Prevents Page Shift) ────────────────── */
.browserContainer {
  display: grid !important;
  grid-template-rows: 0px 1fr !important;
  grid-template-columns: 1fr !important;
}

.browserContainer > .browserStack {
  grid-row: 1 / -1 !important;
  grid-column: 1 !important;
  z-index: 1 !important;
}

/* ── Findbar shell ─────────────────────────────────────────────────────── */
findbar {
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 10000 !important;
  pointer-events: none;

  /* Layout positioning & separation height */
  order: -1 !important;
  position: relative !important;
  height: calc(30px + var(--findbar-separation, 4px)) !important;
  padding-top: var(--findbar-separation, 4px) !important;
  padding-right: var(--findbar-offset, 11px) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;

  /* Styling resets */
  border: none !important;
  transition: transform 100ms linear, opacity 100ms linear 50ms !important;
  background: transparent !important;
  background-image: none !important;
  white-space: nowrap;
  flex-direction: row !important;
  align-items: center !important;
  filter: drop-shadow(0 2px 6px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)));
}

findbar[hidden] {
  transform: translateY(-30px);
  opacity: 0;
  pointer-events: none;
}

/* Spacer that pushes the bar elements to the right */
findbar::after {
  content: "" !important;
  display: flex !important;
  flex-grow: 100 !important;
}

/* ── Container + close button shared chrome ─────────────────────────────── */
findbar .findbar-container,
findbar .findbar-closebutton {
  border: var(--_fb-border) !important;
  background-color: var(--_fb-bg-color) !important;
  background-image: var(--_fb-bg-image) !important;
  color: var(--uc-findbar-color) !important;
  pointer-events: auto;
  box-sizing: border-box !important;
  height: 30px !important;
}

/* ── Container specifics ────────────────────────────────────────────────── */
findbar .findbar-container {
  border-width: 1px 0 1px 1px !important;
  border-radius: var(--findbar-border-radius) 0 0 var(--findbar-border-radius) !important;
  margin-inline: 0 !important;
  overflow-inline: visible !important;
  flex-direction: row !important;
  align-items: center !important;
  padding-inline: 4px !important;
  order: 1 !important;
}

.findbar-container > .findbar-find-fast {
  padding: var(--toolbarbutton-inner-padding, 4px) 1px;
  margin: 0 !important;
}

/* ── Close button specifics ─────────────────────────────────────── */
findbar .findbar-closebutton {
  border-width: 1px 1px 1px 0 !important;
  border-radius: 0 var(--findbar-border-radius) var(--findbar-border-radius) 0 !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keep bg stable on close-button hover */
.findbar-closebutton:hover {
  background-color: var(--_fb-bg-color) !important;
  background-image: var(--_fb-bg-image) !important;
}

/* ── Navigation buttons (prev / next) ───────────────────────────────────── */
.findbar-find-previous,
.findbar-find-next {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: auto 1px !important;
  align-self: center !important;
  padding: 0 !important;
}

.findbar-find-previous {
  order: 5 !important;
  margin-inline-start: 4px !important;
}

.findbar-find-next {
  order: 6 !important;
}

/* ── Button icon reset ── */
.findbar-find-previous > image,
.findbar-find-next > image {
  padding: 3px !important;
  margin: 0 !important;
}

/* ── Ripple hover spotlight centering ── */
.findbar-find-previous::after,
.findbar-find-next::after {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  top: 50% !important;
  left: calc(50% - 1px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background 150ms ease !important;
  pointer-events: none !important;
}

/* Suppress default Firefox hover fill on prev/next */
.findbar-find-previous:hover,
.findbar-find-next:hover {
  background: transparent !important;
}

/* ── Ripple hover layer (toolbarbuttons + close button) ─────────────────── */
findbar toolbarbutton,
findbar .findbar-closebutton {
  position: relative !important;
}

findbar toolbarbutton::after,
findbar .findbar-closebutton::after {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background 150ms ease !important;
  pointer-events: none !important;
}

findbar toolbarbutton:hover::after,
findbar .findbar-closebutton:hover::after {
  background: var(--toolbarbutton-hover-background,
               color-mix(in srgb, currentColor 25%, transparent)) !important;
}

/* ── Element Reordering & Layout Alignment ──────────────────────────────── */
hbox[anonid="findbar-textbox-wrapper"],
.findbar-textbox {
  order: 4 !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin-inline: 4px !important;
  margin-block: auto !important;
  border-radius: var(--findbar-border-radius) !important;
  box-sizing: border-box !important;
}

/* ── Shared Match Count & Status Region ("X of Y" / "No results") ───────── */
.findbar-label.found-matches,
.findbar-find-status {
  order: 7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  height: 100% !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--uc-findbar-color) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  opacity: 0.85 !important;
}

/* Hide native status element */
.findbar-find-status {
  display: none !important;
}

/* When matches are actively hidden (empty input), display "No results" via pseudo-element */
.findbar-label.found-matches[hidden] {
  display: inline-flex !important;
  visibility: visible !important;
  font-size: 0 !important; /* Conceal default text node */
}

.findbar-label.found-matches[hidden]::after {
  content: "No results" !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--uc-findbar-color) !important;
  opacity: 0.85 !important;
}

.findbar-highlight { display: none !important; }

/* ── Toggle checkboxes (case / diacritics / whole-word) ─────────────────── */
.findbar-case-sensitive { order: 1 !important; }
.findbar-match-diacritics { order: 2 !important; }
.findbar-entire-word { order: 3 !important; }

.findbar-case-sensitive > .checkbox-check,
.findbar-case-sensitive > .checkbox-label-box,
.findbar-match-diacritics > .checkbox-check,
.findbar-match-diacritics > .checkbox-label-box,
.findbar-entire-word > .checkbox-check,
.findbar-entire-word > .checkbox-label-box {
  display: none !important;
}

.findbar-case-sensitive,
.findbar-match-diacritics,
.findbar-entire-word {
  -moz-appearance: none !important;
  width: 28px !important;
  height: 26px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 999px !important;
  position: relative !important;
  background-color: transparent !important;
  color: var(--uc-findbar-color) !important;
}

.findbar-case-sensitive::before,
.findbar-match-diacritics::before,
.findbar-entire-word::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: currentColor !important;
  mask-size: 85% !important;
  mask-repeat: no-repeat;
  mask-position: center;
}

.findbar-case-sensitive::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='currentColor' d='m7.5 35 8.05 -22h2.65l8.1 22h-2.6l-2.15 -6.05H12.2L10.05 35H7.5Zm5.5 -8.25h7.75L16.9 15.9h-0.1L13 26.75Zm20.3 8.75c-1.7 0 -3.0917 -0.4333 -4.175 -1.3S27.5 32.1667 27.5 30.7c0 -1.5667 0.5917 -2.825 1.775 -3.775C30.4583 25.5 33 25.5 33.9 25.5c0.8667 0 1.675 0.075 2.425 0.225 0.75 0.15 1.3917 0.3583 1.925 0.625v-0.9c0 -1.2667 -0.3417 -2.2417 -1.025 -2.925 -0.6833 -0.6833 -1.675 -1.025 -2.975 -1.025 -0.7667 0 -1.4833 0.1333 -2.15 0.4 -0.6667 0.2667 -1.2833 0.6833 -1.85 1.25l-1.55 -1.4c0.8 -0.7667 1.6333 -1.3333 2.5 -1.7s1.8833 -0.55 3.05 -0.55c2.0667 0 3.625 0.5167 4.675 1.55 1.05 1.0333 1.575 2.5833 1.575 4.65V35h-2.2v-2.1h-0.2c-0.5333 0.8667 -1.2583 1.5167 -2.175 1.95 -0.9167 0.4333 -1.7917 0.65 -2.625 0.65Zm0 -1.9c1.2 0 2.3333 -0.5 3.4 -1.5s1.6 -2.2667 1.6 -3.8c-0.5333 -0.2667 -1.1667 -0.4833 -1.9 -0.65 -0.7333 -0.1667 -1.45 -0.25 -2.15 -0.25 -1.4 0 -2.4917 0.2917 -3.275 0.875 -0.7833 0.5833 -1.175 1.3917 -1.175 2.425 0 0.8667 0.3417 1.5667 1.025 2.1 0.6833 0.5333 1.5083 0.8 2.475 0.8Z'/></svg>");
}

.findbar-match-diacritics::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='currentColor' d='M22.03 33.3c-1.58 0 -2.84 -0.43 -3.8 -1.29 -1.06 -0.86 -1.43 -2.01 -1.43 -3.44 0 -1.58 0.56 -2.85 1.68 -3.82 1.12 -0.97 2.61 -1.46 4.48 -1.46 0.73 0 1.46 0.07 2.17 0.22 0.72 0.15 1.33 0.37 1.84 0.66v-1.1c0 -1.28 -0.35 -2.27 -1.05 -2.97 -0.7 -0.7 -1.69 -1.05 -2.97 -1.05 -0.81 0 -1.54 0.14 -2.2 0.41 -0.66 0.28 -1.28 0.69 -1.87 1.24l-1.6 -1.38c0.77 -0.81 1.61 -1.39 2.53 -1.76 0.92 -0.37 1.96 -0.55 3.14 -0.55 2.05 0 3.61 0.52 4.68 1.57 1.06 1.05 1.6 2.61 1.6 4.7v9.79h-2.2v-2.37h-0.22c-0.51 0.84 -1.17 1.49 -1.98 1.93 -0.81 0.44 -1.74 0.66 -2.81 0.66Zm0.5 -1.98c1.39 0 2.55 -0.5 3.47 -1.51 0.92 -1.01 1.38 -2.26 1.38 -3.77 -0.44 -0.29 -1.0 -0.51 -1.68 -0.66 -0.68 -0.15 -1.37 -0.22 -2.06 -0.22 -1.28 0 -2.3 0.29 -3.05 0.88 -0.75 0.59 -1.13 1.39 -1.13 2.42 0 0.88 0.28 1.58 0.83 2.09 0.55 0.51 1.3 0.77 2.24 0.77ZM25.7 16.25l-2.59 -5.12h-2.75l3.41 5.12H25.7Z'/></svg>");
}

.findbar-entire-word::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='currentColor' d='M2 38.0502v-9.5h3v6.5h38v-6.5h3v9.5H2Zm17.3 -8.1v-2.15h-0.2c-0.4667 0.7667 -1.0667 1.35 -1.8 1.75 -0.7333 0.4 -1.5833 0.6 -2.55 0.6 -1.4333 0 -2.5833 -0.3917 -3.45 -1.175 -0.8667 -0.7833 -1.3 -1.825 -1.3 -3.125 0 -1.4333 0.5083 -2.5917 1.525 -3.475 1.0167 -0.8833 2.375 -1.325 4.075 -1.325 0.6667 0 1.325 0.0667 1.975 0.2 0.65 0.1333 1.2083 0.3333 1.675 0.6v-1c0 -1.1667 -0.3167 -2.0667 -0.95 -2.7 -0.6333 -0.6333 -1.5333 -0.95 -2.7 -0.95 -0.7333 0 -1.4 0.125 -2 0.375 -0.6 0.25 -1.1667 0.625 -1.7 1.125l-1.45 -1.25c0.7 -0.7333 1.4667 -1.2667 2.3 -1.6 0.8333 -0.3333 1.7833 -0.5 2.85 -0.5 1.8667 0 3.2833 0.475 4.25 1.425 0.9667 0.95 1.45 2.375 1.45 4.275v8.9h-2Zm-3.4 -7.15c-1.1667 0 -2.0917 0.2667 -2.775 0.8 -0.6833 0.5333 -1.025 1.2667 -1.025 2.2 0 0.8 0.25 1.4333 0.75 1.9 0.5 0.4667 1.1833 0.7 2.05 0.7 1.2667 0 2.3167 -0.4583 3.15 -1.375 0.8333 -0.9167 1.25 -2.0583 1.25 -3.425 -0.4 -0.2667 -0.9083 -0.4667 -1.525 -0.6 -0.6167 -0.1333 -1.2417 -0.2 -1.875 -0.2Zm9.25 7.15v-20h2v6.65l-0.15 2h0.1c0.4333 -0.6667 1.0833 -1.2167 1.95 -1.65s1.8 -0.65 2.8 -0.65c1.7 0 3.1583 0.65 4.375 1.95 1.2167 1.3 1.825 2.95 1.825 4.95s-0.6 3.6583 -1.8 4.975c-1.2 1.3167 -2.6667 1.975 -4.4 1.975 -0.9667 0 -1.8583 -0.2 -2.675 -0.6 -0.8167 -0.4 -1.4583 -0.9333 -1.925 -1.6h-0.1v2h-2Zm6.3 -11.85c-1.2667 0 -2.325 0.4917 -3.175 1.475 -0.85 0.9833 -1.275 2.2083 -1.275 3.675s0.425 2.675 1.275 3.625c0.85 0.95 1.9083 1.425 3.175 1.425 1.2667 0 2.3333 -0.4833 3.2 -1.45 0.8667 -0.9667 1.3 -2.1833 1.3 -3.65s-0.4333 -2.6833 -1.3 -3.65c-0.8667 -0.9667 -1.9333 -1.45 -3.2 -1.45Z'/></svg>");
}

.findbar-case-sensitive::after,
.findbar-match-diacritics::after,
.findbar-entire-word::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: transparent;
  transition: background 150ms ease;
  pointer-events: none !important;
}

.findbar-case-sensitive:hover::after,
.findbar-match-diacritics:hover::after,
.findbar-entire-word:hover::after {
  background: var(--toolbarbutton-hover-background,
               color-mix(in srgb, currentColor 25%, transparent)) !important;
}

.findbar-case-sensitive[checked],
.findbar-match-diacritics[checked],
.findbar-entire-word[checked] {
  background-color: color-mix(in srgb, var(--uc-findbar-color) 25%, transparent) !important;
  outline: 1px solid color-mix(in srgb, var(--uc-findbar-color) 50%, transparent) !important;
  color: var(--uc-findbar-color) !important;
}