/* ==========================================================================
   parts-search.css — the live Car-Part.com inventory search panel.

   The proxied search page is light-themed (black text, light background) and
   we can't restyle its internals, so rather than fight it we seat it in a
   deliberate "paper" panel. Reads as an intentional instrument on the dark
   page instead of a foreign iframe.
   ========================================================================== */

.cp-search {
  position: relative;
  /* Car-Part's form is a fixed ~375px table. Left full-width it strands the
     control in a huge empty slab, so the panel hugs it instead.

     `width: 100%` is load-bearing: inside a grid/flex parent, `margin-inline:
     auto` wins over `justify-self: stretch` and the panel would shrink-wrap to
     the iframe's default 300px intrinsic width — narrower than the 375px form,
     which then gets clipped. */
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  overflow: hidden;
  isolation: isolate;
}

/* Thin accent rule along the top edge — ties the panel to the brand. */
.cp-search::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-600) 55%, var(--gold) 100%);
  z-index: 2;
}

.cp-search__frame {
  display: block;
  width: 100%;
  /* Replaced by the auto-fit script once the document reports its height.
     Generous default so the form is usable even if that script never runs. */
  height: 620px;
  border: 0;
  background: var(--paper-2);
}

/* ---- Loading state ------------------------------------------------------ */
.cp-search__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .9rem;
  background: var(--paper-2);
  color: var(--paper-ink-2);
  font: 500 var(--step--1) / 1.5 var(--font-body);
  z-index: 3;
  transition: opacity .35s ease, visibility .35s ease;
}

.cp-search.is-ready .cp-search__loading {
  opacity: 0;
  visibility: hidden;
}

.cp-search__spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(14, 20, 24, .14);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cp-spin .8s linear infinite;
}

@keyframes cp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cp-search__spinner { animation-duration: 2.4s; }
}

/* ---- Fallback: only shown if the embed cannot render -------------------- */
.cp-search-fallback {
  display: none;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}

.cp-search.is-blocked .cp-search__frame,
.cp-search.is-blocked .cp-search__loading { display: none; }
.cp-search.is-blocked .cp-search-fallback { display: block; }

.cp-search-fallback h3 { color: var(--paper-ink); margin-bottom: .5rem; }
.cp-search-fallback p { color: var(--paper-ink-2); margin-bottom: 1.2rem; }

/* Category chips used purely as navigation now that there is no fake grid. */
.cat-chips--center {
  justify-content: center;
}

/* ── Parts page: hero and search read as one block ──────────────────────────
   The default .page-hero sits on --bg-2 with a bottom border, which drew a
   visible seam and a light-to-dark step between the title and the search.
   Scoped here because parts-search.css only loads on the parts page. */
.page-hero {
  background: transparent;
  border-bottom: 0;
}
/* Heading copy now lives in the hero, so the search needs less air above it. */
#live-search {
  padding-block-start: clamp(.5rem, 1.5vw, 1.2rem);
}