/* Self-hosted IBM Plex (WOFF2) -- replaces the Google Fonts CDN @import,
matching how Inter is self-hosted on the main WP site. Files live in
free-tools/fonts/ (../fonts/ relative to this stylesheet). */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/ibm-plex-mono-700.woff2') format('woff2');
}
/* ============================================================================
BB TOOLS DESIGN SYSTEM (v1)
Single source of truth for every Billbooks free tool. New tools include this
file and use these classes only, no per-tool restyling. See TOOLS_BRAND_GUIDELINE.md.
Page skeleton every tool follows:
[nav header] partials/brand-header.php
...all SEO copy + FAQ, same width...
[interlinking] partials/other-tools.php
[footer] partials/tool-footer.php
============================================================================ */
:root {
--bb-tool-max: 900px; /* one width for every tool box + its content */
--bb-ink: #16213a; /* headings, labels, primary buttons */
--bb-text: #333; /* body copy */
--bb-muted: #6b7280; /* subtitles, helper text */
--bb-accent: #00bcd9; /* brand cyan (highlights only) */
--bb-box-border: #e6e6e6; /* the tool box stroke */
--bb-box-radius: 16px;
--bb-box-shadow: 0 6px 24px rgba(0,0,0,.05);
--bb-field-border: #d7d7d7;
--bb-field-focus: #16213a;
--bb-field-radius: 10px;
--bb-radius-pill: 999px;
--bb-danger: #d33a2f;
--bb-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--bb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Layout -------------------------------------------------------------------- */
.bb-tool { max-width: var(--bb-tool-max); margin: 0 auto; padding: 40px 16px 0; }
.bb-tool-box { background: #fff; border: 1px solid var(--bb-box-border); border-radius: var(--bb-box-radius); box-shadow: var(--bb-box-shadow); padding: 32px; margin-top: 4px; }
.bb-tool-content { max-width: var(--bb-tool-max); margin: 44px auto 0; padding: 0 16px; }
@media (max-width: 560px) { .bb-tool { padding-top: 26px; } .bb-tool-box { padding: 22px 18px; } }
/* Titles -------------------------------------------------------------------- */
.bb-tool-h1 { font-family: var(--bb-sans); font-size: 30px; font-weight: 300; line-height: 1.2; color: var(--bb-ink); margin: 0 0 10px; }
.bb-tool-sub { font-family: var(--bb-sans); font-size: 17px; line-height: 1.6; color: var(--bb-muted); margin: 0 0 22px; }
@media (max-width: 560px) { .bb-tool-h1 { font-size: 24px; } .bb-tool-sub { font-size: 15.5px; } }
/* Content typography (SEO copy outside the box) ----------------------------- */
.bb-tool-content h2 { font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--bb-ink); margin: 34px 0 14px; }
.bb-tool-content h3 { font-size: 19px; font-weight: 700; color: var(--bb-ink); margin: 26px 0 10px; }
.bb-tool-content p, .bb-tool-content li { font-size: 16.5px; line-height: 1.65; color: var(--bb-text); }
.bb-tool-content p { margin-bottom: 14px; }
.bb-tool-content ul, .bb-tool-content ol { padding-left: 20px; margin-bottom: 16px; }
.bb-tool-content li { margin-bottom: 8px; }
/* Fields -------------------------------------------------------------------- */
.bb-field { margin-bottom: 16px; }
.bb-label { display: block; font-family: var(--bb-sans); font-size: 14px; font-weight: 600; color: var(--bb-ink); margin-bottom: 6px; }
.bb-hint { display: block; font-size: 13px; color: var(--bb-muted); margin-top: 5px; }
.bb-input, .bb-select, .bb-textarea,
.bb-tool-box .form-control, .bb-tool-box .form-select {
width: 100%; box-sizing: border-box; font-family: var(--bb-sans); font-size: 15px; color: var(--bb-text);
background: #fff; border: 1.5px solid var(--bb-field-border); border-radius: var(--bb-field-radius); padding: 12px 14px;
transition: border-color .15s ease;
}
.bb-input:focus, .bb-select:focus, .bb-textarea:focus,
.bb-tool-box .form-control:focus, .bb-tool-box .form-select:focus {
outline: none; border-color: var(--bb-field-focus); box-shadow: none;
}
.bb-input::placeholder, .bb-textarea::placeholder { color: #9aa1ac; }
.bb-textarea { min-height: 84px; resize: vertical; }
.bb-select, .bb-tool-box select.form-control, .bb-tool-box .form-select {
appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316213a' stroke-width='2' d='M1 1.5 6 6l5-4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
/* Validation ---------------------------------------------------------------- */
.bb-input.is-invalid, .bb-select.is-invalid, .bb-textarea.is-invalid,
.bb-tool-box .form-control.is-invalid, .was-validated .bb-tool-box .form-control:invalid { border-color: var(--bb-danger); }
.bb-error, .bb-tool-box .invalid-feedback { display: block; color: var(--bb-danger); font-size: 13px; margin-top: 5px; }
/* Buttons ------------------------------------------------------------------- */
.bb-btn {
display: inline-block; font-family: var(--bb-sans); font-size: 16px; font-weight: 600; line-height: 1;
background: var(--bb-ink); color: #fff; border: 1.5px solid var(--bb-ink); border-radius: var(--bb-radius-pill);
padding: 14px 30px; cursor: pointer; text-decoration: none; transition: background .15s ease, opacity .15s ease;
}
.bb-btn:hover, .bb-btn:focus { background: #24304d; border-color: #24304d; color: #fff; }
.bb-btn-sm { font-size: 14px; padding: 9px 20px; }
.bb-btn-lg { font-size: 17px; padding: 16px 36px; }
.bb-btn-secondary { background: #fff; color: var(--bb-ink); }
.bb-btn-secondary:hover, .bb-btn-secondary:focus { background: #f4f6fa; color: var(--bb-ink); border-color: var(--bb-ink); }
/* CTA card (used inside content) ------------------------------------------- */
.bb-cta { text-align: center; background: #f0f7ff; border-radius: 16px; padding: 40px 24px; margin: 44px 0 8px; }
.bb-cta h2 { margin: 0 0 8px; }
.bb-cta p { margin: 0 0 20px; color: var(--bb-muted); }
.bb-cta .bb-fine { font-size: 14px; color: var(--bb-muted); margin: 14px 0 0; }
/* Info cards + icon rows -- reusable engaging blocks for any tool's content.
.bb-cards = grid of icon+title+text cards (bigger fonts). .bb-iconrow = a
compact feature strip of icon+label. Inline SVGs inherit the stroke defaults. */
.bb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 22px 0 10px; }
.bb-card { background: #fff; border: 1px solid var(--bb-box-border); border-radius: 14px; padding: 26px 22px; text-align: center; }
.bb-card-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eaf9fc; color: var(--bb-ink); }
.bb-card-ico svg { width: 26px; height: 26px; }
.bb-card h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; color: var(--bb-ink); }
.bb-card p { font-size: 15.5px; line-height: 1.55; color: var(--bb-text); margin: 0; }
.bb-card code { background: #f1f3f6; padding: 1px 6px; border-radius: 6px; font-size: 13.5px; color: var(--bb-ink); }
.bb-iconrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 14px; margin: 24px 0 10px; }
.bb-iconrow-item { text-align: center; }
.bb-iconrow-ico { width: 48px; height: 48px; margin: 0 auto 10px; color: var(--bb-accent); display: flex; align-items: center; justify-content: center; }
.bb-iconrow-item b { display: block; font-size: 15px; color: var(--bb-ink); margin-bottom: 3px; }
.bb-iconrow-item span { font-size: 13.5px; line-height: 1.45; color: var(--bb-muted); }
.bb-card-ico svg, .bb-iconrow-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bb-iconrow-ico svg { width: 30px; height: 30px; }
/* FAQ (shared squared accordion, black bars via .faq-title-bg) -------------- */
.bb-faq .accordion-item { border: none !important; border-radius: 0 !important; margin-bottom: 8px; }
.bb-faq .accordion-button { border-radius: 0 !important; box-shadow: none !important; }
.bb-faq .accordion-body { background: #f6f7f9; }
/* Table header override (kills the legacy black bar from style.css's old
table.table th.blue-bg / table th.table-bg rules) -------------------------- */
body table.table th.table-bg,
body table.table th.blue-bg {
background-color: #f5f5f5 !important;
color: var(--bb-ink) !important;
font-weight: 700;
}
/* Content images (screenshots/photos inside bb-tool-content) ---------------- */
.bb-tool-content .bb-content-figure { margin: 20px 0 28px; text-align: center; }
.bb-tool-content .bb-content-figure img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--bb-box-border); }
@media (min-width: 700px) {
.bb-tool-content .bb-content-flex { display: flex; gap: 32px; align-items: flex-start; margin: 20px 0 28px; }
.bb-tool-content .bb-content-flex > .bb-content-text { flex: 1 1 55%; }
.bb-tool-content .bb-content-flex > .bb-content-figure { flex: 1 1 40%; margin: 0; }
}
/* ============================================================================
App base + footer (CI4 template apps): adopt the tools design system
site-wide. Appended to the shared bb-tools.css copy in each app.
============================================================================ */
body { font-family: var(--bb-sans); color: var(--bb-text); }
.bbt-footer { border-top: 1px solid #eef1f5; margin-top: 64px; background: #fff; }
.bbt-footer-inner { max-width: 1032px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bbt-footer-logo img { height: 24px; width: auto; display: block; }
.bbt-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.bbt-footer-links a { font-size: 14.5px; color: #33475b; text-decoration: none; }
.bbt-footer-links a:hover { color: #155EEF; }
.bbt-footer-copy { font-size: 13.5px; color: #8a97a6; margin: 0; width: 100%; text-align: center; padding-top: 4px; }
@media (max-width: 640px) { .bbt-footer-inner { flex-direction: column; text-align: center; gap: 14px; } }
/* FAQ black-bar buttons (matches free-tools faq-title-bg) */
.faq-title-bg { color: #fff !important; background-color: #000 !important; }
.f-size-20 { font-size: 1.25rem; }
.bb-faq .accordion-button.faq-title-bg::after { filter: brightness(0) invert(1); }
.bb-faq .accordion-button:focus { box-shadow: none !important; }
/* ---- Map the CI4 apps' legacy button/CTA classes onto the bb-tools look ----
Done in CSS (not markup) so every instance updates and no JS hook is touched. */
/* Primary actions (Generate, Download PDF, Apply) = the standard brand-blue pill. */
.darkgreen-btn, .btn-black, .downloadpdf-btn, .signup-btn {
background: #155EEF !important; border: 1.5px solid #155EEF !important;
color: #fff !important; border-radius: var(--bb-radius-pill) !important;
font-family: var(--bb-sans) !important; font-weight: 600 !important;
text-decoration: none !important;
}
.darkgreen-btn:hover, .darkgreen-btn:focus, .btn-black:hover, .btn-black:focus,
.downloadpdf-btn:hover, .downloadpdf-btn:focus, .signup-btn:hover, .signup-btn:focus {
background: #0d4fd6 !important; border-color: #0d4fd6 !important; color: #fff !important;
}
/* End template-nav pills (.darkgreen-btn.link-white) = ghost/outline buttons. */
.darkgreen-btn.link-white, .btn-ghost {
background: transparent !important; color: var(--bb-ink) !important;
border: 1.5px solid var(--bb-field-border) !important; font-weight: 600 !important;
}
.darkgreen-btn.link-white:hover, .darkgreen-btn.link-white:focus, .btn-ghost:hover, .btn-ghost:focus {
background: #f5f8ff !important; color: #155EEF !important; border-color: #155EEF !important;
}
/* text/link actions (Add Line Item, Add Discount/Tax, Edit, Sign up): brand blue,
underline on hover ONLY. a.blue-link specificity beats style.css's a.blue-link (loaded later). */
a.blue-link, .bb-tool-box .blue-link, .bb-tool-box .transparent-btn {
color: #155EEF !important; text-decoration: none !important; font-weight: 600;
}
a.blue-link:hover, a.blue-link:focus, .bb-tool-box .blue-link:hover,
.bb-tool-box .transparent-btn:hover, .bb-tool-box .transparent-btn:focus {
color: #0d4fd6 !important; text-decoration: underline !important;
}
/* No dark strokes inside a tool box: lighten Bootstrap dark borders, thin the thick ones */
.bb-tool-box .border-dark { border-color: var(--bb-box-border) !important; }
.bb-tool-box .border-5 { border-width: 1px !important; }
.bb-tool-box .border-bottom { border-bottom-color: var(--bb-box-border) !important; }
/* "Get paid faster" promo panel -> bb-cta light-blue card */
.blue-bg {
background: #f0f7ff !important; border-radius: 16px; padding: 40px 28px !important;
text-align: center; border: 0 !important;
}
.blue-bg, .blue-bg .bold-title, .blue-bg h2, .blue-bg p { color: var(--bb-ink) !important; }
.blue-bg p { color: #33475b !important; }
/* Clean light accordion (category browser uses .bb-faq without faq-title-bg) */
.bb-faq .accordion-button { background: #f6f7f9; color: var(--bb-ink); font-weight: 600; font-size: 16px; padding: 16px 18px; }
.bb-faq .accordion-button:not(.collapsed) { background: #eef4ff; color: var(--bb-ink); }
.bb-faq .accordion-button:not(.collapsed)::after { filter: none; }
/* Category page: responsive grid of template links (bb-cards-style) */
.bb-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.bb-cat-link { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bb-box-border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--bb-ink); font-size: 15px; font-weight: 600; line-height: 1.3; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.bb-cat-link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bb-accent); flex: 0 0 auto; }
.bb-cat-link:hover { border-color: #bcd3ff; background: #f5f8ff; color: #155EEF; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,37,64,.06); }
/* Category CARDS (profession browser at the end of the invoice builder) */
.bb-cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 22px 0 8px; }
.bb-cat-card { background: #fff; border: 1px solid var(--bb-box-border); border-radius: 16px; padding: 24px 22px; box-shadow: var(--bb-box-shadow); display: flex; flex-direction: column; }
.bb-cat-card h3 { font-size: 18px; font-weight: 700; color: var(--bb-ink); margin: 0 0 14px; }
.bb-cat-card ul { list-style: none; padding: 0; margin: 0 0 16px; }
.bb-cat-card li { margin: 0 0 9px; }
.bb-cat-card li a { color: var(--bb-text); text-decoration: none; font-size: 15px; }
.bb-cat-card li a:hover { color: #155EEF; text-decoration: underline; }
.bb-cat-more { margin-top: auto; color: #155EEF; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.bb-cat-more:hover { text-decoration: underline; }
.bb-cat-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; margin-bottom: 56px; }
/* ---- Brand typography: IBM Plex Sans everywhere ----
style.css sets Helvetica (via --bs-font-Helvetica-regular) and Inter (.file-upload).
bb-tools.css loads last, so redefining the var + a safety net makes the brand font win. */
:root { --bs-font-Helvetica-regular: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body, #page-content, .file-upload, .file-upload__label-title, .file-upload__label-desc,
.form-title, h1, h2, h3, h4, h5, h6, p, a, li, label,
.btn, .form-control, .form-select, input, select, textarea {
font-family: var(--bb-sans) !important;
}
/* Your Info + Client Info: two side-by-side single-column sections (points 7 & 8) */
.bb-tool-box .info-col .row > [class*="col-md-6"],
.bb-tool-box .info-col .row > [class*="col-md-12"] { flex: 0 0 100%; max-width: 100%; }
.bb-tool-box .info-col .form-title { font-size: 1.2rem; margin-bottom: .6rem; }
@media (max-width: 767px) { .bb-tool-box .info-col { padding-top: 0 !important; } }
/* ================= free-tools invoice-generator structure (.inv-*) ported into the CI4 template apps ================= */
.inv-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:6px; }
.inv-title-select { font-family:var(--bb-sans); font-size:24px; font-weight:600; color:var(--bb-ink); border:0; background:transparent; padding:2px 30px 2px 0; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316213a' stroke-width='2' d='M1 1.5 6 6l5-4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; }
.inv-title-select:focus { outline:none; }
.inv-drop { position:relative; width:210px; height:110px; border:1.5px dashed var(--bb-field-border); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--bb-muted); font-size:12.5px; line-height:1.5; cursor:pointer; background:#fafbfc; overflow:hidden; padding:8px; }
.inv-drop:hover { border-color:var(--bb-ink); color:var(--bb-ink); }
.inv-drop input[type=file] { display:none; }
.inv-drop img.inv-logo-preview { display:none; max-width:100%; max-height:94px; object-fit:contain; }
.inv-drop.has-logo { border-style:solid; background:#fff; }
.inv-drop.has-logo .inv-drop-copy { display:none; }
.inv-drop.has-logo img.inv-logo-preview { display:block; }
.inv-section { margin-top:30px; }
.inv-section.inv-boxed { background:#f7f8fa; border:1px solid var(--bb-box-border); border-radius:12px; padding:20px 22px; }
.inv-section-title { font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--bb-muted); margin:0 0 14px; }
.inv-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; }
.inv-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 16px; }
.inv-col-full { grid-column:1 / -1; }
/* line items */
.inv-items-head { display:grid; grid-template-columns:1fr 78px 118px 118px 30px; gap:12px; padding:0 0 9px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bb-muted); border-bottom:1px solid var(--bb-box-border); }
.inv-items-head .ih-r { text-align:right; }
.inv-item { display:grid; grid-template-columns:1fr 78px 118px 118px 30px; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #f1f2f4; }
.inv-item .bb-field { margin:0; }
.inv-item-label { display:none; font-size:11.5px; font-weight:600; color:var(--bb-muted); margin-bottom:5px; }
.inv-amount { font-family:var(--bb-sans); font-size:15px; font-weight:600; color:var(--bb-ink); text-align:right; }
.inv-remove { background:none; border:0; color:#c2c7d0; font-size:24px; line-height:1; cursor:pointer; padding:0; text-align:center; }
.inv-remove:hover { color:var(--bb-danger); }
.inv-add { margin-top:16px; }
.inv-add-btn { background:none; border:1.5px dashed var(--bb-field-border); color:var(--bb-ink); font-family:var(--bb-sans); font-weight:600; font-size:14px; border-radius:10px; padding:10px 18px; cursor:pointer; transition:border-color .15s, background .15s; }
.inv-add-btn:hover { border-color:var(--bb-ink); background:#f4f6fa; }
/* summary */
.inv-summary { margin:22px 0 0 auto; max-width:340px; }
.inv-sumrow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; font-size:15px; color:var(--bb-text); }
.inv-sumrow .inv-sum-val { font-weight:600; color:var(--bb-ink); white-space:nowrap; }
.inv-sum-money { display:inline-flex; align-items:center; border:1.5px solid var(--bb-field-border); border-radius:10px; overflow:hidden; }
.inv-sum-money .cur { padding:0 2px 0 12px; color:var(--bb-muted); font-size:14px; }
.inv-sum-money input { width:104px; border:0; padding:9px 12px 9px 4px; font-family:var(--bb-sans); font-size:15px; color:var(--bb-text); text-align:right; }
.inv-sum-money input:focus { outline:none; }
.inv-tax-label { display:inline-flex; align-items:center; gap:7px; }
.inv-tax-label input { width:62px; border:1.5px solid var(--bb-field-border); border-radius:8px; padding:6px 8px; font-family:var(--bb-sans); font-size:14px; text-align:right; color:var(--bb-text); }
.inv-tax-label input:focus { outline:none; border-color:var(--bb-field-focus); }
.inv-sumrow.inv-total { border-top:2px solid var(--bb-ink); margin-top:6px; padding-top:15px; font-size:20px; font-weight:800; color:var(--bb-ink); }
/* locked / upsell */
.inv-locked { margin-top:32px; background:#f0f7ff; border:1px solid #dbe8f6; border-radius:16px; padding:24px 24px 26px; }
.inv-locked h3 { font-size:17px; font-weight:800; color:var(--bb-ink); margin:0 0 3px; }
.inv-locked-sub { font-size:14.5px; color:var(--bb-muted); margin:0 0 18px; }
.inv-lock-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; margin-bottom:20px; }
.inv-lock-item { display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--bb-text); }
.inv-lock-item svg { flex:0 0 auto; color:#9aa8bd; }
.inv-signup { text-align:right; margin-top:4px; }
.inv-locked .inv-signup-btn { background:#2563eb; border-color:#2563eb; color:#fff; }
.inv-locked .inv-signup-btn:hover, .inv-locked .inv-signup-btn:focus { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
@media (max-width:640px) { .inv-signup { text-align:left; } .inv-signup-btn { display:block; text-align:center; } }
/* submit */
.inv-submit { margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.inv-fine { font-size:13.5px; color:var(--bb-muted); margin:0; }
@media (max-width:640px) {
.inv-title-select { font-size:19px; }
.inv-drop { width:100%; }
.inv-grid, .inv-grid-3 { grid-template-columns:1fr; }
.inv-items-head { display:none; }
.inv-item { grid-template-columns:1fr 1fr; gap:12px 14px; padding:16px 0; position:relative; border-bottom:1px solid var(--bb-box-border); }
.inv-item .inv-cell-desc { grid-column:1 / -1; }
.inv-item .inv-cell-amount { grid-column:1 / -1; }
.inv-item-label { display:block; }
.inv-amount { text-align:left; padding-top:2px; }
.inv-remove { position:absolute; top:12px; right:2px; font-size:22px; }
.inv-summary { max-width:none; }
.inv-lock-grid { grid-template-columns:1fr; }
}
/* template-app additions */
.inv-doc-type { font-family:var(--bb-sans); font-size:24px; font-weight:700; color:var(--bb-ink); }
.inv-submit .inv-generate-btn { background:#155EEF !important; border-color:#155EEF !important; color:#fff !important; }
.inv-submit .inv-generate-btn:hover, .inv-submit .inv-generate-btn:focus { background:#0d4fd6 !important; border-color:#0d4fd6 !important; color:#fff !important; }
@media (max-width:640px){ .inv-doc-type{ font-size:19px; } }
/* Tighten the builder head: center the doc label against the logo (kills the dead space
after the title), slightly smaller logo drop. */
.inv-head { align-items: center; margin-bottom: 2px; }
.inv-drop { height: 92px; }
/* DB long_description wraps headings as
Title
; hide that leading break (phantom space after content titles) */
#page-content h2 br, .bb-tool-content h2 br, .bb-tool-content h3 br { display: none; }
#page-content h2, #page-content h3 { padding-bottom: 0 !important; }
/* logo dropzone: drag-over + non-image (PDF) file state */
.inv-drop.is-dragover { border-color:#155EEF !important; background:#eef4ff; color:#155EEF; }
.inv-drop-formats { display:block; font-size:11px; opacity:.85; margin-top:2px; }
.inv-file-name { display:none; font-size:12.5px; font-weight:600; color:var(--bb-ink); word-break:break-word; padding:2px 8px; text-align:center; }
.inv-drop.is-file .inv-drop-copy { display:none; }
.inv-drop.is-file .inv-file-name { display:block; }
/* ---- Home-page FAQ (native , .bbc-faq) for the template builder pages ---- */
.bbc-faq-list { max-width: 780px; margin: 12px auto 0; display: grid; gap: 12px; text-align: left; }
.bbc-faq-q { border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; padding: 20px 24px; transition: box-shadow .18s; }
.bbc-faq-q:hover { box-shadow: 0 16px 44px rgba(10,37,64,.10); }
.bbc-faq-q summary { list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 700; color: #0a2540; display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 0; }
.bbc-faq-q summary::-webkit-details-marker { display: none; }
.bbc-faq-q summary .mk { color: #155EEF; flex: 0 0 auto; font-weight: 400; font-size: 26px; line-height: 1; display: inline-block; transition: transform .22s ease; }
.bbc-faq-q[open] summary .mk { transform: rotate(45deg); }
.bbc-faq-q p { font-size: 14.5px; color: #5b6b7d; margin: 12px 0 0; line-height: 1.6; }
@media (max-width: 760px) { .bbc-faq-q { padding: 17px 20px; } .bbc-faq-q summary { font-size: 15.5px; } }
/* Template-page spacing polish (2026-08-19): card breathing room + long_description heading rhythm */
.blue-bg { margin-top: 34px; }
.tpl-longdesc > :first-child { margin-top: 0 !important; }
.tpl-longdesc h2, .tpl-longdesc h3 { margin-top: 34px !important; margin-bottom: 8px !important; }
.tpl-longdesc p { margin-bottom: 14px; }