/* Flooring Calculator – all rules scoped to .ufc-calc.
   Change the colours below (or pass accent="#xxxxxx" in the shortcode) to match the brand. */
.ufc-calc{
  --ufc-accent:#8a5a35;        /* main brand / button colour */
  --ufc-accent-dark:#6e4627;   /* hover colour */
  --ufc-ink:#1f2933;           /* main text */
  --ufc-muted:#6b7280;         /* secondary text */
  --ufc-line:#e5ded6;          /* borders */
  --ufc-bg:#faf7f3;            /* card background */
  --ufc-soft:#f1ebe4;          /* soft panels */
  --ufc-radius:10px;
  max-width:760px;margin:28px auto;padding:28px;background:var(--ufc-bg);border:1px solid var(--ufc-line);
  border-radius:14px;color:var(--ufc-ink);font-family:inherit;font-size:16px;line-height:1.5;box-sizing:border-box;
  box-shadow:0 6px 24px rgba(31,41,51,.06);text-align:left
}
.ufc-calc *,.ufc-calc *::before,.ufc-calc *::after{box-sizing:border-box}
.ufc-calc h3.ufc-title{margin:0 0 6px;padding:0;font-size:1.5rem;line-height:1.2;color:var(--ufc-ink);text-align:center;font-family:inherit}
.ufc-calc p.ufc-sub{margin:0 0 22px;padding:0;color:var(--ufc-muted);font-size:.95rem;text-align:center}
.ufc-step{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-weight:700;font-size:1.02rem;color:var(--ufc-ink);flex-wrap:wrap}
.ufc-step:first-of-type{margin-top:0}
.ufc-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ufc-accent);color:#fff;font-size:.8rem;font-weight:700;flex:none}
.ufc-step small{font-weight:400;color:var(--ufc-muted);font-size:.85rem}
.ufc-step .ufc-unit{margin-left:auto;display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem}
.ufc-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ufc-calc button.ufc-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--ufc-line);background:#fff;color:var(--ufc-ink);border-radius:var(--ufc-radius);cursor:pointer;font-size:.78rem;font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.ufc-calc button.ufc-chip svg{width:30px;height:30px;stroke:var(--ufc-accent);fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.ufc-calc button.ufc-chip:hover{border-color:var(--ufc-accent)}
.ufc-calc button.ufc-chip.is-active{border-color:var(--ufc-accent);box-shadow:0 0 0 2px rgba(138,90,53,.25);box-shadow:0 0 0 2px color-mix(in srgb,var(--ufc-accent) 30%,transparent)}
.ufc-row{background:#fff;border:1px solid var(--ufc-line);border-radius:var(--ufc-radius);padding:14px;margin-bottom:10px}
.ufc-row-top{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.ufc-row-top .ufc-type{flex:1 1 180px}
.ufc-row-top .ufc-name{flex:1 1 140px}
.ufc-row-area{font-size:.85rem;color:var(--ufc-muted);white-space:nowrap}
.ufc-row-area strong{color:var(--ufc-ink)}
.ufc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.ufc-fields label,.ufc-grid label,.ufc-calc .ufc-lab{display:block;font-size:.78rem;font-weight:600;color:var(--ufc-muted);margin:0 0 4px}
.ufc-calc input[type=number],.ufc-calc input[type=text],.ufc-calc select{width:100%;height:42px;padding:8px 10px;margin:0;border:1px solid #d6cdc2;border-radius:8px;background:#fff;color:var(--ufc-ink);font-size:.95rem;font-family:inherit;box-shadow:none;line-height:1.2}
.ufc-calc input:focus,.ufc-calc select:focus{outline:2px solid var(--ufc-accent);outline-offset:1px;border-color:var(--ufc-accent)}
.ufc-calc button.ufc-x{width:34px;height:34px;flex:none;padding:0;border:1px solid var(--ufc-line);background:#fff;color:var(--ufc-muted);border-radius:8px;cursor:pointer;font-size:1.1rem;line-height:1}
.ufc-calc button.ufc-x:hover{color:#b91c1c;border-color:#b91c1c}
.ufc-calc button.ufc-add{width:100%;padding:11px;border:1.5px dashed var(--ufc-accent);background:transparent;color:var(--ufc-accent);border-radius:var(--ufc-radius);font-weight:700;cursor:pointer;font-size:.92rem;text-transform:none;letter-spacing:0;font-family:inherit}
.ufc-calc button.ufc-add:hover{background:rgba(138,90,53,.07);background:color-mix(in srgb,var(--ufc-accent) 8%,transparent)}
.ufc-hint{margin:8px 0 0;font-size:.82rem;color:var(--ufc-muted)}
.ufc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ufc-check{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:.9rem;cursor:pointer}
.ufc-check input{margin-top:4px;width:auto;height:auto}
.ufc-calc details{margin-top:14px;background:var(--ufc-soft);border-radius:var(--ufc-radius);padding:12px 14px}
.ufc-calc details summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--ufc-ink)}
.ufc-calc details .ufc-grid{margin-top:12px}
.ufc-calc details ul{margin:10px 0 0 18px;padding:0;font-size:.88rem;color:var(--ufc-ink)}
.ufc-calc details li{margin:0 0 6px;list-style:disc}
.ufc-results{margin-top:26px;background:#fff;border:1px solid var(--ufc-line);border-radius:12px;overflow:hidden}
.ufc-big{background:var(--ufc-accent);color:#fff;text-align:center;padding:20px 16px}
.ufc-big .l{font-size:.85rem;opacity:.9;text-transform:uppercase;letter-spacing:.06em}
.ufc-big .v{font-size:2.4rem;font-weight:800;line-height:1.15;margin:4px 0}
.ufc-big .s{font-size:.85rem;opacity:.9}
.ufc-lines{padding:6px 18px}
.ufc-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ufc-line);font-size:.93rem}
.ufc-line:last-child{border-bottom:0}
.ufc-line span:first-child{color:var(--ufc-muted)}
.ufc-line strong{text-align:right}
.ufc-line.em strong{color:var(--ufc-accent)}
.ufc-warn{margin:12px 18px;padding:10px 12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:8px;font-size:.85rem}
.ufc-actions{display:flex;gap:10px;flex-wrap:wrap;padding:0 18px 18px}
.ufc-gorow .ufc-btn{flex:1 1 160px}
.ufc-calc button.ufc-btn,.ufc-calc a.ufc-btn{flex:1 1 160px;display:inline-block;text-align:center;padding:12px 14px;border-radius:8px;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:0;font-family:inherit;line-height:1.2}
.ufc-calc .ufc-btn.primary{background:var(--ufc-accent);color:#fff;border:1px solid var(--ufc-accent)}
.ufc-calc .ufc-btn.primary:hover{background:var(--ufc-accent-dark)}
.ufc-calc .ufc-btn.ghost{background:#fff;color:var(--ufc-accent);border:1px solid var(--ufc-accent)}
.ufc-calc .ufc-btn.ghost:hover{background:rgba(138,90,53,.07);background:color-mix(in srgb,var(--ufc-accent) 8%,transparent)}
.ufc-disclaimer{margin:14px 0 0;font-size:.78rem;color:var(--ufc-muted);text-align:center}
.ufc-hidden{display:none!important}

.ufc-hint.ufc-first{margin:0 0 12px}
.ufc-help{display:block;margin-top:4px;font-size:.76rem;color:var(--ufc-muted);line-height:1.35}
.ufc-incomplete{color:#b45309;font-weight:600}
.ufc-gorow{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.ufc-empty{padding:26px 18px;text-align:center;color:var(--ufc-muted);font-size:.95rem}
.ufc-empty.is-alert{color:#9a3412;background:#fff7ed}
.ufc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:99999;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ufc-accent);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.18);font-size:.95rem}
.ufc-sticky strong{font-size:1.15rem;margin-left:6px}
.ufc-calc .ufc-sticky button{background:#fff;color:var(--ufc-accent);border:0;border-radius:8px;padding:9px 14px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
@media(max-width:768px){.ufc-sticky{display:flex}.ufc-sticky.ufc-hidden{display:none!important}}
@media(max-width:520px){.ufc-calc{padding:18px 14px}.ufc-step .ufc-unit{margin-left:0;width:100%}}

/* ---- v2.2: guided shapes, diagrams, plain-English help ---- */
.ufc-split{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--ufc-line);border-radius:var(--ufc-radius);padding:14px;margin-bottom:12px}
.ufc-split:empty{display:none}
.ufc-split-pic{flex:0 0 190px;max-width:100%}
.ufc-split-txt{flex:1 1 220px;font-size:.92rem}
.ufc-split-txt p{margin:4px 0 8px;color:var(--ufc-ink)}
.ufc-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem}
.ufc-legend li{list-style:none;margin:0;display:flex;align-items:center;gap:6px}
.ufc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:50%;background:var(--ufc-accent);color:#fff;font-weight:700;font-size:.8rem;flex:none}
.ufc-dg{display:block;width:100%;height:auto;max-width:210px}
.ufc-dg .dg-shape{fill:#f1ebe4;stroke:var(--ufc-accent);stroke-width:2;stroke-linejoin:round}
.ufc-dg .dg-shape.dg-c1{fill:#e7dccf}
.ufc-dg .dg-shape.dg-c2{fill:#dccdbb}
.ufc-dg .dg-shape.dg-sub{fill:#fff;stroke-dasharray:5 4}
.ufc-dg .dg-dim{stroke:#6b7280;stroke-width:1.2;fill:none}
.ufc-dg .dg-dash{stroke-dasharray:4 3}
.ufc-dg .dg-t{font-size:9.5px;fill:#374151;font-family:inherit}
.ufc-dg .dg-letter{font-size:22px;font-weight:700;fill:var(--ufc-accent);font-family:inherit}
.ufc-row-top .ufc-badge{align-self:center}
.ufc-row-shape{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ufc-row-shape label{margin:0;font-size:.8rem;font-weight:600;color:var(--ufc-muted)}
.ufc-row-shape select{flex:1 1 220px;max-width:340px}
.ufc-row-body{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ufc-row-pic{flex:0 0 170px;max-width:100%}
.ufc-row-main{flex:1 1 260px;min-width:0}
.ufc-guide{margin:0 0 12px;padding:10px 12px;background:var(--ufc-soft);border-radius:8px;font-size:.88rem;line-height:1.45;color:var(--ufc-ink)}
.ufc-fields label small{font-weight:400}
.ufc-fields .ufc-qty{max-width:150px}
@media(max-width:520px){.ufc-row-pic,.ufc-split-pic{flex:0 0 100%}.ufc-dg{max-width:170px;margin:0 auto}}