/*
 * Detailed Quote form -- ported 1:1 from the approved artifact
 * (property-type toggle + service-needed cards with icons, checkmarks,
 * phone flag). Previous version restructured the markup to match
 * hhds-web-library's UI-031 BEM pattern (one <label> wrapping both text
 * and <input>) -- that grid-display label silently broke inline flow
 * (the "*" required marker fell to its own line) and dropped the
 * per-service icon glyphs. This version keeps the artifact's simpler,
 * verified structure (separate <label> + <input> inside a field wrapper)
 * with jr-dqf- prefixed classes (generic names like .field/.grid/.card
 * risk colliding with Kadence/Elementor's own CSS on this real site).
 * Tokens are --jr-* throughout -- the vocabulary proven across this
 * whole site, per the earlier real bug (partially-bridged --lib-*).
 */

/* Wraps this form wherever it's embedded outside its own standalone
   preview page (jr_footer_quote_shortcode(), the shared site footer) --
   the form's own text colors (--jr-color-text/-text-muted) are dark,
   correct only on a light surface. Same values as the standalone page's
   .jr-dqf-card (detailed-quote-landing.css), duplicated here rather than
   shared since that file stays scoped to the standalone page only. */
.jr-footer-quote-surface {
  background: var(--jr-color-surface);
  border: 1px solid var(--jr-color-border);
  border-radius: var(--jr-radius-lg);
  box-shadow: var(--jr-shadow-card);
  padding: clamp(20px, 3vw, 32px);
}

.jr-dqf-form {
  display: flex;
  flex-direction: column;
}

.jr-dqf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jr-dqf-form fieldset {
  border: 0;
  margin: 0 0 1.6rem;
  padding: 0;
}
.jr-dqf-form legend {
  font-family: var(--jr-font-action);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--jr-color-heading);
  margin-bottom: 0.7rem;
  padding: 0;
}
.jr-dqf-legend-note {
  font-weight: 500;
  color: var(--jr-color-text-muted);
}

/* Property type segmented control */
.jr-dqf-segmented {
  display: inline-flex;
  border: 1px solid var(--jr-color-border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  background: var(--jr-color-surface-tint);
}
.jr-dqf-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.jr-dqf-segmented label {
  font-family: var(--jr-font-action);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 7px;
  color: var(--jr-color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.jr-dqf-segmented input:checked + label {
  background: var(--jr-color-primary);
  color: var(--jr-color-text-inverse);
}
.jr-dqf-segmented input:focus-visible + label {
  outline: 2px solid var(--jr-color-primary-hover);
  outline-offset: 2px;
}

.jr-dqf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.jr-dqf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .jr-dqf-grid, .jr-dqf-grid--3 { grid-template-columns: 1fr; }
}

.jr-dqf-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.jr-dqf-field--full { grid-column: 1 / -1; }
.jr-dqf-field label {
  font-family: var(--jr-font-action);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--jr-color-graphite);
}
.jr-dqf-opt {
  font-weight: 500;
  color: var(--jr-color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.jr-dqf-field label .jr-dqf-req { color: var(--jr-color-primary); margin-left: 0.15rem; }

.jr-dqf-form input[type="text"],
.jr-dqf-form input[type="tel"],
.jr-dqf-form input[type="email"],
.jr-dqf-form select,
.jr-dqf-form textarea {
  font-family: var(--jr-font-body);
  font-size: 0.98rem;
  color: var(--jr-color-ink);
  background: var(--jr-color-surface);
  border: 1px solid var(--jr-color-border);
  border-radius: 8px;
  padding: 0.72rem 0.85rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jr-dqf-form textarea { resize: vertical; min-height: 84px; font-family: inherit; }

.jr-dqf-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--jr-color-border);
  border-radius: 8px;
  background: var(--jr-color-surface);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jr-dqf-phone:focus-within {
  border-color: var(--jr-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jr-color-primary) 15%, transparent);
}
.jr-dqf-phone__flag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border-right: 1px solid var(--jr-color-border);
  background: var(--jr-color-surface-tint);
  font-size: 1.05rem;
  color: var(--jr-color-text-muted);
  flex: none;
}
.jr-dqf-phone input {
  border: 0;
  border-radius: 0;
  flex: 1;
}
.jr-dqf-phone input:focus-visible {
  outline: none;
  box-shadow: none;
}

.jr-dqf-form input:focus-visible,
.jr-dqf-form select:focus-visible,
.jr-dqf-form textarea:focus-visible {
  outline: none;
  border-color: var(--jr-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jr-color-primary) 15%, transparent);
}

