/* Floating Part Finder pill.
   Figma: Wkq6C0DFA2Fwlm0kE7qB4v node 2388:8252.

   SELF-SUFFICIENT, like search.css and for the same reason: this ships inside
   a Webflow Code Component, which renders in a shadow root the marketing
   site's stylesheet cannot cross. Custom properties DO inherit across that
   boundary, so every value is written token-first with the Figma literal as
   the fallback — correct on a page that defines the tokens, and still correct
   on one that does not. */

/* One knob for the panel's enter/exit. PANEL_MS in PartFinderPill.tsx must
   match it — the exit is a CSS transition and a JS timer keeps the panel
   mounted for exactly as long as it runs. */
.pfp {
  --dur-panel: 220ms;
  --pfp-inset: 1rem;

  position: fixed;
  right: var(--spacing--24px, 1.5rem);
  bottom: var(--spacing--24px, 1.5rem);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing--12px, 0.75rem);

  /* Hidden until the reader has scrolled past the page's own finder, then
     faded UP into place. `visibility` rather than `display` so the transition
     has something to run on, and it is in the transition list with a delay so
     it flips at the END of the fade out and at the START of the fade in. */
  opacity: 0;
  transform: translateY(var(--nudge, 0.75rem));
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s linear var(--dur-3, 320ms);
}
.pfp--revealed {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s;
}

/* Open, the wrapper stops being a bottom-right anchor and becomes a dock. It
   is inset rather than full-bleed: a panel bleeding into both viewport edges
   read as a broken page rather than as a floating finder. */
.pfp--open {
  left: var(--pfp-inset);
  right: var(--pfp-inset);
  bottom: var(--pfp-inset);
  align-items: stretch;
  gap: 0;
}

/* ── Collapsed pill ─────────────────────────────────────────── */
.pfp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--16px, 1rem);
  min-width: 14.3125rem; /* 229px, the Figma width */
  padding: 1rem 1rem 1rem 0.75rem; /* 16 / 16 / 16 / 12 */
  background: var(--color--red, #db192a);
  color: var(--color--white, #fff);
  border: none;
  border-radius: 999px;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-family: var(--font--body, Poppins, sans-serif);
  text-align: left;
}
.pfp-btn-left {
  display: flex;
  align-items: center;
  gap: var(--spacing--8px, 0.5rem);
}
.pfp-icon,
.pfp-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  flex: 0 0 auto;
}
.pfp-icon {
  border-radius: var(--radius--6px, 0.375rem);
}
.pfp-chev {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
}
/* The SVGs carry no width/height attributes — those would be px, and the root
   steps up above 2560px (see CLAUDE.md), so a px icon stops scaling with the
   label beside it. Sized here in rem instead; `display: block` kills the inline-baseline gap
   underneath. 0.875rem is --spacing--14px, the Figma glyph size. */
.pfp-icon svg,
.pfp-chev svg {
  display: block;
  width: var(--spacing--14px, 0.875rem);
  height: var(--spacing--14px, 0.875rem);
}

/* Figma flips the chevron to point up while collapsed; it points down once the
   panel is open, so the glyph always indicates where the panel will go. */
.pfp-chev svg {
  transform: rotate(180deg);
}
.pfp-chev--up svg {
  transform: none;
}
.pfp-label {
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--weight--semibold, 600);
  font-style: italic;
  line-height: normal;
  white-space: nowrap;
}

/* No transform on hover or press. docs/MOTION_SYSTEM.md is explicit that
   controls get no lift, no compression and no entrance animation — the pill is
   a control, so it shifts colour only. */
