/* DTJ Headboard Configurator - DTJ greens, gold, stone and paper; type comes from the site */
.dtjhb {
  --dtjhb-ink: #20382B;
  --dtjhb-green: #2F5D47;
  --dtjhb-gold: #DDBC83;
  --dtjhb-paper: #F5F1E8;
  --dtjhb-stone: #E6E0D2;
  --dtjhb-line: #D6CFBF;
  --dtjhb-muted: #6B6A63;
  --dtjhb-board: #E7DFCC;
  --dtjhb-fill: #CFE6D7;
  --dtjhb-bad: #9B3D2E;
  color: var(--dtjhb-ink);
  font-size: 16px;
  line-height: 1.45;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dtjhb *, .dtjhb *::before, .dtjhb *::after { box-sizing: border-box; }
.dtjhb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.dtjhb-step { background: #fff; border: 1px solid var(--dtjhb-line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.dtjhb-step h3, .dtjhb-order h3, .dtjhb-done h3 { margin: 0 0 12px; font-size: 1.2em; color: var(--dtjhb-ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dtjhb-step h3 span { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--dtjhb-ink); color: var(--dtjhb-paper);
  align-items: center; justify-content: center; font-size: 0.85em; flex: 0 0 auto; }
.dtjhb-step h3 small, .dtjhb-label small, .dtjhb-row label small { font-weight: normal; color: var(--dtjhb-muted); font-size: 0.82em; }
.dtjhb-hint, .dtjhb-note { color: var(--dtjhb-muted); font-size: 0.9em; margin: 0 0 10px; }
.dtjhb-note { margin: 10px 0 0; }
.dtjhb-label { font-weight: 600; margin: 4px 0 8px; }

/* style cards */
.dtjhb-group + .dtjhb-group { margin-top: 10px; }
.dtjhb-gname { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dtjhb-green); margin: 0 0 6px; }
.dtjhb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dtjhb-card { appearance: none; background: var(--dtjhb-paper); border: 1px solid var(--dtjhb-line); border-radius: 8px; padding: 6px 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--dtjhb-ink); font: inherit; font-size: 0.9em; transition: border-color .15s, box-shadow .15s; }
.dtjhb-card canvas { width: 100%; max-width: 132px; height: auto; display: block; }
.dtjhb-card:hover { border-color: var(--dtjhb-green); }
.dtjhb-card.on { border: 2px solid var(--dtjhb-green); padding: 5px 5px 7px; background: #EEF5F0; box-shadow: 0 0 0 3px rgba(47, 93, 71, 0.12); font-weight: 600; }
.dtjhb-card:focus-visible, .dtjhb button:focus-visible, .dtjhb input:focus-visible, .dtjhb select:focus-visible, .dtjhb textarea:focus-visible {
  outline: 3px solid var(--dtjhb-gold); outline-offset: 2px; }

/* bed sizes */
.dtjhb-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dtjhb-beds button { appearance: none; background: #fff; border: 1px solid var(--dtjhb-line); border-radius: 8px; padding: 8px 8px; text-align: left; cursor: pointer;
  font: inherit; color: var(--dtjhb-ink); display: flex; flex-direction: column; gap: 1px; }
.dtjhb-beds button b { font-size: 0.95em; }
.dtjhb-beds button span { font-size: 0.8em; color: var(--dtjhb-muted); }
.dtjhb-beds button em { font-style: normal; font-size: 0.82em; color: var(--dtjhb-green); font-weight: 600; }
.dtjhb-beds button:hover { border-color: var(--dtjhb-green); }
.dtjhb-beds button.on { border: 2px solid var(--dtjhb-green); padding: 7px; background: #EEF5F0; }
.dtjhb-custom { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; border: 2px solid transparent; }
.dtjhb-custom.on { border-color: var(--dtjhb-green); background: #EEF5F0; }
.dtjhb-custom + .dtjhb-hint { margin-top: -2px; }
/* the site theme colours every button pink on hover / focus: keep ours as designed */
.dtjhb button:hover, .dtjhb button:focus { text-decoration: none; }
.dtjhb .dtjhb-card:hover, .dtjhb .dtjhb-card:focus { background: var(--dtjhb-paper); color: var(--dtjhb-ink); }
.dtjhb .dtjhb-card.on:hover, .dtjhb .dtjhb-card.on:focus { background: #EEF5F0; }
.dtjhb .dtjhb-beds button:hover, .dtjhb .dtjhb-beds button:focus { background: #fff; color: var(--dtjhb-ink); }
.dtjhb .dtjhb-beds button.on:hover, .dtjhb .dtjhb-beds button.on:focus { background: #EEF5F0; }
.dtjhb .dtjhb-pm:hover, .dtjhb .dtjhb-pm:focus { background: var(--dtjhb-stone); color: var(--dtjhb-ink); }
.dtjhb .dtjhb-seg button:hover, .dtjhb .dtjhb-seg button:focus { background: var(--dtjhb-paper); color: var(--dtjhb-ink); }
.dtjhb .dtjhb-seg button.on:hover, .dtjhb .dtjhb-seg button.on:focus { background: var(--dtjhb-ink); color: var(--dtjhb-paper); }
.dtjhb .dtjhb-link:hover, .dtjhb .dtjhb-link:focus { background: none; color: var(--dtjhb-green); }
.dtjhb .dtjhb-go:hover, .dtjhb .dtjhb-go:focus { background: var(--dtjhb-gold); color: var(--dtjhb-ink); }

/* rows, number boxes */
.dtjhb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.dtjhb-row > label { flex: 1 1 210px; min-width: 0; }
.dtjhb-num { display: inline-flex; align-items: stretch; }
.dtjhb-num input { width: 92px; text-align: right; padding: 7px 8px; border: 1px solid #B9B2A2; border-left: 0; border-right: 0; font: inherit; color: var(--dtjhb-ink);
  background-color: #fff; background-repeat: no-repeat; cursor: ew-resize; touch-action: pan-y; border-radius: 0; }
.dtjhb-num input:focus { cursor: text; outline: none; box-shadow: inset 0 0 0 2px var(--dtjhb-gold); }
.dtjhb-num input.auto { color: #7A776D; font-style: italic; }
.dtjhb-pm { appearance: none; width: 34px; border: 1px solid #B9B2A2; background: var(--dtjhb-paper); color: var(--dtjhb-ink); font: inherit; font-size: 1.1em; cursor: pointer; }
.dtjhb-pm:first-child { border-radius: 6px 0 0 6px; }
.dtjhb-pm:last-child { border-radius: 0 6px 6px 0; }
.dtjhb-pm:hover { background: var(--dtjhb-stone); }
.dtjhb-unit { color: var(--dtjhb-muted); font-size: 0.88em; }
html.dtjhb-dragging, html.dtjhb-dragging * { cursor: ew-resize !important; user-select: none; }

.dtjhb-seg { display: inline-flex; border: 1px solid #B9B2A2; border-radius: 8px; overflow: hidden; }
.dtjhb-seg button { appearance: none; border: 0; background: #fff; padding: 7px 14px; font: inherit; color: var(--dtjhb-ink); cursor: pointer; }
.dtjhb-seg button + button { border-left: 1px solid #B9B2A2; }
.dtjhb-seg button.on { background: var(--dtjhb-ink); color: var(--dtjhb-paper); }
.dtjhb-link { appearance: none; background: none; border: 0; padding: 0; color: var(--dtjhb-green); text-decoration: underline; cursor: pointer; font: inherit; }

/* drawing + price */
/* the drawing and price stay in view while the steps on the left scroll - only when they fit on the screen.
   The script sets --dtjhb-top below the site's fixed header and adds dtjhb-stick. */
.dtjhb-stick .dtjhb-side { position: sticky; top: var(--dtjhb-top, 24px); align-self: start; }
.dtjhb-stickpv .dtjhb-side { align-self: stretch; }
.dtjhb-stickpv .dtjhb-sticky { display: contents; } /* so the drawing sticks within the full-height column */
.dtjhb-stickpv .dtjhb-preview { position: sticky; top: var(--dtjhb-top, 24px); z-index: 2; }
.dtjhb-preview { background: var(--dtjhb-paper); border: 1px solid var(--dtjhb-line); border-radius: 10px; padding: 10px 10px 8px; }
.dtjhb-preview canvas { width: 100%; display: block; }
.dtjhb-back { display: inline-flex; gap: 6px; align-items: center; font-size: 0.85em; color: var(--dtjhb-muted); margin: 4px 4px 0; cursor: pointer; }
.dtjhb-msg { font-size: 0.88em; color: var(--dtjhb-muted); min-height: 1em; margin: 4px; }
.dtjhb-msg.bad { color: var(--dtjhb-bad); font-weight: 600; }
.dtjhb-price { margin: 14px 0 10px; padding: 14px 16px; background: var(--dtjhb-ink); color: var(--dtjhb-paper); border-radius: 10px; }
.dtjhb-amount { font-size: 1.9em; font-weight: 700; line-height: 1.1; }
.dtjhb-amount small { font-size: 0.5em; font-weight: normal; }
.dtjhb-inc { color: var(--dtjhb-gold); margin-top: 2px; }
.dtjhb-pnote { font-size: 0.85em; opacity: 0.9; margin-top: 6px; }
.dtjhb-qty { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dtjhb-qty label { white-space: nowrap; }
.dtjhb .dtjhb-qty select { width: auto; flex: 0 0 auto; min-width: 72px; padding: 6px 8px; font: inherit; border: 1px solid #B9B2A2; border-radius: 6px; background: #fff; }
.dtjhb-go { appearance: none; width: 100%; border: 0; border-radius: 8px; padding: 14px 18px; background: var(--dtjhb-gold); color: var(--dtjhb-ink); font: inherit;
  font-weight: 700; font-size: 1.05em; cursor: pointer; }
.dtjhb-go:hover { filter: brightness(0.96); }
.dtjhb-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* order form */
.dtjhb-order, .dtjhb-done { background: #fff; border: 1px solid var(--dtjhb-line); border-radius: 10px; padding: 20px; margin-top: 20px; max-width: 760px; }
.dtjhb-summary { background: var(--dtjhb-paper); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.dtjhb-f { margin: 10px 0; }
.dtjhb-f label, .dtjhb-fl { display: block; font-weight: 600; margin-bottom: 4px; }
.dtjhb-f label b { color: var(--dtjhb-bad); }
.dtjhb-f input[type=text], .dtjhb-f input[type=email], .dtjhb-f input[type=tel], .dtjhb-f textarea { width: 100%; padding: 9px 10px; border: 1px solid #B9B2A2; border-radius: 6px; font: inherit; }
.dtjhb-check label { font-weight: normal; display: flex; gap: 8px; align-items: center; }
.dtjhb-err { color: var(--dtjhb-bad); font-weight: 600; min-height: 1em; margin: 8px 0; }
.dtjhb-small { font-size: 0.85em; color: var(--dtjhb-muted); }
.dtjhb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* dtjhb-narrow (one column) is set by the script when the configurator is under 900px wide (a phone, or a narrow page column);
   dtjhb-usebar (the price bar at the foot of the screen) when it is narrow or the drawing can't stay in view (a short screen) */
.dtjhb-bar { display: none; }
.dtjhb-usebar .dtjhb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--dtjhb-ink); color: var(--dtjhb-paper); transform: translateY(110%); transition: transform .2s; box-shadow: 0 -4px 14px rgba(0,0,0,.15); }
.dtjhb-usebar .dtjhb-bar.on { transform: none; }
.dtjhb.dtjhb-usebar { padding-bottom: 84px; }
.dtjhb-usebar .dtjhb-bar canvas { background: var(--dtjhb-paper); border-radius: 6px; flex: 0 0 auto; }
.dtjhb-usebar .dtjhb-barprice { flex: 1 1 auto; font-size: 0.95em; line-height: 1.25; }
.dtjhb-usebar .dtjhb-barprice span { color: var(--dtjhb-gold); font-size: 0.85em; }
.dtjhb-usebar .dtjhb-bar .dtjhb-go { width: auto; padding: 10px 18px; }
.dtjhb-narrow .dtjhb-grid { grid-template-columns: minmax(0, 1fr); }
.dtjhb-narrow .dtjhb-side { order: -1; }
.dtjhb-narrow .dtjhb-side { position: static; }
.dtjhb-narrow .dtjhb-row > label { flex-basis: 100%; }
@media (min-width: 701px) {
  /* on a wider screen the bar sits centred, not edge to edge */
  .dtjhb-usebar .dtjhb-bar { left: 50%; right: auto; width: min(100%, 720px); transform: translate(-50%, 110%); border-radius: 10px 10px 0 0; }
  .dtjhb-usebar .dtjhb-bar.on { transform: translate(-50%, 0); }
}