/* ============================================================
   BLERDINOMICS — quote estimator styles.
   Depends on assets/css/main.css.
   ============================================================ */

body { background: var(--gray-100); }

/* ===== CATEGORY / GATE TILES ===== */
.sim-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.sim-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; min-height: 44px; border: 1.5px solid var(--gray-300);
  background: var(--white); font-family: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--gray-700); cursor: pointer; text-align: center; line-height: 1.2;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
.sim-cat-btn .sim-cat-icon { font-size: 1.4rem; }
.sim-cat-btn:hover { border-color: var(--purple-500); background: var(--purple-100); }
.sim-cat-btn:active { transform: scale(0.98); }
.sim-cat-btn.active { border-color: var(--purple-700); background: var(--purple-800); color: var(--white); }

.sim-gate-label, .sim-group-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-500); margin: 0 0 8px;
}
.sim-group-title { margin: 18px 0 8px; }
.sim-gate-block { margin-bottom: 22px; }
#sim-groups > .sim-group-title:first-child { margin-top: 0; }

/* escape hatch: "not sure? book a call" */
.sim-escape {
  font-size: 0.82rem; color: var(--gray-700); margin: -8px 0 22px;
}
.sim-escape a { color: var(--purple-700); font-weight: 700; }

/* ===== CHECKLIST ROWS ===== */
.sim-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-height: 48px; border: 1.5px solid var(--gray-300);
  cursor: pointer; background: var(--white); margin-bottom: 10px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.sim-item:last-child { margin-bottom: 0; }
.sim-item:hover { border-color: var(--purple-500); background: var(--purple-100); }
.sim-item:active { transform: scale(0.995); }
.sim-item.checked { border-color: var(--purple-700); background: var(--purple-100); }
.sim-item.checked.sim-item-base { cursor: default; border-color: var(--gold-500); background: var(--gold-100); }
.sim-item.checked.sim-item-base .sim-item-check { background: var(--gold-500); border-color: var(--gold-500); }
.sim-item-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sim-item-check {
  width: 20px; height: 20px; border: 1.5px solid var(--gray-300);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s; background: var(--white);
}
.sim-item[data-input-type="radio"] .sim-item-check { border-radius: 50%; }
.sim-item.checked .sim-item-check { background: var(--purple-700); border-color: var(--purple-700); }
.sim-item.checked .sim-item-check::after {
  content: ''; width: 8px; height: 5px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px); display: block;
}
.sim-item[data-input-type="radio"].checked .sim-item-check::after {
  width: 9px; height: 9px; border-radius: 50%; background: white; border: none; transform: none;
}
/* satisfying spring when a box ticks on */
@media (prefers-reduced-motion: no-preference) {
  .sim-item.just-checked .sim-item-check { animation: checkSpring 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes checkSpring {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
}
.sim-item-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700); line-height: 1.3; }
.sim-item-price { font-size: 0.9rem; font-weight: 800; color: var(--purple-800); flex-shrink: 0; white-space: nowrap; }

/* ===== SINGLE-SELECT ACCORDIONS ===== */
.sim-accordion { border: 1.5px solid var(--gray-300); background: var(--white); margin-bottom: 10px; }
.sim-accordion:last-child { margin-bottom: 0; }
.sim-accordion-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-height: 48px; cursor: pointer; transition: background 0.2s;
  width: 100%; background: none; border: none; font-family: inherit; text-align: left;
}
.sim-accordion-header:hover, .sim-accordion-header.has-value { background: var(--purple-100); }
.sim-accordion-header.open { border-bottom: 1.5px solid var(--gray-300); }
.sim-accordion-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700); flex-shrink: 0; }
.sim-accordion-summary {
  font-size: 0.85rem; font-weight: 700; color: var(--purple-800); flex-grow: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right;
}
.sim-accordion-placeholder { color: var(--gray-500); font-weight: 500; }
.sim-accordion-change {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gray-500); border: 1px solid var(--gray-300); padding: 2px 7px; flex-shrink: 0;
}
.sim-accordion-arrow { font-size: 0.7rem; color: var(--purple-700); transition: transform 0.2s; flex-shrink: 0; }
.sim-accordion-header.open .sim-accordion-arrow { transform: rotate(180deg); }
.sim-accordion-body { padding: 14px 16px 16px; }
.sim-accordion-body .sim-item { margin-bottom: 8px; }
.sim-accordion-body .sim-item:last-of-type { margin-bottom: 0; }
.sim-accordion-save-btn {
  width: 100%; margin-top: 10px; padding: 12px 16px; min-height: 44px;
  border: 1.5px solid var(--purple-700); background: var(--purple-800); color: var(--white);
  font-weight: 700; font-size: 0.82rem; font-family: inherit; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.sim-accordion-save-btn:hover:not(:disabled) { background: var(--purple-700); }
.sim-accordion-save-btn:active:not(:disabled) { transform: scale(0.99); }
.sim-accordion-save-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
  background: var(--gray-300); border-color: var(--gray-300); color: var(--gray-500);
}

