/* The design toggles sections with the `hidden` property — the grey console steps
   aside once there is an estimate, and the apply row appears with it. A class that
   sets `display` outranks the browser's own [hidden] rule, so without this the
   toggles silently do nothing. The prototype got this reset from its host page;
   standing on its own, the stylesheet has to carry it. */
[hidden]{display:none !important}


/* Matched to eldoradofurniture.com: white ground, Helvetica Neue, 3px radii,
   steel-blue actions. The site is light-only, and an embedded tool has to look
   like the page around it, so this commits to one palette and paints it all. */
:root{
  --white:#ffffff;
  --ink:#222222;
  --ink-2:#55554f;
  --ink-3:#6b6a62;      /* WCAG 1.4.3: 4.56:1 on the grey console at #77766e — short. */
  --blue:#1e4d8d;        /* BLUCard blue, from the official logo */
  --blue-soft:#eaf0f8;
  --blue-deep:#16396a;   /* BLUCard blue, darkened for hover */
  --steel:#4c779e;       /* the site's own button blue, used lightly */
  --navy:#1e4d8d;        /* Apply CTA carries the BLUCard blue */
  --blue-text:#385672;
  --panel:#ebebeb;       /* site promo-strip grey */
  --panel-soft:#f5f5f5;
  --rule:#dcdcdc;
  --rule-input:#83837d;  /* WCAG 1.4.11: a control's own boundary needs 3:1. */
  --red:#d72229;         /* BLUCard logo red (official 2025 asset) */
  --red-text:#b3131a;    /* the logo red set as text clears 4.5:1; the logo red itself does not */
  --sage:#9bb18c;        /* site announcement band */
  --sage-ink:#556b47;
  --sage-bg:#eef2ea;
  --amber:#8a5a00;
  --amber-bg:#fdf6e8;
  --amber-rule:#e7d3a8;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:26px 20px 60px;display:flex;flex-direction:column;gap:26px}

.masthead{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.masthead img{width:280px;max-width:78%;height:auto}
.masthead h1{font-size:28px;font-weight:300;color:var(--ink);margin:0;letter-spacing:.01em}
.masthead p{color:var(--ink-3);margin:0;max-width:62ch;font-size:14px}
.hr{border:0;border-top:1px dotted #b9b9b9;width:100%;margin:0}


/* console */
.console{background:var(--panel);border-radius:3px;padding:26px;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.console>div{width:100%;max-width:460px}
.console>div:last-child{display:flex;flex-direction:column;align-items:center;gap:2px}
label.cap,.cap{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.amt{display:flex;align-items:baseline;gap:4px;background:var(--white);border:1px solid var(--rule-input);border-radius:3px;padding:8px 11px}
.amt span{font-size:22px;font-weight:300;color:var(--ink-3)}
.amt input{font-family:var(--sans);font-size:30px;font-weight:300;font-variant-numeric:tabular-nums;border:0;background:transparent;color:var(--ink);width:100%;padding:0;outline:none}
.amt input::placeholder{color:#767670;opacity:1}
.amt:focus-within{border-color:var(--blue)}
.hint{font-size:12px;color:var(--ink-3);margin:7px 0 0}
select,input[type=text]{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--white);border:1px solid var(--rule-input);border-radius:3px;padding:10px 11px;width:100%}
.amt input[type=text]{font-size:30px;border:0;border-radius:0;padding:0}
button.go{font-family:var(--sans);font-size:13px;font-weight:400;background:var(--blue);border:1px solid var(--blue);color:#fff;border-radius:3px;padding:10px 26px;cursor:pointer}
/* Idle Continue. The old grey-on-grey was 2.33:1 and sat almost invisibly on the
   grey console; this reads as a real button that is simply not ready yet —
   label 5.94:1 on its own fill, outline 3.56:1 against the console behind it. */
button.go[disabled]{background:#d5d8dd;border-color:#767b85;color:#4a4d52;cursor:not-allowed}
button.go[disabled]:hover{background:#d5d8dd;border-color:#767b85}
button.go:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Read aloud, never drawn — used to warn that a link opens a new tab. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.err{font-size:12.5px;color:var(--red-text);min-height:1.2em;text-align:center;margin:0}

/* board */
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:8px}
.bhright{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pdfbtn{font-family:var(--sans);font-size:12.5px;background:var(--white);border:1px solid var(--blue);color:var(--blue);border-radius:3px;padding:7px 14px;cursor:pointer}
.pdfbtn:hover{background:var(--blue-soft)}
.printonly{display:none}
h2{font-size:18px;font-weight:300;margin:0}
.count{font-size:12.5px;color:var(--ink-3)}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:16px}
@media (max-width:620px){.board{grid-template-columns:1fr}}
.pedit{display:inline-flex;align-items:baseline;gap:2px;border-bottom:1px solid var(--rule-input)}
.pedit span{font-size:16px;font-weight:300;color:var(--ink-3)}
.pedit input{font-family:var(--sans);font-size:26px;font-weight:300;font-variant-numeric:tabular-nums;border:0;background:transparent;color:var(--ink);width:5.2em;padding:0 0 3px;outline:none;text-align:center}
.pedit:focus-within{border-bottom-color:var(--blue)}
select.cplan{font-size:12.5px;padding:8px 9px;color:var(--ink-2)}
.addtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:250px;height:100%;
  border:1px dashed var(--rule-input);border-radius:3px;background:var(--white);color:var(--blue);
  font-family:var(--sans);font-size:13.5px;cursor:pointer;padding:20px;width:100%}
.addtile:hover{border-color:var(--blue);background:var(--blue-soft)}
.addtile .plus{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid currentColor;border-radius:50%;font-size:19px;line-height:1}
dialog{border:0;padding:0;background:transparent;max-width:100%}
dialog::backdrop{background:rgba(34,34,34,.5)}
.cmpsheet{background:var(--white);border-radius:3px;width:min(430px,94vw);box-shadow:0 18px 50px -14px rgba(0,0,0,.45)}
.cmphd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.cmphd h2{font-size:16px}
.cmpx{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;
  min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cmpx:hover{color:var(--red)}
.cmpbd{padding:18px;display:flex;flex-direction:column;align-items:center;gap:16px}
.cmpbd>div{width:100%}
.empty{grid-column:1/-1;border:1px solid var(--rule);border-radius:3px;padding:28px;text-align:center;color:var(--ink-3);font-size:13.5px}

.card{background:var(--white);border:1px solid var(--rule);border-radius:3px;display:flex;flex-direction:column;height:100%;position:relative}
.card-body{flex:1 1 auto}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:var(--blue);border-bottom:0;border-radius:2px 2px 0 0}
.kind{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:none;padding:0}

.del{background:none;border:0;color:#cfe0f5;cursor:pointer;font-size:17px;line-height:1;
  min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.del:hover{color:#fff}
.card-body{padding:15px 12px;display:flex;flex-direction:column;gap:13px;text-align:center}
.price .v{font-size:26px;font-weight:300;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rule);padding-bottom:3px;display:inline-block}
.price .l{font-size:12px;color:var(--ink-3);margin-top:5px}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.figs.two{grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);padding-top:10px}
.fig .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--blue-deep)}
.fig .v .cur{font-size:12px;vertical-align:.35em;font-weight:400}
.fig .v sup{font-size:9px;color:var(--ink-3);font-weight:400}
.fig .l{font-size:11px;color:var(--ink-3);line-height:1.25;margin-top:3px}
.planname{font-size:12.5px;line-height:1.4;border:1px solid var(--rule);border-radius:3px;padding:8px 9px;color:var(--ink-2)}
.warnline{font-size:12px;color:var(--ink-2);line-height:1.4;margin:0}
.minblock{background:var(--panel-soft);border-top:1px solid var(--rule);padding:10px 12px;font-size:12px;line-height:1.45;color:var(--ink-2);text-align:center}
.minblock .mp{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.detbtn{margin-top:auto;width:100%;border:0;border-top:1px solid var(--rule);background:var(--white);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--steel);padding:9px 12px;cursor:pointer}
.detbtn:hover{background:var(--blue-soft);color:var(--blue)}
.detbtn[aria-expanded="true"]{background:var(--blue-soft);color:var(--blue)}
.detbtn .chev{display:inline-block;margin-left:6px;font-size:9px;vertical-align:1px}
.detpanel{position:absolute;top:100%;left:-1px;right:-1px;z-index:6;background:var(--white);
  border:1px solid var(--blue);border-top:0;border-radius:0 0 3px 3px;box-shadow:0 14px 30px -12px rgba(17,28,51,.35);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px;
  font-size:12px;line-height:1.55;color:var(--ink-3);text-align:left}
.detpanel[hidden]{display:none}
.detpanel p{margin:0}
.detpanel .lede{color:var(--ink);font-size:13px}
.printdisc h3{font-size:11px;margin:10px 0 4px}
.printdisc p{margin:0 0 5px}

.applyrow{display:flex;flex-direction:column;align-items:center}
.applybtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.apply{font-family:var(--sans);font-size:14px;background:var(--navy);border:1px solid var(--navy);color:#fff;border-radius:3px;padding:11px 34px;cursor:pointer;text-decoration:none}
.apply:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.apply.secondary{background:var(--white);color:var(--blue);border-color:var(--blue)}
.apply.secondary:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

.legal{font-size:11px;line-height:1.55;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:9px}
.legal p{margin:0}
.legal b{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- print / save-as-PDF ---------- */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  #console,.addtile,.applyrow,.pdfbtn,.del,.bhright .count{display:none!important}
  .wrap{max-width:none;padding:0;gap:16px}
  .masthead{align-items:flex-start;text-align:left;gap:8px}
  .masthead img{width:200px}
  .masthead h1{font-size:20px}
  .masthead p{font-size:11px}
  .printonly{display:block;font-size:11px;color:var(--ink);font-weight:700;letter-spacing:.04em}
  .hr{border-top:1px solid #999}
  .bhead{border-bottom:1px solid #999;padding-bottom:5px}
  h2{font-size:14px}
  .board{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
  .card{border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
  select.cplan{border:0;padding:0;font-size:11px;color:var(--ink);appearance:none;-webkit-appearance:none;text-align:center;background:none}
  .pedit{border-bottom:0}
  .pedit input{font-size:20px;text-align:center}
  .fig .v{font-size:15px}
  .fig .l,.price .l{font-size:9px}
  .minblock,.warnline{font-size:9px}
        .detbtn,.detpanel{display:none!important}
  .printdisc{display:block!important;font-size:7.5px;line-height:1.45;color:#222;border-top:1px solid #999;padding-top:8px}
  .printdisc h3{font-size:8.5px;margin:8px 0 3px}
  .legal{font-size:7.5px;padding-top:8px;border-top:1px solid #999}
}