/* ============================================================================
 * bb-ecom.css — Ecommerce Tracking Services page
 * Scope: /ecommerce-tracking-services/ ONLY
 * Load order: globals.css > bb-pillar.css > Additional.css > bb-ecom.css
 *
 * RULE COMPLIANCE
 *   - All shared components (hero, flow, diag, conseq, attrib, process,
 *     platform-grid, audit, unlock, server-compare, pricing, proof, faq,
 *     related, final) live in bb-pillar.css and are NOT redeclared here.
 *   - bb-ct-platform-grid is already migrated to bb-pillar.css (confirmed).
 *   - This file contains ONLY net-new, page-specific styling that does not
 *     exist anywhere in the shared library.
 *
 * enqueue (functions.php):
 *   1. Add 'ecommerce-tracking-services' to the bb-pillar $pages array.
 *   2. Add a page-specific enqueue function for bb-ecom on that slug only.
 *      Do NOT use bb-ecom as a dependency handle of any other page.
 * ========================================================================== */


/* ═══════════════════════════════════════════════════════════
   S1 — HERO: ECOMMERCE EVENT PIPELINE
   The hero reuses bb-page-hero + bb-flow-track. These rules add only
   the pipeline-specific node states and the output-chip row.
═══════════════════════════════════════════════════════════ */

/* Right-column visual wrapper inside the hero */
.bb-ecom-hero-visual {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

/* Pipeline inside dark hero — flow-track normally sits on light sections.
   Re-tone the step cards for the #000 hero only (scoped to .bb-ecom-pipe). */
.bb-ecom-pipe .bb-flow-step {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.bb-ecom-pipe .bb-flow-step-title {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin-top: 8px;
}
.bb-ecom-pipe .bb-flow-step p { /* safety: no body copy in hero steps */
  display: none !important;
}

/* Ghost / "often lost" node — the visual seed of the hook */
.bb-flow-step--ghost {
  border-style: dashed !important;
  opacity: 0.62;
  position: relative;
}
.bb-flow-step--ghost .bb-flow-node {
  background: transparent !important;
  border: 1.5px dashed rgba(255,106,0,0.6) !important;
  color: rgba(255,106,0,0.8) !important;
}
.bb-ecom-warn-dot {
  position: absolute;
  top: 12px; right: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FF6A00;
  box-shadow: 0 0 0 4px rgba(255,106,0,0.18);
}

/* Purchase node — the revenue endpoint, emphasised */
.bb-flow-step--purchase {
  border-color: rgba(255,106,0,0.45) !important;
  background: rgba(255,106,0,0.08) !important;
}
.bb-ecom-data-tag {
  margin-top: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FF6A00;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Output chip row: GA4 / Google Ads / Meta */
.bb-ecom-pipe-out {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: 4px;
}
.bb-ecom-pipe-chip {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 7px 16px;
}


/* ═══════════════════════════════════════════════════════════
   S3 — SELF-DIAGNOSIS: counter alert state + message
   bb-diag-* is shared. This adds only the alert-state styling
   and the counter message paragraph, which are page-new.
═══════════════════════════════════════════════════════════ */
.bb-diag-counter-msg {
  font-size: 0.9rem;
  color: #4F5B68;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}
#bb-ecom-counter.is-alert {
  border-color: rgba(255,106,0,0.4) !important;
  background: #fef8f3 !important;
}
#bb-ecom-counter.is-alert .bb-diag-proof-num {
  color: #FF6A00 !important;
}
#bb-ecom-counter.is-alert .bb-diag-counter-msg {
  color: #1A1A1A;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   S4 — CONSEQUENCES: tension line, sting line, caption
   bb-conseq-grid / bb-ct-attrib-strip are shared. These three
   text elements are page-specific framing additions.
═══════════════════════════════════════════════════════════ */
.bb-conseq-tension {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 500;
}
.bb-conseq-sting {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255,106,0,0.25);
  color: #FF6A00 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}
.bb-conseq-caption {
  margin-top: 18px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7) !important;
  text-align: center;
  font-style: italic;
}

/* Attribution strip broken/dim node states — only if not already
   present in the migrated bb-pillar.css. Safe scoped additions. */
.bb-ct-attrib-node--broken {
  border-color: #FF6A00 !important;
  color: #FF6A00 !important;
  position: relative;
}
.bb-ct-attrib-node--broken::after {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF6A00;
}
.bb-ct-attrib-node--dim {
  opacity: 0.45;
}


/* ═══════════════════════════════════════════════════════════
   S7 — MID-PAGE CTA: audit sub-line + grid (if bb-audit-grid not shared)
   bb-audit, bb-dark-form, bb-audit-form-inner, bb-audit-micro-cta are shared.
═══════════════════════════════════════════════════════════ */
.bb-audit-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 6px;
}
/* Only declare bb-audit-grid here if it is NOT already in bb-pillar.css.
   If the shared library already provides the 2-col audit layout, DELETE
   this block at build time to avoid a duplicate declaration. */
