/* HP Price Calculator — one page, two columns on desktop, one on a phone. */
:root {
  --calc-bg: #F3F6F4;
  --calc-surface: #FFFFFF;
  --calc-ink: #17211B;
  --calc-muted: #4A5A50;
  --calc-line: #DCE4DF;
  --calc-field: #C8D3CC;
  --calc-accent: #17663F;
  --calc-accent-soft: #E6F2EB;
  --calc-dark: #17211B;
  --calc-go: #2FB36B;
}

body {
  margin: 0;
  background: var(--calc-bg);
  color: var(--calc-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.calc-page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.calc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.calc-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.calc-head p { margin: 4px 0 0; font-size: 15px; color: var(--calc-muted); }

.calc-mode { display: flex; background: #E3EAE6; border-radius: 12px; padding: 4px; gap: 4px; }
.calc-mode button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 9px; background: transparent; color: #33443A; font-size: 15px; font-weight: 600; cursor: pointer; }
.calc-mode button.is-active { background: var(--calc-surface); color: var(--calc-ink); box-shadow: 0 1px 3px rgba(23, 33, 27, 0.12); }

.calc-error { background: #FDECEC; border: 1px solid #F3C2C2; color: #8A1F1F; border-radius: 12px; padding: 14px 18px; font-size: 15px; }

.calc-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.calc-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.calc-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

.calc-card { background: var(--calc-surface); border: 1px solid var(--calc-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.calc-card-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; font-weight: 600; }
.calc-step { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--calc-accent); color: #FFFFFF; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.calc-field > label, .calc-label { font-size: 14px; font-weight: 600; margin: 0; }
.calc-hint { font-weight: 400; color: var(--calc-muted); }
.calc-field select, .calc-field input[type="number"] {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--calc-field); border-radius: 10px; font-size: 16px;
  background: var(--calc-surface); color: var(--calc-ink);
}

/* Two-way choices and option pills: real radios, styled as buttons. */
.calc-seg { display: flex; gap: 8px; }
.calc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-seg label, .calc-pills label { position: relative; margin: 0; cursor: pointer; }
.calc-seg label { flex: 1 1 0; }
.calc-seg input, .calc-pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-seg span, .calc-pills span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--calc-field); border-radius: 10px; background: var(--calc-surface);
  color: #33443A; font-size: 15px; font-weight: 500; text-align: center; box-sizing: border-box;
}
.calc-pills span { border-radius: 999px; min-width: 72px; }
.calc-seg input:checked + span { border: 1.5px solid var(--calc-accent); background: var(--calc-accent-soft); color: var(--calc-accent); font-weight: 600; }
.calc-pills input:checked + span { border-color: var(--calc-accent); background: var(--calc-accent); color: #FFFFFF; font-weight: 600; }
.calc-seg input:focus-visible + span, .calc-pills input:focus-visible + span,
.calc-pills button:focus-visible { outline: 3px solid #8EC9A6; outline-offset: 2px; }
.calc-pills button {
  min-height: 44px; min-width: 72px; padding: 0 16px; border: 1px solid var(--calc-field); border-radius: 999px;
  background: var(--calc-surface); color: #33443A; font-size: 15px; font-weight: 500; cursor: pointer;
}
.calc-pills button.is-active { border-color: var(--calc-accent); background: var(--calc-accent); color: #FFFFFF; font-weight: 600; }
.calc-pills-empty { font-size: 14px; color: var(--calc-muted); }

/* A required field left empty (set by validateCalculatorForm). */
.calc-field-error { margin: 0; font-size: 13px; font-weight: 600; color: #B42318; }
.has-error > label, .has-error > .calc-label { color: #B42318; }
/* .calc-page prefix: must outrank the ".calc-page .choices__inner" sizing rule. */
.calc-page .has-error select, .calc-page .has-error .choices__inner,
.calc-page .has-error .calc-seg span, .calc-page .has-error .calc-pills span,
.calc-page .has-error .calc-pills button { border: 1.5px solid #D92D20; }
.calc-page .has-error .choices__inner, .calc-page .has-error > select { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15); }
#package_categories_container.has-error > .calc-field-error { margin-top: 10px; }
.calc-go:disabled { opacity: 0.75; cursor: progress; }
.calc-noi-select { display: none; }

/* Package items (rows are built by hp_price_calculator.js). */
.pkg-items { display: flex; flex-direction: column; gap: 12px; }
.pkg-items-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pkg-items-head strong { font-size: 15px; }
.pkg-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 96px 44px; gap: 10px; align-items: center;
  padding: 12px; border: 1px solid var(--calc-line); border-radius: 12px; background: #FAFCFB;
}
.pkg-row .package-qty { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--calc-field); border-radius: 10px; font-size: 16px; text-align: center; }
.pkg-remove { width: 44px; height: 44px; border: 1px solid var(--calc-line); border-radius: 10px; background: var(--calc-surface); color: #9B2C2C; font-size: 18px; cursor: pointer; }
.pkg-add {
  min-height: 52px; width: 100%; border: 1.5px dashed #9DB5A6; border-radius: 12px; background: var(--calc-surface);
  color: var(--calc-accent); font-size: 15px; font-weight: 600; cursor: pointer;
}
.pkg-add:disabled { color: #8A968F; border-color: var(--calc-line); cursor: not-allowed; }
.pkg-empty { font-size: 14px; color: var(--calc-muted); }

/* Searchable dropdowns (Choices.js) sized like the other fields. */
.calc-page .choices { margin-bottom: 0; }
.calc-page .choices__inner { min-height: 48px; border: 1px solid var(--calc-field); border-radius: 10px; background: var(--calc-surface); font-size: 16px; padding: 8px 12px 4px; box-sizing: border-box; }
.calc-page .pkg-row .choices__inner { min-height: 44px; padding-top: 6px; }
.calc-page .choices__list--dropdown, .calc-page .choices__list[aria-expanded] { z-index: 20; border-radius: 10px; }

/* Summary panel. */
.calc-summary { background: var(--calc-dark); color: #FFFFFF; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.calc-summary-label { font-size: 13px; font-weight: 600; color: #B9C9BF; text-transform: uppercase; letter-spacing: 0.05em; }
.calc-summary-big { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.calc-summary-sub { font-size: 14px; color: #B9C9BF; }
.calc-summary-empty { font-size: 15px; color: #D3DED7; line-height: 1.5; }
.calc-rule { height: 1px; background: #34433A; }
.calc-rows { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.calc-rows div { display: flex; justify-content: space-between; gap: 12px; }
.calc-rows dt { color: #D3DED7; font-weight: 400; }
.calc-rows dd { margin: 0; font-weight: 600; text-align: right; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-total span:first-child { font-size: 15px; color: #D3DED7; }
.calc-total span:last-child { font-size: 22px; font-weight: 700; }
.calc-go { min-height: 52px; width: 100%; border: 0; border-radius: 12px; background: var(--calc-go); color: #0B1F14; font-size: 16px; font-weight: 700; cursor: pointer; }
.calc-go:hover { background: #3BC77B; }

.calc-details { background: var(--calc-surface); border: 1px solid var(--calc-line); border-radius: 16px; padding: 18px 20px; }
.calc-details summary { font-size: 15px; font-weight: 600; cursor: pointer; min-height: 28px; }
.calc-details dl { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.calc-details dl div { display: flex; justify-content: space-between; gap: 12px; }
.calc-details dt { color: var(--calc-muted); font-weight: 400; }
.calc-details dd { margin: 0; font-weight: 600; text-align: right; }
.calc-details h3 { margin: 16px 0 0; font-size: 14px; font-weight: 600; }
.calc-table-wrap { overflow-x: auto; margin-top: 12px; }
.calc-table-wrap table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.calc-table-wrap th, .calc-table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--calc-line); text-align: right; white-space: nowrap; }
.calc-table-wrap th:first-child, .calc-table-wrap td:first-child { text-align: left; }

/* Per item breakdown (package results). */
.calc-breakdown { gap: 12px; }
.calc-breakdown-note { margin: 0; font-size: 14px; color: var(--calc-muted); }
.calc-breakdown-table { margin-top: 4px; border: 1px solid var(--calc-line); border-radius: 12px; }
.calc-breakdown-table table { font-size: 14px; }
.calc-breakdown-table thead th { background: #F6F9F7; font-size: 12px; font-weight: 600; color: var(--calc-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: normal; min-width: 84px; vertical-align: bottom; }
.calc-breakdown-table tbody th { font-weight: 600; text-align: left; min-width: 180px; white-space: normal; }
.calc-breakdown-table tfoot th, .calc-breakdown-table tfoot td { font-weight: 700; background: #F6F9F7; border-bottom: 0; }
.calc-code { display: block; font-size: 12px; font-weight: 400; color: var(--calc-muted); }
.calc-strong { font-weight: 700; }
.calc-breakdown-cards { display: none; flex-direction: column; gap: 12px; }
.calc-item-card { border: 1px solid var(--calc-line); border-radius: 12px; padding: 14px 16px; background: #FAFCFB; }
.calc-item-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.calc-item-card dl { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.calc-item-card dl div { display: flex; justify-content: space-between; gap: 12px; }
.calc-item-card dt { color: var(--calc-muted); font-weight: 400; }
.calc-item-card dd { margin: 0; text-align: right; }

@media (max-width: 991px) {
  .calc-aside { position: static; }
}
@media (max-width: 640px) {
  .calc-page { padding: 16px 16px 32px; gap: 16px; }
  .calc-head h1 { font-size: 22px; }
  .calc-mode { width: 100%; }
  .calc-mode button { flex: 1; padding: 0 8px; }
  .calc-card { padding: 16px; gap: 16px; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* What-to-add and product take a full line each; qty + remove share the last. */
  .pkg-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .pkg-row > :first-child, .pkg-row > :nth-child(2) { grid-column: 1 / -1; }
  .calc-summary-big { font-size: 32px; }
  .calc-breakdown-table { display: none; }
  .calc-breakdown-cards { display: flex; }
}