/* ==========================================================================
   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. */
  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; }
}

/* ---- Footnote ----------------------------------------------------------- */
.cp-search-note {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem 1.1rem;
  color: var(--ink-3);
  font-size: var(--step--1);
}

.cp-search-note a { color: var(--ink-2); text-underline-offset: 3px; }
.cp-search-note a:hover { color: var(--ink); }

/* ---- 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;
}