.bb-audit-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}


/* ═══════════════════════════════════════════════════════════
   S8 — DELIVERABLES: outcome headline inside unlock items
   bb-unlock-grid / item / icon are shared. Items here use a <strong>
   benefit headline followed by supporting text. This styles that pattern
   only if the shared item does not already format a leading <strong>.
═══════════════════════════════════════════════════════════ */
.bb-unlock-item strong {
  display: block;
  color: #1A1A1A;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════════
   S10 — PRICING: value-anchor line + 2-card grid override
   bb-pricing-grid defaults to 3 cols. This page uses 2.
═══════════════════════════════════════════════════════════ */
.bb-pricing-anchor {
  max-width: 820px;
  margin: 8px 0 8px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4F5B68;
}
.bb-pricing-anchor strong { color: #1A1A1A; font-weight: 700; }

.bb-pricing-grid--2 {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* bb-pricing-desc is shared (bb-pricing-tier/desc migrated). If absent,
   this provides the card sub-description. Delete if duplicate at build. */
.bb-pricing-desc {
  font-size: 0.86rem !important;
  color: #4F5B68 !important;
  line-height: 1.6 !important;
  margin: 10px 0 14px !important;
}


/* ═══════════════════════════════════════════════════════════
   S11 — PROOF: case quote attribution line
   bb-case-quote is shared; the attribution line below it is page-new.
═══════════════════════════════════════════════════════════ */
.bb-case-quote-attr {
  display: block;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #FF6A00 !important;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bb-ecom-pipe { grid-template-columns: repeat(2, 1fr) !important; }
  .bb-audit-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bb-pricing-grid--2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .bb-ecom-pipe { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bb-ecom-pipe-out { gap: 8px; }
  .bb-conseq-tension { font-size: 0.94rem; }
}

/* ═══════════════════════════════════════════════════════════
   PROOF: 2-col cases grid override + testimonial strip
   Added May 2026 alongside section fixes
═══════════════════════════════════════════════════════════ */

/* Force 2-col grid on proof section — prevent empty 3rd slot */
.bb-proof .bb-cases-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Testimonial strip — 3 cards in a row below case studies */
.bb-ecom-testimonial-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.bb-ecom-testimonial-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.bb-ecom-testimonial-text {
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.8) !important;
  font-style: italic !important;
  margin: 0 !important;
  flex: 1 !important;
}

.bb-ecom-testimonial-attr {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FF6A00 !important;
}

/* Related card text overrides on dark bg */
.bb-related .bb-related-card h3 {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 10px 0 12px !important;
  line-height: 1.3 !important;
}

.bb-related .bb-related-card p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
  flex: 1 !important;
  margin-bottom: 18px !important;
}

.bb-related .bb-related-card .bb-case-pill {
  color: #FF6A00 !important;
  background: rgba(255,106,0,0.1) !important;
  border: 1px solid rgba(255,106,0,0.2) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-bottom: 12px !important;
}

/* NOTE: DELETE bb-pricing-grid--2 rule from this file.
   Pricing now uses 3 cards — standard bb-pricing-grid applies. */

@media (max-width: 900px) {
  .bb-ecom-testimonial-strip { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .bb-proof .bb-cases-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   PLATFORM COVERAGE — bb-ct-platform-* classes
   These live in bb-ct.css which does NOT load on this page.
   Copy the exact rules here so they work without bb-ct dependency.
   3-col grid for this page (CT page uses 5-col for 5 platforms).
═══════════════════════════════════════════════════════════ */

.bb-ct-platform-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 32px !important;
  margin-bottom: 28px !important;
}

.bb-ct-platform-card {
  background: #ffffff !important;
  border: 1px solid #E2E5EC !important;
  border-top: 3px solid #E2E5EC !important;
  border-radius: 0 0 10px 10px !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.bb-ct-platform-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

.bb-ct-platform-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #FF6A00 !important;
}

.bb-ct-platform-signal {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #9CA3AF !important;
}

.bb-ct-platform-card p {
  font-size: 0.84rem !important;
  color: #4F5B68 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.bb-ct-platform-card p strong { color: #111827 !important; }

.bb-ct-platform-link {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #FF6A00 !important;
  text-decoration: none !important;
  margin-top: auto !important;
}

.bb-ct-platform-link:hover { text-decoration: underline !important; }


/* ═══════════════════════════════════════════════════════════
   SERVER-SIDE DECISION — panel content styling
   bb-server-compare and bb-server-panel are in bb-pillar.css.
   These additions handle the ul/li list content inside panels
   and the explainer-label used as a heading style inside panels.
═══════════════════════════════════════════════════════════ */

.bb-server-panel .bb-explainer-label {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #6B7280 !important;
  margin-bottom: 16px !important;
}

.bb-server-panel--clean .bb-explainer-label {
  color: #FF6A00 !important;
}

.bb-server-panel ul {
  margin: 0 0 16px !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.bb-server-panel ul li {
  font-size: 0.84rem !important;
  color: #4F5B68 !important;
  line-height: 1.55 !important;
  padding-left: 16px !important;
  position: relative !important;
}

.bb-server-panel ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #D1D5DB !important;
}

.bb-server-panel--clean ul li::before {
  background: rgba(255,106,0,0.5) !important;
}

.bb-server-panel p {
  font-size: 0.84rem !important;
  color: #4F5B68 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.bb-server-panel p strong { color: #111827 !important; }

.bb-server-panel--clean p strong { color: #C2410C !important; }

/* Dec-strip on this page uses a single full-width block, not the 3-col grid.
   Override the shared 3-col layout to single block. */
.bb-server-dec-strip {
  grid-template-columns: 1fr !important;
  margin-top: 28px !important;
}

.bb-server-dec-block {
  background: #fff8f2 !important;
  border: 1px solid rgba(255,106,0,0.15) !important;
  border-left: 3px solid #FF6A00 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 20px 24px !important;
}

.bb-server-dec-block p {
  font-size: 0.9rem !important;
  color: #374151 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.bb-final-inner { max-width: 750px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .bb-ct-platform-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .bb-ct-platform-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
 
  /* Hide SVG arrows — they don't make sense in a grid layout */
  .bb-problem-pillar .bb-ct-attrib-strip svg {
    display: none !important;
  }
 
  /* Nodes fill their grid cell */
  .bb-problem-pillar .bb-ct-attrib-node {
    width: 100% !important;
    padding: 10px 12px !important;
  }
 
  .bb-problem-pillar .bb-ct-attrib-num {
    font-size: 0.88rem !important;
  }
 
  .bb-problem-pillar .bb-ct-attrib-platform {
    font-size: 0.6rem !important;
  }
 
  /* Caption below strip */
  .bb-problem-pillar .bb-ct-attrib-caption {
    font-size: 0.78rem !important;
    margin-top: 6px !important;
  }
}