@media (hover: hover) {
  .pfp-btn:hover {
    background: var(--color--red-dark, #b31423);
  }
}
.pfp-btn:focus-visible {
  outline: 2px solid var(--color--white, #fff);
  outline-offset: 2px;
}

/* The pill gets out of the way while the finder is up — the panel carries its
   own close control, so leaving a second one floating over it is redundant.
   It comes back only once the panel has finished leaving, because .pfp--open
   is removed at the end of the exit, not at the start. */
.pfp--open .pfp-btn {
  /* Out of flow, not merely invisible. `visibility: hidden` alone still
     reserves the pill's 56px row, which pushed the panel that far up off the
     bottom inset and read as a stray gap. Absolute at the dock's bottom-right
     is exactly where it already sat, so it fades out in place. */
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s linear var(--dur-2, 180ms);
}
.pfp-btn {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    background-color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s;
}

/* ── Expanded panel ─────────────────────────────────────────── */
/* Deliberately chrome-less: no background, border, radius, shadow or padding.
   The bar inside brings its own card, and wrapping it in a second one produced
   a box inside a box. The panel is now only a full-width positioning shell. */
.pfp-panel {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;

  /* NOT `overflow-y: auto`. A scroll container clips its children, and the
     thing being clipped here is the field dropdown — the exact overflow this
     panel is meant to stop. The bar is short (it renders with showResults
     false), so it does not need to scroll; the short-viewport case is handled
     at the bottom of this file. */
  overflow: visible;
}

/* Enter AND exit, so closing is as smooth as opening. A transition, not an
   animation: a keyframe animation only plays on the way in, which is what the
   previous version did and why closing was an instant cut. */
.pfp-panel {
  opacity: 0;
  transform: translateY(var(--nudge, 0.75rem));
  transition:
    opacity var(--dur-panel) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-panel) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}
.pfp-panel--in {
  opacity: 1;
  transform: none;
}

/* The panel holds the real bar, so it inherits every finder style already.
   The card keeps its shadow here: inset from the viewport edges it reads as a
   floating surface, and without one it looked pasted onto the page. */
.pfp-panel .pf {
  gap: var(--spacing--16px, 1rem);
}

/* ── Close control ──────────────────────────────────────────── */
/* Sits at the panel's top-right, level with the tab strip. The strip is given
   room for it below so a tab can never end up underneath. */
.pfp-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  padding: 0;
  background: var(--color--white, #fff);
  color: var(--color--text-muted, #5a6472);
  border: var(--border--1px, 1px) solid #e3e7ec;
  border-radius: 9999px;
  box-shadow: 0 0.25rem 1rem rgba(13, 31, 56, 0.18);
  cursor: pointer;
}
@media (hover: hover) {
  .pfp-close:hover {
    color: var(--color--red, #db192a);
    border-color: var(--color--red, #db192a);
  }
}
/* 1rem glyph (--spacing--16px) in the 2.25rem button, sized here rather than by
   px attributes on the SVG — same reason as the pill icons above. */
.pfp-close svg {
  display: block;
  width: var(--spacing--16px, 1rem);
  height: var(--spacing--16px, 1rem);
}
.pfp-close:focus-visible {
  outline: 2px solid var(--color--blue, #1c5296);
  outline-offset: 2px;
}
.pfp-close {
  transition:
    color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    border-color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}
/* Keep the tab strip clear of the close button. */
.pfp-panel .pf-tabs {
  padding-right: 2.75rem;
}
/* Resting tabs over a dark backdrop. The panel is fixed and the page scrolls
   under it, so PartFinderPill.tsx reads what is behind each tab (photos by
   their pixels) and sets data-pfp-tone="dark" on that tab; over light the
   search.css default (muted ink) applies. Same values as .pf--on-dark, but only for the resting tabs: the
   active tab stays the blue block on any background. Tried and dropped
   (2026-11-03, Leandro): a white block behind each resting tab, which read
   as broken over navy, and a tone-matched gradient behind the row, which
   looked worse than the busy content it was meant to calm. */
.pfp-panel .pf-tab[data-pfp-tone="dark"]:not(.pf-tab--active) {
  color: rgba(245, 246, 249, 0.7);
}
@media (hover: hover) {
  .pfp-panel .pf-tab[data-pfp-tone="dark"]:not(.pf-tab--active):hover {
    color: rgba(245, 246, 249, 1);
  }
}/* That padding keeps Cross Reference off the card's corner, so the square
   join the full-width mobile strip needs does not apply here. */
.pfp-panel .pf-bar-card--x {
  border-top-right-radius: var(--radius--12px);
}

@media (prefers-reduced-motion: reduce) {
  .pfp,
  .pfp-panel,
  .pfp-btn,
  .pfp-close {
    transition: none;
  }
  .pfp,
  .pfp-panel {
    transform: none;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .pfp {
    right: var(--spacing--16px, 1rem);
    bottom: var(--spacing--16px, 1rem);
    left: var(--spacing--16px, 1rem);
    align-items: stretch;
  }
  .pfp-btn {
    min-width: 0;
    width: 100%;
  }
}

/* ── Ask Shop Masters ───────────────────────────────────────── */
/* The chat launcher's iframe is fixed 24px from the bottom-right at 200x60,
   in px set by its own script, so the clearance is written in the same px
   (plus the usual 12px gap) and holds at every root size. After the mobile
   rule so it also lifts the full-width phone pill. Open, the panel docks as
   before and the launcher is hidden by PartFinderPill.tsx instead. */
.pfp--above-chat:not(.pfp--open) {
  bottom: calc(24px + 60px + var(--spacing--12px, 0.75rem));
}

/* ── Short viewports ────────────────────────────────────────── */
/* The only case where the bar can genuinely outgrow the screen: five stacked
   fields on a short phone. Scrolling is reintroduced only here, and only
   because being unable to reach the Find Parts button is worse than a clipped
   dropdown — which the `pf-menu--up` flip already mitigates by opening the
   menu into the space above. `dvh` so the mobile URL bar does not steal room
   that `vh` would insist is still there. */
@media screen and (max-height: 46rem) {
  .pfp-panel {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
  }
}