/* Multi-template proposal flow: templates become repeatable services; options stay separate. */
.estimate-template-items {
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid #385064;
  border-radius: 12px;
  background: #08131c;
}
.estimate-template-items > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #2d4355;
}
.estimate-template-items > header > div:first-child { display: grid; gap: 3px; }
.estimate-template-items > header > div:last-child,
.estimate-review-add-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.estimate-template-items > header small { color: #ff9a4f; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.estimate-template-items > header h2 { margin: 0; color: #fff; font-size: 22px; }
.estimate-template-items > header p { margin: 0; color: #9fb2c4; }
.estimate-template-items button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.estimate-template-items button svg,
.estimate-review-add-actions button svg { width: 17px; height: 17px; }
.estimate-template-lines { display: grid; }
.estimate-template-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(110px, auto) auto 40px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 12px 18px;
  border-bottom: 1px solid #243949;
}
.estimate-template-line.optional { background: #111321; }
.estimate-template-line-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ff7a18;
  border-radius: 9px;
  color: #ff8a28;
  background: #21170f;
}
.estimate-template-line.optional .estimate-template-line-icon { border-color: #c44ae7; color: #de68f7; background: #1c1021; }
.estimate-template-line > div { min-width: 0; }
.estimate-template-line > div small,
.estimate-template-line > span:nth-of-type(2) small { display: block; color: #8fa4b8; font-size: 11px; text-transform: uppercase; }
.estimate-template-line > div strong { display: block; margin-top: 2px; color: #fff; font-size: 16px; }
.estimate-template-line > div p { overflow: hidden; margin: 4px 0 0; color: #9fb2c4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.estimate-template-line > span:nth-of-type(2) { text-align: right; }
.estimate-template-line > span:nth-of-type(2) strong { color: #fff; font-size: 16px; }
.estimate-template-line > button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #435a6d;
  border-radius: 7px;
  background: #101d28;
  color: #fff;
  font-weight: 700;
}
.estimate-template-line > button:hover { border-color: #ff7a18; color: #ff9a4f; }
.estimate-template-line > button.remove { width: 38px; padding: 0; color: #ff7582; }
.estimate-template-items > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  padding: 13px 20px;
  background: #0c1822;
}
.estimate-template-items > footer span { color: #b5c6d7; font-weight: 700; }
.estimate-template-items > footer strong { min-width: 120px; color: #ff8a28; font-size: 20px; text-align: right; }
.estimate-template-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  margin: 12px;
  padding: 14px 16px;
  border: 1px dashed #3b566b;
  border-radius: 9px;
  color: #8fcfff;
  background: #0b1a27;
}
.estimate-template-empty svg { flex: 0 0 20px; width: 20px; height: 20px; }
.estimate-template-empty span { display: grid; gap: 3px; }
.estimate-template-empty strong { color: #e9f4ff; }
.estimate-template-empty small { color: #a8bed1; }
.estimate-other-pricing-methods { margin: 16px 0; border: 1px solid #2f4557; border-radius: 10px; background: #08131c; }
.estimate-other-pricing-methods > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 18px; cursor: pointer; list-style: none; }
.estimate-other-pricing-methods > summary span { display: grid; gap: 2px; }
.estimate-other-pricing-methods > summary strong { color: #fff; }
.estimate-other-pricing-methods > summary small { color: #90a5b8; }
.estimate-other-pricing-methods > summary svg { color: #ff8a28; }
.estimate-other-pricing-methods[open] > summary svg { transform: rotate(180deg); }
.estimate-other-pricing-methods .estimate-service-grid { padding: 0 16px 16px; }
.estimate-review-add-actions { margin: 0 0 12px; }
.estimate-review-service.optional { border-color: #9c3bb5; }
.estimate-review-service.optional > summary { background: #151120; }
.estimate-review-service footer { display: flex; justify-content: flex-end; gap: 10px; }
.estimate-review-service footer .danger { border-color: #693642; color: #ff8b96; }
@media (max-width: 820px) {
  .estimate-template-items > header { align-items: flex-start; }
  .estimate-template-items > header > div:last-child { flex-direction: column-reverse; align-items: stretch; }
  .estimate-template-line { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .estimate-template-line > span:nth-of-type(2) { grid-column: 2; text-align: left; }
  .estimate-template-line > button:not(.remove) { grid-column: 2; justify-self: start; }
  .estimate-template-line > button.remove { grid-column: 3; grid-row: 1; }
}
@media (max-width: 560px) {
  .estimate-template-items > header { display: grid; }
  .estimate-template-items > header > div:last-child { display: grid; grid-template-columns: 1fr 1.25fr; }
  .estimate-review-add-actions { display: grid; grid-template-columns: 1fr 1.25fr; }
  .estimate-template-items > footer { justify-content: space-between; }
}