/* =====================================================================
   Essex Home Garden Rooms - multi-step enquiry form (CF7 form 54).
   Behaviour: ehgr-quote.js. Without JS (.is-js absent) all steps show.
   Every <button> sets its own :hover/:focus colours (Hello Elementor
   turns buttons pink otherwise).
   ===================================================================== */
.ehgr .ehgr-ms { display: flex; flex-direction: column; gap: 28px; }
.ehgr .ehgr-ms-step { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ehgr .ehgr-ms.is-js .ehgr-ms-step[hidden] { display: none; }
.ehgr .ehgr-ms:not(.is-js) .ehgr-ms-step + .ehgr-ms-step { padding-top: 28px; border-top: 1px solid var(--ehgr-hairline-2); }
.ehgr .ehgr-ms-legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-family: var(--ehgr-jakarta); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: var(--ehgr-ink); outline: none; }
.ehgr .ehgr-ms-legend + * { clear: both; }
.ehgr .ehgr-f-q { margin: 6px 0 -6px; font-family: var(--ehgr-manrope); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ehgr-muted); }
.ehgr .ehgr-form .ehgr-f-opt { display: inline; margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ehgr-muted-2); }
.ehgr .ehgr-form label:has(> .ehgr-f-opt) { display: block; }
.ehgr .ehgr-form label:has(> .ehgr-f-opt) > .wpcf7-form-control-wrap { margin-top: 8px; }
.ehgr .ehgr-form .ehgr-f-wide { grid-column: 1 / -1; }

/* Progress */
.ehgr .ehgr-ms-progress { display: flex; flex-direction: column; gap: 14px; }
.ehgr .ehgr-ms:not(.is-js) .ehgr-ms-progress { display: none; }
.ehgr .ehgr-ms-count { margin: 0; font-family: var(--ehgr-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ehgr-gold); }
.ehgr .ehgr-ms-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ehgr .ehgr-ms-dots li { margin: 0; padding: 0; }
.ehgr .ehgr-ms-dot { appearance: none; -webkit-appearance: none; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--ehgr-muted-2); font-family: var(--ehgr-manrope); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; }
.ehgr .ehgr-ms-dot::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--ehgr-hairline-2); transition: background .3s; }
.ehgr .ehgr-ms-dot.is-done::before, .ehgr .ehgr-ms-dot.is-active::before { background: var(--ehgr-gold); }
.ehgr .ehgr-ms-dot.is-active, .ehgr .ehgr-ms-dot.is-done { color: var(--ehgr-ink-2); }
.ehgr .ehgr-ms-dot:hover, .ehgr .ehgr-ms-dot:focus { background: transparent; color: var(--ehgr-ink); }
.ehgr .ehgr-ms-dot:focus-visible { outline: 2px solid var(--ehgr-gold); outline-offset: 4px; }
.ehgr .ehgr-ms-dotnum { display: none; }

/* Choice tiles (CF7 radio with use_label_element) */
.ehgr .ehgr-form .ehgr-f-choice .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: 8px; }
.ehgr .ehgr-form .ehgr-f-choice .wpcf7-list-item { margin: 0; }
.ehgr .ehgr-form .ehgr-f-choice label { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px; border: 1px solid var(--ehgr-border-soft); border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ehgr-ink-2); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.ehgr .ehgr-form .ehgr-f-choice label::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ehgr-muted-2); transition: background .25s, box-shadow .25s; }
.ehgr .ehgr-form .ehgr-f-choice input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ehgr .ehgr-form .ehgr-f-choice label:hover { border-color: var(--ehgr-border-mid); color: var(--ehgr-ink); }
.ehgr .ehgr-form .ehgr-f-choice label:has(input:focus-visible) { outline: 2px solid var(--ehgr-gold); outline-offset: 2px; }
.ehgr .ehgr-form .ehgr-f-choice label.is-checked, .ehgr .ehgr-form .ehgr-f-choice label:has(input:checked) { border-color: var(--ehgr-gold); background: rgba(201,169,97,0.10); color: var(--ehgr-ink); }
.ehgr .ehgr-form .ehgr-f-choice label.is-checked::before, .ehgr .ehgr-form .ehgr-f-choice label:has(input:checked)::before { background: var(--ehgr-gold); box-shadow: 0 0 0 4px rgba(201,169,97,0.2); }
/* Intended use: larger, even tiles */
.ehgr .ehgr-form .ehgr-f-choice-use .wpcf7-form-control { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.ehgr .ehgr-form .ehgr-f-choice-use label { width: 100%; min-height: 58px; border-radius: 4px; padding: 14px 18px; font-size: 15px; }

/* Errors from the step check */
.ehgr .ehgr-form .ehgr-ms-invalid { border-color: #C9654F !important; }

/* Back / Next */
.ehgr .ehgr-ms-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.ehgr .ehgr-ms-next, .ehgr .ehgr-ms-back { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 2px; font-family: var(--ehgr-manrope); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s var(--ehgr-ease); }
.ehgr .ehgr-ms-next { border: 0; background: var(--ehgr-gold); color: var(--ehgr-bg); }
.ehgr .ehgr-ms-next:hover, .ehgr .ehgr-ms-next:focus { background: var(--ehgr-gold-hover); color: var(--ehgr-bg); }
.ehgr .ehgr-ms-next:hover { transform: translateY(-2px); }
.ehgr .ehgr-ms-back { border: 1px solid var(--ehgr-border-mid); background: transparent; color: var(--ehgr-ink); }
.ehgr .ehgr-ms-back:hover, .ehgr .ehgr-ms-back:focus { border-color: var(--ehgr-gold); background: transparent; color: var(--ehgr-ink); }
.ehgr .ehgr-ms-next:focus-visible, .ehgr .ehgr-ms-back:focus-visible { outline: 2px solid var(--ehgr-gold); outline-offset: 3px; }
.ehgr .ehgr-ms .ehgr-f-submit { margin-top: 10px; }
.ehgr .ehgr-ms .ehgr-f-submit .ehgr-ms-back { order: -1; }

/* Sent */
.ehgr .ehgr-ms.is-sent .ehgr-ms-step, .ehgr .ehgr-ms.is-sent .ehgr-ms-progress { display: none; }
.ehgr .ehgr-ms.is-sent ~ .wpcf7-response-output { display: none !important; }
.ehgr .ehgr-ms-done { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--ehgr-gold); border-left-width: 3px; background: var(--ehgr-surface); outline: none; }
.ehgr .ehgr-ms-done-title { margin: 0 0 10px; font-family: var(--ehgr-jakarta); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--ehgr-ink); }
.ehgr .ehgr-ms-done-copy { margin: 0 0 20px; font-family: var(--ehgr-manrope); font-size: 15px; line-height: 1.6; color: var(--ehgr-muted); }

@media (max-width: 600px) {
  .ehgr .ehgr-ms-dotlabel { display: none; }
  .ehgr .ehgr-ms-nav { flex-direction: column-reverse; align-items: stretch; }
  .ehgr .ehgr-ms-next, .ehgr .ehgr-ms-back { justify-content: center; width: 100%; }
  .ehgr .ehgr-ms .ehgr-f-submit { flex-direction: column; align-items: stretch; }
  .ehgr .ehgr-ms .ehgr-f-submit .ehgr-ms-back { order: 2; }
  .ehgr .ehgr-ms .ehgr-f-submit .wpcf7-submit { justify-content: center; width: 100%; }
  .ehgr .ehgr-form .ehgr-f-choice label { font-size: 13px; padding: 10px 14px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ehgr .ehgr-ms-next, .ehgr .ehgr-ms-back, .ehgr .ehgr-form .ehgr-f-choice label { transition: none; }
}