.jr-dqf-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F6A6A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.jr-dqf-conditional {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.95rem;
  margin-top: -0.15rem;
  margin-bottom: 1rem;
  background: var(--jr-color-surface-tint);
  border: 1px dashed var(--jr-color-border);
  border-radius: 10px;
}
.jr-dqf-conditional[hidden] { display: none; }
@media (max-width: 560px) { .jr-dqf-conditional { grid-template-columns: 1fr; } }

/* Service needed cards -- icon + checkmark, matches the artifact.
   5 columns now (Roofing/Siding/Gutters/Chimney/Other, was 4) -- one
   clean row instead of a lone 5th card wrapping alone under a 4-column
   grid. */
.jr-dqf-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 700px) { .jr-dqf-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Real bug found live, 2026-09-09: the input had position:absolute with
   no top/left/etc, relying on its own "static position" fallback --
   fine normally, but once this form got its own internal scroll
   (.jr-footer-quote-surface, overflow-y:auto, added for the footer
   "catch" work), that static position stopped tracking the container's
   scroll offset while the visible label (in normal flow) did, so the
   two drifted apart by exactly however far the user had scrolled the
   form. Clicking a label focuses its real (now offscreen, invisible)
   input, and the browser's own "scroll the focused element into view"
   behavior yanked the whole page down by that same offset (owner:
   "al presionar tipo de servicio manda al final de la seccion"). Fix:
   .jr-dqf-service-item is each pair's own real positioned container
   (was missing entirely -- input and label were bare grid children
   before), input is inset:0 within it explicitly instead of relying on
   a static-position guess. */
.jr-dqf-service-item {
  position: relative;
}
.jr-dqf-service-item input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.jr-dqf-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.9rem 0.85rem;
  border: 1.5px solid var(--jr-color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.jr-dqf-service-card > svg { width: 20px; height: 20px; color: var(--jr-color-primary); }
.jr-dqf-service-card strong {
  font-family: var(--jr-font-action);
  font-size: 0.84rem;
  color: var(--jr-color-heading);
}
.jr-dqf-service-check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--jr-color-border);
  background: var(--jr-color-surface);
  display: grid;
  place-items: center;
}
.jr-dqf-service-check svg {
  width: 11px;
  height: 11px;
  color: transparent;
  stroke: currentColor;
}
.jr-dqf-service-grid input:checked + .jr-dqf-service-card {
  border-color: var(--jr-color-primary);
  background: color-mix(in srgb, var(--jr-color-primary) 5%, var(--jr-color-surface));
}
.jr-dqf-service-grid input:checked + .jr-dqf-service-card .jr-dqf-service-check {
  background: var(--jr-color-primary);
  border-color: var(--jr-color-primary);
}
.jr-dqf-service-grid input:checked + .jr-dqf-service-card .jr-dqf-service-check svg { color: var(--jr-color-text-inverse); }
.jr-dqf-service-grid input:focus-visible + .jr-dqf-service-card {
  outline: 2px solid var(--jr-color-primary-hover);
  outline-offset: 2px;
}

.jr-dqf-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--jr-color-text-muted);
  line-height: 1.5;
  margin: 0.3rem 0 1.6rem;
}
.jr-dqf-consent input {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--jr-color-primary);
  flex: none;
}

.jr-dqf-message {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}
.jr-dqf-message[hidden] { display: none; }
.jr-dqf-message.is-error {
  background: color-mix(in srgb, var(--jr-color-primary) 10%, var(--jr-color-surface));
  color: var(--jr-color-error);
  border: 1px solid color-mix(in srgb, var(--jr-color-primary) 22%, transparent);
}

.jr-dqf-submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.jr-dqf-form button[type="submit"] {
  font-family: var(--jr-font-action);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--jr-color-text-inverse);
  background: var(--jr-color-primary);
  border: 1px solid var(--jr-color-primary);
  border-radius: 8px;
  padding: 0.92rem 2rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.jr-dqf-form button[type="submit"]:hover { background: var(--jr-color-primary-hover); }
.jr-dqf-form button[type="submit"]:active { transform: translateY(1px); }
.jr-dqf-form button[type="submit"][disabled] { opacity: 0.72; pointer-events: none; }

.jr-dqf-submit-note {
  font-size: 0.82rem;
  color: var(--jr-color-text-muted);
}

.jr-dqf-success[hidden] { display: none; }
.jr-dqf-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.jr-dqf-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jr-color-primary) 14%, var(--jr-color-surface-tint));
  color: var(--jr-color-primary);
  flex-shrink: 0;
}
.jr-dqf-success-icon svg { width: 1.5rem; height: 1.5rem; }
.jr-dqf-success-title {
  margin: 0;
  font-family: var(--jr-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--jr-color-heading);
}
.jr-dqf-success-body {
  margin: 0;
  font-family: var(--jr-font-body);
  color: var(--jr-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .jr-dqf-form input,
  .jr-dqf-segmented label,
  .jr-dqf-service-card {
    transition: none;
  }
}