/* billing.css
 *
 * Product-demo chrome, extracted from content on 2026-08-31. This styles a
 * PICTURE OF THE PRODUCT, not the website. Nothing in here may reference a
 * website token, and nothing in here belongs in style.css. The container
 * carries data-platform-demo="billing", which is also what enqueues this file.
 *
 * Was inline in: wp_block 19 (homepage) and page 222, byte-identical in both
 *
 * NOT moved: the one rule that names three demo containers at once
 * (.gn-bind-outer, .gc-outer, .gf-outer at <=600px). It exists only in
 * wp_block 19 and it stays there. Putting it in a shared file loaded
 * beside every demo would have applied it to /billing-finance/ and
 * /claims-management/, which never had it, and a rule arriving on two
 * pages is not an extraction.
 */

.gf-outer { --gf-accent: #00B2B1; --gf-cta: #E10054; --gf-cta-hover: #F1B53D; --gf-ink: #2F3351; --gf-pale-steel: #9FB6D4; --gf-primary: #004EAA; --gf-purple: #B24EBE; --gf-steel: #547EC1; }
.gf-outer { width: 100%; position: relative; overflow: hidden; }
.gf-wrap { width: 680px; height: 680px; position: relative; font-family: var(--wp--preset--font-family--body); transform-origin: top left; overflow: hidden; }
.gf-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.gf-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: contain; z-index: 0; pointer-events: none; opacity: 0.9; }
.gf-stage { position: relative; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.8s ease; }
.gf-stage.gf-vis { opacity: 1; }
.gf-cur { position: absolute; z-index: 9999; opacity: 0; pointer-events: none; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.25)); transition: left 0.6s cubic-bezier(0.4,0,0.2,1), top 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.gf-cur.gf-show { opacity: 1; }
.gf-rip { position: absolute; top: -6px; left: -6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gf-accent); animation: gfRip 0.4s ease-out forwards; pointer-events: none; }
.gf-cd { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
.gf-policy { top: 50px; left: 30px; width: 345px; z-index: 2; animation: gfFI 0.5s ease forwards; }
.gf-hdr { background: var(--gf-ink); padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; }
.gf-hdr span { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; }
.gf-hdr-badge { background: var(--gf-accent); color: #fff; padding: 2px 10px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.gf-shdr { background: var(--gf-steel); padding: 6px 14px; color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 600; }
.gf-body { padding: 10px 12px 14px; }
.gf-cbar { background: #f8fafc; padding: 7px 10px; margin-bottom: 10px; font-size: 10px; color: var(--gf-ink); line-height: 1.5; }
.gf-premium-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.gf-prem-label { font-size: 9px; color: var(--gf-pale-steel); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gf-prem-amount { font-size: 26px; font-weight: 700; color: var(--gf-ink); line-height: 1; }
.gf-prem-ipt { font-size: 9px; color: var(--gf-pale-steel); font-weight: 600; }
.gf-plan-title { font-size: 9px; font-weight: 700; color: var(--gf-cta); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.gf-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.gf-plan-field label { font-size: 8px; font-weight: 700; color: var(--gf-pale-steel); text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 3px; }
.gf-plan-field .gf-fbox { border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 8px; font-size: 11px; color: var(--gf-ink); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.gf-fbox.gf-empty { color: var(--gf-pale-steel); font-weight: 400; }
.gf-fbox svg { flex-shrink: 0; }
.gf-sched { margin-top: 8px; }
.gf-sched-t { font-size: 8px; font-weight: 700; color: var(--gf-ink); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.gf-sched-tbl { width: 100%; border-collapse: collapse; font-size: 8px; }
.gf-sched-tbl th { padding: 3px 4px; font-weight: 700; color: var(--gf-pale-steel); text-transform: uppercase; border-bottom: 1px solid #e2e8f0; font-size: 7px; text-align: left; }
.gf-sched-tbl th:last-child { text-align: right; }
.gf-sched-tbl td { padding: 3px 4px; color: var(--gf-ink); font-weight: 500; border-bottom: 1px solid #f8fafc; }
.gf-sched-tbl td:last-child { text-align: right; font-weight: 700; }
.gf-sched-row { opacity: 0; }
.gf-sched-row.gf-an { animation: gfRowIn 0.3s ease forwards; }
.gf-sched-tbl .gf-collected { color: var(--gf-accent); }
.gf-sched-tbl .gf-pending { color: var(--gf-cta-hover); }
.gf-sched-tbl .gf-due { color: var(--gf-pale-steel); }
.gf-plan-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: none; background: var(--gf-cta); color: #fff; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; animation: gfFI 0.3s ease forwards; transition: all 0.15s ease; margin-top: 6px; }
.gf-plan-btn.gf-pr { transform: scale(0.95); }
.gf-comm { top: 160px; left: 200px; width: 340px; z-index: 4; box-shadow: 0 8px 32px rgba(0,0,0,0.12); animation: gfSR 0.5s ease forwards; }
.gf-comm-hdr { background: var(--gf-ink); padding: 9px 14px; }
.gf-comm-hdr span { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; }
.gf-comm-body { padding: 12px 14px; }
.gf-comm-sub { font-size: 9px; font-weight: 700; color: var(--gf-purple); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.gf-comm-tbl { width: 100%; border-collapse: collapse; font-size: 9px; margin-bottom: 10px; }
.gf-comm-tbl th { padding: 4px 5px; font-weight: 700; color: var(--gf-pale-steel); text-transform: uppercase; border-bottom: 2px solid #e2e8f0; font-size: 8px; text-align: left; }
.gf-comm-tbl th:nth-child(3), .gf-comm-tbl th:nth-child(4) { text-align: right; }
.gf-comm-tbl td { padding: 4px 5px; color: var(--gf-ink); font-weight: 500; border-bottom: 1px solid #f1f5f9; }
.gf-comm-tbl td:nth-child(3), .gf-comm-tbl td:nth-child(4) { text-align: right; font-weight: 700; }
.gf-comm-row { opacity: 0; }
.gf-comm-row.gf-an { animation: gfRowIn 0.3s ease forwards; }
.gf-comm-total { background: #f8fafc; font-weight: 700 !important; }
.gf-comm-total td { color: var(--gf-ink) !important; font-weight: 700 !important; }
.gf-bord-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 10px; background: rgba(178,78,190,0.06); border-radius: 8px; border: 1px solid rgba(178,78,190,0.15); }
.gf-bord-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--gf-purple); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gf-bord-text { font-size: 9px; color: var(--gf-ink); line-height: 1.4; }
.gf-bord-text strong { font-weight: 700; color: var(--gf-purple); }
.gf-gl { bottom: 30px; right: 30px; width: 310px; z-index: 6; box-shadow: 0 12px 40px rgba(0,0,0,0.14); animation: gfBRIn 0.5s ease forwards; }
.gf-gl-hdr { background: var(--gf-primary); padding: 9px 14px; display: flex; align-items: center; gap: 7px; }
.gf-gl-hdr svg { color: #fff; }
.gf-gl-hdr span { color: #fff; font-weight: 700; font-size: 11px; }
.gf-gl-body { padding: 12px 14px; }
.gf-gl-sub { font-size: 9px; font-weight: 700; color: var(--gf-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.gf-journal { width: 100%; border-collapse: collapse; font-size: 8px; margin-bottom: 10px; }
.gf-journal th { padding: 3px 4px; font-weight: 700; color: var(--gf-pale-steel); text-transform: uppercase; border-bottom: 1px solid #e2e8f0; font-size: 7px; text-align: left; }
.gf-journal th:last-child { text-align: right; }
.gf-journal td { padding: 3px 4px; color: var(--gf-ink); font-weight: 500; border-bottom: 1px solid #f8fafc; }
.gf-journal td:last-child { text-align: right; font-weight: 700; }
.gf-journal-row { opacity: 0; }
.gf-journal-row.gf-an { animation: gfRowIn 0.3s ease forwards; }
.gf-dr { color: var(--gf-ink) !important; }
.gf-cr { color: var(--gf-accent) !important; }
.gf-recon { display: flex; gap: 8px; margin-top: 4px; }
.gf-recon-box { flex: 1; border-radius: 8px; padding: 8px; text-align: center; }
.gf-recon-box.gf-matched { background: rgba(0,178,177,0.08); border: 1px solid rgba(0,178,177,0.2); }
.gf-recon-box.gf-unmatched { background: rgba(241,181,61,0.08); border: 1px solid rgba(241,181,61,0.2); }
.gf-recon-num { font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 1px; }
.gf-recon-box.gf-matched .gf-recon-num { color: var(--gf-accent); }
.gf-recon-box.gf-unmatched .gf-recon-num { color: var(--gf-cta-hover); }
.gf-recon-label { font-size: 7px; font-weight: 700; color: var(--gf-pale-steel); text-transform: uppercase; letter-spacing: 0.04em; }
.gf-sync { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; background: rgba(0,178,177,0.06); border-radius: 6px; border: 1px solid rgba(0,178,177,0.15); font-size: 9px; color: var(--gf-accent); font-weight: 700; }
.gf-sync.gf-synced { animation: gfPulseGreen 1.5s ease infinite; }
.gf-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gf-accent); }
.gf-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--gf-ink); color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 24px rgba(47,51,81,0.35); display: flex; align-items: center; gap: 10px; z-index: 35; white-space: nowrap; animation: gfTI 0.35s ease forwards; }
.gf-hid { display: none; }
@keyframes gfRip { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes gfFI { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes gfSR { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gfTI { from { transform: translate(-50%,-50%) translateY(10px); opacity: 0; } to { transform: translate(-50%,-50%) translateY(0); opacity: 1; } }
@keyframes gfBRIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gfPulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(0,178,177,0.3); } 50% { box-shadow: 0 0 0 6px rgba(0,178,177,0); } }
@keyframes gfRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gfSU { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }