/* Red Giant — estimate save, email capture and consent.
   Built entirely on the custom properties the pages already define, so it
   inherits the estate's typography and colour rather than introducing a second
   design language. No layout of the existing estimator is touched. */

.rgx-save {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line, rgba(0,0,0,.12));
}

.rgx-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px;
}
.rgx-ref {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft, #5b5b5b);
}
.rgx-ref b { color: var(--ink, #1a1a1a); letter-spacing: .06em; }
.rgx-keep {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft, #5b5b5b); opacity: .75;
}

.rgx-sum { list-style: none; margin: 0 0 12px; padding: 0; }
.rgx-sum li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0; border-bottom: 1px dotted var(--line, rgba(0,0,0,.12));
  font-size: 13px; color: var(--ink-soft, #5b5b5b);
}
.rgx-sum li b { color: var(--ink, #1a1a1a); font-weight: 400; text-align: right; }

.rgx-inc { font-size: 12.5px; line-height: 1.65; color: var(--ink-soft, #5b5b5b); margin: 0 0 10px; }
.rgx-inc .k {
  display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink, #1a1a1a); margin-bottom: 3px;
}

.rgx-cta {
  display: block; width: 100%; min-height: 52px; margin: 14px 0 10px;
  background: var(--ember, #c8452f); color: var(--white, #fff); border: 0; border-radius: 3px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; padding: 14px 16px;
}
.rgx-cta:hover { filter: brightness(1.06); }
.rgx-cta:disabled { opacity: .6; cursor: default; }

.rgx-alt { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.rgx-link {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink, #1a1a1a); text-decoration: none;
  border-bottom: 1px solid var(--ember, #c8452f); padding-bottom: 2px; min-height: 24px;
  display: inline-flex; align-items: center;
}
.rgx-link:hover { color: var(--ember, #c8452f); }
.rgx-strong { color: var(--ember, #c8452f); }

.rgx-form { margin-top: 14px; }
.rgx-why { font-size: 12.5px; color: var(--ink-soft, #5b5b5b); margin: 0 0 12px; line-height: 1.6; }
.rgx-row { margin: 0 0 12px; border: 0; padding: 0; }
.rgx-row label, .rgx-row legend, .rgx-lab {
  display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #5b5b5b);
  margin-bottom: 5px; padding: 0;
}
.rgx-row input[type=text], .rgx-row input[type=email],
.rgx-row input[type=tel], .rgx-row input[type=date] {
  width: 100%; min-height: 46px; padding: 11px 12px; font: inherit; font-size: 15px;
  color: var(--ink, #1a1a1a); background: var(--white, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 3px;
}
.rgx-row input:focus-visible, .rgx-opt:focus-visible, .rgx-cta:focus-visible,
.rgx-link:focus-visible, .rgx-c-b:focus-visible {
  outline: 2px solid var(--ember, #c8452f); outline-offset: 2px;
}
.rgx-row input[aria-invalid="true"] { border-color: var(--ember, #c8452f); }

.rgx-date { margin-top: 4px; }
.rgx-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.rgx-opt {
  min-height: 44px; padding: 10px 14px; cursor: pointer;
  background: var(--white, #fff); color: var(--ink, #1a1a1a);
  border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 3px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase;
}
.rgx-opt.on { border-color: var(--ember, #c8452f); color: var(--ember, #c8452f); }
.rgx-when { margin-top: 10px; }

.rgx-err {
  margin: 0 0 10px; padding: 9px 11px; font-size: 13px; line-height: 1.5;
  color: var(--ember, #c8452f); border: 1px solid var(--ember, #c8452f); border-radius: 3px;
  background: rgba(200, 69, 47, .05);
}
.rgx-fine { font-size: 11.5px; color: var(--ink-soft, #5b5b5b); margin: 8px 0 0; line-height: 1.6; }
.rgx-status { font-size: 12.5px; color: var(--ink-soft, #5b5b5b); margin: 8px 0 0; }

.rgx-done { padding: 2px 0; }
.rgx-done-h {
  font-family: var(--display, Georgia, serif); font-size: clamp(17px, 2vw, 21px);
  color: var(--ink, #1a1a1a); margin: 0 0 6px;
}
.rgx-done-p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft, #5b5b5b); margin: 0 0 14px; }
.rgx-done-p b { color: var(--ink, #1a1a1a); font-family: var(--mono, ui-monospace, monospace); }

/* ------------------------------------------------------------------ consent */
.rgx-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--ink, #1a1a1a); color: var(--paper, #faf7f2);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  border-top: 1px solid rgba(250, 247, 242, .18);
}
.rgx-c-copy { flex: 1 1 320px; font-size: 12.5px; line-height: 1.6; }
.rgx-c-copy b { font-weight: 400; color: var(--white, #fff); }
.rgx-c-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rgx-c-b {
  min-height: 44px; padding: 10px 15px; cursor: pointer; border-radius: 3px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase;
  background: none; color: var(--paper, #faf7f2);
  border: 1px solid rgba(250, 247, 242, .35);
}
.rgx-c-yes { background: var(--ember, #c8452f); border-color: var(--ember, #c8452f); color: #fff; }
.rgx-c-ghost { border-style: dashed; }
.rgx-c-pick { flex: 1 1 100%; display: grid; gap: 8px; padding-top: 6px; }
.rgx-c-pick label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.rgx-c-pick input { width: 18px; height: 18px; }
.rgx-c-pick .rgx-c-b { justify-self: start; }

/* The contact bar is pinned to the bottom too. rgx.js measures the banner and
   publishes its height, so the bar stacks above it instead of through it, and
   the page gains enough bottom padding that neither of them covers the last of
   its own content. */
body.rgx-has-consent .rgbar { bottom: var(--rgx-consent-h, 0px); }
@media (max-width: 880px) {
  body.rgx-has-consent.rg-hasbar {
    padding-bottom: calc(var(--rgx-consent-h, 0px) + var(--rgbar-h, 0px) + 16px);
  }
  body.rgx-has-consent:not(.rg-hasbar) {
    padding-bottom: calc(var(--rgx-consent-h, 0px) + 16px);
  }
}
@media (min-width: 881px) {
  body.rgx-has-consent { padding-bottom: calc(var(--rgx-consent-h, 0px) + 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .rgx-cta, .rgx-opt, .rgx-c-b { transition: none; }
}