/* Boot Buddy Journey, G3: product page opening proof, links to the details tabs, tab headings, vehicle video,
   staff preview banner and the FAQ guarantee panel (pages that host a route). */

/* Opening: Trustpilot rating and delivery times (V2 p12). */
.bbj-pp__proof { display: grid; gap: 10px; margin: 0 0 16px; }
.bbj-pp__tp { max-width: 300px; min-height: 24px; }
.bbj-pp__tp .trustpilot-widget > a { color: #191919; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bbj-pp__delivery { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 0.92rem; line-height: 1.45; color: #1d1d1d; }
.bbj-pp__delivery-icon { flex: none; color: #e94c00; margin-top: 2px; }

/* Links from the steps to the details tabs (V2 p19). */
.bbj-pp__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid #e5e5e5; font-size: 0.92rem; color: #5f5f5f; }
.bbj-pp__more a, .bbj-pp__fitlink a { color: #c43f00; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bbj-pp__more a:hover, .bbj-pp__more a:focus-visible, .bbj-pp__fitlink a:hover { color: #111; }
.bbj-pp__fitlink { margin: 12px 0 0; }

/* Tab headings (V2 p19 "clear headings"). */
.bbj-pp__tabhead { font-size: 1.35rem; font-weight: 800; color: #111; margin: 4px 0 6px; }
.bbj-pp__tabline { color: #5f5f5f; margin: 0 0 14px; }

/* Click-to-load video (vehicle content). */
.bbj-video { position: relative; margin: 16px 0 0; max-width: 720px; aspect-ratio: 16 / 9; background: #111; border-radius: 4px; overflow: hidden; }
.bbj-video iframe, .bbj-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bbj-video__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: #fff !important; text-decoration: none !important; text-align: center; background: radial-gradient(circle at 50% 45%, #2b2b2b 0, #111 70%); }
.bbj-video__icon { width: 68px; height: 68px; border-radius: 50%; background: #e94c00; position: relative; transition: transform 0.15s ease, background 0.15s ease; }
.bbj-video__icon::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.bbj-video__play:hover .bbj-video__icon, .bbj-video__play:focus-visible .bbj-video__icon { background: #c43f00; transform: scale(1.06); }
.bbj-video__play:focus-visible { outline: 3px solid #e94c00; outline-offset: -3px; }
.bbj-video__label { font-weight: 700; font-size: 1.05rem; }
.bbj-video__note { font-size: 0.8rem; color: #cfcfcf; }

/* Staff preview of draft vehicle content. */
.bbj-pp__preview { position: sticky; top: 0; z-index: 50; margin: 0 0 12px; padding: 10px 16px; background: #fff4d6; border: 2px solid #dba617; color: #1d1d1d; font-size: 0.95rem; }

/* FAQ benefit panel (V2 p19): the theme pulls the 100% badge up with a negative bottom margin, so the guarantee answer
   ran past the orange background and the badge sat over the next heading (also on live). Inside the tab the column
   grows with its content and the badge sits inside the orange area. */
.bbj-pp__tabpanel .fl-col-content > .fl-module-photo:last-child:not(:first-child),
.bbj-pp__tabpanel .fl-module-photo:has(img[src*="satisfaction"]) { margin-bottom: 0 !important; top: auto !important; bottom: auto !important; }
.bbj-pp__tabpanel .fl-module-photo:has(img[src*="satisfaction"]) img { max-width: 150px; height: auto; }
.bbj-pp__tabpanel .fl-row-content-wrap, .bbj-pp__tabpanel .fl-col-content { min-height: 0; }

@media (max-width: 767px) {
  .bbj-pp__proof { margin-bottom: 12px; }
  .bbj-pp__more { gap: 4px 14px; }
  .bbj-pp__more > span { flex-basis: 100%; }
  .bbj-pp__more a { display: inline-block; padding: 8px 0; }
  .bbj-video__icon { width: 56px; height: 56px; }
  .bbj-video__icon::after { left: 22px; top: 17px; border-width: 11px 0 11px 18px; }
}
@media (prefers-reduced-motion: reduce) { .bbj-video__icon { transition: none; } }