/*
 * Rovins Flooring estimator styles.
 * Everything is scoped under #estimator so it can be dropped into any page
 * (the standalone index.html or the main estimates.html) without touching the
 * host page's own styles.
 */
#estimator {
  --brand: #efaa15;
  --muted: #777;
  --line: #e5e5e5;
  --panel: #f6f6f7;
}
#estimator, #estimator *, #estimator *::before, #estimator *::after { box-sizing: border-box; }

#estimator .est-hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
#estimator .est-step-title { margin: 0 0 12px; font-size: 18px; }
#estimator .est-services { display: flex; flex-direction: column; gap: 10px; }
#estimator .est-service {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
#estimator .est-service:hover { border-color: var(--brand); }
#estimator .est-service:has(input:checked) { border-color: var(--brand); background: #fdf3df; }
#estimator .est-service input { accent-color: var(--brand); width: 18px; height: 18px; }
#estimator .est-muted { color: var(--muted); margin: 0; }
#estimator .est-error { color: #b00; }

#estimator .est-field { margin-bottom: 20px; }
#estimator .est-field label { display: block; font-weight: 600; margin-bottom: 6px; }
#estimator .est-field input {
  width: 160px; padding: 8px 10px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 6px;
}
#estimator .est-field input:focus,
#estimator .est-service input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

#estimator .est-group {
  margin: 14px 0; padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#estimator .est-group[hidden] { display: none; }
#estimator .est-group-title { font-weight: 600; margin-bottom: 6px; }
#estimator .est-opt-row { display: flex; align-items: center; gap: 8px; }
#estimator .est-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px; margin: 0; cursor: pointer;
}
#estimator .est-opt input { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
#estimator .est-note { color: var(--muted); font-size: 13px; font-style: italic; margin: 6px 0 0; }

/* Info toggle (inline disclosure) */
#estimator .est-tip {
  flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; cursor: pointer;
  font: italic 700 12px/1 Georgia, serif;
  transition: background .15s;
}
#estimator .est-tip:hover { background: #d9970f; }
#estimator .est-tip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(239, 170, 21, .4); }
#estimator .est-tip[aria-expanded="true"] { background: #2a2a2e; }

#estimator .est-tip-body {
  margin: 6px 0 4px 26px; padding: 9px 12px;
  background: #2a2a2e; color: #fff;
  font-size: 13px; line-height: 1.45; border-radius: 8px; max-width: 360px;
}
#estimator .est-tip-body[hidden] { display: none; }
/* On real hover devices, reveal on hover too (mobile relies on tap). */
@media (hover: hover) {
  #estimator .est-option:hover .est-tip-body { display: block; }
}

#estimator .est-result { margin-top: 8px; }
#estimator .est-list { list-style: none; margin: 0 0 12px; padding: 0; }
#estimator .est-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px dotted var(--line);
}
#estimator .est-total { font-size: 20px; }
#estimator .est-total strong { color: var(--brand); }

#estimator .est-req { color: #c0392b; }
#estimator .est-required ul { margin: 6px 0 0; padding-left: 20px; }
#estimator .est-required li { color: #c0392b; }