/* ----------------------------------------------------------------------------
 * Converter-search replica (2026-10-05). Markup: RCS_Snippets::convui() /
 * converter_search_mockup() in setup/lib/snippets.php. Hydration + motion:
 * assets/js/rcs-convui.js. Loaded after rcs-animations.css (it builds on
 * .rcs-phone / .rcs-phone__screen--app from there).
 *
 * A rebuild of the app's Part # search screen in dark mode (the app's default
 * theme). Geometry comes from the MUI source on the app repo's origin/main
 * (ConvertersPage, ConverterSearchBar, ConverterCard, BaseLayout, theme.ts);
 * colours were sampled from the real Pixel 7 capture (app-part-search-phone.png,
 * media 215): bar + input #161616, page #0C0C0C, card #202020, price #66BB6A,
 * part number #0B5ACC. In dark mode MUI paints the AppBar with the paper
 * colour, which is why the bar is not blue.
 *
 * Sizing: everything is in --dp, one Android dp on a 412dp-wide Pixel 7,
 * resolved against the replica's own width, so the screen scales as one
 * picture at any phone size.
 * -------------------------------------------------------------------------- */
.rcs-phone__screen--app:has(> .rcs-convui) { background: #0C0C0C; }
.rcs-convui {
  --dp: calc(100cqw / 412);
  container-type: inline-size;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #0C0C0C;
  color: #F5F7FA;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  text-align: left;
  letter-spacing: normal;
  line-height: 1.2;
  user-select: none;
}
.rcs-convui__icon { display: block; width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); flex-shrink: 0; }

/* App bar: 56dp toolbar + the search slot the page portals into it. */
.rcs-convui__bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  background: #161616;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
}
.rcs-convui__toolbar { height: calc(56 * var(--dp)); display: flex; align-items: center; padding-left: calc(16 * var(--dp)); }
.rcs-convui__slot { display: flex; flex-direction: column; gap: calc(8 * var(--dp)); padding: 0 calc(12 * var(--dp)) calc(8 * var(--dp)); }
.rcs-convui__modes { display: flex; }
.rcs-convui__mode {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(24 * var(--dp));
  margin-left: -1px;
  border: 1px solid rgba(255,255,255,0.3);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(13 * var(--dp));
  color: #FFFFFF;
  white-space: nowrap;
}
.rcs-convui__mode:first-child { margin-left: 0; }
.rcs-convui__mode.is-selected { background: rgba(255,255,255,0.25); }
.rcs-convui__search {
  height: calc(40 * var(--dp));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--dp));
  padding: 0 calc(14 * var(--dp));
  background: #161616;
}
.rcs-convui__search .rcs-convui__icon { width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); color: rgba(255,255,255,0.56); }
.rcs-convui__search .rcs-convui__icon--clear { color: #FFFFFF; }
.rcs-convui__query { flex: 1; font-size: calc(16 * var(--dp)); color: #F5F7FA; }

/* Results: padded past the 136dp bar + 16dp; the card spans 16dp to 380dp. */
.rcs-convui__results { position: absolute; inset: calc(152 * var(--dp)) calc(32 * var(--dp)) 0 calc(16 * var(--dp)); }
.rcs-convui__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(8 * var(--dp));
  margin-bottom: calc(16 * var(--dp));
  font-size: calc(14 * var(--dp));
  color: #A8B4C8;
}
.rcs-convui__layout { display: flex; }
.rcs-convui__layout > span {
  display: flex;
  margin-left: -1px;
  padding: calc(4 * var(--dp)) calc(7 * var(--dp));
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
.rcs-convui__layout > span.is-selected { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.rcs-convui__layout .rcs-convui__icon { width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); }

/* ConverterCard. */
.rcs-convui__card {
  display: flex;
  flex-direction: column;
  min-height: calc(300 * var(--dp));
  border: 3px solid rgba(255,255,255,0.35);
  background: #202020;
}
.rcs-convui__media { position: relative; margin: calc(8 * var(--dp)) calc(8 * var(--dp)) 0; aspect-ratio: 5 / 3; background: #000; overflow: hidden; }
.rcs-convui__watermark {
  position: absolute;
  inset: -30%;
  background-repeat: repeat;
  background-size: calc(84 * var(--dp));
  transform: rotate(-52deg);
  opacity: 0.12;
  pointer-events: none;
}
/* `.rcs-convui img.` outranks Elementor's `.elementor img { height: auto; border: none }`. */
.rcs-convui img.rcs-convui__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  opacity: 0;
  transition: opacity 300ms ease;
}
.rcs-convui img.rcs-convui__slide.is-active { opacity: 1; }
.rcs-convui__count {
  position: absolute;
  top: calc(6 * var(--dp));
  right: calc(6 * var(--dp));
  z-index: 2;
  height: calc(20 * var(--dp));
  display: flex;
  align-items: center;
  padding: 0 calc(6 * var(--dp));
  border-radius: calc(10 * var(--dp));
  background: rgba(0,0,0,0.6);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: calc(10.4 * var(--dp));
  letter-spacing: 0.16em;
  white-space: pre;
  color: #FFFFFF;
}
.rcs-convui__thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(6 * var(--dp));
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(4 * var(--dp));
}
.rcs-convui img.rcs-convui__thumb {
  width: calc(32 * var(--dp));
  height: calc(32 * var(--dp));
  object-fit: cover;
  background: #000;
  border: 2px solid rgba(255,255,255,0.35);
  opacity: 0.65;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.rcs-convui img.rcs-convui__thumb.is-active { border-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); opacity: 1; }
.rcs-convui__content { flex: 1; display: flex; flex-direction: column; padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(24 * var(--dp)); }
.rcs-convui__title { display: flex; align-items: center; justify-content: space-between; }
.rcs-convui__title .rcs-convui__icon,
.rcs-convui__foot .rcs-convui__icon { margin-right: calc(5 * var(--dp)); }
.rcs-convui__pn { font-weight: 700; font-size: calc(24 * var(--dp)); line-height: 1.2; color: #0B5ACC; }
.rcs-convui__mfr { margin-bottom: calc(8 * var(--dp)); font-weight: 500; font-size: calc(14 * var(--dp)); text-transform: uppercase; }
.rcs-convui__foot { margin-top: auto; padding-top: calc(16 * var(--dp)); display: flex; align-items: center; justify-content: space-between; }
.rcs-convui__price { font-weight: 700; font-size: calc(20 * var(--dp)); color: #66BB6A; font-variant-numeric: tabular-nums; }

/* Filter FAB: the app shows it on phones only, so it belongs in a phone replica. */
.rcs-convui__fab {
  position: absolute;
  right: calc(16 * var(--dp));
  bottom: calc(16 * var(--dp));
  width: calc(48 * var(--dp));
  height: calc(48 * var(--dp));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0B5ACC;
  color: #FFFFFF;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);
}

/* ----------------------------------------------------------------------------
 * 3D phone. The resting pose turns the screen toward the copy column;
 * rcs-convui.js eases --rx/--ry toward the pointer and slides the glare with
 * it. The bob sits on its own wrapper so the two transforms compose instead of
 * overwriting each other. The edge plates stacked behind the phone give it
 * thickness once it turns.
 * -------------------------------------------------------------------------- */
.rcs-phone3d { position: relative; perspective: 1100px; padding: 8px 0 36px; }
.rcs-phone3d__bob { transform-style: preserve-3d; animation: rcs-phone3d-bob 6s ease-in-out infinite; }
.rcs-phone3d__tilt {
  --rx: 5deg;
  --ry: -18deg;
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
}
@media (min-width: 768px)  { .rcs-phone3d__tilt { max-width: 300px; } }
@media (min-width: 1024px) { .rcs-phone3d__tilt { max-width: 320px; } }
@media (max-width: 480px)  { .rcs-phone3d__tilt { max-width: 260px; } }
.rcs-phone3d__tilt > .rcs-phone { position: relative; max-width: none; transform: translateZ(0); }
/* Softer than the site-wide .rcs-phone__frame glow (0 0 60px @ 0.35): the 3D
   body reads as the object here, so the halo only needs to hint at it. */
.rcs-phone3d .rcs-phone__frame { box-shadow: 0 0 36px rgba(43,127,255,0.14); }
.rcs-phone3d__edge {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  border: 1px solid #2a3344;
  background: #05070b;
  transform: translateZ(var(--z));
}
.rcs-phone3d__glare {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  transform: translateZ(1px);
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.07) 47%, rgba(255,255,255,0) 60%);
  background-size: 260% 100%;
  background-position: var(--gp, 60%) 0;
}
.rcs-phone3d__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 34px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(43,127,255,0.38) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 72%);
  filter: blur(8px);
  animation: rcs-phone3d-shadow 6s ease-in-out infinite;
}
@keyframes rcs-phone3d-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes rcs-phone3d-shadow {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1; }
  50%      { transform: translateX(-50%) scale(0.86); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .rcs-phone3d__bob,
  .rcs-phone3d__shadow { animation: none; }
  .rcs-convui img.rcs-convui__slide { transition: none; }
}