/* claims-calculator.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="claims-calculator", which is also what enqueues this file.
 *
 * Was inline in: wp_block 19 (homepage) and page 220, 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.
 */

.gc-outer { --gc-accent: #00B2B1; --gc-cta: #E10054; --gc-cta-hover: #F1B53D; --gc-ink: #2F3351; --gc-pale-steel: #9FB6D4; --gc-primary: #004EAA; --gc-purple: #B24EBE; --gc-steel: #547EC1; }
.gc-outer { width: 100%; position: relative; overflow: hidden; }
.gc-wrap { width: 680px; height: 680px; position: relative; font-family: var(--wp--preset--font-family--body); transform-origin: top left; overflow: hidden; }
.gc-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.gc-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; }
.gc-stage { position: relative; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.8s ease; }
.gc-stage.gc-vis { opacity: 1; }
.gc-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; }
.gc-cur.gc-show { opacity: 1; }
.gc-rip { position: absolute; top: -6px; left: -6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gc-accent); animation: gcRip 0.4s ease-out forwards; pointer-events: none; }
.gc-cd { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
.gc-hist { top: 50px; left: 30px; width: 350px; z-index: 2; animation: gcFI 0.5s ease forwards; }
.gc-hdr { background: var(--gc-ink); padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; }
.gc-hdr span { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; }
.gc-shdr { background: var(--gc-steel); padding: 6px 14px; color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 600; }
.gc-hbody { padding: 10px 12px 14px; }
.gc-cbar { background: #f8fafc; padding: 7px 10px; margin-bottom: 10px; font-size: 10px; color: var(--gc-ink); line-height: 1.5; }
.gc-tbl { width: 100%; border-collapse: collapse; font-size: 9px; margin-bottom: 8px; }
.gc-tbl th { text-align: left; padding: 4px 5px; font-weight: 700; color: var(--gc-pale-steel); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid #e2e8f0; font-size: 8px; }
.gc-tbl td { padding: 4px 5px; border-bottom: 1px solid #f1f5f9; color: var(--gc-ink); font-weight: 500; }
.gc-tbl .gc-amt { text-align: right; font-weight: 700; }
.gc-st-o { color: var(--gc-cta); font-weight: 700; }
.gc-st-c { color: var(--gc-accent); font-weight: 600; }
.gc-nr { background: rgba(225,0,84,0.04); animation: gcSD 0.4s ease forwards; }
.gc-nr td { color: var(--gc-cta) !important; font-weight: 700 !important; }
.gc-dbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: none; background: var(--gc-primary); color: #fff; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; animation: gcFI 0.3s ease forwards; transition: all 0.15s ease; }
.gc-dbtn.gc-pr { transform: scale(0.95); }
.gc-fnol { position: absolute; top: 25px; right: 30px; width: 250px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); padding: 12px 14px; z-index: 15; animation: gcSR 0.4s ease forwards; }
.gc-fnol-t { font-size: 10px; font-weight: 700; color: var(--gc-cta); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.gc-fnol-t::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gc-cta); animation: gcPR 1.5s ease infinite; }
.gc-fnol-tx { font-size: 11px; color: var(--gc-ink); line-height: 1.5; }
.gc-fnol-tx strong { font-weight: 700; }
.gc-fnol-m { margin-top: 5px; font-size: 9px; color: var(--gc-pale-steel); }
.gc-dash { top: 140px; left: 170px; width: 480px; z-index: 5; box-shadow: 0 8px 32px rgba(0,0,0,0.12); animation: gcSU 0.5s ease forwards; }
.gc-dhdr { background: var(--gc-ink); padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; }
.gc-dhdr-t { color: #fff; font-weight: 700; font-size: 12px; }
.gc-dhdr-tabs { display: flex; gap: 4px; }
.gc-dhdr-tab { padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.5); }
.gc-dhdr-tab.gc-act { background: rgba(255,255,255,0.15); color: #fff; }
.gc-dbody { padding: 10px 12px; }
.gc-srow { display: flex; gap: 8px; margin-bottom: 10px; }
.gc-sbox { flex: 1; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; text-align: center; }
.gc-sbox-l { font-size: 8px; font-weight: 700; color: var(--gc-pale-steel); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
.gc-sbox-n { font-size: 18px; font-weight: 700; color: var(--gc-ink); line-height: 1; }
.gc-sbox.gc-sr .gc-sbox-n { color: var(--gc-cta); }
.gc-chts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gc-cht { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; }
.gc-cht-t { font-size: 8px; font-weight: 700; color: var(--gc-ink); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.gc-lsvg { width: 100%; height: 65px; }
.gc-lp { fill: none; stroke: var(--gc-cta); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; }
.gc-lp.gc-an { animation: gcLI 2s ease forwards; }
.gc-la { fill: url(#gcLG); opacity: 0; transition: opacity 0.5s ease 1.5s; }
.gc-la.gc-an { opacity: 0.3; }
.gc-lg { stroke: #f1f5f9; stroke-width: 0.5; }
.gc-bsvg { width: 100%; height: 65px; }
.gc-bar { transform-origin: bottom; transform: scaleY(0); }
.gc-bar.gc-an { animation: gcBG 0.6s ease forwards; }
.gc-pie-wrap { display: flex; align-items: center; gap: 10px; }
.gc-pie-svg { width: 60px; height: 60px; }
.gc-pie-ring { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s ease; }
.gc-pie-ring.gc-an { stroke-dashoffset: var(--gc-offset); }
.gc-pie-leg { font-size: 8px; color: var(--gc-pale-steel); line-height: 1.8; }
.gc-pie-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.gc-tri-tbl { width: 100%; border-collapse: collapse; font-size: 8px; }
.gc-tri-tbl th { padding: 3px 4px; font-weight: 700; color: var(--gc-pale-steel); text-transform: uppercase; border-bottom: 1px solid #e2e8f0; font-size: 7px; text-align: right; }
.gc-tri-tbl th:first-child { text-align: left; }
.gc-tri-tbl td { padding: 3px 4px; color: var(--gc-ink); font-weight: 500; text-align: right; border-bottom: 1px solid #f8fafc; }
.gc-tri-tbl td:first-child { text-align: left; color: var(--gc-pale-steel); font-weight: 600; }
.gc-tri-row { opacity: 0; }
.gc-tri-row.gc-an { opacity: 1; transition: opacity 0.3s ease; }
.gc-map-c { grid-column: 1/-1; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; position: relative; overflow: hidden; }
.gc-map-t { font-size: 8px; font-weight: 700; color: var(--gc-ink); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.gc-msvg { width: 100%; height: 85px; transition: transform 1.2s cubic-bezier(0.4,0,0.2,1); transform-origin: 55% 50%; }
.gc-msvg.gc-zm { transform: scale(2.8); }
.gc-hd { opacity: 0; transition: opacity 0.4s ease; }
.gc-hd.gc-sh { opacity: 0.65; }
.gc-fraud { position: absolute; bottom: 30px; right: 30px; width: 310px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.16); overflow: hidden; z-index: 25; animation: gcBRIn 0.4s ease forwards; }
.gc-fr-hdr { background: var(--gc-cta); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.gc-fr-hdr svg { color: #fff; }
.gc-fr-hdr-t { color: #fff; font-weight: 700; font-size: 11px; }
.gc-fr-body { padding: 14px 16px; }
.gc-fr-lab { font-size: 9px; font-weight: 700; color: var(--gc-cta); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.gc-fr-tx { font-size: 10px; color: var(--gc-ink); line-height: 1.6; margin-bottom: 10px; }
.gc-fr-tx strong { font-weight: 700; }
.gc-fr-det { background: #f8fafc; border-radius: 8px; padding: 8px 10px; font-size: 9px; color: var(--gc-ink); line-height: 1.7; }
.gc-fr-det strong { color: var(--gc-cta); }
.gc-ref { position: absolute; bottom: 30px; right: 30px; width: 310px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.16); overflow: hidden; z-index: 30; animation: gcBRIn 0.4s ease forwards; }
.gc-rf-hdr { background: var(--gc-cta-hover); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.gc-rf-hdr-t { color: var(--gc-ink); font-weight: 700; font-size: 11px; }
.gc-rf-body { padding: 14px 16px; text-align: center; }
.gc-rf-tx { font-size: 11px; color: var(--gc-pale-steel); line-height: 1.6; margin-bottom: 12px; }
.gc-rf-tx strong { color: var(--gc-ink); }
.gc-rf-asg { display: inline-flex; align-items: center; gap: 10px; background: #f8fafc; border-radius: 10px; padding: 8px 16px; margin-bottom: 12px; }
.gc-rf-av { width: 32px; height: 32px; border-radius: 50%; background: var(--gc-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.gc-rf-nm { text-align: left; }
.gc-rf-nm-m { font-size: 12px; font-weight: 700; color: var(--gc-ink); }
.gc-rf-nm-r { font-size: 9px; color: var(--gc-pale-steel); font-weight: 600; }
.gc-rf-btns { display: flex; justify-content: center; gap: 10px; }
.gc-rf-btn { padding: 7px 20px; border: none; border-radius: 8px; background: var(--gc-accent); color: #fff; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s ease; }
.gc-rf-btn.gc-pr { transform: scale(0.95); }
.gc-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--gc-accent); color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 24px rgba(0,178,177,0.35); display: flex; align-items: center; gap: 10px; z-index: 35; white-space: nowrap; animation: gcTI 0.35s ease forwards; }
.gc-hid { display: none; }
@keyframes gcRip { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes gcFI { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes gcSU { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gcSR { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gcSD { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gcPR { 0%,100% { box-shadow: 0 0 0 0 rgba(225,0,84,0.3); } 50% { box-shadow: 0 0 0 8px rgba(225,0,84,0); } }
@keyframes gcBG { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gcLI { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; } }
@keyframes gcTI { from { transform: translate(-50%,-50%) translateY(10px); opacity: 0; } to { transform: translate(-50%,-50%) translateY(0); opacity: 1; } }
@keyframes gcBRIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
