/*** B2BITZ additions on top of the DarkPan template (style.css) ***/

/* Typeface of every title, the logo word and the stat numbers - change it here only.
   Unbounded (SIL Open Font License), self-hosted: css/fonts/*.woff2 are subsets
   of the Bold/Medium/Light TTFs (Latin + Latin Extended-A incl. Polish, $ @ ¢ €). */
@font-face {
    font-family: 'Unbounded';
    src: url('fonts/Unbounded-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('fonts/Unbounded-Light.woff2') format('woff2');
    font-weight: 200 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('fonts/Unbounded-Medium.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
:root { --heading-font: 'Unbounded', 'Segoe UI', Arial, sans-serif; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--heading-font); }

body { color: #b9bdd0; }
.brand-word { letter-spacing: 1px; }
.page-title { color: #fff; font-family: var(--heading-font); font-weight: 500; letter-spacing: .5px; }

.badge-free {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
    background: #65EF60;
    border-radius: 4px;
    vertical-align: middle;
}

.sidebar-contact small { color: var(--light); }
.sidebar-contact a { color: #fff; font-size: 14px; }
.sidebar-contact a:hover { color: var(--primary); }

.footer-links h6 { color: #fff; }
.footer-links a { display: block; color: var(--light); margin-bottom: 4px; }
.footer-links a:hover { color: var(--primary); }

/* Cards */
.card-b { background: var(--secondary); border-radius: 8px; padding: 1.5rem; height: 100%; }
.card-b h6.eyebrow, .eyebrow {
    color: var(--primary);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.card-b p:last-child { margin-bottom: 0; }
.muted { color: var(--light); }

/* Stat tiles (template's top row) */
.stat-tile { background: var(--secondary); border-radius: 8px; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.stat-tile i { color: var(--primary); }
.stat-tile .num { color: #fff; font-family: var(--heading-font); font-weight: 700; font-size: 1.35rem; margin: 0; }
.stat-tile p { margin: 0 0 2px; font-size: 14px; }

/* Hero */
/* In Unbounded the title is ~17.7em wide, so 5.4% of the card's width keeps it
   on one line at any window size (capped at the old 2.4rem; tiny screens may wrap). */
.hero { container-type: inline-size; }
.hero h1 { color: #fff; font-size: clamp(1.4rem, 5.4cqi, 2.4rem); line-height: 1.15; }
.hero h1 span { color: var(--primary); }
.hero .lead { color: #c4c7d8; }

/* Mini analyzer (home hero) */
.mini-analyzer { display: flex; gap: 4px; height: 190px; align-items: stretch; background: #060608; border-radius: 8px; padding: 12px; }
.mini-analyzer .band { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mini-analyzer .band i { flex: 1; background: #160008; border-radius: 1px; }
.mini-analyzer .band i.on   { background: #660000; }
.mini-analyzer .band i.warm { background: #bb0000; }
.mini-analyzer .band i.hot  { background: #ee1a00; }
.mini-analyzer .band i.peak { background: #ff9900; }
.mini-analyzer-labels { display: flex; justify-content: space-between; color: #00cc88; font-size: 10px; padding: 4px 12px 0; }

/* Product cards */
.product-card { background: var(--secondary); border-radius: 8px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.product-card .shot { background: #060608; aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.product-card .body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-card h4 { color: #fff; margin-bottom: .25rem; }
.product-card .tag { color: var(--light); font-size: 14px; margin-bottom: 1rem; }
.product-card .price { color: #fff; font-weight: 700; }
.product-card .price.free { color: #65EF60; }
.product-card .actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.screenshot { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid #262a36; }

/* Feature list */
.feature { display: flex; gap: 1rem; }
.feature .ico { flex: 0 0 48px; height: 48px; border-radius: 48px; background: var(--dark); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.feature h6 { color: #fff; margin-bottom: .25rem; }

/* Tables */
.table-b2 { color: #b9bdd0; margin-bottom: 0; }
.table-b2 th { color: #fff; font-weight: 500; }
.table-b2 td, .table-b2 th { border-color: var(--dark); vertical-align: middle; padding: .9rem .75rem; }
.table-b2 .name { color: #fff; font-weight: 600; }

/* Timeline (what's new) */
.news-item { border-bottom: 1px solid var(--dark); padding: .85rem 0; }
.news-item:last-child { border-bottom: 0; }
.news-item h6 { color: #fff; margin-bottom: .2rem; }
.news-item small { color: var(--primary); }

/* Mode list (B@ND PRO¢ page) */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.mode { background: var(--dark); border-radius: 8px; padding: 1rem 1.1rem; }
.mode b { color: #fff; letter-spacing: 1px; }
.mode .key { display: inline-block; padding: 1px 7px; border: 1px solid rgba(0,210,140,.65); background: rgba(0,210,140,.18); color: #00d28c; font-size: 11px; font-weight: 700; letter-spacing: 2px; border-radius: 3px; margin-right: 6px; }

/* Steps */
.steps { counter-reset: s; list-style: none; padding-left: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 1rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 30px; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* FAQ (Bootstrap accordion in dark) */
.accordion-item { background: var(--secondary); border-color: var(--dark); }
.accordion-button { background: var(--secondary); color: #fff; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--dark); color: var(--primary); }
.accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.accordion-body { color: #b9bdd0; }

code.path { color: #ffb4a8; background: var(--dark); padding: 2px 6px; border-radius: 4px; }

/* Download page: what the browser / Windows warning buttons look like (2026-10-08) */
.ui-btn { display: inline-block; padding: 1px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: rgba(255,255,255,.08); color: #fff; font-size: 13px; white-space: nowrap; }
.ui-warn { border-left: 3px solid #f0ad4e; padding-left: 12px; }
.sha { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #b9bdd0; word-break: break-all; }

/* style.css sets .btn-lg-square to inline-flex after .back-to-top, so it never hid; jQuery fadeIn/Out sets the inline style */
.btn.back-to-top { display: none; }

/* License code readout (license/confirm.php, license12/confirm.php) */
.code-val { background: var(--dark); border: 1px solid rgba(235,22,22,.35); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: #fff; word-break: break-all; min-height: 44px; }

/* Screenshot zoom (js/main.js): thumbnail -> full size and back */
img.zoomable { cursor: zoom-in; transition: filter .2s; }
img.zoomable:hover { filter: brightness(1.08); }
.zoom-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1990;
    background: rgba(0, 0, 0, .78); opacity: 0; transition: opacity .32s ease;
    pointer-events: none;   /* the mouse stays "on" the thumbnail underneath, so hover-out closes it */
}
.zoom-backdrop.show { opacity: 1; }
.zoom-image {
    display: none; position: fixed; z-index: 2000; max-width: none;
    border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
    transform-origin: 0 0;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s;
    pointer-events: none;
}
@media (hover: none) {
    .zoom-backdrop, .zoom-image { pointer-events: auto; cursor: zoom-out; }   /* touch: tap to close */
}
@media (prefers-reduced-motion: reduce) {
    .zoom-image, .zoom-backdrop { transition: none; }
}

/* ---- Narrow screens ---- */
@media (max-width: 575.98px) {
    /* the template's 1.5rem gutters + 1.5rem card padding eat a phone screen */
    .content > .container-fluid.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
    .content > .container-fluid.pt-4 { padding-top: .75rem !important; }
    .card-b, .stat-tile, .product-card .body { padding: 1.1rem; }
    .content .navbar { padding-left: .75rem !important; padding-right: .75rem !important; }
}

/* Download list: one block per plug-in instead of a sideways-scrolling table */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: 1rem 0; border-bottom: 1px solid var(--dark); }
    .table-stack tr:last-child { border-bottom: 0; }
    .table-stack td { border: 0 !important; padding: .15rem 0 !important; text-align: left !important; }
    .table-stack td[data-label] { display: inline-block; width: auto; margin-right: 1rem; font-size: 14px; }
    .table-stack td[data-label]::before { content: attr(data-label) " "; color: var(--light); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-right: .35rem; }
    .table-stack .actions-cell { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; white-space: normal !important; }
    .table-stack .actions-cell .btn-primary { order: -1; }   /* Installer first */
}