/* ===== QUANTITY ROWS ===== */
.sim-qty-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border: 1.5px solid var(--gray-300);
  background: var(--white); margin-bottom: 10px;
}
.sim-qty-row:last-child { margin-bottom: 0; }
.sim-qty-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700); }
.sim-qty-unit { font-size: 0.78rem; font-weight: 600; color: var(--gray-500); margin-left: 6px; }
.sim-qty-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sim-qty-btn {
  width: 44px; height: 44px; border: 1.5px solid var(--purple-700);
  background: var(--white); color: var(--purple-800); font-weight: 800; font-size: 1.1rem;
  line-height: 1; cursor: pointer; font-family: inherit;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.sim-qty-btn:hover { background: var(--purple-800); color: var(--white); }
.sim-qty-btn:active { transform: scale(0.95); }
.sim-qty-value { min-width: 20px; text-align: center; font-weight: 800; color: var(--gray-900); font-size: 0.95rem; }

.sim-specify { margin-bottom: 10px; }

/* ===== CONSULTATION-ONLY NOTICE ===== */
.sim-consult-box {
  padding: 28px 26px; background: var(--purple-100); border: 1.5px solid var(--purple-200);
  text-align: center; margin-bottom: 18px;
}
.sim-consult-box h4 { font-size: 1rem; font-weight: 800; color: var(--purple-900); margin-bottom: 8px; }
.sim-consult-box p { font-size: 0.85rem; color: var(--gray-700); margin-bottom: 18px; line-height: 1.6; }
.sim-consult-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; min-height: 44px;
  border: 2px solid var(--purple-800); color: var(--purple-800);
  font-weight: 700; font-size: 0.85rem; text-decoration: none;
  transition: background 0.2s, color 0.2s; background: var(--white);
}
.sim-consult-btn:hover { background: var(--purple-800); color: var(--white); }

/* ===== TOTAL BAR ===== */
.sim-total-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--purple-900); color: var(--white); padding: 16px 20px; margin-bottom: 10px;
}
.sim-total-label {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
}
.sim-total-value { font-size: 1.7rem; font-weight: 800; color: var(--gold-400); font-variant-numeric: tabular-nums; }
/* one gold pulse when the total changes */
@media (prefers-reduced-motion: no-preference) {
  .sim-total-value.pulse { animation: totalPulse 0.45s ease-out; }
  @keyframes totalPulse {
    0% { transform: scale(1); text-shadow: none; }
    40% { transform: scale(1.08); text-shadow: 0 0 18px rgba(245,158,11,0.8); }
    100% { transform: scale(1); text-shadow: none; }
  }
}
.sim-disclaimer { font-size: 0.78rem; color: var(--gray-500); margin-bottom: 8px; line-height: 1.5; }

/* ===== PLAIN-LANGUAGE SUMMARY ===== */
.sim-summary {
  border: 1.5px solid var(--purple-200); background: var(--purple-100);
  padding: 20px 22px; margin: 24px 0 8px;
}
.sim-summary-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--purple-800); margin-bottom: 10px;
}
.sim-summary-empty { font-size: 0.88rem; color: var(--gray-700); line-height: 1.6; }
.sim-summary-list { list-style: none; margin: 0 0 12px; }
.sim-summary-list li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 0.88rem; color: var(--gray-900); padding: 5px 0;
  border-bottom: 1px dashed var(--purple-200);
}
.sim-summary-list li:last-child { border-bottom: none; }
.sim-summary-list .sum-price { font-weight: 700; color: var(--purple-800); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-summary-total {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 0.95rem; font-weight: 800; color: var(--purple-900);
  padding-top: 10px; border-top: 1.5px solid var(--purple-200);
}
.sim-summary-actions { margin-top: 14px; font-size: 0.8rem; color: var(--gray-700); }
.sim-summary-actions a, .sim-summary-actions button {
  color: var(--purple-700); font-weight: 700; background: none; border: none;
  font-family: inherit; font-size: 0.8rem; cursor: pointer; padding: 4px 0;
  text-decoration: underline;
}

/* ===== STICKY MOBILE ESTIMATE BAR ===== */
.sticky-estimate {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--purple-950); color: var(--white);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-estimate-info { display: flex; flex-direction: column; min-width: 0; }
.sticky-estimate-count { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; }
.sticky-estimate-total { font-size: 1.25rem; font-weight: 800; color: var(--gold-400); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sticky-estimate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-400); color: var(--purple-950);
  font-weight: 800; font-size: 0.85rem; font-family: inherit;
  padding: 12px 18px; min-height: 46px; border: none; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.sticky-estimate-btn:hover { background: #fbbf24; }
.sticky-estimate-btn:active { transform: scale(0.98); }
@media (max-width: 768px) {
  .sticky-estimate.visible { display: flex; }
  body.has-sticky-bar { padding-bottom: 84px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .form-card { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .sim-cat-grid { grid-template-columns: 1fr 1fr; }
  .sim-qty-row { flex-wrap: wrap; padding: 10px 12px; }
  .sim-cat-btn { font-size: 0.72rem; padding: 12px 6px; }
  .sim-cat-btn .sim-cat-icon { font-size: 1.2rem; }
  .sim-item { padding: 12px; }
  .sim-item-label, .sim-item-price { font-size: 0.85rem; }
  .sim-accordion-header { padding: 12px; }
  .sim-accordion-summary { font-size: 0.78rem; }
  .sim-total-bar { padding: 14px 16px; }
  .sim-total-value { font-size: 1.4rem; }
}