/* ============================================================
   Barcode Info product page
   Layout comes from cw.css (the shared app-page components:
   .cw-hero, .cw-store-row, .cw-shots, .cw-disclaimer, .apps-showcase);
   this file only re-tints them for the scanner's teal and adds the
   symbology chips.
   ============================================================ */

/* Ambient orbs in the app's colors: deep teal, near-black green, scanner glow */
.bi-page .ai-orb-1 { background: #0e6f63; }
.bi-page .ai-orb-2 { background: #06222a; opacity: 0.9; }
.bi-page .ai-orb-3 { background: #2fbfa8; opacity: 0.28; }

.bi-page .cw-badge:hover img {
    filter: drop-shadow(0 10px 24px rgba(47, 191, 168, 0.4));
}

.bi-page .cw-hero-stage::before {
    background: radial-gradient(circle, rgba(47, 191, 168, 0.28), rgba(6, 34, 42, 0.4) 45%, transparent 70%);
}

.bi-page .app-promo:hover,
.bi-page .apps-showcase-shot:hover img {
    border-color: rgba(47, 191, 168, 0.55);
}

/* ---------- Symbology chips (hero) ----------
   The codes the scanner reads, in the app's own monospace treatment. */
.bi-code-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Hero rhythm. The proof line, the chip row and the blog teaser are three
   separate thoughts, and cw.css gives the proof line no bottom margin — with
   eight symbologies wrapping onto two rows they otherwise read as one block.
   In px, like the cw.css rules they sit between: the phone breakpoint halves
   the root, and this spacing should not halve with it. */
.bi-page .cw-proof-note { margin-bottom: 20px; }

.bi-page .bi-code-row { row-gap: 0.85rem; }

.bi-page .cw-blog-teaser { margin-top: 26px; }

.bi-code {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bi-code::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--bi-dot);
    box-shadow: 0 0 12px var(--bi-dot);
}

.bi-code--ean  { --bi-dot: #2fbfa8; }
.bi-code--upc  { --bi-dot: #57d3bd; }
.bi-code--itf  { --bi-dot: #3f9ad8; }
.bi-code--qr   { --bi-dot: #e3c16f; }
.bi-code--dm   { --bi-dot: #d88a5a; }

/* ---------- Screenshot strip ---------- */
.bi-shots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.bi-shot img {
    width: 240px;
    max-width: 100%;
    height: auto;
    border-radius: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bi-shot--ipad img { width: 420px; border-radius: 1.2rem; }

.bi-shot figcaption {
    margin-top: 1rem;
    color: var(--second-text-color);
    font-size: 0.95rem;
    text-align: center;
}

/* ---------- Offline facts row ---------- */
.bi-facts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: 2.5rem;
    color: var(--second-text-color);
    font-size: 0.95rem;
}

.bi-facts span strong {
    color: var(--text-color);
}

@media screen and (max-width: 1000px) {
    .bi-code-row { justify-content: center; }
    .bi-shot--ipad img { width: 100%; max-width: 420px; }
}

/* Phones: the 8px root halves rem sizes — same scale as the cw.css chips */
@media screen and (max-width: 590px) {
    .bi-code { font-size: 1.3rem; }
    .apps-showcase .bi-code { font-size: 1.25rem; }
    .bi-facts { font-size: 1.5rem; }
    .bi-shot figcaption { font-size: 1.4rem; }
}